/* Pistes — une seule idée par écran, beaucoup d'air, rien de décoratif.
   Palette papier : un fond chaud, une encre sombre, un seul accent. */
/* Les univers (lot 5) : choisis par le jeune lui-même, jamais par genre. Tous clairs, accent assez sombre
   pour le texte blanc des boutons (contraste supérieur à 4,5). « papier » est celui de :root. */
:root[data-univers="ocean"]{--fond:#f1f6f7;--accent:#0f5566;--accent-clair:#e4f1f3;--accent-bord:#a6cfd7}
:root[data-univers="foret"]{--fond:#f3f6f1;--accent:#2e5a37;--accent-clair:#e8f2ea;--accent-bord:#b3d1b9}
:root[data-univers="volcan"]{--fond:#f8f3f0;--accent:#8f2f10;--accent-clair:#fbece5;--accent-bord:#e6b8a4}
:root{
  --fond:#f7f5f1; --carte:#fff; --encre:#1c1a17; --doux:#6b6459; --tres-doux:#948d81;
  --ligne:#e4dfd6; --ligne-forte:#cfc7b9;
  --accent:#1e3a5f; --accent-clair:#eef2f8; --accent-bord:#b9c8dc;
  --chaud:#8a4b2a; --chaud-clair:#fdf4ea;
  --rec:#c62828;   /* l'enregistrement en cours : le rouge que tout le monde reconnaît, 5,6 pour 1 sur blanc */
  --vert:#2c6a4a; --vert-clair:#eaf4ee;
  --rayon:14px; --large:34rem;
  --ombre:0 1px 2px rgba(28,26,23,.04), 0 2px 8px rgba(28,26,23,.03);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fond);color:var(--encre);
  font:17px/1.58 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding:0 0 env(safe-area-inset-bottom);
}
main{max-width:var(--large);margin:0 auto;padding:16px 20px 72px}

h1{font-size:25px;line-height:1.26;font-weight:640;margin:0 0 16px;letter-spacing:-.018em;text-wrap:balance}
h1.sobre{font-size:21px;font-weight:600;margin-bottom:18px}
h2{font-size:19px;font-weight:620;margin:0 0 12px;letter-spacing:-.012em}
h3{font-size:16px;font-weight:620;margin:0 0 5px;letter-spacing:-.006em}
p{margin:0 0 14px}
p:last-child{margin-bottom:0}
a{color:var(--accent);text-underline-offset:2px}
.doux{color:var(--doux);font-size:15px;line-height:1.55}
.petit{font-size:14px;line-height:1.5}
.centre{text-align:center}
.chapeau{color:var(--doux);font-size:15px;margin:-4px 0 14px}

/* fil de progression : la seule mesure affichée en continu, et sans chiffre */
.fil{position:sticky;top:0;z-index:5;height:3px;background:var(--ligne)}
.fil span{display:block;height:100%;background:var(--accent);transition:width .4s cubic-bezier(.4,0,.2,1)}

/* repère de position : le bloc en cours, une fois, en petit */
.repere{
  font-size:12.5px;letter-spacing:.055em;text-transform:uppercase;color:var(--tres-doux);
  font-weight:560;margin:0 0 12px;
}
.repere b{color:var(--doux);font-weight:640}

.etape{animation:entree .26s cubic-bezier(.2,0,.2,1) both}
@keyframes entree{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* la promesse de confidentialité, discrète mais présente à chaque écran qui la mérite */
.pastille{
  display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--doux);
  background:#efebe3;border-radius:11px;padding:11px 13px;margin:0 0 20px;
}
.pastille b{color:var(--tres-doux);font-weight:700;line-height:1.35;flex:0 0 auto}
.pastille.partage{background:var(--chaud-clair);color:var(--chaud)}
.pastille.partage b{color:var(--chaud)}

/* écran d'explication : ce qu'on va faire, et pourquoi certaines questions se ressemblent */
.intro h1{margin-bottom:14px}
.note{
  background:var(--accent-clair);border:1px solid var(--accent-bord);border-radius:var(--rayon);
  padding:14px 16px;font-size:15px;line-height:1.55;color:#2a3d54;margin:16px 0 0;
}
dl.def{margin:16px 0 0;padding:0}
dl.def dt{font-weight:640;font-size:16px;margin:0}
dl.def dd{margin:1px 0 12px;color:var(--doux);font-size:15px;line-height:1.5}
dl.def dd:last-child{margin-bottom:0}

details.regle{
  background:var(--carte);border:1px solid var(--ligne);border-radius:var(--rayon);
  padding:13px 15px;margin:0 0 20px;
}
details.regle summary{font-weight:600;font-size:15.5px;cursor:pointer;list-style:none}
details.regle summary::-webkit-details-marker{display:none}
details.regle summary::after{content:" ▾";color:var(--tres-doux)}
details.regle[open] summary::after{content:" ▴"}
details.regle dl.def{margin-top:13px}

/* champs */
.groupe{margin-bottom:24px}
.champ{display:block;font-weight:620;font-size:16px;margin:0 0 6px}
textarea,input[type=text],input[type=email]{
  width:100%;font:inherit;color:inherit;background:var(--carte);
  border:1px solid var(--ligne-forte);border-radius:var(--rayon);padding:14px 15px;
  box-shadow:var(--ombre);
}
textarea{resize:vertical;min-height:104px;line-height:1.55}
textarea:focus,input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
textarea.manque{border-color:var(--chaud);background:var(--chaud-clair)}
.rappel{color:var(--chaud);font-size:14.5px;margin:0 0 4px}

button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.bouton{
  display:block;width:100%;background:var(--accent);color:#fff;font-weight:620;font-size:17px;
  padding:15px 18px;border-radius:var(--rayon);margin-top:20px;
  box-shadow:0 1px 2px rgba(30,58,95,.2);transition:transform .08s,opacity .12s;
}
.bouton:active{transform:scale(.99)}
.bouton:disabled{opacity:.38;cursor:default;box-shadow:none}
.bouton.discret{background:none;color:var(--doux);font-weight:540;font-size:16px;
  margin-top:6px;padding:12px;box-shadow:none}
.bouton.discret:hover{color:var(--encre)}

/* choix forcé : deux blocs de poids strictement égal */
.paire{display:grid;gap:11px;margin-top:4px}
.choix{
  text-align:left;background:var(--carte);border:1px solid var(--ligne);border-radius:var(--rayon);
  padding:18px 19px;line-height:1.45;font-size:16.5px;box-shadow:var(--ombre);
  transition:border-color .12s,background .12s,transform .08s;
}
.choix:hover{border-color:var(--ligne-forte)}
.choix:active{transform:scale(.99)}
.choix.pris{border-color:var(--accent);background:var(--accent-clair);box-shadow:none}
.choix.juste{border-color:var(--vert);background:var(--vert-clair)}
.choix.faux{border-color:var(--chaud);background:var(--chaud-clair);opacity:.75}
.choix:disabled{cursor:default}
.entre{text-align:center;color:var(--tres-doux);font-size:13px;letter-spacing:.06em;margin:1px 0}

/* MaxDiff */
.entetes{display:grid;grid-template-columns:1fr 42px 42px;gap:10px;padding:0 15px 7px;
  font-size:12px;color:var(--tres-doux);text-align:center;letter-spacing:.03em}
.maxdiff{border:1px solid var(--ligne);border-radius:var(--rayon);overflow:hidden;
  background:var(--carte);box-shadow:var(--ombre)}
.mrow{display:grid;grid-template-columns:1fr 42px 42px;align-items:center;gap:10px;
  padding:13px 15px;border-top:1px solid var(--ligne)}
.mrow:first-child{border-top:0}
.mrow span{font-size:16px;line-height:1.35}
.pion{width:42px;height:42px;border-radius:11px;border:1px solid var(--ligne-forte);
  display:grid;place-items:center;font-size:17px;color:var(--doux);background:var(--fond)}
.pion.on{background:var(--accent);border-color:var(--accent);color:#fff}
.pion.moins.on{background:#7d7568;border-color:#7d7568}

/* grille j'aimerais / j'y arriverais / je m'y vois : des pastilles écrites, pas des colonnes */
.grille{display:grid;gap:9px}
.grow{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--rayon);
  padding:14px 15px;box-shadow:var(--ombre)}
.activite{display:block;font-size:16.5px;line-height:1.35;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  border:1px solid var(--ligne-forte);background:var(--fond);border-radius:999px;
  padding:8px 14px;font-size:14.5px;color:var(--doux);transition:all .12s;
}
.chip:active{transform:scale(.97)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:560}

/* cases à cocher en liste */
.coche{display:flex;gap:12px;align-items:flex-start;background:var(--carte);
  border:1px solid var(--ligne);border-radius:var(--rayon);padding:15px;margin-bottom:9px;
  text-align:left;width:100%;line-height:1.42;font-size:16.5px;box-shadow:var(--ombre)}
.coche .boite{flex:0 0 22px;height:22px;border:1px solid var(--ligne-forte);border-radius:7px;
  margin-top:1px;display:grid;place-items:center;color:transparent;font-size:13px}
.coche.on{border-color:var(--accent);background:var(--accent-clair);box-shadow:none}
.coche.on .boite{background:var(--accent);border-color:var(--accent);color:#fff}

ul.promesse{margin:0 0 20px;padding:14px 16px 14px 32px;background:var(--chaud-clair);
  border-radius:var(--rayon);color:var(--chaud);font-size:15px;line-height:1.5}
ul.promesse li{margin-bottom:5px}
ul.promesse li:last-child{margin-bottom:0}

/* le jeu d'attente */
.jeu .metier{font-size:22px;font-weight:640;letter-spacing:-.015em;margin:0 0 14px}
.verdict{font-size:15px;color:var(--doux);margin:9px 0 0;text-align:center}
.attente{text-align:center;padding:72px 0;color:var(--doux)}
.attente .rond{width:34px;height:34px;margin:0 auto 20px;border:3px solid var(--ligne);
  border-top-color:var(--accent);border-radius:50%;animation:tourne .9s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}

/* restitution */
.phrase{font-size:21px;line-height:1.48;font-weight:520;background:var(--carte);
  border:1px solid var(--ligne);border-left:3px solid var(--accent);
  border-radius:var(--rayon);padding:23px;box-shadow:var(--ombre);letter-spacing:-.008em}
.bloc{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--rayon);
  padding:18px 19px;margin-bottom:10px;box-shadow:var(--ombre)}
.bloc.accent{border-left:3px solid var(--accent)}
.bloc .meta{font-size:13px;color:var(--tres-doux);margin:2px 0 9px;letter-spacing:.01em}
.bloc .quoi{font-size:15.5px;color:var(--doux);margin:0 0 9px}
.bloc .reserve{font-size:14.5px;color:var(--doux);border-top:1px solid var(--ligne);
  padding-top:10px;margin-top:11px}
.neuf{display:inline-block;font-size:10.5px;font-weight:680;letter-spacing:.05em;text-transform:uppercase;
  color:var(--chaud);background:var(--chaud-clair);border-radius:5px;padding:3px 7px;
  vertical-align:3px;margin-left:8px}
section{margin:34px 0 0}
ol.questions{margin:0;padding-left:1.25em;font-size:16.5px}
ol.questions li{margin-bottom:10px}
.sortie{margin-top:34px;padding-top:24px;border-top:1px solid var(--ligne)}
.erreur{background:var(--chaud-clair);border:1px solid #f0dcc4;color:var(--chaud);
  border-radius:var(--rayon);padding:14px 16px;margin-top:14px;font-size:15px}

@media (min-width:560px){
  main{padding-top:28px}
  h1{font-size:27px}
}
@media print{
  .fil,.bouton,button,.sortie{display:none}
  body{background:#fff}
  .bloc,.phrase{break-inside:avoid;box-shadow:none}
}

/* relecture d'une adresse avant envoi : c'est la seule vérification qui attrape une faute
   dans la partie avant l'arobase. On la met en grand, espacée, difficile à survoler. */
.relire{
  font:600 21px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.02em;word-break:break-all;background:var(--carte);
  border:1px solid var(--ligne-forte);border-radius:var(--rayon);
  padding:20px;margin:0;text-align:center;box-shadow:var(--ombre);
}
.suggestion{
  font:600 17px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  margin:9px 0 0;word-break:break-all;
}
.erreur.alerte{margin:0 0 18px}
.erreur .bouton{margin-top:12px}

/* un lien qui a l'allure d'un bouton discret */
a.bouton.lien{
  text-align:center;display:block;text-decoration:underline;
  text-decoration-color:var(--ligne-forte);text-underline-offset:4px;
}
a.bouton.lien::after{content:" →";text-decoration:none;display:inline-block}
a.bouton.lien:hover{color:var(--accent);text-decoration-color:var(--accent)}

/* la page « méthode » : de la prose, lue par un adulte, souvent sur un ordinateur */
.prose{max-width:40rem;margin:0 auto;padding:30px 20px 80px}
.prose h1{font-size:28px;margin-bottom:18px}
.prose h2{font-size:21px;margin:42px 0 14px;padding-top:18px;border-top:1px solid var(--ligne)}
.prose h2:first-of-type{border-top:0;padding-top:0}
.prose h3{font-size:17px;margin:26px 0 8px;color:var(--accent)}
.prose p{margin:0 0 15px;line-height:1.62}
.prose .chapeau{font-size:16px;margin-bottom:8px}
.prose strong{font-weight:640}
.prose em{font-style:italic}
table.chiffres{width:100%;border-collapse:collapse;margin:16px 0 18px;background:var(--carte);
  border:1px solid var(--ligne);border-radius:var(--rayon);overflow:hidden;box-shadow:var(--ombre)}
table.chiffres td{padding:11px 15px;border-top:1px solid var(--ligne);font-size:16px}
table.chiffres tr:first-child td{border-top:0}
table.chiffres td:last-child{text-align:right;font-weight:620;white-space:nowrap}
table.chiffres tr.fort td{background:var(--chaud-clair);color:var(--chaud)}
ul.liste{margin:0 0 15px;padding-left:1.15em}
ul.liste li{margin-bottom:9px;line-height:1.55}
ol.sources{margin:0 0 15px;padding-left:1.35em;font-size:14.5px;color:var(--doux);line-height:1.5}
ol.sources li{margin-bottom:8px}
.retour-accueil{margin-top:40px;padding-top:22px;border-top:1px solid var(--ligne)}

/* ---------- le compteur : toujours ce qui reste, jamais ce qu'on a perdu ---------- */
.compteur{
  background:var(--accent-clair);border:1px solid var(--accent-bord);border-radius:var(--rayon);
  padding:12px 15px;margin:18px 0 0;font-size:15.5px;color:#2a3d54;text-align:center;
}
.compteur strong{font-size:20px;font-weight:680}

/* ---------- le tri de cartes ---------- */
.tas{position:relative;min-height:268px;margin:6px 0 4px;display:grid;place-items:center}
.carte{
  width:100%;background:var(--carte);border:1px solid var(--ligne);border-radius:18px;
  padding:34px 26px;box-shadow:0 2px 6px rgba(28,26,23,.05),0 10px 26px rgba(28,26,23,.05);
  touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;
  transition:transform .18s cubic-bezier(.2,0,.2,1),opacity .18s;
}
.carte.tenue{cursor:grabbing;transition:none}
.carte h2{font-size:24px;line-height:1.28;margin:0 0 12px;letter-spacing:-.015em}
.carte p{color:var(--doux);font-size:16px;margin:0}
.carte.partie.oui{transform:translateX(120%) rotate(14deg);opacity:0}
.carte.partie.non{transform:translateX(-120%) rotate(-14deg);opacity:0}
.carte.partie.bof{transform:translateY(-40px);opacity:0}
.verdict-carte{
  position:absolute;top:16px;left:50%;transform:translateX(-50%);
  font:700 12px/1 system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;
  padding:7px 13px;border-radius:999px;opacity:0;transition:opacity .12s;
}
.verdict-carte.oui{background:var(--vert-clair);color:var(--vert);opacity:1}
.verdict-carte.non{background:var(--chaud-clair);color:var(--chaud);opacity:1}
.trois{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:9px;margin-top:14px}
.pouce{
  border:1px solid var(--ligne-forte);background:var(--carte);border-radius:var(--rayon);
  padding:14px 10px;font-weight:580;font-size:15.5px;color:var(--doux);box-shadow:var(--ombre);
  transition:transform .08s,background .12s;
}
.pouce:active{transform:scale(.97)}
.pouce.oui{background:var(--accent);border-color:var(--accent);color:#fff}
.pouce.non{color:var(--chaud)}
.rappel-cartes{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.rappel-cartes span{
  font-size:13.5px;color:var(--doux);background:var(--sable,#efebe3);
  border-radius:999px;padding:5px 11px;
}

/* ---------- les décors ---------- */
.grille-decors{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:9px}
.tuile{
  background:var(--carte);border:1px solid var(--ligne);border-radius:var(--rayon);
  padding:15px 14px;text-align:left;font-size:15.5px;line-height:1.35;box-shadow:var(--ombre);
  transition:all .12s;
}
.tuile:active{transform:scale(.98)}
.tuile.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:560}

/* ---------- la panoplie ---------- */
.famille{margin-top:30px}
.famille>h2{font-size:17px;font-weight:580;color:var(--doux);margin-bottom:11px;
  letter-spacing:0;text-transform:none}
.famille>h2 em{font-style:normal;font-weight:680;color:var(--encre)}
.famille.surprise>h2 em{color:var(--chaud)}
.bloc.metier h3{font-size:16.5px}
.bloc.barre{opacity:.72;border-left:3px solid var(--chaud)}
.bloc.cliquable{cursor:pointer;transition:border-color .12s}
.bloc.cliquable:hover{border-color:var(--accent)}
.bloc.cliquable::after{content:"ouvrir →";display:block;margin-top:8px;font-size:13px;
  color:var(--accent)}
.mini{
  display:inline-block;margin-left:8px;font-size:13px;color:var(--accent);
  text-decoration:underline;text-underline-offset:3px;
}


/* ---------- la dictée : un micro qui respire avec la voix ---------- */
.dictee{display:flex;align-items:center;gap:12px;margin:8px 0 0;min-height:44px}
.micro{position:relative;width:44px;height:44px;border-radius:50%;background:var(--carte);
  border:1px solid var(--ligne-forte);display:grid;place-items:center;flex:0 0 44px;
  box-shadow:var(--ombre)}
.micro .ico{font-size:19px;line-height:1;position:relative;z-index:1}
.micro .onde{position:absolute;inset:0;border-radius:50%;background:var(--accent);opacity:0;
  transform:scale(1);transition:transform .08s linear,opacity .08s linear;z-index:0}
/* en cours d'enregistrement : le micro en rouge, un anneau qui pulse même sans son, le compteur (13/10/2026) */
.dictee.actif .micro,.dictee.principal.actif .micro{background:var(--rec);border-color:var(--rec)}
.dictee.actif .micro .ico{filter:grayscale(1) brightness(3)}
.dictee.actif .micro::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--rec);
  animation:enregistre 1.3s ease-out infinite;pointer-events:none}
@keyframes enregistre{from{transform:scale(.92);opacity:.9}to{transform:scale(1.3);opacity:0}}
.dictee-etat .rec{display:inline-flex;align-items:center;gap:6px;font-weight:650;color:var(--rec);
  font-variant-numeric:tabular-nums;margin-right:4px}
.dictee-etat .rec::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--rec);
  animation:clignote 1s steps(2,start) infinite}
@keyframes clignote{to{visibility:hidden}}
@media (prefers-reduced-motion:reduce){.dictee.actif .micro::after,.dictee-etat .rec::before{animation:none}}
.dictee-etat{font-size:14px;color:var(--doux);flex:1;line-height:1.4}
.dictee .stop{background:var(--chaud);color:#fff;border-radius:999px;padding:9px 16px;
  font-weight:600;font-size:14.5px;flex:0 0 auto}
.dictee.attente .micro .ico{animation:tourne 1s linear infinite}
/* sur les récits, le micro passe en premier (décision de Pierre, 12/10/2026) */
.dictee.principal{margin:0 0 12px;padding:12px 14px;background:var(--accent-clair);border:1px solid var(--accent-bord);
  border-radius:var(--rayon)}
.dictee.principal .micro{width:60px;height:60px;flex-basis:60px;border-color:var(--accent)}
.dictee.principal .micro .ico{font-size:26px}
.dictee.principal .dictee-etat{color:#2a3d54}


/* ---------- l'entretien ---------- */
.echange{display:grid;gap:9px;margin:0 0 16px}
.toi{align-self:end;justify-self:end;max-width:88%;background:var(--accent-clair);
  border:1px solid var(--accent-bord);border-radius:16px 16px 4px 16px;padding:11px 15px;
  margin:0;color:#2a3d54;font-size:15.5px}
.bulle{justify-self:start;max-width:92%;background:var(--carte);border:1px solid var(--ligne);
  border-radius:16px 16px 16px 4px;padding:12px 16px;margin:0;box-shadow:var(--ombre);font-size:16px}
.bulle.question{font-weight:560}
.attente-bulle{width:74px;padding:14px 18px}
.points{display:inline-flex;gap:5px}
.points i{width:7px;height:7px;border-radius:50%;background:var(--tres-doux);display:block;
  animation:pulse 1.1s infinite ease-in-out}
.points i:nth-child(2){animation-delay:.18s}.points i:nth-child(3){animation-delay:.36s}
@keyframes pulse{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}


/* ---------- le podium ---------- */
ol.podium{list-style:none;counter-reset:rang;margin:0 0 16px;padding:0;display:grid;gap:8px}
ol.podium li{counter-increment:rang;display:flex;align-items:center;gap:12px;min-height:50px;
  background:var(--carte);border:1px dashed var(--ligne-forte);border-radius:var(--rayon);
  padding:10px 14px;font-size:16px;color:var(--tres-doux)}
ol.podium li::before{content:counter(rang);width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;background:var(--fond);border:1px solid var(--ligne-forte);
  font-weight:680;font-size:14px;color:var(--doux);flex:0 0 28px}
ol.podium li.pris{border-style:solid;border-color:var(--accent);color:var(--encre);font-weight:560}
ol.podium li:first-child.pris::before{background:var(--accent);border-color:var(--accent);color:#fff}
.rappel-cartes.grand{gap:8px;margin-bottom:6px}
.rappel-cartes.grand .chip{font-size:15px;padding:10px 15px}

.etape ul.liste{margin:0;padding-left:1.15em}
.etape ul.liste li{margin-bottom:7px}


/* ---------- les jeux ---------- */
.trois.deux{grid-template-columns:1fr 1.4fr}
.bloc.juste{border-left:3px solid var(--vert)}
.bloc.faux{border-left:3px solid var(--chaud)}
.pari{display:flex;align-items:center;justify-content:center;gap:22px;margin:18px 0 6px}
.pari span{font-size:44px;font-weight:680;min-width:64px;text-align:center;letter-spacing:-.02em}
.pari .pion{width:52px;height:52px;font-size:24px}


/* ---------- la liste complète ---------- */
.info{margin:12px 0 0;padding:10px 13px;border-left:2px solid var(--ligne-forte)}
.filtres{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:10px 0 14px}
.filtres select{font:inherit;font-size:14px;padding:9px 10px;border:1px solid var(--ligne-forte);
  border-radius:10px;background:var(--carte);color:var(--encre);min-width:0}
.liste details summary{cursor:pointer;list-style:none;font-size:16px}
.liste details summary::-webkit-details-marker{display:none}
.liste details[open] summary{margin-bottom:8px}
.liste .mini{margin:6px 0 0}
@media (max-width:520px){.filtres{grid-template-columns:1fr}}

.carte.enonce{padding:24px 22px;margin:4px 0 14px;cursor:default}
.carte.enonce h2{font-size:21px;margin:0}


/* ---------- les trois séances, et le verre ---------- */
ol.plan{list-style:none;margin:0 0 18px;padding:0;counter-reset:etape;display:grid;gap:9px}
ol.plan li{counter-increment:etape;background:var(--carte);border:1px solid var(--ligne);
  border-radius:var(--rayon);padding:13px 15px 13px 46px;position:relative;box-shadow:var(--ombre)}
ol.plan li::before{content:counter(etape);position:absolute;left:13px;top:13px;width:24px;height:24px;
  border-radius:50%;background:var(--accent);color:#fff;font-weight:680;font-size:13px;
  display:grid;place-items:center}
ol.plan strong{font-weight:640}
ol.plan .duree{float:right;font-size:13px;color:var(--tres-doux)}
ol.plan p{margin:3px 0 0;font-size:15px;color:var(--doux);line-height:1.45}
ol.plan p.rend{color:var(--accent);font-size:14px;margin-top:6px}
ul.promesse.sobre{background:var(--accent-clair);color:#2a3d54;border:1px solid var(--accent-bord)}
/* Le verre (chantier d'interface, 12/10/2026) : un seul pour tout le parcours ; un trait par fin de séance. */
svg.verre{width:30px;height:40px;flex:0 0 30px;overflow:visible}
svg.verre.grand{width:54px;height:72px;flex:0 0 54px}
svg.verre .dedans{fill:var(--carte)}
svg.verre .eau{fill:var(--accent-bord)}
svg.verre .trait{stroke:var(--accent);stroke-width:1.4;stroke-linecap:round}
svg.verre .paroi{fill:none;stroke:var(--ligne-forte);stroke-width:1.6;stroke-linejoin:round}
.jauge{display:flex;align-items:center;gap:11px;margin:-4px 0 18px}
.jauge-texte{display:flex;flex-direction:column;line-height:1.35}
.jauge-texte b{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--doux);font-weight:640}
.jauge-texte span{font-size:13px;color:var(--tres-doux)}
.seances{display:flex;gap:14px;align-items:flex-start}
.seances ol.plan{flex:1;min-width:0}
.seances.accueil{align-items:center;margin:0 0 14px}
.seances.accueil p{margin:0 0 6px}
.note.correction{margin:-2px 0 18px}
#pied .pause{margin-top:28px;font-size:14.5px;color:var(--tres-doux)}
#pied .pause:hover{color:var(--doux)}
.lien-secours{margin:8px 0 0;word-break:break-all;font-size:14px}
@media print{#entete,#pied{display:none}}
/* corriger ses cartes depuis le récapitulatif : toutes sur un écran */
.liste-cartes{display:grid;gap:7px;margin:4px 0 0}
.lc{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--rayon);padding:11px 13px;
  display:flex;flex-direction:column;gap:7px;box-shadow:var(--ombre)}
.lc>span:first-child{font-size:15.5px;line-height:1.35}
.lc-choix{display:flex;gap:6px;flex-wrap:wrap}
.lc-choix .chip{padding:6px 12px;font-size:13.5px}
.rappel{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--rayon);padding:4px 15px;margin:0 0 16px}
.rappel p{margin:9px 0;font-size:15.5px;line-height:1.45}
.rappel span{display:block;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--tres-doux);margin-bottom:1px}
/* l'introduction d'un bloc, fondue en tête de son premier écran ; sa ligne d'information en bas */
.chapeau-bloc{margin:-2px 0 16px;font-size:15px;line-height:1.5;color:var(--doux)}
.chapeau-bloc p{margin:0}
details.pourquoi{margin-top:4px}
details.pourquoi summary{cursor:pointer;color:var(--accent);font-size:14px}
details.pourquoi p{margin-top:6px;font-size:14.5px}
p.info-bloc{margin:22px 0 0;padding-top:12px;border-top:1px solid var(--ligne);font-size:13.5px;line-height:1.5;color:var(--tres-doux)}
/* « Le savais-tu ? » : pendant les relances, sous les trois points ; pendant la rédaction des pistes (13/10/2026) */
.savais{background:var(--accent-clair);border:1px solid var(--accent-bord);border-radius:var(--rayon);
  padding:16px 18px;margin:18px 0 16px;line-height:1.5;animation:entree .4s ease both}
.savais p{margin:0 0 8px}
.savais p:last-child{margin-bottom:0}
.savais .savais-titre{font-size:12.5px;font-weight:650;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.savais .metier{font-size:20px;font-weight:640;letter-spacing:-.01em;margin:0 0 6px}
.chapeau-bloc p.portes{color:var(--encre);font-weight:600;margin-bottom:6px}
/* les retours de fin de séance 2 et 3 */
.image-seance{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--rayon);padding:14px 16px;margin:0 0 16px;box-shadow:var(--ombre)}
.image-seance p{margin:8px 0 0;font-size:15px}
.etiquette{display:block;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--tres-doux);margin:12px 0 4px}
.image-seance .etiquette:first-child{margin-top:0}
ol.cartes-image{margin:0;padding-left:22px;font-size:16px;line-height:1.5}
ol.cartes-image em{font-style:normal;font-size:13px;color:var(--accent);margin-left:4px}
p.citation{font-style:italic;color:var(--doux)}
ul.valeurs-ordre{margin:0 0 14px;padding-left:20px;font-size:15.5px;line-height:1.55}
ul.valeurs-ordre li:nth-child(-n+3){font-weight:600}
ul.valeurs-ordre li:nth-last-child(-n+2){color:var(--doux)}
p.semaine{font-size:15.5px;line-height:1.6;margin:0 0 4px}
.grow.depliee{animation:deplie .35s ease-out}
.grow.depliee .repere{margin-bottom:2px}
@keyframes deplie{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* le choix des couleurs (lot 5) */
.univers{display:flex;gap:10px;flex-wrap:wrap}
.univers button{display:flex;flex-direction:column;align-items:center;gap:5px;font:inherit;font-size:13px;color:var(--doux);
  background:none;border:0;padding:4px;cursor:pointer}
.univers .rond{width:38px;height:38px;border-radius:50%;border:3px solid transparent;box-shadow:0 0 0 1px var(--ligne-forte)}
.univers button.on .rond{border-color:var(--carte);box-shadow:0 0 0 2px var(--encre)}
.univers button.on{color:var(--encre);font-weight:600}
.u-papier{background:#1e3a5f}.u-ocean{background:#0f5566}.u-foret{background:#2e5a37}.u-volcan{background:#8f2f10}
/* la case des relances (lot 3) */
.case-relances{display:flex;gap:10px;align-items:flex-start;margin:6px 0 14px;padding:11px 13px;background:var(--carte);
  border:1px solid var(--ligne);border-radius:var(--rayon);font-size:15px;line-height:1.45;cursor:pointer}
.case-relances input{width:20px;height:20px;margin:1px 0 0;flex:0 0 20px;accent-color:var(--accent)}
.relances-actives .mini{margin-left:6px}
/* le retour de fin de séance : ses phrases, dont une à toucher */
.phrases{display:grid;gap:8px;margin:0 0 16px}
.phrase-choix{display:block;width:100%;text-align:left;font:inherit;font-size:15.5px;line-height:1.45;color:var(--encre);
  background:var(--carte);border:1px solid var(--ligne);border-radius:var(--rayon);padding:10px 14px;cursor:pointer}
.phrase-choix span{display:block;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--tres-doux);margin-bottom:2px}
.phrase-choix.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-clair)}
.phrase-choix.on span{color:var(--accent)}
.phrase-choix.fixe{cursor:default}

/* ---------- les fiches « ce que tes réponses révèlent » ---------- */
.fiches{display:grid;gap:9px}
@media (min-width:560px){.fiches{grid-template-columns:1fr 1fr}}
.fiche h3{margin-bottom:4px}
.fiche p{margin:0 0 4px}

/* ---------- le volume d'emploi : un attribut, pas un tri ---------- */
.volume{margin:2px 0 6px}
.volume.large{color:var(--vert)}
.volume.etroit{color:var(--chaud)}
.volume .origine{color:var(--tres-doux)}
.metier .contre{color:var(--chaud)}

/* ---------- la page de pistes : sommaire et sections repliées ---------- */
nav.sommaire-pistes{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 6px}
nav.sommaire-pistes a{font-size:13.5px;text-decoration:none;color:var(--accent);background:var(--accent-clair);
  border:1px solid var(--accent-bord);border-radius:999px;padding:5px 11px}
h3.sous{font-size:17px;margin:18px 0 8px;font-weight:640}
details.section{margin:22px 0 0}
details.section summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px}
details.section summary::-webkit-details-marker{display:none}
details.section summary::before{content:"▸";color:var(--tres-doux);font-size:15px}
details.section[open] summary::before{content:"▾"}
details.section summary h2{margin:0}
nav.sommaire-pistes a.ici{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.bloc.cliquable[data-cible]::after{content:"modifier →"}

/* ---------- les chemins de formation (lot D) : frise de haut en bas, lisible sur téléphone ---------- */
.ch-bouton{display:inline-block;margin:10px 0 0;font-size:14.5px;font-weight:580;color:var(--accent);
  background:var(--accent-clair);border:1px solid var(--accent-bord);border-radius:999px;padding:8px 15px}
.ch-bouton:hover{border-color:var(--accent)}
/* « Garder de côté » (13/10/2026) : à côté de « Voir le chemin », plein quand le métier est dans sa liste */
.cote-bouton{display:inline-block;margin:10px 8px 0 0;font-size:14.5px;font-weight:580;color:var(--accent);
  background:var(--carte);border:1px solid var(--ligne-forte);border-radius:999px;padding:7px 14px}
.cote-bouton:hover{border-color:var(--accent)}
.cote-bouton.on{background:var(--accent-clair);border-color:var(--accent)}
.savais .cote-bouton{margin-top:12px}
/* « Ma liste » : l'ordre de préférence, et le parcours qui garde le plus de ses métiers */
.liste-item{margin:0 0 12px}
.rang-ligne{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.rang-ligne .rang{font-weight:700;color:var(--accent);min-width:1.4em}
.rang-bouton{width:34px;height:30px;border-radius:8px;border:1px solid var(--ligne-forte);background:var(--carte);
  color:var(--encre);font-size:15px;line-height:1}
.rang-bouton:disabled{opacity:.35}
.garde-formation{padding:10px 0;border-top:1px solid var(--ligne)}
.garde-formation:first-of-type{border-top:0}
.garde-formation p{margin:0}
.ch-statut{display:inline-block;font-size:11.5px;font-weight:650;letter-spacing:.02em;border-radius:999px;
  padding:1px 9px;margin-top:4px;white-space:nowrap;border:1px solid transparent;vertical-align:1px}
.ch-statut.donnee{background:var(--vert-clair);color:var(--vert)}
.ch-statut.validee{background:var(--accent-clair);color:var(--accent);border-color:var(--accent-bord)}
.ch-statut.validee_ia{background:#eef4f1;color:#2c5a48;border-color:#b6d3c6}
.ch-statut.a_valider{background:#fdf3e0;color:#8a5a00;border-color:#ecd6a8}
.ch-precision{display:block;font-size:13.5px;color:var(--doux);line-height:1.45;margin-top:2px}
.ch-ordre{font-size:14px;color:var(--doux);border-left:2px solid var(--ligne-forte);padding:2px 0 2px 10px;margin:0 0 14px}
.ch-chemin{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--rayon);padding:16px 16px 14px;
  margin:0 0 11px;box-shadow:var(--ombre)}
.ch-chemin>header{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;margin:0 0 13px}
.ch-numero{font-weight:680;font-size:15px}
.ch-resume{font-size:13.5px;color:var(--doux)}
ol.ch-frise{list-style:none;margin:0;padding:0}
.ch-jalon{position:relative;padding:0 0 15px 28px;min-width:0}
.ch-jalon::before{content:"";position:absolute;left:3px;top:5px;width:14px;height:14px;border-radius:50%;
  background:var(--carte);border:2px solid var(--accent);z-index:1}
.ch-jalon::after{content:"";position:absolute;left:9px;top:14px;bottom:-5px;width:2px;background:var(--ligne-forte)}
.ch-jalon:last-child{padding-bottom:0}
.ch-jalon:last-child::after{display:none}
.ch-jalon.entree::before{border-color:var(--tres-doux);border-style:dashed}
.ch-jalon.metier::before{background:var(--accent)}
.ch-jalon.categorie::before{border-style:dotted}
.ch-via{display:block;font-size:12px;letter-spacing:.02em;color:var(--tres-doux);line-height:1.35}
.ch-nom{display:block;font-weight:600;line-height:1.35;overflow-wrap:break-word}
.ch-jalon.entree .ch-nom{font-weight:500;font-size:15px;color:var(--doux)}
.ch-jalon.metier .ch-nom{font-weight:680}
.ch-alerte{display:block;font-size:14px;line-height:1.5;background:var(--chaud-clair);color:var(--chaud);border-radius:10px;
  padding:9px 12px;margin:8px 0 2px;font-weight:400}
.ch-alerte .ch-source{display:block;margin-top:4px;font-size:13px}
.ch-alerte a{color:inherit}
.ch-tronc>.ch-alerte{margin:4px 0 10px}
.ch-entree{margin-top:15px;padding-top:12px;border-top:1px solid var(--ligne)}
.ch-chemin h4,.ch-entree h4{font-size:12px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;
  color:var(--doux);margin:0 0 8px}
dl.ch-voies{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 8px}
@media (min-width:560px){dl.ch-voies{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ch-voie{background:var(--fond);border-radius:10px;padding:8px 10px}
.ch-voie dt{font-size:13px;color:var(--doux);line-height:1.3}
.ch-voie dt small{display:block;font-size:11.5px;color:var(--tres-doux)}
.ch-voie dd{margin:2px 0 0;font-size:19px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ch-voie.zero dd{color:var(--tres-doux);font-weight:500}
.ch-note{font-size:13.5px;color:var(--doux);margin:0 0 6px}
.ch-fait{font-size:14px;line-height:1.5;background:var(--accent-clair);border-radius:10px;padding:9px 12px;margin:8px 0 0}
.chemins-vue details summary{cursor:pointer;font-size:14px;color:var(--doux);list-style:none}
.chemins-vue details summary::-webkit-details-marker{display:none}
.chemins-vue details summary::before{content:"▸ ";color:var(--tres-doux)}
.chemins-vue details[open] summary::before{content:"▾ "}
details.ch-replie{margin-top:8px}
details.ch-preuve{background:#fdf3e0;border:1px solid #ecd6a8;border-radius:10px;padding:8px 11px;margin-top:8px}
details.ch-preuve.validee{background:var(--accent-clair);border-color:var(--accent-bord)}
details.ch-preuve summary{color:var(--encre)}
.ch-preuve blockquote{margin:6px 0;padding:0 0 0 10px;border-left:2px solid #8a5a00;font-size:14.5px;line-height:1.5}
.ch-a-verifier{margin-top:14px}
ul.ch-autres{list-style:none;margin:6px 0 0;padding:0}
ul.ch-autres li{padding:8px 0 4px;border-top:1px solid var(--ligne);font-size:14px}
ul.ch-autres li:first-child{border-top:0}
.ch-qui{font-weight:600}
.ch-sources{font-size:12.5px;color:var(--tres-doux);margin:13px 0 0;line-height:1.45}
.ch-sans ul.liste{margin:4px 0 10px}
.ch-choisis{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 6px}
.ch-puce{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;border-radius:999px;
  padding:4px 4px 4px 13px;font-size:14.5px;font-weight:560;max-width:100%}
.ch-puce button{background:rgba(255,255,255,.22);color:#fff;width:28px;height:28px;border-radius:50%;
  font-size:17px;line-height:1;flex:0 0 28px}
.ch-tronc{background:var(--carte);border:1px solid var(--ligne);border-left:3px solid var(--accent);
  border-radius:var(--rayon);padding:16px 16px 12px;box-shadow:var(--ombre)}
.ch-tronc h2{font-size:18px}
.ch-phrase{font-size:16px;line-height:1.5}
figure.ch-fourche{margin:12px 0;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.ch-boite{background:var(--fond);border:1px solid var(--ligne-forte);border-radius:10px;padding:6px 11px;
  font-size:14px;line-height:1.35;max-width:100%;overflow-wrap:break-word}
.ch-boite.entree{border-style:dashed;color:var(--doux)}
.ch-boite.commun{border-color:var(--accent);background:var(--accent-clair);font-weight:600}
.ch-boite.metier{font-weight:650;border-color:var(--encre)}
.ch-fleche{color:var(--tres-doux);font-size:15px;line-height:1;padding:1px 10px}
.ch-branches{display:flex;flex-direction:column;gap:12px;margin:6px 0 0 14px;padding:4px 0 4px 14px;
  border-left:2px solid var(--accent);align-self:stretch}
.ch-branches{gap:16px}
.ch-branche{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.ch-branche::before{content:"";position:absolute;left:-14px;top:15px;width:10px;height:2px;background:var(--accent)}
.ch-onglets{display:flex;flex-wrap:wrap;gap:6px;margin:22px 0 0}
.ch-onglets button{font-size:14px;border:1px solid var(--accent-bord);background:var(--accent-clair);color:var(--accent);
  border-radius:999px;padding:7px 13px;text-align:left}
.ch-onglets button.ici{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.ch-liste{margin-top:18px}
.ch-liste>h2{font-size:18px}
.ch-encart{margin-top:34px;font-size:15px}
.ch-encart p{font-size:15px}
dl.ch-legende{margin:0 0 10px;display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:baseline}
dl.ch-legende dt .ch-statut{margin:0}
dl.ch-legende dd{margin:0;color:var(--doux);font-size:14px}
.ch-ton{background:#efebe3;border-radius:10px;padding:9px 11px;font-size:14.5px}
@media print{.ch-bouton,.cote-bouton,.ch-onglets,.ch-choisis button{display:none}.ch-chemin,.ch-tronc{break-inside:avoid;box-shadow:none}
  .ch-chemin[hidden]{display:block}}