/* 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. */
#alphabet { --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); }
#alphabet *, #alphabet *::before, #alphabet *::after { box-sizing:border-box; }
#alphabet [hidden] { display:none !important; }
#alphabet .ar { font-family:'Noto Naskh Arabic',serif; font-weight:400; }
#alphabet button { font:inherit; color:inherit; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
#alphabet :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) ── */
#alphabet .tete { max-width:840px; margin:0 auto; padding:34px 20px 8px; }
#alphabet .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) */
#alphabet h1 { margin:0 0 18px; color:var(--titre); font:600 40px/1.15 'Fredoka','Jost',sans-serif; letter-spacing:-.01em; }
#alphabet .tete.nuit-t { max-width:none; background:var(--nuit); padding:28px 20px 30px; text-align:center; }
#alphabet .tete.nuit-t h1 { color:#e9ac52; margin:0; }
#alphabet .tete.nuit-t + .filet-or { height:3px; background:linear-gradient(90deg,#624023,#efbc74,#78532d); }

#alphabet .corps { max-width:840px; margin:0 auto; padding:0 20px 56px; }
#alphabet .filet-or + .corps { padding-top:36px; }      /* de l'air sous le filet d'or de l'en-tête nuit (Myriam, 30/09) */
#alphabet .corps > p, #alphabet section > p, #alphabet li { font-size:18px; line-height:1.8; }
#alphabet p { margin:0 0 18px; }      /* ni pretty ni balance : une ligne ne se coupe que faute de place (Myriam, 30/09) */
#alphabet 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 ») */
#alphabet h2 { margin:88px 0 18px; color:var(--titre); font:600 32px/1.25 'Fredoka','Jost',sans-serif; letter-spacing:-.01em; scroll-margin-top:84px; }
#alphabet h3 { margin:30px 0 10px; color:#211c1a; font:600 21px/1.35 'Fredoka','Jost',sans-serif; scroll-margin-top:84px; }
#alphabet section { scroll-margin-top:84px; }
#alphabet ul, #alphabet ol { margin:0 0 20px; padding-left:24px; }
#alphabet li { padding:3px 0; }
#alphabet .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 */
#alphabet .actions { display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 8px; }
#alphabet .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; }
#alphabet .btn.plein { background:var(--nuit); color:#f1e7d8; }
#alphabet .btn.plein:hover { background:#3b322b; }
#alphabet .btn.vide { background:transparent; color:var(--nuit); border-color:#b39c7b; }
#alphabet .btn.vide:hover { border-color:var(--nuit); }
#alphabet .btn[aria-disabled="true"] { background:#efe6d6; color:#8a7a69; border-color:#e0d3bd; cursor:not-allowed; }

/* le sommaire : compact, replié à l'arrivée (comme les articles) */
#alphabet .sommaire { margin:26px 0 0; border-top:1px solid var(--filet); border-bottom:1px solid var(--filet); }
#alphabet .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; }
#alphabet .sommaire summary::-webkit-details-marker { display:none; }
#alphabet .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; }
#alphabet .sommaire[open] summary::after { transform:rotate(225deg); margin-bottom:-2px; }
#alphabet .sommaire ol { list-style:none; margin:0; padding:0 0 12px; columns:2; column-gap:28px; }
#alphabet .sommaire li { font-size:16px; line-height:1.45; padding:0; break-inside:avoid; }
#alphabet .sommaire a { display:block; padding:8px 0; color:var(--encre); text-decoration:none; }
#alphabet .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). */
#alphabet .corps { counter-reset:titre; }
#alphabet .corps h2 { counter-increment:titre; }
#alphabet .sommaire ol { counter-reset:s; }
#alphabet .sommaire li { counter-increment:s; }
#alphabet .corps h2 { display:flex; align-items:center; gap:14px; }
#alphabet .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; }
#alphabet .sommaire a { display:flex; align-items:center; gap:12px; }
#alphabet .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) { #alphabet .corps h2::before { width:40px; height:40px; font-size:19px; } }


@media (max-width:700px) {
  #alphabet h1 { font-size:31px; }
  #alphabet h2 { font-size:26px; margin-top:68px; }
  #alphabet h3 { font-size:19px; }
  #alphabet .corps > p, #alphabet section > p, #alphabet li { font-size:17px; }
  #alphabet .sommaire ol { columns:1; }
  #alphabet .actions .btn { flex:1 1 220px; }
}
@media (max-width:379px) { #alphabet .corps, #alphabet .tete { padding-left:16px; padding-right:16px; } }
@media (prefers-reduced-motion:reduce) { #alphabet *, #alphabet *::before, #alphabet *::after { transition:none !important; animation:none !important; } }