/* LE HUB /coran/ — la STRUCTURE de la maquette de Myriam (05/10), l'ALLURE du site : l'en-tête de /douas/ (le bandeau nuit), Fredoka
   pour les titres, Jost pour le texte, Noto Naskh Arabic pour l'arabe, ses couleurs (les mêmes valeurs que rendu/sourate-socle.css),
   sous son propre id (#coran, comme #douas ou #alphabet : pas #sourate, dont le socle habillerait ses titres et ses listes). Tout
   sélecteur commence par #coran.
   Par-dessus base.css (la coque). Aucune ombre portée. Cibles ≥ 44 px ; champ et liste à 16 px (en dessous, l'iPhone agrandit la page
   au toucher) ; tout texte ≥ 4,5:1 sur son fond. La zone : celle de /douas/ (1100 px), le texte centré plus étroit. */
#coran { --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; --creme:#faf3e6; color:var(--encre); }
#coran *, #coran *::before, #coran *::after { box-sizing:border-box; }
#coran [hidden] { display:none !important; }
#coran .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; }
#coran :is(a, input, select, button):focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
#coran p { margin:0; }

/* ── L'EN-TÊTE : celui du SITE, comme /douas/ (Myriam, 05/10 : « le header de la page doit être identique à celui de la page douas,
   il faut toujours adapter les maquettes au design du site »). Ces règles sont celles de pages/douas/socle.css, COPIÉES telles quelles
   — seul le sélecteur change (#douas → #coran) —, avec leurs variantes au téléphone (en bas du fichier). Si l'en-tête de /douas/
   change, refaire cette copie : outils/banc-coran.mjs compare les styles calculés des deux pages, de 320 à 1280 px. Le titre ne se
   coupe que faute de place (sa règle du 30/09) : jamais de text-wrap:balance ici. ── */
#coran .tete { max-width:840px; margin:0 auto; padding:34px 20px 8px; }
#coran .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) */
#coran h1 { margin:0 0 18px; color:var(--titre); font:600 40px/1.25 'Fredoka','Jost',sans-serif; letter-spacing:-.01em; }
#coran .tete.nuit-t { max-width:none; background:var(--nuit); padding:28px 20px 30px; text-align:center; }
#coran .tete.nuit-t h1 { color:#e9ac52; margin:0; }
#coran .tete.nuit-t + .filet-or { height:3px; background:linear-gradient(90deg,#624023,#efbc74,#78532d); }
#coran .filet-or + .corps { padding-top:36px; }      /* de l'air sous le filet d'or de l'en-tête nuit (Myriam, 30/09) */

/* ── sous le filet, sur le papier, centrés : la phrase, puis la recherche et la liste côte à côte ── */
#coran .hub-tete { max-width:1100px; margin:0 auto; padding:0 20px 8px; text-align:center; }
/* les textes centrés (la phrase d'introduction, « Aller plus loin », la carte de nuit) : lignes équilibrées, comme l'intro de /douas/ */
#coran .hub-intro { max-width:700px; margin:0 auto; font-size:18px; line-height:1.65; color:var(--sourd); text-wrap:balance; }
#coran .hub-choix { max-width:780px; margin:32px auto 0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,290px); gap:12px; }
/* le champ et la liste : la même boîte (l'habit du système ôté : Safari arrondit un champ de recherche, chaque navigateur a sa flèche) */
#coran .hub-choix :is(input, select) { -webkit-appearance:none; appearance:none; width:100%; min-width:0; min-height:52px; margin:0; padding:12px 18px; border:1.5px solid var(--bord);
  border-radius:14px; background-color:var(--carte); color:var(--encre); font:400 16px/1.3 'Jost',sans-serif; transition:border-color .2s; }
#coran .hub-choix input::placeholder { color:var(--sourd); opacity:1; }
/* la croix qui vide le champ (Chrome, Safari) : celle du site, pas le bleu du système */
#coran .hub-choix input::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; width:22px; height:22px; margin:0 -4px 0 8px; cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 22 22%22%3E%3Cpath d=%22M6.5 6.5l9 9m0-9l-9 9%22 fill=%22none%22 stroke=%22%23765433%22 stroke-width=%221.8%22 stroke-linecap=%22round%22/%3E%3C/svg%3E") center / 22px no-repeat; }
#coran .hub-choix select { padding-right:46px; cursor:pointer; text-overflow:ellipsis;
  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 18px center; background-size:12px 8px; }
#coran #hub-etat { min-height:26px; margin:10px 0 0; font-size:15.5px; line-height:26px; color:var(--sourd); }

/* les trois libellés (« Toutes les sourates », « Aller plus loin », « Apprendre avec ALAQ ») : la même allure — petit, capitales,
   lettres espacées, doré. #8f5814 sur clair (5,6:1 ; --or-fonce n'y fait que 4,16:1), #e9ac52 sur la carte de nuit */
#coran .hub-label { margin:0 0 16px; color:#8f5814; font:600 13px/1.4 'Jost',sans-serif; letter-spacing:.16em; text-transform:uppercase; }

/* ── toutes les sourates : deux colonnes, une au téléphone ── */
#coran .hub-liste { max-width:1100px; margin:0 auto; padding:18px 20px 56px; }
#coran .hub-liste > .hub-label { margin-bottom:8px; }
#coran .hub-legende { margin:0; font-size:15px; line-height:1.5; color:var(--sourd); }
/* le passage que la recherche désigne (Āyat al-Kursi) : un lien d'or pâle au-dessus de la grille, sa flèche au bout */
#coran .hub-passage { margin:14px 0 0; font-size:16.5px; line-height:1.45; }
#coran .hub-passage a { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:56px; padding:12px 18px; border:1.5px solid var(--or); border-radius:16px;
  background:var(--or-clair); color:var(--encre); text-decoration:none; font-weight:500; }
#coran .hub-passage a::after { content:'→'; content:'→' / ''; flex:none; color:var(--titre); font-size:18px; }
#coran .hub-grille { list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#coran .hub-grille > li { margin:0; padding:0; min-width:0; }
/* une carte : la pastille du numéro, le nom et, dessous, « sens · N versets », le nom arabe à droite (il ne se coupe jamais) */
#coran .hub-carte { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; column-gap:14px; height:100%; min-height:78px; padding:14px 18px 14px 16px;
  border:1.5px solid var(--bord); border-radius:16px; background:var(--carte); color:var(--encre); text-decoration:none; transition:border-color .2s, background-color .2s, transform .2s; }
#coran .hub-num { grid-row:1 / span 2; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:var(--or-clair); color:var(--titre); font:600 14px/1 'Jost',sans-serif; }
#coran .hub-noms { grid-row:1 / span 2; min-width:0; display:flex; flex-direction:column; gap:1px; }
#coran .hub-nom { font:600 17.5px/1.3 'Fredoka','Jost',sans-serif; overflow-wrap:anywhere; }
#coran .hub-sens { font-size:14px; line-height:1.4; color:var(--sourd); text-wrap:pretty; }      /* sur deux lignes, « versets » ne reste pas seul */
#coran .hub-ar { grid-column:3; grid-row:1 / span 2; justify-self:end; font:400 27px/1.45 'Noto Naskh Arabic',serif; white-space:nowrap; color:#211c1a; }
/* à venir : « grisé » = pas de fond, un bord pâle, tous ses textes en --sourd (6,4:1) — jamais d'opacité sur du texte ; « Bientôt »
   sous le nom arabe */
#coran .hub-carte.a-venir { background:transparent; border-color:var(--filet); color:var(--sourd); }
#coran .a-venir .hub-num { background:transparent; border:1px solid var(--bord); color:var(--sourd); }
#coran .a-venir .hub-nom { font-weight:500; }
#coran .a-venir .hub-ar { grid-row:1; align-self:end; font-size:24px; line-height:1.4; color:var(--sourd); }
#coran .hub-bientot { grid-column:3; grid-row:2; justify-self:end; align-self:start; font:500 11px/1.3 'Jost',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--sourd); }

/* ── aller plus loin : une bande d'un papier plus soutenu (celui des sources), les pages enrichies en pastilles ── */
#coran .hub-plus { background:#f7efe1; border-top:1px solid var(--filet); border-bottom:1px solid var(--filet); text-align:center; }
#coran .hub-plus-in { max-width:1100px; margin:0 auto; padding:48px 20px 50px; }
#coran .hub-plus p { max-width:780px; margin:0 auto; font-size:17px; line-height:1.7; color:var(--sourd); text-wrap:balance; }
#coran .hub-puces { list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
#coran .hub-puces li { margin:0; padding:0; }
#coran .hub-puce { display:inline-flex; align-items:center; min-height:44px; padding:8px 18px; border:1.5px solid var(--bord); border-radius:999px; background:var(--carte); color:var(--encre);
  font:600 15px/1.2 'Jost',sans-serif; text-decoration:none; transition:border-color .2s, background-color .2s; }

/* ── apprendre avec ALAQ : la carte de nuit aux coins ronds, le libellé doré, les deux boutons (or plein, contour clair) ── */
#coran .hub-alaq { max-width:1100px; margin:0 auto; padding:60px 20px 76px; }
#coran .hub-nuit { padding:50px 42px 52px; border-radius:26px; background:var(--nuit); color:#f1e7d8; text-align:center; }
#coran .hub-nuit .hub-label { color:#e9ac52; }
#coran .hub-nuit p { max-width:760px; margin:0 auto; font-size:17px; line-height:1.7; color:#d8c8b0; text-wrap:balance; }
#coran .hub-nuit .hub-actions { margin-top:28px; display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
#coran .hub-btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:10px 26px; border-radius:999px; border:1.5px solid transparent;
  font:600 16px/1.2 'Jost',sans-serif; text-decoration:none; transition:background-color .2s, border-color .2s, color .2s; }
#coran .hub-btn.plein { background:var(--or); color:#241f1a; }
#coran .hub-btn.vide { border-color:rgba(241,231,216,.45); color:#f1e7d8; }
#coran .hub-nuit a:focus-visible { outline-color:#e9ac52; }

/* le survol, discret, là où il y a une souris */
@media (hover:hover) {
  #coran .hub-choix :is(input, select):hover { border-color:var(--or); }
  #coran a.hub-carte:hover { border-color:var(--or); background:#fff; transform:translateY(-2px); }
  #coran .hub-passage a:hover { background:#f3dfba; }
  #coran .hub-puce:hover { border-color:var(--or); background:#fff; }
  #coran .hub-btn.plein:hover { background:#e9ac52; }
  #coran .hub-btn.vide:hover { border-color:#e9ac52; color:#e9ac52; }
}

@media (max-width:760px) { #coran .hub-grille { grid-template-columns:minmax(0,1fr); } }      /* deux colonnes trop étroites : une seule, comme la maquette */
@media (max-width:700px) {
  #coran h1 { font-size:31px; }      /* l'en-tête au téléphone : comme /douas/ */
  #coran .hub-intro { font-size:17px; }
  #coran .hub-choix { margin-top:26px; grid-template-columns:minmax(0,1fr); }
  #coran .hub-liste { padding-bottom:48px; }
  #coran .hub-grille { gap:10px; }
  #coran .hub-carte { column-gap:12px; padding:12px 16px 12px 14px; }
  #coran .hub-plus-in { padding:42px 20px 44px; }
  #coran .hub-alaq { padding:48px 20px 60px; }
  #coran .hub-nuit { padding:42px 22px 40px; }
  #coran .hub-btn { flex:1 1 220px; }
}
@media (max-width:379px) {
  /* (.tete : la règle de /douas/, copiée — là-bas comme ici, le bandeau nuit garde ses 20 px : sa propre règle l'emporte) */
  #coran :is(.tete, .hub-tete, .hub-liste, .hub-plus-in, .hub-alaq) { padding-left:16px; padding-right:16px; }
  #coran .hub-carte { column-gap:10px; padding:12px; }
  #coran .hub-num { width:36px; height:36px; font-size:13px; }
  #coran .hub-nom { font-size:16.5px; }
  #coran .hub-ar { font-size:24px; }
  #coran .a-venir .hub-ar { font-size:22px; }
}
@media (prefers-reduced-motion:reduce) { #coran *, #coran *::before, #coran *::after { transition:none !important; animation:none !important; } #coran a.hub-carte:hover { transform:none; } }