/* Quiz CP : look « soleil » (fond orange, panneaux crème, encre chocolat). Même jeu de jetons que la maquette. */
@font-face{font-family:'Baloo 2';src:url(../fonts/baloo2.woff2) format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:'Nunito';src:url(../fonts/nunito.woff2) format('woff2');font-weight:200 1000;font-display:swap}
:root{
  --salon:#2A1300; --cadre:#3D1C00;
  --nuit:#FF9A2E; --nuit2:#FFF0CC; --nuit3:#FFD27A; --trait:#C96A12;
  --creme:#3D1C00; --doux:#5C2E00; --doux2:#4A2400; --eteint:#B98447;
  --blanc:#FFFDF6; --accent:#B4470A; --rate:#B3261E; --ok:#1B8A55;
  --jaune:#FFE040; --jaune-i:#3A2600; --rouge:#E0393E; --rouge-i:#FFFFFF;
  --vert:#3DD68C; --vert-i:#06341F; --bleu:#5C9DFF; --bleu-i:#071F45;
  --display:'Baloo 2', ui-rounded, 'Arial Rounded MT Bold', system-ui, sans-serif;
  --body:'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--nuit);color:var(--creme);font-family:var(--body);-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:3px solid var(--creme);outline-offset:3px}
.d{font-family:var(--display);font-weight:800;line-height:1.05;margin:0;text-wrap:balance}
.mute{color:var(--doux)}
.pastille{border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;flex:none}
.puce{display:flex;align-items:center;gap:.8cqw;background:var(--nuit3);border-radius:999px}
.grille4{flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-height:0}
.tuile{border-radius:2.2cqw;display:flex;align-items:center;position:relative;min-width:0}
.tuile .mot{font-family:var(--display);font-weight:800;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tuile u{text-decoration-thickness:.12em;text-underline-offset:.14em}
.eteinte{background:var(--nuit2)!important;color:var(--eteint)!important}
.coche{margin-left:auto;border-radius:50%;background:var(--blanc);display:flex;align-items:center;justify-content:center;flex:none}
.zbtn{border:none;border-radius:7cqw;font-family:var(--display);font-weight:800}
.anneau circle{transition:stroke-dashoffset .25s linear}
@keyframes pop{0%{transform:scale(.85);opacity:.4}100%{transform:none;opacity:1}}
.pop{animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
.malus{background:var(--rate);color:#fff;border-radius:999px;padding:.15em .6em;font-weight:800;line-height:1.2}
@media (prefers-reduced-motion:reduce){.pop{animation:none}.anneau circle,.tel .tuile{transition:none}}

/* ---------- télé : un plateau 16:9 centré dans la fenêtre (onglet casté) ---------- */
body.page-tv{background:var(--salon);display:flex;align-items:center;justify-content:center;overflow:hidden}
.tv{container-type:inline-size;position:relative;width:min(100vw,177.78vh);aspect-ratio:16/9;background:var(--nuit);overflow:hidden}
.tv .ecran{position:absolute;inset:0;display:flex;flex-direction:column;padding:3cqw 4cqw;gap:1.8cqw}
.tv .son{position:absolute;top:1.4cqw;right:1.4cqw;width:3.6cqw;height:3.6cqw;border:none;border-radius:50%;background:var(--nuit2);display:flex;align-items:center;justify-content:center;z-index:2}
.tv .plein{position:absolute;bottom:1.4cqw;right:1.4cqw;border:none;border-radius:999px;background:var(--nuit2);color:var(--doux);font-weight:800;font-size:1.2cqw;padding:.5cqw 1.2cqw;z-index:2}

/* ---------- téléphone : la zapette occupe tout l'écran ---------- */
body.page-tel{background:var(--cadre);display:flex;justify-content:center}
.tel{container-type:inline-size;position:relative;width:min(100%,480px);height:100%;background:var(--nuit);overflow:hidden}
.tel .ecran{position:absolute;inset:0;display:flex;flex-direction:column;gap:4.5cqw;
  padding:calc(env(safe-area-inset-top,0px) + 6cqw) 5cqw calc(env(safe-area-inset-bottom,0px) + 6cqw)}
.tel .tuile{justify-content:center;border-radius:7cqw;border:2cqw solid transparent;transition:transform .12s}
.tel .tuile[aria-pressed="true"]{border-color:var(--creme);transform:scale(.95)}
.tel .tuile .coche{position:absolute;top:3cqw;right:3cqw;margin:0}
.tel .champ{height:15cqw;border-radius:5cqw;border:1cqw solid var(--trait);background:var(--nuit2);color:var(--creme);
  font-family:var(--display);font-weight:700;font-size:7cqw;padding:0 4cqw;width:100%}
.tel label.titre{font-size:4.6cqw;font-weight:800}
#form-rejoindre > *{flex-shrink:0}
.erreur{color:var(--rate);font-weight:800;font-size:4.4cqw;text-align:center}