/* =========================================================================
   Charte des jeux de l'Atelier (bac à sable) — version allégée de eleves.css.
   Chargée par jeu.html : <link rel="stylesheet" href="../../../../assets/css/sandbox.css">
   Design Studio (6 oct. 2026) : studio.css ne s'applique que si <html data-theme="studio…"> (posé par p6-sandbox.js
   d'après l'adresse du jeu) ; de même affiche.css si <html data-theme="affiche"> (25 oct. 2026) ; mêmes variables et
   classes qu'ici. Un jeu n'utilise QUE ces variables et classes (jamais de couleur écrite en dur) : il est alors juste
   dans les trois designs.
   ========================================================================= */
@import url("studio.css?v=47");
@import url("affiche.css?v=56");
:root {
  --encre: #2B2340; --creme: #FFF8EC; --papier: #FFFFFF;
  --jaune: #FFD166; --orange: #FF9F43; --corail: #FF7B6B; --rose: #F9A8D4; --vert: #7BD389;
  --menthe: #7FE0D4; --bleu: #6FB3F2; --ciel: #A9DCFA; --violet: #B79CED; --gris: #D6D8E2;
  --trait: 3px; --ombre: 5px 5px 0 var(--encre);
  --police-titre: "Fredoka", "Nunito", "Segoe UI", system-ui, sans-serif;
  --police: "Nunito", "Segoe UI", system-ui, sans-serif;
  --pc: var(--jaune);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Taille du texte de l'élève (p6-sandbox.js pose data-texte d'après l'adresse du jeu, comme eleves.css) */
html[data-texte="grand"] { font-size: 112.5%; --echelle-texte: 1.125; }
html[data-texte="tres-grand"] { font-size: 125%; --echelle-texte: 1.25; }
body { margin: 0; padding: 16px; font-family: var(--police); font-weight: 600; font-size: calc(17px * var(--echelle-texte, 1)); line-height: 1.45; color: var(--encre); background: var(--creme); min-height: 100vh; }
h1, h2, h3 { font-family: var(--police-titre); font-weight: 700; line-height: 1.15; margin: 0; }
button, input { font: inherit; color: inherit; }
svg { display: block; }
[hidden] { display: none !important; }

.jeu-zone { max-width: 680px; margin: 0 auto; }
.jeu-titre { text-align: center; font-size: clamp(1.5rem, 4vw, 2.2rem); margin-bottom: 4px; }
.jeu-consigne { text-align: center; opacity: .75; margin: 0 0 18px; }
.jeu-carte { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 28px 22px; text-align: center; background: var(--papier); border: var(--trait) solid var(--encre); border-radius: 26px; box-shadow: 7px 7px 0 var(--encre); }
.jeu-texte { margin: 0; font-size: 1.1rem; }
.jeu-progression { margin: 0; font-weight: 800; opacity: .6; }
.jeu-question { margin: 0; font-family: var(--police-titre); font-size: clamp(1.5rem, 5vw, 2.2rem); }
.jeu-retour { min-height: 1.5em; margin: 0; font-weight: 800; }
.jeu-retour.bravo { color: #2E8B57; }
.jeu-retour.oups { color: #D64545; }
.jeu-explication { margin: 0; font-size: .98rem; opacity: .85; }
.jeu-score { margin: 0; font-family: var(--police-titre); font-size: 3rem; }
.jeu-etoiles { display: flex; gap: 8px; margin: 0; }
.etoile-gagnee { width: 52px; height: 52px; color: var(--gris); }
.etoile-gagnee.pleine { color: #F2B705; animation: pop .4s backwards; }
.etoile-gagnee:nth-child(2).pleine { animation-delay: .15s; }
.etoile-gagnee:nth-child(3).pleine { animation-delay: .3s; }
@keyframes pop { from { transform: scale(0) rotate(-30deg); } 70% { transform: scale(1.25); } to { transform: scale(1); } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 14px; border: var(--trait) solid var(--encre); background: var(--papier); color: var(--encre); font-weight: 800; text-decoration: none; cursor: pointer; box-shadow: 4px 4px 0 var(--encre); transition: transform .08s, box-shadow .08s; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--encre); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--encre); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn-jaune { background: var(--jaune); }
.btn-vert { background: var(--vert); }
.btn-rose { background: var(--rose); }
.btn-grand { padding: 16px 32px; font-size: 1.2rem; font-family: var(--police-titre); }
.btn-couleur { background: var(--pc); }

/* Choix (quiz, trous) */
.choix { display: grid; gap: 10px; width: 100%; }
.choix .btn { width: 100%; text-align: left; justify-content: flex-start; font-size: 1.05rem; }
.choix .btn.bonne { background: var(--vert); }
.choix .btn.mauvaise { background: var(--rose); }
.choix .btn.eteint { opacity: .55; }

.champ { width: min(260px, 100%); padding: 10px 14px; font-family: var(--police-titre); font-size: 1.5rem; text-align: center; border: var(--trait) solid var(--encre); border-radius: 16px; background: var(--creme); }
.champ:focus { outline: 4px solid var(--jaune); outline-offset: 2px; }
.trou { display: inline-block; min-width: 90px; padding: 0 10px; border-bottom: 4px solid var(--pc); font-family: var(--police-titre); }
.trou.ok { color: #2E8B57; } .trou.ko { color: #D64545; text-decoration: line-through; }

/* Memory */
.memory-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; }
.memory-carte { aspect-ratio: 4 / 3; border: var(--trait) solid var(--encre); border-radius: 14px; background: var(--pc); box-shadow: 3px 3px 0 var(--encre); cursor: pointer; font-family: var(--police-titre); font-size: clamp(.95rem, 2.6vw, 1.25rem); padding: 6px; display: grid; place-items: center; transition: transform .1s; color: transparent; overflow: hidden; word-break: break-word; }
.memory-carte.retournee, .memory-carte.trouvee { background: var(--papier); color: var(--encre); }
.memory-carte.trouvee { background: var(--vert); box-shadow: none; transform: scale(.96); cursor: default; }
.memory-carte:hover:not(.trouvee) { transform: translate(-1px, -1px); }

/* Glisser-déposer */
.glisser-zone { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.glisser-elements { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 54px; padding: 10px; border: 2px dashed var(--encre); border-radius: 14px; background: var(--papier); }
.jeton { padding: 8px 14px; border: var(--trait) solid var(--encre); border-radius: 12px; background: var(--jaune); box-shadow: 3px 3px 0 var(--encre); cursor: grab; font-weight: 800; user-select: none; -webkit-user-select: none; touch-action: none; }
.jeton.choisi { outline: 4px solid var(--encre); outline-offset: 2px; transform: rotate(-3deg); }
.jeton.ok { background: var(--vert); cursor: default; } .jeton.ko { background: var(--rose); }
.categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.categorie { min-height: 110px; padding: 10px; border: var(--trait) solid var(--encre); border-radius: 16px; background: var(--papier); display: flex; flex-direction: column; gap: 8px; align-items: center; transition: background .1s; }
.categorie.survol { background: var(--ciel); }
.categorie-titre { font-family: var(--police-titre); font-size: 1.1rem; padding: 2px 12px; border-radius: 999px; background: var(--pc); border: 2px solid var(--encre); }
.categorie-contenu { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; width: 100%; }

/* Bandeau des étoiles hors site (test) */
#p6-bandeau { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 30px); opacity: 0; padding: 10px 18px; border-radius: 14px; background: var(--jaune); border: var(--trait) solid var(--encre); box-shadow: 4px 4px 0 var(--encre); font-weight: 800; transition: transform .2s, opacity .2s; pointer-events: none; z-index: 9; }
#p6-bandeau.visible { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 600px) {
  body { padding: 10px; font-size: calc(16px * var(--echelle-texte, 1)); }
  .jeu-carte { padding: 20px 14px; border-radius: 20px; box-shadow: 5px 5px 0 var(--encre); }
  .memory-grille { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }