/* LE SOCLE de la page : la charte de « Alphabet arabe », reprise TELLE QUELLE (alphabet.css puis ecoute.css de pages/alphabet-arabe/), seul le
   sélecteur change (#alphabet → #lire) pour que les deux pages gardent chacune leur feuille. Même famille : mêmes couleurs, mêmes titres,
   mêmes boutons, même sommaire, même anneau d'écoute. Ce qui est propre à cette page vit dans demos.css. Si la charte d'Alphabet change,
   refaire cette copie : sed 's/#alphabet/#lire/g' alphabet.css ecoute.css. */
/* La page « Alphabet arabe » : la charte claire des articles (papier, encre brune, titres en Fredoka 600, or pour les accents).
   Par-dessus base.css (la coque du site). L'arabe en Noto Naskh Arabic, toujours avec lang="ar". Aucune ombre portée. */
#lire { --papier:#fdf9f1; --carte:#fffbf5; --encre:#362b24; --titre:#765433; --sourd:#69594c; --filet:#e6d8c2;
  --bord:#d9c7a8; --or:#d68f35; --or-clair:#f6e7c9; --or-fonce:#a96b1f; --focus:#bd701d; --nuit:#29231d;
  color:var(--encre); }
#lire *, #lire *::before, #lire *::after { box-sizing:border-box; }
#lire [hidden] { display:none !important; }
#lire .ar { font-family:'Noto Naskh Arabic',serif; font-weight:400; }
#lire button { font:inherit; color:inherit; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
#lire :is(button, a, summary, input):focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.sr { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ── en-tête : la nuit, comme /blog/ (Myriam, 30/09) ── */
#lire .tete { max-width:840px; margin:0 auto; padding:34px 20px 8px; }
#lire .tete .orn { display:block; color:var(--or); font:400 26px/1 'Noto Naskh Arabic',serif; margin:0 0 18px; }   /* de l'air entre ۞ et le titre (Myriam, 30/09) */
#lire h1 { margin:0 0 18px; color:var(--titre); font:600 40px/1.25 'Fredoka','Jost',sans-serif; letter-spacing:-.01em; }
#lire .tete.nuit-t { max-width:none; background:var(--nuit); padding:28px 20px 30px; text-align:center; }
#lire .tete.nuit-t h1 { color:#e9ac52; margin:0; }
#lire .tete.nuit-t + .filet-or { height:3px; background:linear-gradient(90deg,#624023,#efbc74,#78532d); }

#lire .corps { max-width:840px; margin:0 auto; padding:0 20px 56px; }
#lire .filet-or + .corps { padding-top:36px; }      /* de l'air sous le filet d'or de l'en-tête nuit (Myriam, 30/09) */
#lire .corps > p, #lire section > p, #lire li { font-size:18px; line-height:1.8; }
#lire p { margin:0 0 18px; }      /* ni pretty ni balance : une ligne ne se coupe que faute de place (Myriam, 30/09) */
#lire strong { color:#211c1a; font-weight:600; }
/* un titre ne se coupe que faute de place (Myriam, 30/09) : jamais de text-wrap:balance, qui coupait « au milieu » */
/* de l'air au-dessus de chaque titre (Myriam, 30/09 : « encore un peu plus ») */
#lire h2 { margin:88px 0 18px; color:var(--titre); font:600 32px/1.25 'Fredoka','Jost',sans-serif; letter-spacing:-.01em; scroll-margin-top:84px; }
#lire h3 { margin:30px 0 10px; color:#211c1a; font:600 21px/1.35 'Fredoka','Jost',sans-serif; scroll-margin-top:84px; }
#lire section { scroll-margin-top:84px; }
#lire ul, #lire ol { margin:0 0 20px; padding-left:24px; }
#lire li { padding:3px 0; }
#lire .ar-inline { font-family:'Noto Naskh Arabic',serif; font-size:1.3em; line-height:1; color:#211c1a; padding:0 .12em; }

/* les deux boutons d'introduction */
#lire .actions { display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 8px; }
#lire .btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 24px; border-radius:999px;
  font:600 13px/1.2 'Jost',sans-serif; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; border:1.5px solid var(--nuit); transition:background .2s, color .2s, border-color .2s; }
#lire .btn.plein { background:var(--nuit); color:#f1e7d8; }
#lire .btn.plein:hover { background:#3b322b; }
#lire .btn.vide { background:transparent; color:var(--nuit); border-color:#b39c7b; }
#lire .btn.vide:hover { border-color:var(--nuit); }
#lire .btn[aria-disabled="true"] { background:#efe6d6; color:#8a7a69; border-color:#e0d3bd; cursor:not-allowed; }

/* le sommaire : compact, replié à l'arrivée (comme les articles) */
#lire .sommaire { margin:26px 0 0; border-top:1px solid var(--filet); border-bottom:1px solid var(--filet); }
#lire .sommaire summary { list-style:none; min-height:48px; padding:12px 0; display:flex; align-items:center; gap:10px; font:400 13px/1.4 'Jost',sans-serif; letter-spacing:.16em; text-transform:uppercase; color:#705238; }
#lire .sommaire summary::-webkit-details-marker { display:none; }
#lire .sommaire summary::after { content:''; width:8px; height:8px; border-right:1.5px solid #8d714d; border-bottom:1.5px solid #8d714d; transform:rotate(45deg); margin-bottom:4px; transition:transform .25s; }
#lire .sommaire[open] summary::after { transform:rotate(225deg); margin-bottom:-2px; }
#lire .sommaire ol { list-style:none; margin:0; padding:0 0 12px; columns:2; column-gap:28px; }
#lire .sommaire li { font-size:16px; line-height:1.45; padding:0; break-inside:avoid; }
#lire .sommaire a { display:block; padding:8px 0; color:var(--encre); text-decoration:none; }
#lire .sommaire a:hover { color:var(--titre); text-decoration:underline; text-underline-offset:4px; }

/* les numéros ١ ٢ ٣ des titres H2 et du sommaire — générés par CSS (compteur arabic-indic, texte de remplacement vide) :
   ni dans le texte du titre (référencement), ni lus par le lecteur d'écran. Étoile à huit branches = le motif de la landing,
   pour que les pages « Apprendre » ne ressemblent pas aux bornes en arche du blog (choix de Myriam, 30/09). */
#lire .corps { counter-reset:titre; }
#lire .corps h2 { counter-increment:titre; }
#lire .sommaire ol { counter-reset:s; }
#lire .sommaire li { counter-increment:s; }
#lire .corps h2 { display:flex; align-items:center; gap:14px; }
#lire .corps h2::before { content:counter(titre, arabic-indic); content:counter(titre, arabic-indic) / ""; flex:none; width:46px; height:46px;
  display:grid; place-items:center; padding-top:3px; box-sizing:border-box; background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22%3E%3Cpolygon points=%2220.00,2.00 25.27,7.27 32.73,7.27 32.73,14.73 38.00,20.00 32.73,25.27 32.73,32.73 25.27,32.73 20.00,38.00 14.73,32.73 7.27,32.73 7.27,25.27 2.00,20.00 7.27,14.73 7.27,7.27 14.73,7.27%22 fill=%22%23f6e7c9%22 stroke=%22%23d68f35%22 stroke-width=%221.4%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E") center / contain no-repeat; font:400 21px/1 'Noto Naskh Arabic',serif; color:#765433; }
#lire .sommaire a { display:flex; align-items:center; gap:12px; }
#lire .sommaire a::before { content:counter(s, arabic-indic); content:counter(s, arabic-indic) / ""; flex:none; width:30px; height:30px;
  display:grid; place-items:center; padding-top:2px; box-sizing:border-box; background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22%3E%3Cpolygon points=%2220.00,2.00 25.27,7.27 32.73,7.27 32.73,14.73 38.00,20.00 32.73,25.27 32.73,32.73 25.27,32.73 20.00,38.00 14.73,32.73 7.27,32.73 7.27,25.27 2.00,20.00 7.27,14.73 7.27,7.27 14.73,7.27%22 fill=%22%23f6e7c9%22 stroke=%22%23d68f35%22 stroke-width=%221.4%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E") center / contain no-repeat; font:400 15px/1 'Noto Naskh Arabic',serif; color:#765433; }
@media (max-width:700px) { #lire .corps h2::before { width:40px; height:40px; font-size:19px; } }


@media (max-width:700px) {
  #lire h1 { font-size:31px; }
  #lire h2 { font-size:26px; margin-top:68px; }
  #lire h3 { font-size:19px; }
  #lire .corps > p, #lire section > p, #lire li { font-size:17px; }
  #lire .sommaire ol { columns:1; }
  #lire .actions .btn { flex:1 1 220px; }
}
@media (max-width:379px) { #lire .corps, #lire .tete { padding-left:16px; padding-right:16px; } }
@media (prefers-reduced-motion:reduce) { #lire *, #lire *::before, #lire *::after { transition:none !important; animation:none !important; } }
/* Pendant l'écoute : un anneau d'or qui s'élargit et s'efface (choix de Myriam, 30/09) — un signe DÉCORATIF, jamais une forme
   d'onde. Il vit dans tout ce qui parle : une case, le grand haut-parleur du jeu 1, les « Écouter » du jeu 2, les lettres à revoir.
   La classe .joue est posée par son.js quand le son JOUE vraiment, et retirée à la fin, à l'arrêt ou à l'erreur. */
#lire .joue { z-index:2; }
#lire .joue::after,
#lire .ecouter-grand.joue .hp::after { content:''; position:absolute; inset:-3px; border:2.5px solid var(--or); border-radius:inherit; pointer-events:none; animation:al-anneau 1.05s ease-out infinite; }
#lire .ecouter-grand.joue::after { content:none; }
@keyframes al-anneau { from { transform:scale(1); opacity:.95; } to { transform:scale(1.32); opacity:0; } }

/* mouvements réduits : l'anneau ne bouge plus ; une capsule aux trois points FIXES, posée sur le bord bas, dit « ça parle » */
#lire .onde { display:none; }
@media (prefers-reduced-motion:reduce) {
  #lire .joue::after, #lire .joue .hp::after { content:none !important; }
  #lire .joue .onde { position:absolute; left:50%; bottom:-11px; transform:translateX(-50%); display:flex; gap:4px; padding:5px 8px; border-radius:999px; background:var(--nuit); pointer-events:none; }
  #lire .joue .onde i { display:block; width:7px; height:7px; border-radius:50%; background:#e9ac52; }
}