/* Riallin Performance : feuille de style unique.
   Mobile d'abord. Tokens : direction visuelle du 18/10/2026 (palette officielle de Clément).
   Aucun dégradé, aucune ombre hors panneau du menu.
   Mouvement (retours de Thomas du 18/10, 23 h) : apparitions douces au défilement, filets qui se tracent,
   plan d'action qui se dévoile, chargement du hero. Tout est en section 25 et ne masque rien sans la classe
   `js` (posée par assets/js/early.js) ni avec prefers-reduced-motion: reduce. */

/* Polices servies par le site (OFL, sous-ensemble latin) */
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/spacegrotesk-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* 1. Tokens */
:root {
  --c-blanc: #FFFFFD;
  --c-nuit: #15222B;
  --c-orange: #FF5B04;
  --c-orange-survol: #FF7A33;
  --c-vert: #075056;
  --c-vert-survol: #0A6168;
  --c-ciel: #9DC4D5;
  --c-jaune: #E8FF40;
  --c-vert-filet: #0D7A83;
  --c-vert-clair: #5FB3BA;
  --c-nuit-2: #25353F;
  --c-ligne-sombre: #2D3E49;
  --c-contour-sombre: #415662;
  --c-brume: #EEF3F5;
  --c-contour-clair: #A8C1C2;
  --c-ligne-claire: #D6D8D8;

  --t-sombre-1: #FFFFFD;
  --t-sombre-2: #B4BFC5;
  --t-sombre-3: #8E9BA3;
  --t-clair-1: #15222B;
  --t-clair-2: #4A5963;
  --t-clair-3: #5C6B74;
  --t-vert-2: #CFDCDD;

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-text: "Manrope", system-ui, sans-serif;

  --fs-display: clamp(2.125rem, 1.5rem + 2.78vw, 4rem);
  --fs-stat: clamp(3rem, 2rem + 4.44vw, 6rem);
  --fs-h2: clamp(2rem, 1.5rem + 2.22vw, 3.5rem);
  --fs-offer: clamp(2.25rem, 2.083rem + 0.74vw, 2.75rem);
  --fs-price: clamp(2.25rem, 2rem + 1.11vw, 3rem);
  --fs-h3: clamp(1.375rem, 1.25rem + 0.56vw, 1.75rem);
  --fs-lead: clamp(1.125rem, 1.042rem + 0.37vw, 1.375rem);
  --fs-body: clamp(1rem, 0.979rem + 0.093vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.9375rem;
  --fs-pill: 0.8125rem;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  --section-y: clamp(4rem, 3rem + 4.44vw, 7rem);
  --gutter: clamp(1rem, 0.5rem + 2.222vw, 2.5rem);
  --gap: clamp(1rem, 0.667rem + 1.481vw, 2rem);
  --container: 1280px;
  /* Bord gauche du contenu du conteneur, mesuré dans un bloc pleine largeur */
  --c-off: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  /* Largeur de contenu du conteneur, mesurée dans un bloc pleine largeur */
  --c-w: calc(min(100%, var(--container)) - 2 * var(--gutter));

  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;
  --shadow-panel: 0 16px 40px -16px rgba(21, 34, 43, 0.45);

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-1: 150ms;
  --dur-2: 240ms;
  --dur-3: 320ms;

  --header-h: 56px;
  --focus: var(--c-jaune);
}
@media (min-width: 1024px) {
  :root { --header-h: 64px; }
}

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

html {
  background: var(--c-nuit);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  margin: 0;
  background: var(--c-nuit);
  color: var(--t-sombre-1);
  font: 400 var(--fs-body)/1.6 var(--font-text);
  hyphens: manual;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; overflow-wrap: anywhere; }
ul, ol { padding: 0; }
img, svg, picture { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
abbr[title] { text-decoration: none; }
address { font-style: normal; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
  }
}

/* 3. Utilitaires */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.insecable { white-space: nowrap; }
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }

/* Libellés courts ou longs selon la largeur */
.mq-desktop { display: none; }
.tab-long { display: none; }
@media (min-width: 640px) {
  .tab-long { display: inline; }
  .tab-court { display: none; }
}
@media (min-width: 1024px) {
  .mq-desktop { display: inline; }
  .mq-mobile { display: none; }
}

/* Lien d'évitement */
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 8px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--r-md);
  background: var(--c-jaune);
  color: var(--c-nuit);
  font: 600 1rem/1.2 var(--font-text);
  text-decoration: none;
  transform: translateY(-200%);
  --focus: var(--c-nuit);
}
.skip-link:focus { transform: none; }

/* 4. Pages de texte (mentions, confidentialité, 404) : fond blanc par défaut */
.doc {
  --bg: var(--c-blanc);
  --fg: var(--t-clair-1);
  --fg-2: var(--t-clair-2);
  --fg-3: var(--t-clair-3);
  --accent: var(--c-vert);
  --line: var(--c-ligne-claire);
  --focus: var(--c-nuit);
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--section-y);
}
.doc__inner {
  max-width: calc(68ch + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.doc h1 {
  font: 400 var(--fs-h2)/1.05 var(--font-display);
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin-bottom: var(--s-4);
}
.doc h2 {
  font: 400 var(--fs-h3)/1.2 var(--font-display);
  letter-spacing: -0.01em;
  margin: var(--s-7) 0 var(--s-3);
}
.doc h3 {
  font: 600 1.125rem/1.35 var(--font-text);
  margin: var(--s-5) 0 var(--s-2);
}
.doc p,
.doc ul,
.doc ol,
.doc table { margin-bottom: 1em; }
.doc ul,
.doc ol { padding-left: 1.25em; }
.doc li + li { margin-top: 0.4em; }
.doc a:not(.btn) {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--dur-1) var(--ease);
}
.doc a:not(.btn):hover { text-decoration-thickness: 2px; }
.doc strong { font-weight: 600; }
.doc table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.doc th,
.doc td {
  padding: 10px 16px 10px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.doc th { font-weight: 600; }
.doc__maj {
  color: var(--fg-3);
  font-size: var(--fs-small);
  margin-bottom: var(--s-7);
}
.doc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.doc__inner { overflow-wrap: break-word; }
.doc address { margin-bottom: 1em; }
/* Tableau des destinataires (confidentialité) : vrai tableau dès 640 px,
   une fiche par ligne en dessous. Les rôles ARIA posés dans le HTML gardent
   la structure lisible par les lecteurs d'écran quand l'affichage change. */
.doc__tableau { margin-bottom: 1em; }
.doc__tableau table {
  display: table;
  width: 100%;
  margin-bottom: 0;
  overflow: visible;
}
.doc__tableau tbody th { font-weight: 600; }
/* Noms et pays d'un seul tenant (« États-Unis » ne se coupe pas au trait d'union) */
@media (min-width: 640px) {
  .doc__tableau tbody th,
  .doc__tableau td[data-label="Pays"] { white-space: nowrap; }
}
@media (max-width: 639.98px) {
  .doc__tableau table,
  .doc__tableau tbody,
  .doc__tableau tr,
  .doc__tableau th,
  .doc__tableau td { display: block; }
  .doc__tableau thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .doc__tableau tr {
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--line);
  }
  .doc__tableau tbody tr:first-child { border-top: 1px solid var(--line); }
  .doc__tableau th,
  .doc__tableau td {
    padding: 0;
    border: 0;
  }
  .doc__tableau tbody th { margin-bottom: var(--s-1); font-size: var(--fs-body); }
  .doc__tableau td + td { margin-top: 2px; }
  .doc__tableau td::before {
    content: attr(data-label) "\202F: ";
    content: attr(data-label) "\202F: " / "";
    color: var(--fg-2);
    font-weight: 600;
  }
  .doc__tableau td:empty { display: none; }
}
/* Pages légales : le lien du pied vers la page affichée reste souligné */
.site-footer__liens a[aria-current="page"] { text-decoration-color: var(--c-orange); }

/* 5. Thèmes : un seul fond par bloc */
.theme-nuit {
  --bg: var(--c-nuit);
  --fg: var(--t-sombre-1);
  --fg-2: var(--t-sombre-2);
  --fg-3: var(--t-sombre-3);
  --accent: var(--c-ciel);
  --line: var(--c-ligne-sombre);
  --focus: var(--c-jaune);
  color-scheme: dark;
}
.theme-blanc {
  --bg: var(--c-blanc);
  --fg: var(--t-clair-1);
  --fg-2: var(--t-clair-2);
  --fg-3: var(--t-clair-3);
  --accent: var(--c-vert);
  --line: var(--c-ligne-claire);
  --focus: var(--c-nuit);
  color-scheme: light;
}
.theme-brume {
  --bg: var(--c-brume);
  --fg: var(--t-clair-1);
  --fg-2: var(--t-clair-2);
  --fg-3: var(--t-clair-3);
  --accent: var(--c-vert);
  --line: var(--c-contour-clair);
  --focus: var(--c-nuit);
  color-scheme: light;
}
.theme-orange {
  --bg: var(--c-orange);
  --fg: var(--t-clair-1);
  --fg-2: var(--t-clair-1);
  --fg-3: var(--t-clair-1);
  --accent: var(--c-nuit);
  --line: rgba(21, 34, 43, 0.3);
  --focus: var(--c-nuit);
  color-scheme: light;
}
.theme-nuit,
.theme-blanc,
.theme-brume,
.theme-orange {
  background: var(--bg);
  color: var(--fg);
}
.on-vert { --focus: var(--c-jaune); }

/* 6. Typographie commune */
.eyebrow {
  font: 500 var(--fs-eyebrow)/1.3 var(--font-text);
  color: var(--accent);
  margin-bottom: var(--s-3);
}
.h2 {
  font: 400 var(--fs-h2)/1.05 var(--font-display);
  letter-spacing: -0.015em;
  max-width: 18ch;
  text-wrap: balance;
}
.h2--compact {
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: none;
}
.h3 {
  font: 400 var(--fs-h3)/1.2 var(--font-display);
  letter-spacing: -0.01em;
}
.lead {
  font: 500 var(--fs-lead)/1.4 var(--font-text);
  color: var(--accent);
  max-width: 40ch;
  text-wrap: pretty;
}
.lead--jaune { color: var(--c-jaune); }
.prose > * + * { margin-top: 1em; }
.prose p { max-width: 65ch; }

.section-head { margin-bottom: var(--s-7); }
.section-head > .lead { margin-top: var(--s-4); }
@media (min-width: 1024px) {
  .section-head { margin-bottom: var(--s-8); }
}

/* Liens texte */
.link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--dur-1) var(--ease);
}
.link:hover { text-decoration-thickness: 2px; }
.link--seul {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

/* Textes repliés : <details>/<summary> natifs (clavier et lecture sans JS).
   Le signe + dessiné en CSS devient − à l'ouverture. */
.repli__titre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 48px;
  padding: 10px 0;
  list-style: none;
  font: 500 1.125rem/1.35 var(--font-text);
  cursor: pointer;
}
.repli__titre::-webkit-details-marker { display: none; }
.repli__titre::marker { content: ""; }
.repli__signe {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}
.repli__signe::before,
.repli__signe::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 2px;
  background: var(--repli-signe, var(--accent));
}
.repli__signe::after {
  transform: rotate(90deg);
  transition: transform var(--dur-2) var(--ease);
}
.repli[open] > .repli__titre .repli__signe::after { transform: rotate(0deg); }
.repli__titre:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* « Lire la suite » : bouton de divulgation (aria-expanded), révélé par script.js. Sans JavaScript, tout reste affiché.
   Le texte se replie partout (`data-replie`), sous 1024 px (`data-replie-mobile`) ou dès 1024 px
   (`data-replie-ordinateur`, avec un bouton `lire-suite--ordinateur`) : sur ordinateur, on replie moins que sur
   mobile (retours de Maxime et de Thomas, 24/10). */
.lire-suite {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: 600 1rem/1.3 var(--font-text);
  cursor: pointer;
}
.lire-suite:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.lire-suite[aria-expanded="true"] .repli__signe::after { transform: rotate(0deg); }
[data-replie].replie-pret:not(.is-deplie) { display: none; }
@media (min-width: 1024px) {
  .lire-suite { display: none; }
  .lire-suite--ordinateur,
  .lire-suite--partout { display: inline-flex; }
  [data-replie-ordinateur].replie-pret:not(.is-deplie) { display: none; }
}
@media (max-width: 1023px) {
  [data-replie-mobile].replie-pret:not(.is-deplie) { display: none; }
  .lire-suite--ordinateur { display: none; }
}

/* 7. Boutons : rectangle arrondi = cliquable */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 22px;
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  font: 600 1rem/1.25 var(--font-text);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.btn--compact { min-height: 44px; padding: 8px 16px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--c-orange); color: var(--c-nuit); --focus: var(--c-jaune); }
.btn--primary:hover { background: var(--c-orange-survol); }
.btn--ghost-dark { border-color: var(--c-blanc); color: var(--c-blanc); }
.btn--ghost-dark:hover { background: var(--c-ligne-sombre); }
.btn--ghost-vert { border-color: var(--c-blanc); color: var(--c-blanc); }
.btn--ghost-vert:hover { background: var(--c-vert-survol); }
.btn--nuit { background: var(--c-nuit); color: var(--c-blanc); }
.btn--nuit:hover { background: var(--c-nuit-2); }
.btn--vert { background: var(--c-vert); color: var(--c-blanc); }
.btn--vert:hover { background: var(--c-vert-survol); }
/* Sur fond clair, le focus du bouton orange reste nuit */
.theme-blanc .btn--primary,
.theme-brume .btn--primary,
.doc:not(.theme-nuit) .btn--primary { --focus: var(--c-nuit); }

/* Pastilles : pilule = étiquette, jamais cliquable */
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 100%;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font: 600 var(--fs-pill)/1.15 var(--font-text);
  letter-spacing: 0.01em;
  vertical-align: middle;
}
.pill--orange { background: var(--c-orange); color: var(--c-nuit); }
.pill--jaune { background: var(--c-jaune); color: var(--c-nuit); }
.pill--vert { background: var(--c-vert); color: var(--c-blanc); }
.pill--nuit { background: var(--c-nuit); color: var(--c-blanc); }

/* Légende des 4 filets (uniquement sur nuit) */
.piliers-legende {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-2);
}
.piliers-legende li {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font: 500 var(--fs-pill)/1.2 var(--font-text);
  color: var(--p-texte);
}
.piliers-legende li::before {
  content: "";
  width: 40px;
  height: 4px;
  background: var(--p-filet);
}
.p-entrainement { --p-filet: var(--c-vert-filet); --p-texte: var(--c-vert-clair); }
.p-recuperation { --p-filet: var(--c-ciel); --p-texte: var(--c-ciel); }
.p-nutrition { --p-filet: var(--c-orange); --p-texte: var(--c-orange); }
.p-mindset { --p-filet: var(--c-jaune); --p-texte: var(--c-jaune); }
@media (max-width: 359px) {
  .piliers-legende { display: grid; grid-template-columns: repeat(2, max-content); column-gap: var(--s-5); }
}

/* 8. En-tête */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-nuit);
  color: var(--t-sombre-1);
  border-bottom: 1px solid var(--c-ligne-sombre);
  --focus: var(--c-jaune);
  --accent: var(--c-ciel);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--header-h);
}
.site-header__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  min-height: 44px;
  margin-right: auto;
  color: var(--c-blanc);
}
.logo { height: 28px; width: auto; }
.site-header__logo .logo { max-width: 100%; }
.site-header__cta { white-space: nowrap; }
@media (max-width: 359px) {
  .site-header__cta { padding-inline: 12px; }
}
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--c-ligne-sombre);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--c-blanc);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease);
}
.menu-toggle:hover { background: var(--c-ligne-sombre); }
.menu-toggle svg { width: 22px; height: 22px; }
.menu-toggle .menu-toggle__fermer { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__ouvrir { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__fermer { display: block; }

.site-nav { display: none; }

.menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100svh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-2) var(--gutter) var(--s-6);
  background: var(--c-nuit);
  border-bottom: 1px solid var(--c-ligne-sombre);
  box-shadow: var(--shadow-panel);
}
.menu-panel__list { list-style: none; margin-bottom: var(--s-5); }
.menu-panel__list li + li { border-top: 1px solid var(--c-ligne-sombre); }
.menu-panel__list a {
  display: flex;
  align-items: center;
  min-height: 56px;
  font: 400 1.75rem/1.1 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--c-blanc);
  text-decoration: none;
}
.menu-panel__list a:hover {
  text-decoration: underline;
  text-decoration-color: var(--c-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.menu-panel__social {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-5);
  margin-top: var(--s-4);
}

@media (min-width: 1024px) {
  .logo { height: 32px; }
  .site-header__inner { gap: 28px; }
  .site-nav { display: block; }
  .site-nav__list {
    list-style: none;
    display: flex;
    gap: 28px;
  }
  /* Cible de 44 px de large au moins (« FAQ ») sans changer l'écart visible entre les liens */
  .site-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-inline-size: 44px;
    margin-inline: -8px;
    padding-inline: 8px;
    font: 500 0.9375rem/1 var(--font-text);
    color: var(--c-blanc);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    transition: text-decoration-color var(--dur-1) var(--ease);
  }
  .site-nav a:hover,
  .site-nav a:focus-visible { text-decoration-color: var(--c-orange); }
  .menu-toggle,
  .menu-panel { display: none; }
}

/* 9. Hero : Clément en coach en grand sur le côté, l'haltère fondue très discrètement derrière le texte (Thomas, 19/10) */
.hero {
  --hero-bandeau: clamp(220px, 34vh, 340px);
  --hero-bandeau: clamp(220px, 34svh, 340px);
  position: relative;
  isolation: isolate;
  display: grid;
}
/* Le fond ne montre que l'haltère, le poing et l'avant-bras (recadrage dédié, sans tête ni projecteurs
   côté texte), à toutes les largeurs. Mobile : il commence sous la photo du coach. */
.hero > * { min-width: 0; }
.hero__fond {
  position: absolute;
  inset: var(--hero-bandeau) 0 0 0;
  z-index: -1;
  overflow: hidden;
}
.hero__fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 0%;
}
/* Voile bleu nuit très dense : l'haltère n'est qu'une ambiance, le texte garde tout son contraste
   (mesuré : légende des piliers et réassurance au-dessus de 4,5:1 sur mobile) */
.hero__fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(21, 34, 43, 0.95);
}
.hero__media { order: -1; }
.hero__media img {
  width: 100%;
  height: var(--hero-bandeau);
  object-fit: cover;
  object-position: 57% 0%;
}
/* Tablette en portrait : bandeau plus haut, pour garder Clément bras croisés et pas seulement la tête */
@media (min-width: 640px) and (max-width: 1023px) {
  .hero {
    --hero-bandeau: clamp(220px, 58vh, 600px);
    --hero-bandeau: clamp(220px, 58svh, 600px);
  }
}
/* Sous 375 px, le titre prend 4 lignes : la photo cède la place au bouton principal */
@media (max-width: 374px) {
  .hero {
    --hero-bandeau: clamp(150px, calc(100vh - 465px), 340px);
    --hero-bandeau: clamp(150px, calc(100svh - 465px), 340px);
  }
}
.hero__text {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--s-5) var(--gutter) var(--s-8);
}
.hero__kicker {
  display: block;
  font: 500 var(--fs-lead)/1.35 var(--font-text);
  color: var(--c-ciel);
  text-wrap: pretty;
}
.hero__title {
  display: block;
  margin-top: var(--s-2);
  font: 400 var(--fs-display)/1.02 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--c-blanc);
  text-wrap: balance;
}
.hero__lead {
  margin-top: var(--s-4);
  max-width: 40ch;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--t-sombre-2);
}
.hero__actions {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.hero .piliers-legende { margin-top: var(--s-6); }

@media (min-width: 640px) {
  .hero__actions { display: flex; flex-wrap: wrap; }
}
@media (min-width: 1024px) {
  .hero {
    display: block;
    min-height: clamp(640px, calc(100vh - var(--header-h)), 880px);
    min-height: clamp(640px, calc(100svh - var(--header-h)), 880px);
  }
  /* L'haltère reste du côté du texte (les projecteurs du recadrage passent sous la photo du coach),
     sous un voile un peu plus léger vers la photo */
  .hero__fond { inset: 0; }
  .hero__fond img { object-position: 50% 45%; }
  .hero__fond::after {
    background: linear-gradient(90deg, rgba(21, 34, 43, 0.93) 0%, rgba(21, 34, 43, 0.86) 45%, rgba(21, 34, 43, 0.82) 100%);
  }
  .hero__media {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: calc(var(--c-off) + (var(--c-w) + var(--gap)) * 7 / 12);
  }
  .hero__media img {
    height: 100%;
    object-position: 57% 0%;
  }
  .hero__text {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: inherit;
    padding-top: var(--s-8);
    padding-bottom: var(--s-8);
  }
  .hero__text > * { max-width: calc((100% + var(--gap)) * 7 / 12 - var(--gap)); }
  .hero__lead { font-size: var(--fs-lead); line-height: 1.45; }
  .hero .piliers-legende { margin-top: 40px; }
}

/* 10. L'approche */
.approche__head .h2 { max-width: 14ch; }
.approche__head .lead { margin-top: var(--s-5); }
.approche__body { margin-top: var(--s-7); }
/* Photo du tableau fondue très discrètement derrière le texte (demande de Thomas, 18/10) */
.approche {
  position: relative;
  isolation: isolate;
}
.approche__fond {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.approche__fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 20% 62%;
}
.approche__fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 253, 0.86) 0%, rgba(255, 255, 253, 0.81) 100%);
}
.approche .signature { mix-blend-mode: multiply; }
.signature {
  height: 48px;
  width: auto;
  margin-top: var(--s-6);
}
@media (min-width: 1024px) {
  .approche__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
  .approche__head { grid-column: 1 / 6; }
  .approche__body { grid-column: 7 / -1; margin-top: 0; padding-top: 0.5rem; }
  .approche__fond img { object-position: 30% 60%; }
}
/* Très grand écran : l'écriture du tableau sort de la zone du titre */
@media (min-width: 1600px) {
  .approche__fond img { object-position: 30% 78%; }
}

/* 11. Les 4 piliers */
.methode__head .lead { margin-top: var(--s-5); max-width: 36ch; }
.piliers {
  list-style: none;
  display: grid;
  gap: var(--s-7);
}
.pilier {
  position: relative;
  padding-top: var(--s-5);
}
/* Filet de couleur du pilier (élément à part pour pouvoir se tracer) */
.pilier::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--p-filet);
  transform-origin: left center;
}
.pilier:focus-visible { outline-offset: 8px; }
.pilier__num {
  display: block;
  margin-bottom: var(--s-2);
  font: 400 1rem/1 var(--font-display);
  letter-spacing: 0.02em;
  color: var(--p-texte);
}
.pilier__titre {
  color: var(--p-texte);
  margin-bottom: var(--s-3);
}
.pilier__texte {
  max-width: 46ch;
  color: var(--t-sombre-2);
}
@media (min-width: 1024px) {
  .methode__head { max-width: calc((100% + var(--gap)) * 8 / 12 - var(--gap)); }
  .piliers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap);
    row-gap: var(--s-8);
  }
}

/* 12. Notre plan d'action */
.frise { list-style: none; }
.frise__step {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: var(--s-5);
  padding-bottom: 40px;
}
.frise__step:last-child { padding-bottom: 0; }
.frise__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 40px;
  bottom: 8px;
  width: 2px;
  background: var(--c-contour-clair);
}
.frise__num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--num-fond);
  border-radius: 50%;
  background: var(--num-fond);
  color: var(--num-texte);
  font: 600 1rem/1 var(--font-text);
}
/* Pastille et segment de la ligne de progression (section 25) : orange pour le bilan, vert ensuite */
.frise__step { --num-fond: var(--c-vert); --num-texte: var(--c-blanc); --segment: var(--c-vert); }
.frise__step--bilan { --num-fond: var(--c-orange); --num-texte: var(--c-nuit); --segment: var(--c-orange); }
.frise__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-bottom: var(--s-2);
  font: 400 1.5rem/1.2 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--c-vert);
}
.frise__body p { max-width: 60ch; }
/* Titres et fil toujours en vue ; le détail des étapes 2 à 5 s'ouvre par « Voir plus », en bas du fil, à toutes les
   tailles (Thomas, 24/10) */
.frise__suite { margin-top: var(--s-4); margin-left: calc(32px + var(--s-5)); }
@media (min-width: 640px) {
  .frise__suite { margin-left: calc(40px + var(--s-5)); }
}
.frise__body .link--seul { margin-top: var(--s-1); }
@media (min-width: 640px) {
  .frise__step { grid-template-columns: 40px minmax(0, 1fr); }
  .frise__step:not(:last-child)::before { left: 19px; top: 48px; }
  .frise__num { width: 40px; height: 40px; }
  .frise__title { margin-top: 4px; }
}
@media (min-width: 1024px) {
  .etapes__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
  .etapes__head {
    grid-column: 1 / 5;
    position: sticky;
    top: calc(var(--header-h) + 32px);
    margin-bottom: 0;
  }
  .frise { grid-column: 6 / -1; }
  .frise__suite { grid-column: 6 / -1; justify-self: start; }
}

/* 13. Formats (onglets) */
.tabs__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  margin-bottom: var(--s-7);
  border-radius: var(--r-md);
  background: var(--c-blanc);
}
.tabs__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--c-nuit);
  font: 600 0.9375rem/1.2 var(--font-text);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.tabs__tab:hover { background: var(--c-brume); }
@media (max-width: 359px) {
  .tabs__tab { padding: 0 6px; font-size: 0.875rem; }
  .tabs__ico { display: none; }
}
.tabs__tab[aria-selected="true"] { background: var(--c-nuit); color: var(--c-blanc); --focus: var(--c-nuit); }
/* Pictogrammes des formats : le sens du format d'un coup d'œil (kettlebell, téléphone, les deux) */
.tabs__ico {
  flex: none;
  width: 20px;
  height: 20px;
  color: currentColor;
}
.tabs__tab[aria-selected="true"] .tabs__ico { color: var(--dot); }
.dot-presentiel { --dot: var(--c-vert-clair); }
.dot-en-ligne { --dot: var(--c-ciel); }
.dot-hybride { --dot: var(--c-jaune); }
.tabs--actif .format { margin-top: 0; }
.format--entree { animation: fondu var(--dur-1) var(--ease); }
@keyframes fondu {
  from { opacity: 0; }
  to { opacity: 1; }
}

.format {
  display: grid;
  gap: var(--s-6);
}
.format + .format {
  margin-top: var(--s-9);
}
/* Onglets actifs : un seul panneau visible, sans la marge prévue pour l'affichage empilé sans JS */
.tabs--actif .format + .format { margin-top: 0; }
.format:focus-visible { outline-offset: 8px; }
.format__lead { margin-top: var(--s-3); color: var(--c-vert); }
.format__lists {
  display: grid;
  margin-top: var(--s-5);
}
.format__lists .repli > .repli__titre { border-bottom: 1px solid var(--c-contour-clair); }
.format__lists .repli > ul { padding: var(--s-4) 0 var(--s-5); }
.format__lieu { margin-top: var(--s-5); }
.liste-plus,
.liste-tiret {
  list-style: none;
  display: grid;
  gap: var(--s-3);
}
.liste-plus li,
.liste-tiret li {
  position: relative;
  padding-left: 26px;
}
.liste-plus li::before {
  content: "+";
  content: "+" / "";
  position: absolute;
  left: 0;
  top: 0;
  font: 600 1.125rem/1.45 var(--font-text);
  color: var(--c-orange);
}
.liste-tiret li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 10px;
  height: 3px;
  background: var(--c-vert);
}
.encadre-strivee {
  margin-top: var(--s-6);
  padding: 20px;
  border-radius: var(--r-md);
  background: var(--c-blanc);
}
.encadre-strivee__titre {
  margin-bottom: var(--s-3);
  font: 600 1rem/1.35 var(--font-text);
}
.encadre-strivee ul {
  list-style: none;
  display: grid;
  gap: var(--s-2);
}
.encadre-strivee strong { font-weight: 600; }
.format__media--technique img,
.format__media--anneaux img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.format__media--technique img { object-position: 50% 35%; }
.format__media--anneaux img { object-position: 50% 100%; }
.phone {
  width: min(200px, 64%);
  margin-inline: auto;
  padding: 8px;
  border-radius: 28px;
  background: var(--c-nuit);
}
.phone img {
  width: 100%;
  border-radius: 20px;
}
.duo-band {
  padding: var(--s-5);
  border-radius: var(--r-lg);
}
.duo-band__titre {
  margin-bottom: var(--s-2);
  font: 500 1.25rem/1.3 var(--font-text);
  color: var(--c-jaune);
}
@media (min-width: 1024px) {
  .tabs__list {
    display: inline-grid;
    grid-template-columns: repeat(3, auto);
  }
  .tabs__tab { padding: 0 20px; }
  .format {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    row-gap: var(--s-6);
    align-items: start;
  }
  .format { grid-template-rows: auto auto auto 1fr; }
  .format__main,
  .duo-band,
  .format__cta { grid-column: 1 / 8; }
  .format__media { grid-column: 9 / -1; grid-row: 1 / -1; }
  .format__media--technique img,
  .format__media--anneaux img { aspect-ratio: 1 / 1; }
  .format__media .phone { width: 200px; }
  .format__lists {
    grid-template-columns: 4fr 3fr;
    column-gap: var(--gap);
    align-items: start;
  }
}

/* 14. Coaching nutritionnel (orange) */
.nutrition__h2 { color: var(--c-blanc); }
.nutrition__head .lead { margin-top: var(--s-2); color: var(--c-nuit); }
/* Nutrition repliée partout (Thomas, 24/10) : titre, sous-titre, photo et « Voir plus » */
.nutrition__head { margin-bottom: 0; }
.nutrition__head .lire-suite { margin-top: var(--s-4); }
.nutri-steps { margin-top: var(--s-7); }
.nutri-steps {
  list-style: none;
  display: grid;
  gap: 40px;
}
.nutri-step__num {
  display: block;
  font: 400 3rem/1 var(--font-display);
  letter-spacing: -0.02em;
}
.nutri-step__titre {
  margin: var(--s-2) 0 var(--s-2);
  font: 600 1.25rem/1.3 var(--font-text);
}
.nutri-step p { max-width: 40ch; }
.tirage {
  width: 64%;
  max-width: 320px;
  margin-top: var(--s-7);
  padding: 8px;
  background: var(--c-blanc);
}
.tirage img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.nutrition__pied {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.nutrition__approche { font: 600 1.125rem/1.4 var(--font-text); }
.nutrition__pied > * + * { margin-top: var(--s-2); }
.nutrition__pied p:not(.nutrition__approche) { font-size: 0.9375rem; max-width: 70ch; }
.nutrition__orientation { font-weight: 500; }
.nutrition__orientation a {
  color: var(--c-nuit);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.nutrition__orientation a:hover { text-decoration-thickness: 2px; }
@media (min-width: 1024px) {
  .nutrition__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
  .nutrition__head { grid-column: 1 / 9; grid-row: 1; align-self: start; }
  .nutri-steps {
    grid-column: 1 / 9;
    grid-row: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .tirage {
    grid-column: 10 / -1;
    grid-row: 1 / span 2;
    width: 100%;
    max-width: none;
    margin-top: 0;
  }
  .nutrition__pied { grid-column: 1 / -1; grid-row: 3; margin-top: var(--s-8); }
}

/* 15. Résultats */
.resultats__text .lead { margin-top: var(--s-3); }
.resultats__text > p:not(.eyebrow):not(.lead) { margin-top: var(--s-5); max-width: 46ch; }
.resultats__text > .resultats__profil { font-weight: 600; color: var(--t-clair-1); }
.resultats__text .liste-intitule {
  margin-top: var(--s-5);
  font-weight: 600;
}
.liste-points {
  list-style: none;
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.liste-points li {
  position: relative;
  padding-left: 20px;
}
.liste-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.8em - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-vert);
}
.avant-apres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: var(--s-7);
}
.avant-apres img {
  width: 100%;
  aspect-ratio: 9 / 10;
  object-fit: cover;
}
.avant-apres__libelle {
  margin-top: var(--s-2);
  font-size: 0.9375rem;
  line-height: 1.35;
}
.avant-apres__libelle span { display: block; }
.avant-apres__libelle span:first-child { font-weight: 600; }
.avant-apres__libelle span + span { color: var(--t-clair-3); }
.avant-apres figcaption {
  grid-column: 1 / -1;
  margin-top: var(--s-4);
  max-width: 70ch;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--t-clair-3);
}
@media (min-width: 1024px) {
  .resultats__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
  .resultats__text { grid-column: 1 / 5; }
  .avant-apres { grid-column: 6 / -1; margin-top: 0; }
}

/* 16. Offres : trois choix, un seul panneau à la fois (retours de Maxime, 24/10/2026)
   Même mécanique que les onglets des formats (script.js, section 2). Chaque choix dit ce qu'il contient et son prix
   d'entrée : toute l'offre se lit d'un coup d'œil, avant même de cliquer. Sans JavaScript, la liste reste cachée et
   les trois panneaux s'empilent, chacun sous son titre. */
.choix {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-7);
}
.choix__onglet {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  column-gap: var(--s-4);
  row-gap: 2px;
  width: 100%;
  min-height: 72px;
  padding: 14px 18px;
  border: 1px solid var(--c-contour-sombre);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--c-blanc);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
/* Pastille de choix, lue comme un bouton radio : un anneau, plein d'orange une fois choisi */
.choix__onglet::before {
  content: "";
  grid-row: 1 / span 2;
  width: 20px;
  height: 20px;
  border: 2px solid var(--t-sombre-3);
  border-radius: 50%;
  transition: border-color var(--dur-2) var(--ease), border-width var(--dur-2) var(--ease);
}
.choix__titre {
  font: 500 1.125rem/1.25 var(--font-display);
  letter-spacing: -0.01em;
}
.choix__detail {
  font: 500 var(--fs-small)/1.35 var(--font-text);
  color: var(--t-sombre-2);
}
.choix__onglet:hover { background: var(--c-nuit-2); }
.choix__onglet[aria-selected="true"] {
  border-color: var(--c-blanc);
  background: var(--c-blanc);
  color: var(--c-nuit);
}
.choix__onglet[aria-selected="true"]::before {
  border-width: 6px;
  border-color: var(--c-orange);
}
.choix__onglet[aria-selected="true"] .choix__detail { color: var(--t-clair-2); }
.offres__panneau + .offres__panneau { margin-top: var(--s-9); }
.tabs--actif .offres__panneau + .offres__panneau { margin-top: 0; }
/* Une ancre vers un panneau s'arrête sous les choix (hauteur mesurée par script.js) : on voit le choix et son contenu */
.tabs--actif .offres__panneau { scroll-margin-top: calc(var(--hauteur-choix, 0px) + var(--s-7)); }
.offres__panneau:focus-visible { outline-offset: 8px; }
.offres__panneau-titre {
  margin-bottom: var(--s-5);
  font: 400 var(--fs-h3)/1.2 var(--font-display);
  letter-spacing: -0.01em;
}
.offres__panneau-sous {
  display: block;
  margin-top: var(--s-1);
  font: 500 1rem/1.4 var(--font-text);
  letter-spacing: 0;
  color: var(--accent);
}
/* Onglets actifs : le choix sélectionné tient lieu de titre, qu'on garde pour les lecteurs d'écran */
.tabs--actif .offres__panneau-titre {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Dès 768 px, une seule barre d'onglets (Thomas, 24/10 : trois cartes posées sur les trois offres faisaient croire
   que chaque choix allait avec la carte d'en dessous) : un cadre, trois segments, le choisi en plein */
@media (min-width: 768px) {
  .choix {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--c-contour-sombre);
    border-radius: calc(var(--r-md) + 4px);
  }
  .choix__onglet {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 0;
    padding: 10px 18px;
    border: 0;
    border-radius: var(--r-md);
  }
  .choix__onglet::before { content: none; }
  .choix__titre { font-size: 1.0625rem; }
  .choix__detail { font-size: 0.8125rem; }
}
@media (min-width: 1024px) {
  .choix { margin-bottom: var(--s-8); }
  .tabs--actif .offres__panneau { scroll-margin-top: calc(var(--hauteur-choix, 0px) + var(--s-8)); }
  .choix__onglet { padding: 12px 22px; }
}

/* Packages : core, prime, signature */
.offres__intro {
  margin-top: var(--s-5);
  max-width: 52ch;
  color: var(--t-sombre-2);
}
.offres__cartes {
  display: grid;
  gap: var(--s-5);
}
.offre {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: var(--r-lg);
  color: var(--o-fg);
}
.offre--core {
  border: 1px solid var(--c-contour-sombre);
  --o-nom: var(--c-ciel);
  --o-fg: var(--c-blanc);
  --o-point: var(--c-ciel);
  --o-ligne: var(--c-ligne-sombre);
  --o-boite: var(--c-nuit-2);
  --o-boite-ligne: rgba(255, 255, 253, 0.12);
  --o-boite-2: var(--t-sombre-2);
  --o-survol: var(--c-ciel);
}
.offre--prime {
  margin-top: 12px;
  background: var(--c-orange);
  --o-nom: var(--c-blanc);
  --o-fg: var(--c-nuit);
  --o-point: var(--c-nuit);
  --o-ligne: rgba(21, 34, 43, 0.25);
  --o-boite: var(--c-nuit);
  --o-boite-ligne: var(--c-ligne-sombre);
  --o-boite-2: var(--t-sombre-2);
  --o-survol: var(--c-nuit);
  --focus: var(--c-nuit);
}
.offre--signature {
  background: var(--c-blanc);
  --o-nom: var(--c-vert);
  --o-fg: var(--c-nuit);
  --o-point: var(--c-vert);
  --o-ligne: var(--c-ligne-claire);
  --o-boite: var(--c-vert);
  --o-boite-ligne: rgba(255, 255, 253, 0.2);
  --o-boite-2: var(--t-vert-2);
  --o-survol: var(--c-vert);
  --focus: var(--c-nuit);
}
.offre__badge {
  position: absolute;
  z-index: 1;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
}
.offre__nom {
  font: 700 var(--fs-offer)/1 var(--font-display);
  letter-spacing: -0.02em;
  text-transform: lowercase;
  color: var(--o-nom);
}
/* Format de l'offre, avec le pictogramme des onglets Formats (téléphone = en ligne, téléphone et haltère = hybride) */
.offre__format {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  font: 600 0.9375rem/1.3 var(--font-text);
}
.offre__format-ico {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--o-point);
}
.offre__accroche {
  margin-top: var(--s-3);
  font: 500 1.0625rem/1.4 var(--font-text);
}
/* Ce que l'offre ajoute, en gros et en couleur, sur un fond nuit où le code des piliers se lit */
.offre__inclus {
  margin-top: var(--s-5);
  padding: 16px 18px 18px;
  border-radius: var(--r-md);
  background: var(--c-nuit);
  color: var(--c-blanc);
}
.offre--core .offre__inclus { background: var(--c-nuit-2); }
/* Jauge : les 4 piliers dans leur ordre (entraînement, récupération, nutrition, mindset),
   puis les séances de personal training en blanc, hors du code couleur des piliers */
.jauge {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: var(--s-4);
}
.jauge li {
  height: 4px;
  background: var(--j);
  transform-origin: left center;
}
.jauge__e { --j: var(--c-vert-filet); }
.jauge__r { --j: var(--c-ciel); }
.jauge__m { --j: var(--c-jaune); }
.jauge__n { --j: var(--c-orange); }
.jauge__pt { --j: var(--c-blanc); }
.jauge .jauge__vide { --j: rgba(255, 255, 253, 0.16); }
.offre__ajoute {
  font: 400 clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem)/1.15 var(--font-display);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.offre__ajoute-detail {
  display: block;
  margin-top: var(--s-2);
  font: 500 1rem/1.4 var(--font-text);
  letter-spacing: 0;
  color: var(--t-sombre-2);
}
/* Chaque ajout d'un seul bloc, retrait suspendu après le « + » */
.ajout {
  display: inline-block;
  padding-left: 0.85em;
  text-indent: -0.85em;
}
.offre__ajoute .ajout { display: block; }
/* Prime et signature rappellent la base avant leurs ajouts (Thomas, 24/10) */
.ajout--base { padding-left: 0; text-indent: 0; color: var(--c-blanc); }
.ajout--nutrition { color: var(--c-orange); }
.ajout--pt { color: var(--c-blanc); }
.offre__liste { list-style: none; }
.offre__liste li {
  position: relative;
  padding: 10px 0 10px 22px;
  border-bottom: 1px solid var(--o-ligne);
  line-height: 1.45;
}
.offre__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(10px + 0.725em - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--o-point);
}
.offre__liste .offre__ajout { font-weight: 600; }
/* « Voir le détail » : la liste complète, fermée par défaut */
.repli--offre {
  margin-top: var(--s-4);
  margin-bottom: var(--s-5);
  --repli-signe: var(--o-point);
}
.repli--offre > .repli__titre {
  border-bottom: 1px solid var(--o-ligne);
  font: 600 1rem/1.3 var(--font-text);
}

.boite-prix {
  margin-top: auto;
  margin-bottom: var(--s-4);
  padding: 8px 20px;
  border-radius: var(--r-md);
  background: var(--o-boite);
  color: var(--c-blanc);
}
.boite-prix--vert { --focus: var(--c-jaune); }
.boite-prix__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px var(--s-3);
  padding-block: 10px;
}
.boite-prix__ligne + .boite-prix__ligne { border-top: 1px solid var(--o-boite-ligne); }
.boite-prix dt {
  font: 500 var(--fs-small)/1.2 var(--font-text);
  color: var(--o-boite-2);
  white-space: nowrap;
}
.boite-prix dd { margin-left: auto; text-align: right; }
.prix {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.prix__devise,
.prix__unite {
  font: 500 var(--fs-pill)/1 var(--font-text);
}
.boite-prix .prix__devise,
.boite-prix .prix__unite { color: var(--o-boite-2); }
.prix__montant {
  font: 400 var(--fs-price)/1 var(--font-display);
  letter-spacing: -0.02em;
}
.prix__total {
  display: block;
  margin-top: 4px;
  white-space: nowrap;
  font-size: var(--fs-small);
  line-height: 1.3;
  color: var(--o-boite-2);
}
.offres__note {
  margin-top: var(--s-6);
  max-width: 70ch;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--t-sombre-2);
}
@media (min-width: 640px) {
  .offre { padding: 28px; }
}
@media (min-width: 1024px) {
  .offres__cartes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: stretch;
    padding-block: 24px;
  }
  .offre--prime { margin-block: -24px; }
  /* Les rangées des trois cartes s'alignent (nom, format, accroche, ajout, détail, prix, bouton) */
  @supports (grid-template-rows: subgrid) {
    .offres__cartes { grid-template-rows: repeat(7, auto); row-gap: 0; }
    .offre {
      display: grid;
      grid-row: span 7;
      grid-template-rows: subgrid;
    }
    .offre--prime { padding-block: 52px; }
    .boite-prix {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-top: 0;
    }
  }
}

/* Comparatif à coches : une ligne par prestation, trois colonnes */
.comparatif { margin-top: var(--s-7); }
.comparatif__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
/* Aucun mot coupé au milieu : césure française avec trait d'union, seulement si un mot ne tient pas.
   Safari coupe plus volontiers (« vi-déos », « don-nées ») : quatre lettres au moins de chaque côté. */
.comparatif__table th,
.comparatif__table td {
  overflow-wrap: normal;
  hyphens: auto;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
  hyphenate-limit-chars: 8 4 4;
  padding: 12px 4px;
  border-bottom: 1px solid var(--c-ligne-sombre);
  vertical-align: middle;
}
.comparatif__table thead th {
  position: sticky;
  top: var(--header-h);
  z-index: 1;
  background: var(--c-nuit);
  border-bottom-color: var(--c-contour-sombre);
}
.comparatif__table thead th:first-child { width: 37%; }
.comparatif__table tbody th {
  padding-left: 0;
  font: 500 var(--fs-small)/1.35 var(--font-text);
  text-align: left;
  color: var(--c-blanc);
}
.comparatif__offre {
  padding-top: 14px;
  border-top: 4px solid var(--o-col);
  font: 700 0.9375rem/1.1 var(--font-display);
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--o-col);
}
.comparatif__offre--core { --o-col: var(--c-ciel); }
.comparatif__offre--prime { --o-col: var(--c-orange); }
.comparatif__offre--signature { --o-col: var(--c-blanc); }
.comparatif__oui,
.comparatif__non { text-align: center; }
/* Coche dessinée en CSS, texte « Inclus » masqué pour les lecteurs d'écran */
.comparatif__oui::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 13px;
  margin-top: -3px;
  border: solid var(--coche, var(--c-ciel));
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
  vertical-align: middle;
}
.comparatif__non::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 2px;
  background: var(--t-sombre-3);
  vertical-align: middle;
}
.comparatif__ligne--nutrition { --coche: var(--c-orange); }
.comparatif__table .comparatif__ligne--nutrition th { color: var(--c-orange); }
.comparatif__ligne--pt { --coche: var(--c-blanc); }
/* « personal training » passe entier à la ligne, jamais « perso-nal » */
.comparatif__ligne--pt th { hyphens: manual; }
@media (max-width: 399px) {
  .comparatif__table thead th:first-child { width: 40%; }
  .comparatif__table th,
  .comparatif__table td { padding-inline: 2px; }
  .comparatif__offre { font-size: 0.8125rem; }
}
@media (min-width: 640px) {
  .comparatif__table th,
  .comparatif__table td { padding-block: 14px; }
  .comparatif__table tbody th { font-size: 1rem; }
  .comparatif__offre { font-size: 1.25rem; }
}
/* Ordinateur : un panneau à part, calé à gauche comme la note des prix, pour que ses colonnes
   ne se lisent pas comme le prolongement des cartes du dessus (contour des cartes sur sombre, fond nuit) */
@media (min-width: 1024px) {
  .comparatif {
    max-width: calc((100% + var(--gap)) * 8 / 12 - var(--gap));
    margin-top: var(--s-8);
    padding: var(--s-2) var(--s-6) var(--s-4);
    border: 1px solid var(--c-contour-sombre);
    border-radius: var(--r-lg);
  }
  .comparatif__table thead th:first-child { width: 40%; }
  .comparatif__table tbody tr:last-child > * { border-bottom: 0; }
}

/* 17. Offres : présentiel et nutrition (panneaux 2 et 3, sur le fond nuit de la section) */
.tuiles {
  list-style: none;
  display: grid;
  gap: var(--s-4);
}
.tuile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 52px 20px 20px;
  border: 1px solid var(--c-contour-sombre);
  border-radius: var(--r-lg);
}
.tuile__nom { font: 500 1rem/1.3 var(--font-text); }
.tuile__prix {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: var(--s-3);
  white-space: nowrap;
}
.tuile__note {
  margin: var(--s-1) 0 var(--s-5);
  font-size: var(--fs-small);
  color: var(--t-sombre-2);
}
.tuile .btn { margin-top: auto; }
.tuile__pastilles {
  position: absolute;
  top: 16px;
  left: 20px;
  right: 16px;
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
}
.tuile__pastilles .pill--nuit { margin-right: auto; }
.tuile--vert {
  border-color: var(--c-vert);
  background: var(--c-vert);
  color: var(--c-blanc);
}
.tuile--vert .tuile__note { color: var(--t-vert-2); }

.duo {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--c-contour-sombre);
  border-radius: var(--r-lg);
}
.duo > * { min-width: 0; }
.duo__titre {
  font: 500 1.25rem/1.3 var(--font-text);
  color: var(--c-jaune);
}
.duo__texte p + p { margin-top: var(--s-1); color: var(--t-sombre-2); }
.duo__prix div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: 10px;
  border-top: 1px solid var(--c-ligne-sombre);
}
.duo__prix div:last-child { border-bottom: 1px solid var(--c-ligne-sombre); }
.duo__prix dt {
  font-size: var(--fs-small);
  color: var(--t-sombre-2);
}
.duo__prix dd {
  font: 400 1.5rem/1.1 var(--font-display);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.nutri-seule {
  display: grid;
  gap: var(--s-6);
}
.liste-ronds { list-style: none; }
.liste-ronds li {
  position: relative;
  padding: 14px 0 14px 26px;
  border-bottom: 1px solid var(--c-ligne-sombre);
  font-weight: 500;
}
.liste-ronds li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(14px + 0.8em - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-orange);
}
.carte-nutri {
  padding: 28px;
  border-radius: var(--r-lg);
  text-align: center;
}
.carte-nutri__libelle { font: 500 1rem/1.3 var(--font-text); }
.carte-nutri .prix { margin-top: var(--s-2); }
.carte-nutri__note {
  margin: var(--s-2) 0 var(--s-5);
  font-size: var(--fs-small);
}
@media (min-width: 768px) {
  .tuiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gap);
  }
}
@media (min-width: 1024px) {
  .duo {
    grid-template-columns: minmax(0, 5fr) auto auto;
    align-items: center;
    column-gap: var(--s-7);
    padding: var(--s-5) var(--s-6);
  }
  .duo__prix {
    display: flex;
    gap: var(--s-7);
  }
  .duo__prix div {
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 4px;
    padding: 0;
    border: 0;
  }
  .duo__prix div:last-child { border: 0; }
  .nutri-seule {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
}

/* 18. Le coach */
.coach__media {
  position: relative;
  overflow: hidden;
  width: min(100%, 416px);
  aspect-ratio: 4 / 5;
  margin-bottom: var(--s-7);
}
.coach__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}
.coach__texte .lead { margin-top: var(--s-3); }
.coach__recit { margin-top: var(--s-6); color: var(--t-sombre-2); }
.coach__recit p:first-child { color: var(--c-blanc); }
.repli--recit > .repli__titre {
  justify-content: flex-start;
  gap: var(--s-3);
  min-height: 44px;
  padding: 0;
  font: 600 1rem/1.3 var(--font-text);
  color: var(--accent);
}
.repli__corps > * + * { margin-top: 1em; }
.repli--recit[open] > .repli__titre { margin-bottom: var(--s-2); }
.citation {
  margin-block: var(--s-7);
  font: 400 clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem)/1.15 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--c-jaune);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.citation p { max-width: 24ch; }
.coach__vision { color: var(--t-sombre-2); max-width: 65ch; }
.reperes {
  list-style: none;
  margin-top: var(--s-6);
}
.reperes--suite { margin-top: 0; }
.reperes li {
  padding-block: 12px;
  border-top: 1px solid var(--c-ligne-sombre);
  font: 500 1rem/1.4 var(--font-text);
  color: var(--c-blanc);
}
.coach__insta { margin-top: var(--s-4); }
@media (min-width: 1024px) {
  .coach__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
  .coach__media {
    grid-column: 1 / 6;
    width: 100%;
    aspect-ratio: 2 / 3;
    max-height: calc(100vh - var(--header-h) - 64px);
    max-height: calc(100svh - var(--header-h) - 64px);
    margin-bottom: 0;
    position: sticky;
    top: calc(var(--header-h) + 32px);
  }
  .coach__texte {
    grid-column: 6 / -1;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .coach__texte > * { grid-column: 1 / -1; }
}

/* 19. En compétition (galerie) */
.galerie {
  --slide-h: 380px;
  --piste-debut: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
}
.galerie__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.galerie__tete .h2 { flex: 1 1 100%; }
.galerie__nav {
  display: flex;
  gap: var(--s-2);
  margin-left: auto;
}
.galerie__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: var(--c-nuit-2);
  color: var(--c-blanc);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.galerie__btn:hover { background: var(--c-ligne-sombre); }
.galerie__btn svg { width: 20px; height: 20px; }
.galerie__btn[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.galerie__btn[aria-disabled="true"]:hover { background: var(--c-nuit-2); }
.galerie__piste {
  list-style: none;
  display: flex;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--piste-debut) var(--gutter);
  padding: 0 var(--gutter) 12px var(--piste-debut);
  scrollbar-width: thin;
  scrollbar-color: var(--c-contour-sombre) transparent;
}
.galerie__piste:focus-visible { outline-offset: -3px; }
.galerie__piste li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.galerie__piste img {
  height: var(--slide-h);
  width: auto;
  max-width: none;
}
@media (prefers-reduced-motion: no-preference) {
  .galerie__piste { scroll-behavior: smooth; }
}
@media (min-width: 640px) {
  .galerie { --slide-h: 440px; }
  .galerie__piste { gap: 12px; }
  .galerie__tete .h2 { flex: 1 1 auto; }
}
@media (min-width: 1024px) {
  .galerie { --slide-h: 520px; }
}

/* 20. Le lieu */
.lieu__texte .lead { margin-top: var(--s-3); }
.lieu__texte > p:not(.eyebrow):not(.lead) { margin-top: var(--s-5); max-width: 52ch; }
/* Trois repères du lieu, chacun avec son pictogramme */
.reperes-lieu {
  list-style: none;
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-5);
  max-width: 52ch;
}
.reperes-lieu li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}
.reperes-lieu__ico {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--c-vert);
}
.reperes-lieu strong { font-weight: 600; }
.reperes-lieu .adresse { margin-top: 0; }
.reperes-lieu .adresse::before { content: none; }
.adresse {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--s-5);
  font-weight: 500;
}
.adresse::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-orange);
}
.lieu__texte .link--seul { margin-top: var(--s-2); }
.lieu__photos {
  display: grid;
  grid-template-columns: 702fr 1133fr;
  gap: 4px;
  align-items: start;
  margin-top: var(--s-7);
}
.lieu__photos img { width: 100%; }
@media (min-width: 1024px) {
  .lieu__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: center;
  }
  .lieu__texte { grid-column: 1 / 6; }
  .lieu__photos { grid-column: 6 / -1; margin-top: 0; }
}

/* 21. FAQ */
.faq__question {
  margin-top: var(--s-4);
  color: var(--t-clair-2);
}
.faq__question .link { font-weight: 600; }
.faq__liste { margin-top: var(--s-7); }
.faq__item { border-bottom: 1px solid var(--c-contour-clair); }
.faq__item:first-child { border-top: 1px solid var(--c-contour-clair); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 56px;
  padding: 18px 0;
  list-style: none;
  font: 600 1.125rem/1.35 var(--font-text);
  color: var(--c-nuit);
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ""; }
.faq__signe {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}
.faq__signe::before,
.faq__signe::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 2px;
  background: var(--c-vert);
}
.faq__signe::after {
  transform: rotate(90deg);
  transition: transform var(--dur-2) var(--ease);
}
.faq__item[open] .faq__signe::after { transform: rotate(0deg); }
.faq__reponse {
  padding-bottom: var(--s-5);
  max-width: 60ch;
  font-size: 1rem;
  color: var(--t-clair-2);
}
.faq__reponse > * + * { margin-top: var(--s-2); }
@media (min-width: 1024px) {
  .faq__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
  .faq__tete { grid-column: 1 / 5; }
  .faq__liste { grid-column: 6 / -1; margin-top: 0; }
}

/* 22. Contact */
.contact { position: relative; }
.contact__contenu .lead { margin-top: var(--s-3); }
.contact__lignes {
  list-style: none;
  margin-top: var(--s-6);
}
.contact__lignes li + li { border-top: 1px solid var(--c-ligne-sombre); }
.contact-ligne {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  column-gap: var(--s-4);
  min-height: 56px;
  padding-block: 12px;
  color: var(--c-blanc);
  text-decoration: none;
}
.contact-ligne__ico {
  width: 24px;
  height: 24px;
  color: var(--c-blanc);
}
.contact-ligne__point {
  justify-self: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-orange);
}
.contact-ligne__libelle {
  display: block;
  font: 400 var(--fs-pill)/1.3 var(--font-text);
  color: var(--t-sombre-3);
}
.contact-ligne__valeur {
  display: block;
  font: 500 1.25rem/1.3 var(--font-text);
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-1) var(--ease);
}
.contact-ligne:hover .contact-ligne__valeur { text-decoration-color: currentColor; }
.contact__encadre {
  margin-top: var(--s-6);
  padding: 16px 20px;
  border: 1px solid var(--c-jaune);
  border-radius: var(--r-md);
  color: var(--c-jaune);
}
.contact__contenu .btn { margin-top: var(--s-5); width: 100%; }
.contact__media {
  margin: var(--s-7) calc(-1 * var(--gutter)) calc(-1 * var(--section-y));
}
.contact__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 30%;
}
@media (min-width: 640px) {
  .contact__contenu .btn { width: auto; }
}
@media (min-width: 1024px) {
  .contact {
    display: flex;
    align-items: center;
    min-height: min(720px, 80vh);
    min-height: min(720px, 80svh);
  }
  .contact__grid { position: static; }
  .contact__contenu {
    margin-left: calc((100% + var(--gap)) * 6 / 12);
    max-width: calc((100% + var(--gap)) * 6 / 12 - var(--gap));
  }
  .contact__media {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(var(--c-off) + (var(--c-w) + var(--gap)) * 5 / 12 - var(--gap));
    margin: 0;
  }
  .contact__media img {
    height: 100%;
    aspect-ratio: auto;
  }
}

/* 23. Pied de page */
.site-footer {
  padding: var(--s-8) 0 var(--s-6);
  border-top: 1px solid var(--c-ligne-sombre);
}
.site-footer__grille {
  display: grid;
  gap: var(--s-6);
}
.site-footer__logo { color: var(--c-blanc); }
.site-footer__logo .logo { height: 32px; }
.site-footer .piliers-legende { margin-top: var(--s-5); }
.site-footer__accroche {
  margin-top: var(--s-5);
  max-width: 32ch;
  font-size: var(--fs-small);
  color: var(--t-sombre-2);
}
.site-footer__liens { list-style: none; }
.site-footer__liens a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-inline-size: 44px;
  color: var(--c-blanc);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: text-decoration-color var(--dur-1) var(--ease);
}
.site-footer__liens a:hover { text-decoration-color: var(--c-orange); }
.site-footer__bas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-ligne-sombre);
  font-size: var(--fs-small);
  color: var(--t-sombre-3);
}
@media (min-width: 640px) {
  .site-footer__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
  .site-footer__marque { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .site-footer__grille { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .site-footer__marque { grid-column: 1 / 6; }
  .site-footer__plan { grid-column: 7 / 10; }
  .site-footer__contact { grid-column: 10 / -1; }
}

/* 24. Page 404 */
.erreur { min-height: calc(70vh - var(--header-h)); min-height: calc(70svh - var(--header-h)); }
.erreur .doc__inner > p { color: var(--fg-2); }

/* 25. Mouvement : peu d'effets, tous au service de la lecture.
   - Rien n'est masqué sans la classe `js` (posée sur <html> par assets/js/early.js, script externe bloquant).
   - Les apparitions sont déclenchées par script.js (IntersectionObserver), qui pose aussi `js-pret`.
   - Filet de sécurité : si script.js ne tourne pas, `js-pret` manque et une animation rend tout visible après 2 s.
   - prefers-reduced-motion: reduce : rien de ce qui suit ne s'applique, tout est visible et immobile.
   Interdits maintenus : curseur lumineux, grain, parallaxe, zoom lent, lettres qui montent, compteurs,
   inclinaison 3D, pulsation permanente. */
@keyframes rp-monte { from { opacity: 0; translate: 0 14px; } }
@keyframes rp-fondu { from { opacity: 0; } }
@keyframes rp-trace { from { transform: scaleX(0); } }
@keyframes rp-secours-bloc { to { opacity: 1; translate: none; } }
@keyframes rp-secours-trait { to { transform: none; } }
@keyframes rp-secours-num { to { scale: 1; background-color: var(--num-fond); border-color: var(--num-fond); color: var(--num-texte); } }

@media screen and (prefers-reduced-motion: no-preference) {
  /* Hero : une seule fois au chargement, le titre, puis les filets, puis les boutons */
  .js .hero__kicker { animation: rp-monte 560ms var(--ease) both; }
  .js .hero__title { animation: rp-monte 620ms var(--ease) 90ms both; }
  .js .hero__lead { animation: rp-monte 560ms var(--ease) 200ms both; }
  .js .hero .piliers-legende li { animation: rp-fondu 420ms var(--ease) 320ms both; }
  .js .hero .piliers-legende li::before { transform-origin: left center; animation: rp-trace 640ms var(--ease) 320ms both; }
  .js .hero .piliers-legende li:nth-child(2),
  .js .hero .piliers-legende li:nth-child(2)::before { animation-delay: 390ms; }
  .js .hero .piliers-legende li:nth-child(3),
  .js .hero .piliers-legende li:nth-child(3)::before { animation-delay: 460ms; }
  .js .hero .piliers-legende li:nth-child(4),
  .js .hero .piliers-legende li:nth-child(4)::before { animation-delay: 530ms; }
  .js .hero__actions { animation: rp-monte 560ms var(--ease) 480ms both; }

  /* Apparition douce des blocs au défilement, léger décalage dans une même grille */
  .js [data-reveal] {
    opacity: 0;
    translate: 0 14px;
    transition: opacity 520ms var(--ease) var(--delai, 0ms), translate 520ms var(--ease) var(--delai, 0ms);
  }
  .js [data-reveal].is-in,
  .js [data-reveal]:focus-within { opacity: 1; translate: none; }
  [data-reveal-groupe] > :nth-child(2) { --delai: 90ms; }
  [data-reveal-groupe] > :nth-child(3) { --delai: 180ms; }
  [data-reveal-groupe] > :nth-child(4) { --delai: 270ms; }
  [data-reveal-groupe] > :nth-child(n+5) { --delai: 360ms; }

  /* Filets de couleur qui se tracent quand ils entrent */
  .js .pilier::before,
  .js .jauge li,
  .js .site-footer .piliers-legende li::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 700ms var(--ease) calc(var(--delai, 0ms) + 140ms);
  }
  .js .pilier.is-in::before,
  .js .offre.is-in .jauge li,
  .js .site-footer .piliers-legende.is-in li::before { transform: none; }
  .js .jauge li { transition-delay: calc(var(--delai, 0ms) + 260ms); }
  .js .jauge li:nth-child(2) { transition-delay: calc(var(--delai, 0ms) + 330ms); }
  .js .jauge li:nth-child(3) { transition-delay: calc(var(--delai, 0ms) + 400ms); }
  .js .jauge li:nth-child(4) { transition-delay: calc(var(--delai, 0ms) + 470ms); }
  .js .jauge li:nth-child(5) { transition-delay: calc(var(--delai, 0ms) + 540ms); }
  .js .site-footer .piliers-legende li:nth-child(2)::before { transition-delay: 210ms; }
  .js .site-footer .piliers-legende li:nth-child(3)::before { transition-delay: 280ms; }
  .js .site-footer .piliers-legende li:nth-child(4)::before { transition-delay: 350ms; }

  /* Comparatif : les lignes arrivent l'une après l'autre */
  .js .comparatif tbody tr { opacity: 0; transition: opacity 420ms var(--ease); }
  .js .comparatif.is-in tbody tr { opacity: 1; }
  .js .comparatif tbody tr:nth-child(2) { transition-delay: 60ms; }
  .js .comparatif tbody tr:nth-child(3) { transition-delay: 120ms; }
  .js .comparatif tbody tr:nth-child(4) { transition-delay: 180ms; }
  .js .comparatif tbody tr:nth-child(5) { transition-delay: 240ms; }
  .js .comparatif tbody tr:nth-child(6) { transition-delay: 340ms; }
  .js .comparatif tbody tr:nth-child(7) { transition-delay: 440ms; }

  /* 4 piliers, écran tactile : le texte apparaît quand la carte entre dans l'écran */
  .js .pilier__texte {
    opacity: 0;
    translate: 0 8px;
    transition: opacity 420ms var(--ease), translate 420ms var(--ease);
  }
  .js .pilier.is-in .pilier__texte {
    opacity: 1;
    translate: none;
    transition-delay: calc(var(--delai, 0ms) + 420ms);
  }

  /* Plan d'action : chaque étape se dévoile, la ligne de progression se remplit (script.js pose --fill) */
  .js .frise__body {
    opacity: 0;
    translate: 0 14px;
    transition: opacity 520ms var(--ease) 120ms, translate 520ms var(--ease) 120ms;
  }
  .js .frise__step.is-in .frise__body,
  .js .frise__step:focus-within .frise__body { opacity: 1; translate: none; }
  .js .frise__num {
    background-color: var(--c-blanc);
    border-color: var(--c-contour-clair);
    color: var(--t-clair-3);
    scale: 0.86;
    transition: background-color 320ms var(--ease), border-color 320ms var(--ease), color 320ms var(--ease), scale 420ms var(--ease);
  }
  .js .frise__step.is-in .frise__num,
  .js .frise__step:focus-within .frise__num {
    background-color: var(--num-fond);
    border-color: var(--num-fond);
    color: var(--num-texte);
    scale: 1;
  }
  .js .frise__step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 15px;
    top: 40px;
    bottom: 8px;
    width: 2px;
    background: var(--segment);
    transform: scaleY(var(--fill, 0));
    transform-origin: center top;
    transition: transform 160ms linear;
  }

  /* Filet de sécurité si script.js ne tourne pas */
  .js:not(.js-pret) [data-reveal],
  .js:not(.js-pret) .frise__body,
  .js:not(.js-pret) .pilier__texte,
  .js:not(.js-pret) .comparatif tbody tr { animation: rp-secours-bloc 400ms var(--ease) 2s forwards; }
  .js:not(.js-pret) .pilier::before,
  .js:not(.js-pret) .jauge li,
  .js:not(.js-pret) .site-footer .piliers-legende li::before { animation: rp-secours-trait 400ms var(--ease) 2s forwards; }
  .js:not(.js-pret) .frise__num { animation: rp-secours-num 400ms var(--ease) 2s forwards; }
}
@media screen and (prefers-reduced-motion: no-preference) and (min-width: 640px) {
  .js .frise__step:not(:last-child)::after { left: 19px; top: 48px; }
}

/* Souris : le texte des piliers se lit au survol et au focus (script.js rend chaque pilier focusable,
   d'où js-pret : si le script manque, le filet de sécurité affiche les textes) ; les cartes d'offre se soulèvent */
@media screen and (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .js.js-pret .pilier {
    display: grid;
    grid-template-areas: "titre" "scene";
    align-content: start;
  }
  .js.js-pret .pilier__titre { grid-area: titre; margin-bottom: var(--s-4); }
  .js.js-pret .pilier__num,
  .js.js-pret .pilier__texte { grid-area: scene; }
  .js.js-pret .pilier__num {
    align-self: start;
    margin: 0;
    font-size: var(--fs-stat);
    line-height: 0.9;
    letter-spacing: -0.03em;
    transition: opacity 320ms var(--ease), translate 320ms var(--ease);
  }
  .js.js-pret .pilier:hover .pilier__num,
  .js.js-pret .pilier:focus-within .pilier__num { opacity: 0; translate: 0 -8px; }
  .js.js-pret .pilier.is-in .pilier__texte { opacity: 0; translate: 0 8px; transition-delay: 0ms; }
  .js.js-pret .pilier:hover .pilier__texte,
  .js.js-pret .pilier:focus-within .pilier__texte { opacity: 1; translate: none; transition-delay: 60ms; }
  .js.js-pret .pilier::after {
    content: "+";
    content: "+" / "";
    position: absolute;
    top: var(--s-5);
    right: 0;
    font: 400 1.75rem/1.2 var(--font-display);
    color: var(--t-sombre-3);
    transition: opacity var(--dur-2) var(--ease);
  }
  .js.js-pret .pilier:hover::after,
  .js.js-pret .pilier:focus-within::after { opacity: 0; }

  .offre { transition: transform 260ms var(--ease); }
  .js .offre[data-reveal] {
    transition: opacity 520ms var(--ease) var(--delai, 0ms), translate 520ms var(--ease) var(--delai, 0ms), transform 260ms var(--ease);
  }
  .offre::after {
    content: "";
    position: absolute;
    top: 0;
    left: var(--r-lg);
    right: var(--r-lg);
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--o-survol);
    transform: scaleX(0);
    transition: transform 320ms var(--ease);
  }
  .offre:hover { transform: translateY(-4px); }
  .offre:hover::after { transform: none; }
}

/* 26. Mobile allégé (retours de Thomas, 19/10) : moins de texte, des images qui remplissent leur cadre.
   Rien n'est supprimé : les textes longs passent derrière « Lire la suite » (section 6, `data-replie-mobile`),
   un bouton de divulgation lisible au clavier et par les lecteurs d'écran ; sans JavaScript, tout reste affiché.
   Dès 1024 px, on replie moins (section 6, `data-replie` et `data-replie-ordinateur`). */
.hero__fond picture,
.approche__fond picture {
  display: block;
  width: 100%;
  height: 100%;
}
@media (max-width: 1023px) {
  /* L'approche : la photo du tableau reste fondue derrière le texte, comme sur ordinateur
     (Thomas, 19/10 : « beaucoup trop grosse… fondue derrière le texte de ce même bloc ») ;
     voile uni un peu plus dense sur la colonne unique, Clément reste lisible en haut à gauche */
  .approche__fond::after { background: rgba(255, 255, 253, 0.86); }
  .approche__fond img { object-position: 6% 30%; }

  /* Nutrition : la photo occupe toute la largeur, sans cadre */
  .tirage {
    width: 100%;
    max-width: none;
    padding: 0;
    background: none;
  }

  /* Le lieu : deux photos de même hauteur qui remplissent la largeur */
  .lieu__photos {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
  .lieu__photos picture { display: block; height: 100%; }
  .lieu__photos img {
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }

  /* Offres et carnets : les cartes se parcourent au doigt, la suivante dépasse pour inviter à glisser.
     Barre de défilement fine visible (souris sans molette horizontale, zoom à 200 %) ; les boutons des cartes
     restent atteignables au clavier, et le focus fait défiler la piste. */
  .offres__cartes,
  .tuiles {
    display: flex;
    align-items: flex-start;
    gap: var(--s-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1);
    padding: var(--s-5) var(--gutter) var(--s-4);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: thin;
    scrollbar-color: var(--c-contour-sombre) transparent;
  }
  .offres__cartes > .offre,
  .tuiles > .tuile {
    flex: 0 0 84%;
    scroll-snap-align: start;
  }

  /* Photos carrées : elles remplissent leur cadre sans allonger la page */
  .tirage img,
  .format__media--technique img,
  .format__media--anneaux img { aspect-ratio: 1 / 1; }
  .tirage img { object-position: 50% 10%; }
  .coach__media { aspect-ratio: 1 / 1; }
  .coach__media img { object-position: 50% 45%; }

  /* Pied de page : le plan de la page sur deux colonnes */
  .site-footer__plan .site-footer__liens {
    columns: 2;
    column-gap: var(--gap);
  }
}
/* Téléphone : une carte à la fois, centrée (script.js centre prime et le carnet de 5 au chargement,
   pour que le badge « Recommandé » et les deux voisines se voient) ; « 1 séance » sans bande vide en haut */
@media (max-width: 639px) {
  .offres__cartes > .offre,
  .tuiles > .tuile { scroll-snap-align: center; }
  .tuile:not(:has(.tuile__pastilles)) { padding-top: 20px; }
}
/* Tablette : deux cartes visibles dans les pistes, photos plafonnées */
@media (min-width: 640px) and (max-width: 1023px) {
  .offres__cartes > .offre,
  .tuiles > .tuile { flex-basis: 46%; }
  .format__media--technique,
  .format__media--anneaux,
  .tirage { max-width: 420px; }
}

/* 27. Contrastes forcés (Windows) : les repères portés par la couleur restent visibles */
@media (forced-colors: active) {
  .tabs__tab[aria-selected="true"],
  .choix__onglet[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .comparatif__non::before { background: CanvasText; }
  .comparatif__oui::before { border-color: CanvasText; }
  .offre,
  .tuile { border: 1px solid CanvasText; }
  .jauge li:not(.jauge__vide) { background: CanvasText; }
  .piliers-legende li::before,
  .pilier::before,
  .frise__step:not(:last-child)::before,
  .frise__step:not(:last-child)::after { background: CanvasText; }
}