/* Ce qui est propre à « Apprendre à lire le Coran », par-dessus socle.css (la charte d'Alphabet arabe) : la carte d'une démonstration, ses
   commandes (voir · pause · rejouer · étape précédente / suivante), et un bloc par démonstration. Les couleurs sont celles de la charte ;
   une couleur ne dit jamais rien seule (un mot, un numéro ou une forme l'accompagne). Aucune ombre portée, sauf l'anneau de focus.
   ⚠️ Un signe arabe se colore par un <span> SANS marge ni remplissage ni transformation : une marge couperait la liaison, une
   transformation détacherait le signe de sa lettre. Seuls color, background et box-shadow bougent. */

#lire figure { margin:0; }
#lire .exemple { font:400 44px/2 'Noto Naskh Arabic',serif; color:#211c1a; letter-spacing:0; }
#lire .exemple.enorme { font-size:128px; line-height:1; }
#lire .exemple-bloc { text-align:center; margin:6px 0 14px; }
#lire .ar { font-family:'Noto Naskh Arabic',serif; font-weight:400; }
#lire .son-erreur { margin:10px 0 0; min-height:1.6em; color:#8a3b1c; font-size:15px; font-weight:500; line-height:1.5; }
#lire .son-erreur:empty { min-height:0; margin:0; }
#lire .son-erreur .reessayer { margin-left:10px; min-height:40px; padding:6px 14px; vertical-align:middle; }
#lire .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; }
#lire .petit:hover:not(:disabled) { border-color:var(--nuit); }
#lire .petit:disabled { opacity:.42; cursor:not-allowed; }
#lire .lancer { margin:8px 0 6px; }

/* ── la carte d'une démonstration ── */
#lire .demo { margin:24px 0 18px; padding:18px 18px 14px; background:#f1e4cb; border:1.5px solid #cdb892; border-radius:18px; container-type:inline-size; }   /* le parchemin : net sur le papier de la page (#fdf9f1) ; les lettres et les mots reposent sur un panneau blanc */
#lire .demo-titre { margin:0 0 12px; font:600 13px/1.4 'Jost',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--sourd); }
#lire .demo-titre .ar-inline { letter-spacing:0; text-transform:none; font-size:1.5em; color:#211c1a; }
#lire .demo-legende { margin:14px 0 4px; padding:10px 14px; border-left:3px solid var(--or); background:#f8efe0; border-radius:0 8px 8px 0; color:#4a3d33; font-size:16px; line-height:1.6; min-height:3.4em; }
#lire .demo-legende:empty { display:none; }
#lire .demo-legende .ar-inline { font-size:1.25em; }
#lire .demo-note { margin:10px 0 0; font-size:14.5px; line-height:1.55; color:var(--sourd); text-align:center; }
#lire .demo-note.hors-carte { margin:-6px 0 18px; }
#lire .demo-commandes { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:14px 0 2px; }
#lire .demo-commandes[hidden] { display:none; }
#lire .demo-commandes .btn { min-height:48px; padding:10px 22px; }
#lire .demo-commandes .btn .ico { font-size:11px; letter-spacing:0; }
#lire .demo-etat { margin-left:auto; font:600 13px/1.3 'Jost',sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--sourd); }
#lire .demo-sep { flex-basis:100%; height:0; }
@container (max-width:520px) { #lire .demo-etat { margin-left:0; flex-basis:100%; } }

/* ── les formes du ب : les tuiles nuit de la landing (l'or du tracé garde son contraste), isolée à DROITE, comme le mim ── */
#lire .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; }
#lire .ttile { padding:10px 6px 9px; background:#332c29; border:1px solid rgba(214,143,53,.22); border-radius:14px; text-align:center; transition:border-color .25s, box-shadow .25s; }
#lire .tcanvas { width:100%; height:auto; display:block; aspect-ratio:1 / 1; border-radius:9px; }
#lire .ttile span { display:block; direction:ltr; margin-top:6px; font:500 14px/1.3 'Jost',sans-serif; letter-spacing:.04em; color:#e3d4bd; }
#lire .ttile.en-cours { border-color:rgba(233,172,82,.95); box-shadow:0 0 0 2px rgba(233,172,82,.5); }
#lire .ttile.en-cours span { color:#fff; font-weight:600; text-decoration:underline; text-decoration-color:#e8a94f; text-decoration-thickness:2px; text-underline-offset:5px; }
@media (max-width:540px) { #lire .traces { grid-template-columns:repeat(2,minmax(0,150px)); } }

/* ── les boutons d'écoute : la pastille nuit et son haut-parleur (comme les « Écouter » du jeu 2 d'Alphabet) ── */
#lire .ecouter { position:relative; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 16px 8px 12px; border-radius:999px; border:1.5px solid var(--nuit); background:var(--nuit); color:#f1e7d8; font:500 15px/1.2 'Jost',sans-serif; }
#lire .ecouter svg { width:20px; height:20px; flex:none; }
#lire .ecouter:hover:not([data-avenir="1"]), #lire .ecouter:active:not([data-avenir="1"]) { background:#e9ac52; border-color:#e9ac52; color:#29231d; }   /* doré au survol et au clic (Myriam, 03/10) */
#lire .ecouter.grand-bouton { min-height:56px; padding:10px 22px 10px 16px; font-size:17px; }
#lire .ecouter.grand-bouton svg { width:26px; height:26px; }
#lire .ecouter[data-avenir="1"] { background:#efe6d6; color:#6b5b4c; border-color:#d9c7a8; cursor:not-allowed; }
#lire .ecouter[data-avenir="1"]:hover { background:#efe6d6; }

/* ── une même lettre, plusieurs signes (voyelles courtes, soukoun) ── */
#lire .signes .grand { text-align:center; font:400 clamp(104px,34cqi,168px)/1.6 'Noto Naskh Arabic',serif; color:#211c1a; margin:0 0 10px; }
#lire .signes .signe { color:#a96b1f; }
#lire .signes .signe.neuf { animation:lire-signe 1s ease-out 1; }
@keyframes lire-signe { 0% { color:#f0a73c; text-shadow:0 0 .22em rgba(240,167,60,.95); } 100% { color:#a96b1f; text-shadow:0 0 0 rgba(240,167,60,0); } }
#lire .signe-nom { margin:0; text-align:center; font:600 21px/1.4 'Fredoka','Jost',sans-serif; color:var(--titre); min-height:1.4em; }
#lire .signe-aide { margin:2px 0 14px; text-align:center; color:#4a3d33; font-size:16px; line-height:1.5; min-height:1.5em; }
#lire .signe-aide:empty { min-height:0; margin:0 0 10px; }
#lire .choix-signes { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:12px 0 0; }
#lire .signe-btn { position:relative; display:grid; justify-items:center; align-content:center; gap:2px; min-width:96px; min-height:92px; padding:6px 14px 8px; background:#fff; border:2px solid var(--bord); border-radius:14px; transition:border-color .2s, background .2s; }
#lire .signe-btn:hover { border-color:#c29a5f; }
#lire .signe-btn .ex { font:400 46px/1.7 'Noto Naskh Arabic',serif; color:#211c1a; }
#lire .signe-btn .nom { font:500 13px/1.2 'Jost',sans-serif; letter-spacing:.06em; text-transform:uppercase; color:#5a4a3c; }
#lire .signe-btn[aria-pressed="true"] { border-color:var(--nuit); background:#fbf1de; box-shadow:inset 0 0 0 1.5px var(--nuit); }
#lire .signe-btn.joue { border-color:var(--or-fonce); background:var(--or-clair); }
#lire .signe-btn.seul { min-width:104px; }
#lire .signe-btn .etiq { font:500 11px/1.2 'Jost',sans-serif; color:#6b5b4c; }
#lire .trois-sons { list-style:none; margin:0 0 6px; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
#lire .trois-sons li { padding:0; }

/* ── lire un mot : le mot attaché, et SA décomposition dans une zone à part ── */
#lire .mot-scene, #lire .signes .grand { background:#fff; border:1.5px solid #e2d2b3; border-radius:14px; }
#lire .mot-scene { text-align:center; padding:2px 8px 6px; }
#lire .mot-ar { margin:0; font:400 clamp(72px,24cqi,120px)/2 'Noto Naskh Arabic',serif; color:#211c1a; text-align:center; }
#lire .mot-ar .pc.on { background:#f6e7c9; box-shadow:0 0 0 3px #f6e7c9; border-radius:4px; color:#211c1a; }
#lire .traduction { margin:0 0 6px; text-align:center; font:italic 300 19px/1.5 'Jost',sans-serif; color:var(--sourd); }
#lire .zone { margin:14px 0 4px; padding:12px 14px 14px; border:1.5px dashed #c9b690; border-radius:14px; background:#fff; }
#lire .zone-titre { margin:0 0 10px; font:600 12.5px/1.4 'Jost',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--sourd); }
#lire .syllabes { list-style:none; margin:0; padding:0; display:flex; justify-content:center; gap:12px; }
#lire .syllabes li { padding:0; }
#lire .syl { position:relative; display:grid; place-items:center; width:92px; height:92px; padding:0; background:#fffbf5; border:2px solid var(--bord); border-radius:14px; transition:border-color .2s, background .2s; }
#lire .syl .gl { font:400 54px/1.7 'Noto Naskh Arabic',serif; color:#211c1a; }
#lire .syl:hover { border-color:#c29a5f; }
#lire .syl.on { border-color:var(--or-fonce); background:var(--or-clair); box-shadow:inset 0 0 0 1.5px var(--or-fonce); }
#lire .mot-entier { margin:12px 0 0; text-align:center; }

/* ── la hamza : les contours de la police, coloriés par rôle ── */
#lire .exemple.enorme { color:#211c1a; }
#lire .hamza-scene { display:grid; grid-template-columns:minmax(0,200px) minmax(0,1fr); gap:20px; align-items:center; }
#lire .hamza-grand svg, #lire .hamza-tuile svg { display:block; margin:0 auto; height:100%; width:auto; max-width:100%; }
#lire .hamza-grand { height:min(300px,52vw); display:grid; place-items:center; background:#fff; border:1.5px solid var(--bord); border-radius:16px; padding:8px; }
#lire .hamza-grand .ar { font-size:150px; line-height:1.8; }
#lire .hamza-cles { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
#lire .hamza-cles li { display:flex; align-items:center; gap:12px; padding:10px 12px; border:2px solid var(--filet); border-radius:12px; background:#fff; font-size:16.5px; line-height:1.45; transition:border-color .2s, background .2s, opacity .2s; }
#lire .hamza-cles .pastille { flex:none; width:22px; height:22px; border-radius:50%; background:var(--c); }
#lire .hamza-cles li[data-role="hamza"] { --c:#d68f35; }
#lire .hamza-cles li[data-role="support"] { --c:#29231d; }
#lire .hamza-cles li[data-role="voyelle"] { --c:#8a3b1c; }
#lire .hamza-cles li[data-role="support"] .pastille { border-radius:4px; }
#lire .hamza-cles li[data-role="voyelle"] .pastille { border-radius:2px; transform:rotate(45deg) scale(.85); }
#lire .hamza-cles li.actif { border-color:var(--c); background:#fbf4e6; }
#lire .hamza-cles li.eteint { opacity:.5; }
#lire .p-hamza { fill:#d68f35; }
#lire .p-support { fill:#29231d; }
#lire .p-voyelle { fill:#8a3b1c; }
#lire svg .neutre { fill:#211c1a; }
#lire svg .estompe { opacity:.16; }
#lire svg path { transition:opacity .3s, fill .3s; }
#lire .hamza-formes { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:12px; direction:rtl; }
#lire .hamza-formes li { width:clamp(104px,18%,140px); padding:0; text-align:center; }
#lire .hamza-tuile { height:128px; display:grid; place-items:center; padding:8px 6px; background:#fff; border:1.5px solid var(--bord); border-radius:14px; }
#lire .hamza-tuile .ar { font-size:76px; line-height:1.8; }
#lire .hamza-formes .legende { display:block; direction:ltr; margin-top:6px; font:500 14px/1.35 'Jost',sans-serif; color:#4a3d33; }
#lire .hamza-formes li[data-f="h"] .legende { font-weight:600; color:#211c1a; }
@media (max-width:620px) { #lire .hamza-scene { grid-template-columns:1fr; } #lire .hamza-grand { height:230px; } }

/* ── les voyelles longues : deux formes côte à côte, un repère de temps (sans durée en secondes) ── */
#lire .comp-paire { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
#lire .comp-forme { padding:6px 8px 12px; background:#fff; border:2px solid var(--filet); border-radius:14px; text-align:center; transition:border-color .2s, background .2s; }
#lire .comp-forme.en-cours { border-color:var(--or-fonce); background:#fffaf0; }
#lire .comp-forme .gl { margin:0; font:400 clamp(66px,19cqi,100px)/1.9 'Noto Naskh Arabic',serif; color:#211c1a; }
#lire .comp-forme .gl .v.on, #lire .comp-forme .gl .l.on { background:#f6e7c9; box-shadow:0 0 0 3px #f6e7c9; border-radius:4px; color:#7a4d12; }
#lire .comp-nom { margin:0; font:600 13px/1.4 'Jost',sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--sourd); }
#lire .temps { display:flex; justify-content:center; gap:6px; margin:10px 0 4px; }
#lire .temps i { display:block; width:34px; height:14px; border-radius:5px; background:var(--or); }
#lire .comp-forme[data-quoi="court"] .temps i { width:34px; }
#lire .comp-temps { margin:0; font:500 15px/1.4 'Jost',sans-serif; color:#4a3d33; }
#lire .comp-titre { margin:16px 0 12px; text-align:center; }   /* le titre de la paire, dans l'encadré : un h3 comme les autres (même police, même taille) */
/* les trois disques (fatha · kasra · damma) au-dessus du titre : crème au repos, marron au survol, au clic et quand la voyelle est choisie */
#lire .choix-haraka { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:0; }
#lire .disque { width:64px; height:64px; padding:0; border-radius:50%; border:2px solid #b39c7b; background:#fbf3e4; color:var(--nuit); cursor:pointer; display:grid; place-items:center; transition:background .15s, border-color .15s, color .15s; }
#lire .disque .ar { font:400 44px/1 'Noto Naskh Arabic',serif; }
#lire .disque:hover, #lire .disque:active, #lire .disque[aria-pressed="true"] { background:#5c3d1e; border-color:#5c3d1e; color:#f1e7d8; }
#lire .comp-boutons { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:12px 0 0; }
@media (max-width:420px) { #lire .comp-paire { gap:8px; } }

/* ── la chedda : le mot, le « double v », la décomposition et ses deux consonnes ── */
#lire .ch-decomp { position:relative; padding-bottom:12px; }
#lire .ch-decomp .mot-ar { font-size:clamp(64px,20cqi,100px); line-height:1.9; }
#lire .ch-ligne { min-height:calc(1.9 * clamp(64px,20cqi,100px)); }   /* la 2e forme prend la place de la 1re : même hauteur */
#lire .ch-decomp .pc.on { background:#f6e7c9; box-shadow:0 0 0 3px #f6e7c9; border-radius:4px; }
#lire .ch-barre { position:absolute; left:0; top:0; width:0; height:7px; border-radius:4px; opacity:0; pointer-events:none; transition:left .8s ease, top .8s ease, width .8s ease, opacity .35s ease, background-color .4s; }
#lire .ch-barre b { position:absolute; top:11px; left:50%; transform:translateX(-50%); width:24px; height:24px; border-radius:50%; font:700 13px/24px 'Jost',sans-serif; text-align:center; color:#fff; transition:opacity .3s; }
#lire .ch-barre-1 { background:#d68f35; } #lire .ch-barre-1 b { background:#a96b1f; }
#lire .ch-barre-2 { background:#29231d; } #lire .ch-barre-2 b { background:#29231d; }
#lire .ch-barre.visible { opacity:1; }
#lire .ch-barre.fusion b { opacity:0; }
#lire .ch-barre-1.fusion { opacity:0; }
#lire .ch-barre-2.fusion { background:#a96b1f; }
#lire .ch-decomp .pc.b1-on { background:#fbe3b6; box-shadow:0 0 0 3px #fbe3b6; border-radius:4px; }
#lire .ch-decomp .pc.b2-on { background:#e4dccf; box-shadow:0 0 0 3px #e4dccf; border-radius:4px; }
#lire .ch-decomp .pc.bb-on { background:#f6e7c9; box-shadow:0 0 0 3px #f6e7c9; border-radius:4px; }
#lire .ch-cles { list-style:none; margin:30px 0 0; padding:0; display:grid; gap:6px; }
#lire .ch-cles li { display:flex; align-items:center; gap:10px; padding:7px 12px; border:2px solid var(--filet); border-radius:12px; font-size:16.5px; line-height:1.4; opacity:.45; transition:opacity .25s, border-color .25s, background .25s; }
#lire .ch-cles li.vu { opacity:1; }
#lire .ch-cles li.actif { border-color:var(--c); background:#fbf4e6; }
#lire .ch-cles li[data-c="1"] { --c:#a96b1f; } #lire .ch-cles li[data-c="2"] { --c:#29231d; }
#lire .ch-cles .num { flex:none; width:24px; height:24px; border-radius:50%; background:var(--c); color:#fff; font:700 13px/24px 'Jost',sans-serif; text-align:center; }

/* ── le tanwin : un mot sans terminaison, le tanwin choisi s'y ajoute en bleu ── */
#lire #demo-tanwin .comp-titre { margin:0 0 14px; }
#lire .tw-scene { margin-top:14px; }
#lire #tw-mot svg { display:block; margin:0 auto; height:clamp(120px,30cqi,170px); width:auto; max-width:100%; }
#lire #tw-mot path { fill:#211c1a; }
#lire #tw-mot path.p-tanwin, #lire #tw-mot path.p-ajout { fill:#2a6fb0; }   /* le tanwin (et l'alif qu'ajoute la fatha) en bleu */

/* ── les cinq gestes d'un passage (observer, essayer, écouter, relire, faire vérifier) : une suite sobre, numérotée ── */
#lire ol.parcours { list-style:none; margin:0 0 22px; padding:0; counter-reset:geste; }
#lire ol.parcours > li { position:relative; counter-increment:geste; padding:10px 0 10px 54px; border-top:1px solid var(--filet); }
#lire ol.parcours > li:first-child { border-top:0; }
/* les numéros de la liste : des CERCLES pleins (les étoiles sont réservées aux titres d'étapes : on ne les confond pas) */
#lire ol.parcours > li::before { content:counter(geste); position:absolute; left:6px; top:12px; width:32px; height:32px; display:grid; place-items:center; box-sizing:border-box;
  border-radius:50%; background:#5c3d1e; font:600 16px/1 'Fredoka','Jost',sans-serif; color:#f1e7d8; }

/* ── mobile : des commandes faciles à toucher, des exemples assez grands, aucun débordement ── */
@media (max-width:700px) {
  #lire .demo { padding:14px 12px 12px; border-radius:16px; }
  #lire .exemple { font-size:38px; }
  #lire .exemple.enorme { font-size:104px; line-height:1; }
  #lire .demo-commandes .btn { flex:1 1 100%; }
  #lire .demo-commandes .petit { flex:1 1 calc(50% - 5px); }
  #lire .signe-btn { min-width:calc(50% - 5px); flex:1 1 calc(50% - 5px); }
  #lire .choix-signes.quatre .signe-btn { min-width:calc(50% - 5px); }
  #lire .trois-sons .signe-btn { min-width:92px; }
  #lire .ecouter { min-height:48px; }
  #lire .syl { width:84px; height:84px; }
}
@media (max-width:379px) { #lire .demo { padding:12px 10px; } }

#lire .ch-barre.sans-trans { transition:none; }
#lire .btn.en-cours { background:var(--or-clair); border-color:var(--or-fonce); color:var(--nuit); }

/* les boutons-liens de la page (« Apprendre avec ALAQ », « L'alphabet arabe », « Commencer avec la sourate Al-Fatiha », « Revoir l'alphabet arabe ») :
   marron foncé au repos, jaune doré au survol et au clic (Myriam, 03/10). Les boutons-commandes des démonstrations gardent la nuit. */
#lire a.btn.plein, #lire a.btn.vide { background:#5c3d1e; border-color:#5c3d1e; color:#f1e7d8; }
#lire a.btn.plein:hover, #lire a.btn.vide:hover, #lire a.btn.plein:active, #lire a.btn.vide:active { background:#e9ac52; border-color:#e9ac52; color:#29231d; }
/* les commandes de chaque démonstration (Myriam, 03/10) : « Voir la démonstration » reste sombre mais passe au doré au survol et au clic ;
   Pause · Rejouer · Étape précédente / suivante sont sur fond crème et passent au marron. Un bouton grisé (disabled) ne réagit pas. */
#lire .demo-commandes .petit { background:#fbf3e4; border-color:#b39c7b; color:var(--nuit); transition:background .15s, border-color .15s, color .15s; }
#lire .demo-commandes .petit:hover:not(:disabled), #lire .demo-commandes .petit:active:not(:disabled) { background:#5c3d1e; border-color:#5c3d1e; color:#f1e7d8; }
#lire .demo-commandes .btn.plein:hover, #lire .demo-commandes .btn.plein:active { background:#e9ac52; border-color:#e9ac52; color:#29231d; }
#lire .syl[aria-disabled="true"] { opacity:.55; }
/* la 2e ligne garde sa hauteur avec ou sans lettres : celle d'une ligne du mot (deux fois la taille de la police) */
#lire #demo-mot .mot-ar, #lire #demo-min .mot-ar { min-height:calc(2 * clamp(72px,24cqi,120px)); }
#lire .exemple-bloc.grande-hamza { margin:0 0 6px; line-height:1; }
#lire .grande-hamza .exemple.enorme { display:block; margin-top:-.28em; margin-bottom:-.12em; }
/* la famille de mots de la racine ج و د (section tajwid) : des filets fins, l'en-tête comme le sommaire, le mot arabe à droite */
#lire .famille { width:100%; max-width:560px; margin:4px 0 24px; border-collapse:collapse; font-size:17px; line-height:1.5; }
#lire .famille th { padding:8px 12px; border-bottom:1.5px solid var(--bord); color:#705238; font:400 13px/1.4 'Jost',sans-serif; letter-spacing:.16em; text-transform:uppercase; text-align:left; }
#lire .famille td { padding:8px 12px; border-bottom:1px solid var(--filet); vertical-align:middle; }
#lire .famille th:last-child, #lire .famille td.ar { text-align:right; }
#lire .famille td.ar { font-size:28px; line-height:1.4; color:#211c1a; white-space:nowrap; }