@font-face{font-family:'Bangers';src:url('polices/bangers.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Comic Neue';font-weight:700;src:url('polices/comic-neue-700.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Noto Naskh Arabic';font-weight:700;src:url('polices/noto-naskh-arabic-700.woff2') format('woff2');font-display:swap}
/* Mise en page : une colonne, grosses tuiles à toucher, trait épais et ombre dure comme les cases de la BD */
:root{--papier:#FFF3D6;--blanc:#FFFFFF;--encre:#1C2433;--safran:#F2A81D;--jaune:#FFD95A;--rouge:#E5383B;--ba:#1E88E5;--ta:#2E9E4F;--dal:#8A5CC2;--sable:#E2CFA4;
--titre:'Bangers','Impact',sans-serif;--texte:'Comic Neue','Comic Sans MS','Trebuchet MS',sans-serif;--arabe:'Noto Naskh Arabic','Amiri','Geeza Pro',serif}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:var(--papier);color:var(--encre);font-family:var(--texte);font-weight:700;font-size:1rem;line-height:1.4;text-transform:uppercase;letter-spacing:.02em}
.page{max-width:44rem;margin:0 auto;padding-inline:16px;padding-block:20px 40px;display:flex;flex-direction:column;gap:24px}
a{color:inherit}
.tete{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.serie{font-family:var(--titre);font-weight:400;font-size:1.25rem;letter-spacing:.06em;text-decoration:none;background:var(--safran);border:3px solid var(--encre);border-radius:999px;padding:2px 14px}
.ou{margin:12px 0 0;font-size:.9rem}
h1{margin:0;font-family:var(--titre);font-weight:400;font-size:clamp(2rem,9vw,3rem);line-height:1.05;letter-spacing:.04em;text-wrap:balance}
main{display:flex;flex-direction:column;gap:24px}
.consigne{margin:0;font-size:1rem;max-width:34rem}
.groupe{display:flex;flex-direction:column;gap:10px}
h2{margin:0;font-family:var(--titre);font-weight:400;font-size:1.3rem;letter-spacing:.06em}
.rang{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.6rem,1fr));gap:14px}
.rang:has(.mot){grid-template-columns:repeat(auto-fill,minmax(9rem,1fr))}
.tuile{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:6px 6px 14px;background:var(--blanc);color:var(--encre);border:4px solid var(--encre);border-radius:18px;box-shadow:5px 5px 0 var(--encre);font:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer;transition:transform .08s,box-shadow .08s}
.tuile:active,.tuile.joue{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--encre)}
.tuile.joue{background:var(--jaune)}
.tuile:focus-visible,.nav:focus-visible,.serie:focus-visible,.carte:focus-visible{outline:4px solid var(--rouge);outline-offset:3px}
.ar{font-family:var(--arabe);font-weight:700;font-size:3.6rem;line-height:1.75;letter-spacing:0}
.mot .ar{font-size:3rem}
.ba .ar{color:var(--ba)}.ta .ar{color:var(--ta)}.dal .ar{color:var(--dal)}
.tr{font-family:var(--titre);font-weight:400;font-size:1.35rem;letter-spacing:.06em;color:var(--rouge);line-height:1.1}
.trad{font-size:.8rem;line-height:1.2;text-align:center}
.hp{width:30px;height:30px;margin-top:6px}
.hp circle{fill:var(--jaune);stroke:var(--encre);stroke-width:1.6}
.hp path{fill:var(--encre)}
.hp .onde{fill:none;stroke:var(--encre);stroke-width:1.8;stroke-linecap:round}
.joue .hp circle{fill:var(--blanc)}
.msg{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));margin:0 auto;max-width:22rem;text-align:center;background:var(--encre);color:var(--papier);border-radius:14px;padding:12px 16px}
.bas{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;border-top:3px dotted var(--sable);padding-top:20px}
.bas>:last-child{justify-self:end}
.nav{display:inline-block;text-decoration:none;background:var(--blanc);border:3px solid var(--encre);border-radius:999px;padding:6px 14px;font-size:.9rem;box-shadow:3px 3px 0 var(--encre)}
.nav.tout{background:var(--jaune)}
.liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:14px;list-style:none;margin:0;padding:0}
.carte{display:flex;flex-direction:column;gap:2px;height:100%;text-decoration:none;background:var(--blanc);border:4px solid var(--encre);border-radius:18px;box-shadow:5px 5px 0 var(--encre);padding:12px 14px}
.carte b{font-family:var(--titre);font-weight:400;font-size:1.5rem;letter-spacing:.05em}
.carte span{font-size:.85rem;line-height:1.25}
.carte.attente{background:transparent;border-style:dashed;box-shadow:none;color:var(--encre)}
.sous{margin:0;font-size:1.1rem;max-width:34rem}
.pied{font-size:.75rem;border-top:3px dotted var(--sable);padding-top:16px}
@media (prefers-reduced-motion:reduce){.tuile{transition:none}}