/* ═══════════════════════════════════════════════════════════════════════════
   SUB Athletes — landing
   ───────────────────────────────────────────────────────────────────────────
   Langage visuel : instrument de mesure. Neutres graphite froids, un seul
   signal terracotta, chiffres en mono. Angles courts, pas de cartes molles.

   Dials : DESIGN_VARIANCE 7 · MOTION_INTENSITY 5 · VISUAL_DENSITY 5

   Trois règles verrouillées sur toute la page :
     • Un seul thème à la fois. Aucune section ne s'inverse en cours de route.
       Le hero et le CTA final portent une photo : ils sont sombres dans les
       deux thèmes, et c'est la seule exception, assumée et documentée.
     • Un seul accent : --accent. Il porte l'état et l'intensité (charge
       élevée, semaine chargée), jamais la décoration.
       Une seule exception, et c'est de la donnée, pas du style : les cinq
       couleurs de discipline (--d-*). Elles viennent de l'application, où
       elles ont déjà un sens pour l'athlète, et ne servent qu'à identifier
       une discipline. Aucune autre couleur n'entre sur la page.
     • Un seul rayon : 4px, 6px sur les grandes surfaces. Le rayon plein
       (--r-full) est réservé aux objets réellement circulaires (pastilles
       d'initiales). Rien n'est en gélule.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Polices : self-hébergées ─────────────────────────────────────────────
   Archivo (Omnibus-Type) et Geist Mono (Vercel), toutes deux sous SIL OFL.
   Variables sur l'axe de graisse, Archivo aussi sur l'axe de chasse : les
   titres s'élargissent sans changer de famille.
   Servies depuis le domaine : pas de requête vers fonts.gstatic.com.
   ────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/geistmono-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: "Geist Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/geistmono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ─── Thème clair (défaut) ─────────────────────────────────────────────────
   Contrastes vérifiés au calcul et à la mesure sur la page rendue, pas à
   l'œil. Les 227 nœuds de texte de la page passent WCAG AA dans les deux
   thèmes ; le plus juste garde une marge d'un demi-point.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --bg: #e8eaec;
  --surface: #f7f8f9;
  --surface-2: #f0f2f3;
  --surface-3: #e3e6e8;

  /* Quatre niveaux de texte, tous au-dessus de 4,5:1 sur la plus claire des
     surfaces, plus un niveau de décor qui ne porte jamais de texte. Une
     échelle où le niveau le plus discret ne serait qu'en AA-large ne sert à
     rien : c'est précisément là qu'on met les petits libellés. */
  --ink: #15191c; /* 14,66:1 */
  --ink-2: rgba(21, 25, 28, 0.78); /* 7,3:1  */
  --ink-3: rgba(21, 25, 28, 0.7); /*  5,96:1 */
  --ink-4: rgba(21, 25, 28, 0.65); /* 5,0:1  — plancher AA, petits libellés */
  --ink-5: rgba(21, 25, 28, 0.4); /*  décor seul : filets, tirets, séparateurs */

  --line: rgba(21, 25, 28, 0.13);
  --line-soft: rgba(21, 25, 28, 0.07);
  --line-strong: rgba(21, 25, 28, 0.26);

  /* Signal unique. 4,76:1 au pire sur --bg : lisible en texte, pas seulement
     en aplat. Sert la charge, l'intensité, l'état — jamais la décoration. */
  --accent: #a8492c;
  --accent-ink: #ffffff; /* 5,75:1 sur l'accent */
  /* 0,06 et pas plus : au-delà, le texte accent posé dessus passe sous AA. */
  --accent-wash: rgba(168, 73, 44, 0.06);

  /* ─── Couleurs de discipline ───────────────────────────────────────────
     Reprises de l'application, où l'athlète les connaît déjà : le vert du Run,
     le rouge de la Musculation et le violet des Ergomètres viennent de
     src/components/SportsLineChart.jsx, le jaune du Hyrox et l'orange du
     Conditioning de src/pages/Hyrox.jsx.

     Les teintes de l'app ont été choisies pour une interface sombre : posées
     telles quelles sur une surface claire, le vert tombait à 1,7:1. On garde
     donc la teinte exacte et on redescend la luminosité pour le thème clair.

     Les cinq passent AA (4,62:1 au pire) : elles peuvent colorer le libellé
     de la séance, pas seulement un filet. Et la couleur n'est jamais seule à
     porter l'information — chaque carte affiche aussi le nom de sa
     discipline en toutes lettres. */
  --d-run: #1a7d3e; /* 4,62:1 — app #4ade80 */
  --d-muscu: #a92d3f; /* 5,97:1 — app #fb7185 */
  --d-hyrox: #70650c; /* 5,26:1 — app #e8cf13 */
  --d-ergo: #563aa6; /* 7,33:1 — app #a78bfa */
  --d-cond: #a54f12; /* 5,02:1 — app #f97316 */

  --btn-fg: #f7f8f9;
  --btn-bg: #15191c;

  --shadow: 0 1px 2px rgba(21, 25, 28, 0.05);
  --shadow-lift: 0 10px 30px -18px rgba(21, 25, 28, 0.45);

  color-scheme: light;

  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1280px;
  --gutter: 24px;

  --r: 4px;
  --r-lg: 6px;
  --r-full: 999px; /* objets réellement circulaires uniquement */

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.42s;
}

/* ─── Thème sombre ─────────────────────────────────────────────────────────
   Choix explicite du visiteur, mémorisé. Le clair reste le défaut.
   Sur fond sombre le plancher AA tient à 0,60 d'opacité (5,9:1 au pire).
   ────────────────────────────────────────────────────────────────────────── */

:root[data-theme="dark"] {
  --bg: #0c0e10;
  --surface: #14181a;
  --surface-2: #1a1f22;
  --surface-3: #232a2d;

  --ink: #eef1f2; /* 14,65:1 */
  --ink-2: rgba(238, 241, 242, 0.8); /*  9,8:1  */
  --ink-3: rgba(238, 241, 242, 0.7); /*  7,8:1  */
  --ink-4: rgba(238, 241, 242, 0.6); /*  5,9:1 — plancher AA */
  --ink-5: rgba(238, 241, 242, 0.4); /*  décor seul */

  --line: rgba(238, 241, 242, 0.13);
  --line-soft: rgba(238, 241, 242, 0.07);
  --line-strong: rgba(238, 241, 242, 0.26);

  /* L'accent remonte en clarté pour tenir sur fond noir : 6,34:1 au pire.
     C'est le même signal, pas une seconde couleur. */
  --accent: #e08a68;
  --accent-ink: #0c0e10; /* 7,37:1 sur l'accent */
  --accent-wash: rgba(224, 138, 104, 0.12);

  /* En thème sombre on retrouve les teintes de l'application, à peine
     adoucies : c'est le terrain pour lequel elles ont été dessinées. */
  --d-run: #66d68f; /* 9,17:1 */
  --d-muscu: #f47184; /* 5,97:1 */
  --d-hyrox: #e4d144; /* 10,69:1 */
  --d-ergo: #a689fa; /* 6,00:1 */
  --d-cond: #f3893f; /* 6,70:1 */

  --btn-fg: #0c0e10;
  --btn-bg: #eef1f2;

  --shadow: none;
  --shadow-lift: 0 10px 30px -18px rgba(0, 0, 0, 0.8);

  color-scheme: dark;
}

/* Les deux sections qui portent une photo restent sombres dans les deux
   thèmes : du texte clair sur une image assombrie, c'est le seul réglage
   lisible. Elles redéfinissent leurs jetons localement plutôt que de peindre
   des couleurs en dur, pour que tout le reste de la feuille continue de
   marcher à l'identique à l'intérieur. */
.hero,
.final {
  --surface: rgba(255, 255, 255, 0.05);
  --surface-2: rgba(255, 255, 255, 0.08);
  --surface-3: rgba(255, 255, 255, 0.12);
  --ink: #ffffff;
  --ink-2: rgba(255, 255, 255, 0.82); /* 11,7:1 sur #0d0f10 */
  --ink-3: rgba(255, 255, 255, 0.72);
  --ink-4: rgba(255, 255, 255, 0.62);
  --ink-5: rgba(255, 255, 255, 0.42);
  --line: rgba(255, 255, 255, 0.16);
  --line-soft: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.3);
  --accent: #e08a68;
  --accent-ink: #0c0e10;
  --accent-wash: rgba(224, 138, 104, 0.14);
  --btn-fg: #0c0e10;
  --btn-bg: #ffffff;
  color-scheme: dark;
}

/* ═══ Base ══════════════════════════════════════════════════════════════ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

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

p {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--r);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  transition: top 0.2s var(--ease);
}

.skip-link:focus-visible {
  top: 16px;
}

/* ═══ Typographie ═══════════════════════════════════════════════════════
   Archivo porte tout. La hiérarchie se fait à la chasse et à la graisse,
   pas au corps seul : les titres s'élargissent (wdth 112) et se resserrent
   en interlettrage, le texte courant reste à chasse normale.
   ═══════════════════════════════════════════════════════════════════════ */

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.6rem);
  line-height: 0.98;
  font-variation-settings: "wdth" 112;
  letter-spacing: -0.038em;
}

h2 {
  font-size: clamp(1.95rem, 3.6vw, 3.1rem);
  line-height: 1.04;
  font-variation-settings: "wdth" 108;
  letter-spacing: -0.032em;
}

h3 {
  font-size: 1.16rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.014em;
}

h4 {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.008em;
}

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 52ch;
}

.body {
  color: var(--ink-3);
  max-width: 65ch;
}

/* Chiffres en mono, chasse fixe : dans un tableau de charge, des colonnes
   qui dansent au changement de valeur sont illisibles. */
.num,
.k-value,
.stat-v,
.price-value,
.rowline b,
.scard-meta,
.panel-stat {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Le seul micro-label en capitales de la feuille. Le §4.7 du skill plafonne
   ces eyebrows à un pour trois sections : la page en compte trois en tout
   (hero, coachs, tarifs), pour neuf sections. Les autres titres se passent
   d'étiquette — leur place dans la page suffit à les situer. */
.eyebrow {
  display: block;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ═══ Primitives de mise en page ════════════════════════════════════════ */

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

.section {
  padding: clamp(80px, 10vw, 148px) 0;
}

.section + .section {
  padding-top: 0;
}

/* En-tête de section : titre puis texte, empilés. Jamais le gros titre à
   gauche et le petit paragraphe flottant en haut à droite — c'est le motif
   que le §4.7 interdit, et c'était celui de la version précédente. */
.sec-head {
  max-width: 46ch;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.sec-head h2 + p {
  margin-top: 18px;
  color: var(--ink-3);
  font-size: 1.05rem;
}

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--line);
}

/* ═══ Boutons ═══════════════════════════════════════════════════════════
   Trois niveaux, et un seul libellé par intention sur toute la page :
   « Créer mon compte » pour l'inscription, « Nous écrire » pour le contact.
   Le §4.5 compte deux libellés différents pour la même action comme un échec.
   ═══════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap; /* §4.5 : un libellé de CTA ne passe jamais à la ligne */
  cursor: pointer;
  transition:
    background-color 0.18s var(--ease),
    border-color 0.18s var(--ease),
    color 0.18s var(--ease),
    transform 0.12s var(--ease);
}

.btn-primary {
  background: var(--btn-bg);
  color: var(--btn-fg);
}

.btn-primary:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn-ghost {
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn-ghost:hover {
  border-color: var(--ink);
  background: var(--surface-2);
}

/* Bouton texte : souligné au survol, pas de fantôme sans bordure sur photo. */
.btn-link {
  padding: 13px 4px;
  color: var(--ink-2);
}

.btn-link:hover {
  color: var(--ink);
}

.btn-link .ico-arrow {
  transition: transform 0.22s var(--ease);
}

.btn-link:hover .ico-arrow {
  transform: translate(2px, -2px);
}

/* Retour tactile : l'enfoncement physique du §4.5. */
.btn:active {
  transform: translateY(1px);
}

.btn-sm {
  padding: 9px 16px;
  font-size: 0.88rem;
}

.btn-block {
  width: 100%;
}

.ico-arrow {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

/* ═══ En-tête ═══════════════════════════════════════════════════════════
   Une seule ligne au bureau, 68px de haut. Le §4.7 plafonne à 80px.
   ═══════════════════════════════════════════════════════════════════════ */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition:
    background-color 0.3s var(--ease),
    border-color 0.3s var(--ease);
  border-bottom: 1px solid transparent;
}

/* Posé au chargement par-dessus la photo du hero : transparent, texte clair.
   La classe « scrolled » arrive dès que la page a bougé (voir main.js). */
.site-header .navbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  height: 68px;
  color: #fff;
  transition: color 0.3s var(--ease);
}

.site-header.scrolled {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.site-header.scrolled .navbar {
  color: var(--ink);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.03em;
  font-variation-settings: "wdth" 108;
}

.logo-mark {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.nav {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.nav a {
  padding: 7px 12px;
  border-radius: var(--r);
  font-size: 0.92rem;
  font-weight: 500;
  color: inherit;
  opacity: 0.74;
  transition:
    opacity 0.18s var(--ease),
    background-color 0.18s var(--ease);
}

.nav a:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r);
  color: inherit;
  opacity: 0.74;
  transition:
    opacity 0.18s var(--ease),
    background-color 0.18s var(--ease);
}

.icon-btn:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.icon-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ico-moon {
  display: none;
}

:root[data-theme="dark"] .ico-sun {
  display: none;
}

:root[data-theme="dark"] .ico-moon {
  display: block;
}

.lang-switch {
  display: flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: var(--r);
  overflow: hidden;
}

.lang-switch button {
  padding: 5px 9px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: inherit;
  opacity: 0.6;
  transition:
    opacity 0.18s var(--ease),
    background-color 0.18s var(--ease);
}

.lang-switch button[aria-pressed="true"] {
  opacity: 1;
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.nav-login {
  font-size: 0.92rem;
  font-weight: 500;
  opacity: 0.74;
  transition: opacity 0.18s var(--ease);
}

.nav-login:hover {
  opacity: 1;
}

/* Bouton d'inscription de la barre : inversé par rapport au texte de la
   barre, quel que soit le fond derrière. */
.btn-invert {
  background: currentColor;
  border-color: currentColor;
}

.btn-invert span {
  color: var(--bg);
  mix-blend-mode: normal;
}

.site-header:not(.scrolled) .btn-invert span {
  color: #15191c;
}

.burger {
  display: none;
  width: 38px;
  height: 38px;
  place-items: center;
  gap: 5px;
  border-radius: var(--r);
  color: inherit;
}

.burger span {
  display: block;
  width: 17px;
  height: 1.6px;
  background: currentColor;
  transition: transform 0.24s var(--ease);
}

.mobile-nav {
  display: none;
}

/* ═══ Hero ══════════════════════════════════════════════════════════════
   Split asymétrique : le texte occupe la colonne large à gauche, la photo
   remplit la droite jusqu'au bord de l'écran. Pas de titre centré — le §4.3
   l'écarte dès que VARIANCE dépasse 4, et on est à 7.

   Quatre éléments de texte, pas un de plus (§4.7) : eyebrow, titre, chapô,
   boutons. Le bandeau des disciplines qui traînait sous les boutons est
   devenu une vraie section, juste en dessous.
   ═══════════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  background: #0d0f10;
  color: var(--ink);
  overflow: hidden;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  align-items: stretch;
  min-height: min(100svh, 880px);
  max-width: none;
  padding: 0;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Le §4.7 plafonne le rembourrage haut du hero : au-delà, le contenu
     flotte au milieu de l'écran et ça se lit comme un bug. */
  padding: clamp(112px, 12vh, 152px) clamp(24px, 5vw, 76px)
    clamp(64px, 8vh, 96px);
  /* Cale la colonne de texte sur la grille du reste de la page. */
  margin-left: max(0px, calc((100vw - var(--wrap)) / 2));
}

.hero h1 {
  max-width: 15ch;
}

.hero .lead {
  margin-top: 26px;
  max-width: 44ch;
}

.hero .cta-row {
  margin-top: 38px;
}

/* La photo : un vrai <img>, pas un fond CSS. Le navigateur peut la
   prioriser, en réserver la place, et le LCP se mesure dessus. */
.hero-visual {
  position: relative;
  min-height: 320px;
}

.hero-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 46% center;
  filter: grayscale(0.32) contrast(1.04) brightness(0.86);
}

/* Fondu de la photo vers le noir de la colonne de texte, pour qu'il n'y ait
   pas d'arête franche au milieu de l'écran. */
.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #0d0f10 0%,
    rgba(13, 15, 16, 0.55) 26%,
    rgba(13, 15, 16, 0) 62%
  );
  pointer-events: none;
}

/* ═══ Disciplines ═══════════════════════════════════════════════════════
   Le bandeau qui vivait sous les boutons du hero, sorti du hero et devenu
   une bande à part entière. Grande chasse, filets verticaux, rien d'autre.
   ═══════════════════════════════════════════════════════════════════════ */

.disciplines {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.disc-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Cette bande sert aussi de légende : le petit trait au-dessus de chaque nom
   est la couleur que la discipline portera dans le schéma de la semaine, plus
   bas. Sans elle, le lecteur verrait un code couleur sans clé. */
.disc-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: clamp(24px, 3.2vw, 36px) 8px;
  border-left: 1px solid var(--line-soft);
  text-align: center;
  font-size: clamp(0.95rem, 1.5vw, 1.32rem);
  font-weight: 600;
  font-variation-settings: "wdth" 108;
  letter-spacing: -0.02em;
  color: var(--ink-2);
}

.disc-list li::before {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--d, var(--line-strong));
}

.disc-list li:first-child {
  border-left: 0;
}

.disc--run {
  --d: var(--d-run);
}

.disc--muscu {
  --d: var(--d-muscu);
}

.disc--hyrox {
  --d: var(--d-hyrox);
}

.disc--ergo {
  --d: var(--d-ergo);
}

.disc--conditioning {
  --d: var(--d-cond);
}

/* ═══ Figure produit ════════════════════════════════════════════════════
   Ce qui était présenté comme une capture d'écran d'application, avec sa
   fausse barre de navigateur et ses trois pastilles. Le §4.8 interdit les
   fausses captures construites en div : c'est le tell le plus reconnaissable
   d'une page générée.

   Le contenu reste — il décrit vraiment le produit — mais il ne se déguise
   plus en fenêtre. C'est un schéma, encadré et légendé comme tel. Quand de
   vraies captures de l'app existeront, elles prennent la place du .fig-body
   sans toucher au reste.
   ═══════════════════════════════════════════════════════════════════════ */

.figure {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}

.fig-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line-soft);
}

.fig-title {
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.012em;
}

.chip {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}

.panel-stat {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-3);
}

.fig-body {
  padding: 22px;
}

.fig-cap {
  padding: 14px 22px 0;
  font-size: 0.86rem;
  color: var(--ink-4);
}

/* La semaine : sept colonnes, une par jour. */
.week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.week-day {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.dow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* Chaque séance porte la couleur de sa discipline. Une seule variable, --d,
   posée par la classe de discipline : le filet, le libellé et la barre
   d'intensité s'y accrochent tous les trois par héritage. */
.scard {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 96px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--d, var(--line-strong));
  border-radius: var(--r);
  background: var(--surface-2);
}

.scard--run {
  --d: var(--d-run);
}

.scard--muscu {
  --d: var(--d-muscu);
}

.scard--hyrox {
  --d: var(--d-hyrox);
}

.scard--ergo {
  --d: var(--d-ergo);
}

/* Le repos n'est pas une discipline : pas de couleur, un filet neutre. Il ne
   pose pas --d, donc le libellé retombe sur l'encre courante. */
.scard--rest {
  --d: initial;
}

.scard-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--d, var(--ink-4));
}

.scard-title {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

.scard-meta {
  font-size: 10.5px;
  color: var(--ink-4);
}

.bar {
  display: block;
  margin-top: auto;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.bar i {
  display: block;
  height: 100%;
  background: var(--d, var(--accent));
}

/* Pied de figure : les indicateurs, sur une ligne de filets. */
.fig-foot {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-soft);
}

.kpi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 22px;
  border-left: 1px solid var(--line-soft);
}

.kpi:first-child {
  border-left: 0;
}

.k-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.k-value {
  font-size: 1.3rem;
  font-weight: 500;
}

.k-flag {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
}

.k-flag.k-warn {
  color: var(--accent);
}

/* Liste d'athlètes de la vue coach. */
.rowlist {
  font-size: 0.9rem;
}

/* Quatre colonnes, pas cinq. La discipline a sa propre bande en haut de page :
   la répéter ici coûtait la colonne qui faisait casser toutes les autres. */
.rowlist-head,
.rowline {
  display: grid;
  grid-template-columns: 1.5fr 1fr 0.5fr 1.55fr;
  align-items: center;
  gap: 12px;
  padding: 13px 2px;
}

.rowline > span {
  min-width: 0;
}

.rowlist-head {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-4);
  border-bottom: 1px solid var(--line);
}

/* Un seul filet entre les lignes, jamais haut ET bas sur chaque ligne :
   le §9.F compte le double filet systématique comme la mise en page la plus
   paresseuse qui soit. */
.rowline + .rowline {
  border-top: 1px solid var(--line-soft);
}

 /* Un nom dans une ligne de tableau ne passe jamais à la ligne : il se
   tronque. Deux lignes décaleraient toute la rangée. */
.ath {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pastille d'initiales : un des rares objets réellement circulaires. */
.av {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  color: var(--ink-3);
}

.rowline b {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-4);
}

.rowline b.up {
  color: var(--accent);
}

/* Une pastille d'état tient sur une ligne ou n'est plus une pastille. */
.pill {
  justify-self: start;
  white-space: nowrap;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
}

.pill-warn {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-wash);
  color: var(--accent);
}

/* Histogramme de charge : une vraie petite figure de données, pas un décor. */
.chart {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 130px;
}

.chart i {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: var(--line-strong);
}

.chart i.hot {
  background: var(--accent);
}

/* ═══ Bento — atouts athlètes ═══════════════════════════════════════════
   Six atouts, six cellules, aucune case vide (§4.7). Le rythme alterne
   4+2 / 3+3 / 2+4 : pas trois colonnes égales, que le §9.C interdit.

   Trois cellules portent autre chose que du texte — un aplat d'accent, une
   surface teintée, une petite figure de données — pour que la grille ne soit
   pas six rectangles blancs alignés (§4.7, diversité des fonds).
   ═══════════════════════════════════════════════════════════════════════ */

.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.cell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition:
    border-color 0.24s var(--ease),
    transform 0.24s var(--ease);
}

.cell:hover {
  border-color: var(--line-strong);
}

.cell h3 {
  max-width: 22ch;
}

.cell p {
  color: var(--ink-3);
  font-size: 0.95rem;
  max-width: 46ch;
}

.cell .ico {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--ink-4);
}

.cell--a {
  grid-column: span 4;
}

.cell--b {
  grid-column: span 2;
}

.cell--c {
  grid-column: span 3;
}

.cell--d {
  grid-column: span 3;
}

.cell--e {
  grid-column: span 2;
}

.cell--f {
  grid-column: span 4;
}

/* La cellule en aplat d'accent : le seul aplat coloré de la page. */
.cell--fill {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* Sur l'aplat d'accent, le texte reste à pleine opacité : à 82% il tombait à
   3,25:1, sous le seuil AA. L'icône, elle, n'a rien à lire et peut reculer. */
.cell--fill p {
  color: var(--accent-ink);
}

.cell--fill .ico {
  color: color-mix(in srgb, var(--accent-ink) 78%, transparent);
}

.cell--tint {
  background: var(--surface-3);
}

/* Petite figure logée dans une cellule : sept barres, la semaine en abrégé. */
.cell-fig {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 58px;
  margin-top: auto;
  padding-top: 14px;
}

.cell-fig i {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: color-mix(in srgb, currentColor 22%, transparent);
}

.cell-fig i.on {
  background: var(--accent);
}

.cell--fill .cell-fig i.on {
  background: var(--accent-ink);
}

/* ═══ Chiffres ══════════════════════════════════════════════════════════
   Des faits produit, pas des promesses, et pas de fausse précision : ce sont
   des entiers vérifiables (§4.9). Sur une ligne de filets, sans cartes —
   le §4.4 demande d'omettre le conteneur quand l'espace suffit.
   ═══════════════════════════════════════════════════════════════════════ */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(48px, 6vw, 88px);
  border-top: 1px solid var(--line);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(24px, 3vw, 38px) 22px clamp(6px, 1vw, 10px) 0;
  border-left: 1px solid var(--line-soft);
  padding-left: clamp(18px, 2.2vw, 30px);
}

.stat:first-child {
  border-left: 0;
  padding-left: 0;
}

.stat-v {
  font-size: clamp(2.2rem, 3.6vw, 3.1rem);
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
}

.stat-l {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ink-3);
  max-width: 22ch;
}

/* ═══ Coachs — split collant ════════════════════════════════════════════
   Famille de mise en page distincte de la section athlètes. La version
   précédente répétait le même gabarit deux fois de suite (en-tête, maquette,
   grille de cartes), ce que le §4.7 compte comme une répétition de famille.

   Ici : colonne gauche fixe pendant que la droite défile. Pas de cartes du
   tout — des blocs séparés par des filets, comme le §4.4 le demande quand
   l'élévation ne porte aucune hiérarchie réelle.
   ═══════════════════════════════════════════════════════════════════════ */

/* Colonnes à parts égales : la gauche porte un tableau, et un tableau a une
   largeur minimale en dessous de laquelle ses colonnes se cassent. À 0,86fr
   les noms et les variations passaient à la ligne. */
.coach-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}

.coach-aside {
  position: sticky;
  top: 108px;
}

.coach-aside .figure {
  margin-top: 28px;
}

.coach-list > li {
  padding: clamp(24px, 3vw, 34px) 0;
  border-top: 1px solid var(--line);
}

.coach-list > li:last-child {
  border-bottom: 1px solid var(--line);
}

.coach-list h3 {
  margin-bottom: 10px;
}

.coach-list p {
  color: var(--ink-3);
  max-width: 52ch;
}

.coach-list .ico {
  width: 20px;
  height: 20px;
  margin-bottom: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--ink-4);
}

/* ═══ Bandeau manifeste ═════════════════════════════════════════════════ */

.band {
  padding: clamp(72px, 9vw, 128px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.band-line {
  max-width: 20ch;
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.036em;
  font-variation-settings: "wdth" 110;
  text-wrap: balance;
}

/* ═══ Assistant ═════════════════════════════════════════════════════════ */

.about {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.about-visual {
  display: grid;
  place-items: center;
  padding: clamp(24px, 3vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}

.about-visual img {
  width: min(100%, 300px);
}

.about-quote {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Trois lignes maximum, guillemets typographiques, aucune attribution
   fantaisiste : c'est une réponse d'assistant donnée en exemple, pas un
   témoignage client. Il n'y a pas de témoignage sur cette page parce qu'il
   n'y en a pas de vrai à citer. */
.quote-text {
  font-size: clamp(1.2rem, 2.1vw, 1.6rem);
  line-height: 1.36;
  font-weight: 500;
  letter-spacing: -0.022em;
  max-width: 30ch;
  border-left: 2px solid var(--accent);
  padding-left: 20px;
}

.ticks li {
  position: relative;
  padding: 9px 0 9px 22px;
  color: var(--ink-3);
  font-size: 0.95rem;
  border-top: 1px solid var(--line-soft);
}

.ticks li:first-child {
  border-top: 0;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 9px;
  height: 1.5px;
  background: var(--ink-5);
}

.quote-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.quote-name {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ═══ Méthode ═══════════════════════════════════════════════════════════
   Trois onglets nommés par ce qu'ils contiennent. Le §9.F interdit les
   « Étape 1 / Étape 2 / Étape 3 » : le contenu de l'étape est son libellé.
   ═══════════════════════════════════════════════════════════════════════ */

/* `min-width: 0` : sans ça, un enfant de grille refuse de descendre sous la
   largeur de son contenu le plus large, et une figure déborde de sa colonne. */
.steps {
  min-width: 0;
}

.steps-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: clamp(28px, 3.4vw, 44px);
  border-bottom: 1px solid var(--line);
}

.steps-tabs button {
  position: relative;
  padding: 13px 18px;
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink-4);
  transition: color 0.2s var(--ease);
}

.steps-tabs button::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}

.steps-tabs button:hover {
  color: var(--ink-2);
}

.steps-tabs button[aria-selected="true"] {
  color: var(--ink);
}

.steps-tabs button[aria-selected="true"]::after {
  transform: scaleX(1);
}

.step {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.step[hidden] {
  display: none;
}

.step-copy h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.028em;
  font-variation-settings: "wdth" 106;
  margin-bottom: 14px;
}

.step-copy > p {
  color: var(--ink-3);
  max-width: 50ch;
}

.step-copy h4 {
  margin: 30px 0 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.deflist .defrow {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 16px;
  padding: 12px 0;
}

.deflist .defrow + .defrow {
  border-top: 1px solid var(--line-soft);
}

.dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.dd {
  font-size: 0.93rem;
  font-weight: 500;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stack .scard {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-height: 0;
  padding: 12px 14px;
}

.stack .scard-title {
  flex: 1;
  font-size: 0.9rem;
}

.stack .bar {
  flex: none;
  width: 56px;
  margin-top: 0;
}

.figure--mini .fig-foot {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ═══ Tarifs ════════════════════════════════════════════════════════════ */

.pricing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.price-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.price-card--feature {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.price-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.badge {
  padding: 3px 8px;
  border-radius: var(--r);
  background: var(--accent-wash);
  color: var(--accent);
  letter-spacing: 0.06em;
}

.price-value {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}

.price-desc {
  color: var(--ink-3);
  font-size: 0.95rem;
}

.checks li {
  position: relative;
  padding: 10px 0 10px 24px;
  font-size: 0.93rem;
  color: var(--ink-2);
  border-top: 1px solid var(--line-soft);
}

.checks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 17px;
  width: 9px;
  height: 5px;
  border-left: 1.6px solid var(--accent);
  border-bottom: 1.6px solid var(--accent);
  transform: rotate(-45deg);
}

/* ═══ FAQ ═══════════════════════════════════════════════════════════════ */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.faq-head {
  position: sticky;
  top: 108px;
}

.faq-head p {
  margin-top: 18px;
  color: var(--ink-3);
  max-width: 34ch;
}

.faq-list {
  min-width: 0;
}

.faq-item {
  border-top: 1px solid var(--line);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--line);
}

.faq-item h3 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 0;
  text-align: left;
  font-size: 1.04rem;
  font-weight: 600;
  letter-spacing: -0.016em;
  transition: color 0.2s var(--ease);
}

.faq-q:hover {
  color: var(--accent);
}

.faq-sign {
  position: relative;
  flex: none;
  width: 13px;
  height: 13px;
}

.faq-sign::before,
.faq-sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1.6px;
  background: currentColor;
  transition: transform 0.28s var(--ease);
}

.faq-sign::after {
  transform: rotate(90deg);
}

.faq-item.open .faq-sign::after {
  transform: rotate(0deg);
}

/* Repli animé sur la hauteur intrinsèque : `grid-template-rows` de 0fr à 1fr
   anime proprement, là où `height: auto` ne s'anime pas. */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.34s var(--ease);
}

.faq-a > p {
  overflow: hidden;
  color: var(--ink-3);
  max-width: 62ch;
}

.faq-item.open .faq-a {
  grid-template-rows: 1fr;
}

.faq-item.open .faq-a > p {
  padding-bottom: 24px;
}

/* Sans JavaScript, toutes les réponses restent dépliées : la page reste
   entièrement lisible. */
html:not(.js) .faq-a {
  grid-template-rows: 1fr;
}

html:not(.js) .faq-a > p {
  padding-bottom: 24px;
}

/* ═══ CTA final ═════════════════════════════════════════════════════════
   Le seul bloc centré de la page, et c'est volontaire : le §4.3 autorise le
   centrage quand le message est lui-même la composition.
   ═══════════════════════════════════════════════════════════════════════ */

.final {
  position: relative;
  padding: clamp(88px, 11vw, 156px) 0;
  background: #0d0f10;
  color: var(--ink);
  overflow: hidden;
  text-align: center;
}

.final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/hero-bg-1200.jpg") 50% 34% / cover no-repeat;
  filter: grayscale(0.5) brightness(0.4);
  opacity: 0.5;
}

.final-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.final h2 {
  max-width: 16ch;
}

.final p {
  color: var(--ink-2);
  max-width: 48ch;
}

.final .cta-row {
  justify-content: center;
  margin-top: 10px;
}

/* ═══ Pied de page ══════════════════════════════════════════════════════ */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.footer-inner {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(36px, 4vw, 56px);
}

.footer-brand p {
  margin-top: 16px;
  max-width: 30ch;
  font-size: 0.92rem;
  color: var(--ink-3);
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col h4 {
  margin-bottom: 4px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.footer-col a {
  font-size: 0.92rem;
  color: var(--ink-3);
  transition: color 0.18s var(--ease);
}

.footer-col a:hover {
  color: var(--ink);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 22px;
  padding-bottom: 30px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-4);
}

/* ═══ Raccourci flottant ════════════════════════════════════════════════ */

.float-cta {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border-radius: var(--r);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: var(--shadow-lift);
  transition:
    background-color 0.2s var(--ease),
    transform 0.2s var(--ease),
    opacity 0.3s var(--ease);
}

.float-cta:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

.float-cta:active {
  transform: translateY(1px);
}

/* ═══ Motion ════════════════════════════════════════════════════════════
   MOTION_INTENSITY 5 : révélation à l'entrée dans l'écran et transitions au
   survol. Rien de plus. Pas de parallaxe, pas de scroll détourné, aucune
   boucle infinie — le §5 préfère un dial assumé à 5 tenu proprement à une
   chorégraphie à moitié construite.

   Ce que la révélation communique : la hiérarchie. Les éléments d'une même
   grille arrivent en cascade, ce qui donne un ordre de lecture. C'est la
   seule justification, et elle suffit.

   Uniquement `transform` et `opacity` : les deux propriétés que le
   compositeur peut animer sans repeindre (§6.A).
   ═══════════════════════════════════════════════════════════════════════ */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* ═══ Adaptation aux petits écrans ══════════════════════════════════════
   Chaque grille multi-colonnes déclare son repli, explicitement (§4.7).
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .nav,
  .header-actions {
    display: none;
  }

  .burger {
    display: grid;
    justify-self: end;
  }

  .site-header .navbar {
    grid-template-columns: auto 1fr;
  }

  /* Le menu déplié prend le fond de la page : au-dessus d'une photo, un
     panneau translucide ne tiendrait pas le contraste. */
  .mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px var(--gutter) 26px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    color: var(--ink);
  }

  .mobile-nav[hidden] {
    display: none;
  }

  .mobile-nav > a:not(.btn) {
    padding: 12px 0;
    font-size: 1.05rem;
    font-weight: 600;
    border-bottom: 1px solid var(--line-soft);
  }

  .mobile-nav .tools {
    justify-content: space-between;
    padding: 18px 0;
  }

  .mobile-nav .btn {
    width: 100%;
  }

  .site-header:not(.scrolled):has(.mobile-nav:not([hidden])) {
    background: var(--bg);
  }

  .site-header:not(.scrolled):has(.mobile-nav:not([hidden])) .navbar {
    color: var(--ink);
  }

  .hero-inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  /* La photo passe au-dessus du texte : sur un écran étroit, une colonne
     d'image de 40% de large ne montre plus rien. */
  .hero-inner {
    display: flex;
    flex-direction: column-reverse;
  }

  .hero-copy {
    margin-left: 0;
    padding: 48px var(--gutter) 64px;
  }

  .hero-visual {
    height: 46svh;
    min-height: 260px;
  }

  .hero-visual::after {
    background: linear-gradient(
      180deg,
      rgba(13, 15, 16, 0.4) 0%,
      rgba(13, 15, 16, 0) 40%,
      #0d0f10 100%
    );
  }

  .coach-split,
  .about,
  .step,
  .faq {
    grid-template-columns: 1fr;
  }

  .coach-aside,
  .faq-head {
    position: static;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cell--a,
  .cell--b,
  .cell--c,
  .cell--d,
  .cell--e,
  .cell--f {
    grid-column: span 1;
  }

  .cell--a,
  .cell--f {
    grid-column: span 2;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }

  .stat:nth-child(n + 3) {
    border-top: 1px solid var(--line-soft);
  }

  .pricing {
    grid-template-columns: 1fr;
  }

  .disc-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .disc-list li:nth-child(4) {
    border-left: 0;
  }

  .disc-list li:nth-child(n + 4) {
    border-top: 1px solid var(--line-soft);
  }

  /* La semaine passe en défilement horizontal plutôt qu'en sept colonnes
     de 40px de large, illisibles. */
  .fig-body--week {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .week {
    min-width: 620px;
  }

  .fig-foot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpi:nth-child(3) {
    border-left: 0;
  }

  .kpi:nth-child(n + 3) {
    border-top: 1px solid var(--line-soft);
  }

  /* Le tableau des athlètes : les colonnes secondaires disparaissent plutôt
     que de se tasser. Nom, charge, statut suffisent à comprendre. */
  /* Sur téléphone, le wellness disparaît : nom, charge et statut suffisent
     à comprendre ce que montre le tableau. */
  .rowlist-head,
  .rowline {
    grid-template-columns: 1.6fr 1.1fr 1.3fr;
  }

  .rowlist-head span:nth-child(3),
  .rowline > *:nth-child(3) {
    display: none;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  /* Le hero doit tenir dans l'écran, boutons compris (§4.7). Sur un
     iPhone SE (667px de haut) la photo à 46svh, le titre à 2,5rem et le chapô
     poussaient les boutons 120px sous la ligne de flottaison — et comme ils
     n'entraient jamais dans l'écran, l'observateur ne les révélait pas :
     ils restaient invisibles. On resserre chaque bloc plutôt que d'en couper. */
  .hero-visual {
    height: 34svh;
    min-height: 190px;
  }

  .hero-copy {
    padding: 30px var(--gutter) 40px;
  }

  .hero .eyebrow {
    margin-bottom: 12px;
  }

  .hero h1 {
    font-size: clamp(2rem, 8.4vw, 2.55rem);
  }

  .hero .lead {
    margin-top: 16px;
    font-size: 1rem;
  }

  .hero .cta-row {
    margin-top: 24px;
    gap: 10px 14px;
  }

  .bento {
    grid-template-columns: 1fr;
  }

  .cell--a,
  .cell--f {
    grid-column: span 1;
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .stat {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line-soft);
  }

  .stat:first-child {
    border-top: 0;
  }

  .disc-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .disc-list li:nth-child(odd) {
    border-left: 0;
  }

  .disc-list li:nth-child(n + 3) {
    border-top: 1px solid var(--line-soft);
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .quote-text {
    padding-left: 16px;
  }

  /* Sur téléphone il ne reste que le nom et l'état : c'est exactement ce que
     le tableau sert à montrer, « qui décroche ». La charge et le wellness
     chiffrés demanderaient une largeur qu'on n'a pas. */
  .rowlist-head,
  .rowline {
    grid-template-columns: 1.5fr 1.15fr;
    gap: 10px;
  }

  .rowlist-head span:nth-child(2),
  .rowline > *:nth-child(2) {
    display: none;
  }

  .ath {
    font-size: 0.88rem;
  }

  .av {
    width: 22px;
    height: 22px;
  }

  /* Le raccourci flottant s'efface : sur un écran de téléphone il recouvre
     le contenu, et les CTA de la page sont à portée de pouce. */
  .float-cta {
    display: none;
  }
}

/* ═══ Mouvement réduit ══════════════════════════════════════════════════
   Obligatoire dès que MOTION dépasse 3 (§6.B). Tout ce qui bouge s'arrête,
   et les blocs à révéler sont visibles d'emblée plutôt que jamais.
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Transparence réduite : le flou de la barre laisse place à un aplat. */
@media (prefers-reduced-transparency: reduce) {
  .site-header.scrolled {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Impression : la page doit rester lisible sur papier. */
@media print {
  .site-header,
  .float-cta,
  .mobile-nav {
    display: none;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}