/* Qaïda 1 — pages du livret en version tactile (includes/qaida-rendu.php) */
.qd-page { --qd-rouge: #d6452f; --qd-case: var(--surface-2); --qd-vu: #fff2c8; }
html[data-mode="sombre"] .qd-page { --qd-rouge: #ff8a75; --qd-vu: #3a3418; }
.qd-repere { margin: 0 0 .2rem; opacity: .75; }
.qd-titre { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: 1.08rem; margin: 1.3rem 0 .6rem; }
.qd-titre:first-of-type { margin-top: .4rem; }

/* Cases de lettres */
.qd-case { font-family: var(--police-ar); font-size: clamp(1.9rem, 7vw, 2.6rem); line-height: 1.5;
  min-width: 3.1rem; min-height: 3.4rem; padding: 0 .35rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  background: var(--qd-case); color: var(--texte); border: 2px solid var(--bordure); border-radius: 14px; cursor: pointer;
  transition: background .2s, border-color .2s, transform .12s; }
.qd-case:hover { border-color: var(--accent); }
.qd-case:focus-visible, .qd-mot:focus-visible, .qd-nouvelle:focus-visible, .qd-jouer:focus-visible { outline: 3px solid var(--dore); outline-offset: 2px; }
.qd-case.qd-vu { background: var(--qd-vu); }
.qd-case.qd-groupe { gap: .6rem; }
.qd-rouge { color: var(--qd-rouge); }
.qd-lu { border-color: var(--accent-2) !important; box-shadow: 0 0 0 3px var(--dore); transform: scale(1.08); }
.qd-touche { animation: qd-pop .3s; }
@keyframes qd-pop { 50% { transform: scale(1.12); } }

/* Lignes : les cases de droite à gauche, le bouton ▶ à gauche */
.qd-grille { display: flex; flex-direction: column; gap: .55rem; }
.qd-ligne { display: flex; align-items: center; gap: .5rem; }
.qd-ligne.qd-seule { justify-content: center; margin-top: .6rem; }
.qd-cases { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1; }
.qd-jouer { flex: 0 0 auto; min-width: 2.6rem; height: 2.6rem; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--accent); color: #fff; font-size: 1rem; padding: 0 .8rem; }
.qd-jouer-tout { font-size: .95rem; }
.qd-bande .qd-case { font-size: clamp(1.5rem, 5vw, 2rem); min-width: 2.5rem; min-height: 2.9rem; }
.qd-bande .qd-neuve { color: var(--qd-rouge); border-color: var(--qd-rouge); }

/* Nouvelles lettres et tableau de l'alphabet */
.qd-nouvelles, .qd-alphabet { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.qd-alphabet { gap: .45rem; }
.qd-nouvelle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; cursor: pointer;
  min-width: 6.5rem; padding: .5rem .9rem .6rem; border-radius: 20px; border: 3px solid var(--qd-rouge); background: var(--qd-case); color: var(--texte); }
.qd-nouvelle .qd-grand { font-family: var(--police-ar); font-size: clamp(3.4rem, 14vw, 4.6rem); line-height: 1.4; color: var(--qd-rouge); }
.qd-nouvelle .qd-nom { font-weight: 800; letter-spacing: .06em; font-size: .9rem; }
.qd-nouvelle.qd-petite { min-width: 4.4rem; padding: .25rem .5rem .4rem; border-width: 2px; border-color: var(--bordure); }
.qd-nouvelle.qd-petite .qd-grand { font-size: 2.3rem; color: var(--texte); }
.qd-nouvelle.qd-petite .qd-nom { font-size: .68rem; }
.qd-nouvelle.qd-vu { background: var(--qd-vu); }

/* Paires de lettres qui se ressemblent */
.qd-paires { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .6rem; }
.qd-paire { display: flex; align-items: center; justify-content: center; gap: .3rem; padding: .4rem; border-radius: 16px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.qd-ou { opacity: .5; font-size: 1.4rem; }

/* Tableau des 4 formes */
.qd-defile { overflow-x: auto; }
.qd-formes { border-collapse: separate; border-spacing: .25rem; margin: 0 auto; }
.qd-formes .qd-case { min-width: 2.7rem; font-size: clamp(1.6rem, 6vw, 2.4rem); }
.qd-formes th { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-doux); padding: 0 .2rem; }
.qd-formes td { text-align: center; }
.qd-formes td:first-child .qd-case { border-color: var(--qd-rouge); }

/* Formes du début (leçon 14) */
.qd-debuts { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-start; margin-bottom: .8rem; }
.qd-colonne { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.qd-fleche { opacity: .55; font-size: 1rem; line-height: 1; }

/* Mots : lettres séparées ↓ mot attaché */
.qd-mots { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr)); gap: .6rem; }
.qd-mot { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .5rem .4rem .6rem; cursor: pointer;
  background: var(--qd-case); color: var(--texte); border: 2px solid var(--bordure); border-radius: 18px; font-family: var(--police-ar); }
.qd-mot:hover { border-color: var(--accent); }
.qd-mot.qd-vu { background: var(--qd-vu); }
.qd-separees { display: flex; gap: .7rem; font-size: 1.6rem; line-height: 1.6; color: var(--texte); opacity: .8; }
.qd-soude { font-size: 2.3rem; line-height: 1.6; }
.qd-mots-mini { grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); margin-top: .5rem; }

/* Formes complexes, règles, adab, mémorisation */
.qd-complexes { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.qd-complexe { display: flex; gap: .7rem; align-items: flex-start; padding: .5rem; border: 1px solid var(--bordure); border-radius: 16px; }
.qd-complexe ul { margin: .2rem 0; padding-inline-start: 1.1rem; font-size: .92rem; }
.qd-regle { margin: .6rem 0; }
.qd-adab { display: grid; gap: 1rem; }
@media (min-width: 720px) { .qd-adab { grid-template-columns: 1fr 1fr; } }
.qd-adab h4 { margin: 0 0 .4rem; }
.qd-adab ul, .qd-objectifs { margin: 0; padding-inline-start: 1.2rem; display: flex; flex-direction: column; gap: .35rem; }
.qd-prof { margin-top: .8rem; }
.qd-memo { padding: .7rem .9rem; border: 1px solid var(--bordure); border-radius: 16px; margin-bottom: .6rem; }
.qd-memo-ar { font-size: 1.8rem; line-height: 2; margin: .3rem 0; }
.qd-translit { font-style: italic; margin: .2rem 0; }

@media (prefers-reduced-motion: reduce) { .qd-touche { animation: none; } .qd-lu { transform: none; } }