/* =========================================================================
   My Coach by Ginkgo — feuille de styles
   Direction artistique : ui-ux-pro-max
     · Style      : Soft UI Evolution (profondeur subtile, WCAG AA+, 200-300ms)
     · Palette    : charte officielle MYCOACH 2021 — Navy, Bleu, Anthracite, Beige
     · Typo       : Livvic (titres) + Open Sans (textes), charte p.11
   Composants adaptés de 21st.dev :
     · Hero éditorial  → @felipemenezes098/hero-07
     · Timeline méthode → @7ovr/how-it-works-2
   ========================================================================= */

/* ---------- 0. Polices auto-hébergées -----------------------------------
   Livvic (titres) et Open Sans (textes) — typographies officielles de la charte
   MYCOACH 2021, p.11. Servies depuis assets/fonts/ : aucune requête vers
   fonts.googleapis.com ni fonts.gstatic.com. Sous-ensemble latin uniquement.
   Playfair Display et Inter, utilisés lors de la première génération, sont
   retirés — ils ne figuraient dans aucune source officielle. */

@font-face {
  font-family: 'Livvic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/livvic-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Livvic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/livvic-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/opensans-300-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Tokens --------------------------------------------------- */

:root {
  /* Neutres — anthracite officiel #212121, gris #F6F6F6, beige #F4EEE8 */
  --anthracite:      #212121;   /* titres */
  --anthracite-deep: #1A1A1A;   /* surfaces sombres */
  --body:            #3D3D3D;   /* texte courant    — 10,9:1 sur blanc */
  --muted:           #5C5C5C;   /* texte secondaire — 6,7:1 sur blanc */
  --line:            #E3E3E3;
  --line-soft:       #EDEDED;
  --bg:              #F6F6F6;
  --surface:         #FFFFFF;
  --beige:           #F4EEE8;   /* sections alternées */

  /* Navy officiel #002366 — couleur principale, CTA */
  --navy-deep:       #001A4D;
  --navy:            #002366;   /* CTA — blanc dessus : 14,66:1 */
  --navy-hover:      #001B52;   /* hover */
  --accent-soft:     #D6E2F7;
  --accent-softer:   #EDF2FB;

  /* Bleu officiel #0F52BA — accents secondaires, liens, pictogrammes, filets.
     7,15:1 sur blanc et 6,21:1 sur beige : lisible pour du texte. */
  --blue:            #0F52BA;
  --blue-ink:        #0F52BA;

  /* Sur fond sombre */
  --on-dark:         #FFFFFF;
  --on-dark-muted:   #B9C6E0;  /* 8,5:1 sur --navy */
  --on-dark-line:    #1C3A73;
  --on-dark-accent:  #8FB4F5;  /* eyebrows, filets, numéraux et focus sur sombre */

  /* États d'erreur — tons terre, jamais de rouge vif (DESIGN.md). */
  --error-line:      #C4756B;  /* filet d'un champ en erreur — 3,2:1 sur le gris de page */
  --error-line-soft: #E4C4BE;  /* bordure de l'encart d'erreur */
  --error-surface:   #FBF0EE;  /* fond de l'encart d'erreur */
  --error-ink:       #7A3B31;  /* texte d'erreur — 7,5:1 sur son fond */

  /* Typographie fluide */
  --font-display: 'Livvic', 'Trebuchet MS', system-ui, sans-serif;
  --font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-eyebrow: 0.8125rem;
  --fs-sm:      0.9375rem;
  --fs-base:    1rem;
  --fs-lead:    clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem);
  --fs-h3:      clamp(1.1875rem, 1.12rem + 0.35vw, 1.375rem);
  --fs-h2:      clamp(1.875rem, 1.45rem + 1.9vw, 2.875rem);
  --fs-h1:      clamp(2.125rem, 1.55rem + 2.5vw, 3.5rem);
  --fs-stat:    clamp(2rem, 1.6rem + 1.8vw, 2.75rem);

  /* Rythme vertical — PASSE C.
     La valeur est un DEMI-espace : deux sections voisines additionnent leur
     padding, l'espace perçu vaut donc le double. Calage :
       · desktop ≥1200px : 56px  → 112px entre deux grandes sections
       · tablette 768px  : 43px  →  86px
       · mobile 390px    : 32px  →  64px
     Les blocs sur fond sombre (#temoignages, #bilan) reçoivent volontairement
     un peu plus d'air : voir --sp-section-dark. */
  --sp-section: clamp(2rem, 1.28rem + 2.96vw, 3.5rem);
  --sp-section-dark: clamp(2.25rem, 1.44rem + 3.33vw, 4rem);
  --radius:     12px;
  --radius-sm:  8px;
  --radius-lg:  20px;
  --maxw:       1180px;
  --gutter:     clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);

  /* Ombres douces (Soft UI Evolution) */
  --shadow-xs: 0 1px 2px rgba(33, 33, 33, .04);
  --shadow-sm: 0 1px 3px rgba(33, 33, 33, .05), 0 4px 12px -4px rgba(33, 33, 33, .05);
  --shadow-md: 0 2px 6px rgba(33, 33, 33, .05), 0 12px 28px -12px rgba(33, 33, 33, .12);
  --shadow-lg: 0 4px 10px rgba(33, 33, 33, .05), 0 24px 48px -20px rgba(33, 33, 33, .18);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur:  240ms;

  /* Échelle de z-index */
  --z-nav:     10;
  --z-cta:     15;
  --z-drawer:  20;
  --z-skip:    30;
  --z-panel:   40;   /* panneau studio — au-dessus de tout le reste */
}

/* ---------- 2. Base ----------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Garde d'ancrage unique du site : la nav flottante mesure ≈87px au repos et
     ≈62px compactée — 6.25rem (100px) la dépasse dans les deux états, aucun
     titre n'est masqué. Ne PAS doubler avec un scroll-margin-top sur les
     sections : les deux valeurs s'additionneraient et créeraient un vide. */
  scroll-padding-top: 6.25rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* `hidden` doit toujours l'emporter : plusieurs composants (flèches de la rangée
   vidéo, panneau studio) s'appuient dessus alors que leur classe déclare un
   `display` explicite. */
[hidden] { display: none !important; }

/* Défilement de la page gelé pendant l'ouverture du panneau studio. */
html.has-panel, html.has-panel body { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--anthracite);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.015em; }

p { margin: 0; text-wrap: pretty; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* Focus visible — cohérent sur tout le site */
:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Bleu clair réservé aux vraies sections sombres. `.site-footer` en a été
   retiré le 5 août 2026 : le pied de page est sur fond clair, un anneau de
   focus bleu pâle y était presque invisible. Il reprend donc l'anneau Navy
   commun à tout le site. */
.on-dark :focus-visible { outline-color: var(--on-dark-accent); }

.skip-link {
  position: absolute;
  left: 1rem; top: -100%;
  z-index: var(--z-skip);
  background: var(--anthracite);
  color: var(--on-dark);
  padding: .75rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ---------- 3. Utilitaires de mise en page ------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--sp-section); }
.section--beige { background: var(--beige); }

/* Un aplat sombre a besoin d'un peu plus d'air qu'une section claire pour ne
   pas se lire comme un bandeau compressé : +8px de chaque côté sur desktop. */
.section--immersive,
.section.on-dark { padding-block: var(--sp-section-dark); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 .75rem;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--blue);
  flex: none;
}
.on-dark .eyebrow { color: var(--on-dark-accent); }

.section-head { max-width: 46rem; margin-bottom: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); }
.section-head p { font-size: var(--fs-lead); color: var(--muted); margin-top: .875rem; }

.lead { font-size: var(--fs-lead); color: var(--muted); }

/* ---------- 4. Boutons -------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .875rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.btn--primary {
  background: var(--navy);
  color: #FFFFFF;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--navy-hover); box-shadow: var(--shadow-md); }

.btn--ghost {
  background: transparent;
  color: var(--anthracite);
  border-color: var(--line);
}
.btn--ghost:hover { background: var(--surface); border-color: #D0D0D0; box-shadow: var(--shadow-xs); }

/* PASSE D — `.btn--light` et `.btn--outline-light` supprimées : variantes de
   bouton pour fond sombre, jamais employées. Les deux seules sections sombres
   (#temoignages, #bilan) ne portent aucun bouton posé directement sur l'aplat —
   le CTA de #bilan est dans une carte claire et utilise `.btn--primary`. */

.btn--wide { width: 100%; }

.btn svg { flex: none; }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }

/* ---------- 5. En-tête -------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  padding: .625rem var(--gutter);
}
/* Lot 3 — compaction au défilement SANS recalcul de mise en page. Avant, les
   marges de l'en-tête et de la barre, la hauteur du logo et celle des boutons
   changeaient : l'en-tête (dans le flux) perdait ~27px et toute la page
   remontait d'autant, masqué par une animation de marges. Désormais la hauteur
   ne change plus : la pilule remonte de 5px et le logo passe de 54 à 38px par
   transformation, le fond et l'ombre se renforcent. */

.nav {
  max-width: var(--maxw);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .375rem .5rem .375rem .875rem;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.site-header[data-scrolled="true"] .nav {
  background: rgba(255, 255, 255, .95);
  box-shadow: var(--shadow-sm);
  transform: translateY(-5px);
}
/* 54px × 0,704 = 38px : même taille compacte qu'avant, par transformation. */
.site-header[data-scrolled="true"] .brand__logo { transform: scale(.704); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  text-decoration: none;
  color: var(--anthracite);
  margin-right: auto;
  /* Retrait vertical annulé : avec un logo à 54px, il faisait du bloc de marque
     l'élément le plus haut de la barre et rallongeait l'en-tête de 3px. Sans
     lui, c'est le CTA (55px) qui fixe la hauteur, exactement comme avant. */
  padding: 0 .125rem;
}
/* Logo officiel My Coach (assets/images/Logo). Deux déclinaisons :
   noire sur l'en-tête clair, blanche sur le pied de page sombre. */
.brand__logo {
  display: block;
  /* +12,5 % (48px auparavant). La hauteur de l'en-tête est fixée par le CTA,
     plus haut que le logo : l'agrandissement ne la fait pas bouger. */
  height: 54px;
  width: auto;
  flex: none;
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}

.nav__links { display: none; align-items: center; gap: .25rem; }
.nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 .875rem;
  border-radius: 999px;
  color: var(--body);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__links a:hover { background: var(--accent-softer); color: var(--navy-hover); }

/* AJUSTEMENT DU 5 août 2026 — l'ajout de « Franchise » porte la barre à cinq
   liens, et elle ne tenait plus juste au-dessus de 900px, seuil d'apparition de
   la nav complète : « La méthode », « Les studios », « Les coachs » et le CTA
   se coupaient en deux et l'en-tête passait de 69 à 94px de haut.

   `nowrap` d'abord, sans condition de largeur : un libellé de navigation ne se
   coupe jamais, quelle que soit la place disponible.

   Puis un resserrage limité à 900–1024px, la seule bande réellement contrainte.
   Mesures du contenu de la barre par rapport à la place disponible, à 900px :
   −12px avant, +14px après. Dès 960px la marge est confortable et à 1024px elle
   dépasse 80px : au-delà, rien n'est modifié.

   Le logo suit le mouvement à 44px. C'est un geste que la barre fait déjà : au
   défilement, elle le compacte à 38px.

   Si un sixième lien devait apparaître, ce n'est plus le rembourrage qu'il
   faudrait réduire mais le seuil de bascule vers le tiroir, à remonter. */
.nav__links a { white-space: nowrap; }
.nav__cta { white-space: nowrap; }

@media (min-width: 900px) and (max-width: 1023.98px) {
  .nav { gap: .625rem; }
  .nav__links a { padding: 0 .5rem; }
  .brand__logo { height: 44px; }
}

.nav__cta { display: none; }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--anthracite);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.nav__toggle:hover { background: var(--beige); }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-open { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }

.drawer {
  position: fixed;
  inset: 5rem var(--gutter) auto;
  z-index: var(--z-drawer);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: .75rem;
  display: none;
}
.drawer[data-open="true"] { display: block; }
.site-header[data-scrolled="true"] .drawer { inset-block-start: 4.75rem; }   /* sous la pilule remontée de 5px */
.drawer a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 1rem;
  border-radius: var(--radius);
  color: var(--anthracite);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}
.drawer a:hover { background: var(--beige); }
.drawer .btn { margin-top: .5rem; }

/* CORRECTION — le CTA du tiroir s'affichait en texte anthracite sur fond Navy,
   et virait au fond beige au survol. Cause : `.drawer a` (0,1,1) et
   `.drawer a:hover` (0,2,1) l'emportent sur `.btn--primary` (0,1,0) et
   `.btn--primary:hover` (0,2,0), qui portent la couleur du bouton. Les règles
   ci-dessous rendent au bouton ses quatre états, à spécificité supérieure.

   Le blanc est réaffirmé sur chaque état, y compris `:focus` et `:active` : ce
   sont eux qui étaient les plus dégradés, l'anthracite se lisant à peine sur le
   Navy. Contrastes : blanc sur --navy 14,66:1, sur --navy-hover 15,9:1, sur
   --navy-deep 16,4:1 — bien au-delà des 4,5:1 exigés.

   L'anneau de focus reste celui du site (`:focus-visible`, Navy à 3px de
   décalage) : il se pose sur le fond blanc du tiroir, pas sur le bouton. */
.drawer a.btn--primary,
.drawer a.btn--primary:link,
.drawer a.btn--primary:visited,
.drawer a.btn--primary:hover,
.drawer a.btn--primary:focus,
.drawer a.btn--primary:focus-visible,
.drawer a.btn--primary:active { color: #FFFFFF; }

.drawer a.btn--primary { background: var(--navy); }
.drawer a.btn--primary:hover,
.drawer a.btn--primary:focus-visible { background: var(--navy-hover); }
.drawer a.btn--primary:active { background: var(--navy-deep); }

@media (min-width: 900px) {
  .nav__links, .nav__cta { display: flex; }
  .nav__toggle { display: none; }
  .drawer { display: none !important; }
}

/* ---------- 6. Hero (adapté de 21st.dev @felipemenezes098/hero-07) ------- */

.hero { position: relative; isolation: isolate; overflow: hidden; }

.hero__media {
  position: relative;
  width: 100%;
  /* Le hero passe sous la nav flottante. En mobile la photo n'est pas recadrée
     (source 3/2 = cadre 3/2) : un chevauchement trop fort masquerait les visages,
     on le limite donc à 2rem. */
  margin-top: -2rem;
}
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(33,33,33,.28) 0%, rgba(33,33,33,0) 45%);
  pointer-events: none;
}
.hero__media picture { display: block; }   /* <picture> est inline par défaut */
.hero__media img {
  width: 100%;
  display: block;
  /* Mobile — cadre resserré par rapport au 3/2 de la source : la partie gauche
     (le dos du coach, au premier plan et hors mise au point) est rognée pour
     que l'adhérente reste le sujet. `object-position` place la fenêtre à droite
     et à hauteur de visage. */
  aspect-ratio: 7 / 6;
  max-height: 380px;
  object-fit: cover;
  object-position: 85% 34%;
  background: var(--beige);
  /* Transition photo → page. Le fondu est resserré de 6 % à 3 % du bas : sur
     une photo de 460px il ne dissout plus que ~14px au lieu de ~28px. C'est
     lui qui créait, avec le padding du bloc en dessous, une zone molle entre
     la photo et le titre. Le point de départ passe à 55 % d'opacité pour que
     le raccord reste doux malgré la course plus courte. */
  -webkit-mask-image: linear-gradient(to bottom, #000 97%, rgba(0,0,0,.55) 99%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 97%, rgba(0,0,0,.55) 99%, transparent 100%);
}

@media (min-width: 700px) {
  /* Tablette — la largeur suffit pour revenir au cadre large de la source ;
     c'est la hauteur qui est rognée, d'où un point focal calé sur le visage. */
  .hero__media img {
    aspect-ratio: 16 / 9;
    max-height: 420px;
    object-position: 60% 32%;
  }
}

.hero__body {
  position: relative;
  display: grid;
  gap: 2rem;
  /* Retrait HAUT resserré (2rem → 1.25rem) : c'est l'espace photo → titre, il
     doit être court pour que la promesse arrive vite.
     Retrait BAS inchangé — il forme, avec le padding haut de #difference,
     l'espace hero → première section (≈96px desktop, ≈75px tablette,
     ≈56px mobile) et fait partie du rythme inter-sections. */
  padding-block: 1.25rem clamp(1.5rem, 1.02rem + 1.98vw, 2.5rem);
}

/* Preuve sociale du hero — volontairement secondaire par rapport au H1 :
   fond clair très légèrement teinté, filet fin, ombre quasi imperceptible.
   Navy + Bleu officiels uniquement, aucun doré, aucun effet SaaS. */
.hero__rating {
  /* Agrandi d'un cran — il y a la place dans la colonne de gauche :
     17,5rem → 19,5rem de large, padding et corps de texte suivent. */
  max-width: 19.5rem;
  padding: 1.25rem 1.375rem 1.3125rem;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(237,242,251,.72));
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0, 35, 102, .04);
}
/* `p { margin: 0 }` est déjà posé dans la base : chaque marge est explicite ici. */
.hero__rating-stars { display: flex; gap: .1875rem; }
/* Les <svg> du balisage sont en 15px ; on les repasse à 17px ici pour suivre
   l'agrandissement du module sans toucher au HTML. */
.hero__rating-stars svg { width: 17px; height: 17px; color: var(--blue); flex: none; }

.hero__rating-score {
  display: flex;
  align-items: baseline;
  gap: .0625rem;
  margin-top: .4375rem;
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1;
  letter-spacing: -0.02em;
}
.hero__rating-value { font-size: 2.75rem; }
.hero__rating-max { font-size: 1.25rem; color: var(--blue); }

.hero__rating-count {
  margin-top: .4375rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--anthracite);
  line-height: 1.4;
}
.hero__rating-src {
  margin-top: .625rem;
  padding-top: .625rem;
  border-top: 1px solid var(--accent-soft);
  font-size: .8125rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Mobile / tablette : la pile verticale d'origine. Les deux nouveaux
   conteneurs reprennent le même gap de 1.5rem, l'espacement entre titre,
   chapo, boutons et reassurances est donc rigoureusement inchange. */
.hero__copy,
.hero__intro,
.hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.hero__copy p { max-width: 34rem; }

.hero h1 em {
  font-style: italic;
  color: var(--blue);   /* accent secondaire officiel #0F52BA */
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-top: -.25rem;
}
.hero__proof li { display: inline-flex; align-items: center; gap: .4375rem; }
.hero__proof svg { color: var(--navy); flex: none; }

@media (min-width: 900px) {
  .hero__media { margin-top: -6rem; }
  .hero__media img {
    aspect-ratio: 21 / 9;
    /* La photo descend plus bas : min(44vh, 378px) → min(52vh, 460px), soit
       +82px (+22 %). Plafond volontairement conservé — au-delà de ~460px sur
       un portable 1440x900, le chapô et les boutons passeraient sous la ligne
       de flottaison. Le vh garde la photo proportionnée sur les écrans courts. */
    max-height: min(52vh, 460px);
    /* Toute la largeur de la source est visible : le coach à gauche, l'adhérente
       et le sac à droite. Seule la hauteur est rognée — la fenêtre est calée sur
       les visages et les gants plutôt que sur le plafond.
       34 % → 28 % : la fenêtre étant plus haute, 34 % faisait affleurer les
       cheveux de l'adhérente contre le bord supérieur. 28 % rend le dégagement
       au-dessus de la tête. */
    object-position: center 28%;
  }
  .hero__body {
    grid-template-columns: repeat(12, 1fr);
    column-gap: 2.5rem;
    /* La gouttière verticale ne sépare plus que le bloc titre + chapô du bloc
       boutons + réassurances : elle reprend donc le 1.5rem de la pile mobile,
       et non les 2.5rem qui séparent les colonnes. */
    row-gap: 1.5rem;
    /* 2.5rem → 1.25rem : même intention qu'en mobile, resserrer photo → titre. */
    padding-top: 1.25rem;
  }

  /* `.hero__copy` s'efface de la mise en page : ses deux enfants deviennent des
     cellules de la grille du hero. C'est ce qui rend possible le centrage
     demandé — la carte de note partage sa ligne avec le seul `.hero__intro`
     (titre + chapô) et s'y centre, indépendamment de la hauteur des boutons et
     des réassurances, qui occupent la ligne du dessous. */
  .hero__copy { display: contents; }

  .hero__intro   { grid-column: 5 / span 8; grid-row: 1; }
  .hero__actions { grid-column: 5 / span 8; grid-row: 2; }

  /* Centrage vertical sur le bloc titre + chapô. Remplace le calage manuel au
     sommet des capitales du H1 (`margin-top: calc(var(--fs-h1) * .33 - 25px)`),
     devenu inutile : la grille s'en charge et suit toute variation de hauteur
     du titre. */
  .hero__rating {
    grid-column: 1 / span 4;
    grid-row: 1;
    align-self: center;
  }
}

/* ---------- 7. Barre de preuve — SUPPRIMÉE (PASSE C) ---------------------
   `.stats` et `.stats--solo` habillaient le bandeau de preuve autonome placé
   sous le hero. Ce bandeau a été retiré en passe B (doublon avec la note
   réseau) et remplacé par `.hero__rating`, qui est désormais la seule
   occurrence de la note 4,9/5 sur le site. Plus aucun balisage, ni affiché ni
   commenté, n'utilisait ces classes. */

/* ---------- 8. Section #difference -------------------------------------- */

/* PASSE H (5 août 2026) — la section n'expose plus les deux cartes de
   comparaison mais le quiz de qualification, remonté de #methode. Le chapô pose
   le constat, le quiz enchaîne dessus. Le titre <h2> a été retiré à la demande
   du client.

   Enchaînement voulu : sur-titre → chapô → filet vertical → carte. Le filet est
   la seule pièce ajoutée ; il descend du chapô jusqu'au liseré Navy/Bleu que la
   carte porte déjà (`.quiz::before`), de sorte que les deux traits se lisent
   comme un seul geste. Il reprend le bleu et l'épaisseur du tiret de
   `.eyebrow::before`, à la verticale.

   Le tout reste calé à gauche, sur la même largeur que `.section-head` : c'est
   le rythme de toute la page, et `.steps` (#methode) traite déjà une section
   entière en colonne étroite alignée à gauche. */

/* PASSE H bis — la section est resserrée et centrée. Elle ne porte qu'un bloc
   court : calée à gauche sur 46rem dans une page de 1104rem utiles, elle
   laissait un tiers de vide à droite. Le sur-titre, le chapô, le filet et la
   carte partagent désormais la même colonne de 47,5rem (760px), centrée.

   Le centrage est ici local et assumé : c'est la seule section de la page
   construite autour d'un outil unique, sans contenu à sa droite. Toutes les
   autres gardent l'alignement à gauche. */

/* 47,5rem = 760px. Colonne commune au chapô et à la carte : leurs deux bords
   coïncident exactement. */
.qualify { max-width: 47.5rem; margin-inline: auto; }

/* Marge basse resserrée sous le chapô — le rythme par défaut de
   `.section-head` (jusqu'à 2.75rem) détacherait le quiz de son introduction.
   Même procédé que `.digital-head`. `max-width` reprend celui de `.qualify` et
   l'emporte sur les 46rem de `.section-head` : même classe simple, déclarée
   après. */
.qualify-head {
  max-width: 47.5rem;
  margin-inline: auto;
  margin-bottom: clamp(.875rem, .7rem + .8vw, 1.25rem);
  text-align: center;
}

/* Marges de section réduites : la section fait moins de la moitié de la hauteur
   des autres, le rythme plein l'isolait entre le hero et la méthode. */
.section--qualify { padding-block: clamp(1.75rem, 1.1rem + 2.6vw, 3rem); }

/* Le filet n'est posé qu'avec `is-ready`, classe ajoutée par main.js en même
   temps que la carte est révélée : sans JavaScript, la section s'arrête au
   chapô et aucun trait ne flotte dans le vide. `--blue` en bas, transparent en
   haut : le trait naît du texte et atterrit sur le liseré de la carte.
   Centré comme le reste de la colonne depuis la passe H bis. */
.qualify.is-ready::before {
  content: "";
  display: block;
  width: 1px;
  height: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  margin-inline: auto;
  background: linear-gradient(180deg, transparent, var(--blue));
}

/* Carte resserrée : à 760px de large, le rembourrage plein (jusqu'à 2,5rem)
   creusait beaucoup de vide autour d'un contenu court. Le pas de l'intro et du
   résultat est réduit d'autant. Portée limitée à `.qualify` : les proportions
   de base de `.quiz` (section 16 ter) restent celles d'origine. */
.qualify .quiz { padding: clamp(1.375rem, 1.15rem + 1vw, 2rem); }
.qualify .quiz__actions { margin-top: 1.25rem; }
.qualify .quiz__fineprint { margin-top: .625rem; }
.qualify .quiz__stage { margin-top: 1.25rem; }

/* --- Cartes de comparaison — plus affichées (voir index.html, #difference) ---
   Les règles sont conservées : le balisage l'est aussi, en commentaire, et le
   projet n'est pas sous Git. Remettre le bloc `<div class="compare">` en place
   suffit à retrouver l'affichage d'origine. Même convention que
   `.method__aside`, retiré en passe B et toujours stylé ici. */

.compare { display: grid; gap: 1.25rem; }

.compare__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
}

/* Colonne « salle de fitness » : neutre et froide. Fond transparent — donc le
   gris de la page — et filet discret : la carte n'existe presque pas en tant
   qu'objet, ce qui suffit à la faire lire comme le terme de comparaison.
   Aucun effet dépréciatif : le constat est factuel. */
.compare__card--muted {
  background: transparent;
  border-color: var(--line);
}

/* Colonne My Coach : la seule à porter un fond, une ombre et un filet Navy.
   Le filet est posé en ombre interne plutôt qu'en bordure, pour ne créer aucun
   décalage de hauteur avec la carte voisine. */
.compare__card--ours {
  background: linear-gradient(180deg, rgba(237,242,251,.6), var(--surface) 58%);
  border-color: var(--accent-soft);
  box-shadow: inset 0 1px 0 var(--navy), var(--shadow-md);   /* 3px → 1px */
}

/* --- Niveau 1 : pictogramme d'univers + titre --- */

.compare__head { display: flex; align-items: center; gap: .75rem; }

/* Épingle de lieu à gauche, coach à droite : la différence de modèle se lit
   avant même la première ligne de texte. */
.compare__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--line-soft);
  color: var(--muted);
}
.compare__card--ours .compare__icon { background: var(--accent-softer); color: var(--navy); }

.compare__title { font-size: var(--fs-h3); }
.compare__card--ours .compare__title { color: var(--navy-deep); }

/* --- Niveau 2 : la phrase forte --- */

/* Corps nettement au-dessus de la liste, et famille display : c'est elle qui
   doit être lue en second, juste après le titre. */
.compare__claim {
  margin-top: .875rem;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--muted);
}
.compare__card--ours .compare__claim { color: var(--navy); }

/* --- Niveau 3 : la liste --- */

/* Un seul filet, entre la phrase forte et la liste. Les filets ligne à ligne
   sont supprimés : ce sont eux qui donnaient l'aspect tableau. L'aération
   passe désormais par l'espacement. */
.compare__list {
  margin-top: clamp(1.125rem, .95rem + .7vw, 1.5rem);
  padding-top: clamp(1.125rem, .95rem + .7vw, 1.5rem);
  border-top: 1px solid var(--line-soft);
}
.compare__list li {
  display: flex;
  gap: .75rem;
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.compare__list li + li { margin-top: .875rem; }
.compare__list svg { flex: none; margin-top: 2px; }

/* Tiret gris neutre à gauche — et non bleuté : rien ne doit rattacher cette
   colonne à la palette de marque. */
.compare__card--muted li  { color: var(--muted); }
.compare__card--muted svg { color: #ADADAD; }

/* Coche Navy sur pastille bleutée à droite : la liste valorisée pèse plus que
   celle d'en face à densité de texte égale. */
.compare__card--ours li  { color: var(--anthracite); }
.compare__card--ours svg {
  color: var(--navy);
  margin-top: 0;
  padding: 3px;
  box-sizing: content-box;
  border-radius: 50%;
  background: var(--accent-softer);
}

@media (min-width: 860px) {
  .compare { grid-template-columns: 1fr 1fr; gap: 1.75rem; align-items: stretch; }
  /* Hauteurs égales : les six lignes se répartissent sur toute la hauteur, les
     deux colonnes se terminent au même endroit quelle que soit la longueur des
     libellés. */
  .compare__card { display: flex; flex-direction: column; }
  /* Espacement FIXE et non `space-between` : les douze libellés tiennent
     désormais sur une ligne chacun, donc les deux listes ont la même hauteur
     naturelle. Réparties, elles se retrouvaient tassées à ~3px d'intervalle.
     Le `flex: 1` suffit à égaliser la hauteur des deux cartes. */
  .compare__list { flex: 1; display: grid; align-content: start; gap: .875rem; }
  .compare__list li + li { margin-top: 0; }
}

/* ---------- 9. Méthode (adapté de 21st.dev @7ovr/how-it-works-2) --------- */

/* PASSE B — le visuel de droite a été retiré : `.method` n'est plus qu'un
   conteneur simple, les quatre étapes occupent toute la largeur. */
.method { display: block; }

.steps { max-width: 40rem; --steps-gut: clamp(1.5rem, .8rem + 2.2vw, 2.75rem); }
.steps > li { display: flex; gap: 1.25rem; }

.steps__marker { display: flex; flex-direction: column; align-items: center; }
.steps__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: none;
  border: 1px solid var(--accent-soft);
  border-radius: 50%;
  background: var(--accent-softer);
  color: var(--navy);
}
.steps__line { width: 1px; flex: 1; margin-top: .5rem; background: var(--line); }
.steps > li:last-child .steps__line { display: none; }

.steps__body { padding-bottom: 2.5rem; }
.steps > li:last-child .steps__body { padding-bottom: 0; }
.steps__num {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue-ink);
  margin-bottom: .375rem;
}
.steps__body p { margin-top: .5rem; font-size: var(--fs-sm); color: var(--muted); }

.method__aside {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--beige);
}
.method__aside img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
/* PASSE C — `.method__quote` (citation posée sur la photo de la méthode) est
   supprimée : aucune citation n'a jamais été validée par le client et le
   balisage n'existe nulle part, pas même en commentaire. `.method__aside` est
   en revanche conservée : le <figure> correspondant est présent, commenté, dans
   index.html et sera réactivé si la photo revient. */

/* Mobile et petite tablette : file verticale 01 → 04, le filet relie les
   étapes. Aucun débordement, le corps de texte reste sur une colonne. */
@media (max-width: 767px) {
  .steps { max-width: none; }
}

/* ≥ 768px — grille 2 × 2 (01 | 02 / 03 | 04). Aucune carte, aucune ombre :
   des filets d'un pixel découpent la grille, comme une double page éditoriale.
   Le connecteur vertical de la file n'a plus de sens et disparaît. */
@media (min-width: 768px) {
  .steps {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Aucune gouttière : ce sont les filets qui séparent, et la bordure gauche
       des cellules paires tombe donc pile sur la limite de colonne. */
    gap: 0;
  }
  .steps > li {
    padding-block: clamp(1.5rem, 1.1rem + 1.1vw, 2.125rem);
    border-top: 1px solid var(--line);
  }
  .steps > li:nth-child(odd)  { padding-right: var(--steps-gut); }
  .steps > li:nth-child(even) {
    padding-left: var(--steps-gut);
    border-left: 1px solid var(--line);
  }
  .steps__line { display: none; }
  .steps__body,
  .steps > li:last-child .steps__body { padding-bottom: 0; }
}

/* ---------- 10. Grille "ce qui est inclus" — SUPPRIMÉE (PASSE C) ---------
   `.grid-cards`, `.card` et `.card__icon` portaient les six cartes de la
   section « ce qui est inclus ». La passe B les a remplacées par la
   présentation éditoriale `.pillars` / `.pillar` (deux colonnes de trois,
   sans carte ni ombre). Aucun autre bloc du site n'utilisait ces classes. */

/* ---------- 10 bis. Ce qui est compris (présentation éditoriale) ---------
   Aucune carte, aucune ombre : des filets d'un pixel découpent la grille, sur
   le même principe que les étapes de la méthode.

   La section est passée de six à trois entrées (voir l'en-tête de #inclus dans
   index.html) : la grille est donc en TROIS colonnes et non plus en deux — à
   trois éléments, deux colonnes donnaient une rangée de deux puis un orphelin.
   Si les piliers « programme » et « suivi » reviennent un jour, repasser à
   `grid-template-columns: 1fr 1fr` avec la logique odd/even d'origine. */

/* Mention discrète sous les trois colonnes. Centrée et en petit corps : elle
   rassure sans peser, et ne concurrence pas les trois étapes. */
.pillars__note {
  margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  padding-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--muted);
  letter-spacing: .01em;
}

.pillars {
  --pillars-gut: clamp(1.5rem, .8rem + 2.2vw, 2.75rem);
  display: grid;
  gap: 0;
}

.pillar {
  display: flex;
  gap: 1rem;
  padding-block: clamp(1.25rem, 1rem + .9vw, 1.75rem);
  border-top: 1px solid var(--line);
}

.pillar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-softer);
  color: var(--navy);
}

.pillar__body h3 { font-size: 1.0625rem; }
.pillar__body p {
  margin-top: .375rem;
  font-size: var(--fs-sm);
  color: var(--muted);
  max-width: 32rem;
}

/* Seuil à 900px et non 768 : à trois colonnes, une tablette de 768px ne
   laisserait que ~230px par entrée — le pictogramme et le texte ne tiennent
   pas côte à côte. En dessous, file verticale simple. */
@media (min-width: 900px) {
  .pillars { grid-template-columns: repeat(3, 1fr); }
  /* En colonne étroite, le pictogramme passe au-dessus du texte : la ligne
     gagne toute la largeur disponible au lieu d'être amputée de 54px. */
  .pillar {
    flex-direction: column;
    gap: .875rem;
    padding-inline: var(--pillars-gut);
  }
  .pillar:first-child { padding-left: 0; }
  .pillar:last-child  { padding-right: 0; }
  .pillar + .pillar   { border-left: 1px solid var(--line); }
  .pillar__body p     { max-width: none; }
}

/* ---------- 11. Coachs -------------------------------------------------- */

/* Douze cartes — dix coachs de studio puis les deux fonctions réseau.
   Mobile 2 colonnes (6 rangées), tablette 3 (4 rangées), desktop 6 (2 rangées).
   Aucune rangée orpheline à aucune largeur : 12 est divisible par 2, 3 et 6. */
.coaches { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .coaches { grid-template-columns: repeat(3, 1fr); } }

@media (min-width: 1120px) {
  /* 2 rangées de 6. Les cartes passent de ~350px à ~172px : la typographie et
     les retraits sont réduits d'un cran pour rester lisibles sans tasser. */
  .coaches { grid-template-columns: repeat(6, 1fr); gap: .875rem; }
  .coach__body { padding: .75rem .8125rem .875rem; }
  .coach__body h3 { font-size: 1.0625rem; }
  .coach__role { font-size: .8125rem; line-height: 1.45; }
}

.coach {
  /* Carte-lien : toute la surface est cliquable et focusable. */
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.coach:hover { box-shadow: var(--shadow-md); border-color: var(--accent-soft); }
.coach:hover .coach__body h3 { color: var(--navy); }
.coach:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.coach__body h3 { transition: color var(--dur) var(--ease); }
/* ---------- Harmonisation des portraits (5 août 2026) --------------------

   CONSTAT. Les douze fichiers sont tous en 760x950, soit exactement le ratio
   4/5 de la carte. `object-fit: cover` n'a donc rien à rogner et
   `object-position` est SANS AUCUN EFFET — c'était déjà écrit dans la note
   précédente à cet endroit. Le cadrage ne pouvait pas être corrigé par ces deux
   propriétés seules ; il fallait un agrandissement.

   MESURES prises portrait par portrait sur une planche de contact réglée
   (hauteur des yeux en % de l'image, largeur de la tête en % du cadre,
   centre du visage en % de la largeur) :

     Alex     yeux 26  tête 20  centre 52      Liam     32  31  49
     Mathys        26       22         51      Nathan   23  20  50
     Marine        27       22         59      Barnabé  31  23  52
     Raphaël       32       54         53      Loris    22  11  49
     Luca          29       21         57      Marvin   30  34  52
     Armelle       28       25         60      Quentin  30  32  52

   Soit un rapport de 1 à 5 entre la tête de Loris (11 %) et celle de
   Raphaël (54 %).

   MÉTHODE. Un agrandissement ne peut que resserrer : on ne peut pas reculer
   dans une photo, il n'y a pas de pixels au-delà du cadre. La cible est donc
   celle des portraits DÉJÀ les plus serrés — tête ≈ 31 %, ligne des yeux à
   32 % de la hauteur — et ce sont les cadrages larges qu'on rapproche.
   Raphaël, Liam, Marvin et Quentin y sont déjà : ils restent à l'échelle 1.

   Deux variables par photo, portées par l'attribut `style` de chaque <img> :
     --z   facteur d'agrandissement (1 = fichier intact)
     --fx / --fy  point fixe de l'agrandissement, qui sert aussi de recadrage :
                  le point choisi ne bouge pas, tout le reste s'écarte autour.

   Pour replacer un point (p) sur une cible (t) à l'agrandissement (z) :
   origine = (t − p × z) / (1 − z). C'est ainsi que chaque valeur ci-dessous a
   été calculée, puis vérifiée à l'écran.

   POURQUOI `transform` ET NON `object-position`. Voir le constat : à ratios
   identiques, `object-position` ne déplace rien. `object-fit: cover` est
   conservé comme garde-fou — il rend toute déformation impossible — mais c'est
   l'agrandissement qui fait le travail. Le ratio est strictement préservé :
   `scale` est uniforme, il n'y a ni étirement ni anamorphose, et AUCUN fichier
   source n'est modifié.

   LIMITES, à connaître avant d'y retoucher :
   • Raphaël reste nettement plus serré que les autres. Sa photo est cadrée en
     gros plan à la prise de vue (son master `assets/images/COACH/` est déjà en
     4/5, il n'existe pas de version plus large). Seule une nouvelle photo ou un
     nouvel export peut le régler.
   • Loris est plafonné à 1,9. Sa cible réelle serait 2,8, mais au-delà de ~1,9
     l'agrandissement d'un fichier de 760px devient visible sur écran dense.
     Sa tête atteint 21 % au lieu des 31 % visés.
   • Le plafond de netteté dépend de la largeur d'affichage : confortable en
     grille de 6 colonnes (cartes ~172px), plus tendu en 3 colonnes (~350px). */

.coach picture {
  display: block;
  overflow: hidden;   /* borne l'agrandissement au cadre de la photo */
}
.coach img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;       /* garde-fou anti-déformation */
  object-position: center; /* sans effet ici : ratios identiques */
  background: var(--beige);
  transform: scale(var(--z, 1));
  transform-origin: var(--fx, 50%) var(--fy, 32%);
}
.coach__body { padding: 1rem 1.125rem 1.125rem; }

/* Libellés harmonisés le 5 août 2026. Le prénom prend le 600 de Livvic — une
   graisse réellement dessinée, pas une synthèse : les titres du site sont en
   400, le prénom se détache donc d'un cran sans devenir un titre.
   Le studio ou la fonction reste bleu mais passe du Navy au `--blue` en 400 :
   plus discret sous le prénom, et toujours à 7,1:1 sur blanc. */
.coach__body h3 { font-size: 1.1875rem; font-weight: 600; }
.coach__role { font-size: var(--fs-sm); color: var(--blue); font-weight: 400; margin-top: .25rem; }

/* Nom du studio sur une seule ligne en grille 6 colonnes.
   Mesuré à 1470px : la cellule offre 134px, « Boulogne-Billancourt » réclame
   ~145px à 15px — seul nom à passer sur deux lignes. 13.5px + un chouïa de
   chasse en moins le ramène sous la limite, les neuf autres étant déjà à
   l'aise. Le prénom (`.coach__body h3`) n'est pas touché.

   À NOTER : une règle `.coach__role { font-size: .8125rem }` existe plus haut
   dans le bloc @media 1120px, mais elle est déclarée AVANT la règle de base
   ci-dessus et perd donc la cascade à spécificité égale — elle n'a jamais eu
   d'effet. C'est pourquoi ce correctif est placé ici, après. */
@media (min-width: 1120px) {
  .coach__role {
    font-size: .84375rem;
    letter-spacing: -0.012em;
  }
}
/* PASSE D — `.coach__studio` et `.coach__diploma` supprimées. La carte coach
   n'affiche que le prénom et `.coach__role` (« Coach — <ville> ») : le studio
   est déjà dans ce libellé, et l'affichage d'un diplôme est explicitement
   proscrit tant qu'aucune qualification n'est fournie et validée. Garder la
   règle aurait invité à réintroduire un badge diplôme non vérifié. */

/* Section immersive : fond Navy officiel, textes en clair. */
.section--immersive { background: var(--navy); }
.section--immersive h2,
.section--immersive .video-card__who { color: var(--on-dark); }
.section--immersive .section-head p,
.section--immersive .video-note { color: var(--on-dark-muted); }
.section--immersive .eyebrow { color: var(--on-dark-accent); }
.section--immersive .eyebrow::before { background: var(--on-dark-accent); }
.section--immersive :focus-visible { outline-color: var(--on-dark-accent); }

/* ---------- 11 bis. Témoignages vidéo -----------------------------------
   Façade : miniature locale + bouton. Le lecteur YouTube n'est injecté qu'au
   clic (main.js, bloc 5). Format portrait 9/16 conservé, jamais déformé. */

/* PASSE C — rangée horizontale unique, sans bibliothèque externe.
   Le nombre de cartes visibles est piloté par `--vcard`, calculé pour laisser
   volontairement apparaître un fragment de la carte suivante en dessous de
   1080px : c'est l'indice qui signale que la rangée défile. */
.videorow {
  --vgap: 1rem;
  --vcard: 78%;                    /* mobile : 1 carte presque entière */
  display: flex;
  flex-wrap: nowrap;
  gap: var(--vgap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .875rem;         /* place pour la barre de défilement */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .3) rgba(255, 255, 255, .09);
}
.videorow > .video-card {
  flex: 0 0 var(--vcard);
  min-width: 0;
  scroll-snap-align: start;
}
/* La carte focalisée au clavier ne doit jamais être coupée par le bord. */
.videorow { scroll-padding-inline: 0; }
.videorow:focus-visible { outline: 2px solid var(--on-dark-accent); outline-offset: 4px; border-radius: var(--radius); }

.videorow::-webkit-scrollbar { height: 6px; }
.videorow::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .09);
  border-radius: 999px;
}
.videorow::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .3);
  border-radius: 999px;
}
.videorow::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .45); }

@media (min-width: 700px) {
  /* Tablette : 2 cartes entières + une amorce de la troisième. */
  .videorow { --vgap: 1.25rem; --vcard: calc((100% - 2 * var(--vgap)) / 2.4); }
}
@media (min-width: 1080px) {
  /* Desktop large : les quatre cartes tiennent côte à côte, la rangée ne
     défile plus et les deux flèches passent à l'état désactivé. */
  .videorow { --vgap: 1.5rem; --vcard: calc((100% - 3 * var(--vgap)) / 4); }
}

/* En-tête de section + flèches sur une même ligne à partir de la tablette. */
.videorow__top { display: grid; gap: 1.25rem; }
.videorow__top .section-head { margin-bottom: 0; }

.videorow__nav { display: flex; gap: .625rem; }
.videorow__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: none;
  border: 1px solid var(--on-dark-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: var(--on-dark);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
}
.videorow__btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, .14);
  border-color: var(--on-dark-accent);
}
.videorow__btn:disabled { opacity: .3; cursor: default; }

@media (max-width: 559px) {
  /* Mobile : le swipe suffit, les flèches disparaissent. */
  .videorow__nav { display: none; }
}
@media (min-width: 700px) {
  .videorow__top {
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: 2rem;
  }
  .videorow__nav { padding-bottom: .25rem; }
}
.video-card__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--anthracite-deep);
  box-shadow: var(--shadow-md);
}
.video-card__frame img,
.video-card__frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0;
}
.video-card__play {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
  font-family: var(--font-sans);
}
.video-card__play::after {          /* voile de lisibilité sous le libellé */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(33,33,33,.62) 0%, rgba(33,33,33,0) 42%);
  transition: opacity var(--dur) var(--ease);
}
.video-card__cue {
  position: absolute;
  left: 0; right: 0; bottom: 1.125rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: var(--on-dark);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.video-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: rgba(250, 250, 249, .92);
  color: var(--navy);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.video-card__play:hover .video-card__icon { background: #FFFFFF; transform: scale(1.06); }
.video-card__play:hover::after { opacity: .82; }
.video-card__who {
  margin-top: .875rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--anthracite);
  text-align: center;
}
.video-note {
  margin-top: 1.75rem;
  text-align: center;
  font-size: .8125rem;
  color: var(--muted);
}

/* ---------- 11 ter. Avis Google écrits (#avis) ---------------------------
   PASSE B — traitement éditorial et non « trois cartes ». Fond de section
   clair, colonnes séparées par un simple filet, citation en display : la
   rupture avec la section vidéo sur fond Navy qui suit reste franche.       */

.reviews {
  --reviews-gut: clamp(1.5rem, .9rem + 2vw, 2.5rem);
  display: grid;
  gap: 0;
}

.review {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding-block: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  border-top: 1px solid var(--line);
}

.review__mark {
  display: block;
  font-family: var(--font-display);
  font-size: 2.75rem;
  line-height: .7;
  color: var(--accent-soft);
  margin-bottom: .375rem;
}

.review blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--anthracite);
  text-wrap: pretty;
}

/* `margin-top: auto` : les trois signatures s'alignent sur la même ligne de
   base quelle que soit la longueur de la citation. */
.review figcaption {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .625rem;
}
.review__name { font-weight: 600; color: var(--anthracite); font-size: var(--fs-sm); }
.review__meta { font-size: var(--fs-sm); color: var(--navy); }
.review__source {
  display: block;
  width: 100%;
  margin-top: .125rem;
  font-size: .75rem;
  color: var(--muted);
}

@media (min-width: 820px) {
  /* Trois colonnes strictement égales, alignées sur les bords de la section.
     Le filet de séparation est un pseudo-élément centré dans la gouttière :
     il ne consomme aucune largeur, donc aucune colonne n'est rognée. */
  .reviews {
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--reviews-gut);
    border-top: 1px solid var(--line);
  }
  .review { border-top: 0; }
  .review + .review::before {
    content: "";
    position: absolute;
    inset-block: 0;
    left: calc(-1 * var(--reviews-gut) / 2);
    width: 1px;
    background: var(--line);
  }
}

/* ---------- 12. Témoignages — SUPPRIMÉE (PASSE C) ------------------------
   `.testimonials`, `.quote` (et ses variantes `__name`, `__meta`, `__top`,
   `__source`, `__body`, `--video`), `.rating` et `.avatar` formaient le gabarit
   « carte de témoignage » de la première génération. Deux blocs l'ont remplacé
   et sont les seuls en service :
     · avis écrits  → `.reviews` / `.review` (passe B, traitement éditorial) ;
     · témoignages vidéo → `.videorow` / `.video-card` (passe C).
   `.rating` en particulier ne doit pas ressusciter : aucune note individuelle
   d'avis n'est vérifiée, aucune étoile par avis ne doit être affichée
   (CONTENT.md §8). */

/* ---------- 13. Studios ------------------------------------------------- */

/* PASSE C — `.studio`, `.studio__media` et `.studio__list` (ancienne
   présentation « photo + liste » d'un studio unique) sont supprimées : la
   section est désormais bâtie sur `.studio-grid` / `.studio-card` et le
   panneau de détail. */

/* Grille des studios du réseau — une carte par studio réel */
.studio-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.studio-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 1.05rem + .8vw, 1.625rem);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.studio-card:hover { border-color: var(--accent-soft); box-shadow: var(--shadow-md); }
.studio-card__name { font-size: 1.375rem; }

/* Repli sans JavaScript : la fiche complète reste dépliée dans la carte, avec
   le filet de séparation d'origine sous le nom. */
.studio-grid:not([data-enhanced="true"]) .studio-card__name {
  padding-bottom: .875rem;
  border-bottom: 1px solid var(--line-soft);
}
.studio-grid:not([data-enhanced="true"]) .studio-card__trigger { display: none; }
.studio-card__facts { margin: .875rem 0 0; display: grid; gap: .625rem; }
.studio-card__facts > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: .625rem; }
.studio-card__facts dt {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 1px;
}
.studio-card__facts dd { margin: 0; font-size: var(--fs-sm); color: var(--body); }

/* Note Google du studio — valeur évolutive, cf. CONTENT.md §6 */
.studio-card__note {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin-top: .875rem;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.studio-card__note svg { color: var(--blue); flex: none; }
.studio-card__note strong { color: var(--anthracite); font-weight: 600; }

.studio-card__facts a { color: var(--body); text-decoration-color: var(--line); }
.studio-card__facts a:hover { color: var(--navy-hover); text-decoration-color: currentColor; }

/* Horaires repliés : le détail réel de chaque studio sans allonger la carte */
.studio-card__hours { margin-top: .875rem; border-top: 1px solid var(--line-soft); }
.studio-card__hours summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--navy);
}
.studio-card__hours summary::-webkit-details-marker { display: none; }
.studio-card__hours summary svg { flex: none; transition: transform var(--dur) var(--ease); }
.studio-card__hours[open] summary svg { transform: rotate(45deg); }
.studio-card__hours dl { margin: 0 0 .75rem; display: grid; gap: .375rem; }
.studio-card__hours > dl > div {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: .5rem;
  font-size: .8125rem;
}
.studio-card__hours dt { color: var(--muted); }
.studio-card__hours dd { margin: 0; color: var(--body); font-variant-numeric: tabular-nums; }

.studio-card__cta { margin-top: 1rem; }

.studio-note {
  margin-top: 1.25rem;
  font-size: .8125rem;
  color: var(--muted);
  text-align: center;
}

/* ---------- 13 bis. Studios — carte compacte + panneau ------------------
   PASSE C. La section doit pouvoir accueillir dix à quinze établissements sans
   devenir un annuaire : au repos, la carte ne porte que le nom, la note Google
   et un repère « Voir le studio ». Tout le reste (adresse, téléphone, horaires,
   lien Maps, réservation) part dans le panneau.

   Ces règles ne s'appliquent que si main.js a posé `data-enhanced` : sans
   JavaScript, les six fiches restent dépliées et complètes.                 */

/* Dix cartes : mobile 1 colonne, tablette 2 (5 rangées), desktop 5 (2 rangées).
   Aucune rangée orpheline — 10 est divisible par 1, 2 et 5. */
.studio-grid[data-enhanced="true"] { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .studio-grid[data-enhanced="true"] { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1120px) {
  /* 2 rangées de 5. Les cartes passent de ~356px à ~208px : retraits et
     typographie resserrés d'un cran pour que « Boulogne-Billancourt » tienne
     sur une seule ligne. */
  .studio-grid[data-enhanced="true"] { grid-template-columns: repeat(5, 1fr); gap: .875rem; }
  .studio-grid[data-enhanced="true"] .studio-card { padding: 1.0625rem 1rem 1.125rem; }
  .studio-grid[data-enhanced="true"] .studio-card__name { font-size: 1.0625rem; }
  .studio-grid[data-enhanced="true"] .studio-card__note { font-size: .8125rem; margin-top: .5rem; }
  .studio-grid[data-enhanced="true"] .studio-card__trigger { font-size: .8125rem; padding-top: .75rem; }
}

.studio-grid[data-enhanced="true"] .studio-card {
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.studio-grid[data-enhanced="true"] .studio-card__detail { display: none; }
.studio-grid[data-enhanced="true"] .studio-card__note { margin-top: .625rem; }

.studio-card__trigger {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  padding: .875rem 0 0;
  min-height: 44px;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  text-align: left;
}
.studio-card__trigger svg {
  flex: none;
  transition: transform var(--dur) var(--ease);
}
.studio-card:hover .studio-card__trigger svg,
.studio-card__trigger:hover svg { transform: translateX(3px); }

/* Panneau de détail — tiroir latéral (desktop/tablette), feuille remontante
   (mobile). Vide au repos : main.js y déplace le bloc de la carte choisie. */
.studio-panel {
  position: fixed;
  inset: 0;
  z-index: var(--z-panel);
}
.studio-panel__scrim {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, .52);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.studio-panel[data-open="true"] .studio-panel__scrim { opacity: 1; }

.studio-panel__sheet {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(27rem, 100%);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.375rem, 1.1rem + 1.1vw, 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform 300ms var(--ease);
}
.studio-panel[data-open="true"] .studio-panel__sheet { transform: none; }
.studio-panel__sheet:focus { outline: none; }

.studio-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.studio-panel__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
}
.studio-panel__title { font-size: 1.625rem; margin-top: .375rem; }
.studio-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--body);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.studio-panel__close:hover { background: var(--bg); border-color: var(--muted); }

.studio-panel__body .studio-card__note { margin-top: 0; }
.studio-panel__body .studio-card__facts { margin-top: 1.25rem; }
.studio-panel__body .studio-card__facts a { color: var(--navy); }
.studio-panel__body .studio-card__hours { margin-top: 1.25rem; padding-top: 1.125rem; }
.studio-panel__body .studio-card__hours summary { display: none; }
.studio-panel__body .studio-card__hours::before {
  content: "Horaires";
  display: block;
  margin-bottom: .625rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.studio-panel__body .studio-card__cta { margin-top: 1.5rem; }

@media (max-width: 699px) {
  /* Mobile : feuille remontante, jamais plein écran — le contexte reste visible. */
  .studio-panel__sheet {
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto;
    max-height: 88vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio-panel__scrim,
  .studio-panel__sheet { transition: none; }
}

/* Studios ouverts dont la fiche est incomplète : nombre d'avis seul, sans note
   et donc sans picto étoile — une étoile isolée se lirait comme « 1/5 ». */
.studio-card__note--avis { color: var(--muted); }

.studio-card__pending {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.6;
}
.studio-panel__body .studio-card__pending { margin-top: 1.25rem; }

/* ---------- 13 ter. Ouvertures prochaines -------------------------------
   Studios annoncés, NON ouverts. Le filet tireté, le badge et l'absence de
   note, d'avis et de bouton de réservation les séparent sans ambiguïté des
   studios ouverts. Aucune donnée n'est inventée : ville et coach, rien d'autre. */

.soon { margin-top: clamp(2.5rem, 1.9rem + 2.4vw, 3.75rem); }
.soon__title { font-size: 1.5rem; }
.soon__lead {
  margin-top: .5rem;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.soon__grid {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
/* Quatre villes annoncées : deux colonnes, soit deux rangées pleines. À trois
   colonnes la quatrième carte restait seule sur sa ligne ; à quatre, le badge
   « Ouverture prochaine » se coupait en deux lignes. */
@media (min-width: 640px) { .soon__grid { grid-template-columns: repeat(2, 1fr); } }

.soon-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .875rem;
  background: var(--surface);
  border: 1px dashed var(--accent-soft);
  border-radius: var(--radius-lg);
}
.soon-card picture { display: block; flex: none; }
.soon-card img {
  width: 84px;
  height: 105px;                 /* 4/5, comme les cartes coachs */
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--beige);
}
.soon-card__badge {
  display: inline-flex;
  align-items: center;
  padding: .25rem .5625rem;
  border-radius: 999px;
  background: var(--accent-softer);
  color: var(--navy);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.soon-card h4 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--anthracite);
  margin-top: .5rem;
}
.soon-card__coach {
  margin-top: .25rem;
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* PASSE C — trois familles supprimées ici, toutes sans balisage restant :
   · `.stats--solo` : reliquat du bandeau de preuve retiré en passe B ;
   · `.section-media` et `.studio-media` : bandeaux photo pleine largeur d'une
     mise en page abandonnée. Les photos réellement fournies sont désormais
     posées directement (hero, coachs, méthode) ;
   · `.fiche` : ancienne fiche studio libellé/valeur, remplacée par
     `.studio-card__facts` puis par le panneau de la passe C. */

/* ---------- 14. Formules — SUPPRIMÉE (PASSE C) ---------------------------
   `.plans`, `.plan` et toutes leurs variantes (`--featured`, `--slot`,
   `__tag`, `__pitch`, `__price`, `__features`, `__slotnum`, `.plans-note`)
   habillaient la grille tarifaire. Le client a arbitré en passe A : aucun
   prix, aucune formule, aucun nom d'offre sur le site. La section « Offres »
   a été remplacée par « Sur mesure » (`.tailored`, ci-dessous), qui ne
   comporte aucune notion de prix. Ce gabarit n'a donc pas de réutilisation
   prévue. */

/* ---------- 14 bis. Sur mesure ------------------------------------------
   Remplace l'ancienne grille d'offres : aucune notion de prix ni de formule,
   uniquement les critères de personnalisation du challenge. */

.tailored {
  --tailored-gut: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
  display: grid;
  gap: clamp(2rem, 1.4rem + 3vw, 3.5rem);
}

/* PASSE B — la « grosse carte » symétrique disparaît : plus de fond, plus de
   bordure, plus d'ombre. Les critères deviennent une liste éditoriale que
   seul un filet vertical rattache au texte de gauche. */
.tailored__card {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.tailored__label {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 1.125rem;
}
.tailored__list li {
  display: flex;
  align-items: baseline;
  gap: .875rem;
  padding: .8125rem 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--anthracite);
}
.tailored__list li + li { border-top: 1px solid var(--line-soft); }
.tailored__list svg { flex: none; color: var(--navy); align-self: center; }

@media (min-width: 900px) {
  /* `start` et non `center` : les deux colonnes démarrent sur la même ligne,
     ce qui supprime le décalage qui creusait un vide sous le texte. */
  .tailored {
    grid-template-columns: 1.05fr .95fr;
    align-items: start;
    column-gap: var(--tailored-gut);
  }
  /* Filet de continuité entre le discours et les critères. */
  .tailored__card {
    padding-left: var(--tailored-gut);
    border-left: 1px solid var(--line);
  }
}

/* ---------- 15. FAQ (accordéon natif, accessible au clavier) ------------- */

.faq { max-width: 46rem; margin-inline: auto; }

.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 56px;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--anthracite);
  letter-spacing: -0.015em;
  transition: color var(--dur) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--navy); }
.faq summary svg {
  flex: none;
  color: var(--muted);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.faq details[open] summary svg { transform: rotate(45deg); color: var(--navy); }
.faq__answer { padding: 0 0 1.5rem; max-width: 40rem; }
.faq__answer p { font-size: var(--fs-sm); color: var(--muted); }
.faq__answer p + p { margin-top: .75rem; }

/* ---------- 16. Section sombre + formulaire ----------------------------- */

.on-dark {
  background: var(--anthracite-deep);
  color: var(--on-dark-muted);
  position: relative;
  overflow: hidden;
}
.on-dark h2, .on-dark h3 { color: var(--on-dark); }
.on-dark .section-head p,
.on-dark .lead { color: var(--on-dark-muted); }

/* Traitement graphique (plus aucune photo de banque) : halo Navy et Bleu et
   filets — le halo vert et or de la première charte a été retiré (Lot 2/3). Peut être remplacé plus tard par une vraie photo
   My Coach en fond — voir README. */
.on-dark__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(70% 100% at 88% 6%, rgba(0, 35, 102, .55), transparent 64%),
    radial-gradient(52% 80% at 6% 100%, rgba(15, 82, 186, .12), transparent 66%);
}
.on-dark__bg::after {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    -45deg, rgba(250, 250, 249, .022) 0 1px, transparent 1px 16px);
}
.on-dark .wrap { position: relative; z-index: 1; }


.form {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  box-shadow: var(--shadow-lg);
}
.form__grid { display: grid; gap: 1.125rem; }
.field { display: grid; gap: .4375rem; }
.field label {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--anthracite);
  letter-spacing: 0;
}
.field label .opt { color: var(--muted); font-weight: 400; }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: .75rem .875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--anthracite);
  font-family: var(--font-sans);
  font-size: var(--fs-base);   /* 16px : évite le zoom iOS */
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2357534E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .875rem center;
  padding-right: 2.5rem;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #D0D0D0; }
.field input:focus, .field select:focus, .field textarea:focus {
  background: var(--surface);
  border-color: var(--navy);
  outline: 2px solid rgba(0, 35, 102, .22);
  outline-offset: 0;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }   /* Lot 3 : 1,59:1 → 6,2:1 */

.form__row { display: grid; gap: 1.125rem; }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }

/* Sélecteur de studio (#bilan) — remplace le formulaire de captation.
   Reprend la carte blanche du formulaire pour ne pas modifier la DA. */
/* ---------- 16 bis. Réservation intégrée (#bilan) -------------------------
   Agenda SimplyBook affiché dans la page, sélecteur de studio, et bloc
   repliable « on vous rappelle ». Voir l'en-tête de la section dans
   index.html pour le pourquoi de l'iframe plutôt que du widget officiel. */

.booking-head { max-width: 40rem; margin-bottom: clamp(1.25rem, 1rem + 1.1vw, 1.75rem); }

/* Les trois réassurances, en ligne sur desktop : elles gardent leur place mais
   ne repoussent plus l'agenda vers le bas comme le faisait l'ancienne colonne. */
.booking-proof {
  display: grid;
  gap: .875rem;
  margin-bottom: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);
}
.booking-proof li { display: flex; gap: .75rem; font-size: var(--fs-sm); line-height: 1.5; }
.booking-proof svg { color: var(--on-dark-accent); flex: none; margin-top: 3px; }
.booking-proof strong { display: block; color: var(--on-dark); font-weight: 600; }
@media (min-width: 860px) {
  .booking-proof { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

/* Carte claire posée sur l'aplat sombre : l'agenda SimplyBook s'affiche en
   clair, il lui faut son propre fond. */
.booking-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: clamp(1.125rem, .9rem + 1vw, 1.75rem);
  box-shadow: var(--shadow-lg);
}

/* --- Sélecteur de studio --- */

.sb-studios__label {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .625rem;
}
.sb-studios__grid { display: flex; flex-wrap: wrap; gap: .375rem; }
.sb-studios__btn {
  min-height: 40px;
  padding: .375rem .875rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--body);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.sb-studios__btn:hover { border-color: var(--accent-soft); background: var(--accent-softer); color: var(--navy); }
.sb-studios__btn[aria-selected="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #FFFFFF;
  box-shadow: var(--shadow-sm);
}

/* --- Agenda --- */

/* `min-height` dès l'état d'invite : la hauteur réservée est proche de celle
   du calendrier, l'arrivée de l'iframe ne décale donc pas la page. */
.sb-agenda {
  position: relative;
  margin-top: clamp(1rem, .85rem + .6vw, 1.375rem);
  padding-top: clamp(1rem, .85rem + .6vw, 1.375rem);
  border-top: 1px solid var(--line-soft);
  min-height: 260px;
}
.sb-agenda__state {
  display: flex;
  align-items: center;
  gap: .625rem;
  justify-content: center;
  min-height: 240px;
  padding: 1rem;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.sb-agenda__state svg { color: var(--navy); flex: none; }
.sb-agenda__state--error svg { color: var(--muted); }

.sb-agenda__spinner {
  width: 18px; height: 18px;
  flex: none;
  border: 2px solid var(--line);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: sb-spin 700ms linear infinite;
}
@keyframes sb-spin { to { transform: rotate(360deg); } }

.sb-agenda__retry {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* L'iframe est redimensionnée par main.js à la hauteur que SimplyBook publie
   par postMessage : aucun scroll interne, donc pas de double scroll. */
.sb-agenda__secours {
  margin-top: .875rem;
  padding-top: .875rem;
  border-top: 1px solid var(--line-soft);
  font-size: .8125rem;
  color: var(--muted);
  text-align: center;
}

.sb-agenda__frame:empty { display: none; }
.sb-agenda__frame iframe {
  display: block;
  width: 100%;
  border: 0;
  min-height: 620px;
}

/* --- Bloc « on vous rappelle » --- */

.recall {
  margin-top: clamp(1rem, .85rem + .6vw, 1.375rem);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-lg);
}
.recall__toggle {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: clamp(.875rem, .75rem + .5vw, 1.125rem) clamp(1rem, .85rem + .6vw, 1.375rem);
  background: none;
  border: 0;
  border-radius: inherit;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--on-dark);
  text-align: left;
  cursor: pointer;
}
.recall__sign {
  position: relative;
  flex: none;
  margin-left: auto;
  width: 30px; height: 30px;
  border: 1px solid var(--on-dark-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
/* Le « + » est dessiné en deux traits : la barre verticale disparaît à
   l'ouverture et l'ensemble pivote — le signe devient un « × ». */
.recall__sign::before,
.recall__sign::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 11px; height: 1.5px;
  background: var(--on-dark);
  transform: translate(-50%, -50%);
  transition: opacity var(--dur) var(--ease);
}
.recall__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.recall__toggle:hover .recall__sign { background: rgba(255, 255, 255, .14); }
.recall__toggle[aria-expanded="true"] .recall__sign { transform: rotate(45deg); }

.recall__panel { overflow: hidden; }
.recall__inner {
  padding: 0 clamp(1rem, .85rem + .6vw, 1.375rem) clamp(1.125rem, .95rem + .7vw, 1.5rem);
}
.recall__text { font-size: var(--fs-sm); color: var(--on-dark-muted); max-width: 34rem; }

.recall__form { margin-top: 1.125rem; }
.recall__grid { display: grid; gap: .875rem; }
@media (min-width: 620px) { .recall__grid { grid-template-columns: 1fr 1fr; } }

/* Champs posés sur l'aplat sombre : libellés clairs, saisie sur fond blanc
   pour rester lisible et cohérente avec le reste du site. */
.recall__form .field label { color: var(--on-dark); }
.recall__form .field input { background: var(--surface); }
.recall__form .field input[aria-invalid="true"] { border-color: var(--error-line); }   /* ancien filet rose pâle unifié */

/* Le piège à robots : sorti du flux, invisible, et hors tabulation. */
.recall__pot {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.recall__consent { display: flex; gap: .625rem; margin-top: 1.125rem; }
.recall__consent input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--navy); }
.recall__consent label { font-size: .8125rem; line-height: 1.5; color: var(--on-dark-muted); }
.recall__consent a { color: var(--on-dark-accent); }

.recall__actions { margin-top: 1.25rem; }
.recall__actions .btn[disabled] { opacity: .6; cursor: default; }
.recall__note { margin-top: .625rem; font-size: .8125rem; color: var(--on-dark-muted); }

.recall__error {
  margin-top: .875rem;
  padding: .75rem .875rem;
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .06);
  font-size: var(--fs-sm);
  color: var(--on-dark);
}
.recall__done {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-top: 1.125rem;
  font-size: var(--fs-lead);
  color: var(--on-dark);
}
.recall__done svg { color: var(--on-dark-accent); flex: none; }

@media (prefers-reduced-motion: reduce) {
  .sb-agenda__spinner { animation: none; }
}

.form__legal { font-size: .75rem; color: var(--muted); margin-top: 1rem; line-height: 1.55; }
.form__status {
  margin-top: 1rem;
  padding: .875rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--accent-softer);
  border: 1px solid var(--accent-soft);
  color: var(--navy-deep);
  font-size: var(--fs-sm);
}
.form__status[hidden] { display: none; }

@media (min-width: 940px) {
  /* `center` et non `start` : le sélecteur de studio est plus court que la
     colonne de gauche ; aligné en haut, il laissait ~120px de fond sombre vide
     juste avant le pied de page. */
  .booking { grid-template-columns: .85fr 1.15fr; align-items: center; }
}

/* ---------- 16 ter. Quiz de qualification -------------------------------
   Outil interactif de pré-qualification. Il vit dans #difference depuis la
   passe H (5 août 2026) ; sa mise en place — colonne étroite alignée sur le
   chapô, filet de liaison — est décrite en section 8. Les règles ci-dessous
   n'habillent que la carte elle-même et sont indépendantes de l'emplacement.

   Aucune couleur d'état (ni vert, ni rouge, ni orange) n'apparaît dans le
   questionnaire : la sélection est signalée par la pastille Navy de la
   palette, exactement comme un bouton radio. Le visiteur ne doit à aucun
   moment pouvoir deviner qu'il existe des réponses « qui comptent ».

   SUPPRIMÉ EN PASSE H — le bloc `@media (min-width: 1080px)` qui passait
   `.method.is-ready` en deux colonnes et rendait la carte `sticky` dans la
   colonne de droite. Le quiz n'est plus dans #methode et `.method` ne reçoit
   plus `is-ready` : ces règles ne pouvaient plus s'appliquer. La carte n'est
   volontairement pas collante à son nouvel emplacement — elle est le sujet de
   la section, il n'y a plus de contenu à accompagner à côté d'elle. */

/* --- Carte du quiz --- */

.quiz {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.5rem, 1.15rem + 1.55vw, 2.5rem);
  overflow: hidden;   /* le filet d'accent suit l'arrondi */
}

/* Filet d'accent : signale d'un coup d'œil que ce bloc est un outil, pas un
   pavé de contenu de plus. */
.quiz::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;   /* 3px → 1px, Lot 2 */
  background: linear-gradient(90deg, var(--navy), var(--blue));
}

.quiz__title { font-size: var(--fs-h3); }
.quiz__lead { margin-top: .625rem; color: var(--muted); font-size: var(--fs-sm); line-height: 1.65; }
.quiz__actions { margin-top: 1.5rem; }
.quiz__fineprint { margin-top: .75rem; font-size: .8125rem; color: var(--muted); }

/* Chaque écran entre en fondu — le changement d'étape doit se voir. */
.quiz__screen[data-entering] { animation: quiz-screen-in 320ms var(--ease) both; }
@keyframes quiz-screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* --- Barre de progression --- */

.quiz__bar { display: flex; align-items: center; gap: 1rem; min-height: 30px; }
.quiz__back {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .125rem;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: .8125rem;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.quiz__back:hover { color: var(--navy); }
.quiz__back svg { transition: transform var(--dur) var(--ease); }
.quiz__back:hover svg { transform: translateX(-2px); }

.quiz__count {
  margin-left: auto;
  font-size: .8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.quiz__progress {
  margin-top: .625rem;
  height: 3px;
  border-radius: 999px;
  background: var(--line-soft);
  overflow: hidden;
}
.quiz__progress span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--navy);
  /* Lot 3 bis : progression par `scaleX` (main.js) et non plus par `width`. */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 380ms var(--ease);
}

/* --- Scène : les deux questions se superposent le temps du glissement --- */

.quiz__stage { display: grid; margin-top: 1.5rem; }   /* hauteur fixée par main.js (question la plus haute) */
/* `align-self: start` est indispensable : sans lui les deux questions
   superposées seraient étirées à la hauteur de la plus grande et main.js
   mesurerait toujours la même valeur — la hauteur n'animerait jamais. */
.quiz__stage > * { grid-area: 1 / 1; align-self: start; }
/* Débordement masqué pendant le glissement seulement : en permanence, il
   rognerait les contours de focus des boutons de réponse. */
.quiz__stage.is-swapping { overflow: hidden; }

.quiz__q { transition: opacity 260ms var(--ease), transform 320ms var(--ease); }
.quiz__q[data-slide="from-right"] { opacity: 0; transform: translateX(28px); }
.quiz__q[data-slide="from-left"]  { opacity: 0; transform: translateX(-28px); }
.quiz__q[data-slide="to-left"]    { opacity: 0; transform: translateX(-28px); pointer-events: none; }
.quiz__q[data-slide="to-right"]   { opacity: 0; transform: translateX(28px); pointer-events: none; }

.quiz__q-title {
  font-family: var(--font-display);
  color: var(--anthracite);
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* --- Réponses --- */

.quiz__options { display: grid; gap: .625rem; margin-top: 1.25rem; }

.quiz__opt {
  display: flex;
  align-items: center;
  gap: .875rem;
  width: 100%;
  padding: .9375rem 1.0625rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--body);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.quiz__opt:hover {
  border-color: var(--accent-soft);
  background: var(--accent-softer);
  box-shadow: var(--shadow-xs);
}

/* Pastille de sélection — un point, pas une coche : une coche se lirait comme
   « bonne réponse », ce que le questionnaire ne doit jamais suggérer. */
.quiz__opt-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--navy);
  transition: border-color var(--dur) var(--ease);
}
.quiz__opt-mark::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: scale(.4);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}
.quiz__opt:hover .quiz__opt-mark { border-color: var(--accent-soft); }

.quiz__opt[data-chosen="true"] {
  border-color: var(--navy);
  background: var(--accent-softer);
  box-shadow: inset 0 0 0 1px var(--navy);
}
.quiz__opt[data-chosen="true"] .quiz__opt-mark { border-color: var(--navy); }
.quiz__opt[data-chosen="true"] .quiz__opt-mark::after { opacity: 1; transform: none; }

/* Micro-animation de confirmation, jouée juste avant le passage à la suite. */
.quiz__opt.is-pulse { animation: quiz-pulse 300ms var(--ease); }
@keyframes quiz-pulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(.984); }
  100% { transform: scale(1); }
}

/* --- Résultat --- */

.quiz__studios {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
}
.quiz__studios-title {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--anthracite);
  letter-spacing: 0;
}
.quiz__studios-grid { display: grid; gap: .5rem; margin-top: 1rem; }
@media (min-width: 480px) { .quiz__studios-grid { grid-template-columns: 1fr 1fr; } }

/* Dix boutons pleins auraient noyé la carte sous le Navy : les studios
   reprennent le gabarit `.btn--ghost` et ne se remplissent qu'au survol,
   ce qui laisse « Choisir mon studio » seul bouton fort de l'écran. */
.quiz__studio {
  justify-content: space-between;
  min-height: 44px;
  padding: .625rem 1rem;
  color: var(--navy);
  text-align: left;
}
.quiz__studio:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #FFFFFF;
  box-shadow: var(--shadow-sm);
}

.quiz__exit { margin-top: 1.5rem; }
.quiz__exit a { font-size: var(--fs-sm); color: var(--muted); }
.quiz__exit a:hover { color: var(--navy); }

.quiz__again { margin-top: 1.25rem; }
.quiz__linkbtn {
  padding: .25rem 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: .8125rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.quiz__linkbtn:hover { color: var(--navy); }

/* Mouvement réduit : plus aucun glissement ni pulsation — le remplacement de
   question devient instantané (main.js coupe aussi l'animation de hauteur). */
@media (prefers-reduced-motion: reduce) {
  .quiz__q[data-slide] { opacity: 1; transform: none; }
  .quiz__opt.is-pulse { animation: none; }
  .quiz__screen[data-entering] { animation: none; }
}

/* ---------- 16 bis. Présence digitale (#digital) -------------------------
   Trois univers, aucune ressource externe. Les pictogrammes héritent de
   `currentColor` : aucun aplat de marque ne vient perturber la palette. */

.digital { display: grid; gap: 1rem; }
/* Chapô rapproché des cartes : le rythme par défaut de `.section-head`
   (jusqu'à 2.75rem) creusait un vide entre l'introduction et la composition. */
.digital-head { margin-bottom: clamp(1.25rem, 1rem + 1.1vw, 1.75rem); }

@media (min-width: 900px) {
  /* 55 / 45 : la colonne réseaux, plus dense, prend la part large ; la carte
     franchise garde une largeur suffisante pour son titre sur deux lignes.
     `stretch` (et non plus `start`) : les deux cartes partagent haut ET bas. */
  .digital { grid-template-columns: 55fr 45fr; gap: 1.5rem; align-items: stretch; }

  /* La colonne réseaux est la plus courte des deux : plutôt que de la laisser
     s'étirer avec un vide en bas, ses trois rangées absorbent la hauteur
     disponible à parts égales et centrent leur contenu. Les filets restent
     donc régulièrement répartis. */
  .digital__panel { display: flex; flex-direction: column; }
  .digital__row { flex-grow: 1; align-content: center; }

  /* Carte franchise en colonne : le CTA pourra être poussé en pied. La règle
     `margin-top: auto` est posée plus bas, APRÈS la déclaration de base de
     `.franchise__cta` — sans quoi celle-ci, plus tardive dans le fichier,
     l'emporterait à spécificité égale. */
  .franchise { display: flex; flex-direction: column; }
}
/* Même gap que la grille : les respirations verticales et horizontales sont
   désormais identiques partout dans la section. */
/* Un seul bloc blanc pour les trois univers. Les paddings et les filets sont
   volontairement serrés : la contrainte est que cette colonne ne dépasse pas
   la hauteur de la carte franchise, mesurée à ~260px. */
.digital__panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, .85rem + .6vw, 1.25rem) clamp(1.125rem, .95rem + .6vw, 1.25rem);
}

/* Une rangée par univers. Filet fin entre deux rangées — plus de bordure de
   carte, plus d'ombre : la séparation suffit à isoler les trois blocs. */
.digital__row { padding-block: .75rem; }
.digital__row:first-child { padding-top: 0; }
.digital__row:last-child { padding-bottom: 0; }
.digital__row + .digital__row { border-top: 1px solid var(--line-soft); }

/* Le libellé partage sa ligne avec les liens au lieu de la précéder : c'est
   ~21px gagnés par univers, 63px sur la colonne. En dessous de 480px il
   repasse au-dessus, faute de largeur. */
@media (min-width: 480px) {
  .digital__row {
    display: grid;
    /* `auto` et non une largeur fixe : la colonne se cale exactement sur le
       plus long libellé (« À écouter »), qui passait à la ligne à 4.75rem, et
       rend le reste de la largeur aux pastilles. */
    grid-template-columns: auto 1fr;
    gap: 0 .75rem;
    align-items: start;
  }
  .digital__label { padding-top: .5rem; white-space: nowrap; }
}

.digital__label {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .375rem;
}
@media (min-width: 480px) { .digital__label { margin-bottom: 0; } }

/* Pastilles : même vocabulaire que les boutons du site (pilule, filet fin,
   remplissage au survol). Les pictogrammes héritent de la palette, aucun
   aplat de marque. La flèche des anciennes rangées est retirée — elle coûtait
   de la largeur sans rien dire de plus. */
/* Gouttière serrée : avec 1rem de colonne de libellé et 22px de padding, les
   quatre pastilles de « À voir » débordaient de 12px et « Facebook » tombait
   seul sur une deuxième ligne. */
.digital__chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.digital__chips a {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  min-height: 36px;
  /* Retraits resserrés (.75/.625 → .625/.5rem) : ~8px de moins par pastille,
     de quoi faire tenir les quatre liens « À voir » sur une seule ligne. */
  padding: .1875rem .625rem .1875rem .5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--body);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.digital__chips a svg { color: var(--navy); flex: none; }
.digital__chips a:hover {
  border-color: var(--navy);
  background: var(--accent-softer);
  color: var(--navy);
}

/* Chapô du podcast — corps réduit d'un cran par rapport au texte courant. */
.digital__note {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: .4375rem;
}
.digital__note strong { color: var(--anthracite); font-weight: 600; }

/* LinkedIn : la pastille et son sous-titre tiennent sur la même ligne. */
.digital__network { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; }
.digital__hint { font-size: .8125rem; color: var(--muted); }

/* Le franchise : seul bloc sur fond Navy de la section, pour qu'il se lise comme
   un objet éditorial et non comme une rangée d'icônes de plus. */
/* Padding généreux — mais la carte n'est plus étirée, donc ce padding sert le
   confort de lecture au lieu de creuser du vide. Ombre allégée
   (shadow-md → shadow-sm) : la carte reste la plus forte de la section sans
   l'écraser. */
/* `position: relative` + `cursor: pointer` : la carte entière est la zone de
   clic, ouverte par le `::after` du CTA (voir plus bas). */
.franchise {
  position: relative;
  cursor: pointer;
  background: var(--navy);
  color: var(--on-dark);
  border-radius: var(--radius-lg);
  padding: clamp(1.625rem, 1.35rem + 1.05vw, 2.125rem);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Survol de n'importe quel point de la carte. `--navy-deep` et non un
   éclaircissement : sur un aplat de marque, foncer se lit comme un appui, et le
   texte blanc y gagne encore en contraste (16,4:1). */
.franchise:hover { background: var(--navy-deep); box-shadow: var(--shadow-md); }
.franchise__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-dark-accent);
}
/* Titre resserré d'un cran (2,125rem → 1,875rem au plus large) : à largeur de
   colonne égale il tient sur une ou deux lignes au lieu de trois, ce qui
   densifie le haut de la carte au lieu de l'étirer. */
.franchise__title {
  color: var(--on-dark);
  font-size: clamp(1.5rem, 1.3rem + .9vw, 1.875rem);
  margin-top: .5rem;
}
.franchise__text {
  margin-top: .75rem;
  color: var(--on-dark-muted);
  line-height: 1.65;
  max-width: 27rem;
}
/* CTA de la carte franchise : gabarit bouton, actif depuis le 5 août 2026.

   NE PAS POSITIONNER CET ÉLÉMENT (`position: relative` ou autre) : son `::after`
   doit se caler sur `.franchise`, et un lien positionné deviendrait le bloc
   conteneur de son propre pseudo-élément — le voile se réduirait alors à la
   taille de la pastille et la carte cesserait d'être cliquable. */
.franchise__cta {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  align-self: flex-start;
  margin-top: 1.625rem;
  min-height: 48px;
  padding: .625rem 1.125rem;
  border: 1px solid var(--on-dark-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--on-dark);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* CARTE CLIQUABLE — le voile qui étend la zone de clic du CTA à toute la carte.
   Pourquoi ainsi plutôt qu'un <a> enveloppant : un seul lien dans l'ordre de
   tabulation, un seul libellé annoncé (« Découvrir la franchise »), et le texte
   de la carte reste sélectionnable. `inset: 0` se cale sur `.franchise`, seul
   ancêtre positionné. */
.franchise__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);   /* suit l'arrondi de la carte */
}

/* Survol : le bouton réagit aussi quand le pointeur est ailleurs sur la carte,
   pour que la cible du clic reste lisible. */
.franchise:hover .franchise__cta,
.franchise__cta:hover { background: rgba(255, 255, 255, .16); border-color: var(--on-dark-accent); }

/* FOCUS CLAVIER — l'anneau est porté par le voile, il entoure donc la carte
   entière et non la seule pastille : ce qui est cerné correspond exactement à
   ce qui est cliquable. Bleu clair et non Navy : l'anneau commun du site
   (`:focus-visible`, Navy) serait invisible sur l'aplat Navy de la carte. */
.franchise__cta:focus-visible { outline: none; }
.franchise__cta:focus-visible::after {
  outline: 2px solid var(--on-dark-accent);
  outline-offset: 3px;
}

/* SUPPRIMÉ le 5 août 2026 — `.franchise__cta--soon` et `.franchise__soon`
   habillaient le CTA inactif et son badge « Bientôt ». Le badge est retiré du
   balisage et le CTA est devenu un vrai lien : plus aucune règle ne les
   utilisait. Pour rétablir un état « à venir », c'est ce couple de classes
   qu'il faudrait réécrire. */

/* Bouton poussé en pied de carte — c'est ce qui tient la composition une fois
   le paragraphe raccourci. Déclaré ici, après `.franchise__cta`, pour passer
   devant son `margin-top` de base. */
@media (min-width: 900px) {
  .franchise__cta { margin-top: auto; }
}

/* Chapô du bloc « À écouter » */
.digital__note { margin-top: .625rem; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
.digital__note strong { color: var(--anthracite); font-weight: 600; }
.site-footer .brand { margin-right: 0; }
.site-footer .brand__logo { height: 44px; }

/* CORRECTION CONTRASTE (5 août 2026) — tout le pied de page était peint avec
   les jetons « sur fond sombre » (--on-dark #FFFFFF, --on-dark-muted #B9C6E0,
   --on-dark-line #1C3A73) alors que `.site-footer` ne pose AUCUN fond : il
   s'affiche donc sur le gris clair de la page (#F6F6F6). Les titres de colonnes
   étaient blancs sur gris clair — invisibles — et les liens tombaient à
   environ 1,5:1.

   Les jetons sont remplacés par ceux de la palette « sur fond clair ». Aucune
   couleur nouvelle n'est introduite, la charte est inchangée ; seule la
   déclinaison change. La hiérarchie à trois niveaux est conservée et même
   renforcée, chaque niveau restant très au-dessus des 4,5:1 exigés :

     1. titres de colonnes  --navy-deep #001A4D  ≈ 16,4:1  (+ capitales, 600)
     2. liens               --body      #3D3D3D  ≈ 10,4:1  (survol : Navy souligné)
     3. texte secondaire    --muted     #5C5C5C  ≈  6,4:1  (chapô, copyright)

   Si le pied de page reçoit un jour un aplat sombre, c'est ce bloc qu'il faut
   repasser aux jetons --on-dark*, et le logo qu'il faut remettre en blanc. */

.footer__top { display: grid; gap: 2.5rem; }
.footer__pitch { font-size: var(--fs-sm); max-width: 24rem; margin-top: 1rem; color: var(--muted); }
.footer__cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.footer__cols h3 {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy-deep);
  margin-bottom: 1rem;
}
.footer__cols li + li { margin-top: .625rem; }
.footer__cols a {
  color: var(--body);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.footer__cols a:hover { color: var(--navy); text-decoration: underline; }

/* PASSE D — colonne Contact : mêmes tailles que les colonnes de liens, adresse
   sur deux lignes sans italique (défaut de <address>). */
/* Rappel social discret : pictogrammes seuls, sans aplat de marque. */
/* 5 × 34px + 4 × 6px = 194px : les cinq pictogrammes tiennent sur une seule
   ligne dans la colonne Contact (202px). */
.footer__social { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1.125rem; }
/* `.footer__cols li + li` pose une marge haute destinée aux listes de liens :
   elle décalait ici le 1er picto de 10px par rapport aux quatre suivants. */
.footer__social li + li { margin-top: 0; }
.footer__social a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
/* Survol : le picto et son filet passent au Navy sur la pastille bleutée déjà
   employée par les listes de #difference. Aucun aplat de marque des plateformes
   n'est introduit, conformément au parti pris de la section #digital. */
/* Lot 3 — zone tactile portée à 44 × 44px par un pseudo-élément : la pastille
   visible reste à 34px et la rangée tient toujours sur une ligne. */
.footer__social a::after { content: ""; position: absolute; inset: -5px; }
.footer__social a:hover { color: var(--navy); border-color: var(--accent-soft); background: var(--accent-softer); }
.footer__franchise { margin-top: .875rem; }
.footer__franchise a {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  font-size: .8125rem;
  color: var(--muted);
  text-decoration: none;
}
.footer__franchise a:hover { color: var(--navy); text-decoration: underline; }

.footer__contact { font-size: var(--fs-sm); }
.footer__contact address { font-style: normal; line-height: 1.6; }

@media (max-width: 559px) {
  /* Mobile — les trois colonnes tombent en 2 + 1 : la colonne Contact, seule sur
     sa ligne, prend toute la largeur. Sans cela l'adresse e-mail se coupait en
     deux au milieu du nom de domaine (« contact@mycoach- / ginkgo.fr »). */
  .footer__cols > :last-child { grid-column: 1 / -1; }
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 3rem;
  padding-top: 1.75rem;
  /* Filet clair et non plus Navy foncé : sur le fond gris de la page, le jeton
     --on-dark-line traçait une barre sombre en travers du pied de page. */
  border-top: 1px solid var(--line);
  font-size: .8125rem;
}
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__bottom a {
  color: var(--body);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.footer__bottom a:hover { color: var(--navy); text-decoration: underline; }
.footer__bottom p { margin: 0; color: var(--muted); }

@media (min-width: 860px) {
  /* PASSE D — la colonne Contact ajoute une troisième colonne de liens : le
     bloc de droite est élargi pour que « contact@mycoach-ginkgo.fr » tienne sur
     une seule ligne (192px de texte pour 202px de colonne). */
  .footer__top { grid-template-columns: 1fr 1.8fr; gap: 4rem; }
}

/* ---------- 17 bis. Barre d'action mobile ------------------------------
   Le CTA de la nav disparaît sous 900px : on garde la prise de rendez-vous
   accessible en permanence, sans encombrer l'en-tête. */

.cta-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-cta);
  padding: .75rem var(--gutter);
  padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(115%);
  transition: transform 280ms var(--ease);
}
.cta-bar[data-visible="true"] { transform: none; }

@media (min-width: 900px) { .cta-bar { display: none; } }
@media (max-width: 899px)  { .site-footer { padding-bottom: 6.5rem; } }

/* =========================================================================
   PLACEHOLDERS — contenus en attente de données réelles My Coach
   Tout ce qui est marqué ici n'a PAS été fourni et ne doit pas partir en ligne
   tel quel. Pour masquer les repères visuels (revue client, capture…), retirer
   la classe `show-placeholders` sur <body> : le contenu reste, les marqueurs
   disparaissent.
   ========================================================================= */

/* --- Valeur en attente (chiffre, prénom, horaire…) --- */
.ph {
  color: var(--muted);
  font-style: normal;
  text-decoration: underline dotted var(--blue);
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}
body:not(.show-placeholders) .ph { text-decoration: none; }
/* Sur fond sombre, la teinte sourde du placeholder deviendrait illisible. */
.on-dark .ph, .site-footer .ph { color: var(--on-dark-muted); }
.on-dark strong .ph, .site-footer strong .ph { color: var(--on-dark); }
/* …mais la carte formulaire reste blanche à l'intérieur de la section sombre :
   on y rétablit les teintes claires (sinon 2.5:1). */
.form .ph { color: var(--muted); }

/* --- Étiquette « à fournir » --- */
.ph-tag {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  padding: .1875rem .5rem;
  border: 1px solid var(--blue);
  border-radius: 999px;
  background: var(--accent-softer);
  color: var(--blue-ink);
  font-family: var(--font-sans);
  font-size: .6875rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}
.ph-tag::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blue);
}
body:not(.show-placeholders) .ph-tag { display: none; }
/* Déclinaison claire sur fond sombre (l'or foncé y tombe à ~3:1). */
.on-dark .ph-tag, .site-footer .ph-tag {
  color: #F4EEE8;
  border-color: rgba(143, 180, 245, .5);
  background: rgba(143, 180, 245, .1);
}
.on-dark .ph-tag::before, .site-footer .ph-tag::before { background: #F4EEE8; }
.form .ph-tag {
  color: var(--blue-ink);
  border-color: var(--blue);
  background: var(--accent-softer);
}
.form .ph-tag::before { background: var(--blue); }

/* --- Ligne de consigne (ce qu'il faut fournir) --- */
.ph-note {
  display: block;
  margin-top: .5rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--blue-ink);
}
.on-dark .ph-note { color: #F4EEE8; }
body:not(.show-placeholders) .ph-note { display: none; }

/* --- Bloc de contenu entier en attente --- */
.ph-block {
  border: 1px dashed var(--blue);
  border-radius: var(--radius);
  background: var(--accent-softer);
  padding: 1rem 1.125rem;
}
.ph-block p { font-size: var(--fs-sm); color: var(--body); }
.ph-block .ph-tag { margin-bottom: .625rem; }
.on-dark .ph-block { background: rgba(15, 82, 186, .10); border-color: rgba(15, 82, 186, .45); }
.on-dark .ph-block p { color: var(--on-dark-muted); }

/* =========================================================================
   EMPLACEMENTS PHOTO — SUPPRIMÉS (PASSE C)
   `.photo-slot` et ses variantes (`__inner`, `__icon`, `__label`, `__brief`,
   `__spec`, `--hero`, `--portrait`, `--wide`, `--video`) dessinaient les
   cadres d'attente affichés tant que les photos n'étaient pas fournies. Les
   visuels réels sont désormais tous en place — hero, coachs, méthode, studio,
   miniatures vidéo — et plus aucun `<div class="photo-slot…">` n'existe dans
   le code, pas même en commentaire.

   À ne pas confondre avec `.ph`, `.ph-tag`, `.ph-note` et `.ph-block`, qui
   sont CONSERVÉS : ce sont les repères de contenu TEXTE manquant, encore
   utilisés par les blocs commentés du pied de page et réactivables via la
   classe `show-placeholders` sur <body>.
   ========================================================================= */

/* ---------- 18. Animations d'apparition --------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(5px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease), filter 420ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
}

/* ---------- 18 bis. Page 404 --------------------------------------------
   Reprend les composants existants (.brand, .eyebrow, .btn) — aucune nouvelle
   règle de direction artistique. */

.page-404 {
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-block: var(--sp-section);
}
.page-404 .wrap { max-width: 42rem; }
.page-404 .brand { display: inline-block; margin-bottom: 2.5rem; }
.page-404 .brand__logo { height: 40px; width: auto; }
.page-404 .lead { margin-top: 1rem; }
.page-404 .btn-row { margin-top: 2.25rem; }

/* ---------- 18 ter. Page franchise (/franchise/) -------------------------
   Styles propres à /franchise/index.html. Volontairement DANS cette feuille et
   non dans une seconde : la page réutilise les jetons, les boutons, l'en-tête,
   le pied de page, `.section`, `.wrap`, `.faq`, `.steps` et `.pillars`. Une
   feuille séparée aurait dupliqué tout cela et divergé à la première retouche
   de charte.

   TOUTES les classes sont préfixées `fr-` : aucune règle de ce bloc ne peut
   atteindre la page d'accueil, qui n'utilise aucun de ces sélecteurs.
   Vérifiable d'un grep : `grep -c 'fr-' index.html` doit rester à 0. */

/* --- Hero ---------------------------------------------------------------
   Reprend `.hero` à l'identique. Seul le point focal change : la photo montre
   la coach à gauche et l'adhérente à droite, un cadrage centré garde les deux
   visages, là où le hero d'accueil décale à 85 % pour isoler un sujet. */
.fr-hero .hero__media img { object-position: 50% 30%; }
@media (min-width: 700px) {
  .fr-hero .hero__media img { object-position: 50% 32%; }
}

/* Sur l'accueil, les colonnes 1 à 4 du hero portent la carte de note 4,9/5 et
   le texte commence donc en colonne 5. Cette page n'a pas de carte : sans cette
   règle, le titre resterait décalé d'un tiers d'écran avec un vide à sa gauche.
   Les deux blocs repartent de la marge et occupent 9 colonnes sur 12 — le chapô
   reste bridé à 34rem par `.hero__copy p`, la mesure ne s'allonge pas. */
@media (min-width: 900px) {
  .fr-hero .hero__intro,
  .fr-hero .hero__actions { grid-column: 1 / span 9; }
}

/* Les trois réassurances sous le CTA (« 2 minutes · Sans engagement · Réponse
   sous 48 h ») reprennent `.hero__proof`. Rien à ajouter sinon un peu d'air :
   elles suivent un bouton et non un paragraphe. */
.fr-hero__proof { margin-top: .25rem; }

/* --- Repères clés (bandeau) ---------------------------------------------
   Bande resserrée : quatre chiffres ne réclament pas le rythme d'une section
   pleine, et le bandeau doit se lire d'un coup d'œil juste sous le hero. */
.fr-figures-band { padding-block: clamp(1.5rem, 1.1rem + 2vw, 2.5rem); }

.fr-figures {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px) {
  .fr-figures { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}

.fr-figure {
  display: grid;
  justify-items: start;
  gap: .3125rem;
  padding: clamp(1rem, .85rem + .7vw, 1.375rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  /* Le liseré Navy en tête signale un repère chiffré et non une carte de
     contenu. Même geste que le liseré du quiz sur l'accueil. */
  box-shadow: inset 0 1px 0 var(--navy), var(--shadow-xs);   /* 3px → 1px */
}
.fr-figure__icon {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  margin-bottom: .375rem;
  border-radius: 50%;
  background: var(--accent-softer);
  color: var(--navy);
}
.fr-figure__value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--navy-deep);
}
.fr-figure__label {
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--muted);
}
/* Ligne complémentaire du premier repère : « et 4 prochaines ouvertures ».
   Volontairement DISTINCTE du chiffre et du libellé, en plus petit et derrière
   un filet : ce qui est à venir ne doit jamais se lire comme ce qui est ouvert.
   Ne pas fusionner les deux en un total. */
.fr-figure__extra {
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--line-soft);
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--muted);
}

/* --- Mention légale sous les chiffres ------------------------------------
   Le client exige cette mention à proximité de TOUT affichage de chiffres.
   Discrète mais lisible : 6,2:1 sur fond clair, jamais en dessous de 13px.
   Ne pas la réduire davantage — c'est une mention de non-garantie. */
.fr-disclaimer {
  max-width: 52rem;
  margin-top: clamp(1rem, .85rem + .7vw, 1.375rem);
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--muted);
}
.fr-disclaimer--dark { color: var(--on-dark-muted); }

/* --- Six cartes d'accompagnement ----------------------------------------
   2 colonnes en tablette, 3 en desktop : six entrées se répartissent sans
   rangée orpheline dans les deux cas (6 = 2×3 = 3×2). */
.fr-cards { display: grid; gap: 1rem; }
@media (min-width: 640px)  { .fr-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .fr-cards { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

.fr-card {
  padding: clamp(1.25rem, 1.05rem + .9vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.fr-card__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-bottom: .875rem;
  border-radius: 50%;
  background: var(--accent-softer);
  color: var(--navy);
}
.fr-card h3 { font-size: 1.0625rem; }
.fr-card p {
  margin-top: .5rem;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--muted);
}

/* --- Trois profils ------------------------------------------------------
   Pas de carte ni d'ombre : des filets, comme `.pillars` sur l'accueil. Ces
   trois blocs sont du texte éditorial, pas des objets à cliquer. */
.fr-profiles { display: grid; gap: 0; }
.fr-profile {
  padding-block: clamp(1.25rem, 1rem + .9vw, 1.75rem);
  border-top: 1px solid var(--line);
}
.fr-profile h3 { font-size: 1.125rem; color: var(--navy-deep); }
.fr-profile p {
  margin-top: .5rem;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--muted);
  max-width: 34rem;
}
@media (min-width: 900px) {
  .fr-profiles {
    --fr-gut: clamp(1.5rem, .8rem + 2.2vw, 2.75rem);
    grid-template-columns: repeat(3, 1fr);
  }
  .fr-profile { padding-inline: var(--fr-gut); }
  .fr-profile:first-child { padding-left: 0; }
  .fr-profile:last-child  { padding-right: 0; }
  .fr-profile + .fr-profile { border-left: 1px solid var(--line); }
  .fr-profile p { max-width: none; }
}

/* --- Mentions de tempérance ---------------------------------------------
   « Aucun profil ne garantit la réussite… » et « Délai moyen constaté… ».
   Filet au-dessus : elles commentent ce qui précède, elles n'introduisent pas
   ce qui suit. */
.fr-note {
  max-width: 46rem;
  margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  padding-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--muted);
}
.fr-note--tight { margin-top: clamp(1rem, .85rem + .7vw, 1.375rem); }

/* Cinq étapes et non quatre. `.steps` passe en grille 2 × 2 au-delà de 768px,
   ce qui convient à un nombre pair : à cinq, la dernière étape se retrouvait
   seule sur sa rangée avec la moitié droite vide. On revient donc à la file
   verticale — celle du rendu mobile du composant — qui se lit d'ailleurs mieux
   comme une chronologie. Les filets horizontaux continuent de séparer les
   étapes ; seuls les retraits et la bordure gauche des rangs pairs, prévus pour
   deux colonnes, sont neutralisés. */
.fr-steps { max-width: 44rem; }
@media (min-width: 768px) {
  .fr-steps { grid-template-columns: 1fr; }
  .fr-steps > li:nth-child(odd)  { padding-right: 0; }
  .fr-steps > li:nth-child(even) { padding-left: 0; border-left: 0; }
}

/* --- Repères économiques (section sombre) -------------------------------- */
.fr-econ {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) {
  .fr-econ { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}
.fr-econ__item {
  display: grid;
  gap: .375rem;
  padding-top: 1.125rem;
  border-top: 1px solid var(--on-dark-line);
}
.fr-econ__value {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--on-dark);
}
.fr-econ__label {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--on-dark-muted);
}

/* --- Vidéo (section 7 bis, 7 août 2026) ----------------------------------
   Le cadre, la façade, le voile et la pastille de lecture sont ceux des
   témoignages vidéo de l'accueil (section 11, `.video-card__*`) : rien n'est
   redéfini ici, on ne fait que poser le composant dans une largeur éditoriale.
   Une seule règle nouvelle, le modificateur de format.

   `--wide` ne change QUE l'aspect-ratio. Les cartes de l'accueil sont des
   Shorts en 9/16, cette vidéo est en 16/9 : sans ce modificateur, le cadre
   resterait vertical et la vignette serait recadrée par `object-fit: cover`,
   c'est-à-dire amputée de ses deux tiers horizontaux. */
.video-card__frame--wide { aspect-ratio: 16 / 9; }

/* Largeur bornée à 60rem, et non pleine `.wrap` (72rem) : au-delà, un 16/9
   devient si haut qu'il chasse le titre hors de l'écran sur un portable en
   paysage. La borne vaut aussi hauteur maximale — c'est l'aspect-ratio qui la
   déduit.

   ALIGNÉ À GAUCHE, PAS CENTRÉ. Centré (`margin-inline: auto`), le cadre partait
   96px à droite du titre au-dessus de lui : deux bords gauches presque alignés
   mais pas tout à fait, ce qui se lit comme un défaut et non comme un parti.
   Toutes les autres sections de la page — piliers, cartes, profils, chiffres,
   citations — calent leur contenu sur le bord gauche du `.section-head`. */
.fr-video__figure {
  margin: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem) 0 0;
  max-width: 60rem;
}

/* Focus clavier — `outline-offset` NÉGATIF, et c'est le point important. La
   façade est un bouton en `inset: 0` dans un cadre en `overflow: hidden` :
   l'anneau commun du site (offset +3px) se dessinerait hors du cadre, donc
   rogné, donc invisible. En le rentrant de 3px il tombe à l'intérieur.
   Bleu clair et non Navy : l'anneau se superpose à une vignette sombre et au
   voile de lisibilité, même choix que `.videorow:focus-visible` à l'accueil. */
.fr-video__figure .video-card__play:focus-visible {
  outline: 3px solid var(--on-dark-accent);
  outline-offset: -3px;
  border-radius: 0;
}

/* --- Témoignages de franchisés ------------------------------------------
   Registre sobre, volontairement éloigné du bloc d'avis clients de l'accueil :
   pas d'étoile, pas de note, pas de portrait. Un franchisé n'est pas un avis
   Google — ce qui compte est ce qu'il dit, pas une évaluation.

   Deux colonnes au maximum, jamais trois : à trois, les cartes deviennent des
   pavés étroits et les citations se hachent. Une troisième carte (Hervé, en
   attente) viendra sur une deuxième rangée. */
.fr-quotes { display: grid; gap: 1.25rem; }
@media (min-width: 820px) { .fr-quotes { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }

.fr-quote {
  display: flex;
  flex-direction: column;
  padding: clamp(1.375rem, 1.15rem + 1vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

/* Guillemet ouvrant en filigrane : il signale une parole rapportée sans
   ajouter d'icône. `aria-hidden` implicite — c'est un pseudo-élément, il n'est
   pas restitué par les lecteurs d'écran, et <blockquote> porte déjà le sens. */
.fr-quote__text { margin: 0; position: relative; }
.fr-quote__text::before {
  content: "«";
  display: block;
  margin-bottom: .25rem;
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: .8;
  color: var(--accent-soft);
}
.fr-quote__text p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--anthracite);
}

/* L'attribution est poussée en pied de carte : à hauteurs de citation
   inégales, les noms restent alignés d'une carte à l'autre. */
.fr-quote__who {
  margin-top: auto;
  padding-top: 1.125rem;
  display: grid;
  gap: .125rem;
}
.fr-quote__who strong {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--navy-deep);
}
.fr-quote__who span {
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--muted);
}

/* --- Formulaire ---------------------------------------------------------
   Reprend `.form`, `.form__grid`, `.form__row` et `.field` de l'accueil : mêmes
   champs, mêmes hauteurs, même focus. Seuls les groupes, le consentement et les
   messages sont propres à cette page. */
.fr-form { max-width: 46rem; }

/* Les deux groupes sont matérialisés par un intitulé et un filet, pas par une
   bordure de <fieldset> : le navigateur en dessine une par défaut, qui jure
   avec la carte blanche. */
.fr-fieldset { border: 0; padding: 0; margin: 0; }
.fr-fieldset + .fr-fieldset { margin-top: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.fr-legend {
  padding: 0;
  margin-bottom: .875rem;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
}

/* Précision sous les champs de cadrage : « ces réponses ne déterminent pas
   automatiquement l'éligibilité ». Ton de note, jamais de gris trop pâle — elle
   désamorce une inquiétude, il faut qu'elle se lise (6,7:1 sur blanc). */
.fr-fieldnote {
  margin-top: .25rem;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--muted);
}

.fr-consent { display: flex; gap: .625rem; margin-top: 1.5rem; }
.fr-consent input {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--navy);
}
.fr-consent label {
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--muted);
}
/* Champ en erreur : filet plus soutenu, jamais de rouge vif — la charte n'en
   comporte pas. L'erreur est portée par le message, pas par la couleur seule. */
.fr-form [aria-invalid="true"] { border-color: var(--error-line); }
.fr-consent input[aria-invalid="true"] { outline: 2px solid var(--error-line); outline-offset: 2px; }

/* Lien vers la politique de confidentialité dans le consentement franchise.
   C'était un <span> inactif tant que la page n'existait pas ; c'est un vrai <a>
   depuis la création de /confidentialite/. Nom de classe conservé tel quel. */
.fr-todo-link {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.fr-actions { margin-top: 1.5rem; }
.fr-form__note {
  margin-top: .875rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--muted);
}
.fr-form__error {
  margin-top: 1rem;
  padding: .875rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--error-surface);
  border: 1px solid var(--error-line-soft);
  color: var(--error-ink);
  font-size: var(--fs-sm);
}
.fr-form__error[hidden] { display: none; }

/* ========================================================================
   20. PASSE FORME — LOT 1 (5 août 2026)
   Hero · fond de #difference · méthode en parcours Navy.

   Chantier de FORME uniquement : aucun texte, aucune donnée, aucune URL, aucun
   comportement n'est modifié. Tous les ajouts sont préfixés `fx-` ou portés par
   des modificateurs (`--navy`, `--path`, `--pills`) qui peuvent être retirés du
   balisage pour revenir à l'état antérieur, les styles de base restant intacts.

   Aucune couleur ni police nouvelle : tout vient de la palette existante.
   ======================================================================== */

/* --- 20.1 Aplat Navy pleine largeur --------------------------------------
   Troisième traitement sombre du site, après `.section--immersive` (Navy, sans
   halo) et `.on-dark` (anthracite + halo de #bilan). Celui-ci est le Navy franc,
   sans effet, destiné aux sections de contenu. */
.section--navy {
  background: var(--navy);
  padding-block: var(--sp-section-dark);
}
.section--navy h2,
.section--navy h3 { color: var(--on-dark); }
.section--navy .section-head p,
.section--navy p { color: var(--on-dark-muted); }
.section--navy .eyebrow { color: var(--on-dark-accent); }
.section--navy .eyebrow::before { background: var(--on-dark-accent); }
.section--navy :focus-visible { outline-color: var(--on-dark-accent); }

/* --- 20.2 Hero -----------------------------------------------------------
   Hiérarchie renforcée sans toucher au balisage ni aux textes : le titre gagne
   en corps et perd en interlignage, le chapô se distingue plus nettement.

   Le plafond du h1 passe de 3.5 à 4rem et l'interlignage de 1.14 à 1.04. À
   corps égal, c'est l'interlignage qui fait le plus pour la présence d'un titre
   de trois lignes : 1.14 le faisait flotter. */
.hero h1 {
  font-size: clamp(2.125rem, 1.55rem + 2.55vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
/* Le chapô s'éloigne du titre et se resserre en mesure : le contraste de corps
   entre les deux devient franc au lieu d'être progressif. */
.hero .lead {
  max-width: 32rem;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height: 1.6;
}

/* Réassurances en pastilles. Elles cessent d'être une ligne de texte gris pour
   devenir trois objets — c'est ce qui les fait lire comme des garanties et non
   comme une légende. La coche passe au Navy sur pastille bleutée. */
.hero__proof--pills {
  gap: .5rem;
  margin-top: .25rem;
}
.hero__proof--pills li {
  gap: .5rem;
  padding: .4375rem .8125rem .4375rem .625rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: .8125rem;
  color: var(--anthracite);
  box-shadow: var(--shadow-xs);
}
.hero__proof--pills svg {
  color: var(--navy);
  padding: 2px;
  box-sizing: content-box;
  border-radius: 50%;
  background: var(--accent-softer);
}

/* --- 20.3 Section #difference sur blanc ----------------------------------
   La carte du quiz était posée sur le gris de page : deux valeurs trop proches,
   la carte flottait. Sur blanc, son ombre et son liseré Navy portent. */
.section--qualify { background: var(--surface); }

/* --- 20.4 Méthode en parcours -------------------------------------------- */

/* Sur l'aplat Navy, les jetons clairs de `.steps` sont réaccordés. */
.section--navy .steps__badge {
  border-color: var(--on-dark-line);
  background: rgba(255, 255, 255, .07);
  color: var(--on-dark-accent);
}
.section--navy .steps__line { background: var(--on-dark-line); }
.section--navy .steps__num { color: var(--on-dark-accent); }
.section--navy .steps__body p { color: var(--on-dark-muted); }

/* File verticale unique. `.steps` passe en grille 2 × 2 au-delà de 768px : à
   quatre étapes ce n'est pas une progression, c'est un tableau. On revient à la
   colonne, et le filet conducteur — masqué en grille — redevient visible d'un
   bout à l'autre du parcours. */
@media (min-width: 768px) {
  .method--path .steps {
    display: block;
    max-width: 38rem;
  }
  .method--path .steps > li {
    display: flex;
    padding-block: 0;
    border-top: 0;
  }
  .method--path .steps > li:nth-child(odd)  { padding-right: 0; }
  .method--path .steps > li:nth-child(even) { padding-left: 0; border-left: 0; }
  .method--path .steps__line { display: block; }
  .method--path .steps > li:last-child .steps__line { display: none; }
  .method--path .steps__body { padding-bottom: 2.75rem; }
  .method--path .steps > li:last-child .steps__body { padding-bottom: 0; }
}

/* Numéral fantôme derrière chaque étape. C'est le « chiffre comme objet
   graphique » : il ne remplace pas le libellé « Étape 01 », qui reste le texte
   validé et le seul restitué — un pseudo-élément décoratif ne l'est pas.
   Opacité très basse : il doit se sentir, pas se lire. */
@media (min-width: 1000px) {
  .method--path .steps { counter-reset: fx-step; }
  .method--path .steps > li {
    position: relative;
    counter-increment: fx-step;
  }
  .method--path .steps > li::before {
    content: counter(fx-step, decimal-leading-zero);
    position: absolute;
    /* Lot 3 : 0 → -1.75rem. Mesuré à 1440px, le chiffre touchait la fin des
       lignes (0 à 1px) ; il se décale dans les 166px libres avant la photo. */
    right: -1.75rem;
    top: -.75rem;
    z-index: 0;
    font-family: var(--font-display);
    font-size: 6.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
    color: rgba(143, 180, 245, .11);
    pointer-events: none;
  }
  /* Le numéral occupe un COULOIR RÉSERVÉ à droite : le texte est borné à 27rem
     dans une colonne de 38rem, les 11rem restantes lui appartiennent. Sans
     cette borne, le chiffre passait sur les dernières lettres de chaque ligne —
     un chiffre en filigrane doit rester derrière du vide, jamais derrière du
     texte, sinon il se lit comme une tache. */
  .method--path .steps__body { position: relative; z-index: 1; max-width: 27rem; }
}

/* Deux colonnes à partir de 1000px : le parcours à gauche, la photo à droite.
   En dessous, la photo disparaît — elle prendrait la place des étapes. */
.method--path .method__aside { display: none; }

@media (min-width: 1000px) {
  .method--path {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(17rem, 30%, 22rem);
    gap: clamp(2rem, 3vw, 3.5rem);
    align-items: start;
  }
  /* `margin: 0` explicite : le navigateur applique 1em/40px par défaut à
     <figure>, ce qui amputait la colonne de 80px — la photo tombait à 251px
     dans une colonne de 331. */
  .method--path .method__aside {
    display: block;
    margin: 0;
    position: sticky;
    top: 6.5rem;
    background: var(--navy-deep);
  }
  /* Ratio NATUREL du fichier (600 × 900) : aucun recadrage, donc aucun risque
     de couper la coach ou l'adhérente. La photo y gagne aussi en hauteur, ce
     qui lui donne la présence qui manquait à une vignette carrée. */
  .method--path .method__aside img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* ========================================================================
   21. PASSE FORME — LOT 2 (5 août 2026)
   Bilan · coachs · avis · studios. Forme uniquement.
   ======================================================================== */

/* --- 21.1 Composition texte + visuel (#inclus) ---------------------------
   Deux colonnes : le contenu à gauche, la photo à droite. En dessous de
   1000px, retour à la pile — mais la photo passe EN PREMIER (`order`), parce
   qu'en mobile c'est elle qui doit accrocher avant le pavé d'étapes. */
.fx-split { display: grid; gap: 2rem; }
.fx-split__aside { order: -1; }

@media (min-width: 1000px) {
  .fx-split {
    grid-template-columns: minmax(0, 1fr) clamp(20rem, 36%, 26rem);
    gap: clamp(2.5rem, 4vw, 4.5rem);
    align-items: start;
  }
  .fx-split__aside { order: 0; position: relative; }
}

.fx-split__media { margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
.fx-split__media img { width: 100%; height: auto; display: block; }
.fx-split__cta { margin-top: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }

/* Le repère posé en chevauchement sur la photo. Carte blanche pleine et non
   voile translucide : sur une photo, un fond semi-transparent rend le contraste
   du texte dépendant du sujet, donc invérifiable. */
@media (min-width: 1000px) {
  .fx-overlap {
    position: absolute;
    left: -1.5rem;
    right: 1.5rem;
    bottom: -1rem;
    margin: 0;
    padding: .875rem 1.125rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    text-align: center;
  }
}

/* Les trois étapes du bilan en file verticale. `.pillars` passe en trois
   colonnes à 900px : dans une colonne de gauche, elles n'ont plus la place. */
@media (min-width: 900px) {
  .pillars--file { grid-template-columns: 1fr; }
  .pillars--file .pillar {
    flex-direction: row;
    gap: 1rem;
    padding-inline: 0;
    border-left: 0;
  }
  .pillars--file .pillar:first-child { padding-left: 0; }
  .pillars--file .pillar:last-child  { padding-right: 0; }
  .pillars--file .pillar + .pillar   { border-left: 0; }
  .pillars--file .pillar__body p { max-width: 34rem; }
}

/* --- 21.2 Grille des coachs ---------------------------------------------
   Gouttière élargie, puis décalage d'un demi-pas de la seconde rangée. Le
   décalage n'existe qu'en grille de 6 colonnes, là où les douze cartes forment
   deux rangées pleines : à 2 ou 3 colonnes il créerait des trous. */
@media (min-width: 1120px) {
  .coaches--offset { gap: 1.25rem; }
  .coaches--offset .coach:nth-child(n+7) { margin-top: 2.25rem; }
}

/* --- 21.3 Avis en deux colonnes ------------------------------------------
   Le titre à gauche, collant, les trois avis empilés à droite. Trois avis
   côte à côte donnaient trois colonnes de texte étroites et hachées ; empilés,
   chacun retrouve une mesure lisible. */
.fx-aside-split { display: grid; gap: 1.5rem; }

@media (min-width: 900px) {
  .fx-aside-split {
    grid-template-columns: clamp(15rem, 30%, 20rem) minmax(0, 1fr);
    gap: clamp(2.5rem, 4vw, 4rem);
    align-items: start;
  }
  .fx-aside-split__head {
    position: sticky;
    top: 6.5rem;
    margin-bottom: 0;
  }
  .reviews--stack { grid-template-columns: 1fr; }
  /* Les filets verticaux qui séparaient les trois colonnes deviennent
     horizontaux. Attention : ces filets ne sont PAS des bordures mais un
     pseudo-élément `::before` posé dans la gouttière — le neutraliser demande
     `display: none`, une remise à zéro de `border-left` n'a aucun effet. */
  .reviews--stack .review { padding-inline: 0; }
  .reviews--stack .review + .review::before { display: none; }
  .reviews--stack .review + .review {
    margin-top: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
    padding-top: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
    border-top: 1px solid var(--line);
  }
  .reviews--stack blockquote { max-width: 44rem; }
}

/* --- 21.4 Studios : chiffre-preuve et bandeau photo ---------------------- */

.fx-studios-head { display: grid; gap: 1.5rem; }
@media (min-width: 860px) {
  .fx-studios-head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2.5rem;
    align-items: end;
  }
  .fx-studios-head .section-head { margin-bottom: 0; }
}

/* Chiffre traité comme un objet graphique, adossé à un filet vertical plutôt
   qu'enfermé dans une carte : la section en compte déjà quatorze. */
.fx-count {
  display: grid;
  gap: .125rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--navy);   /* 3px → 1px, Lot 2 */
}
.fx-count__value {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 2rem + 2.2vw, 3.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--navy-deep);
}
.fx-count__label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--anthracite);
}
/* Ligne des ouvertures à venir, nettement détachée : ce qui est prévu ne doit
   jamais se lire comme ce qui est ouvert. */
.fx-count__extra {
  margin-top: .3125rem;
  padding-top: .3125rem;
  border-top: 1px solid var(--line);
  font-size: .8125rem;
  color: var(--muted);
}

/* Bandeau photo entre l'introduction et la grille. Format large et hauteur
   bornée : c'est une respiration, pas un second hero. */
.fx-band {
  margin: 0 0 clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}
.fx-band img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 7;
  max-height: 300px;
  object-fit: cover;
  object-position: center 55%;
}
@media (max-width: 699px) {
  .fx-band img { aspect-ratio: 3 / 2; max-height: 200px; }
}

/* --- 21.5 Cartes studio : hiérarchie ------------------------------------
   La ville prend le pas sur la note. Elle était au même corps que le reste de
   la carte ; c'est pourtant la seule information qu'on y cherche. */
/* La graisse s'applique à toutes les largeurs, le corps seulement en dessous de
   1120px : au-delà, la grille passe à 5 colonnes et une règle documentée plus
   haut (ligne ~1518) ramène le nom à 1.0625rem pour que
   « Boulogne-Billancourt » tienne sur une seule ligne. Cette contrainte est
   mesurée, on ne la contredit pas — c'est donc la graisse, et non le corps, qui
   porte la hiérarchie sur grand écran. */
.studio-card__name { font-size: 1.25rem; font-weight: 600; }
.studio-card__note { margin-top: .375rem; }

/* ========================================================================
   22. PASSE FORME — LOT 3 (5 août 2026)
   FAQ · réservation · présence digitale. Forme uniquement.

   Ont été traités : la séparation et la sortie de la FAQ, la présence du titre
   de la réservation (22.1 et 22.2, 5 août), puis les réassurances en pastilles
   et le sélecteur de studio (22.3) et l'alignement de #digital sur le nouveau
   rythme (22.4).

   RESTE VOLONTAIREMENT HORS LOT : #sur-mesure, qui possède déjà une composition
   à deux colonnes distincte du reste de la page — jugé peu prioritaire, ce
   n'est pas un oubli.

   Aucune URL SimplyBook, aucun paramètre, aucun libellé, aucun comportement
   n'est modifié dans ce lot. Deux modificateurs seulement sont posés dans le
   balisage, `booking-proof--pills` et `sb-studios--lg` : les retirer suffit à
   revenir à l'état antérieur, les styles de base restant intacts.
   ======================================================================== */

/* --- 22.1 FAQ ------------------------------------------------------------
   Séparation plus nette avec la section précédente et sortie vers l'action.
   La FAQ est le dernier moment de doute du parcours : elle doit se détacher
   de ce qui la précède et déboucher sur un bouton. */
#faq .section-head { margin-bottom: clamp(2rem, 1.6rem + 1.8vw, 3rem); }

/* PAS DE `border-top` ICI — corrigé après contrôle visuel. Chaque `details` de
   l'accordéon porte déjà un filet bas, y compris le dernier : c'est lui qui
   ferme la liste. Un second filet sur la sortie donnait DEUX filets identiques
   distants de 44px, et cette bande vide se lisait comme une question de plus,
   restée fermée. Un seul filet, celui de l'accordéon, puis de l'air, puis le
   bouton.

   Les deux espacements sont fusionnés en un seul pour la même raison : marge
   PUIS retrait n'avaient de sens que séparés par le filet disparu ; conservés
   tels quels, ils éloignaient le bouton de 88px du dernier filet. */
.fx-faq-exit {
  max-width: 46rem;          /* même colonne de lecture que `.faq` */
  margin: clamp(2rem, 1.6rem + 1.8vw, 3.25rem) auto 0;
  text-align: center;
}

/* --- 22.2 Réservation ----------------------------------------------------
   Titre et bénéfice plus présents : c'est la conclusion du parcours, elle
   était typographiée comme une section courante. Aucune URL SimplyBook, aucun
   paramètre, aucun sélecteur, aucun callback n'est touché. */
#bilan .section-head h2 {
  font-size: clamp(1.875rem, 1.4rem + 2.1vw, 3rem);
  line-height: 1.06;
}
#bilan .section-head p {
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
}

/* --- 22.3 Réservation : réassurances et sélecteur ------------------------
   Deux points restés ouverts au 5 août au soir. Rien d'autre n'est touché dans
   #bilan : ni l'agenda, ni ses états, ni le filet de secours, ni le bloc de
   rappel. */

/* Les trois réassurances passent de trois lignes de texte à trois objets —
   même intention que les pastilles du hero (20.2), transposée sur fond sombre.

   ARBITRAGE, facile à inverser : la pastille est un VOILE CLAIR (blanc à 6 %)
   et non un aplat blanc franc. Un aplat blanc aurait donné quatre masses
   blanches empilées dans la section — trois pastilles PUIS la carte de
   réservation — et la carte, qui est la destination, aurait cessé d'être le
   point fort. Le voile éclaircit assez pour détacher chaque pastille du fond
   sans disputer la carte. Pour passer à l'aplat franc : `background: var(--surface)`
   ici, puis repasser texte et pictogramme en anthracite / Navy. */
.booking-proof--pills li {
  gap: .75rem;
  align-items: flex-start;
  padding: .875rem 1rem;
  /* Rayon de carte (12px) et non 999px : chaque pastille porte un intitulé fort
     PUIS une phrase, donc deux lignes au moins. Une vraie pilule ne cadre bien
     qu'un texte d'une seule ligne, comme dans le hero. */
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .06);
}
/* Le pictogramme prend un disque, comme dans le hero. `content-box` : le
   remplissage s'ajoute autour du tracé de 19px au lieu de le comprimer. */
.booking-proof--pills svg {
  margin-top: 0;
  padding: 7px;
  box-sizing: content-box;
  border-radius: 50%;
  background: rgba(143, 180, 245, .13);
}
/* Les pastilles portent maintenant leur propre séparation : la gouttière de
   1.5rem, calée quand les trois colonnes n'étaient que du texte, creusait. */
@media (min-width: 860px) {
  .booking-proof--pills { gap: .75rem; }
}

/* Sélecteur de studio agrandi. C'est le premier geste demandé au visiteur dans
   la section de conversion ; il était dimensionné comme un filtre secondaire. */
.sb-studios--lg .sb-studios__label {
  font-size: var(--fs-sm);
  letter-spacing: .06em;
  color: var(--anthracite);
  margin-bottom: .75rem;
}
.sb-studios--lg .sb-studios__grid { gap: .5rem; }
.sb-studios--lg .sb-studios__btn {
  min-height: 48px;              /* 40 → 48 : même gabarit que les boutons du site */
  padding: .5rem 1.125rem;
  font-size: var(--fs-base);
  /* Fond gris de page et non blanc : sur la carte blanche, un bouton blanc
     cerné d'un filet clair ne se lit pas comme un contrôle. Le creux donne au
     repos ce qui rend l'état actif franchement plus lisible par contraste. */
  background: var(--bg);
}
.sb-studios--lg .sb-studios__btn:hover { background: var(--accent-softer); }

/* État actif : l'aplat Navy est conservé, un anneau vient l'entourer. L'anneau
   se lit à distance, là où le seul remplissage demandait de comparer les dix
   pastilles entre elles.

   La graisse et le retrait NE CHANGENT PAS entre repos et sélection : les dix
   boutons sont dans une grille qui passe à la ligne, la moindre variation de
   largeur ferait sauter la mise en page au moment du clic. */
.sb-studios--lg .sb-studios__btn[aria-selected="true"] {
  background: var(--navy);
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(0, 35, 102, .16), var(--shadow-sm);
}

/* --- 22.4 Présence digitale ----------------------------------------------
   Alignement sur le nouveau rythme. Le fond n'a pas à bouger : #digital est le
   douzième et dernier moment de la séquence, beige, juste après l'anthracite
   de #bilan — il est déjà à sa place.

   CE QUI EST TENU INTACT : les contraintes mesurées documentées en 16 bis.
   Les quatre pastilles de « À voir » doivent tenir sur UNE ligne, et la colonne
   des univers ne doit pas dépasser la carte franchise (~260px). Aucun retrait
   horizontal de pastille n'est donc élargi ici — seule la hauteur bouge. */

/* PAS DE MESURE RESSERRÉE SUR LE CHAPÔ, contrairement au hero (32rem) et à
   #bilan (34rem) : celui-ci porte un <br> de composition calé sur les 46rem de
   `.section-head`. Le borner à 34rem faisait passer « réseau : » seul sur une
   ligne, le <br> ajoutant sa coupure par-dessus celle du navigateur — trois
   lignes dont deux très courtes. La règle a été essayée puis retirée.

   Le libellé d'univers prend le filet vertical Navy introduit au lot 2 pour le
   chiffre-preuve des studios (21.4). C'est le même vocabulaire graphique
   repris une seconde fois : le petit texte gris en capitales flottait. */
.digital__label {
  padding-left: .625rem;
  border-left: 1px solid var(--navy);   /* 3px → 1px, Lot 2 */
  color: var(--anthracite);
}
/* Le filet doit épouser la hauteur du texte, donc aucun retrait haut : le
   décalage qui aligne le libellé sur la première pastille — nécessaire
   seulement à partir de 480px, quand libellé et pastilles partagent la ligne —
   est repris par une marge, sinon le filet dépasserait par le haut. */
@media (min-width: 480px) {
  .digital__label { padding-top: 0; margin-top: .625rem; }
}

/* Hauteur de pastille alignée sur les contrôles agrandis de #bilan (22.3) :
   dans le dernier tiers de la page, tout ce qui se clique fait au moins 40px.
   Seule la hauteur augmente — voir la contrainte de largeur ci-dessus. */
.digital__chips a { min-height: 40px; }

/* Le bloc des univers reçoit l'ombre douce des autres cartes posées sur beige
   (carte de réservation, repère en chevauchement du lot 2) et son filet passe
   au ton faible. Les deux colonnes se lisent alors comme deux objets de même
   famille, l'une claire et l'autre Navy, au lieu d'un cadre et d'une carte. */
.digital__panel {
  border-color: var(--line-soft);
  box-shadow: var(--shadow-sm);
}

/* ========================================================================
   23. PAGES LÉGALES (/confidentialite/) — 6 août 2026
   Gabarit de page de texte long. Aucune couleur, aucune police, aucun jeton
   nouveau : tout vient de la palette existante.

   Cette page N'A NI L'EN-TÊTE NI LE PIED DE PAGE du site. Ils sont déjà
   dupliqués entre index.html et franchise/index.html ; en faire une troisième
   copie pour une page de texte aggraverait le problème documenté dans
   README.md. D'où ce bandeau minimal, sur le modèle de la page 404.
   ======================================================================== */

/* Masqué à l'œil, restitué par les lecteurs d'écran (légende de tableau). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Bandeau haut et pied --- */

.legal-top {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.legal-top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
}
.legal-top .brand__logo { height: 36px; width: auto; display: block; }
.legal-top__back {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--navy);
  white-space: nowrap;
}

.legal-foot {
  border-top: 1px solid var(--line);
  padding-block: 1.75rem;
}
.legal-foot .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
}
.legal-foot p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }

/* --- Colonne de lecture ---
   34rem et non les 46rem de `.section-head` : une page de texte long se lit sur
   une mesure plus étroite qu'un chapô de section. Le bloc en attente et le
   tableau débordent volontairement de cette mesure (voir plus bas) — ce sont
   des objets, pas de la prose. */
.legal {
  padding-block: clamp(2.5rem, 2rem + 2.4vw, 4rem);
}
.legal .wrap { max-width: 46rem; }
.legal h1 {
  font-size: clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem);
  line-height: 1.1;
  margin: 0 0 1rem;
}
.legal .lead { max-width: 34rem; }

/* Le filet au-dessus de chaque titre découpe la page en blocs nets : sur une
   politique de confidentialité, le visiteur cherche UNE section, il ne lit pas
   du début à la fin. */
.legal h2 {
  margin-top: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
  margin-bottom: .875rem;
  padding-top: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);
  border-top: 1px solid var(--line);
  font-size: var(--fs-h3);
}
.legal p { max-width: 34rem; margin: 0 0 1rem; }
.legal p:last-child { margin-bottom: 0; }
/* Les intitulés en gras ouvrent un paragraphe (« Ce que nous recueillons. ») :
   ils portent la couleur des titres pour se détacher du texte courant. */
.legal p > strong { color: var(--anthracite); font-weight: 600; }
.legal a { color: var(--blue-ink); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--navy); }

.legal-list {
  max-width: 34rem;
  margin: 0 0 1rem;
  padding-left: 1.125rem;
  list-style: disc;
}
.legal-list li { margin-bottom: .5rem; }
.legal-list li::marker { color: var(--blue); }

/* --- Tableau récapitulatif ---
   `overflow-x` sur l'enveloppe et non sur le tableau : en dessous de ~30rem les
   deux colonnes ne tiennent pas, et un tableau qui déborde de la page vaut
   toujours mieux qu'un tableau qui la fait défiler horizontalement en entier. */
.legal-table {
  max-width: 40rem;
  margin: 0 0 1.5rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.legal-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.legal-table th,
.legal-table td {
  padding: .75rem 1rem;
  text-align: left;
  vertical-align: top;
}
.legal-table thead th {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.legal-table tbody tr + tr th,
.legal-table tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.legal-table tbody th { font-weight: 600; color: var(--anthracite); white-space: nowrap; }

/* Les blocs en attente sortent de la mesure de lecture : ils ne doivent pas se
   fondre dans la prose, c'est tout leur intérêt. */
.legal .ph-block { max-width: 40rem; margin: 1.5rem 0; }
.legal .ph-block p { max-width: none; }

@media (max-width: 599px) {
  .legal-table tbody th { white-space: normal; }
}

/* ========================================================================
   24. LOT 1 — CONVERSION ET RYTHME (18 septembre 2026)
   Hero mobile/tablette, recadrage de la photo du hero, Studios compacts en
   mobile, coachs en carrousel mobile, #inclus en bande, #difference et #faq
   alignés à gauche. Aucune couleur, police ni photo nouvelle ; aucun texte
   modifié hors du titre de #difference validé par le client.
   ======================================================================== */

/* --- 24.1 Hero : promesse et CTA dans le premier écran (< 900px) ---------
   Avant : photo (≈334px à 390) PUIS carte de note, le titre commençait à
   622px et le bouton finissait à 944px, hors écran. La carte de note passe
   désormais SOUS les boutons, en version compacte ; la photo est moins haute.
   Desktop (≥ 900px) inchangé : grille à 12 colonnes, carte à gauche. */
@media (max-width: 899.98px) {
  .hero__body { gap: 1.25rem; }
  .hero__copy { order: 1; }
  .hero__intro, .hero__actions { gap: 1.125rem; }
  .hero__copy { gap: 1.125rem; }

  .hero__rating {
    order: 2;
    justify-self: start;
    width: 100%;
    max-width: 24rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
    align-items: center;
    padding: .875rem 1.125rem;
  }
  .hero__rating-score { grid-column: 1; grid-row: 1 / span 2; margin-top: 0; }
  .hero__rating-value { font-size: 1.875rem; }   /* bas de l'échelle « headline » */
  .hero__rating-stars { grid-column: 2; grid-row: 1; }
  .hero__rating-stars svg { width: 15px; height: 15px; }
  .hero__rating-count { grid-column: 2; grid-row: 2; margin-top: .125rem; font-size: .9375rem; }
  .hero__rating-src { grid-column: 1 / -1; grid-row: 3; margin-top: .75rem; padding-top: .625rem; }
}

/* --- 24.2 Recadrage de la photo du hero ----------------------------------
   Même fichier, seul le cadrage change. Dans la source, le coach est à gauche
   (tête en haut, mains qui tiennent le bras de l'adhérente vers le milieu),
   l'adhérente à droite. L'ancien cadrage mobile (7/6, calé à 85 %) rognait
   tout le coach : on ne voyait qu'une adhérente seule.
   · Mobile : 5/3, calé en haut — la tête du coach, ses mains et l'adhérente
     sont dans le cadre ; la photo perd ~100px de haut.
   · Tablette : 16/9, calé plus haut — tête et mains du coach visibles.
   · Desktop : bandeau étroit (hauteur inchangée), on ne peut pas tout garder.
     28 % → 33 % : la fenêtre descend juste assez pour faire entrer les mains
     qui guident en bas du cadre, sans couper le visage de l'adhérente (testé
     à 40 % : ses cheveux passaient sous la barre de navigation). */
.hero__media img {
  aspect-ratio: 5 / 3;
  object-position: 50% 0%;
}
/* Mobile et tablette : plus de chevauchement sous la barre de navigation —
   elle masquait la tête du coach, tout en haut du cadre. */
@media (max-width: 899.98px) {
  .hero__media { margin-top: 0; }
}
@media (min-width: 700px) {
  .hero__media img { aspect-ratio: 16 / 9; object-position: 50% 12%; }
}
@media (min-width: 900px) {
  .hero__media img { aspect-ratio: 21 / 9; object-position: center 33%; }
}

/* --- 24.3 #difference : titre rétabli, alignement à gauche ---------------
   Fin du centrage local (passe H bis). Mobile et tablette : pile à gauche.
   Desktop : titre et chapô à gauche, carte du test à droite — la largeur est
   occupée sans colonne vide, sur le bord commun de la page. */
#difference .qualify-head { text-align: left; margin-inline: 0; }
#difference .qualify { margin-inline: 0; }
/* Le filet de liaison part du chapô et tombe dans la carte, à l'intérieur de
   son arrondi, au lieu du centre désormais vide. */
#difference .qualify.is-ready::before { margin-inline: 1.75rem 0; }

@media (min-width: 900px) {
  #difference > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(2.5rem, 4vw, 4.5rem);
    align-items: center;
  }
  #difference .qualify-head { max-width: none; margin-bottom: 0; }
  #difference .qualify { max-width: none; }
  #difference .qualify.is-ready::before { display: none; }
}

/* --- 24.4 #inclus : les trois moments du bilan en bande ------------------
   La méthode juste au-dessus est une file verticale d'étapes sur aplat Navy.
   #inclus reprenait la même forme (liste verticale numérotée) : deux parcours
   à la suite. Desktop : titre et photo côte à côte, puis les trois moments en
   bande horizontale pleine largeur, séparés par des filets. Le numéro reste
   dans le texte, simplement passé en bleu. */
.pillar__num { color: var(--blue); }

@media (min-width: 900px) {
  .fx-split--band .pillars--file { grid-template-columns: repeat(3, 1fr); }
  .fx-split--band .pillars--file .pillar {
    flex-direction: column;
    gap: .875rem;
    padding-inline: var(--pillars-gut);
  }
  .fx-split--band .pillars--file .pillar:first-child { padding-left: 0; }
  .fx-split--band .pillars--file .pillar:last-child  { padding-right: 0; }
  .fx-split--band .pillars--file .pillar + .pillar   { border-left: 1px solid var(--line); }
  .fx-split--band .pillars--file .pillar__body p { max-width: none; }
}

@media (min-width: 1000px) {
  .fx-split--band {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: clamp(2.5rem, 1.8rem + 2vw, 3.5rem);
    align-items: center;
  }
  /* Les enfants de la colonne principale deviennent des cellules de la grille. */
  .fx-split--band .fx-split__main { display: contents; }
  .fx-split--band .section-head { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .fx-split--band .fx-split__aside { grid-column: 2; grid-row: 1; }
  .fx-split--band .pillars--file { grid-column: 1 / -1; grid-row: 2; align-self: start; }
  .fx-split--band .fx-split__cta { grid-column: 1 / -1; grid-row: 3; margin-top: 0; }
}

/* --- 24.5 Coachs : carrousel horizontal en mobile (< 700px) --------------
   Avant : 12 cartes sur 2 colonnes, 2 156px de haut à 390. Désormais une
   rangée qui se fait glisser, la carte suivante dépassant du bord pour
   signaler la suite. Même principe que la rangée des témoignages vidéo :
   défilement natif, accroche par carte, aucun JavaScript. Tablette et desktop
   inchangés. */
@media (max-width: 699.98px) {
  .coaches {
    display: flex;
    gap: .875rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1);
    padding: .375rem var(--gutter) 1rem;   /* haut : place pour l'anneau de focus */
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .coaches::-webkit-scrollbar { display: none; }
  .coach { flex: 0 0 min(62%, 15rem); scroll-snap-align: start; }
  /* Cartes hors écran à l'horizontale : l'apparition au défilement vertical ne
     les atteindrait qu'au glissement. Elles sont visibles d'emblée. */
  .coaches [data-reveal] { opacity: 1; transform: none; filter: none; }
}

/* --- 24.6 Studios : liste compacte en mobile (< 640px) -------------------
   Avant : 10 cartes pleine largeur empilées (≈147px chacune), section de
   3 134px à 390. Les dix studios deviennent une liste dans un seul panneau :
   une ligne par studio, nom et note à gauche, « Voir le studio » à droite.
   Même carte, même bouton, même panneau de détail. */
@media (max-width: 639.98px) {
  .studio-grid[data-enhanced="true"] {
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .studio-grid[data-enhanced="true"] .studio-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem;
    align-items: center;
    padding: .75rem 1rem;
    border: 0;
    border-radius: 0;
  }
  .studio-grid[data-enhanced="true"] .studio-card:hover { box-shadow: none; background: var(--accent-softer); }
  .studio-grid[data-enhanced="true"] .studio-card + .studio-card { border-top: 1px solid var(--line-soft); }
  .studio-grid[data-enhanced="true"] .studio-card__name { grid-column: 1; grid-row: 1; font-size: 1.0625rem; }
  .studio-grid[data-enhanced="true"] .studio-card__note { grid-column: 1; grid-row: 2; margin-top: .125rem; font-size: .8125rem; }
  .studio-grid[data-enhanced="true"] .studio-card__trigger {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    padding: 0;
    font-size: .8125rem;
  }

  /* Chiffre-preuve sur une rangée : « 10 » à gauche, libellé et ouvertures à
     venir à droite. Le filet qui sépare l'ouvert du prévu est conservé. */
  .fx-studios-head { gap: 1rem; }
  .fx-count {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: .875rem;
    align-items: center;
  }
  .fx-count__value { grid-row: 1 / span 2; }
  .fx-count__label { align-self: end; }
  .fx-count__extra { align-self: start; margin-top: .25rem; }

  /* Ouvertures prochaines : même information, en rangée à faire glisser comme
     les coachs, au lieu de quatre cartes empilées. */
  .soon { margin-top: 1.75rem; }
  .soon__grid {
    display: flex;
    gap: .75rem;
    margin-top: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) .25rem;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .soon__grid::-webkit-scrollbar { display: none; }
  .soon-card { flex: 0 0 min(80%, 18rem); scroll-snap-align: start; padding: .625rem; gap: .875rem; }
  .soon__grid [data-reveal] { opacity: 1; transform: none; filter: none; }
  .soon-card img { width: 56px; height: 70px; }
  .soon-card h4 { font-size: 1.1875rem; margin-top: .375rem; }   /* bas de l'échelle « title » */
}

/* --- 24.7 FAQ : alignement à gauche --------------------------------------
   Fin du centrage : en-tête et questions calés sur le bord commun. Desktop :
   en-tête collant à gauche, questions à droite, sur le modèle de #avis. */
#faq .faq { margin-inline: 0; }
#faq .fx-faq-exit { margin-inline: 0; text-align: left; }

@media (min-width: 900px) {
  #faq > .wrap {
    display: grid;
    grid-template-columns: clamp(15rem, 30%, 20rem) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 4vw, 4rem);
    align-items: start;
  }
  #faq .section-head {
    grid-column: 1;
    grid-row: 1 / span 2;
    position: sticky;
    top: 6.5rem;
    margin-bottom: 0;
  }
  #faq .faq,
  #faq .fx-faq-exit { grid-column: 2; }
}

/* ========================================================================
   25. LOT 2 — HIÉRARCHIE ET IMPRESSION PREMIUM (18 septembre 2026)
   Avis en citation, coachs en portraits plus grands, attente de la
   réservation resserrée et fond sans vert ni or, « Faire le test » en bouton
   secondaire, rythme des fonds valable avec et sans les témoignages vidéo,
   filets Navy de 3px ramenés à 1px. Aucun texte, aucune photo, aucune
   couleur ni police nouvelle.
   ======================================================================== */

/* --- 25.1 Avis : une grande citation, puis deux avis côte à côte ---------
   Avant : trois avis au même corps (17px), empilés sous un titre collant, la
   meilleure preuve de la page lue comme du texte courant. Le premier avis
   devient la citation de la section ; les deux suivants, plus sobres, se
   partagent la ligne du dessous. */
.reviews--feature .review:first-child blockquote {
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);   /* title → headline */
  line-height: 1.32;
  letter-spacing: -0.012em;
}
.reviews--feature .review:first-child .review__mark {
  font-size: 4rem;
  line-height: .6;
  margin-bottom: .5rem;
}
.reviews--feature .review:first-child figcaption { padding-top: 1.25rem; }

@media (min-width: 700px) {
  .reviews--feature.reviews--stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--reviews-gut);
    border-top: 0;
  }
  .reviews--feature.reviews--stack .review {
    padding-inline: 0;
    margin-top: 0;
    border-top: 0;
  }
  .reviews--feature.reviews--stack .review:first-child {
    grid-column: 1 / -1;
    padding-top: 0;
    padding-bottom: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  }
  .reviews--feature.reviews--stack .review:first-child blockquote { max-width: 40rem; }
  .reviews--feature.reviews--stack .review + .review {
    margin-top: 0;
    padding-top: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
    padding-bottom: 0;
    border-top: 1px solid var(--line);
  }
  /* Filet vertical entre les deux avis du dessous, dans la gouttière. */
  .reviews--feature.reviews--stack .review:nth-child(3)::before {
    display: block;
    content: "";
    position: absolute;
    top: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
    bottom: 0;
    left: calc(-1 * var(--reviews-gut) / 2);
    width: 1px;
    background: var(--line);
  }
  .reviews--feature.reviews--stack .review:nth-child(2)::before { display: none; }
}

/* --- 25.2 Rythme des fonds sans les témoignages vidéo ---------------------
   La section #temoignages (Navy, 7e fond) est exclue de dist/ tant que les
   autorisations manquent. Sans elle, la page perdait son moment sombre du
   milieu. Quand elle est absente, #avis prend l'aplat Navy à sa place : la
   séquence garde trois moments sombres (méthode, avis, réservation). Avec
   les témoignages, rien ne change. */
main:not(:has(#temoignages)) #avis {
  background: var(--navy);
  padding-block: var(--sp-section-dark);
}
main:not(:has(#temoignages)) #avis h2 { color: var(--on-dark); }
main:not(:has(#temoignages)) #avis .eyebrow { color: var(--on-dark-accent); }
main:not(:has(#temoignages)) #avis .eyebrow::before { background: var(--on-dark-accent); }
main:not(:has(#temoignages)) #avis :focus-visible { outline-color: var(--on-dark-accent); }
main:not(:has(#temoignages)) #avis .review blockquote,
main:not(:has(#temoignages)) #avis .review__name { color: var(--on-dark); }
main:not(:has(#temoignages)) #avis .review__meta { color: var(--on-dark-accent); }
main:not(:has(#temoignages)) #avis .review__source { color: var(--on-dark-muted); }
main:not(:has(#temoignages)) #avis .review__mark { color: var(--on-dark-line); }
main:not(:has(#temoignages)) #avis .review,
main:not(:has(#temoignages)) #avis .reviews { border-color: var(--on-dark-line); }
main:not(:has(#temoignages)) #avis .review::before { background: var(--on-dark-line); }

/* --- 25.3 Coachs : rangée horizontale de grands portraits sur desktop ----
   Première version (4 colonnes × 3 rangées) écartée : la section passait à
   1 695px. Sur desktop, les douze coachs forment une rangée qui défile :
   environ quatre cartes et un tiers visibles, la suivante dépasse du bord pour
   signaler la suite. Portraits d'environ 240px de large (168px à l'origine).
   Mobile (carrousel) et tablette (grille de 3) : inchangés. */
/* L'espace sous l'en-tête reprend exactement celui de `.section-head`, qu'il
   remplace : mobile et tablette gardent leur rythme validé. */
.coachrow__top { display: grid; gap: 1.25rem; margin-bottom: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); }
.coachrow__top .section-head { margin-bottom: 0; }
.coachrow__nav { display: none; gap: .625rem; }
.coachrow__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--navy);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
}
.coachrow__btn:hover:not(:disabled) { background: var(--accent-softer); border-color: var(--accent-soft); }
.coachrow__btn:disabled { opacity: .3; cursor: default; box-shadow: none; }

@media (min-width: 1120px) {
  .coachrow__top {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 2rem;
  }
  .coachrow__nav { display: flex; padding-bottom: .25rem; }

  .coaches--row {
    --cgap: 1.25rem;
    display: flex;
    gap: var(--cgap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* 6px de marge intérieure : l'anneau de focus des cartes n'est pas rogné
       par le bord de la rangée ; compensés par une marge négative. */
    padding: 6px;
    margin: -6px;
    scroll-padding-inline: 6px;
  }
  .coaches--row::-webkit-scrollbar { display: none; }
  .coaches--row:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: var(--radius-lg); }
  .coaches--row.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
  .coaches--row.is-dragging .coach { pointer-events: none; }
  .coaches--row .coach {
    flex: 0 0 calc((100% - 4 * var(--cgap)) / 4.3);
    min-width: 0;
    margin-top: 0;
    scroll-snap-align: start;
  }
  .coaches--row [data-reveal] { opacity: 1; transform: none; filter: none; }
  .coaches--row .coach__body { padding: 1rem 1.125rem 1.125rem; padding-right: 2.75rem; }
  .coaches--row .coach__body h3 { font-size: 1.1875rem; }
  .coaches--row .coach__role { font-size: var(--fs-sm); letter-spacing: normal; }
}

/* Chaque carte mène à la réservation avec ce studio présélectionné : une
   flèche Navy apparaît au survol et au focus, sans texte ajouté. */
.coach__body { position: relative; padding-right: 2.75rem; }
.coach__body::after {
  content: "";
  position: absolute;
  right: 1.125rem;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: var(--navy);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.coach:hover .coach__body::after,
.coach:focus-visible .coach__body::after { opacity: 1; transform: none; }

/* --- 25.4 Réservation : attente resserrée, fond sans vert ni or ----------
   Avant le choix d'un studio, 260px presque vides sous le sélecteur. L'état
   d'attente devient un encart court, tireté, qui se lit comme la place de
   l'agenda à venir. Les états chargement et erreur gardent leur hauteur. */
.sb-agenda { min-height: 0; }
.sb-agenda__state[data-sb-invite] {
  min-height: 7.5rem;
  border: 1px dashed var(--accent-soft);
  border-radius: var(--radius);
  background: var(--accent-softer);
  color: var(--body);
}

/* Écart DESIGN.md corrigé : le halo vert et or hérité de la première charte
   devient un halo Navy et Bleu — corrigé à la source (section 16, Lot 3). */

/* --- 25.5 Filets Navy : 3px → 1px ----------------------------------------
   Corrigé à la source, dans les règles d'origine (`.fx-count`,
   `.digital__label`, `.quiz::before`) : même rôle graphique, même position,
   trait fin. */

/* ---------- 19. Impression ---------------------------------------------- */

@media print {
  .site-header, .drawer, .on-dark__bg { display: none; }
  body { background: #fff; }
}