/* RLCoach — styles applicatifs.
   Construits exclusivement sur les variables de tokens.css : aucun hex ne doit
   apparaître ici sans passer par un token ou une variable locale déclarée
   ci-dessous.

   Aucune media query, conformément au handoff : toutes les grilles utilisent
   repeat(auto-fit|auto-fill, minmax(Npx, 1fr)), ce qui produit le passage
   mobile -> desktop sans point de rupture à maintenir. */

:root {
  /* Variables locales : nuances du prototype qui n'ont pas de token dédié. */
  --c-nav-idle:    #8B94BC;
  --c-shimmer:     #2A3466; /* nuance haute du dégradé de squelette */

  /* Texte SOMBRE posé sur les fonds vifs : exigence de contraste du design
     system (jamais de blanc sur ces aplats). Une variante par couleur vive. */
  --c-on-bad:      #1A0208;
  --c-on-ok:       #03210F;
  --c-on-warn:     #1A1402;
  --c-on-rank:     #1A0A02;

  --c-header-bg:   rgba(10, 14, 28, .86);
  --c-band-bg:     rgba(17, 23, 48, .6);
  --grad-brand:    linear-gradient(140deg, var(--c-player), var(--c-brand));
  --grad-accent:   linear-gradient(90deg, var(--c-player), var(--c-brand) 60%, var(--c-rank));
  --w-page:        1360px;
  --w-hero:        1180px;
  --w-auth:        940px;
  --w-prose:       700px;
}

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

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

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-attachment: fixed;
}

[x-cloak] { display: none !important; }

.container {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--c-brand);
  color: var(--c-bg);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-weight: 600;
  z-index: 100;
}
.skip-link:focus { left: var(--sp-4); top: var(--sp-4); }

/* ── En-tête ────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--c-header-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  max-width: var(--w-page);
  margin-inline: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--c-text);
  text-decoration: none;
  margin-right: auto;
}
.brand:hover { color: var(--c-text); text-decoration: none; }

/* Logo PetitPad : un pad de boost en isométrie. Identité définitive.
   Le halo vit ici et jamais dans le SVG — gravé dans le fichier, il casserait
   le rendu sur fond clair, en impression et en favicon. */
.brand-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.logo { display: block; flex: none; }
.logo--header   { width: 36px; height: 27px; filter: var(--sh-cyan); }
.logo--hero     { width: 58px; height: 44px; filter: drop-shadow(0 0 16px rgba(34, 198, 255, .45)); }
.logo--dropzone {
  width: 76px;
  height: 58px;
  margin: 0 auto var(--sp-4);
  filter: drop-shadow(0 0 18px rgba(34, 198, 255, .45));
}

/* Wordmark : deux fragments, jamais une image. Le cyan est réservé à la
   marque — il ne doit porter aucune valeur de donnée. */
.brand-text {
  font: 700 18px/1 var(--ff-display);
  letter-spacing: -.035em;
}
.wm-petit { color: var(--c-text); }
.wm-pad   { color: var(--c-cyan); }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 9px var(--sp-3);
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--c-nav-idle);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
}
.nav-link:hover {
  color: var(--c-text);
  background: var(--c-raised);
  text-decoration: none;
}
.nav-link.is-active {
  color: var(--c-text);
  background: var(--c-track);
  border-color: var(--c-line-3);
}

.inline-form { display: inline-flex; margin: 0; }

/* Le handoff fixe la hauteur des éléments d'en-tête à 38 px, mais exige aussi
   des cibles tactiles d'au moins 44 px. Les deux sont tenables : la pastille
   peinte reste à 38 px, et un pseudo-élément étend la zone cliquable à 44 px.
   Le débord vertical (3 px de chaque côté) reste inférieur au gap de 8 px, donc
   deux lignes de navigation ne se chevauchent jamais. */
.site-nav .nav-link,
.site-nav .btn-sm {
  position: relative;
}
.site-nav .nav-link::after,
.site-nav .btn-sm::after {
  content: "";
  position: absolute;
  inset: -3px 0;
}

/* ── Structure ──────────────────────────────────────────────────────────── */

.site-main { flex: 1; padding-block: var(--sp-8) var(--sp-12); }
.site-main--narrow { max-width: var(--w-auth); }

h1, h2, h3 { font-family: var(--ff-display); line-height: var(--lh-tight); margin: 0 0 var(--sp-3); }
h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-h2); font-weight: 600; margin-top: var(--sp-8); }
h3 { font-size: var(--fs-h3); font-weight: 600; }
p  { margin: 0 0 var(--sp-4); }

code, .mono { font-family: var(--ff-mono); font-size: 12.5px; }
code {
  background: var(--c-surface);
  padding: 3px 6px;
  border-radius: var(--r-sm);
  color: var(--c-text-2);
}

.muted { color: var(--c-muted); }
.dim   { color: var(--c-dim); }
.hint  { color: var(--c-muted); font-size: var(--fs-xs); }
.lead  { font-size: 16px; line-height: var(--lh-body); color: var(--c-muted); max-width: 48ch; }

/* ── Boutons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  padding: 0 var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font: 600 var(--fs-body)/1.2 var(--ff-body);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { text-decoration: none; }

/* Texte SOMBRE sur les fonds vifs : exigence de contraste du design system. */
.btn-primary {
  background: var(--grad-brand);
  color: var(--c-bg);
}
.btn-primary:hover { filter: brightness(1.08); color: var(--c-bg); }

.btn-outline {
  background: rgba(77, 140, 255, .14);
  border-color: var(--c-player);
  color: var(--c-text);
}
.btn-outline:hover { background: rgba(77, 140, 255, .22); color: var(--c-text); }

.btn-secondary {
  background: transparent;
  border-color: var(--c-line-3);
  color: var(--c-text);
}
.btn-secondary:hover { background: var(--c-raised); border-color: var(--c-player); color: var(--c-text); }

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

.btn-danger { background: var(--c-bad); color: var(--c-on-bad); }
.btn-danger:hover { filter: brightness(1.08); color: var(--c-on-bad); }

.btn-sm  { min-height: 38px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.btn-cta { min-height: var(--tap-cta); padding: 0 var(--sp-6); font-size: 15px; }
.btn-block { width: 100%; }

.row-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); }

/* ── Accueil ────────────────────────────────────────────────────────────── */

.hero {
  max-width: var(--w-hero);
  margin-inline: auto;
  padding: 56px var(--sp-4) 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: var(--sp-8);
  align-items: center;
}

.hero-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 22px;
}
.hero-wordmark {
  font: 700 27px/1 var(--ff-display);
  letter-spacing: -.035em;
}

.proof-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-band-bg);
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  margin-bottom: var(--sp-5);
}
.proof-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-ok);
  flex: none;
}

.hero h1 {
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin-bottom: var(--sp-5);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.hero-note { font-size: var(--fs-xs); color: var(--c-dim); margin: 0; }

/* Démo visuelle : réplique miniature de l'écran d'analyse. C'est la preuve du
   produit — elle montre l'analyse, pas un tableau de bord générique. */
.demo {
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: var(--sh-glow);
  overflow: hidden;
}
.demo::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--grad-accent);
}
.demo-body { padding: var(--sp-4); display: grid; gap: var(--sp-3); }
.demo-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  color: var(--c-dim);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: var(--r-sm);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.badge-ok { color: var(--c-ok); background: rgba(61, 214, 140, .1); border: 1px solid rgba(61, 214, 140, .35); }

.demo-axis {
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-inset);
  box-shadow: inset 3px 0 0 var(--c-rank);
  padding: var(--sp-3) var(--sp-4);
}
.demo-axis h3 { font-size: 14.5px; margin-bottom: 4px; }
.demo-axis p  { font-size: var(--fs-sm); line-height: 1.55; color: var(--c-text-2); margin: 0; }

.demo-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-2);
}
.demo-stat {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-inset);
  padding: var(--sp-3);
}
.demo-stat .stat-value {
  font: 700 21px/1 var(--ff-display);
  display: block;
  margin-bottom: 3px;
}

.gauge {
  height: 5px;
  border-radius: 3px;
  background: var(--c-track);
  overflow: hidden;
  margin: 7px 0 5px;
}
.gauge > span { display: block; height: 100%; border-radius: 3px; }
.gauge-low  > span { background: var(--c-p-low); }
.gauge-mid  > span { background: var(--c-p-mid); }
.gauge-high > span { background: var(--c-p-high); }

.pct { font-family: var(--ff-mono); font-size: 11.5px; }
.pct-low  { color: var(--c-rank-text); }
.pct-mid  { color: var(--c-p-mid); }
.pct-high { color: var(--c-player); }

/* Bande de preuves */
.proof-band {
  border-block: 1px solid var(--c-line);
  background: var(--c-band-bg);
  margin-block: var(--sp-8);
}
.proof-band-inner {
  max-width: var(--w-hero);
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-6);
}
.proof-item strong {
  display: block;
  font: 700 30px/1.1 var(--ff-display);
  margin-bottom: 6px;
}
.proof-item p { font-size: var(--fs-sm); color: var(--c-muted); margin: 0; }
.proof-item--player strong { color: var(--c-player); }
.proof-item--brand  strong { color: var(--c-brand); }
.proof-item--rank   strong { color: var(--c-rank); }

.closing {
  max-width: var(--w-prose);
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-4) var(--sp-12);
  text-align: center;
}
.closing h2 { margin-top: 0; font-size: var(--fs-h1); }
.closing .hero-actions { justify-content: center; }

/* ── Cartes et panneaux ─────────────────────────────────────────────────── */

.panel {
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.panel h2 { margin-top: 0; }
.panel-danger { border-color: rgba(255, 92, 110, .4); }

/* Les variantes de panneau portent du SENS, pas de la décoration : un point
   fort et un axe de travail ne doivent pas se lire pareil au premier coup
   d'oeil. La bordure gauche suffit — un fond coloré rendrait une page de
   trois axes illisible.

   Elles étaient utilisées dans les gabarits sans exister ici : les panneaux
   s'affichaient tous à l'identique, et la distinction ne passait que par le
   texte. */
.panel-ok    { border-left: 3px solid var(--c-ok); }
.panel-warn  { border-left: 3px solid var(--c-rank); }
.panel-info  { border-left: 3px solid var(--c-cyan); }
.panel h3 { margin-top: var(--sp-5); }
.panel h4 { margin: 0 0 var(--sp-2); }
.panel h4 .badge { margin-right: var(--sp-2); }

.card {
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  padding: var(--sp-6);
}
.card--secondary { border-color: var(--c-line); background: var(--c-band-bg); }
.card h1 { font-size: var(--fs-h2); }

.prose { max-width: 68ch; }
.prose ul { padding-left: var(--sp-5); color: var(--c-text-2); }
.prose li { margin-bottom: var(--sp-2); }
.prose h2 { font-size: var(--fs-h3); }

.datalist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
  margin: 0;
}
.datalist > div { border-left: 2px solid var(--c-line); padding-left: var(--sp-3); }
.datalist dt {
  font: 600 var(--fs-label)/1 var(--ff-body);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-dim);
  margin-bottom: 5px;
}
.datalist dd { margin: 0; font-size: var(--fs-body); }

/* ── Formulaires ────────────────────────────────────────────────────────── */

.form { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-5); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font: 600 var(--fs-label)/1 var(--ff-body);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-nav-idle);
}
.field .hint { margin: 0; }

input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  min-height: 48px;
  padding: 13px;
  background: var(--c-bg);
  color: var(--c-text);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
  font: 400 16px/1.3 var(--ff-body); /* >= 16px : évite le zoom auto sur iOS */
}
input::placeholder { color: var(--c-dim); }
input:hover { border-color: var(--c-line-3); }
input:focus { border-color: var(--c-player); }

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--c-text-2);
  cursor: pointer;
}
.check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--c-player);
  cursor: pointer;
}

.auth-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-4);
  align-items: start;
  max-width: var(--w-auth);
  margin-inline: auto;
}
.auth-alt { margin: var(--sp-4) 0 0; font-size: var(--fs-sm); color: var(--c-muted); }

/* ── Messages ───────────────────────────────────────────────────────────── */

.flash {
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.flash strong { font-weight: 600; }
.flash-error { background: rgba(255, 92, 110, .07); border-color: rgba(255, 92, 110, .4); color: var(--c-bad-text); }
.flash-warn  { background: rgba(255, 197, 61, .07); border-color: rgba(255, 197, 61, .4); color: var(--c-warn); }
.flash-ok    { background: rgba(61, 214, 140, .08); border-color: rgba(61, 214, 140, .38); color: var(--c-ok); }
.flash-info  { background: rgba(77, 140, 255, .08); border-color: rgba(77, 140, 255, .38); color: var(--c-text-2); }

/* ── Pied de page ───────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--c-line);
  background: var(--c-band-bg);
  padding-block: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--c-dim);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  justify-content: space-between;
  align-items: center;
}
.footer-note { margin: 0; max-width: 52ch; }
.footer-links { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.footer-links a { color: var(--c-muted); }

/* ── Utilitaires ────────────────────────────────────────────────────────── */

/* Carte seule au centre d'une grille d'authentification (confirmation, erreur). */
.card--single {
  grid-column: 1 / -1;
  max-width: 34rem;
  margin-inline: auto;
}

.centered { margin-inline: auto; }

/* Largeurs de jauge, de 0 à 100 %.
   La largeur d'une jauge de percentile est une donnée, donc dynamique — mais la
   CSP interdit `style="width:82%"` (style-src 'self'), et l'affaiblir pour de la
   mise en forme serait un mauvais échange. Une classe par point de pourcentage
   coûte environ 1,5 Ko et garde la CSP stricte. */
.w-0 { width: 0%; }
.w-1 { width: 1%; }
.w-2 { width: 2%; }
.w-3 { width: 3%; }
.w-4 { width: 4%; }
.w-5 { width: 5%; }
.w-6 { width: 6%; }
.w-7 { width: 7%; }
.w-8 { width: 8%; }
.w-9 { width: 9%; }
.w-10 { width: 10%; }
.w-11 { width: 11%; }
.w-12 { width: 12%; }
.w-13 { width: 13%; }
.w-14 { width: 14%; }
.w-15 { width: 15%; }
.w-16 { width: 16%; }
.w-17 { width: 17%; }
.w-18 { width: 18%; }
.w-19 { width: 19%; }
.w-20 { width: 20%; }
.w-21 { width: 21%; }
.w-22 { width: 22%; }
.w-23 { width: 23%; }
.w-24 { width: 24%; }
.w-25 { width: 25%; }
.w-26 { width: 26%; }
.w-27 { width: 27%; }
.w-28 { width: 28%; }
.w-29 { width: 29%; }
.w-30 { width: 30%; }
.w-31 { width: 31%; }
.w-32 { width: 32%; }
.w-33 { width: 33%; }
.w-34 { width: 34%; }
.w-35 { width: 35%; }
.w-36 { width: 36%; }
.w-37 { width: 37%; }
.w-38 { width: 38%; }
.w-39 { width: 39%; }
.w-40 { width: 40%; }
.w-41 { width: 41%; }
.w-42 { width: 42%; }
.w-43 { width: 43%; }
.w-44 { width: 44%; }
.w-45 { width: 45%; }
.w-46 { width: 46%; }
.w-47 { width: 47%; }
.w-48 { width: 48%; }
.w-49 { width: 49%; }
.w-50 { width: 50%; }
.w-51 { width: 51%; }
.w-52 { width: 52%; }
.w-53 { width: 53%; }
.w-54 { width: 54%; }
.w-55 { width: 55%; }
.w-56 { width: 56%; }
.w-57 { width: 57%; }
.w-58 { width: 58%; }
.w-59 { width: 59%; }
.w-60 { width: 60%; }
.w-61 { width: 61%; }
.w-62 { width: 62%; }
.w-63 { width: 63%; }
.w-64 { width: 64%; }
.w-65 { width: 65%; }
.w-66 { width: 66%; }
.w-67 { width: 67%; }
.w-68 { width: 68%; }
.w-69 { width: 69%; }
.w-70 { width: 70%; }
.w-71 { width: 71%; }
.w-72 { width: 72%; }
.w-73 { width: 73%; }
.w-74 { width: 74%; }
.w-75 { width: 75%; }
.w-76 { width: 76%; }
.w-77 { width: 77%; }
.w-78 { width: 78%; }
.w-79 { width: 79%; }
.w-80 { width: 80%; }
.w-81 { width: 81%; }
.w-82 { width: 82%; }
.w-83 { width: 83%; }
.w-84 { width: 84%; }
.w-85 { width: 85%; }
.w-86 { width: 86%; }
.w-87 { width: 87%; }
.w-88 { width: 88%; }
.w-89 { width: 89%; }
.w-90 { width: 90%; }
.w-91 { width: 91%; }
.w-92 { width: 92%; }
.w-93 { width: 93%; }
.w-94 { width: 94%; }
.w-95 { width: 95%; }
.w-96 { width: 96%; }
.w-97 { width: 97%; }
.w-98 { width: 98%; }
.w-99 { width: 99%; }
.w-100 { width: 100%; }

/* ── Statistiques : carte, jauge de percentile, évolution ─────────────────
   Reprend la piste A du dossier de design. Trois règles y sont
   structurelles, pas décoratives :

   · la couleur ne porte JAMAIS seule une information — chaque jauge est
     doublée d'un `pXX` et d'une phrase, chaque évolution de son signe ;
   · la largeur de jauge passe par une classe `w-NN` et jamais par un style
     en ligne, que la politique de sécurité du site interdit ;
   · une statistique sans percentile s'affiche quand même, avec le motif de
     son absence — se taire serait laisser croire qu'elle n'existe pas. */

.stats-section {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-6) 0 var(--sp-3);
}
.stats-section-titre {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--c-p-mid);
  margin: 0;
}
.stats-section::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-track);
}

.stats-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--sp-3);
}

.stat-carte {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  padding: var(--sp-3);
}
.stat-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
}
.stat-nom { font-size: var(--fs-xs); color: var(--c-text-2); }
.stat-delta { font-size: var(--fs-micro); }
.delta-bon { color: var(--c-ok); }
.delta-mauvais { color: var(--c-rank-text); }
.delta-neutre { color: var(--c-dim); }

.stat-mesure { margin: var(--sp-2) 0 var(--sp-3); }
.stat-chiffre {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-stat);
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}
.stat-unite { font-size: var(--fs-micro); color: var(--c-dim); margin-left: 2px; }
.stat-reserve {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-micro);
  color: var(--c-dim);
}

/* --- Jauge ------------------------------------------------------------- */

/* Piste 0-100 : le curseur s'y POSITIONNE au lieu de la remplir. Elle passe
   de 4 à 8 px parce qu'un curseur de 12 px ne tient pas sur 4, et la marge
   latérale lui laisse la place de déborder aux extrêmes sans être rogné
   (d'où la disparition de overflow: hidden). */
.jauge-piste {
  position: relative;
  height: 8px;
  margin: 0 7px;
  border-radius: 4px;
  background: var(--c-track);
}
/* Moyenne du rang. Toujours à 50 % : sur une échelle de percentile, c'est sa
   définition. */
.jauge-mediane {
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: var(--c-line-2);
}
/* Le remplissage sert de chemin parcouru, le point marque la valeur. Teinte
   obtenue par color-mix et NON par opacity : opacity s'applique à tout le
   sous-arbre et délaverait aussi le point. */
.jauge-position {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 4px;
  background: color-mix(in srgb, currentcolor 30%, transparent);
}
.jauge-position::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(50%, -50%);
  background: currentcolor;
  border: 2px solid var(--c-surface);
}
/* Le pointillé signale qu'il y a une infobulle à survoler — sans lui, le
   repère du jeu resterait invisible pour qui ne passe pas la souris dessus. */
.stat-nom-note {
  text-decoration: underline dotted var(--c-dim);
  text-underline-offset: 3px;
  cursor: help;
}
.jauge-texte {
  margin: 8px 0 0;
  font-size: var(--fs-micro);
  color: var(--c-dim);
}

/* `currentcolor` porte la teinte : la piste et le texte s'y accordent sans
   qu'on répète la couleur trois fois. */
.jauge.p-high { color: var(--c-p-high); }
.jauge.p-mid { color: var(--c-p-mid); }
.jauge.p-low { color: var(--c-p-low); }
.jauge.p-neutre { color: var(--c-p-mid); }
.jauge.p-absente { color: var(--c-dim); }

.stats-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
}
.stats-entete .section-title { margin: 0; }

/* ── Analyse : verdict, conseils, programme, attente ──────────────────────
   Piste A du dossier de design. La hiérarchie visuelle porte le message : le
   verdict d'abord, les forces et les axes côte à côte, le programme ensuite.
   Un joueur qui ne lit qu'une chose doit lire le verdict. */

.etiquette {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--c-dim);
}
.etiquette-ok { color: var(--c-ok); }
.etiquette-rank { color: var(--c-rank-text); }

.verdict {
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
}
.verdict-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.verdict-texte {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.45;
  max-width: 62ch;
  text-wrap: pretty;
  margin: 0;
}
.verdict-relecture { font-size: var(--fs-xs); color: var(--c-text-2); }
.pastille-ok {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-ok);
  margin-right: 5px;
}

.conseils {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.carte-conseils {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  padding: var(--sp-4);
}
/* Le liseré porte le sens, doublé par le libellé coloré de l'en-tête. */
.carte-forces { box-shadow: inset 3px 0 0 var(--c-ok); }
.carte-axes { box-shadow: inset 3px 0 0 var(--c-rank); }
.conseils-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.conseil + .conseil { margin-top: var(--sp-4); }
.conseil-titre {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 14.5px;
  margin: 0 0 4px;
}
.conseil-texte {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--c-text-2);
}
.conseil-rang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  flex: none;
  font-family: var(--ff-mono);
  font-size: 12px;
  background: rgba(255, 122, 61, .22);
  color: var(--c-rank-text);
}
/* Le premier axe est plein : trois priorités égales n'en font aucune. */
.conseil-rang-premier { background: var(--c-rank); color: var(--c-on-rank); }

.programme {
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.programme-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.programme-titre {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 18px;
  margin: 0;
}
.programme-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3);
}
.exercice {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-inset);
  padding: var(--sp-3);
}
.exercice-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.exercice-nom {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 14.5px;
  margin: 0 0 4px;
}
.exercice-pourquoi {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  line-height: 1.5;
}

/* --- Attente ----------------------------------------------------------- */

.attente {
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
}
.attente-entete {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.attente-titre {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 15px;
  margin: 0;
}
.attente-texte {
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  max-width: 60ch;
  margin: 0 0 var(--sp-4);
}
.pastille-attente {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-brand);
  flex: none;
  animation: rl-pulse 1.4s ease-in-out infinite;
}
.attente-squelette { display: flex; flex-direction: column; gap: 9px; }
.squelette-barre {
  height: 9px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--c-track), var(--c-shimmer), var(--c-track));
  background-size: 420px 100%;
  animation: rl-shimmer 1.5s linear infinite;
}

/* Un utilisateur qui a demandé moins d'animation n'en reçoit aucune. */
@media (prefers-reduced-motion: reduce) {
  .pastille-attente, .squelette-barre { animation: none; }
}

/* ── Écran d'annotation expert ────────────────────────────────────────────
   Densité élevée, efficacité avant esthétique : l'expert en traite des
   dizaines par semaine. Rayons réduits, texte plus petit, pas de largeur
   maximale — l'espace disponible sert au travail, pas au confort visuel.

   Le dossier de design le donne pour desktop uniquement. On ne le CACHE pas
   sur mobile pour autant : on le laisse défiler. Un expert qui a besoin de
   jeter un œil depuis son téléphone doit pouvoir, même mal. */

.expertise { padding: var(--sp-4); }
.expertise-barre {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.expertise-titre {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  margin: 0;
}
.expertise-filtres { margin-left: auto; display: flex; gap: var(--sp-2); }
.est-actif { border-color: var(--c-player); color: var(--c-player); }

/* La file d'abord, pleine largeur. Elle vivait dans un tiers d'écran, où ses
   quatre colonnes se chevauchaient — et le motif, qui décide s'il faut ouvrir
   l'analyse, était le premier tronqué. */
.colonne-file { margin-bottom: var(--sp-3); }

/* Mais pleine largeur ne veut pas dire pleine hauteur : 39 analyses en file
   font 2 300 px de table, et le détail se retrouvait deux écrans plus bas.
   L'expert doit voir la ligne qu'il a choisie ET ce qu'elle contient sans
   quitter la fenêtre — c'est tout l'intérêt d'avoir séparé les deux.

   Le sélecteur est plus spécifique que le `.table-scroll` de components.css,
   qui charge APRÈS cette feuille : à spécificité égale, il gagnerait. */
.colonne-file .table-scroll {
  max-height: 40vh;
  overflow-y: auto;
  /* Jamais de défilement horizontal : la table tient dans sa largeur, et si
     un jour elle n'y tenait plus, c'est la colonne qui doit céder, pas le
     lecteur qui doit pousser une barre. */
  overflow-x: hidden;
}
/* L'en-tête reste lisible pendant le défilement — sans lui, on ne sait plus
   quelle colonne porte l'attente et laquelle porte le rang. */
.colonne-file thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Puis le détail sur deux colonnes : les statistiques source et le texte à
   corriger côte à côte, parce qu'on vérifie l'un PAR l'autre. 380 px chacune ;
   en dessous elles s'empilent, ce qui reste lisible là où trois ne l'étaient
   plus. */
.expertise-detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: var(--sp-3);
  align-items: start;
}
.colonne {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  padding: var(--sp-3);
}
.colonne-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.colonne-titre {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--c-dim);
  margin: 0 0 var(--sp-3);
}

/* `.data-table` impose `min-width: 44rem`, taillé pour la pleine page. Dans
   une colonne de trois cents pixels, cette largeur force un défilement
   horizontal et tronque les libellés par la gauche — « os pads » au lieu de
   « Gros pads ». Le tableau dense doit au contraire se plier à sa colonne.

   SÉLECTEUR COMPOSÉ, et c'est le fond du correctif. `components.css` est
   chargé APRÈS `app.css` : à spécificité égale — une classe de chaque côté —
   c'est `.data-table` qui l'emportait, et un `.table-dense { min-width: 0 }`
   n'avait aucun effet. La première tentative a été déployée sans rien changer
   à l'écran. Deux classes battent une, quel que soit l'ordre des fichiers. */
.data-table.table-dense {
  font-size: var(--fs-micro);
  min-width: 0;
  table-layout: fixed;
}
.data-table.table-dense th,
.data-table.table-dense td { padding: 5px 6px; }
/* La première colonne porte des noms : elle se lit à gauche, et se tronque
   proprement plutôt que d'élargir la table. */
.data-table.table-dense td:first-child,
.data-table.table-dense th:first-child {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.data-table.table-dense td:not(:first-child),
.data-table.table-dense th:not(:first-child) { width: 4.5rem; white-space: nowrap; }
/* La colonne « Pourquoi » de la file porte une phrase : elle a besoin de place
   et le droit de passer à la ligne.

   Le `th` compte AUTANT que le `td` : avec `table-layout: fixed`, ce sont les
   cellules de la PREMIÈRE ligne qui fixent la largeur des colonnes. Tant que
   la règle ne visait que le `td`, l'en-tête imposait ses 4,5 rem à toute la
   colonne et la phrase débordait — c'était la barre de défilement horizontale
   de l'écran de relecture. */
.data-table.table-dense td:last-child,
.data-table.table-dense th:last-child { width: auto; white-space: normal; }
.data-table.table-dense .est-courante { background: rgba(77, 140, 255, .1); }
.data-table.data-table.table-dense .est-courante a { font-weight: 600; }
.ligne-groupe td {
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--c-dim);
  padding-top: var(--sp-3);
}
.aligne-droite { text-align: right; }
/* Le seuil est doublé par le nombre d'heures, jamais porté par la seule
   couleur. */
.attente-longue { color: var(--c-rank-text); }

.badge-urgent { color: var(--c-bad-text); background: rgba(255, 92, 110, .12); border: 1px solid rgba(255, 92, 110, .35); }
.badge-file { color: var(--c-muted); background: var(--c-inset); border: 1px solid var(--c-line); }
.badge-publiee { color: var(--c-ok); background: rgba(61, 214, 140, .1); border: 1px solid rgba(61, 214, 140, .35); }

.alerte-relecture {
  border: 1px solid rgba(255, 122, 61, .4);
  background: rgba(255, 122, 61, .07);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  font-size: var(--fs-xs);
  margin: 0 0 var(--sp-3);
}
.petite-liste { font-size: var(--fs-micro); margin: 0 0 var(--sp-3); padding-left: var(--sp-4); }

.formulaire-relecture textarea {
  width: 100%;
  background: var(--c-bg);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sm);
  color: var(--c-text);
  font: 400 12.5px/1.6 var(--ff-body);
  padding: var(--sp-3);
  resize: vertical;
  margin-bottom: var(--sp-3);
}
.formulaire-relecture fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
.formulaire-relecture legend { padding: 0; margin-bottom: 4px; }

/* La case native reste dans le flux mais devient invisible : elle garde le
   focus clavier et la sémantique, seul son habillage change. */
.note-choix input, .tag-choix input { position: absolute; opacity: 0; pointer-events: none; }
.note-choix span, .tag-choix span {
  display: inline-block;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sm);
  padding: 5px 9px;
  font-size: var(--fs-micro);
  cursor: pointer;
}
.note-choix input:checked + span {
  border-color: var(--c-player);
  background: rgba(77, 140, 255, .18);
}
.tag-choix input:checked + span {
  border-color: var(--c-rank);
  background: rgba(255, 122, 61, .16);
}
.note-choix input:focus-visible + span,
.tag-choix input:focus-visible + span {
  outline: 2px solid var(--c-player);
  outline-offset: 2px;
}

.actions-relecture { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }

/* Avertissement : non bloquant, donc discret — mais présent sur toutes les
   lignes, y compris les analyses publiables. C'est là qu'il sert, puisque
   personne ne les rouvre. */
.proposition { margin-bottom: var(--sp-3); }
.proposition-titre {
  font-family: var(--ff-display);
  font-weight: 600;
  margin: 0 0 var(--sp-2);
}
.proposition-liste {
  margin: 0 0 var(--sp-2);
  padding-left: var(--sp-3);
  font-size: var(--fs-sm);
}
.proposition-liste li { margin-bottom: 4px; }
.actions-proposition { margin-bottom: var(--sp-3); flex-wrap: wrap; }
.pastille-avertissement {
  color: var(--c-warn);
  cursor: help;
  margin-left: 4px;
}
.liste-avertissements {
  margin: 0 0 var(--sp-3);
  padding-left: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-warn);
}
/* Le motif tenait sur sa propre ligne quand la colonne faisait un tiers
   d'écran. Pleine largeur, il se range à côté du statut : deux fois plus de
   lignes visibles à hauteur égale, ce qui est tout ce qu'on demande à une
   file. Il repasse en dessous sous 900 px, là où il ne tiendrait plus. */
.motif-file {
  font-size: var(--fs-micro);
  color: var(--c-muted);
  margin-left: 6px;
}
@media (max-width: 900px) {
  .motif-file { display: block; margin: 3px 0 0; }
}

/* ── Accueil connecté ─────────────────────────────────────────────────────
   La page du quotidien. Le plan d'abord, l'envoi à côté : le bouton d'envoi
   est volontairement SECONDAIRE, parce que le sujet de la page est ce qu'il y
   a à travailler. */

.accueil-entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.accueil-titre {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 27px;
  margin: 0 0 4px;
}

.accueil-colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-4);
  align-items: start;
  margin-bottom: var(--sp-4);
}

.derniere, .progression {
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  padding: var(--sp-4);
}
.derniere-score {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 34px;
  margin: var(--sp-3) 0 var(--sp-2);
}
.score-joueur { color: var(--c-player); }
.score-tiret { color: var(--c-line-2); margin: 0 4px; }
.score-adverse { color: var(--c-p-mid); }
.derniere-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin: 0 0 var(--sp-4);
}

.axe-un, .en-relecture, .rien-a-signaler {
  background: var(--c-inset);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.axe-un { box-shadow: inset 3px 0 0 var(--c-rank); }
.axe-un-titre {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.45;
  margin: var(--sp-2) 0 4px;
}
.axe-un-chiffre { margin: 0; font-size: var(--fs-sm); color: var(--c-rank-text); }
.en-relecture-titre {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 14.5px;
  margin: var(--sp-2) 0 4px;
}

/* Sans liseré de couleur, a dessein : ni un axe a travailler, ni une alerte.
   Un match propre et une analyse en echec sont des faits a lire, pas des
   choses a faire. */
.rien-a-signaler-titre {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 14.5px;
  margin: 0 0 4px;
  color: var(--c-muted);
}

.motif {
  background: rgba(255, 122, 61, .07);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin: var(--sp-3) 0;
}
.motif-titre {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--c-rank-text);
  margin: 0 0 4px;
}

/* Le compteur remplace la courbe sous le seuil. Jamais de graphe vide : une
   tendance sur deux points n'est pas une tendance. */
.compteur { text-align: center; padding: var(--sp-4) 0; }
.compteur-chiffre {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 32px;
  color: var(--c-player);
  margin: 0 0 var(--sp-2);
}
.compteur-titre {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 var(--sp-2);
}

.segments { display: flex; gap: 4px; justify-content: center; margin-top: var(--sp-3); }
.segment {
  height: 5px;
  width: 34px;
  border-radius: 3px;
  background: var(--c-track);
}
.segment.est-fait { background: var(--c-ok); }

/* --- Programme en cours ------------------------------------------------ */

.programme-en-cours {
  /* --c-raised existe déjà pour l'élévation : le dégradé du dossier de
     design partait de #1A2148, à deux points de différence. Reprendre le
     token plutôt qu'ajouter une nuance qui ne se distingue pas. */
  background: linear-gradient(160deg, var(--c-raised), var(--c-surface));
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.etiquette-marque { color: var(--c-brand); }
.programme-avancement { text-align: right; }
.programme-avancement .segments { justify-content: flex-end; margin-top: 6px; }
.programme-avancement .segment { width: 22px; }
.exercice.est-fait { border-color: rgba(61, 214, 140, .35); }
.exercice-visee {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-micro);
  color: var(--c-rank-text);
}

/* --- Onboarding -------------------------------------------------------- */

.onboarding { text-align: center; padding: var(--sp-6) 0; }
.onboarding-titre {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(26px, 4.2vw, 38px);
  text-wrap: balance;
  margin: 0 0 var(--sp-3);
}
.onboarding-promesse {
  color: var(--c-text-2);
  max-width: 52ch;
  margin: 0 auto var(--sp-5);
}
.etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  text-align: left;
}
.etape {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  padding: var(--sp-4);
}
/* La troisième porte la récompense : c'est elle qu'on veut voir en dernier. */
.etape-recompense { box-shadow: inset 3px 0 0 var(--c-rank); }
.etape-titre {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 var(--sp-2);
}