/* ═══════════════════════════════════════════════════════════════════════════
   KAEL REFLEX — système visuel « Le silence » · refonte du 10 septembre 2026
   ═══════════════════════════════════════════════════════════════════════════

   POURQUOI LA VERSION « BRAISE » (rouge/vin) EST ABANDONNÉE :

   Recherche design-dna du 9-10 sept 2026 (voir ../design-dna.html) :
   1. Sur 12 sites sombres primés relevés au getComputedStyle, 1 seul met sa
      couleur de marque dans le CTA — l'accent sert à LIRE, jamais à cliquer.
      L'ancien système faisait l'inverse (rouge en fond plein partout).
   2. L'accent #c23b4a mesurait 3,00:1 sur la carte #232324, le vin #8e2f3e
      1,96:1 — sous le seuil AA 4,5:1. Deux rouges sur trois illisibles
      en texte, d'où le remplissage : une contrainte subie, pas un choix.
   3. Dans le co-design de Garrido et al. (2024, 24 jeunes 13-25 ans), le
      rouge d'interface est décrit comme « agressif » ; l'argument qui avait
      justifié un rouge (l'effet rouge-attirance d'Elliot) est réfuté par une
      réplication préenregistrée multi-labos (n=640, effet −0,07).
   4. Le vrai critère qui ressort de la littérature n'est ni « habiller le
      problème » ni « habiller la destination » : c'est la NON-ANNONCE — que
      l'app ne déclare pas sa catégorie. Zéro couleur = zéro trahison.

   CE QUI CHANGE (Monde 05 « Le silence », ancré sur HackFirst.io, CSSDA
   Website of the Day 24-08-2026) :

   · Un seul ton — #e9f7fc, froid de 19° à peine — décline TOUT : surfaces,
     filets, texte, accent. Zéro rouge, zéro gradient de marque, zéro glow
     coloré. La hiérarchie vient de l'opacité et du poids, plus jamais de
     la teinte.
   · Les 9 piliers perdaient leur code rouge/acier — ils partagent maintenant
     le même ton unique ; la distinction se fait par icône + libellé
     (décision Bryan, 2026-09-10).
   · VALIDÉ / CONTESTÉ restent fonctionnels (--ok / --bad) : ce n'est pas de
     la décoration de marque, c'est le mécanisme central du produit
     (étiquetage de preuve), donc hors du périmètre « zéro accent ».
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ---- le sol : NOIR pur, comme HackFirst. Aucune chaleur, aucune teinte —
     c'est la discipline du monde : la hierarchie vient de l'opacite, jamais
     de la couleur. ---- */
  --bg: #000000;
  --bg-2: #050505;

  /* ---- surfaces : meme ton froid (#e9f7fc) decline en opacite montante,
     verbatim la methode HackFirst (une seule teinte, alpha variable). ---- */
  --s1: #0e0f10;
  --s1-hi: #141416;
  --s2: #1c1d1f;
  --s3: #26282b;
  --line: rgba(233, 247, 252, 0.1);
  --line-2: rgba(233, 247, 252, 0.2);

  /* ---- UN SEUL TON. Plus de deux-tons rouge/vin : en monochrome, le
     probleme de contraste qui forcait ce systeme n'existe plus — #e9f7fc
     est a 16,8:1 sur la carte, lisible partout, tout le temps. ---- */
  --accent: #e9f7fc;
  --accent-2: #e9f7fc;
  --accent-deep: rgba(233, 247, 252, 0.7);   /* etats presse/hover : dimmer, jamais changer de teinte */
  --accent-dim: rgba(233, 247, 252, 0.1);
  --accent-glow: rgba(233, 247, 252, 0.18);
  /* Lueurs ambiantes — la meme regle, encore plus faible : un halo blanc a
     peine perceptible, jamais une brume coloree. */
  --halo-1: rgba(233, 247, 252, 0.06);
  --halo-2: rgba(233, 247, 252, 0.03);
  --vin: #e9f7fc;
  --vin-clair: #e9f7fc;
  --vin-fonce: #e9f7fc;

  /* ---- l'ancien accent secondaire (creme) devient le meme ton froid —
     un systeme a un seul ton, jamais deux familles qui se disputent. ---- */
  --creme: #e9f7fc;
  --creme-dim: rgba(233, 247, 252, 0.08);
  --creme-ligne: rgba(233, 247, 252, 0.34);

  /* ---- texte ----
     Verifies contre la SURFACE DE CARTE (#141416), pas contre le fond :
     c'est le contexte le plus exigeant. */
  --text: #e9f7fc;         /* 16,80:1 */
  --text-2: #8a99b8;       /* 6,42:1 — le gris teinte froid, releve sur Senthora/Raptor */
  --text-3: #6c7690;       /* ~4,6:1  */
  /* Texte pose SUR une surface accent pleine (CTA). Fond noir, comme
     HackFirst : bg clair, fg fonce — jamais l'inverse. */
  --sur-vin: #000000;

  --ok: #5fa894;
  --warn: #b8a888;
  --bad: #d98a92;

  /* ---- profondeur ---- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 14px rgba(0, 0, 0, 0.3);
  --sh-2: 0 2px 6px rgba(0, 0, 0, 0.5), 0 14px 34px rgba(0, 0, 0, 0.42);
  --sh-cta: 0 2px 4px rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.28);
  --hi: inset 0 1px 0 rgba(255, 255, 255, 0.07);

  /* ---- "degrades" : zero degrade de marque chez HackFirst — on garde les
     tokens (pour ne pas toucher chaque regle consommatrice) mais ils
     resolvent maintenant en aplat, pas en dégradé. ---- */
  --grad-vin: linear-gradient(140deg, #e9f7fc 0%, #e9f7fc 100%);
  --grad-rouge: linear-gradient(150deg, #e9f7fc 0%, #e9f7fc 100%);

  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --sans: "Geist", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
  --tabh: 62px;
}

* {
  box-sizing: border-box;
}

/* ⚠️ RÈGLE DE SÛRETÉ — 15 septembre 2026.
   `[hidden] { display: none }` vient de la feuille du NAVIGATEUR : la moindre
   règle d'auteur qui pose un `display` sur le même élément la bat. C'était
   déjà un bug en production — `.lc-train { display: block }` gagnait sur
   l'attribut `hidden`, donc le bouton « s'entraîner sur ça » restait affiché
   sur les leçons sans décor d'entraînement. Deux rustines locales existaient
   pour ce même piège (`.onboard[hidden]`, `.ob-step[hidden]`) ; cette ligne
   les couvre toutes, et toutes les suivantes.
   Tout le JS de l'app pilote la visibilité avec `el.hidden` — c'est cette
   déclaration qui rend la convention fiable. */
[hidden] { display: none !important; }

body {
  margin: 0;
  /* ⚠️ `100vh` sur mobile = la hauteur de l'ecran SANS la barre du navigateur,
     donc la mise en page depasse le visible et le bas (barre d'onglets + fin
     du contenu) passe derriere la chrome de Safari. `100dvh` suit la hauteur
     REELLEMENT visible. Le `vh` reste en repli pour les vieux navigateurs :
     la seconde declaration ecrase la premiere la ou `dvh` est supporte. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* Lumière ambiante chaude en haut — le décor n'est jamais un vide plat. */
body::before {
  content: "";
  position: fixed;
  top: -30vh;
  left: 50%;
  transform: translateX(-50%);
  width: 130vw;
  height: 70vh;
  background: radial-gradient(
    50% 50% at 50% 50%,
    var(--halo-1) 0%,
    var(--halo-2) 42%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 0;
}

/* ══════════════════════ MOUVEMENT ══════════════════════ */

@keyframes rise {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}
@keyframes viewIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.22); }
  100% { transform: scale(1); }
}
@keyframes breathe {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.95; }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 6px 22px var(--accent-dim); }
  50% { box-shadow: 0 6px 30px var(--accent-dim); }
}

/* Chaque enfant direct de la vue entre en cascade — ça donne de la vie
   au changement d'onglet au lieu d'un remplacement sec. */
.view.anim > .vinner > * {
  animation: viewIn 0.5s var(--ease-out) both;
}
.view.anim > .vinner > *:nth-child(1) { animation-delay: 0.02s; }
.view.anim > .vinner > *:nth-child(2) { animation-delay: 0.07s; }
.view.anim > .vinner > *:nth-child(3) { animation-delay: 0.12s; }
.view.anim > .vinner > *:nth-child(4) { animation-delay: 0.17s; }
.view.anim > .vinner > *:nth-child(5) { animation-delay: 0.22s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════ EN-TÊTE ══════════════════════ */
.head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(20, 17, 16, 0.82);
  backdrop-filter: blur(14px);
  flex-shrink: 0;
}
.mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(160deg, var(--s1-hi), var(--s1));
  border: 1px solid var(--line);
  box-shadow: var(--hi);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.mark svg { width: 17px; height: 17px; }
.head b {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.tier {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.11em;
  color: var(--creme);
  background: var(--creme-dim);
  border: 1px solid var(--creme-ligne);
  border-radius: 100px;
  padding: 5px 11px;
}

/* ══════════════════════ VUES ══════════════════════ */
.views {
  position: relative;
  z-index: 1;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.view { min-height: 100%; }
.vinner {
  max-width: 620px;
  margin: 0 auto;
  /* Le +56 est de l'air VOULU sous la derniere ligne : sans lui, le dernier
     paragraphe colle a la barre d'onglets et se lit comme s'il etait coupe. */
  padding: 28px 20px calc(var(--tabh) + env(safe-area-inset-bottom) + 56px);
}
.vhead { margin-bottom: 22px; }
.vhead h1 {
  margin: 0 0 6px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
}
.vsub {
  margin: 0;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.55;
}
.vsub b { color: var(--text); font-weight: 600; }

/* ══════════════════════ SURFACE DE CARTE ══════════════════════ */
/* La recette : dégradé léger + liseré de lumière en haut + ombre portée.
   C'est ce qui fait qu'une carte se lit comme un objet posé et pas
   comme un trou plus clair dans le fond. */
.surface {
  background: linear-gradient(168deg, var(--s1-hi) 0%, var(--s1) 62%);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--sh-1), var(--hi);
}

/* ══════════════════════ BARRE D'ONGLETS ══════════════════════ */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  background: rgba(20, 17, 16, 0.9);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  position: relative;
  flex: 1;
  max-width: 170px;
  min-height: var(--tabh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-3);
  font-family: inherit;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.tab svg {
  width: 21px;
  height: 21px;
  transition: transform 0.3s var(--ease);
}
.tab span {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.05em;
}
.tab:hover { color: var(--text-2); }
.tab:active svg { transform: scale(0.88); }
.tab.on { color: var(--accent); }
.tab.on svg { transform: translateY(-1px); }
/* Le trait d'onglet actif — le repère de position le plus lisible. */
.tab::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 2px;
  border-radius: 0 0 3px 3px;
  background: var(--accent);
  transform: translateX(-50%);
  transition: width 0.32s var(--ease);
}
.tab.on::after { width: 32px; }

/* ══════════════════════ AUJOURD'HUI ══════════════════════ */

/* -- le drill du jour : la carte principale de l'écran -- */
.card-drill {
  position: relative;
  overflow: hidden;
  background: linear-gradient(168deg, var(--s1-hi) 0%, var(--s1) 62%);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--sh-2), var(--hi);
  padding: 22px;
  margin-bottom: 13px;
}
.cd-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
}
.cd-fam {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid var(--accent-dim);
  border-radius: 100px;
  padding: 5px 11px;
}
.cd-dur {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--text-3);
}
.card-drill h3 {
  position: relative;
  margin: 0 0 10px;
  font-size: 23px;
  font-weight: 780;
  letter-spacing: -0.03em;
}
.cd-cons {
  position: relative;
  margin: 0 0 20px;
  font-size: 14.5px;
  color: var(--text-2);
  line-height: 1.6;
}
.cd-go {
  position: relative;
  width: 100%;
  min-height: 50px;
  background: var(--grad-vin);
  color: var(--sur-vin);
  border: 0;
  border-radius: 13px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--sh-cta);
  transition: transform 0.16s var(--ease), box-shadow 0.25s ease;
}
.cd-go:active { transform: scale(0.985); }
/* Déjà fait : reste cliquable, mais cesse d'être l'appel à l'action. */
.cd-go.done {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--text-2);
  box-shadow: none;
}
.cd-go.done:hover { border-color: var(--accent); color: var(--text); box-shadow: none; }
.cd-done {
  position: relative;
  text-align: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ok);
  padding: 14px 0 2px;
  animation: rise 0.45s var(--ease-out) both;
}

/* -- accès au coaching -- */
.card-act {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  background: linear-gradient(168deg, var(--s1-hi) 0%, var(--s1) 62%);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--sh-1), var(--hi);
  padding: 19px 20px;
  margin-bottom: 26px;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  transition: transform 0.18s var(--ease), border-color 0.2s ease;
}
.card-act:hover { border-color: var(--line-2); }
.card-act:active { transform: scale(0.99); }
.ca-txt b {
  display: block;
  font-size: 16px;
  font-weight: 680;
  margin-bottom: 5px;
  letter-spacing: -0.015em;
}
.ca-txt span {
  display: block;
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.55;
}
.ca-arr {
  margin-left: auto;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-dim);
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  font-size: 15px;
  transition: transform 0.25s var(--ease);
}
.card-act:hover .ca-arr { transform: translateX(3px); }

/* -- la régularité : l'ancre de l'écran -- */
.week {
  background: linear-gradient(168deg, var(--s1-hi) 0%, var(--s1) 62%);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--sh-1), var(--hi);
  padding: 20px;
}
.wk-top {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 18px;
}
.wk-n {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.86;
  background: var(--grad-rouge);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wk-n.pop { animation: bump 0.6s var(--ease); }
.wk-unit {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-2);
  padding-bottom: 3px;
}
.wk-pause {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-3);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 5px 10px;
  text-align: right;
}
.wk-days { display: flex; gap: 7px; }
.wk-d {
  flex: 1;
  aspect-ratio: 1;
  max-height: 40px;
  border-radius: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--text-3);
  transition: all 0.3s var(--ease);
}
.wk-d.fait {
  background: var(--grad-vin);
  border-color: transparent;
  color: var(--sur-vin);
  font-weight: 500;
  box-shadow: 0 3px 12px var(--accent-dim);
}
.wk-d.today { border-color: var(--line-2); }
.wk-note {
  margin: 15px 0 0;
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.55;
}

/* ══════════════════════ T'ENTRAÎNER ══════════════════════ */
.scenes { display: grid; gap: 11px; }
.scene {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  width: 100%;
  background: linear-gradient(168deg, var(--s1-hi) 0%, var(--s1) 62%);
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: var(--sh-1), var(--hi);
  padding: 18px;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  transition: transform 0.18s var(--ease), border-color 0.2s ease;
}
.scene:hover { border-color: var(--line-2); }
.scene:active { transform: scale(0.99); }
/* Le liseré de couleur de la scène — chaque type a son identité. */
.scene::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--sc);
}
.sc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
  background: var(--sc);
  box-shadow: 0 0 12px var(--sc);
}
.scene b {
  display: block;
  font-size: 15.5px;
  font-weight: 660;
  margin-bottom: 4px;
  letter-spacing: -0.012em;
}
.scene span { display: block; font-size: 13px; color: var(--text-2); line-height: 1.5; }

/* ══════════════════════ APPRENDRE ══════════════════════ */
.seg {
  display: flex;
  gap: 7px;
  margin-bottom: 20px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 5px;
}
.seg-b {
  flex: 1;
  min-height: 42px;
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: var(--text-2);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 560;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.seg-b.on {
  background: linear-gradient(170deg, var(--s1-hi), var(--s1));
  color: var(--text);
  box-shadow: var(--sh-1), var(--hi);
}

.learn-kpi {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-bottom: 14px;
}
.learn-kpi b { color: var(--accent); font-size: 13px; }

.drills { display: grid; gap: 9px; }
.drill-row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  background: linear-gradient(168deg, var(--s1-hi) 0%, var(--s1) 62%);
  border: 1px solid var(--line);
  border-radius: 13px;
  box-shadow: var(--sh-1), var(--hi);
  padding: 15px 17px;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  transition: transform 0.18s var(--ease), border-color 0.2s ease;
}
.drill-row:hover { border-color: var(--line-2); }
.drill-row:active { transform: scale(0.99); }
.dr-txt b { display: block; font-size: 15px; font-weight: 640; margin-bottom: 3px; }
.dr-txt span {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--text-3);
}
.dr-n {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--text-3);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 5px 10px;
}
.dr-n.fait {
  color: var(--ok);
  border-color: rgba(95, 168, 148, 0.35);
  background: rgba(95, 168, 148, 0.35);
}

/* -- les 9 piliers : chaque domaine a SA couleur (motif Gleam) -- */
.piliers { display: grid; gap: 11px; }
.pilier {
  position: relative;
  overflow: hidden;
  background: linear-gradient(168deg, var(--s1-hi) 0%, var(--s1) 62%);
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: var(--sh-1), var(--hi);
  padding: 19px;
}
.pilier::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--pc);
}
/* Un halo de la couleur du pilier — ce qui les rend vivants et distincts. */
.pilier::after {
  content: "";
  position: absolute;
  top: -70px;
  left: -40px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, var(--pc), transparent 70%);
  opacity: 0.13;
  pointer-events: none;
}
.pl-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
/* Remplacée par l'icône du pilier — une pastille de couleur ET une icône
   côte à côte, c'était deux fois le même signal. */
.pl-dot { display: none; }
.pilier h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--pc);
}
.pl-soon {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-3);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 4px 10px;
}
.pl-prom {
  position: relative;
  margin: 0 0 15px;
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.55;
}
.pl-lecons { position: relative; display: grid; gap: 9px; }
/* Étapes reliées, jamais une barre de pourcentage — motif Gleam. */
.pl-l {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 13px;
  color: var(--text-2);
  position: relative;
}
.pl-l::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--pc);
  background: var(--s1);
  opacity: 0.85;
  flex-shrink: 0;
  z-index: 1;
}
/* Le fil qui relie les étapes entre elles.
   Ancré en top ET bottom plutôt qu'en height fixe : une hauteur figée
   ne rejoint pas la pastille suivante et chaque étape se lit comme une
   sucette isolée au lieu d'une chaîne. */
.pl-l { min-height: 20px; }
.pl-l:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 15px;
  /* Doit ATTEINDRE la pastille suivante : rang 20px + écart 9px, la pastille
     d'après commence ~14px sous le bas du rang. Un -7px laissait un trou et
     le fil se lisait comme une tige pendante. */
  bottom: -14px;
  width: 1.5px;
  background: var(--pc);
  opacity: 0.34;
}

/* ══════════════════════ PROFIL & RÉGLAGES ══════════════════════ */
.profinner { max-width: none; }
.profpanel { display: none !important; }
.kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.kpi {
  background: linear-gradient(168deg, var(--s1-hi) 0%, var(--s1) 62%);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--sh-1), var(--hi);
  padding: 16px 17px;
}
.kpi b {
  display: block;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--accent);
}
.kpi span {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-top: 8px;
  line-height: 1.4;
}
.pat {
  background: linear-gradient(168deg, var(--s1-hi) 0%, var(--s1) 62%);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 14px;
  box-shadow: var(--sh-1);
  padding: 17px 18px;
  margin-bottom: 11px;
}
.pat h5 { margin: 0 0 6px; font-size: 15px; font-weight: 680; }
.pat p { margin: 0 0 5px; font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
.pat .impl { color: var(--text); margin-bottom: 0; }
.profempty {
  background: var(--bg-2);
  border: 1px dashed var(--line-2);
  border-radius: 14px;
  padding: 20px;
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.65;
}

.settings {
  margin-top: 32px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.settings h4 {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--text-3);
  font-weight: 500;
}
.set-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.set-row:last-of-type { border-bottom: 0; }
.set-row div b { display: block; font-size: 14.5px; font-weight: 620; margin-bottom: 3px; }
.set-row div span { display: block; font-size: 13px; color: var(--text-2); }
.set-b {
  margin-left: auto;
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 16px;
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.2s ease;
}
.set-b:hover { border-color: var(--accent); color: var(--text); }
.set-note { margin: 16px 0 0; font-size: 12.5px; color: var(--text-3); line-height: 1.6; }

/* ══════════════════════ CONSOMMATION API (propriétaire) ══════════════════════
   Ce bloc n'est JAMAIS construit chez un client : app.js ne l'écrit que si
   /api/usage a reconnu le propriétaire, sinon la route répond 404. Ces règles
   sont donc du CSS mort pour tout le monde sauf lui — c'est voulu, une feuille
   de style est publique et ne doit rien révéler de plus qu'un nom de classe.
   Chiffres en chasse fixe : on les compare en colonne, pas on les lit. */
.usg-total { font-family: var(--mono); font-size: 24px !important; letter-spacing: -0.01em; }
.usg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin: 14px 0 4px;
}
.usg-c { background: var(--s2); padding: 11px 13px; }
.usg-c i {
  display: block;
  font-style: normal;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 5px;
}
.usg-c b { display: block; font-family: var(--mono); font-size: 14px; color: var(--text); }
.usg-warn {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 8px;
  background: var(--s2);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-2);
}
.usg-warn b { color: var(--text); font-weight: 620; }
.usg-models { margin: 14px 0 4px; }
.usg-m {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
}
.usg-m:last-child { border-bottom: 0; }
.usg-m span { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usg-m em { font-style: normal; color: var(--text-3); margin-left: auto; flex-shrink: 0; }
.usg-m b { color: var(--text); flex-shrink: 0; min-width: 72px; text-align: right; }
@media (min-width: 560px) {
  .usg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ══════════════════════ FACTURATION ══════════════════════ */
.billing { margin-top: 32px; border-top: 1px solid var(--line); padding-top: 22px; }
.billing h4 {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--text-3);
  font-weight: 500;
}
.bill-status {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 16px;
}
.bill-status .dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--text-3);
}
.bill-status.active .dot { background: var(--ok); }
.bill-status .bs-txt { flex: 1; min-width: 0; }
.bill-status .bs-txt b { display: block; font-size: 14.5px; font-weight: 620; }
.bill-status .bs-txt span { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.bill-manage {
  flex-shrink: 0;
  min-height: 40px;
  padding: 0 15px;
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.2s ease;
}
.bill-manage:hover { border-color: var(--accent); color: var(--text); }

/* Le conteneur porte maintenant trois choses empilees : la bascule de
   cadence, la grille de cartes, puis les notes de rassurance. C'est donc une
   colonne — la grille a 2 colonnes est descendue dans `.bill-cards`. */
.bill-plans { display: flex; flex-direction: column; gap: 14px; }
.bill-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .bill-cards { grid-template-columns: 1fr; } }

/* Bascule mensuel / annuel. Deux boutons, jamais un interrupteur : sur un
   choix de prix, l'usager doit voir les deux options nommees, pas deviner
   quel etat represente quoi. */
.bill-cadence {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.bill-cadence button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  /* 44px de haut minimum : cible tactile, meme si le texte est court. */
  min-height: 44px;
  justify-content: center;
  padding: 7px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.bill-cadence button.on { background: var(--s2); color: var(--creme); }
.bill-cadence button em {
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.bill-card .bc-sous {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-3);
}

/* Les reducteurs de peur. Affiches aussi lisiblement que les fonctions —
   pour cet usager, « personne ne saura que je suis ici » pese plus lourd
   qu'une fonctionnalite de plus. */
.bill-notes {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 15px 16px;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.bill-notes p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.bill-notes b { color: var(--text-2); font-weight: 600; }

.bill-card {
  display: flex;
  flex-direction: column;
  padding: 20px 20px 18px;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.bill-card.current { border-color: var(--creme-ligne); }
.bill-card .bc-nom {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-2);
  text-transform: uppercase;
}
.bill-card .bc-prix { margin: 10px 0 14px; display: flex; align-items: baseline; gap: 5px; }
.bill-card .bc-prix b { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.bill-card .bc-prix span { font-size: 12.5px; color: var(--text-3); }
.bill-card ul {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 8px;
  flex: 1;
}
.bill-card li {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.bill-card li svg { flex-shrink: 0; margin-top: 2px; width: 14px; height: 14px; color: var(--text-3); }
.bill-cta {
  min-height: 44px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--creme);
  color: #0b0b0c;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bill-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); }
.bill-cta:disabled {
  background: transparent;
  color: var(--text-3);
  cursor: default;
  transform: none;
  box-shadow: none;
}
.bill-cta.loading { opacity: 0.6; cursor: wait; }

.code-redeem { display: flex; gap: 10px; margin-top: 22px; }
.code-redeem input {
  flex: 1;
  min-height: 44px;
  padding: 0 14px;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
}
.code-redeem input:focus { outline: none; border-color: var(--accent); }
.code-redeem input::placeholder { color: var(--text-3); }
.code-redeem .set-b { margin-left: 0; }
#code-msg.ok { color: var(--ok); }
#code-msg.err { color: var(--bad); }

/* ══════════════════════ VUES POUSSÉES ══════════════════════ */
.push {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--bg);
  flex-direction: column;
}
.push.open { display: flex; animation: viewIn 0.32s var(--ease-out) both; }
/* Les vues poussées sont opaques : sans ça elles masquent la lumière
   ambiante du body et retombent dans le plat. */
.push::before,
.simwrap::before {
  content: "";
  position: absolute;
  top: -28vh;
  left: 50%;
  transform: translateX(-50%);
  width: 130vw;
  height: 68vh;
  background: radial-gradient(
    50% 50% at 50% 50%,
    var(--halo-1) 0%,
    var(--halo-2) 42%,
    transparent 72%
  );
  pointer-events: none;
}
.pushhead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(20, 17, 16, 0.82);
  backdrop-filter: blur(14px);
  flex-shrink: 0;
}
.pushback {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  color: var(--text);
  font-size: 19px;
  cursor: pointer;
  border-radius: 11px;
  transition: background 0.2s ease;
}
.pushback:hover { background: var(--s2); }
.pushtitle { font-size: 14.5px; font-weight: 660; }
.pushmeta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-3);
}

/* ══════════════════════ LECTEUR DE DRILL ══════════════════════ */
.dv-body {
  position: relative;
  flex: 1;
  overflow-y: auto;
  padding: 32px 22px;
  max-width: 620px;
  width: 100%;
  margin: 0 auto;
}
.dv-body h2 {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.038em;
}
.dv-cons {
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-2);
}
.dv-lignes { display: grid; gap: 11px; margin-bottom: 32px; }
/* Ce qu'on dit à voix haute — c'est le cœur de l'exercice, ça doit dominer. */
.dv-ligne {
  position: relative;
  background: linear-gradient(168deg, var(--s1-hi) 0%, var(--s1) 62%);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--sh-1), var(--hi);
  padding: 20px 22px 20px 24px;
  font-size: 19px;
  line-height: 1.5;
  font-weight: 570;
  letter-spacing: -0.012em;
  animation: rise 0.5s var(--ease-out) both;
}
.dv-ligne::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--accent-2), var(--vin-fonce));
}
.dv-ligne:nth-child(2) { animation-delay: 0.07s; }
.dv-ligne:nth-child(3) { animation-delay: 0.14s; }
.dv-why { border-top: 1px solid var(--line); padding-top: 20px; }
.dv-why b {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--creme);
  margin-bottom: 9px;
  font-weight: 500;
}
.dv-why span { font-size: 13.5px; color: var(--text-2); line-height: 1.7; }
.dv-foot {
  flex-shrink: 0;
  padding: 14px 22px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(20, 17, 16, 0.9);
  backdrop-filter: blur(14px);
}
.dv-done {
  display: block;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  min-height: 52px;
  background: var(--grad-vin);
  color: var(--sur-vin);
  border: 0;
  border-radius: 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  cursor: pointer;
  box-shadow: var(--sh-cta);
  transition: transform 0.16s var(--ease);
}
.dv-done:active { transform: scale(0.985); }
.dv-done:disabled { opacity: 0.55; cursor: default; }

/* ══════════════════════ INSCRIPTION ══════════════════════ */
.onboard {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
  overflow-y: auto;
  display: grid;
  place-items: center;
}
.onboard[hidden] { display: none; }
.onboard::before {
  content: "";
  position: fixed;
  top: -25vh;
  left: 50%;
  transform: translateX(-50%);
  width: 120vw;
  height: 70vh;
  background: radial-gradient(50% 50% at 50% 50%, var(--accent-dim), transparent 70%);
  pointer-events: none;
}
.ob-inner { position: relative; max-width: 500px; width: 100%; padding: 44px 22px; }
.ob-step[hidden] { display: none; }
.ob-step { animation: viewIn 0.45s var(--ease-out) both; }
.ob-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 16px;
}
.ob-inner h2 {
  margin: 0 0 12px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 1.12;
}
.ob-lede { margin: 0 0 26px; font-size: 14.5px; color: var(--text-2); line-height: 1.6; }
.ob-cards { display: grid; gap: 10px; }
.ob-card {
  text-align: left;
  background: linear-gradient(168deg, var(--s1-hi) 0%, var(--s1) 62%);
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: var(--sh-1), var(--hi);
  padding: 18px 20px;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  transition: transform 0.18s var(--ease), border-color 0.2s ease, box-shadow 0.25s ease;
}
.ob-card:hover { border-color: var(--line-2); }
.ob-card:active { transform: scale(0.99); }
.ob-card.sel {
  border-color: var(--accent);
  box-shadow: var(--sh-cta), var(--hi);
}
.ob-card b { display: block; font-size: 16.5px; font-weight: 720; margin-bottom: 5px; letter-spacing: -0.02em; }
.ob-card span { display: block; font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
.ob-resume { margin: 0 0 28px; font-size: 15px; line-height: 1.75; color: var(--text-2); }
.ob-resume b { color: var(--text); font-weight: 620; }
.ob-go {
  width: 100%;
  min-height: 52px;
  background: var(--grad-vin);
  color: var(--sur-vin);
  border: 0;
  border-radius: 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  cursor: pointer;
  box-shadow: var(--sh-cta);
}
.ob-go:active { transform: scale(0.985); }
.ob-note { margin: 16px 0 0; font-size: 12.5px; color: var(--text-3); line-height: 1.6; text-align: center; }

/* ── LE DIAGNOSTIC D'ENTRÉE · les pièces ajoutées le 17 sept 2026 ──────────
   Rien de neuf dans le vocabulaire visuel : on réutilise `.ob-card`, `.ob-go`,
   le rayon de 14-15 px et la même transition. Les éléments ci-dessous sont les
   seuls que l'écran n'avait pas encore. */

/* La barre de progression. Annoncer le coût dès le premier écran, parce qu'un
   tunnel dont on ne voit pas la fin est un tunnel qu'on quitte.

   ⚠️ FIXÉE EN HAUT DE L'ÉCRAN, pas posée dans le flux. Défaut vu à la capture
   375 px : `.onboard` centre son contenu verticalement, donc une barre placée
   dans `.ob-inner` descend et remonte selon la hauteur de la question — elle
   sautait de 90 px à 337 px entre deux écrans. Une jauge de progression qui
   bouge ne se lit plus comme une jauge. Fixée, elle est le seul repère
   immobile du tunnel, ce qui est exactement son travail. */
.ob-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 2px;
  background: var(--line);
  overflow: hidden;
}
.ob-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.4s var(--ease-out);
}
/* La barre étant sortie du flux, l'inner récupère la marge qu'elle occupait,
   pour que la première ligne ne colle pas au bord haut sur un écran long. */
.ob-inner { padding-top: 52px; }

/* Le retour. Discret mais RÉEL : sans lui, une erreur de tap au 2e écran
   oblige à tout recommencer, et c'est là qu'on perd quelqu'un. */
.ob-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: -10px 0 4px -6px;
  padding: 0 6px;
  background: none;
  border: 0;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
}
.ob-back::before { content: "←"; font-size: 13px; letter-spacing: 0; }
.ob-back:hover { color: var(--text-2); }

/* ⚠️ LA SORTIE. Ni grisée ni cachée : même hauteur de cible que le bouton
   principal, seul son POIDS visuel diffère. Un « plus tard » qu'il faut
   chercher n'est pas une sortie, c'est un piège — et c'est exactement ce qui
   ferait abandonner à l'inscription, le risque numéro un de cet écran. */
.ob-skip {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  background: none;
  border: 0;
  color: var(--text-3);
  font-family: inherit;
  font-size: 13.5px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ob-skip:hover { color: var(--text-2); }

/* Le bloc qui dit ce que l'étage 2 rapporte, AVANT de le demander. */
.ob-porte {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 0 18px;
  background: linear-gradient(168deg, var(--s1-hi) 0%, var(--s1) 62%);
}
.ob-porte p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--text-2); }
.ob-porte b { color: var(--text); font-weight: 650; }

/* L'échelle 1-5. Cinq crans et pas dix : à 375 px, dix cibles font 34 px
   chacune — sous le minimum de 44 px. `aspect-ratio: 1` les garde carrées,
   donc toujours au-dessus du seuil. */
.ob-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ob-sc {
  aspect-ratio: 1;
  min-height: 52px;
  display: grid;
  place-items: center;
  background: linear-gradient(168deg, var(--s1-hi) 0%, var(--s1) 62%);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--sh-1), var(--hi);
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.18s var(--ease), border-color 0.2s ease, color 0.2s ease;
}
.ob-sc:active { transform: scale(0.96); }
.ob-sc.sel { border-color: var(--accent); color: var(--text); box-shadow: var(--sh-cta), var(--hi); }
.ob-poles {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-3);
}
.ob-poles span:last-child { text-align: right; }
/* L'écho : ce que le chiffre choisi change, dit tout de suite. Rendre de la
   valeur à chaque palier — un questionnaire muet lasse avant la fin. */
.ob-echo { min-height: 42px; margin: 22px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }

/* Le champ libre de l'incident critique — le seul endroit où on demande
   d'écrire, donc le seul qui doit respirer. */
.ob-ta {
  width: 100%;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px 16px;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  resize: vertical;
}
.ob-ta::placeholder { color: var(--text-3); }
.ob-ta:focus { outline: none; border-color: var(--line-2); }
.ob-compte {
  margin: 8px 0 18px;
  text-align: right;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--text-3);
}

/* Le rappel dans le profil, quand l'étage 2 n'a jamais été rempli — y compris
   pour une session d'avant le 17 sept, qui n'a jamais pu le voir. */
.ob-rappel {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 14px;
  background: linear-gradient(168deg, var(--s1-hi) 0%, var(--s1) 62%);
}
.ob-rappel h4 { margin: 0 0 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; color: var(--accent); }
.ob-rappel p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.65; color: var(--text-2); }

/* ══════════════════════ FIL DE COACHING ══════════════════════ */
.thread {
  flex: 1;
  overflow-y: auto;
  padding: 26px 20px 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 620px;
  width: 100%;
  margin: 0 auto;
}
.msg-user {
  align-self: flex-end;
  max-width: 78%;
  background: var(--grad-vin);
  color: var(--sur-vin);
  padding: 12px 16px;
  border-radius: 16px;
  border-bottom-right-radius: 5px;
  font-size: 14.5px;
  line-height: 1.5;
  font-weight: 520;
  box-shadow: 0 4px 16px var(--accent-dim);
}
.kael {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: rise 0.5s var(--ease-out) both;
}
.lecture { font-size: 15.5px; line-height: 1.65; color: var(--text); }

.signaux { display: flex; flex-direction: column; gap: 10px; }
.sig {
  background: linear-gradient(168deg, var(--s1-hi), var(--s1));
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--sh-1), var(--hi);
  padding: 15px 17px;
}
.sig .what {
  font-size: 14.5px;
  font-weight: 620;
  margin: 0 0 10px;
  padding-left: 12px;
  border-left: 3px solid var(--creme);
}
.sig .row { font-size: 13px; line-height: 1.6; color: var(--text-2); margin-bottom: 6px; }
.sig .row:last-child { margin-bottom: 0; }
.sig .row b {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.11em;
  color: var(--text-3);
  font-weight: 500;
  margin-right: 7px;
}

.options { display: flex; flex-direction: column; gap: 10px; }
.opt {
  background: linear-gradient(168deg, var(--s1-hi), var(--s1));
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: var(--sh-1), var(--hi);
  padding: 16px 18px;
  transition: border-color 0.2s ease, transform 0.18s var(--ease);
}
.opt:hover { border-color: var(--line-2); }
.opt-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.badge {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  padding: 5px 10px;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--text-2);
}
/* Les trois registres sont un DEGRADE de risque, la couleur doit le dire. */
.badge.sure { border-color: var(--line-2); color: var(--text-2); }
.badge.juste {
  border-color: var(--creme-ligne);
  color: var(--creme);
  background: var(--creme-dim);
}
.badge.audacieuse {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}
.opt-texte { font-size: 15.5px; line-height: 1.6; margin: 0 0 11px; }
.opt-meta {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.opt-meta span b {
  color: var(--text-3);
  font-weight: 500;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  margin-right: 6px;
}
.copy {
  margin-left: auto;
  background: var(--s2);
  border: 1px solid var(--line);
  color: var(--text-2);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 10px;
  min-height: 32px;
  padding: 0 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.copy:hover { border-color: var(--accent); color: var(--accent); }

/* le principe = la vraie valeur du produit, il doit se voir */
.principe {
  background: var(--creme-dim);
  border: 1px solid var(--creme-ligne);
  border-left: 3px solid var(--creme);
  border-radius: 0 13px 13px 0;
  padding: 15px 17px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text);
}
.principe b {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--creme);
  margin-bottom: 6px;
  font-weight: 500;
}
.preuve {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-left: 8px;
}

/* ═══════ LE PONT AVEC « APPRENDRE » — lecture de la personne + à observer ═══════
   Ajouté le 2026-09-17. Volontairement construit sur les mêmes primitives que
   .sig (même fond, même .row, même pastille de preuve) : c'est une LECTURE de
   plus, pas un nouveau composant. Un filet crème sur le bord gauche la
   distingue des signaux sans introduire de couleur qui n'existe pas ailleurs. */
.pp {
  background: linear-gradient(168deg, var(--s1-hi), var(--s1));
  border: 1px solid var(--line);
  border-left: 3px solid var(--creme);
  border-radius: 4px 14px 14px 4px;
  box-shadow: var(--sh-1), var(--hi);
  padding: 15px 17px;
}
.pp-head { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.pp-kicker {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--creme);
  font-weight: 500;
}
/* .preuve n'est qu'un libellé ailleurs ; ici elle porte une des couleurs
   .pv-* qui posent un fond — il lui faut donc la forme de pastille. */
.pp .preuve {
  margin-left: auto;
  padding: 3px 9px;
  border: 1px solid;
  border-radius: 100px;
}
.pp-figure {
  font-size: 16px;
  font-weight: 640;
  margin: 0 0 11px;
  color: var(--text);
}
.pp .row { font-size: 13px; line-height: 1.6; color: var(--text-2); margin-bottom: 6px; }
.pp .row b {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.11em;
  color: var(--text-3);
  font-weight: 500;
  margin-right: 7px;
}
/* le test est ce qui empêche la figure de se lire comme un verdict : il se voit */
.pp .pp-test { color: var(--text); }
.pp .pp-test b { color: var(--creme); }
.pp-note {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-3);
  margin: 11px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.pp-lecon {
  margin-top: 11px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--creme);
  background: var(--creme-dim);
  border: 1px solid var(--creme-ligne);
  border-radius: 100px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.18s ease;
}
.pp-lecon:hover { background: rgba(233, 247, 252, 0.14); }

.aobs {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px 17px;
}
.aobs > b {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--text-3);
  font-weight: 500;
  margin-bottom: 10px;
}
.aobs ul { margin: 0; padding-left: 17px; }
.aobs li {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-2);
  margin-bottom: 7px;
}
.aobs li::marker { color: var(--creme); }
.aobs li:last-child { margin-bottom: 0; }

/* ══════════════════════ DÉBRIEF ══════════════════════ */
.debrief {
  align-self: stretch;
  position: relative;
  overflow: hidden;
  background: linear-gradient(168deg, var(--s1-hi), var(--s1));
  border: 1px solid var(--line);
  border-left: 3px solid var(--creme);
  border-radius: 16px;
  box-shadow: var(--sh-2), var(--hi);
  padding: 20px;
  margin-bottom: 14px;
  animation: rise 0.5s var(--ease-out) both;
}
.debrief .dtitle {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--creme);
  margin-bottom: 11px;
}
.debrief .dsit {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-2);
  border-left: 1px solid var(--s3);
  padding-left: 13px;
  margin-bottom: 17px;
}
.debrief .dq { font-size: 15.5px; font-weight: 640; margin-bottom: 12px; }
.dopts { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.dopt {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  /* cible tactile ≥44px (Apple HIG / WCAG 2.5.5) — c'est LE tap du produit */
  min-height: 44px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 100px;
  background: var(--s2);
  border: 1px solid var(--line);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.18s ease;
}
.dopt:hover { border-color: var(--line-2); color: var(--text); }
.dopt.sel {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}
/* « pas osé » n'est pas un échec à cacher — c'est le signal le plus utile */
.dopt.pasose.sel {
  border-color: var(--warn);
  color: var(--warn);
  background: var(--creme-dim);
}
.dstep { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.dnote {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 15px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  outline: none;
  resize: none;
  margin-top: 4px;
}
.dnote::placeholder { color: var(--text-3); }
.dnote:focus { border-color: var(--line-2); }
.drow { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.dsend {
  background: var(--grad-vin);
  border: none;
  color: var(--sur-vin);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  min-height: 44px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  border-radius: 100px;
  cursor: pointer;
  box-shadow: var(--sh-cta);
}
.dsend:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.dskip {
  background: none;
  border: none;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 10.5px;
  cursor: pointer;
  margin-left: auto;
  min-height: 44px;
  padding: 0 8px;
}
.dskip:hover { color: var(--text-2); }

.dreply .block { margin-bottom: 14px; }
.dreply .block b {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--text-3);
  margin-bottom: 6px;
  font-weight: 500;
}
.dreply .pas {
  border-left: 3px solid var(--accent);
  padding-left: 14px;
}
.dreply .pas b { color: var(--accent); }
.dreply .pattern {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 15px 17px;
  font-size: 14px;
  line-height: 1.6;
}

/* ══════════════════════ SIMULATION ══════════════════════ */
.simwrap {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--bg);
  flex-direction: column;
}
.simwrap.open { display: flex; animation: viewIn 0.32s var(--ease-out) both; }
.simhead {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(20, 17, 16, 0.85);
  backdrop-filter: blur(14px);
  flex-shrink: 0;
}
.simtag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid var(--accent-dim);
  border-radius: 100px;
  padding: 5px 11px;
  white-space: nowrap;
}
.simwho {
  font-size: 14px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.simcount {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  white-space: nowrap;
}
.simclose {
  background: none;
  border: none;
  color: var(--text-2);
  font-size: 18px;
  cursor: pointer;
  min-height: 44px;
  min-width: 40px;
  border-radius: 10px;
}
.simclose:hover { color: var(--text); background: var(--s2); }
.simbody { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }

.setupinner { max-width: 540px; width: 100%; margin: 0 auto; padding: 34px 20px 50px; }
.setupinner h2 {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 0 0 11px;
}
.setuplede { color: var(--text-2); font-size: 14.5px; line-height: 1.65; margin: 0 0 26px; }
.setuplede b { color: var(--text); }
.setupinner label {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--text-3);
  margin: 20px 0 8px;
}
.setupinner input,
.setupinner textarea {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 15px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.5;
  outline: none;
  resize: none;
  transition: border-color 0.2s ease;
}
.setupinner input:focus,
.setupinner textarea:focus { border-color: var(--accent); }
.setupinner ::placeholder { color: var(--text-3); }
.setuprow { display: flex; gap: 26px; flex-wrap: wrap; }
.pills { display: flex; gap: 7px; }
.pill {
  font-family: var(--mono);
  font-size: 11px;
  min-height: 44px;
  padding: 0 15px;
  border-radius: 100px;
  background: var(--s2);
  border: 1px solid var(--line);
  color: var(--text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: all 0.18s ease;
}
.pill.sel { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.simgo {
  width: 100%;
  margin-top: 30px;
  min-height: 52px;
  background: var(--grad-vin);
  border: none;
  color: var(--sur-vin);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: var(--sh-cta);
}
.simgo:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.simerr { color: var(--bad); font-size: 13.5px; margin-top: 12px; min-height: 18px; }

.simthread {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 620px;
  width: 100%;
  margin: 0 auto;
}
.sm { max-width: 76%; padding: 11px 15px; border-radius: 17px; font-size: 14.5px; line-height: 1.5; }
.sm.moi {
  align-self: flex-end;
  background: var(--grad-vin);
  color: var(--sur-vin);
  font-weight: 520;
  border-bottom-right-radius: 5px;
  box-shadow: 0 4px 14px var(--accent-dim);
}
.sm.elle {
  align-self: flex-start;
  background: linear-gradient(168deg, var(--s1-hi), var(--s1));
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
  box-shadow: var(--sh-1);
  animation: rise 0.35s var(--ease-out) both;
}
.sm.fin {
  align-self: center;
  background: none;
  border: 1px solid var(--line);
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  max-width: none;
}
/* les trois points d'attente — pendant qu'elle "tape" sa reponse */
.typing { display: flex; gap: 4px; padding: 2px 0; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); animation: tp 1.3s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes tp { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.simcomposer {
  border-top: 1px solid var(--line);
  padding: 13px 20px 16px;
  flex-shrink: 0;
  background: rgba(20, 17, 16, 0.88);
  backdrop-filter: blur(14px);
}
.simcomposer-inner {
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 9px;
}
.simcomposer textarea {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 13px 17px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.5;
  outline: none;
  resize: none;
  max-height: 130px;
}
.simcomposer textarea::placeholder { color: var(--text-3); }
.simend {
  display: block;
  max-width: 620px;
  margin: 11px auto 0;
  width: 100%;
  min-height: 44px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.simend:hover { border-color: var(--creme); color: var(--creme); }

.revealinner { max-width: 620px; width: 100%; margin: 0 auto; padding: 32px 20px 60px; }
.revealinner h2 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 0 0 20px;
}
.rblock { margin-bottom: 16px; }
.rblock b {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--text-3);
  margin-bottom: 6px;
  font-weight: 500;
}
.rblock.pas { border-left: 3px solid var(--accent); padding-left: 14px; }
.rblock.pas b { color: var(--accent); }
.rsep {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--creme);
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin: 32px 0 16px;
}
.rturn {
  background: linear-gradient(168deg, var(--s1-hi), var(--s1));
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--sh-1), var(--hi);
  padding: 15px 17px;
  margin-bottom: 10px;
}
.rturn .l { font-size: 13.5px; margin: 0 0 5px; color: var(--text-2); }
.rturn .l b {
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  margin-right: 7px;
  font-weight: 500;
}
/* ⚠️ L'italique a sauté le 2026-09-17, en même temps que les guillemets dans
   app.js : italique + « » = une citation, donc une pensée rapportée mot pour
   mot. Ce bloc porte une LECTURE, pas une citation — il se compose donc comme
   les autres blocs d'analyse de l'écran (`.rblock`), avec son étiquette mono. */
.rturn .pensee {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--text);
}
.rturn .pensee b {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--text-3);
  margin-bottom: 5px;
  font-weight: 500;
}
/* Le test qui tranche : même bloc, un cran moins appuyé que la lecture. */
.rturn .pensee.trancher {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 0;
  color: var(--text-2);
}
.rturn .att {
  float: right;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 4px 9px;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--text-3);
  font-style: normal;
}
.att.OUVERTE { color: var(--ok); border-color: rgba(95, 168, 148, 0.35); }
.att.REFROIDIE { color: var(--warn); border-color: var(--creme-ligne); }
.att.FERMEE { color: var(--bad); border-color: var(--accent-dim); }

/* ══════════════════════ ÉTATS & SAISIE ══════════════════════ */
.waiting {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--accent);
  animation: breathe 1.6s ease-in-out infinite;
}
.error {
  font-size: 13.5px;
  color: var(--bad);
  background: var(--accent-dim);
  border: 1px solid var(--accent-dim);
  border-radius: 12px;
  padding: 12px 15px;
}

.composer {
  border-top: 1px solid var(--line);
  background: rgba(20, 17, 16, 0.88);
  backdrop-filter: blur(14px);
  padding: 14px 20px calc(18px + env(safe-area-inset-bottom));
  flex-shrink: 0;
}
.composer-inner {
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 9px;
}
textarea {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 13px 18px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.5;
  outline: none;
  resize: none;
  max-height: 160px;
  transition: border-color 0.2s ease;
}
textarea:focus { border-color: var(--accent); }
textarea::placeholder { color: var(--text-3); }

.send {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--grad-vin);
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: var(--sh-cta);
  transition: transform 0.15s var(--ease), opacity 0.2s ease;
}
.send:active { transform: scale(0.9); }
.send:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }
.send svg { width: 17px; height: 17px; }
.send svg path { fill: var(--sur-vin); }

.hint {
  max-width: 620px;
  margin: 9px auto 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  color: var(--text-3);
  display: flex;
  justify-content: space-between;
}

@media (max-width: 480px) {
  .vinner { padding-left: 16px; padding-right: 16px; }
  .vhead h1 { font-size: 26px; }
  .tab span { font-size: 8.5px; }
  .dv-ligne { font-size: 17px; padding: 17px 18px 17px 21px; }
  .thread { padding: 20px 16px 24px; }
  .composer { padding-left: 16px; padding-right: 16px; }
  .kpis { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SYSTÈME D'INTERACTION — 26 août 2026
   ═══════════════════════════════════════════════════════════════════════════

   CE QUI CLOCHAIT AVANT (constat de Bryan, vérifié dans le code) :
   les états existaient mais étaient IMPERCEPTIBLES. `scale(0.985)` = 1,5 % de
   réduction ; une bordure de survol qui passe de #372f2c à #473c38. Présent
   dans le CSS, invisible à l'écran. C'est pire que rien : un bouton qui ne
   répond pas visuellement se lit comme un bouton cassé.

   CE QUI REMPLACE — le standard réel, pas du CSS improvisé par composant :

   · COUCHE D'ÉTAT (Material Design 3, m3.material.io/foundations/interaction/
     states/state-layers) : un voile de la couleur « on-surface » posé sur
     l'élément — 8 % au survol, 10-12 % à la pression. Un seul état à la fois.
   · RIPPLE partant du POINT DE CONTACT réel (spec MD3 : « a high-emphasis
     ripple effect emanates from the point of contact »).
   · ÉCHELLE PERCEPTIBLE : 0,97 et non 0,985.
   · HAPTIQUE : 12 ms — la fenêtre 10-20 ms recommandée par Android Developers
     pour un « clear haptic » de type clic de touche.
   · ANNEAU DE FOCUS au clavier (:focus-visible), qui manquait entièrement.

   Le système est appliqué UNIFORMÉMENT via une liste de sélecteurs unique,
   pas rajouté à la main composant par composant — c'est ce qui évite le
   « CSS tout croche à gauche et à droite ».
   ═══════════════════════════════════════════════════════════════════════════ */

.cd-go, .card-act, .scene, .drill-row, .seg-b, .tab, .ob-card, .dv-done,
.dopt, .dsend, .dskip, .pill, .simgo, .simend, .copy, .set-b, .send,
.pushback, .simclose, .ob-go, .wk-d {
  position: relative;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

/* Le contenu passe AU-DESSUS de la couche d'état (qui est un enfant
   positionné, donc peint par-dessus le contenu en flux sans cette règle). */
[data-armed] > *:not(.sl) {
  position: relative;
  z-index: 1;
}

/* ---- la couche d'état ---- */
/* L'onglet n'a pas de rayon : sans encastrement, sa couche d'état dessine
   un rectangle dur d'un bord à l'autre au lieu d'une surbrillance. */
.tab > .sl { inset: 5px 7px; border-radius: 13px; }

.sl {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.sl::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  transition: opacity 0.15s ease;
}
/* MD3 : 8 % au survol, 10-12 % à la pression. Un seul état à la fois. */
@media (hover: hover) {
  [data-armed]:hover > .sl::before { opacity: 0.08; }
}
[data-armed]:active > .sl::before { opacity: 0.13; }

/* Les surfaces déjà claires (boutons pleins) ont besoin d'un voile SOMBRE :
   du blanc sur du corail ne se voit presque pas. */
.cd-go:not(.done) > .sl::before,
.dv-done > .sl::before,
.ob-go > .sl::before,
.simgo > .sl::before,
.dsend > .sl::before,
.send > .sl::before,
.wk-d.fait > .sl::before {
  background: #000;
}
@media (hover: hover) {
  .cd-go:not(.done):hover > .sl::before,
  .dv-done:hover > .sl::before,
  .ob-go:hover > .sl::before,
  .simgo:hover > .sl::before,
  .dsend:hover > .sl::before,
  .send:hover > .sl::before { opacity: 0.1; }
}
.cd-go:not(.done):active > .sl::before,
.dv-done:active > .sl::before,
.ob-go:active > .sl::before,
.simgo:active > .sl::before,
.dsend:active > .sl::before,
.send:active > .sl::before { opacity: 0.17; }

/* ---- le ripple, depuis le point de contact ---- */
.rp {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  opacity: 0.26;
  transform: scale(0);
  pointer-events: none;
  animation: rp 0.58s var(--ease-out) forwards;
}
.cd-go:not(.done) .rp, .dv-done .rp, .ob-go .rp,
.simgo .rp, .dsend .rp, .send .rp { background: #000; opacity: 0.2; }
@keyframes rp {
  to { transform: scale(1); opacity: 0; }
}

/* ---- l'échelle : perceptible, pas symbolique ---- */
[data-armed] {
  transition:
    transform 0.13s var(--ease-out),
    box-shadow 0.25s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}
[data-armed]:active { transform: scale(0.97); }
/* Les grandes cartes bougent moins en proportion — 0,97 sur 350px de large
   suffit largement, 0,94 donnerait l'impression qu'elles s'effondrent. */
.card-act:active, .scene:active, .ob-card:active, .drill-row:active {
  transform: scale(0.985);
}
/* Les petites cibles ont besoin de plus pour que le geste se voie. */
.dopt:active, .pill:active, .copy:active, .set-b:active,
.wk-d:active, .simclose:active, .pushback:active { transform: scale(0.93); }

/* ---- le survol qui SOULÈVE (le motif standard des cartes cliquables) ---- */
@media (hover: hover) {
  .card-act:hover, .scene:hover, .drill-row:hover, .ob-card:hover {
    transform: translateY(-2px);
    border-color: var(--line-2);
    box-shadow: var(--sh-2), var(--hi);
  }
  .card-act:active, .scene:active, .drill-row:active, .ob-card:active {
    transform: translateY(0) scale(0.985);
  }
  .cd-go:not(.done):hover, .dv-done:hover, .ob-go:hover, .simgo:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  }
  .cd-go:not(.done):active, .dv-done:active, .ob-go:active, .simgo:active {
    transform: translateY(0) scale(0.97);
  }
  .tab:hover svg { transform: translateY(-2px); }
}

/* ---- le focus clavier : il manquait entièrement ---- */
[data-armed]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
textarea:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ---- le champ de saisie répond aussi ---- */
.composer-inner:focus-within textarea,
.simcomposer-inner:focus-within textarea {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* ---- confirmation de copie ---- */
.copy.ok {
  border-color: var(--ok);
  color: var(--ok);
  background: rgba(95, 168, 148, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ICONOGRAPHIE — direction tranchée le 26 août 2026
   ═══════════════════════════════════════════════════════════════════════════
   Icônes + typographie, ZÉRO illustration (choix de Bryan, motif Linear /
   Things / Arc). Sur un sujet chargé de honte, une illustration cartoon
   infantiliserait le problème.

   Une seule grammaire : tracé, 1.75 d'épaisseur, bouts arrondis, currentColor.
   Les définitions vivent dans icons.js — un seul endroit.
   ═══════════════════════════════════════════════════════════════════════════ */

.cd-ic svg, .dr-ic svg, .pl-ic svg, .ob-ic svg, .dv-ic svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* -- la pastille qui porte l'icône -- */
.cd-ic, .dr-ic, .pl-ic, .ob-ic {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--bg-2);
}

/* drill du jour — grande pastille, couleur de l'accent */
.cd-ic {
  width: 38px;
  height: 38px;
  color: var(--accent);
  border-color: var(--accent-dim);
  background: var(--accent-dim);
}
.cd-ic svg { width: 21px; height: 21px; }

/* liste des drills */
.dr-ic {
  width: 34px;
  height: 34px;
  color: var(--text-2);
}
.dr-ic svg { width: 19px; height: 19px; }
.drill-row:hover .dr-ic { color: var(--accent); border-color: var(--accent-dim); }

/* piliers — la pastille prend la couleur du pilier */
.pl-ic {
  width: 34px;
  height: 34px;
  color: var(--pc);
  border-color: color-mix(in srgb, var(--pc) 30%, transparent);
  background: color-mix(in srgb, var(--pc) 11%, transparent);
}
.pl-ic svg { width: 19px; height: 19px; }
/* Repli pour les navigateurs sans color-mix : la pastille reste lisible. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .pl-ic { border-color: var(--line); background: var(--bg-2); }
}

/* inscription — l'icône passe au-dessus du titre */
.ob-card { display: block; }
.ob-ic {
  width: 40px;
  height: 40px;
  color: var(--text-2);
  margin-bottom: 13px;
}
.ob-ic svg { width: 25px; height: 25px; }
.ob-card.sel .ob-ic {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: var(--accent-dim);
}

/* lecteur de drill — l'icône dans l'en-tête */
.dv-ic {
  width: 20px;
  height: 20px;
  color: var(--accent);
  flex-shrink: 0;
}

/* -- l'état vide : le tracé qui n'a pas encore battu -- */
/* La marque de Kael EST un électrocardiogramme. Un profil sans données,
   c'est littéralement une ligne plate — l'image dit la chose exacte
   plutôt que de décorer. */
.profempty {
  text-align: center;
  padding: 34px 22px;
}
.profempty b {
  display: block;
  color: var(--text);
  font-size: 16px;
  font-weight: 680;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.vide-svg {
  width: 100%;
  max-width: 240px;
  height: auto;
  color: var(--text-3);
  margin: 0 auto 22px;
  display: block;
}
/* Le battement se dessine une fois — la promesse de ce qui va arriver. */
.vide-beat {
  color: var(--accent);
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
  animation: traceBeat 1.6s var(--ease-out) 0.35s forwards;
}
@keyframes traceBeat {
  to { stroke-dashoffset: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LECTEUR DE LEÇON — 26 août 2026
   ═══════════════════════════════════════════════════════════════════════════
   56 leçons ancrées dans le corpus Influence-Knowledge (357 transcripts) + Greene/Ramani.

   Le parti pris visuel central : L'ÉTIQUETTE DE PREUVE EST AFFICHÉE EN HAUT,
   avant même le titre. C'est le différenciateur du produit — une app qui ne
   dit jamais « cette idée célèbre est fragile » n'est pas un coach, c'est un
   perroquet. Donc on ne la cache pas en bas de page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* -- la lecon dans la liste du pilier -- */
.pl-lecons { display: grid; gap: 7px; }
.pl-l {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  min-height: 44px;
  padding: 9px 12px 9px 11px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text-2);
  font-family: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.pl-l::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--pc);
  flex-shrink: 0;
}
.pl-l::after { display: none; } /* plus de fil : ce sont des boutons, pas des étapes */
.pl-l:hover { border-color: var(--pc); color: var(--text); }
.pl-t { flex: 1; }
.pl-p {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.09em;
  padding: 3px 7px;
  border-radius: 100px;
  border: 1px solid;
}
.pl-n {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-3);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 4px 10px;
}

/* -- les quatre niveaux de preuve, une seule palette partout -- */
.pv-VALIDE { color: var(--ok); border-color: rgba(95, 168, 148, 0.35); background: rgba(95, 168, 148, 0.35); }
.pv-PLAUSIBLE { color: var(--creme); border-color: var(--creme-ligne); background: var(--creme-dim); }
.pv-CONTESTE { color: var(--bad); border-color: var(--accent-dim); background: var(--accent-dim); }
.pv-FOLKLORE { color: var(--text-3); border-color: var(--line); background: transparent; }

/* -- chez qui la figure se rencontre, dans les exemples du livre --
   Meme composant que les pastilles de preuve (.pl-p / .lc-preuve) : on
   reutilise la forme, on change juste la famille de couleur.
   Les TROIS valeurs partagent exactement le meme traitement, et c'est
   DELIBERE : « feminin » n'est ni mieux ni moins bien que « masculin », donc
   rien ici ne doit ressembler a une echelle. Les pastilles de preuve, elles,
   portent un jugement (VALIDE vert / CONTESTE rouge) et gardent leur palette.
   Un cran plus clair que .pv-FOLKLORE (--text-2 / --line-2) pour rester
   lisible a cote d'elle sans jamais lui voler la vedette. */
.inc-FEMININ,
.inc-MASCULIN,
.inc-LES_DEUX {
  color: var(--text-2);
  border-color: var(--line-2);
  background: transparent;
}
/* Une leçon qui porte les DEUX pastilles passe sur deux rangs : le titre
   garde toute la largeur, les pastilles descendent dessous, alignees sur le
   texte (19px = la pastille ronde + son gap). A 375px, sur une seule ligne,
   « FIGURE MASCULINE » + « FOLKLORE » laissaient moins de la moitie de la
   largeur au titre, qui tombait sur quatre lignes. */
.pl-l.has-inc { flex-wrap: wrap; row-gap: 8px; }
/* 19px = la pastille ronde (8px) + le gap (11px). On retire quelques pixels
   de plus : a l'exact, le sous-pixel fait casser la ligne et la pastille
   ronde se retrouve seule au-dessus du titre. */
.pl-l.has-inc .pl-t { flex: 1 1 calc(100% - 26px); }
.pl-l.has-inc .pl-inc { margin-left: 19px; }
/* Les deux pastilles du lecteur se suivent sur la meme ligne. */
.lc-preuve + .lc-preuve { margin-left: 6px; }
/* La phrase sous le titre — c'est elle qui porte la regle « reconnaitre,
   jamais incarner ». Discrete, jamais en gras : c'est une note de lecture. */
.lc-inc-note {
  margin: -6px 0 18px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-3);
  border-left: 1px solid var(--line);
  padding-left: 11px;
}

/* -- le pont lecon → entrainement -- */
.lc-train {
  display: block;
  width: 100%;
  margin: 0 0 26px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--creme);
  color: #0b0b0c;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lc-train .lt-t { display: flex; align-items: center; gap: 8px; }
.lc-train .lt-t svg { width: 14px; height: 14px; flex-shrink: 0; }
.lc-train .lt-s {
  display: block;
  margin-top: 5px;
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0;
  font-weight: 400;
  opacity: 0.68;
}
.lc-train:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); }
/* Verrouillé : le bouton reste là, il perd juste sa surface pleine — il ne
   se lit plus comme l'action principale, mais il se lit encore. */
.lc-train.locked {
  background: transparent;
  color: var(--text-2);
  border: 1px dashed var(--line-2);
}
.lc-train.locked:hover { transform: none; box-shadow: none; border-color: var(--line-2); }

/* -- le lecteur -- */
#leconview .pushtitle { color: var(--pcc, var(--text)); }
.lc-ic {
  width: 20px;
  height: 20px;
  color: var(--pc, var(--accent));
  flex-shrink: 0;
}
.lc-ic svg { width: 100%; height: 100%; display: block; }

.lc-body {
  position: relative;
  flex: 1;
  overflow-y: auto;
  padding: 28px 22px 60px;
  max-width: 620px;
  width: 100%;
  margin: 0 auto;
}
.lc-preuve {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  padding: 5px 11px;
  border-radius: 100px;
  border: 1px solid;
  margin-bottom: 15px;
}
.lc-body h2 {
  margin: 0 0 14px;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 1.14;
}
/* L'accroche parle DANS les mots de l'usager — elle mérite un traitement
   distinct du corps de texte, sinon elle se noie. */
.lc-accroche {
  margin: 0 0 26px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  border-left: 3px solid var(--pc, var(--accent));
  padding-left: 15px;
  font-style: italic;
}

.lc-principe {
  background: linear-gradient(168deg, var(--s1-hi), var(--s1));
  border: 1px solid var(--line);
  border-left: 3px solid var(--pc, var(--accent));
  border-radius: 0 15px 15px 0;
  box-shadow: var(--sh-1), var(--hi);
  padding: 19px 21px;
  margin-bottom: 26px;
}
.lc-principe b {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--pcc, var(--accent));
  margin-bottom: 9px;
  font-weight: 500;
}
.lc-principe p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.55;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.lc-bloc { margin-bottom: 26px; }
.lc-bloc b {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--text-3);
  margin-bottom: 10px;
  font-weight: 500;
}
.lc-bloc p { margin: 0; font-size: 14.5px; line-height: 1.72; color: var(--text-2); }
#lc-mecanisme p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.72; color: var(--text-2); }
#lc-mecanisme p:last-child { margin-bottom: 0; }
.lc-exemples { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.lc-exemples li {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
}
.lc-exemples li b { display: block; color: var(--text); font-size: 13.5px; margin-bottom: 3px; }
.lc-bloc ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
  counter-reset: pratique;
  display: grid;
  gap: 11px;
}
.lc-bloc li {
  counter-increment: pratique;
  position: relative;
  padding-left: 34px;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--text);
}
.lc-bloc li::before {
  content: counter(pratique);
  position: absolute;
  left: 0;
  top: 0;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--pcc, var(--accent));
  border: 1px solid var(--pc, var(--accent));
  background: var(--bg-2);
}

.lc-erreur {
  background: var(--accent-dim);
  border: 1px solid var(--accent-dim);
  border-radius: 14px;
  padding: 17px 19px;
  margin-bottom: 26px;
}
.lc-erreur b {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--bad);
  margin-bottom: 9px;
  font-weight: 500;
}
.lc-erreur p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--text-2); }

/* La source est le contrat de confiance du produit : elle reste lisible,
   jamais reléguée en note de bas de page grisée. */
.lc-source {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.lc-source b {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--text-3);
  margin-bottom: 9px;
  font-weight: 500;
}
.lc-source p { margin: 0; font-size: 13px; line-height: 1.68; color: var(--text-3); }

@media (max-width: 480px) {
  .lc-body { padding-left: 17px; padding-right: 17px; }
  .lc-body h2 { font-size: 24px; }
  .lc-accroche { font-size: 15px; }
}

/* ══════════════════════ ÉTATS VERROUILLÉS ══════════════════════
   Une fonctionnalité barrée reste VISIBLE — c'est ce qui donne envie de
   monter de plan. Pas de nouveau langage visuel : on retire l'accent, on
   pose le cadenas, on garde la forme. Rien ne clignote, rien ne grise à
   moitié : un élément à 40 % d'opacité se lit comme « cassé », pas comme
   « pas encore à toi ».
   ⚠️ Aucun de ces états ne nomme un modèle ni un coût (règle produit). */

/* -- la carte « Une situation, là, maintenant ? » -- */
.card-act.locked .ca-arr {
  background: transparent;
  border-color: var(--line-2);
  color: var(--text-3);
}
.card-act.locked .ca-arr svg { width: 15px; height: 15px; }
.card-act.locked:hover .ca-arr { transform: none; }

/* -- une leçon barrée dans la liste d'un pilier -- */
.pl-l.locked .pl-t { color: var(--text-3); }
.pl-lock {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  color: var(--text-3);
}
.pl-lock svg { width: 100%; height: 100%; display: block; }

/* -- le bandeau au-dessus des piliers -- */
.lecons-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px dashed var(--line-2);
  border-radius: 13px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-2);
}
.lecons-note svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; color: var(--text-3); }
.lecons-note b { color: var(--text); font-weight: 620; }

/* -- une scène d'entraînement barrée -- */
.scene.locked .sc-dot { background: var(--text-3); box-shadow: none; }
.scene.locked::before { background: var(--text-3); opacity: 0.4; }
.scene.locked b { color: var(--text-2); }
.sc-lock {
  margin-left: auto;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 4px;
  color: var(--text-3);
}
.sc-lock svg { width: 100%; height: 100%; display: block; }

/* -- l'écran verrouillé d'une leçon, à la place du contenu -- */
.lc-verrou {
  margin: 4px 0 26px;
  padding: 26px 22px;
  border: 1px dashed var(--line-2);
  border-radius: 15px;
  text-align: center;
}
.lv-ic { display: block; width: 26px; height: 26px; margin: 0 auto 14px; color: var(--text-3); }
.lv-ic svg { width: 100%; height: 100%; display: block; }
.lc-verrou b {
  display: block;
  font-size: 15.5px;
  font-weight: 660;
  letter-spacing: -0.012em;
  margin-bottom: 8px;
}
.lc-verrou p {
  margin: 0 auto 20px;
  max-width: 34ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-2);
}
.lv-go {
  padding: 12px 22px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--creme);
  color: #0b0b0c;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lv-go:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); }

/* ══════════════════════ COACH — L'ONGLET ══════════════════════
   15 septembre 2026. Le coaching était une carte enterrée sous le drill
   d'« Aujourd'hui ». C'est la fonction la plus chère de l'app et le client
   ne la voyait pas — elle a maintenant son onglet, au centre de la barre.

   L'écran suit la grammaire d'une MESSAGERIE, pas d'un formulaire : le fil
   occupe toute la hauteur et défile seul, le champ de saisie reste collé
   au-dessus de la barre d'onglets. C'est la seule vue qui ne défile pas
   dans `.views` — d'où ce mode, posé par goView(). */
.views.coachmode {
  display: flex;
  overflow: hidden;
  /* La barre d'onglets est `position: fixed` : sans cette réserve, le champ
     de saisie passerait DERRIÈRE elle. Même calcul que `.vinner`, sans le
     +56 d'air (une messagerie colle son champ au bas, c'est sa forme).
     Le +1 est le `border-top` de la barre : `--tabh` mesure 62 px mais la
     boîte en fait 63 — sans lui le champ mordait d'un pixel sur le liseré. */
  padding-bottom: calc(var(--tabh) + env(safe-area-inset-bottom) + 1px);
}
/* ⚠️ `:not([hidden])` obligatoire : sans lui, ce `display: flex` bat la règle
   `[hidden] { display: none }` du navigateur et l'onglet resterait à l'écran
   par-dessus tous les autres. */
#v-coach:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* `min-height: 0` annule le `min-height: 100%` de `.view` — sans lui le fil
     ne peut pas rétrécir et c'est le conteneur qui défile. */
  min-height: 0;
}
/* ⚠️ JAMAIS d'animation sur `#v-coach` LUI-MÊME. Les autres onglets animent
   les enfants de `.vinner`, à l'intérieur d'une boîte qui défile — un
   `translateY` y est sans conséquence. Ici la vue PORTE le champ de saisie :
   une vue décalée de 12 px, c'est un champ qui passe sous la barre d'onglets,
   et une animation figée par un onglet mis en arrière-plan laisse ce décalage
   en place pour de bon (vu en test). On anime donc le seul contenu d'accueil,
   qui vit dans le fil et ne peut rien déplacer. */
#v-coach.anim .coach-intro { animation: viewIn 0.42s var(--ease-out) both; }
/* La réserve est déjà prise par `.views.coachmode` — la reprendre ici
   ajouterait une seconde fois la zone sûre de l'iPhone sous le champ. */
#v-coach .composer { padding-bottom: 14px; }

.coach-intro { display: flex; flex-direction: column; gap: 22px; }
.ci-head h1 {
  margin: 0 0 6px;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

/* -- les amorces : elles REMPLISSENT le champ, elles n'envoient jamais -- */
.amorces { display: flex; flex-wrap: wrap; gap: 8px; }
.am-t {
  width: 100%;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--text-3);
  margin-bottom: 6px;
}
.am {
  position: relative;
  overflow: hidden;
  /* 40 px de haut : au-dessus de la cible tactile confortable une fois la
     ligne et le padding comptés — vérifié à 375 px. */
  min-height: 40px;
  padding: 10px 15px;
  border-radius: 100px;
  border: 1px solid var(--line-2);
  background: var(--s1);
  color: var(--text-2);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.am:hover { border-color: var(--accent); color: var(--text); }
.am:active { transform: scale(0.97); }

/* -- l'état verrouillé : le principal levier vers VIP, donc il argumente -- */
.coach-verrou {
  background: linear-gradient(168deg, var(--s1-hi) 0%, var(--s1) 62%);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--sh-1), var(--hi);
  padding: 22px 20px;
}
.cv-ic { display: block; width: 24px; height: 24px; color: var(--text-3); margin-bottom: 13px; }
.cv-ic svg { width: 100%; height: 100%; display: block; }
.coach-verrou > b {
  display: block;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 9px;
}
.coach-verrou p {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-2);
}
.coach-verrou p b { color: var(--text); font-weight: 620; }
.coach-verrou ul {
  margin: 0;
  padding: 16px 0 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-top: 1px solid var(--line);
}
.coach-verrou li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}
.coach-verrou li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--creme);
}
.cv-go {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: 20px;
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--creme);
  color: #0b0b0c;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cv-go:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }

/* -- verrouillé, le champ de saisie cède sa place à la porte de sortie :
      un textarea désactivé ne convertit personne, il frustre. -- */
.coach-bar {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 56px;
  flex-shrink: 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: rgba(20, 17, 16, 0.88);
  backdrop-filter: blur(14px);
  padding: 16px 20px;
  color: var(--creme);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cb-ic { width: 15px; height: 15px; display: block; flex-shrink: 0; }
.cb-ic svg { width: 100%; height: 100%; display: block; }
.coach-bar:active { background: rgba(28, 25, 24, 0.94); }

/* ══════════════════════ PAR OÙ JE COMMENCE ══════════════════════
   59 leçons en 9 piliers, sans porte d'entrée. Ce bloc précède la
   navigation par pilier — il ne la remplace pas. La teinte est celle du
   pilier de la leçon proposée : le lien entre les deux est visuel avant
   d'être textuel. */
.depart {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: 18px;
  padding: 16px 17px 15px;
  border-radius: 15px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--pc, var(--creme));
  background: linear-gradient(168deg, var(--s1-hi) 0%, var(--s1) 62%);
  box-shadow: var(--sh-1), var(--hi);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.depart:hover { border-color: var(--line-2); }
.depart:active { transform: scale(0.99); }
.depart.done { cursor: default; }
.dep-kicker {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--pcc, var(--creme));
  margin-bottom: 11px;
}
.dep-ligne { display: flex; align-items: center; gap: 12px; }
.dep-ic { width: 21px; height: 21px; flex-shrink: 0; color: var(--pcc, var(--creme)); }
.dep-ic svg { width: 100%; height: 100%; display: block; }
.dep-txt { flex: 1; min-width: 0; display: block; }
.dep-txt b {
  display: block;
  font-size: 15px;
  font-weight: 640;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin-bottom: 4px;
}
.dep-txt > span {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--text-3);
}
.dep-arr {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  color: var(--text-2);
  font-size: 14px;
  transition: transform 0.2s var(--ease);
}
.depart:hover .dep-arr { transform: translateX(3px); }
.dep-bar {
  display: block;
  height: 3px;
  margin-top: 15px;
  border-radius: 100px;
  background: var(--line);
  overflow: hidden;
}
.dep-bar i {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: var(--pcc, var(--creme));
  transition: width 0.5s var(--ease);
}
.dep-prog {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--text-3);
}
.dep-titre {
  display: block;
  font-size: 15px;
  font-weight: 640;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}
.dep-sous { display: block; font-size: 13px; line-height: 1.6; color: var(--text-2); }
.depart.done .dep-go {
  display: inline-block;
  margin-top: 14px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--creme-ligne);
  background: var(--creme-dim);
  color: var(--creme);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  font-weight: 600;
  cursor: pointer;
}

/* ══════════════════════ GARANTIE 30 JOURS ══════════════════════
   « Fais le travail pendant 30 jours. Si tu ne vois aucune différence,
   remboursé au complet. » Les trois compteurs sont visibles en tout temps :
   une condition qu'on ne peut pas vérifier soi-même n'est pas une garantie,
   c'est un piège. L'app répond à « as-tu fait le travail ? », pas l'usager. */
.garantie {
  margin-bottom: 22px;
  padding: 19px 18px 17px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(168deg, var(--s1-hi) 0%, var(--s1) 62%);
  box-shadow: var(--sh-1), var(--hi);
}
.ga-top { margin-bottom: 18px; }
.ga-kick {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--creme);
  margin-bottom: 8px;
}
.ga-top p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.ga-top p b { color: var(--text); font-weight: 620; }

.ga-l + .ga-l { margin-top: 15px; }
.ga-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.ga-h b { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.ga-h > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.ga-ck { width: 12px; height: 12px; display: block; }
.ga-l.ok .ga-h > span { color: var(--ok); }
.ga-bar { height: 4px; border-radius: 100px; background: var(--line); overflow: hidden; }
.ga-bar i {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: var(--creme);
  transition: width 0.6s var(--ease);
}
.ga-l.ok .ga-bar i { background: var(--ok); }
.ga-note {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-3);
}
.ga-pied {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-2);
}
.ga-pied b { color: var(--text); font-weight: 620; }
.ga-pied.acquise { color: var(--ok); }
.ga-pied.acquise b { color: var(--ok); }
.ga-pied .ga-ck { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; }

/* ══════════════════════ PROFONDEUR DU DOSSIER ══════════════════════
   Même langage visuel que la garantie juste au-dessus (mêmes tokens, même
   rayon, même `.ga-kick`) : ce sont deux blocs de compteurs vérifiables, ils
   ne doivent pas se lire comme deux composants différents.

   Les crans sont VOLONTAIREMENT discrets et non animés — c'est un état de
   fait, pas une récompense. Un jeu de progression ferait exactement ce que
   l'offre refuse (« le gars doit sortir, pas collectionner des points »). */
.dossier {
  margin-bottom: 22px;
  padding: 18px 18px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(168deg, var(--s1-hi) 0%, var(--s1) 62%);
  box-shadow: var(--sh-1), var(--hi);
}
.do-top h5 {
  margin: 0 0 5px;
  font-size: 17px;
  font-weight: 680;
  letter-spacing: -0.015em;
}
.do-top p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-2); }

.do-crans { display: flex; gap: 5px; margin: 15px 0 16px; }
.do-crans i {
  flex: 1;
  height: 3px;
  border-radius: 100px;
  background: var(--line);
}
.do-crans i.on { background: var(--creme); }

.do-chiffres { display: flex; gap: 10px; }
.do-c {
  flex: 1;
  padding: 10px 8px;
  border-radius: 11px;
  background: var(--creme-dim);
  text-align: center;
}
.do-c b {
  display: block;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.do-c span {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  color: var(--text-3);
}

.do-next {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.do-next > span {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--text-3);
  margin-bottom: 7px;
}
.do-next p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--text-2); }
.do-next p b { color: var(--text); font-weight: 620; }

/* ══════════════════════ AVIS D'ESSAI ══════════════════════
   Obligation légale (Loi 10, 12 sept 2026) : date de fin + prix applicable
   ensuite. Encadré plein, jamais une note en bas de page. */
.essai {
  margin-bottom: 18px;
  padding: 15px 17px;
  border-radius: 14px;
  border: 1px solid var(--creme-ligne);
  background: var(--creme-dim);
}
.es-kick {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--creme);
  margin-bottom: 8px;
}
.essai p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--text-2); }
.essai p b { color: var(--text); font-weight: 620; }

/* ══════════════════════ CINQ ONGLETS À 375 px ══════════════════════
   375 / 5 = 75 px par onglet. La cible tactile reste largement au-dessus des
   44 px recommandés (75 x 62 px), mais les libellés, eux, deviennent serrés :
   « Aujourd'hui » et « T'entraîner » font 11 caractères. On coupe le
   remplissage horizontal et on empêche le retour à la ligne — un libellé sur
   deux lignes casserait l'alignement vertical de toute la barre. */
.tab {
  padding: 0 2px;
  min-width: 0;
}
.tab span {
  white-space: nowrap;
  max-width: 100%;
}
@media (max-width: 400px) {
  /* Le seul palier où les libellés touchent vraiment les bords. */
  .tab { gap: 4px; }
  .tab svg { width: 20px; height: 20px; }
  .tab span { font-size: 8px; letter-spacing: 0.02em; }
}

@media (max-width: 480px) {
  .thread { padding-left: 16px; padding-right: 16px; }
  .ci-head h1 { font-size: 24px; }
  .coach-verrou { padding: 19px 17px; }
  .garantie { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 480px) {
  .hint-clavier { display: none; }
  .hint { justify-content: flex-end; }
}


/* Les conditions completes, atteignables depuis l'ecran des plans. La garantie
   y est decrite en resume ; le texte qui fait foi est sur /conditions. */
.bill-notes .bill-legal { margin-top: 3px; font-size: 12px; }
.bill-notes .bill-legal a { color: var(--text-2); text-decoration: underline; }
.bill-notes .bill-legal a:hover { color: var(--accent); }

/* ══════════════════════════════════════════════════════════════════════
   iOS — EMPECHER LE ZOOM AUTOMATIQUE AU FOCUS D'UN CHAMP
   ══════════════════════════════════════════════════════════════════════
   Safari sur iPhone zoome tout seul sur n'importe quel champ de saisie
   dont la police fait MOINS de 16px — et il ne dezoome pas au retour.
   L'usager se retrouve coince en zoom et doit pincer pour revenir
   (Bryan, 18 sept : « ca fait un zoom bizarre, je dois dezoomer »).
   Nos champs etaient a 14.5px et 12.5px : tous sous le seuil.

   16px est le SEUL correctif fiable. L'alternative (user-scalable=no dans
   la balise viewport) desactive aussi le pincement legitime — c'est un
   probleme d'accessibilite, et les Safari recents l'ignorent de toute facon.

   ⚠️ Cible `pointer: coarse` uniquement : le rendu sur ordinateur ne bouge
   pas d'un pixel, seul le tactile passe a 16px. Ne JAMAIS redescendre ces
   valeurs sous 16px, le bug revient immediatement.
   `touch-action: manipulation` retire en prime le delai de 300ms et le
   zoom au double-tap sur les champs. */
@media (pointer: coarse) {
  textarea,
  .setupinner input,
  .setupinner textarea,
  .simcomposer textarea,
  .code-redeem input,
  .ob-ta,
  textarea.ob-ta,
  #ob-situation,
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="tel"],
  input[type="number"],
  input[type="password"] {
    font-size: 16px;
    touch-action: manipulation;
  }
}