/* 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","Nunito",-apple-system,"Segoe UI",system-ui,sans-serif;
  background:var(--fond);color:var(--encre);-webkit-text-size-adjust:100%;touch-action:manipulation}

/* --- Jardin 5-7 : rondeurs, dégradés doux, tout est bulle --- */
body[data-univers="jardin"]{
  --fond:#FFF4E3; --ciel:radial-gradient(120% 90% at 50% 0%,#FFE2B8 0%,#FFF4E3 60%);
  --encre:#3A2E24; --vif:#FF8A3D; --second:#45B9A6; --carte:#FFFFFF;
  --r:32%; --rp:7cqw; --poids:800; --ombre:0 1.1cqw 0 rgba(58,46,36,.14); --vif-fonce:#E86F1E; --lueur:0 0 0 .8cqw rgba(255,138,61,.22);
}
/* --- Atelier 8-10 : cartes nettes, couleurs franches, accents --- */
body[data-univers="atelier"]{
  --fond:#EDF4FF; --ciel:linear-gradient(170deg,#DCEBFF 0%,#EDF4FF 55%);
  --encre:#122032; --vif:#1E6FD9; --second:#F2B01E; --carte:#FFFFFF;
  --r:16%; --rp:4cqw; --poids:700; --ombre:0 .8cqw 0 rgba(18,32,50,.16); --vif-fonce:#1659AE; --lueur:0 0 0 .6cqw rgba(30,111,217,.22);
}
/* --- Station 11-13 : sombre, net, lueur froide. Aucune infantilisation --- */
body[data-univers="station"]{
  --fond:#10151C; --ciel:radial-gradient(130% 80% at 50% 0%,#1B2633 0%,#10151C 65%);
  --encre:#E9EFF7; --vif:#3ADFA8; --second:#6E8CFF; --carte:#1A2230;
  --r:8%; --rp:2.6cqw; --poids:600; --ombre:0 0 0 .18cqw rgba(255,255,255,.1), 0 .7cqw 1.6cqw rgba(0,0,0,.35); --vif-fonce:#1FA87C; --lueur:0 0 2.4cqw rgba(58,223,168,.4);
}

#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}

/* 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"] .chip[data-n="ok"]{color:#8CE9BC}
body[data-univers="station"] .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{font-size:min(6cqw,9cqh);line-height:1.25;padding:0 1cqw;word-break:break-word}

/* 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 */
@container ec (max-width: 560px){
  /* les tuiles occupent la hauteur disponible : jamais de grand vide sous la liste */
  .grille.menu{grid-template-columns:1fr!important;grid-template-rows:none!important;
    grid-auto-rows:minmax(17cqw,1fr);gap:2.4cqw;overflow:auto;align-content:stretch;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:row;justify-content:flex-start;gap:3.5cqw;
    padding:3cqw 4cqw;border-radius:6cqw;min-height:16cqw}
  .grille.menu .tuile:first-child{grid-column:auto!important}
  .grille.menu .pic{font-size:min(10cqw,9cqh);flex:none;width:12cqw;text-align:center}
  .grille.menu .mot{font-size:4.4cqw;text-align:start}
  .grille.menu .etat{margin-inline-start:auto}
  .phrase{font-size:5cqw}
}
/* 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}
}