/* ══════════════════════════════════════════════════════════════════════════
   BMG CONSEIL — Design system · v4 « Le portrait comme enseigne »
   Registre : premium moderne. Le dirigeant ouvre la page, en grand.
   Contraste tonal assumé : bandes noires et ivoire alternées, un seul
   aplat bordeaux pleine largeur. Mouvement réactif, jamais décoratif.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── POLICES AUTO-HÉBERGÉES (aucune requête tierce) ────────────────────── */
@font-face{font-family:"Libre Caslon Display";font-style:normal;font-weight:400;font-display:swap;
  src:url("../assets/fonts/caslon-display-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Libre Caslon Display";font-style:normal;font-weight:400;font-display:swap;
  src:url("../assets/fonts/caslon-display-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../assets/fonts/archivo-normal-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../assets/fonts/archivo-normal-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── JETONS ────────────────────────────────────────────────────────────── */
:root{
  /* fonds */
  --noir:#0E1116;          /* bleu-noir, fond principal */
  --noir-2:#161B22;        /* élévation sur noir */
  --noir-3:#232A34;        /* bordures sur noir */
  --ivoire:#F5F3EF;        /* blanc cassé chaud */
  --ivoire-2:#EAE6DF;      /* chant, cartes sur ivoire */
  /* accent — le bordeaux du logo, en deux valeurs */
  --vin:#8D0A29;           /* valeur exacte du logo : texte, filets */
  --vin-vif:#A8123A;       /* aplat, boutons, survols */
  --vin-clair:#F5315F;     /* rouge de marque eclairci (4,9:1 sur le noir) : meme teinte 346°, saturation 80 % */
  --blanc:#FFFFFF;         /* texte sur aplat bordeaux */
  --pied:#080A0E;          /* fond du pied, sous le noir */
  --champ:rgba(255,255,255,.06);
  --champ-actif:rgba(255,255,255,.10);
  --erreur:#F3B7A6;        /* message d'erreur sur bande noire (8,4:1) */
  /* textes */
  --encre:#0E1116;         /* texte sur ivoire */
  --encre-2:#5A6069;       /* texte secondaire sur ivoire (5,6:1) */
  --clair:#F5F3EF;         /* texte sur noir */
  --clair-2:#A9B0BA;       /* texte secondaire sur noir (8,1:1) */
  --ligne:#DAD5CC;         /* filets sur ivoire */
  --ligne-noir:rgba(245,243,239,.14);
  /* typographie */
  --affichage:"Libre Caslon Display",Georgia,"Times New Roman",serif;
  --texte:"Archivo","Helvetica Neue",Arial,sans-serif;
  /* mesures */
  --large:1320px;
  --gut:44px;
  --r:14px;                /* cartes, images */
  --r-sm:10px;
  --r-focus:4px;
  --r-barre:8px;
  --pilule:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ── BASE ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:dark light;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ivoire);color:var(--encre);
  font-family:var(--texte);font-size:17px;line-height:1.6;
  caret-color:var(--vin);overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--affichage);font-weight:400;line-height:1.03;letter-spacing:-.015em;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
fieldset{border:0;padding:0;margin:0}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
:focus-visible{outline:2px solid var(--vin-vif);outline-offset:3px;border-radius:var(--r-focus)}
.noir :focus-visible,.ticker :focus-visible{outline-color:var(--vin-clair)}
::selection{background:var(--vin-vif);color:var(--blanc)}
*{scrollbar-width:thin;scrollbar-color:#5A6069 transparent}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#5A6069;border:4px solid var(--ivoire);border-radius:var(--r-barre)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:18px;top:-90px;z-index:300;background:var(--ivoire);color:var(--encre);
  padding:14px 22px;border-radius:var(--pilule);font-size:15px;font-weight:600;transition:top .25s var(--ease)}
.skip:focus{top:18px}

/* ── PRIMITIVES ────────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--large);margin:0 auto;padding:0 var(--gut);position:relative;z-index:1}
.bande{position:relative}
.noir{background:var(--noir);color:var(--clair)}
.ivoire-2{background:var(--ivoire-2)}
.sec{padding:132px 0}
.sec--serre{padding:96px 0}
.lab{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--vin)}
.noir .lab{color:var(--vin-clair)}
.lab--clair{color:var(--clair-2)}
.lead{font-size:21px;line-height:1.5;color:var(--encre-2);max-width:46ch}
.noir .lead{color:var(--clair-2)}
.note{font-size:15px;color:var(--encre-2)}
.noir .note{color:var(--clair-2)}
.titre{font-size:clamp(38px,5.4vw,74px)}
.titre--sm{font-size:clamp(30px,3.6vw,46px)}
.entete{max-width:56ch;margin-bottom:72px}
.entete h2{font-size:clamp(38px,5.4vw,74px)}
.entete p{margin-top:26px;font-size:21px;line-height:1.5;color:var(--encre-2)}
.noir .entete p{color:var(--clair-2)}
.filet{height:1px;background:var(--ligne);border:0;margin:0}
.noir .filet{background:var(--ligne-noir)}

/* ── BOUTONS ───────────────────────────────────────────────────────────── */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:56px;padding:0 30px;border-radius:var(--pilule);
  font-family:var(--texte);font-size:17px;font-weight:600;letter-spacing:.005em;
  will-change:transform;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .35s var(--ease-out);
}
.btn svg{width:19px;height:19px;flex:none;transition:transform .35s var(--ease-out)}
.btn--vin{background:var(--vin-vif);color:var(--blanc)}
.btn--vin:hover{background:var(--vin)}
.btn--vin:hover svg{transform:translateX(4px)}
.btn--fantome{color:var(--clair);border:1.5px solid currentColor}
.btn--fantome:hover{background:var(--clair);color:var(--noir);border-color:var(--clair)}
.ivoire .btn--fantome,.ivoire-2 .btn--fantome{color:var(--encre)}
.ivoire .btn--fantome:hover,.ivoire-2 .btn--fantome:hover{background:var(--encre);color:var(--ivoire);border-color:var(--encre)}
.lien{display:inline-flex;align-items:center;gap:9px;font-weight:600;border-bottom:1.5px solid currentColor;padding-bottom:3px;transition:color .25s var(--ease)}
.lien svg{width:17px;height:17px;transition:transform .3s var(--ease-out)}
.lien:hover{color:var(--vin-vif)}
.noir .lien:hover{color:var(--vin-clair)}
.lien:hover svg{transform:translateX(4px)}

/* ── MANCHETTE ─────────────────────────────────────────────────────────── */
.masthead{
  position:fixed;top:0;left:0;right:0;z-index:100;color:var(--clair);
  transition:background .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;background:transparent;
}
.masthead__in{display:flex;align-items:center;gap:34px;padding-block:20px}
.masthead.solide{background:var(--noir);border-bottom-color:var(--ligne-noir)}
.masthead.solide .masthead__in{padding-block:13px}
.masthead.sur-clair{background:var(--ivoire);border-bottom-color:var(--ligne);color:var(--encre)}
.brand{display:flex;align-items:center;gap:14px;flex:none;color:var(--clair)}
.masthead.sur-clair .brand{color:var(--encre)}
.brand__mark{height:34px;width:auto;transform-origin:left center;transition:transform .4s var(--ease)}
.masthead.solide .brand__mark{transform:scale(.85)}
.brand__mark--clair{display:block}
.brand__mark--sombre{display:none}
.masthead.sur-clair .brand__mark--clair{display:none}
.masthead.sur-clair .brand__mark--sombre{display:block}
.brand__txt{border-left:1px solid currentColor;padding-left:14px;line-height:1.15;opacity:.95}
.brand__nom{display:block;font-family:var(--affichage);font-size:21px;letter-spacing:.005em}
.brand__sous{display:block;font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;opacity:.62;margin-top:2px}
.nav{display:flex;gap:30px;margin-left:auto}
.nav a{position:relative;font-size:15px;font-weight:600;white-space:nowrap;opacity:.78;transition:opacity .25s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
.nav a:hover,.nav a[aria-current="true"]{opacity:1}
.nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1)}
.masthead__cta{display:flex;align-items:center;gap:20px;flex:none}
.masthead__tel{font-size:15px;font-weight:600;white-space:nowrap;opacity:.85;transition:opacity .25s}
.masthead__tel:hover{opacity:1}
.masthead .btn{min-height:46px;padding:0 24px;font-size:15px}
.rdv-court{display:none}
.masthead__appel{display:none;width:52px;height:52px;align-items:center;justify-content:center;border:1.5px solid currentColor;border-radius:var(--pilule);opacity:.85;transition:opacity .25s var(--ease)}
.masthead__appel svg{width:19px;height:19px}
.masthead__appel:hover{opacity:1}
.burger{display:none;width:52px;height:52px;border:1.5px solid currentColor;border-radius:var(--pilule);position:relative}
.burger i{position:absolute;left:50%;top:50%;width:22px;height:2px;margin:-1px 0 0 -11px;background:currentColor;
  border-radius:var(--r-focus);transition:transform .35s var(--ease),opacity .2s}
.burger i:nth-child(1){transform:translateY(-7px)}
.burger i:nth-child(3){transform:translateY(7px)}
.burger[aria-expanded="true"] i:nth-child(1){transform:rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:rotate(-45deg)}
.panneau{display:none}

/* ── HERO : le portrait comme enseigne ─────────────────────────────────── */
.hero{position:relative;background:var(--noir);color:var(--clair);overflow:hidden;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;padding:132px 0 0}
.hero__grille{display:grid;grid-template-columns:1.04fr .96fr;gap:72px;align-items:center;padding:40px 0 52px}
.hero__txt{padding-bottom:26px}
.hero h1{font-size:clamp(46px,7vw,104px);line-height:.98;letter-spacing:-.025em}
.hero h1 em{font-style:italic;color:var(--vin-clair)}
.hero__lead{margin-top:34px;font-size:21px;line-height:1.45;color:var(--clair-2);max-width:36ch}
.hero__act{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px}
.hero__contact{margin-top:38px;padding-top:28px;border-top:1px solid var(--ligne-noir);display:flex;flex-wrap:wrap;gap:10px 32px;font-size:17px;color:var(--clair-2)}
.hero__contact a{font-weight:600;color:var(--clair);border-bottom:1.5px solid transparent;transition:border-color .25s}
.hero__contact a:hover{border-bottom-color:var(--vin-clair)}
.hero__vue{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center}
.hero__cadre{
  position:relative;width:100%;max-width:430px;max-height:min(66svh,620px);margin:0;border-radius:24px;overflow:hidden;
  background:var(--noir-2);clip-path:inset(0 0 100% 0);
}
.hero__cadre img{width:100%;height:100%;aspect-ratio:53/75;object-fit:cover;object-position:50% 22%;
  transform:scale(1.02);animation:breathe 22s ease-in-out infinite alternate}
.hero__cadre::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(14,17,22,0) 52%,rgba(14,17,22,.72) 100%)}
@keyframes breathe{from{transform:scale(1.02)}to{transform:scale(1.075)}}
.hero__legende{position:absolute;left:26px;right:26px;bottom:24px;z-index:2;display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--clair)}
.hero__legende b{font-family:var(--affichage);font-size:19px;font-weight:400;letter-spacing:0}
.hero__legende span{color:var(--vin-clair);font-weight:700}
.hero__bas{border-top:1px solid var(--ligne-noir);background:rgba(245,243,239,.03)}
.hero__bas ul{display:grid;grid-template-columns:repeat(4,1fr)}
.hero__bas li{padding:26px 26px 30px 26px;border-right:1px solid var(--ligne-noir)}
.hero__bas li:first-child{padding-left:0}
.hero__bas li:last-child{border-right:0}
.hero__bas .hero__chiffre{font-family:var(--affichage);font-size:clamp(28px,3.2vw,44px);line-height:1.02;color:var(--clair);margin-top:0}
/* les libellés tiennent une ou deux lignes selon leur longueur : on réserve
   deux lignes sur ordinateur pour que les descriptions démarrent à la même hauteur */
@media (min-width:761px){.hero__bas .hero__chiffre{min-height:2.04em}}
.hero__bas p{margin-top:10px;font-size:15px;color:var(--clair-2);max-width:28ch}

/* ── BANDEAU DÉFILANT (l'aplat bordeaux) ───────────────────────────────── */
.ticker{background:var(--vin-vif);color:var(--blanc);overflow:hidden;padding:26px 0;position:relative}
.ticker__piste{display:flex;align-items:center;gap:56px;width:max-content;animation:marquee 34s linear infinite}
.ticker:hover .ticker__piste{animation-play-state:paused}
.ticker span{color:var(--blanc);font-family:var(--affichage);font-size:clamp(30px,3.6vw,46px);letter-spacing:-.01em;white-space:nowrap}
.ticker i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.6);flex:none}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ── SERVICES : cartes qui se remplissent ──────────────────────────────── */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc__c{
  position:relative;background:var(--ivoire-2);border-radius:var(--r);padding:40px 34px 44px;
  overflow:hidden;isolation:isolate;color:var(--encre);
  transition:color .35s var(--ease),transform .45s var(--ease-out);
}
.svc__c::before{content:"";position:absolute;inset:0;background:var(--vin-vif);transform:scaleY(0);transform-origin:bottom;
  transition:transform .55s var(--ease-out);z-index:0}
.svc__c:hover,.svc__c:focus-within{color:var(--blanc)}
.svc__c:hover::before,.svc__c:focus-within::before{transform:scaleY(1)}
.svc__c>*{position:relative;z-index:1}
.svc__c .svc__n{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.svc__c h3{margin:22px 0 14px;font-size:clamp(22px,2.2vw,30px)}
.svc__c p{font-size:17px;line-height:1.55;opacity:.82}
.svc__l{margin-top:24px;display:grid;gap:9px}
.svc__l li{position:relative;padding-left:20px;font-size:15px;opacity:.82}
.svc__l li::before{content:"";position:absolute;left:0;top:.66em;width:9px;height:1.5px;background:currentColor;opacity:.7}
.svc__c .lien{margin-top:26px;font-size:15px;opacity:.9}

/* ── APPROCHE : chiffres énormes, filet qui se remplit ─────────────────── */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;margin-top:20px}
.etape{position:relative;padding-top:34px}
.etape::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--ligne-noir)}
.etape::after{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--vin-clair);
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out)}
.etape.in::after{transform:scaleX(1)}
.etape__n{font-family:var(--affichage);font-size:clamp(52px,6vw,86px);line-height:.85;color:var(--vin-clair);display:block}
.etape h3{margin:20px 0 12px;font-family:var(--affichage);font-size:clamp(22px,2.2vw,30px);font-weight:400}
.etape p{font-size:17px;color:var(--clair-2);max-width:30ch}

/* ── POUR QUI : onglets ────────────────────────────────────────────────── */
.onglets{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:52px}
.onglet{
  padding:13px 24px;border-radius:var(--pilule);border:1.5px solid var(--ligne);background:transparent;
  font-size:15px;font-weight:600;color:var(--encre-2);transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.onglet:hover{border-color:var(--encre);color:var(--encre)}
.onglet[aria-selected="true"]{background:var(--encre);color:var(--ivoire);border-color:var(--encre)}
.panneaux{margin-top:8px}
.panneau[hidden]{display:none}
.panneau__g{display:grid;grid-template-columns:1.12fr .88fr;gap:76px;align-items:start}
.panneau h3{font-size:clamp(30px,3.6vw,46px);max-width:24ch}
.panneau__p{margin-top:26px;font-size:19px;line-height:1.55;color:var(--encre-2);max-width:54ch}
.panneau__l{margin-top:30px;display:grid;gap:12px}
.panneau__l li{position:relative;padding-left:26px;font-size:17px}
.panneau__l li::before{content:"";position:absolute;left:0;top:.68em;width:12px;height:2px;background:var(--vin-vif)}
.carte-cta{background:var(--noir);color:var(--clair);border-radius:var(--r);padding:38px 34px}
.carte-cta dl{margin:0;display:grid;gap:22px}
.carte-cta dt{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--clair-2);margin-bottom:7px}
.carte-cta dd{margin:0;font-family:var(--affichage);font-size:21px;color:var(--clair)}
.carte-cta .btn{width:100%;margin-top:32px}
@keyframes swap{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.panneau.affiche{display:block;animation:swap .5s var(--ease-out) both}
.panneau.affiche[hidden]{display:none}

/* ── L'ANALYSE ─────────────────────────────────────────────────────────── */
.ana{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r);overflow:hidden;background:var(--ivoire-2)}
.ana__q{padding:44px 40px 46px}
.ana__dem{margin-bottom:32px}
.ana__dem--fin{margin-bottom:0}
.ana__dem legend{padding:0;margin-bottom:18px;font-family:var(--affichage);font-size:24px}
.ana__opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt label{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:var(--pilule);
  border:1.5px solid var(--ligne);background:var(--ivoire);font-size:15px;cursor:pointer;
  transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.opt label:hover{border-color:var(--encre)}
.opt input:checked+label{background:var(--encre);border-color:var(--encre);color:var(--ivoire);font-weight:600}
.opt input:focus-visible+label{outline:2px solid var(--vin-vif);outline-offset:2px}
.ana__go{margin-top:32px;width:100%}
.ana__r{padding:44px 40px;background:var(--noir);color:var(--clair);display:flex;flex-direction:column}
.ana__vide{color:var(--clair-2);font-size:17px;max-width:34ch;margin-top:auto;margin-bottom:auto}
.ana__vide b{display:block;font-family:var(--affichage);font-size:24px;color:var(--clair);margin-bottom:12px;font-weight:400}
.ana__sortie{display:none}
.ana__sortie.on{display:block;animation:swap .5s var(--ease-out) both}
.ana__tag{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--vin-clair)}
.ana__t{margin-top:18px;font-family:var(--affichage);font-size:clamp(30px,3.6vw,46px)}
.ana__p{margin-top:18px;font-size:17px;color:var(--clair-2);line-height:1.55}
.ana__l{margin-top:26px;padding-top:26px;border-top:1px solid var(--ligne-noir);display:grid;gap:12px}
.ana__l li{position:relative;padding-left:24px;font-size:17px}
.ana__l li::before{content:"";position:absolute;left:0;top:.7em;width:11px;height:1.5px;background:var(--vin-clair)}
.ana__cta{margin-top:auto;padding-top:34px}
.ana__cta .btn{width:100%}
.ana__ref{margin-top:14px;font-size:15px;color:var(--clair-2);text-decoration:underline;text-underline-offset:3px}
.ana__ref:hover{color:var(--clair)}

/* ── L'INTERLOCUTEUR (texte, sans photo) ───────────────────────────────── */
.mot{max-width:26ch;font-size:clamp(38px,5.4vw,74px);line-height:1.08}
.mot em{font-style:italic;color:var(--vin-clair)}
.mot__grille{display:grid;grid-template-columns:1.1fr .9fr;gap:76px;align-items:end}
.mot__txt p{font-size:19px;line-height:1.65;color:var(--clair-2);max-width:52ch}
.mot__txt p+p{margin-top:20px}
.mot__txt .mot__sig{margin-top:40px;display:flex;align-items:center;gap:20px;font-family:var(--affichage);font-size:21px;color:var(--clair)}
.mot__sig i{width:52px;height:1px;background:var(--vin-clair)}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq{margin-top:8px}
.faq__i{border-bottom:1px solid var(--ligne)}
.faq__i:first-child{border-top:1px solid var(--ligne)}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:34px;padding:30px 0;
  font-family:var(--affichage);font-size:clamp(24px,2.4vw,33px);transition:color .25s var(--ease)}
.faq__q:hover{color:var(--vin-vif)}
.faq__sign{position:relative;width:36px;height:36px;flex:none;border-radius:50%;border:1.5px solid currentColor;transition:background .3s var(--ease),border-color .3s var(--ease)}
.faq__sign i{position:absolute;background:currentColor;transition:transform .35s var(--ease),background .3s var(--ease)}
.faq__sign i:first-child{left:10px;right:10px;top:17px;height:1.5px}
.faq__sign i:last-child{top:10px;bottom:10px;left:17px;width:1.5px}
.faq__i[open] .faq__q{color:var(--vin-vif)}
.faq__i[open] .faq__sign{background:var(--vin-vif);border-color:var(--vin-vif)}
.faq__i[open] .faq__sign i{background:var(--blanc)}
.faq__i[open] .faq__sign i:last-child{transform:scaleY(0)}
.faq__a{padding:0 0 36px;max-width:76ch}
.faq__a p{font-size:17px;color:var(--encre-2);line-height:1.65}
.faq__a p+p{margin-top:16px}

/* ── CONTACT ───────────────────────────────────────────────────────────── */
.contact__g{display:grid;grid-template-columns:.92fr 1.08fr;gap:80px;align-items:start}
.contact__c{margin-top:48px;display:grid;gap:26px}
.contact__c a,.contact__c span{font-family:var(--affichage);font-size:clamp(22px,2.2vw,30px)}
.contact__c a{transition:color .25s}
.contact__c a:hover{color:var(--vin-clair)}
.contact__c dd{margin:0}

/* Le lien WhatsApp vivait hors du bloc .reseaux, qui était seul à dimensionner les icônes :
   sans taille, son SVG s'étirait à la largeur du conteneur (530 px au lieu de 18). */
/* les liens internes doivent s'arreter SOUS la manchette fixe, sinon elle recouvre
   le titre de la section ou le formulaire qu'on vient de demander */
section[id],#form{scroll-margin-top:118px}

.contact__wa{display:inline-flex;align-items:center;gap:11px;margin-top:30px;font-size:15px;font-weight:600;
  color:var(--clair);border-bottom:1.5px solid var(--vin-clair);padding-bottom:3px;
  transition:color .25s var(--ease)}
.contact__wa:hover{color:var(--vin-clair)}
.contact__wa svg{width:18px;height:18px;flex:none}
.contact__c dt{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--clair-2);margin-bottom:9px}
.contact__c dl{margin:0;display:grid;gap:26px}
.reseaux{display:flex;flex-wrap:wrap;gap:10px;margin-top:44px}
.reseaux a{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 20px;border-radius:var(--pilule);
  border:1.5px solid var(--ligne-noir);font-size:15px;font-weight:600;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.reseaux a:hover{background:var(--ivoire);color:var(--noir);border-color:var(--ivoire)}
.reseaux svg{width:17px;height:17px;flex:none}
.form{background:var(--noir-2);border:1px solid var(--ligne-noir);border-radius:var(--r);padding:40px}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.champ{display:flex;flex-direction:column;gap:9px}
.champ--large{grid-column:1/-1}
.champ label{font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--clair-2)}
.champ .req{color:var(--vin-clair)}
.champ input,.champ select,.champ textarea{
  font-family:var(--texte);font-size:17px;color:var(--clair);background:var(--champ);
  border:1.5px solid var(--ligne-noir);border-radius:var(--r-sm);padding:15px 17px;min-height:56px;width:100%;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.champ textarea{min-height:130px;resize:vertical}
.champ select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,rgba(245,243,239,.75) 50%),linear-gradient(135deg,rgba(245,243,239,.75) 50%,transparent 50%);
  background-position:calc(100% - 22px) 25px,calc(100% - 17px) 25px;background-size:5px 5px;background-repeat:no-repeat}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--vin-clair);background:var(--champ-actif)}

/* meme specificite que la regle ci-dessus : c'est donc l'ordre qui tranche, et ce bloc
   doit venir APRES. Les champs gagnent le meme contour net que le reste du site. */
.champ input:focus-visible,.champ select:focus-visible,.champ textarea:focus-visible{
  outline:2px solid var(--vin-clair);outline-offset:2px}
.champ input::placeholder,.champ textarea::placeholder{color:rgba(245,243,239,.42)}
.form .btn{width:100%;margin-top:30px}
.form .note{margin-top:18px}
/* champ leurre anti-robot : invisible pour un humain, rempli par les robots */
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* marqueur « facultatif » sur un libellé de champ */
.champ .fac{color:var(--clair-2);font-weight:400;font-size:11.5px;letter-spacing:.04em;text-transform:none}

/* confirmation d'envoi */
.note.ok{color:var(--clair)}
.btn[disabled]{opacity:.6;cursor:progress}
.note.erreur{color:var(--erreur)}

/* ── PIED ──────────────────────────────────────────────────────────────── */
.pied{background:var(--pied);color:var(--clair);padding:76px 0 44px}
.pied__h{display:grid;grid-template-columns:1.35fr .75fr .75fr 1fr;gap:48px}
.pied__marque{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.pied__marque img{height:46px;width:auto}
.pied__enseigne{border-left:1px solid var(--ligne-noir);padding-left:15px;line-height:1.15}
.pied__enseigne-nom{display:block;font-family:var(--texte);font-size:15px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--clair)}
.pied__enseigne-sous{display:block;font-family:var(--texte);font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--clair-2);margin-top:5px}
.pied__slog{font-family:var(--affichage);font-size:clamp(22px,2.2vw,30px);line-height:1.25;max-width:22ch}
.pied__slog em{display:block;font-style:normal;font-size:17px;color:var(--vin-clair);margin-top:12px;font-family:var(--texte);font-weight:600}
.pied h3{font-size:12.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--clair-2);margin-bottom:20px;font-family:var(--texte)}
.pied ul{display:grid;gap:13px}
.pied li a,.pied__t{font-size:17px;color:var(--clair)}
.pied li a{transition:color .25s}
.pied li a:hover{color:var(--vin-clair)}
.pied__b{display:flex;flex-wrap:wrap;gap:14px 34px;justify-content:space-between;align-items:center;
  margin-top:56px;padding-top:28px;border-top:1px solid var(--ligne-noir);font-size:15px;color:var(--clair-2)}
.pied__b nav{display:flex;flex-wrap:wrap;gap:26px}
.pied__b a:hover{color:var(--clair)}

/* ── MOUVEMENT ─────────────────────────────────────────────────────────── */
.revele{opacity:0;transform:translateY(20px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.revele.in{opacity:1;transform:none}
.hero h1,.hero__lead,.hero__act,.hero__contact{opacity:0;transform:translateY(30px);
  animation:lever .95s var(--ease-out) forwards}
.hero h1{animation-delay:.22s}
.hero__lead{animation-delay:.36s}
.hero__act{animation-delay:.48s}
.hero__contact{animation-delay:.58s}
@keyframes lever{to{opacity:1;transform:none}}
.cadre-vu .hero__cadre{clip-path:inset(0 0 0 0)}
.hero__cadre{transition:clip-path 1.15s var(--ease-out) .15s}
@media (prefers-reduced-motion:reduce){
  /* on neutralise toute animation et toute transition, partout — pas seulement sur les
     trois elements auxquels on avait pense. La duree est reduite au lieu d'etre supprimee
     pour que l'etat final des animations d'apparition soit bien applique. */
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
    scroll-behavior:auto !important;
  }
  /* etat final garanti, meme sans animation */
  .revele{opacity:1;transform:none}
  .hero h1,.hero__lead,.hero__act,.hero__contact{opacity:1;transform:none}
  .hero__cadre{clip-path:none}
  .hero__cadre img{transform:none;animation:none}
  .ticker__piste{transform:none;animation:none}
  .etape::after{transform:scaleX(1)}
}

/* ── RESPONSIVE ────────────────────────────────────────────────────────── */
@media (max-width:1240px){
  .nav{gap:22px}
  .nav a{font-size:15px}
}
@media (max-width:1080px){
  :root{--gut:32px}
  .hero{min-height:auto;padding-top:120px}
  .hero__grille{grid-template-columns:1fr;gap:52px;align-items:start}
  .hero__cadre{max-width:420px;border-radius:24px}
  .hero__bas ul{grid-template-columns:1fr 1fr}
  .hero__bas li:nth-child(2n){border-right:0}
  .hero__bas li:nth-child(-n+2){border-bottom:1px solid var(--ligne-noir)}
  .svc{grid-template-columns:1fr 1fr}
  .etapes{grid-template-columns:1fr 1fr;gap:40px 34px}
  .panneau__g,.ana,.mot__grille,.contact__g{grid-template-columns:1fr}
  .ana__r{min-height:340px}
  .pied__h{grid-template-columns:1fr 1fr;gap:40px}
  .nav,.masthead__tel{display:none}
  .masthead__in{gap:12px}
  .masthead__cta{gap:10px}
  .brand__mark{height:30px}
  .masthead .masthead__rdv{display:inline-flex;min-height:44px;padding:0 15px;font-size:13.5px;gap:8px;white-space:nowrap}
  .masthead .masthead__rdv svg{width:16px;height:16px}
  .burger{display:block;width:44px;height:44px}
  .burger i{width:20px;margin-left:-10px}
  .burger i:nth-child(1){transform:translateY(-6px)}
  .burger i:nth-child(3){transform:translateY(6px)}
  .masthead__cta{margin-left:auto}
  #panneau.open{display:block;background:var(--noir);color:var(--clair);border-top:1px solid var(--ligne-noir);padding:14px var(--gut) 30px}
  #panneau a:not(.btn){display:block;padding:18px 0;font-size:19px;font-weight:600;border-bottom:1px solid var(--ligne-noir)}
  #panneau .btn{width:100%;margin-top:22px;border-bottom:0}
  }
@media (max-width:340px){
  .brand__mark{height:26px}
  .masthead .masthead__rdv{padding:0 12px;font-size:13px}
}
@media (max-width:380px){
  .rdv-long{display:none}
  .rdv-court{display:inline}
}
@media (max-width:760px){
  :root{--gut:22px}
  .sec{padding:92px 0}
  .hero{padding-top:104px}
  .hero h1{font-size:clamp(46px,7vw,104px)}
  .hero__lead{font-size:19px}
  .hero__act .btn{width:100%}
  .hero__bas ul{grid-template-columns:1fr}
  .hero__bas li{border-right:0;border-bottom:1px solid var(--ligne-noir);padding:20px 0 22px}
  .hero__bas li:last-child{border-bottom:0}
  .svc{grid-template-columns:1fr}
  .etapes{grid-template-columns:1fr}
  .ana__opts{grid-template-columns:1fr}
  .ana__q,.ana__r{padding:30px 24px}
  .form{padding:26px 20px}
  .champs{grid-template-columns:1fr}
  .pied__h{grid-template-columns:1fr}
  .pied__b{justify-content:flex-start}
  .brand__txt{display:none}
  .entete{margin-bottom:52px}
  .hero__legende{flex-direction:column;align-items:flex-start;gap:3px;left:20px;right:20px;bottom:18px}
}
@media print{
  .masthead,.panneau,.burger,.ana,.reseaux,.hero__bas{display:none}
  body{background:var(--blanc);color:#000}
  a[href]::after{content:" (" attr(href) ")";font-size:11.5px}
}


/* ══════════════════════════════════════════════════════════════════════════
   PAGES ANNEXES — mentions légales, confidentialité
   Même socle visuel que l'accueil, mais en lecture longue.
   ══════════════════════════════════════════════════════════════════════════ */


/* le lien de saut existe deja (.skip), mais sa pastille ivoire disparaitrait sur une page claire */
.page .skip{background:var(--vin);color:var(--blanc)}

.page{background:var(--ivoire);color:var(--encre);min-height:100vh;display:flex;flex-direction:column}
.page__entete{border-bottom:1px solid var(--ligne);padding:18px 0;background:var(--ivoire)}
.page__in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.page .brand__mark--clair{display:none}
.page .brand__mark--sombre{display:block}
.page__entete .brand__txt{padding-left:14px}
/* la marque est dessinée pour un fond sombre : sur une page claire, on repasse
   les deux lignes en pleine opacité et dans les gris de lecture (contraste vérifié) */
.page .brand__sous{opacity:1;color:var(--encre-2)}
.page .brand__nom{opacity:1}
.page__retour{font-size:15px;font-weight:600;color:var(--encre);white-space:nowrap}
.page__retour:hover{color:var(--vin)}
.page__corps{flex:1;padding:72px 0 104px;max-width:720px}
.page h1{font-family:var(--affichage);font-weight:400;font-size:clamp(34px,5vw,50px);line-height:1.06;letter-spacing:-.5px;margin-bottom:18px}
.page__chapo{font-size:19px;line-height:1.6;color:var(--encre-2);margin-bottom:52px}
.page h2{font-family:var(--texte);font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--vin);margin:48px 0 16px;padding-top:26px;border-top:1px solid var(--ligne)}
.page h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
.page p,.page li{font-size:16.5px;line-height:1.72;color:var(--encre-2);margin-bottom:15px}
.page ul{padding-left:20px;list-style:none;margin-bottom:18px}
.page li{position:relative;margin-bottom:9px}
.page li::before{content:"";position:absolute;left:-20px;top:11px;width:7px;height:1px;background:var(--vin)}
.page strong{color:var(--encre);font-weight:600}
.page a{color:var(--vin);text-decoration:underline;text-underline-offset:3px}
.page a:hover{color:var(--vin-vif)}
.page dl{margin:0 0 18px}
.page dt{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--encre);margin-bottom:4px}
.page dd{font-size:16.5px;line-height:1.7;color:var(--encre-2);margin:0 0 16px}
/* ce qui reste à fournir par le cabinet — visible pour ne rien oublier avant la mise en ligne */
.a-completer{background:rgba(141,10,41,.05);border-left:3px solid var(--vin);padding:16px 20px;margin:0 0 20px}
.a-completer p{font-size:15.5px;margin:0;color:var(--encre-2)}
.a-completer b{color:var(--vin)}
.page__pied{border-top:1px solid var(--ligne);padding:30px 0;font-size:14.5px;color:var(--encre-2)}
.page__pied .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.page__pied a{color:var(--encre-2)}
.page__pied a:hover{color:var(--vin)}
@media (max-width:760px){
  .page__corps{padding:48px 0 72px}
  .page__entete{padding:14px 0}
  .page__retour{font-size:14px}
}