/* LE SOCLE des pages des sourates (Al-Fātiḥa d'abord) : la charte de « Alphabet arabe », reprise TELLE QUELLE (comme le socle.css de
   « Douas » et de « Comprendre le Coran »), seul le sélecteur change (#alphabet → #sourate). Ce qui est propre à la page vit dans
   page.css (le texte de Myriam, les sources), recitation.css (le lecteur) et mots.css (le texte arabe et la fiche d'un mot).
   Si la charte d'Alphabet change, refaire cette copie : sed 's/#alphabet/#sourate/g' alphabet.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. */
#sourate { --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); }
#sourate *, #sourate *::before, #sourate *::after { box-sizing:border-box; }
#sourate [hidden] { display:none !important; }
#sourate .ar { font-family:'Noto Naskh Arabic',serif; font-weight:400; }
#sourate button { font:inherit; color:inherit; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
#sourate :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) ── */
#sourate .tete { max-width:840px; margin:0 auto; padding:34px 20px 8px; }
#sourate .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) */
#sourate h1 { margin:0 0 18px; color:var(--titre); font:600 40px/1.25 'Fredoka','Jost',sans-serif; letter-spacing:-.01em; }
#sourate .tete.nuit-t { max-width:none; background:var(--nuit); padding:28px 20px 30px; text-align:center; }
#sourate .tete.nuit-t h1 { color:#e9ac52; margin:0; }
#sourate .tete.nuit-t + .filet-or { height:3px; background:linear-gradient(90deg,#624023,#efbc74,#78532d); }

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

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


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