/* Ce qui est propre aux pages des sourates (communes : rendu/), par-dessus sourate-socle.css : le texte de Myriam (versets cités,
   mention du tafsir, traduction du sens, mots en grand, petits chiffres et références des sources) et le bloc des sources. Le lecteur
   vit dans sourate-recitation.css ; le texte arabe interactif et la fiche d'un mot, dans sourate-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… » (« Synthèse basée principalement sur le Tafsir d'Ibn Kathir. ») : 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); }

/* la traduction du sens, sous le texte arabe (Āyat al-Kursī, 04/10) : une phrase par ligne, comme Myriam l'a écrite ; sa mention dessous,
   discrète. Le titre est un H2 (sous le H1 de la page), plus près du texte arabe que les autres. */
#sourate .traduction > h2 { margin-top:48px; }
#sourate .traduction > .trad { margin:0 0 6px; }      /* la taille du texte courant (18 px, 17 au téléphone : sourate-socle.css) */
#sourate .traduction > .mention { margin:14px 0 0; }

/* un récit rapporté (le hadith d'Abu Hurayra sur Āyat al-Kursī, Myriam 04/10) : un paragraphe par scène, un filet à gauche qui le
   distingue du commentaire */
#sourate .recit { margin:0 0 24px; padding:2px 0 2px 20px; border-left:3px solid var(--bord); }
#sourate .recit > p { font-size:18px; line-height:1.8; }      /* la taille et l'interligne du reste du texte (Myriam, 04/10) */
#sourate .recit > p:last-child { margin-bottom:0; }

/* une référence sous un paragraphe (« Référence : Ṣaḥiḥ Muslim, hadith n°810. ») : discrète, son nom mène à la source du bas */
#sourate section > .ref { margin:-6px 0 24px; font-size:15.5px; line-height:1.6; color:var(--sourd); }
#sourate .ref a { color:inherit; text-decoration:underline; text-decoration-color:var(--or); text-underline-offset:3px; }
#sourate .ref a:hover { color:var(--titre); }

/* 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 .sources-liste ul { margin:0 0 10px; padding-left:22px; }      /* une liste dans une source (ce que le tafsir explique) */
#sourate .sources-liste ul li { padding:1px 0; font-size:16.5px; line-height:1.6; }
#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 .recit { padding-left:14px; }
  #sourate .recit > p { 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 (au téléphone, « Al- » restait seul en bout de ligne) */
#sourate .insec { white-space:nowrap; }