/* LE DÉBUT COMMUN des pages du Coran (/coran/<slug>/ ; le HTML vient de generateur/coran.mjs) — Myriam, 05/10 : « il faudra qu'elles
   aient toutes le même agencement en début de page » : sous l'en-tête du site (le bandeau nuit de sourate-socle.css, le même que
   /douas/ : aucune règle d'en-tête ici, sauf le titre arabe du H1), la LECTURE (div.lecture) — la NAVIGATION ENTRE
   SOURATES (la liste qui navigue : sourate-nav.js), la phrase « Lisez la sourate en arabe… », le lecteur (sourate-recitation.css), le
   texte arabe (sourate-mots.css), la navigation du bas — puis, sur une page enrichie, son introduction. Par-dessus sourate-socle.css
   (ses variables). La barre, trois colonnes : la sourate d'avant à gauche, la liste au centre, la sourate d'après à droite ; un côté
   vide (.snav-vide) garde sa colonne. Cibles ≥ 44 px ; la liste à 16 px (en dessous, l'iPhone agrandit la page au toucher).
   Aucune ombre portée. */
#sourate .snav { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:8px 16px; margin:0 0 30px; }
/* la barre du bas, sous le texte arabe : un filet au-dessus d'elle */
#sourate .snav-bas { margin:26px 0 0; padding-top:16px; border-top:1px solid var(--bord); }
#sourate .snav :is(.snav-prec, .snav-suiv) { display:inline-flex; align-items:center; gap:8px; min-width:0; min-height:44px; padding:6px 0; color:var(--titre);
  font:500 16px/1.3 'Jost',sans-serif; text-decoration:none; overflow-wrap:anywhere; transition:color .2s; }
#sourate .snav-prec { justify-self:start; }
#sourate .snav-suiv { justify-self:end; text-align:right; }
#sourate .snav-fleche { flex:none; transition:transform .2s; }      /* la flèche a la couleur du lien : --or-fonce ne ferait que 4,16:1 sur le papier */
/* la liste : la boîte des champs du hub (l'habit du système ôté, la même flèche dans tous les navigateurs) */
#sourate .snav-choix { -webkit-appearance:none; appearance:none; min-width:0; max-width:100%; min-height:44px; margin:0; padding:8px 40px 8px 16px; border:1.5px solid var(--bord); border-radius:12px;
  background-color:var(--carte); color:var(--encre); font:400 16px/1.3 'Jost',sans-serif; cursor:pointer; text-overflow:ellipsis; transition:border-color .2s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 12 8%22%3E%3Cpath d=%22M1.2 1.4 6 6.2l4.8-4.8%22 fill=%22none%22 stroke=%22%23765433%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:12px 8px; }
#sourate .snav-choix:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }      /* l'anneau du site (le socle ne vise pas select) */
@media (hover:hover) {      /* le survol, discret : le lien fonce, son trait d'or paraît, sa flèche avance d'un rien */
  #sourate .snav :is(.snav-prec, .snav-suiv):hover { color:#5e3f22; text-decoration:underline; text-decoration-color:var(--or); text-decoration-thickness:1.5px; text-underline-offset:5px; }
  #sourate .snav-prec:hover .snav-fleche { transform:translateX(-3px); }
  #sourate .snav-suiv:hover .snav-fleche { transform:translateX(3px); }
  #sourate .snav-choix:hover { border-color:var(--or); }
}

/* la barre du haut est le premier élément du corps, sous le bandeau nuit : de l'air sous le filet d'or, sans pousser la suite trop
   bas (le corps n'a plus ses 36 px d'en-tête : la barre les porte) */
#sourate.page-sourate .filet-or + .corps { padding-top:22px; }
#sourate.page-sourate .snav-haut { margin-bottom:24px; }

/* le H1 de TOUTES les pages : « Sourate {nom} — le même titre en arabe » (Myriam, 05/10 ; écrit par generateur/coran.mjs). Le titre
   arabe dans la police arabe du site, un peu plus grand que le latin (à corps égal le naskh paraît plus petit), d'un seul tenant
   (nowrap : « sourate » et le nom ne se séparent pas), sans épaissir la ligne du titre (line-height:0 : sa boîte ne pèse pas sur la
   ligne, le naskh a de hautes marges) : le bandeau garde la hauteur de celui de /douas/ */
#sourate h1 .h1-ar { font-family:'Noto Naskh Arabic',serif; font-weight:700; font-size:1.12em; line-height:0; white-space:nowrap; }

/* la phrase au-dessus du lecteur — « à mettre sur toute la largeur de la section » (Myriam, 05/10) : un paragraphe ordinaire du site
   (la taille et l'interligne du texte courant, à gauche, sur toute la largeur du corps), pas un petit bloc centré */
#sourate .lecture-phrase { margin:0; font-size:18px; line-height:1.8; }
/* sur une page ENRICHIE, son introduction (« le texte du début ») vient APRÈS le texte arabe (Myriam, 05/10) : de l'air entre la
   barre du bas et elle */
#sourate .lecture + * { margin-top:44px; }

/* au téléphone : la sourate d'avant et celle d'après sur UNE ligne, la liste dessous sur toute la largeur — 96 px de haut, là où les
   trois empilées de la maquette en prenaient 148 (mesuré à 390 px) : le lecteur reste près du titre. Deux noms trop longs pour
   tenir côte à côte (320 px) passent d'eux-mêmes l'un sous l'autre, chacun de son côté ; un côté vide ne laisse aucune case */
@media (max-width:700px) {
  #sourate .snav { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; margin-bottom:26px; }
  #sourate .snav-prec { order:1; }
  #sourate .snav-suiv { order:2; margin-left:auto; }
  #sourate .snav-choix { order:3; flex:1 0 100%; }
  #sourate .snav-vide { display:none; }
  #sourate .snav :is(.snav-prec, .snav-suiv) { max-width:100%; font-size:15.5px; }
  #sourate.page-sourate .filet-or + .corps { padding-top:18px; }
  #sourate.page-sourate .snav-haut { margin-bottom:22px; }
  #sourate .lecture-phrase { font-size:17px; }
  #sourate .lecture + * { margin-top:36px; }
}
@media (prefers-reduced-motion:reduce) { #sourate .snav-prec:hover .snav-fleche, #sourate .snav-suiv:hover .snav-fleche { transform:none; } }