/* Ce qui est propre aux pages des sourates, par-dessus socle.css : le texte de Myriam (versets cités, mention du tafsir, mots en
   grand, petits chiffres des sources) et le bloc des sources. Le lecteur vit dans recitation.css ; le texte arabe interactif et la
   fiche d'un mot, dans mots.css. L'arabe en Noto Naskh Arabic, toujours avec lang="ar". Aucune ombre portée. */

/* pas d'étoile numérotée devant les titres (celle des pages « Apprendre ») : ici, les seuls numéros sont ceux des versets */
#sourate .corps h2 { display:block; }
#sourate .corps h2::before { content:none; }

/* la mention sous « Comprendre la sourate Al-Fātiḥa » : discrète, comme demandé */
#sourate section > .mention { margin:-8px 0 28px; font-size:15.5px; line-height:1.6; font-style:italic; color:var(--sourd); }

/* un verset cité en grand, son sens juste dessous (la mise en page de « Comprendre le Coran »), mais à gauche comme le texte (Myriam,
   04/10) — « left » et non « start » : le verset porte dir="rtl", « start » le mettrait à droite */
#sourate section > .verset { margin:8px 0 22px; text-align:left; font:400 36px/1.9 'Noto Naskh Arabic',serif; color:#211c1a; }
#sourate section > .verset-sens { margin:-14px 0 28px; text-align:left; font-size:17px; line-height:1.5; font-style:italic; color:var(--sourd); }

/* « Apprendre Al-Fātiḥa autrement » : le mot arabe en grand, la phrase dont il est le sujet collée dessous ; tout à gauche, comme le
   texte (Myriam, 04/10) — « left » et non « start » : le mot arabe porte dir="rtl", « start » le mettrait à droite */
#sourate .mot-phrase { margin:26px 0 28px; text-align:left; }
#sourate .mot-phrase > .mot-cite { margin:0; font:400 34px/1.7 'Noto Naskh Arabic',serif; color:#211c1a; }
#sourate .mot-phrase > p:not(.mot-cite) { margin:0; font-size:18px; line-height:1.7; }

/* les appels vers les sources : un petit chiffre d'or en exposant, le même numéro que la source du bas */
#sourate .appel { font-size:.66em; line-height:0; margin-left:.02em; }
#sourate .appel a { display:inline-block; min-width:1.2em; padding:.15em .1em; border-radius:999px; color:var(--or-fonce); font-weight:600; text-align:center; text-decoration:none; }
#sourate .appel a:hover { background:var(--or-clair); }

/* les sources : un bloc à part, sur un papier un peu plus soutenu ; chaque source numérotée (le numéro des appels) */
#sourate .sources { margin:96px 0 0; padding:4px 26px 14px; background:#f7efe1; border:1px solid var(--filet); border-radius:22px; }
#sourate .sources > h2 { margin-top:34px; }
#sourate .sources > h3 { margin-top:22px; }
#sourate .sources > p { font-size:17px; line-height:1.75; }
#sourate .sources-liste { list-style:none; margin:26px 0 0; padding:0; counter-reset:src; }
#sourate .sources-liste > li { counter-increment:src; position:relative; padding:20px 0 14px 46px; border-top:1px solid #e3d3b8; scroll-margin-top:84px; }
#sourate .sources-liste > li::before { content:counter(src); content:counter(src) / ""; position:absolute; left:0; top:21px; width:30px; height:30px;
  display:grid; place-items:center; border-radius:50%; background:var(--or-clair); color:var(--titre); font:600 14px/1 'Jost',sans-serif; }
#sourate .sources-liste h3 { margin:0 0 6px; font-size:19px; }
#sourate .sources-liste p { margin:0 0 8px; font-size:16.5px; line-height:1.7; }
#sourate .sources-liste > li:target h3 { color:var(--or-fonce); }      /* la source atteinte par un petit chiffre */
#sourate .src-lien a { color:var(--titre); text-decoration:underline; text-decoration-color:var(--or); text-decoration-thickness:1.5px; text-underline-offset:4px; }
#sourate .src-lien a:hover { color:var(--or-fonce); }
#sourate .sources-liste .src-versets { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 8px; }
#sourate .src-versets a { display:inline-grid; place-items:center; min-width:44px; min-height:44px; border:1.5px solid var(--bord); border-radius:999px;
  color:var(--titre); font:600 16px/1 'Jost',sans-serif; text-decoration:none; }
#sourate .src-versets a:hover { border-color:var(--or); background:var(--or-clair); }

@media (max-width:700px) {
  #sourate section > .verset { font-size:30px; }
  #sourate .mot-phrase > .mot-cite { font-size:30px; }
  #sourate .mot-phrase > p:not(.mot-cite) { font-size:17px; }
  #sourate .sources { padding:2px 16px 10px; }
  #sourate .sources-liste > li { padding-left:40px; }
}

/* dans un titre, le nom de la sourate ne se coupe pas après « Al- » (au téléphone, « Al- » restait seul en bout de ligne) */
#sourate .insec { white-space:nowrap; }