/* Les grilles de lettres : le tableau de découverte, les six lettres, le sélecteur. Sept colonnes TOUJOURS ;
   direction:rtl → la première case (ا) en haut à DROITE. Les tailles suivent la largeur RÉELLE du bloc (cqi),
   pas l'écran : ce sont les marges et les espacements qui cèdent d'abord, la lettre en dernier.
   Les animations pendant l'écoute vivent dans ecoute.css. */
#alphabet .grille { container-type:inline-size; margin:24px 0 10px; }
#alphabet .lettres { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:clamp(4px,1.5cqi,12px); direction:rtl; margin:0; padding:0; list-style:none; }
#alphabet .lettres > li { padding:0; min-width:0; }

/* une case = un bouton, sur fond BLANC (Myriam, 30/09) */
#alphabet .case { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:1 / 1.1; padding:0; margin:0;
  background:#fff; border:1.5px solid var(--bord); border-radius:clamp(8px,1.8cqi,14px); transition:border-color .2s, background .2s; }
#alphabet .case .gl { display:block; font-family:'Noto Naskh Arabic',serif; font-size:clamp(23px,8.6cqi,54px); line-height:1.15; color:#211c1a; pointer-events:none; }
#alphabet .case:hover { border-color:#c29a5f; }
#alphabet .case.active { border-color:var(--or); background:#fbf1de; }      /* la dernière écoutée : on sait où l'on en est */
#alphabet .case.joue { border-color:var(--or-fonce); background:var(--or-clair); }
/* le tableau et le sélecteur : la MÊME hauteur de case (Myriam, 30/09), tirée de la largeur du bloc */
#alphabet .grille .case { aspect-ratio:auto; height:clamp(46px,13cqi,96px); }

/* le message d'un son qui n'a pas pu être lu (jamais une voix de synthèse à la place) */
#alphabet .son-erreur { margin:10px 0 0; min-height:1.6em; color:#8a3b1c; font-size:15px; font-weight:500; }
#alphabet .son-erreur:empty { min-height:0; }

/* ── les six lettres qui ne s'attachent pas à gauche : six boutons SÉPARÉS (aucun raccord typographique) ── */
#alphabet .six { container-type:inline-size; margin:22px 0 22px; }
#alphabet .six ul { display:grid; grid-template-columns:repeat(6,minmax(0,84px)); justify-content:center; gap:clamp(6px,2.4cqi,16px); direction:rtl; list-style:none; margin:0; padding:0; }
#alphabet .six li { padding:0; }
#alphabet .six .case .gl { font-size:clamp(28px,10cqi,50px); }

/* ── le sélecteur des lettres à réviser : distinct du tableau (un disque à cocher, crème, dans chaque lettre) ── */
#alphabet .choix-barre { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin:18px 0 0; }
#alphabet .compteur { margin:0; font-weight:600; color:#211c1a; font-size:16px; }
#alphabet .choix-actions { display:flex; gap:8px; flex-wrap:wrap; }
#alphabet .petit { min-height:44px; padding:8px 14px; border-radius:999px; border:1.5px solid #b39c7b; background:transparent; color:var(--nuit); font:500 14px/1.2 'Jost',sans-serif; }
#alphabet .petit:hover { border-color:var(--nuit); }
#alphabet .choix { --coche:clamp(11px,3cqi,22px); }
#alphabet .choix .case { padding:calc(var(--coche) * .8) 0 0; }
#alphabet .choix .case .gl { font-size:clamp(21px,6.8cqi,44px); line-height:1.15; }
#alphabet .coche { position:absolute; top:clamp(3px,.8cqi,7px); left:clamp(3px,.8cqi,7px); width:var(--coche); aspect-ratio:1; border-radius:50%; border:1.5px solid #bca483; background:#f1e7d8;
  display:grid; place-items:center; font:700 clamp(8px,2cqi,13px)/1 'Jost',sans-serif; color:transparent; }
#alphabet .choix .case[aria-pressed="true"] { background:#f3e0b9; border:2px solid var(--or-fonce); }
#alphabet .choix .case[aria-pressed="true"] .coche { background:var(--titre); border-color:var(--titre); color:#fff; }
#alphabet .indice { margin:12px 0 0; padding:10px 14px; border-left:3px solid var(--or); background:#f8efe0; color:#4a3d33; font-size:15.5px; line-height:1.55; border-radius:0 8px 8px 0; }
#alphabet .indice.eclat { animation:al-eclat .7s ease-out 1; }
@keyframes al-eclat { 0% { background:#f3d9a6; } 100% { background:#f8efe0; } }
#alphabet .lancer { margin:8px 0 6px; }

/* ── le mim : l'animation de la landing, ses tuiles nuit (l'or du tracé garde son contraste) ;
   dans le sens de l'écriture arabe (Myriam, 30/09) : isolée à DROITE, puis début, milieu, fin vers la gauche ── */
#alphabet .mim { margin:22px 0 14px; }
#alphabet .traces { display:grid; grid-template-columns:repeat(4,minmax(0,150px)); justify-content:center; gap:12px; margin:0; padding:0; list-style:none; direction:rtl; }
#alphabet .ttile { background:#332c29; border:1px solid rgba(214,143,53,.22); border-radius:14px; padding:10px 6px 9px; text-align:center; }
#alphabet .tcanvas { width:100%; height:auto; display:block; aspect-ratio:1 / 1; border-radius:9px; }
#alphabet .ttile span { display:block; direction:ltr; margin-top:6px; font:500 14px/1.3 'Jost',sans-serif; letter-spacing:.04em; color:#e3d4bd; }
#alphabet .mim-pied { display:flex; justify-content:center; margin:14px 0 0; }
@media (max-width:540px) { #alphabet .traces { grid-template-columns:repeat(2,minmax(0,150px)); } }