/* =========================================================================
   Med4Club — medforclub.com
   Registre : marque. Lane : institution sportive, pas SaaS santé pastel.
   Le blanc + vert d'eau est le premier réflexe de la catégorie santé, le noir
   + néon le second, côté sport. On prend le navy de la charte et on l'assume
   en bandes pleine largeur, avec du papier tiède entre elles.

   Deux principes tiennent tout le fichier :

   1. LA PAGE MONTRE LE PRODUIT, elle ne le décrit pas. Écrans, tableaux,
      comptes rendus : tout est reconstruit en HTML/CSS. Net à toute densité,
      animable, sélectionnable, et sans une image de plus.

   2. AUCUN FRAGMENT NE PARTAGE LE CADRAGE D'UN AUTRE. Trois rectangles
      arrondis identiques se lisent comme trois clones, quel que soit leur
      contenu. Un écran tranché en bas, une fenêtre qui déborde à droite, un
      tableau effacé sur ses deux bords : trois formes, trois lectures.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Jetons
   Les valeurs viennent de la charte ET de apps/mobile/src/lib/theme.ts, pour
   que ce qu'on montre ici soit exactement ce que le visiteur verra dans
   l'application. Une couleur de phase changée dans :root change partout.
   ------------------------------------------------------------------------- */

:root {
  --navy: #0a1f44;
  --navy-deep: #071634;
  --navy-ink: #050f24;
  --navy-700: #243160;
  --navy-500: #3f5189;
  --navy-100: #c5cadd;
  --navy-50: #e8eaf1;

  --paper: #f7f8fb;
  --paper-warm: #f2f4f9;
  --white: #fff;
  --rule: #e2e6f0;

  --ink: var(--navy);
  --ink-soft: #4a5a86;

  --mint: #1ac57e;
  /* Le mint de charte plafonne à 2,1:1 sur clair : il ne porte jamais de
     texte sur papier. Cette variante le fait, l'autre reste aux aplats. */
  --mint-ink: #0c744a;
  --mint-100: #c0f4dd;
  --mint-50: #e6fbf2;

  /* Phases de reprise — exactement les couleurs du produit. */
  --care: #b91c1c;
  --cond: #b45309;
  --ret: #0369a1;
  --amber-50: #fef3c7;
  --sky-50: #f0f9ff;

  --shell: min(1200px, 100% - 3rem);
  --measure: 68ch;

  --out: cubic-bezier(0.23, 1, 0.32, 1);
  --inout: cubic-bezier(0.77, 0, 0.175, 1);

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Une seule recette d'ombre pour toutes les surfaces claires. Le liseré
     intérieur clair vient TOUJOURS avant l'ombre portée : c'est lui qui donne
     l'arête, l'ombre ne fait que décoller. */
  --lift: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 0 0 1px rgb(10 31 68 / 0.07), 0 2px 3px
    rgb(10 31 68 / 0.04), 0 14px 28px -14px rgb(10 31 68 / 0.2);
  --lift-hi: inset 0 1px 0 rgb(255 255 255 / 0.95), 0 0 0 1px rgb(10 31 68 / 0.09), 0 4px 6px
    rgb(10 31 68 / 0.05), 0 28px 50px -20px rgb(10 31 68 / 0.28);
}

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

/* La feuille du navigateur applique `[hidden] { display: none }`, qui perd
   contre n'importe quelle règle de classe posant un `display`. Un gabarit
   marqué `hidden` s'affichait donc quand même, en cadres vides. On rend la
   règle non négociable : `hidden` doit toujours cacher. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.shell {
  width: var(--shell);
  margin-inline: auto;
}

/* Le bloc de symboles ne doit rien occuper ni rien afficher. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ic {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* -------------------------------------------------------------------------
   2. Typographie
   Une seule famille de texte. Le contraste est porté par le poids ET la
   chasse (axe wdth d'Archivo) : l'écart de largeur donne le caractère
   « signalétique » sans ajouter de seconde police d'affichage.
   Le mono ne sert qu'aux données : chiffres, statuts, minuteurs, repères.
   ------------------------------------------------------------------------- */

h1,
h2,
h3 {
  margin: 0;
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.3rem, 1.4rem + 4.4vw, 4.7rem);
  font-stretch: 118%;
  /* Alignement optique : à ce corps, le fût du L dépasse la marge du texte
     courant de deux pixels environ. */
  margin-left: -0.03em;
}

h2 {
  font-size: clamp(1.8rem, 1.3rem + 2.2vw, 3rem);
}

h3 {
  font-size: 1.2rem;
  font-stretch: 105%;
  letter-spacing: -0.015em;
}

p {
  text-wrap: pretty;
  max-width: var(--measure);
}

.lede {
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  line-height: 1.55;
}

.kicker {
  margin: 0 0 1rem;
  max-width: none;
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mint-ink);
}

.kicker--light {
  color: #7fd8b4;
}

/* -------------------------------------------------------------------------
   3. Bandes et matière
   ------------------------------------------------------------------------- */

.band {
  padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem);
}

.band--paper {
  background: var(--paper);
}

.band--warm {
  background: var(--paper-warm);
}

.band--navy {
  background: var(--navy);
  color: var(--paper);
}

/* Texte clair sur fond sombre : interligne majoré, le clair paraît plus
   maigre qu'il ne l'est. */
.band--navy p {
  line-height: 1.7;
  color: #dbe2ee;
}

.band--navy h2 {
  color: var(--paper);
}

[id] {
  scroll-margin-top: 5rem;
}

.hero,
.band--navy,
.plate {
  position: relative;
  isolation: isolate;
}

/* Un aplat navy pur paraît plat et bon marché. Deux halos très étalés
   suffisent à donner de la profondeur, pour un seul paint. */
.hero::before,
.band--navy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(58rem 34rem at 76% -12%, rgb(26 197 126 / 0.15), transparent 62%),
    radial-gradient(46rem 30rem at 2% 106%, rgb(63 81 137 / 0.42), transparent 60%);
}

/* Grain fixe et non interactif : posé sur un calque qui défile, il forcerait
   un repaint GPU continu. stitchTiles évite les coutures visibles en aplat. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.11;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
   4. En-tête, boutons, mentions
   ------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgb(10 31 68 / 0.9);
  backdrop-filter: blur(12px);
  color: var(--paper);
  border-bottom: 1px solid rgb(255 255 255 / 0.07);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.85rem;
}

/* Logo MED4CLUB, fourni par le client le 2026-09-01 et archivé en
   brand/source/Med4Club-logo.png. Le PNG a une vraie couche alpha : elle sert
   directement de masque, sans le seuillage de luminance qu'imposaient les
   JPEG précédents. Recoloré en blanc pour les fonds navy. */
.wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* Le logo est borné en HAUTEUR, sous celle du bouton : c'est le bouton qui
   fixe la hauteur de la barre, pas le logo. Le glyphe MED4CLUB est large et
   plat (rapport 3,36), donc une petite hauteur suffit à le rendre lisible. */
.wordmark img {
  display: block;
  height: 2.1rem;
  width: auto;
}

.foot .wordmark img {
  height: 1.9rem;
}

.masthead nav {
  display: flex;
  gap: 1.7rem;
}

.masthead nav a {
  position: relative;
  color: #c9d3e6;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  padding-block: 0.35rem;
  transition: color 0.25s var(--out);
}

/* Le trait part du bord d'entrée plutôt que du centre : il suit le sens de
   lecture au lieu de s'ouvrir en deux. */
.masthead nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--mint);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--out);
}

.masthead nav a:hover {
  color: var(--paper);
}

.masthead nav a:hover::after {
  transform: scaleX(1);
}

@media (max-width: 940px) {
  .masthead nav {
    display: none;
  }
}

/* Sur petit écran, « Demander une démonstration » passait sur deux lignes et
   portait l'en-tête collant à 109 px, soit un huitième de l'écran occupé en
   permanence. On resserre le bouton pour le ramener sur une ligne. */
@media (max-width: 520px) {
  .masthead .btn {
    padding: 0.65rem 0.85rem;
    font-size: 0.8rem;
  }

  .masthead .wordmark img {
    height: 1.8rem;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.45rem;
  font-weight: 700;
  font-size: 0.95rem;
  font-stretch: 105%;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 3px;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.16s
    var(--out);
}

.btn--mint {
  background: var(--mint);
  color: var(--navy-deep);
  box-shadow: 0 12px 26px -14px rgb(26 197 126 / 0.85);
}

.btn--mint:hover {
  background: #22d98d;
}

.btn--outline {
  border-color: rgb(255 255 255 / 0.28);
  color: var(--paper);
}

.btn--outline:hover {
  border-color: var(--mint);
  color: var(--mint);
}

.btn--ink {
  background: var(--navy);
  color: var(--paper);
}

.btn--ink:hover {
  background: var(--navy-700);
}

/* Un bouton doit répondre au doigt : 160 ms, ease-out. */
.btn:active {
  transform: scale(0.97);
}

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

/* La ligne anti-objection. Elle répond, sous les boutons, à la seule question
   qui bloque un président de club : « le coach va voir le dossier ? » */
.claim {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 1.3rem 0 0;
  font-size: 0.92rem;
  color: #b9c5dc;
}

.claim .ic {
  color: var(--mint);
  width: 1.1rem;
  height: 1.1rem;
  /* Sur deux lignes, un alignement centré fait flotter la coche au milieu du
     bloc au lieu de la caler sur la première ligne. */
  margin-top: 0.2em;
}

/* Mention de démonstration. Obligatoire sous chaque bloc d'interface : elle
   protège le positionnement ET, paradoxalement, rend la maquette crédible. */
.demo-note {
  margin: 1.5rem auto 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.42);
  max-width: none;
}

.demo-note--light {
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.76rem;
  margin-top: 2rem;
}

/* -------------------------------------------------------------------------
   7. Héros
   ------------------------------------------------------------------------- */

.hero {
  background: var(--navy);
  color: var(--paper);
  padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.75rem) 0;
  overflow: hidden;
}

.hero__copy {
  max-width: none;
}

.hero h1 {
  margin-bottom: 1rem;
  max-width: 26ch;
}

.hero h1 span {
  display: block;
  color: var(--mint);
}

.hero .lede {
  color: #c9d3e6;
  max-width: 50ch;
}

.hero .kicker {
  color: #7fd8b4;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.9rem;
}

/*
  La scène. Trois surfaces à trois profondeurs, et surtout TRANCHÉES par le
  bas de la section : une surface coupée par le bord se lit comme une fenêtre
  ouverte sur un produit qui continue, là où un cadre net avec une grande
  ombre au milieu du héros est le marqueur numéro un du gabarit.
*/
.stage {
  position: relative;
  margin-top: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  height: clamp(19rem, 15rem + 14vw, 26rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 74%, transparent 100%),
    linear-gradient(to right, #000 0 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 0 74%, transparent 100%),
    linear-gradient(to right, #000 0 86%, transparent 100%);
  mask-composite: intersect;
}

.stage__in {
  position: relative;
  width: min(1180px, 100% - 3rem);
  margin-inline: auto;
  height: 30rem;
}

.stage .device__frame,
.stage .win {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.24), inset 0 0 0 1px rgb(255 255 255 / 0.07), 0 18px
    34px -26px rgb(4 10 22 / 0.8);
}

/* Les deux traits disent le seul chemin par lequel une information circule.
   Tracé au chargement, puis plus rien : une boucle permanente ici
   distrairait de la lecture du titre. */
@keyframes trace {
  to {
    stroke-dashoffset: 0;
  }
}

/* Carte d'agrégat du club. Elle ne porte QUE des nombres collectifs : une
   pastille de couleur à côté d'un nom de joueur se lirait comme un indicateur
   d'état sur une personne, ce que le produit ne fait pas. */
.kpi {
  border-radius: 0.85rem;
  background: var(--white);
  color: var(--ink);
  padding: 0.8rem 0.9rem;
  box-shadow: var(--lift-hi);
}

.kpi__h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.kpi__t {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.kpi__live {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--mono);
  font-size: 0.52rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mint-ink);
}

.kpi__live i {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--mint);
}

.kpi__n {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
  margin-top: 0.6rem;
}

.kpi__n b {
  display: block;
  font-family: var(--mono);
  font-size: 1.05rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.kpi__n span {
  display: block;
  font-size: 0.5rem;
  line-height: 1.2;
  color: var(--navy-500);
  margin-top: 0.18rem;
}

.kpi__f {
  margin: 0.65rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.52rem;
  color: var(--navy-500);
}

/* Jauge, réutilisée au héros, dans le tableau club et dans l'appareil. */
.meter {
  height: 0.5rem;
  border-radius: 1rem;
  background: var(--navy-50);
  overflow: hidden;
}

.meter i {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mint), #17a86c);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--out) 0.2s;
}

.meter--sm {
  height: 0.35em;
  margin: 0.35em 0 0.1em;
}

.is-visible .meter i,
.stage .meter i,
/* -------------------------------------------------------------------------
   8. Bandeau de réassurance
   ------------------------------------------------------------------------- */

  .proof {
  background: var(--navy-deep);
  border-block: 1px solid rgb(255 255 255 / 0.08);
  padding-block: 1rem;
}

.proof__in {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 2.4rem;
  justify-content: space-between;
}

.proof__in span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #c9d3e6;
}

.proof__in .ic {
  width: 1rem;
  height: 1rem;
  color: var(--mint);
}

/* -------------------------------------------------------------------------
   9. Ce qui se passe aujourd'hui
   Trois constats, un par acteur. Pas de chronologie : une frise oblige à
   suivre un personnage et à reconstituer une histoire avant d'arriver au
   point. Ici le lecteur constate, ligne par ligne, et chaque ligne prépare
   l'un des trois métiers de la section suivante.
   ------------------------------------------------------------------------- */

.head {
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem);
}

.head h2 {
  max-width: 26ch;
}

.head p {
  margin-top: 1rem;
  max-width: 62ch;
}

.facts {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.facts li {
  display: grid;
  grid-template-columns: minmax(0, 15rem) 1fr;
  gap: clamp(1rem, 4vw, 4rem);
  padding-block: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
  /* Les deux colonnes s'alignent sur leur première ligne de texte, pas sur le
     haut de leur boîte : sinon le nom, plus gros, flotte sous le paragraphe. */
  align-items: baseline;
}

.facts__who {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
  font-weight: 800;
  font-stretch: 110%;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

/* Un trait qui se pose : le seul mouvement de la section, et il marque le
   début de la ligne au lieu de décorer. */
.facts__who::before {
  content: "";
  flex: none;
  width: 1.7rem;
  height: 3px;
  background: var(--mint);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--out) 0.1s;
}

.facts li.is-visible .facts__who::before {
  transform: scaleX(1);
}

.facts__c p {
  margin: 0;
  max-width: 60ch;
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.1rem);
  color: var(--ink-soft);
}

@media (max-width: 720px) {
  .facts li {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .facts__who {
    gap: 0.6rem;
  }
}

/* -------------------------------------------------------------------------
   10. La bascule
   Rayures de tonte : un terrain tondu en diagonale. Motif propre au sport,
   construit en dégradé répété — aucune image, aucun serveur tiers.
   ------------------------------------------------------------------------- */

.plate {
  min-height: clamp(18rem, 40vh, 26rem);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--navy-deep);
}

.plate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(
      108deg,
      #0b2149,
      #0b2149 3.5rem,
      #0e2755 3.5rem,
      #0e2755 7rem
    ), radial-gradient(60rem 34rem at 82% 8%, rgb(26 197 126 / 0.18), transparent 64%);
}

/* Vignette : sans elle, les rayures montent jusqu'aux bords et la bande se
   lit comme un motif de fond, pas comme une image. */
.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(130% 90% at 22% 78%, transparent 30%, rgb(5 15 36 / 0.85));
}

.plate__fig {
  position: absolute;
  top: -12%;
  right: -2%;
  bottom: -12%;
  width: min(42%, 26rem);
  color: rgb(255 255 255 / 0.09);
  pointer-events: none;
}

.plate__fig svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.plate__body {
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

.plate__quote {
  margin: 0;
  color: var(--paper);
  font-weight: 700;
  font-stretch: 108%;
  font-size: clamp(1.3rem, 1rem + 1.7vw, 2.35rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 26ch;
  text-wrap: balance;
}

.plate__sub {
  margin: 1.1rem 0 0;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  color: var(--mint);
  font-weight: 600;
}

@media (max-width: 780px) {
  .plate__fig {
    width: 60%;
    right: -18%;
    opacity: 0.6;
  }
}

/* -------------------------------------------------------------------------
   12. Côté club
   ------------------------------------------------------------------------- */

.dash {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}

.dash__list {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}

.dash__list li {
  display: grid;
  gap: 0.2rem;
  padding-left: 1rem;
  border-left: 1px solid rgb(255 255 255 / 0.16);
}

.dash__list b {
  font-weight: 700;
  font-stretch: 106%;
  color: var(--paper);
}

.dash__list span {
  color: #c3cddf;
  font-size: 0.94rem;
}

.board {
  border-radius: 16px;
  padding: 1.15rem 1.25rem 1.35rem;
  background: linear-gradient(170deg, #fcfdff, #f4f6fa);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 40px 80px -38px rgb(4 10 22 / 0.95);
}

.board__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.board__title {
  margin: 0;
  font-weight: 800;
  font-stretch: 108%;
  font-size: 0.98rem;
  letter-spacing: -0.015em;
}

.board__live {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mint-ink);
}

.board__live i {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--mint);
}

.board__counts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin: 0.95rem 0 1.1rem;
  padding: 0;
}

.board__counts b {
  display: block;
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.board__counts span {
  display: block;
  font-size: 0.68rem;
  line-height: 1.25;
  color: var(--navy-500);
}

.board__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0 0 0.95rem;
  padding: 0;
}

.board__grid li {
  display: grid;
  place-items: center;
  padding-block: 0.5rem;
  border-radius: 0.4rem;
  border: 1px solid color-mix(in oklab, var(--s) 45%, transparent);
  background: color-mix(in oklab, var(--s) 14%, transparent);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  opacity: 0;
  transform: translateY(6px);
}

.board.is-visible .board__grid li {
  animation: pop 0.4s var(--out) both;
  animation-delay: calc(0.25s + var(--n, 0) * 35ms);
}

@keyframes pop {
  to {
    opacity: 1;
    transform: none;
  }
}

.board__legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  margin: 0 0 0.8rem;
  padding: 0;
  font-size: 0.72rem;
  color: var(--navy-500);
}

.board__legend li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.board__legend li::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 0.2rem;
  background: var(--s);
}

.board__note {
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--navy-500);
}

[data-s="ok"] {
  --s: var(--mint);
}
[data-s="care"] {
  --s: var(--care);
}
[data-s="back"] {
  --s: var(--cond);
}
[data-s="off"] {
  --s: #d8a112;
}

.shot {
  position: relative;
  margin: clamp(2rem, 4vw, 3.5rem) 0 0;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 14px;
  overflow: hidden;
  background: #fcfdff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 40px 90px -40px rgb(4 10 22 / 0.9);
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
}

.shot figcaption {
  padding: 0.65rem 0.9rem;
  font-size: 0.78rem;
  color: var(--navy-500);
  background: var(--paper-warm);
  border-top: 1px solid var(--rule);
}

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

/* -------------------------------------------------------------------------
   13. Le parcours — scène épinglée
   Le conteneur haut crée la durée du défilement ; la scène reste collée
   pendant qu'on le traverse, et la progression pilote l'étape ET l'écran.
   ------------------------------------------------------------------------- */

.js .journey {
  height: 480vh;
}

.journey {
  position: relative;
}

.journey__stage {
  display: grid;
  align-items: center;
}

.js .journey__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.jr {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.jr h2 {
  margin-bottom: 2.2rem;
  max-width: 16ch;
}

/* Les panneaux sont superposés : un seul est visible, les autres attendent
   au-dessus. On ne déplace jamais la mise en page. */
.jr__panels {
  display: grid;
  gap: 2rem;
}

.js .jr__panels {
  display: block;
  position: relative;
  min-height: 13rem;
}

.js .jr__panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s var(--out), transform 0.45s var(--out);
  pointer-events: none;
}

.jr__panel[data-on] {
  opacity: 1;
  transform: none;
}

/* Sortie plus rapide que l'entrée : le système répond vite. */
.jr__panel:not([data-on]) {
  transition-duration: 0.22s;
}

.jr__num {
  display: block;
  font-family: var(--mono);
  font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.6rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px #6fc9a2;
  margin-bottom: 0.7rem;
}

.jr__panel h3 {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  margin-bottom: 0.6rem;
}

.jr__panel p {
  color: var(--ink-soft);
  max-width: 46ch;
}

.jr__dots {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
}

.jr__dots li {
  width: 2.25rem;
  height: 3px;
  background: var(--rule);
  transition: background-color 0.35s var(--out);
}

.jr__dots li[data-on] {
  background: var(--mint-ink);
}

.jr__figure {
  width: min(100%, 300px);
  justify-self: center;
}

@media (max-width: 900px) {
  .journey {
    height: auto;
  }

  .journey__stage {
    position: static;
    height: auto;
    padding-block: 3.5rem;
  }

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

  .jr__figure {
    display: none;
  }

  /* Sans épinglage, la scène perd son sens : la lecture linéaire reprend. */
  .jr__panels {
    position: static;
    min-height: 0;
    display: grid;
    gap: 2rem;
  }

  .jr__panel {
    position: static;
    opacity: 1;
    transform: none;
  }

  .jr__dots {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   14. Les limites
   ------------------------------------------------------------------------- */

.nots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: 0 3.5rem;
}

.nots li {
  position: relative;
  padding: 1.5rem 1.75rem 1.6rem 2.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.16);
}

.nots li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.85rem;
  width: 0.85rem;
  height: 0.85rem;
  background: linear-gradient(45deg, transparent 44%, var(--mint) 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--mint) 44% 56%, transparent 56%);
}

.nots b {
  display: block;
  font-weight: 800;
  font-stretch: 106%;
  font-size: 1.05rem;
  color: var(--mint);
  margin-bottom: 0.4rem;
}

.nots span {
  color: #c3cddf;
  font-size: 0.94rem;
}

.urgence {
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
  padding: 1rem 1.25rem;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 8px;
  font-weight: 600;
  color: var(--paper);
  max-width: none;
}

/* -------------------------------------------------------------------------
   15. Contact et pied de page
   ------------------------------------------------------------------------- */

.engage {
  margin: 1rem 0 0;
  font-size: 0.94rem;
  color: #b9c5dc;
  max-width: 70ch;
}

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

.contact__cta {
  margin-top: 1.75rem;
}

.contact__aside {
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  border-radius: 16px;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9);
}

.contact__aside h3 {
  margin-bottom: 0.6rem;
}

.contact__aside p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.96rem;
}

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

.foot {
  background: var(--navy-ink);
  color: #b9c5dc;
  padding-block: 2.75rem 3rem;
  font-size: 0.9rem;
}

.foot a {
  color: #cfd8e8;
  text-decoration: none;
}

.foot a:hover {
  color: var(--mint);
}

.foot__top {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.14);
}

.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
}

.foot p {
  margin: 1.5rem 0 0;
  max-width: 82ch;
  line-height: 1.6;
}

/* -------------------------------------------------------------------------
   16. Pages de contenu (mentions légales, confidentialité)
   ------------------------------------------------------------------------- */

.doc {
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  max-width: 72ch;
}

.doc h1 {
  font-size: clamp(1.9rem, 1.5rem + 2.2vw, 3rem);
  margin: 0 0 0.5rem;
}

.doc h2 {
  font-size: 1.2rem;
  margin-top: 2.5rem;
  margin-bottom: 0.5rem;
}

.doc h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.4rem;
}

.doc p,
.doc li {
  color: var(--ink-soft);
}

.doc ul {
  padding-left: 1.15rem;
  display: grid;
  gap: 0.4rem;
}

.doc a {
  color: var(--mint-ink);
}

.doc__back {
  display: inline-block;
  margin-bottom: 1.5rem;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.9rem;
}

.muted {
  color: var(--ink-soft);
}

.todo {
  background: #fdf2c8;
  border-bottom: 2px solid #d9a41a;
  padding: 0.05rem 0.35rem;
  font-weight: 600;
  color: #7a5b12;
}

/* -------------------------------------------------------------------------
   17. Mouvement
   On n'anime que transform, opacity et clip-path.
   ------------------------------------------------------------------------- */

/* Le titre se dévoile ligne à ligne. Rien n'apparaît de nulle part : le texte
   est déjà là, il est découvert. */
.hero h1 {
  clip-path: inset(0 0 105% 0);
  animation: unveil 1s var(--inout) 0.1s forwards;
}

.hero h1 span {
  clip-path: inset(0 0 105% 0);
  animation: unveil 1s var(--inout) 0.24s forwards;
}

@keyframes unveil {
  to {
    clip-path: inset(0 0 -12% 0);
  }
}

.rise {
  opacity: 0;
  transform: translateY(14px);
  animation: rise 0.7s var(--out) both;
}

@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}

.hero .kicker.rise {
  animation-delay: 0.05s;
}
.hero .lede.rise {
  animation-delay: 0.44s;
}
.hero__actions.rise {
  animation-delay: 0.52s;
}
.hero .claim.rise {
  animation-delay: 0.6s;
}

.stage {
  opacity: 0;
  animation: rise 0.9s var(--out) 0.45s both;
}

/* Le masquage est conditionné à l'exécution effective du JS : c'est lui qui
   pose .is-visible. Sans la classe .js, ces règles ne s'appliquent pas et le
   contenu est visible d'emblée. Un contenu masqué par défaut ne doit jamais
   pouvoir le rester. */
.js .onscroll {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--out), transform 0.6s var(--out);
}

/* Cascade courte entre éléments d'une même section : 60 ms, pas plus. */
.js .onscroll.is-visible {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--d, 0) * 60ms);
}

/* Barre de progression de lecture, pilotée par le défilement en CSS natif :
   aucun écouteur, le navigateur s'en charge hors du fil principal. Là où
   animation-timeline n'existe pas, la barre reste simplement invisible. */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 70;
  pointer-events: none;
}

.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--mint);
  transform-origin: left;
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress span {
      width: 100%;
      transform: scaleX(0);
      animation: fill linear both;
      animation-timeline: scroll(root block);
    }
  }
}

@keyframes fill {
  to {
    transform: scaleX(1);
  }
}

/* Parallaxe légère sur la capture. Timeline de vue : la progression est celle
   de l'élément dans le viewport, pas du temps. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .shot {
      animation: lift linear both;
      animation-timeline: view();
      animation-range: cover 8% cover 68%;
    }

    @keyframes lift {
      from {
        transform: translateY(30px) scale(0.98);
      }
      to {
        transform: translateY(-12px) scale(1);
      }
    }
  }
}

/* Les barres du récapitulatif hebdomadaire montent en cascade quand l'écran
   devient visible. Une seule chose animée par écran, jamais deux. */
.stage .bars i {
  animation: grow 0.5s var(--out) both;
  animation-delay: calc(var(--n) * 70ms);
}

@keyframes grow {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

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

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

  /* Chaque élément est figé sur son état FINAL, jamais sur son état initial :
     une jauge vide ou un bloc invisible seraient un contenu perdu. */
  .rise,
  .onscroll,
  .stage,
  .board__grid li,
  .bars i {
    opacity: 1;
    transform: none;
  }

  .hero h1,
  .hero h1 span {
    clip-path: none;
  }

  .meter i,
  .facts__who::before {
    transform: scaleX(1);
  }

  .device__screen::after,
  .caret {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   18. Le mannequin, en filigrane
   Tracés de react-native-body-highlighter (MIT, © 2022 ELABBASSI Hicham),
   ceux-là mêmes qu'affiche l'application. Les couleurs passent par des
   propriétés personnalisées : elles traversent l'arbre fantôme d'un <use>,
   ce que les sélecteurs de classe ne font pas.
   ------------------------------------------------------------------------- */

.body {
  --z-off: var(--navy-100);
  --z-av: var(--mint-100);
  --z-sel: var(--mint);
  width: 100%;
  height: 100%;
  stroke: #9fa8c5;
  stroke-width: 1;
}

.body--ghost {
  --z-off: rgb(255 255 255 / 0.07);
  --z-av: rgb(255 255 255 / 0.07);
  --z-sel: rgb(255 255 255 / 0.07);
  stroke: rgb(255 255 255 / 0.1);
}

/* -------------------------------------------------------------------------
   19. Le tableau de bord
   Pièce visuelle centrale du site : c'est elle qui doit faire dire à un
   dirigeant « je vois enfin où en est mon effectif ». Reconstruite en
   HTML/CSS, donc nette partout, animable, et modifiable sans recapture.
   ------------------------------------------------------------------------- */

.db {
  border-radius: 18px;
  padding: clamp(1rem, 0.8rem + 0.7vw, 1.5rem);
  background: linear-gradient(168deg, #fcfdff, #eef1f7);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 0 0 1px rgb(10 31 68 / 0.06), 0 40px 80px
    -38px rgb(4 10 22 / 0.9);
}

.db__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.db__club {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  font-stretch: 108%;
  letter-spacing: -0.02em;
}

.db__sub {
  margin: 0.1rem 0 0;
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--navy-500);
}

.db__live {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mint-ink);
  white-space: nowrap;
}

.db__live i {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--mint);
}

/* Le nombre qui porte la section. Chasse mono et chiffres tabulaires :
   un compteur qui danse à chaque mise à jour se remarque. */
.db__hero {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0.9rem 0 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
}

.db__hero b {
  font-family: var(--mono);
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.db__hero span {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy-500);
}

.db__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 0.7rem;
  align-items: start;
}

/* `.band--navy p` s'appliquait aussi aux paragraphes DANS le tableau de bord,
   qui est une surface claire posée sur la bande sombre : tous ses libellés
   partaient en gris pâle sur blanc. On rétablit l'encre du panneau. */
.band--navy .db p {
  color: var(--navy-500);
  line-height: 1.4;
}

.band--navy .db .db__club {
  color: var(--ink);
}

.db__card {
  padding: 0.75rem 0.85rem 0.85rem;
  border-radius: 12px;
  background: var(--white);
  border: 1px solid var(--rule);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9);
}

.db__h {
  margin: 0 0 0.6rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--navy-500);
}

.db__nums {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.db__nums li {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  align-items: baseline;
  gap: 0.5rem;
}

.db__nums b {
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--s);
}

.db__nums span,
.db__rows span {
  font-size: 0.74rem;
  line-height: 1.25;
  color: var(--navy-500);
}

.db__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.db__rows li {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  align-items: baseline;
  gap: 0.5rem;
}

.db__rows b {
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.db__bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.db__bars li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 0.6rem;
}

.db__bars span {
  font-size: 0.72rem;
  color: var(--navy-500);
}

.db__bars b {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  align-self: center;
}

.db__bars i {
  grid-column: 1 / -1;
  height: 0.4rem;
  border-radius: 1rem;
  background: linear-gradient(90deg, var(--mint), #17a86c);
  width: var(--w);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--out) 0.25s;
}

.is-visible .db__bars i,
.stage .db__bars i {
  transform: scaleX(1);
}

.db__note {
  margin: 0.75rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
  font-size: 0.68rem;
  line-height: 1.4;
  color: var(--navy-500);
}

.db__squad {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}

/* Trente pastilles, une par sportif. Le nombre est la donnée ; la couleur
   ne dit qu'un statut d'organisation sportive, jamais un état de santé. */
.squad {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0 0 0.7rem;
  padding: 0;
}

.squad li {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 0.3rem;
  background: color-mix(in oklab, var(--s) 20%, transparent);
  border: 1px solid color-mix(in oklab, var(--s) 55%, transparent);
  opacity: 0;
  transform: translateY(5px);
}

.is-visible .squad li,
.stage .squad li {
  animation: pop 0.36s var(--out) both;
  animation-delay: calc(0.2s + var(--n, 0) * 22ms);
}

.squad__legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  margin: 0;
  padding: 0;
  font-size: 0.7rem;
  color: var(--navy-500);
}

.squad__legend li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.squad__legend li::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 0.18rem;
  background: var(--s);
}

[data-s="wait"] {
  --s: #6b7794;
}

/* Dans le héros, le tableau de bord est vu à sa taille native et tranché par
   le bas de la section : une fenêtre ouverte sur un produit qui continue. */
.stage__board {
  position: absolute;
  left: 0;
  right: 5.5rem;
  top: 0;
  z-index: 1;
}

@media (max-width: 1100px) {
  .stage__board {
    right: 0;
  }
}

.db--full {
  padding: clamp(1.1rem, 0.9rem + 0.9vw, 1.8rem);
}

/* -------------------------------------------------------------------------
   20. Les trois piliers
   Trois blocs, mais trois contenus de forme différente : une liste
   d'objectifs, une chaîne d'étapes, un réseau d'acteurs. C'est ce qui
   empêche de les lire comme trois clones.
   ------------------------------------------------------------------------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
  align-items: start;
}

.pillar {
  position: relative;
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  border-radius: 18px;
  background: var(--white);
  border: 1px solid var(--rule);
  box-shadow: var(--lift);
}

.pillar__n {
  position: absolute;
  top: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem);
  right: clamp(1.2rem, 1rem + 0.6vw, 1.7rem);
  margin: 0;
  font-family: var(--mono);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--navy-100);
}

.pillar h3 {
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.85rem);
  font-stretch: 112%;
}

.pillar__lead {
  margin: 0.5rem 0 0.9rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--mint-ink);
}

.pillar p {
  color: var(--ink-soft);
  font-size: 0.97rem;
}

.pillar__list {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.pillar__list li {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: 0.55rem;
  font-size: 0.93rem;
  color: var(--ink-soft);
}

.pillar__list li::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  margin-top: 0.55em;
  background: var(--mint);
}

.pillar__foot {
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--rule);
  font-size: 0.85rem;
  color: var(--navy-500);
}

/* La chaîne de prise en charge : des étapes qui s'enchaînent, pas une liste. */
.chain {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.15rem;
  margin: 1.2rem 0 0;
  padding: 0;
  counter-reset: c;
}

.chain li {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy-700);
  padding: 0.3rem 0.6rem;
  border-radius: 1rem;
  background: var(--mint-50);
  border: 1px solid var(--mint-100);
}

.chain li:not(:last-child)::after {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  margin-left: 0.45rem;
  border-top: 1.6px solid var(--mint-ink);
  border-right: 1.6px solid var(--mint-ink);
  rotate: 45deg;
}

.actors {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.actors li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.6rem;
  background: var(--paper-warm);
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--navy-700);
}

.actors .ic {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--mint-ink);
}

.pillars__claim {
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) auto 0;
  max-width: 46ch;
  text-align: center;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 700;
  font-stretch: 106%;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--navy);
}

/* -------------------------------------------------------------------------
   21. Le parcours, en diagramme
   La scène épinglée est conservée, mais elle ne montre plus d'écrans : à
   droite, le parcours lui-même et, à chaque étape, qui intervient.
   ------------------------------------------------------------------------- */

.flow {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.6rem;
  position: relative;
  display: grid;
  gap: 0.35rem;
}

.flow::before {
  content: "";
  position: absolute;
  left: 0.34rem;
  top: 1.1rem;
  bottom: 1.1rem;
  width: 2px;
  background: var(--rule);
}

.flow li {
  position: relative;
  padding: 0.55rem 0.8rem;
  border-radius: 0.65rem;
  border: 1px solid transparent;
  transition: background-color 0.4s var(--out), border-color 0.4s var(--out);
}

.flow__d {
  position: absolute;
  left: -1.6rem;
  top: 1rem;
  width: 0.78rem;
  height: 0.78rem;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--navy-100);
  transition: background-color 0.4s var(--out), border-color 0.4s var(--out), scale 0.4s var(--out);
}

.flow b {
  display: block;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--navy-500);
  transition: color 0.4s var(--out);
}

.flow em {
  display: block;
  margin-top: 0.1rem;
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.66rem;
  /* navy-100 sur papier tombait sous 2:1 : l'acteur de chaque étape était
     illisible tant que l'étape n'était pas atteinte. */
  color: #7c88a8;
  transition: color 0.4s var(--out);
}

/* L'étape atteinte reste marquée, l'étape courante est la seule pleine :
   on lit d'un coup d'œil où l'on en est dans le parcours. */
.flow li[data-done] .flow__d {
  background: var(--mint-100);
  border-color: var(--mint);
}

.flow li[data-done] b {
  color: var(--navy-700);
}

.flow li[data-on] {
  background: var(--white);
  border-color: var(--rule);
  box-shadow: var(--lift);
}

.flow li[data-on] .flow__d {
  background: var(--mint);
  border-color: var(--mint);
  scale: 1.15;
}

.flow li[data-on] b {
  color: var(--navy);
}

.flow li[data-on] em {
  color: var(--mint-ink);
}

.jr__figure {
  width: min(100%, 24rem);
  justify-self: center;
}

/* -------------------------------------------------------------------------
   22. Confidentialité, montrée en deux colonnes
   ------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1rem;
}

.split__col {
  padding: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem);
  border-radius: 16px;
  background: var(--white);
  border: 1px solid var(--rule);
  box-shadow: var(--lift);
}

/* La colonne protégée porte une trame : on voit qu'il y a quelque chose,
   et qu'on n'y accède pas. */
.split__col--locked {
  background: repeating-linear-gradient(-45deg, #eef0f6, #eef0f6 6px, #f5f7fa 6px, #f5f7fa 12px);
}

.split__h {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 800;
  font-stretch: 106%;
  letter-spacing: -0.015em;
}

.split__h .ic {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--mint-ink);
}

.split__col--locked .split__h .ic {
  color: var(--navy-500);
}

.split__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.split__list li {
  padding: 0.45rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--mint-50);
  border: 1px solid var(--mint-100);
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--mint-ink);
}

.split__col--locked .split__list li {
  background: rgb(255 255 255 / 0.7);
  border-color: var(--rule);
  color: var(--navy-500);
  font-weight: 500;
}

.split__f {
  margin: 1.1rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--rule);
  font-size: 0.86rem;
  color: var(--navy-500);
}

/* -------------------------------------------------------------------------
   23. Pourquoi Med4Club, et le terrain
   ------------------------------------------------------------------------- */

.whys {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.whys li {
  display: grid;
  grid-template-columns: minmax(0, 18rem) 1fr;
  gap: clamp(1rem, 4vw, 4rem);
  padding-block: clamp(1.3rem, 1rem + 1.2vw, 2rem);
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

.whys__who {
  margin: 0;
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  font-weight: 800;
  font-stretch: 108%;
  letter-spacing: -0.02em;
}

.whys li > p:last-child {
  margin: 0;
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.12rem);
  color: var(--ink-soft);
  max-width: 56ch;
}

.refs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
}

.refs li {
  padding: clamp(1.2rem, 1rem + 0.7vw, 1.6rem);
  border-radius: 14px;
  background: var(--white);
  border: 1px solid var(--rule);
  box-shadow: var(--lift);
}

.refs__k {
  margin: 0 0 0.5rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mint-ink);
}

.refs li p:last-child {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.refs__todo {
  margin: 1.5rem 0 0;
  font-size: 0.9rem;
  color: var(--navy-500);
  max-width: 70ch;
}

/* -------------------------------------------------------------------------
   24. Compléments
   ------------------------------------------------------------------------- */

.dash__claim {
  margin: 1.5rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--mint);
  font-weight: 600;
  color: var(--paper);
}

.btn--ghost {
  color: var(--navy);
  border-color: var(--rule);
}

.btn--ghost:hover {
  border-color: var(--navy);
}

.contact__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

@media (max-width: 720px) {
  .whys li {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
}

/* -------------------------------------------------------------------------
   25. Compléments de la version consolidée
   ------------------------------------------------------------------------- */

.hero__sub {
  margin: 0 0 1.2rem;
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem);
  font-weight: 700;
  color: var(--mint);
  letter-spacing: -0.01em;
}

/* Téléphone en retrait derrière le tableau de bord : il dit qu'une
   application existe, sans rien en montrer. Aucun texte, donc rien à lire. */
.ghostphone {
  position: absolute;
  right: 0;
  top: 2.5rem;
  z-index: 0;
  width: 9.5rem;
  aspect-ratio: 9 / 18;
  border-radius: 1.6rem;
  background: linear-gradient(160deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.04));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16);
  backdrop-filter: blur(2px);
}

.ghostphone::after {
  content: "";
  position: absolute;
  inset: 0.5rem;
  border-radius: 1.2rem;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.02));
}

@media (max-width: 900px) {
  .ghostphone {
    display: none;
  }
}

/* La charnière. Seule sur sa ligne, en vert : c'est elle qui fait basculer
   le discours de la réparation vers la prévention. */
.plate__hinge {
  margin: 1.6rem 0 0;
  max-width: none;
  font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.9rem);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--mint);
}

.pillar__ic {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 0.9rem;
  border-radius: 0.7rem;
  background: var(--mint-50);
  color: var(--mint-ink);
}

.pillar__ic .ic {
  width: 1.25rem;
  height: 1.25rem;
}

/* La phrase la plus commerciale de la page mérite un aplat, pas un paragraphe. */
.bigclaim {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding: clamp(1.75rem, 1.4rem + 1.8vw, 3rem);
  border-radius: 20px;
  background: linear-gradient(150deg, var(--mint), #14b072);
  display: grid;
  gap: 1.5rem;
  justify-items: center;
  text-align: center;
  box-shadow: 0 24px 50px -28px rgb(26 197 126 / 0.8);
}

.bigclaim p {
  margin: 0;
  max-width: 30ch;
  font-size: clamp(1.25rem, 1.05rem + 1.1vw, 1.9rem);
  font-weight: 800;
  font-stretch: 108%;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--navy-deep);
}

.bigclaim .btn--ink {
  background: var(--navy);
  color: var(--paper);
}

/* Le parcours : six étapes visibles d'un coup, en ligne sur grand écran et
   empilées sur mobile. Pas de scène épinglée, pas de révélation successive :
   le brief demande une lecture immédiate. */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Colonnes explicites plutôt qu'auto-fit : à 1200 px, auto-fit tombait sur
     cinq colonnes et laissait la sixième étape seule sur une ligne, ce qui
     casse la lecture d'un parcours. */
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 46rem) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 70rem) {
  .steps {
    grid-template-columns: repeat(6, 1fr);
  }
}

.steps li {
  position: relative;
  padding: 1.6rem 1.2rem 1.6rem 0;
  border-top: 2px solid var(--rule);
  margin-right: 1.2rem;
}

/* Le filet du premier jalon prend la couleur d'accent : le parcours commence
   à la prévention, et c'est tout le déplacement de discours. */
.steps li:first-child {
  border-top-color: var(--mint);
}

.steps__n {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--mint-ink);
  margin-bottom: 0.7rem;
}

.steps b {
  display: block;
  font-size: 1.08rem;
  font-weight: 800;
  font-stretch: 106%;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}

.steps p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.steps__close {
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--mint);
  max-width: 68ch;
  font-size: clamp(1rem, 0.97rem + 0.3vw, 1.15rem);
  color: var(--ink-soft);
}

/* Barre de répartition : elle se lit plus vite que trente pastilles. */
.repart {
  display: flex;
  height: 0.6rem;
  border-radius: 1rem;
  overflow: hidden;
  margin-bottom: 0.75rem;
  background: var(--navy-50);
}

.repart i {
  width: var(--w);
  background: var(--s);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--out) 0.2s;
}

.is-visible .repart i,
.stage .repart i {
  transform: scaleX(1);
}

.squad li {
  display: grid;
  place-items: center;
  width: auto;
  min-width: 1.9rem;
  height: 1.6rem;
  padding-inline: 0.2rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 500;
  color: var(--navy-700);
}

.db__bars em {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.62rem;
  color: var(--navy-500);
}

[data-s="cond"] {
  --s: var(--cond);
}

.head--light .lede {
  color: #dbe2ee;
}

.dash__t {
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem);
  margin-bottom: 0.8rem;
}

.dash__p {
  color: #c3cddf;
  font-size: 0.97rem;
}

.dash__p + .dash__p {
  margin-top: 0.7rem;
}

.dash__list {
  margin-top: 1.5rem;
}

/* Confidentialité : deux colonnes face à face, séparées par un trait. */
.split {
  position: relative;
}

@media (min-width: 62rem) {
  .split::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 1.5rem;
    bottom: 1.5rem;
    width: 1px;
    background: var(--rule);
  }
}

.split__under {
  margin-top: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  display: grid;
  gap: 0.8rem;
  max-width: 78ch;
}

.split__under p {
  margin: 0;
  color: var(--ink-soft);
}

.split__hds {
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  font-size: 0.88rem;
}

/* Pourquoi Med4Club : quatre cartes de même format. */
.whys {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  border: 0;
}

.whys li {
  display: block;
  padding: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--lift);
}

.whys__who {
  margin: 0 0 0.7rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mint-ink);
}

.whys li > p:last-child {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: none;
}

/* Gabarit des preuves terrain : présent, masqué, prêt à être activé. */
.logos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1rem;
  margin: 0 0 2rem;
  padding: 0;
}

.logos li {
  height: 3.5rem;
  border-radius: 10px;
  background: var(--paper-warm);
  border: 1px dashed var(--rule);
}

.quotes {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
  margin: 0 0 2rem;
  padding: 0;
}

.quotes li {
  padding: 1.4rem;
  border-radius: 16px;
  background: var(--white);
  border: 1px solid var(--rule);
  box-shadow: var(--lift);
}

.quotes__ph {
  display: block;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--paper-warm);
  border: 1px dashed var(--rule);
  margin-bottom: 0.9rem;
}

.quotes blockquote {
  margin: 0 0 0.9rem;
  min-height: 4rem;
  font-size: 0.97rem;
  color: var(--ink-soft);
}

.figures {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1rem;
  margin: 0 0 2rem;
  padding: 0;
}

.figures li {
  padding: 1.4rem;
  border-radius: 14px;
  background: var(--paper-warm);
  border: 1px dashed var(--rule);
  min-height: 6rem;
}

.contact__mail {
  margin: 1.2rem 0 0;
  font-family: var(--mono);
  font-size: 0.9rem;
}

.contact__mail a {
  color: var(--mint-ink);
}

@media (max-width: 640px) {
  /* Beaucoup de présidents de club ouvriront la page depuis leur téléphone :
     la grille d'initiales passe à cinq colonnes et reste lisible. */
  .squad {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }

  .squad li {
    width: 100%;
    min-width: 0;
  }
}