/* ════════════════════════════════════════════════════════════
   David Laussot — Hypnose & psychologie positive
   Palette : SON bleu (carte de visite) mais en version CLAIRE.
   Le bleu passe du fond au texte ; les fonds deviennent blancs
   et brume. L'or reste la couleur de l'action, jamais du décor.
   ════════════════════════════════════════════════════════════ */

:root {
  /* Bleus — du plus profond (texte) au plus léger (fonds) */
  --nuit:       #16324E;   /* bleu profond — titres et texte principal */
  --bleu:       #2F6E9E;   /* bleu franc — liens, accents, chiffres */
  --bleu-doux:  #8DB5D2;   /* bleu clair — traits, bordures */
  --brume:      #EDF4F9;   /* fond de section, bleuté très clair */
  --brume-2:    #F6FAFC;   /* fond alterné, presque blanc */
  --blanc:      #FCFDFE;

  /* Or — réservé à l'action */
  --or:         #BE863A;
  --or-fonce:   #9E6C27;
  --or-clair:   #E3BE7C;

  /* Textes secondaires */
  --encre:      #4E6A83;
  --encre-pale: #7C93A8;

  --accent:     #BE863A;   /* teinte du choix — l'or tant que rien n'est choisi */

  --wa:         #25D366;
  --wa-fonce:   #128C7E;

  --f-titre: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-texte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --largeur: 1180px;
  --r-s: 8px;
  --r-m: 12px;   /* releve Qoves : 12 px partout */
  --r-l: 16px;
  --e:     cubic-bezier(0.23, 1, 0.32, 1);      /* ease-out fort — entrees et sorties */
  --e-mid: cubic-bezier(0.77, 0, 0.175, 1);    /* ease-in-out fort — ce qui se deplace */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--nuit);
  font-family: var(--f-texte);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.container { width: min(100% - 44px, var(--largeur)); margin-inline: auto; }

/* ──────── Typographie ──────── */

.h2 {
  font-family: var(--f-titre);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  color: var(--nuit);
}
.h2 em { font-style: italic; color: var(--or-fonce); }
.h2--light { color: #fff; }
.h2--light em { color: var(--or-clair); }

.eyebrow {
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--or-fonce); margin: 0 0 14px;
}
.eyebrow--light { color: var(--or-clair); }

.section-head { max-width: 760px; margin-bottom: 46px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-lede { color: var(--encre); font-size: 18px; margin: 0; }

/* ──────── Boutons ──────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 26px; border-radius: 999px;
  font-family: var(--f-texte); font-size: 15px; font-weight: 600;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: transform .2s var(--e), box-shadow .2s var(--e), background .2s var(--e);
}
.btn--lg { padding: 16px 34px; font-size: 16px; }
.btn--block { width: 100%; }

.btn--gold {
  background: var(--or); color: #fff;
  box-shadow: 0 8px 22px -10px rgba(158, 108, 39, .8);
}
.btn--gold:hover { background: var(--or-fonce); transform: translateY(-2px); }

.btn--ghost { background: transparent; color: var(--nuit); border-color: var(--bleu-doux); }
.btn--ghost:hover { background: var(--brume); border-color: var(--or); }

.btn--wa { background: var(--wa-fonce); color: #fff; }
.btn--wa:hover { background: #0f7266; transform: translateY(-2px); }

/* ──────── Navigation ──────── */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 12px 28px;
  background: rgba(252, 253, 254, .88);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(141, 181, 210, .3);
}
.nav__brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.nav__logo { width: 38px; height: auto; }
.nav__names { display: flex; flex-direction: column; line-height: 1.25; }
.nav__name { font-family: var(--f-titre); font-size: 17px; color: var(--nuit); }
.nav__role { font-size: 10.5px; letter-spacing: .06em; color: var(--encre-pale); }
.nav__links { display: flex; gap: 26px; }
.nav__links a {
  font-size: 14.5px; color: var(--encre); text-decoration: none;
  padding-bottom: 2px; border-bottom: 1.5px solid transparent; transition: .2s var(--e);
}
.nav__links a:hover { color: var(--nuit); border-bottom-color: var(--or); }
.nav__cta { padding: 10px 20px; font-size: 14px; }

.hero__photo {
  margin-inline: auto; max-width: 340px;
  border-radius: var(--r-l); overflow: hidden;
  box-shadow: 0 34px 70px -30px rgba(22, 50, 78, .42);
}
.hero__photo img { width: 100%; height: auto; display: block; }

/* Le bandeau que Tim avait laisse dans l'image, refait en vrai texte :
   selectionnable, lu par Google, modifiable sans outil d'image. */
.hero__ethos {
  background: var(--nuit); color: #fff;
  padding: 18px 20px 20px; text-align: center;
}
.hero__ethos-nom {
  margin: 0 0 6px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em;
  color: rgba(255, 255, 255, .58);
}
.hero__ethos-titre {
  font-family: var(--f-titre); font-weight: 500; font-size: 26px;
  line-height: 1.12; margin: 0 0 8px; color: #fff; letter-spacing: -.015em;
}
/* La phrase la plus forte du bandeau, et la seule qui soit un argument :
   celui qui a traverse la chose. On ne peut pas afficher d'annees de
   pratique — la formation date de juin 2026 — alors on affiche ce qui est
   vrai et qui pese plus lourd qu'un chiffre. */
.hero__ethos-punch {
  margin: 0 0 12px; font-family: var(--f-titre); font-style: italic;
  font-size: 16.5px; line-height: 1.3; color: var(--or-clair);
}
.hero__ethos-sub {
  margin: 0 0 10px; font-size: 12.5px; line-height: 1.5;
  color: rgba(255, 255, 255, .76);
}
.hero__ethos-note {
  margin: 0; padding-top: 10px; font-size: 12px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .62);
}
.hero__ethos-note strong { color: var(--or-clair); font-weight: 600; }

/* ──────── Le miroir ──────── */

.mirror { padding: 88px 0; background: var(--blanc); text-align: center; }
.mirror__title { max-width: 900px; margin-inline: auto; }
.mirror__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin: 46px 0 40px;
}
.mirror__item {
  margin: 0; padding: 26px 24px; border-radius: var(--r-m);
  background: var(--brume); color: var(--encre); font-size: 16px; text-align: left;
  border-left: 3px solid var(--bleu-doux);
}
.mirror__item strong { color: var(--nuit); font-weight: 600; }
.mirror__close {
  font-family: var(--f-titre); font-size: clamp(19px, 2.2vw, 26px);
  line-height: 1.45; color: var(--nuit); margin: 0;
}
.mirror__close em { font-style: italic; color: var(--or-fonce); }

/* ──────── Bilan interactif ──────── */

.dq { padding: 20px 0 96px; background: var(--blanc); }
.dq__card {
  background: linear-gradient(165deg, var(--brume) 0%, var(--brume-2) 100%);
  border: 1px solid rgba(141, 181, 210, .45);
  border-radius: var(--r-l); padding: clamp(30px, 4.4vw, 58px);
  max-width: 880px; margin-inline: auto;
  box-shadow: 0 26px 60px -34px rgba(22, 50, 78, .3);
}
.dq__panel { text-align: center; }
.dq__badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; color: var(--or-fonce);
  background: rgba(190, 134, 58, .12); padding: 6px 14px; border-radius: 999px;
  margin-bottom: 18px;
}
.dq__title {
  font-family: var(--f-titre); font-weight: 400;
  font-size: clamp(24px, 3.1vw, 36px); line-height: 1.2;
  margin: 0 0 16px; color: var(--nuit);
}
.dq__title em { font-style: italic; color: var(--or-fonce); }
.dq__sub { color: var(--encre); margin: 0 auto 26px; max-width: 34em; }
.dq__meta { font-size: 12.5px; color: var(--encre-pale); margin: 16px 0 0; }

.dq__top { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.dq__back {
  border: 1px solid var(--bleu-doux); background: #fff; color: var(--nuit);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 17px; line-height: 1;
}
.dq__progress { flex: 1; height: 5px; background: rgba(141,181,210,.4); border-radius: 999px; overflow: hidden; }
.dq__bar { display: block; height: 100%; width: 25%; background: var(--or); transition: width .35s var(--e); }
.dq__step { font-size: 12.5px; color: var(--encre-pale); white-space: nowrap; }

.dq__q {
  font-family: var(--f-titre); font-weight: 400;
  font-size: clamp(21px, 2.6vw, 30px); line-height: 1.25;
  margin: 0 0 24px; color: var(--nuit); text-align: left;
}
.dq__answers { display: grid; gap: 10px; }
.dq__a {
  display: flex; align-items: center; gap: 13px; text-align: left;
  padding: 15px 18px; border-radius: var(--r-m);
  border: 1.5px solid rgba(141,181,210,.55); background: #fff;
  font-family: var(--f-texte); font-size: 15.5px; color: var(--nuit);
  cursor: pointer; transition: .18s var(--e);
}
.dq__a:hover { border-color: var(--or); transform: translateX(3px); }
.dq__a.is-sel { border-color: var(--or); background: rgba(190,134,58,.08); }
.dq__a-ico { font-size: 19px; flex-shrink: 0; }

.dq__rtitle {
  font-family: var(--f-titre); font-weight: 400;
  font-size: clamp(23px, 3vw, 34px); line-height: 1.2;
  margin: 0 0 18px; color: var(--nuit);
}
.dq__rtitle em { font-style: italic; color: var(--or-fonce); }
.dq__rbody { text-align: left; color: var(--encre); margin-bottom: 26px; }
.dq__rbody p { margin: 0 0 14px; }
.dq__rbody strong { color: var(--nuit); }
.dq__again {
  display: block; margin: 16px auto 0; background: none; border: 0;
  color: var(--encre-pale); font-size: 13px; cursor: pointer; text-decoration: underline;
}
.dq__fade { animation: dqFade .32s var(--e); }
@keyframes dqFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ──────── Comprendre ──────── */

.learn { padding: 92px 0; background: var(--brume-2); }

.lesson {
  display: grid; grid-template-columns: 62px 1fr 300px;
  gap: 30px; align-items: center;
  padding: 34px 0; border-top: 1px solid rgba(141,181,210,.4);
}
.lesson:first-of-type { border-top: 0; }
.lesson--flip .lesson__visual { order: -1; }
.lesson--flip { grid-template-columns: 300px 1fr 62px; }
.lesson--flip .lesson__num { order: 3; }

.lesson__num {
  font-family: var(--f-titre); font-size: 40px; color: var(--bleu-doux); line-height: 1;
}
.lesson__title {
  font-family: var(--f-titre); font-weight: 400;
  font-size: clamp(21px, 2.5vw, 29px); line-height: 1.22;
  margin: 0 0 14px; color: var(--nuit);
}
.lesson__title em { font-style: italic; color: var(--or-fonce); }
.lesson__body p { margin: 0 0 12px; color: var(--encre); }
.lesson__body strong { color: var(--nuit); font-weight: 600; }


.learn__cta { text-align: center; margin-top: 44px; }

/* ──────── Piliers ──────── */

.pillars { padding: 92px 0; background: var(--blanc); }
.pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pillar {
  padding: 32px 28px; border-radius: var(--r-m);
  background: var(--brume); border-top: 3px solid var(--or);
}
.pillar__num {
  font-family: var(--f-titre); font-size: 14px; color: var(--or-fonce);
  letter-spacing: .1em; display: block; margin-bottom: 10px;
}
.pillar h3 {
  font-family: var(--f-titre); font-weight: 400; font-size: 22px;
  line-height: 1.25; margin: 0 0 12px; color: var(--nuit);
}
.pillar h3 em { font-style: italic; color: var(--or-fonce); }
.pillar p { margin: 0; color: var(--encre); font-size: 15.5px; }

/* ──────── Les portes ──────── */


.door {
  padding: 30px 28px; border-radius: var(--r-m); background: #fff;
  border: 1px solid rgba(141,181,210,.5); transition: .22s var(--e);
}
.door:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(22,50,78,.34); border-color: var(--bleu-doux); }
.door:first-child { border-color: var(--or-clair); background: linear-gradient(160deg, rgba(190,134,58,.07), #fff 62%); }
.door h3 {
  font-family: var(--f-titre); font-weight: 400; font-size: 21px;
  margin: 0 0 12px; color: var(--nuit); line-height: 1.25;
}
.door p { margin: 0; color: var(--encre); font-size: 15.5px; }
.door strong { color: var(--nuit); font-weight: 600; }

/* ──────── Qui je suis ──────── */

.who { padding: 92px 0; background: var(--blanc); }
.who__inner { display: grid; grid-template-columns: .82fr 1.18fr; gap: 56px; align-items: center; }
.who__photo { margin: 0; }
.who__photo { max-width: 330px; }
.who__photo img { width: 100%; border-radius: var(--r-l); box-shadow: 0 30px 60px -32px rgba(22,50,78,.4); }
.who__lede { font-size: 18.5px; color: var(--nuit); margin: 0 0 16px; }
.who__text p { color: var(--encre); margin: 0 0 14px; }
.who__text strong { color: var(--nuit); font-weight: 600; }
.who__meta { display: grid; gap: 12px; margin-top: 26px; border-top: 1px solid rgba(141,181,210,.45); padding-top: 22px; }
.who__meta div { display: flex; gap: 16px; align-items: baseline; font-size: 14.5px; }
.who__meta span {
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--or-fonce); width: 84px; flex-shrink: 0;
}
.who__meta strong { color: var(--nuit); font-weight: 500; }

/* ──────── La visio ──────── */

.proof { position: relative; padding: 110px 0; background: var(--nuit); overflow: hidden; }
.proof__bg { position: absolute; inset: 0; }
.proof__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.proof__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,50,78,.86) 0%, rgba(22,50,78,.62) 45%, rgba(22,50,78,.9) 100%);
}
.proof__inner { position: relative; max-width: 780px; margin-inline: auto; text-align: center; }
.proof__text { color: rgba(255,255,255,.82); font-size: 18px; margin: 0 0 16px; }
.proof__text em { color: var(--or-clair); font-style: italic; }
.proof__text strong { color: #fff; }
.proof .btn { margin-top: 18px; }

/* ──────── Avis ──────── */

.avis { padding: 92px 0 100px; background: var(--blanc); }

.avis__head { max-width: 720px; margin: 0 auto 46px; text-align: center; }
.avis__note {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 0 22px; font-size: 15px; color: var(--encre);
}
.avis__note strong { color: var(--nuit); font-weight: 600; }
.avis__stars { color: var(--or); font-size: 17px; letter-spacing: 3px; }



/* Les cartes */
.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tcard {
  display: flex; flex-direction: column;
  padding: 24px 24px 22px; background: var(--brume-2);
  border: 1px solid rgba(141, 181, 210, .32); border-radius: var(--r-m);
}
.tcard--cache { display: none; }
.tcard__stars { margin: 0 0 12px; color: var(--or); font-size: 13px; letter-spacing: 2px; }
.tcard__texte {
  margin: 0 0 20px; font-size: 14.8px; line-height: 1.62; color: var(--nuit);
  flex: 1;                       /* pousse la signature tout en bas */
}
.tcard__auteur { display: flex; align-items: center; gap: 11px; margin: 0; }
.tcard__init {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 50%; background: var(--nuit); color: #fff;
  font-size: 14px; font-weight: 600;
}
.tcard__nom { display: flex; flex-direction: column; font-size: 13.5px; font-weight: 600; color: var(--nuit); }
.tcard__src { font-weight: 400; font-size: 12px; color: var(--encre-pale); }

/* Le depli. <details> natif : sans JavaScript il ouvre les 26 d'un coup.
   Le service par paquets dans script.js n'est qu'une couche de confort. */
.avis__plus { margin-top: 24px; }
.avis__plus-btn {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; margin-inline: auto; width: fit-content;
  border: 1px solid var(--bleu-doux); border-radius: 999px;
  background: var(--blanc); color: var(--nuit); font-size: 15px; font-weight: 600;
  transition: background .18s var(--e), border-color .18s var(--e), transform .12s var(--e);
}
.avis__plus-btn::-webkit-details-marker { display: none; }
.avis__plus-btn::marker { content: ""; }
.avis__plus-btn:hover { background: var(--brume); border-color: var(--or); }
.avis__plus-btn:active { transform: scale(.97); }
.avis__plus-fermer { display: none; }
.avis__plus[open] .avis__plus-ouvrir { display: none; }
.avis__plus[open] .avis__plus-fermer { display: inline; }
.avis__plus[open] .avis__plus-btn { margin-bottom: 22px; }
.tgrid--suite { margin-bottom: 22px; }
.avis__fin {
  margin: 0; text-align: center; font-size: 14px; color: var(--encre-pale);
}

@media (max-width: 980px) {
  .tgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .avis { padding: 68px 0 76px; }
  .avis__head { margin-bottom: 38px; }
  .tgrid { grid-template-columns: 1fr; }
  .avis__plus-btn { width: 100%; }
}

/* ──────── Rendez-vous ──────── */

.rdv { padding: 92px 0; background: var(--brume); }
.rdv__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }
.rdv__text p { color: var(--encre); }
.rdv__list { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 10px; }
.rdv__list li { position: relative; padding-left: 26px; color: var(--nuit); font-size: 15.5px; }
.rdv__list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--or);
}
.rdv__direct { display: flex; flex-wrap: wrap; gap: 12px; }

.rdv__calendar { background: #fff; border: 1px solid rgba(141,181,210,.55); border-radius: var(--r-l); padding: 26px; }
.rdv__cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.rdv__cal-month { font-family: var(--f-titre); font-size: 19px; color: var(--nuit); text-transform: capitalize; }
.rdv__cal-nav {
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--bleu-doux); background: #fff; color: var(--nuit); font-size: 17px; line-height: 1;
}
.rdv__cal-nav:hover { background: var(--brume); }
.rdv__cal-days, .rdv__cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.rdv__cal-days span { text-align: center; font-size: 11px; color: var(--encre-pale); padding-bottom: 6px; }
.rdv__cal-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-s); font-size: 14px; border: 1px solid transparent;
  background: var(--brume-2); color: var(--nuit); cursor: pointer; transition: .16s var(--e);
}
.rdv__cal-day.is-out { background: transparent; color: transparent; cursor: default; }
.rdv__cal-day.is-off { background: transparent; color: var(--encre-pale); opacity: .45; cursor: not-allowed; }
.rdv__cal-day.is-free:hover { border-color: var(--or); background: rgba(190,134,58,.1); }
.rdv__cal-day.is-sel { background: var(--or); color: #fff; border-color: var(--or); }
.rdv__cal-slots { margin-top: 20px; border-top: 1px solid rgba(141,181,210,.45); padding-top: 18px; }
.rdv__cal-slots-title { font-size: 13.5px; color: var(--encre); margin: 0 0 12px; }
.rdv__cal-slots-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.rdv__slot {
  padding: 10px; border-radius: var(--r-s); border: 1px solid var(--bleu-doux);
  background: #fff; color: var(--nuit); font-size: 14px; cursor: pointer; text-decoration: none; text-align: center;
}
.rdv__slot:hover { border-color: var(--or); background: rgba(190,134,58,.09); }

/* ──────── Questions ──────── */

.faq { padding: 92px 0; background: var(--blanc); }
.faq__list { max-width: 820px; margin-inline: auto; display: grid; gap: 10px; }
.faq__item { border: 1px solid rgba(141,181,210,.5); border-radius: var(--r-m); background: var(--brume-2); overflow: hidden; }
.faq__item summary {
  cursor: pointer; padding: 19px 22px; font-weight: 600; font-size: 16px;
  color: var(--nuit); list-style: none; display: flex; justify-content: space-between; gap: 16px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; color: var(--or); font-size: 20px; line-height: 1; flex-shrink: 0; }
.faq__item[open] summary::after { content: "−"; }
.faq__a { padding: 0 22px 20px; }
.faq__a p { margin: 0; color: var(--encre); font-size: 15.5px; }
.faq__a strong { color: var(--nuit); }

/* ──────── Final ──────── */

.final { padding: 96px 0; background: var(--nuit); text-align: center; }
.final .h2 { margin-bottom: 28px; }

/* ──────── Pied de page ──────── */

.footer { padding: 54px 0 40px; background: #11283F; color: rgba(255,255,255,.68); text-align: center; font-size: 14px; }
.footer__logo { width: 42px; margin: 0 auto 14px; }
.footer__brand { font-family: var(--f-titre); font-size: 20px; color: #fff; margin: 0 0 6px; }
.footer__sub { margin: 0 0 18px; font-size: 13.5px; }
.footer__links { margin: 0 0 20px; display: flex; gap: 20px; justify-content: center; }
.footer__links a { color: rgba(255,255,255,.78); font-size: 13px; }
.footer__legal { max-width: 640px; margin: 0 auto; font-size: 11.5px; line-height: 1.6; color: rgba(255,255,255,.5); }

/* ──────── Barre collante ──────── */

/* ── La pastille flottante ──
   Elle se detache des bords, laisse deviner la page sous elle et ne
   prend que la place de son bouton. L'ancien bandeau bord a bord mangeait
   90 px et coupait la page en deux. */
.sticky {
  position: fixed; z-index: 200;
  left: 50%; bottom: max(14px, env(safe-area-inset-bottom));
  width: min(100% - 24px, 460px);
  padding: 8px 8px 8px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: rgba(252, 253, 254, .74);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: .8px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  box-shadow: 0 16px 40px -16px rgba(12, 26, 42, .34),
              0 2px 8px -3px rgba(12, 26, 42, .16);
  transform: translate(-50%, calc(100% + 24px));
  transition: transform .46s var(--e), opacity .3s var(--e);
  opacity: 0;
}
.sticky.is-visible { transform: translate(-50%, 0); opacity: 1; }
.sticky__text {
  margin: 0; font-size: 13.5px; line-height: 1.25; color: var(--encre);
  text-align: left; flex: 1 1 auto; min-width: 0;
}
.sticky__btn {
  flex: 0 0 auto; padding: 12px 22px; font-size: 14.5px;
  border-radius: 999px; white-space: nowrap;
}

@media (max-width: 430px) {
  .sticky { padding-left: 16px; gap: 10px; }
  .sticky__text { font-size: 12.5px; }
  .sticky__btn { padding: 11px 16px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky { transition: none; }
}

/* ──────── Reveal ──────── */

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .5s var(--e), transform .5s var(--e); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ──────── Responsive ──────── */

@media (max-width: 1000px) {
  .nav__links { display: none; }
  .hero__inner, .who__inner, .rdv__inner { grid-template-columns: 1fr; gap: 40px; }
  /* En une colonne la photo se CENTRE. Elle etait collee a droite (margin auto
     a gauche) et passait a 420px : plus large qu'en desktop, moitie droite pleine,
     moitie gauche vide. C'est ce que le client voyait sur son ecran. */
  .lesson, .lesson--flip { grid-template-columns: 48px 1fr; }
  .lesson__visual, .lesson--flip .lesson__visual { order: 3; grid-column: 1 / -1; max-width: 360px; }
  .lesson--flip .lesson__num { order: 0; }
  .mirror__grid, .pillars__grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .hero { padding: 116px 0 64px; }
  .nav { padding: 10px 18px; }
  .nav__cta { padding: 9px 16px; font-size: 13px; }
  .nav__role { display: none; }
  .hero__cta .btn { width: 100%; }
  .dq__card { padding: 26px 20px; }
  .rdv__direct .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}


/* ════════════════════════════════════════════════════════════
   SCHÉMAS ANIMÉS — chaque schéma démontre son idée en bougeant.
   L'animation ne se déclenche qu'une fois la leçon à l'écran,
   et ne se joue jamais si l'utilisateur a demandé moins de
   mouvement (prefers-reduced-motion, géré plus bas).
   ════════════════════════════════════════════════════════════ */

.lesson__visual {
  background: #fff; border: 1px solid rgba(141,181,210,.45);
  border-radius: var(--r-m); padding: 16px 14px;
  transition: box-shadow .5s var(--e), transform .5s var(--e), border-color .5s var(--e);
}
.lesson.is-visible .lesson__visual {
  box-shadow: 0 22px 46px -28px rgba(22,50,78,.4);
  border-color: var(--bleu-doux);
}

.viz { width: 100%; height: auto; display: block; overflow: visible; }

.vz-lbl {
  font-family: 'IBM Plex Sans', sans-serif; font-size: 10.5px;
  fill: var(--encre); letter-spacing: .01em;
}
.vz-lbl--l { text-anchor: start; }
.vz-lbl--ok { fill: var(--or-fonce); font-weight: 600; }
.vz-lbl--late { fill: #B4553F; font-weight: 600; }
.vz-lbl--dark { fill: var(--encre-pale); }
.vz-center { font-family: var(--f-titre); font-size: 14px; fill: var(--nuit); }
.vz-center--s { font-family: 'IBM Plex Sans', sans-serif; font-size: 10px; fill: var(--encre-pale); }

/* ── 01 · la boucle ── */
.vz-ring { fill: none; stroke: var(--bleu-doux); stroke-width: 1.6; stroke-dasharray: 4 7; opacity: .8; }
.vz-node { fill: var(--bleu); opacity: .55; }
/* Le centre du cercle pointille est en 130,112 — pas 100. Le rond
   orbitait a cote du trace. */
.vz-runner { fill: var(--or); filter: drop-shadow(0 0 6px rgba(190,134,58,.55)); transform-box: view-box; transform-origin: 130px 112px; }
.vz-will { opacity: 1; }
.vz-will-arrow { stroke: #B4553F; stroke-width: 2; fill: none; marker-end: none; }

/* 3 secondes exactement, et a VITESSE CONSTANTE. La legende dit « le
   reflexe fait le tour en 3 secondes » : un rond qui ralentit dans les
   angles dirait le contraire. C'est la que le dessin ment, ou pas. */
.lesson.is-visible .viz--boucle .vz-runner { animation: vzTour 3s linear infinite; }

/* Chaque etape s'allume au passage du rond : la boucle se REFERME sous
   les yeux, au lieu de clignoter toute ensemble. */
.lesson.is-visible .viz--boucle .vz-node { animation: vzPasse 3s linear infinite; }
.lesson.is-visible .viz--boucle .vz-node:nth-of-type(2) { animation-delay: .75s; }
.lesson.is-visible .viz--boucle .vz-node:nth-of-type(3) { animation-delay: 1.5s; }
.lesson.is-visible .viz--boucle .vz-node:nth-of-type(4) { animation-delay: 2.25s; }

/* La volonte arrive APRES la fin du tour. Elle reste lisible tout du
   long : elle passe de discrete a affirmee, jamais de rien a tout. */
.lesson.is-visible .viz--boucle .vz-will { animation: vzLate 3s linear infinite; }

@keyframes vzTour { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes vzPasse { 0%, 6% { opacity: .95; } 30%, 100% { opacity: .3; } }
@keyframes vzLate { 0%, 78% { opacity: .42; } 90%, 100% { opacity: 1; } }

/* ── 02 · les mythes ── */
.vz-x { stroke: var(--encre-pale); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 30; stroke-dashoffset: 0; }
.vz-check { stroke: var(--or); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 46; stroke-dashoffset: 0; }
.vz-myth { opacity: .35; transform-box: view-box; }
.vz-true { opacity: 1; }
.vz-check { transform-box: view-box; transform-origin: 36px 185px; }

/* Les trois idees fausses s'effacent l'une apres l'autre — elles ne
   disparaissent jamais, elles PALISSENT. Puis la coche doree respire :
   c'est la seule chose qui reste. */
.lesson.is-visible .viz--mythes .vz-myth { animation: vzEfface 4.2s var(--e) infinite; }
.lesson.is-visible .viz--mythes .vz-myth:nth-of-type(2) { animation-delay: .28s; }
.lesson.is-visible .viz--mythes .vz-myth:nth-of-type(3) { animation-delay: .56s; }
.lesson.is-visible .viz--mythes .vz-check { animation: vzCoche 4.2s var(--e) .6s infinite; }
/* Chaque croix s'allume a son tour puis redescend a une valeur qui
   reste LISIBLE : elle ne disparait jamais, sinon le schema semble
   fige et a moitie efface. */
@keyframes vzEfface {
  0%, 8%    { opacity: .78; }
  26%, 74%  { opacity: .34; }
  92%, 100% { opacity: .78; }
}
@keyframes vzCoche {
  0%, 100% { transform: scale(1);    opacity: .84; }
  30%      { transform: scale(1.14); opacity: 1; }
  60%      { transform: scale(1);    opacity: .92; }
}

/* ── 03 · la balance ──
   Le graphique en barres ressemblait a un tableur. Une balance raconte :
   le poids gris ne bouge JAMAIS (« on ne retire rien »), et ce qu'on
   ajoute en face finit par faire pencher l'ensemble. */
.vz-socle { stroke: var(--bleu-doux); stroke-width: 2.2; stroke-linecap: round; fill: none; }
.vz-poids { fill: var(--encre-pale); opacity: .8; }
.vz-ajout { fill: var(--or); opacity: 0; }
.vz-fleau { transform-box: view-box; transform-origin: 130px 70px; }
.vz-lbl--or { fill: var(--or-fonce); font-weight: 600; }

.lesson.is-visible .viz--ressources .vz-fleau { animation: vzPenche 6.4s var(--e) infinite; }
.lesson.is-visible .viz--ressources .vz-ajout { animation: vzAjoute 6.4s var(--e) infinite; }
.lesson.is-visible .viz--ressources .vz-ajout:nth-of-type(2) { animation-delay: .45s; }
.lesson.is-visible .viz--ressources .vz-ajout:nth-of-type(3) { animation-delay: .9s; }

/* Le fleau part penche du cote du poids — l'etat lisible — bascule, et
   revient. Il n'est jamais a l'horizontale sans raison. */
@keyframes vzPenche { 0% { transform: rotate(-9deg); } 34%, 86% { transform: rotate(8deg); } 100% { transform: rotate(-9deg); } }
@keyframes vzAjoute { 0%, 8% { opacity: 0; } 24%, 86% { opacity: .95; } 100% { opacity: 0; } }

/* ---- 04 - les deux photos ----
   Cinq tentatives pour faire lire deux rectangles pales, et le verdict
   restait « on comprend rien ». Une photo n'a jamais besoin de legende.
   Meme etagere, meme cadrage, deux etats : le trou, puis la place prise. */
.viz--photos { display: grid; gap: 14px; }
.vph { margin: 0; }
.vph img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-m); border: 1px solid rgba(141,181,210,.34);
}
.vph:first-child img { filter: grayscale(.35) brightness(.94); }
.vph figcaption {
  margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: var(--encre);
}
.vph--rouge { color: #B4553F; font-weight: 600; }
.vph--or { color: var(--or-fonce); font-weight: 600; }

/* ── Apparition en cascade ── */
.stagger > * { opacity: 0; transform: translateY(16px); transition: opacity .45s var(--e), transform .45s var(--e); }
.stagger.is-visible > * { opacity: 1; transform: none; }
.stagger.is-visible > *:nth-child(1) { transition-delay: .04s; }
.stagger.is-visible > *:nth-child(2) { transition-delay: .10s; }
.stagger.is-visible > *:nth-child(3) { transition-delay: .16s; }
.stagger.is-visible > *:nth-child(4) { transition-delay: .22s; }
.stagger.is-visible > *:nth-child(5) { transition-delay: .28s; }

/* ── Le titre du hero se pose ── */

@keyframes vzWord { to { opacity: 1; transform: none; } }

/* ── Compteur ── */
.count { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .vz-runner, .vz-will, .vz-x, .vz-check, .vz-true, .vz-back, .vz-new,
  .hero__title span.w { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
  .stagger > * { opacity: 1 !important; transform: none !important; }
}


/* ── Retour au clic : le bouton s'enfonce, brievement ── */
.btn:active { transform: scale(.97); transition: transform 120ms var(--e); }
.dq__a:active { transform: scale(.99); }
.rdv__cal-day.is-free:active, .rdv__slot:active { transform: scale(.96); }

@media (prefers-reduced-motion: reduce) {
  .btn:active, .dq__a:active, .rdv__cal-day.is-free:active, .rdv__slot:active { transform: none; }
}


/* ── La photo d'ambiance de la section « Qui je suis » ── */
.who__photo figcaption {
  margin-top: 10px; font-size: 12px; color: var(--encre-pale); text-align: center;
  letter-spacing: .04em;
}
.who__photo img { aspect-ratio: 3 / 4; object-fit: cover; }


/* ── Le hero nomme d'abord le probleme ── */
.hero__kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--or-fonce); margin: 0 0 12px;
}
.hero__bridge {
  font-size: 14.5px; color: var(--encre-pale); margin: -14px 0 26px;
}
.hero__bridge a { color: var(--or-fonce); text-underline-offset: 3px; }
.final__sub { color: rgba(255,255,255,.7); margin: -10px 0 26px; font-size: 16px; }


/* ── Les piliers ont desormais un pictogramme : c'est l'absence
      d'image qui a fait decrocher le lecteur test. ── */
.pillar__ico { display: block; width: 40px; height: 40px; color: var(--or); margin-bottom: 14px; }
.pillar__ico svg { width: 100%; height: 100%; }


/* ── Le schema 03 pousse enfin. On anime la geometrie par @keyframes :
      c'est le seul mecanisme qui s'est revele fiable ici, les
      transitions et les transformations sur <rect> ne l'etaient pas. ── */
/* Les barres ne dependent d'AUCUNE animation pour exister : leur hauteur
   vient de leur attribut, point. Une barre invisible chez un visiteur dont
   le navigateur bloque le mouvement serait bien pire qu'une barre fixe.
   Le mouvement se limite a une respiration sur la barre doree — si elle ne
   joue pas, l'opacite reste simplement a sa valeur normale. */


.rdv__apres {
  margin: 22px 0 0; padding: 16px 18px; border-radius: var(--r-m);
  background: rgba(255,255,255,.6); border: 1px solid rgba(141,181,210,.5);
  font-size: 14.5px; color: var(--encre);
}
.rdv__apres strong { color: var(--nuit); }

@media (prefers-reduced-motion: reduce) {
  .lesson.is-visible .viz--boucle .vz-runner,
  .lesson.is-visible .viz--boucle .vz-node,
  .lesson.is-visible .viz--boucle .vz-will,
  .lesson.is-visible .viz--mythes .vz-myth,
  .lesson.is-visible .viz--mythes .vz-check,
  .lesson.is-visible .viz--ressources .vz-fleau,
  .lesson.is-visible .viz--ressources .vz-ajout,
  .vz-ajout { opacity: .95; }
}


/* ── La phrase-idee de chaque schema. C'est elle qui permet a un visiteur
      qui ne lit pas le texte a cote de comprendre quand meme — et elle
      reprend les mots du paragraphe, pour que dessin et texte disent
      exactement la meme chose. ── */
.vz-cap {
  font-family: 'IBM Plex Sans', sans-serif; font-size: 11.5px; font-weight: 600;
  fill: var(--nuit); letter-spacing: -.005em;
}
.vz-cap--l { text-anchor: start; }
.vz-cap--ok { fill: var(--or-fonce); }
.vz-cap--late { fill: #B4553F; }
.vz-sep { stroke: var(--bleu-doux); stroke-width: 1; opacity: .55; }
.vz-center--s { font-family: 'IBM Plex Sans', sans-serif; font-size: 10px; fill: var(--encre-pale); }


/* ── Le filet, en CSS cette fois : si le visiteur a demande moins de
      mouvement, TOUT reste lisible, y compris les chutes des schemas. ── */
@media (prefers-reduced-motion: reduce) {
  .vz-will, .vz-true { opacity: 1 !important; }
}


/* ──────── Le selecteur d'addiction ────────
   --accent est defini sur :root avec l'or du site comme valeur de
   depart. Choisir une addiction ne fait que remplacer cette variable :
   si le script ne tourne pas, tout reste dore et coherent. */
.pick { margin: 0 0 38px; }
.pick__q {
  margin: 0 0 16px; font-size: 14px; color: var(--encre-pale);
}
/* La section prend la teinte du choix, tres legerement. */
.mirror { transition: background-color .4s var(--e); }
.mirror__item { transition: border-color .3s var(--e); }
.mirror.is-pick { background: color-mix(in srgb, var(--accent) 5%, var(--blanc)); }
.mirror.is-pick .mirror__item { border-color: var(--accent); }
.mirror__close em { color: var(--accent); }

@media (max-width: 620px) {
  .pick__row { gap: 8px; }
}


@media (max-width: 720px) {
  .hero__liste { font-size: 15.5px; }
}


/* Le clic doit SE VOIR. Les trois phrases remontent brievement quand le
   choix change. L'animation part de l'etat final et y revient : si elle
   ne joue pas, le texte est deja lisible et bien place. */
@keyframes pickMaj {
  0%   { transform: translateY(8px); opacity: .35; }
  100% { transform: none; opacity: 1; }
}
.mirror.is-maj .mirror__item { animation: pickMaj .34s var(--e) both; }
.mirror.is-maj .mirror__item:nth-child(2) { animation-delay: .05s; }
.mirror.is-maj .mirror__item:nth-child(3) { animation-delay: .10s; }
.mirror.is-maj .mirror__close { animation: pickMaj .34s var(--e) .14s both; }
@media (prefers-reduced-motion: reduce) {
  .mirror.is-maj .mirror__item,
  .mirror.is-maj .mirror__close { animation: none; }
}




/* La passerelle vers les autres domaines, en bas du miroir. */
.mirror__pont { margin: 26px 0 34px; font-size: 15px; color: var(--encre-pale); }
.mirror__pont a { color: var(--or-fonce); text-underline-offset: 3px; }


/* ---- Le teaser de la seconde methode ---- */
.hero__teaser {
  margin: 0 0 26px; max-width: 34em;
  font-size: 15.5px; line-height: 1.6; color: var(--encre);
}
.hero__teaser strong { color: var(--nuit); font-weight: 600; }
.hero__teaser a {
  color: var(--or-fonce); font-weight: 600; white-space: nowrap;
  text-underline-offset: 3px;
}

@media (max-width: 720px) {
  .hero__teaser { font-size: 15px; }
}


/* ──────── La formule qui tourne, en fin de H1 ────────
   ⚠️ La PREMIERE formule est visible par defaut, sans animation. Si le
   mouvement ne joue jamais, le titre reste une phrase complete — un H1
   tronque serait la pire chose a laisser sur une page. */
.tourne {
  display: block; position: relative;
  min-height: 1.18em;                 /* reserve la place : pas de saut */
  font-family: var(--f-titre); font-style: italic; color: var(--or-fonce);
}
.tourne__i {
  position: absolute; left: 0; top: 0; right: 0;
  opacity: 0;
  animation: tourneMot 15.600000000000001s var(--e) infinite;
}
.tourne__i:first-child { opacity: 1; }   /* l'etat lisible par defaut */
.tourne__i:nth-child(2) { animation-delay: 2.60s; }
.tourne__i:nth-child(3) { animation-delay: 5.20s; }
.tourne__i:nth-child(4) { animation-delay: 7.80s; }
.tourne__i:nth-child(5) { animation-delay: 10.40s; }
.tourne__i:nth-child(6) { animation-delay: 13.00s; }

@keyframes tourneMot {
  0%              { opacity: 0; transform: translateY(9px); }
  2.33%, 16.67%  { opacity: 1; transform: none; }
  19.00%, 100%      { opacity: 0; transform: translateY(-9px); }
}

@media (max-width: 720px) {
  .tourne { min-height: 2.4em; }      /* deux lignes possibles en etroit */
}
@media (prefers-reduced-motion: reduce) {
  .tourne__i { animation: none; opacity: 0; }
  .tourne__i:first-child { opacity: 1; }
}


/* ---- Les vignettes SONT le selecteur ----
   Tim : « des belles vignettes avec de l'ecriture par-dessus », a la
   place des pastilles. On clique sur celle qui nous concerne et la page
   se personnalise. Les huit vignettes sont dans le HTML : sans
   JavaScript, la section reste une belle grille lisible. */
.vigs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.vig {
  position: relative; overflow: hidden; isolation: isolate;
  border: 0; padding: 0; cursor: pointer; text-align: left;
  border-radius: var(--r-m); background: var(--nuit);
  aspect-ratio: 4 / 3; display: block; width: 100%;
  font-family: var(--f-texte);
  transition: transform .22s var(--e), box-shadow .22s var(--e);
}
.vig img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.03);
  transition: transform .7s var(--e), filter .3s var(--e);
  filter: saturate(.86);
}
.vig::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,26,42,.14) 0%, rgba(11,26,42,.56) 52%, rgba(11,26,42,.90) 100%);
  transition: background .3s var(--e);
}
.vig__in {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: 16px 16px 15px; display: block;
}
.vig__t {
  display: block; font-family: var(--f-titre); font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px); line-height: 1.14; color: #fff;
  margin-bottom: 5px;
}
.vig__p { display: block; font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,.78); }

.vig:active { transform: scale(.985); }
.vig[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--accent);
}
.vig[aria-pressed="true"] img { filter: saturate(1); }
.vig[aria-pressed="true"]::after {
  background: linear-gradient(180deg, rgba(11,26,42,.10) 0%, rgba(11,26,42,.48) 52%, rgba(11,26,42,.86) 100%);
}

@media (hover: hover) and (pointer: fine) {
  .vig:hover img { transform: scale(1.09); filter: saturate(1); }
}
@media (max-width: 980px) {
  .vigs { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 480px) {
  .vig__t { font-size: 17px; }
  .vig__p { font-size: 12px; }
  .vig__in { padding: 13px 13px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .vig img, .vig { transition: none; }
  .vig:hover img { transform: scale(1.03); }
}


/* ---- Le mot-cle geant ----
   Tim : « au lieu d'une serie de chips, je veux que le mot s'affiche en
   enorme, un par un ». Un mot a la fois, en grand : le lecteur cherche
   le sien au lieu de balayer une grille.
   Le PREMIER mot est visible par defaut, sans animation : si le mouvement
   ne joue jamais, il reste un mot lisible, jamais un trou. */
.mot {
  position: relative; margin: 52px 0 52px;   /* l'espace qui le fait respirer */
  min-height: 1.12em;
  font-family: var(--f-titre); font-weight: 600;
  font-size: clamp(52px, 14vw, 120px); line-height: 1.06;
  letter-spacing: -.035em; color: var(--or);
}
.mot__i {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  opacity: 0;
  animation: motDefile 21.0s linear infinite;
}
.mot__i:first-child { opacity: 1; }
.mot__i:nth-child(2) { animation-delay: 1.50s; }
.mot__i:nth-child(3) { animation-delay: 3.00s; }
.mot__i:nth-child(4) { animation-delay: 4.50s; }
.mot__i:nth-child(5) { animation-delay: 6.00s; }
.mot__i:nth-child(6) { animation-delay: 7.50s; }
.mot__i:nth-child(7) { animation-delay: 9.00s; }
.mot__i:nth-child(8) { animation-delay: 10.50s; }
.mot__i:nth-child(9) { animation-delay: 12.00s; }
.mot__i:nth-child(10) { animation-delay: 13.50s; }
.mot__i:nth-child(11) { animation-delay: 15.00s; }
.mot__i:nth-child(12) { animation-delay: 16.50s; }
.mot__i:nth-child(13) { animation-delay: 18.00s; }
.mot__i:nth-child(14) { animation-delay: 19.50s; }

@keyframes motDefile {
  0%              { opacity: 0; }
  0.43%, 7.14%  { opacity: 1; }
  7.57%, 100%      { opacity: 0; }
}

@media (max-width: 480px) {
  .mot { margin: 38px 0 38px; letter-spacing: -.03em; }
}
@media (prefers-reduced-motion: reduce) {
  .mot__i { animation: none; opacity: 0; }
  .mot__i:first-child { opacity: 1; }
}


/* ---- Hero centre ----
   Demande de Tim : « centre TOUT ». La colonne de texte se centre, la
   photo reste a sa place et le bloc entier se lit sur un axe. */
.hero__inner { align-items: center; }
.hero__text { text-align: center; }
.hero__text .rating { justify-content: center; }
.hero__cta { justify-content: center; }
.mot { text-align: center; }
.mot__i { left: 0; right: 0; }
.tourne { text-align: center; }

@media (max-width: 900px) {
  .hero__text { text-align: center; }
}




/* ---- Nav : la nouvelle police est plus large ----
   Inter prend plus de place qu'IBM Plex : la marque et le bouton
   passaient sur deux lignes sous 400 px. On les tient sur une ligne. */
.nav__brand, .nav__cta { white-space: nowrap; }
@media (max-width: 560px) {
  .nav__brand { font-size: 15px; }
  .nav__cta { padding: 9px 14px; font-size: 12.5px; }
}
@media (max-width: 380px) {
  .nav__cta { padding: 8px 12px; font-size: 12px; }
}


/* ════════ HERO — direction artistique relevee sur qoves.com ════════
   Releve au getComputedStyle sur le site reel, pas d'apres capture :
   une SEULE graisse (400) partout, la hierarchie par la TAILLE et
   l'OPACITE, chasse negative sur les grands corps, boutons en pilule
   tres compacts. Aucune ombre, aucun degrade decoratif — seulement le
   voile qui rend le texte lisible sur la photo. */
.hero {
  position: relative; min-height: 92vh; display: flex; align-items: center;
  overflow: hidden; isolation: isolate; padding: 96px 0 88px;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; background: #0C1A2A; }
.hero__bg .hb {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  animation: heroDefile 27.2s linear infinite;
}
/* La premiere image est visible par defaut : si l'animation ne joue
   jamais, le hero reste une belle image, jamais un rectangle noir. */
.hero__bg .hb:first-child { opacity: 1; }
.hero__bg .hb:nth-child(2) { animation-delay: 3.40s; }
.hero__bg .hb:nth-child(3) { animation-delay: 6.80s; }
.hero__bg .hb:nth-child(4) { animation-delay: 10.20s; }
.hero__bg .hb:nth-child(5) { animation-delay: 13.60s; }
.hero__bg .hb:nth-child(6) { animation-delay: 17.00s; }
.hero__bg .hb:nth-child(7) { animation-delay: 20.40s; }
.hero__bg .hb:nth-child(8) { animation-delay: 23.80s; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg,
    rgba(12,26,42,.94) 0%, rgba(12,26,42,.82) 38%,
    rgba(12,26,42,.36) 70%, rgba(12,26,42,.20) 100%);
}
.hero__in { position: relative; z-index: 2; color: #fff; }
.hero__pre { margin: 0 0 26px; font-size: 15px; color: rgba(255,255,255,.72); }
.hero__h1 {
  margin: 0 0 22px; font-weight: 400;
  font-size: clamp(32px, 4.4vw, 56px); line-height: 1.125;
  letter-spacing: -.028em; color: #fff; max-width: 15ch;
}
.hero__h1 span { display: block; }
.hero__h1 .pale { color: rgba(255,255,255,.62); }
.hero__sub {
  margin: 0 0 34px; max-width: 40ch;
  font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.76);
}
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* L'etiquette nomme l'addiction affichee : elle remplace le mot-cle
   geant en le synchronisant avec l'image du fond. */
.hero__eti {
  position: absolute; z-index: 2; right: clamp(20px, 4vw, 54px); bottom: 34px;
  margin: 0; min-width: 14ch; height: 1.4em; text-align: right;
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.hero__eti-i {
  position: absolute; right: 0; bottom: 0; white-space: nowrap; opacity: 0;
  animation: heroDefile 27.2s linear infinite;
}
.hero__eti-i:first-child { opacity: 1; }
.hero__eti-i:nth-child(2) { animation-delay: 3.40s; }
.hero__eti-i:nth-child(3) { animation-delay: 6.80s; }
.hero__eti-i:nth-child(4) { animation-delay: 10.20s; }
.hero__eti-i:nth-child(5) { animation-delay: 13.60s; }
.hero__eti-i:nth-child(6) { animation-delay: 17.00s; }
.hero__eti-i:nth-child(7) { animation-delay: 20.40s; }
.hero__eti-i:nth-child(8) { animation-delay: 23.80s; }

@keyframes heroDefile {
  0%                       { opacity: 0; }
  2.25%, 12.50%           { opacity: 1; }
  14.75%, 100%             { opacity: 0; }
}

@media (max-width: 860px) {
  /* Cale sur le releve de qoves.com a 390x844 : le bloc est ANCRE EN BAS,
     les boutons finissent a 84 px du bas, le H1 tombe donc naturellement
     aux deux tiers de l'ecran et l'image reste entierement visible
     au-dessus. C'est ca, leur clarte : on ne remplit pas le milieu. */
  .hero { min-height: 100svh; align-items: flex-end; padding: 0 0 84px; }
  .hero .container { width: calc(100% - 32px); }
  .hero__pre { margin-bottom: 14px; font-size: 13px; }
  .hero__h1 { font-size: 32px; line-height: 1.125; margin-bottom: 8px; }
  .hero__sub { font-size: 14px; line-height: 1.42; margin-bottom: 32px; }
  /* Cote a cote, moitie-moitie, 48 px de haut — pas empiles. */
  .hero__cta { display: flex; gap: 16px; flex-wrap: nowrap; }
  .hero__cta .btn--blanc, .hero__cta .btn--verre {
    flex: 1 1 0; text-align: center; padding: 13px 10px;
    font-size: 15px; white-space: nowrap;
  }
  .hero::after {
    background: linear-gradient(180deg,
      rgba(12,26,42,.06) 0%, rgba(12,26,42,.04) 34%,
      rgba(12,26,42,.42) 62%, rgba(12,26,42,.88) 86%, rgba(12,26,42,.94) 100%);
  }
  .hero__h1 { max-width: none; }
  .hero__eti { bottom: auto; top: 92px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg .hb, .hero__eti-i { animation: none; opacity: 0; }
  .hero__bg .hb:first-child, .hero__eti-i:first-child { opacity: 1; }
}


/* ════════════════════════════════════════════════════════════════════
   DIRECTION ARTISTIQUE — relevee sur qoves.com au getComputedStyle
   ────────────────────────────────────────────────────────────────────
   Les trois regles qui font toute la clarte de ce site, et qu'on
   applique ici telles quelles :

   1. UNE SEULE GRAISSE (400). Ce qu'on prend pour du gras n'est que de
      la taille. La hierarchie passe par la TAILLE et l'OPACITE — jamais
      par le poids.
   2. ZERO ombre, ZERO degrade decoratif, ZERO bordure visible. Les
      cartes se distinguent par un fond a peine plus froid que le blanc.
   3. UN RYTHME CONSTANT entre les sections, jamais negocie.
   ════════════════════════════════════════════════════════════════════ */

:root { --rythme: clamp(38px, 4.5vw, 61px); }   /* 61 x 2 = 122 px entre deux sections : la valeur relevee */

/* ── Titres : une graisse, chasse serree, interligne court ── */
.h2, .dq__title, .lesson__title, .pillar h3, .who__text .h2,
.avis__mur-titre, .faq__title, .final h2, .vig__t, .dq__rtitle {
  font-family: var(--f-titre);
  font-weight: 400;
  letter-spacing: -.022em;
  line-height: 1.14;
}
.h2 { font-size: clamp(30px, 3.6vw, 46px); }
.h2 em, .dq__title em, .lesson__title em, .pillar h3 em, .dq__rtitle em {
  font-style: normal;                 /* Qoves n'italise jamais */
  color: var(--or-fonce);
}

/* ── Corps : 16 px / 1,5, la valeur relevee ── */
body { font-size: 16px; line-height: 1.5; letter-spacing: 0; }
.section-lede, .lesson__body p, .who__lede, .rdv__text p, .dq__sub {
  font-size: 16.5px; line-height: 1.55; color: var(--encre);
}

/* ── Surlignes : discretes, jamais dorees en capitales criardes ── */
.eyebrow, .cles__titre, .hero__pre {
  font-weight: 500; text-transform: uppercase;
  letter-spacing: .14em; font-size: 11px; color: var(--encre-pale);
}

/* ── Boutons : pilule compacte, graisse 500 ── */
.btn {
  border-radius: 999px; font-weight: 500; letter-spacing: -.005em;
  box-shadow: none;
}
.btn--lg { padding: 14px 28px; font-size: 15px; }
.btn--blanc {
  background: #fff; color: var(--nuit); border: 0;
  padding: 15px 30px; font-size: 15px; font-weight: 500;
  border-radius: 999px; display: inline-block; text-decoration: none;
  transition: transform .14s var(--e), background-color .2s var(--e);
}
.btn--verre {
  background: rgba(255,255,255,.16); color: #fff; border: 0;
  padding: 15px 30px; font-size: 15px; font-weight: 500;
  border-radius: 999px; display: inline-block; text-decoration: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .14s var(--e), background-color .2s var(--e);
}
.btn--blanc:active, .btn--verre:active { transform: scale(.975); }
@media (hover: hover) and (pointer: fine) {
  .btn--verre:hover { background: rgba(255,255,255,.26); }
}

/* ── Cartes : fond a peine froid, radius 12, ni bordure ni ombre ── */
.mirror__item, .tcard, .pillar, .dq__card, .rdv__apres, .avis__plus-btn {
  background: var(--brume-2);
  border: 0;
  border-radius: var(--r-m);
  box-shadow: none;
}
.lesson__visual { box-shadow: none; border: 0; background: var(--brume-2); }
.vig { border-radius: var(--r-m); }
.who__photo, .lesson__visual, .scene-large { box-shadow: none; }

/* ── Rythme : une seule valeur entre toutes les sections ── */
.mirror, .dq, .learn, .who, .pillars, .proof, .avis, .rdv, .faq, .final {
  padding-top: var(--rythme);
  padding-bottom: var(--rythme);
}

/* ── Filets : 0,8 px, presque invisibles ── */
.lesson + .lesson, .faq__item { border-top: .8px solid #E8EEF3; }


/* ── Nav : transparente sur le hero, solide ensuite ──
   L'etat SOLIDE est celui par defaut. La transparence est un ajout pose
   par le script : si le script ne tourne pas, on ne se retrouve jamais
   avec du texte blanc sur un fond blanc. */
.nav { transition: background-color .3s var(--e), border-color .3s var(--e); }
.nav.sur-image {
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: transparent;
}
.nav.sur-image .nav__brand,
.nav.sur-image .nav__brand strong,
.nav.sur-image .nav__links a { color: #fff; }
.nav.sur-image .nav__brand span,
.nav.sur-image .nav__brand small { color: rgba(255,255,255,.66); }
.nav.sur-image .nav__cta {
  background: #fff; color: var(--nuit); border-color: #fff;
}
.nav.sur-image .nav__links a:hover { border-bottom-color: rgba(255,255,255,.7); }

/* Les boutons du hero s'alignent a gauche, comme la maquette validee. */
.hero__cta { justify-content: flex-start; }


/* ════════ Sections basses — suite de la DA Qoves ════════ */

/* Le portrait faisait 978 px pour 540 px de texte : la section perdait
   son assise. On lui donne un format et un plafond. */
.who__photo {
  aspect-ratio: 4 / 5; max-height: 540px; overflow: hidden;
  border-radius: var(--r-m);
}
.who__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 18%; }
.who__photo figcaption {
  position: static; margin-top: 10px; font-size: 12.5px; color: var(--encre-pale);
}

/* La pastille du quiz : Qoves n'utilise jamais de fond colore pour une
   surligne. Elle redevient du texte. */
.dq__badge {
  background: none; padding: 0; border-radius: 0;
  font-size: 11px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--encre-pale);
}
.dq__card { padding: clamp(30px, 4vw, 52px); }

/* Les piliers, les lecons, la FAQ, les avis : meme traitement de carte —
   fond a peine plus froid, radius 12, ni bordure ni ombre. */
.pillar, .lesson__visual, .tcard, .rdv__apres, .faq__item, .dq__a {
  box-shadow: none;
  border-radius: var(--r-m);
}
.dq__a { border: .8px solid #E3EBF1; background: #fff; }
.dq__a:hover { border-color: var(--or); }
.faq__item { border: 0; border-top: .8px solid #E8EEF3; border-radius: 0; background: none; }
.faq__item summary { font-weight: 500; }

/* La visio : le voile ne doit pas noyer la photo (lecon Samira, regle 67). */
.proof__bg::after {
  background: linear-gradient(180deg, rgba(12,26,42,.62) 0%, rgba(12,26,42,.86) 100%);
}
.proof__text { font-size: 17px; line-height: 1.55; }

/* Le rendez-vous et le CTA final : boutons pilule, aucune ombre. */
.rdv, .final { box-shadow: none; }
.final h2 { letter-spacing: -.022em; }

/* Les avis : la note en tete perd son gros chiffre serif. */
.avis__note { font-size: 15px; color: var(--encre); }
.avis__stars { font-size: 16px; letter-spacing: 2px; }

/* Le bandeau collant : meme langage que les boutons. */
.sticky__btn, .btn--block { border-radius: 999px; font-weight: 500; }


/* ── Les photos de nuit ont besoin d'aide ──
   Qoves photographie un visage en plein jour ; nos scenes sont
   nocturnes. Un voile leger ne suffit pas, il faut remonter l'image
   elle-meme, sinon le tiers du haut reste un rectangle noir. */
.hero__bg .hb { filter: brightness(1.24) contrast(.96) saturate(1.04); }

/* ── Le socle : l'equivalent honnete de leur bande de logos de presse.
      David n'a pas de logos, et on n'en inventera pas. Ce qui est vrai,
      ce sont ses quatre pratiques. ── */
.hero__socle {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  margin: 0; padding: 14px clamp(16px, 4vw, 54px);
  list-style: none; display: flex; flex-wrap: wrap;
  gap: 8px 26px; justify-content: center;
  border-top: .8px solid rgba(255,255,255,.14);
  background: rgba(8,18,30,.34);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero__socle li {
  font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,.66);
}

/* ── Le menu mobile : il n'y en avait AUCUN sous 900 px ── */
.nav__menu {
  display: none; width: 40px; height: 40px; padding: 0;
  border: 0; background: none; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav__menu span {
  display: block; width: 20px; height: 1.6px; border-radius: 2px;
  background: var(--nuit);
  transition: transform .24s var(--e), opacity .24s var(--e);
}
.nav.sur-image .nav__menu span { background: #fff; }
.nav__menu[aria-expanded="true"] span:first-child { transform: translateY(3.3px) rotate(45deg); }
.nav__menu[aria-expanded="true"] span:last-child { transform: translateY(-3.3px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav__menu { display: flex; }
  .nav__links {
    display: flex; flex-direction: column; gap: 0;
    position: fixed; left: 0; right: 0; top: 0;
    padding: 78px 22px 26px;
    background: var(--blanc);
    border-bottom: .8px solid #E8EEF3;
    transform: translateY(-102%);
    transition: transform .32s var(--e);
    z-index: -1;
  }
  .nav__links.est-ouvert { transform: none; }
  .nav__links a {
    padding: 15px 0; font-size: 16px; color: var(--nuit);
    border-bottom: .8px solid #EEF3F7; border-top: 0;
  }
  .nav__links a:last-child { border-bottom: 0; }
  /* Menu ouvert : la nav redevient solide, sinon le texte serait blanc
     sur blanc. */
  .nav.est-ouvert, .nav.est-ouvert.sur-image {
    background: var(--blanc);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .nav.est-ouvert .nav__brand, .nav.est-ouvert .nav__menu span { color: var(--nuit); }
  .nav.est-ouvert.sur-image .nav__menu span { background: var(--nuit); }
  .nav.est-ouvert.sur-image .nav__brand,
  .nav.est-ouvert.sur-image .nav__brand strong { color: var(--nuit); }
  .nav.est-ouvert.sur-image .nav__cta { background: var(--or); color: #fff; }
}

@media (max-width: 860px) {
  .hero { padding-bottom: 128px; }        /* la place du socle */
  .hero__socle { gap: 6px 18px; padding: 11px 16px; }
  .hero__socle li { font-size: 11px; }
}


/* ── Section 2, articulee comme Qoves ──
   Surligne minuscule, H2 de deux lignes dont la seconde est PALE (meme
   corps, meme graisse : la hierarchie se fait a l'opacite, jamais au
   poids ni a la couleur), sous-titre court et centre. */
.mirror__eyebrow { text-align: center; margin-bottom: 14px; }
.mirror__title { text-align: center; max-width: 22ch; margin-inline: auto; }
.mirror__title .pale { color: var(--encre-pale); }
.pick__q {
  text-align: center; max-width: 44ch; margin: 0 auto 30px;
  font-size: 15.5px; color: var(--encre);
}

/* ── Sur mobile, les vignettes defilent au lieu de s'empiler ──
   Qoves montre UNE grande image. Huit vignettes de 160 px de large
   n'ont pas le meme effet : on ne lit ni le titre ni la ligne. En
   defilement horizontal a l'aimant, chacune reprend sa taille. */
@media (max-width: 720px) {
  .vigs {
    display: flex; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 2px 16px 14px;
    margin-inline: -16px;
    scrollbar-width: none;
  }
  .vigs::-webkit-scrollbar { display: none; }
  .vig {
    flex: 0 0 78%; scroll-snap-align: center;
    aspect-ratio: 3 / 4;
  }
  .vig__t { font-size: 21px; }
  .vig__p { font-size: 13.5px; }
  .vig__in { padding: 20px 20px 18px; }
}


/* ── Les trois piliers en rangees, comme Qoves ──
   Une petite vignette a gauche, le titre et deux lignes a droite, un
   filet fin entre chaque. On en lit trois d'un coup d'oeil au lieu d'en
   derouler une par ecran. */
.pillars__grid { display: block; }
.pillar {
  display: grid; grid-template-columns: 76px 1fr; gap: 18px;
  align-items: start; text-align: left;
  padding: 22px 0; background: none; border-radius: 0;
  border-top: .8px solid #E8EEF3;
}
.pillar:first-child { border-top: 0; }
.pillar__ico {
  grid-row: span 3;
  display: grid; place-items: center;
  width: 76px; height: 76px; border-radius: var(--r-m);
  background: var(--brume); color: var(--or-fonce);
}
.pillar__ico svg { width: 28px; height: 28px; }
.pillar__num {
  grid-column: 2; margin: 0 0 4px;
  font-size: 11px; font-weight: 500; letter-spacing: .14em;
  color: var(--encre-pale);
}
.pillar h3 {
  grid-column: 2; margin: 0 0 6px;
  font-size: 19px; line-height: 1.25; letter-spacing: -.015em;
}
.pillar p {
  grid-column: 2; margin: 0;
  font-size: 14.5px; line-height: 1.5; color: var(--encre);
}

@media (max-width: 620px) {
  .pillar { grid-template-columns: 60px 1fr; gap: 14px; padding: 18px 0; }
  .pillar__ico { width: 60px; height: 60px; }
  .pillar__ico svg { width: 24px; height: 24px; }
  .pillar h3 { font-size: 18px; }
}


/* Le bouton de menu prend de la place : sous 620 px la marque perd son
   sous-titre et le CTA se resserre, sinon les trois se chevauchent. */
@media (max-width: 620px) {
  .nav { gap: 10px; padding: 10px 14px; }
  .nav__role { display: none; }
  .nav__brand { font-size: 15px; }
  .nav__cta { padding: 9px 14px; font-size: 12.5px; }
  .nav__menu { width: 34px; height: 34px; }
}
@media (max-width: 400px) {
  .nav__name { font-size: 14px; }
  .nav__cta { padding: 8px 12px; font-size: 12px; }
}


/* ── « Qui je suis » — mise en page de l'ancien site, voulue par David ──
   Photo a gauche, carte nom / role / lieu posee en bas de la photo, texte a
   droite. Le bloc a remplace le teaser « Pourquoi lui » le 15/09/2026. */
.who__inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 5vw, 72px); }
.who__photo { position: relative; max-width: 440px; max-height: 580px; width: 100%; }
.who__photo .who__carte {
  position: absolute; left: 14px; right: 14px; bottom: 14px; margin: 0;
  display: grid; gap: 3px; text-align: left;
  padding: 16px 18px; border-radius: var(--r-m);
  background: var(--nuit); color: #fff; letter-spacing: 0;
}
.who__carte-nom { font-size: 17px; }
.who__carte-role { font-size: 13px; color: var(--or); }
.who__carte-lieu { font-size: 12.5px; color: rgba(255, 255, 255, .72); }

/* ⚠️ Cette regle arrive APRES le responsive general : sans ce rappel, les deux
   colonnes ecrasaient la colonne unique du mobile. */
@media (max-width: 1000px) {
  .who__inner { grid-template-columns: 1fr; gap: 36px; }
  .who__photo { margin-inline: auto; max-width: 400px; }
}


/* Le socle passait sur deux lignes en mobile et allongeait le hero
   d'autant. Sous 520 px on ne garde que les deux pratiques qui portent
   le positionnement. */
@media (max-width: 520px) {
  .hero__socle li:nth-child(3), .hero__socle li:nth-child(4) { display: none; }
  .hero__socle { gap: 0 20px; }
  .hero { padding-bottom: 108px; }
}


/* Le second rappel : l'invitation d'origine est au-dessus du carrousel,
   donc hors ecran une fois qu'on a fait defiler. Sans ce rappel, les
   trois phrases ont l'air d'un texte fixe. */
.mirror__rappel {
  max-width: 46ch; margin: 26px auto 22px; text-align: center;
  font-size: 14px; line-height: 1.5; color: var(--encre-pale);
}
.mirror__rappel strong { color: var(--or-fonce); font-weight: 500; }
.mirror__rappel span {
  display: inline-block; margin-right: 6px;
  color: var(--or); font-size: 15px;
}


/* ── Le quiz, a la grammaire Qoves ──
   Pas de boite posee au milieu d'une section : la section EST le bloc.
   Les reponses deviennent des rangees separees par un filet fin, pas des
   cartes a grosse bordure. */
.dq { background: var(--brume-2); }
.dq__card {
  background: none; border: 0; box-shadow: none;
  max-width: 640px; margin-inline: auto; padding: 0;
}
.dq__title { font-size: clamp(26px, 3.2vw, 38px); }
.dq__title .pale { color: var(--encre-pale); }
.dq__badge { display: block; margin-bottom: 16px; }
.dq__sub { max-width: 46ch; margin-inline: auto; }
.dq__meta { font-size: 12.5px; color: var(--encre-pale); }

.dq__answers { display: block; margin-top: 6px; }
.dq__a {
  width: 100%;
  border: 0; border-top: .8px solid #E3EBF1; border-radius: 0;
  background: none; padding: 17px 4px;
  font-size: 16px; gap: 14px;
}
.dq__a:first-child { border-top: 0; }
.dq__a:hover { border-color: #E3EBF1; background: rgba(190,134,58,.05); transform: none; }
.dq__a.is-sel { background: rgba(190,134,58,.09); border-color: #E3EBF1; }
.dq__a-ico { font-size: 17px; opacity: .8; }

.dq__q { font-size: clamp(21px, 2.5vw, 27px); letter-spacing: -.018em; line-height: 1.22; }
.dq__progress { height: 2px; background: #E3EBF1; border-radius: 2px; }
.dq__bar { background: var(--or); }
.dq__step { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-pale); }


/* ── « Comprendre » en cartes de verre sur mobile ──
   En grille, le numero flottait dans une colonne vide et le visuel
   passait APRES les paragraphes : il n'ancrait plus rien. En carte, le
   visuel ouvre la lecon et le numero redevient une pastille. */
@media (max-width: 900px) {
  .lesson + .lesson { margin-top: 16px; }

  .lesson, .lesson--flip {
    display: flex; flex-direction: column;   /* sans flex, `order` est inerte */
    padding: 0; border-top: 0;
    background: rgba(255, 255, 255, .62);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border: .8px solid rgba(255, 255, 255, .8);
    border-radius: var(--r-l);
    box-shadow: 0 14px 34px -20px rgba(12, 26, 42, .26);
    overflow: hidden;
  }

  /* Le visuel ouvre la lecon. */
  .lesson__visual, .lesson--flip .lesson__visual {
    order: 1; max-width: none; margin: 0;
    background: var(--brume); border-radius: 0;
    padding: 20px 18px 14px;
  }
  .lesson__visual .viz { max-width: 260px; margin-inline: auto; }
  .lesson__visual .viz--photos { max-width: 320px; margin-inline: auto; }

  .lesson__body { order: 3; padding: 0 20px 24px; }

  /* Le numero redevient une pastille, en tete du texte. */
  .lesson__num, .lesson--flip .lesson__num {
    order: 2; align-self: flex-start; margin: 20px 20px 8px;
    font-size: 11px; font-weight: 500; letter-spacing: .16em;
    color: var(--or-fonce); opacity: 1;
  }
  .lesson__title { font-size: 21px; line-height: 1.24; margin-bottom: 12px; }
  .lesson__body p { font-size: 15px; line-height: 1.55; }
  .lesson__body p + p { margin-top: 12px; }
}

@media (max-width: 620px) {
  .lesson__body { padding: 0 17px 22px; }
  .lesson__num { margin: 18px 17px 8px; }
  .lesson__title { font-size: 20px; }
}


/* ── Le fond du site suit l'addiction choisie ──
   Les jetons --blanc, --brume et --brume-2 sont redefinis par le script.
   Ici on ne fait qu'ajouter la transition, pour que le changement se
   SENTE au lieu de sauter. La teinte reste sous 12 % : le fond change
   visiblement sans jamais s'approcher du texte. */
body, .mirror, .dq, .learn, .who, .pillars, .avis, .rdv, .faq,
.tcard, .lesson__visual, .vig, .dq__a, .hero__socle {
  transition: background-color .55s var(--e);
}
.est-teinte body { background: var(--blanc); }

@media (prefers-reduced-motion: reduce) {
  body, .mirror, .dq, .learn, .who, .pillars, .avis, .rdv, .faq,
  .tcard, .lesson__visual, .vig, .dq__a, .hero__socle { transition: none; }
}


/* ── Le bouton collant nomme le choix ── */
.sticky__btn {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  line-height: 1.15; padding: 10px 22px;
}
.sticky__l1 { font-size: 14px; font-weight: 500; }
.sticky__l2 {
  font-size: 12.5px; font-weight: 600;
  color: rgba(255, 255, 255, .88);
}
@media (max-width: 430px) {
  .sticky__btn { padding: 9px 16px; }
  .sticky__l1 { font-size: 13px; }
  .sticky__l2 { font-size: 11.5px; }
}


/* ── Contraste des secondes lignes de titre ──
   Mesure : --encre-pale (#7C93A8) donnait 2,7:1, sous le minimum WCAG de
   4,5:1 (et meme sous les 3:1 tolerés pour du grand texte). On passe a la
   couleur du texte a 72 % d'opacite, comme Qoves : ~5:1, et ca s'adapte
   tout seul au fond quelle que soit la teinte choisie. */
.hero__h1 .pale { color: rgba(255, 255, 255, .66); }
.mirror__title .pale,
.dq__title .pale,
.h2 .pale { color: rgba(22, 50, 78, .72); }


/* ── La preuve sociale du premier ecran ──
   Elle heritait du style des surlignes : 11 px, capitales, gris pale.
   Sur un fond photo sombre, elle disparaissait — alors que c'est la
   SEULE preuve sociale visible avant le premier defilement. */
.hero__pre {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  text-transform: none; letter-spacing: 0;
  font-size: 14px; font-weight: 400;
  color: rgba(255, 255, 255, .88);
}
.hero__pre-e {
  color: var(--or-clair); font-size: 15px; letter-spacing: 2px;
  text-shadow: 0 1px 6px rgba(8, 18, 30, .5);
}
.hero__pre-t strong { font-weight: 600; color: #fff; }

@media (max-width: 860px) {
  .hero__pre { gap: 7px; font-size: 13px; margin-bottom: 14px; }
  .hero__pre-e { font-size: 14px; }
}

/* ════════ Video de presentation dans « Qui je suis » (18/09/2026) ════════
   La photo de la terrasse reste la couverture : une image de webcam de
   bureau ferait moins soigne. Au clic, le cadre passe en vertical (9:16)
   pour que les sous-titres incrustes ne soient pas rognes. */
.who__play {
  position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0 0 142px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px;
  border: 0; background: transparent; cursor: pointer; color: #fff; font: inherit;
}
.who__play-rond {
  display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
  background: var(--or); color: #fff; padding-left: 3px;
  box-shadow: 0 0 0 8px rgba(190, 134, 58, .28);
  transition: transform 180ms var(--e), box-shadow 180ms var(--e);
}
.who__play-label {
  font-size: 13px; letter-spacing: .02em; padding: 7px 14px; border-radius: 999px;
  background: rgba(22, 50, 78, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.who__play:hover .who__play-rond { transform: scale(1.06); box-shadow: 0 0 0 12px rgba(190, 134, 58, .22); }
.who__play:active .who__play-rond { transform: scale(.96); }
.who__play:focus-visible { outline: none; }
.who__play:focus-visible .who__play-rond { outline: 3px solid #fff; outline-offset: 4px; }

.who__video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--nuit); }
.who__photo.is-playing { aspect-ratio: 9 / 16; max-height: none; max-width: 360px; background: var(--nuit); }
.who__photo.is-playing img,
.who__photo.is-playing .who__play,
.who__photo.is-playing .who__carte { display: none; }

@media (max-width: 1000px) {
  .who__photo.is-playing { max-width: 360px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .who__play-rond { transition: none; }
}

/* ════════ Reservation Medoucine (18/09/2026) ════════
   Remplace le calendrier maison. Meme carte blanche que l'ancien calendrier. */
.rdv__book {
  background: #fff; border: 1px solid rgba(141,181,210,.55); border-radius: var(--r-l);
  padding: 32px 30px; display: grid; gap: 14px;
}
.rdv__book-eyebrow { margin: 0; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--or-fonce); }
.rdv__book-title { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 400; color: var(--nuit); }
.rdv__book-text { margin: 0; color: var(--encre); }
.rdv__book-facts { list-style: none; margin: 4px 0 6px; padding: 16px 0 0; border-top: 1px solid rgba(141,181,210,.45);
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rdv__book-facts li { display: grid; gap: 2px; }
.rdv__book-facts span { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-pale); }
.rdv__book-facts strong { font-size: 22px; font-weight: 400; color: var(--nuit); }
.rdv__book-btn { width: 100%; justify-content: center; text-align: center; }
.rdv__book-note { margin: 0; font-size: 13px; color: var(--encre-pale); text-align: center; }