/* ==========================================================================
   Sexy Pace Collective - Système de design
   Palette dérivée des zones d'effort en course à pied.
   Z2 (le "sexy pace") est l'accent de marque.
   ========================================================================== */

:root {
  /* Neutres */
  --ink:        #131517;
  --ink-2:      #1D2023;
  --ink-3:      #2A2E32;
  --ink-4:      #3D4348;
  --paper:      #ECEDED;
  --paper-2:    #FFFFFF;
  --line:       #D5D7D7;

  --text:       #131517;
  --text-mute:  #5C6165;
  --text-inv:   #ECEDED;
  --text-inv-mute: #9BA1A6;

  /* Couleurs de marque (échantillonnées dans le logo officiel) */
  --brand:      #00A0B6;   /* turquoise - identité, zone 2, « le sexy pace » */
  --brand-2:    #EA5053;   /* corail - effort maximal, accents chauds */
  --brand-lift: #17B8CE;   /* turquoise éclairci, pour les survols */
  --brand-2-dim: #BF3A3D;  /* corail assombri - obligatoire pour du texte sur fond clair */

  /* Zones d'effort : le spectre part du turquoise de marque et finit sur le
     corail de marque. Les deux couleurs de l'identité ancrent les extrémités. */
  --z1: #4A8FA0;   /* Récupération */
  --z2: var(--brand);   /* Endurance - LE SEXY PACE */
  --z3: #D9A441;   /* Tempo */
  --z4: #E8763F;   /* Seuil */
  --z5: var(--brand-2); /* VMA */

  --accent:     var(--brand);
  --accent-dim: #00778A;

  /* Typographie - Outfit remplace Europa (géométrique, comme le logo),
     Archivo remplace Scale VF pour les H1. Voir la note du projet. */
  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Outfit', system-ui, sans-serif;
  --data:    'JetBrains Mono', ui-monospace, monospace;

  /* Échelle de type */
  --t-hero:  clamp(2.7rem, 6.2vw, 5.25rem);
  --t-h2:    clamp(2rem, 4vw, 3.15rem);
  --t-h3:    clamp(1.25rem, 1.9vw, 1.6rem);
  --t-lead:  clamp(1.05rem, 1.35vw, 1.22rem);
  --t-body:  1.0625rem;
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  /* Rythme */
  --gutter:  clamp(1.25rem, 4vw, 3rem);
  --stack:   clamp(4.5rem, 9vw, 8rem);
  --max:     1240px;
  --radius:  4px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Réinitialisation ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
/* H1 en Archivo (à la place de Scale VF), H2/H3 en Outfit (à la place d'Europa). */
h1 { margin: 0; font-family: var(--display); line-height: 1.02; }
h2, h3, h4 { margin: 0; font-family: var(--body); line-height: 1.1; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }

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

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--text-inv);
  padding: .75rem 1.25rem; z-index: 200;
}
.skip:focus { left: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Primitives de mise en page ---------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--stack); }
.section--tight { padding-block: calc(var(--stack) * 0.62); }
.section--dark { background: var(--ink); color: var(--text-inv); }
.section--paper { background: var(--paper-2); }

.section--dark h2,
.section--dark h3 { color: var(--text-inv); }
.section--dark .lead,
.section--dark .prose { color: var(--text-inv-mute); }

/* ---------- Typographie utilitaire ---------- */
.eyebrow {
  font-family: var(--data);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-mute);
  display: flex;
  align-items: center;
  gap: .7rem;
}
.eyebrow::before {
  content: "";
  width: 1.75rem; height: 3px;
  background: var(--accent);
  flex: none;
}
.section--dark .eyebrow { color: var(--text-inv-mute); }

.h-display {
  font-variation-settings: 'wdth' 112, 'wght' 780;
  font-size: var(--t-hero);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.h2 {
  font-weight: 700;
  font-size: var(--t-h2);
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.h3 {
  font-weight: 600;
  font-size: var(--t-h3);
  letter-spacing: -0.008em;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--text-mute);
  max-width: 62ch;
}
.prose { color: var(--text-mute); max-width: 66ch; }
.prose + .prose { margin-top: 1.1em; }
.prose strong { color: var(--text); font-weight: 600; }
.section--dark .prose strong { color: var(--text-inv); }

/* ---------- Boutons ---------- */
/* Boutons - bloc angulaire, remplissage par balayage.
   La couleur entre par la gauche et traverse le bouton : le mouvement suit le
   sens de lecture, et celui de la course.

   Le balayage passe par `background-image` et non par un ::before : un
   pseudo-élément positionné se peindrait PAR-DESSUS le texte, ce qui obligerait
   à emballer le libellé de chaque bouton dans un <span>. Animer la taille du
   fond garde le texte au-dessus sans toucher au HTML.

   La typographie est en Outfit, pas en JetBrains Mono. La chasse fixe est
   réservée aux données - voir .btn__data plus bas. */
.btn {
  --sweep: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--body);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  padding: 1.15rem 2.1rem;
  border-radius: 0;
  border: 1px solid transparent;
  background-image: linear-gradient(to right, var(--sweep) 0 100%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size .34s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease);
}
.btn:hover { background-size: 100% 100%; }

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

.btn--ghost { border-color: var(--ink); color: var(--text); --sweep: var(--ink); }
.btn--ghost:hover { color: var(--text-inv); }

/* Le hero est foncé sans porter .section--dark : il lui faut le même traitement,
   sinon le bouton fantôme affiche du texte foncé sur fond foncé. */
.hero .btn--primary,
.section--dark .btn--primary { background-color: var(--brand); color: var(--ink); --sweep: var(--text-inv); }
.hero .btn--primary:hover,
.section--dark .btn--primary:hover { color: var(--ink); }

.hero .btn--ghost,
.section--dark .btn--ghost { border-color: var(--text-inv); color: var(--text-inv); --sweep: var(--text-inv); }
.hero .btn--ghost:hover,
.section--dark .btn--ghost:hover { color: var(--ink); }

/* Variante dossard : libellé, perforation, donnée en chasse fixe.
   La donnée doit être RÉELLE et vérifiable - une durée, un prix. Un chiffre
   décoratif ferait s'effondrer l'idée. */
.btn--bib { padding: 0; gap: 0; }
.btn__lab { padding: 1.15rem 1.7rem; }
.btn__data {
  font-family: var(--data);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 1.15rem 1.1rem;
  border-left: 1px dashed currentColor;
  opacity: .72;
}

/* Le focus clavier doit rester visible malgré le fond animé. */
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: background-color .01s, color .01s; }
  .btn:hover { background-size: 100% 100%; }
}

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Navigation ---------- */
/* Fixe et transparente par défaut : elle flotte SUR la photo du hero (pas au-dessus,
   dans le flux). Devient opaque au scroll grâce à .nav--scrolled (voir plus bas). */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
}
/* Chaque page commence par un .hero : il s'étend derrière la nav (voir son propre
   padding-top), donc le body n'a pas besoin de compensation ici. */
.nav__inner {
  display: flex; align-items: center; gap: 2rem;
  min-height: 68px;
}
.nav__brand {
  position: relative; z-index: 2;
  margin-right: auto;
  display: flex; align-items: center;
  text-decoration: none;
}
.nav__brand img { width: 108px; height: auto; }
/* Respiration sous le logo : sans ça il colle au bord bas de la barre. */
.nav__brand { padding-bottom: .5rem; padding-top: .35rem; }
.nav__brand-dark { display: none; }
.nav--scrolled .nav__brand-light,
.nav--open .nav__brand-light { display: none; }
.nav--scrolled .nav__brand-dark,
.nav--open .nav__brand-dark { display: block; }

.nav__links { display: flex; gap: 1.6rem; align-items: center; }
.nav__links a {
  font-size: var(--t-small);
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
  color: var(--text-inv-mute);
  transition: color .18s var(--ease);
  /* Sans ça « Clubs de course » se casse sur deux lignes et fait sauter la
     hauteur de toute la barre selon la page. */
  white-space: nowrap;
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--text-inv); }
.nav--scrolled .nav__links a { color: var(--text-mute); }
.nav--scrolled .nav__links a:hover, .nav--scrolled .nav__links a[aria-current="page"] { color: var(--text); }

/* Bouton Calculateurs : meme gabarit exact que .nav__cta (padding, taille,
   nowrap), mais en contour corail plutot qu'en fond turquoise plein, pour
   distinguer un lien secondaire d'un CTA principal sans casser l'alignement
   des deux boutons dans la barre. */
.nav__links a.nav__cta--alt {
  background-color: transparent;
  border: 1px solid var(--brand-2);
  color: var(--brand-2);
  --sweep: var(--brand-2);
  /* .nav__links a impose "transition: color" a tous ses liens (plus specifique
     que .btn) : sans le redire ici, le sweep de fond ne s'anime pas au survol. */
  transition: background-size .34s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease);
}
.nav__links a.nav__cta--alt:hover,
.nav__links a.nav__cta--alt[aria-current="page"] {
  color: var(--ink);
}
@media (max-width: 900px) {
  /* Specificite superieure a ".nav__links a" du menu mobile (padding, bordure
     pleine largeur) : le bouton reste compact plutot qu'une ligne. */
  .nav__links a.nav__cta--alt {
    padding: .55rem 1rem;
    margin-top: .5rem;
    width: fit-content;
  }
}

/* Le bouton du menu est un élément fixe hors de .hero et de .section--dark :
   il ne reçoit jamais leurs variantes de couleur et retombait sur le style de
   base (fond encre) - invisible sur l'image sombre du hero. Il porte donc son
   propre traitement, toujours turquoise, garanti lisible sur fond clair
   (scrollé) comme sur fond sombre (hero).
   Taille réduite aussi : le format des CTA de section est trop grand pour une
   barre de 68px. */
.nav__cta {
  position: relative;
  z-index: 2;
  background-color: var(--brand);
  color: var(--ink);
  --sweep: var(--ink);
  padding: .55rem 1rem;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  /* Sans ça « Appel gratuit » se casse en deux lignes des que la barre serre,
     ce qui fait grandir toute la hauteur du menu. */
  white-space: nowrap;
  flex: none;
}
.nav__cta:hover { color: var(--text-inv); }

/* ---------- Menu mobile ---------- */
.nav__toggle {
  display: none;
  flex: none;
  width: 40px; height: 40px;
  margin-left: .4rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px;
  height: 2px;
  background: var(--text-inv);
  transition: transform .25s var(--ease), opacity .25s var(--ease), background .2s var(--ease);
}
.nav__toggle span { top: 19px; }
.nav__toggle span::before { top: -7px; }
.nav__toggle span::after { top: 7px; }
.nav--scrolled .nav__toggle span,
.nav--scrolled .nav__toggle span::before,
.nav--scrolled .nav__toggle span::after { background: var(--text); }
.nav--open .nav__toggle span { background: transparent; }
.nav--open .nav__toggle span::before { transform: translateY(7px) rotate(45deg); background: var(--text); }
.nav--open .nav__toggle span::after { transform: translateY(-7px) rotate(-45deg); background: var(--text); }

@media (max-width: 900px) {
  .nav__toggle { display: block; }
  .nav__links {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: fixed;
    top: 0; left: 0; right: 0;
    padding: 88px var(--gutter) 2rem;
    background: var(--paper-2);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
  }
  .nav--open .nav__links {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .nav__links a {
    color: var(--text);
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 1.05rem;
  }
  .nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--accent-dim); }
}

/* ==========================================================================
   HERO - la semaine d'entraînement
   ========================================================================== */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--text-inv);
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(4rem, 9vw, 7rem);
  overflow: hidden;
}
/* Bandeau sombre garanti sous la nav flottante et transparente, peu importe la
   luminosité de la photo à cet endroit (zones claires de brume, etc.). */
.hero::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 130px;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(19,21,23,.8), transparent);
  pointer-events: none;
}
.hero > .wrap { position: relative; z-index: 2; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.hero .eyebrow { color: var(--text-inv-mute); }
.hero h1 { color: var(--text-inv); margin-top: 1.4rem; }
.hero .lead { color: var(--text-inv-mute); margin-top: 1.6rem; }
.hero .btn-row { margin-top: 2.2rem; }

.trust {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--ink-3);
  font-family: var(--data);
  font-size: var(--t-micro);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-inv-mute);
}
.trust li { display: flex; align-items: center; gap: .5rem; }
.trust li::before { content: ""; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }

/* Liste de fonctionnalités incluses (page Plans PDF). Meme logique que .trust :
   ul est reset a list-style:none globalement, donc rien n'apparait sans ce
   marqueur explicite. */
.checks { display: grid; gap: .7rem; }
.checks li { display: flex; align-items: flex-start; gap: .7rem; }
.checks li::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  margin-top: .55em;
  background: var(--brand);
  border-radius: 50%;
}

/* Calendrier Google Agenda (page /godasses). L'iframe affiche l'interface
   propre de Google a une largeur fixe de 800px : la retrecir en CSS ne fait
   que la comprimer illisiblement, ca ne la rend pas responsive. Le cadre
   scrolle donc horizontalement sur petit ecran plutot que d'ecraser le
   calendrier - voir la regle generale sur le contenu large en artifact-design. */
.calendar-embed {
  max-width: 800px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.calendar-embed iframe { display: block; }

@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; }
}

/* ---------- Le visuel semaine ---------- */
.week {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 6px;
  padding: clamp(1.25rem, 2.4vw, 1.9rem);
}
.week__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--ink-3);
}
.week__title {
  font-family: var(--data);
  font-size: var(--t-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-inv);
}
.week__meta {
  font-family: var(--data);
  font-size: var(--t-micro);
  color: var(--text-inv-mute);
}
/* Rangée : jour | nom de séance | barres proportionnelles | durée
   Les colonnes fixes empêchent les libellés de se faire écraser par les barres. */
.week__row {
  display: grid;
  grid-template-columns: 2.3rem 6.4rem minmax(0, 1fr) 2.9rem;
  align-items: center;
  gap: .7rem;
  padding-block: .4rem;
}
.week__day,
.week__name,
.week__dur {
  font-family: var(--data);
  font-size: 0.6875rem;
  color: var(--text-inv-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.week__day { letter-spacing: .1em; text-transform: uppercase; }
.week__dur { text-align: right; }
.week__row--rest .week__name,
.week__row--rest .week__day,
.week__row--rest .week__dur { color: #7F8E9B; }

.week__track { display: flex; align-items: center; min-width: 0; }
.week__bar {
  height: 24px;
  border-radius: 2px;
  flex: none;
  width: var(--w);
  transform-origin: left center;
}
.week__rest {
  height: 24px;
  width: 100%;
  border-top: 2px dotted var(--ink-4);
}

/* Sur petit écran, les colonnes fixes doivent céder de la place aux barres. */
@media (max-width: 480px) {
  .week__row { grid-template-columns: 1.9rem 4.6rem minmax(0, 1fr) 2.6rem; gap: .5rem; }
  .week__day, .week__name, .week__dur { font-size: 0.625rem; }
}

/* L'animation est un bonus : sans JS, les barres sont déjà visibles. */
.js-anim .week__bar {
  animation: grow .8s var(--ease) both;
  animation-delay: var(--d, 0s);
}
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.week__legend {
  display: flex; flex-wrap: wrap; gap: .45rem .9rem;
  margin-top: 1.2rem;
  padding-top: 1.05rem;
  border-top: 1px solid var(--ink-3);
}
.week__legend li {
  display: flex; align-items: center; gap: .45rem;
  font-family: var(--data);
  font-size: 0.6875rem;
  letter-spacing: .05em;
  color: var(--text-inv-mute);
}
.week__swatch { width: 11px; height: 11px; border-radius: 2px; flex: none; }
.week__legend li[data-zone="z2"] { color: var(--accent); }

/* ==========================================================================
   Hero pleine largeur avec photo - utilisé sur toutes les pages
   ========================================================================== */
.hero--home {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(520px, 78vh, 760px);
  padding-block: clamp(4rem, 10vw, 7rem) clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}
.hero--home > .wrap { position: relative; z-index: 2; }

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  /* La photo est une forêt sombre : sans ce relevé, le voile la réduit à un
     aplat noir et on perd la brume, les troncs et la silhouette du coureur. */
  filter: grayscale(100%) contrast(1.02) brightness(1.55);
  /* Le zoom donne la marge verticale que le parallax consomme (voir site.js).
     Il doit rester supérieur au déplacement : 32 % de zoom = 16 % de marge de
     chaque côté, pour un mouvement de ±14 %. Baisser l'un sans l'autre
     découvrirait un bord vide en haut ou en bas du hero. */
  transform: scale(1.32);
}
/* Voile dégradé. Assez dense à gauche pour tenir le contraste du texte blanc,
   puis il s'ouvre vite vers la droite : c'est là que la photo doit respirer.
   Le texte porte en plus une ombre portée (voir plus bas), ce qui permet de
   garder ce voile léger. Ne pas remonter ces valeurs sans revérifier le h1. */
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--ink) 1%, rgba(19,21,23,.18) 48%, rgba(19,21,23,0) 100%),
    linear-gradient(to right, rgba(19,21,23,.55) 0%, rgba(19,21,23,.38) 44%, rgba(19,21,23,.10) 70%, rgba(19,21,23,0) 100%);
}
/* Sur une photo, le gris atténué habituel ne tient pas le contraste :
   le texte secondaire du hero est éclairci. */
.hero--home .lead,
.hero--home .eyebrow,
.hero--home .trust { color: #C6CBCF; }

/* Le voile étant volontairement léger pour laisser voir la photo, c'est cette
   ombre qui garantit la lisibilité du texte par-dessus les zones claires
   (brume, ciel). Large et diffuse : elle assombrit le fond immédiat sans se
   voir comme un contour. */

/* Variante dense (pages Simon et Clubs). Leurs photos sont beaucoup plus
   claires que les autres - ciel blanc, brume - et le réglage commun, calibré
   pour la forêt sombre de l'accueil, y laissait le texte blanc trop pâle.
   Appliquée par une classe sur ces deux pages seulement : le hero commun ne
   bouge pas. */
.hero--dense .hero__media img {
  filter: grayscale(100%) contrast(1.02) brightness(1.12);
}
.hero--dense .hero__media::after {
  background:
    linear-gradient(to top, var(--ink) 1%, rgba(19,21,23,.34) 48%, rgba(19,21,23,.14) 100%),
    linear-gradient(to right, rgba(19,21,23,.78) 0%, rgba(19,21,23,.64) 44%, rgba(19,21,23,.38) 70%, rgba(19,21,23,.12) 100%);
}

/* Le texte reste dans la moitié gauche : c'est là que le voile est le plus dense,
   et ça laisse le coureur respirer à droite. */
.hero--home .wrap > * { max-width: 640px; }
.hero--home h1 { max-width: 15ch; }
.hero--home .lead { max-width: 52ch; margin-top: 1.5rem; }
@media (max-width: 900px) {
  .hero--home .wrap > * { max-width: none; }
  .hero--home h1 { max-width: 18ch; }
  /* Le texte occupe toute la largeur : le dégradé horizontal ne protège plus rien.
     Voile dense derrière le bloc de texte (en bas), qui se lève vers le haut pour
     laisser voir la photo au-dessus du titre. */
  .hero__media::after {
    background: linear-gradient(to top,
      var(--ink) 3%, rgba(19,21,23,.66) 42%, rgba(19,21,23,.28) 78%, rgba(19,21,23,.06) 100%);
  }
  .hero--dense .hero__media::after {
    background: linear-gradient(to top,
      var(--ink) 3%, rgba(19,21,23,.80) 42%, rgba(19,21,23,.48) 78%, rgba(19,21,23,.26) 100%);
  }
}

/* ==========================================================================
   « C'est quoi, un sexy pace ? » - le spectre des zones, avec repère
   ========================================================================== */
.paceviz { margin-top: 3rem; }

.paceviz__marker {
  display: flex;
  align-items: center;
  gap: .6rem;
  /* Cet écart n'est pas décoratif, il est calculé. La zone 2 remonte de 20 px
     (margin-top négatif) PUIS grandit encore vers le haut : +12 px quand elle
     est sélectionnée, +10 px au survol. Il faut donc 20 + 12 = 32 px avant de
     commencer à dégager le badge. 2,6rem (41,6 px) laisse ~10 px de marge dans
     le pire cas. Le z-index est la ceinture de sécurité si ces valeurs bougent. */
  margin-bottom: 2.6rem;
  padding-left: 20%;
  position: relative;
  z-index: 2;
}
.paceviz__badge {
  font-family: var(--data);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--brand);
  padding: .3rem .7rem;
  border-radius: 3px;
}
.paceviz__arrow { color: var(--brand); font-size: 1.1rem; line-height: 1; }

.paceviz__bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
}
.paceviz__zone {
  height: 46px;
  border-radius: 3px;
  background: var(--pz);
  transition: transform .25s var(--ease);
}
.paceviz__zone.is-target {
  height: 66px;
  margin-top: -20px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent);
}

.paceviz__labels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  margin-top: .7rem;
}
.paceviz__labels span {
  font-family: var(--data);
  font-size: 0.6875rem;
  letter-spacing: .05em;
  color: var(--text-inv-mute);
  text-align: center;
  line-height: 1.35;
}
.paceviz__labels span b {
  display: block;
  font-weight: 700;
  color: var(--text-inv);
}
.paceviz__labels span.is-target b { color: var(--brand); }

@media (max-width: 560px) {
  .paceviz__zone { height: 38px; }
  .paceviz__zone.is-target { height: 54px; margin-top: -16px; }
  .paceviz__labels span { font-size: 0.5625rem; letter-spacing: 0; }
}

/* ==========================================================================
   Photographie
   Les photos de Simon sont en noir et blanc : le turquoise et le corail
   restent les deux seules couleurs de la page.
   ========================================================================== */
.shot { position: relative; overflow: hidden; border-radius: 6px; }
.shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.06);
}
.shot--tall { aspect-ratio: 3 / 4; }
.shot--wide { aspect-ratio: 16 / 9; }
.shot--square { aspect-ratio: 1 / 1; }

.shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.4rem 1.4rem 1.15rem;
  font-family: var(--data);
  font-size: var(--t-micro);
  letter-spacing: .07em;
  color: #fff;
  background: linear-gradient(to top, rgba(19,21,23,.86), rgba(19,21,23,0));
}

/* Bande photo pleine largeur, avec un liseré aux couleurs de marque */
/* Fond d'encre en filet de sécurité : le parallax (site.js) déplace la photo
   de ±8% de sa hauteur, ce que le zoom ci-dessous ne suffit pas toujours à
   couvrir en bordure. Sans ce fond, on voit le gris de la page derrière. */
.band { position: relative; overflow: hidden; background: var(--ink); }
.band img {
  width: 100%;
  height: clamp(340px, 48vw, 620px);
  object-fit: cover;
  object-position: 50% 25%;
  filter: grayscale(100%) contrast(1.06);
  display: block;
  /* 1.12 laissait un jeu de 6 % par bord - trop court pour le parallax de
     ±8 % (site.js) : à certains points de scroll, la photo ne couvrait plus
     tout à fait le cadre. 1.25 laisse 12,5 % par bord, marge confortable. */
  transform: scale(1.25);
}
/* Variante trio. Toutes les photos de groupe sont en portrait (3:4) : dans une
   bande pleine largeur, object-fit n'en montrait qu'une tranche horizontale et
   les visages tombaient hors cadre. En trois colonnes, chaque photo retrouve un
   cadrage proche de son format natif. */
.band__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
/* Le zoom du parallax déborde de chaque photo : sans un cadre par cellule, une
   image viendrait mordre sur sa voisine et remplir les gouttières. */
.band__cell { position: relative; overflow: hidden; }
.band--trio .band__cell img {
  height: clamp(300px, 34vw, 520px);
  object-position: 50% 38%;
}
@media (max-width: 700px) {
  /* Trois colonnes sur un écran de téléphone donneraient des bandes trop
     étroites pour qu'on distingue quoi que ce soit : on passe à deux. */
  .band__grid { grid-template-columns: repeat(2, 1fr); }
  .band__cell:nth-child(3) { display: none; }
}

.band__note {
  position: absolute; inset: auto 0 0 0;
  padding: 3.5rem var(--gutter) 1.5rem;
  background: linear-gradient(to top, rgba(19,21,23,.9), rgba(19,21,23,0));
}
.band__note p {
  max-width: var(--max);
  margin-inline: auto;
  font-family: var(--data);
  font-size: var(--t-small);
  color: #fff;
}

/* Bloc image + texte côte à côte */
.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin-top: 3rem;
}
.duo--flip .shot { order: 2; }
@media (max-width: 660px) { .duo--flip .shot { order: 0; } }

/* ---------- Barre spectre (séparateur) ---------- */
.spectrum { display: flex; height: 4px; width: 100%; }
.spectrum span { flex: 1; }

/* ==========================================================================
   Cartes / grilles
   ========================================================================== */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.85rem;
  border-top: 3px solid var(--zc, var(--accent));
}
.card--media { padding: 0; overflow: hidden; }
.card--media .card__shot {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.card--media .card__shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.06);
  transition: filter .5s var(--ease), transform .6s var(--ease);
}
.card--media:hover .card__shot img, .card--media:focus-within .card__shot img {
  filter: grayscale(35%) contrast(1.08) saturate(1.15);
  transform: scale(1.045);
}
.card--media .card__body { padding: 1.85rem; }
.card h3 { margin-bottom: .8rem; }
.card p { color: var(--text-mute); font-size: 0.9875rem; }
.card a,
.prose a {
  color: var(--accent-dim);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color .18s var(--ease);
}
.card a:hover, .prose a:hover { color: var(--brand-2); }
.card__tag {
  font-family: var(--data);
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--zc, var(--accent));
  display: block;
  margin-bottom: .9rem;
}

/* ---------- Bloc titre de section ---------- */
.head { max-width: 68ch; }
.head .h2 { margin-top: 1.3rem; }
.head .lead { margin-top: 1.3rem; }

/* ==========================================================================
   FORFAITS
   ========================================================================== */
.tiers {
  width: 100%;
  margin-top: 3rem;
  border-collapse: separate;
  border-spacing: 1px;
  background: var(--ink-3);
  border: 1px solid var(--ink-3);
  border-radius: 6px;
  table-layout: fixed;
}
.tiers th,
.tiers td {
  background: var(--ink);
  padding: 1.5rem 1.35rem;
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}
.tiers thead th {
  font-family: var(--data);
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-inv-mute);
  padding-bottom: .4rem;
}
.tiers tbody tr:first-child td { padding-block: .4rem 1.5rem; }

.tier__price {
  display: block;
  font-family: var(--data);
  font-size: clamp(2rem, 3.3vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
  color: var(--text-inv);
}
.tier__price sup { font-size: .42em; font-weight: 500; top: -1.1em; margin-left: .12em; }
.tier__per {
  display: block;
  margin-top: .45rem;
  font-family: var(--data);
  font-size: var(--t-micro);
  color: var(--text-inv-mute);
}
.tier__total {
  font-family: var(--data);
  font-size: var(--t-micro);
  line-height: 1.7;
  color: var(--text-inv-mute);
}
.tiers .is-best { background: var(--ink-2); }
.tiers .is-best .tier__price { color: var(--accent); }

/* Rangee d'achat : le bouton remplit la cellule, pour que le tableau reste
   la seule surface d'action (pas de section separee en dessous). Le style
   ghost/primary standard sur fond fonce s'applique deja bien ici. */
.tiers tbody tr:last-child td { padding-top: 0; }
/* Boutons du tableau : padding resserre par rapport aux CTA de section, sinon
   les trois colonnes forcent une largeur minimale qui deborde du cadre et
   declenche une barre de defilement horizontale. */
.tier__cta { width: 100%; justify-content: space-between; padding: 0; }
.tier__cta .btn__lab { padding: .85rem .9rem; }
.tier__cta .btn__data { padding: .85rem .8rem; font-size: .72rem; letter-spacing: .06em; }
.tier__flag {
  display: block;
  margin-top: .4rem;
  font-size: 0.6875rem;
  letter-spacing: .1em;
  color: var(--accent);
}

/* Le tableau garde sa sémantique et défile horizontalement s'il manque de place. */
.tiers-scroll {
  margin-top: 3rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Abaisse depuis 480px : le tableau est passe de 4 a 3 colonnes, il tient
   maintenant dans la largeur sans forcer de defilement. */
.tiers-scroll .tiers { margin-top: 0; min-width: 380px; }

@media (max-width: 620px) {
  .tiers th, .tiers td { padding: 1.15rem .9rem; }
  .tiers tbody tr:first-child td { padding-block: .3rem 1.15rem; }
}

/* Note sous le tableau : elle porte sur TOUS les prix, elle doit donc venir
   apres eux, pas avant. */
.tiers-note {
  margin-top: 1.4rem;
  font-size: var(--t-small);
  color: var(--text-inv-mute);
  max-width: 62ch;
}

/* Bloc "inclus" : encadre et titre explicite. Sans ca, la grille de 3 colonnes
   se lisait comme deux puces par forfait alors que tout est inclus partout. */
.includes-block {
  margin-top: 3rem;
  padding: 1.8rem 2rem;
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
}
.includes__title {
  font-family: var(--data);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.includes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: .9rem 2.5rem;
  margin-top: 1.4rem;
}
.includes li {
  display: flex; gap: .85rem;
  font-size: 0.9875rem;
  color: var(--text-inv-mute);
  line-height: 1.5;
}
.includes li::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  margin-top: .55rem;
  background: var(--accent);
  border-radius: 1px;
}

/* ---------- Liste "pour qui" ---------- */
.checklist { display: grid; gap: .1rem; margin-top: 2.6rem; }
.checklist li {
  display: flex; gap: 1.1rem; align-items: baseline;
  padding: 1.05rem 0;
  border-top: 1px solid var(--line);
  font-size: 1.03rem;
}
.checklist li:last-child { border-bottom: 1px solid var(--line); }
.checklist li::before {
  content: "";
  flex: none;
  width: 22px; height: 2px;
  background: var(--accent);
  transform: translateY(-4px);
}

/* ---------- Deux colonnes texte ---------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 2.5rem 3.5rem;
  margin-top: 3rem;
}
.split h3 { margin-bottom: .9rem; }
.split p { color: var(--text-mute); }
.section--dark .split p { color: var(--text-inv-mute); }

/* ==========================================================================
   Journal de courses - une année par colonne, un segment par course.
   Grille stricte : les colonnes et les lignes s'alignent par construction.
   ========================================================================== */
.racelog { margin-top: 3rem; }

.racelog__grid {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: clamp(.4rem, 1vw, .8rem);
  align-items: end;
}
.racelog__col { display: flex; flex-direction: column; gap: .7rem; }

/* Les segments s'empilent depuis le bas */
.racelog__stack {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  gap: 4px;
  height: 124px;
}
.racelog__mark {
  height: 20px;
  border-radius: 2px;
  background: var(--ink-4);
  transition: transform .2s var(--ease), background .2s var(--ease);
  cursor: default;
}
.racelog__mark:hover { transform: scaleX(1.06); }
.racelog__mark.is-key   { background: var(--brand); }
.racelog__mark.is-major { background: var(--brand-2); }

.racelog__none {
  height: 20px;
  border-top: 2px dotted var(--ink-4);
}

.racelog__yr,
.racelog__n {
  font-family: var(--data);
  font-size: 0.6875rem;
  text-align: center;
  line-height: 1;
}
.racelog__yr { color: var(--text-inv-mute); letter-spacing: .04em; }
.racelog__n  { color: #7E858A; margin-top: -.35rem; }

.racelog__axis {
  height: 1px;
  background: var(--ink-3);
  margin: .3rem 0 .8rem;
}

/* Légende + moments clés */
.racelog__key {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.4rem 2rem;
  margin-top: 2.6rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.keymoment { display: flex; gap: .85rem; }
.keymoment__dot {
  flex: none;
  width: 12px; height: 12px;
  border-radius: 2px;
  margin-top: .32rem;
  background: var(--kc, var(--text-mute));
}
.keymoment__yr {
  display: block;
  font-family: var(--data);
  font-size: 0.6875rem;
  letter-spacing: .12em;
  color: var(--kc, var(--text-mute));
  margin-bottom: .25rem;
}
.keymoment__t {
  display: block;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .2rem;
}
.keymoment__d { font-size: .9rem; line-height: 1.5; color: var(--text-mute); }
.keymoment__d strong { color: var(--text); font-family: var(--data); font-size: .82rem; }

@media (max-width: 560px) {
  .racelog__stack { height: 96px; }
  .racelog__mark, .racelog__none { height: 15px; }
  .racelog__n { display: none; }
  .racelog__yr { font-size: 0.5625rem; letter-spacing: 0; }
}

.tag-major, .tag-first {
  display: inline-block;
  margin-left: .6rem;
  padding: .12rem .5rem;
  border-radius: 2px;
  font-family: var(--data);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: middle;
}
.tag-major { background: var(--brand-2); color: #fff; }
.tag-first { background: var(--accent-dim); color: #fff; }

/* ==========================================================================
   Agenda hebdomadaire des clubs - une ligne par jour.
   Même logique que le composant .week (page Coaching) : grille stricte,
   alignement garanti par construction plutôt que par un tableau multi-colonnes.
   ========================================================================== */
.agenda { margin-top: 3rem; }

.agenda__row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
  padding: 1.05rem 0;
  border-top: 1px solid var(--ink-3);
}
.agenda__row:last-child { border-bottom: 1px solid var(--ink-3); }

.agenda__day {
  font-family: var(--data);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-inv);
  padding-top: .5rem;
}

.agenda__slots { display: flex; flex-wrap: wrap; gap: .7rem; }

.agenda__none {
  padding-top: .5rem;
  font-family: var(--data);
  font-size: 0.8125rem;
  color: #838B90;
}

.agenda__chip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .6rem;
  row-gap: .2rem;
  padding: .7rem 1rem;
  border-radius: 4px;
  background: var(--ink-2);
  border-left: 3px solid var(--cc, var(--accent));
}
.agenda__chip.is-hero { background: var(--ink-3); }
.agenda__chip b {
  font-family: var(--data);
  font-size: .9rem;
  font-weight: 700;
  color: var(--cc, var(--accent));
}
.agenda__chip .club { font-weight: 700; font-size: .95rem; color: var(--text-inv); }
.agenda__chip .tag {
  font-family: var(--data);
  font-size: 0.625rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .12rem .45rem;
  border-radius: 2px;
  background: var(--cc, var(--accent));
  color: var(--ink);
}
.agenda__chip .place {
  flex-basis: 100%;
  font-family: var(--data);
  font-size: 0.6875rem;
  color: var(--text-inv-mute);
}
.agenda__chip .place a { color: var(--cc, var(--accent)); text-decoration: underline; }

/* Variante sur fond clair : les pastilles restent foncées, seuls les libellés
   de structure passent en encre. */
.agenda--light .agenda__row { border-color: var(--line); }
.agenda--light .agenda__day { color: var(--text); }
.agenda--light .agenda__none { color: var(--text-mute); }

@media (max-width: 560px) {
  .agenda__row { grid-template-columns: 4.4rem minmax(0, 1fr); gap: .8rem; }
  .agenda__day { font-size: 0.8125rem; }
}

/* ==========================================================================
   Formulaire
   ========================================================================== */
.form { display: grid; gap: 1.2rem; margin-top: 2.4rem; max-width: 620px; }
.form__row { display: grid; gap: .45rem; }
.form__row[hidden] { display: none; }
.form__row label {
  font-family: var(--data);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.form__row label .req { color: var(--brand-2-dim); }
.form input,
.form select,
.form textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--text);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.form textarea { min-height: 9rem; resize: vertical; }
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.form__note {
  font-size: .875rem;
  color: var(--text-mute);
}

/* ==========================================================================
   Coordonnées directes
   ========================================================================== */
.contact-lines { display: grid; gap: 1px; margin-top: 2.2rem; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.contact-line {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem;
  padding: 1.15rem 1.35rem;
  background: var(--paper-2);
  text-decoration: none;
  transition: background .18s var(--ease);
}
.contact-line:hover { background: var(--paper); }
.contact-line__label {
  font-family: var(--data);
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
  flex: none;
  min-width: 7rem;
}
.contact-line__value { font-weight: 600; color: var(--text); }
.contact-line__meta { font-family: var(--data); font-size: 0.6875rem; color: var(--text-mute); margin-left: auto; }

/* ==========================================================================
   Encadré d'information
   ========================================================================== */
.notice {
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-2);
  border-radius: 4px;
  padding: 1.25rem 1.35rem;
  background: var(--paper-2);
}
.notice__title {
  font-family: var(--data);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-2-dim);
  margin-bottom: .6rem;
}
.notice__body { font-size: .95rem; line-height: 1.55; color: var(--text-mute); }
.section--dark .notice { background: var(--ink-2); border-color: var(--ink-3); border-left-color: var(--brand-2); }
.section--dark .notice__title { color: var(--brand-2); }
.section--dark .notice__body { color: var(--text-inv-mute); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { margin-top: 3rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: flex-start; gap: 1.1rem;
  padding: 1.4rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--body);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.32;
  transition: color .18s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-dim); }
.faq summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--data);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--accent-dim);
  transition: transform .25s var(--ease);
  flex: none;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__body { padding: 0 0 1.6rem; color: var(--text-mute); max-width: 72ch; }
.faq__body p + p { margin-top: .9rem; }

/* ==========================================================================
   Témoignages
   ========================================================================== */
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.quote {
  border-left: 3px solid var(--accent);
  padding: .3rem 0 .3rem 1.5rem;
}
.quote blockquote { margin: 0; font-size: 1.08rem; line-height: 1.55; }
.quote figcaption {
  margin-top: 1rem;
  font-family: var(--data);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ==========================================================================
   CTA final
   ========================================================================== */
.cta-final { text-align: center; }
.cta-final .h2 { margin-inline: auto; }
.cta-final .lead { margin: 1.4rem auto 0; text-align: center; }
.cta-final .btn-row { justify-content: center; margin-top: 2.4rem; }
.cta-final__note {
  margin-top: 1.6rem;
  font-family: var(--data);
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-inv-mute);
}

/* ==========================================================================
   Pied de page
   ========================================================================== */
.foot { background: var(--ink); color: var(--text-inv-mute); padding-block: 4rem 2.5rem; }
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: 2.5rem;
}
.foot__brand img { width: 138px; height: auto; }
.foot p { font-size: 0.9375rem; margin-top: 1.2rem; max-width: 34ch; }

/* Bandeau des accréditations et partenariats */
.partners {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  text-align: center;
  gap: 1.5rem 2.75rem;
  margin-top: 2.2rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--ink-3);
}
.partners__label {
  font-family: var(--data);
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-inv-mute);
  flex: none;
}
.partners img {
  height: 34px; width: auto;
  opacity: .82;
  transition: opacity .2s var(--ease);
}
.partners a:hover img, .partners a:focus-visible img { opacity: 1; }

/* Code promo Krono - toute la boîte est cliquable, vers krononutrition.com */
.promo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .45rem;
  margin: 0;
  padding: .8rem 1.1rem;
  border: 1px dashed var(--brand-2);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.promo:hover, .promo:focus-visible {
  background: color-mix(in srgb, var(--brand-2) 10%, transparent);
  border-style: solid;
}
.promo__label {
  font-family: var(--data);
  font-size: 0.6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-2);
}
.promo__code {
  font-family: var(--data);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink);
  background: var(--brand-2);
  padding: .2rem .55rem;
  border-radius: 3px;
}
.promo__note {
  font-family: var(--data);
  font-size: 0.6875rem;
  color: var(--text-inv-mute);
}
.foot h4 {
  font-family: var(--data);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-inv);
  margin: 0 0 1.05rem;
}
.foot li { margin-bottom: .6rem; font-size: 0.9375rem; }
.foot a { text-decoration: none; transition: color .18s var(--ease); }
.foot a:hover { color: var(--accent); }
.foot__base {
  margin-top: 3.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--ink-3);
  display: flex; flex-wrap: wrap; justify-content: center; text-align: center;
  gap: .6rem 2rem;
  font-family: var(--data);
  font-size: var(--t-micro);
  letter-spacing: .05em;
}

/* ==========================================================================
   Révélation au défilement
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--rd, 0s);
}

/* Cascade : les cartes d'une même grille entrent une à une, pas toutes ensemble. */
.grid-3 > .reveal:nth-child(1) { --rd: 0s; }
.grid-3 > .reveal:nth-child(2) { --rd: .1s; }
.grid-3 > .reveal:nth-child(3) { --rd: .2s; }
.grid-3 > .reveal:nth-child(4) { --rd: .3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .btn:hover { transform: none; }
}

/* ==========================================================================
   Interactivité - survols et navigation
   ========================================================================== */

/* Photos : le noir et blanc reprend un peu de couleur au survol, comme une
   respiration - la seule fois où l'image sort du système grayscale strict. */
.shot img, .band img {
  transition: filter .5s var(--ease), transform .6s var(--ease);
}
.shot:hover img, .shot:focus-within img {
  filter: grayscale(35%) contrast(1.08) saturate(1.15);
  transform: scale(1.045);
}
.band:hover img {
  filter: grayscale(35%) contrast(1.08) saturate(1.15);
}

/* Cartes : légère élévation au survol, la couleur de zone s'intensifie. */
.card {
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card:hover, .card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px -22px rgba(19, 21, 23, .38);
  border-color: var(--zc, var(--accent));
}

/* Spectre d'effort : chaque zone répond au survol/tap, sa zone d'étiquette
   correspondante s'allume en même temps (synchronisées en JS). */
.paceviz__zone { cursor: default; }
.paceviz__zone:hover, .paceviz__zone.is-hover {
  transform: scaleY(1.16);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pz) 55%, transparent);
}
.paceviz__labels span.is-hover b { color: var(--brand-2); }

/* Navigation : se compacte et se densifie une fois qu'on a défilé. */
.nav { transition: min-height .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease); }
.nav--scrolled { background: rgba(238, 240, 241, .97); box-shadow: 0 1px 0 var(--line); }
.nav--scrolled .nav__inner { min-height: 54px; }

/* Boutons CTA principaux : léger déplacement magnétique vers le curseur (JS). */
.btn--primary, .btn--ghost {
  will-change: transform;
}

/* ==========================================================================
   Calculateurs (VMA / VO2max, allure et temps de course)
   ========================================================================== */
.calc-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(1.5rem, 4vw, 2.4rem);
  margin-top: 2.6rem;
  max-width: 720px;
}
.calc-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .25rem;
  margin-bottom: 1.8rem;
}
.calc-toggle__btn {
  font-family: var(--data);
  font-size: var(--t-small);
  padding: .55rem 1.1rem;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--text-mute);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.calc-toggle__btn.is-active { background: var(--ink); color: var(--text-inv); }

.calc-grid { display: grid; gap: 1.2rem; }
.calc-card .form__row label { display: block; margin-bottom: .45rem; }
.calc-card input,
.calc-card select {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.calc-card input:focus,
.calc-card select:focus {
  outline: none;
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.calc-inline {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  font-size: var(--t-small);
  color: var(--text-mute);
}
.calc-inline input { width: 5.5rem; flex: none; }

.calc-result {
  margin-top: 2rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
}
.calc-result__top {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.calc-result__label {
  display: block;
  font-family: var(--data);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: .3rem;
}
.calc-result__value {
  display: block;
  font-family: var(--data);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent-dim);
}
.calc-result__note {
  margin-top: 1.2rem;
  font-size: .9rem;
  color: var(--text-mute);
}
.calc-result__note b { color: var(--brand-2-dim); }

/* Le paceviz réutilisé hors du hero sombre : on force ses couleurs de texte
   pour qu'il reste lisible sur fond clair. */
.calc-result .paceviz { background: var(--ink); border-radius: 6px; padding: 1.6rem 1.2rem 1.2rem; }
.calc-result .paceviz__labels span { color: var(--text-inv-mute); font-size: 0.625rem; }

.calc-details {
  margin-top: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}
.calc-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
}
.calc-details p { margin-top: .8rem; color: var(--text-mute); font-size: .9rem; line-height: 1.6; }

/* Placeholders : toujours nettement plus pâles que du texte saisi, pour qu'un
   exemple ne ressemble jamais à une vraie valeur entrée. */
.calc-card input::placeholder { color: var(--text-mute); opacity: .55; }

.calc-help { font-size: .8rem; color: var(--text-mute); margin: -.2rem 0 .2rem; }
.calc-btn-full { width: 100%; justify-content: center; }

/* ---------- Pastilles (test, sexe, distance) ---------- */
.calc-pills { display: flex; flex-wrap: wrap; gap: .6rem; }
.calc-pill {
  font-family: var(--data);
  font-size: var(--t-small);
  padding: .6rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--text-mute);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.calc-pill.is-active { background: var(--ink); color: var(--text-inv); border-color: var(--ink); }

/* ---------- Temps objectif : trois champs séparés ---------- */
.calc-time-fields { display: flex; align-items: center; gap: .5rem; }
.calc-time-field { display: grid; gap: .3rem; text-align: center; }
.calc-time-field input { width: 5rem; text-align: center; }
.calc-time-field span {
  font-family: var(--data);
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.calc-time-sep { font-family: var(--data); font-size: 1.4rem; color: var(--text-mute); margin-top: -1.1rem; }

/* ---------- Statistiques principales ---------- */
.calc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
.calc-stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.1rem 1.2rem;
  text-align: center;
}
.calc-stat--primary { background: var(--ink); border-color: var(--ink); }
.calc-stat--primary .calc-stat__label,
.calc-stat--primary .calc-stat__unit { color: var(--text-inv-mute); }
.calc-stat--primary .calc-stat__value { color: var(--text-inv); }
.calc-stat__label {
  display: block;
  font-family: var(--data);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.calc-stat__value {
  display: block;
  font-family: var(--data);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--text);
  margin-top: .2rem;
}
.calc-stat__unit { font-size: .75rem; color: var(--text-mute); }

/* ---------- Liste des zones ---------- */
.calc-zones__title { font-size: 1rem; margin: 2rem 0 1rem; }
.zone-list { display: grid; gap: .6rem; }
.zone-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1.1rem;
  border-radius: 6px;
  border-left: 4px solid var(--zc);
  background: color-mix(in srgb, var(--zc) 12%, var(--paper-2));
}
.zone-row.is-target { outline: 2px solid var(--zc); outline-offset: -2px; }
.zone-row__badge {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--zc);
  color: #fff;
  font-family: var(--data);
  font-weight: 700;
  font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
}
.zone-row__info { flex: 1; min-width: 0; }
.zone-row__name { display: block; font-weight: 700; }
.zone-row__name small { font-weight: 400; color: var(--text-mute); }
.zone-row__meta { display: block; font-size: .8rem; color: var(--text-mute); margin-top: .15rem; }
.zone-row__meta b { color: var(--zc); }
.zone-row__pace {
  flex: none;
  font-family: var(--data);
  font-weight: 700;
  color: var(--zc);
  text-align: right;
}
.zone-row__objectif {
  display: block;
  font-family: var(--data);
  font-size: .68rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ---------- Prédictions de temps ---------- */
.calc-predictions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 2px;
  background: var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.calc-prediction {
  background: var(--ink);
  color: var(--text-inv);
  padding: 1rem;
  text-align: center;
}
.calc-prediction span {
  display: block;
  font-family: var(--data);
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-inv-mute);
  margin-bottom: .4rem;
}
.calc-prediction b { font-family: var(--data); font-size: 1.3rem; }

/* ---------- Envoi par courriel ---------- */
.calc-email {
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.calc-email label {
  display: block;
  font-family: var(--data);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: .6rem;
}
.calc-email .calc-inline input[type="email"] { flex: 1; min-width: 200px; }
/* Profil (prenom / sexe / age) : demande AVANT le calcul, avec les autres
   donnees d'entree. Alimente la ligne "Profil" du courriel de resultats. */
.calc-profil { display: flex; gap: .6rem; flex-wrap: wrap; }
.calc-profil input[type="text"] { flex: 1 1 9rem; min-width: 7rem; }
.calc-profil select { flex: 0 1 8rem; min-width: 6.5rem; }
.calc-profil input[type="number"] { flex: 0 1 5.5rem; min-width: 4.5rem; }
.calc-optionnel {
  font-family: var(--body);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-mute);
}

.calc-email__note {
  font-size: var(--t-small);
  color: var(--text-mute);
  max-width: 52ch;
  margin: 0 0 1rem;
}

/* Retour d'envoi du formulaire (succes / erreur). Masque par defaut via
   l'attribut hidden, revele par le JS une fois la requete partie. */
.calc-email__status {
  font-family: var(--data);
  font-size: var(--t-micro);
  letter-spacing: .04em;
  margin: .9rem 0 0;
  color: var(--text-mute);
}
.calc-email__status.is-error { color: var(--z5, #c0392b); }

/* ==========================================================================
   Défilement Instagram (page d'accueil)
   ========================================================================== */
/* Grille et non bande defilante : les 5 publications tiennent dans la largeur.
   Aucun debordement, donc aucune barre de defilement. */
.ig-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-top: 2.6rem;
}

@media (max-width: 900px) {
  .ig-strip { grid-template-columns: repeat(3, 1fr); gap: .8rem; }
  /* 5 vignettes sur 3 colonnes laisseraient une rangee bancale a deux items :
     on descend a 3 pour garder une rangee pleine. */
  .ig-strip .ig-post:nth-child(n + 4) { display: none; }
}

@media (max-width: 560px) {
  .ig-strip { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .ig-strip .ig-post:nth-child(n + 3) { display: none; }
}
/* Vignettes Instagram alimentees par le JSON de Behold (assets/js/instagram.js).
   Les embeds officiels d'Instagram ont ete retires : leur script passe le
   blockquote en position:absolute, ce qui effondrait la bande flex a 2px de
   haut - la section etait invisible. */
.ig-post {
  width: auto;
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-2);
  aspect-ratio: 4 / 5;
  text-decoration: none;
}
.ig-post img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Toutes les photos du site sont en noir et blanc - la couleur revient au
     survol pour que le contenu reste lisible sans casser la regle. */
  filter: grayscale(100%);
  transition: filter .45s var(--ease), transform .45s var(--ease);
}
.ig-post:hover img,
.ig-post:focus-visible img { filter: grayscale(0%); transform: scale(1.04); }

.ig-post__type {
  position: absolute;
  top: .55rem; right: .55rem;
  font-family: var(--data);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-inv);
  background: rgba(19, 21, 23, .72);
  padding: .25rem .45rem;
  border-radius: 2px;
}
.ig-post__date {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.6rem .7rem .6rem;
  font-family: var(--data);
  font-size: .68rem;
  color: var(--text-inv);
  background: linear-gradient(to top, rgba(19, 21, 23, .85), transparent);
}

/* ==========================================================================
   Bande de plusieurs photos (remplace la bande à une seule photo trop zoomée)
   ========================================================================== */
.strip { position: relative; }
.strip__row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  height: clamp(200px, 32vw, 340px);
}
.strip__row img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.06);
  display: block;
  transition: filter .5s var(--ease), transform .6s var(--ease);
}
.strip__item { display: block; overflow: hidden; height: 100%; }
.strip__item:hover img {
  filter: grayscale(35%) contrast(1.08) saturate(1.15);
  transform: scale(1.06);
}
.strip__note {
  padding: 1.1rem var(--gutter);
  background: var(--ink);
}
.strip__note p {
  max-width: var(--max);
  margin-inline: auto;
  font-family: var(--data);
  font-size: var(--t-small);
  color: var(--text-inv-mute);
}
@media (max-width: 700px) {
  .strip__row { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); height: auto; }
  .strip__item { aspect-ratio: 4/5; }
}

/* ==========================================================================
   Boutique
   ========================================================================== */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
  margin-top: 3rem;
}
.shop-grid--produits { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.shop-item {
  display: flex;
  flex-direction: column;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.section--paper .shop-item { background: var(--paper-2); }
.section--dark .shop-item,
.section:not(.section--paper) .shop-item { background: var(--paper-2); }

/* Le forfait le plus avantageux porte la couleur de marque sur son bord haut,
   comme la zone 2 du spectre - le turquoise est l'allure où tout va bien. */
.shop-item--best { border-color: var(--brand); box-shadow: inset 0 4px 0 var(--brand); }

.shop-item__media { background: var(--ink-2); aspect-ratio: 1 / 1; position: relative; overflow: hidden; }
.shop-item__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: grayscale(100%);
}

/* Deux photos empilees, fondu enchaine pilote par assets/js/boutique.js
   (bascule .is-active toutes les 4,5s). La deuxieme image commence a
   opacite 0 et absolue, par-dessus la premiere. */
.shop-item__media--rotate img {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.shop-item__media--rotate img.is-active { opacity: 1; }

.shop-item__body { padding: 1.6rem 1.5rem 1.3rem; flex: 1; }

.shop-item__eyebrow {
  font-family: var(--data);
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 0 0 .5rem;
}
.shop-item--best .shop-item__eyebrow { color: var(--accent-dim); }

.shop-item__name {
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -.018em;
  margin: 0 0 .7rem;
}

.shop-item__price {
  font-family: var(--data);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 .9rem;
  line-height: 1;
}
.shop-item__unit {
  display: block;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-top: .4rem;
}

.shop-item__desc {
  font-size: var(--t-small);
  color: var(--text-mute);
  line-height: 1.65;
  margin: 0;
}
.shop-item__desc strong { color: var(--text); }

/* Le bouton occupe toute la largeur du bas de la carte : la surface cliquable
   est plus grande, et les cartes s'alignent quelle que soit la longueur du texte. */
.shop-item__cta {
  justify-content: space-between;
  border-radius: 0;
  border-left: 0; border-right: 0; border-bottom: 0;
  margin-top: auto;
}
.shop-item__cta--attente { opacity: .72; }

.shop-note {
  margin-top: 2rem;
  font-size: var(--t-small);
  color: var(--text-mute);
}
.shop-note a { color: var(--accent-dim); }

.shop-livraison {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: 2.4rem;
  overflow: hidden;
}
.shop-livraison > div { background: var(--paper-2); padding: 1.4rem 1.5rem; }
.shop-livraison__lbl {
  font-family: var(--data);
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 0 0 .5rem;
}
.shop-livraison__val {
  font-family: var(--data);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 .35rem;
}
.shop-livraison__note {
  font-size: var(--t-small);
  color: var(--text-mute);
  margin: 0;
  line-height: 1.6;
}

/* ==========================================================================
   Spectre des zones interactif (accueil) + infobulle du journal (Simon)
   ========================================================================== */

/* Les zones deviennent des <button> : on annule le style natif. */
.paceviz--interactive .paceviz__zone {
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
/* Le survol doit se sentir : la barre grandit vers le haut (origine en bas,
   sinon elle mordrait sur les étiquettes) et s'éclaircit légèrement.
   Ne fonctionne que parce que l'animation d'entrée relâche son transform
   inline en fin de course - voir clearProps dans site.js. */
.paceviz--interactive .paceviz__zone {
  transform-origin: bottom;
  transition: transform .25s var(--ease), filter .25s var(--ease);
}
.paceviz--interactive .paceviz__zone:hover,
.paceviz--interactive .paceviz__zone:focus-visible {
  transform: scaleY(1.34);
  filter: brightness(1.16);
}
.paceviz--interactive .paceviz__zone.is-active {
  transform: scaleY(1.18);
}
/* La zone 2 est déjà la plus haute et remonte vers le badge : elle a besoin
   de moins d'agrandissement que les autres pour un effet équivalent. */
.paceviz--interactive .paceviz__zone.is-target:hover,
.paceviz--interactive .paceviz__zone.is-target:focus-visible {
  transform: scaleY(1.15);
}
.paceviz--interactive .paceviz__zone:focus-visible {
  outline: 2px solid var(--text-inv);
  outline-offset: 3px;
}

/* La zone 2 garde son relief de base, mais l'anneau turquoise ne doit
   apparaitre que quand elle est reellement la zone active. */
.paceviz--interactive .paceviz__zone.is-target { box-shadow: none; }
.paceviz--interactive .paceviz__zone.is-target.is-active {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent);
}

.paceviz__labels span.is-active b { color: var(--zactive, var(--brand)); }
.paceviz__labels span.is-active { color: var(--text-inv); }

/* Panneau de description : hauteur reservee pour que le contenu qui suit ne
   saute pas quand on passe d'une zone a l'autre. */
.paceviz__desc {
  margin-top: 1.6rem;
  padding: 1.2rem 1.4rem;
  border-left: 3px solid var(--zactive, var(--brand));
  background: var(--ink-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  min-height: 8.5rem;
}
.paceviz__desc-meta {
  display: block;
  font-family: var(--data);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--zactive, var(--brand));
  margin-bottom: .55rem;
}
.paceviz__desc-text {
  display: block;
  color: var(--text-inv);
  line-height: 1.65;
  max-width: 68ch;
}

.paceviz__hint {
  margin-top: .9rem;
  font-family: var(--data);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-inv-mute);
}
/* Sur ecran tactile il n'y a pas de survol : on parle de toucher. */
@media (hover: none) {
  .paceviz__hint { display: none; }
}
@media (max-width: 620px) {
  .paceviz__desc { min-height: 11rem; }
}

/* ---------- Infobulle du journal de courses ---------- */
.racetip {
  position: absolute;
  z-index: 200;
  max-width: 280px;
  padding: .6rem .8rem;
  background: var(--ink);
  color: var(--text-inv);
  border: 1px solid var(--ink-4);
  border-radius: var(--radius);
  font-family: var(--data);
  font-size: .72rem;
  line-height: 1.5;
  letter-spacing: .02em;
  pointer-events: none;
  opacity: 0;
  transition: opacity .16s var(--ease);
}
.racetip.is-visible { opacity: 1; }

/* Les segments deviennent focusables : ils ont besoin d'un etat visible. */
.racelog__mark:focus-visible,
.racelog__none:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.racelog__mark { cursor: help; }

/* ==========================================================================
   Paiement par virement Interac (page Coaching)
   ========================================================================== */
.interac {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem;
  margin-top: 3rem;
  align-items: start;
}
@media (max-width: 900px) {
  .interac { grid-template-columns: 1fr; gap: 2rem; }
}

.interac__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.8rem; }
.interac__list li { display: flex; gap: 1rem; align-items: flex-start; }
.interac__step {
  flex: none;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand);
  color: var(--ink);
  font-family: var(--data);
  font-weight: 700;
  font-size: .82rem;
  border-radius: 50%;
}
.interac__h {
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -.018em;
  margin: 0 0 .4rem;
}
.interac__list p { margin: 0; color: var(--text-mute); line-height: 1.65; }

/* Tableau des montants : la colonne barree montre l'economie sans avoir a
   l'expliquer en mots. */
.interac__prix {
  margin-top: 1rem;
  border-collapse: collapse;
  font-family: var(--data);
  font-size: var(--t-small);
  width: 100%;
  max-width: 24rem;
}
.interac__prix th,
.interac__prix td { padding: .5rem .6rem; text-align: left; border-bottom: 1px solid var(--line); }
.interac__prix th { font-weight: 500; color: var(--text-mute); }
.interac__prix td:nth-child(2) { font-weight: 700; color: var(--accent-dim); white-space: nowrap; }
.interac__prix td:nth-child(3) {
  color: var(--text-mute);
  text-decoration: line-through;
  font-size: .78rem;
  white-space: nowrap;
}

.interac__note {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-small);
  color: var(--text-mute);
  line-height: 1.65;
}

.interac__form {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
}