/* Le texte arabe des pages des sourates, mot à mot (sourate-mots.js, sourate-recitation.js ; commun à toutes : rendu/) : chaque mot
   est un bouton. Le mot RÉCITÉ est surligné d'or (.lu) ; le mot dont la fiche est ouverte est cerclé d'or ([aria-expanded="true"]).
   Ni l'un ni l'autre ne déplace rien : seuls le fond et une ombre INTÉRIEURE changent, sur une boîte qui a toujours la même taille.
   La fiche d'un mot est de nuit : ce site n'a aucune ombre portée, c'est son fond qui la détache du papier. */
#sourate .coran { position:relative; margin:34px 0 8px; padding:12px 20px 18px; background:var(--carte); border:1.5px solid var(--bord); border-radius:22px; }
#sourate .coran > .coran-aide { margin:0 0 2px; text-align:center; font:400 14px/1.5 'Jost',sans-serif; color:var(--sourd); }
#sourate .coran > .coran-clavier { display:none; margin:6px 0 0; text-align:center; font:400 13.5px/1.5 'Jost',sans-serif; color:var(--sourd); }
#sourate .coran:has(.mot:focus-visible) > .coran-clavier { display:block; }      /* l'aide du clavier, au clavier seulement */

/* les versets : grands, centrés, un par ligne de lecture, séparés par un filet court ; la rosace ۝ du numéro (celle du blog) au bout */
#sourate .versets { font:400 38px/2.2 'Noto Naskh Arabic',serif; color:#211c1a; text-align:center; }
#sourate .aya { margin:0; padding:2px 0; }
#sourate .aya + .aya::before { content:''; display:block; width:64px; height:1px; margin:4px auto 6px; background:var(--bord); }
#sourate .aya-num { font-size:.78em; color:#b48a53; }
#sourate .aya-fin { white-space:nowrap; }      /* le dernier mot et son numéro ne se séparent jamais */

/* un mot : un bouton sans habit, de la taille du mot (ses voyelles comprises) */
#sourate .mot { display:inline-block; margin:0; padding:0 .12em; border:0; border-radius:.3em; background:transparent; color:inherit;
  font:inherit; line-height:1.8; vertical-align:baseline; -webkit-appearance:none; appearance:none; transition:background-color .2s ease, box-shadow .2s ease; }
@media (hover:hover) { #sourate .mot:hover { background:#fbf3e3; } }
#sourate .mot:focus-visible { outline-offset:2px; }

/* LE MOT RÉCITÉ — le surlignage qui suit la voix : un fond d'or pâle et un trait d'or dessous (fond + forme, pas une couleur seule).
   C'est ici qu'on règle son allure : couleur du fond, épaisseur du trait (le 3px), vitesse du fondu (le .2s plus haut). */
#sourate .mot.lu { background:var(--or-clair); box-shadow:inset 0 -3px 0 var(--or); }

/* le mot dont la traduction est ouverte (le cerclage s'ajoute au surlignage s'il est aussi récité) */
#sourate .mot[aria-expanded="true"] { box-shadow:inset 0 0 0 2px var(--or); }
#sourate .mot.lu[aria-expanded="true"] { box-shadow:inset 0 0 0 2px var(--or), inset 0 -3px 0 var(--or); }

/* la fiche d'un mot : le mot en grand, sa traduction ; placée par mots.js au-dessus du mot (dessous faute de place), jamais hors
   de l'écran ; la petite flèche vise le mot */
#sourate .mot-fiche { position:absolute; z-index:40; left:0; top:0; width:max-content; min-width:180px; max-width:min(320px, calc(100vw - 24px));
  padding:12px 50px 16px; border-radius:16px; background:var(--nuit); color:#f1e7d8; text-align:center; }
#sourate .mot-fiche:focus { outline:none; }
#sourate .mot-fiche:focus-visible { outline:3px solid #e9ac52; outline-offset:3px; }
#sourate .mot-fiche .mf-ar { margin:0; font:400 34px/1.75 'Noto Naskh Arabic',serif; color:#e9ac52; }
#sourate .mot-fiche .mf-fr { margin:0; font:500 17px/1.4 'Jost',sans-serif; color:#f1e7d8; }
#sourate .mot-fiche .fermer { position:absolute; top:4px; right:4px; width:44px; height:44px; padding:0; display:grid; place-items:center; border:0;
  border-radius:50%; background:transparent; color:#d8c8b0; font:400 28px/1 'Jost',sans-serif; }
#sourate .mot-fiche .fermer:hover { color:#e9ac52; }
#sourate .mot-fiche .fermer:focus-visible { outline:2px solid #e9ac52; outline-offset:-5px; }
#sourate .mf-fleche { position:absolute; left:50%; width:14px; height:14px; margin-left:-7px; background:var(--nuit); transform:rotate(45deg); }
#sourate .mot-fiche[data-cote="bas"] .mf-fleche { top:-6px; }
#sourate .mot-fiche[data-cote="haut"] .mf-fleche { bottom:-6px; }

@media (max-width:700px) {
  #sourate .coran { padding:10px 12px 14px; }
  #sourate .versets { font-size:31px; }
}
@media (max-width:379px) { #sourate .versets { font-size:28px; } }