/* ==========================================================================
   Coran — audio-coran.com/coran/
   Design system partagé avec audio-coran.com.
   Tokens identiques au site, composants préfixés .coran-
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS — identité propre à Audio Coran
   -------------------------------------------------------------------------- */
:root {
  /* Tokens canoniques centralises dans assets/design/design-system.css.
     Ci-dessous : extensions propres a l'application de lecture. */
  /* --- Extensions locales à l'application de lecture --- */
  --font-quran: 'Scheherazade New', 'Amiri Quran', 'Amiri', 'Geeza Pro', serif;
  --rosette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23C9A24B' stroke-width='2'%3E%3Cpath d='M24 3.5 44.5 24 24 44.5 3.5 24Z'/%3E%3Cpath d='M9.5 9.5h29v29h-29Z'/%3E%3C/g%3E%3C/svg%3E");
  --gutter: clamp(18px, 5vw, 32px);
  --maxw: 720px;
  --topbar-h: 62px;          /* hauteur de dessin d'une ligne */
  --topbar-real: 62px;       /* hauteur réellement occupée, mesurée en JS */

  /* Réglages de lecture pilotés en JavaScript */
  --num-shift: -0.11em;   /* recalage optique du chiffre, propre à chaque police */
  --ar-size: 1.95rem;
  --ar-lh: 2.3;
  --fr-size: 1rem;

  /* Zones sûres iOS */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

[data-theme="light"] {
  /* Couleurs du theme clair centralisees dans design-system.css.
     Ci-dessous : override propre a l'app de lecture. */

  /* Or plus dense pour tenir sur fond clair */
  --rosette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23A8842F' stroke-width='2'%3E%3Cpath d='M24 3.5 44.5 24 24 44.5 3.5 24Z'/%3E%3Cpath d='M9.5 9.5h29v29h-29Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-real) + 16px);
}

body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--bg);
  background-image: var(--halo);
  background-repeat: no-repeat;
  background-position: top center;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  font-optical-sizing: auto;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
body.is-locked { overflow: hidden; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}

p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a, button, [role="button"], summary { touch-action: manipulation; }

/* iOS zoome sur tout champ dont le texte fait moins de 16 px : on l'interdit. */
input, select, textarea { font-size: max(16px, 1rem); }
img, svg { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}

::selection { background: rgba(201, 162, 75, 0.28); color: var(--text); }

.coran-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.coran-skip {
  position: fixed;
  top: -120px; left: 12px;
  z-index: 300;
  padding: 12px 18px;
  background: var(--emerald);
  color: var(--offwhite);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: top var(--dur-fast) var(--ease-out);
}
.coran-skip:focus { top: calc(var(--safe-top) + 12px); }

.coran-wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Transitions de page (navigation multi-pages) */
@view-transition { navigation: auto; }

/* --------------------------------------------------------------------------
   3. Signature : la rosette Rub el Hizb
   -------------------------------------------------------------------------- */
.coran-rosette {
  --size: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--size);
  height: var(--size);
  background-image: var(--rosette);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  font-family: var(--font-mono);
  font-size: calc(var(--size) * 0.3);
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out);
}
.coran-rosette--lg { --size: 46px; }
.coran-rosette--sm { --size: 28px; }
.coran-rosette--gold { color: var(--gold); }

/* --------------------------------------------------------------------------
   4. Barre supérieure
   -------------------------------------------------------------------------- */
.coran-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  padding-top: var(--safe-top);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  backdrop-filter: saturate(150%) blur(18px);
  border-bottom: 1px solid var(--border);
  transition: transform var(--dur-base) var(--ease-out);
}
@supports not (backdrop-filter: blur(1px)) { .coran-topbar { background: var(--bg); } }
@supports not (color: color-mix(in srgb, red, blue)) { .coran-topbar { background: var(--bg); } }

/* Immersion : la barre s'efface quand on descend dans le texte */
.coran-topbar.is-hidden { transform: translateY(calc(-100% - 4px)); }

.coran-topbar__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  row-gap: 10px;
  padding-block: 18px;
  min-height: 74px;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.coran-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-end: auto;
  min-width: 0;
}
.coran-brand__mark { width: 32px; height: 32px; flex: 0 0 auto; }
.coran-brand__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  white-space: nowrap;
}
.coran-brand__text em { font-style: normal; color: var(--accent); }

.coran-brand--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  line-height: 1.25;
}
.coran-brand--stack .coran-brand__text {
  font-size: 1.15rem;
  max-width: min(48vw, 300px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.coran-brand--stack .coran-meta {
  max-width: min(48vw, 300px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Au-delà du mobile : header sur une seule ligne. La marque se tronque au
   besoin pour garder le sélecteur d'apps et les boutons alignés (évite que
   le bouton thème passe à la ligne suivante). */
@media (min-width: 641px) {
  /* En-tête aéré sur desktop : il occupe toute la largeur (comme l'accueil)
     au lieu d'être compressé dans la colonne de lecture de 720px. */
  .coran-topbar__inner { flex-wrap: nowrap; gap: 22px; max-width: 1200px; padding-inline: clamp(24px, 4vw, 48px); }
  .coran-brand { flex: 0 1 auto; min-width: 2ch; }
  .coran-brand--stack .coran-brand__text,
  .coran-brand--stack .coran-meta { max-width: none; }
  .ac-switch { flex: 0 0 auto; }
  .coran-iconbtn { flex: 0 0 auto; }
}

.coran-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-secondary);
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.coran-iconbtn:hover { border-color: var(--border-accent); color: var(--text); background: var(--surface-strong); }
.coran-iconbtn:active { transform: scale(0.95); }
.coran-iconbtn svg { width: 19px; height: 19px; }
.coran-iconbtn.is-on { color: var(--gold); border-color: var(--border-accent); }
.coran-iconbtn__label { font-size: 0.86rem; font-weight: 500; }
.coran-iconbtn--block { width: 100%; justify-content: center; }

/* Progression de lecture pilotée par le défilement */
.coran-progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--emerald-light), var(--gold));
  transform-origin: 0 50%;
  transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  .coran-progress {
    animation: coran-scale-x linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes coran-scale-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* --------------------------------------------------------------------------
   5. Accueil
   -------------------------------------------------------------------------- */
.coran-hero { padding: 44px 0 26px; text-align: center; }

.coran-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-accent);
  background: var(--surface);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.coran-hero__eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.coran-hero__ar {
  display: block;
  margin-top: 22px;
  font-family: var(--font-quran);
  font-size: clamp(1.7rem, 7vw, 2.3rem);
  line-height: 1.9;
  color: var(--gold);
  direction: rtl;
}
.coran-hero__ar-tr {
  margin: 8px auto 0;
  max-width: 40ch;
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.5;
}
.coran-hero__ref {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.coran-hero__title {
  margin-top: 14px;
  font-size: clamp(2.4rem, 10vw, 3.4rem);
  font-weight: 700;
}
.coran-hero__sub {
  margin: 10px auto 0;
  max-width: 44ch;
  color: var(--text-secondary);
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   6. Recherche universelle
   -------------------------------------------------------------------------- */
.coran-omnibox { position: relative; margin-top: 26px; }

.coran-omnibox__field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 6px 4px 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.coran-omnibox__field:focus-within {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-soft), var(--shadow-glow);
}
.coran-omnibox__field > svg { width: 19px; height: 19px; color: var(--text-tertiary); flex: 0 0 auto; }

.coran-omnibox input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  border: 0;
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  appearance: none;
}
.coran-omnibox input::placeholder { color: var(--text-tertiary); }
.coran-omnibox input::-webkit-search-cancel-button { display: none; }
.coran-omnibox input:focus { outline: none; }

.coran-omnibox__clear {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: none; color: var(--text-tertiary);
}
.coran-omnibox__clear.is-visible { display: inline-flex; }
.coran-omnibox__clear:hover { color: var(--text); }

.coran-omnibox__kbd { display: none; }
@media (hover: hover) and (pointer: fine) {
  .coran-omnibox__kbd {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 9px;
    margin-inline-end: 6px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    flex: 0 0 auto;
    transition: opacity var(--dur-fast) var(--ease-out);
  }
  .coran-omnibox__field:focus-within .coran-omnibox__kbd { opacity: 0; }
}

.coran-omnibox__hint {
  margin: 12px 4px 0;
  color: var(--text-tertiary);
  font-size: 0.82rem;
  text-align: center;
}
.coran-omnibox__hint code {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  padding: 3px 8px;
  margin: 0 2px;
  border-radius: 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   7. Reprise de lecture
   -------------------------------------------------------------------------- */
.coran-resume {
  display: none;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding: 16px 18px;
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, rgba(201, 162, 75, 0.09), transparent 58%),
    var(--bg-elevated);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.coran-resume.is-visible { display: flex; }
.coran-resume:hover { box-shadow: var(--shadow-glow); }
.coran-resume:active { transform: scale(0.99); }
.coran-resume__body { flex: 1 1 auto; min-width: 0; }
.coran-resume__label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.coran-resume__title {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.28rem;
}
.coran-resume__meta { display: block; color: var(--text-secondary); font-size: 0.85rem; }
.coran-resume__arrow { color: var(--accent); flex: 0 0 auto; }
.coran-resume__arrow svg { width: 22px; height: 22px; }

/* --- Sourate Al-Kahf, lue le vendredi ------------------------------------
   Discrète le reste de la semaine, mise en avant du jeudi soir au vendredi. */
.coran-kahf {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.coran-kahf:hover { border-color: var(--border-gold); }
.coran-kahf:active { transform: scale(0.99); }

.coran-kahf__mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  background-image: var(--rosette);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.85;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.coran-kahf__body { flex: 1 1 auto; min-width: 0; }
.coran-kahf__label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 500;
}
.coran-kahf__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
}
.coran-kahf__meta { display: none; color: var(--text-secondary); font-size: 0.84rem; }
.coran-kahf__arrow { flex: 0 0 auto; color: var(--text-tertiary); }
.coran-kahf__arrow svg { width: 20px; height: 20px; }

/* Le jour venu */
.coran-kahf.is-friday {
  margin-top: 16px;
  padding: 16px 18px;
  border-color: var(--border-gold);
  background:
    linear-gradient(135deg, rgba(201, 162, 75, 0.11), transparent 60%),
    var(--bg-elevated);
}
.coran-kahf.is-friday:hover { box-shadow: 0 0 40px rgba(201, 162, 75, 0.14); }
.coran-kahf.is-friday .coran-kahf__mark { width: 42px; height: 42px; opacity: 1; font-size: 13px; }
.coran-kahf.is-friday .coran-kahf__label { color: var(--gold); }
.coran-kahf.is-friday .coran-kahf__title { font-size: 1.28rem; }
.coran-kahf.is-friday .coran-kahf__meta { display: block; }
.coran-kahf.is-friday .coran-kahf__arrow { color: var(--gold); }

/* --------------------------------------------------------------------------
   8. Onglets
   -------------------------------------------------------------------------- */
.coran-tabs {
  position: sticky;
  top: var(--topbar-real);
  z-index: 40;
  display: flex;
  gap: 4px;
  margin-top: 30px;
  padding: 5px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
@supports not (backdrop-filter: blur(1px)) { .coran-tabs { background: var(--bg-elevated); } }

.coran-tab {
  flex: 1 1 0;
  min-height: 42px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--text-tertiary);
  font-size: 0.9rem;
  font-weight: 500;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.coran-tab:hover { color: var(--text-secondary); }
.coran-tab[aria-selected="true"] { background: var(--surface-strong); color: var(--text); }

.coran-panel { display: none; padding-top: 20px; }
.coran-panel.is-active { display: block; }

/* --------------------------------------------------------------------------
   9. Listes
   -------------------------------------------------------------------------- */
.coran-list { list-style: none; margin: 0; padding: 0; }

.coran-row {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 14px 12px;
  margin-inline: -12px;
  border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-fast) var(--ease-out);
}
.coran-list > li:last-child .coran-row { border-bottom: 0; }
.coran-row:hover,
.coran-row.is-highlighted { background: var(--surface); }
.coran-row.is-highlighted { outline: 1px solid var(--border-accent); }

.coran-row__body { flex: 1 1 auto; min-width: 0; }
.coran-row__title {
  display: block;
  font-weight: 500;
  font-size: 1.02rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coran-row__meta,
.coran-meta {
  display: block;
  color: var(--text-tertiary);
  font-size: 0.82rem;
}
.coran-row__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coran-row__ar {
  flex: 0 0 auto;
  font-family: var(--font-quran);
  font-size: 1.4rem;
  line-height: 2;
  color: var(--accent);
  direction: rtl;
}
.coran-row__tag {
  flex: 0 0 auto;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
}

.coran-group-title {
  margin: 26px 0 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.coran-group-title:first-child { margin-top: 4px; }

.coran-empty { padding: 52px 20px; text-align: center; color: var(--text-secondary); }
.coran-empty strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
}
.coran-empty button {
  margin-top: 18px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-size: 0.92rem;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.coran-empty button:hover { border-color: var(--border-accent); }

.coran-hit__ar {
  display: block;
  margin-top: 6px;
  font-family: var(--font-quran);
  font-size: 1.3rem;
  line-height: 2.1;
  direction: rtl;
  text-align: right;
  color: var(--text);
}
.coran-hit__fr {
  display: block;
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 0.92rem;
}
.coran-hit mark {
  padding: 1px 3px;
  border-radius: 5px;
  background: rgba(201, 162, 75, 0.22);
  color: var(--text);
}
.coran-row--hit { align-items: flex-start; }
.coran-row--hit .coran-rosette { margin-top: 2px; }

.coran-count {
  margin: 0 0 12px;
  color: var(--text-tertiary);
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   10. Lecture
   -------------------------------------------------------------------------- */
.coran-reader { padding-bottom: calc(96px + var(--safe-bottom)); }

.coran-surah-head {
  position: relative;
  margin: 30px 0 10px;
  padding: 32px 26px 26px;
  text-align: center;
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(140% 100% at 50% 0%, rgba(201, 162, 75, 0.08), transparent 70%),
    var(--bg-elevated);
}
/* Cartouche : un second filet intérieur, symétrique sur les quatre côtés */
.coran-surah-head::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--border-gold);
  border-radius: calc(var(--radius-lg) - 7px);
  opacity: 0.45;
  pointer-events: none;
}

.coran-surah-head__ar {
  margin: 0;
  font-family: var(--font-quran);
  font-size: clamp(1.9rem, 8vw, 2.5rem);
  line-height: 1.9;
  color: var(--text);
  direction: rtl;
}
.coran-surah-head__fr {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
}
.coran-surah-head__meta {
  margin-top: 8px;
  color: var(--text-tertiary);
  font-size: 0.84rem;
}

.coran-basmala {
  margin: 30px 0 22px;
  padding: 0;
  text-align: center;
  font-family: var(--font-quran);
  font-size: clamp(1.45rem, 6vw, 1.9rem);
  line-height: 2.2;
  color: var(--gold);
  direction: rtl;
}

.coran-pagemark {
  margin: 36px 0 20px;
  text-align: center;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Bloc verset — content-visibility pour les longues sourates */
.coran-ayah {
  position: relative;
  padding: 26px 14px 24px;
  margin-inline: -14px;
  border-radius: var(--radius-md);
  scroll-margin-top: calc(var(--topbar-real) + 20px);
  content-visibility: auto;
  contain-intrinsic-size: auto 260px;
  transition: background var(--dur-base) var(--ease-out);
}
.coran-ayah.is-active { background: var(--surface); }
.coran-ayah.is-open {
  background: var(--surface);
  box-shadow: inset 2px 0 0 var(--border-accent);
}
[data-display="ar"] .coran-ayah.is-open { box-shadow: inset -2px 0 0 var(--border-accent); }
.coran-ayah.is-flash { animation: coran-flash 1.8s var(--ease-out); }
@keyframes coran-flash {
  0%, 35% { background: rgba(201, 162, 75, 0.16); }
  100%    { background: transparent; }
}

.coran-ayah__ar {
  margin: 0;
  font-family: var(--font-quran);
  font-size: var(--ar-size);
  line-height: var(--ar-lh);
  direction: rtl;
  text-align: right;
  color: var(--text);
  text-wrap: initial;
}
/* Marqueur de verset. Le chiffre est recalé par --num-shift, calculé à partir
   des métriques réelles de chaque police arabe : l'ascendante d'Amiri Quran
   (1,815 em) et celle de Scheherazade (1,343 em) ne posent pas la ligne de base
   au même endroit, un centrage par flexbox seul laisse le chiffre trop bas. */
.coran-ayah__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 1.7em; height: 1.7em;
  margin-inline-start: 0.22em;
  background-image: var(--rosette);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  font-family: var(--font-quran);
  font-size: 0.55em;
  line-height: 1;
  color: var(--gold);
}
.coran-ayah__num > span {
  display: block;
  transform: translateY(var(--num-shift));
}

.coran-ayah__fr {
  margin: 16px 0 0;
  padding-inline-start: 16px;
  border-inline-start: 2px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--fr-size);
  line-height: 1.75;
}
.coran-ayah__fr b {
  font-family: var(--font-mono);
  font-size: 0.76em;
  font-weight: 500;
  color: var(--text-tertiary);
  margin-inline-end: 8px;
}

/* Barre d'actions du verset.
   Elle apparaît en bas de l'écran quand un verset est choisi. Placée hors du
   flux, elle ne déplace jamais le texte pendant la lecture — c'est ce que
   faisaient les outils insérés sous chaque verset. */
.coran-ayah.is-selected {
  background: var(--surface);
  box-shadow: inset 2px 0 0 var(--border-accent);
}
[data-display="ar"] .coran-ayah.is-selected { box-shadow: inset -2px 0 0 var(--border-accent); }

.coran-actionbar {
  position: fixed;
  left: 50%;
  bottom: calc(16px + var(--safe-bottom));
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 2 * var(--gutter));
  max-width: 520px;
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-soft);
  transform: translate(-50%, calc(100% + 32px));
  opacity: 0;
  visibility: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out),
              visibility 0s linear var(--dur-base);
}
.coran-actionbar.is-open {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.coran-actionbar__ref {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coran-actionbar__tools { display: flex; gap: 2px; flex: 0 0 auto; }

.coran-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-secondary);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.coran-tool:hover { background: var(--surface-strong); color: var(--text); }
.coran-tool svg { width: 18px; height: 18px; }
.coran-tool.is-on { color: var(--gold); }
.coran-tool--fermer { color: var(--text-tertiary); }

[data-display="ar"] .coran-ayah__fr { display: none; }
[data-display="fr"] .coran-ayah__ar { display: none; }
[data-display="fr"] .coran-ayah__fr {
  margin-top: 0;
  padding-inline-start: 0;
  border-inline-start: 0;
  color: var(--text);
  font-size: calc(var(--fr-size) * 1.08);
}

/* --- Français seul : des paragraphes qui se suivent, pas des blocs isolés --- */
[data-display="fr"] .coran-ayah { padding: 11px 14px; }
@media (min-width: 740px) {
  [data-display="fr"] .coran-ayah { padding: 13px 18px; }
}

/* --- Arabe seul : le flux continu du Mushaf ---------------------------------
   Les versets s'enchaînent dans un seul bloc de texte justifié, séparés par
   leur seule rosette, comme sur une page imprimée. Le conteneur .coran-flow
   disparaît (display: contents) dans les deux autres modes.               */
.coran-flow { display: contents; }

[data-display="ar"] .coran-flow {
  display: block;
  direction: rtl;
  text-align: justify;
  padding: 10px 0 24px;
}
[data-display="ar"] .coran-flow .coran-ayah {
  display: inline;
  padding: 0;
  margin: 0;
  border-radius: 4px;
  content-visibility: visible;
  contain-intrinsic-size: none;
}
[data-display="ar"] .coran-flow .coran-ayah__ar { display: inline; }
/* L'espace qui sépare deux versets est porté par la rosette elle-même :
   le rendu ne laisse aucun blanc entre les articles. */
[data-display="ar"] .coran-ayah__num { margin-inline-end: 0.62em; }
[data-display="ar"] .coran-flow .coran-ayah.is-selected {
  background: var(--surface-strong);
  box-shadow: none;
}

.coran-navpair { display: flex; gap: 12px; margin: 36px 0 12px; }
.coran-navbtn {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.coran-navbtn:hover { border-color: var(--border-accent); background: var(--surface); }
.coran-navbtn--next { justify-content: flex-end; text-align: right; }
.coran-navbtn__label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.coran-navbtn__title { display: block; font-weight: 500; font-size: 0.98rem; }
.coran-navbtn svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   11. Feuille de réglages
   -------------------------------------------------------------------------- */
.coran-sheet {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  visibility: hidden;
}
.coran-sheet.is-open { visibility: visible; }

.coran-sheet__scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: rgba(5, 8, 7, 0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.coran-sheet.is-open .coran-sheet__scrim { opacity: 1; }

.coran-sheet__panel {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px var(--gutter) calc(28px + var(--safe-bottom));
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-out);
}
.coran-sheet.is-open .coran-sheet__panel { transform: translateY(0); }

.coran-sheet__grip {
  width: 44px; height: 4px;
  margin: 10px auto 16px;
  border-radius: 4px;
  background: var(--border);
}
.coran-sheet__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.coran-field { padding: 18px 0; border-bottom: 1px solid var(--border); }
.coran-field:last-of-type { border-bottom: 0; }
.coran-field__label {
  display: block;
  margin-bottom: 12px;
  font-size: 0.88rem;
  font-weight: 500;
}
.coran-field__hint { margin-top: 10px; color: var(--text-tertiary); font-size: 0.8rem; }

.coran-seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.coran-seg button {
  flex: 1 1 0;
  min-height: 42px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--text-tertiary);
  font-size: 0.85rem;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.coran-seg button[aria-pressed="true"] { background: var(--surface-strong); color: var(--text); }

.coran-stepper { display: flex; align-items: center; gap: 14px; }
.coran-stepper button {
  width: 48px; height: 48px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  font-size: 1.2rem;
  line-height: 1;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.coran-stepper button:hover:not(:disabled) { border-color: var(--border-accent); }
.coran-stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
.coran-stepper__value {
  flex: 1 1 auto;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.coran-preview {
  margin-top: 14px;
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-quran);
  font-size: var(--ar-size);
  line-height: var(--ar-lh);
  direction: rtl;
  text-align: center;
  color: var(--text);
}

.coran-jump { display: flex; gap: 8px; }
.coran-jump input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 1rem;
}
.coran-jump input:focus { outline: none; border-color: var(--border-accent); }
.coran-jump button {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--emerald), var(--emerald-light));
  color: var(--offwhite);
  box-shadow: 0 0 26px rgba(31, 169, 122, 0.22);
  font-weight: 600;
  font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   12. États, notifications, pied de page
   -------------------------------------------------------------------------- */
.coran-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 72px 20px;
  color: var(--text-tertiary);
  font-size: 0.9rem;
}
.coran-loading__dot {
  width: 34px; height: 34px;
  background-image: var(--rosette);
  background-size: contain;
  background-repeat: no-repeat;
  animation: coran-pulse 1.8s var(--ease-out) infinite;
}
@keyframes coran-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.92) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1) rotate(45deg); }
}

.coran-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + var(--safe-bottom));
  z-index: 120;
  transform: translate(-50%, 16px);
  max-width: calc(100vw - 32px);
  padding: 13px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 0.9rem;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.coran-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.coran-footer {
  margin-top: 56px;
  padding: 30px 0 calc(34px + var(--safe-bottom));
  border-top: 1px solid var(--border);
  color: var(--text-tertiary);
  font-size: 0.82rem;
  text-align: center;
}
.coran-footer a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.coran-footer a:hover { color: var(--accent); }
.coran-footer p { margin: 5px 0; }

.coran-install {
  display: none;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 0.88rem;
}
.coran-install.is-visible { display: flex; }
.coran-install button {
  margin-inline-start: auto;
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--emerald), var(--emerald-light));
  color: var(--offwhite);
  box-shadow: 0 0 26px rgba(31, 169, 122, 0.22);
  font-size: 0.86rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   13. Écrans larges
   -------------------------------------------------------------------------- */
@media (min-width: 740px) {
  :root { --ar-lh: 2.45; }
  .coran-hero { padding: 60px 0 30px; }
  .coran-ayah { padding: 30px 18px 28px; margin-inline: -18px; }
  .coran-row { padding: 15px 16px; margin-inline: -16px; }
}



/* ==========================================================================
   15. Sélecteur d'applications — composant partagé avec audio-coran.com
   Volontairement neutre : gris semi-transparents et currentColor, donc
   identique au site principal et lisible dans les deux thèmes.
   ========================================================================== */
.ac-switch {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px; border-radius: 100px;
  background: rgba(127,127,127,0.10);
  border: 1px solid rgba(127,127,127,0.22);
}
.ac-switch__pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 100px;
  font-size: 13.5px; font-weight: 600; line-height: 1;
  text-decoration: none; color: inherit; opacity: 0.72; white-space: nowrap;
  transition: opacity 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.ac-switch__pill svg { width: 17px; height: 17px; flex-shrink: 0; }
.ac-switch__pill:hover { opacity: 1; background: rgba(127,127,127,0.12); }
.ac-switch__pill:active { transform: scale(0.97); }
.ac-switch__pill.is-current {
  opacity: 1;
  background: linear-gradient(135deg, #1FA97A, #0F6D4C);
  color: #F6F3EA;
  box-shadow: 0 4px 14px rgba(15,109,76,0.32);
}
.ac-switch__pill.is-current:hover { color: #F6F3EA; }
/* Libellé long « Fonds d'écran » réservé aux grands écrans (aria-label pour le reste). */
.ac-switch__long { display: none; }
@media (min-width: 1100px) { .ac-switch__long { display: inline; } }

/* Mobile : le sélecteur passe sur sa propre ligne, pleine largeur,
   les 3 pilules se partageant l'espace.
   `order` et `flex-basis` sont propres à cette app : le header y est un
   conteneur flex, il faut donc envoyer le sélecteur en dernière position
   pour qu'il descende seul au lieu d'entraîner les boutons avec lui. */
/* --- Sélecteur d'applications : aligné à droite sur desktop (≥860px),
   cohérent avec les autres applications. --- */
@media (min-width: 860px) {
  .ac-switch { margin-left: auto; }
}
/* Mobile & tablette (≤859px) : menu déroulant ouvert par le bouton burger
   (styles partagés dans design-system.css). */
@media (max-width: 859px) {
  .ac-switch {
    position: absolute; top: calc(100% + 8px); right: clamp(12px, 4vw, 24px);
    left: auto; transform: none; order: 0; flex: 0 0 auto;
    width: min(264px, calc(100vw - 24px));
    display: none; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 8px; border-radius: 16px;
    background: var(--bg-elevated); border: 1px solid var(--border);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45); z-index: 80;
  }
  .ac-switch.is-open { display: flex; }
  .ac-switch__pill { width: 100%; justify-content: flex-start; min-height: 46px; padding: 11px 14px; border-radius: 12px; font-size: 14.5px; gap: 12px; }
  .ac-switch__pill svg { width: 18px; height: 18px; }
  .ac-switch.is-open .ac-switch__long { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-switch__pill { transition: none; }
  .ac-switch__pill:active { transform: none; }
}

/* --------------------------------------------------------------------------
   14. Préférences système
   -------------------------------------------------------------------------- */
@media (prefers-contrast: more) {
  :root {
    --border: rgba(246, 243, 234, 0.28);
    --text-secondary: rgba(246, 243, 234, 0.86);
    --text-tertiary: rgba(246, 243, 234, 0.68);
  }
  [data-theme="light"] {
    --border: rgba(20, 24, 27, 0.30);
    --text-secondary: rgba(20, 24, 27, 0.86);
    --text-tertiary: rgba(20, 24, 27, 0.70);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .coran-topbar.is-hidden { transform: none; }
}

@media print {
  .coran-topbar, .coran-tabs, .coran-omnibox, .coran-ayah__tools,
  .coran-navpair, .coran-sheet, .coran-toast, .coran-install,
  .coran-resume, .coran-skip, .ac-switch, .coran-actionbar { display: none !important; }
  body { background: #fff; color: #000; }
  .coran-ayah { content-visibility: visible; break-inside: avoid; border-color: #ddd; }
  .coran-ayah__fr { color: #333; }
}

/* =============================================================================
   TAJWID — coloration des règles de récitation (aide visuelle, opt-in)
   Activée uniquement quand html[data-tajwid="on"]. En mode « classique », les
   <span> restent présents mais héritent de la couleur du texte (aucun effet).
   ========================================================================== */
/* Palette du système certifié (Ḥafṣ, Dar Al-Maarifah) : 4 nuances de rouge
   pour le madd, vert = nasalisation, gris = muet, bleu = qalqala. */
:root {
  --tj-laazim:  #C63A3A;   /* rouge foncé  — madd nécessaire (6) */
  --tj-wajib:   #F0454F;   /* rouge vif    — madd obligatoire (4-5) */
  --tj-perm:    #F0812F;   /* rouge orangé — madd permis / doux */
  --tj-nat:     #D79A6B;   /* rouge cumin  — madd naturel (2) */
  --tj-nasal:   #34C77B;   /* vert         — ghunna / nasalisation */
  --tj-silent:  #97A39D;   /* gris         — lettre non prononcée */
  --tj-qalqala: #4AA3F0;   /* bleu         — qalqala */
}
[data-theme="light"] {
  --tj-laazim:  #8E1420;
  --tj-wajib:   #D61F30;
  --tj-perm:    #C8501B;
  --tj-nat:     #9C6A3F;
  --tj-nasal:   #15804A;
  --tj-silent:  #6B7280;
  --tj-qalqala: #1667C0;
}

/* Par défaut (classique) : aucune couleur. */
.coran-ayah__ar .tj { color: inherit; }

/* Tajwid activé : coloration par famille (système certifié). */
html[data-tajwid="on"] .coran-ayah__ar .tj-laazim  { color: var(--tj-laazim); }
html[data-tajwid="on"] .coran-ayah__ar .tj-wajib   { color: var(--tj-wajib); }
html[data-tajwid="on"] .coran-ayah__ar .tj-perm    { color: var(--tj-perm); }
html[data-tajwid="on"] .coran-ayah__ar .tj-nat     { color: var(--tj-nat); }
html[data-tajwid="on"] .coran-ayah__ar .tj-qalqala { color: var(--tj-qalqala); }
html[data-tajwid="on"] .coran-ayah__ar .tj-ghunnah,
html[data-tajwid="on"] .coran-ayah__ar .tj-ikhfa,
html[data-tajwid="on"] .coran-ayah__ar .tj-iqlab,
html[data-tajwid="on"] .coran-ayah__ar .tj-idgham_g { color: var(--tj-nasal); }
html[data-tajwid="on"] .coran-ayah__ar .tj-idgham_s,
html[data-tajwid="on"] .coran-ayah__ar .tj-wasl,
html[data-tajwid="on"] .coran-ayah__ar .tj-lam_shams { color: var(--tj-silent); }

/* --- Légende (dans la feuille de réglages) --- */
.coran-tajwid-legend { display: none; margin-top: 14px; }
html[data-tajwid="on"] .coran-tajwid-legend { display: block; }
.coran-tajwid-legend__list {
  list-style: none;
  margin: 8px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.coran-tajwid-legend__list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.coran-tajwid-legend__list b { color: var(--text); font-weight: 600; }
.tj-swatch {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  align-self: center;
  border: 1px solid rgba(127, 127, 127, 0.25);
}
.tj-swatch.sw-laazim  { background: var(--tj-laazim); }
.tj-swatch.sw-wajib   { background: var(--tj-wajib); }
.tj-swatch.sw-perm    { background: var(--tj-perm); }
.tj-swatch.sw-nat     { background: var(--tj-nat); }
.tj-swatch.sw-nasal   { background: var(--tj-nasal); }
.tj-swatch.sw-silent  { background: var(--tj-silent); }
.tj-swatch.sw-qalqala { background: var(--tj-qalqala); }