/* Charte de l'imagier : vert Fuuta #1F5E4A, terre #C4622D, papier #FBF6EC, encre #1C2A24 */
:root{
  --vert:#1F5E4A; --vert-clair:#E3EFE9; --terre:#C4622D; --terre-clair:#F7E4D8;
  --papier:#FBF6EC; --carte:#FFFFFF; --encre:#1C2A24; --doux:#5A4A36; --trait:#E6DCCB;
  --ok:#2E7D4F; --ko:#B3412E;
}
@media (prefers-color-scheme: dark){
  :root{ --papier:#14201B; --carte:#1D2C26; --encre:#F1ECE2; --doux:#C9BBA6; --trait:#2E3F37;
         --vert-clair:#22392F; --terre-clair:#3A2A20; }
  h1{color:#8FD1B5} .adl{color:#8FD1B5} .theme .pul{color:#8FD1B5} .onglets button.actif{color:#8FD1B5}
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--papier);color:var(--encre);font-family:'Nunito',system-ui,sans-serif;
     display:flex;flex-direction:column;min-height:100dvh;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
.barre{display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
       background:var(--vert);color:#fff;position:sticky;top:0;z-index:5}
.titre-app{flex:1;min-width:0}
.marque{font-size:12px;opacity:.85;letter-spacing:.02em}
.nom{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:19px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.retour{background:rgba(255,255,255,.15);border:0;border-radius:12px;width:40px;height:40px;font-size:28px;line-height:1;color:#fff}
.adlam-bascule{background:rgba(255,255,255,.15);border:0;border-radius:12px;padding:8px 10px;color:#fff;
               font-family:'Noto Sans Adlam',sans-serif;font-size:15px}
.adlam-bascule[aria-pressed="false"]{opacity:.5;text-decoration:line-through}
main{flex:1;padding:16px 16px 96px;max-width:860px;width:100%;margin:0 auto;outline:none}
.onglets{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--carte);
         border-top:1px solid var(--trait);padding-bottom:env(safe-area-inset-bottom);z-index:5}
.onglets button{flex:1;border:0;background:none;padding:8px 2px 10px;font-size:12px;font-weight:700;color:var(--doux);
                display:flex;flex-direction:column;align-items:center;gap:2px}
.onglets button span{font-size:22px}
.onglets button.actif{color:var(--vert)}
h1{font-family:'Baloo 2',sans-serif;font-size:26px;margin:4px 0 4px;color:var(--vert)}
h2{font-family:'Baloo 2',sans-serif;font-size:20px;margin:18px 0 6px;color:var(--terre)}
.chapo{color:var(--doux);margin:0 0 14px}
.grille-themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.theme{background:var(--carte);border:2px solid var(--trait);border-radius:18px;padding:14px 12px;text-align:left;
       display:flex;flex-direction:column;gap:4px;min-height:132px}
.theme:active{transform:scale(.98)}
.theme .emoji{font-size:34px}
.theme .pul{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:20px;color:var(--vert);line-height:1.1}
.theme .fr{font-size:14px;color:var(--doux)}
.theme .etoiles{margin-top:auto;font-size:13px;color:var(--terre);letter-spacing:2px}
.grille-mots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.mot{background:var(--carte);border:2px solid var(--trait);border-radius:18px;padding:14px 10px;text-align:center;
     display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}
.mot.joue{border-color:var(--terre);background:var(--terre-clair)}
.mot .hp{position:absolute;top:8px;right:10px;font-size:16px;opacity:.6}
.lat{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:24px;line-height:1.15;color:var(--encre)}
.adl{font-family:'Noto Sans Adlam',sans-serif;font-size:21px;color:var(--vert);direction:rtl;unicode-bidi:isolate}
body.sans-adlam .adl{display:none}
.mot .fr{font-size:14px;color:var(--doux)}
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;
        background:var(--vert);color:#fff;font-weight:800;font-size:17px;padding:14px 18px;min-height:52px}
.bouton.second{background:var(--vert-clair);color:var(--vert)}
.bouton.terre{background:var(--terre)}
.bouton[disabled]{opacity:.5}
.rangee{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.carte{background:var(--carte);border:2px solid var(--trait);border-radius:18px;padding:16px}
.choix{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.choix button{background:var(--carte);border:2px solid var(--trait);border-radius:16px;padding:14px 8px;min-height:84px;
              display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.choix button.bon{border-color:var(--ok);background:#E1F2E7;color:#14301F}
.choix button.faux{border-color:var(--ko);background:#F8E1DC;color:#3A140D}
.choix .fr{font-size:13px;color:inherit;opacity:.8}
.score{font-family:'Baloo 2',sans-serif;font-weight:800;color:var(--terre);font-size:18px}
.gros-ecoute{width:120px;height:120px;border-radius:50%;font-size:52px;margin:6px auto;display:flex}
.centre{text-align:center}
.memo{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (min-width:600px){.memo{grid-template-columns:repeat(4,1fr)}}
.tuile{aspect-ratio:1/1;border-radius:16px;border:2px solid var(--trait);background:var(--vert);color:#fff;
       display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px;text-align:center;font-weight:800}
.tuile.dos::after{content:"?";font-family:'Baloo 2';font-size:34px}
.tuile.face{background:var(--carte);color:var(--encre)}
.tuile.trouvee{background:var(--vert-clair);border-color:var(--vert);color:var(--vert)}
.tuile .lat{font-size:18px}
.tuile .fr{font-size:13px;font-weight:600}
.note{font-size:14px;color:var(--doux)}
.liste-liens a{display:block;padding:14px 0;border-bottom:1px solid var(--trait);color:var(--vert);font-weight:800;text-decoration:none}
.barre-prog{height:10px;background:var(--trait);border-radius:6px;overflow:hidden}
.barre-prog i{display:block;height:100%;background:var(--vert);width:0}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--encre);color:var(--papier);
       padding:10px 16px;border-radius:12px;font-size:14px;z-index:9;max-width:90vw}
.noscript{padding:20px}