/* ==========================================================================
   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 {
  /* Pas de `text-size-adjust` : la propriété n'empêche le gonflement du texte
     en paysage que sur les pages DÉPOURVUES de <meta name="viewport">. Cette
     page en a un, la règle était donc sans effet — et Firefox la rejetait
     bruyamment dans les deux variantes à chaque chargement (« Erreur
     d'analyse de la valeur », « Propriété inconnue »). */
  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) */


/* --------------------------------------------------------------------------
   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--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;
  /* `justify-content: flex-end` est indispensable À CAUSE de `flex-wrap`.
     Une marge automatique ne répartit l'espace libre que sur SA PROPRE ligne :
     dès que le sélecteur passe à la ligne suivante, le `margin-inline-end:auto`
     de la marque ne l'atteint plus, et la seconde rangée retombe à gauche
     (`justify-content` valait `flex-start` par défaut). Avec `flex-end`, la
     rangée qui déborde reste collée à droite.
     La marque, elle, garde sa marge automatique : sur la première ligne, une
     marge `auto` l'emporte sur `justify-content`, donc elle reste à gauche. */
  justify-content: flex-end;
  gap: 12px;
  row-gap: 10px;
  /* Pleine largeur, exactement comme .topbar de l'accueil et du lecteur.
     Le rail à var(--maxw) (720px) est réservé au CONTENU : appliqué aussi à
     la barre, il la ramenait au centre d'un écran large et forçait le
     sélecteur d'applications à passer à la ligne. */
  padding-block: 20px;
  min-height: 74px;
  width: 100%;
  padding-inline: clamp(16px, 4vw, 48px);
}

.coran-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Pousse les contrôles vers la droite du bandeau. */
  margin-inline-end: auto;
  min-width: 0;
  text-decoration: none;
}
.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 sur toute la largeur, exactement comme .topbar de l'accueil et
     comme /marque-page/. Aucun `max-width` : un plafond ici arrêtait le
     sélecteur et le bouton de thème au milieu des grands écrans au lieu de
     les coller au bord droit.
     `nowrap` : au-dessus de 640px la barre tient toujours sur une ligne, la
     marque se tronquant au besoin (voir .coran-brand ci-dessous). */
  .coran-topbar__inner { flex-wrap: nowrap; gap: 22px; padding-inline: clamp(16px, 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; }
  
  .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;
}
/* Ligne de signet : le lien occupe la place, le bouton de retrait reste à
   côté. Scopé sur .coran-row-wrap pour ne pas toucher les listes de sourates
   et de juz, qui gardent leur ligne pleinement cliquable. */
.coran-row-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
.coran-row-wrap .coran-row {
  flex: 1 1 auto;
  min-width: 0;
  border-bottom: 0;
}
.coran-row-wrap { border-bottom: 1px solid var(--border); }
.coran-list > li.coran-row-wrap:last-child { border-bottom: 0; }

.coran-row__del {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.coran-row__del svg { width: 19px; height: 19px; }
.coran-row__del:hover,
.coran-row__del:focus-visible {
  color: var(--danger, #E15252);
  border-color: color-mix(in srgb, var(--danger, #E15252) 35%, transparent);
}

/* Renvoi vers l'application Marque-page, en tête du panneau des signets. */
.coran-panel__lien {
  margin: 0 0 14px;
}
.coran-panel__lien a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.coran-panel__lien a svg { width: 17px; height: 17px; color: var(--gold); }
.coran-panel__lien a:hover,
.coran-panel__lien a:focus-visible {
  color: var(--text);
  border-color: var(--border-accent);
}

.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;
  /* Sans `nowrap`, un nombre à deux ou trois chiffres se coupe en autant de
     lignes dans une boîte de largeur fixe : la boîte étant centrée sur une
     hauteur figée, seule la ligne du milieu restait visible — d'où des
     versets qui semblaient tous porter le même numéro. */
  white-space: nowrap;
  transform: translateY(var(--num-shift));
}

/* Le glyphe rétrécit avec le nombre de chiffres pour tenir dans la rosette,
   qui reste carrée. `data-len` est posé par reader.js. */
.coran-ayah__num[data-len="2"] > span { font-size: 0.82em; }
.coran-ayah__num[data-len="3"] > span { font-size: 0.64em; }

.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); }

/* Le pied de page est entièrement fourni par ac-shell.js et le design system
   (.ac-footer-compact, section S19). Les règles locales ont été retirées :
   design-system.css étant chargé AVANT cette feuille, `text-align: center`,
   le `padding` et le `border-top` l'emportaient à spécificité égale — le bloc
   « logo à gauche / réseaux à droite » retombait centré, avec un filet
   supérieur dessiné deux fois. Identique désormais à Adhkar et Marque-page. */
.coran-footer a:hover { color: var(--accent); }

.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; }
}

/* 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. */
/* Pas de `margin-left: auto` ici : .coran-brand porte déjà
   `margin-inline-end: auto`. Deux marges automatiques se partagent l'espace
   libre à parts égales et centrent le sélecteur au lieu de le coller à
   droite — c'est le défaut visible sur l'accueil comparé à /coran-app/. */
/* Mobile & tablette (≤1149px) : menu déroulant ouvert par le bouton burger
   (styles partagés dans design-system.css). Seuil relevé à 1024px avec la
   sixième application, puis à 1150px avec la septième — justification dans
   design-system.css. */


/* --------------------------------------------------------------------------
   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 {
  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); }

/* ---------------------------------------------------------------------------
   SHELL PARTAGÉ — réservation d'espace avant remplissage par ac-shell.js.
   Sans ces règles, la barre applications et le pied de page apparaîtraient
   après le premier rendu et décaleraient la mise en page (CLS).
   -------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   PIED DE PAGE COMPACT D'APPLICATION — généré par assets/js/ac-shell.js
   Variante destinée aux lecteurs (Coran, Adhkar). Volontairement sobre : le
   pied de page marketing complet ferait ~320 px sous un contenu qu'on parcourt
   verticalement en continu.
   -------------------------------------------------------------------------- */
/* Pied de page compact (.ac-footer-compact*) et réservations anti-CLS
   ([data-ac-switch]:empty, [data-ac-footer]:empty) : désormais définis une
   seule fois dans assets/design/design-system.css, chargé avant ce fichier.
   Les copies locales ont été retirées (elles étaient identiques dans trois
   applications et absentes de Marque-page, dont le pied de page n'avait donc
   aucun style). */


/* =========================================================================
   EN-TÊTE DE LECTURE — MOBILE (≤640px)
   -------------------------------------------------------------------------
   Problème corrigé : l'en-tête comptait quatre boutons de 44px (retour,
   réglages, thème, applications) plus le titre sur une largeur de 320 à
   430px. Avec `flex-wrap: wrap` et un titre à largeur fixe (min(48vw,300px)),
   le bouton « applications » passait systématiquement à la ligne — l'en-tête
   occupait deux rangées et poussait le contenu vers le bas.

   Solution : une seule rangée, le bloc titre devient l'élément élastique et
   se tronque proprement au lieu de repousser les boutons. Les cibles
   tactiles restent à 44px (--tap-min), l'accessibilité n'est pas sacrifiée
   à la compacité ; c'est la hauteur superflue qui est récupérée.
   ====================================================================== */
@media (max-width: 640px) {
  .coran-topbar__inner {
    flex-wrap: nowrap;          /* plus jamais de seconde rangée */
    gap: 8px;
    padding-block: 9px;
    min-height: 58px;           /* était 74px : 16px de contenu regagnés */
  }

  /* Le titre absorbe l'espace restant et se tronque. `min-width: 0` est
     indispensable : sans lui, un enfant flex refuse de passer sous sa
     largeur de contenu et repousse les boutons hors de l'écran. */
  .coran-brand {
    flex: 1 1 auto;
    min-width: 0;
    margin-inline-end: 0;
  }
  .coran-brand--stack { gap: 1px; }
  .coran-brand--stack .coran-brand__text {
    font-size: 1.02rem;
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .coran-brand--stack .coran-meta {
    max-width: 100%;
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--text-tertiary);   /* hiérarchie : le titre domine */
  }

  /* Boutons : la cible reste 44×44, seul le rembourrage latéral se resserre. */
  .coran-iconbtn { min-width: 44px; min-height: 44px; padding: 0 8px; }
  .coran-iconbtn svg { width: 18px; height: 18px; }

  /* Le bouton retour n'a pas besoin d'être aussi large que les autres. */
  .coran-topbar__inner > .coran-iconbtn:first-child { padding: 0 6px; }
}

/* iPhone SE et autres écrans de 320-374px : le titre arabe cède un peu. */
@media (max-width: 374px) {
  .coran-topbar__inner { gap: 6px; }
  .coran-brand--stack .coran-brand__text { font-size: 0.95rem; }
  .coran-brand--stack .coran-meta { font-size: 0.72rem; }
  .coran-iconbtn { padding: 0 6px; }
}

/* =============================================================================
   COMPOSANT RETIRÉ — sélecteur d'applications en rangée de pilules
   -----------------------------------------------------------------------------
   Les règles .app-switch / .ac-switch / .ac-burger occupaient cet emplacement.
   Elles ont été supprimées : la rangée de pilules et son bouton burger ont été
   remplacés par le bouton « Applications » unique et son panneau, dont les
   styles vivent dans assets/design/design-system.css sous le préfixe .ac-apps.

   Ces règles ne s'appliquaient plus à rien — ac-shell.js retire les classes du
   conteneur au remplissage — mais elles restaient lisibles dans la feuille et
   invitaient à croire le composant encore en service.
   ========================================================================== */