/* =====================================================================
   Palestra — feuille de style du site vitrine

   Les jetons sont repris tels quels de PalestraApp/Palestra/DesignSystem/
   Tokens.swift (palette « vert-de-gris profond ») et de
   palestra-design-system.md : le site et l'application partagent la même
   palette, la même échelle d'espacement et le même compteur gravé.

   Règles de l'ADN tenues ici :
     · espacements uniquement sur l'échelle 4/8/12/16/24/32/48/64 — les
       grands rythmes de section sont des multiples de --s8 ;
     · bronze = action, ocre = récompense (records seulement), terre cuite
       jamais décorative (elle n'apparaît pas sur ce site) ;
     · cartes mates, ombre douce uniquement sur ce qui « flotte » ;
     · une seule animation signature : le liseré ocre du record (300 ms).
       Rien n'apparaît en cascade au défilement.

   Sommaire
     1. Jetons
     2. Base et typographie
     3. Mise en page et sections
     4. Composants communs
     5. Le compteur gravé et la carte de séance (signature)
     6. Blocs de la page d'accueil
     7. Formulaire de liste d'attente
     8. Pages légales
     9. Mouvement, accessibilité, impression
    10. Utilitaires
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 1. Jetons                                                           */
/* ------------------------------------------------------------------ */

:root {
  /* Palette — Tokens.swift, apparence claire */
  --stone-50:   #E9E6DE;  /* fond principal : pierre claire */
  --stone-300:  #C4C0B4;  /* séparateurs, zones neutres */
  --stone-900:  #1E1B16;
  --bronze-600: #33463A;  /* action — 9,0:1 sur une carte */
  --ochre-500:  #8A6018;  /* récompense uniquement */
  --on-accent:  #E9E6DE;  /* texte posé sur le bronze */

  --bg:          #E9E6DE; /* stone50 */
  --bg-alt:      #E0DDD4; /* surfacePage : bandeaux alternés */
  --card:        #F1EFE9; /* surfaceCard */
  --sunken:      #E6E3DA; /* surfaceSunken : champs, puits */
  --text:        #1E1B16;
  --text-muted:  #635C50;
  --card-border: #C7C3B8;
  --hairline:    var(--stone-300);
  --reward-bg:   color-mix(in srgb, var(--ochre-500) 16%, transparent);

  /* Cadre des captures : le seul noir du site, celui de l'appareil. */
  --bezel:      #1E1B16;
  --bezel-edge: transparent;

  /* Élévation — PalestraCard, état actif (y 4, flou 10, 14 %). */
  --lift: 0 4px 10px rgb(30 27 22 / 0.14);
  --device-shadow: 0 32px 48px -24px rgb(30 27 22 / 0.4);

  /* Échelle d'espacement — base 4 px (ADN §4) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* Rayons — PalestraRadius */
  --r-sm: 6px; --r-md: 10px; --r-card: 14px; --r-pill: 999px;

  --page: 1120px;
  --measure: 62ch;

  /* Mouvement — PalestraMotion (150 / 200 ms) */
  --fast: 150ms;
  --normal: 200ms;
  --ease: ease-in-out;

  /* Typographie — les polices de l'app elle-même quand elles existent :
     New York (display), SF Pro (texte), SF Mono (données). Ailleurs, des
     équivalents système ; aucune police n'est téléchargée. */
  --font-display: ui-serif, "New York", "Iowan Old Style", "Charter", "Bitstream Charter",
                  "Source Serif Pro", Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "IBM Plex Sans",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "IBM Plex Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --stone-50:   #1A1C19;
    --stone-300:  #454A44;
    --stone-900:  #EBE9E3;
    --bronze-600: #86AC82;  /* 8,7:1 sur une carte sombre */
    --ochre-500:  #D0A24E;
    --on-accent:  #1A1C19;

    --bg:          #121311;
    --bg-alt:      #161816;
    --card:        #1C1E1B;
    --sunken:      #161816;
    --text:        #EBE9E3;
    --text-muted:  #9C9A90;
    --card-border: #2C302C;

    --bezel:      #121311;
    --bezel-edge: #454A44;
    --lift: 0 4px 10px rgb(0 0 0 / 0.45);
    --device-shadow: 0 32px 48px -24px rgb(0 0 0 / 0.7);
  }
}

/* Bloc inversé. En apparence claire, il prend la palette sombre de l'app ;
   en apparence sombre, il vire à la patine — le vert-de-gris profond — pour
   rester un bloc distinct au lieu de se fondre dans le fond. */
.invert {
  --stone-300:  #454A44;
  --bronze-600: #86AC82;
  --ochre-500:  #D0A24E;
  --on-accent:  #1A1C19;
  --bg:          #121311;
  --bg-alt:      #161816;
  --card:        #1C1E1B;
  --sunken:      #161816;
  --text:        #EBE9E3;
  --text-muted:  #9C9A90;
  --card-border: #2C302C;
  --hairline:    #2C302C;
  color: var(--text);
  background: var(--bg);
}

@media (prefers-color-scheme: dark) {
  .invert {
    --bg:          color-mix(in srgb, #33463A 42%, #121311);
    --card:        color-mix(in srgb, #33463A 26%, #1C1E1B);
    --sunken:      color-mix(in srgb, #33463A 30%, #121311);
    --card-border: color-mix(in srgb, #86AC82 24%, transparent);
    --hairline:    color-mix(in srgb, #86AC82 20%, transparent);
  }
}

/* ------------------------------------------------------------------ */
/* 2. Base et typographie                                              */
/* ------------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--s8) + var(--s5));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;          /* le corps de texte d'iOS */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Display : la serif de gravure, avec parcimonie — titres et gros chiffres. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5.4vw, 4.1rem); letter-spacing: -0.025em; line-height: 1.02; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); letter-spacing: -0.02em; }
h3 { font-size: clamp(1.125rem, 1.6vw, 1.3rem); font-weight: 600; line-height: 1.25; }

p { margin: 0 0 1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: currentColor; }

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

::selection { background: color-mix(in srgb, var(--bronze-600) 24%, transparent); }

/* Focus clavier toujours visible : contour 2 px bronze (ADN §8). */
:focus-visible {
  outline: 2px solid var(--bronze-600);
  outline-offset: 3px;
  border-radius: 2px;
}

.lead {
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 52ch;
}

.small { font-size: 0.875rem; line-height: 1.55; color: var(--text-muted); }

/* L'intertitre de section s'ouvre sur un trait bronze de 2 px : le liseré du
   compteur gravé, promu en ponctuation du site. */
.kicker {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--s5);
}
.kicker::before {
  content: "";
  width: var(--s4);
  height: 2px;
  background: var(--bronze-600);
  flex: none;
}
.kicker--center { justify-content: center; }

em.hl { font-style: normal; color: var(--bronze-600); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bronze-600);
  color: var(--on-accent);
  padding: var(--s3) var(--s5);
  z-index: 100;
  border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------------ */
/* 3. Mise en page et sections                                         */
/* ------------------------------------------------------------------ */

.wrap {
  width: min(100% - 2 * var(--s5), var(--page));
  margin-inline: auto;
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 2 * var(--s4)); }
}

.section { padding-block: calc(var(--s8) * 2); position: relative; }
.section--tight { padding-block: calc(var(--s8) + var(--s6)); }
.section--alt { background: var(--bg-alt); }

@media (max-width: 780px) {
  .section, .section--tight { padding-block: var(--s8); }
}

.section__head { margin-bottom: var(--s7); }
.section__head h2 { margin-bottom: var(--s5); }
h1 + .lead, h2 + .lead { margin-top: var(--s5); }
.section__head h2 + .lead { margin-top: 0; }

.grid { display: grid; gap: var(--s5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }

/* Deux colonnes texte + visuel, qui s'empilent proprement. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s6), 6vw, calc(var(--s8) + var(--s5)));
  align-items: center;
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--s7); }
  /* Sur une colonne, le texte passe toujours avant le visuel. */
  .split--media-first > :first-child { order: 1; }
}

/* ------------------------------------------------------------------ */
/* 4. Composants communs                                               */
/* ------------------------------------------------------------------ */

/* -- En-tête : matériau système (translucide), pas de reflet ------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--normal) var(--ease);
}
.site-header[data-stuck="true"] { border-bottom-color: var(--hairline); }
/* Repère posé par app.js en haut de page : quand il sort de l'écran, le filet
   de l'en-tête apparaît. */
.header-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s5);
  height: var(--s8);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  margin-right: auto;
}
.brand__mark { width: var(--s6); height: auto; flex: none; }

.site-nav { display: flex; gap: var(--s5); align-items: center; }
.site-nav a {
  font-size: 0.9375rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--fast) var(--ease);
}
.site-nav a:hover { color: var(--text); }
@media (max-width: 860px) { .site-nav { display: none; } }

.lang-switch {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid var(--card-border);
  border-radius: var(--r-sm);
  padding: var(--s1) var(--s3);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.lang-switch:hover { color: var(--text); border-color: currentColor; }

/* -- Boutons : PalestraButton — bronze mat, rayon 10, sans ombre ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: var(--s3) var(--s5);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--fast) var(--ease), background-color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}
.btn:active { transform: scale(0.98); }

.btn--primary { background: var(--bronze-600); color: var(--on-accent); }
.btn--primary:hover { background: color-mix(in srgb, var(--bronze-600) 88%, var(--text)); }

.btn--ghost { border-color: var(--card-border); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--text-muted); }

.btn--sm { min-height: 36px; padding: var(--s2) var(--s4); font-size: 0.875rem; }

.link-arrow { font-weight: 600; text-decoration: none; color: var(--bronze-600); }
.link-arrow::after { content: " →"; }
.link-arrow:hover { text-decoration: underline; }

/* -- Pastilles : le seul usage du rayon 999 avec les badges ------- */

.pills { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: var(--s5) 0 0; padding: 0; }
.pill {
  font-size: 0.875rem;
  font-weight: 500;
  padding: var(--s1) var(--s3);
  border-radius: var(--r-pill);
  border: 1px solid var(--card-border);
}

/* -- Cartes : mates, bordure 1 px, pas d'ombre au repos ------------ */

.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  padding: var(--s5);
  display: flex;
  flex-direction: column;
}
.card h3 { margin-bottom: var(--s3); }
.card p { color: var(--text-muted); font-size: 0.9375rem; }

.card__icon {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--bronze-600) 10%, transparent);
  color: var(--bronze-600);
  margin-bottom: var(--s4);
}
.card__icon svg { width: 22px; height: 22px; }

.card__source {
  margin-top: auto;
  padding-top: var(--s4);
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--text-muted);
}

/* -- Liste à filets ---------------------------------------------- */

.facts { list-style: none; margin: 0; padding: 0; }
.facts li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.9688rem;
}
.facts li:last-child { border-bottom: 0; }
.facts svg { width: 18px; height: 18px; color: var(--bronze-600); margin-top: var(--s1); }
.facts--against svg { color: var(--text-muted); }
.facts strong { display: block; font-weight: 600; }
.facts span span { color: var(--text-muted); }

/* -- Cadre d'appareil ----------------------------------------------
   La capture est rectangulaire ; le cadre et l'arrondi de l'écran sont
   dessinés ici, en unités de conteneur, pour garder les proportions d'un
   iPhone à toutes les tailles. C'est le seul rayon hors de l'échelle de
   l'ADN : celui d'un appareil, qui n'est pas une décision de design. */

.device {
  container-type: inline-size;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
.device--sm { max-width: 250px; }

.device img {
  width: calc(100% - 7cqi);
  margin: 3.5cqi;
  aspect-ratio: 1206 / 2622;
  object-fit: cover;
  object-position: top;
  border-radius: 12.5cqi;
  background: var(--sunken);
  box-shadow:
    0 0 0 3.5cqi var(--bezel),
    0 0 0 calc(3.5cqi + 1px) var(--bezel-edge),
    var(--device-shadow);
  /* Tant qu'une capture manque, son texte alternatif s'affiche discrètement
     dans la dalle au lieu d'un cadre vide. */
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

/* -- Carte de module avec capture recadrée ------------------------- */

.module {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
}
.module__body { padding: var(--s6) var(--s6) var(--s5); }
.module__body h3 { margin-bottom: var(--s3); }
.module__body p { font-size: 0.9375rem; color: var(--text-muted); }
.module__shot {
  margin: auto var(--s6) var(--s6);
  height: calc(var(--s8) * 4);
  border-radius: var(--r-md);
  border: 1px solid var(--card-border);
  overflow: hidden;
  background: var(--sunken);
}
.module__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-size: 0.75rem;
  color: var(--text-muted);
}
/* On écarte la barre d'état pour cadrer sur le contenu utile. */
.module__shot--top img { object-position: 50% 14%; }
.module__shot--upper img { object-position: 50% 27%; }
.module__shot--mid img { object-position: 50% 45%; }
.module__shot--bottom img { object-position: 50% 88%; }

@media (max-width: 640px) {
  .module__body { padding: var(--s5) var(--s5) var(--s4); }
  .module__shot { margin: auto var(--s5) var(--s5); }
}

/* ------------------------------------------------------------------ */
/* 5. Signature : le compteur gravé et la carte de séance              */
/* ------------------------------------------------------------------ */

/* Le compteur gravé (ADN §7) : chiffre de performance en mono, souligné
   d'un liseré bronze de 2 px. Réservé aux chiffres de performance — 1RM,
   charges, records — et nulle part ailleurs. */
.measure { display: inline-flex; align-items: baseline; gap: var(--s1); white-space: nowrap; }
.engraved {
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--bronze-600);
  border-radius: 2px;
  outline: 2px solid transparent;
  outline-offset: var(--s1);
}
.unit { font-size: 0.75rem; color: var(--text-muted); font-family: var(--font-body); }

/* La seule animation du site (ADN §6) : au nouveau record, un liseré ocre
   passe une fois autour du chiffre concerné. 300 ms, ease-out, puis rien. */
@keyframes pr-flash {
  from { outline-color: var(--ochre-500); }
  to   { outline-color: transparent; }
}
.is-flash .engraved { animation: pr-flash 300ms ease-out; }

/* PrBanner : ton récompense + une pastille, sans confettis. */
.pr-banner {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin: var(--s3) 0 0;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-md);
  background: var(--reward-bg);
  color: var(--ochre-500);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
}
.pr-banner__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ochre-500); flex: none; }

/* -- La carte de séance ------------------------------------------ */

.hero__card { margin: 0; }

/* État actif de PalestraCard : liseré bronze et légère élévation. */
.setcard {
  background: var(--card);
  border: 1.5px solid color-mix(in srgb, var(--bronze-600) 50%, transparent);
  border-radius: var(--r-card);
  padding: var(--s4);
  box-shadow: var(--lift);
}

.setcard__head { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--s3); }
.setcard__name { font-weight: 600; font-size: 1rem; line-height: 1.3; }
.setcard__variant { font-size: 0.8125rem; color: var(--text-muted); }

.setcard__table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
/* Les en-têtes reprennent la casse de l'app (« Sér. », « kg », « RPE ») :
   pas de capitales forcées, « kg » reste une unité. */
.setcard__table th {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: left;
  padding: 0 0 var(--s2);
}
.setcard__table td {
  padding: var(--s2) 0;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
/* Les nombres s'alignent à droite dans leur colonne (ADN §5). */
.setcard__table .c-num { text-align: right; padding-left: var(--s3); }
.setcard__table .c-set { width: var(--s6); }
.setcard__table .c-prev { color: var(--text-muted); font-size: 0.75rem; }
.setcard__table .c-check { width: var(--s6); text-align: right; }

.setrow--warmup td { color: var(--text-muted); }
.setbadge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: var(--r-sm);
  background: var(--sunken);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-muted);
}

/* Case de validation : cercle vide, puis bronze et coche. */
.check {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--stone-300);
  vertical-align: middle;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.check::after {
  content: "";
  width: 6px; height: 11px;
  margin-top: -2px;
  border: solid var(--card);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--fast) var(--ease);
}
.is-done .check { background: var(--bronze-600); border-color: var(--bronze-600); }
.is-done .check::after { transform: rotate(45deg) scale(1); }

.setcard__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--hairline);
}
.setcard__label { font-size: 0.8125rem; color: var(--text-muted); }
.setcard__foot .engraved { font-size: 1.5rem; }

/* La mention de record garde sa place même masquée : la carte ne change
   pas de hauteur d'un exercice à l'autre. */
.setcard .pr-banner { opacity: 0; transition: opacity var(--normal) var(--ease); }
.setcard.is-pr .pr-banner { opacity: 1; }

/* Changement d'exercice : simple fondu du contenu, 150 ms. */
.setcard.is-swapping .setcard__head,
.setcard.is-swapping .setcard__table,
.setcard.is-swapping .setcard__foot { opacity: 0; }
.setcard__head, .setcard__table, .setcard__foot { transition: opacity var(--fast) var(--ease); }

/* ------------------------------------------------------------------ */
/* 6. Blocs de la page d'accueil                                       */
/* ------------------------------------------------------------------ */

/* -- Héro --------------------------------------------------------- */

.hero { padding-block: var(--s7) calc(var(--s8) + var(--s6)); }

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(var(--s6), 5vw, var(--s8));
  align-items: center;
}
.hero h1 { margin-bottom: var(--s5); }
.hero .lead { margin-bottom: var(--s6); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s4); }

.hero__visual {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 300px;
}

/* La carte déborde sur le bas gauche de l'appareil, en laissant voir le haut
   de la vraie capture (en-tête de séance, objectif, minuteur). */
.hero__card {
  position: absolute;
  left: -46%;
  bottom: -8%;
  width: min(330px, 110%);
}
@media (max-width: 1180px) { .hero__card { left: -28%; } }
@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s7); }
  .hero__visual { max-width: 420px; }
  .hero__visual .device { max-width: 260px; }
  .hero__card { position: static; width: 100%; margin-top: var(--s5); }
}

/* -- Le constat --------------------------------------------------- */

.claim {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  max-width: 22ch;
  text-wrap: balance;
}
.claim em { font-style: normal; color: var(--bronze-600); }

/* -- Registre des variantes --------------------------------------- */

.ledger {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  padding: var(--s5);
}
.ledger__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--hairline);
}
.ledger__exercise { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.ledger__meta { font-size: 0.8125rem; color: var(--text-muted); }

.ledger__rows { list-style: none; margin: 0; padding: 0; }
.ledger__row {
  display: grid;
  grid-template-columns: 1fr 96px auto;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--hairline);
}
.ledger__where strong { display: block; font-weight: 600; line-height: 1.3; }
.ledger__where span { display: block; font-size: 0.8125rem; color: var(--text-muted); }

.ledger__spark { width: 96px; height: var(--s6); overflow: visible; }
.ledger__spark polyline {
  fill: none;
  stroke: var(--bronze-600);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ledger__row .engraved { font-size: 1.375rem; }
.ledger__note { font-size: 0.875rem; color: var(--text-muted); margin-top: var(--s4); }

@media (max-width: 440px) {
  .ledger__row { grid-template-columns: 1fr auto; }
  .ledger__spark { display: none; }
}

/* -- Séries effectives par muscle --------------------------------- */

.musclechart {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  padding: var(--s5);
}
.musclechart__head { display: flex; flex-direction: column; gap: var(--s1); margin-bottom: var(--s5); }
.musclechart__title { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.musclechart__sub { font-size: 0.8125rem; color: var(--text-muted); }

.musclechart__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.mc { display: grid; grid-template-columns: 1fr auto; align-items: baseline; row-gap: var(--s1); }
.mc__label { font-size: 0.8125rem; font-weight: 500; }
.mc__status {
  margin-left: var(--s2);
  padding: 0 var(--s2);
  border: 1px solid var(--card-border);
  border-radius: var(--r-pill);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}
.mc__value { font-family: var(--font-mono); font-weight: 600; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.mc__bar { grid-column: 1 / -1; width: 100%; height: 10px; border-radius: 3px; overflow: hidden; }
.mc__track { fill: color-mix(in srgb, var(--stone-300) 40%, transparent); }
.mc__zone { fill: var(--stone-300); }
.mc__direct { fill: var(--bronze-600); }
.mc__indirect { fill: color-mix(in srgb, var(--bronze-600) 45%, transparent); }

.mc__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin: var(--s5) 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.mc__legend span { display: inline-flex; align-items: center; gap: var(--s2); }
.mc__key { display: inline-block; width: 10px; height: 8px; border-radius: 2px; }
.mc__key--direct { background: var(--bronze-600); }
.mc__key--indirect { background: color-mix(in srgb, var(--bronze-600) 45%, transparent); }
.mc__key--zone { background: var(--stone-300); }

/* -- Intégrations iOS --------------------------------------------- */

.integrations { margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--hairline); }
.integrations__title {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s5);
}
.integrations__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5) var(--s6);
}
@media (max-width: 900px) { .integrations__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .integrations__list { grid-template-columns: 1fr; } }
.integration { display: grid; grid-template-columns: 24px 1fr; gap: var(--s3); align-items: start; }
.integration svg { width: 24px; height: 24px; color: var(--bronze-600); }
.integration strong { display: block; font-weight: 600; line-height: 1.4; }
.integration span span { display: block; font-size: 0.875rem; color: var(--text-muted); }

/* -- Coach -------------------------------------------------------- */

.ondevice {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s4);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--bronze-600) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--bronze-600) 24%, transparent);
  font-size: 0.9375rem;
  font-weight: 500;
}
.ondevice svg { width: 20px; height: 20px; color: var(--bronze-600); flex: none; margin-top: 2px; }

.jargon__title {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s4);
}
.jargon__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 9 termes : trois rangées pleines */
  gap: var(--s3);
}
@media (max-width: 900px) { .jargon__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .jargon__grid { grid-template-columns: 1fr; } }
.term {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s1) var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
}
.term__raw { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--text-muted); font-style: italic; }
.term__name { font-weight: 600; font-size: 0.9375rem; line-height: 1.35; }
.term__name::before { content: "→ " / ""; color: var(--bronze-600); font-weight: 600; }
.term__muscle {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: 2px var(--s2);
  border-radius: var(--r-pill);
  background: var(--sunken);
  white-space: nowrap;
}

/* -- Progression : appareil + carte de suggestion ----------------- */

.duo { position: relative; width: 100%; max-width: 440px; margin-inline: auto; }
.duo__device { margin-left: 0; }
.duo__card {
  position: absolute;
  right: 0;
  bottom: var(--s6);
  width: min(300px, 78%);
}
@media (max-width: 900px) {
  .duo__device { margin-inline: auto; }
  .duo > .duo__card { position: static; width: 100%; margin-top: var(--s5); }
}

.suggest {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  padding: var(--s5);
  box-shadow: var(--lift);
}
.suggest p { margin: 0; }
.suggest__label {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bronze-600);
}
.suggest__label svg { width: 16px; height: 16px; }
.suggest__exercise { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; margin: var(--s2) 0 var(--s3) !important; }
.suggest__load { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s4) !important; }
.suggest__from { font-family: var(--font-mono); color: var(--text-muted); font-size: 0.9375rem; }
.suggest__arrow { color: var(--text-muted); }
.suggest__load .engraved { font-size: 1.75rem; }
.suggest__why {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s2) !important;
}
.suggest__reasons {
  list-style: none;
  margin: 0 0 var(--s4);
  padding: 0;
  display: grid;
  gap: var(--s1);
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.suggest__reasons li::before { content: "— "; }
.suggest__actions { display: flex; gap: var(--s2); justify-content: flex-end; }

/* -- Bibliothèque ------------------------------------------------- */

.figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin: var(--s6) 0 var(--s2);
  padding: var(--s5) 0;
  border-block: 1px solid var(--hairline);
}
.figure { display: flex; flex-direction: column-reverse; gap: var(--s1); }
.figure dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.figure dt { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.35; }

/* -- Tes données (bloc inversé) ----------------------------------- */

.nodes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
}
@media (max-width: 980px) { .nodes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .nodes { grid-template-columns: 1fr; } }

.node {
  padding: var(--s5);
  border-radius: var(--r-card);
  border: 1px solid var(--card-border);
  background: var(--card);
}
.node--core {
  border-color: color-mix(in srgb, var(--bronze-600) 55%, transparent);
  background: color-mix(in srgb, var(--bronze-600) 12%, var(--card));
}
.node--off { border-style: dashed; background: transparent; }
.node__tag {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s3);
}
.node--core .node__tag { color: var(--bronze-600); }
.node h3 { font-size: 1.125rem; margin-bottom: var(--s2); }
.node p { font-size: 0.875rem; color: var(--text-muted); margin: 0; }

.never {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  list-style: none;
  margin: var(--s6) 0 0;
  padding: var(--s5) 0 0;
  border-top: 1px solid var(--hairline);
  font-size: 0.875rem;
  color: var(--text-muted);
}
.never li { display: inline-flex; align-items: center; gap: var(--s2); }
.never svg { width: 14px; height: 14px; flex: none; }

/* -- FAQ ---------------------------------------------------------- */

.faq { border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s5);
  padding: var(--s5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  margin-top: 6px;
  border-right: 2px solid var(--bronze-600);
  border-bottom: 2px solid var(--bronze-600);
  transform: rotate(45deg);
  transition: transform var(--normal) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > div { padding-bottom: var(--s5); }
.faq p { color: var(--text-muted); }

/* -- Pied de page ------------------------------------------------- */

.site-footer { padding-block: var(--s8) var(--s6); border-top: 1px solid var(--hairline); }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s6);
  margin-bottom: var(--s7);
}
@media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__grid > :first-child { grid-column: 1 / -1; } }
.site-footer__title {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s4);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.site-footer ul a { font-size: 0.9375rem; color: var(--text-muted); text-decoration: none; }
.site-footer ul a:hover { color: var(--text); }
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s4);
  padding-top: var(--s5);
  border-top: 1px solid var(--hairline);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* ------------------------------------------------------------------ */
/* 7. Formulaire de liste d'attente                                    */
/* ------------------------------------------------------------------ */

.form-title { margin-bottom: var(--s4); font-size: 1.125rem; }

.waitlist { max-width: 480px; }
.waitlist__row { display: flex; gap: var(--s3); }
@media (max-width: 520px) { .waitlist__row { flex-direction: column; } }

/* palestraFieldChrome : fond en creux, rayon 10, anneau de focus bronze. */
.waitlist input[type="email"] {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  font: inherit;
  font-size: 1rem;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  border: 1px solid var(--card-border);
  background: var(--sunken);
  color: var(--text);
  transition: border-color var(--fast) var(--ease);
}
.waitlist input[type="email"]::placeholder { color: var(--text-muted); opacity: 0.8; }
.waitlist input[type="email"]:focus { border-color: var(--bronze-600); outline: none; }
.waitlist input[type="email"]:focus-visible { outline: 2px solid var(--bronze-600); outline-offset: 2px; }

/* Piège à robots : jamais affiché, jamais atteint au clavier. */
.hp, .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.waitlist__note { font-size: 0.8125rem; color: var(--text-muted); margin-top: var(--s4); }

.waitlist__msg {
  margin-top: var(--s4);
  font-size: 0.9375rem;
  font-weight: 500;
  display: none;
  align-items: center;
  gap: var(--s2);
}
.waitlist__msg svg { width: 18px; height: 18px; flex: none; }
.waitlist[data-state="ok"] .waitlist__msg--ok { display: flex; color: var(--bronze-600); }
.waitlist[data-state="error"] .waitlist__msg--error { display: flex; color: var(--text); }
.waitlist[data-state="ok"] .waitlist__row,
.waitlist[data-state="ok"] .waitlist__note { display: none; }
.waitlist[data-state="sending"] button { opacity: 0.6; pointer-events: none; }

/* ------------------------------------------------------------------ */
/* 8. Pages légales                                                    */
/* ------------------------------------------------------------------ */

.doc-page { padding-block: var(--s8) calc(var(--s8) * 2); }
/* Largeur de lecture de l'ADN : 720 px sur grand écran. */
.doc-page .wrap { max-width: 720px; }
.doc-page h1 { font-size: clamp(2.1rem, 5vw, 3rem); margin-bottom: var(--s4); }
.doc-page h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  margin-top: var(--s7);
  margin-bottom: var(--s4);
  padding-top: var(--s5);
  border-top: 1px solid var(--hairline);
}
.doc-page ul { padding-left: 1.15em; margin: 0 0 1em; max-width: var(--measure); }
.doc-page li { margin-bottom: 0.5em; }
.doc-page .updated { font-size: 0.875rem; color: var(--text-muted); margin-bottom: var(--s6); }

.callout {
  border-left: 3px solid var(--bronze-600);
  padding: var(--s4) 0 var(--s4) var(--s5);
  margin: var(--s5) 0;
}
.callout p { margin: 0; }

.table-scroll { overflow-x: auto; margin: var(--s5) 0; }
.data-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.9375rem; }
.data-table th, .data-table td {
  text-align: left;
  padding: var(--s3) var(--s4) var(--s3) 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.data-table th { font-weight: 600; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.data-table td:first-child { font-weight: 600; }
.data-table td:last-child { color: var(--text-muted); }

.toc ul {
  list-style: none;
  padding: 0;
  margin: var(--s6) 0 0;
  columns: 2;
  column-gap: var(--s6);
}
.toc li { break-inside: avoid; margin-bottom: var(--s2); }
.toc a { color: var(--bronze-600); font-weight: 500; text-decoration: none; }
.toc a:hover { text-decoration: underline; }
@media (max-width: 560px) { .toc ul { columns: 1; } }

/* ------------------------------------------------------------------ */
/* 9. Mouvement, accessibilité, impression                             */
/* ------------------------------------------------------------------ */

@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;
  }
}

@media print {
  .site-header, .site-footer, .waitlist, .hero__visual { display: none; }
  body { background: #fff; color: #000; }
  .invert { background: #fff; color: #000; }
}

/* ------------------------------------------------------------------ */
/* 10. Utilitaires                                                     */
/*                                                                     */
/* La CSP du site (_headers) pose `style-src 'self'` : aucun style en   */
/* ligne n'est autorisé. Tout ajustement ponctuel passe par une classe  */
/* d'ici, jamais par un attribut `style` — qui marcherait en local et   */
/* disparaîtrait une fois déployé (c'est arrivé sur le site Nemoris).   */
/* ------------------------------------------------------------------ */

.icon-18 { width: 18px; height: 18px; }

.mt-2 { margin-top: var(--s2); }
.mt-4 { margin-top: var(--s4); }
.mt-6 { margin-top: var(--s6); }
.mt-8 { margin-top: var(--s8); }
.mb-4 { margin-bottom: var(--s4); }
.mb-5 { margin-bottom: var(--s5); }
.mb-6 { margin-bottom: var(--s6); }
.mb-8 { margin-bottom: var(--s8); }

.mx-auto { margin-inline: auto; }
.mw-34ch { max-width: 34ch; }
.mw-46ch { max-width: 46ch; }
.mw-70ch { max-width: 70ch; }
.mw-720 { max-width: 720px; }
.mw-840 { max-width: 840px; }
.text-center { text-align: center; }