/* ============================================================
   PALETTE & BASES
   ============================================================ */
:root{
  --bleu:#3d7dff;      --bleu-f:#2b5fd9;
  --vert:#12c98a;      --vert-f:#0aa572;
  --orange:#ff9f1c;    --orange-f:#e8850a;
  --rose:#ff5d8f;      --rose-f:#e04374;
  --violet:#9b5de5;    --violet-f:#7f3fd0;
  --jaune:#ffd166;
  --encre:#2a3350;
  --encre-doux:#5f6c8f;
  --papier:#ffffff;
  --fond:#eef3ff;
  --trait:#dfe6fb;
  --ombre:0 6px 0 rgba(42,51,80,.13);
  --r:22px;
  --police:"Comic Sans MS","Chalkboard SE","Comic Neue","Marker Felt",'Trebuchet MS',system-ui,sans-serif;
  /* police cursive : choisie dans ⚙️ Réglages, mémorisée d'une fois à l'autre */
  --pc:"BelleAllureGS-Gros";
  --pc-poids:400;
}
/* ---- écriture cursive (Belle Allure) ---- */
.cursive{
  font-family:var(--pc),"BelleAllureGS-Gros","BelleAllure GS","Belle Allure GS",
              "Cursive standard","Ecolier_ligne",cursive;
  font-weight:var(--pc-poids);
  font-variant-ligatures:contextual;
  font-feature-settings:"calt" 1;
  letter-spacing:0;
}
.geant.cursive{font-size:clamp(4.4rem,19vw,12.5rem);line-height:1.25;padding:0 .12em}
.geant.prenom.cursive{font-size:clamp(3rem,12vw,7.8rem);line-height:1.25}
.carte-prenom.cursive{font-size:clamp(1.9rem,6vw,3.5rem);line-height:1.3;padding:14px 26px}
.tuile.cursive{font-size:clamp(2.2rem,7vw,4.1rem);line-height:1.2}
.case-nb.cursive,.touche.cursive{font-family:var(--pc),cursive;font-weight:var(--pc-poids)}

/* ---- panneau des polices ---- */
.grille-polices{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin:14px 0}
.chip-police{
  background:var(--fond);color:var(--encre);font-size:1rem;font-weight:bold;
  padding:12px 10px;border-radius:16px;box-shadow:0 3px 0 var(--trait);
  border:3px solid transparent;text-align:left;line-height:1.3;
}
.chip-police:hover{border-color:var(--bleu)}
.chip-police.on{background:var(--violet);color:#fff;box-shadow:0 3px 0 var(--violet-f)}
.chip-police .etat{display:block;font-size:.8rem;font-weight:normal;opacity:.85}
.chip-police.absente{opacity:.5}
.apercu{
  background:#fffaf0;border:4px dashed var(--jaune);border-radius:20px;
  padding:16px;text-align:center;margin:8px 0 4px;overflow-x:auto;
}
.apercu .l1{font-size:2.6rem;line-height:1.35;white-space:nowrap}
.apercu .l2{font-size:1.9rem;line-height:1.4;white-space:nowrap;color:var(--encre-doux)}
.note-police{color:var(--encre-doux);font-size:.95rem;line-height:1.45;margin:6px 0 0}
.champ{
  font-family:inherit;font-size:1rem;padding:11px 13px;border-radius:14px;
  border:3px solid var(--trait);background:#f7faff;color:var(--encre);min-width:240px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--police);
  color:var(--encre);
  background:var(--fond);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
/* décor de fond : bulles douces */
.decor{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.decor span{position:absolute;border-radius:50%;opacity:.35}
button{font-family:inherit;cursor:pointer;border:none}
button:focus-visible{outline:4px solid var(--bleu);outline-offset:3px}
.cache{display:none !important}

/* ============================================================
   EN-TÊTE
   ============================================================ */
header{
  position:relative;z-index:5;
  background:var(--papier);
  border-bottom:4px solid var(--trait);
  padding:8px 14px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.logo{font-size:1.25rem;font-weight:bold;display:flex;align-items:center;gap:8px}
.logo .pastille{
  width:38px;height:38px;border-radius:13px;background:var(--bleu);color:#fff;
  display:grid;place-items:center;font-size:1.3rem;box-shadow:0 4px 0 var(--bleu-f);
}
.onglets{display:flex;gap:4px;background:var(--fond);padding:5px;border-radius:16px}
.onglet{
  background:transparent;color:var(--encre-doux);font-size:.97rem;font-weight:bold;
  padding:9px 13px;border-radius:12px;transition:.15s;white-space:nowrap;
}
.onglet:hover{color:var(--encre)}
.onglet.actif{background:var(--papier);color:var(--encre);box-shadow:0 3px 0 var(--trait)}
.btn-wizz{
  background:var(--rose);color:#fff;font-size:1.05rem;font-weight:bold;
  padding:12px 20px;border-radius:16px;box-shadow:0 5px 0 var(--rose-f);transition:.1s;
}
.btn-wizz:active{transform:translateY(4px);box-shadow:0 1px 0 var(--rose-f)}
.btn-son{
  background:var(--fond);color:var(--encre);font-size:1.2rem;
  width:48px;height:48px;border-radius:16px;box-shadow:0 3px 0 var(--trait);
}
.btn-son.coupe{opacity:.45}

/* ============================================================
   MISE EN PAGE
   ============================================================ */
main{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:18px 16px 150px}
h1,h2,h3{margin:0}
.titre-vue{font-size:1.9rem;text-align:center;margin-bottom:6px}
.sous-titre{text-align:center;color:var(--encre-doux);margin:0 0 22px;font-size:1.05rem}

/* ============================================================
   ACCUEIL : CARTES D'EXERCICES
   ============================================================ */
.grille-exos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.carte-exo{
  background:var(--papier);border-radius:var(--r);padding:26px 18px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  box-shadow:var(--ombre);border:3px solid transparent;transition:.15s;text-align:center;
}
.carte-exo:hover{transform:translateY(-6px);box-shadow:0 12px 0 rgba(42,51,80,.12)}
.carte-exo .icone{
  width:78px;height:78px;border-radius:24px;display:grid;place-items:center;
  font-size:2.3rem;color:#fff;
}
.carte-exo .nom{font-size:1.25rem;font-weight:bold}
.carte-exo .desc{font-size:.92rem;color:var(--encre-doux);line-height:1.35}
.c-bleu .icone{background:var(--bleu)}     .c-bleu:hover{border-color:var(--bleu)}
.c-violet .icone{background:var(--violet)} .c-violet:hover{border-color:var(--violet)}
.c-rose .icone{background:var(--rose)}     .c-rose:hover{border-color:var(--rose)}
.c-orange .icone{background:var(--orange)} .c-orange:hover{border-color:var(--orange)}
.c-vert .icone{background:var(--vert)}     .c-vert:hover{border-color:var(--vert)}

/* ============================================================
   PANNEAU D'EXERCICE
   ============================================================ */
.panneau{
  background:var(--papier);border-radius:var(--r);box-shadow:var(--ombre);
  padding:18px;min-height:54vh;display:flex;flex-direction:column;
}
.barre-panneau{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.btn-retour{
  background:var(--fond);color:var(--encre);font-weight:bold;font-size:1rem;
  padding:11px 18px;border-radius:14px;box-shadow:0 3px 0 var(--trait);
}
.titre-exo{font-size:1.4rem;margin-right:auto}
.reglages{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.puce{
  background:var(--fond);color:var(--encre-doux);font-weight:bold;font-size:.95rem;
  padding:9px 15px;border-radius:12px;transition:.12s;
}
.puce.on{background:var(--encre);color:#fff}
.etiquette{font-size:.9rem;color:var(--encre-doux);font-weight:bold;margin-right:2px}

.scene{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:13px;padding:10px 6px;
}
.geant{
  font-size:clamp(4rem,17vw,11rem);font-weight:bold;line-height:1;
  letter-spacing:2px;
}
.geant.prenom{text-transform:capitalize;font-size:clamp(2.6rem,11vw,7rem)}
.bulle{
  background:var(--fond);border-radius:28px;padding:18px 40px;
  border:4px dashed var(--trait);
}

/* boutons d'action */
.btn-gros{
  background:var(--vert);color:#fff;font-size:1.3rem;font-weight:bold;
  padding:16px 32px;border-radius:20px;box-shadow:0 6px 0 var(--vert-f);transition:.1s;
}
.btn-gros:active{transform:translateY(5px);box-shadow:0 1px 0 var(--vert-f)}
.btn-gros.bleu{background:var(--bleu);box-shadow:0 6px 0 var(--bleu-f)}
.btn-gros.bleu:active{box-shadow:0 1px 0 var(--bleu-f)}
.btn-gros.orange{background:var(--orange);box-shadow:0 6px 0 var(--orange-f)}
.btn-gros.orange:active{box-shadow:0 1px 0 var(--orange-f)}
.btn-gros.violet{background:var(--violet);box-shadow:0 6px 0 var(--violet-f)}
.btn-gros.violet:active{box-shadow:0 1px 0 var(--violet-f)}
.btn-gros.rouge{background:var(--rose);box-shadow:0 6px 0 var(--rose-f)}
.rangee{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* ============================================================
   EXERCICE PRÉNOM — choix multiple
   ============================================================ */
.choix-prenoms{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.carte-prenom{
  background:var(--papier);border:5px solid var(--trait);border-radius:24px;
  padding:18px 30px;font-size:clamp(1.7rem,5.5vw,3.1rem);font-weight:bold;
  text-transform:capitalize;color:var(--encre);box-shadow:0 6px 0 var(--trait);transition:.12s;
}
.carte-prenom:hover{border-color:var(--bleu)}
.carte-prenom.juste{border-color:var(--vert);background:#e8fbf3;box-shadow:0 6px 0 var(--vert)}
.carte-prenom.faux{border-color:var(--rose);background:#ffeef4;box-shadow:0 6px 0 var(--rose);opacity:.75}

/* ============================================================
   KARAOKÉ DES VOYELLES
   ============================================================ */
.piste{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;
  background:linear-gradient(180deg,#fff8e6,#fff1cf);
  border:5px solid var(--jaune);border-radius:28px;padding:26px 20px;width:100%;
}
.tuile{
  width:clamp(62px,11vw,110px);height:clamp(62px,11vw,110px);
  display:grid;place-items:center;border-radius:22px;
  background:var(--papier);box-shadow:0 5px 0 rgba(42,51,80,.12);
  font-size:clamp(2rem,6vw,3.6rem);font-weight:bold;color:var(--encre);
  transition:transform .12s,background .12s,color .12s;
}
.tuile.active{
  background:var(--rose);color:#fff;transform:scale(1.22) rotate(-3deg);
  box-shadow:0 10px 0 var(--rose-f);
}
.sep{font-size:2rem;color:#e3c98a}

/* ============================================================
   DÉCOMPOSITION
   ============================================================ */
.deco{display:flex;flex-direction:column;align-items:center;width:100%;max-width:640px}
.case-nb{
  min-width:clamp(76px,13vw,118px);height:clamp(76px,13vw,118px);
  display:grid;place-items:center;border-radius:26px;
  font-size:clamp(2.4rem,7vw,4.2rem);font-weight:bold;padding:0 10px;
}
.case-total{background:var(--bleu);color:#fff;box-shadow:0 7px 0 var(--bleu-f)}
.case-connue{background:var(--vert);color:#fff;box-shadow:0 7px 0 var(--vert-f)}
.case-trou{
  background:repeating-linear-gradient(45deg,#fff,#fff 12px,#f2f5ff 12px,#f2f5ff 24px);
  color:var(--orange);border:5px dashed var(--orange);
}
.case-trou.remplie{background:var(--orange);color:#fff;border-style:solid;box-shadow:0 7px 0 var(--orange-f)}
.fleches{width:min(400px,88vw);height:84px;color:var(--encre-doux);margin:-6px 0}
.parties{display:flex;justify-content:space-between;width:min(400px,88vw)}
.clavier{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.touche{
  width:56px;height:56px;border-radius:16px;font-size:1.45rem;font-weight:bold;
  background:var(--papier);color:var(--encre);box-shadow:0 4px 0 var(--trait);border:3px solid var(--trait);
}
.touche:hover{border-color:var(--bleu)}
.touche.juste{background:var(--vert);color:#fff;border-color:var(--vert);box-shadow:0 4px 0 var(--vert-f)}
.touche.faux{background:#ffeef4;color:var(--rose);border-color:var(--rose)}

/* zone indice : quantités */
.indice{
  width:100%;background:#fffaf0;border:4px dashed var(--jaune);border-radius:24px;
  padding:10px 14px;display:flex;flex-flow:row wrap;gap:6px 26px;
  align-items:center;justify-content:center;
}
.indice-titre{font-weight:bold;color:#b07d13;font-size:1rem;flex-basis:100%;text-align:center}
.groupe-qte{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;justify-content:center}
.etiq-qte{font-size:.95rem;color:var(--encre-doux);font-weight:bold;text-align:right;white-space:nowrap}
.jetons{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;min-height:32px;align-items:center}
.jeton{width:28px;height:28px;border-radius:50%}
.jeton.plein-v{background:var(--vert);box-shadow:inset 0 -4px 0 rgba(0,0,0,.14)}
.jeton.plein-o{background:var(--orange);box-shadow:inset 0 -4px 0 rgba(0,0,0,.14)}
.jeton.vide{background:#fff;border:4px dashed #d9c48f}
.zero-qte{color:var(--encre-doux);font-style:italic;font-size:.95rem}

/* ============================================================
   BARRE DE PILOTAGE (bas d'écran)
   ============================================================ */
.pilote{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:var(--papier);border-top:4px solid var(--trait);
  box-shadow:0 -6px 20px rgba(42,51,80,.10);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
}
.pilote-interne{
  max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.bloc-eleve{display:flex;align-items:center;gap:12px;min-width:0}
.avatar{
  width:46px;height:46px;border-radius:16px;display:grid;place-items:center;
  background:var(--violet);color:#fff;font-size:1.25rem;font-weight:bold;flex:none;
}
.nom-eleve{font-size:1.18rem;font-weight:bold;text-transform:capitalize;line-height:1.1}
.info-tour{font-size:.85rem;color:var(--encre-doux)}
.btn-choisir{
  background:var(--fond);color:var(--encre);font-weight:bold;font-size:.9rem;
  padding:9px 12px;border-radius:14px;box-shadow:0 3px 0 var(--trait);
}
.notation{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.btn-etoile{
  display:flex;align-items:center;gap:6px;
  background:var(--fond);color:var(--encre-doux);font-weight:bold;font-size:.98rem;
  padding:9px 12px;border-radius:14px;box-shadow:0 4px 0 var(--trait);transition:.12s;
}
.btn-etoile .nb{font-size:1.15rem}
.btn-etoile:hover{transform:translateY(-2px)}
.btn-etoile.on{background:var(--jaune);color:#7a5200;box-shadow:0 4px 0 #e0ac33}
.btn-etoile[data-v="1"].on{background:#ffd6d6;color:#a33;box-shadow:0 4px 0 #e8a4a4}
.btn-etoile[data-v="2"].on{background:#ffe9b8;color:#8a5c00;box-shadow:0 4px 0 #e5c46b}
.btn-etoile[data-v="3"].on{background:#c8f6df;color:#0a6a4a;box-shadow:0 4px 0 #7fd9b5}
.btn-suivant{
  background:var(--bleu);color:#fff;font-size:1.12rem;font-weight:bold;
  padding:13px 20px;border-radius:16px;box-shadow:0 5px 0 var(--bleu-f);transition:.1s;
}
.btn-suivant:active{transform:translateY(4px);box-shadow:0 1px 0 var(--bleu-f)}
.astuce-pilote{width:100%;font-size:.85rem;color:var(--encre-doux);text-align:center}
.mode-choix{display:flex;gap:6px;background:var(--fond);padding:5px;border-radius:14px}
.mode-choix button{
  background:transparent;color:var(--encre-doux);font-weight:bold;font-size:.88rem;
  padding:8px 10px;border-radius:10px;
}
.mode-choix button.on{background:var(--papier);color:var(--encre);box-shadow:0 2px 0 var(--trait)}

/* liste des élèves (tiroir) */
.tiroir{
  position:fixed;inset:0;z-index:40;background:rgba(42,51,80,.45);
  display:flex;align-items:flex-end;justify-content:center;padding:0;
}
.tiroir-contenu{
  background:var(--papier);width:100%;max-width:900px;border-radius:26px 26px 0 0;
  padding:22px;max-height:80vh;overflow:auto;
}
.grille-eleves{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:14px}
.chip-eleve{
  background:var(--fond);color:var(--encre);font-size:1.05rem;font-weight:bold;
  text-transform:capitalize;padding:14px 10px;border-radius:16px;
  box-shadow:0 3px 0 var(--trait);border:3px solid transparent;text-align:center;
}
.chip-eleve:hover{border-color:var(--bleu)}
.chip-eleve.courant{background:var(--violet);color:#fff;box-shadow:0 3px 0 var(--violet-f)}
.chip-eleve .mini{display:block;font-size:.78rem;font-weight:normal;opacity:.8;text-transform:none}

/* ============================================================
   RAPPORT
   ============================================================ */
.outils-rapport{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;
  background:var(--papier);border-radius:var(--r);box-shadow:var(--ombre);padding:14px;margin-bottom:18px;
}
select{
  font-family:inherit;font-size:1rem;font-weight:bold;color:var(--encre);
  background:var(--fond);border:none;border-radius:12px;padding:11px 13px;box-shadow:0 3px 0 var(--trait);
}
.resume{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:18px}
.tuile-stat{
  background:var(--papier);border-radius:20px;box-shadow:var(--ombre);padding:16px;text-align:center;
}
.tuile-stat .val{font-size:2.1rem;font-weight:bold;line-height:1}
.tuile-stat .lib{font-size:.9rem;color:var(--encre-doux);margin-top:4px}
.tableau{
  background:var(--papier);border-radius:var(--r);box-shadow:var(--ombre);overflow:hidden;
}
table{width:100%;border-collapse:collapse}
th{
  text-align:left;font-size:.88rem;color:var(--encre-doux);text-transform:uppercase;
  letter-spacing:.5px;padding:14px 12px;background:var(--fond);border-bottom:3px solid var(--trait);
}
th.num,td.num{text-align:center}
td{padding:13px 12px;border-bottom:2px solid var(--trait);font-size:1.02rem}
tr:last-child td{border-bottom:none}
tr.ligne-eleve{cursor:pointer}
tr.ligne-eleve:hover td{background:#f7faff}
.nom-cell{font-weight:bold;text-transform:capitalize;display:flex;align-items:center;gap:10px}
.pastille-eleve{
  width:34px;height:34px;border-radius:12px;display:grid;place-items:center;
  color:#fff;font-size:.95rem;font-weight:bold;flex:none;
}
.barre-etoiles{display:flex;height:14px;border-radius:8px;overflow:hidden;background:var(--fond);min-width:90px}
.barre-etoiles i{display:block;height:100%}
.b1{background:#ff8fa8} .b2{background:var(--jaune)} .b3{background:var(--vert)}
.detail-exos{padding:4px 12px 16px;background:#f7faff}
.detail-exos .ligne{display:flex;gap:10px;align-items:center;font-size:.95rem;padding:5px 0;color:var(--encre-doux)}
.detail-exos .ligne b{color:var(--encre);min-width:170px}
.vide-msg{padding:40px;text-align:center;color:var(--encre-doux)}
a{color:var(--bleu)}
a:hover{color:var(--bleu-f)}
.lien-police{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  background:var(--vert);color:#fff;font-weight:bold;font-size:1.02rem;
  padding:12px 20px;border-radius:16px;box-shadow:0 5px 0 var(--vert-f);
}
.lien-police:hover{color:#fff;transform:translateY(-2px)}
.pied{
  text-align:center;color:var(--encre-doux);font-size:.92rem;line-height:1.6;
  margin:26px auto 0;max-width:640px;
}
.pied a{font-weight:bold}
.etoiles-txt{color:#e8a900;letter-spacing:2px}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes secousse{
  0%,100%{transform:translate(0,0) rotate(0)}
  10%{transform:translate(-14px,6px) rotate(-1.4deg)}
  20%{transform:translate(12px,-8px) rotate(1.2deg)}
  30%{transform:translate(-16px,-5px) rotate(-1.1deg)}
  40%{transform:translate(14px,8px) rotate(1.3deg)}
  50%{transform:translate(-11px,5px) rotate(-.9deg)}
  60%{transform:translate(10px,-6px) rotate(.8deg)}
  70%{transform:translate(-8px,4px) rotate(-.6deg)}
  80%{transform:translate(6px,-3px) rotate(.4deg)}
  90%{transform:translate(-3px,2px) rotate(-.2deg)}
}
body.secoue{animation:secousse .62s cubic-bezier(.36,.07,.19,.97)}
@keyframes apparait{from{opacity:0;transform:scale(.82) translateY(14px)}to{opacity:1;transform:none}}
.anim{animation:apparait .32s ease-out}
@keyframes flash{0%{background:#fff7d6}100%{background:transparent}}
body.flash-ecran::after{
  content:"";position:fixed;inset:0;z-index:99;pointer-events:none;animation:flash .5s ease-out;
}
@keyframes pouf{0%{transform:scale(0) rotate(0);opacity:1}100%{transform:scale(1.6) rotate(25deg);opacity:0}}
.confetti{position:fixed;z-index:60;pointer-events:none;font-size:1.6rem;animation:pouf .9s ease-out forwards}
@media (prefers-reduced-motion:reduce){
  body.secoue{animation:none}
  .anim{animation:none}
}

/* ============================================================
   ÉCRAN DE CODE
   ============================================================ */
body.verrouille header,body.verrouille main,body.verrouille .pilote{display:none !important}
.ecran-code{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;
  background:linear-gradient(160deg,#eef3ff,#dce7ff 60%,#e8e0ff);
}
.chargement{color:var(--encre-doux);font-size:1.15rem;font-weight:bold}
.boite-code{
  background:var(--papier);border-radius:28px;box-shadow:0 14px 0 rgba(42,51,80,.12);
  padding:30px 28px;width:min(420px,94vw);text-align:center;
}
.boite-code .marque{
  width:70px;height:70px;border-radius:24px;background:var(--bleu);color:#fff;
  display:grid;place-items:center;font-size:2.1rem;margin:0 auto 12px;box-shadow:0 6px 0 var(--bleu-f);
}
.boite-code h1{font-size:1.7rem}
.boite-code .intro{color:var(--encre-doux);margin:6px 0 18px;font-size:1rem;line-height:1.45}
.saisie-code{
  width:100%;font-family:inherit;font-size:2.1rem;font-weight:bold;text-align:center;
  letter-spacing:.35em;padding:14px 10px;border-radius:18px;border:4px solid var(--trait);
  background:var(--fond);color:var(--encre);
}
.saisie-code:focus{outline:none;border-color:var(--bleu)}
.pave{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:14px 0}
.pave button{
  font-size:1.5rem;font-weight:bold;padding:14px 0;border-radius:16px;
  background:var(--fond);color:var(--encre);box-shadow:0 4px 0 var(--trait);
}
.pave button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--trait)}
.msg-code{min-height:22px;color:var(--rose);font-weight:bold;font-size:.98rem;margin:4px 0 10px}
.msg-code.ok{color:var(--vert-f)}
.note-code{color:var(--encre-doux);font-size:.86rem;line-height:1.5;margin-top:16px}
.btn-son.attente{background:#fff3d6;box-shadow:0 3px 0 #eccd85}
.toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:110px;z-index:70;
  background:var(--encre);color:#fff;font-weight:bold;font-size:1rem;
  padding:14px 22px;border-radius:18px;box-shadow:0 8px 24px rgba(42,51,80,.35);
  max-width:min(560px,92vw);text-align:center;line-height:1.4;
}

/* ============================================================
   IMPRESSION
   ============================================================ */
@media print{
  header,.pilote,.outils-rapport,.decor,.btn-gros{display:none !important}
  body{background:#fff}
  main{padding:0}
  .tableau{box-shadow:none;border:1px solid #999}
}
@media (max-width:1150px){
  .lg{display:none}
  .info-tour{display:none}
  .btn-etoile span:last-child{display:none}
}
@media (max-height:780px){
  .case-nb{min-width:clamp(66px,11vw,96px);height:clamp(66px,11vw,96px);font-size:clamp(2.1rem,6vw,3.4rem)}
  .fleches{height:66px}
  .touche{width:48px;height:48px;font-size:1.25rem;border-radius:14px}
  .jeton{width:24px;height:24px}
  .jetons{min-height:26px}
  .scene{gap:9px;padding:6px}
  .btn-gros{font-size:1.1rem;padding:12px 22px}
  .indice{padding:9px 12px;gap:7px}
  .panneau{min-height:auto}
}
@media (max-width:640px){
  .titre-exo{font-size:1.15rem}
  .notation{width:100%;margin-left:0;justify-content:space-between}
  .logo span:last-child{display:none}
}

/* ============================================================
   ÉCRANS D'ENTRÉE : accès au site, puis « qui es-tu ? »
   ============================================================ */
.roles{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin:18px 0 4px}
.carte-role{
  flex:1;min-width:150px;background:var(--fond);border:4px solid transparent;border-radius:24px;
  padding:22px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;
  box-shadow:0 5px 0 var(--trait);transition:.15s;
}
.carte-role:hover{transform:translateY(-4px);border-color:var(--bleu)}
.carte-role .ic{font-size:2.6rem}
.carte-role .lb{font-size:1.15rem;font-weight:bold;color:var(--encre)}
.carte-role .sb{font-size:.86rem;color:var(--encre-doux);line-height:1.35;text-align:center}
.retour-role{background:none;color:var(--encre-doux);font-size:.95rem;font-weight:bold;padding:8px}
.bonjour{font-size:1.4rem;font-weight:bold;color:var(--vert-f);min-height:34px}

/* ============================================================
   EN-TÊTE : onglets de matières
   ============================================================ */
.onglets{flex-wrap:wrap;max-width:100%}
.onglet .ic{margin-right:5px}
.qui-suis-je{
  display:flex;align-items:center;gap:8px;margin-left:auto;background:var(--fond);border-radius:16px;
  padding:7px 12px;font-weight:bold;color:var(--encre);box-shadow:0 3px 0 var(--trait);font-size:.95rem;
}
.qui-suis-je .pastille{
  width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  color:#fff;font-size:.9rem;background:var(--violet);
}

/* ============================================================
   CATALOGUE D'ACTIVITÉS
   ============================================================ */
.carte-exo .badge{
  font-size:.72rem;font-weight:bold;text-transform:uppercase;letter-spacing:.5px;
  color:var(--encre-doux);background:var(--fond);border-radius:8px;padding:3px 8px;
}
.carte-exo.eteinte{opacity:.55}
.vide-cat{
  text-align:center;color:var(--encre-doux);padding:50px 20px;line-height:1.6;
  background:var(--papier);border-radius:var(--r);box-shadow:var(--ombre);
}

/* ============================================================
   ÉLÉMENTS COMMUNS AUX JEUX
   ============================================================ */
.consigne{
  font-size:clamp(1.1rem,2.6vw,1.5rem);font-weight:bold;text-align:center;
  color:var(--encre);margin:0 0 4px;
}
.consigne .dire{
  background:var(--jaune);border-radius:12px;padding:6px 10px;margin-left:8px;font-size:1rem;
  box-shadow:0 3px 0 #e0ac33;
}
.avance{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap}
.jauge{width:min(320px,70vw);height:16px;border-radius:10px;background:var(--fond);overflow:hidden}
.jauge i{display:block;height:100%;background:var(--vert);transition:width .3s}
.compteur{font-weight:bold;color:var(--encre-doux);font-size:.95rem}
.vignette{
  background:var(--papier);border:4px solid var(--trait);border-radius:22px;
  padding:12px 14px;display:flex;flex-direction:column;align-items:center;gap:4px;
  box-shadow:0 5px 0 var(--trait);transition:.12s;cursor:pointer;
}
.vignette .em{font-size:clamp(2.4rem,7vw,3.6rem);line-height:1}
.vignette .mot{font-size:clamp(.95rem,2.2vw,1.2rem);font-weight:bold;color:var(--encre)}
.vignette:hover{border-color:var(--bleu);transform:translateY(-3px)}
.vignette.choisie{border-color:var(--violet);background:#f6f0ff;box-shadow:0 5px 0 var(--violet)}
.vignette.juste{border-color:var(--vert);background:#e8fbf3;box-shadow:0 5px 0 var(--vert)}
.vignette.faux{border-color:var(--rose);background:#ffeef4;box-shadow:0 5px 0 var(--rose)}
.vignette.geante .em{font-size:clamp(5rem,20vw,11rem)}
.vignette.geante .mot{font-size:clamp(1.5rem,5vw,2.4rem)}
.vignette.geante{padding:22px 34px;border-width:6px}
.bilan{
  background:var(--papier);border-radius:24px;box-shadow:var(--ombre);padding:26px;
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;
}
.bilan .gros{font-size:3rem;font-weight:bold;color:var(--vert-f);line-height:1}
.bilan .txt{color:var(--encre-doux);font-size:1.05rem}

/* ---------- moteur : tri en deux colonnes ---------- */
.tri{display:flex;gap:14px;width:100%;align-items:stretch;justify-content:center;flex-wrap:wrap}
.colonne{
  flex:1;min-width:min(280px,42vw);background:var(--fond);border:5px dashed var(--trait);
  border-radius:26px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:10px;
  min-height:200px;transition:.15s;
}
.colonne.survol{border-color:var(--bleu);background:#e9f1ff;transform:scale(1.02)}
.colonne .entete{font-size:1.15rem;font-weight:bold;color:var(--encre);text-align:center}
.colonne .entete .ic{display:block;font-size:2.2rem}
.colonne .recus{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.colonne .recus .vignette{padding:6px 8px;border-width:3px;box-shadow:none;cursor:default}
.colonne .recus .vignette .em{font-size:1.8rem}
.colonne .recus .vignette .mot{font-size:.8rem}
.a-trier{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:150px;justify-content:center}
.a-trier .vignette{cursor:grab}
.a-trier .vignette:active{cursor:grabbing}
.fleches-tri{display:flex;gap:12px}
.fleches-tri button{
  font-size:1.6rem;padding:12px 26px;border-radius:16px;background:var(--papier);
  box-shadow:0 4px 0 var(--trait);border:3px solid var(--trait);
}
.fleches-tri button:hover{border-color:var(--bleu)}

/* ---------- moteur : chasse aux images ---------- */
.grille-chasse{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;width:100%}

/* ---------- moteur : quantités ---------- */
.zone-quantite{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.cible-quantite{
  font-size:clamp(4rem,15vw,9rem);font-weight:bold;color:var(--bleu);line-height:1;
}
.jetons-poses{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;
  min-height:90px;width:min(560px,92vw);background:var(--fond);border:4px dashed var(--trait);
  border-radius:24px;padding:16px;
}
.jeton-pose{
  width:46px;height:46px;border-radius:50%;background:var(--orange);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.15);animation:apparait .2s ease-out;
}
.gros-bouton-clic{
  width:150px;height:150px;border-radius:50%;background:var(--vert);color:#fff;
  font-size:3rem;box-shadow:0 8px 0 var(--vert-f);
}
.gros-bouton-clic:active{transform:translateY(6px);box-shadow:0 2px 0 var(--vert-f)}

/* ---------- moteur : tracé de lettre ---------- */
.zone-trace{position:relative;width:min(370px,74vw,42vh);aspect-ratio:1/1;touch-action:none;margin:0 auto}
.zone-trace svg,.zone-trace canvas{position:absolute;inset:0;width:100%;height:100%}
.zone-trace .cadre{
  position:absolute;inset:0;background:var(--papier);border:5px solid var(--trait);border-radius:24px;
}
.lignes-seyes{stroke:#cfe0ff;stroke-width:1.4}
.lignes-seyes.forte{stroke:#8fb6ff;stroke-width:2}
.gabarit{stroke:#e4ebf9;stroke-width:13;fill:none;stroke-linecap:round;stroke-linejoin:round}
.chemin{stroke:#8fadde;stroke-width:2.4;fill:none;stroke-dasharray:6 8;stroke-linecap:round}
.depart{fill:var(--vert)}
.etape{fill:#c7d6f5}
.etape.vue{fill:var(--vert)}
.lettre-modele{font-size:1.4rem;font-weight:bold;color:var(--encre-doux)}

/* ---------- moteur : plan de classe ---------- */
.plan{display:grid;gap:10px;justify-content:center;width:100%}
.place{
  background:var(--papier);border:4px solid var(--trait);border-radius:18px;
  min-height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;font-weight:bold;color:var(--encre);box-shadow:0 4px 0 var(--trait);padding:6px;
  font-size:.95rem;text-transform:capitalize;
}
.place.vide{background:var(--fond);color:#aab4cc;border-style:dashed;box-shadow:none}
.place:hover{border-color:var(--bleu)}
.place.juste{border-color:var(--vert);background:#e8fbf3;box-shadow:0 4px 0 var(--vert)}
.place.faux{border-color:var(--rose);background:#ffeef4}
.place .num{font-size:.75rem;color:var(--encre-doux);font-weight:normal}
.tableau-classe{
  background:var(--encre);color:#fff;border-radius:14px;padding:10px;text-align:center;
  font-weight:bold;letter-spacing:2px;margin-bottom:8px;
}

/* ============================================================
   ESPACE ENSEIGNANT : administration
   ============================================================ */
.sous-onglets{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.sous-onglets button{
  background:var(--papier);color:var(--encre-doux);font-weight:bold;font-size:1rem;
  padding:11px 18px;border-radius:14px;box-shadow:0 3px 0 var(--trait);
}
.sous-onglets button.on{background:var(--encre);color:#fff;box-shadow:0 3px 0 #1b2138}
.bloc{background:var(--papier);border-radius:var(--r);box-shadow:var(--ombre);padding:20px;margin-bottom:18px}
.bloc h3{font-size:1.2rem;text-align:left;margin-bottom:10px}
.bloc p.aide{color:var(--encre-doux);font-size:.95rem;line-height:1.5;margin:0 0 12px}
.ligne-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.zone-texte{
  width:100%;min-height:150px;font-family:inherit;font-size:1rem;line-height:1.6;
  padding:12px;border-radius:16px;border:3px solid var(--trait);background:#f7faff;color:var(--encre);
}
.liste-activites{display:flex;flex-direction:column;gap:10px}
.rang-activite{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  background:var(--fond);border-radius:18px;padding:12px 14px;
}
.rang-activite .nom{font-weight:bold;flex:1;min-width:160px}
.rang-activite .meta{font-size:.85rem;color:var(--encre-doux)}
.inter{
  position:relative;width:54px;height:30px;border-radius:16px;background:#cdd6ec;transition:.15s;flex:none;
}
.inter.on{background:var(--vert)}
.inter::after{
  content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:#fff;transition:.15s;
}
.inter.on::after{left:27px}