/* ===================================================================
   IslaMobiles — Al-Fâtiha
   Coran mis en avant · lecteur condensé · surlignage mot-à-mot
   (mode normal + mode lecture) · accent personnalisable (vert/rouge/bleu).
   =================================================================== */

/* ---------- Polices arabes locales ---------- */
/* KFGQPC Hafs V2 retirée : le fichier fourni n'a pas le glyphe U+06DF (marque de lettre
   muette, très fréquente) et affichait un « gros rond » à la place. Amiri Quran par défaut. */
@font-face { font-family:'Amiri Quran'; src:url('../fonts/amiri-quran-arabic-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Amiri'; src:url('../fonts/amiri-arabic-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Scheherazade New'; src:url('../fonts/scheherazade-new-arabic-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Noto Naskh Arabic'; src:url('../fonts/noto-naskh-arabic-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }

/* ---------- Accent (teinte) : change toute l'app ---------- */
:root { --a-h: 158; --a-s: 71%; --a-l: 26%; }           /* Vert (défaut) */
:root[data-accent="red"]    { --a-h: 4;   --a-s: 62%; --a-l: 44%; }  /* Rouge */
:root[data-accent="blue"]   { --a-h: 212; --a-s: 62%; --a-l: 42%; }  /* Bleu  */
:root[data-accent="amber"]  { --a-h: 38;  --a-s: 72%; --a-l: 40%; }  /* Or */
:root[data-accent="violet"] { --a-h: 270; --a-s: 46%; --a-l: 50%; }  /* Violet */
:root[data-accent="teal"]   { --a-h: 184; --a-s: 62%; --a-l: 33%; }  /* Turquoise */
:root[data-accent="rose"]   { --a-h: 340; --a-s: 60%; --a-l: 50%; }  /* Rose */

/* Dérivés — mode clair (défaut) */
:root {
  --accent:        hsl(var(--a-h) var(--a-s) var(--a-l));
  --accent-deep:   hsl(var(--a-h) var(--a-s) calc(var(--a-l) - 9%));
  --accent-soft:   hsl(var(--a-h) 48% 93%);
  --accent-contrast: #ffffff;
  --accent-ink-fixed: hsl(var(--a-h) var(--a-s) 31%);   /* lisible sur fond blanc (mode lecture) */
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent:      hsl(var(--a-h) calc(var(--a-s) - 8%) 60%);
    --accent-deep: hsl(var(--a-h) calc(var(--a-s) - 8%) 72%);
    --accent-soft: hsl(var(--a-h) 26% 16%);
    --accent-contrast: #0a1410;
  }
}

/* ---------- Neutres ---------- */
:root {
  --bg: #faf7ef; --surface: #ffffff; --surface-2: #f2ecdd;
  --ink: #1c241f; --ink-soft: #6a736a; --ink-faint: #9aa094; --line: #e7e0cf;
  --shadow: 0 6px 24px rgba(20, 50, 36, 0.10); --shadow-up: 0 -6px 24px rgba(20, 50, 36, 0.08);
  --quran-font: 'Amiri Quran'; --quran-size: 2.1rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e120d; --surface: #161b15; --surface-2: #1e241c;
    --ink: #e8ede4; --ink-soft: #9aa295; --ink-faint: #6f776c; --line: #2a3227;
    --shadow: 0 6px 24px rgba(0,0,0,0.4); --shadow-up: 0 -6px 24px rgba(0,0,0,0.35);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased;
  height: 100dvh; display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: none;
}

/* ---------- Bouton mode lecture (flottant) ---------- */
.fab-reader {
  position: fixed; top: calc(env(safe-area-inset-top) + 0.6rem); right: 0.7rem; z-index: 20;
  width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: blur(8px);
  color: var(--ink-soft); font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow); transition: transform 0.08s ease, color 0.15s ease;
}
.fab-reader:active { transform: scale(0.92); }
.fab-reader:hover { color: var(--accent); }
.fab-reader:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }

/* ---------- Zone de lecture (le Coran, héros) ---------- */
.reading {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(env(safe-area-inset-top) + 1.3rem) 1.1rem 1.4rem;
  display: flex; flex-direction: column;
}
.mushaf {
  direction: rtl; text-align: justify; text-align-last: center;
  line-height: 2.5; overflow-wrap: break-word; max-width: 40rem; margin: 0 auto;
}
.ayah { font-family: var(--quran-font), 'Amiri Quran', serif; font-size: var(--quran-size); color: var(--ink); }
.word {
  cursor: pointer; padding: 0 0.05em; border-radius: 7px;
  transition: background 0.18s ease, color 0.18s ease;
}
.word.is-current {
  color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  padding: 0.08em 0.28em; margin: 0 -0.23em; border-radius: 9px;
}
.rosette {
  font-family: 'Amiri', serif; font-size: 0.56em; color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.7em; height: 1.7em; padding: 0 0.28em; box-sizing: border-box;
  margin: 0 0.18em; vertical-align: middle;
  border: 1.5px solid var(--accent); border-radius: 999px; line-height: 1;
  background: var(--accent-soft); position: relative; top: -0.06em;
}

/* Traduction française sous chaque ayah */
.mushaf.show-fr .ayah { display: block; margin-bottom: 0.2rem; }
.mushaf.show-fr .ayah::after {
  content: attr(data-fr); display: block; direction: ltr; text-align: center;
  font-family: system-ui, sans-serif; font-size: 0.92rem; color: var(--ink-soft);
  line-height: 1.5; margin: 0.15rem auto 1.5rem; max-width: 32rem;
}

/* ---------- Lecteur (footer rétractable : plein / mini / caché) ---------- */
.player { flex-shrink: 0; background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow-up); padding-bottom: env(safe-area-inset-bottom); touch-action: pan-y; position: relative; }
.player__grip { display: block; width: 100%; height: 1.2rem; border: none; background: transparent; padding: 0; position: relative; cursor: pointer; }
.player__grip::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 2.4rem; height: 4px; border-radius: 999px; background: var(--line); }
.player__bar { display: flex; align-items: center; }
.progress { height: 4px; background: var(--surface-2); cursor: pointer; flex: 1; }
.progress__bar { height: 100%; width: 0%; background: var(--accent); transition: width 0.1s linear; }
.player__row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.7rem 1rem 0.85rem; }

/* Bouton flottant du mode mini (lecture à gauche + barre de progression à droite) */
.pc--mini { display: none; flex-shrink: 0; width: 2.7rem; height: 2.7rem; border-radius: 50%; margin: 0.35rem 0.55rem 0.35rem 0.8rem; background: var(--accent); color: var(--accent-contrast); font-size: 1.1rem; box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 42%, transparent); }
.pc--mini:active { transform: scale(0.93); }

/* États du lecteur */
.player.is-full .pc--mini { display: none; }
.player.is-full .player__row { display: flex; }
/* MINI : ultra-compact — bouton lecture à droite (sans fond) + barre de progression collée au bord bas */
.player.is-mini { background: transparent; box-shadow: none; border-top: none; }
.player.is-mini .player__grip { display: none; }
.player.is-mini .player__row { display: none; }
.player.is-mini .player__bar { justify-content: flex-end; align-items: center; gap: 0.5rem; padding: 0.1rem 0.6rem 0.6rem; }
.player.is-mini .pc--mini { display: flex; order: 2; width: 2.4rem; height: 2.4rem; margin: 0; background: transparent; box-shadow: none; color: var(--accent); font-size: 1.55rem; }
.player.is-mini .page-ind { order: 1; }
.player.is-mini .progress { position: absolute; left: 0; right: 0; bottom: env(safe-area-inset-bottom); flex: none; margin: 0; height: 3px; }
.player.is-hidden .player__bar,
.player.is-hidden .player__row { display: none; }
.player__info { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.player__title { font-family: var(--quran-font), 'Amiri Quran', serif; font-size: 1.15rem; color: var(--accent-deep); direction: rtl; line-height: 1.3; }
.player__sub { font-size: 0.72rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__reciter {
  align-self: flex-start; margin-top: 0.2rem; border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink-soft); font-size: 0.8rem; font-weight: 600; border-radius: 999px;
  padding: 0.25rem 0.7rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem;
  max-width: 13rem; white-space: nowrap; overflow: hidden;
}
.player__reciter .caret { color: var(--accent); font-size: 0.7em; }

.player__ctrls { flex-shrink: 0; }
.pc { border: none; background: none; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pc--main {
  background: var(--accent); color: var(--accent-contrast); width: 3.4rem; height: 3.4rem; border-radius: 50%;
  font-size: 1.4rem; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 45%, transparent);
  transition: transform 0.08s ease, filter 0.15s ease;
}

/* Icônes SVG (play / pause / chevrons / croix) — taille = 1em du bouton, couleur héritée */
.ic { width: 1em; height: 1em; display: block; fill: currentColor; pointer-events: none; }
.ic--stroke { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
[data-act="play"] .ic-pause { display: none; }
[data-act="play"].is-playing .ic-play { display: none; }
[data-act="play"].is-playing .ic-pause { display: block; }
.pc--main:active { transform: scale(0.93); }
.pc--main:hover { filter: brightness(1.06); }
.player.is-loading .pc--main { opacity: 0.6; pointer-events: none; }

/* ---------- Feuille de réglages (bottom sheet) ---------- */
.sheet { position: fixed; inset: 0; z-index: 40; }
.sheet[hidden] { display: none; }
.sheet__backdrop { position: absolute; inset: 0; background: rgba(10,16,12,0.45); animation: fade 0.2s ease; }
.sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0; background: var(--surface);
  border-radius: 20px 20px 0 0; padding: 0.6rem 1.2rem calc(env(safe-area-inset-bottom) + 1.2rem);
  max-height: 85dvh; overflow-y: auto; box-shadow: var(--shadow-up);
  animation: slideUp 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sheet__handle { width: 2.4rem; height: 4px; border-radius: 999px; background: var(--line); margin: 0.4rem auto 1rem; }
.sheet__section { margin-bottom: 1.3rem; }
.sheet__inline { display: flex; align-items: center; justify-content: space-between; }
.sheet__h { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-faint); font-weight: 700; margin-bottom: 0.6rem; }
.sheet__inline .sheet__h { margin-bottom: 0; }
.sheet__done { width: 100%; border: none; background: var(--accent); color: var(--accent-contrast); font-size: 1rem; font-weight: 700; padding: 0.85rem; border-radius: 12px; cursor: pointer; margin-top: 0.3rem; }

.font-select, .size-ctrl, .accent-select { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.chip {
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft);
  border-radius: 999px; padding: 0.4rem 0.85rem; font-size: 0.85rem; cursor: pointer;
  transition: all 0.15s ease; font-family: inherit;
}
.chip.is-active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.size-val { font-variant-numeric: tabular-nums; font-size: 0.9rem; color: var(--ink-soft); min-width: 3.2rem; text-align: center; }

/* Sélecteur de couleur */
.accent-chip {
  display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink); border-radius: 999px; padding: 0.4rem 0.85rem;
  font-size: 0.88rem; cursor: pointer; font-family: inherit; transition: all 0.15s ease;
}
.accent-chip.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }
.accent-chip .dot { width: 0.9rem; height: 0.9rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); }
.accent-chip .dot[data-c="green"]  { background: #12694a; }
.accent-chip .dot[data-c="red"]    { background: #b3352f; }
.accent-chip .dot[data-c="blue"]   { background: #1f5fa8; }
.accent-chip .dot[data-c="amber"]  { background: #b8860f; }
.accent-chip .dot[data-c="violet"] { background: #6b4fbf; }
.accent-chip .dot[data-c="teal"]   { background: #128a86; }
.accent-chip .dot[data-c="rose"]   { background: #cc3d6b; }

.reciter-list { display: flex; flex-direction: column; gap: 0.35rem; }
.reciter-item {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  border: 1px solid var(--line); background: var(--surface-2); border-radius: 12px;
  padding: 0.7rem 0.9rem; cursor: pointer; font-size: 0.95rem; color: var(--ink); text-align: left;
}
.reciter-item.is-active { border-color: var(--accent); background: var(--accent-soft); }
.reciter-item .check { color: var(--accent-deep); font-weight: 700; opacity: 0; }
.reciter-item.is-active .check { opacity: 1; }
.reciter-item .r-style { font-size: 0.72rem; color: var(--ink-faint); }

.toggle { width: 3rem; height: 1.7rem; border-radius: 999px; border: none; background: var(--line); position: relative; cursor: pointer; transition: background 0.2s ease; flex-shrink: 0; }
.toggle.is-on { background: var(--accent); }
.toggle__dot { position: absolute; top: 3px; left: 3px; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #fff; transition: transform 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.toggle.is-on .toggle__dot { transform: translateX(1.3rem); }

@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Mode lecture (fond blanc, une ayah, fondu + surlignage mot) ---------- */
.reader {
  position: fixed; inset: 0; z-index: 50; background: #ffffff; color: #12231a;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top) + 1rem) 1.5rem calc(env(safe-area-inset-bottom) + 1rem);
}
.reader[hidden] { display: none; }
.reader-exit { position: absolute; top: calc(env(safe-area-inset-top) + 0.8rem); left: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid #e6e0d0; background: #fff; color: #6a7268; font-size: 1.4rem; cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center; }
/* Scène scrollable : centrée si l'ayah tient, défilable si ayah longue + traduction
   (safe center = pas de rognage du haut quand le contenu dépasse). */
.reader-stage { flex: 1; min-height: 0; width: 100%; display: flex; align-items: safe center; justify-content: center; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0.6rem 0; }
.reader-ayah { direction: rtl; text-align: center; max-width: 34rem; width: 100%; transition: opacity 0.6s ease, transform 0.6s ease; }
.reader-ayah.is-out { opacity: 0; transform: translateY(10px); }
.reader-arabic { font-family: var(--quran-font), 'Amiri Quran', serif; font-size: calc(var(--quran-size) * 1.5); line-height: 2; color: #10231a; }
.reader-arabic .rword { cursor: pointer; padding: 0 0.05em; border-radius: 8px; transition: background 0.18s ease, color 0.18s ease; }
/* Mode lecture plein écran : le mot lu change de couleur seulement (pas de fond,
   pas de padding — évitait un décalage de mise en page à chaque mot). */
.reader-arabic .rword.is-current { color: var(--accent-ink-fixed); }
.reader-fr { direction: ltr; margin-top: 1.5rem; font-family: system-ui, sans-serif; font-size: 1.05rem; color: #5a6157; line-height: 1.6; }
.reader:not(.with-fr) .reader-fr { display: none; }
.reader-num { font-family: 'Amiri', serif; color: var(--accent-ink-fixed); font-size: 1.1rem; margin-bottom: 0.5rem; min-height: 1.4rem; }
.reader-controls { display: flex; align-items: center; gap: 1.5rem; margin-top: 1.5rem; }
.reader-ctrl { border: none; background: none; cursor: pointer; color: #2c3a30; font-size: 1.6rem; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }
.reader-ctrl--main { background: var(--accent-ink-fixed); color: #fff; border-radius: 50%; font-size: 1.3rem; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-ink-fixed) 40%, transparent); }
.reader-dots { display: flex; gap: 0.4rem; margin-top: 1.4rem; }
.reader-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0dccf; transition: all 0.3s ease; }
.reader-dot.is-active { background: var(--accent-ink-fixed); transform: scale(1.35); }

/* ---------- Coquille (app + navigation par onglets) ---------- */
#app { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.reader-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.tabbar {
  position: fixed; z-index: 30; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 0.6rem);
  width: calc(100% - 1.6rem); max-width: 25rem;
  display: flex; justify-content: space-around; gap: 0.2rem; padding: 0.35rem 0.4rem;
  background: color-mix(in srgb, var(--surface) 68%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); border-radius: 22px;
  box-shadow: 0 10px 30px rgba(20, 50, 36, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  animation: tabbar-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@media (prefers-color-scheme: dark) {
  .tabbar { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
}
@keyframes tabbar-in { from { opacity: 0; transform: translate(-50%, 1rem); } to { opacity: 1; transform: translate(-50%, 0); } }
body.hide-tabs .tabbar { display: none; }
body.hide-tabs .screen { padding-top: calc(env(safe-area-inset-top) + 3.6rem); }
/* Pages à onglets : réserver l'espace de la barre flottante */
body:not(.hide-tabs) .screen { padding-bottom: calc(env(safe-area-inset-bottom) + 5.4rem); }

.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.18rem;
  padding: 0.5rem 0 0.45rem; text-decoration: none; color: var(--ink-faint);
  font-size: 0.66rem; font-weight: 600; border-radius: 15px;
  transition: color 0.2s ease, background 0.2s ease, transform 0.12s ease;
}
.tabbar a:active { transform: scale(0.9); }
.tabbar a.is-active { color: var(--accent); background: var(--accent-soft); }
.tabbar a svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tabbar a.is-active svg { transform: translateY(-1px) scale(1.08); }

.nav-btn {
  position: fixed; top: calc(env(safe-area-inset-top) + 0.6rem); z-index: 20;
  width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: blur(8px);
  color: var(--ink-soft); font-size: 1.6rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow);
}
.nav-btn:active { transform: scale(0.92); }
.nav-back { left: 0.7rem; }

/* ---------- Écrans (accueil · liste · apprentissage) ---------- */
.screen {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  width: 100%; max-width: 44rem; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 1.6rem) 1.2rem 2rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.screen__head { margin-bottom: 0.4rem; }
.screen__eyebrow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--accent); font-weight: 700; }
.screen__head h1 { font-family: var(--quran-font), 'Amiri Quran', serif; font-size: 2rem; color: var(--ink); margin: 0.25rem 0 0.5rem; line-height: 1.4; }
.screen__sub { color: var(--ink-soft); font-size: 0.95rem; }

.card {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 1.25rem; box-shadow: var(--shadow); display: flex; align-items: center; gap: 1rem;
  text-decoration: none; color: inherit; transition: transform 0.08s ease;
}
.card h2 { font-size: 1.1rem; margin-bottom: 0.2rem; color: var(--ink); }
.card p { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.5; }
.card--soon { flex-direction: column; align-items: flex-start; overflow: hidden; }
.card--soon::before { content: ''; position: absolute; inset: 0; background: var(--accent-soft); opacity: 0.4; pointer-events: none; }
.card--soon > * { position: relative; }
.card__badge {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent-deep); background: var(--accent-soft); padding: 0.2rem 0.6rem; border-radius: 999px; margin-bottom: 0.6rem;
}
.card--link { justify-content: space-between; }
.card--link:active { transform: scale(0.99); }
.card__chev { color: var(--accent); font-size: 1.7rem; flex-shrink: 0; }

.surah-search { margin-bottom: 0.2rem; }
.surah-search::placeholder { color: var(--ink-faint); }

.surah-list { display: flex; flex-direction: column; gap: 0.5rem; }
.surah-row {
  display: flex; align-items: center; gap: 0.9rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 0.85rem 1rem; text-decoration: none; color: inherit; transition: transform 0.08s ease;
}
.surah-row[hidden] { display: none; }   /* sinon display:flex ci-dessus bat la règle UA [hidden] */
.surah-row:active { transform: scale(0.995); }
.surah-row__num {
  flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700; color: var(--accent-deep); background: var(--accent-soft); font-variant-numeric: tabular-nums;
}
.surah-row__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.surah-row__fr { font-weight: 600; color: var(--ink); }
.surah-row__meta { font-size: 0.76rem; color: var(--ink-faint); }
.surah-row__ar { font-family: var(--quran-font), 'Amiri Quran', serif; font-size: 1.5rem; color: var(--accent-deep); }

/* ---------- Vue prière (accueil) ---------- */
.loc-btn { align-self: flex-start; margin-top: 0.3rem; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft); font-size: 0.82rem; font-weight: 600; border-radius: 999px; padding: 0.3rem 0.75rem; cursor: pointer; }
.loc-btn--full { align-self: stretch; width: 100%; text-align: center; padding: 0.7rem; color: var(--accent-deep); background: var(--accent-soft); border-color: transparent; margin-bottom: 0.6rem; }
.loc-btn[disabled] { opacity: 0.6; }

.next-card { background: var(--accent); color: var(--accent-contrast); border-radius: 18px; padding: 1.3rem 1.4rem; box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 40%, transparent); display: flex; flex-direction: column; gap: 0.4rem; }
.next-card__tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; font-weight: 700; }
.next-card__row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.next-card__name { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.next-card__ar { font-family: var(--quran-font), 'Amiri Quran', serif; font-size: 1.2rem; opacity: 0.92; }
.next-card__time { font-size: 2.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.next-card__count { font-size: 0.9rem; opacity: 0.9; font-variant-numeric: tabular-nums; }

.prayer-list { display: flex; flex-direction: column; gap: 0.35rem; }
.prayer-row { display: flex; align-items: center; gap: 0.8rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0.7rem 1rem; }
.prayer-row__name { font-weight: 600; flex: 1; }
.prayer-row__ar { font-family: var(--quran-font), 'Amiri Quran', serif; font-size: 1.15rem; color: var(--ink-faint); }
.prayer-row__time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.05rem; min-width: 3.4rem; text-align: right; }
.prayer-row.is-sunrise { opacity: 0.72; }
.prayer-row.is-next { border-color: var(--accent); background: var(--accent-soft); }
.prayer-row.is-next .prayer-row__name, .prayer-row.is-next .prayer-row__time { color: var(--accent-deep); }

.prayer-note { font-size: 0.85rem; color: var(--ink-soft); background: var(--surface-2); border: 1px dashed var(--line); border-radius: 12px; padding: 0.8rem 1rem; line-height: 1.5; }
.prayer-settings-btn { border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; border-radius: 12px; padding: 0.8rem; cursor: pointer; }

.field-select { width: 100%; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: 10px; padding: 0.6rem 0.7rem; font-size: 0.95rem; font-family: inherit; }
.stepper-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.28rem 0; }
.stepper-label { font-size: 0.95rem; color: var(--ink); }
.stepper { display: flex; align-items: center; gap: 0.5rem; }
.stepper button { width: 2rem; height: 2rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size: 1.05rem; cursor: pointer; line-height: 1; }
.stepper span { min-width: 4.2rem; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.9rem; }
.latlng { display: flex; gap: 0.6rem; margin-top: 0.2rem; }
.latlng label { flex: 1; font-size: 0.78rem; color: var(--ink-faint); display: flex; flex-direction: column; gap: 0.2rem; }
.latlng input { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: 8px; padding: 0.4rem 0.5rem; font-size: 0.9rem; font-family: inherit; }

/* Synchronisation mosquée (Mawaqit) */
.field-hint { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.45; margin-bottom: 0.55rem; }
.field-input { width: 100%; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: 10px; padding: 0.6rem 0.7rem; font-size: 0.92rem; font-family: inherit; }
.field-input:focus-visible { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.sync-row { display: flex; gap: 0.5rem; align-items: stretch; }
.sync-row .field-input { flex: 1; }
.sync-btn { flex-shrink: 0; border: none; background: var(--accent); color: var(--accent-contrast); font-weight: 700; font-size: 0.9rem; border-radius: 10px; padding: 0 1rem; cursor: pointer; transition: filter 0.15s ease, transform 0.08s ease; }
.sync-btn:active { transform: scale(0.96); }
.sync-btn[disabled] { opacity: 0.65; cursor: default; }
.sync-status { margin-top: 0.55rem; font-size: 0.85rem; line-height: 1.4; min-height: 1.1rem; }
.sync-status:empty { margin-top: 0; }
.sync-ok { color: var(--accent-deep); }
.sync-err { color: #b3352f; }
.sync-pending { color: var(--ink-soft); }
.sync-clear { margin-left: 0.5rem; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft); font-size: 0.78rem; font-weight: 600; border-radius: 999px; padding: 0.2rem 0.6rem; cursor: pointer; }
.is-overridden { opacity: 0.5; pointer-events: none; transition: opacity 0.2s ease; }

/* Bismillah en tête de sourate (affiché même si l'audio ne la récite pas) */
.bismillah {
  display: block; text-align: center; font-family: var(--quran-font), 'Amiri Quran', serif;
  font-size: calc(var(--quran-size) * 0.82); color: var(--accent-deep); line-height: 2;
  padding: 0.2rem 0 1.3rem; margin-bottom: 0.7rem; border-bottom: 1px solid var(--line);
}
.mushaf.show-fr .bismillah { margin-bottom: 1rem; }

/* Pagination mushaf : repère de page (footer), menu de saut, tournage de page */
.reading { touch-action: pan-y; }
.page-ind { flex-shrink: 0; border: none; background: transparent; color: var(--ink-soft); font-size: 0.72rem; font-weight: 600; padding: 0 0.7rem; cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; transition: color 0.15s ease, transform 0.08s ease; }
.page-ind:active { transform: scale(0.94); }
.page-ind:hover { color: var(--accent); }
.page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)); gap: 0.4rem; max-height: 62vh; overflow-y: auto; padding: 0.2rem; }
.page-cell { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: 8px; padding: 0.55rem 0; font-size: 0.9rem; font-variant-numeric: tabular-nums; cursor: pointer; font-family: inherit; }
.page-cell.is-current { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); font-weight: 700; }
@keyframes page-in { from { opacity: 0; transform: translateX(6%); } to { opacity: 1; transform: none; } }
.mushaf.page-in { animation: page-in 0.28s ease; }

/* ---------- Accueil (hub) ---------- */
.home-prayer { width: 100%; font: inherit; cursor: pointer; align-items: center; gap: 0.8rem; }
.home-prayer__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; text-align: left; }
.home-prayer__tag { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent); font-weight: 700; }
.home-prayer__row { display: flex; align-items: baseline; gap: 0.6rem; }
.home-prayer__name { font-size: 1.3rem; font-weight: 700; color: var(--ink); }
.home-prayer__time { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-deep); margin-left: auto; }
.home-prayer__count { font-size: 0.82rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.75rem; }
.hub-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 1.4rem 0.8rem; background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); text-decoration: none; color: var(--ink);
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  animation: tile-in 0.45s ease both;
}
.hub-grid a:nth-child(1) .hub-tile, .hub-grid > :nth-child(1) { animation-delay: 0.03s; }
.hub-grid > :nth-child(2) { animation-delay: 0.1s; }
.hub-grid > :nth-child(3) { animation-delay: 0.17s; }
.hub-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 16%, rgba(20, 50, 36, 0.12)); border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); }
.hub-tile:active { transform: scale(0.97); }
.hub-tile svg { width: 2rem; height: 2rem; color: var(--accent); transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.hub-tile:hover svg { transform: scale(1.12) translateY(-1px); }
.hub-tile span { font-size: 0.85rem; font-weight: 600; }
@keyframes tile-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- 40 Rabbanâ ---------- */
.rabbana-list { display: flex; flex-direction: column; gap: 0.6rem; }
.rabbana-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.55rem; box-shadow: var(--shadow); }
.rabbana-num { flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); display: inline-flex; align-items: center; justify-content: center; font-size: 0.76rem; font-weight: 700; }
.rabbana-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.rabbana-theme { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-deep); background: var(--accent-soft); padding: 0.2rem 0.6rem; border-radius: 999px; }
.rabbana-ref { font-size: 0.75rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; text-decoration: none; }
.rabbana-ref:active, .rabbana-ref:hover { color: var(--accent); text-decoration: underline; }
.rabbana-ar { font-family: var(--quran-font), 'Amiri Quran', serif; font-size: calc(var(--quran-size) * 0.81); line-height: 2.1; color: var(--ink); text-align: center; direction: rtl; }
.rabbana-translit { font-size: 0.88rem; color: var(--ink-faint); font-style: italic; text-align: center; }
.rabbana-fr { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.55; text-align: center; }

/* Lecteur audio des Rabbanâ */
.rabbana-play {
  flex-shrink: 0; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: none;
  background: var(--accent); color: var(--accent-contrast); font-size: 0.85rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding-left: 2px;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: transform 0.08s ease, filter 0.15s ease;
}
.rabbana-play:active { transform: scale(0.92); }
.rabbana-card.is-playing { border-color: var(--accent); }
.rabbana-card.is-playing .rabbana-play { padding-left: 0; }
.rabbana-prog { height: 3px; border-radius: 999px; background: var(--surface-2); overflow: hidden; display: none; }
.rabbana-card.is-playing .rabbana-prog { display: block; }
.rabbana-prog__bar { height: 100%; width: 0%; background: var(--accent); transition: width 0.1s linear; }
.rabbana-reciter { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-faint); font-weight: 700; }

/* ---------- Toast OTA (mise à jour prête) ---------- */
.ota-toast {
  position: fixed; left: 0.8rem; right: 0.8rem; z-index: 60;
  bottom: calc(env(safe-area-inset-bottom) + 4.2rem);
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.7rem 0.9rem; border-radius: 0.8rem;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-up);
  font-size: 0.82rem; color: var(--ink);
  opacity: 0; transform: translateY(0.6rem); transition: opacity 0.25s ease, transform 0.25s ease;
}
.ota-toast.is-in { opacity: 1; transform: none; }
.ota-toast span { flex: 1; }
.ota-toast button {
  flex-shrink: 0; border: none; border-radius: 0.55rem; padding: 0.45rem 0.8rem;
  background: var(--accent); color: var(--accent-contrast);
  font-size: 0.78rem; font-weight: 700; cursor: pointer;
}

/* ---------- Apprentissage : jeu « le mot caché » ---------- */
.learn-card { flex-direction: column; align-items: stretch; gap: 0.75rem; }

.learn-stats { display: flex; }
.learn-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; text-align: center; }
.learn-stat + .learn-stat { border-left: 1px solid var(--line); }
.learn-stat__v { font-size: 1.45rem; font-weight: 700; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.learn-stat__v small { font-size: 0.72rem; color: var(--ink-faint); font-weight: 600; }
.learn-stat__l { font-size: 0.72rem; color: var(--ink-soft); }

.learn-diff { display: flex; gap: 0.5rem; }
.learn-diff__btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  border-radius: 12px; padding: 0.6rem 0.3rem; cursor: pointer; font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.learn-diff__btn.is-active { border-color: var(--accent); background: var(--accent-soft); }
.learn-diff__name { font-weight: 700; font-size: 0.9rem; }
.learn-diff__btn.is-active .learn-diff__name { color: var(--accent-deep); }
.learn-diff__hint { font-size: 0.66rem; color: var(--ink-faint); line-height: 1.3; }

.learn-start {
  border: none; background: var(--accent); color: var(--accent-contrast);
  font-size: 1rem; font-weight: 700; padding: 0.85rem; border-radius: 12px; cursor: pointer;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: transform 0.08s ease, filter 0.15s ease;
}
.learn-start:active { transform: scale(0.98); }
.learn-start:hover { filter: brightness(1.06); }
.learn-error { color: #b3352f; font-size: 0.85rem; }

.learn-hist { display: flex; flex-direction: column; gap: 0.45rem; }
.learn-empty { font-size: 0.88rem; color: var(--ink-faint); }
.learn-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.7rem;
  border: 1px solid var(--line); background: var(--surface-2); border-radius: 12px;
  padding: 0.65rem 0.85rem; cursor: pointer; font-family: inherit; text-align: left; color: var(--ink);
  transition: transform 0.08s ease, border-color 0.15s ease;
}
.learn-row:active { transform: scale(0.99); }
.learn-row__info { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.learn-row__title { font-weight: 600; font-size: 0.9rem; }
.learn-row__meta { font-size: 0.74rem; color: var(--ink-faint); }
.learn-row__right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; }
.learn-row__pts { font-weight: 700; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.learn-row__replay { font-size: 0.7rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; }

/* Overlay de partie (suit le thème de l'app, contrairement au mode lecture blanc) */
.learn-game {
  position: fixed; inset: 0; z-index: 50; background: var(--bg); color: var(--ink);
  display: flex; flex-direction: column; align-items: center;
  padding: calc(env(safe-area-inset-top) + 1rem) 1.2rem calc(env(safe-area-inset-bottom) + 1rem);
}
.learn-game[hidden] { display: none; }
.learn-exit { position: absolute; top: calc(env(safe-area-inset-top) + 0.8rem); left: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.learn-ghead { text-align: center; margin-top: 0.4rem; }
.learn-gsurah { display: flex; align-items: baseline; justify-content: center; gap: 0.6rem; color: var(--ink); font-weight: 600; }
.learn-gsurah__ar { font-family: var(--quran-font), 'Amiri Quran', serif; font-size: 1.5rem; color: var(--accent-deep); }
.learn-gstep { font-size: 0.78rem; color: var(--ink-faint); margin-top: 0.15rem; }

.learn-stage { flex: 1; min-height: 0; width: 100%; display: flex; align-items: safe center; justify-content: center; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0.6rem 0; }
.learn-gayah { direction: rtl; text-align: center; max-width: 34rem; width: 100%; transition: opacity 0.25s ease, transform 0.25s ease; }
.learn-gayah.is-out { opacity: 0; transform: translateY(10px); }
.learn-arabic { font-family: var(--quran-font), 'Amiri Quran', serif; font-size: calc(var(--quran-size) * 0.95); line-height: 2.1; }
.lw { padding: 0 0.05em; border-radius: 8px; }
.lw.is-done { color: var(--accent-deep); }        /* mots déjà récités : karaoké */
.lw.is-current { color: var(--accent-deep); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.lw--mask {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 3.2ch; border: 1.5px dashed var(--accent); border-radius: 10px;
  background: var(--accent-soft); color: var(--accent-deep);
  font-family: inherit; font-size: 0.75em; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 0.1em 0.4em; cursor: pointer; vertical-align: middle;
  animation: mask-pulse 1s ease infinite;
}
@keyframes mask-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.lw--found { color: var(--accent-deep); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.learn-gfr { direction: ltr; margin-top: 1.2rem; font-family: system-ui, sans-serif; font-size: 1rem; color: var(--ink-soft); line-height: 1.6; }

.learn-actions { min-height: 3.4rem; display: flex; align-items: center; justify-content: center; gap: 0.8rem; width: 100%; max-width: 24rem; }
.learn-hint { font-size: 0.9rem; color: var(--ink-faint); }
.learn-btn {
  flex: 1; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: 0.95rem; font-weight: 700; padding: 0.8rem 1rem; border-radius: 12px; cursor: pointer;
  font-family: inherit; transition: transform 0.08s ease;
}
.learn-btn:active { transform: scale(0.97); }
.learn-btn--ok { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.learn-btn--ko { color: #b3352f; border-color: color-mix(in srgb, #b3352f 45%, var(--line)); }
.learn-btn--ghost { background: transparent; border-color: transparent; color: var(--ink-soft); }

.learn-dots { display: flex; gap: 0.45rem; margin-top: 0.9rem; }
.learn-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); transition: all 0.25s ease; }
.learn-dot.is-active { transform: scale(1.35); background: var(--ink-faint); }
.learn-dot.is-ok { background: var(--accent); }
.learn-dot.is-ko { background: #b3352f; }

/* Écran de fin (recouvre la scène de jeu) */
.learn-end { position: absolute; inset: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1.2rem; animation: fade 0.25s ease; }
.learn-end[hidden] { display: none; }
.learn-end__box { width: 100%; max-width: 22rem; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 1.5rem 1.3rem; display: flex; flex-direction: column; gap: 0.7rem; text-align: center; }
.learn-end__score { font-size: 2.2rem; font-weight: 800; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.learn-end__sum { font-size: 0.9rem; color: var(--ink-soft); }
.learn-end__marks { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; margin-bottom: 0.4rem; }
.learn-mark { font-size: 0.76rem; font-weight: 700; border-radius: 999px; padding: 0.25rem 0.6rem; font-variant-numeric: tabular-nums; }
.learn-mark.is-ok { color: var(--accent-deep); background: var(--accent-soft); }
.learn-mark.is-ko { color: #b3352f; background: color-mix(in srgb, #b3352f 14%, transparent); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .progress__bar { transition: none !important; }
}