/* =========================================================
   Jouer pour s'entraîner — feuille de styles
   Aucune dépendance. Voir README.md §1 pour la structure.
   ========================================================= */

:root{
  --papier:#EDF1EF;
  --carte:#FFFFFF;
  --encre:#123330;
  --sourdine:#4C6663;
  --trait:#CBD8D4;
  --repere:#1C6B59;
  --repere-clair:#E1EDE8;
  --ocre:#C08A2E;
  --ocre-clair:#F7EEDA;
  --ocre-fonce:#7A5410;
  --alerte:#96382A;
  --alerte-clair:#FAE9E5;
  --base:18px;
  --display:"Bricolage Grotesque","Trebuchet MS",Verdana,sans-serif;
  --texte:"Atkinson Hyperlegible","Verdana","Segoe UI",sans-serif;
  --rayon:14px;
}
html[data-taille="grand"]{ --base:21px; }
html[data-taille="tresgrand"]{ --base:25px; }

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:7rem;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important;transition:none !important;}
}
body{
  margin:0;background:var(--papier);color:var(--encre);
  font-family:var(--texte);font-size:var(--base);line-height:1.65;
  -webkit-text-size-adjust:100%;
}
[hidden]{display:none !important;}
.largeur{max-width:44rem;margin:0 auto;padding:0 1.25rem;}
p{margin:0 0 1rem;max-width:38rem;}
h1,h2,h3{font-family:var(--display);line-height:1.15;letter-spacing:-0.01em;margin:0;}
h1{font-size:2.15rem;font-weight:700;}
h2{font-size:1.55rem;font-weight:700;margin:0 0 .6rem;}
h3{font-size:1.15rem;font-weight:700;margin:0 0 .35rem;}
a{color:var(--repere);}
:focus-visible{outline:3px solid var(--ocre);outline-offset:3px;border-radius:6px;}

/* ---------- barre haute ---------- */
.barre{position:sticky;top:0;z-index:50;background:rgba(237,241,239,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--trait);}
.barre-in{max-width:44rem;margin:0 auto;padding:.5rem 1.25rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;}
.ici{font-family:var(--display);font-weight:500;font-size:.82rem;color:var(--sourdine);flex:1 1 11rem;min-width:0;}
.ici b{color:var(--encre);font-weight:700;}
.tailles{display:flex;align-items:center;gap:.3rem;}
.tailles span{font-size:.75rem;color:var(--sourdine);margin-right:.15rem;}
.tailles button{font-family:var(--display);font-weight:700;background:var(--carte);border:1px solid var(--trait);color:var(--encre);border-radius:8px;cursor:pointer;padding:.25rem .5rem;line-height:1;}
.tailles button[aria-pressed="true"]{background:var(--encre);color:var(--papier);border-color:var(--encre);}
.tailles button:nth-child(2){font-size:.8rem;}
.tailles button:nth-child(3){font-size:1rem;}
.tailles button:nth-child(4){font-size:1.2rem;}
.pilule{font-family:var(--display);font-weight:700;font-size:.8rem;background:var(--carte);border:1px solid var(--repere);color:var(--repere);border-radius:99px;padding:.3rem .75rem;cursor:pointer;}
.pilule:hover{background:var(--repere-clair);}
.pilule[aria-pressed="true"]{background:var(--repere);color:#fff;}

/* ---------- ouverture ---------- */
.ouverture{padding:3rem 0 2rem;}
.eyebrow{font-family:var(--display);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--repere);margin:0 0 .9rem;}
.these{font-family:var(--display);font-weight:500;font-size:1.2rem;line-height:1.45;margin:1.25rem 0 0;max-width:34rem;}
.these em{font-style:normal;background:linear-gradient(transparent 62%, var(--ocre-clair) 62%);}

section{padding:2.25rem 0;}
.bloc{background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);padding:1.4rem;margin:0 0 1rem;}
.bloc p:last-child{margin-bottom:0;}
.regles{list-style:none;padding:0;margin:0;display:grid;gap:.9rem;}
.regles li{background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);padding:1rem 1.1rem;}
.regles b{display:block;font-family:var(--display);font-size:1.02rem;}

/* ---------- légende ---------- */
.legende{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.55rem;}
.legende li{display:flex;gap:.7rem;align-items:baseline;font-size:.95rem;}
.legende .sym{flex:0 0 2.6rem;font-family:var(--display);font-weight:700;color:var(--repere);}
.sous-titre{font-family:var(--display);font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--sourdine);margin:1.3rem 0 .5rem;}

/* Légende repliée : consultable au moment où le patient voit les étiquettes,
   sans s'interposer entre lui et les jeux. */
.legende-repliable{background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);margin:0 0 1.1rem;}
.legende-repliable summary{
  font-family:var(--display);font-weight:700;font-size:.92rem;color:var(--repere);
  cursor:pointer;padding:.85rem 1.2rem;list-style:none;
  display:flex;align-items:center;gap:.6rem;
}
.legende-repliable summary::-webkit-details-marker{display:none;}
.legende-repliable summary::before{
  content:"›";font-size:1.4rem;line-height:.8;display:inline-block;
  transition:transform .15s ease;
}
.legende-repliable[open] summary::before{transform:rotate(90deg);}
.legende-repliable summary:hover{background:var(--repere-clair);border-radius:var(--rayon);}
.legende-corps{padding:0 1.2rem 1.2rem;border-top:1px solid var(--trait);}
.legende-corps .sous-titre:first-child{margin-top:1.1rem;}

/* ---------- choix ---------- */
.choix{list-style:none;padding:0;margin:1.25rem 0 0;display:grid;gap:.7rem;}
.choix button{width:100%;text-align:left;cursor:pointer;font-family:var(--texte);font-size:1rem;line-height:1.45;color:var(--encre);background:var(--carte);border:1px solid var(--trait);border-left:5px solid var(--repere);border-radius:var(--rayon);padding:.95rem 1.1rem;transition:background .15s ease;}
.choix button:hover{background:var(--repere-clair);}
.choix button[aria-pressed="true"]{background:var(--repere);color:#fff;border-color:var(--repere);}
.choix .quoi{display:block;font-family:var(--display);font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--repere);margin-top:.35rem;}
.choix button[aria-pressed="true"] .quoi{color:#CFE8DF;}

/* ---------- fiches ---------- */
.fiche{background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);padding:1.5rem;margin:0 0 1.1rem;scroll-margin-top:7rem;}
.fiche.retenue{border-color:var(--repere);box-shadow:0 0 0 3px var(--repere-clair);}
.badge{display:none;font-family:var(--display);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:#fff;background:var(--repere);padding:.2rem .55rem;border-radius:99px;margin-bottom:.7rem;}
.fiche.retenue .badge{display:inline-block;}
.exemple{color:var(--sourdine);font-style:italic;}

/* ---------- listes de jeux ---------- */
/* La liste est le contenu attendu de la page : elle est posée sur un
   panneau distinct pour se détacher nettement de la prose qui l'entoure. */
.intitule-jeux{
  font-family:var(--display);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--repere);
  margin:1.6rem 0 0;
}
.jeux{
  list-style:none;margin:.6rem 0 0;display:grid;gap:0;
  background:var(--papier);border:1px solid var(--trait);
  border-radius:10px;padding:.15rem 1.1rem;
}
.jeu{border-top:1px solid var(--trait);padding:1rem 0;}
.jeu.premier{border-top:0;}
.ligne-titre{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;}
.nom{font-family:var(--display);font-weight:700;font-size:1.12rem;}
.niv{font-family:var(--display);font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;padding:.12rem .5rem;border-radius:99px;white-space:nowrap;}
.niv-1{background:var(--repere);color:#fff;}
.niv-2{background:var(--repere-clair);color:var(--repere);}
.niv-3{background:var(--carte);color:var(--sourdine);border:1px solid var(--trait);}
.main{font-size:.8rem;color:var(--sourdine);white-space:nowrap;}
.achats{font-family:var(--display);font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;background:var(--alerte-clair);color:var(--alerte);border:1px solid #E8C4BC;padding:.12rem .5rem;border-radius:99px;white-space:nowrap;}
.pourquoi{margin:.35rem 0 .3rem;font-size:.97rem;}
.meta{font-size:.85rem;color:var(--sourdine);}
.attention-jeu{background:var(--alerte-clair);border-left:4px solid var(--alerte);border-radius:0 8px 8px 0;padding:.6rem .8rem;margin:.5rem 0 .45rem;font-size:.9rem;}
.attention-jeu b{font-family:var(--display);color:var(--alerte);}
.outils{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem;}
.outils button{font-family:var(--display);font-weight:700;font-size:.82rem;background:var(--papier);border:1px solid var(--trait);color:var(--encre);border-radius:99px;padding:.4rem .9rem;cursor:pointer;}
.outils button:hover{background:var(--repere-clair);border-color:var(--repere);}

.preuve{background:var(--ocre-clair);border-radius:10px;padding:.8rem 1rem;margin-top:1.2rem;font-size:.93rem;}
.preuve b{font-family:var(--display);display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ocre-fonce);margin-bottom:.25rem;}
.astuce{background:var(--repere-clair);border-radius:10px;padding:.9rem 1rem;margin:1rem 0;font-size:.95rem;}
.astuce b{font-family:var(--display);display:block;}
.retour{display:inline-block;margin-top:1.2rem;font-size:.9rem;}
.separateur{border:0;border-top:1px solid var(--trait);margin:1.8rem 0 1.2rem;}

/* ---------- méthode ---------- */
.etapes{list-style:none;counter-reset:e;padding:0;margin:0;display:grid;gap:.8rem;}
.etapes li{counter-increment:e;background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);padding:1rem 1.1rem 1rem 3.4rem;position:relative;}
.etapes li::before{content:counter(e);position:absolute;left:1.1rem;top:1rem;font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--repere);background:var(--repere-clair);width:1.8rem;height:1.8rem;border-radius:8px;display:grid;place-items:center;line-height:1;}
.etapes b{font-family:var(--display);display:block;}

.garde{background:var(--alerte-clair);border:1px solid #E8C4BC;border-left:5px solid var(--alerte);border-radius:var(--rayon);padding:1.2rem 1.3rem;margin:0 0 1rem;}
.garde h3{color:var(--alerte);}
.garde p:last-child{margin-bottom:0;}

.attente{background:var(--repere-clair);border:1px dashed var(--repere);border-radius:var(--rayon);padding:1.3rem;text-align:center;}
.attente p{margin:0 auto;max-width:30rem;}
.attente b{font-family:var(--display);}
.note-parcours{font-size:.88rem;color:var(--sourdine);border-left:3px solid var(--trait);padding-left:.9rem;margin:1.2rem 0 0;}

/* ---------- panne de chargement des données ---------- */
.panne{background:var(--alerte-clair);border:1px solid #E8C4BC;border-left:5px solid var(--alerte);border-radius:var(--rayon);padding:1.2rem 1.3rem;}
.panne b{font-family:var(--display);display:block;color:var(--alerte);margin-bottom:.3rem;}
.panne p:last-child{margin-bottom:0;}

/* ---------- carte de séance ---------- */
.carte-seance{background:var(--carte);border:2px dashed var(--repere);border-radius:var(--rayon);padding:1.5rem;}
.champ{border-bottom:1px solid var(--trait);padding:.65rem 0;display:flex;gap:.6rem;flex-wrap:wrap;}
.champ .k{font-family:var(--display);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--sourdine);min-width:9rem;}
.champ .v{flex:1 1 12rem;min-width:0;}
.lignes{height:1px;background:repeating-linear-gradient(to right,var(--trait) 0 6px,transparent 6px 12px);margin-top:.9rem;}
.imprimer{font-family:var(--display);font-weight:700;font-size:1rem;background:var(--repere);color:#fff;border:none;border-radius:10px;padding:.75rem 1.2rem;cursor:pointer;margin-top:1.2rem;}
.imprimer:hover{background:#14584a;}

.flottant{position:fixed;left:50%;transform:translateX(-50%);bottom:1rem;z-index:60;background:var(--encre);color:#fff;border:none;border-radius:99px;font-family:var(--display);font-weight:700;font-size:.9rem;padding:.7rem 1.2rem;cursor:pointer;box-shadow:0 6px 20px rgba(18,51,48,.25);display:none;max-width:90vw;}
.flottant.visible{display:block;}

footer{border-top:1px solid var(--trait);margin-top:2rem;padding:2rem 0 3.5rem;color:var(--sourdine);font-size:.9rem;}
footer p{max-width:36rem;}

@media print{
  .barre,.flottant,.imprimer,.choix,.retour,.outils{display:none !important;}
  body{background:#fff;font-size:12pt;}
  section:not(#carte){display:none;}
  #carte{padding:0;}
  .carte-seance{border:1.5px solid #000;}
}