/* ==========================================================================
   TIBZ — sections
   Mobile-first strict : le socle est ecrit a 360px, on ne monte qu'en
   @media (min-width). Aucune requete max-width dans ce fichier.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Primitives partagees
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { position: relative; }

/* Marqueur de section. Le filet acide est l'unite de mesure du site :
   il revient a chaque entree de section et se dessine au scroll. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  font-stretch: 88%;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--acid);
  line-height: 1;
}
.eyebrow__rule {
  display: block;
  width: clamp(1.75rem, 6vw, 3.5rem);
  height: 1px;
  background: var(--acid);
  transform-origin: left;
}
.eyebrow--dark { color: var(--indigo); }
.eyebrow--dark .eyebrow__rule { background: var(--indigo); }

.sec-head { margin-bottom: var(--s-7); }
.sec-title {
  font-size: var(--t-2xl);
  margin-top: var(--s-4);
}

/* Bouton : bloc acide plein. Le contraste carbone-sur-acide est le point
   le plus lumineux de la page, il n'y en a qu'un par ecran. */
.btn {
  --btn-py: 0.95rem;
  --btn-px: 1.6rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 2.75rem;
  padding: var(--btn-py) var(--btn-px);
  background: var(--acid);
  color: var(--carbon-900);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out-quart),
              color var(--dur-fast) var(--ease-out-quart);
  will-change: transform;
}
.btn:hover, .btn:focus-visible { background: var(--paper); }
.btn__meta {
  padding-left: var(--s-3);
  border-left: 1px solid currentColor;
  opacity: 0.55;
  font-weight: 500;
}
.btn--sm { --btn-py: 0.7rem; --btn-px: 1.05rem; font-size: 0.66rem; }
.btn--lg { --btn-py: 1.15rem; --btn-px: 1.9rem; font-size: var(--t-sm); }

.link-quiet {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-stretch: 88%;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--mute);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--carbon-700);
  transition: color var(--dur-fast) var(--ease-out-quart),
              border-color var(--dur-fast) var(--ease-out-quart);
}
.link-quiet:hover, .link-quiet:focus-visible { color: var(--acid); border-color: var(--acid); }

/* Etat de depart des reveals. JS retire l'attribut apres animation ; si JS
   ne tourne pas, la regle .no-js plus bas remet tout visible. */
[data-reveal] { opacity: 0; transform: translateY(1.15rem); }
[data-split] { opacity: 0; }
html.no-js [data-reveal],
html.no-js [data-split] { opacity: 1; transform: none; }


/* --------------------------------------------------------------------------
   Curseur + progression
   -------------------------------------------------------------------------- */
.cursor { display: none; }

@media (pointer: fine) and (min-width: 60rem) {
  .cursor {
    display: block;
    position: fixed;
    top: 0; left: 0;
    z-index: 900;
    pointer-events: none;
    mix-blend-mode: difference;
    will-change: transform;
  }
  .cursor__dot {
    display: block;
    width: 12px; height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: var(--acid);
    transition: width var(--dur-fast) var(--ease-out-quart),
                height var(--dur-fast) var(--ease-out-quart),
                margin var(--dur-fast) var(--ease-out-quart);
  }
  .cursor.is-active .cursor__dot {
    width: 42px; height: 42px;
    margin: -21px 0 0 -21px;
  }
  /* En mouvement reduit le JS du curseur ne tourne pas : sans cette regle
     le point resterait fige dans le coin superieur gauche. */
  @media (prefers-reduced-motion: reduce) { .cursor { display: none; } }
}

.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 850;
  background: transparent;
}
.progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--acid);
  transform: scaleX(0);
  transform-origin: left;
}


/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */
.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 800;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--header-h);
  padding-inline: var(--gutter);
  background: color-mix(in oklab, var(--carbon-900) 78%, transparent);
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease-out-quart),
              border-color var(--dur) var(--ease-out-quart),
              transform var(--dur) var(--ease-out-expo);
}
.masthead.is-stuck {
  background: color-mix(in oklab, var(--carbon-900) 94%, transparent);
  border-bottom-color: var(--carbon-700);
}
.masthead.is-hidden { transform: translateY(-100%); }

.masthead__mark {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-right: auto;
  /* La zone cliquable doit tenir le pouce, meme si le mot ne fait que 21px. */
  min-height: 44px;
  padding-right: var(--s-3);
}
.masthead__glyph {
  width: 9px; height: 9px;
  background: var(--acid);
  /* Losange : la meme forme que le repere de mission repris dans le footer. */
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.masthead__word {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 112%;
  font-size: var(--t-sm);
  letter-spacing: 0.02em;
}
.masthead__status { display: none; }
.masthead__ping {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--acid);
  animation: ping 2.6s var(--ease-in-out) infinite;
}
@keyframes ping { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

@media (min-width: 48rem) {
  .masthead__status {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-stretch: 85%;
    letter-spacing: 0.06em;
    color: var(--mute);
  }
}


/* --------------------------------------------------------------------------
   01 — Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + var(--s-7));
  padding-bottom: calc(var(--dock-h) + var(--s-6));
  overflow: hidden;
  isolation: isolate;
}

.hero__stage { position: absolute; inset: 0; z-index: -1; }
.hero__gl, .hero__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* La video ne s'affiche que si le shader a echoue : main.js pose l'etat. */
.hero__video { opacity: 0; visibility: hidden; }
.hero.is-fallback .hero__video { opacity: 1; visibility: visible; }
.hero.is-fallback .hero__gl { display: none; }

/* Voile : garantit le contraste du texte quel que soit l'etat du fond.
   Sans lui, le titre passerait sur les zones claires du blob. */
/* En colonne etroite le texte occupe toute la largeur : on ne peut pas
   proteger une seule moitie, le voile est donc vertical et la masse ne
   respire que dans le tiers haut, au-dessus du titre. */
.hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    var(--carbon-900) 40%,
    oklch(0.13 0.008 190 / 0.74) 52%,
    oklch(0.13 0.008 190 / 0.26) 66%,
    transparent 84%);
}

@media (min-width: 60rem) {
  /* En grand format le titre est aligne a gauche : on assombrit sa colonne
     et on laisse l'argile intacte a droite. Le blob derive en permanence,
     le voile doit donc couvrir toute la largeur du texte et pas seulement
     sa position au repos. */
  .hero__veil {
    background:
      linear-gradient(96deg,
        var(--carbon-900) 30%,
        oklch(0.13 0.008 190 / 0.86) 44%,
        oklch(0.13 0.008 190 / 0.35) 58%,
        transparent 72%),
      linear-gradient(to top, var(--carbon-900) 1%, oklch(0.13 0.008 190 / 0.28) 30%, transparent 60%);
  }
}

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

.hero__title {
  font-size: var(--t-3xl);
  margin-top: var(--s-5);
  line-height: 0.92;
}
.hero__title em {
  display: block;
  font-style: normal;
  color: var(--acid);
}
.hero__per {
  font-family: var(--font-mono);
  font-size: 0.26em;
  font-weight: 400;
  font-stretch: 85%;
  letter-spacing: 0.04em;
  color: var(--mute);
  vertical-align: 0.85em;
  margin-left: 0.25em;
  text-transform: none;
}

.hero__disciplines {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-stretch: 85%;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--mute);
}
.hero__disciplines i { color: var(--acid-dim); font-style: normal; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  margin-top: var(--s-6);
}

.hero__rail { display: none; }
.hero__scroll { display: none; }

@media (min-width: 48rem) {
  .hero { padding-bottom: var(--s-8); }
  .hero__scroll {
    display: block;
    position: absolute;
    right: var(--gutter);
    bottom: var(--s-6);
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-stretch: 85%;
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    color: var(--faint);
  }
  .hero__scroll span { display: block; animation: drift 2.4s var(--ease-in-out) infinite; }
  @keyframes drift { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(6px); opacity: 1; } }
}

@media (min-width: 60rem) {
  .hero__title { max-width: 16ch; }

  /* Rail de telemetrie : colonne de droite, lue comme un panneau
     d'instruments plutot que comme une navigation. */
  .hero__rail {
    display: block;
    position: absolute;
    right: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
    text-align: right;
    border-right: 1px solid var(--carbon-700);
    padding-right: var(--s-5);
    isolation: isolate;
  }
  /* Le blob est une forme vivante : sa silhouette bouge et peut passer sous
     le rail. Ce halo garantit la lisibilite du texte quoi qu'il arrive
     derriere, sans assombrir toute la moitie droite. */
  .hero__rail::before {
    content: "";
    position: absolute;
    inset: -30% -40% -30% -110%;
    z-index: -1;
    background: radial-gradient(58% 52% at 82% 50%, oklch(0.13 0.008 190 / 0.97) 40%, transparent 82%);
  }
  .hero__rail dl { display: grid; gap: var(--s-5); }
  .hero__rail dt {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-stretch: 82%;
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    color: var(--faint);
  }
  .hero__rail dd {
    font-family: var(--font-display);
    font-weight: 800;
    font-stretch: 105%;
    font-size: var(--t-md);
    margin-top: var(--s-1);
  }
  .hero__rail div:last-child dd {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 400;
    color: var(--mute);
  }
}

@media (min-width: 90rem) { .hero__title { font-size: var(--t-4xl); } }


/* --------------------------------------------------------------------------
   02 — Bandeau preuve
   -------------------------------------------------------------------------- */
.proof {
  padding-block: var(--s-8);
  border-block: 1px solid var(--carbon-700);
  background: var(--carbon-850);
}
.proof .shell { display: grid; gap: var(--s-4); }
.proof__lead {
  font-size: var(--t-md);
  max-width: var(--measure);
  color: var(--mute);
}
.proof__lead strong { color: var(--fg); font-weight: 800; }
.proof__stack {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-stretch: 85%;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--acid);
}

@media (min-width: 60rem) {
  .proof .shell {
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--s-7);
  }
}


/* --------------------------------------------------------------------------
   03 — Marquee logos
   -------------------------------------------------------------------------- */
.marquee-wrap { padding-block: var(--s-7); overflow: hidden; }
.marquee {
  position: relative;
  /* Fondu aux extremites : les logos entrent et sortent sans coupe nette. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 7vw, 5.5rem);
  width: max-content;
  will-change: transform;
}
.marquee__track img {
  height: clamp(1.15rem, 2.6vw, 1.7rem);
  width: auto;
  opacity: 0.5;
  transition: opacity var(--dur) var(--ease-out-quart);
}
/* Les logos-badges sont plus hauts que larges : cale sur la hauteur commune,
   leur lettrage parait plus petit que celui des wordmarks. On les grandit
   pour egaliser le poids optique, pas la hauteur mesuree. */
.marquee__track img.logo--tall { height: clamp(1.7rem, 3.9vw, 2.55rem); }
.marquee:hover .marquee__track img { opacity: 0.32; }
.marquee__track img:hover { opacity: 1; }


/* --------------------------------------------------------------------------
   04 — Positionnement
   -------------------------------------------------------------------------- */
.stance { padding-block: var(--section-y); }
.stance__grid { display: grid; gap: var(--s-7); }
.stance__title { font-size: var(--t-xl); margin-top: var(--s-4); }
.stance__text {
  margin-top: var(--s-5);
  max-width: var(--measure);
  color: var(--mute);
  font-size: var(--t-md);
}
.stance__text--accent { color: var(--fg); }

.stance__figure { position: relative; width: fit-content; }
.stance__figure img {
  width: clamp(9rem, 34vw, 11rem);
  height: auto;
}
.stance__glow {
  position: absolute;
  inset: -18% -12% -6% -12%;
  background: radial-gradient(60% 55% at 50% 45%, var(--indigo), transparent 72%);
  filter: blur(28px);
  z-index: -1;
}
.stance__figure figcaption {
  margin-top: var(--s-4);
  max-width: 26ch;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-stretch: 85%;
  line-height: 1.7;
  color: var(--faint);
}

@media (min-width: 60rem) {
  .stance__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr);
    align-items: center;
    gap: var(--s-9);
  }
  .stance__title { font-size: var(--t-2xl); }
  .stance__figure img { width: 20rem; }
}


/* --------------------------------------------------------------------------
   05 — Modules : lignes pleine largeur, pas une grille de cartes
   -------------------------------------------------------------------------- */
.modules { padding-block: var(--section-y); }
.modules__list { margin-top: var(--s-7); border-top: 1px solid var(--carbon-700); }

.module { border-bottom: 1px solid var(--carbon-700); }
.module__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--s-3) var(--s-5);
  padding-block: var(--s-6);
}
.module__idx {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  font-stretch: 85%;
  letter-spacing: 0.08em;
  color: var(--acid);
  padding-top: 0.45rem;
}
.module__kicker {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-stretch: 85%;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--faint);
}
.module__name {
  font-size: var(--t-lg);
  font-stretch: 112%;
  text-transform: uppercase;
  color: var(--sky);
  margin-top: var(--s-2);
}
.module__goal {
  margin-top: var(--s-3);
  max-width: 34ch;
  color: var(--mute);
}
/* La forme est rendue en WebGL pour tourner sur elle-meme. Le PNG d'origine
   reste dans le DOM et sert de repli : il n'est masque que si le contexte
   graphique a bien demarre. */
.module__art {
  grid-column: 2;
  position: relative;
  width: clamp(6rem, 26vw, 9rem);
  aspect-ratio: 1;
  margin-top: var(--s-4);
}
.module__gl,
.module__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.module__gl { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out-quart); }
.module__art.is-live .module__gl { opacity: 1; }
.module__art.is-live .module__still { visibility: hidden; }
.module__still img,
.module__still picture { width: 100%; height: 100%; object-fit: contain; }

@media (min-width: 60rem) {
  .module__inner {
    grid-template-columns: 5rem minmax(0, 1fr) 22rem;
    align-items: center;
    gap: var(--s-7);
    padding-block: var(--s-7);
  }
  .module__idx { font-size: var(--t-sm); padding-top: 0; }
  .module__name { font-size: var(--t-xl); }
  .module__art {
    grid-column: 3;
    width: 22rem;
    margin-top: 0;
    justify-self: end;
  }
  /* Alternance : les lignes paires poussent le rendu a gauche. Le rythme
     casse la lecture en colonne et evite l'effet catalogue. */
  .module:nth-child(even) .module__inner { grid-template-columns: 5rem 22rem minmax(0, 1fr); }
  .module:nth-child(even) .module__art { grid-column: 2; justify-self: start; }
  .module:nth-child(even) .module__text { grid-column: 3; }

  .module { transition: background var(--dur) var(--ease-out-quart); }
  .module:hover { background: var(--carbon-850); }
}


/* --------------------------------------------------------------------------
   06 — Deroule mois 1
   -------------------------------------------------------------------------- */
.runway {
  padding-block: var(--section-y);
  background: var(--carbon-850);
  border-block: 1px solid var(--carbon-700);
}
.runway__grid { display: grid; gap: var(--s-8); }
.runway__text { margin-top: var(--s-5); max-width: var(--measure); color: var(--mute); }
.runway__note {
  margin-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-stretch: 85%;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--acid);
}

.runway__track { display: grid; gap: 0; }
.runway__step {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  padding-block: var(--s-5);
  border-top: 1px solid var(--carbon-700);
}
.runway__step:last-child { border-bottom: 1px solid var(--carbon-700); }
.runway__week {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-stretch: 85%;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--faint);
  grid-column: 1 / -1;
}
.runway__topic {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 110%;
  font-size: var(--t-md);
  text-transform: uppercase;
}
.runway__coach {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-stretch: 85%;
  color: var(--acid);
  text-align: right;
}

@media (min-width: 60rem) {
  .runway__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: var(--s-9); align-items: start; }
}


/* --------------------------------------------------------------------------
   07 — Programme : pile en mobile, piste horizontale pinnee en desktop
   -------------------------------------------------------------------------- */
.program { padding-block: var(--section-y); }
.program__head { margin-bottom: var(--s-7); }
.program__sub { margin-top: var(--s-4); max-width: var(--measure); color: var(--mute); }

.program__track {
  display: grid;
  gap: var(--s-5);
  padding-inline: var(--gutter);
  max-width: var(--maxw);
  margin-inline: auto;
}

.week {
  display: flex;
  flex-direction: column;
  padding: var(--s-6) var(--s-5);
  background: var(--carbon-850);
  border: 1px solid var(--carbon-700);
}
.week__idx {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--acid);
}
.week__label {
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-stretch: 85%;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--faint);
}
.week__title {
  font-size: var(--t-lg);
  font-stretch: 112%;
  text-transform: uppercase;
  color: var(--sky);
  margin-top: var(--s-2);
}
.week__list {
  margin-top: var(--s-5);
  display: grid;
  gap: var(--s-3);
  flex: 1;
}
.week__list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--t-sm);
  color: var(--mute);
  line-height: 1.5;
}
/* Le tiret acide remplace la puce : c'est le meme filet que les eyebrows,
   decline a l'echelle de la liste. Position absolue pour rester immune aux
   elements inline eventuels dans le texte. */
.week__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.6rem;
  height: 1px;
  background: var(--acid-dim);
}
.week__coach {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--carbon-700);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-stretch: 85%;
  line-height: 1.6;
  color: var(--acid);
}

@media (min-width: 48rem) {
  .program__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  /* Piste horizontale : seule cette zone est pinnee par GSAP, et elle ne
     contient qu'une rangee de cartes. Elle tient donc dans n'importe quelle
     hauteur de viewport, contrairement a un pin qui embarquerait le titre. */
  .program__pin {
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .program__track {
    display: flex;
    gap: var(--s-6);
    width: max-content;
    max-width: none;
    padding-inline: var(--gutter);
    will-change: transform;
  }
  .week { width: min(26rem, 34vw); padding: var(--s-6); }
  .week__list { gap: var(--s-3); }
  .week__list li { font-size: var(--t-base); }
}


/* --------------------------------------------------------------------------
   08 — Mois 2 : panneau inverse
   -------------------------------------------------------------------------- */
.month2 { padding-block: var(--section-y); }
.month2__panel {
  background: var(--paper);
  color: var(--carbon-900);
  padding: var(--s-7) var(--s-5);
}
.month2__title {
  font-size: var(--t-xl);
  margin-top: var(--s-4);
}
.month2__cols { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.month2__cols p { color: color-mix(in oklab, var(--carbon-900) 74%, transparent); max-width: 48ch; }
.month2__stack {
  margin-top: var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-stretch: 85%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--indigo);
}
.month2__punch {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid color-mix(in oklab, var(--carbon-900) 18%, transparent);
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 108%;
  font-size: var(--t-md);
}

@media (min-width: 60rem) {
  .month2__panel { padding: var(--s-9) var(--s-8); }
  .month2__title { font-size: var(--t-2xl); }
  .month2__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
}


/* --------------------------------------------------------------------------
   09 — Registre de resultats
   Mobile : lignes de definition empilees (via data-th).
   Desktop : vraie table.
   -------------------------------------------------------------------------- */
.ledger { padding-block: var(--section-y); }
.ledger__table { width: 100%; border-collapse: collapse; margin-top: var(--s-6); }
.ledger__table thead { display: none; }
.ledger__table tr { display: block; padding-block: var(--s-6); border-top: 1px solid var(--carbon-700); }
.ledger__table tbody tr:last-child { border-bottom: 1px solid var(--carbon-700); }
.ledger__table th, .ledger__table td { display: block; text-align: left; }

.ledger__table th[scope="row"] {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  font-stretch: 85%;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--faint);
}

/* Trajectoire : le filet acide entre les deux bornes fait office de
   sparkline. Le chiffre d'arrivee est le point le plus lourd de la ligne. */
.traj {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-2);
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 108%;
  font-size: var(--t-lg);
  line-height: 1;
}
.traj b:first-of-type { color: var(--faint); font-weight: 600; font-size: 0.66em; }
.traj i {
  flex: 0 0 auto;
  width: clamp(1.5rem, 7vw, 3rem);
  height: 1px;
  background: linear-gradient(90deg, var(--carbon-700), var(--acid));
  position: relative;
}
.traj i::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 5px; height: 5px;
  margin-top: -2.5px;
  background: var(--acid);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.traj small {
  font-family: var(--font-mono);
  font-size: 0.34em;
  font-weight: 400;
  color: var(--mute);
  align-self: flex-end;
  padding-bottom: 0.35em;
}

.ledger__table td[data-th="Durée"] {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-stretch: 85%;
  letter-spacing: 0.06em;
  color: var(--mute);
}
.ledger__table td[data-th="Durée"]::before {
  content: "Durée : ";
  color: var(--faint);
}
.ledger__table td[data-th="Leviers"] ul {
  margin-top: var(--s-4);
  display: grid;
  gap: var(--s-2);
}
.ledger__table td[data-th="Leviers"] li {
  position: relative;
  padding-left: 0.95rem;
  font-size: var(--t-sm);
  color: var(--mute);
  line-height: 1.5;
}
.ledger__table td[data-th="Leviers"] li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.5rem; height: 1px;
  background: var(--carbon-700);
}

@media (min-width: 64rem) {
  .ledger__table thead { display: table-header-group; }
  .ledger__table tr { display: table-row; padding: 0; }
  .ledger__table th, .ledger__table td {
    display: table-cell;
    padding: var(--s-6) var(--s-5) var(--s-6) 0;
    border-top: 1px solid var(--carbon-700);
    vertical-align: top;
  }
  .ledger__table thead th {
    padding-block: var(--s-3);
    border-top: 0;
    border-bottom: 1px solid var(--carbon-700);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    font-stretch: 82%;
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    color: var(--faint);
  }
  .ledger__table tbody tr:last-child th,
  .ledger__table tbody tr:last-child td { border-bottom: 1px solid var(--carbon-700); }
  .ledger__table th[scope="row"] { width: 16%; font-size: var(--t-sm); color: var(--fg); }
  .ledger__table td[data-th="Trajectoire"] { width: 26%; }
  .ledger__table td[data-th="Durée"] { width: 12%; margin: 0; }
  .ledger__table td[data-th="Durée"]::before { content: none; }
  .ledger__table td[data-th="Leviers"] ul { margin-top: 0; }
  .traj { margin-top: 0; }
  .ledger__table tbody tr { transition: background var(--dur) var(--ease-out-quart); }
  .ledger__table tbody tr:hover { background: var(--carbon-850); }
}

/* Captures : hauteurs volontairement inegales, on evite la grille de
   vignettes calibrees. */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: var(--s-4);
  margin-top: var(--s-8);
}
.shots li { border: 1px solid var(--carbon-700); overflow: hidden; }
.shots img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  filter: saturate(0.82);
  transition: filter var(--dur) var(--ease-out-quart), transform var(--dur-slow) var(--ease-out-expo);
}
.shots li:hover img { filter: saturate(1); transform: scale(1.03); }


/* --------------------------------------------------------------------------
   10 — Bande d'instruments
   -------------------------------------------------------------------------- */
.instruments {
  padding-block: var(--s-8);
  border-block: 1px solid var(--carbon-700);
  background: var(--carbon-850);
}
.instruments__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6) var(--s-5);
}
.instrument { display: flex; flex-direction: column-reverse; gap: var(--s-2); }
.instrument dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-stretch: 82%;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--faint);
}
.instrument dd {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 115%;
  font-size: var(--t-xl);
  line-height: 1;
  letter-spacing: var(--tr-tight);
  font-variant-numeric: tabular-nums;
}
.instrument:first-child dd { color: var(--acid); }

@media (min-width: 60rem) {
  .instruments__row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-6);
  }
  /* Separateurs hairline : la bande se lit comme une reglette graduee. */
  .instrument { padding-left: var(--s-5); border-left: 1px solid var(--carbon-700); }
  .instrument:first-child { padding-left: 0; border-left: 0; }
}


/* --------------------------------------------------------------------------
   11 — Manifeste
   -------------------------------------------------------------------------- */
.manifest { padding-block: var(--section-y); }
.manifest__grid { display: grid; gap: var(--s-7); }
.manifest__head {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  font-stretch: 85%;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--carbon-700);
}
.manifest__list { margin-top: var(--s-5); display: grid; gap: var(--s-4); }
/* Marqueur en position absolue et non en colonne de grille : une grille
   transformerait chaque element inline du texte (ici <sup>ere</sup>) en item
   distinct, ce qui eclaterait la phrase sur plusieurs lignes. */
.manifest__list li {
  position: relative;
  padding-left: 1.35rem;
  font-size: var(--t-md);
  line-height: 1.35;
}
.manifest__list li::before {
  position: absolute;
  left: 0;
}

/* Marques typographiques plutot qu'emojis : la barre oblique pour ce qu'on
   ne fait pas, le losange acide pour ce qu'on sublime, le point pour la cible. */
.manifest__col--no .manifest__head { color: var(--faint); }
.manifest__col--no .manifest__list li { color: var(--faint); }
.manifest__col--no .manifest__list li::before {
  content: "";
  width: 0.85rem; height: 1px;
  background: currentColor;
  top: 0.70em;
  transform: rotate(-20deg);
}

.manifest__col--yes .manifest__head { color: var(--acid); }
.manifest__col--yes .manifest__list li { font-weight: 700; }
.manifest__col--yes .manifest__list li::before {
  content: "";
  width: 0.6rem; height: 0.6rem;
  top: 0.44em;
  background: var(--acid);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.manifest__col--who .manifest__head { color: var(--sky); }
.manifest__col--who .manifest__list li { color: var(--mute); font-size: var(--t-base); }
.manifest__col--who .manifest__list li::before {
  content: "";
  width: 0.35rem; height: 0.35rem;
  top: 0.58em;
  border-radius: 50%;
  background: var(--sky);
}

@media (min-width: 60rem) {
  .manifest__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7); }
}


/* --------------------------------------------------------------------------
   12 — Carte Skool
   -------------------------------------------------------------------------- */
.skool-wrap { padding-block: var(--s-7); }
.skool {
  display: grid;
  gap: var(--s-6);
  padding: var(--s-6) var(--s-5);
  background: var(--paper);
  color: var(--carbon-900);
  transition: transform var(--dur) var(--ease-out-expo);
  will-change: transform;
}
.skool:hover { transform: translateY(-3px); }
.skool__tag { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.skool__badge {
  padding: 0.4rem 0.7rem;
  background: var(--indigo);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  line-height: 1;
}
.skool__freq {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-stretch: 85%;
  color: color-mix(in oklab, var(--carbon-900) 60%, transparent);
}
.skool__title { font-size: var(--t-lg); margin-top: var(--s-4); }
.skool__desc {
  margin-top: var(--s-3);
  max-width: 54ch;
  color: color-mix(in oklab, var(--carbon-900) 72%, transparent);
  font-size: var(--t-sm);
}
.skool__side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid color-mix(in oklab, var(--carbon-900) 15%, transparent);
}
.skool__price {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 112%;
  font-size: var(--t-xl);
  line-height: 1;
  color: var(--indigo);
}
.skool__terms {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-stretch: 85%;
  color: color-mix(in oklab, var(--carbon-900) 58%, transparent);
  margin-right: auto;
}
.skool__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.75rem;
  padding: 0.9rem 1.4rem;
  background: var(--carbon-900);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  line-height: 1;
}
.skool__cta i { transition: transform var(--dur) var(--ease-out-expo); }
.skool:hover .skool__cta i { transform: translateX(4px); }

@media (min-width: 60rem) {
  .skool {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-8);
    padding: var(--s-7) var(--s-7);
  }
  .skool__side {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
    padding-top: 0;
    padding-left: var(--s-7);
    border-top: 0;
    border-left: 1px solid color-mix(in oklab, var(--carbon-900) 15%, transparent);
  }
  .skool__terms { margin-right: 0; }
  .skool__cta { margin-top: var(--s-4); }
}


/* --------------------------------------------------------------------------
   13 — Inclus + FAQ
   -------------------------------------------------------------------------- */
.faq { padding-block: var(--section-y); }
.faq__grid { display: grid; gap: var(--s-8); }

.included { margin-top: var(--s-6); display: grid; gap: var(--s-3); }
.included li {
  position: relative;
  padding-left: 1.15rem;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-stretch: 85%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
  line-height: 1.6;
}
.included li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 0.55rem; height: 1px;
  background: var(--acid);
}

.qa { border-bottom: 1px solid var(--carbon-700); }
.qa:first-child { border-top: 1px solid var(--carbon-700); }
.qa summary {
  display: grid;
  grid-template-columns: 2.25rem 1fr 1.5rem;
  align-items: start;
  gap: var(--s-3);
  padding-block: var(--s-5);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-fast) var(--ease-out-quart);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--acid); }
.qa__idx {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--acid);
  padding-top: 0.25em;
}
.qa__q {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-md);
  line-height: 1.3;
  letter-spacing: -0.015em;
}
/* Signe + qui bascule en -, dessine en CSS pour rester net a toute taille. */
.qa__sign {
  position: relative;
  width: 1rem; height: 1rem;
  margin-top: 0.4em;
  justify-self: end;
}
.qa__sign::before, .qa__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out-expo);
}
.qa__sign::after { transform: rotate(90deg); }
.qa[open] .qa__sign::after { transform: rotate(0deg); }

/* Transition sur grid-template-rows : c'est la seule facon d'animer un
   depliage vers `auto` sans mesurer la hauteur en JS. */
.qa__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease-out-expo);
}
.qa[open] .qa__body { grid-template-rows: 1fr; }
.qa__body > div { overflow: hidden; }
.qa__body p {
  color: var(--mute);
  max-width: var(--measure);
  padding-left: calc(2.25rem + var(--s-3));
}
.qa__body p + p { margin-top: var(--s-4); }
.qa__body > div > :last-child { padding-bottom: var(--s-6); }
.qa__punch {
  color: var(--acid) !important;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-stretch: 88%;
}

@media (min-width: 60rem) {
  .faq__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: var(--s-9); align-items: start; }
  .faq__aside { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}


/* --------------------------------------------------------------------------
   14 — CTA final
   -------------------------------------------------------------------------- */
.close {
  padding-block: var(--section-y);
  background: var(--carbon-850);
  border-top: 1px solid var(--carbon-700);
}
.close__title { font-size: var(--t-xl); margin-top: var(--s-4); max-width: 18ch; }
.close__body { display: grid; gap: var(--s-4); margin-top: var(--s-6); max-width: var(--measure); }
.close__body p { color: var(--mute); }
.close__body strong { color: var(--acid); font-weight: 700; }
.close__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  margin-top: var(--s-7);
}
.close__meta {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-stretch: 85%;
  line-height: 1.8;
  color: var(--faint);
}

@media (min-width: 60rem) { .close__title { font-size: var(--t-2xl); } }


/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.foot { padding-block: var(--s-8); border-top: 1px solid var(--carbon-700); }
.foot__inner { display: grid; gap: var(--s-5); }
.foot__mark {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 118%;
  font-size: var(--t-lg);
  letter-spacing: 0.01em;
}
.foot__nav { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); }
.foot__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-stretch: 85%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
  transition: color var(--dur-fast) var(--ease-out-quart);
}
.foot__nav a:hover, .foot__nav a:focus-visible { color: var(--acid); }
.foot__meta {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-stretch: 85%;
  color: var(--faint);
}

@media (min-width: 60rem) {
  .foot__inner { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-7); }
  .foot__nav { justify-content: center; }
  .foot__meta { text-align: right; }
}


/* --------------------------------------------------------------------------
   Dock mobile : le CTA reste atteignable au pouce sur toute la page.
   -------------------------------------------------------------------------- */
.dock {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 810;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--dock-h);
  padding: var(--s-3) var(--gutter);
  padding-bottom: max(var(--s-3), env(safe-area-inset-bottom));
  background: color-mix(in oklab, var(--carbon-900) 94%, transparent);
  border-top: 1px solid var(--carbon-700);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease-out-expo);
}
.dock.is-visible { transform: translateY(0); }
.dock__meta {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-stretch: 85%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
}

@media (min-width: 48rem) { .dock { display: none; } }