/* =============================================================
   CHEMS ACADEMY, LP Formation Microblading & Shading
   Architecture et mécaniques reprises du système « vertris ».
   Seuls la palette et les polices changent : ce sont celles de la marque
   (relevées sur chemsacademy.com). Les noms de variables sont conservés
   pour que la structure reste strictement identique.
   1. Tokens  2. Base  3. Mouvement  4. En-tête  5. Hero
   6. Sections  7. Composants  8. Pied  9. Responsive
   ============================================================= */

/* ------------------------- 1. TOKENS ------------------------ */
:root {
  /* Palette relevée */
  --sable: #f1ede4;          /* albâtre, fond de page */
  --sable-clair: #faf7ef;    /* marbre clair, cartes */
  --sable-profond: #e9e4d7;  /* marbre, sections alternées */
  --olive: #5c1f28;          /* bordeaux signature, accent rare */
  --olive-fonce: #4a1720;
  --olive-clair: #c1a265;    /* laiton, filets, étiquettes */
  --encre: #2a2220;
  --encre-douce: #6b6055;
  --gris: #a89a8c;   /* veinage taupe */
  --blanc: #ffffff;
  --ligne: rgba(193, 162, 101, 0.34);  /* filet laiton */

  /* Typographie */
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Open Sans", -apple-system, "Segoe UI", Helvetica, sans-serif;

  /* Échelle typographique */
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-lead: 1.0625rem;
  --t-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --t-h2: clamp(2.1rem, 1.4rem + 3.2vw, 4rem);
  --t-h1: clamp(2.6rem, 1.2rem + 6.4vw, 5.5rem);

  /* Espacement */
  --e1: 0.5rem;
  --e2: 0.75rem;
  --e3: 1rem;
  --e4: 1.5rem;
  --e5: 2rem;
  --e6: 3rem;
  --e7: 4.5rem;

  /* Structure */
  --section: clamp(72px, 4rem + 5vw, 148px);
  --gouttiere: clamp(20px, 1rem + 2.5vw, 44px);
  --max: 1200px;
  --entete-h: 70px;

  /* Formes */
  --r-sm: 8px;               /* rayon des boutons du modèle */
  --r-md: 14px;
  --r-lg: 24px;
  --r-xl: 34px;
  --ombre: 0 28px 64px -40px rgba(42, 34, 32, 0.28);
  --ombre-carte: 0 1px 10px -8px rgba(42, 34, 32, 0.3);

  /* Mouvement */
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);   /* expo out, cf. Lenis */
  --duree: 780ms;
}

/* -------------------------- 2. BASE ------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete-h) + var(--e3));
  -webkit-text-size-adjust: 100%;
}
/* le lissage JS pilote le scroll : on neutralise le natif pour éviter le conflit */
html.lissage { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--sable);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.02; text-wrap: balance; }
h1 { font-family: var(--serif); font-size: var(--t-h1); letter-spacing: -0.015em; }
h2 { font-family: var(--serif); font-size: var(--t-h2); letter-spacing: -0.012em; }
h3 { font-family: var(--sans); font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.01em; line-height: 1.24; }
p { margin: 0; max-width: 62ch; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }

:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 3px;
  border-radius: 3px;
}

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gouttiere); }
.wrap--etroit { max-width: 880px; }
section { padding-block: var(--section); position: relative; }

/* ------------------------ 3. MOUVEMENT ---------------------- */
/* État de départ relevé sur le modèle : opacity 0 · blur(10px) · y 10px */
[data-reveal] {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(10px);
  transition:
    opacity var(--duree) var(--sortie),
    filter var(--duree) var(--sortie),
    transform var(--duree) var(--sortie);
  will-change: opacity, filter, transform;
}
[data-reveal].vu {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
}

/* Titres découpés par caractère */
[data-lettres] .mot { display: inline-block; white-space: nowrap; }
[data-lettres] .lettre {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(10px);
  transition:
    opacity 620ms var(--sortie),
    filter 620ms var(--sortie),
    transform 620ms var(--sortie);
  will-change: opacity, filter, transform;
}
[data-lettres] .lettre--espace { white-space: pre; }
[data-lettres].vu .lettre {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
}

/* Le filtre #wind reste en boucle libre, jamais lié au scroll */
.vent { filter: url(#wind); will-change: transform; }

/* `filter` ne peut pas porter à la fois la déformation et le flou de révélation.
   Sur un élément « vent », on garde la déformation et on révèle par l'opacité
   et la translation seules, sinon la règle `.vu` écrase le filtre. */
.vent[data-reveal],
.vent[data-reveal].vu { filter: url(#wind); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], [data-lettres] .lettre {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
  .vent { filter: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ------------------------- 4. EN-TÊTE ----------------------- */
.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  transition: background 420ms var(--sortie), backdrop-filter 420ms var(--sortie), border-color 420ms var(--sortie);
  border-bottom: 1px solid transparent;
}
.entete--pose {
  background: rgba(241, 237, 228, 0.88);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--ligne);
}
.entete .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  min-height: var(--entete-h);
}
.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--serif);
  font-size: 1.6rem;
  letter-spacing: -0.01em;
}
.marque svg { width: 17px; height: 26px; }

.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav a {
  padding: 0.6rem 0.9rem;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--encre-douce);
  transition: background 220ms var(--sortie), color 220ms var(--sortie);
}
.nav a:hover { background: rgba(31, 26, 21, 0.05); color: var(--encre); }

.entete__actions { display: flex; align-items: center; gap: var(--e2); }

/* ------------------------ 5. BOUTONS ------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 260ms var(--sortie), color 260ms var(--sortie),
              border-color 260ms var(--sortie), transform 260ms var(--sortie);
}
.btn--plein { background: var(--olive); color: var(--sable); }
.btn--plein:hover { background: var(--olive-fonce); transform: translateY(-1px); }
.btn--clair { background: var(--sable); color: var(--encre); border-color: var(--ligne); }
.btn--clair:hover { background: var(--blanc); transform: translateY(-1px); }
.btn--fantome { color: var(--encre-douce); }
.btn--fantome:hover { background: rgba(31, 26, 21, 0.05); color: var(--encre); }
.btn--grand { min-height: 54px; padding: 0 1.9rem; font-size: var(--t-base); }

/* -------------------------- 6. HERO ------------------------- */
.hero {
  padding-top: calc(var(--entete-h) + clamp(48px, 3rem + 4vw, 96px));
  padding-bottom: var(--e6);
  text-align: center;
  position: relative;
  /* pas de rognage : les panneaux latéraux débordent sous le hero,
     comme sur le modèle. Le débordement horizontal est déjà coupé
     par `overflow-x: hidden` sur body. */
}
/* la bande visuelle repasse au-dessus des panneaux */
#demo { z-index: 2; }
.hero__contenu { display: grid; justify-items: center; gap: var(--e4); position: relative; z-index: 2; }

/* pastille « soutenu par » */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--sable-clair);
  border: 1px solid var(--ligne);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-size: var(--t-xs);
  color: var(--encre-douce);
  box-shadow: var(--ombre-carte);
}
.pastille__logo {
  display: inline-grid;
  place-items: center;
  width: 17px; height: 17px;
  border-radius: 3px;
  background: #ff6b35;
  color: var(--blanc);
  font-size: 10px;
  font-weight: 700;
  font-family: var(--sans);
}

/* titre encadré par deux parenthèses géantes */
.hero__titre {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.6rem, 2.5vw, 2.4rem);
  width: 100%;
}
.hero__titre h1 { max-width: 14ch; }
.parenthese {
  font-family: var(--serif);
  font-size: clamp(3.4rem, 2rem + 7vw, 7rem);
  line-height: 0.8;
  color: var(--encre);
  flex: none;
  transform: scaleY(1.65);
  transform-origin: center;
}

.hero p.chapeau { color: var(--encre-douce); font-size: var(--t-lead); max-width: 52ch; margin-inline: auto; }

/* --- Panneaux latéraux du hero ---------------------------------
   Géométrie relevée sur le modèle à 1280 px de large :
     gauche  left -2   top 232   365 × 767
     droite  left 984  top 262   283 × 997
   Ils débordent volontairement sous le hero et passent derrière la
   bande visuelle : le hero ne doit donc pas les rogner.
   Largeurs exprimées en vw pour tenir l'échelle sur d'autres tailles. */
.flanc {
  position: absolute;
  top: 232px;
  z-index: 0;
  pointer-events: none;
}
.flanc--gauche {
  left: -2px;
  width: clamp(150px, 28.5vw, 365px);
  height: clamp(420px, 60vw, 767px);
}
.flanc--droit {
  right: 13px;
  top: 262px;
  width: clamp(120px, 22.1vw, 283px);
  height: clamp(500px, 78vw, 997px);
}

/* Ici les flancs portent des photographies, pas des découpes : donc
   `cover` (cadrage plein) et surtout aucun filtre `wind`, une photo qui
   ondule ne ressemble à rien. La déformation reste réservée au décoratif. */
.flanc img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--r-md);
}
.flanc { opacity: 0.9; }

/* ------------------- 7. BANDE VISUELLE ---------------------- */
.bande {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: linear-gradient(172deg, #bcd0dd 0%, #d9dcc9 46%, #b9c2a0 100%);
  box-shadow: var(--ombre);
  isolation: isolate;
}
.bande__ciel {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 22% 18%, rgba(255,255,255,0.85), transparent 55%),
    radial-gradient(90% 60% at 78% 30%, rgba(255,255,255,0.6), transparent 60%);
}
.bande__feuillage {
  position: absolute;
  inset: auto -2% -4% -2%;
  height: 46%;
  background:
    radial-gradient(60% 100% at 10% 100%, #6f7f52 0%, transparent 62%),
    radial-gradient(50% 100% at 88% 100%, #5d6d46 0%, transparent 60%),
    linear-gradient(to top, rgba(93,109,70,0.75), transparent 78%);
}
/* fenêtre applicative posée au centre de la bande */
.bande__ui {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: min(74%, 660px);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--r-md);
  box-shadow: 0 30px 70px -34px rgba(20, 30, 20, 0.55);
  overflow: hidden;
  font-size: var(--t-xs);
}
.ui__barre {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--ligne);
  background: rgba(255, 255, 255, 0.7);
}
.ui__pastille { width: 9px; height: 9px; border-radius: 50%; background: var(--sable-profond); }
.ui__url {
  margin-left: 0.5rem;
  color: var(--gris);
  font-size: 11px;
  letter-spacing: 0.01em;
}
.ui__corps { display: grid; grid-template-columns: 34% 1fr; min-height: 190px; }
.ui__colonne { border-right: 1px solid var(--ligne); padding: 0.8rem; display: grid; gap: 0.5rem; align-content: start; }
.ui__ligne { height: 9px; border-radius: 3px; background: var(--sable-profond); }
.ui__ligne--court { width: 52%; }
.ui__ligne--moyen { width: 74%; }
.ui__ligne--accent { background: var(--olive-clair); width: 62%; }
.ui__panneau { padding: 0.9rem; display: grid; gap: 0.55rem; align-content: start; }
.ui__carte {
  border: 1px solid var(--ligne);
  border-radius: 7px;
  padding: 0.55rem 0.65rem;
  display: grid;
  gap: 0.4rem;
  background: var(--blanc);
}

/* -------------------- 8. SECTIONS TEXTE --------------------- */
.entete-section { display: grid; gap: var(--e3); justify-items: center; text-align: center; margin-bottom: var(--e7); }
.entete-section p { color: var(--encre-douce); }
.entete-section--gauche { justify-items: start; text-align: left; }

.etiquette {
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive-clair);
  font-weight: 500;
}

/* liste numérotée 01 → 04 */
.etapes { display: grid; gap: var(--e5); }
.etape {
  display: grid;
  gap: var(--e4);
  grid-template-columns: 1fr;
  align-items: center;
  padding: var(--e5);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  background: var(--sable-clair);
}
.etape__num {
  font-family: var(--serif);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--olive-clair);
  font-variant-numeric: tabular-nums;
}
.etape__texte { display: grid; gap: var(--e2); }
.etape__texte p { color: var(--encre-douce); font-size: var(--t-sm); }
.puces { list-style: none; margin: var(--e2) 0 0; padding: 0; display: grid; gap: 0.45rem; }
.puces li {
  position: relative;
  padding-left: 1.35rem;
  font-size: var(--t-sm);
  color: var(--encre-douce);
}
.puces li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--olive-clair);
}
.etape__visuel {
  border-radius: var(--r-md);
  background: var(--blanc);
  border: 1px solid var(--ligne);
  padding: var(--e3);
  display: grid;
  gap: 0.5rem;
  align-content: start;
  min-height: 168px;
}

/* trio de cartes */
.cartes { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr)); }
.carte {
  display: grid;
  gap: var(--e2);
  align-content: start;
  padding: var(--e5);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  background: var(--sable-clair);
  transition: transform 420ms var(--sortie), background 420ms var(--sortie);
}
.carte:hover { transform: translateY(-3px); background: var(--blanc); }
.carte p { color: var(--encre-douce); font-size: var(--t-sm); }
.carte__icone {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--sable-profond);
  color: var(--olive);
  margin-bottom: var(--e1);
}

/* bloc sécurité, fond olive */
.olive {
  background: var(--olive);
  color: var(--sable);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 1.4rem + 3vw, 4rem);
}
.olive h2 { color: var(--sable); }
.olive p { color: rgba(241, 237, 229, 0.8); }
.olive .etiquette { color: rgba(241, 237, 229, 0.6); }
.olive__grille { display: grid; gap: var(--e5); grid-template-columns: 1fr; align-items: center; }
.metrique {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 1.8rem + 3.4vw, 4.4rem);
  line-height: 1;
  color: var(--sable);
  font-variant-numeric: tabular-nums;
}
.olive__encart {
  border: 1px solid rgba(241, 237, 229, 0.22);
  border-radius: var(--r-md);
  padding: var(--e4);
  display: grid;
  gap: var(--e2);
  background: rgba(255, 255, 255, 0.05);
}

/* clôture */
.cloture { text-align: center; display: grid; justify-items: center; gap: var(--e4); }
.cloture__actions { display: flex; flex-wrap: wrap; gap: var(--e2); justify-content: center; }

/* --------------------------- 9. PIED ------------------------ */
.pied { border-top: 1px solid var(--ligne); padding-block: var(--e6) var(--e5); }
.pied__haut {
  display: grid;
  gap: var(--e5);
  grid-template-columns: 1fr;
  padding-bottom: var(--e6);
}
.pied__accroche { font-family: var(--serif); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); max-width: 22ch; line-height: 1.15; }
.pied__colonnes { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.pied__colonne { display: grid; gap: 0.45rem; align-content: start; font-size: var(--t-sm); }
.pied__colonne strong { font-weight: 500; font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); margin-bottom: 0.2rem; }
.pied__colonne a { color: var(--encre-douce); transition: color 200ms var(--sortie); }
.pied__colonne a:hover { color: var(--encre); }
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e4);
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--ligne);
  padding-top: var(--e4);
  font-size: var(--t-xs);
  color: var(--gris);
}
.pied__legal { display: flex; flex-wrap: wrap; gap: var(--e3); }

/* ----------------------- 10. RESPONSIVE --------------------- */
@media (min-width: 700px) {
  .etape { grid-template-columns: 84px 1.1fr 1fr; gap: var(--e5); }
  .pied__haut { grid-template-columns: 1fr 1.3fr; gap: var(--e7); }
}
@media (min-width: 900px) {
  .olive__grille { grid-template-columns: 1.15fr 0.85fr; gap: var(--e7); }
}
@media (max-width: 860px) {
  .nav { display: none; }
}
@media (max-width: 560px) {
  .entete__actions .btn--fantome { display: none; }
  .parenthese { font-size: clamp(2.6rem, 9vw, 3.4rem); }
  .etape { padding: var(--e4); }
  .carte { padding: var(--e4); }
  .ui__corps { grid-template-columns: 1fr; }
  .ui__colonne { border-right: 0; border-bottom: 1px solid var(--ligne); }
}

/* =============================================================
   11. COMPOSANTS PROPRES À LA LP
   Écrits dans le langage du système : mêmes tokens, même rythme.
   ============================================================= */

/* logo en en-tête et en pied */
.marque img { height: 42px; width: auto; }
.pied__logo { height: 58px; width: auto; margin-bottom: var(--e3); }

/* section collée à la précédente (bande visuelle sous le hero) */
.section--serre { padding-top: 0; }

/* bande visuelle : photo réelle */
.bande { margin: 0; }
.bande img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-xl);
}

/* visuel d'étape : photo au lieu du bloc abstrait */
.etape__visuel { padding: 0; border: 0; background: none; min-height: 0; overflow: hidden; border-radius: var(--r-md); }
.etape__visuel img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }

/* bandeau de preuves */
.preuves { background: var(--olive); color: var(--sable); padding-block: var(--e4); }
.preuves ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--e4) var(--e3); text-align: center;
}
.preuves li { display: grid; gap: 0.15rem; }
.preuves strong {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.7rem);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.preuves span { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.82; line-height: 1.35; }

/* dispositifs de financement */
.financeurs { display: flex; flex-wrap: wrap; gap: var(--e1); list-style: none; padding: 0; margin: var(--e3) 0 0; }
.financeurs li {
  border: 1px solid rgba(241, 237, 229, 0.3);
  border-radius: 999px; padding: 0.32rem 0.85rem;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.03em;
  color: var(--sable);
}

/* sessions */
.sessions { display: grid; gap: var(--e2); }
.session {
  display: grid; gap: var(--e2); grid-template-columns: 1fr; align-items: center;
  padding: var(--e4);
  background: var(--sable-clair);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
}
.session__date { display: grid; gap: 0.1rem; }
.session__date span { font-family: var(--serif); font-size: 1.3rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.session__date small { font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--olive-clair); font-weight: 700; }
.session__info { display: grid; gap: 0.15rem; }
.session__info h3 { font-size: 1.02rem; }
.session__info p { font-size: var(--t-sm); color: var(--encre-douce); }
.session__cta { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.session__places { font-size: var(--t-xs); color: #a8452f; font-weight: 700; white-space: nowrap; }

/* formulaire de candidature */
.formulaire { display: grid; gap: var(--e3); grid-template-columns: 1fr; width: 100%; text-align: left; }
.formulaire > div { display: grid; gap: 0.35rem; }
.formulaire label { font-size: var(--t-sm); font-weight: 600; }
.formulaire input, .formulaire select {
  width: 100%; min-height: 50px; padding: 0.7rem 0.9rem;
  font-family: var(--sans); font-size: 0.95rem; color: var(--encre);
  background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-sm);
  transition: border-color var(--transition);
}
.formulaire input:focus, .formulaire select:focus { border-color: var(--olive-clair); }
.formulaire small { font-size: var(--t-xs); color: var(--encre-douce); }
.formulaire .plein { gap: var(--e2); }

@media (min-width: 560px) {
  .formulaire { grid-template-columns: 1fr 1fr; }
  .formulaire .plein { grid-column: 1 / -1; }
  .preuves ul { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 780px) {
  .session { grid-template-columns: 190px 1fr auto; gap: var(--e4); }
  .session__cta { justify-content: flex-end; }
  .preuves ul { grid-template-columns: repeat(5, 1fr); gap: var(--e3); }
}
@media (max-width: 559px) {
  .preuves li:nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .marque img { height: 44px; }
}

/* --- Flancs : découpes végétales sur fond transparent ----------
   Planches botaniques du domaine public (Met, CC0), détourées et
   recomposées. Comme sur le modèle : `contain`, ancrage sur le bord
   extérieur, filtre `wind` qui fait onduler le feuillage.

   Deux règles importantes :
   1. un fondu haut/bas, pour qu'aucun panneau ne se termine sur une
      coupe franche quand une section suivante passe par-dessus ;
   2. le végétal se poursuit plus bas dans la page, le modèle place
      lui aussi un panneau supplémentaire après le hero. */
.flanc {
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 76%, transparent 99%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 76%, transparent 99%);
}
.flanc img { object-fit: contain; border-radius: 0; opacity: 0.92; }
.flanc--gauche img { object-position: left bottom; }
.flanc--droit img  { object-position: right bottom; }

/* Accents végétaux répartis dans la page.
   Chaque section porteuse est `position: relative` : le panneau se
   cale dessus et reste derrière le contenu. */
.flanc--accent {
  top: auto;
  opacity: 0.5;                       /* plus discret que le hero */
}
.flanc--accent.flanc--gauche {
  left: 0;
  bottom: -8%;
  width: clamp(130px, 22vw, 300px);
  height: clamp(360px, 48vw, 640px);
}
.flanc--accent.flanc--droit {
  right: 0;
  bottom: -6%;
  width: clamp(110px, 18vw, 250px);
  height: clamp(400px, 56vw, 760px);
}
.flanc--accent.flanc--haut { top: -6%; bottom: auto; }

/* la section qui accueille un accent ne doit pas le rogner */
.a-vegetal { position: relative; }
/* le décor ne doit jamais élargir le document */
html, body { overflow-x: clip; }

.hero__contenu { position: relative; z-index: 3; }
.hero__titre h1 { max-width: 16ch; }
.entete-section, .etapes, .cartes, .sessions, .olive,
.cloture, .bande { position: relative; z-index: 2; }

@media (max-width: 860px) {
  .flanc--accent { display: none; }   /* on garde l'écran mobile lisible */
}

/* =============================================================
   12. DIRECTION ARTISTIQUE, marbre, laiton, mat
   Lecture de la photo de l'académie : 95 % de neutres chauds,
   le bordeaux réservé aux seuls éléments qui portent la marque.
   ============================================================= */

/* Veinage de marbre : très basse opacité, jamais un motif lisible. */
.section--marbre {
  background-color: var(--sable-profond);
  background-image:
    radial-gradient(70% 40% at 18% 22%, rgba(255,255,255,0.85), transparent 62%),
    radial-gradient(55% 34% at 76% 68%, rgba(255,255,255,0.7), transparent 60%),
    linear-gradient(114deg, transparent 42%, rgba(168,154,140,0.16) 46%, transparent 49%),
    linear-gradient(126deg, transparent 62%, rgba(168,154,140,0.12) 65%, transparent 68%);
}

/* Filet de laiton : le détail transposé du meuble de l'académie. */
.filet-laiton {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(to right, transparent, var(--olive-clair) 18%, var(--olive-clair) 82%, transparent);
  opacity: 0.7;
}

/* Le bloc signature, l'unique grande surface bordeaux de la page,
   l'équivalent de la pochette dans la photo. */
.olive { background: var(--olive); color: var(--sable); }
.olive .etiquette { color: rgba(241, 237, 228, 0.62); }
.olive .metrique { color: var(--sable); }
.financeurs li { border-color: rgba(241, 237, 228, 0.34); }

/* Mat : on retire tout effet brillant sur les surfaces claires. */
.carte, .session, .etape { box-shadow: none; }
.carte:hover { background: var(--blanc); transform: translateY(-2px); }

/* Étiquettes en laiton, capitales espacées, code maison de luxe. */
.etiquette { color: var(--olive-clair); letter-spacing: 0.16em; }
.carte__num, .etape__num { color: var(--olive-clair); }
.session__date small { color: var(--olive-clair); }
.puces li::before { background: var(--olive-clair); }

/* La barre de preuves passe au neutre sombre : le bordeaux reste
   réservé au bloc signature et aux CTA. Deux grandes surfaces
   saturées annuleraient la rareté qui fait la valeur de l'accent. */
.preuves { background: var(--encre); color: var(--sable); }
.preuves span { color: rgba(241, 237, 228, 0.6); opacity: 1; }
.preuves strong { color: var(--sable); }

/* =============================================================
   13. DA, MONTÉE EN PUISSANCE
   La première passe déplaçait des valeurs déjà voisines : illisible.
   Ici on rend les trois signaux réellement perceptibles.
   ============================================================= */

/* 1. LE MARBRE, surface dominante dans la photo, il doit se voir.
   Veinage large et diagonal, contraste assumé, sur le hero et les
   sections claires. Reste sous le texte grâce à la faible saturation. */
.hero, .section--marbre {
  background-color: var(--sable-profond);
  background-image:
    linear-gradient(103deg, transparent 28%, rgba(150,134,118,0.30) 30.5%, rgba(150,134,118,0.06) 32%, transparent 34%),
    linear-gradient(97deg,  transparent 52%, rgba(150,134,118,0.22) 54%, transparent 57%),
    linear-gradient(112deg, transparent 66%, rgba(168,154,140,0.26) 68%, rgba(168,154,140,0.05) 70%, transparent 72%),
    radial-gradient(80% 55% at 22% 18%, rgba(255,255,255,0.95), transparent 64%),
    radial-gradient(65% 45% at 78% 72%, rgba(255,255,255,0.85), transparent 62%),
    radial-gradient(50% 40% at 55% 40%, rgba(255,255,255,0.7), transparent 66%);
  background-attachment: scroll;
}
.hero { background-size: 140% 120%; background-position: center top; }

/* 2. LE LAITON, les filets doivent se lire, pas se deviner. */
:root { --ligne: rgba(193, 162, 101, 0.55); }
.carte, .session, .etape, .formulaire input, .formulaire select {
  border-color: rgba(193, 162, 101, 0.5);
}
.filet-laiton {
  height: 1.5px;
  opacity: 1;
  background: linear-gradient(to right, transparent, #c1a265 14%, #d8bd85 50%, #c1a265 86%, transparent);
}
/* filet sous l'en-tête, comme la ligne du meuble */
.entete--pose { border-bottom: 1px solid rgba(193, 162, 101, 0.6); }

/* 3. LE BORDEAUX, plus profond et plus dense que le brun d'origine,
   pour que la différence se voie à taille de bouton. */
:root {
  --olive: #55151f;
  --olive-fonce: #3f0e16;
}
.btn--plein { box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset; }

/* Les cartes se détachent en blanc franc sur le marbre. */
.carte, .session { background: rgba(255,255,255,0.72); backdrop-filter: blur(2px); }
.etape { background: rgba(255,255,255,0.6); }

/* Étiquettes laiton plus présentes */
.etiquette { color: #a8843f; font-weight: 700; }

/* =============================================================
   14. PASSE SECTION PAR SECTION
   Corrections relevées en isolant chaque section à l'écran.
   ============================================================= */

/* --- PIED : le fond manquait, d'où un logo crème invisible ------ */
.pied {
  background: var(--encre);
  color: rgba(241, 237, 228, 0.74);
  border-top: 0;
  padding-block: var(--e6) var(--e5);
}
.pied .pied__accroche { color: var(--sable); }
.pied__colonne strong { color: var(--olive-clair); }
.pied__colonne a, .pied__colonne span { color: rgba(241, 237, 228, 0.74); }
.pied__colonne a:hover { color: var(--sable); }
.pied__bas, .mentions { border-top-color: rgba(241, 237, 228, 0.16); }
.pied__bas, .mentions { color: rgba(241, 237, 228, 0.5); }
.pied__legal a { color: rgba(241, 237, 228, 0.68); }
.pied__logo { height: 62px; }

/* --- ÉTAPES : le numéro était centré, le titre en haut --------- */
.etape { align-items: start; }
.etape__num { padding-top: 0.15em; }          /* aligné sur la ligne du titre */
.etape__visuel { align-self: stretch; }
.etape__visuel img { border-radius: var(--r-md); }

/* --- PREUVES : la barre manquait d'air ------------------------- */
.preuves { padding-block: var(--e5); }
.preuves strong { letter-spacing: 0.01em; }

/* --- FINANCEMENT : liseré trop faible, texte trop pâle --------- */
.olive__encart {
  border-color: rgba(241, 237, 228, 0.42);
  background: rgba(255, 255, 255, 0.07);
}
.olive p { color: rgba(241, 237, 228, 0.88); }
.olive__encart p { color: rgba(241, 237, 228, 0.8); }
/* la dernière pastille ne doit pas rester orpheline sur sa ligne */
.financeurs { max-width: 30rem; }

/* --- SESSIONS : bouton trop pâle, capsules trop molles --------- */
.session { border-radius: var(--r-md); }
.session .btn--clair {
  background: transparent;
  color: var(--olive);
  border-color: var(--olive);
  font-weight: 600;
}
.session .btn--clair:hover { background: var(--olive); color: var(--sable); }

/* --- MESURE DES TITRES : un serif d'affichage ne se lit pas
       sur 1 000 px de large ------------------------------------- */
.entete-section h2 { max-width: 22ch; }
.entete-section--gauche h2 { max-width: 18ch; }
.cloture h2 { max-width: 20ch; margin-inline: auto; }

/* --- CANDIDATURE : resserrer le rythme ------------------------- */
.cloture { gap: var(--e3); }
.cloture .formulaire { margin-top: var(--e4); }

/* --- ACCENTS VÉGÉTAUX : un peu plus présents ------------------- */
.flanc--accent { opacity: 0.6; }

/* =============================================================
   15. TYPOGRAPHIE, accord avec l'identité
   Le logo est un serif fin à fort contraste, proche d'un Didone :
   Cormorant Garamond s'en approche bien plus que Playfair, plus
   robuste. Et Open Sans, sans humaniste générique, cède la place à
   Jost, géométrique, le registre couture des maisons de beauté.
   ============================================================= */
:root {
  --serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --sans: "Jost", "Open Sans", -apple-system, "Segoe UI", sans-serif;

  /* Cormorant a un œil petit : on remonte l'échelle d'affichage. */
  --t-h1: clamp(3rem, 1.4rem + 7.4vw, 6.6rem);
  --t-h2: clamp(2.4rem, 1.5rem + 3.9vw, 4.6rem);
  --t-h3: clamp(1.32rem, 1.14rem + 0.8vw, 1.72rem);
  --t-lead: clamp(1.04rem, 0.99rem + 0.32vw, 1.2rem);
}

/* --- Titres : contraste, tracking négatif, graisse légère ------ */
h1, h2 {
  font-weight: 400;                 /* la finesse fait le luxe */
  letter-spacing: -0.018em;
  line-height: 1.02;
}
h1 { letter-spacing: -0.022em; }
h3 {
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: 0.002em;
  line-height: 1.3;
}

/* Une italique de Cormorant sur un mot : signature de maison. */
.accent-italique {
  font-style: italic;
  font-weight: 300;
}

/* --- Corps : Jost demande un interlignage généreux ------------- */
body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16.5px;
  line-height: 1.72;
  letter-spacing: 0.004em;
}
p { font-weight: 300; }
strong, b { font-weight: 500; }

/* --- Étiquettes : capitales très espacées, laiton -------------- */
.etiquette {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

/* --- Boutons : capitales fines et espacées, jamais grasses ----- */
.btn {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.btn--grand { font-size: 0.82rem; letter-spacing: 0.16em; }

/* --- Chiffres : le serif pour les données, en chasse fixe ------ */
.preuves strong, .metrique, .etape__num, .carte__num, .session__date span {
  font-family: var(--serif);
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.01em;
}
.metrique { font-weight: 300; }

/* --- Navigation et petits textes ------------------------------ */
.nav a, .pied__colonne, .pied__bas { font-weight: 300; letter-spacing: 0.02em; }
.pied__colonne strong {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.2em;
}
.marque { font-family: var(--serif); }

/* --- Chapeau du hero : légèrement plus aéré ------------------- */
.hero .chapeau { font-weight: 300; line-height: 1.68; letter-spacing: 0.006em; }

/* --- Formulaire : libellés discrets --------------------------- */
.formulaire label {
  font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--encre-douce);
}
.formulaire input, .formulaire select { font-family: var(--sans); font-weight: 300; }

/* =============================================================
   16. VIDÉO ET PREUVE SOCIALE
   ============================================================= */

/* --- Lecteur : affiche visible, fichier chargé au clic --------- */
.bande--film { position: relative; background: var(--sable-profond); }
.bande--film video {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--r-xl);
  display: block;
}
.lecture {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--e3);
  background: linear-gradient(to top, rgba(42,34,32,0.42), rgba(42,34,32,0.12));
  border: 0; border-radius: var(--r-xl);
  color: var(--sable);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.78rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  transition: background 320ms var(--sortie);
}
.lecture:hover { background: linear-gradient(to top, rgba(42,34,32,0.5), rgba(42,34,32,0.18)); }
.lecture__rond {
  width: 68px; height: 68px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(241,237,228,0.8);
  background: rgba(241,237,228,0.14);
  backdrop-filter: blur(6px);
  padding-left: 3px;
  transition: transform 320ms var(--sortie), background 320ms var(--sortie);
}
.lecture:hover .lecture__rond { transform: scale(1.06); background: rgba(241,237,228,0.24); }

/* --- Étoiles et note globale ---------------------------------- */
.etoiles { color: var(--olive-clair); letter-spacing: 0.18em; font-size: 0.9rem; }
.notation {
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: center;
  gap: var(--e2) var(--e3);
  padding-bottom: var(--e5);
  margin-bottom: var(--e5);
  border-bottom: 1px solid var(--ligne);
}
.notation__note {
  font-family: var(--serif); font-size: 2.2rem; font-weight: 400;
  line-height: 1; font-variant-numeric: lining-nums;
}
.notation__source { font-size: var(--t-sm); color: var(--encre-douce); }

/* --- Témoignages : la citation en Cormorant italique ----------- */
.temoignages {
  display: grid; gap: var(--e4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}
.temoignage {
  display: grid; gap: var(--e3);
  align-content: start;
  margin: 0;
  padding: var(--e5);
  background: rgba(255,255,255,0.66);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
}
.temoignage blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.22rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.44;
  letter-spacing: -0.004em;
  color: var(--encre);
}
.temoignage figcaption {
  font-family: var(--sans); font-size: 0.76rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.temoignage figcaption small {
  display: block; margin-top: 0.25rem;
  font-weight: 300; letter-spacing: 0.06em; text-transform: none;
  font-size: 0.76rem; color: var(--olive-clair);
}

/* --- Bandeau d'élèves ----------------------------------------- */
.galerie-eleves {
  list-style: none; padding: 0;
  margin: var(--e6) 0 0;
  display: grid; gap: var(--e2);
  grid-template-columns: repeat(auto-fit, minmax(min(45%, 190px), 1fr));
}
.galerie-eleves img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--ligne);
}

/* =============================================================
   17. PREUVE SOCIALE, rappels, note globale, carrousel
   ============================================================= */

/* --- Rappel en ligne : logo Google + note + volume d'avis ------ */
.rappel-avis {
  display: inline-flex; flex-wrap: wrap;
  align-items: center; gap: 0.5rem 0.6rem;
  max-width: none; margin-inline: auto;
  padding: 0.5rem 0.95rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--ligne);
  border-radius: 999px;
  font-size: 0.8rem; font-weight: 300;
  color: var(--encre-douce);
}
.rappel-avis strong { font-weight: 500; color: var(--encre); }
.rappel-avis__logo { display: inline-flex; flex: none; }
.rappel-avis .etoiles { font-size: 0.78rem; letter-spacing: 0.1em; }
.rappel-avis--hero { background: rgba(255, 255, 255, 0.82); }
.sessions + .rappel-avis, #candidature .rappel-avis { margin-bottom: var(--e3); }

/* --- Note globale, sous le titre de section -------------------- */
.bloc-note {
  display: flex; align-items: center; justify-content: center;
  gap: var(--e3);
  padding-bottom: var(--e5);
  margin-bottom: var(--e5);
  border-bottom: 1px solid var(--ligne);
}
.bloc-note__chiffre {
  font-family: var(--serif); font-size: 3rem; font-weight: 400;
  line-height: 1; font-variant-numeric: lining-nums;
}
.bloc-note__detail { display: grid; gap: 0.15rem; }
.bloc-note__detail .etoiles { font-size: 1rem; }
.bloc-note__detail small { font-size: var(--t-sm); color: var(--encre-douce); }

/* --- Carrousel : défilement natif, pleine largeur -------------- */
.carrousel { position: relative; }
.carrousel__piste {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gouttiere);
  padding: 4px var(--gouttiere) var(--e4);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carrousel__piste::-webkit-scrollbar { display: none; }
.carrousel__piste:focus-visible { outline: 2px solid var(--olive-clair); outline-offset: -2px; }

.avis-carte {
  flex: 0 0 min(86vw, 360px);
  scroll-snap-align: start;
  display: grid; gap: var(--e2);
  align-content: start;
  margin: 0;
  padding: var(--e4);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
}
.avis-carte__tete { display: flex; align-items: center; gap: 0.7rem; }
.avis-carte__pastille {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--olive);
  color: var(--sable);
  font-family: var(--serif); font-size: 1.15rem; line-height: 1;
}
.avis-carte__nom {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.avis-carte__nom small {
  display: block; margin-top: 0.15rem;
  font-weight: 300; font-size: 0.72rem; letter-spacing: 0.04em;
  text-transform: none; color: var(--olive-clair);
}
.avis-carte blockquote {
  margin: 0;
  font-family: var(--serif); font-size: 1.16rem; font-style: italic;
  font-weight: 300; line-height: 1.48; color: var(--encre);
}

.carrousel__commandes { display: flex; gap: var(--e2); justify-content: flex-end; }
.fleche {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--ligne);
  border-radius: 50%;
  background: transparent;
  color: var(--encre);
  cursor: pointer;
  transition: background 240ms var(--sortie), border-color 240ms var(--sortie), opacity 240ms;
}
.fleche:hover:not(:disabled) { background: var(--olive); border-color: var(--olive); color: var(--sable); }
.fleche:disabled { opacity: 0.3; cursor: default; }

/* =============================================================
   18. BANDE VIDÉO pleine largeur
   ============================================================= */
.film-bande {
  position: relative;
  isolation: isolate;
  min-height: clamp(420px, 52vw, 620px);
  display: grid; align-items: center;
  overflow: hidden;
}
.film-bande__media { position: absolute; inset: 0; z-index: 0; }
.film-bande__media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.film-bande__voile {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(42,34,32,0.82) 0%, rgba(42,34,32,0.55) 52%, rgba(42,34,32,0.3) 100%);
}
.film-bande__contenu {
  position: relative; z-index: 2;
  display: grid; gap: var(--e3); justify-items: start;
  max-width: var(--max);
  color: var(--sable);
}
.film-bande__contenu h2 { color: var(--sable); max-width: 14ch; }
.film-bande__contenu p { color: rgba(241,237,228,0.86); max-width: 44ch; }
.film-bande .etiquette { color: var(--olive-clair); }

.lecture--pose {
  position: static; inset: auto;
  flex-direction: row; gap: var(--e2);
  width: auto; padding: 0;
  background: none; border-radius: 0;
  margin-top: var(--e2);
}
.lecture--pose:hover { background: none; }
.lecture--pose .lecture__rond { width: 54px; height: 54px; }

/* =============================================================
   19. MOBILE, carrousel et bande vidéo
   ============================================================= */
@media (max-width: 700px) {
  .bloc-note { flex-wrap: wrap; gap: var(--e2); text-align: center; }
  .bloc-note__chiffre { font-size: 2.4rem; }
  .carrousel__commandes { display: none; }     /* le doigt suffit */
  .avis-carte { flex-basis: 84vw; padding: var(--e3); }
  .avis-carte blockquote { font-size: 1.06rem; }
  .rappel-avis { font-size: 0.74rem; padding: 0.45rem 0.8rem; }
  .film-bande { min-height: 440px; }
  .film-bande__voile {
    background: linear-gradient(to top, rgba(42,34,32,0.88) 22%, rgba(42,34,32,0.5) 100%);
  }
  .film-bande__contenu { gap: var(--e2); }
}

/* Mention de prérequis : lisible sans peser dans la hiérarchie. */
.mention-prealable {
  font-size: var(--t-sm);
  color: rgba(241, 237, 228, 0.72);
  border-left: 1px solid var(--olive-clair);
  padding-left: var(--e3);
  margin-top: var(--e2);
}

/* =============================================================
   20. TRANSITIONS, EMPILEMENT, DENSITÉ
   ============================================================= */

/* --- 1. TRANSITIONS entre sections ----------------------------
   Les sections se juxtaposaient sans articulation. On ajoute un
   dégradé de raccord en haut et en bas des sections marbrées, et
   un filet laiton discret aux jonctions claires. */
.section--marbre { position: relative; }
.section--marbre::before,
.section--marbre::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 90px;
  pointer-events: none;
  z-index: 1;
}
.section--marbre::before {
  top: 0;
  background: linear-gradient(to bottom, var(--sable), transparent);
}
.section--marbre::after {
  bottom: 0;
  background: linear-gradient(to top, var(--sable), transparent);
}

/* raccord sombre autour du bandeau de preuves et de la bande vidéo */
.preuves, .film-bande { position: relative; }
.preuves::before, .film-bande::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--olive-clair), transparent);
  opacity: 0.55;
  z-index: 2;
}

/* --- 2. MÉTHODE : cartes empilées ------------------------------
   Le vide à gauche venait de la hauteur imposée par l'image.
   Deux corrections : la colonne texte et l'image partagent la même
   hauteur, et les cartes se superposent au défilement. */
.etapes--empilees {
  display: grid;
  gap: var(--e4);
}
.etapes--empilees .etape {
  position: sticky;
  /* chaque carte se cale un cran plus bas que la précédente */
  top: calc(var(--entete-h) + 18px + (var(--rang, 1) - 1) * 16px);
  grid-template-columns: 1fr;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  box-shadow: 0 -1px 0 var(--ligne), 0 22px 44px -34px rgba(42, 34, 32, 0.45);
  overflow: hidden;
  padding: 0;
}
@media (min-width: 780px) {
  .etapes--empilees .etape { grid-template-columns: 1.15fr 0.85fr; }
}
.etapes--empilees .etape__texte {
  display: grid;
  gap: var(--e2);
  align-content: center;
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.etapes--empilees .etape__num {
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: var(--e1);
}
/* l'image occupe toute la hauteur de la carte : plus d'espace vide */
.etapes--empilees .etape__visuel {
  border: 0;
  border-radius: 0;
  padding: 0;
  min-height: 260px;
  overflow: hidden;
}
.etapes--empilees .etape__visuel img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
}

/* --- 3. BANDEAU DE PREUVES plus présent -----------------------
   Il était discret et plat. On l'ouvre, on grossit les chiffres et
   on sépare les colonnes par des filets laiton. */
.preuves {
  padding-block: clamp(2.4rem, 1.6rem + 2.4vw, 4rem);
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(193, 162, 101, 0.13), transparent 62%),
    var(--encre);
}
.preuves ul { gap: var(--e5) var(--e3); }
.preuves strong {
  font-size: clamp(1.9rem, 1.3rem + 2.1vw, 3rem);
  color: var(--sable);
  display: block;
  margin-bottom: 0.35rem;
}
.preuves span {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: rgba(241, 237, 228, 0.62);
}
@media (min-width: 780px) {
  .preuves li { position: relative; }
  .preuves li + li::before {
    content: "";
    position: absolute;
    left: calc(var(--e3) / -2);
    top: 12%; bottom: 12%;
    width: 1px;
    background: rgba(193, 162, 101, 0.34);
  }
}

/* --- 4. FINANCEMENT resserré ---------------------------------- */
.olive--compact { padding: clamp(1.6rem, 1.2rem + 2vw, 2.8rem); }
.olive--compact .olive__grille { gap: var(--e4); align-items: center; }
.olive--compact h2 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); max-width: 15ch; }
.olive--compact .metrique { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); }
.olive--compact .olive__encart { padding: var(--e3) var(--e4); }
.olive--compact p { font-size: var(--t-sm); }
@media (min-width: 900px) {
  .olive--compact .olive__grille { grid-template-columns: 1.25fr 0.75fr; gap: var(--e6); }
}

/* --- 5. Rappel Google : centré sous la bande visuelle ---------- */
.section--serre .rappel-avis {
  display: flex;
  width: fit-content;
  margin: var(--e4) auto 0;
}

/* --- 6. Mobile : on désempile, le sticky n'a pas de sens ------- */
@media (max-width: 779px) {
  .etapes--empilees .etape {
    position: static;
    box-shadow: none;
  }
  .etapes--empilees .etape__visuel { min-height: 220px; max-height: 300px; }
  .section--marbre::before, .section--marbre::after { height: 52px; }
}

/* =============================================================
   21. MOTIFS ISSUS DU BENCHMARK
   Mecaniques reconstruites : avatars de preuve sociale, bandeau
   defilant, deploiement des cartes, compteurs, section photo.
   ============================================================= */

/* --- 1. HERO : rangee de visages en preuve sociale ------------- */
.preuve-visages {
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
  justify-content: center;
}
.preuve-visages__pile { display: flex; }
.preuve-visages__pile img {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 2px solid var(--sable);
  object-fit: cover;
  margin-left: -12px;
  box-shadow: 0 2px 8px -4px rgba(42, 34, 32, 0.5);
  transition: transform 320ms var(--sortie);
}
.preuve-visages__pile img:first-child { margin-left: 0; }
.preuve-visages__pile:hover img { margin-left: -6px; }
.preuve-visages__texte {
  display: grid;
  gap: 0.1rem;
  text-align: left;
  max-width: none;
  font-size: var(--t-sm);
}
.preuve-visages__texte .etoiles { font-size: 0.8rem; }
.preuve-visages__texte strong { font-weight: 500; }
.preuve-visages__texte small { color: var(--encre-douce); font-size: 0.76rem; }

/* --- 2. BANDEAU DEFILANT -------------------------------------- */
.marquee {
  overflow: hidden;
  background: var(--sable-profond);
  border-block: 1px solid var(--ligne);
  padding-block: 0.9rem;
}
.marquee__voie { display: flex; width: max-content; animation: defile 46s linear infinite; }
.marquee__groupe { display: flex; align-items: center; }
.marquee__groupe span {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--encre-douce);
  white-space: nowrap;
  padding-inline: 1.1rem;
}
.marquee__point { color: var(--olive-clair); padding-inline: 0 !important; }
.marquee:hover .marquee__voie { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__voie { animation: none; } }

/* --- 3. DEPLOIEMENT des trois cartes ---------------------------
   Elles arrivent legerement rapprochees et pivotees, puis se
   deploient en place. L'effet est porte par la classe .vu posee
   par le moteur de revelation. */
.cartes .carte {
  transform: translateY(26px) scale(0.94) rotate(var(--pivot, 0deg));
  transform-origin: center bottom;
  transition:
    opacity 760ms var(--sortie),
    filter 760ms var(--sortie),
    transform 900ms var(--sortie);
}
.cartes .carte:nth-child(1) { --pivot: -3deg; }
.cartes .carte:nth-child(2) { --pivot: 0deg; }
.cartes .carte:nth-child(3) { --pivot: 3deg; }
.cartes .carte.vu { transform: translateY(0) scale(1) rotate(0deg); }

/* --- 4. COMPTEURS --------------------------------------------- */
.compteurs {
  display: grid;
  gap: var(--e4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  margin-top: var(--e7);
  padding-top: var(--e5);
  border-top: 1px solid var(--ligne);
  text-align: center;
}
.compteur { display: grid; gap: 0.35rem; }
.compteur__valeur {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 1.8rem + 3vw, 4.2rem);
  font-weight: 300;
  line-height: 1;
  color: var(--olive);
  font-variant-numeric: lining-nums tabular-nums;
}
.compteur__libelle {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-douce);
  line-height: 1.5;
}

/* --- 5. SECTION A PHOTO DE FOND -------------------------------- */
.section--photo { position: relative; isolation: isolate; color: var(--sable); }
.section--photo__fond { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.section--photo__fond img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.section--photo__voile {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(42,34,32,0.9), rgba(42,34,32,0.78));
}
.section--photo h2, .section--photo .metrique { color: var(--sable); }
.section--photo .intro p, .section--photo .entete-section p { color: rgba(241, 237, 228, 0.84); }
.section--photo .etiquette { color: var(--olive-clair); }
/* les lignes de session se detachent sur la photo */
.section--photo .session {
  background: rgba(241, 237, 228, 0.95);
  border-color: transparent;
}
.section--photo .session__info p { color: var(--encre-douce); }

/* --- 6. Mobile ------------------------------------------------- */
@media (max-width: 700px) {
  .preuve-visages { justify-content: center; gap: var(--e2); }
  .preuve-visages__pile img { width: 34px; height: 34px; margin-left: -10px; }
  .preuve-visages__texte { text-align: center; }
  .compteurs { margin-top: var(--e5); gap: var(--e5); }
  .marquee__groupe span { font-size: 0.68rem; padding-inline: 0.8rem; }
  .cartes .carte { transform: translateY(20px) scale(0.96); }
}

/* --- Romain et italique meles dans les titres ------------------
   Motif releve sur le benchmark : le mot porteur passe en italique
   de Cormorant, plus fin, ce qui cree le contraste editorial. */
h1 .ital, h2 .ital {
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.004em;
}
/* l italique de Cormorant a un oeil plus etroit : on compense */
h1 .ital { padding-inline: 0.04em; }

/* =============================================================
   22. HERO : lisibilite en cinq secondes
   L'offre est nommee dans le titre, le format se lit d'un coup
   d'oeil, la preuve reste sous le bouton. Le luxe tient au vide
   et a la typographie, pas au flou.
   ============================================================= */

/* --- Ligne de specifications, separee par des points laiton ---- */
.hero__specs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem 0;
  max-width: 44rem;
}
.hero__specs li {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--encre-douce);
  white-space: nowrap;
  padding-inline: 0.95rem;
  position: relative;
}
.hero__specs li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--olive-clair);
}

/* --- Bouton principal et lien secondaire ----------------------- */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e3) var(--e5);
}
.lien-discret {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--olive-clair);
  transition: color 240ms var(--sortie), border-color 240ms var(--sortie);
}
.lien-discret:hover { color: var(--olive); border-color: var(--olive); }

/* --- Le titre nomme l'offre : on resserre la mesure ------------- */
.hero__titre h1 { max-width: 13ch; }

/* --- Respiration : on redonne de l'air entre les blocs ---------- */
.hero__contenu { gap: var(--e4); }
.hero__contenu .preuve-visages { margin-top: var(--e1); }
.hero__note {
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gris);
}

@media (max-width: 700px) {
  .hero__specs { gap: 0.3rem 0; }
  .hero__specs li { font-size: 0.68rem; padding-inline: 0.6rem; letter-spacing: 0.1em; }
  .hero__actions { gap: var(--e3); }
  .hero__actions .btn { width: 100%; }
  .hero__titre h1 { max-width: none; }
}

/* =============================================================
   24. HERO EN DEUX COLONNES
   Contenu a gauche, portrait a droite, video en fond.
   ============================================================= */
.hero--duo { text-align: left; padding-bottom: var(--section); }

.hero__duo {
  position: relative;
  z-index: 3;
  display: grid;
  gap: clamp(2rem, 1.4rem + 3vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 980px) {
  .hero__duo { grid-template-columns: 1.06fr 0.94fr; }
}

/* colonne de gauche : tout est cale a gauche, plus de centrage */
.hero__colonne {
  display: grid;
  gap: var(--e4);
  justify-items: start;
}
.hero--duo .hero__titre { display: block; }
.hero--duo h1 { max-width: 14ch; }
.hero--duo .chapeau { margin-inline: 0; max-width: 42ch; }
.hero--duo .hero__specs { justify-content: flex-start; max-width: 40rem; }
.hero--duo .hero__specs li:first-child { padding-left: 0; }
.hero--duo .hero__actions { justify-content: flex-start; }
.hero--duo .preuve-visages { justify-content: flex-start; }
.hero--duo .preuve-visages__texte { text-align: left; }

/* portrait : cadre haut, coins arrondis, liseré laiton */
.hero__portrait {
  position: relative;
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--ombre);
  isolation: isolate;
}
.hero__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(193, 162, 101, 0.5);
  pointer-events: none;
}
.hero__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 18%;
}
.hero__portrait figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.6rem 1.4rem 1.1rem;
  background: linear-gradient(transparent, rgba(42, 34, 32, 0.82));
  color: var(--sable);
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero__portrait figcaption span {
  display: block;
  margin-top: 0.2rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: rgba(241, 237, 228, 0.72);
}


@media (max-width: 979px) {
  .hero--duo { text-align: center; }
  .hero__colonne { justify-items: center; }
  .hero--duo h1, .hero--duo .chapeau { max-width: none; }
  .hero--duo .chapeau { margin-inline: auto; }
  .hero--duo .hero__specs, .hero--duo .hero__actions,
  .hero--duo .preuve-visages { justify-content: center; }
  .hero--duo .preuve-visages__texte { text-align: center; }
  .hero__portrait { max-width: 26rem; margin-inline: auto; }
}

/* =============================================================
   25. ELEMENTS REPRIS DU SITE PRINCIPAL
   Valeurs relevees directement sur chemsacademy.com.
   ============================================================= */

/* --- 1. MARQUEE ------------------------------------------------
   Releve : Open Sans 17px, graisse 400, aucune capitale, aucun
   interlettrage, ton rgb(204,183,163), bande de 40px, monogramme
   de 40px de haut, defilement lineaire. Le ton etant clair, la
   bande repose sur un fond sombre comme sur le site. */
.marquee {
  background: var(--encre);
  border-block: 0;
  padding-block: 1.15rem;
  -webkit-mask-image: none;
  mask-image: none;
}
.marquee__voie { align-items: center; animation: defile 26s linear infinite; }
.marquee__groupe { display: flex; align-items: center; }
.marquee__groupe span {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: rgb(204, 183, 163);
  white-space: nowrap;
  padding-inline: 1.1rem;
}
.marquee__mono {
  height: 48px;
  width: auto;
  flex: none;
  margin: 0;
  align-self: center;
}
.marquee:hover .marquee__voie { animation-play-state: paused; }

/* --- 2. AVANT / APRES ------------------------------------------
   Releve : ratio 0,8 (4/5), l avant sert de base, l apres est
   superpose et rogne, poignee de 28px sur toute la hauteur. */
.comparatifs {
  display: grid;
  gap: var(--e3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.avant-apres {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--ligne);
  background: var(--sable-profond);
  isolation: isolate;
  container-type: inline-size;
  touch-action: pan-y;
}
.avant-apres img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* l apres est le calque superieur, revele par la largeur du volet */
/* le calque « apres » couvre toute la vignette et se decoupe au
   clip-path depuis la gauche, exactement comme sur le site. */
.avant-apres__volet {
  position: absolute;
  inset: 0;
  z-index: 2;
  clip-path: inset(0 0 0 var(--part, 15%));
}
.avant-apres__volet img { width: 100%; }

.avant-apres__trait {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--part, 15%);
  width: 2px;
  margin-left: -1px;
  background: var(--sable);
  z-index: 3;
}
.avant-apres__trait::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--sable);
  border: 1px solid var(--olive-clair);
  box-shadow: 0 2px 10px -4px rgba(42, 34, 32, 0.5);
}

.avant-apres__etiq {
  position: absolute;
  bottom: 0.7rem;
  z-index: 4;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sable);
  background: rgba(42, 34, 32, 0.6);
  backdrop-filter: blur(4px);
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
}
.avant-apres__etiq--apres { left: 0.7rem; z-index: 4; }
.avant-apres__etiq--avant { right: 0.7rem; }

.avant-apres__curseur {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  opacity: 0;
  cursor: ew-resize;
  appearance: none;
  background: none;
}
.avant-apres__curseur:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }
.avant-apres__curseur::-webkit-slider-thumb { appearance: none; width: 28px; height: 100%; }
.avant-apres__curseur::-moz-range-thumb { width: 28px; height: 100%; border: 0; background: transparent; }

/* --- 3. BLOC PARTICIPANTES -------------------------------------
   Releve : chiffre 72px graisse 300 en bronze, libelle 11px en
   capitales, interlettrage 2,2px, meme bronze. */
.limite {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-block: var(--e5) var(--e6);
}
.limite__nombre {
  font-family: var(--sans);
  font-size: 72px;
  font-weight: 300;
  line-height: 0.92;
  color: var(--olive-clair);
  font-variant-numeric: lining-nums tabular-nums;
}
.limite__mot {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--olive-clair);
  line-height: 1.6;
  max-width: 9ch;
}

@media (max-width: 700px) {
  .comparatifs { grid-template-columns: repeat(2, 1fr); gap: var(--e2); }
  .avant-apres__etiq { font-size: 0.55rem; padding: 0.18rem 0.42rem; }
  .avant-apres__trait::after { width: 24px; height: 24px; }
  .marquee__mono { height: 28px; }
  .marquee__groupe span { font-size: 15px; padding-inline: 0.9rem; }
  .limite__nombre { font-size: 54px; }
}

/* --- Photo de promotion, en bande pleine largeur --------------- */
.diplomees {
  margin: 0 0 var(--e6);
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 9;
  box-shadow: var(--ombre);
}
.diplomees img { width: 100%; height: 100%; object-fit: cover; display: block; }
.diplomees figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3rem 1.4rem 1.1rem;
  background: linear-gradient(transparent, rgba(42, 34, 32, 0.78));
  color: var(--sable);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
@media (max-width: 700px) { .diplomees { aspect-ratio: 4 / 3; } }

/* =============================================================
   26. QUALIFICATION, DEROULE, FORMATRICE, BENEFICES
   ============================================================= */

/* --- 1. Les quatre situations ---------------------------------- */
.questions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.questions li {
  display: grid;
  gap: var(--e2);
  align-content: start;
  padding: var(--e4);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
}
.questions__num {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--olive-clair);
  font-variant-numeric: lining-nums tabular-nums;
}
.questions li p { font-size: var(--t-sm); color: var(--encre-douce); line-height: 1.7; }
.questions__suite {
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--ligne);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  font-style: italic;
  font-weight: 300;
  color: var(--encre);
  max-width: 46ch;
}

/* --- 4. Le kit ------------------------------------------------- */

@media (max-width: 700px) {
  .questions li { padding: var(--e3); }
}
/* =============================================================
   27. RACCORD HERO / BANDE VISUELLE
   Le hero porte le marbre, la page porte le sable uni : le passage
   de l un a l autre creait un trait net sur toute la largeur.
   On eteint donc le marbre en bas du hero, et la photo qui suit
   monte lentement sans aucun voile pose dessus.
   ============================================================= */
.hero--duo { padding-bottom: 0; }
/* le bandeau est desormais le dernier element du hero : c est lui qui
   ferme la section, l air se met donc au-dessus de lui */
.hero--duo .marquee {
  position: relative;
  z-index: 2;
  margin-top: clamp(3.2rem, 2rem + 4vw, 6rem);
}

.hero--duo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: clamp(9rem, 18vh, 15rem);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(241, 237, 228, 0) 0%,
    rgba(241, 237, 228, 0.55) 42%,
    rgba(241, 237, 228, 0.9) 74%,
    var(--sable) 100%);
}

/* la bande enchaine sans respiration au-dessus, et le blanc sous la
   photo est resserre pour ne pas laisser un trou avant la suite */
.section--enchaine { padding-top: 0; padding-bottom: clamp(2.6rem, 1.6rem + 3vw, 5rem); }
.section--enchaine + section { padding-top: clamp(3rem, 2rem + 3.4vw, 5.5rem); }
.section--enchaine .bande {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
}
/* montee plus longue que les autres reveals, pour un enchainement continu */
.section--enchaine .bande[data-reveal] {
  transform: translateY(48px) scale(1.02);
  transition: opacity 1.1s var(--sortie), transform 1.4s var(--sortie), filter 1.1s var(--sortie);
}
.section--enchaine .bande[data-reveal].vu { transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .section--enchaine .bande[data-reveal] { transform: none; transition: none; }
}

/* =============================================================
   28. LES QUATRE SITUATIONS, EN DEUX COLONNES
   Quatre cartes etroites se lisaient comme une note de bas de page.
   Deux colonnes, chiffre en gros serif a gauche du texte : le bloc
   reprend le poids qu il doit avoir a cet endroit de la page.
   ============================================================= */
.questions { gap: var(--e4); grid-template-columns: 1fr; }
@media (min-width: 860px) {
  .questions { grid-template-columns: repeat(2, 1fr); }
}
.questions li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: clamp(1.1rem, 0.7rem + 1.4vw, 2rem);
  padding: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
}
.questions__num {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 2rem + 2.2vw, 4rem);
  font-weight: 300;
  line-height: 0.82;
  color: var(--olive-clair);
  font-variant-numeric: lining-nums tabular-nums;
}
.questions li p {
  font-size: clamp(1rem, 0.94rem + 0.34vw, 1.2rem);
  color: var(--encre);
  line-height: 1.62;
  font-weight: 300;
  max-width: 34ch;
}
.questions__suite {
  margin-top: var(--e5);
  padding-top: var(--e4);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  max-width: 40ch;
}

/* =============================================================
   29. LE PARCOURS ET LA FORMATRICE
   La methode annoncait neuf etapes et n en montrait que quatre :
   elle est desormais lue en deux temps, le presentiel puis les
   neuf etapes. La section de la formatrice passe sur fond
   bordeaux : c est le seul endroit de la page ou la marque parle
   d elle-meme, elle doit peser.
   ============================================================= */

/* --- Titres de temps ------------------------------------------- */
.temps {
  display: grid;
  gap: var(--e1);
  margin-top: var(--e7);
  padding-top: var(--e4);
  border-top: 1px solid var(--ligne);
}
.temps--second { margin-top: calc(var(--e7) + var(--e5)); }
.temps__rang {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--olive-clair);
}
.temps__titre {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem);
  line-height: 1.18;
  color: var(--encre);
  margin: 0;
  max-width: 26ch;
}

/* --- Jour 1 / Jour 2 ------------------------------------------- */
.jours {
  display: grid;
  gap: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
  grid-template-columns: 1fr;
  margin-top: var(--e5);
}
@media (min-width: 820px) { .jours { grid-template-columns: 1fr 1fr; } }
.jour {
  position: relative;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--ligne);
  border-radius: var(--r-xl);
  overflow: hidden;
}
/* filet laiton en tete de carte, a la place du visuel */
.jour::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, var(--olive-clair), rgba(193, 162, 101, 0));
}
.jour__visuel { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.jour__visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jour__corps {
  display: grid;
  gap: var(--e2);
  align-content: start;
  padding: clamp(1.8rem, 1.2rem + 2vw, 3rem);
}
.jour__num {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--olive-clair);
}
.jour h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
  line-height: 1.2;
  margin: 0;
  color: var(--encre);
}
.jour p { font-size: var(--t-base); color: var(--encre-douce); line-height: 1.68; margin: 0; }
.jour .puces { margin-top: var(--e1); }

/* --- Les neuf etapes ------------------------------------------- */
.parcours { margin-top: var(--e5); }
.parcours__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--ligne);
}
@media (min-width: 700px)  { .parcours__liste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .parcours__liste { grid-template-columns: repeat(3, 1fr); } }
.parcours__liste li {
  display: flex;
  align-items: baseline;
  gap: var(--e3);
  padding: clamp(1rem, 0.8rem + 0.6vw, 1.35rem) var(--e3) clamp(1rem, 0.8rem + 0.6vw, 1.35rem) 0;
  border-bottom: 1px solid var(--ligne);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.98rem + 0.42vw, 1.3rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--encre);
}
.parcours__num {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--olive-clair);
  flex: none;
  font-variant-numeric: lining-nums tabular-nums;
}
.parcours__note {
  margin-top: var(--e5);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem);
  line-height: 1.5;
  color: var(--encre);
  max-width: 44ch;
}

/* --- La formatrice, sur fond bordeaux --------------------------- */
.chems--sombre {
  background: radial-gradient(120% 90% at 22% 12%, #5a1822 0%, transparent 62%),
              linear-gradient(160deg, #4a121b 0%, #330d13 100%);
  color: var(--sable);
  overflow: hidden;
}
.chems--sombre h2 { color: var(--sable); }
.chems--sombre .ital { color: var(--olive-clair); }
.etiquette--claire { color: var(--olive-clair); }

.chems__duo {
  display: grid;
  gap: clamp(2rem, 1.2rem + 4vw, 5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 920px) { .chems__duo { grid-template-columns: 0.82fr 1.18fr; } }

.chems__portrait {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9);
}
.chems__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chems__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(193, 162, 101, 0.55);
  pointer-events: none;
}
.chems__portrait figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3.5rem 1.4rem 1.4rem;
  background: linear-gradient(transparent, rgba(30, 8, 13, 0.85));
  display: flex;
  justify-content: center;
}
.chems__portrait figcaption img { width: 92px; height: auto; opacity: 0.9; }

.chems__texte { display: grid; gap: var(--e4); justify-items: start; }
.chems__texte h2 { margin: 0; }

.chems__citation {
  margin: 0;
  padding-left: clamp(1rem, 0.6rem + 1.4vw, 2rem);
  border-left: 2px solid var(--olive-clair);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.3rem, 1.05rem + 1.2vw, 2rem);
  line-height: 1.42;
  color: var(--sable);
  max-width: 30ch;
}
.chems__signature {
  margin: calc(var(--e4) * -1) 0 0;
  padding-left: clamp(1rem, 0.6rem + 1.4vw, 2rem);
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(241, 237, 228, 0.6);
}

.chems__titres { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.chems__titres li {
  position: relative;
  padding-left: 1.5rem;
  font-family: var(--sans);
  font-size: var(--t-base);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(241, 237, 228, 0.86);
}
.chems__titres li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.7rem;
  height: 1px;
  background: var(--olive-clair);
}

.chems__faits {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: clamp(1.2rem, 0.6rem + 2.4vw, 3rem);
  margin-top: var(--e2);
  padding-top: var(--e4);
  border-top: 1px solid rgba(193, 162, 101, 0.35);
  width: 100%;
}
.chems__faits strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem);
  font-weight: 300;
  line-height: 1;
  color: var(--olive-clair);
  font-variant-numeric: lining-nums tabular-nums;
}
.chems__faits span {
  display: block;
  margin-top: 0.42rem;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(241, 237, 228, 0.66);
}
@media (max-width: 560px) {
  .chems__faits { grid-template-columns: 1fr; gap: var(--e4); }
}
/* =============================================================
   30. AVIS QUI DEFILENT DE PART ET D AUTRE DE LA PHOTO
   Neuf avis Google par colonne. Chaque carte est empilee au meme
   endroit, seule l active est visible : le fondu se fait donc sans
   que la hauteur bouge. Les deux colonnes tournent a 5,2 s et
   6,9 s avec 2,6 s de decalage, elles ne se croisent jamais.
   ============================================================= */
.avis-piste { display: contents; }

.bande-duo {
  display: grid;
  gap: clamp(1.4rem, 1rem + 1.6vw, 2.6rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 1100px) {
  /* la piste s efface en desktop : ses deux colonnes redeviennent des
     cellules de la grille, avec la photo remise entre elles */
  .avis-flanc--gauche { order: 1; }
  .bande-duo .bande   { order: 2; }
  .avis-flanc--droit  { order: 3; }
  /* colonnes d avis a largeur fixe : tout le reste va a la photo */
  .bande-duo {
    grid-template-columns: clamp(9rem, 13vw, 14.5rem) minmax(0, 1fr) clamp(9rem, 13vw, 14.5rem);
    gap: clamp(1.4rem, 0.6rem + 2.2vw, 3rem);
  }
  .section--enchaine .wrap {
    max-width: 1640px;
    padding-inline: clamp(16px, 2vw, 40px);
  }
}

.avis-flanc {
  position: relative;
  display: grid;
  min-height: 15.5rem;
  align-content: center;
}
.avis-flanc__item {
  grid-area: 1 / 1;
  margin: 0;
  display: grid;
  gap: 0.55rem;
  justify-items: center;
  text-align: center;
  /* etat de depart : la carte attend en bas, floue et un peu reduite */
  opacity: 0;
  transform: translateY(22px) scale(0.965);
  filter: blur(7px);
  pointer-events: none;
  transition: opacity 760ms var(--sortie), transform 760ms var(--sortie),
              filter 760ms var(--sortie);
}
.avis-flanc__item.est-actif {
  opacity: 1;
  transform: none;
  filter: blur(0);
  pointer-events: auto;
}
/* la carte qui s en va continue son mouvement vers le haut,
   au lieu de revenir en arriere : la lecture reste orientee */
.avis-flanc__item.est-sortante {
  opacity: 0;
  transform: translateY(-22px) scale(0.975);
  filter: blur(7px);
  transition-duration: 620ms;
}
/* les elements de la carte active arrivent en cascade */
.avis-flanc__item > * {
  opacity: 0;
  transform: translateY(9px);
  transition: opacity 620ms var(--sortie), transform 620ms var(--sortie);
}
.avis-flanc__item.est-actif > * { opacity: 1; transform: none; }
.avis-flanc__item.est-actif > *:nth-child(1) { transition-delay: 90ms; }
.avis-flanc__item.est-actif > *:nth-child(2) { transition-delay: 170ms; }
.avis-flanc__item.est-actif > *:nth-child(3) { transition-delay: 250ms; }
.avis-flanc__item.est-actif > *:nth-child(4) { transition-delay: 330ms; }
.avis-flanc__item img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--ligne);
  margin-bottom: 0.2rem;
}
.avis-flanc .etoiles { font-size: 0.74rem; letter-spacing: 0.14em; color: var(--olive-clair); }
.avis-flanc blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(0.98rem, 0.92rem + 0.36vw, 1.16rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.44;
  color: var(--encre);
  text-wrap: balance;
}
.avis-flanc figcaption {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--encre-douce);
  line-height: 1.7;
}
.avis-flanc figcaption span {
  display: block;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--olive-clair);
  opacity: 0.9;
}

/* sous 1100px les colonnes passent sous la photo, cote a cote */
@media (min-width: 980px) and (max-width: 1099px) {
  .bande-duo { grid-template-columns: 1fr 1fr; }
  .bande-duo .bande { grid-column: 1 / -1; order: -1; }
  .avis-flanc { min-height: 13rem; padding-top: var(--e2); }
}
@media (max-width: 620px) {
  .bande-duo { grid-template-columns: 1fr; }
  .avis-flanc { min-height: 11.5rem; }
  .avis-flanc blockquote { max-width: 34ch; }
}
@media (prefers-reduced-motion: reduce) {
  .avis-flanc__item, .avis-flanc__item > * { transition: none; filter: none; transform: none; }
}

/* la preuve sociale ouvre desormais le hero, au-dessus du titre */
.hero--duo .preuve-visages { margin-bottom: calc(var(--e2) * -1); }
/* =============================================================
   32. LE MARQUEE SOUS LE HERO
   Il ferme le premier ecran et sert de seuil avant la photo :
   aucune respiration au-dessus, la bande arrive au bout du fondu.
   ============================================================= */
.hero--duo + .marquee { margin-top: 0; }
.marquee + .section--enchaine { padding-top: clamp(2.6rem, 1.6rem + 3vw, 5rem); }

/* =============================================================
   33. HERO MOBILE
   Lecture calee sur usekonvert.com : une pastille de preuve, le
   titre, la promesse, un seul bouton, le visuel. Rythme de 20 px
   entre les blocs, marges de 16 px, tout centre. Le reste du hero
   (les specs, la mention Qualiopi) passe sous le visuel, il ne doit
   pas s intercaler avant l action.
   ============================================================= */
@media (max-width: 979px) {

  .hero--duo {
    padding-top: calc(var(--entete-h) + 1.6rem);
    padding-bottom: 3.5rem;
    text-align: center;
    overflow: hidden;
  }
  /* la colonne s efface pour que ses blocs et le portrait se rangent
     dans le meme flux : c est ce qui permet de les reordonner */
  /* deux niveaux effaces : la colonne et l enveloppe. Tous les blocs
     du hero et le bandeau se retrouvent alors dans le meme flux. */
  .hero--duo .hero__colonne,
  .hero--duo .hero__duo { display: contents; }
  .hero--duo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  /* la gouttiere de 16 px etait portee par l enveloppe qui vient de
     disparaitre : elle passe sur la section, et le bandeau la
     rattrape par une marge negative pour rester pleine largeur */
  .hero--duo { padding-inline: 16px; }
  /* le bandeau redevient pleine largeur : il rattrape les gouttieres
     de la section par une marge negative */
  .hero--duo .marquee {
    width: calc(100% + 32px);
    margin-inline: -16px;
  }

  .hero--duo .preuve-visages { order: 1; }
  .hero--duo h1               { order: 2; }
  .hero--duo .chapeau         { order: 3; }
  .hero--duo .hero__specs     { order: 4; }
  .hero--duo .hero__actions   { order: 5; }
  .hero--duo .hero__note      { order: 6; }
  .hero--duo .marquee         { order: 7; }
  .hero__halo                 { order: 8; }
  .hero--duo .hero__portrait  { order: 9; }

  /* --- la pastille de preuve ------------------------------------ */
  .hero--duo .preuve-visages {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 6px 14px 6px 6px;
    margin: 0;
    border: 1px solid var(--ligne);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    max-width: 100%;
  }
  .preuve-visages__pile { display: flex; flex: none; }
  /* trois visages suffisent a cette taille */
  .preuve-visages__pile img:nth-child(n + 4) { display: none; }
  .preuve-visages__pile img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--sable);
    object-fit: cover;
  }
  .preuve-visages__pile img + img { margin-left: -10px; }

  /* le trait vertical, puis le texte sur une seule ligne */
  .hero--duo .preuve-visages__texte {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    padding-left: 9px;
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.005em;
    color: var(--encre);
    white-space: nowrap;
  }
  .hero--duo .preuve-visages__texte::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 16px;
    background: var(--ligne);
  }
  .hero--duo .preuve-visages__texte .etoiles,
  .hero--duo .preuve-visages__texte small { display: none; }
  .hero--duo .preuve-visages__texte strong { font-weight: 500; }

  /* --- titre et promesse ---------------------------------------- */
  .hero--duo h1 {
    margin: 0;
    max-width: 100%;
    font-size: clamp(2rem, 1.55rem + 2.1vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -0.016em;
  }

  /* en-tete : le bouton doit rester une pastille, pas une banniere */
  .entete .btn--plein {
    height: 40px;
    padding-inline: 1.05rem;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
  }
  .hero--duo .chapeau {
    margin: 0;
    max-width: 34ch;
    font-size: 1rem;
    line-height: 1.5;
  }
  .hero--duo .chapeau .ital { color: var(--olive); }

  /* --- une seule action ----------------------------------------- */
  .hero--duo .hero__actions {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0;
  }
  .hero--duo .hero__actions .btn {
    width: 100%;
    max-width: 20rem;
  }
  /* le lien secondaire brouille la decision a cette taille */
  .hero--duo .hero__actions .lien-discret { display: none; }

  /* --- le visuel, halo laiton derriere -------------------------- */
  .hero__halo {
    display: block;
    width: 100%;
    height: 0;
    margin: 0;
    position: relative;
  }
  .hero__halo::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 2rem;
    transform: translateX(-50%);
    width: 118%;
    height: 22rem;
    border-radius: 50%;
    background: radial-gradient(closest-side,
      rgba(193, 162, 101, 0.42), rgba(193, 162, 101, 0) 72%);
    filter: blur(14px);
    pointer-events: none;
  }
  .hero--duo .hero__portrait {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 26px;
    aspect-ratio: 4 / 3;
  }
  .hero--duo .hero__portrait img { object-position: center 30%; }
  .hero--duo .hero__portrait figcaption {
    padding: 2.4rem 1.1rem 0.95rem;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
  }

  /* --- ce qui vient apres le visuel ------------------------------ */
  /* les quatre reperes, en simple liste a puces au-dessus du visuel */
  .hero--duo .hero__specs {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 0.5rem 1.4rem;
    justify-items: start;
    justify-content: center;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
  }
  .hero--duo .hero__specs li {
    position: relative;
    padding: 0 0 0 1.35rem;
    border: 0;
    background: none;
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 300;
    letter-spacing: 0.01em;
    line-height: 1.35;
    text-transform: none;
    color: var(--encre);
  }
  /* le premier repere perd son retrait en desktop, on le retablit */
  .hero--duo .hero__specs li:first-child { padding-left: 1.35rem; }
  /* une coche plutot qu un tiret : on coche ce que la formation
     comprend, le tiret ne disait rien */
  .hero--duo .hero__specs li::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 0.34em;
    width: 5px;
    height: 9px;
    border: solid var(--olive-clair);
    border-width: 0 1.6px 1.6px 0;
    background: none;
    transform: rotate(42deg);
  }
  /* la mention Qualiopi est reprise plus bas dans la page et se
     lisait mal ici : elle sort du hero */
  .hero--duo .hero__note { display: none; }

  /* le fondu du bas du hero n a plus lieu d etre : le bandeau prend
     le relais et remonte par-dessus */
  .hero--duo::after { display: none; }

  /* --- le bandeau, en panneau qui remonte sur le visuel -----------
     Chez Konvert le bloc suivant est un panneau pleine largeur, a
     coins hauts arrondis, qui chevauche le visuel. C est exactement
     ce role que joue la bande ici : elle ferme le hero et ouvre la
     suite de la page. */
  .hero--duo .marquee {
    position: relative;
    z-index: 4;
    margin-top: 4px;
    border-radius: 32px 32px 0 0;
    padding-block: 1.05rem;
    overflow: hidden;
  }
  .hero--duo { padding-bottom: 3.2rem; }
  .section--enchaine { padding-top: 2.4rem; }
}

@media (max-width: 480px) {
  .hero--duo .preuve-visages { padding-right: 12px; }
  .hero--duo .preuve-visages__texte { font-size: 0.74rem; }
  .preuve-visages__pile img { width: 26px; height: 26px; }
}

/* libelles longs et courts, selon la place disponible.
   La legende du portrait a ses propres regles d affichage, on les
   double ici pour passer devant elles. */
.mot--court, .hero__portrait figcaption span .mot--court { display: none; }
@media (max-width: 979px) {
  .mot--long { display: none; }
  .mot--court { display: inline; }
  .hero__portrait figcaption span .mot--long { display: none; }
  .hero__portrait figcaption span .mot--court { display: inline; }
}

/* le visuel du hero est desormais une photo de groupe : cadrage
   horizontal en desktop aussi, sinon on coupe les visages */
@media (min-width: 980px) {
  .hero__portrait { aspect-ratio: 5 / 4; }
  .hero__portrait img { object-position: center 34%; }
}

/* les blocs de texte prennent toute la largeur disponible entre les
   gouttieres, la pastille et les puces gardent leur largeur propre */
@media (max-width: 979px) {
  .hero--duo h1,
  .hero--duo .chapeau,
  .hero--duo .hero__actions,
  .hero--duo .hero__portrait,
  .hero--duo .hero__note { width: 100%; }
  .hero--duo .chapeau { max-width: 100%; }
}
/* =============================================================
   34. AVIS EN CARROUSEL, MOBILE
   Le hero se termine sur le bandeau. Vient ensuite la piste d avis,
   dix-huit temoignages sur une seule ligne que l on fait glisser,
   puis la photo. Le portrait du hero disparait : deux photos se
   suivaient, la promesse etait diluee.
   ============================================================= */
@media (max-width: 979px) {

  /* le visuel du hero reste : c est lui qui precede les avis. La
     photo de la section suivante disparait, les deux se suivaient
     et la seconde n ajoutait rien. */
  .bande-duo .bande { display: none; }
  .hero--duo { padding-bottom: 0; }

  /* la piste devient le conteneur de defilement, les deux colonnes
     s effacent pour que leurs dix-huit cartes se suivent */
  .avis-piste {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    /* pas d accroche : le defilement est continu, une accroche le
       ramenerait en arriere a chaque image */
    scroll-behavior: auto;
    padding-inline: 16px;
    margin-inline: calc(var(--gouttiere) * -1);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .avis-piste::-webkit-scrollbar { display: none; }
  .avis-flanc { display: contents; }

  /* chaque avis devient une carte de la piste, toutes visibles :
     la bascule en fondu n a plus lieu d etre quand on fait glisser */
  .avis-flanc__item {
    flex: 0 0 min(78vw, 20rem);
    display: grid;
    gap: 0.5rem;
    align-content: start;
    padding: 1.25rem 1.1rem;
    border: 1px solid var(--ligne);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.6);
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
    pointer-events: auto;
  }
  .avis-flanc__item > * { opacity: 1; transform: none; transition: none; }
  .avis-flanc__item blockquote { font-size: 0.95rem; }

  /* la photo passe sous la piste */
  .bande-duo { display: grid; grid-template-columns: 1fr; gap: 20px; }
  .bande-duo .avis-piste { order: 1; }
  .bande-duo .bande { order: 2; grid-column: auto; }
  .section--enchaine { padding-top: 2.6rem; }
}
/* =============================================================
   35. CARTE D AVIS, FORME D UN AVIS GOOGLE
   Entete avec la photo et le nom, etoiles, puis le texte courant en
   sans, aligne a gauche. Plus de citation en serif italique : on
   cherche la lecture d un avis, pas celle d une accroche.
   ============================================================= */
.avis-flanc__tete {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
}
.avis-flanc__tete img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--ligne);
  flex: none;
  margin: 0;
}
/* une ancienne regle mettait tous les span de la legende en bloc :
   on repasse devant elle pour empiler le nom et la mention */
.avis-flanc__tete .avis-flanc__qui { display: grid; line-height: 1.25; min-width: 0; }
.avis-flanc__tete .avis-flanc__qui strong {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--encre);
}
.avis-flanc__tete .avis-flanc__qui small {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: var(--encre-douce);
}
.avis-flanc__item blockquote {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.55;
  color: var(--encre);
  letter-spacing: 0.002em;
}

/* en desktop les colonnes sont etroites : l entete se met en pile */
@media (min-width: 1100px) {
  .avis-flanc__item { justify-items: center; text-align: center; gap: 0.5rem; }
  .avis-flanc__tete { flex-direction: column; gap: 0.4rem; text-align: center; }
  .avis-flanc__tete .avis-flanc__qui { justify-items: center; text-align: center; }
  .avis-flanc__item blockquote { font-size: 0.86rem; text-align: center; }
}

@media (max-width: 979px) {
  /* seules les autrices ayant une vraie photo alimentent la piste */
  .avis-piste .avis-flanc__item:not([data-photo]) { display: none; }
  .avis-flanc__item {
    justify-items: stretch;
    text-align: left;
    gap: 0.55rem;
    padding: 1rem 1rem 1.1rem;
    border-radius: 18px;
  }
  .avis-flanc .etoiles { font-size: 0.8rem; letter-spacing: 0.1em; }
  .avis-flanc__item blockquote { font-size: 0.88rem; line-height: 1.5; }
}
/* =============================================================
   38. LES NEUF ETAPES, MODELE LAB-02
   Releve sur le laboratoire Lutie : deux colonnes egales avec 48 px
   de gouttiere, des cartes-accordeon a rayon 16 et filet a 8 %, une
   tete de 62 px avec chevron rond de 30 px, une ouverture par
   grid-template-rows en 0,35 s, et une barre de 3 px qui mesure le
   temps restant avant le passage automatique.
   ============================================================= */
.etapes-lab {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: var(--e5);
  align-items: start;
}
@media (min-width: 1000px) {
  .etapes-lab { grid-template-columns: 1fr 1fr; gap: 48px; }
  .etapes-lab__visuel { position: sticky; top: calc(var(--entete-h) + 2.5rem); }
}

.etapes-lab__liste { display: grid; gap: 10px; }

/* --- la carte --------------------------------------------------- */
.etape-drop {
  display: block;
  width: 100%;
  padding: 4px 20px;
  border-radius: 16px;
  border: 1px solid rgba(85, 21, 31, 0.09);
  background: rgba(255, 255, 255, 0.55);
  text-align: left;
  font: inherit;
  color: var(--encre);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.etape-drop:hover { border-color: rgba(85, 21, 31, 0.18); background: rgba(255, 255, 255, 0.8); }
.etape-drop.est-ouvert {
  border-color: rgba(85, 21, 31, 0.18);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 30px -24px rgba(42, 34, 32, 0.5);
}
.etape-drop:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }

.etape-drop__tete {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
}
.etape-drop__num {
  flex: none;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--olive-clair);
  font-variant-numeric: lining-nums tabular-nums;
}
.etape-drop__titre {
  flex: 1;
  font-family: var(--serif);
  font-size: 1.06rem;
  font-weight: 500;
  line-height: 1.25;
}
.etape-drop__chev {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(85, 21, 31, 0.05);
  color: var(--olive);
  transition: transform 0.3s, background 0.2s;
}
.etape-drop.est-ouvert .etape-drop__chev {
  transform: rotate(180deg);
  background: rgba(85, 21, 31, 0.1);
}

/* ouverture par les rangees de grille : la hauteur s anime sans
   qu on ait a la connaitre */
.etape-drop__contenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--sortie);
}
.etape-drop.est-ouvert .etape-drop__contenu { grid-template-rows: 1fr; }
.etape-drop__contenu > span { overflow: hidden; }
.etape-drop__texte {
  display: block;
  padding-bottom: 14px;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--encre-douce);
}

/* --- la barre de temps ------------------------------------------ */
.etape-drop__barre {
  display: block;
  height: 0;
  margin-bottom: 0;
  border-radius: 999px;
  background: rgba(85, 21, 31, 0.08);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s, height 0.25s, margin-bottom 0.25s;
}
/* fermee, la barre ne doit pas occuper de hauteur : sinon la carte
   au repos depasse les 72 px du modele */
.etape-drop.est-ouvert .etape-drop__barre {
  height: 3px;
  margin-bottom: 12px;
  opacity: 1;
}
.etape-drop__jauge {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--olive-clair);
  transform: scaleX(0);
  transform-origin: left center;
}

/* --- le visuel --------------------------------------------------- */
.etapes-lab__visuel {
  position: relative;
  display: grid;
  border-radius: 20px;
  overflow: hidden;
  background: var(--sable-profond);
  aspect-ratio: 545 / 408;
}
.etape-vue {
  grid-area: 1 / 1;
  margin: 0;
  position: relative;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--sortie), visibility 0.45s;
}
.etape-vue.est-ouvert { opacity: 1; visibility: visible; }
.etape-vue img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.etape-vue figcaption {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: 0.3rem;
  padding: 3.4rem 1.4rem 1.2rem;
  background: linear-gradient(transparent, rgba(30, 12, 14, 0.86));
  color: var(--sable);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  font-weight: 400;
  line-height: 1.25;
}
.etape-vue figcaption span {
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive-clair);
}
.etape-vue figcaption i { font-style: normal; opacity: 0.6; }

/* --- mobile : le visuel se glisse dans la carte ouverte ---------- */
@media (max-width: 999px) {
  .etapes-lab { gap: 10px; }
  .etape-drop__titre { font-size: 1rem; }
  /* le visuel est insere dans la liste, juste sous la carte ouverte */
  .etapes-lab__visuel {
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    margin: 2px 0 6px;
  }
  .etape-vue figcaption { padding: 2.6rem 1.1rem 1rem; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .etape-drop__contenu, .etape-vue, .etape-drop__chev { transition: none; }
  .etape-drop__jauge { display: none; }
}

/* =============================================================
   39. LE KIT, EN PANNEAU PLEIN AVEC MEDAILLON
   Composition reprise de la page de production : texte a gauche,
   photo en rond a droite, cerclee de clair. En dessous de 760 px le
   medaillon passe au-dessus et tout se centre.
   ============================================================= */
.kit {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e4);
  align-items: center;
  margin-top: var(--e6);
  padding: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem);
  border: 0;
  border-radius: 24px;
  color: var(--sable);
  background: radial-gradient(120% 100% at 15% 10%, #5a1822 0%, transparent 60%),
              linear-gradient(150deg, #4a121b 0%, #360e15 100%);
  box-shadow: 0 30px 70px -50px rgba(51, 13, 19, 0.9);
  overflow: hidden;
  text-align: center;
  justify-items: center;
}
@media (min-width: 760px) {
  .kit {
    grid-template-columns: 1fr auto;
    gap: clamp(1.6rem, 0.8rem + 2.4vw, 3.2rem);
    text-align: left;
    justify-items: stretch;
    padding-right: clamp(1.6rem, 0.8rem + 2vw, 2.8rem);
  }
}

.kit__texte { display: grid; gap: 0.7rem; }
.kit__texte h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
  line-height: 1.2;
  color: var(--sable);
  max-width: 24ch;
}
.kit__texte h3 .ital { color: var(--olive-clair); }
.kit__texte p {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.62;
  color: rgba(241, 237, 228, 0.84);
  max-width: 58ch;
}
@media (max-width: 759px) {
  .kit__texte { justify-items: center; }
  .kit__texte h3, .kit__texte p { max-width: 34ch; margin-inline: auto; }
}

/* le medaillon : photo ronde, anneau clair, ordre inverse en mobile */
.kit__medaillon {
  margin: 0;
  flex: none;
  width: clamp(9.5rem, 7rem + 12vw, 15rem);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid rgba(241, 237, 228, 0.92);
  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.8);
  order: -1;
}
@media (min-width: 760px) { .kit__medaillon { order: 0; } }
.kit__medaillon img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* =============================================================
   40. UNE ACADEMIE SANS FRONTIERES
   Composition reprise de la page de production : une carte centree
   sur fond sable, le nombre en grand serif, le libelle en capitales
   fines, puis le bouton plein. Les creneaux suivent en lignes, la
   date en gros a gauche.
   ============================================================= */
.frontieres {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  max-width: 40rem;
  margin-inline: auto;
  padding: clamp(1.8rem, 1.2rem + 2.4vw, 3.2rem) clamp(1.4rem, 1rem + 2vw, 3rem)
           clamp(2rem, 1.4rem + 2.4vw, 3.2rem);
  border-radius: 20px;
  background: var(--sable-profond);
  text-align: center;
}
.frontieres__nombre {
  font-family: var(--serif);
  font-size: clamp(3rem, 2.2rem + 3.4vw, 4.6rem);
  font-weight: 300;
  line-height: 0.9;
  color: var(--olive-clair);
  font-variant-numeric: lining-nums tabular-nums;
}
.frontieres__libelle {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive-clair);
}
.frontieres__titre {
  margin: 0.7rem 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem);
  line-height: 1.2;
  color: var(--encre);
}
.frontieres p {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.62;
  color: var(--encre-douce);
  max-width: 46ch;
}
.frontieres .btn { margin-top: 0.9rem; }

/* --- les creneaux ----------------------------------------------- */
.creneaux { display: grid; gap: 0; margin-top: var(--e6); }
.creneau {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  align-items: center;
  padding-block: clamp(1.3rem, 1rem + 1.2vw, 2rem);
  border-bottom: 1px solid var(--ligne);
}
.creneau:first-child { border-top: 1px solid var(--ligne); }
@media (min-width: 720px) {
  .creneau { grid-template-columns: 9rem 1fr auto; gap: clamp(1.2rem, 0.6rem + 2vw, 2.6rem); }
}

.creneau__quand { display: grid; line-height: 1.05; }
.creneau__jours {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem);
  font-weight: 400;
  color: var(--encre);
  font-variant-numeric: lining-nums;
}
.creneau__mois {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  font-weight: 400;
  color: var(--encre);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.creneau__quoi { display: grid; gap: 0.32rem; }
.creneau__lieu {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-douce);
}
.creneau__lieu svg { color: var(--olive-clair); flex: none; }
.creneau__places {
  padding: 0.22rem 0.5rem;
  border-radius: 6px;
  background: var(--olive);
  color: var(--sable);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}
.creneau__quoi h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  line-height: 1.22;
  color: var(--olive);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.creneau__duree {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--encre-douce);
}

.btn--contour {
  border: 1px solid var(--ligne);
  background: transparent;
  color: var(--encre);
}
.btn--contour:hover { background: rgba(255, 255, 255, 0.55); border-color: var(--olive-clair); }
@media (max-width: 719px) {
  .creneau .btn--contour { width: 100%; }
  .creneau__quand { display: flex; align-items: baseline; gap: 0.5rem; }
}
/* =============================================================
   41. AVANT / APRES SUR UNE LIGNE
   Quatre colonnes ramenaient chaque comparatif a 210 px : les
   sourcils devenaient illisibles et la poignee de comparaison trop
   petite pour le doigt. Une seule ligne que l on fait glisser, et
   chaque comparatif prend la moitie de la largeur disponible.
   ============================================================= */
.comparatifs--piste {
  display: flex;
  gap: clamp(0.9rem, 0.6rem + 1.2vw, 1.6rem);
  grid-template-columns: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gouttiere);
  padding-inline: var(--gouttiere);
  margin-inline: calc(var(--gouttiere) * -1);
  padding-bottom: 0.4rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.comparatifs--piste::-webkit-scrollbar { display: none; }

.comparatifs--piste .avant-apres {
  flex: 0 0 min(62vw, 19rem);
  scroll-snap-align: center;
  aspect-ratio: 4 / 5;
}
@media (min-width: 900px) {
  .comparatifs--piste .avant-apres { flex-basis: min(38vw, 27rem); }
}

/* la poignee grandit avec l image */
.comparatifs--piste .avant-apres__trait::after { width: 34px; height: 34px; }
.comparatifs--piste .avant-apres__etiq { font-size: 0.68rem; padding: 0.3rem 0.7rem; }

/* indication de defilement */
.comparatifs__aide {
  margin: var(--e3) 0 0;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive-clair);
}
/* =============================================================
   42. NAVIGATION DE PISTE ET LOGO GOOGLE
   La piste se faisait glisser sans qu on sache combien de vues
   restaient : deux fleches, des puces et un etat desactive aux
   extremites rendent le parcours lisible, au doigt comme a la souris.
   ============================================================= */
.piste-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e3);
  margin-top: var(--e4);
}
.piste-nav__fleche {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--ligne);
  background: rgba(255, 255, 255, 0.6);
  color: var(--olive);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s;
}
.piste-nav__fleche:hover:not(:disabled) { background: #fff; border-color: var(--olive-clair); }
.piste-nav__fleche:disabled { opacity: 0.32; cursor: default; }
.piste-nav__fleche:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }

.piste-nav__puces { display: flex; align-items: center; gap: 8px; }
.piste-nav__puce {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(85, 21, 31, 0.18);
  cursor: pointer;
  transition: width 0.25s var(--sortie), background 0.25s;
}
.piste-nav__puce.est-active { width: 22px; border-radius: 999px; background: var(--olive); }
.piste-nav__puce:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }

/* le logo Google, colle a la mention */
.avis-flanc__tete .avis-flanc__qui small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.logo-g { flex: none; }
/* =============================================================
   43. CARTES QUI S EMPILENT AU DEFILEMENT
   Chaque carte est collante avec un decalage croissant : en
   descendant, elles se posent les unes sur les autres au lieu de
   sortir de l ecran. Le decalage laisse voir le bord des precedentes.
   ============================================================= */
.pile { display: grid; gap: var(--e4); }
.pile > * {
  position: sticky;
  top: calc(var(--entete-h) + 1.4rem + var(--rang, 0) * 14px);
  margin: 0;
}
/* la variante mobile ne s empile qu en dessous de 900 px */
@media (min-width: 900px) {
  .pile--mobile > * { position: static; top: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .pile > * { position: static; }
}

/* --- les quatre situations, en cartes empilables ----------------- */
@media (max-width: 899px) {
  .questions.pile { gap: 12px; }
  .questions.pile > li {
    background: var(--sable-clair);
    border: 1px solid var(--ligne);
    box-shadow: 0 18px 40px -34px rgba(42, 34, 32, 0.55);
  }
}

/* --- au bout du parcours : quatre acquis qui s empilent ---------- */
.pile .acquis {
  display: grid;
  gap: 0.55rem;
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  border-radius: 16px;
  border: 1px solid rgba(85, 21, 31, 0.09);
  background: var(--sable-clair);
  box-shadow: 0 20px 50px -40px rgba(42, 34, 32, 0.6);
}
.acquis__num {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--olive-clair);
  font-variant-numeric: lining-nums tabular-nums;
}
.acquis h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.6rem);
  line-height: 1.2;
  color: var(--encre);
  max-width: 26ch;
}
.acquis p {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--encre-douce);
  max-width: 60ch;
}
/* le kit ne s empile pas : il ferme la section */
.kit { position: relative; z-index: 2; }

/* =============================================================
   44. LES DEUX JOURNEES, MEME LANGAGE QUE LES NEUF ETAPES
   Elles etaient dessinees comme un bloc a part : meme rayon, meme
   filet, meme fond que les cartes d etape, la section se lit d une
   seule voix.
   ============================================================= */
.jours { display: grid; gap: 10px; grid-template-columns: 1fr; margin-top: var(--e4); }
@media (min-width: 820px) { .jours { grid-template-columns: 1fr 1fr; } }
.jour {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: clamp(1.15rem, 0.9rem + 1vw, 1.5rem) 20px clamp(1.3rem, 1rem + 1.2vw, 1.7rem);
  border-radius: 16px;
  border: 1px solid rgba(85, 21, 31, 0.09);
  background: rgba(255, 255, 255, 0.55);
  overflow: visible;
}
.jour::before { display: none; }
.jour__num {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--olive-clair);
}
.jour h4 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.06rem;
  line-height: 1.25;
  color: var(--encre);
}
.jour p {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--encre-douce);
}
/* =============================================================
   45. LA VIDEO DES TEMOIGNAGES
   Format vertical, comme elle a ete filmee. Rien ne se charge avant
   le clic : l affiche tient le cadre, le bouton disparait a la
   lecture et les commandes natives prennent le relais.
   ============================================================= */
.temoins {
  display: grid;
  gap: clamp(1.4rem, 1rem + 1.8vw, 2.4rem);
  grid-template-columns: 1fr;
  justify-items: center;
  margin-top: var(--e6);
}
/* en largeur, les trois témoignages tiennent de front */
@media (min-width: 860px) {
  .temoins { grid-template-columns: repeat(3, 1fr); align-items: start; }
}
.temoignages {
  position: relative;
  margin: 0;
  width: min(100%, 22rem);
  display: grid;
  isolation: isolate;
}
/* voile discret sous le bouton central, pour qu il se detache de
   l affiche quelle qu elle soit */
.temoignages::after {
  content: "";
  grid-area: 1 / 1;
  border-radius: 22px;
  background: radial-gradient(closest-side, rgba(30, 12, 14, 0.34), transparent 72%);
  pointer-events: none;
  transition: opacity 0.25s;
}
.temoignages.est-lancee::after { opacity: 0; }

.temoignages video {
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
  border-radius: 22px;
  background: var(--encre);
  box-shadow: var(--ombre);
}
.temoignages__lecture {
  grid-area: 1 / 1;
  place-self: center;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: max-content;
  max-width: calc(100% - 2rem);
  padding: 0.6rem 1.1rem 0.6rem 0.6rem;
  border: 0;
  border-radius: 999px;
  background: rgba(244, 241, 236, 0.94);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.25s, transform 0.25s;
}
.temoignages__rond {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--olive);
  color: var(--sable);
}
.temoignages.est-lancee .temoignages__lecture {
  opacity: 0;
  transform: scale(0.94);
  pointer-events: none;
}
.temoignages figcaption {
  grid-area: 2 / 1;
  margin-top: var(--e3);
  text-align: center;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--encre-douce);
}
/* =============================================================
   46. LES ETAPES NOMMEES DANS LA PHASE
   Quatre onglets au lieu de neuf, mais les neuf etapes restent
   ecrites : elles se listent dans la phase ouverte, en filets laiton.
   ============================================================= */
.etape-drop__num {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.etape-drop__liste {
  display: grid;
  gap: 0.4rem;
  padding: 0.3rem 0 14px;
}
.etape-drop__liste span {
  position: relative;
  padding-left: 1.3rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--encre);
}
.etape-drop__liste span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.7rem;
  height: 1px;
  background: var(--olive-clair);
}
.etape-drop__texte { padding-bottom: 0; }
/* =============================================================
   47. BANDEAU D ACTION, MOBILE
   Une barre posee en bas de l ecran : l offre et l etat de la
   prochaine session a gauche, le bouton a droite. Le hero n a plus
   besoin de son bouton, l action ne quitte plus le pouce.
   ============================================================= */
.bandeau-action { display: none; }

@media (max-width: 979px) {
  .bandeau-action {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 10px 10px 16px;
    border-radius: 14px;
    background: var(--encre);
    box-shadow: 0 18px 40px -18px rgba(20, 12, 10, 0.65);
    transition: transform 0.35s var(--sortie), opacity 0.3s;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .bandeau-action.est-cache {
    transform: translateY(calc(100% + 16px));
    opacity: 0;
    pointer-events: none;
  }

  .bandeau-action__texte { display: grid; gap: 2px; min-width: 0; }
  .bandeau-action__texte strong {
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--sable);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bandeau-action__texte span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 300;
    color: rgba(241, 237, 228, 0.72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* la pastille signale qu il reste des places, sans rien promettre */
  .bandeau-action__pastille {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--olive-clair);
    box-shadow: 0 0 0 3px rgba(193, 162, 101, 0.22);
  }

  .bandeau-action .btn--plein {
    flex: none;
    height: 40px;
    padding-inline: 1.05rem;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    border-radius: 10px;
  }

  /* le pied de page ne doit pas finir sous la barre */
  .pied { padding-bottom: calc(var(--e7) + 4.5rem); }

  /* le bouton du hero n a plus lieu d etre : l action est en bas */
  .hero--duo .hero__actions { display: none; }
}

@media (max-width: 380px) {
  .bandeau-action { padding-left: 12px; }
  .bandeau-action__texte strong { font-size: 0.76rem; }
  .bandeau-action .btn--plein { padding-inline: 0.85rem; font-size: 0.64rem; }
}
/* =============================================================
   48. LES TEMOIGNAGES S EMPILENT, MOBILE
   Trois formats verticaux a la suite faisaient defiler pres de deux
   mille pixels. Ils se posent maintenant les uns sur les autres. Les
   vignettes deviennent des cartes opaques, sinon on verrait au
   travers pendant le recouvrement.
   ============================================================= */
@media (max-width: 899px) {
  .temoins.pile { gap: 14px; }
  .temoins.pile > .temoignages {
    position: sticky;
    top: calc(var(--entete-h) + 0.8rem + var(--rang, 0) * 12px);
    width: 100%;
    padding: 10px 10px 4px;
    border-radius: 20px;
    background: var(--sable-clair);
    border: 1px solid var(--ligne);
    box-shadow: 0 22px 50px -34px rgba(42, 34, 32, 0.6);
  }
  .temoins.pile > .temoignages video {
    aspect-ratio: 9 / 14;
    border-radius: 14px;
  }
  .temoins.pile > .temoignages::after { border-radius: 14px; }
  .temoins.pile > .temoignages figcaption {
    margin-top: 0.6rem;
    margin-bottom: 0.3rem;
    font-size: 0.74rem;
  }
}

/* a cette taille la poignee et les etiquettes doivent se resserrer */
@media (max-width: 899px) {
  .comparatifs--piste .avant-apres__trait::after { width: 28px; height: 28px; }
  .comparatifs--piste .avant-apres__etiq { font-size: 0.6rem; padding: 0.24rem 0.55rem; }
}
/* =============================================================
   49. LE SIMULATEUR
   Repris de la page produit, couleurs comprises : terre #634124,
   carte blanche pour le mois, sable #e0d9ca pour l annee, et le ton
   moyen #99714d pour le seuil de rentabilite.
   ============================================================= */
.roi {
  --roi-terre: #634124;
  --roi-clair: #e0d9ca;
  --roi-moyen: #99714d;
  --roi-doux: #ccb7a3;
  padding: clamp(1.6rem, 1.1rem + 2.4vw, 3rem);
  border-radius: 24px;
  background: var(--roi-terre);
  color: #fff;
}

.roi__titre {
  margin: 0 auto clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
  max-width: 34ch;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.85rem);
  line-height: 1.28;
  text-align: center;
  color: #fff;
}

.roi__corps {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 1rem + 2.4vw, 2.6rem);
  align-items: start;
}
@media (min-width: 880px) { .roi__corps { grid-template-columns: 1fr 1.15fr; } }

/* --- reglages --------------------------------------------------- */
.roi__reglages { display: grid; gap: clamp(1.3rem, 1rem + 1.2vw, 2rem); }
.roi__intro {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.62;
  color: var(--roi-clair);
  max-width: 40ch;
}
.roi__curseur { display: grid; gap: 0.7rem; }
.roi__ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.roi__label {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--roi-doux);
}
.roi__valeur {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  font-weight: 500;
  color: #fff;
  font-variant-numeric: lining-nums tabular-nums;
}

/* le remplissage de la piste suit la valeur, pilote par --part */
.roi__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--roi-doux) 0 var(--part, 15%),
    rgba(224, 217, 202, 0.28) var(--part, 15%) 100%);
  cursor: pointer;
}
.roi__range:focus-visible { outline: 2px solid var(--roi-clair); outline-offset: 6px; }
.roi__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--roi-doux);
  border: 3px solid var(--roi-terre);
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.5);
}
.roi__range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--roi-doux);
  border: 3px solid var(--roi-terre);
}

/* --- resultats --------------------------------------------------- */
.roi__resultats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.7rem, 0.5rem + 0.8vw, 1rem);
}
.roi__carte {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  padding: clamp(1rem, 0.8rem + 0.9vw, 1.4rem);
  border-radius: 14px;
}
.roi__carte-label {
  font-family: var(--sans);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
}
.roi__carte-valeur {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.5rem);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.roi__carte-sous {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
}

.roi__carte--mois { background: #fff; color: var(--roi-terre); }
.roi__carte--mois .roi__carte-sous { color: var(--roi-moyen); }
.roi__carte--an { background: var(--roi-clair); color: var(--roi-moyen); }
.roi__carte--an .roi__carte-valeur { color: var(--roi-moyen); }

.roi__carte--seuil {
  grid-column: 1 / -1;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(0.8rem, 0.4rem + 1.6vw, 1.6rem);
  background: var(--roi-moyen);
  color: var(--roi-clair);
}
.roi__carte--seuil .roi__carte-label { max-width: 9ch; }
.roi__carte--seuil .roi__carte-valeur {
  justify-self: end;
  text-align: right;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.9rem);
  color: #fff;
}

@media (max-width: 520px) {
  .roi__resultats { grid-template-columns: 1fr; }
  .roi__carte--seuil { grid-template-columns: 1fr auto; }
}
/* =============================================================
   50. LAB-13, BALAYAGE DE COULEUR SUR LES TITRES
   Chaque lettre deduit sa part du balayage de son index et de la
   progression du titre, posee par le script. Le calcul etant fait en
   CSS, aucune ecriture de style par lettre a chaque image.
   ============================================================= */
:root {
  --titre-plein: var(--encre);
  --titre-muet: rgba(42, 34, 32, 0.15);
}
.chems--sombre, .roi { --titre-plein: #fff; --titre-muet: rgba(255, 255, 255, 0.16); }

[data-lettres].balaye .lettre {
  /* le balayage precede le texte de six caracteres : la transition
     entre le ton efface et le ton plein reste douce */
  --etendue: 6;
  --l: clamp(0, calc((var(--p, 0) * (var(--n, 1) + var(--etendue)) - var(--i, 0)) / var(--etendue)), 1);
  opacity: 1;
  filter: none;
  transform: none;
  transition: none;
  color: color-mix(in oklab, var(--titre-plein) calc(var(--l) * 100%), var(--titre-muet));
}
/* les mots en italique gardent leur couleur d accent, seul le voile
   d attente change */
[data-lettres].balaye .ital .lettre {
  color: color-mix(in oklab, var(--olive-clair) calc(var(--l) * 100%), var(--titre-muet));
}
.chems--sombre [data-lettres].balaye .ital .lettre,
.roi [data-lettres].balaye .ital .lettre {
  color: color-mix(in oklab, var(--olive-clair) calc(var(--l) * 100%), var(--titre-muet));
}

/* sans color-mix, on retombe sur une variation d opacite */
@supports not (color: color-mix(in oklab, red 50%, blue)) {
  [data-lettres].balaye .lettre { color: var(--titre-plein); opacity: calc(0.16 + var(--l) * 0.84); }
}

@media (prefers-reduced-motion: reduce) {
  [data-lettres].balaye .lettre { color: var(--titre-plein); }
  [data-lettres].balaye .ital .lettre { color: var(--olive-clair); }
}
/* =============================================================
   51. PASSE DESKTOP
   Reprise de ce que le travail mobile avait deplace ou casse.
   ============================================================= */

/* --- le halo n a rien a faire dans la grille du hero ------------- */
@media (min-width: 980px) {
  .hero--duo .hero__halo { display: none; }
}

/* --- les reperes du hero, memes coches qu en mobile -------------- */
@media (min-width: 980px) {
  .hero--duo .hero__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.6rem;
    padding: 0;
    list-style: none;
  }
  .hero--duo .hero__specs li {
    position: relative;
    padding: 0 0 0 1.35rem;
    border: 0;
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--encre);
  }
  .hero--duo .hero__specs li::before,
  .hero--duo .hero__specs li:first-child::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 0.34em;
    width: 5px;
    height: 9px;
    border: solid var(--olive-clair);
    border-width: 0 1.6px 1.6px 0;
    background: none;
    transform: rotate(42deg);
  }
  .hero--duo .hero__specs li + li::after { content: none; }
}

/* --- le parcours : la pile se resserre -------------------------- */
@media (min-width: 900px) {
  .pile .acquis {
    max-width: 46rem;
    margin-inline: auto;
    padding: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem) clamp(2rem, 1.5rem + 1.8vw, 3rem);
  }
  .pile .acquis h3 { font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.7rem); }
  /* le kit reprend toute la largeur, il ferme la section */
  .kit { margin-top: var(--e7); }
}
/* =============================================================
   52. PASSE DESKTOP, LISIBILITE
   Corrections relevees a la mesure : un mot qui depasse, et trois
   libelles sous douze pixels.
   ============================================================= */

/* « Rentabilisee » fait douze caracteres : la colonne en faisait neuf */
.roi__carte--seuil .roi__carte-label {
  max-width: 13ch;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* aucun libelle ne descend sous douze pixels */
.creneau__lieu { font-size: 0.76rem; letter-spacing: 0.14em; }
.chems__signature { font-size: 0.78rem; letter-spacing: 0.2em; }
.hero__note { font-size: 0.78rem; }
.roi__carte-label { font-size: 0.68rem; }
.roi__carte-sous { font-size: 0.65rem; }
.etape-vue figcaption span { font-size: 0.68rem; }
.avis-flanc figcaption span, .frontieres__libelle { font-size: 0.7rem; }
/* =============================================================
   53. DEUX LIBELLES PORTEURS D INFORMATION
   Le rang des phases et le nombre de places restantes etaient a
   9,9 px : ils disent quelque chose, ils doivent se lire.
   ============================================================= */
.etape-drop__num { font-size: 0.72rem; letter-spacing: 0.1em; }
.creneau__places { font-size: 0.72rem; padding: 0.26rem 0.56rem; }
/* =============================================================
   54. CIBLES TACTILES
   Rien de visible ne change : seules les zones attrapables
   grandissent, pour passer les 32 px recommandes au doigt.
   ============================================================= */

/* --- curseurs du simulateur ------------------------------------- */
.roi__range {
  height: 32px;
  background: linear-gradient(to right,
    var(--roi-doux) 0 var(--part, 15%),
    rgba(224, 217, 202, 0.28) var(--part, 15%) 100%)
    center / 100% 4px no-repeat;
  border-radius: 0;
}
.roi__range::-webkit-slider-runnable-track { height: 32px; background: transparent; }
.roi__range::-moz-range-track { height: 32px; background: transparent; }
.roi__range::-webkit-slider-thumb { margin-top: 0; }

/* --- puces de la piste ------------------------------------------ */
.piste-nav__puces { gap: 0; }
.piste-nav__puce {
  box-sizing: content-box;      /* le rembourrage s ajoute a la puce */
  width: 7px;
  height: 7px;
  padding: 13px;
  margin: 0;
  background-clip: content-box;
}

/* --- lien discret du hero --------------------------------------- */
.hero--duo .lien-discret {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding-block: 0.35rem;
}
/* =============================================================
   55. RESPIRATION DESKTOP
   Les sections se suivaient a 272 px d intervalle. On resserre le
   rythme sans coller les blocs : 96 px de part et d autre, et les
   respirations internes ramenees a la meme echelle.
   ============================================================= */
@media (min-width: 980px) {
  :root { --section: clamp(72px, 3rem + 3.4vw, 104px); }

  /* le hero n a besoin que de degager l en-tete */
  .hero--duo { padding-top: calc(var(--entete-h) + 3.4rem); }

  /* sous les en-tetes de section */
  .entete-section { margin-bottom: clamp(2rem, 1.4rem + 1.4vw, 2.9rem); }

  /* les deux temps de la methode */
  .temps { margin-top: clamp(2.4rem, 1.6rem + 2vw, 3.4rem); }
  .temps--second { margin-top: clamp(3rem, 2rem + 2.4vw, 4.2rem); }
  .parcours__note { margin-top: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); }

  /* le kit ferme la section sans trou */
  .kit { margin-top: clamp(2.2rem, 1.6rem + 1.6vw, 3rem); }

  /* la phrase de bascule de la qualification */
  .questions__suite { margin-top: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); }

  /* les creneaux suivent la carte sans intervalle mort */
  .creneaux { margin-top: clamp(2.2rem, 1.6rem + 1.6vw, 3rem); }

  /* les temoignages et le bandeau de note */
  .temoins { margin-top: clamp(2rem, 1.4rem + 1.6vw, 2.8rem); }

  /* le formulaire */
  .formulaire { margin-top: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); }
}
/* =============================================================
   56. RETOUCHES DESKTOP
   ============================================================= */
@media (min-width: 980px) {
  /* le rythme se resserre encore */
  :root { --section: clamp(72px, 2.6rem + 2.6vw, 84px); }

  /* la photo sous le bandeau retrouve son air : la regle precedente
     visait le bandeau comme voisin, or il vit maintenant dans le
     hero, elle ne s appliquait plus */
  .section--enchaine { padding-top: clamp(2.6rem, 1.6rem + 2.4vw, 4rem); }
}

/* --- les comparatifs, moins hauts ------------------------------- */
@media (min-width: 900px) {
  .comparatifs--piste .avant-apres { flex-basis: min(30vw, 21.5rem); }
  .comparatifs--piste .avant-apres__trait::after { width: 30px; height: 30px; }
}

/* --- les colonnes d avis, plus larges et plus lisibles ----------- */
@media (min-width: 1100px) {
  .bande-duo {
    grid-template-columns: clamp(12rem, 17vw, 16.5rem) minmax(0, 1fr) clamp(12rem, 17vw, 16.5rem);
    gap: clamp(1.6rem, 0.8rem + 2.4vw, 3.2rem);
  }
  .avis-flanc { min-height: 17rem; }
  .avis-flanc__item { gap: 0.6rem; }
  .avis-flanc__tete img { width: 48px; height: 48px; }
  .avis-flanc__tete .avis-flanc__qui strong { font-size: 0.95rem; }
  .avis-flanc__tete .avis-flanc__qui small { font-size: 0.78rem; }
  .avis-flanc .etoiles { font-size: 0.86rem; }
  .avis-flanc__item blockquote { font-size: 0.98rem; line-height: 1.5; }
}
/* =============================================================
   57. TITRES DE PHASE
   Ils portaient le meme poids que le rang qui les precede alors
   qu ils sont l information principale de la carte.
   ============================================================= */
.etape-drop__titre {
  font-size: clamp(1.15rem, 1rem + 0.75vw, 1.5rem);
  line-height: 1.2;
}
@media (max-width: 999px) {
  .etape-drop__titre { font-size: clamp(1.08rem, 0.98rem + 0.6vw, 1.3rem); }
}
/* =============================================================
   58. AVANT / APRES EN GRILLE, DESKTOP
   Les quatre comparatifs tiennent sur la largeur : la piste et sa
   navigation ne servent plus qu en mobile.
   ============================================================= */
@media (min-width: 1000px) {
  /* les quatre comparatifs prennent toute la largeur de l ecran :
     plafonner la colonne laissait des marges mortes de part et d autre */
  #resultats .wrap {
    max-width: none;
    padding-inline: clamp(24px, 2.6vw, 56px);
  }
  .comparatifs--piste {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(0.9rem, 0.5rem + 1vw, 1.4rem);
    overflow: visible;
    padding-inline: 0;
    margin-inline: 0;
    scroll-snap-type: none;
  }
  .comparatifs--piste .avant-apres { flex-basis: auto; scroll-snap-align: none; }
  .piste-nav { display: none; }
}

/* la section Chems garde son contexte de positionnement, il sert au
   portrait et au voile de la legende */
.chems--sombre { position: relative; overflow: hidden; }
.chems--sombre .wrap { position: relative; z-index: 1; }
/* =============================================================
   60. CINQ RETOURS
   ============================================================= */

/* --- 1. la coche du premier repere -------------------------------
   La regle desktop d origine supprime le retrait du premier element
   de la liste, et sa pseudo-classe la faisait passer devant la
   nouvelle : la coche se posait sur le chiffre. */
@media (min-width: 980px) {
  .hero--duo .hero__specs li:first-child,
  .hero--duo .hero__specs li:first-of-type { padding-left: 1.35rem; }
}

/* --- 2. la mention Qualiopi sort du hero -------------------------- */
.hero--duo .hero__note { display: none; }

/* --- 3. les mots qui portent l avis ------------------------------- */
.avis-flanc__item blockquote strong {
  font-weight: 500;
  color: var(--encre);
}

/* --- 4. la phrase de bascule, centree en desktop ------------------ */
@media (min-width: 900px) {
  .questions__suite {
    max-width: 44ch;
    margin-inline: auto;
    text-align: center;
  }
}

/* --- 5. six temoignages en desktop -------------------------------- */
.temoignages--desktop { display: none; }
@media (min-width: 860px) {
  .temoignages--desktop { display: grid; }
  .temoins { grid-template-columns: repeat(3, 1fr); }
}
/* =============================================================
   61. TEMOIGNAGES EN PISTE, DESKTOP
   Six formats verticaux sur deux rangs prenaient toute la hauteur de
   l ecran. Sur une ligne que l on fait glisser, on en voit trois et
   demi, et le demi dit qu il y en a d autres.
   ============================================================= */
.piste-nav--temoins { display: none; }

@media (min-width: 860px) {
  /* la section passe en pleine largeur, avec la meme gouttiere que
     l avant / apres : les deux blocs partagent donc le meme bord */
  #avis { overflow-x: clip; }
  #avis .wrap {
    max-width: none;
    padding-inline: clamp(24px, 2.6vw, 56px);
  }
  .temoins.pile {
    display: flex;
    grid-template-columns: none;
    gap: clamp(1rem, 0.6rem + 1.2vw, 1.6rem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* c est la colonne de la section qui passe en pleine largeur, pas
       la piste : un calcul en unites de fenetre inclut la barre de
       defilement et decalait le premier element de sept pixels par
       rapport a l avant / apres */
    padding-inline: 0;
    scroll-padding-inline: 0;
    margin-inline: 0;
    padding-bottom: 0.4rem;
    scrollbar-width: none;
    justify-items: stretch;
  }
  .temoins.pile::-webkit-scrollbar { display: none; }

  .temoins.pile > .temoignages {
    position: static;
    flex: 0 0 clamp(16rem, 20.5vw, 23rem);
    width: auto;
    max-width: none;
    scroll-snap-align: center;
  }
  .temoins.pile > .temoignages video { aspect-ratio: 9 / 15; }

  .piste-nav--temoins { display: flex; }
}

/* =============================================================
   62. LA VILLE DE LA VISITEUSE
   Quand la requete Google Ads porte une ville, la carte de session
   correspondante passe en tete et se signale. Le badge prend le
   laiton, pas l olive des places restantes : deux etiquettes olive
   sur la meme ligne se seraient confondues.
   ============================================================= */
.creneau__ici {
  padding: 0.22rem 0.5rem;
  border-radius: 6px;
  background: var(--olive-clair);
  color: var(--olive-fonce);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}

/* un filet laiton a gauche, assez discret pour ne pas casser la
   grille des cartes mais assez net pour dire laquelle vous concerne */
.creneau--ici { box-shadow: inset 3px 0 0 var(--olive-clair); }

@media (max-width: 700px) {
  .creneau__ici { font-size: 0.6rem; padding: 0.2rem 0.44rem; }
}

/* =============================================================
   63. CALENDRIER SANS DATE
   Quand toutes les sessions affichees sont passees, elles sont
   retirees et cette phrase prend leur place. Elle reprend la mesure du
   paragraphe d introduction : la section ne doit pas paraitre cassee,
   seulement en attente.
   ============================================================= */
.creneaux__vide {
  margin-top: var(--e6);
  padding: var(--e5) var(--e4);
  border-top: 1px solid var(--ligne);
  border-bottom: 1px solid var(--ligne);
  max-width: 46ch;
  margin-inline: auto;
  text-align: center;
  color: var(--encre-douce);
}