/* La fiche d'une doua : la fenêtre <dialog> des jeux d'Alphabet arabe (plein écran sur téléphone, une carte au centre au-dessus),
   sur fond de NUIT : l'image dans la première ligne, le titre, l'arabe en grand, la traduction ; en pied, les flèches des diapos
   (plusieurs textes) et le lecteur. Cibles ≥ 44 px. */
#douas dialog.fiche { width:min(720px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:0; margin:auto; border:1px solid rgba(214,143,53,.28);
  border-radius:18px; background:var(--nuit); color:#f1e7d8; overflow:hidden; color-scheme:dark; }   /* dark : une barre de défilement de nuit, pas blanche */
#douas dialog.fiche[open] { display:flex; flex-direction:column; animation:fiche-entree .18s ease-out; }
#douas dialog.fiche::backdrop { background:rgba(24,20,16,.64); }
@keyframes fiche-entree { from { opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:none; } }
@media (max-width:600px) { #douas dialog.fiche { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; border:0; border-radius:0; } }
#douas dialog.fiche :is(button, input):focus-visible { outline:3px solid #e9ac52; outline-offset:3px; }

/* la tête : la catégorie, et la croix */
#douas .fiche-tete { display:flex; align-items:center; gap:12px; padding:10px 10px 10px 20px; border-bottom:1px solid rgba(214,143,53,.18); }
#douas .fiche-cat { margin:0; flex:1; min-width:0; color:#d68f35; font:600 12px/1.4 'Jost',sans-serif; letter-spacing:.16em; text-transform:uppercase; }
#douas .fermer { flex:none; width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(241,231,216,.35); background:transparent; color:#f1e7d8; font:400 19px/1 'Jost',sans-serif; }
#douas .fermer:hover { border-color:#e9ac52; color:#e9ac52; }

/* le corps, qui défile : l'image, le titre, le texte en cours (glisser du doigt pour changer de diapo) */
#douas .fiche-corps { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; touch-action:pan-y; padding:0 0 22px; }
#douas .fiche-image { position:relative; width:100%; aspect-ratio:16/9; max-height:32vh; overflow:hidden; }
#douas .fiche-image.vide::before { top:12%; height:76%; }
#douas .fiche-titre { margin:20px 24px 0; color:#e9ac52; font:600 26px/1.3 'Fredoka','Jost',sans-serif; text-align:center; scroll-margin-top:0; }
#douas .fiche-titre:focus { outline:none; }
#douas .diapo { padding:0 24px; text-align:center; }
#douas .diapo-titre { margin:6px 0 0; color:#b5a48f; font:500 14px/1.5 'Jost',sans-serif; }
#douas .diapo-arabe { margin:16px 0 18px; color:#f1e7d8; font:400 34px/2.05 'Noto Naskh Arabic',serif; overflow-wrap:break-word; }
/* sous l'arabe, deux étiquettes : la répétition du document de Myriam (« 3 fois », « 100 fois »…), et le tag de transmission
   (ṣaḥiḥ, ḍaʿif, coran, divergence : les couleurs de son document, éclaircies pour la nuit) */
#douas .diapo-etiquettes { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 0 20px; }
#douas .diapo-repetition, #douas .diapo-tag { display:inline-block; padding:5px 14px; border:1px solid; border-radius:999px; font:500 13.5px/1.45 'Jost',sans-serif; }
#douas .diapo-repetition { border-color:rgba(214,143,53,.45); color:#e9ac52; }
#douas .diapo-tag { border-color:rgba(241,231,216,.35); color:#d8c8b0; }
#douas .diapo-tag.tag-sahih { border-color:rgba(132,196,145,.55); background:rgba(132,196,145,.12); color:#a8dcb2; }
#douas .diapo-tag.tag-daif { border-color:rgba(230,128,118,.55); background:rgba(230,128,118,.12); color:#f2aaa2; }
#douas .diapo-tag.tag-coran { border-color:rgba(138,176,224,.55); background:rgba(138,176,224,.12); color:#b2cdf0; }
#douas .diapo-tag.tag-divergence { border-color:rgba(242,168,112,.55); background:rgba(242,168,112,.12); color:#f6bf93; }
#douas .diapo-sens { margin:0; color:#d8c8b0; font-size:17px; line-height:1.7; }
/* la traduction, la source et l'encadré : la largeur de la fiche, comme l'arabe (Myriam, 04/10) */
/* sous la traduction : la source, en petit ; pour une doua « divergence », le détail des avis, dans la couleur de son étiquette */
#douas .diapo-source { margin:14px 0 0; color:#a4937f; font:400 13.5px/1.55 'Jost',sans-serif; }
#douas .diapo-divergence { margin:14px 0 0; padding:10px 14px; border-left:2px solid rgba(242,168,112,.6); border-radius:0 8px 8px 0;
  background:rgba(242,168,112,.07); color:#d8c8b0; font:400 14px/1.6 'Jost',sans-serif; text-align:left; }
#douas .diapo-divergence .avis-titre { display:block; margin:0 0 2px; color:#f6bf93; font-weight:600; }

/* le pied : les diapos (‹ 2 / 5 ›), puis le lecteur — toujours sous le doigt, même quand le texte est long */
#douas .fiche-pied { padding:12px 20px calc(14px + env(safe-area-inset-bottom,0px)); border-top:1px solid rgba(214,143,53,.18); background:#2f2823; }
#douas .diapos-nav { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 16px; margin:0 0 10px; }
#douas .diapos-nav :is(.diapo-debut, .diapo-prec, .diapo-suiv, .diapo-fin) {width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(214,143,53,.5); background:transparent; color:#f1e7d8; font:400 26px/1 'Jost',sans-serif; padding:0 0 3px; }
#douas .diapos-nav :is(.diapo-debut, .diapo-prec, .diapo-suiv, .diapo-fin):hover:not(:disabled) { border-color:#e9ac52; color:#e9ac52; }
#douas .diapos-nav :is(.diapo-debut, .diapo-prec, .diapo-suiv, .diapo-fin):disabled { opacity:.3; cursor:default; }
#douas .diapos-nav :is(.diapo-debut, .diapo-fin) { font-size:22px; padding-bottom:4px; }   /* « » : un peu plus petits que ‹ ›, qu'ils encadrent */
/* « Jouer tout » (Myriam, 04/10) : les diapos défilent seules ; pendant la lecture, il devient « Arrêter », plein */
#douas .jouer-tout { display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 18px 0 14px; border-radius:999px; border:1.5px solid rgba(214,143,53,.6);
  background:transparent; color:#f1e7d8; font:500 14px/1.2 'Jost',sans-serif; white-space:nowrap; }
#douas .jouer-tout svg { width:17px; height:17px; flex:none; }
#douas .jouer-tout .stop, #douas .jouer-tout.actif .lire { display:none; }
#douas .jouer-tout.actif .stop { display:block; }
#douas .jouer-tout:hover:not(.actif) { border-color:#e9ac52; color:#e9ac52; }
#douas .jouer-tout.actif { background:#d68f35; border-color:#d68f35; color:var(--nuit); font-weight:600; }
#douas .diapo-compte { margin:0; min-width:64px; text-align:center; color:#d8c8b0; font:500 14px/1.4 'Jost',sans-serif; font-variant-numeric:tabular-nums; }

/* le lecteur : ▶ / ❚❚, la position (au doigt ou au clavier), le temps ; et, pour une doua à répéter, « 1 fois » ou « ↻ 3 fois »
   (pendant la série, « ↻ 2 / 3 ») — une doua d'une seule fois n'a pas ces deux boutons */
#douas .lecteur { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px 14px; }
#douas .lect-play { width:52px; height:52px; padding:0; border:0; border-radius:50%; background:#d68f35; color:var(--nuit); display:grid; place-items:center; }
#douas .lect-play:hover:not(:disabled) { background:#e9ac52; }
#douas .lect-play svg { width:24px; height:24px; }
#douas .lect-play .pause, #douas .lect-play.joue .lire { display:none; }
#douas .lect-play.joue .pause { display:block; }
#douas .lect-piste { display:block; width:100%; height:22px; margin:0; padding:11px 0; box-sizing:content-box; background:transparent; accent-color:#d68f35; }
#douas .lect-temps { display:block; color:#b5a48f; font:400 12.5px/1.2 'Jost',sans-serif; font-variant-numeric:tabular-nums; }
#douas .lect-repeter { display:inline-flex; gap:6px; }
#douas .lect-repeter button { min-height:44px; padding:0 14px; border-radius:999px; border:1.5px solid rgba(214,143,53,.45); background:transparent; color:#d8c8b0;
  font:500 13.5px/1.2 'Jost',sans-serif; white-space:nowrap; font-variant-numeric:tabular-nums; }
#douas .lect-repeter button[aria-pressed="true"] { background:#d68f35; border-color:#d68f35; color:var(--nuit); font-weight:600; }
#douas .lect-boucle { width:17px; height:17px; margin-right:6px; vertical-align:-4px; }
/* pas encore de prise : le lecteur reste à sa place, grisé, et « Audio à venir » remplace le temps */
#douas .lecteur.a-venir :is(.lect-play, .lect-piste, .lect-repeter button) { opacity:.35; cursor:default; }
#douas .lecteur.a-venir .lect-temps { color:#d8c8b0; font-size:13.5px; font-weight:500; }
#douas .lect-erreur { margin:4px 0 2px; text-align:center; color:#b5a48f; font:500 14px/1.5 'Jost',sans-serif; }
#douas .lect-erreur button { margin-left:10px; min-height:44px; padding:0 16px; border-radius:999px; border:1.5px solid #d68f35; background:transparent; color:#f1e7d8; }

@media (max-width:600px) {
  #douas .fiche-titre { margin:16px 18px 0; font-size:22px; }
  #douas .diapo { padding:0 18px; }
  #douas .diapo-arabe { font-size:clamp(25px, 7.4vw, 30px); line-height:2.1; }
  #douas .diapo-sens { font-size:16px; }
  #douas .fiche-pied { padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px)); }
  #douas .lecteur { grid-template-columns:auto minmax(0,1fr); }
  #douas .lect-repeter { grid-column:1 / -1; justify-self:center; }
}
@media (prefers-reduced-motion:reduce) { #douas dialog.fiche[open] { animation:none; } }