/* Cartable ABC — dessin animé, ambiance « école » (porteur, 26 oct. 2026) : une classe dessinée (menus sur le tableau),
   le cahier à grands carreaux (étapes), un album d'autocollants. Contours bleu nuit épais, couleurs franches, ombres
   dures qui s'écrasent à l'appui. Police d'école Andika ; écriture attachée Playwrite FR Moderne. Paysage, téléphone d'abord. */
@font-face { font-family: 'Andika'; src: url('polices/andika-400.woff2') format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Andika'; src: url('polices/andika-700.woff2') format('woff2'); font-weight: 700; font-display: block; }
@font-face { font-family: 'Attachee'; src: url('polices/cursive-400.woff2') format('woff2'); font-weight: 400; font-display: block; }

:root {
  --encre: #22285a; --papier: #fffdf5; --craie: #fbfbf4; --tableau: #2f6b47;
  --rouge: #ff5b4f; --rouge-f: #d23a30; --jaune: #ffcd2e; --jaune-f: #e0a000; --vert: #5cc93e; --vert-f: #3a9a22;
  --bleu: #3ea4f4; --bleu-f: #1d76c2; --violet: #9a6bff; --violet-f: #6c43d4; --blanc: #ffffff; --blanc-f: #d9dceb;
  /* Les noms de couleurs des sons (donnees/programme.js) */
  --corail: var(--rouge); --corail-f: var(--rouge-f); --safran: var(--jaune); --safran-f: var(--jaune-f); --menthe: var(--vert); --menthe-f: var(--vert-f);
  --ciel: var(--bleu); --ciel-f: var(--bleu-f); --lilas: var(--violet); --lilas-f: var(--violet-f); --creme: var(--blanc); --creme-f: var(--blanc-f);
  --marge: max(12px, env(safe-area-inset-left));
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--tableau); color: var(--encre); font-family: 'Andika', system-ui, sans-serif; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
img { pointer-events: none; -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }
.attachee, .attachee .galet-txt, .attachee .morceau { font-family: 'Attachee', 'Andika', cursive !important; font-weight: 400 !important; }

#fond { position: fixed; inset: 0; z-index: 0; background: #e9c79a url('img/classe.webp') center / cover no-repeat; }
#app { position: fixed; inset: 0; z-index: 2; }
.ecran { position: absolute; inset: 0; }
/* Le cahier à grands carreaux (Seyès) : les étapes, la route, les réglages. */
.papier { background-color: var(--papier);
  background-image: linear-gradient(90deg, transparent calc(var(--marge) + 64px), #f08d8d calc(var(--marge) + 64px), #f08d8d calc(var(--marge) + 67px), transparent calc(var(--marge) + 67px)),
    linear-gradient(rgba(70, 130, 220, .32) 1.5px, transparent 1.5px), linear-gradient(rgba(70, 130, 220, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(70, 130, 220, .14) 1px, transparent 1px);
  background-size: 100% 100%, 100% 32px, 100% 8px, 32px 100%; }

/* ---------- Boutons dessin animé ---------- */
.bouton { --c: var(--jaune); --f: var(--jaune-f); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 18px;
  background: var(--c); border: 3px solid var(--encre); box-shadow: inset 0 4px 0 rgba(255, 255, 255, .45), inset 0 -5px 0 rgba(0, 0, 0, .1), 0 6px 0 var(--encre);
  color: var(--encre); font-weight: 700; font-size: 20px; transition: transform .08s, box-shadow .08s; }
.bouton:active, .bouton.appuye { transform: translateY(5px); box-shadow: inset 0 4px 0 rgba(255, 255, 255, .45), 0 1px 0 var(--encre); }
.bouton.grand { min-height: 72px; padding: 0 56px; border-radius: 24px; font-size: 32px; }
.bouton.petit { min-height: 44px; font-size: 16px; padding: 0 18px; }
.bouton img { height: 32px; }
.bouton.blanc { --c: var(--blanc); } .bouton.jaune { --c: var(--jaune); }
.bouton.whatsapp { --c: #49d17f; } .bouton.telegram { --c: #4fb3ea; }
.bouton:disabled { filter: grayscale(.6) brightness(.9); }
.rouge { --c: var(--rouge); --f: var(--rouge-f); } .jaune { --c: var(--jaune); --f: var(--jaune-f); } .vert { --c: var(--vert); --f: var(--vert-f); }
.bleu { --c: var(--bleu); --f: var(--bleu-f); } .violet { --c: var(--violet); --f: var(--violet-f); }
.corail { --c: var(--rouge); --f: var(--rouge-f); } .safran { --c: var(--jaune); --f: var(--jaune-f); } .menthe { --c: var(--vert); --f: var(--vert-f); }
.ciel { --c: var(--bleu); --f: var(--bleu-f); } .lilas { --c: var(--violet); --f: var(--violet-f); } .creme { --c: var(--blanc); --f: var(--blanc-f); }

.rond { position: relative; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: var(--blanc); border: 3px solid var(--encre); box-shadow: 0 4px 0 var(--encre); }
.rond svg { width: 26px; height: 26px; fill: none; stroke: var(--encre); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#b-reglages svg path:first-child { fill: var(--encre); stroke: none; }
.rond img { width: 118%; height: 118%; object-fit: contain; }
.rond:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--encre); }
.rond.petit { width: 48px; height: 48px; }
.coin-hg { position: absolute; top: 10px; left: var(--marge); z-index: 5; }
.coin-hd { position: absolute; top: 10px; right: max(12px, env(safe-area-inset-right)); z-index: 5; }
.rond .anneau { position: absolute; inset: -7px; border-radius: 50%; border: 5px solid var(--jaune); opacity: 0; pointer-events: none; }
.rond.maintien .anneau { opacity: 1; animation: anneau 1s linear forwards; }
@keyframes anneau { from { clip-path: polygon(50% 50%, 50% 0, 50% 0); } 25% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 50%); } 50% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 50% 100%); } 75% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 50%); } to { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0); } }
.titre-ecran { position: absolute; top: 14px; left: 0; right: 0; margin: 0; text-align: center; font-size: 26px; font-weight: 700; color: var(--encre); pointer-events: none; }
.lien { color: var(--encre); opacity: .75; text-decoration: underline; font-size: 14px; }

/* ---------- Le tableau de la classe : la zone du dessin où l'on pose le menu ---------- */
.tableau-zone { position: absolute; left: var(--tz-x, 24vw); top: var(--tz-y, 14vh); width: var(--tz-l, 52vw); height: var(--tz-h, 45vh); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; padding: 1vh 1vw; }
.titre-img { width: 96%; max-height: 70%; object-fit: contain; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .25)); }
#titre .tableau-zone { justify-content: center; }
#jouer { position: absolute; left: 50%; bottom: max(8vh, 18px); transform: translateX(-50%); animation: respire 2.4s ease-in-out infinite; }
#jouer:active { transform: translateX(-50%) translateY(5px); }
@keyframes respire { 50% { scale: 1.05; } }
#titre.sortie { animation: sortie .35s ease forwards; }
@keyframes sortie { to { opacity: 0; } }
.menu-titre { width: 62%; max-height: 30%; object-fit: contain; }
.menu-modes { display: flex; gap: 2.2vw; justify-content: center; width: 100%; }
.mode { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 24%; }
.mode img { width: 100%; max-height: min(18vh, 10vw); object-fit: contain; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .25)); transition: transform .1s; }
.mode b { font-size: clamp(14px, 4.4vh, 24px); color: var(--craie); text-shadow: 0 2px 0 rgba(0, 0, 0, .35); white-space: nowrap; }
.mode:active img { transform: translateY(4px) scale(.96); }
.mode.eclaire img { animation: eclaire-mode 1.4s ease-in-out infinite; }
@keyframes eclaire-mode { 50% { transform: scale(1.12); filter: drop-shadow(0 0 14px rgba(255, 240, 140, .95)); } }
#liens-plateforme { position: absolute; left: var(--marge); bottom: 10px; display: flex; gap: 10px; align-items: center; z-index: 4; }
.lien-plateforme { font-size: 13px; color: var(--encre); padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, .85); border: 2px solid var(--encre); }

/* ---------- Pistes ---------- */
.pistes { display: flex; align-items: center; justify-content: center; gap: 5vw; height: 100%; }
.piste { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.piste-signes { display: flex; gap: 4px; padding: 10px 18px; border-radius: 22px; background: rgba(255, 255, 255, .08); border: 3px dashed rgba(255, 255, 255, .35); }
.piste-signes i { font-style: normal; font-weight: 700; font-size: clamp(44px, 17vh, 96px); line-height: 1; color: var(--c); -webkit-text-stroke: 3px var(--encre); paint-order: stroke fill; text-shadow: 0 5px 0 var(--encre); }
.piste b { font-size: clamp(18px, 5.5vh, 28px); color: var(--craie); }
.piste-avance { font-size: 14px; color: var(--craie); opacity: .85; min-height: 17px; }
.piste:active .piste-signes { transform: scale(.97); }
.piste.eclaire .piste-signes { animation: eclaire-mode 1.4s ease-in-out infinite; }

/* ---------- Route (page de cahier) ---------- */
.route { position: absolute; left: 0; right: 0; top: 60px; bottom: 0; overflow-x: auto; overflow-y: hidden; display: flex; align-items: center; padding: 0 6vw 0 calc(var(--marge) + 90px); scrollbar-width: none; scroll-behavior: smooth; }
.route::-webkit-scrollbar { display: none; }
.chapitre { position: relative; flex: none; display: flex; align-items: center; height: 100%; padding: 0 2.5vw; }
.chapitre-nom { position: absolute; left: 2.5vw; top: 3vh; font-size: 14px; color: #5a5f8c; white-space: nowrap; }
.chapitre-nom b { display: block; font-size: 18px; color: var(--encre); }
.chapitre.partie::before { content: attr(data-partie); position: absolute; left: 2.5vw; top: -2px; font-size: 13px; font-weight: 700; color: var(--rouge-f); text-transform: uppercase; letter-spacing: .06em; }
.noeuds { position: relative; display: flex; align-items: center; gap: 3.4vw; height: 100%; }
.noeuds::before { content: ''; position: absolute; left: 30px; right: 30px; top: 50%; border-top: 4px dotted rgba(34, 40, 90, .35); }
.noeud { position: relative; width: clamp(58px, 18vh, 90px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; transform: translateY(var(--dy, 0));
  --c: #e9ebf5; background: var(--c); border: 3px solid var(--encre); box-shadow: inset 0 4px 0 rgba(255, 255, 255, .5), 0 5px 0 var(--encre); }
.noeud b { font-size: clamp(22px, 7vh, 34px); font-weight: 700; color: var(--encre); }
.noeud.ferme { opacity: .5; }
.noeud.fait { --c: var(--vert); }
.noeud.ouvert { --c: var(--jaune); }
.noeud.actuel { animation: eclaire-noeud 1.4s ease-in-out infinite; }
@keyframes eclaire-noeud { 50% { box-shadow: inset 0 4px 0 rgba(255, 255, 255, .5), 0 5px 0 var(--encre), 0 0 0 9px rgba(255, 205, 46, .55); } }
.noeud.defi { width: clamp(76px, 24vh, 118px); --c: var(--rouge); }
.noeud.defi.ferme { --c: #e9ebf5; }
.noeud.defi.fait { --c: var(--violet); }
.noeud.defi img { width: 70%; }
.noeud .mini { position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); display: flex; gap: 1px; }
.noeud .mini i { width: 18px; height: 18px; background: url('img/ui/etoile.webp') center / contain no-repeat; opacity: .25; }
.noeud .mini i.on { opacity: 1; }
.noeud:active { transform: translateY(var(--dy, 0)) scale(.94); }

/* ---------- Étape ---------- */
.barre { position: absolute; top: 0; left: 0; right: 0; height: 66px; display: flex; align-items: center; gap: 14px; padding: 0 max(12px, env(safe-area-inset-right)) 0 var(--marge); z-index: 4; }
.avancee { position: relative; flex: 1; height: 14px; border-radius: 8px; background: #e7e9f3; border: 3px solid var(--encre); }
.avancee i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 5px; background: var(--jaune); transition: width .6s ease; }
#avancee-fusee { position: absolute; top: 50%; left: 0; width: 44px; transform: translate(-50%, -55%) rotate(45deg); transition: left .6s ease; }
.rond.voix { width: 62px; height: 62px; background: none; border: 0; box-shadow: none; }
.rond.voix.eclaire { animation: eclaire-voix 1.2s ease-in-out infinite; border-radius: 50%; }
@keyframes eclaire-voix { 50% { box-shadow: 0 0 0 10px rgba(255, 205, 46, .5), 0 0 30px rgba(255, 205, 46, .8); } }
.consigne-texte { position: absolute; top: 60px; left: 0; right: 0; margin: 0; text-align: center; font-size: 15px; color: #4c5285; pointer-events: none; z-index: 3; min-height: 18px; padding: 0 80px; }
body.sans-textes .consigne-texte { display: none; }
.scene { position: absolute; left: 0; right: 0; top: 80px; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 4vw; padding: 2vh var(--marge) 3vh calc(var(--marge) + 70px); }
.scene.pile { flex-direction: column; gap: 3vh; }
.scene.cote-a-cote { gap: 5vw; }

/* Une carte de chiffre, de lettre ou de syllabe : grosse, colorée, contour épais (dessin animé). */
.galet { --c: var(--blanc); --f: var(--blanc-f); position: relative; width: var(--g, clamp(64px, 22vh, 118px)); aspect-ratio: 1; border-radius: 26%; display: grid; place-items: center;
  background: var(--c); border: 3.5px solid var(--encre); box-shadow: inset 0 5px 0 rgba(255, 255, 255, .45), inset 0 -6px 0 rgba(0, 0, 0, .1), 0 7px 0 var(--encre); transition: transform .09s; }
.galet .galet-txt { font-weight: 700; font-size: calc(var(--g, clamp(64px, 22vh, 118px)) * .62); line-height: 1; color: var(--blanc); -webkit-text-stroke: calc(var(--g, 100px) * .035) var(--encre); paint-order: stroke fill; text-shadow: 0 calc(var(--g, 100px) * .03) 0 var(--encre); }
.galet.creme .galet-txt { color: var(--encre); -webkit-text-stroke: 0; text-shadow: none; }
.galet.lettre .galet-txt { font-size: calc(var(--g, clamp(64px, 22vh, 118px)) * .6); }
.galet.syl .galet-txt { font-size: calc(var(--g, clamp(64px, 22vh, 118px)) * .4); }
.galet.attachee .galet-txt { font-size: calc(var(--g, clamp(64px, 22vh, 118px)) * .5); -webkit-text-stroke: 0; color: var(--encre); text-shadow: none; }
.galet.attachee { --c: var(--blanc); }
.galet:active { transform: translateY(5px); box-shadow: inset 0 5px 0 rgba(255, 255, 255, .45), 0 2px 0 var(--encre); }
.galet.grand { --g: clamp(76px, 28vh, 150px); }
.galet.moyen { --g: clamp(60px, 19vh, 104px); }
.galet.geant { --g: clamp(120px, 48vh, 250px); }
.galet.trou { --c: transparent; background: rgba(255, 255, 255, .6); border-style: dashed; box-shadow: none; }
.galet.juste, .objet.juste, .groupe.juste, .carte-image.juste, .carte-scene.juste, .choix-mot.juste { animation: saute .5s cubic-bezier(.3, 1.6, .5, 1); }
.galet.juste { --c: var(--vert); }
.galet.juste.attachee .galet-txt { color: var(--blanc); }
.galet.saute { animation: saute .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes saute { 40% { transform: translateY(-14px) scale(1.06, .94); } 70% { transform: translateY(0) scale(.97, 1.03); } }
.secoue { animation: secoue .4s ease; }
@keyframes secoue { 20%, 60% { transform: translateX(-8px) rotate(-2deg); } 40%, 80% { transform: translateX(8px) rotate(2deg); } }
.indice { box-shadow: 0 7px 0 var(--encre), 0 0 0 9px rgba(255, 205, 46, .7), 0 0 32px rgba(255, 205, 46, .9) !important; }
.arrive { animation: arrive .5s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes arrive { from { opacity: 0; transform: translateY(20px) scale(.6); } }

.rangee { display: flex; align-items: center; justify-content: center; gap: 3.5vw; flex-wrap: nowrap; }
.rangee.colonne { flex-direction: column; gap: 2.4vh; }
.zone-objets { position: relative; width: 44vw; height: 70vh; max-height: calc(100vh - 110px); }
.zone-objets.large { width: 56vw; }
.objet { position: absolute; transform: translate(-50%, -50%); aspect-ratio: 1; }
.objet img, img.objet { width: 100%; height: 100%; object-fit: contain; }
.objet > img { position: absolute; inset: 0; }
img.objet { position: absolute; transform: translate(-50%, -50%); }
.objet.arrive, img.objet.arrive { animation: arrive-objet .5s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes arrive-objet { from { opacity: 0; transform: translate(-50%, -30%) scale(.5); } }
.objet.pose { left: 50%; top: 50%; width: 40%; }
.objet.montre { transform: translate(-50%, -50%) scale(1.15); transition: transform .25s; }
.objet.compte::after { content: ''; position: absolute; inset: -4%; border-radius: 50%; border: 4px solid var(--vert); background: rgba(92, 201, 62, .12); z-index: -1; }
/* Le badge du comptage : gros, plein, chiffre de couleur unie (porteur, 26 oct. 2026). */
.objet .numero { position: absolute; top: -14%; right: -12%; min-width: 46px; height: 46px; padding: 0 8px; border-radius: 23px; display: grid; place-items: center; background: var(--jaune); color: var(--encre); font-weight: 700; font-size: 30px; line-height: 1; border: 3px solid var(--encre); box-shadow: 0 4px 0 var(--encre); animation: arrive .3s both; z-index: 2; }
.a-compter { border-radius: 50%; }
.objet.secoue { animation: secoue-objet .4s ease; }
@keyframes secoue-objet { 25%, 75% { transform: translate(-56%, -50%); } 50% { transform: translate(-44%, -50%); } }
img.objet.vient { animation: vient .5s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes vient { from { transform: translate(60vw, -60%) rotate(30deg); } }
img.objet.envole { animation: envole .9s ease-in forwards; }
@keyframes envole { to { transform: translate(-50%, -90vh) rotate(-20deg); opacity: 0; } }

.groupe { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 4px; padding: 12px; border-radius: 22px; background: var(--blanc); border: 3px solid var(--encre); box-shadow: 0 6px 0 var(--encre); width: min(25vw, 220px); }
.groupe img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.groupe:active { transform: translateY(4px); }

.zone-flash { display: flex; gap: 2vw; align-items: center; justify-content: center; position: relative; }
.de { position: relative; width: clamp(110px, 40vh, 210px); aspect-ratio: 1; border-radius: 22%; background: var(--blanc); border: 4px solid var(--encre); box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .08), 0 8px 0 var(--encre); transition: opacity .3s; }
.de i { position: absolute; width: 17%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: var(--encre); }
.de.cache { opacity: 0; }
.voile-flash { position: absolute; inset: 0; display: grid; place-items: center; }
.voile-flash::after { content: '?'; font-size: 80px; font-weight: 700; color: rgba(34, 40, 90, .3); }
.boite-dix { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 10px; border-radius: 16px; background: #ffe8a8; border: 3px solid var(--encre); box-shadow: 0 6px 0 var(--encre); width: clamp(200px, 36vw, 340px); }
.boite-dix span { aspect-ratio: 1; border-radius: 10px; background: #fffaf0; border: 2px solid rgba(34, 40, 90, .35); display: grid; place-items: center; }
.boite-dix span.jeton { position: relative; }
.boite-dix span.jeton::after { content: ''; width: 76%; aspect-ratio: 1; border-radius: 50%; background: var(--c, var(--rouge)); border: 2.5px solid var(--encre); }
.boite-dix span.jeton.corail::after { background: var(--rouge); } .boite-dix span.jeton.ciel::after { background: var(--bleu); } .boite-dix span.jeton.menthe::after { background: var(--vert); }
.zone-flash.deux { flex-direction: column; gap: 1.6vh; }
.zone-flash.deux .boite-dix { width: clamp(180px, 30vw, 300px); }
.file-nombres { display: flex; gap: 1.6vw; }
.zone-calcul { position: relative; width: 78vw; height: 48vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.zone-calcul .objets-calcul { position: relative; width: 100%; flex: 1; }
.equation { display: flex; align-items: center; gap: 1.2vw; padding: 4px 18px; border-radius: 16px; background: var(--blanc); border: 3px solid var(--encre); box-shadow: 0 5px 0 var(--encre); margin-top: 1vh; }
.equation span { font-weight: 700; font-size: clamp(30px, 9vh, 52px); }
.equation .op { color: var(--rouge-f); }
.equation .q { color: rgba(34, 40, 90, .4); min-width: 1em; text-align: center; }
.equation .q.trouve { color: var(--vert-f); }
.equation.grande { margin: 0; }
.equation.grande span { font-size: clamp(54px, 20vh, 104px); }
.bouton-aide { position: absolute; right: 0; top: 0; width: 64px; height: 64px; border-radius: 50%; background: var(--blanc); border: 3px solid var(--encre); box-shadow: 0 4px 0 var(--encre); display: grid; place-items: center; }
.bouton-aide img { width: 72%; }
.aide-objets { position: absolute; left: 50%; bottom: -7vh; transform: translateX(-50%); display: flex; align-items: center; gap: 1vw; }
.aide-objets .groupe { width: 18vw; padding: 8px; }
.aide-objets .boite-dix { width: 16vw; }
.op-aide { font-size: 40px; color: var(--rouge-f); }

/* Écrire au doigt */
.scene.trace { padding: 0; }
.zone-trace { position: relative; width: min(72vw, 120vh); height: 100%; }
.toile-trace { position: absolute; inset: 0; touch-action: none; }
.modele-trace { position: absolute; left: calc(var(--marge) + 80px); top: 3vh; width: clamp(70px, 22vh, 120px); aspect-ratio: 1; border-radius: 24%; display: grid; place-items: center; background: var(--blanc); border: 3px solid var(--encre); box-shadow: 0 5px 0 var(--encre); z-index: 2; }
.modele-lettre { font-weight: 700; font-size: clamp(44px, 14vh, 80px); color: var(--encre); }

/* Lettres, syllabes, mots */
.exemple-bloc { display: flex; flex-direction: column; align-items: center; gap: 2vh; }
.exemple { width: clamp(100px, 36vh, 200px); aspect-ratio: 1; display: grid; place-items: center; position: relative; }
.exemple img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.mot-exemple { font-weight: 700; font-size: clamp(30px, 11vh, 60px); letter-spacing: .04em; padding: 4px 20px; border-radius: 16px; background: var(--blanc); border: 3px solid var(--encre); box-shadow: 0 5px 0 var(--encre); color: var(--encre); }
.mot-exemple .eclaire-lettre { -webkit-text-stroke: 2px var(--encre); paint-order: stroke fill; font-size: 1.12em; }
.mot-exemple.attachee { letter-spacing: 0; }
.fleche-forme { width: 8vw; height: 10px; border-top: 6px dashed var(--encre); position: relative; opacity: .6; }
.fleche-forme::after { content: ''; position: absolute; right: -6px; top: -14px; border: 11px solid transparent; border-left: 16px solid var(--encre); }
.carte-image, .carte-scene { position: relative; width: clamp(110px, 40vh, 210px); aspect-ratio: 1; border-radius: 26px; background: var(--blanc); border: 3px solid var(--encre); box-shadow: 0 6px 0 var(--encre); transition: transform .1s; }
.scene.pile .carte-image, .scene.pile .carte-scene { width: clamp(100px, 34vh, 190px); }
.carte-image img { position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: contain; }
.carte-image.dit { transform: translateY(-10px) scale(1.06); background: #fff6c8; }
.carte-image.grande { width: clamp(140px, 54vh, 270px); }
.carte-image.petite { width: clamp(80px, 26vh, 130px); }
.carte-image:active { transform: translateY(4px); }
.piste-glisse { display: flex; align-items: center; gap: 3vw; }
.fleche-glisse { width: 12vw; height: 10px; border-top: 6px dashed rgba(34, 40, 90, .5); position: relative; }
.fleche-glisse::after { content: ''; position: absolute; right: -6px; top: -14px; border: 11px solid transparent; border-left: 16px solid rgba(34, 40, 90, .6); }
.galet.mobile { touch-action: none; z-index: 2; cursor: grab; transition: none; }
.syllabe-collee { --g: clamp(110px, 38vh, 200px); width: auto; min-width: var(--g); padding: 0 .3em; animation: saute .6s cubic-bezier(.3, 1.6, .5, 1); }
.syllabe-collee i { font-style: normal; }
.planche-mot { display: flex; align-items: baseline; gap: 2px; padding: 8px 22px; border-radius: 18px; background: var(--blanc); border: 3px solid var(--encre); box-shadow: 0 6px 0 var(--encre); }
.planche-mot.grande .morceau { font-size: clamp(46px, 15vh, 88px); }
.planche-mot.choix { padding: 4px 18px; justify-content: center; gap: 0; }
.planche-mot.choix .morceau { font-size: clamp(28px, 9.5vh, 52px); padding: 0; }
.morceau { font-weight: 700; line-height: 1.15; padding: 0 2px; border-radius: 10px; color: var(--rouge-f); }
.morceau.b { color: var(--bleu-f); }
.morceau .muet { color: #a5a8bd; }
.morceau.lu { background: rgba(255, 205, 46, .45); }
.choix-mot { border-radius: 20px; }
.choix-mot:active { transform: translateY(4px); }
.ordre-haut { display: flex; align-items: center; gap: 4vw; }
.cases-mot { display: flex; gap: 8px; }
.case-vide, .case-pleine { min-width: clamp(58px, 18vh, 96px); height: clamp(58px, 18vh, 96px); border-radius: 18px; display: grid; place-items: center; font-weight: 700; font-size: clamp(30px, 10vh, 54px); padding: 0 8px; }
.case-vide { border: 3px dashed rgba(34, 40, 90, .45); background: rgba(255, 255, 255, .6); }
.case-pleine { background: var(--blanc); color: var(--encre); border: 3px solid var(--encre); box-shadow: 0 5px 0 var(--encre); }
.galet.place { opacity: .2; pointer-events: none; }
.planche-phrase { padding: 8px 24px; border-radius: 18px; background: var(--blanc); color: var(--encre); font-weight: 700; font-size: clamp(26px, 8.5vh, 46px); border: 3px solid var(--encre); box-shadow: 0 6px 0 var(--encre); }
.carte-scene .support { position: absolute; left: 8%; right: 8%; bottom: 14%; width: 84%; height: 60%; object-fit: contain; object-position: 50% 100%; z-index: 1; }
.carte-scene .pose-sur { position: absolute; left: 32%; width: 36%; bottom: 52%; height: 36%; object-fit: contain; object-position: 50% 100%; z-index: 2; }
.carte-scene .pose-sous { position: absolute; left: 34%; width: 32%; bottom: 3%; height: 24%; object-fit: contain; object-position: 50% 100%; }

.suivant { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: 18px; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; z-index: 5;
  background: var(--vert); border: 4px solid var(--encre); box-shadow: inset 0 5px 0 rgba(255, 255, 255, .45), 0 7px 0 var(--encre); animation: arrive .4s both, eclaire-noeud 1.6s 1s ease-in-out infinite; }
.suivant svg { width: 44px; height: 44px; fill: none; stroke: var(--encre); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.suivant:active { transform: translateY(5px); }
.suivant.grand { width: 96px; height: 96px; }

/* ---------- L'album d'autocollants (un livre ouvert : nombres à gauche, lettres à droite) ---------- */
.livre { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: min(94vw, 172vh); height: min(82vh, 47vw); display: flex; border: 4px solid var(--encre); border-radius: 18px; background: #c0392b; padding: 10px; box-shadow: 0 8px 0 var(--encre); }
.page { flex: 1; background: var(--papier); border: 3px solid var(--encre); border-radius: 10px; padding: 1.6vh 1.2vw; display: flex; flex-direction: column; gap: 1vh; }
.page + .page { margin-left: 6px; }
.page h3 { margin: 0; text-align: center; font-size: clamp(14px, 4.4vh, 22px); }
.page-grille { flex: 1; display: grid; gap: .8vh .6vw; align-content: center; }
.page-grille.nombres { grid-template-columns: repeat(7, 1fr); }
.page-grille.lettres { grid-template-columns: repeat(6, 1fr); }
.case-album { position: relative; aspect-ratio: 1; border-radius: 50%; border: 2.5px dashed rgba(34, 40, 90, .35); display: grid; place-items: center; max-height: 12vh; margin: auto; width: 100%; max-width: 12vh; }
.case-album .signe { position: absolute; font-weight: 700; font-size: clamp(12px, 3.6vh, 20px); color: rgba(34, 40, 90, .35); }
.autocollant { position: absolute; inset: -6%; border-radius: 50%; background: var(--blanc); border: 3px solid var(--encre); box-shadow: 0 3px 0 var(--encre); display: grid; place-items: center; }
.autocollant img { width: 74%; height: 74%; object-fit: contain; }
.autocollant .tampon { position: absolute; right: -10%; bottom: -10%; min-width: 46%; height: 46%; border-radius: 30%; background: var(--jaune); border: 2.5px solid var(--encre); display: grid; place-items: center; font-weight: 700; font-size: clamp(10px, 2.8vh, 16px); padding: 0 3px; }
.autocollant .formes { position: absolute; left: -8%; top: -12%; display: flex; gap: 1px; }
.autocollant .formes i { font-style: normal; font-size: clamp(8px, 2vh, 12px); font-weight: 700; background: var(--vert); color: var(--blanc); border: 1.5px solid var(--encre); border-radius: 6px; padding: 0 2px; }
.autocollant.fragile { opacity: .55; }
.autocollant.colle { animation: colle .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes colle { from { transform: scale(1.6); } }
.case-album.vise { border-color: var(--jaune-f); box-shadow: 0 0 0 6px rgba(255, 205, 46, .5); }
.etoiles-or { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; min-height: 20px; }
.etoiles-or img { width: clamp(16px, 4vh, 24px); }
#album #reviser { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); z-index: 3; }
#album #reviser:active { transform: translateX(-50%) translateY(5px); }
#album .coin-hg { z-index: 6; }

/* ---------- Fin d'étape : ce qu'on gagne, puis l'album ---------- */
#fin { background: rgba(255, 253, 245, .55); }
.fin-texte { position: absolute; top: 10px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 16px; z-index: 3; }
.fin-texte h2 { margin: 0; font-size: clamp(24px, 7.5vh, 40px); padding: 4px 18px; border-radius: 14px; background: var(--blanc); border: 3px solid var(--encre); box-shadow: 0 5px 0 var(--encre); }
.fin-etoiles { display: flex; gap: 6px; }
.fin-etoiles img { width: clamp(36px, 10vh, 56px); }
.fin-etoiles img.vide { filter: grayscale(1) brightness(1.2); opacity: .45; }
.fin-etoiles img.allume { animation: arrive .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.fin-gain { position: absolute; left: 50%; top: 54%; width: clamp(140px, 50vh, 260px); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 4; transition: left .9s cubic-bezier(.5, 0, .3, 1), top .9s cubic-bezier(.5, 0, .3, 1), width .9s cubic-bezier(.5, 0, .3, 1); }
.fin-gain .autocollant { inset: 0; animation: arrive .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.fin-gain .rayons { position: absolute; inset: -30%; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 205, 46, .35) 0 12deg, transparent 12deg 24deg); animation: tourne 14s linear infinite; z-index: -1; }
@keyframes tourne { to { transform: rotate(360deg); } }
.petit-livre { top: 56%; height: min(74vh, 42vw); width: min(84vw, 150vh); animation: arrive .5s both; }

/* ---------- Défi fusée ---------- */
.jauge-temps { flex: 1; height: 16px; border-radius: 9px; background: #e7e9f3; border: 3px solid var(--encre); overflow: hidden; }
.jauge-temps i { display: block; height: 100%; width: 100%; background: var(--rouge); transform-origin: 0 50%; }
.fusee-corps { position: absolute; inset: 66px 0 0; display: flex; }
.piste-fusee { position: relative; width: 24vw; flex: none; margin-left: calc(var(--marge) + 60px); border-right: 3px dashed rgba(34, 40, 90, .25); }
.astre { position: absolute; left: 50%; top: 3vh; width: clamp(60px, 20vh, 110px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; border: 3px solid var(--encre); }
.astre.lune { background: #e4e4ea url('img/objets/lune.webp') center / 80% no-repeat; }
.astre.mars { background: radial-gradient(circle at 35% 30%, #ff9b72, #e2502c 60%, #b8371d); }
.astre.jupiter { background: repeating-linear-gradient(0deg, #f3c58a 0 12%, #d98a4a 12% 22%, #f7dfb8 22% 30%); }
.astre.saturne { background: radial-gradient(circle at 35% 30%, #ffe9a6, #e6c15e 70%); box-shadow: 0 0 0 0 transparent; }
.astre.saturne::after { content: ''; position: absolute; left: -28%; right: -28%; top: 40%; height: 20%; border: 3px solid var(--encre); border-radius: 50%; background: rgba(214, 170, 90, .55); }
.astre.uranus { background: radial-gradient(circle at 35% 30%, #c9f6f6, #6fd6dc 70%); }
.astre.neptune { background: radial-gradient(circle at 35% 30%, #8fb8ff, #3463d8 70%); }
.astre.etoiles { border: 0; background: url('img/ui/etoile.webp') center / contain no-repeat; }
.astre.grand { position: static; transform: none; width: clamp(80px, 26vh, 150px); animation: arrive .6s both; }
.astre.passe { animation: passe .9s ease-in forwards; }
@keyframes passe { to { transform: translate(-50%, 70vh) scale(1.6); opacity: 0; } }
.fusee-vol { position: absolute; left: 50%; bottom: calc(6vh + var(--p, 0) * 40vh); width: clamp(52px, 18vh, 96px); transform: translateX(-50%) rotate(-10deg); transition: bottom .5s cubic-bezier(.3, 1.3, .5, 1); }
.fusee-total { position: absolute; left: 8px; bottom: 8px; font-size: 30px; color: var(--rouge-f); }
.equipage { position: absolute; right: 6px; bottom: 8px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; text-align: right; }
.equipage span { padding: 2px 6px; border-radius: 6px; background: var(--blanc); border: 2px solid var(--encre); }
#scene-fusee { position: relative; flex: 1; top: 0; padding-left: 2vw; }
#fusee .scene .galet.grand { --g: clamp(70px, 24vh, 130px); }
.decompte { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255, 253, 245, .7); z-index: 8; font-size: 30vh; font-weight: 700; color: var(--jaune); -webkit-text-stroke: 6px var(--encre); paint-order: stroke fill; }
.decompte span { animation: arrive .4s cubic-bezier(.3, 1.6, .5, 1) both; }
.fusee-fin { position: absolute; inset: 0; z-index: 9; background: rgba(255, 253, 245, .92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6vh; text-align: center; }
.fusee-fin h2 { margin: 0; font-size: clamp(26px, 8vh, 42px); }
.fusee-fin p { margin: 0; font-size: 17px; }
.fusee-fin-par { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; font-size: 15px; }
.fusee-fin-par span { padding: 4px 10px; border-radius: 10px; background: var(--blanc); border: 2px solid var(--encre); }
.ligne-boutons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------- Multijoueur ---------- */
.multi-corps { position: absolute; inset: 66px var(--marge) 12px calc(var(--marge) + 80px); display: flex; gap: 4vw; }
.multi-gauche { flex: 1.2; display: flex; flex-direction: column; justify-content: center; gap: 2vh; }
.multi-droite { flex: 1; overflow-y: auto; }
.multi-droite h3 { margin: 4px 0 8px; font-size: 18px; }
.places { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.place { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 14px; background: var(--blanc); border: 2.5px solid var(--encre); min-height: 52px; }
.place.libre { opacity: .55; border-style: dashed; }
.place b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place small { font-size: 12px; opacity: .7; display: block; }
.ami-av { width: 36px; height: 36px; flex: none; border-radius: 50%; background: #e7e9f3 center / cover; border: 2px solid var(--encre); }
.note { font-size: 15px; margin: 0; }
.liste-amis { display: flex; flex-direction: column; gap: 6px; }
.ami { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 14px; background: var(--blanc); border: 2px solid var(--encre); text-align: left; min-height: 48px; }
.ami.hors-ligne { opacity: .5; }
.ami-nom { flex: 1; display: flex; flex-direction: column; }
.ami-nom small { opacity: .7; font-size: 12px; }
.ami-inviter { padding: 6px 12px; border-radius: 12px; background: var(--jaune); border: 2px solid var(--encre); font-weight: 700; font-size: 14px; }
.sans-compte { position: absolute; inset: 66px 10vw 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; text-align: center; font-size: 18px; }
.sans-compte img { width: clamp(80px, 26vh, 140px); }

/* ---------- Réglages ---------- */
.panneau-reglages { position: absolute; top: 64px; bottom: 10px; left: 50%; transform: translateX(-50%); width: min(560px, 80vw); display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding: 4px 6px; }
.reglage { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border-radius: 14px; background: var(--blanc); border: 2.5px solid var(--encre); min-height: 50px; }
.reglage-texte { display: flex; flex-direction: column; }
.reglage-texte small { font-size: 12px; opacity: .7; }
.interrupteur { width: 58px; height: 32px; border-radius: 16px; background: #d5d8e6; border: 2.5px solid var(--encre); position: relative; flex: none; }
.interrupteur i { position: absolute; top: 2px; left: 2px; width: 23px; height: 23px; border-radius: 50%; background: var(--blanc); border: 2px solid var(--encre); transition: left .15s; }
.interrupteur[aria-checked='true'] { background: var(--vert); }
.interrupteur[aria-checked='true'] i { left: 28px; }
.choix { display: flex; gap: 6px; }
.choix button { padding: 6px 12px; border-radius: 12px; background: #eef0f7; border: 2px solid var(--encre); }
.choix button.actif { background: var(--jaune); font-weight: 700; }
.version { font-size: 13px; text-align: center; margin: 6px 0 0; }
.aide-reparer { display: block; font-size: 12px; opacity: .7; text-align: center; line-height: 1.35; }

/* ---------- Fenêtres, toasts, tourner, main du tutoriel ---------- */
.voile { position: fixed; inset: 0; z-index: 30; background: rgba(34, 40, 90, .5); display: grid; place-items: center; }
.boite { width: min(480px, 90vw); padding: 22px; border-radius: 22px; background: var(--papier); border: 4px solid var(--encre); box-shadow: 0 8px 0 var(--encre); text-align: center; display: flex; flex-direction: column; gap: 12px; }
.boite h3 { margin: 0; font-size: 22px; }
.boite p { margin: 0; }
#toasts { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.toast { padding: 10px 16px 10px 14px; border-radius: 14px; background: var(--blanc); border: 3px solid var(--encre); box-shadow: 0 4px 0 var(--encre); font-size: 15px; display: flex; align-items: center; gap: 8px; animation: arrive .3s both; max-width: 86vw; }
.toast::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--bleu); border: 2px solid var(--encre); flex: none; }
.toast.erreur::before { background: var(--rouge); } .toast.reussite::before { background: var(--vert); }
.toast.sort { opacity: 0; transition: opacity .3s; }
#tourner { position: fixed; inset: 0; z-index: 50; display: none; background: var(--tableau); }
#particules { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 20; pointer-events: none; }
.pouce { position: fixed; z-index: 25; pointer-events: none; transform: rotate(var(--rot, 0deg)); filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .3)); }
.pouce img { width: 100%; height: 100%; object-fit: contain; }
.pouce.tape img { animation: tape 1.1s ease-in-out infinite; }
@keyframes tape { 0%, 100% { transform: translateY(14px); } 50% { transform: translateY(0); } }

/* Petits écrans en hauteur (téléphone en paysage) */
@media (max-height: 420px) {
  .barre { height: 56px; }
  .rond { width: 46px; height: 46px; }
  .rond.voix { width: 54px; height: 54px; }
  .consigne-texte { top: 50px; font-size: 13px; }
  .scene { top: 66px; }
  .suivant { width: 70px; height: 70px; bottom: 12px; }
  .route { top: 52px; }
  .titre-ecran { top: 12px; font-size: 22px; }
  .fusee-corps { top: 56px; }
  .multi-corps, .sans-compte { top: 56px; }
  .panneau-reglages { top: 56px; }
}

/* Couleurs des cartes (plus précises que le blanc par défaut de .galet). */
.galet.corail, .galet.rouge { --c: var(--rouge); } .galet.safran, .galet.jaune { --c: var(--jaune); } .galet.menthe, .galet.vert { --c: var(--vert); }
.galet.ciel, .galet.bleu { --c: var(--bleu); } .galet.lilas, .galet.violet { --c: var(--violet); } .galet.creme { --c: var(--blanc); }
.galet.juste { --c: var(--vert); }
/* Une carte jaune ou blanche : le chiffre en bleu nuit plein (lisible). */
.galet.safran .galet-txt, .galet.jaune .galet-txt, .galet.creme .galet-txt { color: var(--encre); -webkit-text-stroke: 0; text-shadow: none; }
.galet.attachee .galet-txt { font-size: calc(var(--g, 100px) * .46); line-height: 1.6; }
/* Album : des cases bien grandes. */
.page-grille { gap: .6vh .5vw; }
.case-album { max-height: none; max-width: none; width: 100%; }
.page-grille.nombres { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.page-grille.lettres { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.autocollant { inset: -4%; }
/* Défi fusée : la scène est plus étroite. */
#scene-fusee .zone-objets.large { width: 36vw; }
#scene-fusee .zone-objets { width: 30vw; }
#scene-fusee .carte-image, #scene-fusee .groupe { width: clamp(80px, 26vh, 150px); }
/* Route : l'étiquette de la partie au-dessus du chapitre. */
.chapitre.partie::before { top: max(2px, calc(3vh - 16px)); }
.chapitre.partie .chapitre-nom { top: calc(3vh + 8px); }
/* Album : les lignes prennent toute la hauteur de la page, chaque case est un rond aussi grand que la ligne. */
.page { min-height: 0; }
.page-grille { flex: 1; min-height: 0; align-content: stretch; justify-items: center; align-items: center; }
.page-grille.nombres { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.page-grille.lettres { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.case-album { width: auto; height: 92%; max-width: 100%; aspect-ratio: 1; margin: 0; }
/* Album : la taille d'une case = la plus petite des deux (largeur d'une colonne, hauteur d'une ligne). */
.page-grille { container-type: size; }
.page-grille.nombres .case-album { width: min(calc(100cqw / 7 - 8px), calc(100cqh / 3 - 8px)); height: auto; }
.page-grille.lettres .case-album { width: min(calc(100cqw / 6 - 8px), calc(100cqh / 4 - 8px)); height: auto; }
/* Le tampon de l'autocollant grandit avec lui. */
.autocollant { container-type: inline-size; }
.autocollant .tampon { font-size: 26cqw; min-width: 40%; height: 40%; }
.autocollant .formes i { font-size: 16cqw; }