/* Exercices d'alphabet arabe (article /blog/exercices-alphabet-arabe) : styles propres à cette page, chargés après site.min.css */
.exo-carte{background:var(--papier);border:1px solid var(--ligne);border-radius:18px;padding:16px;margin:14px 0;box-shadow:var(--ombre)}
.exo-carte h3{margin:0 0 6px!important;font-size:1.3rem!important}
.exo-carte p{margin:0 0 10px}
.exo-carte .ar-inline{font-size:1.35em}
.exo-score{display:inline-block;margin:0 0 6px;padding:4px 12px;border-radius:999px;background:var(--carte);font-size:.9rem;color:var(--texte)}
.exo-actions [hidden]{display:none}

/* Rappel des cinq lettres */
.lettres-rappel{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:12px 0 16px}
.lettre-fiche{background:var(--papier);border:1px solid var(--ligne);border-radius:16px;padding:10px 12px 12px;text-align:center}
.lettre-fiche .grand{display:block;font-family:var(--ar);font-size:3.6rem;line-height:1.5;color:var(--texte)}
.lettre-fiche b{display:block;font-family:var(--titre);font-weight:500;font-size:1.3rem;line-height:1.1}
.lettre-fiche small{display:block;margin-top:4px;font-size:.88rem;line-height:1.35;color:var(--doux)}

/* QCM : lettres et segments de mots */
.qcm{border:0;margin:0;padding:0;min-width:0}
.qcm legend{padding:0;margin:0 0 10px;font-weight:500}
.mot-modele{display:block;font-family:var(--ar);font-size:clamp(3rem,16vw,4.6rem);line-height:1.6;text-align:center;direction:rtl;margin:0 0 2px;color:var(--texte)}
.mot-sens{display:block;text-align:center;color:var(--doux);font-size:.92rem;margin:0 0 10px}
.choix{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;direction:rtl;margin:0 0 12px}
.tuile{position:relative;display:block}
.tuile input{position:absolute;inset:0;width:100%;height:100%;min-height:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.tuile .face{display:flex;align-items:center;justify-content:center;min-width:68px;min-height:68px;padding:2px 12px;border-radius:14px;border:2px solid var(--ligne);background:#fff;font-family:var(--ar);font-size:2.6rem;line-height:1.6;color:var(--texte);direction:rtl}
.tuile input:checked + .face{border-color:var(--texte);background:var(--carte)}
.tuile input:focus-visible + .face{outline:2px solid var(--rouge);outline-offset:2px}
.qcm.fait .tuile input{pointer-events:none}
.tuile.juste .face{border-color:var(--ok);background:#E6F2E9}
.tuile.faux .face{border-color:var(--ko);background:#FBE9E7}
.tuile.juste .face::after,.tuile.faux .face::after{font-family:var(--ui);font-size:.9rem;font-weight:700;margin-inline-start:6px}
.tuile.juste .face::after{content:"✓";color:var(--ok)}
.tuile.faux .face::after{content:"✗";color:var(--ko)}
.exo-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.exo-actions .btn{width:auto;flex:1 1 140px;min-height:48px}
.retour{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:var(--carte);font-size:.95rem}
.retour:empty{display:none}
.retour.ok{background:#E6F2E9}
.retour.ko{background:#FBE9E7}
.retour strong{display:block;margin-bottom:2px}
.retour.ok strong{color:var(--ok)}
.retour.ko strong{color:var(--ko)}

/* Zones de tracé */
.trace-modele{display:block;font-family:var(--ar);font-size:clamp(4.5rem,24vw,7rem);line-height:1.4;text-align:center;direction:rtl;color:var(--texte);margin:0}
.trace-modele.mot{font-size:clamp(3.4rem,17vw,5.2rem);background:none;padding:0;border-radius:0}
.trace-sens{display:block;text-align:center;color:var(--doux);font-size:.92rem;margin:0 0 8px}
.trace-conseil{margin:0 0 10px;padding:8px 12px;border-left:3px solid var(--rouge);background:var(--carte);border-radius:0 12px 12px 0;font-size:.95rem}
.trace-zone{position:relative;height:240px;border-radius:16px;border:2px dashed var(--ligne);background:#fff;overflow:hidden;direction:ltr}
.trace-zone::before{content:"";position:absolute;left:10px;right:10px;top:64%;border-top:1px dashed rgba(74,52,38,.25);pointer-events:none}
.trace-guide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--ar);font-size:clamp(7rem,40vw,10.5rem);line-height:1;color:rgba(74,52,38,.2);direction:rtl;pointer-events:none;user-select:none;-webkit-user-select:none;white-space:nowrap}
.trace-zone.mot-zone .trace-guide{font-size:clamp(5.4rem,30vw,9.5rem)}
.trace-zone.sans-guide .trace-guide{visibility:hidden}
.trace-zone canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair;color:#17406B}
.trace-aide{margin:6px 0 10px;font-size:.88rem;color:var(--doux)}

@media (max-width:380px){
  .tuile .face{min-width:58px;min-height:62px;font-size:2.2rem}
  .choix{gap:8px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}