@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* Palette et polices reprises du site TALKIA, pour que le prototype
   ressemble au produit et non a une maquette a part. */
:root{
  --stage:#070709;
  --ink:#0a0a0c;
  --yellow:#ffd400;
  --yellow-soft:#fff08a;
  --navy:#15243c;
  --navy-2:#0f1a2d;
  --navy-3:#1b2c48;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.16);
  --text:#f3f4f7;
  --muted:#8b94a5;
  --muted-2:#5f6779;
  --ok:#35d08a;
  --warn:#ffb020;
  --miss:#ff6b5e;
  --disp:'Sora',system-ui,sans-serif;
  --ui:'Inter',system-ui,sans-serif;
}

*{box-sizing:border-box}
/* L attribut hidden doit primer : une regle display:flex ou display:block
   sur la meme classe l emporterait sinon, et l element resterait visible. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--stage);
  color:var(--text);
  font-family:var(--ui);
  font-size:15px;
  line-height:1.55;
  min-height:100vh;
}

/* ---------- Entête ---------- */
.entete{
  display:flex;align-items:baseline;gap:14px;
  padding:20px 24px;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
  background:rgba(7,7,9,.85);backdrop-filter:blur(14px);
}
/* Le logo est un bouton depuis le 30 septembre 2026 : il ramene a
   l'accueil. Il n'en a pas l'air, et c'est voulu — d'ou la remise a zero
   des styles de bouton du navigateur. */
.marque{
  font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:.02em;
  background:none;border:none;padding:0;margin:0;color:var(--text);
  cursor:pointer;line-height:inherit;
}
.marque:hover em{color:var(--yellow-soft)}
.marque:focus-visible{outline:2px solid var(--yellow);outline-offset:4px;border-radius:4px}
.marque em{font-style:normal;color:var(--yellow);transition:color .15s}
.signature{color:var(--muted);font-size:13px}

.cadre{max-width:760px;margin:0 auto;padding:34px 22px 90px}

/* ---------- Écrans ---------- */
.ecran{display:none;animation:entree .35s ease}
.ecran.actif{display:block}
@keyframes entree{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Fil d'Ariane, repris du deck ---------- */
.fil{
  font-family:var(--disp);font-size:11px;font-weight:700;
  letter-spacing:.14em;color:var(--muted-2);
  margin-bottom:26px;
}
.fil .actif{color:var(--yellow)}

h1{
  font-family:var(--disp);font-weight:700;
  font-size:1.85rem;line-height:1.2;letter-spacing:-.015em;
  margin:0 0 12px;
}
h1 em{font-style:normal;color:var(--yellow)}
h3{font-family:var(--disp);font-weight:700;font-size:1.15rem;margin:0 0 6px}

.chapo{color:var(--muted);font-size:1rem;margin:0 0 26px;max-width:56ch}
.finesse{color:var(--muted-2);font-size:12.5px;margin-top:14px;line-height:1.5}

.bandeau{
  display:inline-block;
  font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.12em;
  background:var(--yellow);color:#111;
  padding:7px 14px;border-radius:7px;margin-bottom:26px;
}

.titre-col{
  font-family:var(--disp);font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);
  margin-bottom:10px;
}

.deux-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:30px}
.bloc-seul{margin-bottom:30px;max-width:60ch}
.bloc-texte{
  background:var(--navy-2);border:1px solid var(--line);
  border-radius:14px;padding:20px;
}
.bloc-texte p{margin:0 0 10px;font-size:14px;color:var(--muted)}
.bloc-texte p b{color:var(--text)}
.liste-tirets{margin:0;padding:0;list-style:none}
.liste-tirets li{
  font-size:14px;color:var(--muted);padding:5px 0 5px 16px;position:relative;
}
.liste-tirets li::before{content:'—';position:absolute;left:0;color:var(--yellow)}

/* ---------- Boutons ---------- */
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.cta{
  font-family:var(--disp);font-weight:700;font-size:14px;
  background:var(--yellow);color:#111;
  border:none;border-radius:10px;padding:13px 22px;cursor:pointer;
  transition:filter .15s ease,transform .1s ease;
}
.cta:hover{filter:brightness(1.08)}
.cta:active{transform:scale(.985)}
/* « LE COUPER » N'APPARAIT QUE PENDANT QU'IL PARLE — 6 octobre 2026.
   Gislain : « le bouton on est ok que c'est pour couper la parole si le
   persona parle ? » Il etait affiche en permanence, donc l'ecran proposait de
   couper quelqu'un qui ne disait rien.
   ET CA SERT L'IMMERSION, qui est tout l'argument du premium : rien a l'ecran
   ne rappelle le logiciel quand c'est a elle de parler. */
/* LE FORMULAIRE DE PAIEMENT — 6 octobre 2026. Il s'ouvre DANS la modale du
   produit : « je ne veux pas quil sorte de talkia ». Les champs sont ceux de
   Stripe, dans leurs propres cadres — on leur donne la place et le theme, on
   ne touche pas a leur interieur. */
/* ══════════════════════════════════════════════════════════════════════
   LA BASCULE DES DEUX QUALITES — 6 octobre 2026.
   « une petit onglet un peu comme mensuel ou annuel pour passer en
   immersion. avec un bulle qui explique et qui donne envie. »
   La forme est celle des pages de prix, parce que c'est celle qu'on sait
   lire sans l'apprendre.
   ══════════════════════════════════════════════════════════════════════ */
.bascule-zone{text-align:center}
.bascule{
  display:inline-flex;gap:3px;padding:3px;margin:0 auto 6px;
  background:var(--navy-2);border:1px solid var(--line);border-radius:999px;
}
.bascule-onglet{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 18px;border:0;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--muted);font:inherit;font-weight:600;font-size:13.5px;
  transition:background .15s ease,color .15s ease;
}
.bascule-onglet:hover{color:var(--text)}
.bascule-onglet.actif{background:var(--yellow);color:#111}
/* Le « ? » explique, il ne bascule pas : son style doit le dire. */
.bascule-bulle-appel{
  display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;
  font-size:11px;font-weight:700;background:rgba(255,255,255,.14);color:inherit;
}
.bascule-onglet.actif .bascule-bulle-appel{background:rgba(0,0,0,.18)}

.bascule-bulle{
  max-width:560px;margin:0 auto 18px;padding:14px 16px;
  background:rgba(245,197,24,.06);border:1px solid rgba(245,197,24,.28);
  border-radius:14px;font-size:13px;line-height:1.6;color:var(--text);
}
.bascule-bulle b{color:var(--yellow)}
.bascule-bulle-note{
  display:block;margin-top:8px;padding-top:8px;
  border-top:1px solid rgba(245,197,24,.18);
  color:var(--muted);font-size:12px;
}
/* Le prix change avec la bascule : on le fait remarquer une fois. */
body.offre-immersion .choix-prix,
body.offre-immersion .niveau-prix{color:var(--yellow)}

/* LE PRIX DE LA FORMATION, sur chaque niveau. Il se calcule — c'est le seul
   article de TALKIA dans ce cas — donc il doit se voir autant que le nombre
   de seances : c'est ce qui rend le sur-mesure credible. */
.niveau-prix{
  font-family:var(--disp);font-weight:700;font-size:20px;
  color:var(--text);margin:8px 0 2px;
}

.pay-carte{margin:14px 0 4px}
#payAdresse{margin:10px 0 0}
.pay-essai{color:var(--yellow)}

#btnInterrompre{display:none}
body.ia-parle #btnInterrompre{display:inline-block}
.cta.fantome{background:transparent;color:var(--muted);border:1px solid var(--line-strong)}
.cta.fantome:hover{color:var(--text);border-color:var(--muted)}

/* ---------- Progression du diagnostic ---------- */
.progression{margin-bottom:26px}
.prog-texte{
  font-family:var(--disp);font-size:11px;font-weight:700;
  letter-spacing:.12em;color:var(--muted-2);margin-bottom:8px;
}
.prog-piste{height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.prog-piste i{display:block;height:100%;background:var(--yellow);width:0;transition:width .5s ease}

.question{
  font-family:var(--disp);font-weight:600;font-size:1.35rem;line-height:1.35;
  padding:26px 0 8px;
}

/* ---------- Scène d'écoute ---------- */
.scene{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:30px 0 20px;
}

/* LA TRANSCRIPTION NE S'AFFICHE PLUS PENDANT LA SEANCE.

   Gislain, apres le premier essai avec le visage : « je viens de me rendre
   compte que la transcription n'a aucun interet, sachant qu'elle fait bouger
   l'ecran ». C'est juste, et c'est meme contradictoire avec l'exercice :
   pendant une interview on ecoute et on parle, on ne lit pas. Un texte qui
   defile a cote d'un visage qui parle, c'est l'attention coupee en deux.

   On la CACHE, on ne la supprime pas : le texte continue d'etre ecrit dans le
   DOM — le bilan et le coaching le relisent — mais un sous-arbre en
   display:none ne declenche aucun calcul de mise en page, donc plus aucun
   soubresaut a chaque mot prononce.

   Ce qui reste a l'ecran : le visage, l'etat (« il parle… », « a vous »), et
   l'apercu de ce QU'ELLE dit — le seul retour qui lui serve, parce qu'il lui
   confirme que le micro l'entend. */
#ecran-epreuve .transcript{display:none}

/* Le chronometre du tour. Volontairement discret : c'est un outil de reglage,
   pas une information pour la personne qui s'entraine. A retirer quand la
   fluidite sera reglee. */
.temps-tour{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;color:var(--muted-2);letter-spacing:.02em;
  min-height:1em;text-align:center;
}
.temps-tour b{color:var(--yellow);font-weight:600}

/* Le visage du persona. Absent tant qu'aucun flux n'est branche : la scene
   reste alors exactement celle d'avant, avec sa seule onde. */
.visage{
  width:min(420px,100%);aspect-ratio:1/1;border-radius:18px;overflow:hidden;
  background:var(--navy-2);border:1px solid var(--line-strong);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.visage video{width:100%;height:100%;object-fit:cover;display:block}
/* TALKIA PREMIUM — la salle arrive dans LE MEME <video> que le standard.
   On rejoint l'appel au lieu de l'afficher dans une iframe (voir premium.js :
   une iframe ne peut pas etre interrompue), donc on recoit les pistes et on
   les branche nous-memes. La personne ne doit pas voir la difference de
   plomberie entre les deux qualites, seulement celle de presence.
   LE CADRE EST PLUS LARGE EN PREMIUM, parce que la camera y est allumee : on
   est en visio, pas devant un portrait. */
body.avec-premium .visage{width:min(620px,100%);aspect-ratio:16/10}
#sonPremium{display:none}
/* Quand il parle, le cadre s'allume : c'est le meme signal que l'onde,
   et il faut qu'on le voie sans regarder les levres. */
body.ia-parle .visage{border-color:var(--yellow)}
/* L'onde ne sert plus a rien des qu'on a un visage : deux signaux pour la
   meme chose, c'est un de trop. */
body.avec-visage .onde{display:none}

.onde{display:flex;align-items:center;gap:5px;height:34px}
.onde i{
  width:4px;height:6px;border-radius:2px;background:var(--muted-2);
  transition:background .2s ease;
}
body.ecoute .onde i{background:var(--yellow);animation:vibre 1s ease-in-out infinite}
body.ia-parle .onde i{background:var(--yellow-soft);animation:vibre .7s ease-in-out infinite}
.onde i:nth-child(1){animation-delay:0s}
.onde i:nth-child(2){animation-delay:.12s}
.onde i:nth-child(3){animation-delay:.24s}
.onde i:nth-child(4){animation-delay:.08s}
.onde i:nth-child(5){animation-delay:.2s}
@keyframes vibre{0%,100%{height:6px}50%{height:26px}}

.etat{color:var(--muted);font-size:13.5px;min-height:20px;text-align:center}
.apercu{
  color:var(--muted-2);font-size:14px;font-style:italic;
  text-align:center;max-width:52ch;min-height:20px;
}

/* ---------- Transcription ---------- */
.transcript{
  display:flex;flex-direction:column;gap:14px;
  max-height:340px;overflow-y:auto;padding:4px 2px;
}
.transcript.petit{max-height:180px;opacity:.7}
.ligne{max-width:88%}
.ligne.moi{align-self:flex-end;text-align:right}
.ligne .qui{
  font-family:var(--disp);font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:3px;
}
.ligne.moi .qui{color:var(--yellow)}
.ligne .texte{font-size:15px;line-height:1.55}

/* ---------- Persona ---------- */
.temps{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:22px;border-bottom:1px solid var(--line);
}
.temps-num{
  font-family:var(--disp);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  background:var(--yellow);color:#111;padding:4px 9px;border-radius:5px;
}
.temps-nom{font-family:var(--disp);font-weight:700;font-size:1.05rem}
.temps-dit{color:var(--muted-2);font-size:13px}

.persona-tete{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.avatar{
  width:46px;height:46px;border-radius:50%;
  background:linear-gradient(140deg,var(--navy-3),var(--navy-2));
  border:1px solid var(--line-strong);position:relative;flex-shrink:0;
}
.pastille-live{
  position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;
  background:var(--ok);border:2.5px solid var(--stage);
}
.persona-role{color:var(--muted-2);font-size:12px}
.persona-nom{font-family:var(--disp);font-weight:700;font-size:1.05rem}

/* ---------- Cartes profil & programme ---------- */
.etiquette{
  font-family:var(--disp);font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--yellow);margin-bottom:8px;
}
.carte-profil,.carte-programme,.carte-objectif{
  background:linear-gradient(140deg,var(--navy),var(--navy-2));
  border:1px solid var(--line);border-radius:16px;
  padding:22px;margin-bottom:16px;
}
.carte-programme{border-left:3px solid var(--yellow)}
.portrait{color:var(--muted);margin:8px 0 18px}
.carte-programme p,.carte-objectif p{color:var(--muted);margin:6px 0 0;font-size:14px}
.prog-detail{
  display:flex;gap:20px;flex-wrap:wrap;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted);
}
.prog-detail b{color:var(--yellow);font-family:var(--disp)}

.colonnes{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.liste{margin:0;padding:0;list-style:none}
.liste li{font-size:13.5px;color:var(--muted);padding:5px 0 5px 16px;position:relative;line-height:1.45}
.liste li::before{position:absolute;left:0;font-weight:700}
.liste.ok li::before{content:'+';color:var(--ok)}
.liste.warn li::before{content:'—';color:var(--warn)}

.autres-objectifs{margin-top:22px}
.puces{display:flex;flex-wrap:wrap;gap:7px}
.puce{
  font-family:var(--ui);font-size:12.5px;
  background:var(--navy-2);color:var(--muted);
  border:1px solid var(--line);border-radius:20px;
  padding:7px 14px;cursor:pointer;transition:.15s;
}
.puce:hover{color:var(--text);border-color:var(--line-strong)}
.puce.active{background:var(--yellow);color:#111;border-color:var(--yellow);font-weight:600}

/* ---------- Mesures réelles ---------- */
/* UN SEUL BLOC, QUATRE COLONNES SEPAREES PAR UN CHEVEU — et non quatre
   cartes posees cote a cote. Gislain, le 1er octobre 2026 : « je n'aime pas
   le graphique. » C'etaient quatre gros mots colores de hauteurs differentes,
   qui criaient plus fort que le portrait juste au-dessus.
   Le filet se fait avec gap:1px sur un fond de ligne : ca tient quel que
   soit le nombre de colonnes, donc ca survit au passage en deux colonnes. */
.mesures{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;margin:18px 0 4px;
}
.mesure{background:var(--navy-2);padding:14px 15px;text-align:left}
/* Le <b> et les <span> d'une mesure sont habilles plus bas, par .mes-mot,
   .mes-quoi et .mes-note. Les deux regles generiques qui etaient ici — un
   <b> jaune en corps 1,5 rem — gagnaient sur elles par specificite et
   rendaient tout changement invisible. Ne pas les remettre. */
.mesure b,.mesure span{display:block}

/* ---------- Champs de contexte ---------- */
.champs{display:flex;flex-direction:column;gap:13px}
.champ{display:flex;flex-direction:column;gap:6px}
.champ span{
  font-family:var(--disp);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);
}
.champ input{
  background:var(--navy-2);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;
  color:var(--text);font-family:var(--ui);font-size:14.5px;
}
.champ input:focus{outline:none;border-color:var(--yellow)}
.champ input::placeholder{color:var(--muted-2)}

/* ---------- La porte du compte, à la fin du diagnostic ---------- */
.porte{
  border-top:1px solid var(--line);margin-top:20px;padding-top:20px;
}
.porte-tete{margin-bottom:16px}
.porte-tete h3{
  font-family:var(--disp);font-size:1.18rem;font-weight:700;
  margin:5px 0 7px;line-height:1.3;
}
.porte-tete p{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0;max-width:56ch}
.porte .champs{max-width:420px}
.porte .actions{margin-top:18px}
.porte .finesse{margin-top:12px}

/* Les conditions du mot de passe, cochées pendant la frappe.
   Elles sont là AVANT la faute, jamais après : la porte tombe au bout de dix
   minutes de diagnostic, et un refus au dernier mètre coûte la personne. */
.regles-mdp{
  list-style:none;margin:9px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:6px 14px;
}
.regles-mdp li{
  position:relative;padding-left:17px;
  font-size:12px;color:var(--muted-2);
  transition:color .15s ease;
}
.regles-mdp li::before{
  content:'\25cb';position:absolute;left:0;top:0;
  font-size:11px;color:var(--muted-2);
}
.regles-mdp li.tenue{color:var(--ok)}
.regles-mdp li.tenue::before{content:'\2713';color:var(--ok);font-weight:700}

/* L'œil : relire ce qu'on a tapé. Avec une arobase et huit chiffres,
   taper à l'aveugle produit des fautes qu'on ne peut pas expliquer. */
.champ-micro.champ-oeil{
  width:auto;padding:0 12px;white-space:nowrap;
  font-family:var(--disp);font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);
}
.champ-micro.champ-oeil:hover{color:var(--text)}
/* Les champs remplis d'après le diagnostic : on signale la reprise plutôt
   que de la laisser passer pour une saisie qu'elle aurait oubliée. */
.champs-repris{
  font-size:13px;color:var(--muted);margin:0 0 4px;
  padding-left:10px;border-left:2px solid var(--yellow);
}
.champ-repris input{border-color:rgba(255,212,0,.45)}

/* ---------- Bilan : la grille du coach ---------- */
.verdict{
  background:linear-gradient(120deg,var(--navy),var(--navy-2));
  border:1px solid var(--line);border-left:3px solid var(--yellow);
  border-radius:14px;padding:16px 18px;margin-bottom:16px;
}
.verdict .vq{
  font-family:var(--disp);font-weight:600;font-size:15.5px;
  line-height:1.45;display:block;
}
.verdict .vqn{font-size:12px;color:var(--yellow);font-weight:700;margin-top:8px;display:block}

.blocs{margin-top:22px}
.bloc-tete{
  width:100%;text-align:left;background:var(--navy-2);
  border:1px solid var(--line);border-radius:12px;
  padding:15px 17px;margin-top:10px;cursor:pointer;
  color:var(--text);font-family:var(--ui);transition:border-color .15s;
}
.bloc-tete:hover{border-color:var(--line-strong)}
.bloc-haut{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.bloc-nom{font-family:var(--disp);font-weight:700;font-size:15px}
.bloc-note{font-family:var(--disp);font-weight:700;font-size:16px;color:var(--yellow)}
.bloc-note span{color:var(--muted-2);font-size:12px;font-weight:400}
.barre{display:flex;gap:2px;height:4px;margin:11px 0 9px;border-radius:2px;overflow:hidden}
.seg.ok{background:var(--ok)}
.seg.warn{background:var(--warn)}
.seg.miss{background:var(--miss)}
.bloc-indice{font-size:11.5px;color:var(--muted-2)}

.panneau{display:none;padding:4px 2px 6px}
.panneau.ouvert{display:block;animation:entree .25s ease}
.cat{margin:14px 0}
.cat-nom{
  font-family:var(--disp);font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);
  margin:16px 0 8px;
}
.critere{
  border-left:2px solid var(--line-strong);
  padding:2px 0 2px 14px;margin-bottom:14px;
}
.critere.na{opacity:.6}
.crit-haut{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:5px}
.crit-nom{font-family:var(--disp);font-weight:600;font-size:14px}
.pastille{
  font-size:10.5px;font-weight:700;letter-spacing:.05em;
  padding:3px 9px;border-radius:20px;text-transform:uppercase;
}
.pastille.ok{background:rgba(53,208,138,.15);color:var(--ok)}
.pastille.warn{background:rgba(255,176,32,.15);color:var(--warn)}
.pastille.miss{background:rgba(255,107,94,.15);color:var(--miss)}
.pastille.na{background:rgba(255,255,255,.07);color:var(--muted-2)}
.crit-note{font-size:14px;color:var(--muted);line-height:1.5}
.prop{
  background:rgba(0,0,0,.3);border-radius:9px;
  padding:11px 13px;margin-top:9px;
}
.prop-qui{
  display:block;font-size:11px;color:var(--muted-2);
  margin-bottom:5px;font-style:italic;
}
.prop-dit{display:block;font-size:14.5px;color:var(--yellow-soft);line-height:1.5}

.conseil{
  background:linear-gradient(120deg,var(--navy),var(--navy-2));
  border:1px solid var(--line);border-left:3px solid var(--yellow);
  border-radius:12px;padding:16px 18px;margin-top:22px;
  font-size:14.5px;line-height:1.55;color:var(--muted);
}
.conseil b{color:var(--text);font-family:var(--disp)}

/* ---------- États ---------- */
.chargement{display:flex;align-items:center;gap:10px;color:var(--muted);padding:30px 0}
.tourniquet{
  display:inline-block;width:14px;height:14px;
  border:2px solid var(--line-strong);border-top-color:var(--yellow);
  border-radius:50%;animation:tourne .7s linear infinite;
}
@keyframes tourne{to{transform:rotate(360deg)}}

.erreur{color:var(--miss);font-size:14px}
.alerte{
  display:none;position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  max-width:560px;width:calc(100% - 44px);
  background:#2b1614;border:1px solid rgba(255,107,94,.4);
  color:#ffd9d4;border-radius:11px;padding:13px 17px;
  font-size:13.5px;line-height:1.5;z-index:50;
}
.alerte.actif{display:block}

/* ---------- Programme modulable ---------- */
.modules{margin:20px 0 4px;display:flex;flex-direction:column;gap:22px}

/* ---------- Le programme : deux groupes, jamais mélangés ---------- */
.prog-bloc{border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.2);overflow:hidden}
.prog-bloc.sugg{border-style:dashed;border-color:var(--line-strong);background:transparent}

.prog-tete{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:16px 18px;border-bottom:1px solid var(--line);
}
.prog-bloc.sugg .prog-tete{border-bottom-style:dashed}
.prog-tete h4{
  font-family:var(--disp);font-size:14px;font-weight:700;margin:0 0 3px;
  letter-spacing:.01em;
}
.prog-bloc.sugg .prog-tete h4{color:var(--yellow)}
.prog-tete p{font-size:12.5px;color:var(--muted);margin:0;line-height:1.45;max-width:46ch}
.prog-tarif{text-align:right;white-space:nowrap}
.prog-tarif b{display:block;font-family:var(--disp);font-weight:700;font-size:1.25rem}
.prog-tarif small{display:block;font-size:11px;color:var(--muted-2);margin-top:1px}

/* Le parcours : un ordre, pas une liste. Le filet relie les étapes. */
.parcours{list-style:none;margin:0;padding:6px 18px 16px;position:relative}
.etape{display:flex;gap:14px;padding:11px 0;position:relative}
.etape::before{
  content:'';position:absolute;left:12px;top:32px;bottom:-11px;
  width:1px;background:var(--line);
}
.etape.finale::before{display:none}
.etape-num{
  flex:none;width:25px;height:25px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--disp);font-size:11.5px;font-weight:700;
  background:rgba(255,212,0,.1);color:var(--yellow);
  border:1px solid rgba(255,212,0,.32);
  position:relative;z-index:1;
}
.etape.finale .etape-num{background:var(--yellow);color:#111;border-color:var(--yellow)}
.etape-corps{flex:1;min-width:0;padding-top:2px}
.etape-nom{font-family:var(--disp);font-weight:600;font-size:14px;line-height:1.3}
.etape-pourquoi{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.45}

/* Les suggestions : de la place, pour que rien ne se casse sur trois lignes. */
.ajouts{padding:6px 18px 16px;display:flex;flex-direction:column;gap:10px}
.ajout{
  display:flex;align-items:center;gap:18px;
  padding:13px 0;border-bottom:1px solid var(--line);
  transition:opacity .15s;
}
.ajout:last-child{border-bottom:none;padding-bottom:4px}
.ajout.retire{opacity:.4}
.ajout-corps{flex:1;min-width:0}
.ajout-droite{display:flex;align-items:center;gap:14px;flex:none}
.ajout-tarif{text-align:right;white-space:nowrap}
.ajout-tarif b{display:block;font-family:var(--disp);font-weight:700;font-size:14.5px;color:var(--yellow)}
.ajout-tarif small{display:block;font-size:11px;color:var(--muted-2);margin-top:1px}

.mod-bouton{
  font-family:var(--ui);font-size:12px;
  background:transparent;color:var(--muted);
  border:1px solid var(--line-strong);border-radius:18px;
  padding:6px 14px;cursor:pointer;white-space:nowrap;transition:.15s;
}
.mod-bouton:hover{color:var(--text);border-color:var(--muted)}
.mod-bouton.ajout{background:var(--yellow);color:#111;border-color:var(--yellow);font-weight:600}

/* ---------- L'addition : un total, pas un inventaire ---------- */
.addition{margin-top:18px}
.add-total{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:16px 18px;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,212,0,.07),rgba(255,212,0,.02));
  border:1px solid rgba(255,212,0,.22);
}
.add-quoi b{display:block;font-family:var(--disp);font-weight:700;font-size:15px}
.add-quoi span{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.45}
.add-somme{
  font-family:var(--disp);font-weight:800;font-size:1.75rem;color:var(--yellow);
  white-space:nowrap;letter-spacing:-.01em;
}

@media(max-width:560px){
  .prog-tete{flex-direction:column;gap:10px}
  .prog-tarif{text-align:left}
  .ajout{flex-direction:column;align-items:stretch;gap:12px}
  .ajout-droite{justify-content:space-between}
  .add-total{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ---------- Le discours écrit ---------- */
.doc{
  background:#fff;color:#14161c;
  border-radius:14px;padding:40px 42px;margin-top:8px;
  font-size:14.5px;line-height:1.65;
}
.doc-tete{border-bottom:2px solid #14161c;padding-bottom:18px;margin-bottom:26px}
.doc-marque{font-family:var(--disp);font-weight:800;font-size:15px;letter-spacing:.02em;color:#14161c}
.doc-marque em{font-style:normal;color:#c9a200}
.doc h2{font-family:var(--disp);font-weight:700;font-size:1.5rem;margin:12px 0 6px;line-height:1.25}
.doc-meta{font-size:12.5px;color:#6b7280}
.doc-partie{margin-bottom:26px;break-inside:avoid}
.doc-partie h3{
  font-family:var(--disp);font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:#6b7280;
  margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid #e5e7eb;
}
.doc-source{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#9aa1ad;margin-bottom:4px;
}
.doc-vous p,.doc-propose p{margin:0 0 14px}
.doc-propose{
  background:#fffbe8;border-left:3px solid #c9a200;
  padding:12px 14px;border-radius:0 7px 7px 0;
}
.doc-propose p{margin:0;font-weight:500}
.doc-tient{font-size:13px;color:#6b7280;font-style:italic;margin:0}
.doc-conseil{
  background:#14161c;color:#f3f4f7;border-radius:9px;
  padding:16px 18px;margin-top:30px;break-inside:avoid;
}
.doc-conseil b{color:#ffd400}
.doc-pied{
  margin-top:26px;padding-top:14px;border-top:1px solid #e5e7eb;
  font-size:11.5px;color:#9aa1ad;line-height:1.5;
}

/* ---------- Impression : seul le document sort ---------- */
@media print{
  body{background:#fff}
  .entete,.sans-impression,.alerte{display:none !important}
  .cadre{max-width:none;padding:0}
  .ecran{display:none}
  .ecran.actif{display:block}
  .doc{border-radius:0;padding:0;font-size:11.5pt}
  .doc-conseil{
    background:#fff;color:#14161c;border:1px solid #14161c;
  }
  .doc-conseil b{color:#14161c}

  /* Le PDF est le discours, rien d'autre. Ce qui a servi à choisir — les
     boutons, l'aperçu de l'autre version, les explications — ne s'imprime
     pas : la personne emporte un texte à dire, pas une copie annotée. */
  .doc-texte{border-left:none !important;padding-left:0 !important}
  .doc-texte.retenu-propose{
    background:#fff !important;color:#14161c !important;
    padding-top:0 !important;padding-bottom:0 !important;
  }
  .doc-partie.ajoutee h3{color:#14161c}
  .doc-marqueur{display:none}
  @page{margin:18mm}
}

@media(max-width:620px){
  .deux-cols,.colonnes{grid-template-columns:1fr}
  .mesures{grid-template-columns:repeat(2,1fr)}
  h1{font-size:1.5rem}
}

.prog-etape{
  font-family:var(--disp);font-weight:700;font-size:13px;
  color:var(--yellow);margin-top:9px;
}

.mod-droite{display:flex;align-items:center;gap:11px;flex-shrink:0}
.mod-prix{
  font-family:var(--disp);font-weight:700;font-size:13.5px;
  color:var(--yellow);white-space:nowrap;
}
.module.retire .mod-prix{color:var(--muted-2)}

/* ---------- Chronomètre de séance ---------- */
.chrono{
  margin-left:auto;display:flex;align-items:baseline;gap:6px;
  background:rgba(0,0,0,.3);border:1px solid var(--line);
  border-radius:9px;padding:7px 12px;
}
.chrono-temps{
  font-family:var(--disp);font-weight:700;font-size:16px;
  color:var(--text);font-variant-numeric:tabular-nums;
}
.chrono small{font-size:10.5px;color:var(--muted-2)}
.chrono.bientot{border-color:rgba(255,176,32,.45)}
.chrono.bientot .chrono-temps{color:var(--warn)}
.chrono.fini{border-color:rgba(255,107,94,.45)}
.chrono.fini .chrono-temps{color:var(--miss)}
.chrono-ligne{display:flex;margin-bottom:18px}
.chrono-note{font-size:12.5px;color:var(--warn);min-height:18px;margin-bottom:10px}

.prolonger{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(120deg,var(--navy),var(--navy-2));
  border:1px solid var(--line);border-left:3px solid var(--yellow);
  border-radius:12px;padding:16px 18px;margin-top:16px;
}
.prolonger>div{flex:1;min-width:220px}
.prolonger b{display:block;font-family:var(--disp);font-size:15px;margin-bottom:3px}
.prolonger span{font-size:13px;color:var(--muted);line-height:1.45}

.mod-prix small{display:block;font-weight:400;font-size:10.5px;color:var(--muted-2);margin-top:2px}
.add-ligne.socle b{color:var(--yellow)}

/* ---------- Reprise d'un parcours ---------- */
.reprise{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  background:linear-gradient(140deg,var(--navy),var(--navy-2));
  border:1px solid var(--line);border-left:3px solid var(--yellow);
  border-radius:16px;padding:20px 22px;margin-bottom:28px;
}
.reprise-corps{flex:1;min-width:240px}
.reprise-corps h3{margin:0 0 4px}
.reprise-corps p{margin:0 0 12px;font-size:13.5px;color:var(--muted)}
.reprise-jauge{height:4px;background:rgba(0,0,0,.35);border-radius:2px;overflow:hidden}
.reprise-jauge i{display:block;height:100%;background:var(--yellow);width:0;transition:width .6s ease}
.reprise-compte{font-size:12px;color:var(--muted-2);margin-top:7px}
.reprise-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Écouter son profil ---------- */
.ecouter{
  display:flex;align-items:center;gap:13px;width:100%;
  background:rgba(0,0,0,.28);border:1px solid var(--line-strong);
  border-radius:11px;padding:13px 16px;margin:4px 0 18px;
  color:var(--text);font-family:var(--ui);font-size:14px;
  cursor:pointer;text-align:left;transition:border-color .15s;
}
.ecouter:hover{border-color:var(--yellow)}
.ecouter small{display:block;font-size:12px;color:var(--muted-2);margin-top:2px}
.ecouter-icone{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:34px;height:34px;border-radius:50%;
  background:var(--yellow);color:#111;font-size:13px;
}
.ecouter.parle .ecouter-icone{background:var(--clay,#c1654a);color:#fff}
.ecouter.parle .ecouter-icone::before{content:'❚❚'}
.ecouter.parle .ecouter-icone{font-size:11px}
.ecouter.parle .ecouter-icone{color:transparent}
.ecouter.parle .ecouter-icone::before{color:#fff;position:absolute}

/* ---------- Carte animée partageable ---------- */
.carte-sortie{margin:4px 0 18px}
.carte-apercu{
  width:100%;max-width:340px;border-radius:12px;
  border:1px solid var(--line-strong);display:block;background:#000;
}
.carte-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.carte-actions .cta{text-decoration:none;display:inline-block}

/* ---------- Compte et espace personnel ---------- */
.compte-entete{margin-left:auto;display:flex;align-items:center;gap:12px}
.lien-compte{
  background:transparent;border:1px solid var(--line-strong);
  color:var(--muted);border-radius:8px;padding:7px 14px;
  font-family:var(--ui);font-size:12.5px;cursor:pointer;transition:.15s;
}
.lien-compte:hover{color:var(--text);border-color:var(--muted)}

/* L'avatar de l'en-tete remplace « Mon espace » ET l'adresse : un seul
   objet rond, qui ouvre l'espace. Decision de Gislain, 30 septembre 2026.
   Sans photo, il porte les initiales. */
.avatar-compte{
  width:34px;height:34px;border-radius:50%;overflow:hidden;padding:0;
  display:grid;place-items:center;cursor:pointer;
  background:var(--yellow);color:#101010;border:none;
  font-family:var(--disp);font-weight:800;font-size:12.5px;letter-spacing:.02em;
  transition:.15s;
}
.avatar-compte:hover{filter:brightness(1.08)}
.avatar-compte img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}

.ident-erreur{
  background:#2b1614;border:1px solid rgba(255,107,94,.4);
  color:#ffd9d4;border-radius:9px;padding:11px 14px;font-size:13px;
}

.module.faite{opacity:.55}
.mod-etat.faite{color:var(--ok)}

.progression-bloc{
  background:linear-gradient(140deg,var(--navy),var(--navy-2));
  border:1px solid var(--line);border-radius:14px;padding:20px;margin:14px 0 20px;
}
.prog-ligne{
  display:grid;grid-template-columns:1fr auto 64px;gap:12px;align-items:baseline;
  padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--muted);
}
.prog-ligne:last-of-type{border-bottom:none}
.prog-ligne b{font-family:var(--disp);color:var(--text);font-size:14px}
.delta{text-align:right;font-family:var(--disp);font-weight:700;font-size:13px;color:var(--muted-2)}
.delta.hausse{color:var(--ok)}
.delta.baisse{color:var(--warn)}

.historique{display:flex;flex-direction:column;gap:12px}
.seance{
  background:var(--navy-2);border:1px solid var(--line);
  border-radius:12px;padding:16px 18px;
}
.seance-tete{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.seance-num{font-family:var(--disp);font-weight:700;font-size:14px}
.seance-date{font-size:12px;color:var(--muted-2)}
.seance-verdict{font-size:14px;color:var(--text);margin:0 0 10px;line-height:1.5}
.seance-mesures{font-size:12px;color:var(--muted-2);margin-top:10px}

/* ---------- Échéance, conseils, réglages ---------- */
.echeance{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(140deg,var(--navy),var(--navy-2));
  border:1px solid var(--line);border-left:3px solid var(--yellow);
  border-radius:14px;padding:16px 20px;margin-bottom:18px;
}
.echeance.proche{border-left-color:var(--miss)}
.echeance b{display:block;font-family:var(--disp);font-size:1.15rem}
.echeance.proche b{color:var(--miss)}
.echeance span{font-size:13px;color:var(--muted)}
.echeance-reste{font-size:13px;color:var(--yellow);font-family:var(--disp);font-weight:600;white-space:nowrap}

.casier{display:flex;flex-direction:column;gap:10px}
.conseil-range{
  background:var(--navy-2);border:1px solid var(--line);
  border-left:2px solid var(--yellow);border-radius:10px;padding:13px 16px;
}
.conseil-range p{margin:5px 0 0;font-size:14px;line-height:1.5}
.conseil-num{
  font-family:var(--disp);font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);
}

.reglages{display:flex;flex-direction:column;gap:2px}
.reglage{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:15px 0;border-bottom:1px solid var(--line);
}
.reglage b{display:block;font-family:var(--disp);font-size:14px}
.reglage span{font-size:12.5px;color:var(--muted-2)}
.reglage .cta{text-decoration:none}
.reglage.danger b{color:var(--miss)}

/* ---------- Le discours qui se construit ---------- */
.discours-vivant{display:flex;flex-direction:column;gap:10px}
.morceau{
  background:var(--navy-2);border:1px solid var(--line);
  border-left:2px solid var(--yellow);border-radius:11px;padding:15px 17px;
}
.morceau-tete{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.morceau-num{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:22px;height:22px;border-radius:50%;
  background:var(--yellow);color:#111;
  font-family:var(--disp);font-weight:700;font-size:12px;
}
.morceau-titre{font-family:var(--disp);font-weight:600;font-size:14px}
.morceau-element{margin-bottom:11px}
.morceau-element:last-of-type{margin-bottom:0}
.morceau-label{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:3px;
}
.morceau-element p{margin:0;font-size:14.5px;line-height:1.55;color:var(--text)}
.morceau-reste{
  margin-top:11px;padding-top:9px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--warn);
}

.mesure-cible{
  display:block;font-style:normal;font-size:10.5px;
  color:var(--warn);margin-top:6px;line-height:1.35;
}
/* la couleur ne teint plus le mot : elle tient dans la pastille, voir plus bas */

.mesure-detail{
  display:block;font-style:normal;font-size:11px;
  color:var(--text);margin-top:6px;line-height:1.4;
}

.mod-suggestion{
  font-family:var(--disp);font-size:9.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--yellow);
  background:rgba(255,212,0,.12);border-radius:20px;
  padding:3px 9px;white-space:nowrap;
}
.module.retire .mod-suggestion{background:rgba(255,255,255,.06);color:var(--muted-2)}

/* ---------- Dictée et dépôt de documents ---------- */
.champ-ligne{display:flex;gap:8px;align-items:stretch}
.champ-ligne input{flex:1}
/* Un champ a choisir. Meme habillage que les champs a ecrire, sinon il a l'air
   d'appartenir a un autre formulaire. */
.champ-ligne select{
  flex:1;background:var(--navy-2);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;color:var(--text);
  font-family:inherit;font-size:15px;cursor:pointer;
}
.champ-ligne select:focus{outline:none;border-color:var(--yellow)}
/* LA CIVILITE NE PREND PAS LA MOITIE DE LA LIGNE. Elle sert a accorder en
   genre, pas a se presenter : elle reste petite devant le prenom, et elle est
   facultative — laissee vide, tout le produit accorde au neutre.

   ET ELLE A SON PROPRE INTITULE. Gislain, le 25 septembre 2026, capture a
   l'appui : « VOTRE PRENOM » surplombait le menu Mme/M., donc l'intitule
   annoncait une chose et le champ en dessous en faisait une autre. Les deux
   champs sont desormais deux etiquettes cote a cote.

   LA LARGEUR, ELLE, ETAIT UN CONFLIT DE SPECIFICITE : `.champ-ligne select`
   pose flex:1 et pese (0,1,1) contre les (0,1,0) de `.select-civilite`. Le
   menu prenait donc la moitie de la ligne malgre la regle ecrite juste ici
   pour l'en empecher. On ne se fie plus a l'ordre des regles. */
.champ-paire{display:flex;gap:10px;align-items:flex-end}
.champ-paire .champ-civilite{flex:0 0 104px}
.champ-paire .champ-prenom{flex:1;min-width:0}
.champ-civilite select{
  background:var(--navy-2);border:1px solid var(--line);
  border-radius:10px;padding:12px 10px;color:var(--text);
  font-family:var(--ui);font-size:14.5px;cursor:pointer;width:100%;
}
.champ-civilite select:focus{outline:none;border-color:var(--yellow)}
.champ-ligne select.select-civilite{flex:0 0 88px}

/* Le partage du temps, sous les deux reglages. Il ne dit pas une regle, il dit
   le RESULTAT de ce qu'on vient de choisir. */
.partage-temps{
  font-size:13px;color:var(--muted);
  padding-left:10px;border-left:2px solid var(--yellow);margin:2px 0 4px;
}
.partage-temps b{color:var(--text)}
.champ-micro{
  flex-shrink:0;width:44px;
  background:var(--navy-2);border:1px solid var(--line);
  border-radius:10px;cursor:pointer;font-size:16px;transition:.15s;
}
.champ-micro:hover{border-color:var(--yellow)}
.champ-micro.ecoute{background:var(--yellow);border-color:var(--yellow)}
/* L'aide du tirage au sort. Elle existe parce que l'interet du bouton ne se
   devine pas : rien n'indique qu'un sujet impose vaut mieux qu'un sujet choisi.
   Bord gris et non jaune — ce n'est pas une reprise du diagnostic. */
/* `.champ span` habille les ETIQUETTES : capitales, interlettrage, police
   d'affichage. Une phrase qui en herite devient illisible — on remet donc tout
   a plat ici, sinon l'aide s'affiche en petites capitales espacees. */
/* `.champ span` vaut (0,1,1) : une classe ET un type. Une regle a une seule
   classe perdait, et l'aide s'affichait en petites capitales espacees — vu a
   l'essai. D'ou le selecteur complet. */
.champ span.champ-tirage-aide{
  display:block;margin:0;border-left-color:var(--line);
  font-family:inherit;font-size:12.5px;font-weight:400;
  letter-spacing:0;text-transform:none;line-height:1.45;
}
.champ span.champ-tirage-aide b{color:var(--text);font-weight:700}

/* Voir ce que l'IA a reellement lu dans un document. Sans ca, une extraction
   ratee empoisonne la note, les questions et le debrief sans que personne ne
   puisse le constater. */
.depot-voir{
  background:none;border:none;padding:0;margin-left:10px;cursor:pointer;
  font-family:inherit;font-size:12px;color:var(--muted);text-decoration:underline;
}
.depot-voir:hover{color:var(--yellow)}
.depot-lu{
  display:block;margin:8px 0 0;max-height:280px;overflow:auto;
  background:var(--navy-2);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;font-size:12px;line-height:1.5;color:var(--muted);
  white-space:pre-wrap;word-break:break-word;
}

/* Le compte a rebours du pitch. Il vire au jaune quand il ne reste que trente
   secondes, et au rouge pendant le sursis : la couleur dit ou on en est sans
   qu'on ait a lire. */
.pitch-chrono{
  display:flex;align-items:baseline;gap:10px;
  background:var(--navy-2);border:1px solid var(--line);
  border-left:3px solid var(--line);
  border-radius:10px;padding:10px 14px;margin:8px 0 0;
}
.pitch-chrono b{font-family:var(--disp);font-size:22px;font-variant-numeric:tabular-nums}
.pitch-chrono span{font-size:13px;color:var(--muted)}
.pitch-chrono.bientot{border-left-color:var(--yellow)}
.pitch-chrono.bientot b{color:var(--yellow)}
.pitch-chrono.sursis{border-left-color:#e0573e}
.pitch-chrono.sursis b{color:#e0573e}

.depot{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--navy-2);border:1px solid var(--line);
  border-radius:12px;padding:16px 18px;margin-top:6px;
}
.depot-texte{flex:1;min-width:220px}
.depot-texte b{display:block;font-family:var(--disp);font-size:14px;margin-bottom:3px}
.depot-texte span{font-size:12.5px;color:var(--muted);line-height:1.45}
.depot-bouton{cursor:pointer;white-space:nowrap}
.depot-liste{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.depot-item{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:13px;padding:9px 14px;
  background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:9px;
}
.depot-etat{font-size:11.5px;color:var(--muted-2)}
.depot-etat.ok{color:var(--ok)}
.depot-etat.erreur{color:var(--miss)}

/* ---------- Le dépôt : dire la limite avant, et ce qui est passé après ---------- */
.depot-limite{
  font-size:11.5px;color:var(--muted-2);line-height:1.5;
  margin:8px 2px 0;
}
.depot-limite b{color:var(--muted);font-weight:600}
.depot-etat.partiel{color:#f0b429}
.depot-jauge{margin-top:10px;display:flex;align-items:center;gap:10px}
.jauge{
  flex:1;height:4px;border-radius:3px;overflow:hidden;
  background:rgba(255,255,255,.08);
}
.jauge span{display:block;height:100%;background:var(--yellow);transition:width .25s}
.jauge-texte{font-size:11px;color:var(--muted-2);white-space:nowrap}

/* ---------- Le bilan : ce qui manque d'abord, l'acquis replié ---------- */
.panneau-qui{
  font-size:11.5px;color:var(--muted-2);font-style:italic;
  margin:2px 2px 14px;
}
/* Le trait de gauche porte le verdict : on descend la colonne et on voit
   où est le travail sans lire une ligne. */
.critere.miss{border-left-color:var(--miss)}
.critere.warn{border-left-color:var(--warn)}
.critere.ok{border-left-color:var(--ok)}
/* L'acquis ne demande rien : une ligne suffit. */
.critere.acquis{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin-bottom:8px;padding-top:1px;padding-bottom:1px;
}
.critere.acquis .crit-nom{font-size:13px}
.critere.acquis .crit-note{font-size:12.5px;color:var(--muted-2);flex:1;min-width:180px}
.prop-qui{
  display:block;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-2);
  margin-bottom:5px;font-style:normal;
}

/* ---------- La voix sur toute la séance : exercice vs accompagnement ---------- */
.voix-generale{
  border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;margin:18px 0 4px;
  background:rgba(0,0,0,.2);
}
.vg-tete h4{font-family:var(--disp);font-size:14px;font-weight:700;margin:0 0 4px}
.vg-tete p{font-size:12.5px;color:var(--muted);margin:0 0 12px;line-height:1.5;max-width:56ch}
.vg-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.vg-liste li{
  font-size:13.5px;color:var(--muted);line-height:1.5;
  padding-left:14px;border-left:2px solid var(--line-strong);
}
.vg-liste li b{color:var(--text);font-family:var(--disp);font-weight:600}
.vg-liste li.mieux{border-left-color:var(--ok)}
.vg-liste li.moins{border-left-color:var(--warn)}
.voix-generale .finesse{margin-top:12px}

/* ---------- Le discours : un texte à dire, pas un tableau ---------- */
.doc-mode{
  background:rgba(255,212,0,.06);border:1px solid rgba(255,212,0,.2);
  border-radius:11px;padding:13px 15px;margin-bottom:14px;
  font-size:13px;color:var(--muted);line-height:1.55;
}
.doc-mode b{color:var(--text)}
.doc-mode-ajout{display:block;margin-top:6px}

.doc-texte{margin:0;font-size:15px;line-height:1.7}
.doc-texte.retenu-propose{
  color:#8a6d00;
  border-left:3px solid #c9a200;padding-left:12px;
  background:#fffbe8;border-radius:0 6px 6px 0;padding-top:8px;padding-bottom:8px;
}
.doc-texte.retenu-vous{border-left:3px solid #e5e7eb;padding-left:12px}

.doc-choix{
  margin-top:10px;padding:11px 13px;
  background:#f6f7f9;border-radius:9px;border:1px solid #e5e7eb;
}
.doc-choix-tete{margin-bottom:9px}
.doc-drapeau{
  display:block;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#c9a200;margin-bottom:3px;
}
.doc-pourquoi{display:block;font-size:12.5px;color:#6b7280;line-height:1.5}
.doc-bascule{display:inline-flex;border:1px solid #d7dae0;border-radius:20px;overflow:hidden;background:#fff}
.db{
  font-family:var(--ui);font-size:12px;
  background:transparent;color:#6b7280;border:none;
  padding:6px 16px;cursor:pointer;transition:.15s;
}
.db.actif{background:#14161c;color:#fff;font-weight:600}
.doc-apercu{
  margin:9px 0 0;font-size:13px;color:#6b7280;line-height:1.55;font-style:italic;
}

.doc-partie.ajoutee h3{color:#c9a200;border-bottom-color:#e8d98a}
.doc-marqueur{
  font-size:9.5px;letter-spacing:.08em;background:#fff5cc;color:#8a6d00;
  padding:2px 7px;border-radius:10px;margin-left:8px;vertical-align:middle;
}
.doc-note{
  margin:8px 0 0;font-size:12.5px;color:#6b7280;line-height:1.5;
  padding-left:12px;border-left:2px solid #e8d98a;
}

/* La tenue : des manières de dire, pas un morceau du discours. */
.doc-tenue{
  border:1px dashed #d7dae0;border-radius:9px;
  padding:13px 15px;margin-top:26px;break-inside:avoid;
}
.doc-tenue ul{margin:6px 0 0;padding-left:18px}
.doc-tenue li{font-size:13.5px;color:#4b5563;line-height:1.6;margin-bottom:4px}

/* Le discours qui n'est pas encore dû : dire pourquoi, pas laisser un vide. */
.attente-discours{
  background:rgba(255,212,0,.05);border:1px dashed rgba(255,212,0,.25);
  border-radius:10px;padding:12px 14px;margin:0 0 4px;
  max-width:60ch;line-height:1.55;
}
.attente-discours b{color:var(--text);display:block;margin-bottom:3px}

/* Le retour parlé pendant que le détail s'écrit. */
.retour-direct{
  display:flex;gap:16px;align-items:flex-start;
  background:rgba(0,0,0,.22);border:1px solid var(--line);
  border-radius:12px;padding:16px 18px;margin:14px 0;
}
.retour-direct p{
  margin:0;font-size:15px;line-height:1.65;color:var(--text);flex:1;min-width:0;
}
.retour-direct .onde{flex:none;margin-top:5px}

/* ---------- Fin d'une séance de coaching : le récapitulatif ---------- */
.recap-bloc{
  border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;margin:14px 0;background:rgba(0,0,0,.2);
}
.recap-bloc h4{font-family:var(--disp);font-size:14px;font-weight:700;margin:0 0 4px}
.recap-bloc h4 + p{margin-top:0}
.recap-note{font-size:12px;color:var(--muted-2);margin:0 0 12px;font-style:italic}
.recap-texte{font-size:14px;color:var(--muted);line-height:1.6;margin:0 0 14px}
.recap-bloc h4 ~ h4{margin-top:16px}

/* Ses mots à elle : mis en avant, ce sont eux qu'elle dira. */
.recap-morceau{
  border-left:3px solid var(--yellow);padding:2px 0 2px 14px;margin-bottom:14px;
}
.recap-quoi{
  display:block;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:4px;
}
.recap-morceau p{margin:0;font-size:15px;line-height:1.65;color:var(--yellow-soft)}

/* Le discours qui grandit : la preuve que le programme avance. */
.recap-arc{list-style:none;margin:8px 0 12px;padding:0;display:flex;flex-direction:column;gap:7px}
.recap-arc li{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  font-size:13.5px;padding-left:14px;border-left:2px solid var(--line-strong);
}
.recap-arc li b{font-family:var(--disp);font-weight:600}
.recap-arc li span{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-2)}
.recap-arc li.fait{border-left-color:var(--ok)}
.recap-arc li.fait span{color:var(--ok)}
.recap-arc li.reste{opacity:.62}

/* Ce qu'elle sait faire : l'acquis passe avant le produit. */
.recap-bloc.acquis{
  background:linear-gradient(180deg,rgba(53,208,138,.07),rgba(53,208,138,.02));
  border-color:rgba(53,208,138,.25);
}
.recap-bloc.acquis h4{color:var(--ok)}
.recap-acquis{
  margin:0 0 10px;font-family:var(--disp);font-size:16px;font-weight:600;
  line-height:1.5;color:var(--text);
}

/* ---------- Les mesures : la qualification d'abord, le chiffre en clin d'œil ---------- */
/* LA COULEUR TIENT DANS UNE PASTILLE DE 6 PX, PAS DANS LE MOT. Un mot en
   corps 1,35 rem teint en vert ou en orange est un bulletin de notes : il
   pese plus que le portrait qu'il accompagne. La pastille dit la meme chose
   sans hausser la voix, et le mot redevient lisible comme du texte. */
.mes-quoi{
  display:block;font-size:10px;font-weight:600;color:var(--muted-2);
  letter-spacing:.09em;text-transform:uppercase;margin-bottom:7px;
}
.mes-quoi em{font-style:normal;color:var(--muted)}
.mes-mot{
  display:block;font-family:var(--ui);font-weight:600;font-size:14.5px;
  line-height:1.3;color:var(--text);
}
.mes-mot::before{
  content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  margin-right:8px;vertical-align:1px;background:var(--muted-2);
}
.mesure.ok .mes-mot::before{background:var(--ok)}
.mesure.warn .mes-mot::before{background:var(--warn)}
.mesure.miss .mes-mot::before{background:var(--miss)}
.mes-note{
  display:block;font-size:12px;color:var(--muted);margin-top:6px;line-height:1.45;
}
.mes-voir{
  display:inline-block;margin-top:9px;
  font-family:var(--ui);font-size:11px;
  background:transparent;color:var(--muted);
  border:1px solid var(--line-strong);border-radius:16px;
  padding:4px 11px;cursor:pointer;transition:.15s;
}
.mes-voir:hover{color:var(--text);border-color:var(--muted)}

.tics-liste{
  background:rgba(0,0,0,.28);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;margin:12px 0;
}
.tics-tete{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--disp);font-weight:700;font-size:13px;margin-bottom:10px;
}
.tics-fermer{
  background:transparent;border:none;color:var(--muted-2);
  font-size:15px;cursor:pointer;line-height:1;padding:2px 4px;
}
.tics-fermer:hover{color:var(--text)}
.tics-liste ul{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px}
.tics-liste li{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-size:14px;padding-left:12px;border-left:2px solid var(--warn);
}
.tics-liste li b{color:var(--yellow-soft);font-weight:600}
.tics-liste li span{font-size:11.5px;color:var(--muted-2);white-space:nowrap}

/* ---------- Le choix : se tester, ou se préparer ---------- */
.choix{
  background:linear-gradient(160deg,var(--navy),var(--navy-2));
  border:1px solid var(--line);border-radius:16px;
  padding:24px 26px;margin:18px 0;
}
.choix h3{font-family:var(--disp);font-size:1.3rem;font-weight:700;margin:4px 0 8px;line-height:1.25}
.choix-chapo{font-size:14px;color:var(--muted);line-height:1.55;margin:0 0 20px;max-width:58ch}

.choix-cartes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.choix-carte{
  position:relative;border:1px solid var(--line);border-radius:12px;
  padding:18px 18px 16px;background:rgba(0,0,0,.24);
}
.choix-carte.conseille{
  border-color:rgba(255,212,0,.4);
  background:linear-gradient(180deg,rgba(255,212,0,.08),rgba(255,212,0,.02));
}
.choix-ruban{
  position:absolute;top:-10px;left:16px;
  background:var(--yellow);color:#111;
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 10px;border-radius:12px;
}
.choix-tete{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:9px}
.choix-quoi{font-family:var(--disp);font-weight:700;font-size:15px}
.choix-prix{font-family:var(--disp);font-weight:700;font-size:1.15rem;color:var(--yellow);white-space:nowrap}
.choix-quand{font-size:12.5px;color:var(--muted);line-height:1.5;margin:0 0 14px}

/* La jauge : une case par difficulté nommée dans SON profil. */
.jauge-diff{display:flex;gap:5px;margin-bottom:9px}
.jauge-diff i{
  flex:1;height:7px;border-radius:4px;
  background:rgba(255,255,255,.09);
}
.jauge-diff i.pleine.partiel{background:var(--warn)}
.jauge-diff i.pleine.complet{background:var(--ok)}
.choix-couvre{font-size:12.5px;color:var(--muted);line-height:1.5;margin:0}
.choix-couvre b{color:var(--text)}

@media(max-width:640px){ .choix-cartes{grid-template-columns:1fr} .choix-ruban{left:14px} }

/* Les difficultés nommées, traitées ou laissées de côté. */
.choix-liste{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:7px}
.choix-liste li{
  position:relative;padding-left:22px;
  font-size:13px;line-height:1.45;
}
.choix-liste li::before{
  position:absolute;left:0;top:0;
  font-size:12px;font-weight:700;
}
.choix-liste li.traite{color:var(--text)}
.choix-liste li.traite::before{content:'✓';color:var(--ok)}
.choix-liste li.laisse{color:var(--muted-2);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.42)}
.choix-liste li.laisse::before{content:'—';color:var(--muted-2);text-decoration:none}

/* Le numéro d'étape : le chemin est le même des deux côtés, ce sont les
   mêmes rangs qui sont barrés à gauche et cochés à droite. Sans lui, on lit
   deux listes ; avec lui, on lit un seul parcours et ce qu'on en retranche. */
.choix-rang{
  display:inline-block;min-width:1.15em;margin-right:6px;
  font-family:var(--disp);font-weight:700;font-size:11.5px;opacity:.5;
}
.choix-liste li.laisse .choix-rang{opacity:.42}

/* Les boutons du choix. */
.choix-bouton{
  display:block;width:100%;margin-top:14px;
  font-size:13px;padding:10px 14px;
}
.choix-carte .cta.fantome{border-color:var(--line-strong)}

/* Quand on a choisi le programme, le bouton du bas s'anime une fois
   pour dire où continuer. */
@keyframes appelle{
  0%,100%{transform:translateY(0)}
  30%{transform:translateY(-4px)}
  60%{transform:translateY(0)}
}
.cta.appelle{animation:appelle .6s ease 2}


/* ---------- La modale ----------
   Une seule pour tout le produit : le prénom à l'entrée du diagnostic, le
   compte pendant que l'analyse se calcule. Elle ne se ferme jamais toute
   seule — les deux usages attendent une réponse. */
.modale-fond{
  position:fixed;inset:0;z-index:100;
  background:rgba(4,6,12,.82);
  display:flex;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top,0px) + 20px) 18px calc(env(safe-area-inset-bottom,0px) + 20px);
  overflow-y:auto;
  animation:fondu .18s ease;
}
.modale{
  width:100%;max-width:440px;
  background:var(--navy-2);border:1px solid var(--line-strong);
  border-radius:18px;padding:26px 24px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  animation:monte .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes fondu{from{opacity:0}to{opacity:1}}
@keyframes monte{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* La croix de sortie. La boite passe en « relative » seulement quand elle en
   porte une : les autres modales du produit n'ont pas de sortie, et c'est
   voulu — on ne ferme pas la porte du compte d'un clic distrait. */
.modale.avec-croix{position:relative;padding-top:30px}
.modale-croix{
  position:absolute;right:12px;top:10px;
  width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;
  background:transparent;border:none;cursor:pointer;
  color:var(--muted-2);font-size:24px;line-height:1;
  transition:.15s;
}
.modale-croix:hover{color:var(--text);background:rgba(255,255,255,.07)}
.modale-croix:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}

.modale .etiquette{margin-bottom:6px}
.modale h3{
  font-family:var(--disp);font-size:1.22rem;font-weight:700;
  margin:0 0 8px;line-height:1.28;
}
.modale p{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0 0 18px}
.modale .champs{gap:14px}
.modale .actions{margin-top:20px}
.modale .actions .cta{flex:1}
.modale .finesse{margin-top:12px}
@media(max-width:480px){ .modale{padding:22px 18px} }
/* ------------------------------------------------------------------
   LA CARTE DES AXES — « personne n'est nul sur un axe, il est quelque
   part ». D'où le parti pris : AUCUN CÔTÉ N'EST COLORÉ. Mettre du rouge
   d'un côté et du vert de l'autre rétablirait la note qu'on vient de
   supprimer. Ce qui se voit, c'est la DISTANCE au milieu — une barre
   tirée du centre jusqu'au curseur — parce que c'est elle, et elle
   seule, qui se travaille.
   Refait le 18/09 : « c'est pas du tout graphique, et même les mots aux
   extrémités je ne les avais pas vus. » Les pôles sont passés sous la
   barre, en pleine largeur.
   ------------------------------------------------------------------ */
.axes{margin:26px 0 4px}
.axes .finesse{margin:-4px 0 20px}
/* Les treize rails separes qui etaient ici — .axe, .axe-rail, .cran,
   .curseur, .axe-poles, .axe-fort — ont ete remplaces le 1er octobre
   2026 par la liste unique a trait continu, plus haut. Plus rien ne les
   emet : ils sont retires plutot que laisses a trainer. */

/* L'archétype : une carte qu'on a envie de montrer à quelqu'un. */
.archetype{font-size:1.5rem;margin:0 0 2px}
.archetype-dit{font-size:.95rem;color:var(--yellow-soft);margin:0 0 10px;line-height:1.4}

.regle{margin:20px 0;padding:14px 16px;border-radius:10px;
  background:var(--navy-2);border:1px solid var(--line)}
.regle-dit{font-size:.95rem;margin:2px 0 0 0}
.regle-ecart{font-size:.88rem;margin:8px 0 0 0;opacity:.8}
.situations{margin:18px 0 0}
.situations p{font-size:.88rem;margin:2px 0 0}


/* ------------------------------------------------------------------
   CE SUR QUOI L'ANALYSE S'APPUIE — sous le choix.

   L'EN-TETE « SUR QUOI C'EST FONDE » A ETE RETIREE le 2 octobre 2026.
   Gislain : « il faut epurer, que ce soit facile a voir et qu'on ne soit
   pas submerge d'ecriture, en se disant : oula, il y a trop de choses,
   je passe. » C'etaient 28 mots qui n'apprenaient rien — ils ANNONCAIENT
   ce qui suit au lieu de le montrer. Le trait et l'ecart disent le
   changement de registre sans une phrase.
   ------------------------------------------------------------------ */
.preuve{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.partage{margin-top:28px}

/* ------------------------------------------------------------------
   LES TREIZE AXES — UNE LISTE A GAUCHE, UNE EXPLICATION A DROITE.

   Gislain, le 2 octobre 2026 : « au lieu d'un diagramme dont on se
   moque, un bloc comme ca avec a gauche les notions avec un cercle qui
   tend vers plus en se ferme et qui tend au rouge plus il ne se ferme
   pas. Et quand on clique sur la notion on voit l'explication dans le
   bloc de droite qui s'affiche. »

   DEUX GAINS REELS SUR LE GRAPHIQUE QU'IL REMPLACE :
   · les fiches s'empilaient SOUS le dessin — on cliquait, et le texte
     apparaissait ailleurs, plus bas. Cote a cote, le panneau est
     toujours rempli et le clic a un effet immediat.
   · l'anneau tient dans 34 px, donc le nom se pose A COTE, a
     l'horizontale. Les etiquettes inclinees a 45 degres disparaissent —
     c'etait la chose la plus laide de l'ecran, et il avait fallu
     decaler tout le dessin de 48 px pour qu'elles tiennent.
   ------------------------------------------------------------------ */
.ax-bloc{
  display:grid;grid-template-columns:300px 1fr;gap:18px;
  align-items:start;margin:0 0 16px;
}

.ax-liste{display:flex;flex-direction:column;gap:1px}
.ax-item{
  display:grid;grid-template-columns:34px 1fr;align-items:center;gap:12px;
  width:100%;padding:7px 10px;border:0;border-radius:10px;background:none;
  text-align:left;color:inherit;font:inherit;cursor:pointer;transition:background .15s;
}
.ax-item:hover{background:rgba(255,255,255,.045)}
.ax-item.choisi{background:rgba(255,255,255,.07)}
.ax-item.entrevu{opacity:.62}
.ax-item-mot{display:block;min-width:0}
.ax-item-mot b{
  display:block;font-size:12.5px;font-weight:600;color:var(--muted);
  line-height:1.25;
}
.ax-item:hover .ax-item-mot b,.ax-item.choisi .ax-item-mot b{color:var(--text)}
.ax-item-mot em{
  display:block;font-style:normal;font-size:10.5px;color:var(--muted-2);
  line-height:1.3;margin-top:1px;
}

/* L'anneau. Il part du haut — d'ou la rotation — et se ferme dans le
   sens des aiguilles a mesure qu'on approche du milieu. */
.ax-anneau{display:block;transform:rotate(-90deg)}
.ax-anneau circle{fill:none}
.ax-anneau-fond{stroke:rgba(255,255,255,.1);stroke-width:3.5}
.ax-anneau-plein{stroke-width:3.5;stroke-linecap:round;transition:stroke-dasharray .2s}
/* l'arc fin du dedans : ou le diagnostic l'avait place, s'il a bouge */
.ax-anneau-depart{stroke:var(--muted-2);stroke-width:1.5;stroke-dasharray:2 2}

/* ---- le panneau de droite ---- */
/* Le panneau suit la lecture : la liste fait treize lignes, lui trois
   paragraphes. Sans ca, on cliquait en bas de liste et l'explication
   s'ecrivait hors de l'ecran, tout en haut. */
.ax-detail{
  padding:16px 18px;border-radius:12px;min-height:200px;
  background:rgba(255,255,255,.035);border:1px solid var(--line);
  position:sticky;top:18px;
}
.ax-detail-tete h4{
  font-family:var(--disp);font-size:1.1rem;font-weight:700;
  margin:2px 0 0;color:var(--text);
}
.ax-detail-ou{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--muted);margin:8px 0 0;
}
.ax-detail-ou i{width:8px;height:8px;border-radius:2px;flex:0 0 auto}
/* LA DOCTRINE A QUITTE LA LEGENDE POUR LE PANNEAU. « Aucun cote n'est
   meilleur que l'autre » etait en tete de la liste, ou personne ne la lit
   et ou elle ne s'applique a rien. Ici elle arrive devant un axe precis,
   au moment ou la question se pose vraiment — et seulement quand l'ecart
   est marque, parce qu'a l'equilibre il n'y a rien a rassurer. */
/* ELLE ARRIVE APRES « CE QUE CA VOUS COUTE », pas avant — sinon elle
   defend contre un reproche qui n'a pas encore ete lu. */
.ax-detail-note{
  font-size:12px;color:var(--muted-2);margin:14px 0 0;line-height:1.45;
  max-width:54ch;font-style:italic;
}
.ax-detail-bouge{
  font-size:12px;color:var(--muted-2);margin:10px 0 0;
  padding-left:11px;border-left:2px solid var(--line-strong);
}
.ax-detail .ax-preuve{font-size:12.5px;font-style:italic;color:var(--muted-2);margin:14px 0 0}
.ax-detail .ax-lecture{font-size:13.5px;line-height:1.55;margin:9px 0 0}
.ax-detail-pied{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
}
.ax-detail-pied b{display:block;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:5px}
.ax-detail-pied span{font-size:12.5px;color:var(--muted);line-height:1.45}

.ax-nonvus{
  font-size:12px;color:var(--muted-2);margin:0 0 16px;
  padding-left:11px;border-left:2px solid var(--line);
}

/* Sur telephone, le panneau passe SOUS la liste : cote a cote, 300 px
   de liste n'en laissent plus assez pour une phrase. */
@media (max-width:760px){
  .ax-bloc{grid-template-columns:1fr;gap:14px}
  .ax-detail{position:static}
  .ax-detail-pied{grid-template-columns:1fr;gap:12px}
}

/* ------------------------------------------------------------------
   CE QUE LA SEANCE A DEPLACE — le bloc de fin de seance.
   Trois etats, trois pastilles : il a bouge, il est confirme, il est
   note pour la premiere fois. Le troisieme est le plus important a
   distinguer — sans lui on croirait a une panne.
   ------------------------------------------------------------------ */
.stat-axes{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.stat-axe{
  padding:11px 13px;border-radius:10px;
  background:rgba(0,0,0,.22);border:1px solid var(--line);
  border-left:3px solid var(--line-strong);
}
.stat-axe.bouge{border-left-color:var(--ok)}
.stat-axe.confirme{border-left-color:var(--muted-2)}
.stat-axe.premiere{border-left-color:var(--warn)}
.stat-axe-tete{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.stat-axe-tete b{font-size:13px;font-weight:600;color:var(--text)}
.stat-axe-ou{font-size:11.5px;color:var(--muted-2);flex:1}
.stat-axe-etat{
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;
}
.stat-axe.bouge .stat-axe-etat{color:var(--ok)}
.stat-axe.confirme .stat-axe-etat{color:var(--muted-2)}
.stat-axe.premiere .stat-axe-etat{color:var(--warn)}
.stat-axe-preuve{font-size:12.5px;font-style:italic;color:var(--muted);margin:7px 0 0;line-height:1.45}

@media (max-width:560px){
  .stat-axe-ou{flex:0 0 100%;order:3}
}

/* ------------------------------------------------------------------
   LES DEUX PORTES sous l'analyse — décision de Gislain : le programme
   ne se génère plus tout seul, elle choisit d'abord entre préparer une
   date et se former. Le clic révèle ce qu'on demandait avant.
   ------------------------------------------------------------------ */
.portes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0 0}
.porte{display:block;text-align:left;padding:18px 20px;border-radius:14px;
  border:1px solid var(--line-strong);background:var(--navy-2);color:var(--text);
  cursor:pointer;transition:border-color .18s,background .18s,transform .18s}
.porte:hover{border-color:var(--yellow);transform:translateY(-1px)}
.porte.choisie{border-color:var(--yellow);background:var(--navy-3)}
.porte b{display:block;font-family:var(--disp);font-size:1.05rem;margin-bottom:6px}
.porte span{display:block;font-size:.85rem;color:var(--muted);line-height:1.45}

/* Les trois profondeurs. Ce ne sont pas trois offres concurrentes :
   c'est une même route vue à trois distances, et chaque niveau contient
   le précédent — profondeursEmboitees() le prouve à l'exécution. */
.formation{margin:26px 0 0}
.formation .finesse{margin:-2px 0 16px}
.niveaux{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.niveau{position:relative;text-align:left;padding:18px 18px 14px;border-radius:14px;
  border:1px solid var(--line);background:var(--navy-2);color:var(--text);
  cursor:pointer;transition:border-color .18s,transform .18s}
.niveau:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.niveau.conseille{border-color:var(--line-strong)}
.niveau.choisi{border-color:var(--yellow);background:var(--navy-3)}
.ruban{position:absolute;top:-9px;left:18px;padding:2px 9px;border-radius:99px;
  background:var(--yellow);color:var(--ink);font-size:.66rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase}
.niveau-tete{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.niveau-tete b{font-family:var(--disp);font-size:1rem}
.niveau-compte{font-size:.74rem;color:var(--muted);white-space:nowrap}
.niveau-promesse{font-size:.82rem;color:var(--muted);line-height:1.45;margin:6px 0 12px}
.niveau-liste{list-style:none;margin:0;padding:0;counter-reset:n}
.niveau-liste li{counter-increment:n;padding:7px 0 7px 26px;position:relative;
  border-top:1px solid var(--line)}
.niveau-liste li::before{content:counter(n);position:absolute;left:0;top:7px;
  font-size:.7rem;color:var(--muted-2);font-variant-numeric:tabular-nums}
.niveau-liste li b{display:block;font-size:.83rem;font-weight:600;line-height:1.35}
.niveau-liste li em{display:block;font-size:.7rem;font-style:normal;color:var(--muted-2);margin-top:2px}
/* « Urgent » ne veut pas dire « mauvais » : c'est la distance au milieu,
   pas une faute. D'où un repère discret et non une couleur d'alerte. */
.niveau-liste li.urgent b::after{content:'';display:inline-block;width:5px;height:5px;
  border-radius:50%;background:var(--yellow);margin-left:7px;vertical-align:middle}

@media (max-width:820px){
  .portes{grid-template-columns:1fr}
  .niveaux{grid-template-columns:1fr}
}
.niveau-pareil{font-size:.74rem;color:var(--muted-2);margin:-6px 0 10px;font-style:italic}

/* Le banc d'essai des personas : on choisit son interlocuteur et on y va,
   sans diagnostic. Il sert à travailler les personas sans repayer un
   parcours complet à chaque essai. */
.banc{margin:34px auto 0;max-width:760px;padding:18px 20px;border-radius:14px;
  border:1px solid var(--line);background:var(--navy-2)}
.banc .finesse{margin:2px 0 14px}
/* LA PUCE A DEUX LIGNES SERT MAINTENANT A DEUX ENDROITS : le banc d'essai et
   « ou travailler autre chose ». Le style etait attache a `.banc` seul, et la
   puce s'affichait « Le DRHDecrocher un poste » d'un seul tenant dans la
   seconde. Vu a l'ecran le 30 septembre 2026. */
.banc .puces,.autre-carte .puces{display:flex;flex-wrap:wrap;gap:8px}
.banc .puce,.autre-carte .puce{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:9px 13px;line-height:1.25;text-align:left}
.banc .puce b,.autre-carte .puce b{font-size:.84rem;font-weight:600}
.banc .puce span,.autre-carte .puce span{font-size:.7rem;color:var(--muted-2)}

/* ==========================================================================
   L'ACCUEIL — retenu le 28 septembre 2026

   Gislain a compare six maquettes et retenu « B3, incarne ». Ce qui l'a
   emporte tient en une phrase : une figure dit « vous allez parler a
   quelqu'un » en une seconde, la ou trois paragraphes echouaient.

   TROIS GESTES, ET AUCUN NE MENT SUR CE QUE LE PRODUIT FAIT.
   1. UNE SOURCE DE LUMIERE. L'ancien accueil etait plat — #070709 partout,
      une seule carte bleu nuit. Ce n'est pas la valeur du noir qui pesait,
      c'est qu'aucune lumiere ne venait de nulle part.
   2. UNE FIGURE QUI PARLE. Photo reelle du persona, et sous elle l'echange :
      sa question, la reponse de l'utilisateur, son retour au coaching. Une
      replique a la fois, remplacee en fondu.
   3. CE QU'IL FAUT POUR COMMENCER, en une ligne de pictos. La camera est
      BARREE parce qu'elle ne sert a rien — regle 9, le Regard et la
      Gestuelle sont « non evalues ». Le dire leve un frein reel.

   Les mesures qui ont guide les reglages sont dans les messages
   d'enregistrement du 28 septembre. Les trois principales :
   le minutage de l'echange vient du COMPTE DES MOTS (200 mots/min) et non
   d'une impression ; l'echange occupe 18 % du cadre depuis qu'il se remplace
   au lieu de s'empiler ; et la lueur ne deborde plus la colonne, ce qui
   ajoutait 256 px de defilement horizontal.
   ========================================================================== */

/* La colonne s'elargit POUR CE SEUL ECRAN. 760 px est juste pour un texte et
   trop serre pour un accueil. `montrer()` pose la classe sur le corps. */
body.accueil-large .cadre{max-width:1040px}

.hero{position:relative;isolation:isolate}
.hero::before{
  content:'';position:absolute;inset:-120px 0 auto 0;height:620px;z-index:-1;
  background:
    radial-gradient(82% 58% at 50% 0%, rgba(255,212,0,.13), transparent 68%),
    radial-gradient(62% 46% at 78% 14%, rgba(27,44,72,.55), transparent 72%);
  pointer-events:none;
}

/* Une surface ECLAIREE PAR LE HAUT : c'est le filet clair sur l'arete qui
   donne le relief, pas l'ombre. */
.relief{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.014));
  border:1px solid var(--line);border-top-color:rgba(255,255,255,.14);
  border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.45);
}

.hero-duo{display:grid;grid-template-columns:1fr 380px;gap:48px;align-items:start}
.hero-titre{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(2.1rem,5.2vw,3.15rem);line-height:1.06;letter-spacing:-.03em;
  margin:0 0 16px;
}
.hero-titre em{font-style:normal;color:var(--yellow)}
/* Un groupe de mots qui porte le sens ne se coupe pas entre deux lignes. */
.hero-titre em.lie{white-space:nowrap}
.hero-chapo{color:var(--muted);font-size:1.06rem;line-height:1.6;max-width:46ch;margin:0 0 30px}

.cta-grand{
  font-family:var(--disp);font-weight:800;font-size:15.5px;
  background:var(--yellow);color:#101010;border:none;border-radius:13px;
  padding:17px 30px;cursor:pointer;
  box-shadow:0 12px 34px rgba(255,212,0,.24);
  transition:transform .12s ease,box-shadow .2s ease;
}
.cta-grand:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(255,212,0,.34)}
.cta-grand .sous{display:block;font-weight:500;font-size:11.5px;opacity:.62;margin-top:3px}

/* Ce qu'il faut pour commencer. Pas d'emoji — leur dessin change d'un
   systeme a l'autre — des traits SVG qui suivent la couleur du texte. */
.exigences{
  display:flex;align-items:center;flex-wrap:wrap;gap:7px 12px;margin-top:18px;
  font-size:12.5px;color:var(--muted);
}
.exigences svg{width:13px;height:13px;flex:none}
.exigences .item{display:inline-flex;align-items:center;gap:5px}
.exigences .item.non{color:var(--muted-2)}
.exigences .item.non svg{opacity:.55}
.exigences .item.discret{color:var(--muted-2);margin-left:2px}

/* ---------- La figure qui parle ---------- */
.scene-fig{position:relative}
.scene-cadre{
  position:relative;width:100%;aspect-ratio:4/5;border-radius:20px;overflow:hidden;
  background:linear-gradient(165deg,var(--navy-3),var(--navy-2) 60%,var(--ink));
  border:1px solid var(--line-strong);box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.scene-cadre .couche{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.scene-cadre .couche.vue{opacity:1}
/* Les sources font 1089 x 620, donc du paysage : « cover » recadre en
   portrait et « object-position » remonte sur le visage, qu'un recadrage
   centre couperait au menton. */
/* LA PHOTO NE BOUGE PAS. Gislain, le 30 septembre 2026, en deux temps :
   d'abord « tu peux supprimer l'animation des photos, je preferais quand ca
   ne bougeait pas », puis « non tu supprimes toute animation meme le
   clignement d'yeux ».

   TOUT EST DONC PARTI : la derive d'ouverture, la respiration, le
   clignement, et le battement du point « en ligne ». Le plan est fixe.

   CE QUI A ETE ESSAYE ET REFUSE — a ne pas reproposer sans qu'il le demande,
   le travail est dans l'historique (voir docs/en-attente.md) :
   - une derive lente de 4 % sur neuf secondes, qui existait avant ;
   - une respiration en boucle de treize secondes ;
   - un clignement des yeux, obtenu en etirant la peau de la paupiere
     par-dessus l'oeil (public/visage-vivant.js, commit aa3befe).

   Il reste un leger agrandissement fixe : le cadrage a ete regle avec, et le
   retirer remonterait la ligne des yeux. */
.scene-cadre .couche img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 22%;display:block;
  transform:scale(1.045);
}

.scene-cadre::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:64%;
  background:linear-gradient(to top, rgba(7,7,9,.94) 12%, rgba(7,7,9,.55) 48%, transparent);
  pointer-events:none;z-index:2;
}
.scene-live{
  position:absolute;right:14px;top:14px;z-index:3;
  display:flex;align-items:center;gap:6px;
  font-size:11px;color:var(--text);background:rgba(7,7,9,.62);
  border:1px solid var(--line-strong);border-radius:999px;padding:5px 11px;
  backdrop-filter:blur(8px);
}
.scene-live b{width:7px;height:7px;border-radius:50%;background:var(--ok);display:block}

/* UNE REPLIQUE A LA FOIS. Les trois bulles occupent la meme case de grille :
   rien ne pousse, et le dialogue ne prend que la hauteur de la plus haute —
   18 % du cadre, contre 46 % quand elles s'empilaient. */
.scene-echange{
  position:absolute;left:14px;right:14px;bottom:14px;z-index:3;display:grid;
}
.bulle{
  grid-area:1/1;align-self:end;
  padding:8px 11px;border-radius:11px;font-size:12px;line-height:1.42;
  backdrop-filter:blur(10px);
  opacity:0;transform:translateY(7px);pointer-events:none;
  transition:opacity .5s ease,transform .5s ease;
}
.bulle.vue{opacity:1;transform:none}
/* Posees sur une image, les bulles ont besoin d'un fond OPAQUE. */
.bulle.moi{
  justify-self:end;max-width:92%;
  background:rgba(12,12,16,.74);border:1px solid rgba(255,255,255,.14);
  border-bottom-right-radius:4px;color:#d7dae2;
}
/* DEUX BULLES POUR LUI, ET LA DIFFERENCE EST TOUT LE PRODUIT. En role il
   pousse : fond neutre, il n'est pas de votre cote. Au coaching il sort du
   role : fond jaune, il redevient un allie. */
.bulle.role{
  justify-self:start;max-width:97%;
  background:rgba(12,12,16,.78);border:1px solid rgba(255,255,255,.17);
  border-bottom-left-radius:4px;color:#e8eaf0;
}
.bulle.role .bulle-qui{color:#c6cbd6}
.bulle.coach{
  justify-self:start;max-width:97%;
  background:rgba(28,23,4,.86);border:1px solid rgba(255,212,0,.36);
  border-bottom-left-radius:4px;color:#fff;
}
.bulle-qui{
  display:flex;align-items:center;font-family:var(--disp);font-size:9px;
  font-weight:800;letter-spacing:.12em;margin-bottom:4px;
}
.bulle.moi .bulle-qui{color:var(--muted-2);justify-content:flex-end}
.bulle.coach .bulle-qui{color:var(--yellow)}
.bulle u{text-decoration:none;opacity:0}
.bulle.vue u{animation:mot .4s ease forwards}
@keyframes mot{to{opacity:1}}

/* LA PAROLE SE VOIT, ELLE NE S'ENTEND PAS. On ne simule pas des levres qui
   remuent : on montre le SOUS-TITRAGE d'une parole, ce qui est vrai. */
.bulle-onde{display:inline-flex;align-items:flex-end;gap:3px;height:13px;margin-right:9px}
.bulle-onde i{
  width:3px;height:4px;border-radius:2px;background:var(--yellow);
  animation:parle .9s ease-in-out infinite;
}
@keyframes parle{0%,100%{height:4px;opacity:.5}50%{height:16px;opacity:1}}

.scene-points{display:flex;justify-content:center;gap:7px;margin-top:14px}
.scene-points i{
  width:7px;height:7px;border-radius:50%;background:var(--line-strong);
  transition:background .3s ease,width .3s ease;cursor:pointer;
}
.scene-points i.vu{background:var(--yellow);width:20px;border-radius:4px}
.scene-legende{margin-top:12px;text-align:center;font-size:12px;color:var(--muted-2);line-height:1.5}
.scene-legende b{color:var(--muted);font-weight:600}

/* ---------- Qui vous aurez en face ---------- */
/* Ce que l'ancien accueil ne montrait nulle part, alors que c'est l'actif le
   plus concret du produit. Les huit sortent d'OBJECTIFS : une liste recopiee
   mentirait des qu'on touche a un persona. */
.les-huit{margin-top:84px;padding-top:40px;border-top:1px solid var(--line)}
.les-huit h2{font-family:var(--disp);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;margin:0 0 6px}
.les-huit>p{color:var(--muted);margin:0 0 26px;font-size:15px}
/* DEUX COLONNES, PAS QUATRE. A quatre, chaque carte faisait 150 px de large :
   assez pour deux etiquettes, pas pour une phrase. Et une phrase est
   justement ce qui manquait.

   LES PORTRAITS ONT QUITTE CETTE SECTION (les regles .huit-rond sont
   retirees). On n'en a que trois sur huit : trois visages au milieu de cinq
   silhouettes grises se lisaient comme un ecran inacheve. Les trois gardent
   leur place, en grand, dans la scene du haut. */
.huit-rang{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.huit-carte{padding:15px 17px;text-align:left}
.huit-tete{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.huit-carte b{font-family:var(--disp);font-weight:700;font-size:14.5px;letter-spacing:-.01em}
/* L'objectif est une etiquette, pas un sous-titre : c'est ce qu'on achete,
   et il ne doit pas se confondre avec ce que le persona cherche. */
.huit-but{
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--yellow);opacity:.85;
}
.huit-cherche{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}

/* ---------- Et d'abord, le diagnostic ---------- */
.apres-diag{margin-top:96px;padding-top:44px;border-top:1px solid var(--line)}
.apres-diag>h2{font-family:var(--disp);font-weight:800;font-size:1.6rem;letter-spacing:-.02em;margin:0 0 8px}
.apres-diag>p{color:var(--muted);margin:0 0 30px;font-size:15px}

/* La carte d'identite, en EXEMPLE. « Votre carte » au-dessus du portrait de
   quelqu'un d'autre laissait croire qu'on parlait deja de vous. */
.carte-ex{padding:24px 22px 20px;position:relative;overflow:hidden;max-width:420px}
.carte-ex-tag{
  display:flex;align-items:center;gap:8px;margin-bottom:10px;
  font-family:var(--disp);font-size:10px;font-weight:800;letter-spacing:.15em;color:var(--muted-2);
}
.carte-ex-tag b{color:var(--yellow);font-weight:800}
/* DEUX PROFILS QUI ALTERNENT : la seule preuve qui compte, deux personnes
   n'obtiennent pas la meme carte. Mesure sur les testeurs le 25 septembre —
   dix axes sur treize places au pole oppose. */
.carte-ex-corps{transition:opacity .5s ease}
.carte-ex-corps.efface{opacity:0}
.ex-nom{font-family:var(--disp);font-weight:800;font-size:1.65rem;margin:6px 0 4px;letter-spacing:-.02em}
.ex-dit{color:var(--yellow);font-size:13.5px;margin:0 0 18px;line-height:1.45;min-height:39px}
.ex-axe{margin-bottom:15px}
.ex-axe span{display:block;font-size:11.5px;color:var(--muted);margin-bottom:7px}
.ex-piste{position:relative;height:5px;border-radius:3px;background:rgba(255,255,255,.08)}
.ex-piste b{
  position:absolute;top:-4px;width:13px;height:13px;border-radius:50%;background:var(--yellow);
  box-shadow:0 0 0 4px rgba(255,212,0,.16);transition:left .6s cubic-bezier(.4,0,.2,1);
}
.ex-piste i{
  position:absolute;top:0;height:5px;border-radius:3px;background:rgba(255,212,0,.42);
  transition:left .6s cubic-bezier(.4,0,.2,1),width .6s cubic-bezier(.4,0,.2,1);
}
.ex-mil{position:absolute;top:-3px;left:50%;width:1px;height:11px;background:rgba(255,255,255,.26)}
.ex-pieds{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted-2);margin-top:6px}
.ex-voile{margin-top:18px;padding-top:15px;border-top:1px solid var(--line);font-size:12px;color:var(--muted-2);line-height:1.5}

@media(max-width:700px){ .huit-rang{grid-template-columns:1fr} }
@media(max-width:680px){
  .hero-duo{grid-template-columns:1fr;gap:28px}
  /* Le cadre est plus petit ici : le visage doit y etre place plus haut. */
  .scene-cadre .couche img{object-position:50% 16%}
  .hero::before{height:460px}
}


/* ==========================================================================
   L'ESPACE PERSONNEL
   Porte dans le produit le 30 septembre 2026, apres la maquette. Gislain :
   « je trouve pas ca terrible de tomber sur ce screen quand on clique sur la
   bulle avec les initiales. »

   Le principe tient en une phrase : UN SEUL NIVEAU DE SURFACE. Le fond de la
   page et des filets ; une seule boite dans tout l'espace, le bandeau de
   reprise, parce que c'est la chose qu'on doit attraper. Une liste est une
   suite de lignes separees par un filet, jamais une suite de cartes — c'est
   la correction du 30 septembre, quand l'espace faisait « lourd ».
   ========================================================================== */

  /* --- L'identité : plus de carte, juste un filet ------------------- */
  .esp-tete{
    display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 14px;
    padding:0 0 18px;margin:0 0 22px;border-bottom:1px solid var(--line);
  }
  .esp-jeton{
    flex:none;width:52px;height:52px;border-radius:50%;overflow:hidden;
    display:grid;place-items:center;
    background:var(--yellow);color:#101010;
    font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:.02em;
  }
  .esp-jeton img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
  .esp-qui{min-width:0}
  .esp-qui b{display:block;font-family:var(--disp);font-size:1.1rem;letter-spacing:-.01em}
  .esp-qui>span{display:block;font-size:12.5px;color:var(--muted-2);margin-top:2px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Trois faits, jamais plus : depuis quand, combien de séances, ce qui a
     été payé. Sans filet au-dessus : le bloc en a déjà un en dessous. */
  .esp-faits{grid-column:1/-1;display:flex;gap:26px;flex-wrap:wrap;margin-top:15px}
  .esp-fait b{display:block;font-family:var(--disp);font-weight:700;font-size:14px;color:var(--text)}
  .esp-fait span{
    display:block;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
    color:var(--muted-2);margin-top:1px;
  }
  @media(max-width:520px){ .esp-faits{gap:18px} }

  /* --- La seule boîte de tout l'espace ------------------------------ */
  /* Plate : un fond uni, un filet, aucun dégradé, aucune lueur. Elle se
     détache parce qu'elle est LA SEULE, pas parce qu'elle brille. */
  .esp-reprise{
    padding:18px;border-radius:14px;margin:0 0 26px;
    background:rgba(27,44,72,.42);border:1px solid var(--line-strong);
  }
  .esp-compte{display:flex;align-items:baseline;gap:9px;margin-bottom:2px;flex-wrap:wrap}
  .esp-compte b{font-family:var(--disp);font-weight:800;font-size:1.4rem;color:var(--yellow);letter-spacing:-.02em}
  .esp-compte.proche b{color:var(--miss)}
  .esp-compte span{font-size:13px;color:var(--muted)}
  .esp-quoi{font-size:14px;margin:0 0 16px;color:var(--muted)}
  .esp-suite{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
  .esp-suite-txt{flex:1;min-width:180px}
  .esp-suite-txt small{
    display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--muted-2);margin-bottom:3px;
  }
  .esp-suite-txt b{font-family:var(--disp);font-size:15px;font-weight:700}
  .esp-cta{
    font-family:var(--disp);font-weight:700;font-size:13.5px;
    background:var(--yellow);color:#101010;border:none;border-radius:10px;
    padding:12px 20px;cursor:pointer;white-space:nowrap;
  }
  .esp-cta:hover{filter:brightness(1.07)}

  /* --- Les onglets -------------------------------------------------- */
  .esp-onglets{
    display:flex;gap:2px;margin:0 0 4px;
    border-bottom:1px solid var(--line);
    overflow-x:auto;scrollbar-width:none;
  }
  .esp-onglets::-webkit-scrollbar{display:none}
  .esp-onglets button{
    flex:none;position:relative;
    font-family:var(--ui);font-size:13.5px;color:var(--muted);
    background:transparent;border:none;cursor:pointer;
    padding:11px 13px;white-space:nowrap;
  }
  .esp-onglets button:hover{color:var(--text)}
  .esp-onglets button.actif{color:var(--text);font-weight:600}
  .esp-onglets button.actif::after{
    content:'';position:absolute;left:9px;right:9px;bottom:-1px;height:2px;
    background:var(--yellow);border-radius:2px;
  }
  .esp-onglets em{font-style:normal;font-size:11px;color:var(--muted-2);margin-left:5px}
  .esp-vue{animation:entree .28s ease;padding-top:6px}

  /* --- Un groupe : un intitulé, puis des lignes --------------------- */
  /* Plus de cadre. L'intitulé en petites capitales suffit à séparer, et il
     était déjà là — la bordure ne faisait que le redire. */
  .esp-groupe{margin:0 0 30px}
  .esp-groupe>.etiquette{margin-bottom:6px}
  .esp-titre{font-family:var(--disp);font-size:1.15rem;margin:0 0 6px;letter-spacing:-.01em}
  .esp-dit{color:var(--muted);font-size:14px;line-height:1.6;margin:0 0 4px;max-width:62ch}

  /* --- Une liste de lignes ------------------------------------------ */
  .esp-lignes{border-top:1px solid var(--line)}
  .esp-lignes>*{border-bottom:1px solid var(--line)}

  /* Le programme, séance par séance. La pastille est un contour ; elle ne
     se remplit que pour ce qui est fait et pour la séance suivante. */
  .esp-etape{display:flex;gap:13px;align-items:baseline;padding:13px 2px}
  .esp-puce{
    flex:none;width:21px;height:21px;border-radius:50%;
    display:grid;place-items:center;align-self:flex-start;
    font-family:var(--disp);font-weight:700;font-size:11px;
    border:1px solid var(--line-strong);color:var(--muted-2);
  }
  .esp-etape.faite .esp-puce{border-color:rgba(53,208,138,.5);color:var(--ok)}
  .esp-etape.suivante .esp-puce{background:var(--yellow);border-color:var(--yellow);color:#101010}
  .esp-etape-txt{flex:1;min-width:0}
  .esp-etape-txt b{display:block;font-family:var(--disp);font-size:14px;font-weight:600}
  .esp-etape.faite .esp-etape-txt b{color:var(--muted)}
  .esp-etape-txt span{display:block;font-size:12.5px;color:var(--muted-2);margin-top:3px;line-height:1.5}
  .esp-etat{
    flex:none;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);
  }
  .esp-etape.faite .esp-etat{color:var(--ok)}
  .esp-etape.suivante .esp-etat{color:var(--yellow)}

  /* --- Le diagnostic précédent -------------------------------------- */
  .esp-avant{display:flex;gap:16px;align-items:flex-start;padding:14px 2px}
  .esp-avant-date{flex:none;width:92px;font-size:11.5px;color:var(--muted-2);line-height:1.4}
  .esp-avant b{font-family:var(--disp);font-size:14px;display:block;color:var(--muted)}
  .esp-avant p{margin:5px 0 0;font-size:13px;color:var(--muted-2);line-height:1.55}
  .esp-ecart{
    display:flex;gap:10px;align-items:flex-start;padding:14px 2px;
    font-size:13.5px;color:var(--muted);line-height:1.55;
  }
  .esp-ecart i{flex:none;font-style:normal;font-family:var(--disp);font-weight:800;color:var(--yellow)}
  .esp-ecart b{color:var(--text);font-family:var(--disp);font-weight:600}

  /* --- Une séance passée -------------------------------------------- */
  /* Le produit en fait une carte, avec une deuxième carte dedans pour le
     conseil. Deux cadres pour trois lignes de texte. Ici : une ligne, et
     le conseil se signale par un filet jaune, pas par une boite. */
  .esp-seance{padding:15px 2px}
  .esp-seance-tete{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
  .esp-seance-tete b{font-family:var(--disp);font-size:13.5px;font-weight:700}
  .esp-seance-tete span{font-size:12px;color:var(--muted-2);white-space:nowrap}
  .esp-verdict{font-size:14px;margin:8px 0 0;line-height:1.55}
  .esp-conseil{
    margin:10px 0 0;padding-left:13px;border-left:2px solid var(--yellow);
    font-size:13.5px;color:var(--muted);line-height:1.55;
  }
  .esp-conseil b{color:var(--text);font-family:var(--disp);font-weight:600}
  .esp-seance-mes{font-size:11.5px;color:var(--muted-2);margin-top:10px}

  /* --- Une ligne : libellé à gauche, action à droite ---------------- */
  .esp-champ{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 2px}
  .esp-champ b{display:block;font-family:var(--disp);font-size:13.5px;font-weight:600}
  .esp-champ span{display:block;font-size:12.5px;color:var(--muted-2);margin-top:3px;line-height:1.5}
  .esp-champ.danger b{color:var(--miss)}
  .esp-vide{padding:36px 2px;color:var(--muted-2);font-size:14px}

  /* --- Ce qu'on a acheté -------------------------------------------- */
  /* Plus de cadre jaune : le montant en jaune suffit à dire où regarder. */
  .esp-offre{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 2px}
  .esp-offre b{display:block;font-family:var(--disp);font-size:14.5px;letter-spacing:-.01em}
  .esp-offre span{display:block;font-size:12.5px;color:var(--muted-2);margin-top:4px}
  .esp-somme{
    flex:none;text-align:right;font-family:var(--disp);font-weight:700;
    font-size:1.15rem;color:var(--yellow);white-space:nowrap;
  }
  .esp-somme small{
    display:block;font-family:var(--ui);font-weight:400;font-size:11px;
    color:var(--muted-2);margin-top:3px;
  }

  /* La carte enregistrée : une puce dorée de 26 px, et c'est tout. */
  .esp-cb{display:flex;align-items:center;gap:13px;padding:14px 2px}
  .esp-cb-puce{flex:none;width:26px;height:19px;border-radius:4px;background:#b59a52}
  .esp-cb-txt{flex:1;min-width:0}
  .esp-cb-txt b{font-family:var(--disp);font-size:13.5px;letter-spacing:.04em}
  .esp-cb-txt span{display:block;font-size:12px;color:var(--muted-2);margin-top:2px}

  /* --- Les factures -------------------------------------------------- */
  .esp-facture{display:flex;align-items:center;gap:14px;padding:13px 2px}
  .esp-facture-date{flex:none;width:96px;font-size:12px;color:var(--muted-2)}
  .esp-facture-txt{flex:1;min-width:0}
  .esp-facture-txt b{display:block;font-family:var(--disp);font-size:13.5px;font-weight:600}
  .esp-facture-txt span{display:block;font-size:11px;color:var(--muted-2);margin-top:2px;letter-spacing:.04em}
  .esp-facture-somme{flex:none;font-family:var(--disp);font-weight:600;font-size:13.5px;width:70px;text-align:right}
  .esp-pdf{
    flex:none;font-family:var(--ui);font-size:12px;color:var(--muted);
    background:transparent;border:1px solid var(--line);border-radius:7px;
    padding:5px 10px;cursor:pointer;text-decoration:none;
  }
  .esp-pdf:hover{color:var(--text);border-color:var(--muted)}

  /* --- L'identité, modifiable --------------------------------------- */
  .esp-id{display:grid;grid-template-columns:152px 1fr auto;gap:14px;align-items:baseline;padding:14px 2px}
  .esp-id>b{font-family:var(--disp);font-size:13.5px;font-weight:600;color:var(--muted)}
  .esp-id-val{font-size:14px;line-height:1.55;white-space:pre-line}
  .esp-id-val em{font-style:normal;color:var(--muted-2);font-size:12.5px}
  .esp-id-vide{color:var(--warn);font-size:13.5px}
  @media(max-width:620px){
    .esp-id{grid-template-columns:1fr auto;gap:6px 12px}
    .esp-id>b{grid-column:1/-1}
  }

  /* --- La photo ------------------------------------------------------ */
  .esp-photo{display:flex;align-items:center;gap:16px;padding:16px 2px}
  .esp-photo-rond{
    flex:none;width:64px;height:64px;border-radius:50%;overflow:hidden;
    display:grid;place-items:center;
    background:var(--yellow);color:#101010;font-family:var(--disp);font-weight:800;font-size:21px;
  }
  .esp-photo-rond img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
  .esp-photo-txt{flex:1;min-width:0}
  .esp-photo-txt b{display:block;font-family:var(--disp);font-size:13.5px;font-weight:600}
  .esp-photo-txt span{display:block;font-size:12.5px;color:var(--muted-2);margin-top:3px;line-height:1.5}
  .esp-photo-act{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}

  /* Les boutons secondaires de l'espace sont plus discrets que ceux du
     produit : ils sont nombreux, et aucun n'est l'action principale. */
  .esp-vue .cta.fantome{padding:8px 14px;font-size:12.5px;border-radius:9px}

/* --- La confirmation de l'adresse --------------------------------------
   Un rappel, pas une porte : il ne bloque rien, et il disparait des que
   l'adresse est confirmee. Decision du 30 septembre 2026. */
.esp-avis{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:14px 16px;border-radius:12px;margin:0 0 22px;
  background:rgba(255,176,32,.08);border:1px solid rgba(255,176,32,.32);
}
.esp-avis b{display:block;font-family:var(--disp);font-size:13.5px;color:var(--warn)}
.esp-avis span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.esp-avis button{flex:none}

/* La bande qui repond au lien du message. Elle passe toute seule. */
.bandeau-validation{
  position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:200;
  max-width:min(92vw,520px);
  padding:13px 20px;border-radius:12px;
  font-family:var(--ui);font-size:13.5px;text-align:center;
  background:var(--ink);border:1px solid var(--line-strong);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  animation:entree .3s ease;
}
.bandeau-validation.ok{border-color:rgba(53,208,138,.5);color:var(--ok)}
.bandeau-validation.rate{border-color:rgba(255,176,32,.5);color:var(--warn)}


/* ==========================================================================
   L'ACCUEIL EN DEUX VUES, ET LE SELECTEUR DE CHANTIER
   Ajoutes le 30 septembre 2026. Le selecteur est TEMPORAIRE : il se retire
   avec la fonction barreDeChantier() dans app.js.
   ========================================================================== */
.etat-vide{
  padding:34px 2px;color:var(--muted);font-size:15px;
}
.etat-vide p{margin:0 0 18px}

.chantier{
  position:fixed;right:14px;bottom:14px;z-index:98;
  display:flex;align-items:center;gap:6px;
  padding:7px 10px;border-radius:11px;
  background:rgba(7,7,9,.94);backdrop-filter:blur(14px);
  border:1px solid var(--line-strong);
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}
.chantier>span{
  font-family:var(--disp);font-size:9.5px;font-weight:800;letter-spacing:.14em;
  color:var(--miss);margin-right:4px;
}
.chantier button{
  font-family:var(--ui);font-size:11.5px;color:var(--muted);
  background:transparent;border:1px solid var(--line-strong);border-radius:7px;
  padding:4px 9px;cursor:pointer;white-space:nowrap;
}
.chantier button:hover{color:var(--text);border-color:var(--muted)}
.chantier button.actif{background:var(--yellow);color:#111;border-color:var(--yellow);font-weight:600}
/* Il flotte, donc il recouvrirait le bas de la page : on lui reserve sa
   hauteur. Vu a l'ecran, il masquait la derniere rangee du banc d'essai. */
body:has(.chantier){padding-bottom:64px}
/* Sous « ?maquette » les barres occupent deja le bas : on remonte le
   selecteur pour qu'il ne se pose pas dessus. */
body:has(.maquette-barre) .chantier{bottom:auto;top:78px}
body:has(.maquette-barre):has(.chantier){padding-bottom:0}


/* ---------- « Ou travailler autre chose » (vue de quelqu'un qui revient) --- */
.autre{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.autre>.etiquette{margin-bottom:14px}
.autre-carte{
  padding:16px 18px;border-radius:14px;margin-bottom:12px;
  background:rgba(255,255,255,.028);border:1px solid var(--line);
}
.autre-carte h3{
  font-family:var(--disp);font-size:15px;font-weight:700;margin:0 0 6px;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
.autre-carte p{margin:0;font-size:13px;color:var(--muted);line-height:1.55;max-width:70ch}
.autre-carte p b{color:var(--text);font-weight:600}
.autre-carte code{font-family:ui-monospace,monospace;font-size:12px;color:var(--muted-2)}
.autre-carte .puces{margin-top:14px}
/* Ce qui n'est pas encore possible se dit, mais ne s'offre pas : pas de
   bouton, pas de survol, et un ton qui ne promet rien. */
.autre-carte.bloque{background:transparent;border-style:dashed}
.autre-carte.bloque h3{color:var(--muted)}
.autre-carte.bloque p{color:var(--muted-2)}
.autre-tag{
  font-family:var(--ui);font-size:10px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--warn);
  border:1px solid rgba(255,176,32,.35);border-radius:6px;padding:2px 7px;
}

/* --------------------------------------------------------------------------
   LE BANDEAU D'ESSAI DU VISAGE — 5 octobre 2026.
   Inerte sans « ?visage » dans l'adresse : aucun client ne le verra jamais.
   Il se pose en bas, hors du chemin du regard pendant une séance.
   -------------------------------------------------------------------------- */
#essaiVisage{
  position:fixed;left:12px;bottom:12px;z-index:9999;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:calc(100vw - 24px);
  padding:7px 10px;border-radius:10px;
  background:rgba(12,14,20,.92);border:1px solid var(--line);
  backdrop-filter:blur(6px);
  font-size:11.5px;color:var(--muted);
}
#essaiVisage b{color:var(--yellow);font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin-right:2px}
#essaiVisage button{
  padding:4px 9px;border-radius:7px;cursor:pointer;
  background:none;border:1px solid var(--line);color:inherit;font:inherit;
}
#essaiVisage button:hover:not(:disabled){background:rgba(255,255,255,.06)}
#essaiVisage button.actif{background:var(--yellow);border-color:var(--yellow);color:#111;font-weight:600}
#essaiVisage button:disabled{opacity:.35;cursor:not-allowed}
#essaiVisage span{opacity:.6;margin-left:4px}