/* ==========================================================================
   LICÉA CLINIC — Feuille de style
   Charte : bleu nuit #1C3A4A · beige sable #E8DFD3 · blanc cassé #FAF7F2
            vert sauge #8A9A8B · taupe #6B6259 · or vieilli #B8985A
   Typos  : Cormorant Garamond (titres) · Montserrat (textes)
   ========================================================================== */

:root{
  --nuit:#1C3A4A;
  --nuit-clair:#28505f;
  --sable:#E8DFD3;
  --sable-clair:#F2EBE1;
  --creme:#FAF7F2;
  --sauge:#8A9A8B;
  --taupe:#6B6259;
  --or:#B8985A;
  --or-clair:#d0b681;
  --blanc:#ffffff;

  --texte:#3a3a38;
  --texte-doux:#6B6259;

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --max:1180px;
  --max-texte:760px;
  --gout:clamp(64px,9vw,128px); /* respiration verticale entre blocs */
  --ombre:0 18px 50px -28px rgba(28,58,74,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--creme);color:var(--texte);
  font-family:var(--sans);font-size:16.5px;line-height:1.75;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}

/* ---------- Typographie ------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.15;margin:0;color:var(--nuit);letter-spacing:.005em}
h1{font-size:clamp(2.4rem,5.6vw,4.4rem)}
h2{font-size:clamp(1.85rem,3.9vw,3rem)}
h3{font-size:clamp(1.35rem,2.4vw,1.85rem)}
h4{font-size:clamp(1.1rem,1.8vw,1.3rem)}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

/* Petites majuscules espacées : la signature du site */
.surtitre{
  font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.32em;text-transform:uppercase;color:var(--or);
  margin:0 0 1.4rem;display:block;
}
.surtitre--clair{color:var(--or-clair)}
.legende{font-size:.82rem;line-height:1.7;color:var(--texte-doux);font-style:italic}
.lead{font-size:clamp(1.02rem,1.5vw,1.16rem);line-height:1.85}

/* Phrase-manifeste : les grandes lignes en capitales du document */
.manifeste{
  font-family:var(--serif);font-size:clamp(1.5rem,3.1vw,2.35rem);line-height:1.32;
  text-transform:uppercase;letter-spacing:.04em;color:var(--nuit);
  max-width:22ch;margin-inline:auto;text-align:center;
}
.manifeste--large{max-width:32ch}
.manifeste--clair{color:var(--creme)}

/* ---------- Structure --------------------------------------------------- */
.section{padding:var(--gout) 24px}
.section--serre{padding-block:calc(var(--gout) * .62)}
.wrap{max-width:var(--max);margin-inline:auto}
.wrap--texte{max-width:var(--max-texte);margin-inline:auto}
.centre{text-align:center}
.section--nuit{background:var(--nuit);color:#d3cec5}
.section--nuit p,.section--nuit .lead{color:#c6c1b8}
.section--nuit .legende{color:#a5a199}
.section--nuit strong{color:var(--creme)}
.section--nuit h2,.section--nuit h3,.section--nuit h4{color:var(--creme)}
.section--sable{background:var(--sable-clair)}
.section--blanc{background:var(--blanc)}

.filet{width:56px;height:1px;background:var(--or);border:0;margin:0 0 1.6rem}
.filet--centre{margin-inline:auto}

/* Flèche de liaison entre blocs (le "↓" du document source) */
.liaison{display:flex;justify-content:center;padding:8px 0 calc(var(--gout) * .5)}
.liaison span{
  font-size:1.4rem;color:var(--or);line-height:1;
  animation:flotte 2.8s ease-in-out infinite;
}
@keyframes flotte{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(9px);opacity:1}}

/* ---------- En-tête ----------------------------------------------------- */
.entete{
  position:sticky;top:0;z-index:60;
  background:rgba(28,58,74,.97);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(184,152,90,.28);
}
.entete__in{
  max-width:var(--max);margin-inline:auto;padding:14px 24px;
  display:flex;align-items:center;gap:18px;
}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
/* Monogramme « L. » de la charte (logo secondaire), en image */
.logo__mono{height:42px;width:auto;flex:0 0 auto;display:block}
.logo__nom{font-family:var(--serif);font-size:1.25rem;color:var(--creme);letter-spacing:.16em;text-transform:uppercase;line-height:1.1}
.logo__nom small{display:block;font-family:var(--sans);font-size:.52rem;letter-spacing:.3em;color:var(--sauge);margin-top:3px}

.nav{margin-left:auto;display:flex;align-items:center;gap:18px}
.nav a{
  font-size:.71rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
  color:#d8d3c9;text-decoration:none;padding:6px 0;position:relative;transition:color .25s;
  white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--or);transition:right .3s ease;
}
.nav a:hover{color:var(--creme)}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.nav a[aria-current="page"]{color:var(--or-clair)}

.burger{
  display:none;margin-left:auto;background:none;border:0;cursor:pointer;
  padding:10px;width:44px;height:44px;
}
.burger span{display:block;height:1.5px;background:var(--creme);margin:5px 0;transition:.3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- Boutons ----------------------------------------------------- */
.btn{
  display:inline-block;font-family:var(--sans);font-size:.74rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  padding:16px 34px;border:1px solid var(--or);color:var(--nuit);background:transparent;
  transition:background .3s,color .3s,transform .3s;cursor:pointer;text-align:center;
}
.btn:hover{background:var(--or);color:var(--blanc);transform:translateY(-2px)}
.btn--plein{background:var(--or);color:var(--blanc)}
.btn--plein:hover{background:var(--nuit);border-color:var(--nuit)}
.btn--clair{color:var(--creme);border-color:var(--or)}
.btn--clair:hover{background:var(--or);color:var(--nuit)}
.btn--nuit{background:var(--nuit);border-color:var(--nuit);color:var(--creme)}
.btn--nuit:hover{background:var(--or);border-color:var(--or);color:var(--blanc)}
.btn--mini{padding:12px 22px;font-size:.68rem}
.nav .btn--mini{padding:10px 16px;font-size:.62rem;letter-spacing:.09em;border:0;color:var(--blanc)}
.nav .btn--mini:hover{color:var(--blanc)}
.btns{display:flex;flex-wrap:wrap;gap:16px}
.btns--centre{justify-content:center}

.lien-fleche{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  color:var(--nuit);border-bottom:1px solid var(--or);padding-bottom:5px;transition:gap .25s,color .25s;
}
.lien-fleche:hover{gap:15px;color:var(--or)}

/* ---------- Hero -------------------------------------------------------- */
.hero{
  position:relative;min-height:min(88vh,760px);display:flex;align-items:center;
  background:var(--nuit);color:var(--creme);padding:120px 24px 96px;overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;opacity:.92}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(14,30,39,.86) 0%,rgba(14,30,39,.62) 50%,rgba(14,30,39,.36) 100%);
}
.hero__in{position:relative;z-index:1;max-width:var(--max);margin-inline:auto;width:100%;
  text-shadow:0 1px 24px rgba(12,28,37,.55)}
.hero__in>*{max-width:20ch}
.hero h1{color:var(--creme);max-width:16ch}
.hero p{max-width:52ch;color:#ded9d0}
.hero--centre{text-align:center}
.hero--centre .hero__in>*{max-width:none}
.hero--centre h1,.hero--centre .manifeste{margin-inline:auto}
.hero--centre p{margin-inline:auto}
.hero__sous{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--sauge);margin-top:1.6rem;
}
.hero--court{min-height:auto;padding:104px 24px 84px}

/* Cadre filet doré — rappel des visuels Instagram de la charte */
.cadre{border:1px solid rgba(184,152,90,.4);padding:clamp(28px,5vw,56px)}

/* ---------- Duo visage / corps ------------------------------------------ */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--sable)}
.duo__carte{
  position:relative;background:var(--blanc);padding:0;overflow:hidden;
  display:flex;flex-direction:column;
}
.duo__img{position:relative;aspect-ratio:4/3;background:var(--sable);overflow:hidden}
.duo__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s ease}
.duo__carte:hover .duo__img img{transform:scale(1.045)}
.duo__txt{padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;flex:1;align-items:flex-start}
.duo__txt h3{margin-bottom:1rem}
.duo__txt p{flex:1}
.duo__txt .btn{margin-top:1.8rem}

/* ---------- Étapes numérotées ------------------------------------------- */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:3rem 0}
.etape{padding:34px 26px;border-left:1px solid rgba(184,152,90,.3)}
.etape:first-child{border-left:0;padding-left:0}
.etape__num{
  font-family:var(--serif);font-size:2.6rem;color:var(--or);line-height:1;display:block;margin-bottom:.7rem;
}
.etape h4{
  font-family:var(--sans);font-size:.76rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--nuit);margin-bottom:.7rem;
}
.etape p{font-size:.92rem;color:var(--texte-doux);line-height:1.7}
.section--nuit .etape{border-color:rgba(184,152,90,.28)}
.section--nuit .etape h4{color:var(--creme)}
.section--nuit .etape p{color:#c3bfb7}

/* Étapes en liste verticale (parcours Harmonie / Liberté) */
.parcours{list-style:none;margin:3rem 0 0;padding:0;counter-reset:p}
.parcours li{
  position:relative;padding:0 0 2.6rem 74px;border-left:1px solid rgba(184,152,90,.35);
  margin-left:22px;
}
.parcours li:last-child{border-left-color:transparent;padding-bottom:0}
.parcours li::before{
  counter-increment:p;content:"0" counter(p);
  position:absolute;left:-22px;top:-4px;width:44px;height:44px;border-radius:50%;
  background:var(--creme);border:1px solid var(--or);color:var(--or);
  font-family:var(--serif);font-size:1.05rem;display:grid;place-items:center;
}
.section--nuit .parcours li::before{background:var(--nuit)}
.section--sable .parcours li::before{background:var(--sable-clair)}
.parcours h4{
  font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:.6rem;
}
.parcours p{font-size:.96rem;color:var(--texte-doux)}
.section--nuit .parcours p{color:#c3bfb7}

/* ---------- Cartes technologie ------------------------------------------ */
.techs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px)}
.tech{background:var(--blanc);border:1px solid rgba(184,152,90,.3);display:flex;flex-direction:column}
.tech__img{aspect-ratio:16/10;background:var(--sable);overflow:hidden}
.tech__img img{width:100%;height:100%;object-fit:cover}
.tech__txt{padding:clamp(26px,3.4vw,44px);flex:1;display:flex;flex-direction:column}
.tech__nom{
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--or);
  font-weight:600;margin-bottom:1rem;
}
.tech__accroche{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.7rem);text-transform:uppercase;color:var(--nuit);margin-bottom:1.2rem;letter-spacing:.03em}
.tech__chute{
  margin-top:auto;padding-top:1.6rem;border-top:1px solid rgba(184,152,90,.3);
  font-family:var(--serif);font-size:1.02rem;text-transform:uppercase;letter-spacing:.06em;color:var(--taupe);
}

/* ---------- Tableau comparatif lasers ----------------------------------- */
.tableau-zone{overflow-x:auto;margin:2.6rem 0;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:720px;font-size:.9rem;background:var(--blanc)}
caption{text-align:left;font-size:.8rem;color:var(--texte-doux);padding-bottom:.8rem;font-style:italic}
th,td{padding:16px 18px;text-align:left;vertical-align:top;border:1px solid rgba(184,152,90,.28)}
thead th{
  background:var(--nuit);color:var(--creme);font-family:var(--sans);font-weight:600;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
}
tbody th{
  background:var(--sable-clair);font-weight:600;font-size:.78rem;color:var(--nuit);
  width:180px;letter-spacing:.04em;
}
tbody tr:nth-child(even) td{background:#fdfcfa}

/* Tables de tarifs : 2 colonnes, plus aérées */
.tarifs table{min-width:0}
.tarifs td:last-child,.tarifs th:last-child{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tarifs h3{margin:2.8rem 0 1rem}
.tarifs h3:first-child{margin-top:0}

/* ---------- Chaîne "en résumé" ------------------------------------------ */
.chaine{list-style:none;margin:2.4rem auto 0;padding:0;max-width:560px;text-align:center}
.chaine li{padding:16px 20px;background:var(--blanc);border:1px solid rgba(184,152,90,.3);font-size:.95rem}
.chaine li+li{margin-top:34px;position:relative}
.chaine li+li::before{
  content:"↓";position:absolute;top:-28px;left:50%;transform:translateX(-50%);
  color:var(--or);font-size:1.1rem;
}
.section--nuit .chaine li{background:rgba(255,255,255,.05);color:#e7e2d9}

/* Cycle du poil */
.cycle{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;margin:2rem 0;font-family:var(--serif);font-size:clamp(1.05rem,2vw,1.5rem);letter-spacing:.1em;text-transform:uppercase;color:var(--nuit)}
.cycle span[aria-hidden]{color:var(--or)}
.cycle b{font-weight:400;color:var(--or);border-bottom:1px solid var(--or)}

/* ---------- Encadrés ---------------------------------------------------- */
.note{
  background:var(--sable-clair);border-left:3px solid var(--or);
  padding:clamp(22px,3vw,34px);margin:2.2rem 0;
}
.note h4{margin-bottom:.7rem;font-family:var(--sans);font-size:.9rem;font-weight:600;letter-spacing:.06em}
.note p{font-size:.95rem;color:var(--texte-doux)}
.note--nuit{background:rgba(255,255,255,.05);border-left-color:var(--or)}
.note--nuit p{color:#c9c5bd}

.encart-prix{
  border:1px solid var(--or);padding:clamp(28px,4vw,48px);text-align:center;background:var(--blanc);
}
.encart-prix__valeur{font-family:var(--serif);font-size:clamp(3rem,7vw,5rem);color:var(--or);line-height:1;display:block;margin:.4rem 0}

/* Compteurs de séances */
.compteurs{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(184,152,90,.3);margin:2.6rem 0}
.compteur{background:var(--creme);padding:clamp(28px,4vw,46px);text-align:center}
.section--nuit .compteur{background:var(--nuit)}
.section--sable .compteur{background:var(--sable-clair)}
.compteur__label{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--or);display:block;margin-bottom:.9rem;font-weight:600}
.compteur__valeur{font-family:var(--serif);font-size:clamp(1.7rem,3.4vw,2.5rem);color:var(--nuit);line-height:1.2}
.section--nuit .compteur__valeur{color:var(--creme)}

/* Liste de valeurs à puce dorée */
.puces{list-style:none;margin:2rem 0;padding:0}
.puces li{position:relative;padding:0 0 1rem 30px;font-size:1rem}
.puces li::before{content:"";position:absolute;left:0;top:.72em;width:11px;height:1px;background:var(--or)}

/* ---------- Contre-indications ------------------------------------------ */
.ci-groupe{margin:3rem 0}
.ci-titre{
  display:flex;align-items:center;gap:14px;font-family:var(--sans);font-size:.8rem;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--nuit);
  padding-bottom:14px;border-bottom:1px solid rgba(184,152,90,.4);margin-bottom:0;
}
.ci-titre .pastille{font-size:1.15rem;line-height:1}
.ci-groupe table{min-width:0;margin-top:0;border-top:0}
.ci-groupe td:first-child{font-weight:500;color:var(--nuit);width:42%}

/* ---------- FAQ (accordéon) --------------------------------------------- */
.faq{border-top:1px solid rgba(184,152,90,.35)}
.faq details{border-bottom:1px solid rgba(184,152,90,.35)}
.faq summary{
  list-style:none;cursor:pointer;padding:26px 44px 26px 0;position:relative;
  font-family:var(--serif);font-size:clamp(1.08rem,1.9vw,1.35rem);color:var(--nuit);
  text-transform:uppercase;letter-spacing:.03em;line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  color:var(--or);font-size:1.5rem;font-family:var(--sans);font-weight:300;transition:transform .3s;
}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--or)}
.faq__corps{padding:0 0 30px;max-width:70ch}
.faq__corps h4{
  font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--or);margin:1.8rem 0 .7rem;
}
.faq__corps h4:first-child{margin-top:0}

/* ---------- Contact ----------------------------------------------------- */
.contact-grille{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,72px);align-items:start}
.coord{list-style:none;margin:0;padding:0}
.coord li{padding:22px 0;border-bottom:1px solid rgba(184,152,90,.3)}
.coord li:first-child{border-top:1px solid rgba(184,152,90,.3)}
.coord__label{display:block;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--or);font-weight:600;margin-bottom:.5rem}
.coord a{font-family:var(--serif);font-size:1.35rem;color:var(--nuit);text-decoration:none;transition:color .25s}
.coord a:hover{color:var(--or)}

.horaires{list-style:none;margin:1.4rem 0 0;padding:0;max-width:420px}
.horaires li{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px dotted rgba(184,152,90,.4);font-size:.94rem}
.horaires li span:last-child{color:var(--texte-doux)}

form{display:grid;gap:20px}
.champ{display:grid;gap:8px}
label{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--nuit);font-weight:600}
input,select,textarea{
  font-family:var(--sans);font-size:.98rem;padding:14px 16px;background:var(--blanc);
  border:1px solid rgba(107,98,89,.3);color:var(--texte);border-radius:0;width:100%;
  transition:border-color .25s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--or)}
textarea{min-height:150px;resize:vertical}
.rgpd{display:flex;gap:12px;align-items:flex-start;font-size:.82rem;color:var(--texte-doux);line-height:1.6}
.rgpd input{width:18px;height:18px;flex:0 0 auto;margin-top:3px;accent-color:var(--or)}
.rgpd label{text-transform:none;letter-spacing:0;font-weight:400;font-size:.82rem;color:var(--texte-doux)}

.carte-maps{margin-top:2.4rem;border:1px solid rgba(184,152,90,.35);aspect-ratio:16/9;background:var(--sable);display:grid;place-items:center;text-align:center;padding:24px}
.carte-maps iframe{width:100%;height:100%;border:0;display:block}

/* ---------- Bandeau de conversion --------------------------------------- */
.cta-final{background:var(--nuit);color:var(--creme);text-align:center;padding:var(--gout) 24px}
.cta-final .manifeste{color:var(--creme);margin-bottom:2.4rem}
.cta-final .btns{justify-content:center;margin-bottom:1.6rem}
.cta-final__relance{font-size:.9rem;color:#b9b5ad;margin-bottom:1rem}
/* Monogramme blanc en signature au-dessus du manifeste */
.cta-final__mono{width:clamp(52px,5vw,68px);height:auto;margin:0 auto 1.8rem;opacity:.9}
.cta-final__ci{margin-top:2.6rem;font-size:.85rem}
.cta-final__ci a{color:var(--or-clair)}

/* ---------- Pied de page ------------------------------------------------ */
.pied{background:#16313f;color:#b9b5ad;padding:72px 24px 32px;font-size:.88rem}
.pied__grille{max-width:var(--max);margin-inline:auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px}
.pied h4{
  font-family:var(--sans);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--or);margin-bottom:1.3rem;
}
/* Le verrouillage blanc de la charte remplace le titre typographié : il porte
   déjà le nom et la baseline, d'où la ligne de baseline retirée du paragraphe. */
.pied__logo{margin-bottom:1.1rem}
.pied__logo img{width:clamp(190px,17vw,232px);height:auto}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{margin-bottom:.75rem}
.pied a{color:#b9b5ad;text-decoration:none;transition:color .25s}
.pied a:hover{color:var(--or-clair)}
.pied__bas{
  max-width:var(--max);margin:52px auto 0;padding-top:26px;
  border-top:1px solid rgba(184,152,90,.22);font-size:.76rem;color:#8b877f;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
}

/* ---------- Apparition au défilement ------------------------------------ */
.apparait{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.apparait.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .apparait{opacity:1;transform:none;transition:none}
  .liaison span{animation:none}
}

/* ---------- Responsive -------------------------------------------------- */
@media (max-width:980px){
  .etapes{grid-template-columns:1fr 1fr}
  .etape{border-left:0;border-top:1px solid rgba(184,152,90,.3);padding-inline:0;padding-right:20px}
  .etape:first-child,.etape:nth-child(2){border-top:0}
  .techs,.duo,.contact-grille{grid-template-columns:1fr}
  .pied__grille{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  :root{--gout:clamp(52px,11vw,80px)}
  .burger{display:block}
  .nav{
    position:fixed;inset:64px 0 auto;background:var(--nuit);flex-direction:column;
    align-items:flex-start;gap:0;padding:12px 24px 28px;margin:0;
    border-bottom:1px solid rgba(184,152,90,.3);
    transform:translateY(-120%);transition:transform .35s ease;max-height:calc(100vh - 64px);overflow-y:auto;
  }
  .nav[data-ouvert="true"]{transform:none}
  .nav a{width:100%;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:.8rem}
  .nav .btn{width:100%;margin-top:18px;border-bottom:0}
  .logo__nom{font-size:1.05rem}
  .hero{min-height:auto;padding:84px 24px 72px}
  .compteurs{grid-template-columns:1fr}
  .pied__grille{grid-template-columns:1fr;gap:34px}
  .parcours li{padding-left:58px}
  .btns .btn{width:100%}
}


/* ==========================================================================
   DIRECTION « ENCRE » — direction retenue (remplace « Sable »)
   L'anthracite bleuté (#13222B / #101D25 / #0F2A36) structure la page : bloc
   héros, entête discrète, bandeau de conversion, pied de page. Angles nets
   partout, sauf le grand cadre du héros et les boutons en gélule. Les titres
   restent en casse normale — c'est ce qui distingue un institut d'un cabinet.
   ========================================================================== */

:root{
  /* encre : la structure, plus profonde que le bleu nuit d'origine */
  --nuit:#13222B;
  --nuit-clair:#0F2A36;
  --encre:#101D25;

  /* fonds, réchauffés */
  --creme:#FAF7F2;
  --sable-clair:#F3ECE1;
  --sable:#E8DFD3;
  --nude:#DCCEB6;

  --texte:#463C33;
  --texte-doux:#6B6259;
  --gris-taupe:#AAA092;

  /* or de la charte, moins jaune que la version Sable */
  --or:#B8985A;
  --or-clair:#C9A96E;

  --ombre:0 26px 58px -34px rgba(16,29,37,.42);
  --gout:clamp(72px,9vw,132px);
}

body{background:var(--creme);color:var(--texte)}
h1,h2,h3,h4{color:var(--nuit)}

/* ---- Casse normale : décision actée, conservée ------------------------- */
.manifeste{text-transform:none;letter-spacing:.005em;font-weight:300;line-height:1.28;color:var(--nuit)}
.tech__accroche{text-transform:none;letter-spacing:.01em;font-weight:300;color:var(--nuit)}
.tech__chute{text-transform:none;letter-spacing:.01em;font-style:italic;color:var(--texte-doux)}
.faq summary{text-transform:none;letter-spacing:.005em;font-weight:400}
.hero h1{font-weight:300}
.surtitre{color:var(--or);letter-spacing:.28em;font-weight:500}

/* ---- Entête : claire, ancrée par un simple filet doré ------------------ */
.entete{
  background:rgba(250,247,242,.96);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--nude);
}
.logo__nom{color:var(--nuit)}
.logo__nom small{color:var(--gris-taupe)}
.nav a{color:var(--texte)}
.nav a::after{background:var(--or)}
.nav a:hover{color:var(--nuit)}
.nav a[aria-current="page"]{color:var(--or)}
.burger span{background:var(--nuit)}
@media (max-width:760px){
  .nav{background:var(--creme);border-bottom-color:var(--nude)}
  .nav a{color:var(--nuit);border-bottom-color:var(--nude)}
}

/* ---- Sections « nuit » → deviennent l'encre elle-même ------------------- */
.section--nuit{background:var(--nuit);color:#C7C2BA}
.section--nuit h2,.section--nuit h3,.section--nuit h4,.section--nuit .manifeste--clair{color:var(--creme)}
.section--nuit .surtitre--clair{color:var(--or)}
.section--nuit p,.section--nuit .lead{color:#C7C2BA}
.section--nuit .legende{color:var(--gris-taupe)}
.section--nuit strong{color:var(--creme)}
.section--nuit .etape{border-color:rgba(184,152,90,.28)}
.section--nuit .etape h4{color:var(--creme)}
.section--nuit .etape p{color:#B6B0A7}
.section--nuit .parcours li::before{background:var(--nuit)}
.section--nuit .parcours p{color:#B6B0A7}
.section--nuit .compteur{background:rgba(255,255,255,.06)}
.section--nuit .compteur__valeur{color:var(--creme)}
.section--nuit .chaine li{background:rgba(255,255,255,.06);color:#DCD3C7;border-color:rgba(255,255,255,.1)}
.section--nuit .note{background:rgba(255,255,255,.06)}
.section--nuit .btn--clair{color:var(--creme);border-color:var(--or-clair)}
.section--nuit .btn--clair:hover{background:var(--or);border-color:var(--or);color:#fff}

.section--sable{background:var(--sable-clair)}

/* ---- Héros : bloc encre + photo côte à côte, angles nets --------------- */
.hero{
  position:relative;background:var(--creme);color:var(--nuit);overflow:hidden;
  margin:22px;border-radius:26px;box-shadow:var(--ombre);
  /* Pas de max-height : combinée à overflow:hidden (nécessaire aux angles
     arrondis) elle rognait le contenu des héros les plus chargés — page Corps,
     le bouton et le lien passaient à la trappe. Le panneau suit son contenu. */
  min-height:min(58vh,480px);padding:0;
  display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch;
}
.hero__media{position:relative;inset:auto;order:2;overflow:hidden}
/* Image sortie du flux : sinon une photo au format portrait impose son ratio
   au panneau (jambes 1024×1536 → 645 × 1,5 = 967 px de haut) et étire tout le
   héros. Hors flux, c'est le texte qui commande la hauteur, la photo remplit. */
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;object-position:30% center}
/* Portraits verticaux : centrés, le cadrage « cover » coupe le haut du crâne.
   On remonte le point d'ancrage pour garder le visage entier. */
.hero__media img[src*="hero-visage"],
.hero__media img[src*="visage-serenite"]{object-position:50% 12%}
.hero__media::after{content:none}
.hero__in{
  position:relative;z-index:1;order:1;max-width:none;width:auto;margin:0;
  background:var(--nuit);color:var(--creme);text-shadow:none;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:clamp(32px,4.5vw,64px);text-align:left;
}
.hero__in>*{max-width:42ch}
/* Correction optique du panneau : le surtitre est une ligne légère dont
   l'interligne ajoute du vide au-dessus des lettres, tandis que le bas se
   termine sur un bouton plein, visuellement lourd. À padding égal le haut
   paraît donc plus aéré que le bas — d'où un haut resserré et un bas plus
   généreux, et un interligne collé aux capitales du surtitre. */
.hero__in{padding-block:clamp(28px,3.7vw,52px) clamp(36px,5vw,70px)}
.hero h1{color:var(--creme);max-width:20ch;font-size:clamp(2.1rem,4vw,3.3rem);margin-bottom:.7rem}
.hero p{color:var(--nude);max-width:46ch}
.hero .surtitre{margin-bottom:.9rem;line-height:1}
.hero__sous{color:var(--sauge)}
.hero .surtitre--clair{color:var(--or)}
.hero--centre{text-align:left}
.hero--centre .hero__in>*{max-width:42ch}
.hero--centre h1,.hero--centre .manifeste{margin-inline:0}
.hero--centre p{margin-inline:0}
.hero--court{min-height:min(48vh,420px)}

/* La rangée de boutons échappe à la largeur de lecture : sans cela elle est
   serrée à 34ch, les deux boutons passent l'un sous l'autre et le second est
   rogné par la hauteur maximale du panneau. */
.hero__in>.btns,.hero--centre .hero__in>.btns{max-width:none;margin-top:1.2rem}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;margin:14px;border-radius:20px;min-height:auto}
  .hero__media{order:1;aspect-ratio:4/3}
  .hero__in{order:2;padding:clamp(32px,6vw,48px)}
  .hero__in>*,.hero--centre .hero__in>*{max-width:44ch}
}

/* Cadre filet doré */
.cadre{border-color:rgba(184,152,90,.4);border-radius:0}

/* ---- Duo visage / corps : cartes blanches à bords nets ------------------ */
.duo{background:var(--nude)}
.duo__carte{border-radius:0}
.duo__img{aspect-ratio:4/3}

/* ---- Cartes technologie : filet net, pas d'ombre flottante -------------- */
.tech{border:1px solid var(--nude);border-radius:0}
.tech__img{aspect-ratio:16/11}

/* ---- Boutons : gélules dorées, seule forme arrondie conservée ----------- */
.btn{border-radius:999px;letter-spacing:.16em;font-weight:600}
.btn--plein{background:var(--or);border-color:var(--or);color:var(--blanc)}
.btn--plein:hover{background:var(--nuit);border-color:var(--nuit);color:var(--blanc)}
.btn--nuit{background:var(--nuit);border-color:var(--nuit)}
.btn--nuit:hover{background:var(--or);border-color:var(--or)}
.lien-fleche{color:var(--nuit)}
.filet{background:var(--or)}
.liaison span{color:var(--or)}

/* ---- Tableaux : entêtes en encre plutôt qu'en brun --------------------- */
thead th{background:var(--nuit);color:var(--creme)}
tbody th{background:var(--sable-clair);color:var(--nuit)}
th,td{border-color:var(--nude)}
.ci-titre{color:var(--nuit);border-bottom-color:var(--nude)}

/* ---- FAQ : filet net, sans carte ---------------------------------------- */
.faq{border-top:1px solid var(--nude)}
.faq details{border-bottom:1px solid var(--nude)}
.faq summary{color:var(--nuit)}

/* ---- Bandeau de conversion et pied : encre la plus profonde ------------- */
.cta-final{background:var(--nuit)}
.pied{background:var(--encre)}

/* ---- Respiration : proche de l'esprit éditorial de la référence -------- */
.lead{line-height:1.9}

/* ==========================================================================
   VISUELS DE SECTION — images intégrées au fil du texte
   ========================================================================== */
/* Le ratio porte sur l'image, pas sur la figure : posé sur la figure avec
   overflow:hidden, il rognait la légende, qui n'apparaissait jamais. */
.visuel{margin:2.8rem 0}
.visuel img{width:100%;height:auto;object-fit:cover;display:block}
.visuel--large img{aspect-ratio:16/9}
.visuel--carre img{aspect-ratio:4/3}
.visuel--bande img{aspect-ratio:16/10}
.visuel figcaption{
  font-size:.8rem;color:var(--texte-doux);font-style:italic;
  padding-top:.8rem;font-family:var(--serif);font-size:1rem;
}
/* image posée en pleine largeur entre deux sections */
.bandeau-image{width:100%;aspect-ratio:21/9;overflow:hidden}
.bandeau-image img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){
  .bandeau-image{aspect-ratio:16/10}
  .visuel{margin-block:2rem}
}

/* ==========================================================================
   ACCUEIL — variations ponctuelles par bloc (styles E, K et CTA renforcé)
   Le reste du site suit uniformément la direction Encre ci-dessus ; seuls
   trois blocs de la page d'accueil s'en écartent, comme demandé.
   ========================================================================== */

/* ---- E · Technologies : bandeau encre pleine largeur, grande typo ------- */
.section--technologies{background:var(--encre);padding:0}
.section--technologies .wrap{max-width:var(--max);margin-inline:auto}
.section--technologies .entree{padding:clamp(56px,8vw,88px) clamp(22px,4vw,56px) clamp(40px,6vw,56px)}
.section--technologies .entree .surtitre{color:var(--or)}
.section--technologies .entree h2{
  color:var(--creme);font-weight:300;max-width:15ch;
  font-size:clamp(2.3rem,5vw,3.8rem);
}
.section--technologies .entree p{color:var(--nude);max-width:56ch;margin-top:1.2rem}
.section--technologies .bandeau{aspect-ratio:24/8;overflow:hidden}
.section--technologies .bandeau img{width:100%;height:100%;object-fit:cover}
.section--technologies .techs{
  background:var(--creme);margin:0;padding:clamp(48px,7vw,72px) clamp(22px,4vw,56px) clamp(60px,8vw,88px);
}
.section--technologies .tech{border-color:var(--sable)}
@media (max-width:760px){.section--technologies .bandeau{aspect-ratio:4/3}}

/* ---- K · Portrait de l'experte : composition en débord ------------------ */
.portrait{
  display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:0;
  margin:22px;background:var(--sable-clair);
}
.portrait__txt{padding:clamp(40px,6vw,76px)}
.portrait__txt .surtitre{color:var(--or)}
.portrait__signature{
  font-family:var(--serif);font-size:1.3rem;color:var(--nuit);margin-top:1.8rem;
}
.portrait__signature small{display:block;font-family:var(--sans);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--texte-doux);margin-top:.4rem;font-weight:600}
.portrait__img{
  position:relative;margin:0 -32px 0 32px;aspect-ratio:4/5;overflow:hidden;box-shadow:var(--ombre);
}
.portrait__img img{width:100%;height:100%;object-fit:cover}
.portrait__attente{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;
  background:linear-gradient(160deg,var(--nuit),var(--nuit-clair));color:var(--nude);
}
.portrait__attente span{
  font-family:var(--serif);font-size:1.05rem;line-height:1.5;max-width:20ch;
}
@media (max-width:900px){
  .portrait{grid-template-columns:1fr;margin:14px}
  .portrait__img{margin:0;aspect-ratio:4/3}
}

/* ---- CTA final renforcé : encre la plus profonde, accent or affirmé ----- */
.cta-final--renforce{
  background:var(--encre);position:relative;
  border-top:1px solid rgba(184,152,90,.4);border-bottom:1px solid rgba(184,152,90,.4);
}
.cta-final--renforce .manifeste{font-weight:300}
.cta-final--renforce .btn--plein{box-shadow:0 18px 34px -18px rgba(184,152,90,.6)}

/* Lien-flèche sur fond sombre (panneau de héros, bande de conversion) */
.lien-fleche--clair{color:var(--nude);border-bottom-color:var(--or)}
.lien-fleche--clair:hover{color:var(--or-clair)}

/* ==========================================================================
   QUIZ D'ORIENTATION — « Quelle technologie pour moi ? »
   Pré-diagnostic en ligne : oriente et capte le contact, ne remplace jamais
   le diagnostic réalisé en cabinet.
   ========================================================================== */
#bilanOverlay{
  position:fixed;inset:0;z-index:200;background:rgba(16,29,37,.78);
  backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;
  padding:24px;
}
#bilanOverlay.ouvert{display:flex}
#bilanModal{
  position:relative;background:var(--creme);width:100%;max-width:640px;
  max-height:min(88vh,760px);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(16,29,37,.6);
}
.bilan-prog-bar{height:3px;background:var(--nude);flex:0 0 auto}
.bilan-prog-fill{height:100%;width:0%;background:var(--or);transition:width .4s cubic-bezier(.16,1,.3,1)}
.bilan-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 28px;border-bottom:1px solid var(--nude);flex:0 0 auto;
}
.bilan-logo{font-family:var(--serif);font-size:1.05rem;color:var(--nuit);letter-spacing:.04em}
.bilan-close{
  background:none;border:0;cursor:pointer;color:var(--texte-doux);font-size:1.1rem;
  width:36px;height:36px;display:grid;place-items:center;transition:color .2s;
}
.bilan-close:hover{color:var(--nuit)}
.bilan-body{padding:clamp(28px,5vw,48px);overflow-y:auto;flex:1 1 auto}
.bilan-step{display:none}
.bilan-step.active{display:block;animation:bilan-in .35s ease}
@keyframes bilan-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.bilan-intro,.bilan-transition{text-align:center;padding:clamp(12px,3vw,28px) 0}
.bilan-intro-icon,.bilan-transition-icon{font-size:1.6rem;color:var(--or);margin-bottom:1.2rem}
.bilan-intro h2,.bilan-transition h2{font-weight:300;font-size:clamp(1.6rem,3.4vw,2.2rem)}
.bilan-intro em,.bilan-transition em,.bilan-question em{font-style:italic;color:var(--or)}
.bilan-intro p,.bilan-transition p{color:var(--texte-doux);margin-top:1.2rem;max-width:44ch;margin-inline:auto}
.bilan-chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}
.bilan-chip{
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--nuit);border:1px solid var(--nude);padding:8px 16px;
}

.bilan-step-num{
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--or);
  font-weight:600;margin-bottom:.8rem;
}
.bilan-question{font-weight:300;font-size:clamp(1.35rem,2.8vw,1.85rem);margin-bottom:1.8rem}

.bilan-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bilan-opt{
  border:1px solid var(--nude);padding:18px 20px;cursor:pointer;
  display:flex;flex-direction:column;gap:.3rem;transition:border-color .2s,background .2s;
}
.bilan-opt:hover{border-color:var(--or)}
.bilan-opt.selected{border-color:var(--or);background:rgba(184,152,90,.08)}
.bilan-opt-icon{font-size:1.15rem}
.bilan-opt-label{font-family:var(--serif);font-size:1.05rem;color:var(--nuit)}
.bilan-opt-sub{font-size:.78rem;color:var(--texte-doux)}

.bilan-opts-ci{grid-template-columns:repeat(3,1fr)}
.bilan-opts-ci .bilan-opt{flex-direction:row;align-items:center;gap:.6rem;padding:16px}
.bilan-opts-ci .bilan-opt-label{font-size:.92rem}
.bilan-step-hint{font-size:.82rem;color:var(--texte-doux);font-style:italic;margin-top:1rem}

.bilan-result,.bilan-result-no-box{text-align:center}
.bilan-result-badge{
  display:inline-block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--or);border:1px solid var(--nude);padding:8px 18px;margin-bottom:1.4rem;
}
.bilan-result-badge--vigilance{color:var(--nuit);border-color:var(--or)}
.bilan-result h3{font-weight:300;font-size:clamp(1.5rem,3vw,2rem)}
.bilan-result-desc{color:var(--texte-doux);margin-top:1rem;max-width:48ch;margin-inline:auto}
.bilan-result-points{list-style:none;margin:1.8rem 0;padding:0;text-align:left;max-width:440px;margin-inline:auto}
.bilan-result-points li{
  padding:12px 0 12px 30px;position:relative;border-bottom:1px solid var(--nude);font-size:.92rem;
}
.bilan-result-points li:last-child{border-bottom:0}
.bilan-result-points li::before{content:"—";position:absolute;left:0;color:var(--or)}
.bilan-btn-rdv{display:inline-block;margin-top:.6rem}
.bilan-result-no-box{max-width:48ch;margin-inline:auto;color:var(--texte-doux);font-size:.94rem}
.bilan-result-no-box p{margin-bottom:1rem}

.bilan-footer{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 28px;border-top:1px solid var(--nude);flex:0 0 auto;
}
.bilan-back,.bilan-next{
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;border:0;background:none;padding:12px 8px;
  color:var(--texte-doux);transition:color .2s;
}
.bilan-back:hover{color:var(--nuit)}
.bilan-next{
  background:var(--or);color:#fff;border-radius:999px;padding:14px 30px;
}
.bilan-next:hover{background:var(--nuit)}
.bilan-next:disabled{opacity:.4;cursor:not-allowed}
.bilan-next.bilan-next--hidden{visibility:hidden}

@media (max-width:640px){
  #bilanModal{max-height:94vh}
  .bilan-opts,.bilan-opts-ci{grid-template-columns:1fr}
  .bilan-header,.bilan-footer{padding:16px 20px}
}

/* ---- Entête : bascule en menu mobile plus tôt, pour ne jamais tasser le
   bouton « Réserver mon bilan » contre les liens sur les largeurs moyennes --- */
@media (max-width:1150px){
  .burger{display:block}
  .nav{
    position:fixed;inset:64px 0 auto;background:var(--creme);flex-direction:column;
    align-items:flex-start;gap:0;padding:12px 24px 28px;margin:0;
    border-bottom:1px solid var(--nude);
    transform:translateY(-120%);transition:transform .35s ease;max-height:calc(100vh - 64px);overflow-y:auto;
  }
  .nav[data-ouvert="true"]{transform:none}
  .nav a{width:100%;padding:15px 0;border-bottom:1px solid var(--nude);font-size:.8rem;color:var(--nuit)}
  .nav .btn{width:100%;margin-top:18px;border-bottom:0}
}