/* Styles communs du nouveau site Maison Mina Raine (accueil, Mon espace…), séparés de accueil.html le 09/10/2026.
   Style voulu par David : interface noire, aplats néon (vert acide, corail, bleu électrique, rose), titres en Anton, texte en
   Instrument Sans, coins arrondis, aucune ombre ni dégradé ni rotation, du mouvement. Chaque page ajoute ses propres styles. */
:root{
  --noir:#0B0B0E; --noir-2:#17171D; --noir-3:#24242C; --blanc:#FFFFFF; --clair:#F2F2F2;
  --gris:rgba(255,255,255,.62); --ligne:rgba(255,255,255,.12); --ligne-fort:rgba(255,255,255,.26);
  --acide:#D4FF3A; --corail:#FF4D5E; --bleu:#4D5BFF; --rose:#FF8AD8; --encre:#0B0B0E;
  --display:'Anton','Arial Narrow',Impact,system-ui,sans-serif; --body:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --vite:cubic-bezier(.2,.8,.2,1); --doux:cubic-bezier(.22,.61,.36,1);
  --marge:clamp(16px,2.2vw,32px); --rayon:26px; --entete:72px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--entete) + 16px)}
body{margin:0;background:var(--noir);color:var(--blanc);font-family:var(--body);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--acide);outline-offset:3px}
::selection{background:var(--acide);color:var(--encre)}
h1,h2,h3{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.95;margin:0;text-wrap:balance}
p{margin:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fleche{flex:none}

/* ---------- mots qui apparaissent (mêmes réglages que les annonces du studio) ---------- */
.revele .mot{display:inline-block;white-space:nowrap}
.js .revele .mot{opacity:0;filter:blur(12px);transform:translateY(.6em)}
.js .revele.vu .mot{animation:mot 1.5s var(--doux) forwards}
@keyframes mot{to{opacity:1;filter:blur(0);transform:none}}
.js .monte{opacity:0;transform:translateY(32px);transition:opacity .8s var(--doux) var(--d,0s),transform .9s var(--doux) var(--d,0s)}
.js .monte.vu{opacity:1;transform:none}

/* ---------- en-tête ---------- */
.entete{position:sticky;top:0;z-index:30;height:var(--entete);display:flex;align-items:center;gap:24px;padding:0 var(--marge);background:var(--noir);border-bottom:1px solid var(--ligne)}
/* logo du nouveau site (piste A choisie par David, 09/10/2026) : « × MAISON × » au-dessus de « MINA ✂ RAINE » en Anton, ciseaux et
   × en vert acide (images/marque, fait par scripts/dessiner-logo.py) */
.marque{display:flex;align-items:center;flex:none}
.marque img{display:block;height:44px;width:auto}
.menu{display:flex;gap:2px;margin-left:auto}
.menu a{height:42px;display:flex;align-items:center;white-space:nowrap;padding:0 16px;border-radius:999px;font-family:var(--display);font-size:17px;text-transform:uppercase;letter-spacing:.04em;color:var(--gris);transition:background .25s,color .25s}
.menu a:hover{color:var(--blanc);background:var(--noir-2)}
.menu a.vif{color:var(--acide)}
.actions{display:flex;align-items:center;gap:8px}
.rond{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--ligne-fort);transition:box-shadow .2s,color .2s}
.rond:hover{box-shadow:inset 0 0 0 1.5px var(--acide);color:var(--acide)}
.rond svg{width:20px;height:20px}
.panier{height:44px;padding:0 8px 0 18px;border-radius:999px;background:var(--blanc);color:var(--encre);display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:17px;text-transform:uppercase;letter-spacing:.04em;transition:background .25s}
.panier:hover{background:var(--acide)}
.panier b{min-width:28px;height:28px;border-radius:50%;background:var(--encre);color:var(--acide);display:grid;place-items:center;font-family:var(--body);font-size:13px;font-weight:700}
.burger{display:none}
.panier .sac{display:none;width:20px;height:20px}

/* boutons */
.btn{height:58px;display:inline-flex;align-items:center;gap:14px;border-radius:999px;font-family:var(--display);font-size:20px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;transition:transform .15s var(--vite),background-color .5s,color .5s,box-shadow .5s}
.btn:active{transform:scale(.96)}
.btn svg{width:38px;height:38px;padding:10px;border-radius:50%;transition:transform .3s var(--vite),background-color .7s var(--vite),color .7s var(--vite)}
.btn:hover svg{transform:translateX(4px)}
.btn-acide{padding:0 10px 0 26px;background:var(--acide);color:var(--encre)}
.btn-acide svg{background:var(--encre);color:var(--acide)}
.btn-acide:hover{background:var(--blanc)}
.btn-clair{padding:0 24px;box-shadow:inset 0 0 0 2px var(--ligne-fort);color:var(--blanc)}
.btn-clair:hover{box-shadow:inset 0 0 0 2px var(--acide);color:var(--acide)}

/* retours à la ligne : des lignes équilibrées, jamais un ou deux mots seuls en fin de texte (David, 10/10/2026 : « arrête tes
   largeurs de colonne barbares », « encore des retours à la ligne dégueulasses, vérifie partout »). Au-delà de 6 lignes, Chrome
   n'équilibre plus : site.js y met « pretty » (pas de mot seul). */
p,li,small,dd,dt,figcaption,blockquote,label{text-wrap:balance}
.long{text-wrap:pretty}

/* ---------- sections ---------- */
.section{padding:clamp(80px,9vw,140px) var(--marge) 0}
.tete{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,40px)}
.tete h2{font-size:clamp(56px,8vw,132px)}
.tete p{max-width:24em;color:var(--gris);font-size:19px;font-weight:500}
.lien-fleche{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:20px;text-transform:uppercase;letter-spacing:.04em;color:var(--acide)}
.lien-fleche svg{width:22px;height:22px;transition:transform .3s var(--vite)}
.lien-fleche:hover svg{transform:translateX(4px)}

/* pied de page (version 2 choisie par David, 09/10/2026 : grand logo sur fond noir) ; coordonnées et réseaux relevés dans
   Odoo (res.company, website) le 09/10/2026 */
.pied{margin:clamp(80px,9vw,140px) var(--marge) 0;padding:52px 0 26px;border-top:1px solid var(--ligne)}
.pied-haut{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px}
.pied-logo{display:block;width:min(380px,100%);height:auto}
.pied-accroche{margin:18px 0 22px;color:var(--gris);font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.pied-contact{color:var(--gris);font-size:16px;line-height:1.5}
.pied-contact p{margin:0 0 6px}
.pied-contact a{color:var(--blanc);transition:color .2s}
.pied-contact a:hover{color:var(--acide)}
.reseaux{display:flex;gap:10px;margin-top:18px}
.reseaux a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--ligne-fort);transition:box-shadow .2s,color .2s,transform .2s}
.reseaux a:hover{box-shadow:inset 0 0 0 1.5px var(--acide);color:var(--acide);transform:scale(1.06)}
.reseaux svg{width:20px;height:20px}
.pied-liens h3{margin-bottom:14px;font-size:22px;color:var(--acide)}
.pied-liens a{display:block;padding:5px 0;color:var(--gris);cursor:pointer;transition:color .2s}
.pied-liens a:hover{color:var(--blanc)}
.pied-bas{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-top:48px;padding-top:20px;border-top:1px solid var(--ligne);color:var(--gris);font-size:14px}
.tricolore{display:inline-flex;gap:4px;margin-left:8px;vertical-align:middle}
.tricolore i{width:26px;height:4px;border-radius:2px;background:#4D5BFF}
.tricolore i:nth-child(2){background:var(--blanc)}
.tricolore i:nth-child(3){background:var(--corail)}

/* ---------- tablette ---------- */
@media (max-width:1180px){
  .menu a{padding:0 11px;font-size:16px}
  .entete{gap:14px}
  .pied-haut{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pied-marque-bloc{grid-column:1/-1}
}
@media (max-width:1040px) and (min-width:861px){ .menu a{padding:0 8px;font-size:15px;letter-spacing:.02em} .marque img{height:38px} }
/* ---------- téléphone ---------- */
@media (max-width:860px){
  :root{--entete:64px;--rayon:22px}
  .marque img{height:36px}
  body{font-size:16.5px}
  .burger{display:grid;width:44px;height:44px;border-radius:50%;place-items:center;box-shadow:inset 0 0 0 1.5px var(--ligne-fort)}
  .burger span{position:relative;display:block;width:18px;height:12px}
  .burger span::before,.burger span::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .3s var(--vite),top .3s var(--vite)}
  .burger span::before{top:2px}
  .burger span::after{top:8px}
  body.menu-ouvert .burger span::before{top:5px;transform:rotate(45deg)}
  body.menu-ouvert .burger span::after{top:5px;transform:rotate(-45deg)}
  .actions{margin-left:auto}
  .rond.compte{display:none}
  .panier{padding:0 7px 0 14px;font-size:16px}
  .menu{position:fixed;inset:var(--entete) 0 0;z-index:29;flex-direction:column;gap:0;margin:0;padding:20px var(--marge) 32px;background:var(--acide);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .3s,transform .35s var(--vite),visibility 0s .35s}
  .menu a,.menu a.vif{height:auto;padding:8px 0;border-radius:0;font-size:clamp(40px,12vw,58px);color:var(--encre);background:none}
  .menu a:hover{background:none;color:var(--encre)}
  body.menu-ouvert{overflow:hidden}
  body.menu-ouvert .menu{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .35s var(--vite)}
  .btn{height:54px;font-size:18px}
  .section{padding-top:84px}
  .tete p{font-size:17px}
  .pied-haut{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
}
@media (max-width:420px){ .marque img{height:32px} .panier>span{display:none} .panier .sac{display:block} .panier{padding:0 7px 0 12px;gap:8px} }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .revele .mot{animation:none;opacity:1;filter:none;transform:none}
  .js .monte{opacity:1;transform:none;transition:none}
}
/* champ piège du formulaire de contact : invisible, les robots le remplissent */
.piege{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* newsletter dans le pied de page (11/10/2026) : une ligne, e-mail, case de consentement, bouton ; message à la place une fois envoyé */
.pied-lettre{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px 40px;align-items:center;margin-top:44px;padding-top:28px;border-top:1px solid var(--ligne)}
.pied-lettre h3{margin:0;font-size:24px;color:var(--acide)}
.pied-lettre p{margin:6px 0 0;color:var(--gris);font-size:15px;line-height:1.5}
.pied-lettre form{display:flex;flex-direction:column;gap:12px}
.pied-lettre .ligne{display:flex;gap:10px}
.pied-lettre input[type=email]{flex:1;min-width:0;height:48px;padding:0 16px;border:0;border-radius:14px;background:var(--noir-3);color:var(--blanc);font:inherit;font-size:16px;outline:0;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .2s}
.pied-lettre input[type=email]:focus{box-shadow:inset 0 0 0 1.5px var(--acide)}
.pied-lettre input.manque{box-shadow:inset 0 0 0 1.5px var(--corail)}
.pied-lettre button{height:48px;padding:0 20px;border:0;border-radius:999px;background:var(--acide);color:var(--encre);font-family:var(--display);font-size:17px;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;transition:background .2s}
.pied-lettre button:hover{background:var(--blanc)}
.pied-lettre button[disabled]{opacity:.6;cursor:progress}
.pied-lettre .consent{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.45;color:var(--gris);cursor:pointer}
.pied-lettre .consent input{margin:3px 0 0;accent-color:var(--acide)}
.pied-lettre .consent.manque{color:var(--corail)}
.pied-lettre .consent a{color:var(--blanc);text-decoration:underline;text-underline-offset:3px}
.pied-lettre .merci{margin:0;color:var(--blanc);font-size:16px;line-height:1.5}
@media (max-width:860px){.pied-lettre{grid-template-columns:minmax(0,1fr)}.pied-lettre .ligne{flex-direction:column}}