/* POROKI v2 — trois univers, une seule feuille. Unités en cqw, mises en page en container queries. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;overscroll-behavior:none}
body{font-family:"Baloo 2",ui-rounded,"SF Pro Rounded","Hiragino Maru Gothic ProN",Quicksand,"Varela Round",Nunito,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--fond);color:var(--encre);-webkit-text-size-adjust:100%;touch-action:manipulation}

/* --- Les quatre univers. Même grammaire, quatre ambiances. --------------------
   Rayons en px (plus de pourcentages : les tuiles devenaient des ovales),
   ombres en deux couches (un filet net + une ombre portée douce). ------------- */
body[data-univers="jardin"]{
  --fond:#FFF7EE; --ciel:radial-gradient(120% 85% at 50% -10%,#FFE6C6 0%,#FFF7EE 62%);
  --encre:#33281F; --vif:#F97316; --second:#14B8A6; --carte:#FFFFFF;
  --r:26px; --rp:22px; --poids:800;
  --filet:rgba(51,40,31,.08);
  --ombre:0 1px 2px rgba(51,40,31,.06), 0 8px 22px rgba(51,40,31,.10);
  --ombre-h:0 2px 4px rgba(51,40,31,.08), 0 16px 34px rgba(51,40,31,.14);
  --vif-fonce:#EA580C; --lueur:0 0 0 3px rgba(249,115,22,.18);
}
body[data-univers="atelier"]{
  --fond:#F2F6FD; --ciel:linear-gradient(170deg,#E2ECFC 0%,#F2F6FD 58%);
  --encre:#16263B; --vif:#2563EB; --second:#F59E0B; --carte:#FFFFFF;
  --r:20px; --rp:18px; --poids:700;
  --filet:rgba(22,38,59,.10);
  --ombre:0 1px 2px rgba(22,38,59,.06), 0 8px 22px rgba(22,38,59,.10);
  --ombre-h:0 2px 4px rgba(22,38,59,.08), 0 16px 34px rgba(22,38,59,.14);
  --vif-fonce:#1D4ED8; --lueur:0 0 0 3px rgba(37,99,235,.20);
}
body[data-univers="station"]{
  --fond:#0D1117; --ciel:radial-gradient(130% 80% at 50% -10%,#18212E 0%,#0D1117 62%);
  --encre:#E8EEF7; --vif:#2DD4A7; --second:#7C9CFF; --carte:#161E2B;
  --r:16px; --rp:16px; --poids:650;
  --filet:rgba(255,255,255,.10);
  --ombre:0 0 0 1px rgba(255,255,255,.07), 0 10px 26px rgba(0,0,0,.45);
  --ombre-h:0 0 0 1px rgba(255,255,255,.14), 0 18px 40px rgba(0,0,0,.55);
  --vif-fonce:#16A37B; --lueur:0 0 0 3px rgba(45,212,167,.26);
}
body[data-univers="labo"]{
  --fond:#0B0F1A; --ciel:radial-gradient(130% 80% at 50% -10%,#171C32 0%,#0B0F1A 62%);
  --encre:#E9EAF8; --vif:#8B8CFF; --second:#38BDF8; --carte:#151A2B;
  --r:14px; --rp:16px; --poids:650;
  --filet:rgba(255,255,255,.10);
  --ombre:0 0 0 1px rgba(255,255,255,.07), 0 10px 26px rgba(0,0,0,.5);
  --ombre-h:0 0 0 1px rgba(255,255,255,.14), 0 18px 40px rgba(0,0,0,.6);
  --vif-fonce:#6D6EEA; --lueur:0 0 0 3px rgba(139,140,255,.26);
}

#ecran{container-type:inline-size;container-name:ec;min-height:100dvh;background:var(--ciel);
  display:flex;flex-direction:column;gap:2.2cqw;padding:3cqw}

.barre{display:flex;align-items:center;gap:2cqw;min-height:10cqw;flex:none}
.barre .titre{flex:1;font-size:5cqw;font-weight:var(--poids);margin:0;line-height:1.1;letter-spacing:-.01em}
.rond{width:11cqw;height:11cqw;min-width:44px;min-height:44px;border-radius:50%;border:0;background:var(--carte);
  box-shadow:var(--ombre);font-size:4.6cqw;display:grid;place-items:center;cursor:pointer;color:inherit;flex:none;
  transition:transform .12s ease}
.rond:hover{transform:translateY(-.3cqw)}
.rond:active{transform:translateY(.3cqw) scale(.96)}
.rond:focus-visible{outline:.5cqw solid var(--vif);outline-offset:.3cqw}
.mascotte{font-size:9cqw;line-height:1;filter:drop-shadow(0 .4cqw .6cqw rgba(0,0,0,.14))}
.titre-centre{font-size:5.6cqw;font-weight:var(--poids);text-align:center;margin:0;text-wrap:balance}
.sous{font-size:3.2cqw;opacity:.72;text-align:center;margin:0}

/* Grille adaptative : jamais de case vide */
.grille{flex:1;display:grid;gap:2.4cqw;min-height:0;align-content:stretch}
.grille.menu{align-content:start;grid-auto-rows:minmax(0,1fr)}
.grille[data-c="1"]{grid-template:1fr/1fr}
.grille[data-c="2"]{grid-template:1fr/repeat(2,1fr)}
.grille[data-c="3"]{grid-template:1fr/repeat(3,1fr)}
.grille[data-c="4"]{grid-template:repeat(2,1fr)/repeat(2,1fr)}
.grille[data-c="5"],.grille[data-c="6"]{grid-template:repeat(2,1fr)/repeat(3,1fr)}
.grille[data-c="5"] .tuile:first-child{grid-column:span 1}
.grille[data-c="7"],.grille[data-c="8"]{grid-template:repeat(2,1fr)/repeat(4,1fr)}
.grille[data-c="7"] .tuile:first-child{grid-column:span 2}
.grille[data-c="9"]{grid-template:repeat(3,1fr)/repeat(3,1fr)}
.grille[data-c="10"],.grille[data-c="11"],.grille[data-c="12"]{grid-template:repeat(3,1fr)/repeat(4,1fr)}
.grille[data-c="10"] .tuile:first-child,.grille[data-c="11"] .tuile:first-child{grid-column:span 2}
@container ec (max-aspect-ratio: 3/4){
  .grille[data-c="3"]{grid-template:repeat(3,1fr)/1fr}
  .grille[data-c="5"],.grille[data-c="6"]{grid-template:repeat(3,1fr)/repeat(2,1fr)}
  .grille[data-c="7"],.grille[data-c="8"]{grid-template:repeat(4,1fr)/repeat(2,1fr)}
  .grille[data-c="7"] .tuile:first-child{grid-column:span 2}
  .grille[data-c="9"],.grille[data-c="10"],.grille[data-c="11"],.grille[data-c="12"]{grid-template:repeat(4,1fr)/repeat(3,1fr)}
  .grille[data-c="10"] .tuile:first-child,.grille[data-c="11"] .tuile:first-child{grid-column:span 2}
  .barre .titre{font-size:6cqw}
}

.tuile{position:relative;background-image:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 55%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1cqw;
  background:var(--carte);color:inherit;border:0;border-radius:var(--r);box-shadow:var(--ombre);
  font:inherit;font-weight:var(--poids);cursor:pointer;padding:2cqw;min-height:0;overflow:hidden;
  transition:transform .14s cubic-bezier(.2,.9,.3,1.2),box-shadow .14s ease;-webkit-tap-highlight-color:transparent}
.tuile::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--lueur);opacity:0;transition:opacity .15s}
.tuile:hover::after{opacity:.6}
.tuile:hover{transform:translateY(-.4cqw)}
.tuile:active{transform:translateY(.4cqw) scale(.98)}
.tuile:focus-visible{outline:.6cqw solid var(--second);outline-offset:.3cqw}
.pic{font-size:min(13cqw,20cqh);line-height:1}
.mot{font-size:3.4cqw;text-align:center;line-height:1.15}
.reponse .pic,.reponse .enonce{font-size:min(16cqw,24cqh)}
.tuile.juste{animation:pop .4s cubic-bezier(.2,.9,.3,1.3);box-shadow:0 0 0 .9cqw #35B06A}
.tuile.faux{opacity:.28;transform:scale(.93)}
@keyframes pop{45%{transform:scale(1.09)}}
.consigne{font-size:4.4cqw;font-weight:var(--poids);text-align:center;margin:0;line-height:1.25;text-wrap:balance}
.enonce{font-size:min(12cqw,17cqh);font-weight:var(--poids);text-align:center;margin:1cqw 0;letter-spacing:.02em;
  font-variant-numeric:tabular-nums}
.pastille{width:min(15cqw,21cqh);height:min(15cqw,21cqh);border-radius:50%;box-shadow:inset 0 0 0 .5cqw rgba(0,0,0,.14)}
.forme{width:min(15cqw,21cqh);height:min(15cqw,21cqh);display:block;margin-inline:auto}
/* Dans une réponse, la pastille et la forme remplissent la tuile comme le texte */
.reponse .pastille{width:min(26cqw,30cqh);height:min(26cqw,30cqh)}
.reponse .forme{width:min(26cqw,30cqh);height:min(26cqw,30cqh)}
.reponse .pic{font-size:min(26cqw,30cqh)}

/* Jardin d'étoiles : la récompense. Jamais un score, jamais une comparaison. */
.jardin{display:flex;flex-wrap:wrap;gap:1cqw;justify-content:center;font-size:5cqw;line-height:1;flex:none}
.jardin span{animation:pousse .5s cubic-bezier(.2,.9,.3,1.4) backwards}
@keyframes pousse{from{transform:scale(0) translateY(2cqw);opacity:0}}
.ruban{display:flex;align-items:center;gap:1.4cqw;flex:none}
.ruban i{flex:1;height:2cqw;min-height:9px;border-radius:99px;background:rgba(128,128,128,.22);overflow:hidden}
.ruban i b{display:block;height:100%;background:linear-gradient(90deg,var(--second),var(--vif));transition:width .5s ease}
.ruban .cle{font-size:3cqw;opacity:.75;font-variant-numeric:tabular-nums}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:9}

/* Panneaux : espace parent, fin de séance, soutien */
.panneau{background:var(--carte);border-radius:var(--rp);box-shadow:var(--ombre);padding:3.2cqw;display:grid;gap:2.2cqw}
.panneau h2{font-size:4.2cqw;margin:0;font-weight:var(--poids)}
/* Le contenu court (formulaires, choix de tranche) se cale au milieu de l'écran
   au lieu de laisser un grand vide sous lui. Au-delà, il défile normalement. */
.defile{flex:1;overflow:auto;display:grid;gap:2.2cqw;align-content:safe center;padding-block:2cqw}
label{display:grid;gap:.8cqw;font-size:3cqw;opacity:.9}
input,select{font:inherit;font-size:3.4cqw;padding:1.8cqw;border-radius:2.4cqw;border:.25cqw solid rgba(128,128,128,.35);
  background:var(--fond);color:inherit;min-height:44px;width:100%}
input[type=range]{padding:0;border:0;background:transparent}
input[type=checkbox]{width:auto;min-height:0;transform:scale(1.4);accent-color:var(--vif)}
.bouton{font:inherit;font-size:3.6cqw;font-weight:var(--poids);padding:2.2cqw 3cqw;border:0;border-radius:999px;
  background:var(--vif);color:#fff;cursor:pointer;min-height:50px;text-align:center;text-decoration:none;display:block;
  box-shadow:0 .7cqw 0 var(--vif-fonce);transition:transform .12s cubic-bezier(.2,.9,.3,1.3),box-shadow .12s ease}
.bouton:hover{transform:translateY(-.25cqw);box-shadow:0 .95cqw 0 var(--vif-fonce)}
.bouton:active{transform:translateY(.5cqw);box-shadow:0 .2cqw 0 var(--vif-fonce)}
.bouton:focus-visible{outline:.5cqw solid var(--second);outline-offset:.3cqw}
body[data-univers="station"] .bouton{color:#08120D}
.bouton.doux{background:var(--carte);color:inherit;box-shadow:0 .6cqw 0 rgba(128,128,128,.3)}
.bouton.doux:hover{box-shadow:0 .85cqw 0 rgba(128,128,128,.3)}
.bouton.doux:active{box-shadow:0 .2cqw 0 rgba(128,128,128,.3)}
.rang{display:flex;justify-content:space-between;align-items:center;gap:2cqw;font-size:3.2cqw}
.etat{font-size:2.9cqw;opacity:.72;font-variant-numeric:tabular-nums}
.chip{font-size:2.7cqw;padding:.6cqw 1.6cqw;border-radius:99px;background:rgba(128,128,128,.16)}
.chip[data-n="ok"]{background:rgba(53,176,106,.2);color:#1E7A48}
.chip[data-n="revoir"]{background:rgba(242,176,30,.22);color:#8A5E00}
body[data-univers="station"]:not([data-nuit="non"]) .chip[data-n="ok"]{color:#8CE9BC}
body[data-univers="station"]:not([data-nuit="non"]) .chip[data-n="revoir"]{color:#F6D77A}
.barres{display:flex;align-items:flex-end;gap:1cqw;height:14cqw}
.barres div{flex:1;background:var(--vif);border-radius:1cqw 1cqw .3cqw .3cqw;min-height:.6cqw;opacity:.85}
.barres div[data-vide="1"]{background:rgba(128,128,128,.25)}
.jours-cases{display:flex;gap:1cqw;flex-wrap:wrap}
.jours-cases label{display:flex;align-items:center;gap:.6cqw;font-size:2.8cqw;background:rgba(128,128,128,.12);
  padding:1cqw 1.6cqw;border-radius:99px}
.centre{flex:1;display:grid;place-items:center;text-align:center;gap:3cqw;align-content:center}
/* Corps d'écran : une focale en haut, le contenu dessous, le tout centré verticalement.
   C'est ce qui remplit la page sans étirer les tuiles jusqu'à l'absurde. */
.corps{flex:1;min-height:0;display:grid;grid-template-rows:auto auto;align-content:center;gap:4cqw}
.mascotte-geante{font-size:min(26cqw,22cqh);line-height:1;text-align:center;
  filter:drop-shadow(0 .8cqw 1.2cqw rgba(0,0,0,.14))}
.hors-ligne{position:fixed;inset-inline:0;bottom:0;padding:1.2cqw;text-align:center;font-size:2.6cqw;
  background:var(--vif);color:#fff;display:none}
body.sans-reseau .hors-ligne{display:block}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Verrou de sortie : six chiffres */
.cases{display:flex;gap:2cqw;justify-content:center;flex:none}
.cases .case{width:7.5cqw;height:10cqw;min-width:30px;border-radius:2.4cqw;background:var(--carte);
  box-shadow:var(--ombre);display:grid;place-items:center;font-size:4cqw;color:var(--vif)}

body[data-univers="station"] .tuile{background-image:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 55%)}

/* Choix de la langue : visible depuis l'accueil */
.rond.langue{font-size:3.2cqw;font-weight:800;letter-spacing:.04em}
.grille-langues{display:grid;grid-template-columns:repeat(auto-fill,minmax(26cqw,1fr));gap:2cqw}
.tuile.langue-choix{flex-direction:row;gap:1.6cqw;justify-content:flex-start;padding:2.4cqw;min-height:13cqw;border-radius:3cqw}
.tuile.langue-choix .code{font-size:3.4cqw;font-weight:800;background:var(--vif);color:#fff;
  border-radius:1.6cqw;padding:.8cqw 1.6cqw;min-width:9cqw;text-align:center}
.tuile.langue-choix .mot{font-size:3.4cqw;text-align:start}
.tuile.langue-choix.active{box-shadow:0 0 0 .6cqw var(--vif)}

/* Phrase d'énoncé : lisible, pas gigantesque */
.phrase{display:block;font-size:4.4cqw;line-height:1.4;font-weight:var(--poids);text-wrap:balance;
  max-width:46ch;margin:0 auto;padding:0 2cqw}
.reponse .enonce{line-height:1.2;padding:0 1cqw;word-break:break-word}
.reponse .enonce.court{font-size:min(22cqw,28cqh)}
.reponse .enonce.moyen{font-size:min(11cqw,15cqh)}
.reponse .enonce.long{font-size:min(6cqw,9cqh)}

/* Choix de la tranche d'âge à l'inscription */
.tranches{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw}
.tranches .tuile{min-height:18cqw;padding:1.6cqw;border-radius:3cqw}
.tranches .tuile .pic{font-size:7cqw}
.tranches .tuile .mot{font-size:2.9cqw}
.tranches .tuile.active{box-shadow:0 0 0 .7cqw var(--vif)}

/* Téléphone : le menu d'activités passe en tuiles horizontales, une par ligne */
/* 13/10/2026 : sur telephone le menu des jeux revient en CARRES, pas en liste.
   Deux colonnes, une tuile carree, le picto grand et le nom dessous. La liste
   faisait tenir moins de jeux a l ecran et noyait le picto dans la marge. */
@container ec (max-width: 560px){
  .grille.menu{grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:none!important;grid-auto-rows:min-content;
    gap:3cqw;overflow:auto;align-content:start;flex:1}
  /* les réponses restent en grille mais ne s'étirent plus sur toute la hauteur */
  .grille:not(.menu){grid-auto-rows:minmax(0,30cqw);align-content:center}
  .grille.menu .tuile{flex-direction:column;justify-content:center;gap:2cqw;
    padding:3cqw;border-radius:5cqw;min-height:0;aspect-ratio:1}
  .grille.menu .tuile:first-child{grid-column:auto!important}
  .grille.menu .pic{font-size:17cqw;flex:none;width:auto;text-align:center}
  .grille.menu .mot{font-size:3.7cqw;text-align:center;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .grille.menu .etat{position:absolute;top:1.5cqw;inset-inline-end:2cqw;font-size:3.4cqw}
  .phrase{font-size:5cqw}
}
/* Telephone couche : l ecran devient large et bas. Quatre colonnes, des carres
   plus petits, et le menu ne doit jamais se centrer verticalement. */
@container ec (min-width:561px) and (max-width:900px){
  .grille.menu{grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:none!important;grid-auto-rows:min-content;
    gap:2.4cqw;overflow:auto;align-content:start;flex:1}
  .grille.menu .tuile{flex-direction:column;justify-content:center;gap:1.4cqw;
    min-height:0;aspect-ratio:1;padding:2cqw}
  .grille.menu .tuile:first-child{grid-column:auto!important}
  .grille.menu .pic{font-size:11cqw;width:auto}
  .grille.menu .mot{font-size:2.8cqw;text-align:center;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
@media (orientation:landscape) and (max-height:520px){
  .defile.cats{align-content:start}
  .grille.menu{grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-auto-rows:min-content;align-content:start}
  .grille.menu .tuile{aspect-ratio:1;flex-direction:column;justify-content:center}
  .grille.menu .pic{font-size:min(9cqw,13vh)}
  .grille.menu .mot{font-size:min(2.4cqw,3.4vh)}
}
/* Le menu commence en haut de l ecran : centre verticalement, il laissait un
   grand vide au-dessus des jeux quand la famille n en comptait que deux. */
.defile.cats{align-content:start}
/* Tablette et ordinateur : la grille reste une grille, les tuiles respirent */
@container ec (min-width: 900px){
  .grille{gap:2.8cqw}
  .grille.menu .tuile{border-radius:calc(var(--r) * .8)}
  .mot{font-size:2.6cqw}
  .pic{font-size:min(9cqw,20cqh)}
  .barre .titre{font-size:3.4cqw}
  .phrase{font-size:3cqw}
}

/* Les deux voies de l'écran d'accueil */
.tuile.voie{gap:1.4cqw}
.tuile.voie .pic{font-size:min(16cqw,22cqh)}
.tuile.voie .mot{font-size:4.2cqw}
.tuile.voie .etat{font-size:2.9cqw;opacity:.65}
.lien-parent{display:block;text-align:center;font-size:3.2cqw;color:inherit;opacity:.65;
  text-decoration:none;padding:2cqw;flex:none}
@container ec (max-width: 560px){
  /* Sur téléphone la carte occupe la hauteur disponible, son contenu reste centré */
  .defile{align-content:safe center}
  /* La carte remplit l'écran et c'est le bloc des tranches d'âge qui prend la place */
  .panneau{padding:4.5cqw;gap:3cqw;border-radius:6cqw;align-content:center}
  .panneau > div{display:grid;gap:2cqw;min-height:0}
  /* Les trois tranches passent en liste verticale : emoji à gauche, âge à droite,
     et les trois tuiles se partagent toute la hauteur restante. */
  /* Trois blocs distincts : hauteur donnée par le contenu, fond crème pour se détacher
     de la carte blanche, et un vrai espace entre eux. */
  .tranches{grid-template-columns:1fr;grid-auto-rows:auto;gap:3cqw}
  .tranches .tuile{min-height:20cqw;height:auto;padding:3cqw 5cqw;border-radius:5cqw;
    background:var(--fond);border:.3cqw solid var(--trait,rgba(0,0,0,.08));box-shadow:none;
    display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:4.5cqw;text-align:start}
  .tranches .tuile.active{background:var(--carte);box-shadow:0 0 0 .7cqw var(--vif)}
  .tranches .tuile .pic{font-size:11cqw;width:auto}
  .tranches .tuile .mot{font-size:5cqw;text-align:start}
  /* Le prénom se repère au premier coup d'œil : champ orangé, bord vif */
  .panneau input{background:rgba(255,138,61,.14);border:.6cqw solid var(--vif);
    font-size:5cqw;padding:3.4cqw;border-radius:4cqw;min-height:18cqw;font-weight:var(--poids)}
  .panneau input:focus{outline:none;background:rgba(255,138,61,.22);box-shadow:var(--lueur)}
  .panneau label{font-size:3.8cqw;opacity:1;font-weight:var(--poids)}
  .panneau .etat{font-size:3.4cqw;opacity:.8;font-weight:var(--poids)}
  .panneau label{font-size:4cqw}
  .tranches .tuile{min-height:24cqw}
  .tranches .tuile .pic{font-size:9cqw}
  .tranches .tuile .mot{font-size:3.4cqw}
  .grille-langues{grid-template-columns:repeat(auto-fill,minmax(38cqw,1fr))}
  /* Emoji à gauche, texte à droite */
  .grille.menu.voies{grid-auto-rows:minmax(22cqw,24cqw);align-content:center;overflow:visible}
  .grille.menu .tuile.voie{display:grid;grid-template-columns:auto 1fr;
    column-gap:4.5cqw;row-gap:.6cqw;align-items:center;align-content:center;
    text-align:start;padding-inline:5cqw}
  .grille.menu .tuile.voie .pic{grid-row:1/3;width:auto;font-size:min(18cqw,14cqh)}
  .grille.menu .tuile.voie .mot,
  .grille.menu .tuile.voie .etat{grid-column:2}
  .grille.menu .tuile.voie .mot{text-align:start;font-size:5cqw;line-height:1.15}
  .grille.menu .tuile.voie .etat{text-align:start;font-size:3.4cqw;margin:0}
  .lien-parent{font-size:3.8cqw}
}

/* ---------- l'enfant choisit sa couleur et sa mascotte ---------- */
.pastilles{display:grid;grid-template-columns:repeat(4,1fr);gap:3cqw}
.pastille-couleur{aspect-ratio:1;border-radius:50%;border:0;cursor:pointer;background:var(--pc);
  box-shadow:0 .8cqw 0 rgba(0,0,0,.18);transition:transform .12s ease}
.pastille-couleur:active{transform:translateY(.6cqw);box-shadow:none}
.pastille-couleur.active{box-shadow:0 0 0 .9cqw var(--carte), 0 0 0 1.7cqw var(--pc)}
.grille-mascottes{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4cqw}
.grille-mascottes .tuile.masc{aspect-ratio:1;min-height:0;padding:1cqw;border-radius:3.4cqw}
.grille-mascottes .tuile.masc .pic{font-size:min(9cqw,9cqh)}
.grille-mascottes .tuile.masc.active{box-shadow:0 0 0 .7cqw var(--vif)}
@container ec (max-width: 560px){
  .pastilles{grid-template-columns:repeat(4,1fr);gap:4cqw}
  .grille-mascottes{grid-template-columns:repeat(4,1fr);gap:3cqw}
  .grille-mascottes .tuile.masc .pic{font-size:11cqw}
}

/* Mon jardin : l'arbre, son compteur, et les fêtes de bonne réponse */
.cadre-arbre{width:100%;text-align:center}
.arbre{display:block;width:100%;max-width:440px;height:auto;margin:0 auto;
  animation:pousse .7s cubic-bezier(.2,.9,.3,1.3) backwards}
.compteur-jardin{text-align:center;font-weight:800;font-size:5.2cqw;letter-spacing:.02em}
.etincelle{position:fixed;z-index:11;pointer-events:none;line-height:1;
  transform:translate(-50%,-50%);animation:jaillir .85s ease-out forwards}
@keyframes jaillir{
  to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.35) rotate(150deg);opacity:0}}
.mascotte.saute{animation:saut .62s cubic-bezier(.2,.9,.3,1.5)}
@keyframes saut{30%{transform:translateY(-20%) scale(1.16)}62%{transform:translateY(0) scale(.95)}}
.tuile.valide{box-shadow:0 0 0 .5cqw #35B06A;animation:none}

/* ---------- 09/10/2026 : fiches à imprimer (A4) ----------
   La même page sert d'aperçu à l'écran et de feuille imprimée : ce que le parent
   voit est ce qui sort de l'imprimante ou du PDF. */
.ffeuille{background:#fff;color:#111;border-radius:1.5cqw;box-shadow:var(--ombre);padding:10mm;
  margin:0 auto;max-width:210mm;width:100%;font-family:Nunito,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.ffeuille.paysage{max-width:297mm}
.fentete{display:flex;align-items:baseline;gap:6mm;border-bottom:2px solid #FF8A3D;padding-bottom:3mm}
.fmarque{font-weight:800;color:#FF8A3D;font-size:12pt;flex:none}
.fentete b{font-size:14pt;flex:1}
.flignes{display:flex;gap:5mm;flex:none}
.flignes i{font-style:normal;font-size:9pt;color:#666;border-bottom:1px solid #999;
  min-width:34mm;display:inline-block}
.fconsigne{font-size:10pt;color:#333;margin:3mm 0 4mm}
.fliste{margin:0;padding:0;list-style:none;columns:2;column-gap:10mm;counter-reset:fq}
.ffeuille.paysage .fliste{columns:3}
.fq{break-inside:avoid;page-break-inside:avoid;counter-increment:fq;margin:0 0 4.5mm;
  padding-inline-start:8mm;position:relative}
.fq::before{content:counter(fq);position:absolute;inset-inline-start:0;top:0;
  font-weight:800;color:#FF8A3D;font-size:10pt}
.fe{font-size:12pt;font-weight:700;line-height:1.35;margin-bottom:1.5mm}
.fe .enonce,.fe .phrase,.fe .pic{font-size:12pt!important;font-weight:700;color:inherit;display:inline}
.fe svg{height:13mm!important;width:auto!important;max-width:30mm;fill:#111;stroke:#111;vertical-align:middle}
.fc{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2mm;counter-reset:fc}
.fc li{counter-increment:fc;border:1.2px solid #bbb;border-radius:3mm;padding:1mm 2.5mm;
  min-width:11mm;display:flex;align-items:center;justify-content:center;gap:1.5mm}
.fc li::before{content:counter(fc);font-size:7.5pt;color:#FF8A3D;font-weight:800;flex:none}
.fc .enonce,.fc .phrase{font-size:10.5pt!important;font-weight:600;color:inherit;display:inline}
.fc .pic{font-size:12pt}
.fc svg{height:8mm!important;width:auto!important;max-width:18mm;fill:#111;stroke:#111}
.fcorrige{margin-top:5mm;border-top:1px dashed #bbb;padding-top:2.5mm;font-size:8pt;color:#888;
  display:flex;flex-wrap:wrap;gap:2.5mm;align-items:baseline}
.fcorrige b{color:#FF8A3D;margin-inline-end:.8mm}
.fcorrige span{white-space:nowrap}
.fpied{margin-top:2mm;font-size:7.5pt;color:#aaa;text-align:end}
body[data-vue="fiche"] #ecran{background:#E9E6E0;padding:3cqw}

@media print{
  html,body{height:auto;background:#fff}
  body[data-vue="fiche"] #ecran{display:block;padding:0;background:#fff;min-height:0;container-type:normal}
  .sans-impression,.hors-ligne{display:none!important}
  .ffeuille{box-shadow:none;border-radius:0;padding:0;max-width:none;width:auto}
  .fcorrige{color:#666}
}

/* ======================================================================
   09/10/2026 — Modernisation de la partie jeu.
   Trois partis pris :
   1. la scène est cadrée (plus de tuiles géantes sur grand écran) ;
   2. les surfaces ont un filet net + une ombre douce, au lieu d'un bloc d'ombre ;
   3. l'avancement se lit en haut, là où on regarde, pas en bas de page.
   ====================================================================== */

/* 1. La scène. Le fond couvre l'écran, le jeu reste à une largeur jouable. */
body{background:var(--fond)}
#ecran{max-width:560px;margin-inline:auto;padding:14px;gap:12px;
  background:var(--ciel);min-height:100dvh}
@media (min-width:900px) and (min-height:620px){
  body{display:grid;place-items:center;padding:24px;background:var(--ciel)}
  #ecran{min-height:min(860px,calc(100dvh - 48px));height:min(860px,calc(100dvh - 48px));
    width:min(560px,100%);border-radius:28px;overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.28), 0 0 0 1px var(--filet)}
}
body[data-vue="fiche"] #ecran{max-width:none;width:auto;height:auto;border-radius:0;box-shadow:none}
body[data-vue="fiche"]{display:block;padding:0}

/* 2. Barre du haut : compacte, lisible, boutons au gabarit tactile. */
.barre{gap:10px;min-height:48px}
.barre .titre{font-size:clamp(17px,4.6cqw,22px);letter-spacing:-.015em}
.rond{width:44px;height:44px;min-width:44px;min-height:44px;font-size:19px;
  background:var(--carte);box-shadow:0 1px 2px rgba(0,0,0,.06), 0 0 0 1px var(--filet);
  transition:transform .14s cubic-bezier(.2,.9,.3,1.3), box-shadow .14s ease}
.rond:hover{transform:translateY(-1px);box-shadow:var(--ombre)}
.rond:active{transform:translateY(1px) scale(.96)}
.rond:focus-visible{outline:2px solid var(--vif);outline-offset:2px}
.mascotte{font-size:clamp(26px,8cqw,34px);filter:drop-shadow(0 2px 4px rgba(0,0,0,.16))}

/* 3. Avancement en haut : un rail fin, une pastille de série. */
.ruban{gap:10px}
.ruban i{height:8px;min-height:8px;background:color-mix(in srgb, var(--encre) 12%, transparent);
  box-shadow:inset 0 0 0 1px var(--filet)}
.ruban i b{background:linear-gradient(90deg,var(--second),var(--vif));border-radius:99px}
.ruban .cle{font-size:13px}
.jardin{font-size:18px;gap:5px;justify-content:flex-start}

/* 4. Tuiles : surface franche, filet net, ombre douce, états nets. */
.tuile{border-radius:var(--r);gap:6px;
  background-color:var(--carte);
  background-image:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 60%);
  box-shadow:var(--ombre);
  transition:transform .14s cubic-bezier(.2,.9,.3,1.3), box-shadow .14s ease, opacity .2s ease}
.tuile:hover{transform:translateY(-2px);box-shadow:var(--ombre-h)}
.tuile:active{transform:translateY(1px) scale(.985)}
.tuile:focus-visible{outline:2px solid var(--vif);outline-offset:3px}
.tuile::after{box-shadow:none}
.grille{gap:12px}
.grille.menu{grid-auto-rows:minmax(84px,1fr)}
.tuile.juste{box-shadow:0 0 0 3px var(--vif), var(--ombre-h)}
.tuile.faux{opacity:.3;transform:scale(.96)}
.tuile.valide{box-shadow:0 0 0 3px var(--vif), var(--ombre)}

/* 5. Typographie du jeu : des bornes en px, pour que rien n'explose. */
.pic{font-size:clamp(26px,min(13cqw,20cqh),52px)}
.mot{font-size:clamp(13px,3.4cqw,16px);font-weight:700;letter-spacing:-.01em}
.reponse .pic,.reponse .enonce{font-size:clamp(30px,min(16cqw,24cqh),64px)}
.consigne{font-size:clamp(16px,4.4cqw,21px);opacity:.92}
.enonce{font-size:clamp(28px,min(12cqw,17cqh),58px)}
.titre-centre{font-size:clamp(20px,5.6cqw,27px)}
.sous{font-size:clamp(13px,3.2cqw,15px)}

/* 6. Boutons : plus d'ombre « bloc », un relief discret. */
.bouton{font-size:clamp(15px,3.6cqw,17px);padding:14px 22px;min-height:50px;
  box-shadow:0 1px 2px rgba(0,0,0,.08), 0 6px 18px color-mix(in srgb, var(--vif) 32%, transparent);
  transition:transform .14s cubic-bezier(.2,.9,.3,1.3), box-shadow .14s ease}
.bouton:hover{transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(0,0,0,.1), 0 12px 26px color-mix(in srgb, var(--vif) 38%, transparent)}
.bouton:active{transform:translateY(1px) scale(.99);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.bouton.doux{background:var(--carte);color:inherit;
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 0 0 1px var(--filet)}
.bouton.doux:hover{box-shadow:var(--ombre)}

/* 7. Panneaux et champs. */
.panneau{border-radius:var(--rp);padding:18px;gap:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 0 0 1px var(--filet)}
.panneau h2{font-size:clamp(17px,4.2cqw,20px)}
.etat{font-size:13px}
.chip{font-size:12px;padding:4px 10px}

/* 8. Les univers sombres : le dégradé de surface est inversé. */
body[data-univers="station"] .tuile,
body[data-univers="labo"] .tuile{
  background-image:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 70%)}
body[data-univers="labo"] .bouton{color:#0B0F1A}
body[data-univers="labo"]:not([data-nuit="non"]) .chip[data-n="ok"]{color:#9BE7FF}

/* 9. Les réponses sont des cartes, pas des colonnes : la grille prend la hauteur
   de son contenu et se centre, au lieu d'étirer quatre tuiles sur tout l'écran. */
.grille:not(.menu){flex:0 0 auto;margin-block:auto;align-content:center}
.grille:not(.menu) .tuile{min-height:clamp(92px,21cqh,150px);max-height:min(30cqh,220px)}
.grille.menu{align-content:start}
/* La consigne et les réponses forment un bloc : on les centre ensemble. */
.consigne,.enonce{margin-block:auto 0}
.enonce+.grille:not(.menu),.consigne+.grille:not(.menu){margin-block:14px auto}

/* L'avancement remonte en haut UNIQUEMENT pendant une question : ailleurs
   (mon jardin, fin de séance) le rail doit rester à sa place. */
#ecran:has(.tuile.reponse) .ruban{order:-1}
/* 12/10/2026 : plus de rangee de plantes en cours de jeu, elle passait au-dessus de tout. */
/* Sur grand écran, la page se distingue du cadre de jeu. */
@media (min-width:900px) and (min-height:620px){
  body{background:var(--fond)}
  body[data-univers="station"],body[data-univers="labo"]{background:#070A0F}
}

/* --- 09/10/2026 : Tri rapide. Une carte qu'on fait glisser, oui à droite, non à gauche. --- */
.tri-scene{position:relative;flex:1 1 auto;display:grid;place-items:center;min-height:34cqh;margin-block:12px auto}
.tri-carte{display:grid;place-items:center;width:min(80cqw,340px);min-height:min(42cqh,300px);
  background:var(--carte);color:var(--encre);border-radius:22px;border:1px solid var(--filet);
  box-shadow:var(--ombre-h);font-size:clamp(30px,9cqw,52px);font-weight:800;line-height:1.2;
  text-align:center;padding:16px;touch-action:none;cursor:grab;user-select:none;
  -webkit-user-select:none;transition:transform .2s ease,opacity .25s ease}
.tri-carte.gros{font-size:clamp(78px,34cqw,190px);font-weight:400}
.tri-carte.prise{transition:none;cursor:grabbing}
.tri-carte.juste{outline:3px solid #2FA14C;outline-offset:2px}
.tri-carte.faux{outline:3px solid #E23B2E;outline-offset:2px}
.tri-carte.part-oui{transform:translateX(130%) rotate(16deg);opacity:0}
.tri-carte.part-non{transform:translateX(-130%) rotate(-16deg);opacity:0}
.tri-marque{position:absolute;top:6%;max-width:42%;font-size:clamp(17px,5cqw,26px);font-weight:900;opacity:0;
  line-height:1.15;pointer-events:none;transition:opacity .12s linear}
.tri-marque.non{left:4%;color:#2563EB}
.tri-marque.oui{right:4%;color:#2FA14C}
/* en mode oui/non, le refus reprend le rouge ; en tri de familles, les deux cotes sont neutres */
.tri-scene.binaire .tri-marque.non{color:#E23B2E}
.tri-aide{margin:0;text-align:center;font-size:13px;opacity:.6}
.tri-boutons{display:flex;direction:ltr;gap:16px;justify-content:center;margin-block:10px 2px}
.tri-bouton{display:grid;place-items:center;gap:1px;min-width:104px;max-width:46%;padding:10px 14px;border-radius:18px;
  border:1px solid var(--filet);background:var(--carte);color:var(--encre);
  box-shadow:var(--ombre-h);cursor:pointer}
.tri-bouton b{font-size:26px;line-height:1}
.tri-bouton small{font-size:13px;font-weight:700;opacity:.85;text-align:center;line-height:1.15}
.tri-bouton.non b{color:#2563EB}
.tri-boutons.binaire .tri-bouton.non b{color:#E23B2E}
.tri-bouton.oui b{color:#2FA14C}
.tri-bouton:active{transform:translateY(2px)}
@media (prefers-reduced-motion:reduce){.tri-carte{transition:none}}

/* --- 09/10/2026 : écran bas et large (téléphone couché, petite tablette).
   Les tailles du jeu sont calées sur la LARGEUR (cqw) : en paysage la largeur
   grandit pendant que la hauteur fond, et tout débordait sous l'écran.
   Ici, tout se recale sur la hauteur réelle (dvh) et la scène tient d'un bloc. --- */
@media (orientation:landscape) and (max-height:620px){
  html,body{height:100%;overflow:hidden}
  #ecran{max-width:min(96vw,820px);width:100%;height:100dvh;min-height:0;
    padding:1.4dvh 2.2vw;gap:1.2dvh;border-radius:0;box-shadow:none;overflow:hidden}

  .barre{min-height:0;gap:10px}
  .barre .titre{font-size:clamp(13px,3.6dvh,20px)}
  .rond{width:clamp(30px,7dvh,44px);height:clamp(30px,7dvh,44px);
    min-width:0;min-height:0;font-size:clamp(14px,3.4dvh,19px)}
  .mascotte{font-size:clamp(20px,6dvh,32px)}

  .consigne{font-size:clamp(12px,3.6dvh,19px);margin-block:0}
  .enonce{font-size:clamp(18px,8dvh,46px);margin-block:0}
  .phrase{font-size:clamp(12px,3.4dvh,18px)}

  /* la grille prend toute la hauteur restante et se partage en parts égales */
  .grille,.grille:not(.menu){flex:1 1 auto;min-height:0;gap:1.1dvh;margin-block:0;align-content:stretch}
  .enonce+.grille:not(.menu),.consigne+.grille:not(.menu){margin-block:1dvh 0}
  .grille:not(.menu) .tuile{min-height:0;max-height:none}
  .grille.menu{grid-auto-rows:minmax(clamp(48px,16dvh,96px),1fr);align-content:start}

  .pic{font-size:clamp(20px,9dvh,48px)}
  .reponse .pic,.reponse .enonce{font-size:clamp(22px,11dvh,56px)}
  .mot{font-size:clamp(11px,2.9dvh,15px)}

  .jardin{font-size:clamp(12px,3.2dvh,18px);gap:4px}
  .ruban i{height:5px;min-height:5px}
  .ruban .cle{font-size:clamp(10px,2.4dvh,12px)}

  /* Range la carte : la carte se dimensionne sur la hauteur, les deux cotes restent lisibles */
  .tri-scene{min-height:0;margin-block:0}
  .tri-carte{height:100%;max-height:100%;aspect-ratio:4/3;width:auto;min-height:0;
    max-width:min(60vw,420px);padding:8px;font-size:clamp(16px,6dvh,36px);border-radius:16px}
  .tri-carte.gros{font-size:clamp(34px,34dvh,150px)}
  .tri-marque{top:2%;font-size:clamp(12px,3.4dvh,20px);max-width:26%}
  .tri-aide{display:none}
  .tri-boutons{margin-block:.8dvh 0;gap:12px}
  .tri-bouton{padding:.6dvh 14px;min-width:84px;border-radius:14px}
  .tri-bouton b{font-size:clamp(15px,3.6dvh,22px)}
  .tri-bouton small{font-size:clamp(10px,2.6dvh,13px)}

  /* écrans de texte : on laisse défiler plutôt que couper */
  .defile{gap:1.2dvh;padding-block:1dvh}
  .panneau{padding:1.4dvh 14px;gap:1.2dvh}
  .bouton{min-height:clamp(38px,9dvh,50px);padding:1dvh 18px;font-size:clamp(13px,3.2dvh,16px)}
  .centre{gap:1.4dvh}
  .mascotte-geante{font-size:min(22vw,30dvh)}
  .titre-centre{font-size:clamp(16px,4.6dvh,24px)}
}
/* La fiche à imprimer ne suit jamais l'orientation de l'écran. */
@media print{#ecran{height:auto;overflow:visible}html,body{height:auto;overflow:visible}}
.avis-langue{margin:0 0 6px;padding:10px 12px;border-radius:12px;background:var(--carte);
  box-shadow:0 0 0 1px var(--filet);font-size:clamp(12px,3.2cqw,14px);text-align:center}
/* 09/10/2026 : la voix manque parfois sur l'appareil (pack de langue non installé). */
.rond.sans-voix{opacity:.45}
.rond.sans-voix::after{content:"";position:absolute;left:18%;right:18%;top:50%;height:2px;
  background:currentColor;transform:rotate(-28deg);border-radius:2px}
.rond{position:relative}
.toast{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:60;
  max-width:min(92vw,460px);padding:11px 15px;border-radius:14px;
  background:#1d2430;color:#fff;font-size:14px;line-height:1.35;text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.3);animation:toast-in .2s ease}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,8px)}}
@media (orientation:landscape) and (max-height:620px){.toast{bottom:6px;font-size:12px;padding:8px 12px}}

/* 09/10/2026 : le choix de ce qui grandit dans « Mon jardin ». */
.grille-figures{display:grid;grid-template-columns:repeat(auto-fill,minmax(42cqw,1fr));gap:12px}
.tuile.figure-choix{padding:6px;min-height:0;aspect-ratio:1/1;overflow:hidden}
.tuile.figure-choix svg{width:100%;height:100%;display:block}
.tuile.figure-choix.active{box-shadow:0 0 0 3px var(--vif), var(--ombre-h)}
@media (orientation:landscape) and (max-height:620px){
  .grille-figures{grid-template-columns:repeat(auto-fill,minmax(14dvh,1fr));gap:8px}
}

/* 09/10/2026 : tracer au doigt, les paires, la minute chrono. */
.trace-scene{position:relative;flex:1 1 auto;min-height:34cqh;margin-block:10px auto;
  background:var(--carte);border-radius:20px;box-shadow:0 0 0 1px var(--filet), var(--ombre);overflow:hidden}
.trace-modele{opacity:.38;pointer-events:none}
.trace-toile{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.trace-barre{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none}
.trace-barre .bouton{min-height:42px;padding:9px 18px;font-size:14px}
.trace-score{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;opacity:.85}
.chrono{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;
  background:var(--carte);border-radius:12px;padding:4px 12px;box-shadow:0 0 0 1px var(--filet)}

.grille.paires{grid-template:repeat(4,1fr)/repeat(3,1fr);flex:1 1 auto;margin-block:10px auto;align-content:stretch}
.carte-paire{position:relative;min-height:0;padding:4px;overflow:hidden}
.carte-paire .face{opacity:0;transform:scale(.7);transition:opacity .16s, transform .16s}
.carte-paire .dos{position:absolute;inset:0;display:grid;place-items:center;
  font-size:clamp(18px,7cqw,30px);font-weight:800;opacity:.45;transition:opacity .16s}
.carte-paire.vue .face,.carte-paire.trouvee .face{opacity:1;transform:none}
.carte-paire.vue .dos,.carte-paire.trouvee .dos{opacity:0}
.carte-paire.trouvee{box-shadow:0 0 0 3px var(--vif), var(--ombre);opacity:.72}
.carte-paire .pic{font-size:clamp(22px,9cqw,40px)}
.carte-paire .mot{font-size:clamp(12px,4cqw,17px);text-align:center;line-height:1.15}

@media (orientation:landscape) and (max-height:620px){
  .trace-scene{min-height:0;margin-block:4px 0}
  .trace-modele{font-size:min(30vw,52dvh)}
  .trace-barre .bouton{min-height:clamp(30px,7dvh,40px);padding:.5dvh 14px;font-size:clamp(11px,2.8dvh,14px)}
  .trace-score{font-size:clamp(11px,2.8dvh,14px)}
  .chrono{font-size:clamp(14px,3.6dvh,20px);padding:2px 10px}
  .grille.paires{grid-template:repeat(2,1fr)/repeat(6,1fr);margin-block:4px 0}
  .carte-paire .pic{font-size:clamp(18px,9dvh,38px)}
  .carte-paire .mot{font-size:clamp(10px,3dvh,15px)}
  .carte-paire .dos{font-size:clamp(14px,4dvh,24px)}
}


/* 09/10/2026 (2) : les visuels sont tailles sur LA TUILE, plus sur l'ecran entier.
   Avant, un emoji de « 9 % de la largeur de l'ecran » flottait, minuscule, au
   milieu d'une carte trois fois plus grande. Chaque tuile de reponse et chaque
   carte des paires devient donc son propre conteneur : 50 % d'une carte, c'est
   la meme chose en portrait, en paysage, sur un telephone ou sur une tablette. */
.reponse, .carte-paire{container-type:inline-size}
/* La hauteur de la tuile n'est pas connue au moment du style (la grille la
   repartit apres coup) : cqh y vaut zero. On borne donc par la hauteur de
   l'ecran, dvh, qui elle est toujours connue, et jamais par cqh. */
.reponse .pic{font-size:min(50cqw,21dvh,110px)}
.reponse .pastille,.reponse .forme{width:min(56cqw,23dvh,130px);height:min(56cqw,23dvh,130px)}
.reponse .enonce{font-size:min(44cqw,20dvh,100px)}
.reponse .enonce.court{font-size:min(50cqw,21dvh,110px)}
.reponse .enonce.moyen{font-size:min(26cqw,11dvh,58px)}
.reponse .enonce.long{font-size:min(13cqw,6dvh,30px);line-height:1.2}
.reponse .mot{font-size:min(20cqw,9dvh,40px);overflow-wrap:anywhere}
.reponse sup{font-size:.58em}
.carte-paire .pic{font-size:min(54cqw,22dvh,96px)}
.carte-paire .mot{font-size:min(30cqw,12dvh,46px);overflow-wrap:anywhere;hyphens:auto}
.carte-paire .dos{font-size:min(36cqw,15dvh,60px)}
.carte-paire .face{display:grid;place-items:center;width:100%;height:100%}

/* La carte du tri et l'enonce de la question gagnent eux aussi en presence. */
.tri-carte.gros{font-size:clamp(90px,40cqw,220px)}
.enonce{font-size:clamp(30px,min(14cqw,20cqh),66px)}
.pic{font-size:clamp(30px,min(16cqw,22cqh),60px)}

@media (orientation:landscape) and (max-height:620px){
  /* En paysage les unites de conteneur suivent la carte : rien a recalibrer,
     sauf la carte du tri et l'enonce, tailles sur la hauteur de l'ecran. */
  .tri-carte.gros{font-size:clamp(40px,40dvh,170px)}
  .enonce{font-size:clamp(18px,9dvh,50px)}
  .pic{font-size:clamp(20px,10dvh,52px)}
  .carte-paire .pic{font-size:min(54cqw,30dvh,96px)}
  .carte-paire .mot{font-size:min(30cqw,15dvh,46px)}
  .carte-paire .dos{font-size:min(36cqw,18dvh,60px)}
}

/* =======================================================================
   09/10/2026 (3) — Refonte des commandes : on quitte l'ombre « bloc » de
   6 px, tres jouet, pour un relief doux et une bordure fine. Un bouton doit
   se voir sans crier. Trois niveaux seulement : plein (l'action), doux (le
   second choix), fin (le lien discret). Partout la meme famille de formes.
   ======================================================================= */
:root{
  --r-bouton:16px;
  --filet-fort:color-mix(in srgb, var(--encre, #2A2118) 14%, transparent);
  --relief:0 1px 2px rgba(24,18,12,.08), 0 8px 20px -8px rgba(24,18,12,.28);
  --relief-h:0 2px 4px rgba(24,18,12,.10), 0 14px 28px -10px rgba(24,18,12,.32);
}
.bouton{
  border-radius:var(--r-bouton);
  background:linear-gradient(180deg, color-mix(in srgb, var(--vif) 92%, #fff) 0%, var(--vif) 62%, var(--vif-fonce) 100%);
  color:#fff;
  box-shadow:var(--relief), inset 0 1px 0 rgba(255,255,255,.26);
  border:0; letter-spacing:-.005em;
  transition:transform .13s cubic-bezier(.2,.9,.3,1.2), box-shadow .16s ease, filter .16s ease}
.bouton:hover{transform:translateY(-1px); box-shadow:var(--relief-h), inset 0 1px 0 rgba(255,255,255,.3); filter:saturate(1.04)}
.bouton:active{transform:translateY(1px); box-shadow:0 1px 2px rgba(24,18,12,.16), inset 0 2px 5px rgba(0,0,0,.14)}
.bouton:focus-visible{outline:2px solid var(--vif); outline-offset:3px}
.bouton.doux{
  background:var(--carte); color:inherit;
  box-shadow:0 0 0 1px var(--filet-fort), var(--relief)}
.bouton.doux:hover{box-shadow:0 0 0 1px var(--filet-fort), var(--relief-h)}
.bouton.doux:active{box-shadow:0 0 0 1px var(--filet-fort), inset 0 2px 5px rgba(0,0,0,.08)}
.bouton.fin{
  background:transparent; color:inherit; opacity:.78; font-weight:700;
  box-shadow:0 0 0 1px var(--filet-fort); min-height:44px; padding:11px 18px}
.bouton.fin:hover{opacity:1; background:var(--carte); box-shadow:0 0 0 1px var(--filet-fort), var(--relief)}
.bouton.fin:active{transform:translateY(1px); box-shadow:0 0 0 1px var(--filet-fort)}

/* Les ronds de la barre : meme filet, meme relief, et le lien se comporte
   exactement comme un bouton (il n'avait ni centrage ni taille). */
.rond{box-shadow:0 0 0 1px var(--filet-fort), 0 1px 2px rgba(24,18,12,.07)}
.rond:hover{box-shadow:0 0 0 1px var(--filet-fort), var(--relief)}
.rond.lien{display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;color:inherit;font-size:20px;font-weight:800;line-height:1;flex:none}

/* ---- Ecran « Qui joue ? » : deux voies lisibles, plus une sortie ---- */
.corps.accueil{display:flex;flex-direction:column;justify-content:center;gap:18px;
  flex:1 1 auto;min-height:0;padding-block:8px}
.blason{display:grid;place-items:center;margin-inline:auto;
  width:min(30cqw,118px);height:min(30cqw,118px);border-radius:50%;
  background:radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--vif) 26%, transparent) 0%, transparent 70%);
  flex:none}
.blason span{font-size:min(20cqw,74px);line-height:1;filter:drop-shadow(0 4px 10px rgba(24,18,12,.18))}
.voies{display:flex;flex-direction:column;gap:12px}
.voie{display:flex;align-items:center;gap:14px;width:100%;text-align:start;
  background:var(--carte);color:inherit;font:inherit;font-weight:var(--poids);
  border:0;border-radius:20px;padding:14px 16px;cursor:pointer;
  box-shadow:0 0 0 1px var(--filet-fort), var(--relief);
  transition:transform .14s cubic-bezier(.2,.9,.3,1.2), box-shadow .16s ease}
.voie:hover{transform:translateY(-2px); box-shadow:0 0 0 1px var(--vif), var(--relief-h)}
.voie:active{transform:translateY(1px); box-shadow:0 0 0 1px var(--filet-fort), inset 0 2px 5px rgba(0,0,0,.07)}
.voie:focus-visible{outline:2px solid var(--vif); outline-offset:3px}
.voie-icone{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:17px;
  background:color-mix(in srgb, var(--vif) 15%, var(--fond));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--vif) 26%, transparent)}
.voie-icone span{font-size:29px;line-height:1}
.voie-icone.cle{background:color-mix(in srgb, #F2B01E 18%, var(--fond));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, #F2B01E 30%, transparent)}
.voie-texte{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.voie-texte b{font-size:clamp(16px,4.4cqw,19px);font-weight:800;letter-spacing:-.01em}
.voie-texte i{font-style:normal;font-size:clamp(12px,3.2cqw,14px);font-weight:600;opacity:.6}
.voie-fleche{flex:none;width:9px;height:9px;opacity:.45;
  border-top:2.4px solid currentColor;border-inline-end:2.4px solid currentColor;
  transform:rotate(45deg);margin-inline-end:4px}
[dir="rtl"] .voie-fleche{transform:rotate(225deg)}
.voie:hover .voie-fleche{opacity:.9}
.corps.accueil .bouton.fin{align-self:center;margin-top:4px}

@media (orientation:landscape) and (max-height:620px){
  .corps.accueil{flex-direction:row;align-items:center;gap:16px;padding-block:4px}
  .blason{width:min(22dvh,96px);height:min(22dvh,96px)}
  .blason span{font-size:min(14dvh,60px)}
  .voies{flex:1 1 auto}
  .voie{padding:10px 14px;border-radius:16px;gap:11px}
  .voie-icone{width:clamp(38px,11dvh,52px);height:clamp(38px,11dvh,52px);border-radius:14px}
  .voie-icone span{font-size:clamp(20px,6dvh,27px)}
  .corps.accueil .bouton.fin{align-self:center;margin:0;min-height:40px;padding:8px 14px}
}

/* Le dos des cartes : un aplat de la couleur choisie plutot qu'un « ? » gris
   sur du blanc. On voit d'un coup d'oeil ce qui est retourne et ce qui ne
   l'est pas, et la grille cesse de ressembler a une page vide. */
.carte-paire{background:var(--carte)}
.carte-paire .dos{
  background:linear-gradient(145deg, color-mix(in srgb, var(--vif) 90%, #fff) 0%, var(--vif) 55%, var(--vif-fonce) 100%);
  color:#fff;opacity:1;border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.carte-paire.vue .dos,.carte-paire.trouvee .dos{opacity:0}
.carte-paire.trouvee{opacity:.58}

/* Une rangee de grille vaut « 1fr » : son minimum reste le contenu, donc une
   carte bien remplie pouvait pousser la grille hors de l'ecran sur un grand
   format. minmax(0,1fr) rend la rangee vraiment elastique. */
.grille.paires{grid-template:repeat(4,minmax(0,1fr))/repeat(3,1fr)}
@media (orientation:landscape) and (max-height:620px){
  .grille.paires{grid-template:repeat(2,minmax(0,1fr))/repeat(6,1fr)}
}

/* =======================================================================
   09/10/2026 (nuit) — Sept jeux de plus. Chaque ecran reprend les memes
   formes que le reste : filet fin, relief doux, rien qui crie.
   ======================================================================= */

/* Range dans l'ordre : la carte placee garde son rang en pastille. */
.ordre-carte{position:relative}
.ordre-carte.place{box-shadow:0 0 0 3px var(--vif), var(--ombre);opacity:.85}
.ordre-rang{position:absolute;top:6px;inset-inline-end:8px;min-width:22px;height:22px;
  display:grid;place-items:center;border-radius:50%;background:var(--vif);color:#fff;
  font-size:13px;font-weight:800;line-height:1}
.ordre-carte:not(.place) .ordre-rang{display:none}

/* Le rythme : quatre pastilles de couleur qui s'allument. */
.grille.rythme{gap:14px}
.tuile.pad{background:color-mix(in srgb, var(--pad) 16%, var(--carte));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--pad) 40%, transparent), var(--relief);
  transition:transform .1s, box-shadow .12s, background .12s}
.tuile.pad.vif{background:var(--pad);transform:scale(1.04);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--pad) 50%, transparent), var(--relief-h)}
.tuile.pad .pic{filter:saturate(1.1)}

/* Le miroir : une grille coupee en deux par un trait. */
.sym-plateau{display:grid;grid-template-columns:repeat(var(--col),1fr) 10px repeat(var(--col),1fr);
  gap:6px;align-content:center;justify-content:center;flex:1 1 auto;min-height:0;
  margin-block:10px auto;max-width:min(92cqw,560px);margin-inline:auto;width:100%}
.sym-case{aspect-ratio:1/1;min-width:0;min-height:0;border:0;border-radius:10px;
  background:var(--carte);box-shadow:0 0 0 1px var(--filet-fort);cursor:pointer;padding:0}
.sym-case.fixe{cursor:default;opacity:.95}
.sym-case.on{background:var(--vif);box-shadow:0 0 0 1px var(--vif-fonce)}
.sym-case.attendu{box-shadow:0 0 0 3px #E2563B}
.sym-axe{grid-row:auto;width:3px;justify-self:center;align-self:stretch;
  background:repeating-linear-gradient(180deg,var(--filet-fort) 0 6px,transparent 6px 12px)}

/* Regle l'horloge : le cadran, puis deux paires de boutons. */
.horloge-scene{display:grid;place-items:center;flex:1 1 auto;min-height:0;margin-block:6px}
.horloge-scene .forme{width:min(56cqw,34dvh)!important;height:min(56cqw,34dvh)!important}
.horloge-scene.rate{animation:secoue .4s}
.horloge-scene.montre{filter:drop-shadow(0 0 10px var(--vif))}
@keyframes secoue{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.horloge-cmd{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;flex:none}
.hc{display:flex;align-items:center;gap:8px;background:var(--carte);border-radius:14px;padding:5px 10px;
  box-shadow:0 0 0 1px var(--filet-fort)}
.hc .bouton{min-height:40px;padding:8px 14px;font-size:18px}
.hc-nom{font-weight:800;font-size:14px;opacity:.7;min-width:30px;text-align:center}

/* Compte la monnaie : des jetons, un panier, un total qui vit. */
.jeton{border:0;border-radius:14px;padding:10px 14px;min-height:46px;min-width:46px;cursor:pointer;
  font:inherit;font-weight:800;font-size:clamp(14px,3.8cqw,18px);color:inherit;
  background:linear-gradient(180deg, color-mix(in srgb, #F2B01E 30%, var(--carte)), var(--carte));
  box-shadow:0 0 0 1px color-mix(in srgb, #F2B01E 45%, transparent), var(--relief);
  transition:transform .12s, box-shadow .14s}
.jeton:hover{transform:translateY(-2px);box-shadow:0 0 0 1px #F2B01E, var(--relief-h)}
.jeton:active{transform:translateY(1px)}
.jeton.pose{background:var(--carte);box-shadow:0 0 0 1px var(--filet-fort)}
.jeton.lettre{min-width:44px;text-transform:none;
  background:linear-gradient(180deg, color-mix(in srgb, var(--vif) 18%, var(--carte)), var(--carte));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--vif) 35%, transparent), var(--relief)}
.jeton.prise{opacity:.3}
.jeton.faux{opacity:.35;box-shadow:0 0 0 1px #E2563B}
.piece-panier{background:var(--carte);border-radius:18px;padding:12px;margin-block:8px;
  box-shadow:0 0 0 1px var(--filet-fort);min-height:84px;flex:1 1 auto;overflow:auto}
.piece-panier.juste{box-shadow:0 0 0 2px #35B06A}
.piece-panier.trop{box-shadow:0 0 0 2px #E2563B}
.piece-panier.rate{animation:secoue .4s}
.piece-total{display:block;text-align:center;font-weight:800;font-size:clamp(18px,5cqw,24px);
  font-variant-numeric:tabular-nums;margin-bottom:8px}
.piece-tas,.piece-choix,.mc-clavier{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.piece-choix{margin-block:8px;flex:none}
.mc-clavier{margin-block:10px auto;flex:none}

/* Le mot cache : le mot en grand, les etoiles, le clavier. */
.mc-mot{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:12px 0;flex:none}
.mc-l{font-size:clamp(26px,9cqw,44px);font-weight:800;letter-spacing:.02em;min-width:.7em;text-align:center}
.mc-l.vide{opacity:.35}
.mc-l.trouvee{color:var(--vif)}
.mc-vies{text-align:center;font-size:clamp(15px,4cqw,20px);letter-spacing:.12em;margin:0;flex:none}

@media (orientation:landscape) and (max-height:620px){
  .grille.rythme{gap:8px}
  .sym-plateau{gap:4px;max-width:none;max-height:100%}
  .sym-case{border-radius:7px}
  .horloge-scene .forme{width:min(34dvh,30cqw)!important;height:min(34dvh,30cqw)!important}
  .horloge-cmd{gap:6px}
  .hc .bouton{min-height:clamp(32px,8dvh,40px);padding:.5dvh 12px;font-size:clamp(14px,4dvh,18px)}
  .jeton{min-height:clamp(34px,9dvh,46px);padding:.6dvh 12px;font-size:clamp(12px,3.4dvh,17px)}
  .piece-panier{min-height:0;padding:8px}
  .piece-total{font-size:clamp(15px,4.4dvh,22px);margin-bottom:4px}
  .mc-mot{margin:6px 0}
  .mc-l{font-size:clamp(20px,9dvh,40px)}
  .mc-vies{font-size:clamp(13px,3.6dvh,18px)}
  .mc-clavier{margin-block:6px auto}
}

/* =======================================================================
   09/10/2026 (nuit, 3 correctifs signales par MOMO)
   ======================================================================= */

/* 1. Le menu des activites en PAYSAGE et sur grand ecran.
   Les regles de colonnes s'arretaient a douze tuiles : au-dela, la grille
   retombait sur UNE colonne etiree sur toute la largeur. Le menu a sa
   propre regle de colonnes, independante du nombre de jeux. */
@container ec (min-width: 561px){
  .grille.menu{
    grid-template-columns:repeat(auto-fill,minmax(clamp(136px,20cqw,200px),1fr))!important;
    grid-template-rows:none!important;
    grid-auto-rows:minmax(clamp(74px,14dvh,110px),auto);
    align-content:start;overflow:auto;flex:1 1 auto}
  .grille.menu .tuile{min-height:0}
  .grille.menu .tuile:first-child{grid-column:auto!important}
  .grille.menu .pic{font-size:clamp(22px,min(5cqw,7dvh),38px)}
  .grille.menu .mot{font-size:clamp(11px,min(1.9cqw,2.6dvh),15px)}
  /* Les deux voies de l'accueil gardent leur pleine largeur. */
  .voies{display:flex}
}

/* 2. « Jouer tout de suite » tenait sur plus d'un ecran : il fallait
   derouler pour atteindre le bouton. Les ages passent en deux colonnes,
   la mascotte maigrit, les espaces se resserrent. */
@container ec (max-width: 560px){
  .defile{padding-block:1cqw;gap:1.6cqw}
  .defile .panneau{padding:3cqw;gap:1.8cqw}
  .defile .mascotte-geante{font-size:min(15cqw,13dvh)}
  .tranches{grid-template-columns:repeat(2,1fr);gap:2cqw}
  .tranches .tuile{min-height:0;height:auto;padding:2.6cqw 2cqw;border-radius:4cqw;
    flex-direction:column;justify-content:center;gap:1cqw}
  .tranches .tuile .pic{font-size:8.5cqw;width:auto}
  .tranches .tuile .mot{font-size:3.6cqw;text-align:center}
}
/* En paysage sur telephone, le formulaire s'etale en largeur au lieu de filer
   vers le bas : la mascotte a gauche, le reste a droite. */
@media (orientation:landscape) and (max-height:620px){
  .defile{padding-block:0;gap:6px}
  .defile .panneau{padding:10px 14px;gap:8px;
    grid-template-columns:auto 1fr;align-items:center}
  .defile .panneau > *{grid-column:2}
  .defile .mascotte-geante{grid-column:1;grid-row:1/span 3;font-size:min(16dvh,74px);margin:0 10px 0 0}
  .tranches{grid-template-columns:repeat(4,1fr);gap:6px}
  .tranches .tuile{min-height:0;padding:5px 4px;border-radius:12px;gap:2px}
  .tranches .tuile .pic{font-size:clamp(16px,5dvh,26px)}
  .tranches .tuile .mot{font-size:clamp(9px,2.6dvh,13px)}
  .defile label{font-size:clamp(11px,3dvh,14px)}
  .defile input{min-height:clamp(34px,9dvh,44px)}
}

/* 3. Le miroir debordait en paysage : la taille d'une case est maintenant
   calculee a la fois sur la largeur ET sur la hauteur, donc le plateau ne
   peut plus sortir de l'ecran, quel que soit le format. */
.sym-plateau{
  --cote:min(calc((90cqw - 10px - (var(--col) * 2 * 6px)) / (var(--col) * 2)), 11dvh, 62px);
  grid-template-columns:repeat(var(--col),var(--cote)) 10px repeat(var(--col),var(--cote));
  justify-content:center;align-content:center;max-width:none;width:auto;overflow:hidden}
.sym-case{width:var(--cote);height:var(--cote);aspect-ratio:auto}
@media (orientation:landscape) and (max-height:620px){
  .sym-plateau{--cote:min(calc((90cqw - 8px - (var(--col) * 2 * 4px)) / (var(--col) * 2)), 13dvh, 54px);
    grid-template-columns:repeat(var(--col),var(--cote)) 8px repeat(var(--col),var(--cote))}
}

/* =======================================================================
   09/10/2026 — Le menu en paysage s'adapte a la resolution : plus l'ecran
   est large, plus il y a de tuiles par rangee, et le nom passe a la ligne
   plutot que de rogner la tuile. Trois paliers, pas un reglage figé.
   ======================================================================= */
@container ec (min-width: 561px){
  .grille.menu .mot{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
    overflow:hidden;overflow-wrap:anywhere;hyphens:auto;line-height:1.2;
    text-align:center;max-width:100%}
  .grille.menu .tuile{padding:6px 8px;gap:4px}
}
/* Palier 1 — paysage de telephone (561 a 899 px) : cinq a six par rangee. */
@container ec (min-width: 561px) and (max-width: 899px){
  .grille.menu{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))!important;
    grid-auto-rows:minmax(clamp(68px,15dvh,104px),auto);gap:8px}
  .grille.menu .pic{font-size:clamp(20px,min(4.4cqw,7dvh),32px)}
  .grille.menu .mot{font-size:clamp(10px,min(1.7cqw,2.4dvh),13px)}
}
/* Palier 2 — tablette (900 a 1279 px). */
@container ec (min-width: 900px) and (max-width: 1279px){
  .grille.menu{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))!important;
    grid-auto-rows:minmax(clamp(78px,17dvh,120px),auto);gap:10px}
  .grille.menu .pic{font-size:clamp(24px,min(3.6cqw,8dvh),38px)}
  .grille.menu .mot{font-size:clamp(11px,min(1.5cqw,2.6dvh),15px)}
}
/* Palier 3 — grand ecran (1280 px et plus) : les tuiles respirent. */
@container ec (min-width: 1280px){
  .grille.menu{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))!important;
    grid-auto-rows:minmax(clamp(96px,19dvh,150px),auto);gap:14px}
  .grille.menu .pic{font-size:clamp(30px,min(3.2cqw,9dvh),46px)}
  .grille.menu .mot{font-size:clamp(13px,min(1.3cqw,2.8dvh),17px)}
}

/* Panneau secondaire : plus discret que le panneau principal. */
.panneau.mince{padding:14px 16px;gap:10px}
.panneau.mince .etat{font-weight:800;font-size:clamp(14px,3.8cqw,16px);opacity:1}
.panneau.mince .sous{margin:0;opacity:.72;line-height:1.45}
.panneau.mince .bouton{width:100%}
.jauge{height:8px;border-radius:99px;background:color-mix(in srgb, var(--encre, #2A2118) 10%, transparent);overflow:hidden}
.jauge i{display:block;height:100%}
.jauge b{display:block;height:100%;background:var(--vif);border-radius:99px;transition:width .25s ease}
@media (orientation:landscape) and (max-height:620px){
  .panneau.mince{padding:8px 12px;gap:6px}
  .panneau.mince .sous{font-size:clamp(10px,2.6dvh,13px)}
}

/* Un element masque doit le rester : .bouton declare display:inline-flex, ce qui
   l'emportait sur la regle [hidden] du navigateur. Le bouton « Installer »
   restait donc visible alors qu'il etait marque cache. */
[hidden]{display:none!important}

/* =======================================================================
   10/10/2026 — Le hors ligne se regle au doigt. A gauche on est en ligne,
   a droite la langue est en reserve. Un bouton disait « telecharger » ;
   un curseur montre l'etat, ce qui se comprend sans lire.
   ======================================================================= */
.bascule{
  position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;
  width:100%;min-height:58px;padding:5px;border:0;border-radius:999px;cursor:pointer;
  font:inherit;color:inherit;
  background:color-mix(in srgb, var(--encre, #2A2118) 7%, var(--carte));
  box-shadow:inset 0 1px 3px rgba(24,18,12,.12), 0 0 0 1px var(--filet-fort);
  -webkit-tap-highlight-color:transparent;overflow:hidden}
.bascule:focus-visible{outline:2px solid var(--vif);outline-offset:3px}
/* Le pouce : il glisse d'un cote a l'autre. */
.bascule-pouce{position:absolute;top:5px;bottom:5px;inset-inline-start:5px;width:calc(50% - 5px);
  border-radius:999px;pointer-events:none;
  background:linear-gradient(180deg, color-mix(in srgb, var(--vif) 92%, #fff), var(--vif) 62%, var(--vif-fonce));
  box-shadow:0 1px 2px rgba(24,18,12,.18), 0 6px 14px -6px rgba(24,18,12,.5), inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .26s cubic-bezier(.3,1.3,.5,1), background .2s}
.bascule.active .bascule-pouce{transform:translateX(100%)}
[dir="rtl"] .bascule.active .bascule-pouce{transform:translateX(-100%)}
/* Pendant le telechargement, le pouce se remplit comme une jauge. */
.bascule-pouce b{position:absolute;inset:0;border-radius:inherit;display:block;
  background:rgba(255,255,255,.28);width:0;transition:width .25s ease}
.bascule.occupe .bascule-pouce{background:var(--vif-fonce)}
.bascule.occupe .bascule-pouce b{width:var(--avance, 0%)}
.bascule.occupe{cursor:progress}
/* Les deux cotes : celui qui est sous le pouce passe en blanc. */
.bascule-cote{position:relative;z-index:1;text-align:center;font-weight:800;
  font-size:clamp(13px,3.6cqw,16px);letter-spacing:-.01em;line-height:1.1;
  padding:10px 6px;opacity:.6;transition:color .2s, opacity .2s;overflow-wrap:anywhere}
.bascule:not(.active) .bascule-cote.gauche{color:#fff;opacity:1}
.bascule.active .bascule-cote.droite{color:#fff;opacity:1}
#bloc-hl .sous{min-height:2.6em}
@media (orientation:landscape) and (max-height:620px){
  .bascule{min-height:clamp(40px,11dvh,54px);padding:4px}
  .bascule-pouce{top:4px;bottom:4px;inset-inline-start:4px;width:calc(50% - 4px)}
  .bascule-cote{font-size:clamp(11px,3dvh,15px);padding:6px 4px}
  #bloc-hl .sous{min-height:0}
}

/* =======================================================================
   11/10/2026 — Une vraie mise en page d'ordinateur.
   Jusqu'ici #ecran etait bride a 560 px QUELLE QUE SOIT la taille de
   l'ecran : sur un PC on obtenait un telephone au milieu d'une page qui
   defilait. Comme #ecran est le conteneur de requete, tous les paliers
   ecrits pour 561, 900 et 1280 px ne se declenchaient jamais.
   Ici la scene prend la largeur disponible, la page ne defile plus, et
   seules les grilles de reponses restent bornees : une tuile de reponse
   large de 500 px ne serait plus un bouton, ce serait un mur.
   ======================================================================= */
@media (min-width:900px) and (min-height:620px){
  html,body:not([data-vue="fiche"]){height:100%;overflow:hidden}
  body:not([data-vue="fiche"]){display:grid;place-items:center;
    padding:clamp(14px,2.4vh,30px);background:var(--ciel)}
  body:not([data-vue="fiche"]) #ecran{
    width:min(1240px,100%);max-width:min(1240px,100%);
    height:100%;min-height:0;overflow:hidden;
    border-radius:26px;padding:clamp(16px,1.9cqw,28px);gap:clamp(10px,1.3cqw,18px);
    box-shadow:0 26px 70px rgba(0,0,0,.26), 0 0 0 1px var(--filet)}

  /* La barre du haut ne grandit pas avec la scene : elle reste une barre. */
  .barre{min-height:0}
  .barre .titre{font-size:clamp(19px,2.4cqw,30px)}

  /* Les reponses gardent une taille de bouton et se centrent dans la scene. */
  .grille:not(.menu){width:min(100%,860px);margin-inline:auto;
    align-content:center;justify-content:center}
  .grille:not(.menu) .tuile{max-height:min(34dvh,300px)}

  /* Les pages de texte lisent sur une colonne, pas sur toute la largeur. */
  .defile,.voies,.corps.accueil{width:min(100%,820px);margin-inline:auto}
  .corps{min-height:0;overflow:auto}

  /* Consigne et enonce : lisibles de loin, sans ecraser la grille. */
  .consigne{font-size:clamp(15px,1.9cqw,24px)}
  .enonce{font-size:clamp(30px,6cqw,84px)}
  .phrase{font-size:clamp(16px,2.4cqw,30px)}

  /* Le menu occupe la place restante et defile dans sa boite, pas la page. */
  .grille.menu{overflow:auto;min-height:0}
  .defile{overflow:auto;min-height:0}

  /* Range la carte : la carte suit la hauteur, pas la largeur de la scene. */
  .tri-carte{max-width:min(46cqw,420px);margin-inline:auto}
  .tri-scene{min-height:0}

  /* Le miroir se cale sur la hauteur disponible. */
  .sym-plateau{--cote:min(calc((70cqw - 10px - (var(--col) * 2 * 6px)) / (var(--col) * 2)), 9dvh, 64px)}
}
/* Tres grand ecran : on arrete de s'etaler, l'oeil ne suit plus au-dela. */
@media (min-width:1500px) and (min-height:620px){
  body:not([data-vue="fiche"]) #ecran{width:min(1360px,100%);max-width:min(1360px,100%)}
}
[hidden]{display:none!important}

/* =======================================================================
   11/10/2026 — QUATRE UNIVERS, ET UN ECRAN D'ENTREE QUI TIENT SUR UN PC.
   Deux choses ici :
   1. l'ecran d'entree devient une vraie grille — scene a gauche, formulaire
      et reglages a droite — au lieu d'une colonne qu'il fallait derouler ;
   2. chaque tranche d'age a son decor, sa matiere et son personnage. La
      STRUCTURE ne bouge pas quand on change d'age : l'ambiance, oui.
   ======================================================================= */

/* ---------- 1. La scene et le personnage ---------- */
.perso-cadre{display:block;width:min(34cqw,220px);margin-inline:auto;line-height:0}
.perso{width:100%;height:auto;display:block;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.18))}
.perso-cadre.entre{animation:perso-entre .42s cubic-bezier(.2,.9,.3,1.25)}
@keyframes perso-entre{
  from{opacity:0;transform:translateY(10px) scale(.88) rotate(-4deg)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.perso-cadre.entre{animation:none}}
.perso-nom{margin:.6em 0 0;text-align:center;font-weight:800;letter-spacing:.02em;
  font-size:clamp(16px,4.4cqw,24px)}
.perso-mot{margin:.25em auto 0;text-align:center;opacity:.72;max-width:26ch;
  font-size:clamp(12px,3cqw,15px);line-height:1.4;text-wrap:balance}

/* Le personnage sert aussi de pastille dans les tuiles d'age. */
.tranches .tuile .pic .perso{filter:none}
.tranches .tuile .pic{display:block;width:100%;max-width:70px;margin-inline:auto}
.tranches .tuile.active{box-shadow:0 0 0 3px var(--vif), var(--ombre)}

/* ---------- 2. L'ecran d'entree : une grille, plus une colonne ---------- */
.entree{flex:1 1 auto;min-height:0;display:grid;gap:clamp(10px,2cqw,20px);
  grid-template-columns:1fr;align-content:start;overflow:auto}
.entree-scene{display:grid;align-content:center;justify-items:center;gap:0}
.entree-colonne{display:grid;gap:clamp(10px,1.6cqw,16px);min-height:0;align-content:start}
.entree-form{display:grid;gap:clamp(8px,1.6cqw,14px);align-content:start}
.champ-age{display:grid;gap:6px;min-width:0}
.entree-cote{display:grid;gap:clamp(10px,1.6cqw,16px);min-width:0}
.avert{opacity:.7;margin:0}

/* Telephone : la scene se fait discrete pour que le bouton reste visible. */
@container ec (max-width: 560px){
  .perso-cadre{width:min(26cqw,120px)}
  .perso-nom{font-size:4.4cqw;margin-top:.4em}
  .perso-mot{display:none}
  .entree{gap:2.4cqw}
}

/* Grand ecran : scene a gauche, tout le reste a droite, rien ne deborde. */
@container ec (min-width: 820px){
  .entree{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
    align-content:stretch;overflow:hidden}
  .entree-scene{align-content:center}
  .perso-cadre{width:min(26cqw,250px)}
  .entree-colonne{overflow:auto;padding-inline-end:4px}
  .entree-cote{grid-template-columns:1fr 1fr;align-items:start}
  .tranches{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tranches .tuile{min-height:0;padding:10px 6px}
  .tranches .tuile .pic{max-width:54px}
  .tranches .tuile .mot{font-size:clamp(11px,1.3cqw,14px)}
}
/* Telephone couche : la scene passe en vignette, la grille reste a deux colonnes. */
@media (orientation:landscape) and (max-height:620px){
  .entree{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:10px;overflow:hidden}
  .perso-cadre{width:min(18vw,110px)}
  .perso-mot{display:none}
  .entree-colonne{overflow:auto}
  .entree-cote{grid-template-columns:1fr 1fr}
  .tranches .tuile .pic{max-width:34px}
}

/* ---------- 3. Le decor de chaque univers ----------
   Une couche derriere le contenu, jamais cliquable, faite de degrades : aucun
   fichier a charger, donc rien de plus a telecharger pour le mode hors ligne. */
#ecran::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  border-radius:inherit;opacity:.9}
#ecran{position:relative}
#ecran > *{position:relative;z-index:1}

/* Jardin — des bulles chaudes qui flottent, comme des pollens. */
body[data-univers="jardin"] #ecran::before{
  background:
    radial-gradient(circle at 12% 18%, rgba(249,115,22,.14) 0 9px, transparent 10px),
    radial-gradient(circle at 86% 12%, rgba(20,184,166,.14) 0 13px, transparent 14px),
    radial-gradient(circle at 78% 82%, rgba(249,115,22,.10) 0 18px, transparent 19px),
    radial-gradient(circle at 18% 76%, rgba(20,184,166,.10) 0 11px, transparent 12px),
    radial-gradient(circle at 50% 46%, rgba(249,115,22,.05) 0 120px, transparent 121px);
}
/* Atelier — le papier millimetre de l'etabli. */
body[data-univers="atelier"] #ecran::before{
  background-image:
    linear-gradient(to right, rgba(37,99,235,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(37,99,235,.07) 1px, transparent 1px),
    linear-gradient(to right, rgba(37,99,235,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(37,99,235,.045) 1px, transparent 1px);
  background-size:96px 96px, 96px 96px, 16px 16px, 16px 16px;
}
/* Station — un ciel etoile et une orbite. */
body[data-univers="station"] #ecran::before{
  background-image:
    radial-gradient(circle at 15% 22%, rgba(255,255,255,.55) 0 1.2px, transparent 2px),
    radial-gradient(circle at 72% 14%, rgba(255,255,255,.40) 0 1px, transparent 2px),
    radial-gradient(circle at 34% 68%, rgba(255,255,255,.35) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 56%, rgba(255,255,255,.45) 0 1.2px, transparent 2px),
    radial-gradient(circle at 58% 88%, rgba(255,255,255,.30) 0 1px, transparent 2px),
    radial-gradient(circle at 25% 46%, rgba(255,255,255,.25) 0 1px, transparent 2px),
    radial-gradient(circle at 93% 30%, rgba(255,255,255,.30) 0 1px, transparent 2px),
    radial-gradient(ellipse 72% 48% at 50% 54%, transparent 0 68%, rgba(45,212,167,.10) 69% 70%, transparent 71%);
}
/* Labo — un reseau de lignes fines, l'ordre du laboratoire. */
body[data-univers="labo"] #ecran::before{
  background-image:
    repeating-linear-gradient(60deg, rgba(139,140,255,.07) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(-60deg, rgba(56,189,248,.055) 0 1px, transparent 1px 44px),
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(139,140,255,.10), transparent 70%);
}

/* ---------- 4. La matiere : chaque univers a son grain ---------- */
/* Jardin : tout est rond et epais, les tuiles ont du rebond. */
body[data-univers="jardin"] .tuile{border-radius:22px}
body[data-univers="jardin"] .bouton{border-radius:999px;letter-spacing:.01em}
body[data-univers="jardin"] .tuile:active{transform:translateY(2px) scale(.97)}
/* Atelier : des angles francs, un filet net, l'esprit de l'etabli. */
body[data-univers="atelier"] .tuile{border-radius:14px}
body[data-univers="atelier"] .panneau{border-radius:16px}
/* Station : les surfaces s'eclairent par le haut, comme un cockpit. */
body[data-univers="station"] .panneau,
body[data-univers="station"] .tuile{
  background-image:linear-gradient(180deg,rgba(124,156,255,.08),transparent 60%)}
body[data-univers="station"] .tuile.active{box-shadow:0 0 0 2px var(--vif), 0 0 22px rgba(45,212,167,.28)}
/* Labo : net, serre, sans arrondi inutile — un instrument, pas un jouet. */
body[data-univers="labo"] .tuile{border-radius:10px}
body[data-univers="labo"] .panneau{border-radius:12px}
body[data-univers="labo"] .titre{letter-spacing:-.02em}
body[data-univers="labo"] .tuile.active{box-shadow:0 0 0 2px var(--vif), 0 0 22px rgba(139,140,255,.30)}

/* Le changement d'univers se voit : le fond fond vers le nouveau. */
body{transition:background-color .45s ease, color .3s ease}
@media (prefers-reduced-motion:reduce){body{transition:none}}
[hidden]{display:none!important}

/* Le libelle d'un champ est un libelle, pas un titre : il etait aussi gros que
   le titre de la page et ecrasait le formulaire. */
.entree-form label{font-size:clamp(12px,2.6cqw,15px);font-weight:600;opacity:.75;gap:6px}
.entree-form input{font-size:clamp(15px,3cqw,18px)}
@container ec (min-width: 820px){
  .entree-form label{font-size:14px}
  .perso-cadre{width:min(30cqw,270px)}
}
[hidden]{display:none!important}

/* Pip accueille le visiteur : le premier ecran montre un personnage dessine,
   pas un emoji dont le rendu change d'un appareil a l'autre. */
/* Le cadre rond suivait la taille d'un emoji : avec un personnage dessine il
   faut lui rendre sa place, sinon Pip chevauche la premiere carte. */
.blason{line-height:0;width:min(34cqw,150px);height:auto;aspect-ratio:1;
  padding:0;overflow:visible}
.blason .perso{width:100%;height:auto}
@container ec (min-width: 820px){
  .blason{width:min(17cqw,180px)}
  /* Les boutons ronds ne grandissent plus avec la scene : ce sont des boutons. */
  .rond{width:44px;height:44px;font-size:17px}
  .barre .rond.langue{font-size:15px;font-weight:700}
  /* Les deux voies d'entree ne s'etalent pas sur toute la largeur. */
  .voies{width:min(100%,660px)}
}
[hidden]{display:none!important}

/* Le bouton secondaire se fondait dans le panneau sur les univers sombres :
   on lui rend un contour net et le ton de l'accent. */
body[data-univers="station"]:not([data-nuit="non"]) .bouton.doux,
body[data-univers="labo"]:not([data-nuit="non"]) .bouton.doux{
  background:color-mix(in srgb, var(--vif) 14%, var(--carte));
  color:var(--encre);font-weight:700;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--vif) 45%, transparent)}
body[data-univers="station"]:not([data-nuit="non"]) .bouton.doux:hover,
body[data-univers="labo"]:not([data-nuit="non"]) .bouton.doux:hover{
  background:color-mix(in srgb, var(--vif) 22%, var(--carte));
  box-shadow:0 0 0 1px var(--vif)}
[hidden]{display:none!important}

/* =======================================================================
   11/10/2026 — JEUX D'ECOUTE : la reponse ne s'ecrit plus sous la question.
   Le mot dit a voix haute etait aussi affiche juste au-dessus des reponses :
   l'enfant recopiait au lieu d'ecouter. Il est maintenant cache, et le bouton
   « Montrer » le fait apparaitre deux secondes pour qui n'entend pas.
   ======================================================================= */
.indice{margin:0;display:grid;place-items:center;min-height:1.6em}
.indice-mot{
  font-size:clamp(26px,9cqw,64px);font-weight:var(--poids);line-height:1.1;
  letter-spacing:.01em;
  /* Cache par defaut : invisible ET illisible par la synthese vocale du systeme,
     mais la place reste prise pour que la grille ne saute pas a l'affichage. */
  opacity:0;visibility:hidden;transform:scale(.9);
  transition:opacity .22s ease, transform .22s cubic-bezier(.2,.9,.3,1.3)}
.indice.vu .indice-mot{opacity:1;visibility:visible;transform:none}
/* Un sablier discret montre que l'indice va disparaitre. */
.indice.vu .indice-mot{animation:indice-fond 2.2s linear forwards}
@keyframes indice-fond{0%,72%{opacity:1}100%{opacity:.15}}
@media (prefers-reduced-motion:reduce){
  .indice-mot{transition:none}
  .indice.vu .indice-mot{animation:none}
}
/* L'oeil se distingue du haut-parleur sans crier. */
#b-voir{font-size:clamp(15px,3.6cqw,19px)}
#b-voir:active{transform:translateY(1px) scale(.95)}
@container ec (max-width: 560px){
  .indice-mot{font-size:clamp(24px,10cqw,46px)}
}
@media (orientation:landscape) and (max-height:620px){
  .indice{min-height:0}
  .indice-mot{font-size:clamp(20px,9dvh,40px)}
}
[hidden]{display:none!important}

/* =======================================================================
   11/10/2026 — REGLAGES DU VISITEUR : univers et accessibilite.
   Les reglages manuels viennent APRES les preferences du systeme : quelqu'un
   qui a deja demande moins de mouvement a son appareil n'a rien a faire ici.
   ======================================================================= */

/* --- Lien d'evitement : invisible jusqu'au premier Tab. Premiere chose que
       rencontre une navigation au clavier ou un lecteur d'ecran. --- */
/* Cache hors de l'ecran par un deplacement, PAS par un left:-9999px : en
   ecriture de droite a gauche cette valeur negative creait onze mille pixels
   de defilement horizontal sur toutes les pages arabes. */
.saut{position:absolute;inset-inline-start:0;top:0;z-index:999;
  transform:translateY(-130%);transition:transform .12s ease;
  background:var(--vif,#F97316);color:#fff;font-weight:800;
  padding:12px 18px;border-end-end-radius:12px;text-decoration:none}
.saut:focus{transform:none}

/* --- Pages sans JavaScript : du vrai contenu, pas un ecran blanc. --- */
.sans-js{max-width:62ch;margin:10vh auto;padding:24px;text-align:center;line-height:1.6}
.sans-js h1{font-size:clamp(24px,5vw,38px);margin:0 0 12px}

/* --- Le focus se voit TOUJOURS, et par-dessus tout le reste. --- */
:focus-visible{outline:3px solid var(--vif,#F97316);outline-offset:3px;border-radius:6px}
@supports not selector(:focus-visible){:focus{outline:3px solid var(--vif,#F97316);outline-offset:3px}}

/* --- Taille du texte : on agit sur la racine, tout suit. --- */
:root[data-texte="grand"]{font-size:112.5%}
:root[data-texte="xgrand"]{font-size:131.25%}

/* --- Lecture espacee. Les valeurs reprises des criteres WCAG 1.4.12 : c'est
       l'espacement, plus que la forme des lettres, qui aide a la lecture. --- */
:root[data-espace="oui"] body{letter-spacing:.075em;word-spacing:.16em;line-height:1.75}
:root[data-espace="oui"] p,:root[data-espace="oui"] li{margin-block:1.1em}

/* --- Contraste renforce : trait net partout, ombres remplacees par des
       bordures, opacites remontees. --- */
:root[data-contraste="oui"] body{--filet:currentColor}
:root[data-contraste="oui"] .panneau,:root[data-contraste="oui"] .tuile,
:root[data-contraste="oui"] .carte,:root[data-contraste="oui"] .voie,
:root[data-contraste="oui"] .rg-boite{border:2px solid currentColor}
:root[data-contraste="oui"] .sous,:root[data-contraste="oui"] .etat,
:root[data-contraste="oui"] .perso-mot,:root[data-contraste="oui"] .rg-aide{opacity:1}
:root[data-contraste="oui"] .bouton{outline:2px solid currentColor;outline-offset:-2px}

/* --- Moins d'animations, demande ici ou reglee dans le systeme. --- */
:root[data-anim="oui"] *,:root[data-anim="oui"] *::before,:root[data-anim="oui"] *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important;scroll-behavior:auto!important}
@media (prefers-reduced-motion:reduce){
  :root[data-anim="auto"] *,:root[data-anim="auto"] *::before,:root[data-anim="auto"] *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}
/* Le systeme demande deja un fort contraste : on le suit sans rien demander. */
@media (prefers-contrast:more){
  :root[data-contraste="non"] .sous,:root[data-contraste="non"] .etat{opacity:1}
}
/* Mode contraste force de Windows : on laisse le systeme peindre. */
@media (forced-colors:active){
  .tuile,.bouton,.panneau,.carte,.rg-boite{border:1px solid currentColor}
  .perso,.rg-rond{forced-color-adjust:auto}
}

/* --- Le panneau de reglages, commun a l'application et au site. --- */
.rg-voile{position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  padding:16px;background:rgba(20,14,8,.55);backdrop-filter:blur(3px)}
.rg-boite{width:min(540px,100%);max-height:88dvh;overflow:auto;
  background:var(--carte,var(--voile,#fff));color:var(--encre,#33281F);
  border-radius:20px;padding:20px;box-shadow:0 24px 60px rgba(0,0,0,.35);
  display:grid;gap:14px;align-content:start}
.rg-tete{display:flex;align-items:center;gap:12px}
.rg-tete h2{margin:0;font-size:clamp(18px,4.4vw,24px);flex:1}
.rg-x{width:40px;height:40px;min-width:40px;min-height:40px;border:0;border-radius:50%;
  background:transparent;color:inherit;font-size:17px;cursor:pointer;display:grid;place-items:center}
.rg-x:hover{background:rgba(128,128,128,.16)}
.rg-mot{margin:0;opacity:.75;line-height:1.5;font-size:clamp(13px,3.2vw,15px)}
.rg-ligne{display:flex;align-items:center;gap:14px;justify-content:space-between;
  padding:12px 0;border-top:1px solid var(--trait,var(--filet,rgba(128,128,128,.22)))}
.rg-ligne b{display:block;font-size:clamp(14px,3.4vw,16px)}
.rg-aide{display:block;opacity:.7;font-size:clamp(12px,3vw,13px);line-height:1.4;margin-top:3px}
.rg-choix{display:flex;gap:6px;flex:none}
.rg-choix button{border:1px solid var(--trait,rgba(128,128,128,.3));background:transparent;
  color:inherit;border-radius:10px;padding:9px 12px;cursor:pointer;font:inherit;
  font-size:clamp(12px,3vw,14px);min-height:44px}
.rg-choix button[aria-pressed="true"]{background:var(--vif,#F97316);color:#fff;border-color:transparent;font-weight:800}
.rg-inter{flex:none;width:62px;height:34px;border-radius:99px;border:0;cursor:pointer;
  background:rgba(128,128,128,.32);position:relative;transition:background .18s ease}
.rg-inter span{position:absolute;top:3px;inset-inline-start:3px;width:28px;height:28px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .18s cubic-bezier(.2,.9,.3,1.3)}
.rg-inter.on{background:var(--vif,#F97316)}
.rg-inter.on span{transform:translateX(28px)}
[dir="rtl"] .rg-inter.on span{transform:translateX(-28px)}
.rg-raz{border:1px solid var(--trait,rgba(128,128,128,.3));background:transparent;color:inherit;
  border-radius:12px;padding:12px;cursor:pointer;font:inherit;min-height:44px}
.rg-mondes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rg-monde{display:grid;gap:4px;justify-items:center;padding:14px 10px;cursor:pointer;font:inherit;
  border-radius:16px;border:2px solid var(--trait,rgba(128,128,128,.25));background:transparent;color:inherit;
  min-height:44px}
.rg-monde b{font-size:clamp(14px,3.4vw,16px)}
.rg-monde i{font-style:normal;opacity:.65;font-size:clamp(12px,3vw,13px)}
.rg-monde[aria-pressed="true"]{border-color:var(--vif,#F97316);box-shadow:0 0 0 3px rgba(128,128,128,.12)}
.rg-rond{width:34px;height:34px;border-radius:50%;display:block;margin-bottom:4px}
.rg-monde[data-m="jardin"] .rg-rond{background:linear-gradient(135deg,#FFA255,#F2690E)}
.rg-monde[data-m="atelier"] .rg-rond{background:linear-gradient(135deg,#60A5FA,#1D4ED8)}
.rg-monde[data-m="station"] .rg-rond{background:linear-gradient(135deg,#2DD4A7,#0F766E)}
.rg-monde[data-m="labo"] .rg-rond{background:linear-gradient(135deg,#A5A6FF,#6D6EEA)}
@media (max-width:420px){.rg-mondes{grid-template-columns:1fr 1fr}}

/* --- Le pave de code. Le champ reel est invisible mais couvre les pastilles :
       on tape au clavier, on colle, le gestionnaire de mots de passe remplit,
       et au doigt ca ouvre le pave numerique du telephone. --- */
.pave{position:relative;display:block;width:fit-content;margin-inline:auto;cursor:text}
.pave-champ{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  border:0;background:transparent;font-size:16px;color:transparent;
  caret-color:transparent;text-align:center;letter-spacing:1em}
.pave .case{transition:border-color .15s ease, box-shadow .15s ease}
.pave .case.actif{border-color:var(--vif);box-shadow:0 0 0 3px var(--lueur, rgba(249,115,22,.22))}
.pave-champ:focus{outline:none}
.pave:focus-within .case.actif{animation:pave-bat 1.1s ease-in-out infinite}
@keyframes pave-bat{0%,100%{opacity:1}50%{opacity:.55}}
.pave-msg{min-height:1.4em;margin:0;text-align:center}
.clavier{max-width:min(100%,340px);margin-inline:auto}
@container ec (min-width: 820px){.clavier{max-width:300px}}
[hidden]{display:none!important}

/* La pastille d'univers dans la barre du jeu prend la couleur du monde en cours. */
.rond .rg-pastille{width:19px;height:19px;border-radius:50%;display:block;
  background:linear-gradient(135deg,var(--vif),var(--vif-fonce));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
#b-acces svg{display:block}
[hidden]{display:none!important}


/* --- 11/10/2026 — L'entete ne se disloque plus sur telephone.
   .haut est en space-between : avec TROIS enfants (logo, langue, reglages), le
   troisieme partait seul a la ligne, aligne a gauche sous le logo. Langue,
   univers et accessibilite forment desormais UN groupe, donc .haut n'a plus que
   deux enfants et le groupe se replie d'un bloc, a droite. --- */
.haut-outils{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  justify-content:flex-end;min-width:0}
@media (max-width:560px){
  .haut{gap:10px}
  .haut-outils{flex:1 1 auto;justify-content:flex-end}
  .haut-outils .lang-bouton{padding:9px 13px;font-size:14px}
  /* Sur un ecran etroit, « Univers » n'a pas besoin de son mot : la pastille
     coloree et le personnage du panneau suffisent. */
  #b-univers .lang-courante{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  #b-univers{padding:9px 12px}
}

/* --- Les personnages dans le panneau d'univers, a la place des pastilles. --- */
.rg-perso{display:block;width:clamp(44px,13vw,58px);height:auto;margin-bottom:6px;line-height:0}
.rg-perso svg{display:block;width:100%;height:auto}
.rg-monde{padding:12px 8px 14px}
[hidden]{display:none!important}

/* Sur un ecran etroit, « Deutsch » ou « Русский » poussait tout le groupe sous
   le logo. On garde le globe et le code a deux lettres ; le nom complet reste
   dans le panneau et pour les lecteurs d'ecran. */
.lang-abrege{display:none;font-weight:800;letter-spacing:.04em}
@media (max-width:620px){
  .lang-bouton .lang-courante{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  .lang-abrege{display:inline}
  .lang-bouton{gap:6px;padding:9px 13px}
}
[hidden]{display:none!important}

/* A 320 px, le mot « Poroki » et les trois commandes ne tiennent pas ensemble.
   On garde l'embleme seul : c'est devenu le logo, il se suffit. */
@media (max-width:360px){
  .logo{font-size:0;gap:0}
  .logo .marque{width:34px;height:34px}
  .haut-outils{gap:6px}
  .lang-bouton,.rg-bouton-a{padding:8px 11px;min-height:42px}
  .rg-bouton-a{width:42px;min-width:42px;height:42px}
}
[hidden]{display:none!important}


/* ----- 11/10/2026 — Jour ou nuit -------------------------------------------
   L'enfant choisit, avant de jouer, ce qui repose ses yeux. La COULEUR de son
   univers ne bouge pas : Pip reste orange, Lumen reste violet. Seul le fond
   change, parce que c'est le fond qui fatigue l'oeil, pas l'accent.
   Ce bloc vient apres les quatre univers : meme specificite, il gagne. */
body[data-nuit="oui"]{
  --fond:#0D1117; --ciel:radial-gradient(130% 80% at 50% -10%,#18212E 0%,#0D1117 62%);
  --encre:#E8EEF7; --carte:#161E2B; --filet:rgba(255,255,255,.10);
  --ombre:0 0 0 1px rgba(255,255,255,.07), 0 10px 26px rgba(0,0,0,.45);
  --ombre-h:0 0 0 1px rgba(255,255,255,.14), 0 18px 40px rgba(0,0,0,.55);
}
body[data-nuit="non"]{
  --fond:#FBF8F3; --ciel:linear-gradient(170deg,#F1EEE7 0%,#FBF8F3 58%);
  --encre:#1F2733; --carte:#FFFFFF; --filet:rgba(31,39,51,.10);
  --ombre:0 1px 2px rgba(31,39,51,.06), 0 8px 22px rgba(31,39,51,.10);
  --ombre-h:0 2px 4px rgba(31,39,51,.08), 0 16px 34px rgba(31,39,51,.14);
}
body[data-nuit="non"] #ecran::before{opacity:.35}

/* ----- Menu range par categorie -------------------------------------------- */
.defile.cats{overflow:auto;-webkit-overflow-scrolling:touch;padding-bottom:10px}
.cat-titre{display:flex;align-items:center;gap:10px;margin:14px 2px 8px;
  font-size:clamp(15px,3.4cqw,20px);font-weight:var(--poids,700);letter-spacing:.01em;opacity:.92}
.cat-titre::after{content:"";flex:1;height:2px;border-radius:2px;background:var(--filet)}
.cat-nb{flex:0 0 auto;order:-1;min-width:1.9em;text-align:center;padding:1px 7px;border-radius:999px;
  background:var(--vif);color:var(--carte);font-size:.78em;font-weight:800}
.cat-titre:first-child{margin-top:4px}
.tuile .neuf{position:absolute;inset-inline-end:6px;top:6px;padding:1px 7px;border-radius:999px;
  background:var(--second);color:#101418;font-size:11px;font-weight:800;line-height:1.5;letter-spacing:.02em}
.maj-note{margin:16px 2px 4px;font-size:clamp(12px,2.6cqw,14px);opacity:.72;line-height:1.5}
.drapeau-geant{display:block;font-size:clamp(56px,16cqw,120px);line-height:1.1;text-align:center}

/* ----- Ecran « jour ou nuit », avant d'entrer dans les jeux ---------------- */
.jn{display:flex;flex-direction:column;gap:14px;max-width:560px;margin:auto;padding:4px}
.jn h1{margin:0;font-size:clamp(20px,5cqw,30px)}
.jn p{margin:0;line-height:1.55;opacity:.85;font-size:clamp(13px,3cqw,16px)}
.jn-choix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.jn-b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:88px;border:2px solid var(--filet);border-radius:var(--rp,18px);background:var(--carte);
  color:var(--encre);font:inherit;font-weight:700;cursor:pointer;padding:10px 6px;min-width:0}
.jn-b i{font-style:normal;font-size:26px;line-height:1}
.jn-b span{font-size:clamp(11px,2.6cqw,14px);text-align:center;overflow-wrap:anywhere}
.jn-b[aria-pressed="true"]{border-color:var(--vif);box-shadow:var(--lueur)}
.jn-oeil{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--rp,18px);
  background:var(--carte);border:1px solid var(--filet)}
.jn-oeil i{font-style:normal;font-size:22px;line-height:1.2;flex:0 0 auto}
[hidden]{display:none!important}

/* ----- 12/10/2026 — Le menu range par categorie ---------------------------
   Avant, une seule grille occupait toute la hauteur et ses tuiles s'etiraient.
   Maintenant il y a une grille par famille : chacune prend la hauteur de ses
   tuiles, et c'est la colonne entiere qui defile. Les regles ci-dessous
   viennent en dernier pour reprendre la main sur les anciennes. */
.defile.cats{display:grid;overflow:auto;min-height:0;align-content:safe center;
  padding-block:1cqw 10px}
.defile.cats .grille.menu{
  flex:none!important;
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(clamp(118px,16cqw,172px),1fr))!important;
  grid-template-rows:none!important;
  grid-auto-rows:auto!important;
  align-content:start;
  gap:clamp(8px,1.8cqw,16px);
  margin:0 0 4px;
}
.defile.cats .grille.menu .tuile{
  min-height:clamp(78px,13cqw,120px);max-height:none;
  flex-direction:column;justify-content:center;gap:4px;padding:10px 8px;
}
.defile.cats .grille.menu .tuile .pic{font-size:clamp(22px,4.4cqw,34px);width:auto;flex:none}
.defile.cats .grille.menu .tuile .mot{font-size:clamp(11px,2.1cqw,15px);text-align:center;
  line-height:1.2;overflow-wrap:anywhere;hyphens:auto}
.defile.cats .grille.menu .tuile .etat{margin:0;font-size:12px}
/* 13/10/2026 — Telephone : deux colonnes de CARRES, picto en grand au-dessus
   du nom. La ligne horizontale faisait tenir moins de jeux et reduisait le
   picto a une vignette. */
@container ec (max-width:560px){
  .defile.cats{align-content:start!important}
  .defile.cats .grille.menu{grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:3cqw!important}
  .defile.cats .grille.menu .tuile{flex-direction:column;justify-content:center;gap:2cqw;
    aspect-ratio:1;min-height:0;padding:3cqw}
  .defile.cats .grille.menu .tuile .pic{font-size:17cqw}
  .defile.cats .grille.menu .tuile .mot{text-align:center;font-size:3.7cqw;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .defile.cats .grille.menu .tuile .etat{position:absolute;top:1.5cqw;inset-inline-end:2cqw}
}
/* Telephone couche et petite tablette : trois colonnes, memes carres. */
@container ec (min-width:561px) and (max-width:900px){
  .defile.cats{align-content:start!important}
  .defile.cats .grille.menu{grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:2.4cqw!important}
  .defile.cats .grille.menu .tuile{flex-direction:column;justify-content:center;gap:1.4cqw;
    aspect-ratio:1;min-height:0;padding:2cqw}
  .defile.cats .grille.menu .tuile .pic{font-size:11cqw}
  .defile.cats .grille.menu .tuile .mot{text-align:center;font-size:2.8cqw;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
[hidden]{display:none!important}

/* ----- 12/10/2026 — La regle du jeu, avant de jouer ----------------------- */
.regle{display:flex;flex-direction:column;gap:14px;max-width:560px;margin:auto;padding:4px}
.rg-sur{margin:0;font-size:clamp(12px,2.8cqw,14px);letter-spacing:.09em;text-transform:uppercase;opacity:.65}
.rg-carte{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--rp,18px);
  background:var(--carte);border:1px solid var(--filet);box-shadow:var(--ombre)}
.rg-carte p{margin:0;line-height:1.6;font-size:clamp(14px,3.2cqw,18px)}
.rg-pic{flex:0 0 auto;font-size:clamp(30px,7cqw,44px);line-height:1.1}
.jn-st{margin:6px 0 -6px;font-size:clamp(15px,3.4cqw,19px)}
.jn p+.jn-choix{margin-top:2px}

/* ----- 13/10/2026 — Les tuiles de jeu, un CARRE pour chaque age ----------
   Un enfant de six ans et un de quinze n'attendent pas le meme bouton. La
   forme reste la meme — un carre, le dessin au-dessus du mot — mais la
   densite change : grand et rond au Jardin, serre et sobre au Labo. */
.defile.cats .grille.menu .tuile{
  position:relative;overflow:hidden;border:1px solid var(--filet);
  flex-direction:column;justify-content:center;aspect-ratio:1;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.defile.cats .grille.menu .tuile:active{transform:scale(.97)}
.defile.cats .grille.menu .tuile:hover{border-color:var(--vif);box-shadow:var(--ombre-h)}
/* un filet de couleur en bas : il rattache la tuile a sa famille */
.defile.cats .grille.menu .tuile::after{content:"";position:absolute;inset-inline:0;
  bottom:0;height:3px;background:var(--vif);opacity:0;transition:opacity .12s ease}
.defile.cats .grille.menu .tuile:hover::after{opacity:.9}

/* 5-7 ans — gros, rond, chaleureux. Le dessin porte tout. */
body[data-univers="jardin"] .defile.cats .grille.menu{
  grid-template-columns:repeat(auto-fill,minmax(clamp(132px,19cqw,196px),1fr))!important;
  gap:clamp(10px,2.2cqw,18px)}
body[data-univers="jardin"] .defile.cats .grille.menu .tuile{
  border-radius:26px;border-width:2px;padding:12px 10px;gap:6px;
  background-image:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0) 62%)}
body[data-univers="jardin"] .defile.cats .grille.menu .tuile .pic{font-size:clamp(34px,7cqw,54px)}
body[data-univers="jardin"] .defile.cats .grille.menu .tuile .mot{font-size:clamp(12px,2.5cqw,16px);font-weight:800}

/* 8-10 ans — net, carre aux angles doux. */
body[data-univers="atelier"] .defile.cats .grille.menu{
  grid-template-columns:repeat(auto-fill,minmax(clamp(124px,17cqw,180px),1fr))!important}
body[data-univers="atelier"] .defile.cats .grille.menu .tuile{
  border-radius:18px;padding:11px 9px;gap:5px}
body[data-univers="atelier"] .defile.cats .grille.menu .tuile .pic{font-size:clamp(30px,6cqw,46px)}

/* 11-13 ans — compact, le dessin un peu plus discret, le mot net. */
body[data-univers="station"] .defile.cats .grille.menu{
  grid-template-columns:repeat(auto-fill,minmax(clamp(112px,15cqw,160px),1fr))!important;gap:10px}
body[data-univers="station"] .defile.cats .grille.menu .tuile{
  border-radius:12px;padding:10px 8px;gap:4px}
body[data-univers="station"] .defile.cats .grille.menu .tuile::after{opacity:.35}
body[data-univers="station"] .defile.cats .grille.menu .tuile .pic{font-size:clamp(26px,5cqw,38px)}
body[data-univers="station"] .defile.cats .grille.menu .tuile .mot{
  font-size:clamp(12px,2.1cqw,15px);font-weight:650;line-height:1.25}

/* 14-15 ans — dense, sobre, un instrument. Rien de decoratif. */
body[data-univers="labo"] .defile.cats .grille.menu{
  grid-template-columns:repeat(auto-fill,minmax(clamp(104px,13cqw,142px),1fr))!important;gap:8px}
body[data-univers="labo"] .defile.cats .grille.menu .tuile{
  border-radius:9px;padding:9px 7px;gap:3px;background-image:none}
body[data-univers="labo"] .defile.cats .grille.menu .tuile::after{opacity:.3;height:2px}
body[data-univers="labo"] .defile.cats .grille.menu .tuile .pic{font-size:clamp(22px,4.2cqw,32px);opacity:.92}
body[data-univers="labo"] .defile.cats .grille.menu .tuile .mot{
  font-size:clamp(11.5px,2cqw,14px);font-weight:600;letter-spacing:.005em;line-height:1.3}
body[data-univers="labo"] .cat-titre{font-size:clamp(13px,2.6cqw,16px);letter-spacing:.04em;text-transform:uppercase;opacity:.8}
[hidden]{display:none!important}

/* ----- 12/10/2026 — Le menu en deux temps -------------------------------
   Avant : une seule liste et une barre de defilement en travers de l'ecran.
   Maintenant : les familles d'abord, puis les jeux de la famille choisie,
   les autres familles restant a portee de pouce. Quand la liste depasse
   quand meme, pas de barre grise : un degrade dit qu'il y a la suite. */
.familles{flex:1;display:grid;gap:clamp(10px,2cqw,18px);align-content:center;min-height:0;
  grid-template-columns:repeat(auto-fit,minmax(clamp(150px,27cqw,260px),1fr))}
.fam{position:relative;display:grid;grid-template-rows:auto auto auto;justify-items:center;
  align-content:center;gap:6px;padding:clamp(12px,2.4cqw,22px) 12px clamp(16px,2.6cqw,24px);
  min-height:clamp(112px,19cqw,180px);min-width:0;
  background:var(--carte);color:var(--encre);border:2px solid var(--filet);
  border-radius:var(--r,20px);box-shadow:var(--ombre);font:inherit;cursor:pointer;
  background-image:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 60%);
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;overflow:hidden}
.fam:hover{border-color:var(--vif);box-shadow:var(--ombre-h);transform:translateY(-2px)}
.fam:active{transform:scale(.98)}
.fam-pic{font-size:clamp(28px,6cqw,48px);line-height:1.1}
.fam-nom{font-size:clamp(12.5px,2.4cqw,17px);font-weight:var(--poids,700);text-align:center;
  line-height:1.25;overflow-wrap:anywhere}
.fam-nb{min-width:2em;padding:1px 9px;border-radius:999px;background:var(--vif);color:var(--carte);
  font-size:clamp(11px,2cqw,13px);font-weight:800}
.fam-jauge{position:absolute;inset-inline:0;bottom:0;height:4px;background:var(--filet)}
.fam-jauge i{display:block;height:100%;background:var(--vif);border-start-end-radius:4px;
  border-end-end-radius:4px}
.fam .neuf{inset-inline-end:8px;top:8px}

/* Les familles, en haut de la liste de jeux : une rangee qui defile de cote. */
.puces{display:flex;gap:7px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;flex:none}
.puces::-webkit-scrollbar{display:none}
.puce{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;white-space:nowrap;
  padding:7px 13px;border-radius:999px;border:1.5px solid var(--filet);background:var(--carte);
  color:var(--encre);font:inherit;font-size:clamp(11.5px,2.1cqw,14px);font-weight:650;cursor:pointer}
.puce span{font-size:1.15em;line-height:1}
.puce.active{border-color:var(--vif);background:var(--vif);color:var(--carte)}

/* Defilement sans barre grise. */
.defile.cats{scrollbar-width:none;-ms-overflow-style:none;position:relative}
.defile.cats::-webkit-scrollbar{width:0;height:0}
.defile.cats.a-suivre{
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 52px),transparent 100%);
          mask-image:linear-gradient(180deg,#000 calc(100% - 52px),transparent 100%)}
@container ec (max-width:560px){
  .familles{grid-template-columns:repeat(2,minmax(0,1fr));align-content:safe center;padding-top:4px}
  .fam{min-height:96px}
}
[hidden]{display:none!important}

/* ----- 12/10/2026 — Dix bonnes reponses de suite -------------------------
   Six mises en scene, tirees au sort sans reprendre la precedente. Les petits
   sautent et recoivent des confettis ; les grands ont un anneau, une montee,
   un compteur — plus court, plus sobre. Mouvement reduit : la carte s'affiche
   sans bouger, le compliment reste. Tout est en CSS : rien a telecharger. */
.fete-plein{position:fixed;inset:0;z-index:60;display:grid;place-items:center;align-content:center;
  gap:12px;padding:20px;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 45%,color-mix(in srgb,var(--vif) 26%,transparent),transparent 72%),
             color-mix(in srgb,var(--fond) 95%,transparent);
  animation:fp-entre .22s ease both}
.fete-plein.part{animation:fp-sort .24s ease both}
@keyframes fp-entre{from{opacity:0}to{opacity:1}}
@keyframes fp-sort{to{opacity:0}}
.fp-scene{position:relative;display:grid;place-items:center;width:min(58vmin,290px);height:min(58vmin,290px)}
.fp-perso{display:block;width:min(40vmin,200px);height:min(40vmin,200px);filter:drop-shadow(0 12px 28px rgba(0,0,0,.35))}
.fp-perso svg{width:100%;height:100%;display:block}
.fp-nb{position:absolute;inset-inline-end:2%;top:4%;min-width:2.1em;padding:4px 12px;border-radius:999px;
  background:var(--vif);color:var(--carte);font-weight:900;font-size:clamp(16px,4.4vmin,26px);
  box-shadow:var(--ombre-h)}
.fp-mot{margin:-8px 0 0;text-align:center;font-weight:800;line-height:1.3;color:var(--encre);
  font-size:clamp(17px,5vmin,30px);text-shadow:0 2px 14px color-mix(in srgb,var(--fond) 70%,transparent)}

/* --- 5-10 ans --- */
.fete-plein[data-v="saut"] .fp-perso{animation:fp-saut .52s cubic-bezier(.3,1.4,.4,1) 3}
@keyframes fp-saut{0%,100%{transform:translateY(0) scale(1)}
  35%{transform:translateY(-16%) scale(1.06,.94)}
  70%{transform:translateY(2%) scale(.96,1.05)}}
.fete-plein[data-v="confettis"] .fp-perso{animation:fp-pop .4s cubic-bezier(.2,1.6,.4,1) both}
@keyframes fp-pop{from{transform:scale(.4) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
.fp-grain{position:absolute;top:-8%;width:10px;height:15px;border-radius:3px;background:var(--second);
  opacity:0;animation:fp-tombe 1.5s linear both}
.fp-grain:nth-child(2n){background:var(--vif)}
.fp-grain:nth-child(3n){background:var(--vif-fonce);width:8px;height:8px;border-radius:50%}
.fp-grain:nth-child(1){left:6%;animation-delay:.02s}   .fp-grain:nth-child(2){left:16%;animation-delay:.16s}
.fp-grain:nth-child(3){left:26%;animation-delay:.07s}  .fp-grain:nth-child(4){left:36%;animation-delay:.24s}
.fp-grain:nth-child(5){left:46%;animation-delay:.11s}  .fp-grain:nth-child(6){left:56%;animation-delay:.3s}
.fp-grain:nth-child(7){left:66%;animation-delay:.04s}  .fp-grain:nth-child(8){left:76%;animation-delay:.2s}
.fp-grain:nth-child(9){left:86%;animation-delay:.13s}  .fp-grain:nth-child(10){left:94%;animation-delay:.28s}
.fp-grain:nth-child(11){left:11%;animation-delay:.38s} .fp-grain:nth-child(12){left:31%;animation-delay:.44s}
.fp-grain:nth-child(13){left:61%;animation-delay:.41s} .fp-grain:nth-child(14){left:81%;animation-delay:.47s}
@keyframes fp-tombe{0%{opacity:0;transform:translateY(0) rotate(0)}
  12%{opacity:1} 100%{opacity:0;transform:translateY(300%) rotate(540deg)}}
.fete-plein[data-v="etoiles"] .fp-perso{animation:fp-respire 1.9s ease-in-out both}
@keyframes fp-respire{0%{transform:scale(.7);opacity:0}25%{transform:scale(1.04);opacity:1}
  60%{transform:scale(.99)}100%{transform:scale(1)}}
.fp-etoile{position:absolute;font-size:clamp(16px,4vmin,26px);opacity:0;
  animation:fp-orbe 1.9s ease-in-out both}
.fp-etoile:nth-child(1){animation-delay:.05s;--a:0deg}   .fp-etoile:nth-child(2){animation-delay:.18s;--a:60deg}
.fp-etoile:nth-child(3){animation-delay:.31s;--a:120deg} .fp-etoile:nth-child(4){animation-delay:.44s;--a:180deg}
.fp-etoile:nth-child(5){animation-delay:.57s;--a:240deg} .fp-etoile:nth-child(6){animation-delay:.7s;--a:300deg}
@keyframes fp-orbe{0%{opacity:0;transform:rotate(var(--a)) translateX(0) scale(.4)}
  30%{opacity:1} 100%{opacity:0;transform:rotate(calc(var(--a) + 70deg)) translateX(min(26vmin,128px)) scale(1)}}
.fete-plein[data-v="tourne"] .fp-perso{animation:fp-tourne .85s cubic-bezier(.2,.9,.3,1) both}
@keyframes fp-tourne{from{transform:rotate(-200deg) scale(.3);opacity:0}to{transform:none;opacity:1}}
.fete-plein[data-v="fusee"] .fp-perso{animation:fp-monte 1.6s cubic-bezier(.3,.9,.3,1) both}
@keyframes fp-monte{0%{transform:translateY(60%) scale(.7);opacity:0}
  28%{transform:translateY(0) scale(1);opacity:1}
  72%{transform:translateY(-6%) scale(1.02)}100%{transform:translateY(0) scale(1)}}

/* --- 11-15 ans : sobre, net, court --- */
.fete-plein[data-v="anneau"] .fp-perso{animation:fp-net .5s cubic-bezier(.2,.9,.3,1) both}
.fp-anneau{position:absolute;inset:8%;border:2px solid var(--vif);border-radius:50%;opacity:0;
  animation:fp-pulse 1.2s cubic-bezier(.2,.7,.3,1) both}
.fp-anneau:nth-child(2){animation-delay:.22s}
@keyframes fp-pulse{0%{opacity:.9;transform:scale(.55)}100%{opacity:0;transform:scale(1.25)}}
.fete-plein[data-v="montee"] .fp-perso{animation:fp-haut .6s cubic-bezier(.2,.9,.25,1) both}
@keyframes fp-haut{from{transform:translateY(14%);opacity:0}to{transform:none;opacity:1}}
.fete-plein[data-v="compteur"] .fp-nb{animation:fp-compte .7s cubic-bezier(.2,1.3,.4,1) both}
.fete-plein[data-v="compteur"] .fp-perso{animation:fp-net .5s ease both}
@keyframes fp-compte{from{transform:scale(.3) translateY(30%);opacity:0}to{transform:none;opacity:1}}
@keyframes fp-net{from{opacity:0}to{opacity:1}}
.fp-trait{position:absolute;inset-inline:6%;bottom:12%;height:3px;border-radius:3px;background:var(--vif);
  transform-origin:left center;animation:fp-barre .8s cubic-bezier(.2,.9,.25,1) both}
.fete-plein[data-v="trait"] .fp-perso{animation:fp-haut .55s cubic-bezier(.2,.9,.25,1) both}
@keyframes fp-barre{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.fp-vague{position:absolute;inset:0;border-radius:50%;opacity:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--second) 55%,transparent),transparent 68%);
  animation:fp-pulse 1.3s ease-out both}

/* Mouvement reduit : plus rien ne bouge, le compliment reste entier. */
.fete-plein[data-fixe="oui"] *{animation:none!important}
.fete-plein[data-fixe="oui"]{animation:fp-entre .2s ease both}
@media (prefers-reduced-motion:reduce){
  .fete-plein *{animation:none!important}
}
[hidden]{display:none!important}

/* ----- 12/10/2026 — Après une erreur : expliquer, ou réessayer --------------
   Une bonne réponse enchaîne toute seule. Une erreur, elle, laisse la question
   en place et ouvre deux portes : toucher une autre tuile, ou demander comment
   s'y prendre. La bonne réponse ne tombe que si l'enfant la demande. */
.aide-barre{display:flex;justify-content:center;margin:10px 0 2px;flex:none}
.aide-barre .bouton{font-size:clamp(12.5px,2.6cqw,15px);padding:9px 18px}
.aide-voile{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px;
  background:color-mix(in srgb,var(--fond) 78%,transparent);animation:av-e .16s ease both}
@keyframes av-e{from{opacity:0}to{opacity:1}}
.aide-boite{width:min(560px,100%);max-height:86dvh;overflow:auto;display:flex;flex-direction:column;gap:12px;
  padding:20px 22px;border-radius:var(--r,20px);background:var(--carte);color:var(--encre);
  border:1px solid var(--filet);box-shadow:var(--ombre-h)}
.aide-sur{margin:0;font-size:12px;letter-spacing:.09em;text-transform:uppercase;opacity:.62}
.aide-corps{display:flex;flex-direction:column;gap:10px}
.aide-corps p{margin:0;line-height:1.6;font-size:clamp(14px,3cqw,17px)}
.aide-calcul{font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.01em;
  font-size:clamp(15px,3.6cqw,21px);line-height:1.7;overflow-wrap:anywhere;
  padding:12px 14px;border-radius:12px;background:rgba(127,127,127,.12)}
.aide-rep{margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:12px 14px;border-radius:12px;border:2px solid var(--vif)}
.aide-rep span{font-size:12px;letter-spacing:.07em;text-transform:uppercase;opacity:.7}
.aide-rep b{font-size:clamp(18px,4.6cqw,26px)}
.aide-rep b .enonce{font-size:inherit}
.aide-pieds{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:2px}
[hidden]{display:none!important}

/* ----- 13/10/2026 — Familles en CARRES sur telephone ---------------------
   La liste pleine largeur tenait moins de familles a l ecran et reduisait la
   mascotte a une vignette. Retour a deux colonnes de carres : grand picto,
   nom dessous, jauge en bas. Le menu part du haut de l ecran, il ne se centre
   plus : avec deux familles le vide au-dessus etait enorme. */
@container ec (max-width:560px){
  .familles{grid-template-columns:repeat(2,minmax(0,1fr));gap:3cqw;
    align-content:start;padding:2cqw 0;width:100%}
  .fam{grid-template-rows:auto auto auto;justify-items:center;align-items:center;
    gap:1.4cqw;aspect-ratio:1;min-height:0;padding:3cqw;border-radius:5cqw;text-align:center}
  .fam-pic{font-size:17cqw;width:auto;height:auto;background:none;border-radius:0}
  .fam-nom{text-align:center;font-size:3.7cqw;line-height:1.15;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .fam-nb{font-size:3cqw;padding:.4cqw 2cqw}
  .fam .neuf{top:1.5cqw;inset-inline-end:2cqw}
  .fam-jauge{height:3px}
}
/* Telephone couche et petites tablettes : trois colonnes, memes carres. */
@container ec (min-width:561px) and (max-width:900px){
  .familles{grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:2.4cqw}
  .fam{aspect-ratio:1;min-height:0}
  .fam-pic{font-size:11cqw}
  .fam-nom{font-size:2.8cqw}
}
@media (orientation:landscape) and (max-height:520px){
  .familles{grid-template-columns:repeat(5,minmax(0,1fr));align-content:start}
  .fam{aspect-ratio:1;min-height:0}
  .fam-pic{font-size:min(9cqw,13vh)}
  .fam-nom{font-size:min(2.4cqw,3.4vh)}
}

/* ----- 12/10/2026 — Boutons de famille : finition et entree en scene -----
   Un degrade tres leger, un filet interieur clair, et les cartes qui montent
   l'une apres l'autre a l'ouverture. Rien de clinquant : l'enfant doit voir
   ou appuyer, pas regarder une animation. */
.fam{background-image:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 58%);
  transition:transform .14s cubic-bezier(.2,.7,.3,1),border-color .14s ease,box-shadow .14s ease}
.fam::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.fam:focus-visible{outline:3px solid var(--vif);outline-offset:2px}
.fam:active{transform:scale(.975)}
@keyframes fam-entree{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.familles .fam{animation:fam-entree .34s cubic-bezier(.2,.7,.3,1) both}
.familles .fam:nth-child(1){animation-delay:.02s}
.familles .fam:nth-child(2){animation-delay:.07s}
.familles .fam:nth-child(3){animation-delay:.12s}
.familles .fam:nth-child(4){animation-delay:.17s}
.familles .fam:nth-child(5){animation-delay:.22s}
.familles .fam:nth-child(6){animation-delay:.27s}
.familles .fam:nth-child(n+7){animation-delay:.3s}
@media (prefers-reduced-motion:reduce){
  .familles .fam{animation:none}
  .fam{transition:none}
}
[data-fixe="oui"] .familles .fam{animation:none}
[hidden]{display:none!important}

/* ---------- 13/10/2026 — Les icones dessinees ----------------------------
   Un seul trait, la couleur de l'univers, la taille du texte qui l'entoure :
   les reglages de .pic / .fam-pic deja en place continuent de commander.
   L'epaisseur suit la tranche d'age — epais et rond a cinq ans, fin a quinze. */
.ic{width:1em;height:1em;display:block;flex:none;
  fill:none;stroke:currentColor;stroke-width:var(--ic-ep,1.9);
  stroke-linecap:round;stroke-linejoin:round;color:var(--vif);
  overflow:visible}
.pic .ic,.fam-pic .ic{margin-inline:auto}
body[data-univers="jardin"] .ic{--ic-ep:2.6}
body[data-univers="atelier"] .ic{--ic-ep:2.1}
body[data-univers="station"] .ic{--ic-ep:1.8}
body[data-univers="labo"] .ic{--ic-ep:1.5}
/* Dans une reponse ou une tuile active, l'icone prend la couleur du texte. */
.tuile.juste .ic,.tuile.active .ic,.puce.active .ic{color:currentColor}
/* Pastille de famille dans la barre de puces : l'icone s'aligne sur le mot. */
.pc-ic{display:inline-flex;align-items:center;font-size:1.15em;margin-inline-end:.1em}
.rg-pic .ic{margin-inline:auto}
@media (prefers-contrast:more){.ic{--ic-ep:2.4}}

/* ---------- 13/10/2026 — Telephone : le dernier mot sur la grille des jeux
   Les regles par tranche d'age fixent une largeur minimale de tuile, pensee
   pour un ecran large. Sur un telephone elles debordaient. Ici on impose le
   nombre de colonnes : deux carres chez les petits, trois chez les grands —
   plus l'age monte, plus la densite monte, c'est la meme idee que la forme. */
@container ec (max-width:560px){
  body[data-univers] .defile.cats .grille.menu,
  body[data-univers] .familles{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:3cqw!important}
  body[data-univers="station"] .defile.cats .grille.menu,
  body[data-univers="labo"] .defile.cats .grille.menu{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:2.6cqw!important}
  body[data-univers] .defile.cats .grille.menu .tuile{
    aspect-ratio:1;min-height:0;padding:3cqw;gap:1.6cqw}
  body[data-univers="jardin"] .defile.cats .grille.menu .tuile .pic{font-size:19cqw}
  body[data-univers="atelier"] .defile.cats .grille.menu .tuile .pic{font-size:17cqw}
  body[data-univers="station"] .defile.cats .grille.menu .tuile .pic{font-size:12cqw}
  body[data-univers="labo"] .defile.cats .grille.menu .tuile .pic{font-size:11cqw}
  body[data-univers="jardin"] .defile.cats .grille.menu .tuile .mot{font-size:3.8cqw}
  body[data-univers="atelier"] .defile.cats .grille.menu .tuile .mot{font-size:3.6cqw}
  body[data-univers="station"] .defile.cats .grille.menu .tuile .mot{font-size:2.9cqw}
  body[data-univers="labo"] .defile.cats .grille.menu .tuile .mot{font-size:2.8cqw}
  body[data-univers] .defile.cats .grille.menu .tuile .mot{
    text-align:center;line-height:1.15;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
/* Telephone couche : l'ecran est large et bas, on monte d'une colonne et le
   dessin se regle sur la hauteur disponible, pas sur la largeur. */
@media (orientation:landscape) and (max-height:540px){
  body[data-univers] .defile.cats{align-content:start!important}
  body[data-univers] .defile.cats .grille.menu,
  body[data-univers] .familles{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:1.6cqw!important}
  body[data-univers="station"] .defile.cats .grille.menu,
  body[data-univers="labo"] .defile.cats .grille.menu{
    grid-template-columns:repeat(6,minmax(0,1fr))!important}
  body[data-univers] .defile.cats .grille.menu .tuile,
  body[data-univers] .familles .fam{aspect-ratio:1;min-height:0;padding:1.4cqw}
  body[data-univers] .defile.cats .grille.menu .tuile .pic,
  body[data-univers] .familles .fam-pic{font-size:min(8cqw,15vh)}
  body[data-univers] .defile.cats .grille.menu .tuile .mot,
  body[data-univers] .familles .fam-nom{font-size:min(2cqw,3.4vh)}
}

/* ---------- 13/10/2026 — Le menu des jeux prend des couleurs --------------
   Toutes les tuiles portaient le meme accent : une grille grise, triste a
   cote du reste du site. Chaque famille a desormais sa teinte, le dessin est
   pose sur une pastille de cette teinte, et la forme de la pastille suit la
   tranche d'age — ronde et large au Jardin, un carre net au Labo. */
[data-f="cat_mots"]    {--jeu:#7C5CFF}
[data-f="cat_nombres"] {--jeu:#17A398}
[data-f="cat_logique"] {--jeu:#F2792B}
[data-f="cat_monde"]   {--jeu:#2D86E0}
[data-f="cat_histoire"]{--jeu:#C08A2E}
[data-f="cat_autres"]  {--jeu:#8B8CFF}
/* Sur fond sombre les teintes doivent remonter, sinon elles s'eteignent. */
body[data-univers="station"] [data-f="cat_mots"],
body[data-univers="labo"] [data-f="cat_mots"]    {--jeu:#A99BFF}
body[data-univers="station"] [data-f="cat_nombres"],
body[data-univers="labo"] [data-f="cat_nombres"] {--jeu:#4FD5C4}
body[data-univers="station"] [data-f="cat_logique"],
body[data-univers="labo"] [data-f="cat_logique"] {--jeu:#FFA362}
body[data-univers="station"] [data-f="cat_monde"],
body[data-univers="labo"] [data-f="cat_monde"]   {--jeu:#6FB6FF}
body[data-univers="station"] [data-f="cat_histoire"],
body[data-univers="labo"] [data-f="cat_histoire"]{--jeu:#E3B457}

/* La pastille : le dessin ne flotte plus seul au milieu du vide. */
.defile.cats .grille.menu .tuile .pic,
.familles .fam .fam-pic{
  display:grid;place-items:center;color:var(--jeu,var(--vif));
  background:color-mix(in srgb, var(--jeu,var(--vif)) 15%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--jeu,var(--vif)) 26%, transparent);
  width:1.9em;height:1.9em;border-radius:.62em;flex:none}
.defile.cats .grille.menu .tuile .ic,
.familles .fam .ic{width:1em;height:1em;color:var(--jeu,var(--vif))}
/* Le filet du bas prend la teinte de la famille, et se voit toujours un peu. */
.defile.cats .grille.menu .tuile::after{background:var(--jeu,var(--vif));opacity:.28}
.defile.cats .grille.menu .tuile:hover::after{opacity:1}
.defile.cats .grille.menu .tuile:hover{border-color:color-mix(in srgb,var(--jeu,var(--vif)) 55%,transparent)}
.puce[data-f] .ic{color:var(--jeu,var(--vif))}
.puce.active[data-f] .ic{color:currentColor}

/* Jardin : pastille bien ronde, large, et la tuile respire. */
body[data-univers="jardin"] .defile.cats .grille.menu .tuile .pic,
body[data-univers="jardin"] .familles .fam .fam-pic{border-radius:50%;width:1.85em;height:1.85em}
/* Atelier : un carre aux angles doux. */
body[data-univers="atelier"] .defile.cats .grille.menu .tuile .pic,
body[data-univers="atelier"] .familles .fam .fam-pic{border-radius:.42em}
/* Station : plus serre, la pastille se fait discrete. */
body[data-univers="station"] .defile.cats .grille.menu .tuile .pic,
body[data-univers="station"] .familles .fam .fam-pic{border-radius:.34em;width:1.7em;height:1.7em;
  background:color-mix(in srgb, var(--jeu,var(--vif)) 13%, transparent)}
/* Labo : pas de pastille du tout — le dessin seul, comme un instrument. */
body[data-univers="labo"] .defile.cats .grille.menu .tuile .pic,
body[data-univers="labo"] .familles .fam .fam-pic{background:none;box-shadow:none;
  width:1.25em;height:1.25em;border-radius:0}

/* Reglage fin : la pastille laisse de l'air dans la tuile, et recoit un
   degrade tres leger pour ne pas etre un aplat mort. */
.defile.cats .grille.menu .tuile .pic,
.familles .fam .fam-pic{
  background-image:linear-gradient(160deg,
    color-mix(in srgb, var(--jeu,var(--vif)) 22%, transparent),
    color-mix(in srgb, var(--jeu,var(--vif)) 9%, transparent));
  background-color:transparent}
body[data-univers="jardin"] .defile.cats .grille.menu .tuile .pic{width:1.58em;height:1.58em}
body[data-univers="jardin"] .defile.cats .grille.menu .tuile .pic{font-size:clamp(30px,6cqw,46px)}
body[data-univers="jardin"] .familles .fam .fam-pic{width:1.5em;height:1.5em}
body[data-univers="atelier"] .defile.cats .grille.menu .tuile .pic{width:1.62em;height:1.62em}
body[data-univers="labo"] .defile.cats .grille.menu .tuile .pic,
body[data-univers="labo"] .familles .fam .fam-pic{background-image:none}

/* Le nom doit tenir sur deux lignes dans un carre : la pastille se resserre
   aux ages ou les noms sont longs. */
.defile.cats .grille.menu .tuile .mot{line-height:1.12}
body[data-univers="station"] .defile.cats .grille.menu .tuile .pic{width:1.45em;height:1.45em;
  font-size:clamp(22px,4.2cqw,32px)}
body[data-univers="labo"] .defile.cats .grille.menu .tuile .pic{font-size:clamp(20px,3.8cqw,28px)}
body[data-univers="atelier"] .defile.cats .grille.menu .tuile .pic{font-size:clamp(26px,5.2cqw,40px)}

/* ---------- 13/10/2026 — Taille du dessin dans le carre -------------------
   Les regles par tranche d'age etaient calees sur une tuile large ; dans un
   carre de telephone le dessin tombait a 20 px et se perdait. Ce bloc vient
   en dernier : il fixe la taille d'apres la LARGEUR de la tuile, pas d'apres
   une valeur absolue. Sans pastille (Labo), le dessin est plus grand : il n'a
   pas de rond pour le porter. */
body[data-univers="jardin"] .defile.cats .grille.menu .tuile .pic{font-size:clamp(34px,7.5cqw,56px)}
body[data-univers="atelier"] .defile.cats .grille.menu .tuile .pic{font-size:clamp(30px,6.6cqw,48px)}
body[data-univers="station"] .defile.cats .grille.menu .tuile .pic{font-size:clamp(28px,5.6cqw,42px)}
body[data-univers="labo"] .defile.cats .grille.menu .tuile .pic{font-size:clamp(30px,5.6cqw,44px)}
@container ec (max-width:560px){
  body[data-univers="jardin"] .defile.cats .grille.menu .tuile .pic{font-size:19cqw}
  body[data-univers="atelier"] .defile.cats .grille.menu .tuile .pic{font-size:17.5cqw}
  body[data-univers="station"] .defile.cats .grille.menu .tuile .pic{font-size:13cqw}
  body[data-univers="labo"] .defile.cats .grille.menu .tuile .pic{font-size:15cqw}
  body[data-univers] .familles .fam-pic{font-size:17cqw}
}
@container ec (min-width:561px) and (max-width:900px){
  body[data-univers="jardin"] .defile.cats .grille.menu .tuile .pic{font-size:12cqw}
  body[data-univers="atelier"] .defile.cats .grille.menu .tuile .pic{font-size:11cqw}
  body[data-univers="station"] .defile.cats .grille.menu .tuile .pic{font-size:8.5cqw}
  body[data-univers="labo"] .defile.cats .grille.menu .tuile .pic{font-size:9.5cqw}
}
@media (orientation:landscape) and (max-height:540px){
  body[data-univers] .defile.cats .grille.menu .tuile .pic,
  body[data-univers] .familles .fam-pic{font-size:min(8cqw,16vh)!important}
}

/* ---------- 13/10/2026 — Tous les jeux sur une page, par famille ---------
   Plus de barre a pousser sur le cote : sur telephone les pastilles de
   famille disparaissent et c'est le titre de chaque bande, colle en haut
   pendant qu'on descend, qui dit ou l'on est. Un seul geste : descendre. */
.defile.cats .bande{display:block;margin:0 0 clamp(14px,2.4cqw,26px)}
.defile.cats .bande:last-child{margin-bottom:4px}
.cat-titre{position:sticky;top:0;z-index:3;margin:0 0 clamp(8px,1.4cqw,14px);
  display:flex;align-items:center;gap:.55em;
  font-size:clamp(14px,2.9cqw,19px);font-weight:var(--poids);letter-spacing:.005em;
  padding:.5em .2em .45em;color:var(--jeu,var(--encre));
  background:linear-gradient(180deg,var(--ciel) 72%,transparent);
  backdrop-filter:saturate(1.1) blur(2px)}
.ct-ic{display:grid;place-items:center;font-size:1.25em;flex:none}
.ct-ic .ic{width:1em;height:1em;color:var(--jeu,var(--vif))}
.ct-nom{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-nb{flex:none;font-size:.78em;font-weight:700;line-height:1;padding:.32em .62em;
  border-radius:999px;color:var(--jeu,var(--vif));
  background:color-mix(in srgb,var(--jeu,var(--vif)) 16%,transparent)}
/* Telephone : les pastilles de famille s'effacent, il n'y a plus rien a
   pousser sur le cote. Le titre colle en haut suffit a se reperer. */
@container ec (max-width:720px){
  .puces{display:none!important}
  .cat-titre{font-size:clamp(14px,3.6cqw,20px);padding-top:.35em}
}
/* Grand ecran : les pastilles tiennent toutes sans defiler ; elles ne
   changent plus de page, elles amenent la bonne bande sous les yeux. */
@container ec (min-width:721px){
  .puces{flex-wrap:wrap;overflow:visible}
}

/* ---------- 13/10/2026 — Ce que montrent les quinze nouveaux jeux --------
   Rien d'image a charger : tout est trace. Les couleurs viennent de l'univers,
   donc un meme jeu se lit aussi bien au Jardin qu'au Labo, de jour comme de
   nuit. */
/* A peu pres combien : un nuage de points qu'on estime, qu'on ne compte pas. */
.nuage{width:min(52cqw,42cqh);height:min(52cqw,42cqh)}
.nuage circle{fill:var(--vif);stroke:none}
/* Le plus court chemin */
.labyrinthe{width:min(48cqw,38cqh);height:min(48cqw,38cqh)}
.labyrinthe .lab-fond{fill:color-mix(in srgb,var(--encre) 5%,transparent);stroke:none}
.labyrinthe .lab-mur{fill:color-mix(in srgb,var(--encre) 30%,transparent);stroke:none}
.labyrinthe .lab-trait{fill:none;stroke:color-mix(in srgb,var(--encre) 20%,transparent);
  stroke-width:1;vector-effect:non-scaling-stroke}
.labyrinthe .lab-cadre{fill:none;stroke:color-mix(in srgb,var(--encre) 48%,transparent);
  stroke-width:2;vector-effect:non-scaling-stroke}
.labyrinthe .lab-depart{fill:var(--vif);stroke:none}
.labyrinthe .lab-sortie{fill:none;stroke:#35B06A;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.fleches{font-size:min(7cqw,5cqh);letter-spacing:.16em;line-height:1.1;
  font-variant-emoji:text;white-space:nowrap}
.reponse .fleches{font-size:min(9cqw,7cqh)}
/* La balance */
.balance-jeu{display:flex;flex-direction:column;align-items:center;gap:1.4cqw;
  font-size:min(7cqw,6cqh);font-variant-numeric:tabular-nums}
.bl-l{display:flex;align-items:center;gap:1.2cqw}
.bl-l b{font-weight:var(--poids);opacity:.65;font-size:.82em}
.bl-l i{font-style:normal;font-weight:var(--poids)}
.bl-f{width:1em;height:1em;fill:var(--vif);stroke:none;display:block}
.bl-l:nth-child(2) .bl-f,.bl-l:nth-child(3) .bl-f{opacity:.9}
/* Les fractions a voir */
.fraction{width:min(62cqw,34cqh);height:min(26cqw,18cqh)}
.fraction .fr-c{fill:none;stroke:color-mix(in srgb,var(--encre) 34%,transparent);stroke-width:1;
  vector-effect:non-scaling-stroke}
.fraction .fr-c.plein{fill:var(--vif);fill-opacity:.82}
.fraction .fr-cadre{fill:none;stroke:var(--encre);stroke-width:2;vector-effect:non-scaling-stroke;opacity:.55}
/* La suite en images */
.suite-img{display:flex;align-items:center;justify-content:center;gap:1.6cqw;flex-wrap:nowrap}
.fig{width:min(13cqw,11cqh);height:min(13cqw,11cqh)}
.fig polygon,.fig circle,.fig rect{fill:var(--vif);stroke:none}
.sui-q{font-size:min(11cqw,9cqh);font-weight:var(--poids);opacity:.5}
.reponse .fig{width:min(22cqw,26cqh);height:min(22cqw,26cqh)}

/* Le bandeau de mise a jour : visible, jamais alarmant, et il ne pousse pas
   le reste de la page — il prend la place qu'il lui faut, en haut. */
.maj-bandeau{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.6cqw,14px);
  flex-wrap:wrap;margin:0 0 clamp(8px,1.6cqw,16px);padding:clamp(9px,1.6cqw,14px) clamp(12px,2cqw,18px);
  border-radius:clamp(12px,2cqw,18px);background:color-mix(in srgb,var(--vif) 13%,var(--carte));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--vif) 32%,transparent);flex:none}
.maj-bandeau .mb-txt{font-size:clamp(13px,2.9cqw,17px);font-weight:var(--poids);text-align:center}
.maj-bandeau .mb-btn{padding:.5em 1.1em;font-size:clamp(13px,2.8cqw,16px);min-height:0}
@media (prefers-reduced-motion:no-preference){
  .maj-bandeau{animation:mb-entree .35s cubic-bezier(.2,.7,.3,1) both}
}
@keyframes mb-entree{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Les crédits des enregistrements : une liste sobre, lisible, pas un pavé. */
.credits-sons{margin:.4em 0 0;padding-inline-start:1.1em;line-height:1.7;font-size:.95em}
.credits-sons li{margin:.1em 0}
.credits-sons a{color:inherit}

/* ---------- 13/10/2026 — Le dessin prend un pourcentage de la tuile --------
   La taille du dessin etait donnee en cqw : sur une tuile carree, un nom qui
   tient sur deux lignes n'avait plus la place et se faisait couper en deux.
   La pastille occupe maintenant une PART de la tuile, le nom garde sa place
   quoi qu'il arrive, et le dessin remplit la pastille. */
.defile.cats .grille.menu .tuile{justify-content:center;gap:.45em}
.defile.cats .grille.menu .tuile .pic{
  width:52%;height:52%;flex:0 0 auto;font-size:0;
  display:grid;place-items:center}
.defile.cats .grille.menu .tuile .pic .ic{width:68%;height:68%}
.defile.cats .grille.menu .tuile .mot{
  flex:0 0 auto;font-size:clamp(11px,2.6cqw,15px);line-height:1.15;
  max-height:2.3em;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
body[data-univers="jardin"] .defile.cats .grille.menu .tuile .pic{width:54%;height:54%}
body[data-univers="atelier"] .defile.cats .grille.menu .tuile .pic{width:50%;height:50%}
body[data-univers="station"] .defile.cats .grille.menu .tuile .pic{width:44%;height:44%}
/* Labo : pas de pastille, le dessin seul — il peut donc etre plus grand. */
body[data-univers="labo"] .defile.cats .grille.menu .tuile .pic{width:42%;height:42%}
body[data-univers="labo"] .defile.cats .grille.menu .tuile .pic .ic{width:100%;height:100%}
body[data-univers="jardin"] .defile.cats .grille.menu .tuile .mot{font-weight:800}
@container ec (max-width:560px){
  .defile.cats .grille.menu .tuile .mot{font-size:3.5cqw}
  body[data-univers="station"] .defile.cats .grille.menu .tuile .mot,
  body[data-univers="labo"] .defile.cats .grille.menu .tuile .mot{font-size:2.8cqw}
}
/* Les familles gardent la meme regle, au cas ou l'ecran reapparaisse. */
.familles .fam .fam-pic{width:46%;height:46%;font-size:0;display:grid;place-items:center}
.familles .fam .fam-pic .ic{width:70%;height:70%}

/* Deux lignes doivent tenir en entier, arrondis compris : on laisse un demi
   pixel de marge plutot que de couper une descendante. */
.defile.cats .grille.menu .tuile .mot{max-height:2.55em;line-height:1.2}
@container ec (min-width:561px){
  .defile.cats .grille.menu .tuile .mot{font-size:clamp(10.5px,2.2cqw,14px)}
  body[data-univers="labo"] .defile.cats .grille.menu .tuile .mot,
  body[data-univers="station"] .defile.cats .grille.menu .tuile .mot{font-size:clamp(10px,1.9cqw,13px)}
}

/* ---------- 13/10/2026 — Le petit drapeau « signaler une erreur » ---------
   Dans la barre du jeu, discret : il ne doit pas attirer l'enfant plus que le
   jeu lui-meme, mais il doit se trouver du premier coup d'oeil quand on en a
   besoin. */
.rond.drapeau{opacity:.55}
.rond.drapeau:hover,.rond.drapeau:focus-visible{opacity:1}
.rond.drapeau .ic{width:1em;height:1em;color:currentColor;--ic-ep:2}
.sig-boite h2{margin:0;font-size:clamp(16px,3.6cqw,21px)}
.sig-jeu{margin:0;font-size:clamp(13px,3cqw,16px);opacity:.8}
.sig-l{display:block;font-size:clamp(12px,2.8cqw,14px);font-weight:600;opacity:.8;margin:.3em 0 .2em}
.sig-boite textarea,.sig-boite input{width:100%;font:inherit;font-size:clamp(14px,3cqw,16px);
  padding:.6em .7em;border-radius:12px;border:1px solid var(--filet);
  background:var(--fond);color:inherit;resize:vertical}
.sig-boite textarea:focus,.sig-boite input:focus{outline:2px solid var(--vif);outline-offset:1px}
.sig-etat{margin:.2em 0 0;min-height:1.2em;font-size:clamp(12px,2.8cqw,14px);color:var(--vif)}

/* ---- 13/10/2026 : le pave de code. Avant, il heritait de la grille des jeux
   (flex:1, align-content:stretch) : les touches s'etiraient sur toute la hauteur
   libre, le 0 et la correction debordaient sous le pli, et sur un grand ecran
   le clavier occupait la page entiere. Ici il a sa propre mise en page : des
   touches carrees, une largeur plafonnee, centree, et une quatrieme rangee qui
   tient toujours dans l'ecran. ---- */
.grille.clavier{flex:0 0 auto;align-content:center;justify-content:center;align-self:center;
  width:min(100%,300px);max-width:min(100%,300px);margin:2cqw auto 0;gap:min(2.6cqw,12px);
  grid-template-columns:repeat(3,1fr)!important;grid-template-rows:repeat(4,auto)!important}
.grille.clavier .tuile{aspect-ratio:1/1;min-height:52px;height:auto;border-radius:18px;
  padding:0;gap:0;font-size:clamp(22px,8cqw,30px);line-height:1}
.grille.clavier .tuile .enonce{font-size:inherit;line-height:1;margin:0;font-weight:800}
.grille.clavier span:empty{aspect-ratio:1/1}
@media (max-height:700px){
  .grille.clavier{width:min(100%,250px);max-width:min(100%,250px);gap:8px}
  .grille.clavier .tuile{min-height:44px;font-size:clamp(18px,6cqw,24px)}
}
/* Telephone couche : la hauteur manque pour empiler titre + pastilles + quatre
   rangees. On pose le pave a cote des pastilles plutot qu'en dessous, et la
   page redevient entiere sans ascenseur. */
@media (orientation:landscape) and (max-height:560px){
  #ecran:has(.grille.clavier){display:grid;grid-template:auto auto/1fr 1fr;
    align-content:start;column-gap:3cqw;row-gap:0}
  #ecran:has(.grille.clavier) .barre{grid-column:1/-1}
  #ecran:has(.grille.clavier) .consigne{grid-column:1;margin:0;font-size:clamp(13px,2.4cqw,17px)}
  #ecran:has(.grille.clavier) .pave,
  #ecran:has(.grille.clavier) .cases,
  #ecran:has(.grille.clavier) .pave-msg{grid-column:1}
  .grille.clavier{grid-column:2;grid-row:2/4;align-self:start;margin-top:0;
    width:min(100%,190px);max-width:min(100%,190px);gap:5px}
  .grille.clavier .tuile{min-height:34px;border-radius:11px;font-size:clamp(15px,4cqw,20px)}
}
.pave{margin-bottom:1cqw}
/* Le bloc code est ramasse au milieu : avant, la consigne restait collee en
   haut et les touches tombaient tout en bas, avec un grand vide entre les deux. */
@media (orientation:portrait),(min-height:561px){
  #ecran:has(.grille.clavier){justify-content:center}
  #ecran:has(.grille.clavier) .barre{position:absolute;top:0;left:0;right:0;
    padding:inherit;margin:0}
  #ecran:has(.grille.clavier) > .consigne{margin-top:0}
}
/* Les pastilles du code ne s'etirent jamais sur toute la largeur : six cases
   larges comme des touches, centrees, sinon le code se lit de loin. */
.cases{display:flex;gap:min(2.4cqw,10px);justify-content:center;flex-wrap:nowrap}
.cases .case{width:min(13cqw,42px);height:min(15cqw,52px);flex:0 0 auto}

/* 13/10/2026 : le pave n'a plus de touches dessinees — le clavier de l'appareil
   suffit. Restent les pastilles, le champ invisible qui les remplit, et un seul
   bouton sous le champ. Les regles de .grille.clavier ci-dessus ne servent plus
   a rien mais ne genent personne : on les laisse pour les pages en cache. */
.pave-pieds{display:flex;justify-content:center;margin-top:3cqw}
.pave-pieds .bouton{width:auto;min-width:min(60%,260px);padding-inline:5cqw}
/* Sans grille de touches, plus rien n'occupait la hauteur libre et le bloc
   tombait tout en bas de l'ecran. On le remonte au centre, la barre du haut
   gardant sa place. */
#ecran:has(.pave){justify-content:flex-start}
#ecran:has(.pave) .barre{flex:0 0 auto;margin-bottom:auto}
#ecran:has(.pave) .consigne{margin-top:auto;text-align:center}
#ecran:has(.pave) .pave-msg{margin-bottom:auto;min-height:1.4em;text-align:center}
.pave{display:block;margin:3cqw auto 1cqw;max-width:min(100%,340px);cursor:text}
.pave .cases{display:flex;gap:min(2.4cqw,10px);justify-content:center;flex-wrap:nowrap}
.pave .case{width:min(13cqw,42px);height:min(15cqw,52px);flex:0 0 auto;border-radius:14px;
  background:var(--carte);display:grid;place-items:center;font-size:clamp(18px,5cqw,26px);
  box-shadow:inset 0 0 0 2px rgba(128,128,128,.18)}
.pave .case.actif{box-shadow:inset 0 0 0 3px var(--vif)}
.pave-champ{position:absolute;opacity:0;width:1px;height:1px;padding:0;border:0;pointer-events:none}

/* 13/10/2026 : le nom de la voix et le bouton qui en propose une autre, sous
   l'interrupteur de voix. Ne s'affiche que si l'appareil a vraiment le choix. */
.voix-choix{display:flex;align-items:center;justify-content:space-between;
  gap:3cqw;flex-wrap:wrap;margin-top:2.4cqw}
.voix-choix #voix-nom{flex:1 1 auto;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.voix-choix .bouton{flex:0 0 auto;width:auto;padding-inline:4cqw;margin:0}

/* ---- 14/10/2026 — Barre de jeu sur téléphone ---------------------------
   Avec le drapeau « signaler une erreur », la barre portait cinq boutons
   ronds, la mascotte et le titre : sur 390 px le drapeau sortait de l'écran
   (jusqu'à 441 px sur « Les soustractions »), la page défilait de côté et le
   signalement était introuvable. Sur petit écran la mascotte s'efface, les
   boutons passent à 40 px et le titre a le droit de se replier. ----------- */
.barre .titre{min-width:0;overflow-wrap:anywhere}
@media (max-width:440px){
  .barre{gap:6px}
  .barre > .mascotte{display:none}
  .barre .rond{width:40px;height:40px;min-width:40px;min-height:40px;font-size:17px}
  .barre .titre{font-size:clamp(15px,4.4vw,19px)}
}

/* ---- 14/10/2026 — Réponse fausse ------------------------------------------
   La tuile se contentait de pâlir : sans voix sur l'appareil, rien ne disait
   « non ». Un bref mouvement de tête, puis elle pâlit comme avant. ---------- */
@keyframes secoue{0%,100%{translate:0}20%{translate:-7px}40%{translate:6px}60%{translate:-4px}80%{translate:3px}}
.tuile.faux{animation:secoue .38s ease-out;box-shadow:0 0 0 2px #E2563B}
.consigne.encore{font-weight:700;color:#C2410C;text-align:center;margin:.4em 0 0}
@media (prefers-reduced-motion:reduce){.tuile.faux{animation:none}}
:root[data-anim="non"] .tuile.faux{animation:none}

/* ---- 15/10/2026 — Bilan de fin de séance --------------------------------
   Pictogrammes et nombres seulement : lisible à cinq ans, sans traduction. */
.bilan{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:14px 0 4px}
.bl-case{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:64px;
  padding:10px 12px;border-radius:16px;background:var(--carte);
  box-shadow:0 0 0 1px var(--filet-fort, rgba(0,0,0,.08));
  font-weight:800;font-size:clamp(18px,5cqw,26px);font-variant-numeric:tabular-nums}
.bl-case b{font-size:clamp(20px,6cqw,30px);line-height:1}

/* ---- 15/10/2026 — Niveaux, défi du jour, jardin enrichi, accessoires ---- */
.tuile .niv{position:absolute;bottom:6px;inset-inline-end:8px;font-size:9px;letter-spacing:2px;opacity:.55;line-height:1}
.tuile{position:relative}
.defi{display:flex;align-items:center;gap:8px;margin:2px 0 8px;padding:8px 12px;border-radius:14px;
  background:var(--carte);box-shadow:0 0 0 1px var(--filet-fort, rgba(0,0,0,.08));font-weight:800;flex:none}
.defi .df-ic{font-size:18px;line-height:1}
.defi .df-barre{flex:1;height:8px;border-radius:99px;background:rgba(127,127,127,.2);overflow:hidden}
.defi .df-barre b{display:block;height:100%;border-radius:99px;background:var(--vif, #35B06A);transition:width .4s}
.defi .df-nb{font-variant-numeric:tabular-nums;min-width:3ch;text-align:end}
.defi.gagne{box-shadow:0 0 0 2px #F2B01E}
.semaine{display:flex;justify-content:center;gap:6px;margin:14px 0 6px}
.sm-j{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:34px;padding:6px 4px;border-radius:12px}
.sm-j i{font-style:normal;font-size:12px;opacity:.6;text-transform:uppercase}
.sm-j b{font-size:18px;line-height:1.1}
.sm-j.auj{background:var(--carte);box-shadow:0 0 0 1px var(--filet-fort, rgba(0,0,0,.1))}
.album{margin:10px auto 0;max-width:560px;width:100%;display:grid;gap:6px}
.al-titre{font-size:16px;margin:4px 0;text-align:center}
.al-rang{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;background:var(--carte)}
.al-cat{font-size:18px;flex:none;display:inline-flex}
.al-jeux{flex:1;display:flex;flex-wrap:wrap;gap:4px}
.al-j{display:inline-flex;font-size:16px;opacity:.28;filter:grayscale(1)}
.al-j.eu{opacity:1;filter:none;color:#F2B01E}
.al-nb{font-weight:800;font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.classe{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;margin:12px auto 0;
  padding:8px 14px;border-radius:14px;background:var(--carte);font-size:14px}
.classe .cl-ic{font-size:20px}
.grille-acc{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.tuile.acc{min-height:64px;flex-direction:column;gap:2px}
.tuile.acc .pic{font-size:28px}
.tuile.acc[disabled]{opacity:.45}
.acc-seuil{font-size:10px;font-weight:700;white-space:nowrap}
.mascotte{position:relative;display:inline-block}
.mascotte::after{content:var(--acc, none);position:absolute;top:-.42em;inset-inline-end:-.28em;font-size:.55em;line-height:1;pointer-events:none}

/* 15/10/2026 : jeu dont le temps du jour est epuise (reglage adulte) */
.tuile.epuise{opacity:.45;filter:grayscale(.7)}
.tuile .sablier{position:absolute;top:4px;left:6px;font-size:.9em}

/* 15/10/2026 : Salle des defis (11-15 ans) */
.mj-salle{display:grid;gap:14px;align-content:start;overflow:auto}
.mj-jauge{background:#1B1F44;color:#EEF0FF;border-radius:16px;padding:12px 14px;display:grid;gap:8px}
.mj-jh{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.mj-jh span{color:#A9AEDB}
.mj-crans{display:grid;grid-template-columns:repeat(20,1fr);gap:3px}
.mj-crans i{height:8px;border-radius:2px;background:#2A2F63}
.mj-crans i.ok{background:#3FD6C6}
.mj-aide{margin:0;color:#A9AEDB;font-size:.9em}
.mj-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.mj-carte{position:relative;display:grid;justify-items:center;gap:4px;padding:14px 8px;border-radius:16px;border:1px solid #343A72;background:#1B1F44;color:#EEF0FF;font:inherit;cursor:pointer;text-align:center}
.mj-carte .mj-ico{font-size:2em;line-height:1}
.mj-carte .mj-et{font-size:.8em;color:#A9AEDB;min-height:1.2em}
.mj-carte.ferme{opacity:.5;cursor:default;background:repeating-linear-gradient(135deg,#1B1F44,#1B1F44 8px,#232858 8px,#232858 16px)}
.mj-carte.ferme .mj-ico{filter:grayscale(1)}
.mj-carte.neuf::after{content:"\2728";position:absolute;top:6px;right:8px}
.mj-jeu{display:grid;gap:10px;justify-items:center;align-content:start;overflow:auto}
.mj-score{display:flex;gap:16px;font-variant-numeric:tabular-nums}
.mj-zone{position:relative;width:min(440px,100%);aspect-ratio:1;background:#1B1F44;border-radius:16px;overflow:hidden;touch-action:none;color:#EEF0FF}
.mj-zone canvas{width:100%;height:100%;display:block}
.mj-regle{margin:0;text-align:center;max-width:440px;opacity:.85}
.mj-fin{position:absolute;inset:0;display:grid;place-items:center;background:rgba(18,21,48,.88);z-index:2}
.mj-fin[hidden]{display:none!important}
.mj-fin div{display:grid;gap:12px;justify-items:center}
.mj-fin strong{font-size:2em}
.mj-fleches{display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(2,46px);gap:6px}
.mj-fleches[hidden]{display:none!important}
.mj-fleches button{border:1px solid #343A72;background:#2A2F63;color:#EEF0FF;border-radius:10px;font-size:20px}
.mj-2048{position:absolute;inset:10px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mj-2048 div{border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:clamp(16px,6vw,30px)}
.mj-pads{position:absolute;inset:12px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mj-pads button{border:0;border-radius:18px;opacity:.45;transition:opacity .1s,transform .1s}
.mj-pads button.allume{opacity:1;transform:scale(.97)}
.mj-code{position:absolute;inset:10px;display:grid;grid-template-rows:1fr auto;gap:8px}
.mj-essais{display:grid;gap:5px;align-content:start;overflow:auto}
.mj-essai{display:flex;gap:6px;align-items:center}
.mj-pion{width:26px;height:26px;border-radius:50%;border:2px solid #343A72}
.mj-ind{margin-inline-start:8px;font-size:.85em;color:#A9AEDB}
.mj-palette{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.mj-palette button{width:38px;height:38px;border-radius:50%;border:2px solid #343A72;color:#EEF0FF}
.mj-palette .mj-eff{background:#2A2F63}
.mj-rot{position:absolute;inset:10px;display:grid;grid-template-rows:1fr auto;gap:10px}
.mj-modele{display:grid;place-items:center;position:relative}
.mj-modele svg{width:45%;height:auto}
.mj-modele span{position:absolute;top:0;right:4px;color:#A9AEDB;font-size:.85em}
.mj-choix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mj-choix button{min-width:0;background:#2A2F63;border:2px solid #343A72;border-radius:12px;padding:8px;aspect-ratio:1;display:grid;place-items:center}
.mj-choix button svg{width:100%;height:100%}
.mj-choix button.juste{border-color:#3FD6C6}
.mj-choix button.faux{border-color:#FF6B6B}
.mj-tours{position:absolute;inset:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mj-tige{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;padding-bottom:10px;background:#232858;border:2px solid transparent;border-radius:12px}
.mj-tige.pris{border-color:#FFB547}
.mj-tige i{position:absolute;bottom:10px;top:20%;width:6px;border-radius:3px;background:#4A5196;left:calc(50% - 3px)}
.mj-tige b{position:relative;z-index:1;height:16px;border-radius:6px;display:block}
.mj-coups{position:absolute;top:6px;left:10px;color:#A9AEDB;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.mj-pads button{transition:none}}
.mj-pendu{position:absolute;inset:10px;display:grid;grid-template-rows:auto auto 1fr;gap:10px}
.mj-ph{display:flex;justify-content:space-between;align-items:center;font-size:1.3em}
.mj-vies{color:#FF6B6B;letter-spacing:2px}
.mj-vies i{font-style:normal;color:#343A72}
.mj-mot{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;min-height:52px}
.mj-mot span{min-width:30px;padding:4px 2px;border-bottom:3px solid #A9AEDB;text-align:center;font-size:1.6em;font-weight:700;line-height:1.2}
.mj-mot.trouve span{border-color:#3FD6C6;color:#3FD6C6}
.mj-mot.rate span{border-color:#FF6B6B}
.mj-clavier{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:5px;overflow:auto}
.mj-clavier button{min-width:34px;height:38px;padding:0 6px;border-radius:9px;border:1px solid #343A72;background:#2A2F63;color:#EEF0FF;font:inherit;font-weight:700}
.mj-clavier button.juste{background:#3FD6C6;color:#0E1830}
.mj-clavier button.faux{opacity:.35}

/* 17/10/2026 : reponses longues en liste sur telephone (une par ligne) */
.grille.liste[data-c]{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:minmax(48px,84px);align-content:center}
.grille.liste:not(.menu) .tuile{min-height:48px;max-height:none}
.grille.liste[data-c] .tuile{grid-column:auto}
.grille.liste .tuile.reponse{flex-direction:row;justify-content:center;padding:6px 14px;text-align:center}
.grille.liste .tuile.reponse .enonce,.grille.liste .tuile.reponse .mot{font-size:clamp(17px,6vw,28px);line-height:1.2}
/* le texte d'une reponse est centre dans sa tuile (la marge auto de .enonce,
   prevue pour la question, le poussait en bas) et un mot n'est jamais coupe :
   s'il est trop long, le script reduit la taille du texte. */
.tuile.reponse .enonce,.tuile.reponse .mot,.tuile.reponse .fleches{margin:0;max-width:100%;word-break:normal;overflow-wrap:normal;hyphens:manual}
/* 18/10/2026 : fenetre de deblocage d'un mini-jeu (11-15 ans) */
.mj-annonce{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:rgba(10,12,32,.72);animation:mjan-f .25s ease}
.mj-an-boite{width:min(420px,100%);background:#1B1F44;color:#EEF0FF;border:2px solid #FFB547;border-radius:22px;padding:22px 18px;text-align:center;display:grid;gap:8px;box-shadow:0 18px 50px rgba(0,0,0,.45);animation:mjan-b .45s cubic-bezier(.2,1.4,.4,1)}
.mj-an-ico{font-size:64px;line-height:1}
.mj-an-boite h2{margin:0;font-size:22px;color:#FFB547}
.mj-an-nom{margin:0;font-size:20px;font-weight:800}
.mj-an-boite p{margin:0;font-size:15px;line-height:1.35}
.mj-an-bt{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.mj-an-bt button{font:inherit;font-weight:700;font-size:16px;padding:12px 18px;border-radius:14px;border:0;cursor:pointer;min-height:48px}
.mj-an-go{background:#FFB547;color:#1B1F44}
.mj-an-ok{background:#2A2F63;color:#EEF0FF}
@keyframes mjan-f{from{opacity:0}}
@keyframes mjan-b{from{transform:scale(.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.mj-annonce,.mj-an-boite{animation:none}}

/* 26/10/2026 : choix avec / sans accent dans « Trace les lettres » */
.trace-mode{display:flex;justify-content:center;gap:10px;margin:2px 0 8px}
.trace-mode .puce{min-height:44px;font-size:1.15rem;font-weight:700;padding:0 18px}