/* =========================================================
   Jeux du primaire — Mesrevisions.be
   Interface pensée pour les 6-10 ans : grandes cibles tactiles
   (au moins 56 px), peu de texte, tout est lu à voix haute.
   Reprend les couleurs de style.css (orange, vert, bleu).
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&display=swap');

:root{
  --j-fond:#fef8f3; --j-carte:#fff; --j-encre:#3a2c24; --j-doux:#7c6a5f;
  --j-orange:#d9772f; --j-orange-f:#b9531a; --j-orange-c:#fadfcb;
  --j-vert:#2c8a68; --j-vert-f:#1d6e52; --j-vert-c:#dcf0e7;
  --j-bleu:#5b82ab; --j-bleu-f:#40688f; --j-bleu-c:#e3edf7;
  --j-rouge:#c0473f; --j-jaune:#f2b632;
  --j-ombre:0 6px 0 rgba(90,42,18,.12);
}
*{box-sizing:border-box}
html,body{margin:0}
body.jeu{background:var(--j-fond);color:var(--j-encre);font-family:'Baloo 2',system-ui,sans-serif;min-height:100vh;
  background-image:radial-gradient(#f3e3d4 1.4px,transparent 1.4px);background-size:26px 26px;-webkit-tap-highlight-color:transparent}
button{font-family:inherit;cursor:pointer;touch-action:manipulation}

/* ---- barre du haut ---- */
.j-haut{display:flex;align-items:center;gap:12px;padding:12px 16px;max-width:1100px;margin:0 auto}
.j-retour{color:var(--j-orange-f);text-decoration:none;font-weight:700;font-size:18px}
.j-titre{flex:1;text-align:center;font-weight:800;font-size:20px}
.j-son{background:#fff;border:3px solid var(--j-orange-c);border-radius:50%;width:52px;height:52px;font-size:24px}
.j-progres{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:0 16px 6px}
.j-progres i{width:22px;height:22px;border-radius:50%;background:#efe2d6;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:13px;color:#fff;transition:transform .3s}
.j-progres i.ok{background:var(--j-vert)} .j-progres i.aide{background:var(--j-jaune)} .j-progres i.rate{background:#c9b8a8}
.j-progres i.actuel{transform:scale(1.25);box-shadow:0 0 0 3px var(--j-orange)}

/* ---- Orion, le guide ---- */
.j-guide{display:flex;align-items:flex-end;gap:12px;max-width:900px;margin:6px auto 0;padding:0 16px}
.j-guide img{width:74px;height:74px;border-radius:50%;border:4px solid #fff;box-shadow:var(--j-ombre);flex:none;background:#fff;transition:transform .25s}
.j-guide img.parle{animation:parle .5s ease-in-out infinite alternate}
@keyframes parle{to{transform:translateY(-4px) rotate(-3deg)}}
.j-bulle{position:relative;background:#fff;border-radius:22px;padding:12px 18px;font-size:21px;font-weight:700;line-height:1.25;box-shadow:var(--j-ombre);flex:1;min-height:56px}
.j-bulle:before{content:'';position:absolute;left:-12px;bottom:18px;border:10px solid transparent;border-right:14px solid #fff;border-left:0}
.j-bulle .repeter{float:right;background:var(--j-orange-c);border:0;border-radius:14px;font-size:20px;width:44px;height:40px;margin:-4px -6px 0 8px}
.j-bulle.bien{background:var(--j-vert-c)} .j-bulle.bien:before{border-right-color:var(--j-vert-c)}
.j-bulle.oups{background:#fde7e2} .j-bulle.oups:before{border-right-color:#fde7e2}

/* ---- zone de jeu ---- */
.j-scene{max-width:1000px;margin:14px auto 30px;padding:0 16px}
.j-carte{background:var(--j-carte);border-radius:28px;box-shadow:var(--j-ombre);padding:20px;position:relative;overflow:hidden}
.j-cible{text-align:center;font-size:64px;font-weight:800;line-height:1;margin:4px 0 10px;letter-spacing:2px}
.j-cible small{display:block;font-size:18px;color:var(--j-doux);letter-spacing:0;font-weight:700}
.j-boutons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.j-btn{border:0;border-radius:20px;padding:12px 26px;font-size:24px;font-weight:800;background:var(--j-orange-f);color:#fff;box-shadow:0 5px 0 #8c421a;min-height:60px;transition:transform .08s}
.j-btn:active{transform:translateY(4px);box-shadow:0 1px 0 #8c421a}
.j-btn.vert{background:var(--j-vert-f);box-shadow:0 5px 0 #10352a}
.j-btn.bleu{background:var(--j-bleu-f);box-shadow:0 5px 0 #2a4a6b}
.j-btn.blanc{background:#fff;color:var(--j-encre);box-shadow:0 5px 0 #e4d3c4;border:3px solid #efe2d6}
.j-btn[disabled]{opacity:.45}

/* ---- blocs de numération ---- */
.j-plan{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:12px;min-height:250px}
.j-col{background:#fbf6f1;border-radius:20px;padding:10px;display:flex;flex-direction:column;align-items:center}
.j-col h4{margin:0 0 6px;font-size:17px;color:var(--j-doux)}
.j-col .tas{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-content:flex-start;flex:1;width:100%}
.j-col.c{border:3px dashed var(--j-bleu-c)} .j-col.d{border:3px dashed var(--j-vert-c)} .j-col.u{border:3px dashed var(--j-orange-c)}
.bloc{border:0;padding:0;background:none;line-height:0}
.bloc.nouveau{animation:tombe .28s ease-out}
@keyframes tombe{from{transform:translateY(-30px) scale(.6);opacity:0}}
.bloc svg{display:block}
.j-ajout{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.j-ajout button{background:#fff;border:3px solid #efe2d6;border-radius:20px;padding:8px 14px;display:flex;align-items:center;gap:8px;font-size:22px;font-weight:800;color:var(--j-encre);box-shadow:0 4px 0 #e4d3c4;min-height:64px}
.j-ajout button:active{transform:translateY(3px);box-shadow:0 1px 0 #e4d3c4}
.j-tableau{display:none;margin:12px auto 0;border-collapse:separate;border-spacing:6px;font-size:26px;font-weight:800;text-align:center}
.j-tableau.vu{display:table}
.j-tableau th{font-size:16px;color:#fff;border-radius:10px;padding:4px 12px}
.j-tableau td{background:#fbf6f1;border-radius:12px;width:70px;height:56px}
.j-tableau .tc{background:var(--j-bleu)} .j-tableau .td{background:var(--j-vert)} .j-tableau .tu{background:var(--j-orange)}

/* ---- choix ---- */
.j-choix{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.j-choix button{background:#fff;border:4px solid #efe2d6;border-radius:24px;font-size:44px;font-weight:800;min-width:150px;min-height:90px;color:var(--j-encre);box-shadow:0 6px 0 #e4d3c4}
.j-choix button.juste{border-color:var(--j-vert);background:var(--j-vert-c)}
.j-choix button.faux{border-color:var(--j-rouge);background:#fde7e2;animation:secoue .35s}
@keyframes secoue{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

/* ---- droite graduée ---- */
.j-droite{position:relative;height:205px;margin:10px 24px 0;touch-action:none;user-select:none}
.j-droite svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.j-curseur{position:absolute;top:0;width:64px;margin-left:-32px;text-align:center;cursor:grab;touch-action:none;transition:left .12s}
.j-curseur.glisse{transition:none;cursor:grabbing}
.j-curseur .pin{width:58px;height:58px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--j-orange);margin:0 auto;box-shadow:0 4px 0 #8c421a;display:flex;align-items:center;justify-content:center}
.j-curseur .pin span{transform:rotate(45deg);font-size:26px}
.j-curseur .pied{width:4px;height:52px;background:var(--j-orange);margin:0 auto}
.j-fin{display:flex;justify-content:center;gap:14px;margin-top:6px}
.j-fin button{width:64px;height:56px;border-radius:18px;border:3px solid #efe2d6;background:#fff;font-size:26px;font-weight:800;box-shadow:0 4px 0 #e4d3c4;color:var(--j-encre)}

/* ---- crocodile ---- */
.j-compare{display:flex;align-items:center;justify-content:center;gap:16px;margin:12px 0}
.j-compare .nb{font-size:72px;font-weight:800;background:#fbf6f1;border-radius:24px;padding:4px 26px;min-width:170px;text-align:center}
.j-compare .signe{width:110px;height:110px;border-radius:50%;border:4px dashed #e4d3c4;display:flex;align-items:center;justify-content:center;font-size:66px;font-weight:800;color:var(--j-vert-f)}
.j-croco{font-size:40px;text-align:center;line-height:1.1}
.j-croco span{display:inline-block;vertical-align:middle}

/* ---- effets ---- */
.j-confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}
.j-confetti i{position:absolute;top:-20px;width:12px;height:18px;border-radius:3px;animation:chute 1.4s ease-in forwards}
@keyframes chute{to{transform:translateY(105vh) rotate(720deg)}}
.j-etoile-vole{position:fixed;font-size:56px;z-index:60;animation:vole .9s ease-in forwards;pointer-events:none}
@keyframes vole{0%{transform:scale(.3)}40%{transform:scale(1.4)}100%{transform:translate(0,-60vh) scale(.5);opacity:0}}

/* ---- écrans d'accueil et de fin ---- */
.j-ecran{text-align:center;padding:26px 20px}
.j-ecran h1{font-size:44px;margin:6px 0;line-height:1.05}
.j-ecran p{font-size:21px;color:var(--j-doux);margin:8px auto;max-width:620px}
.j-ecran .grand-orion{width:150px;height:150px;border-radius:50%;border:6px solid #fff;box-shadow:var(--j-ombre)}
.j-activites{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px 0}
.j-activites span{background:#fbf6f1;border-radius:16px;padding:8px 14px;font-size:18px;font-weight:700}
.j-etoiles{font-size:70px;letter-spacing:6px;margin:6px 0}
.j-etoiles .vide{filter:grayscale(1);opacity:.3}
.j-bilan{width:100%;max-width:640px;margin:16px auto;border-collapse:collapse;font-size:18px;text-align:left}
.j-bilan th,.j-bilan td{padding:8px 10px;border-bottom:2px solid #f3e7dc}
.j-bilan th{color:var(--j-doux);font-size:15px}
.j-note{font-size:15px;color:var(--j-doux)}
.j-conseil{background:var(--j-vert-c);border-radius:18px;padding:12px 16px;max-width:640px;margin:10px auto;text-align:left;font-size:18px}

@media (max-width:640px){
  .j-cible{font-size:52px} .j-plan{grid-template-columns:1fr 1fr 1fr;gap:6px;min-height:200px}
  .j-col{padding:6px} .j-col .tas{gap:3px}
  .j-plan{grid-template-columns:1.6fr 1fr 1fr}
  .j-col.c .bloc svg{width:34px;height:34px} .j-col.d .bloc svg{width:8px;height:40px} .j-col.u .bloc svg{width:13px;height:13px}
  .j-ecran h1{font-size:34px} .j-titre{font-size:16px} .j-choix{gap:10px} .j-choix button{min-width:84px;min-height:76px;padding:0 10px}
  .j-col h4{font-size:14px} .j-bulle{font-size:18px} .j-guide img{width:58px;height:58px}
  .j-compare .nb{font-size:46px;min-width:110px;padding:4px 12px} .j-compare .signe{width:76px;height:76px;font-size:46px}
  .j-choix button{font-size:34px}
  .j-droite{margin:10px 8px 0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}