/* =========================================================
   Al hafiz — moteur de recherche du Saint Coran
   Palette: vert profond (#15803d) sur blanc, accent doré (#eab308)
   Typographie: Fraunces (display) + Inter (body) + Amiri (arabe)
   ========================================================= */

:root {
  /* Brief colors */
  --green: #15803d;
  --white: #ffffff;

  /* Derived palette */
  --green-deep: #052e16;       /* near-black emerald for headings */
  --green-mid:  #166534;       /* secondary green */
  --green-pale: #f0fdf4;       /* faint mint background */
  --green-soft: #dcfce7;       /* hover/selected state */
  --green-line: #bbf7d0;       /* subtle border */

  --ink: #1f2937;              /* body */
  --ink-soft: #4b5563;
  --ink-mute: #6b7280;         /* AA-compliant on white and #fafaf7 (>=4.5:1) */

  --gold: #b45309;             /* warm amber for verse markers, evokes Mushaf illumination */
  --gold-light: #fde68a;

  --alert: #dc2626;            /* error / voice-recording indicator */
  --alert-pale: #fee2e2;       /* faint red background */

  --bg: #ffffff;
  --bg-soft: #fafaf7;          /* a hint of warm paper, very subtle */

  /* Type */
  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-arabic: 'Amiri', 'Scheherazade New', 'Traditional Arabic', serif;

  /* Layout */
  --max: 1080px;
  --radius: 4px;
  --radius-lg: 12px;

  /* Réserve pour la barre de nav mobile — surestime volontairement (barre réelle
     ~57 px). Ne pas « corriger » à la hauteur exacte : la marge est ce qui garantit
     que les flottants du bas dégagent la barre. 0 en desktop (pas de barre), donc
     les formules qui s'en servent y redonnent la valeur d'origine. */
  --bottom-nav-h: 0px;

  /* Hauteur du header, republiée en continu par App.trackHeaderHeight()
     (61 px mobile, 65 px desktop, plus en PWA iOS avec la safe-area). La
     valeur ci-dessous n'est qu'un repli avant le premier calcul JS. */
  --header-h: 61px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* La barre de nav mobile est fixed : sans ce padding elle masquerait la fin
     du footer. Vaut 0 en desktop. */
  padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0));
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

a { color: var(--green-mid); text-decoration: none; }
a:hover, a:focus-visible { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* =========================================================
   Header
   ========================================================= */
/* Le fond et le flou vivent sur ::before, pas sur .site-header : un élément
   qui porte backdrop-filter devient bloc conteneur pour ses descendants
   position:fixed, ce qui piégerait la barre de nav mobile à l'intérieur du
   header (mesuré : 784 px au-dessus du bas). Un pseudo-élément n'a pas de
   descendants, donc ne piège rien. Rendu identique à l'œil.
   Voir docs/superpowers/specs/2026-07-16-nav-mobile-design.md */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--green-line);
}
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}

.site-header,
.site-footer__inner {
  max-width: var(--max);
  margin: 0 auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* iOS PWA with status-bar-style=black-translucent + viewport-fit=cover:
     bake the safe-area insets into the header padding so the status bar
     stops overlapping the brand and nav. env(..., 0) keeps the value at 0
     on platforms that don't expose safe areas (desktop, Android no-notch,
     mobile Safari without standalone). */
  padding-top: calc(0.875rem + env(safe-area-inset-top, 0));
  padding-bottom: 0.875rem;
  padding-left: calc(1.25rem + env(safe-area-inset-left, 0));
  padding-right: calc(1.25rem + env(safe-area-inset-right, 0));
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--green-deep);
  text-decoration: none;
}
.brand:hover, .brand:focus-visible { text-decoration: none; color: var(--green); }

.brand__mark {
  display: inline-flex;
  width: 36px; height: 36px;
  border-radius: 9px;          /* carré arrondi, comme l'icône installée */
  overflow: hidden;            /* rogne proprement les coins de l'icône */
  background: var(--green);    /* absorbe d'éventuels coins transparents du PNG */
}
.brand__mark img { width: 100%; height: 100%; object-fit: cover; display: block; }

.brand__name {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
}
.brand__name-latin {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.brand__name-arabic {
  font-family: var(--font-arabic);
  font-size: 0.85rem;
  color: var(--green-mid);
  margin-top: 2px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.site-nav a {
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.site-nav a:hover, .site-nav a:focus-visible {
  color: var(--green-deep);
  border-bottom-color: var(--green);
}
.site-nav a.is-active {
  color: var(--green-deep);
  border-bottom-color: var(--green);
}

/* Desktop : la nav est une rangée de texte, les icônes ne servent qu'à la
   barre mobile. */
.site-nav__icon { display: none; }

/* Nav language switcher */
.nav-lang { display: inline-flex; align-items: center; }
.nav-lang select {
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink-soft);
  background: var(--white);
  border: 1px solid var(--green-line);
  border-radius: var(--radius);
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.nav-lang select:hover, .nav-lang select:focus-visible {
  border-color: var(--green);
  color: var(--green-deep);
}
.nav-lang select:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
@media (max-width: 480px) {
  .nav-lang select { padding: 0.25rem 0.4rem; font-size: 0.8rem; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  background:
    radial-gradient(1200px 400px at 50% -120px, var(--green-soft), transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--green-line);
  overflow: hidden;
}

.hero__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) 1.25rem clamp(2rem, 5vw, 3.5rem);
  /* Notched iPhones in landscape: push the content out of the side cutouts. */
  padding-left: calc(1.25rem + env(safe-area-inset-left, 0));
  padding-right: calc(1.25rem + env(safe-area-inset-right, 0));
  text-align: center;
}

.hero__eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-mid);
}

.hero__title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--green-deep);
}
.hero__title span { display: inline; }
.hero__title-em {
  font-style: italic;
  font-weight: 400;
  color: var(--green);
  position: relative;
}
.hero__title-em::after {
  content: '';
  position: absolute;
  left: 4%; right: 4%;
  bottom: -0.1em;
  height: 2px;
  background: var(--gold-light);
  border-radius: 2px;
}

.hero__sub {
  max-width: 640px;
  margin: 0 auto 2rem;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
}
.hero__sub span[lang="wo"] {
  display: block;
  font-style: italic;
  color: var(--green-mid);
  margin-top: 0.25rem;
}

/* =========================================================
   Search input
   ========================================================= */
.search {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 620px;
  margin: 0 auto 1.25rem;
  background: var(--white);
  border: 1.5px solid var(--green-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px -16px rgba(21, 128, 61, 0.25);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
  overflow: hidden;
}
.search:focus-within {
  border-color: var(--green);
  box-shadow: 0 12px 50px -16px rgba(21, 128, 61, 0.4);
}

.search__icon {
  display: inline-flex;
  padding-left: 1rem;
  color: var(--green-mid);
}

.search input[type="search"] {
  flex: 1;
  border: 0;
  outline: none;
  padding: 1rem 0.75rem;
  font: inherit;
  font-size: 1.05rem;
  background: transparent;
  color: var(--ink);
}
.search input[type="search"]::placeholder { color: var(--ink-mute); }

.search button[type="submit"] {
  border: 0;
  background: var(--green);
  color: var(--white);
  font: inherit;
  font-weight: 500;
  padding: 0 1.5rem;
  align-self: stretch;
  cursor: pointer;
  transition: background 0.15s var(--ease);
}
.search button[type="submit"]:hover { background: var(--green-mid); }

.search--inline {
  margin-top: 1.25rem;
  box-shadow: none;
}

/* Voice search mic button (Web Speech API; hidden by JS where unsupported) */
.search__mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin-right: 0.25rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--green-mid);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.search__mic:hover { background: var(--green-pale); color: var(--green); }
.search__mic:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Recording state: red, with an expanding pulse ring */
.search__mic[data-state="recording"] {
  color: var(--alert);
  background: var(--alert-pale);
  position: relative;
}
.search__mic[data-state="recording"]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--alert);
  opacity: 0;
  animation: mic-pulse 1.5s var(--ease) infinite;
}
@keyframes mic-pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .search__mic[data-state="recording"]::after {
    animation: none;
    opacity: 0.4;
    transform: scale(1.2);
  }
}

/* Language chips */
.lang-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--green-line);
  border-radius: 999px;
  background: var(--white);
  font-size: 0.85rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.15s var(--ease);
  user-select: none;
}
.chip input { accent-color: var(--green); margin: 0; }
.chip:has(input:checked) {
  background: var(--green-pale);
  border-color: var(--green);
  color: var(--green-deep);
}

/* =========================================================
   Sections
   ========================================================= */
.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) 1.25rem;
  padding-left: calc(1.25rem + env(safe-area-inset-left, 0));
  padding-right: calc(1.25rem + env(safe-area-inset-right, 0));
}

.section--list .section__head--list,
.section--search .section__head--list,
.section--about .section__head--list {
  text-align: center;
  padding-top: 2rem;
}

.section__head { margin-bottom: 1.5rem; }

.section__head h1,
.section__head h2 {
  margin: 0.25rem 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  letter-spacing: -0.02em;
  color: var(--green-deep);
}

.section__lede {
  margin: 0;
  color: var(--ink-soft);
}

.filter {
  margin: 1.25rem auto 0;
  max-width: 480px;
}
.filter input {
  width: 100%;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--green-line);
  border-radius: var(--radius);
  font: inherit;
  background: var(--white);
}
.filter input:focus { border-color: var(--green); outline: none; }

/* =========================================================
   Sura grid
   ========================================================= */
.sura-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.875rem;
}

.sura-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: center;
  padding: 0.95rem 1rem;
  background: var(--white);
  border: 1px solid var(--green-line);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.sura-card:hover, .sura-card:focus-visible {
  text-decoration: none;
  border-color: var(--green);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -18px rgba(21,128,61,0.45);
}

.sura-card__num {
  position: relative;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  color: var(--green);
  flex: none;
}
.sura-card__num svg { width: 44px; height: 44px; fill: var(--green-pale); }
.sura-card__num-text {
  position: absolute;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--green-deep);
}

.sura-card__body { min-width: 0; }
.sura-card__title-ar {
  display: block;
  font-family: var(--font-arabic);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--green-deep);
  direction: rtl;
}
.sura-card__title-fr {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--ink);
  margin-top: 2px;
}
.sura-card__title-wo {
  display: block;
  font-size: 0.78rem;
  color: var(--green-mid);
  font-style: italic;
  letter-spacing: 0.02em;
  margin-top: 2px;
  text-transform: lowercase;
}
.sura-card__meta {
  display: block;
  font-size: 0.72rem;
  color: var(--ink-mute);
  margin-top: 4px;
  letter-spacing: 0.04em;
}

/* =========================================================
   Collections (thematic verse sets)
   ========================================================= */
.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.875rem;
}

.collection-card {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--green-line);
  border-left: 4px solid var(--green);
  border-radius: var(--radius-lg);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), border-color 0.15s var(--ease);
}
.collection-card:hover, .collection-card:focus-visible {
  text-decoration: none;
  border-color: var(--green);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -18px rgba(21, 128, 61, 0.45);
}
.collection-card__icon,
.collection-cat__icon,
.collection-view__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--green-pale);
  color: var(--green);
  border-radius: 10px;
}
.collection-card__icon { width: 38px; height: 38px; }
.collection-card__icon svg { width: 22px; height: 22px; }
.collection-card__body { min-width: 0; }
.collection-card__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--green-deep);
}
.collection-card__title-ar {
  display: block;
  font-family: var(--font-arabic);
  font-size: 1.1rem;
  color: var(--green);
  margin-top: 2px;
}
.collection-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.45;
  margin-top: 0.35rem;
}
.collection-card__meta {
  display: block;
  font-size: 0.72rem;
  color: var(--ink-mute);
  margin-top: 0.5rem;
  letter-spacing: 0.04em;
}

/* "View all" tile on the home collections preview */
.collection-card--more {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--green);
  border-color: var(--green);
  border-left-color: var(--green);
  color: var(--white);
}
.collection-card--more:hover { background: var(--green-mid); border-color: var(--green-mid); }
.collection-card__more-text { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; }
.collection-card__more-meta { font-size: 0.8rem; opacity: 0.85; margin-top: 0.25rem; }

/* Collections index — grouped by category */
.collection-cat { margin-bottom: 2.25rem; }
.collection-cat__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding-bottom: 0.4rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--green-deep);
  border-bottom: 2px solid var(--green);
}
.collection-cat__icon { width: 28px; height: 28px; border-radius: 8px; }
.collection-cat__icon svg { width: 18px; height: 18px; }

/* Collection detail view */
.collection-view {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) 1.25rem 3rem;
  padding-left: calc(1.25rem + env(safe-area-inset-left, 0));
  padding-right: calc(1.25rem + env(safe-area-inset-right, 0));
}
.collection-view__head { text-align: center; margin-bottom: 2rem; }
.collection-view__icon {
  width: 64px; height: 64px; border-radius: 16px;
  margin: 0 auto 0.5rem;
}
.collection-view__icon svg { width: 36px; height: 36px; }
.collection-view__title {
  margin: 0.25rem 0 0.3rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--green-deep);
}
.collection-view__title-ar {
  margin: 0.2rem 0;
  font-family: var(--font-arabic);
  font-size: 1.6rem;
  color: var(--green);
}
.collection-view__desc {
  max-width: 52ch;
  margin: 0.6rem auto 0.8rem;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
}
.collection-view__count { margin: 0; font-size: 0.85rem; color: var(--ink-mute); letter-spacing: 0.04em; }
.sura-nav--single { grid-template-columns: auto; justify-content: center; }

/* =========================================================
   Sura reading view
   ========================================================= */
.sura-view {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) 1.25rem 3rem;
  padding-left: calc(1.25rem + env(safe-area-inset-left, 0));
  padding-right: calc(1.25rem + env(safe-area-inset-right, 0));
}

.sura-view__head {
  text-align: center;
  margin-bottom: 2rem;
}
.sura-view__num {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-mid);
}
.sura-view__title-ar {
  margin: 0.35rem 0 0.25rem;
  font-family: var(--font-arabic);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.25rem);
  color: var(--green-deep);
  direction: rtl;
}
.sura-view__title-tr {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink-soft);
}
.sura-view__title-tr .wf {
  font-style: italic;
  color: var(--green-mid);
  text-transform: lowercase;
}
.sura-view__count {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-mute);
}

.sura-view__ornament {
  margin: 1.5rem auto 0.5rem;
  color: var(--gold);
  display: block;
}

.basmala {
  font-family: var(--font-arabic);
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  color: var(--green-deep);
  direction: rtl;
  margin: 0.5rem 0 0;
}

/* =========================================================
   Single verse view (path /sura/<S>/verse/<V>)
   ========================================================= */
.verse-view {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}
.verse-view__head { text-align: center; margin-bottom: 1.5rem; }
.verse-view__sura-ar {
  display: inline-block;
  font-family: var(--font-arabic);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  color: var(--green-deep);
  direction: rtl;
  text-decoration: none;
  margin: 0.25rem 0 0.15rem;
}
.verse-view__sura-ar:hover { color: var(--green); }
.verse-view__sura-tr {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink-soft);
}
.verse-view__sura-sep { color: var(--ink-mute); }
.verse-view__body {
  background: var(--white);
  border: 1px solid var(--green-line);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.25rem 1.25rem;
}

.verse-nav {
  display: flex;
  gap: 0.75rem;
  margin-top: 2rem;
  flex-wrap: wrap;
  justify-content: space-between;
}
.verse-nav .sura-nav__btn { flex: 1 1 auto; }

/* Verse list */
.verses {
  list-style: none;
  margin: 0;
  padding: 0;
}

.verse {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--green-line);
  transition: background 0.3s var(--ease);
  /* Dégage le chrome collant quand on saute à un verset par son ancre
     (#v-<sourate>-<verset>, préservée par migrateHashUrl et laissée au
     navigateur par interceptInternalLink). Sur la vue sourate ce chrome vaut
     le header PLUS la barre de navigation collante (~50 px) : les 5rem d'avant
     ne couvraient que le header seul et le verset ciblé passait dessous.
     Adossé à --header-h pour suivre les variations de hauteur du header. */
  scroll-margin-top: calc(var(--header-h, 61px) + 3.5rem);
}
.verse:last-child { border-bottom: 0; }

.verse--playing {
  background: var(--green-pale);
  border-radius: var(--radius-lg);
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: -1rem;
  margin-right: -1rem;
  border-left: 3px solid var(--green);
}

.verse__ar-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: flex-start;
}

.verse__ar {
  font-family: var(--font-arabic);
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  line-height: 1.95;
  color: var(--green-deep);
  direction: rtl;
  text-align: right;
  flex: 1;
}

/* Verse marker = 8-pointed rosette (Mushaf style) */
.verse__marker {
  position: relative;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  flex: none;
  margin-top: 0.5rem;
}
.verse__marker svg {
  width: 44px; height: 44px;
  fill: var(--gold-light);
}
.verse__marker-num {
  position: absolute;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold);
}

.verse__translations {
  margin-top: 1rem;
  display: grid;
  gap: 0.65rem;
}

.translation {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 0.65rem;
  align-items: baseline;
}
.translation__lang {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-mid);
  padding-top: 0.15rem;
}
.translation__text {
  margin: 0;
  color: var(--ink);
  line-height: 1.65;
}
.translation--fr .translation__text { font-family: var(--font-display); font-size: 1.05rem; }
.translation--wo .translation__text { font-style: italic; color: var(--ink-soft); }
.translation--en .translation__text { color: var(--ink-soft); }
.translation--missing .translation__lang { opacity: 0.5; }
.translation__text--missing { font-style: italic; color: var(--ink-mute); }

mark.hit {
  background: var(--gold-light);
  color: var(--green-deep);
  padding: 0 0.15em;
  border-radius: 2px;
}

/* Sura navigation */
.sura-nav {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.75rem;
  align-items: center;
}
.sura-nav__btn {
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--green-line);
  border-radius: var(--radius);
  color: var(--green-deep);
  font-size: 0.9rem;
  text-align: center;
  background: var(--white);
  text-decoration: none;
  transition: all 0.15s var(--ease);
}
.sura-nav__btn:hover { border-color: var(--green); color: var(--green); text-decoration: none; }
.sura-nav__btn[aria-disabled="true"] {
  color: var(--ink-mute);
  pointer-events: none;
  opacity: 0.5;
}
.sura-nav__btn--home {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}
.sura-nav__btn--home:hover { background: var(--green-mid); color: var(--white); }

/* =========================================================
   Barre de navigation collante (vue sourate)
   ========================================================= */
/* Placée dans le flux entre l'en-tête et les versets : visible au
   chargement, puis collée sous le header au défilement. `top` se cale sur
   --header-h, déclarée dans :root et republiée en continu par
   App.trackHeaderHeight() — le header mesure 61 px en mobile, 65 px en
   desktop, et davantage en PWA iOS. */
.sura-sticky-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 40;                    /* sous le header (50) */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--green-line);
  /* Fond opaque obligatoire : sans lui le texte des versets défilerait
     visiblement au travers. Posé directement sur l'élément — contrairement au
     header, où le flou a dû migrer sur ::before car il piégeait les
     descendants position:fixed. Cette barre n'en a aucun. */
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}
.sura-sticky-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--green-mid);
  border-radius: 999px;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.sura-sticky-nav__btn:hover { background: var(--green-soft); color: var(--green-deep); text-decoration: none; }
.sura-sticky-nav__btn[aria-disabled="true"] { opacity: 0.3; pointer-events: none; }
.sura-sticky-nav__icon { width: 20px; height: 20px; display: block; }
.sura-sticky-nav__label {
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sura-sticky-nav__ar {
  font-family: var(--font-arabic);
  color: var(--green-deep);
  margin-inline-start: 0.4rem;
}

/* Search results context */
.verse__context {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--green-mid);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 0.35rem;
  text-decoration: none;
}
.verse__context:hover { color: var(--green); }

.empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--ink-soft);
}
.empty h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
  color: var(--green-deep);
}

/* Reference-not-found view */
.section--not-found { max-width: 600px; }
.not-found {
  text-align: center;
  padding: 3rem 1rem;
}
.not-found__mark {
  display: inline-flex;
  margin-bottom: 1rem;
  color: var(--gold);
}
.not-found__mark svg { fill: var(--gold-light); }
.not-found__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 500;
  color: var(--green-deep);
  margin: 0.5rem 0 1rem;
}
.not-found__msg {
  color: var(--ink-soft);
  margin: 0 0 2rem;
  font-size: 1rem;
}
.not-found__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* About / prose */
.prose {
  max-width: 680px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink);
}
.prose p { margin: 0 0 1rem; }
.prose strong { color: var(--green-deep); }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--green-pale);
  color: var(--green-deep);
  padding: 0.1em 0.4em;
  border-radius: 4px;
}
.prose__meta {
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--ink-mute);
}

/* =========================================================
   Install banner
   ========================================================= */
/* ---- Transient audio-error toast ---- */
.audio-toast[hidden] { display: none; }
.audio-toast {
  position: fixed;
  left: 50%;
  /* --bottom-nav-h vaut 0 en desktop : la formule y redonne la valeur d'origine. */
  bottom: calc(1rem + var(--bottom-nav-h) + env(safe-area-inset-bottom, 0));
  transform: translateX(-50%);
  z-index: 60;
  max-width: min(90vw, 28rem);
  padding: 0.7rem 1.1rem;
  background: var(--green-deep);
  color: var(--white);
  border-radius: 999px;
  font-size: 0.9rem;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.install-banner[hidden] { display: none; }
.install-banner {
  position: fixed;
  left: 50%;
  /* Lift the floating banner above the iOS home indicator — et au-dessus de la
     barre de nav mobile. --bottom-nav-h vaut 0 en desktop. */
  bottom: calc(1rem + var(--bottom-nav-h) + env(safe-area-inset-bottom, 0));
  transform: translateX(-50%);
  z-index: 10000;
  background: var(--green-deep);
  color: var(--white);
  border-radius: 999px;
  padding: 0.5rem 0.65rem 0.5rem 1rem;
  box-shadow: 0 12px 40px -10px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  max-width: calc(100% - 2rem);
}
.install-banner button {
  font: inherit;
  border: 0;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--white);
  color: var(--green-deep);
  font-weight: 500;
  min-height: 40px;
  transition: background 0.15s var(--ease), transform 0.05s var(--ease);
}
.install-banner button:hover { background: var(--green-pale); }
.install-banner button:active { transform: scale(0.97); }
.install-banner button:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}
.install-banner__no {
  background: transparent;
  color: var(--white);
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
}
.install-banner__no:hover { background: rgba(255,255,255,0.12); color: var(--white); }

/* =========================================================
   Loader Overlay
   ========================================================= */
.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,255,255,0.98);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}
.loader-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.loader-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader-spinner svg {
  fill: var(--green);
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* =========================================================
   Verse Share Button
   ========================================================= */
.verse__actions {
  position: absolute;
  top: 0.5rem;
  right: 0;
  display: flex;
  gap: 0.5rem;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--green-line);
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
  transition: all 0.15s var(--ease);
  color: var(--green);
  font-size: 0;
}
.share-btn:hover {
  border-color: var(--green);
  background: var(--green-pale);
}
.share-btn:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.share-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--green-line);
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
  transition: all 0.15s var(--ease);
  color: var(--green);
  font-size: 0;
}
.play-btn:hover { border-color: var(--green); background: var(--green-pale); }
.play-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.play-btn svg { width: 16px; height: 16px; fill: currentColor; }
.play-btn.is-playing { background: var(--green); border-color: var(--green); color: var(--white); }
.play-btn.is-loading { opacity: 0.6; cursor: progress; animation: play-pulse 1.2s ease-in-out infinite; }
@keyframes play-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.92); }
}

/* ---- Sura sequential play button ---- */
.sura-view__controls {
  display: flex;
  justify-content: center;
  margin: 1rem 0 0.5rem;
}

/* Sélecteur de disposition. Masqué par défaut : il n'est révélé qu'au-delà
   de 960 px, là où le côte à côte a un sens (voir le bloc min-width plus bas).
   Stylé via sa propre classe et non .sura-view__controls, que tpl-collection
   réutilise. */
.layout-toggle {
  display: none;
  justify-content: center;
  gap: 0.25rem;
  margin: 0.25rem 0 0.75rem;
}
.layout-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Boutons icône seule : cible carrée d'au moins 36 px plutôt qu'une pastille
     textuelle étroite. Le nom accessible vit dans l'aria-label du bouton. */
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--green-line);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.layout-toggle__icon {
  width: 18px;
  height: 18px;
  display: block;
}
.layout-toggle__btn:hover { color: var(--green-deep); }
.layout-toggle__btn[aria-pressed="true"] {
  background: var(--green-soft);
  color: var(--green-deep);
  border-color: var(--green);
}

.sura-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  border: 1.5px solid var(--green);
  background: var(--white);
  color: var(--green-deep);
  font: inherit;
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.sura-play-btn:hover { background: var(--green-pale); }
.sura-play-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.sura-play-btn[aria-pressed="true"] { background: var(--green); color: var(--white); }
.sura-play-btn svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }

.share-fallback {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  background: var(--white);
  border: 1px solid var(--green-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 100;
  min-width: 180px;
}
.share-fallback.show {
  display: flex;
  flex-direction: column;
}
.share-fallback button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ink);
  font-size: 0.9rem;
  text-align: left;
  transition: background 0.15s var(--ease);
  font-family: inherit;
}
.share-fallback button:first-child {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.share-fallback button:last-child {
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
.share-fallback button:hover {
  background: var(--green-pale);
}
.share-fallback svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: var(--green);
  fill: none;
  stroke-width: 2;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  border-top: 1px solid var(--green-line);
  background: var(--bg-soft);
  margin-top: 3rem;
}
.site-footer__inner {
  padding-top: 1.5rem;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0));
  padding-left: calc(1.25rem + env(safe-area-inset-left, 0));
  padding-right: calc(1.25rem + env(safe-area-inset-right, 0));
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-align: center;
}
.site-footer p { margin: 0.15rem 0; }
.site-footer__meta { color: var(--ink-mute); font-size: 0.8rem; }
.site-footer .site-footer__version {
  color: var(--ink-mute);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  margin-top: 0.5rem;
}
.site-footer__version:empty { display: none; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 640px) {
  /* Propriétés longues, jamais le raccourci `padding` : il réinitialise les
     quatre côtés et jetterait les env(safe-area-inset-*) de la règle de base
     (voir .site-header plus haut). En PWA iOS installée — viewport-fit=cover
     + apple-mobile-web-app-status-bar-style=black-translucent — le contenu
     s'étend sous la barre d'état, et sans ces env() la marque et le
     sélecteur de langue passent sous l'heure et la batterie.
     Les latérales servent au paysage sur les iPhone à encoche. */
  .site-header {
    padding-top: calc(0.75rem + env(safe-area-inset-top, 0));
    padding-bottom: 0.75rem;
    padding-left: calc(1rem + env(safe-area-inset-left, 0));
    padding-right: calc(1rem + env(safe-area-inset-right, 0));
  }
  .brand__name-latin { font-size: 1.1rem; }
  /* .site-nav change de métier sous ce seuil : la rangée de texte du header
     devient une barre d'onglets fixée en bas d'écran. Le markup est
     identique — seul le CSS diffère, d'où l'absence de duplication et un
     highlightNav() inchangé. Le header n'a plus que la marque + la langue.
     Voir docs/superpowers/specs/2026-07-16-nav-mobile-design.md */
  :root { --bottom-nav-h: 62px; }

  .site-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;                       /* sous .install-banner (10000) */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: var(--bg);
    border-top: 1px solid var(--green-line);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .site-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: 44px;                  /* cible tactile minimale */
    padding: 0.55rem 0.15rem 0.65rem;
    font-size: 0.65rem;
    line-height: 1.15;
    text-align: center;
    border-bottom: 0;
  }
  .site-nav a.is-active {
    color: var(--green);
    border-bottom: 0;                  /* le soulignement desktop n'a pas de sens ici */
  }
  .site-nav__icon { display: block; width: 22px; height: 22px; }

  /* 4 onglets seulement : « À propos » est relayé par le footer. */
  .site-nav a[data-route="about"] { display: none; }

  /* La barre de nav occupe le bas de l'écran et gère sa propre zone sûre ;
     le footer ne touche plus le bord et n'a plus à la compenser. */
  .site-footer__inner { padding-bottom: 1.5rem; }

  .search { flex-direction: row; }
  .search button { padding: 0 1rem; font-size: 0.9rem; }

  .verse__ar-row { grid-template-columns: 1fr; gap: 0.5rem; }
  .verse__marker { justify-self: flex-end; }

  .sura-nav { grid-template-columns: 1fr; }
  .sura-nav__btn { font-size: 0.85rem; }
}

/* =========================================================
   Disposition « côte à côte » de la lecture d'une sourate
   =========================================================
   Second breakpoint du projet (le seul autre est max-width: 640px) :
   le côte à côte n'a de sens qu'au-delà d'une largeur que le seuil
   mobile ne décrit pas. Sous 960 px rien de ce bloc ne s'applique —
   l'empilé reprend sans aucun JS, et le sélecteur reste masqué.
   Voir docs/superpowers/specs/2026-07-21-lecture-dispositions-design.md */
@media (min-width: 960px) {
  .layout-toggle { display: flex; }

  /* La colonne de lecture (760px) est pensée pour une seule colonne ;
     divisée en deux elle tomberait à ~314px, trop serré pour l'arabe.
     Élargie ici, chaque colonne fait ~484px. */
  .sura-view[data-layout="split"] { max-width: 1100px; }

  .sura-view[data-layout="split"] .verse {
    display: grid;
    grid-template-columns: 1fr auto 1fr;   /* traduction | gouttière | arabe */
    grid-template-rows: auto auto;
    column-gap: 1.5rem;
    align-items: start;
  }

  /* Le marqueur est imbriqué dans .verse__ar-row : display:contents promeut
     ses enfants en cellules de la grille .verse, sans toucher au markup. */
  .sura-view[data-layout="split"] .verse__ar-row { display: contents; }

  .sura-view[data-layout="split"] .verse__translations {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-top: 0;
  }
  .sura-view[data-layout="split"] .verse__marker { grid-column: 2; grid-row: 1; }

  /* position: relative et non static : remet les actions dans le flux de la
     grille tout en les laissant servir d'ancre à .share-fallback, qui est en
     position:absolute à l'intérieur. Un static déplacerait le menu de partage.
     top/right réinitialisés : sous position:relative, top/right de la règle
     de base (0.5rem / 0) deviennent des décalages *relatifs* et non plus des
     coordonnées absolues — sans ce reset, le contenu de la gouttière serait
     décalé de 0.5rem vers le bas dès que la base changerait. */
  .sura-view[data-layout="split"] .verse__actions {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    top: 0;
    right: auto;
    flex-direction: column;
    width: auto;
  }

  .sura-view[data-layout="split"] .verse__ar { grid-column: 3; grid-row: 1 / span 2; }
}