/* =============================================================================
   LES TROIS FONDEMENTS — feuille d'application
   /quatre-regles/qawaid.css
   -----------------------------------------------------------------------------
   Ordre de chargement, identique à toutes les applications de l'écosystème :

     ../assets/design/design-system.css   tokens, base, composants .ds-*
     ../style.css                         .topbar, .app-switch, .site-footer
     ./qawaid.css                           ce fichier

   AUCUN token n'est redéclaré. Deux extensions locales seulement :
   --qr-font-ar, sur le modèle de --font-quran du Coran et de --hd-font-ar de
   Hadith, et --qr-ar-size, que le lecteur peut ajuster.

   Toutes les règles sont préfixées `qr-` — aucune collision possible.

   PRINCIPE DE MISE EN PAGE — ce n'est pas une liste de contenus mais un livre.
   Le rail de lecture est étroit (68ch), le texte arabe domine, la traduction
   se place dessous en retrait, et chaque type de bloc a son traitement : le
   matn est le corps, la preuve coranique est encadrée d'or, le hadith porte un
   filet émeraude, la parole d'un savant est en retrait. Le lecteur doit
   distinguer d'un coup d'œil qui parle.
   ========================================================================== */

:root {
  /* Amiri est déjà la police d'affichage du Design System : le texte arabe
     reste donc dans la même famille typographique que tout le projet. */
  --qr-font-ar: 'Amiri', 'Scheherazade New', 'Geeza Pro', Georgia, serif;

  /* Corps du texte arabe — ajustable par le lecteur, mémorisé sur l'appareil.
     La valeur par défaut suit la largeur d'écran. */
  /* La barre d'étude partagée (assets/js/ac-etude.js) écrit --ac-ar-size.
     Tant qu'elle n'a rien écrit, la valeur fluide d'origine s'applique. */
  --qr-ar-size: var(--ac-ar-size, clamp(1.45rem, 5vw, 1.85rem));
  --qr-ar-lh: 2.25;

  --qr-maxw: 720px;
  --qr-gutter: clamp(16px, 5vw, 32px);
}

/* -------------------------------------------------------------------------
   1. STRUCTURE
   ---------------------------------------------------------------------- */
.qr-main { min-height: 60vh; }

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

.qr-hero {
  position: relative;
  padding: clamp(30px, 7vw, 60px) 0 clamp(20px, 4vw, 32px);
}
.qr-hero::before {
  content: "";
  position: absolute; inset: -90px 0 auto 0; height: 480px;
  background: var(--halo);
  pointer-events: none; z-index: -1;
}
.qr-hero__ar {
  margin: 0 0 var(--sp-3);
  font-family: var(--qr-font-ar);
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  line-height: 1.8;
  direction: rtl;
  color: var(--accent-2-text);
}
.qr-hero__title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
}
.qr-hero__lead {
  max-width: 62ch; margin: 0;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}
.qr-hero__auteur {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.qr-hero__auteur svg { width: 16px; height: 16px; color: var(--text-tertiary); }
.qr-hero__auteur em { font-style: normal; color: var(--text-tertiary); }

/* -------------------------------------------------------------------------
   2. NAVIGATION INTERNE
   ---------------------------------------------------------------------- */
.qr-subnav {
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .qr-subnav { background: var(--bg); }
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .qr-subnav { background: var(--bg); }
}
.qr-subnav__inner {
  display: flex; gap: var(--sp-2);
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.qr-subnav__inner::-webkit-scrollbar { display: none; }
.qr-subnav__link {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap-min); padding: 0 var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  white-space: nowrap; text-decoration: none;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.qr-subnav__link svg { width: 16px; height: 16px; opacity: 0.85; }
.qr-subnav__link:hover { color: var(--text); }
.qr-subnav__link.is-current { color: var(--accent); border-bottom-color: var(--accent); }

/* -------------------------------------------------------------------------
   3. AVERTISSEMENT ÉDITORIAL
   Il ne doit pas être discret : c'est ce qui distingue une traduction de
   travail d'une traduction de référence, et le lecteur a le droit de le
   savoir avant de lire, pas après.
   ---------------------------------------------------------------------- */
.qr-avis {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  margin: var(--sp-6) 0 0;
  padding: var(--sp-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--accent-2) 7%, transparent);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-sm);
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .qr-avis { background: var(--surface); }
}
.qr-avis svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--accent-2-text); }
.qr-avis strong { color: var(--text); font-weight: var(--fw-semibold); }

/* -------------------------------------------------------------------------
   4. RECHERCHE (sommaire)
   ---------------------------------------------------------------------- */
.qr-search {
  position: sticky;
  /* La .topbar est collante elle aussi : sans décalage, ce bloc se glisserait
     dessous. Sa hauteur varie avec la largeur, elle est donc mesurée en JS. */
  top: var(--qr-topbar-h, 0px);
  z-index: 30;
  padding: var(--sp-4) 0 var(--sp-3);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
          backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--border);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .qr-search { background: var(--bg); }
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .qr-search { background: var(--bg); }
}
.qr-search__field { position: relative; }
.qr-search__field > svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--text-tertiary); pointer-events: none;
}
/* max(16px, 1rem) — en dessous de 16px, iOS zoome sur le champ à la saisie. */
.qr-search__input {
  width: 100%; min-height: 52px;
  padding: 0 46px 0 42px;
  font-family: var(--font-body);
  font-size: max(16px, 1rem);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.qr-search__input::placeholder { color: var(--text-tertiary); }
.qr-search__input:focus {
  outline: none; border-color: var(--border-accent); background: var(--surface-strong);
}
.qr-search__clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: none; place-items: center;
  width: 40px; height: 40px;
  color: var(--text-tertiary);
  background: none; border: 0; border-radius: 50%; cursor: pointer;
}
.qr-search__clear svg { width: 15px; height: 15px; }
.qr-search__clear:hover { color: var(--text); background: var(--surface-strong); }
.qr-search__clear.is-visible { display: grid; }

.qr-results-note {
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
}
.qr-results-note strong { color: var(--text-secondary); font-weight: var(--fw-semibold); }

/* Extraits de recherche — les passages trouvés à l'intérieur d'une section. */
.qr-hits { margin: var(--sp-2) 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.qr-hits li {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
  background: var(--surface);
  border-left: 2px solid var(--border-gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.qr-hits mark {
  padding: 0 2px; border-radius: 3px;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 26%, transparent);
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .qr-hits mark { background: var(--surface-strong); }
}
.qr-hits li[lang="ar"] {
  direction: rtl; text-align: right;
  font-family: var(--qr-font-ar);
  font-size: 1.05rem; line-height: 1.9;
  border-left: 0; border-right: 2px solid var(--border-gold);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

/* -------------------------------------------------------------------------
   5. PROGRESSION DE LECTURE
   ---------------------------------------------------------------------- */
.qr-progress {
  display: grid; gap: var(--sp-3);
  margin-bottom: var(--sp-8);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.qr-progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.qr-progress__label {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary);
}
.qr-progress__count { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-secondary); }
.qr-progress__count strong { color: var(--accent); font-size: var(--fs-md); }
.qr-progress__bar {
  height: 8px; background: var(--surface-strong);
  border-radius: var(--radius-pill); overflow: hidden;
}
.qr-progress__bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--emerald), var(--emerald-light));
  border-radius: inherit;
  transition: width var(--dur-base) var(--ease-out);
}
.qr-progress__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
@media (prefers-reduced-motion: reduce) { .qr-progress__bar i { transition: none; } }

/* -------------------------------------------------------------------------
   6. TABLE DES MATIÈRES
   ---------------------------------------------------------------------- */
.qr-toc { margin: 0 0 clamp(32px, 6vw, 56px); padding: 0; list-style: none; }
.qr-toc__item + .qr-toc__item { margin-top: var(--sp-2); }

.qr-toc__link {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: var(--tap-min);
  padding: var(--sp-3) var(--sp-4);
  color: inherit; text-decoration: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.qr-toc__link:hover { border-color: var(--border-accent); background: var(--surface); }

.qr-toc__num {
  flex: none;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
  color: var(--accent-2-text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
/* Section lue : pastille émeraude pleine, l'état actif de tout l'écosystème. */
.qr-toc__item.is-lue .qr-toc__num {
  color: var(--deep-black); background: var(--accent); border-color: var(--accent);
}
.qr-toc__body { min-width: 0; flex: 1 1 auto; display: grid; gap: 3px; }
.qr-toc__title {
  font-family: var(--font-display);
  font-size: var(--fs-base); font-weight: var(--fw-bold); line-height: 1.3;
}
.qr-toc__ar {
  font-family: var(--qr-font-ar);
  font-size: 1.05rem; line-height: 1.7;
  direction: rtl; color: var(--accent-2-text);
}
.qr-toc__resume {
  font-size: var(--fs-xs); line-height: var(--lh-normal); color: var(--text-tertiary);
}
.qr-toc__go { flex: none; width: 16px; height: 16px; color: var(--text-tertiary); }
.qr-toc [hidden] { display: none !important; }

/* -------------------------------------------------------------------------
   7. PAGE DE SECTION — les blocs de lecture
   ---------------------------------------------------------------------- */
.qr-section { padding: clamp(22px, 5vw, 40px) 0 clamp(40px, 8vw, 72px); }

.qr-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-bottom: var(--sp-5);
  font-size: var(--fs-xs); color: var(--text-tertiary);
}
.qr-breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.qr-breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.qr-breadcrumb svg { width: 12px; height: 12px; opacity: 0.6; }

.qr-section__head { margin-bottom: clamp(22px, 5vw, 34px); }
.qr-section__pills {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.qr-section__num {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  font-weight: var(--fw-medium); letter-spacing: 0.04em;
  color: var(--accent-2-text);
}
.qr-section__title {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5.5vw, 2.4rem);
  font-weight: var(--fw-bold);
  line-height: 1.2; letter-spacing: -0.015em;
  text-wrap: balance;
}
.qr-section__ar {
  margin: 0;
  font-family: var(--qr-font-ar);
  font-size: clamp(1.3rem, 4.6vw, 1.7rem);
  line-height: 1.9; direction: rtl;
  color: var(--accent-2-text);
}

/* — Barre d'outils de lecture — ajoutée par lecture.js. */
.qr-tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.qr-tools .ds-btn svg { width: 16px; height: 16px; }

/* — Bloc générique — */
.qr-bloc { margin: 0 0 var(--sp-6); }

/* Texte arabe : commun à tous les blocs. La justification est désactivée —
   en RTL vocalisé, elle produit des blancs inter-mots très irréguliers. */
.qr-ar {
  margin: 0;
  font-family: var(--qr-font-ar);
  font-size: var(--qr-ar-size);
  line-height: var(--qr-ar-lh);
  font-weight: 400;
  direction: rtl; text-align: right; text-align-last: right;
  color: var(--text);
  /* Les sauts de ligne du JSON sont signifiants : ils séparent des points
     énumérés dans le matn. */
  white-space: pre-line;
}

/* Traduction : nettement en retrait du texte arabe, sans être secondaire. */
.qr-fr {
  margin: var(--sp-4) 0 0;
  padding-left: var(--sp-4);
  font-size: clamp(1rem, 2.3vw, 1.0625rem);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  border-left: 2px solid var(--border);
  white-space: pre-line;
}

/* — Matn : le corps du livre — */
.qr-bloc--matn .qr-ar { color: var(--text); }

/* — Preuve coranique : encadrée d'or, l'ornement de l'écosystème — */
.qr-bloc--preuve {
  position: relative;
  padding: clamp(18px, 4vw, 26px) clamp(16px, 3.5vw, 24px);
  background: var(--bg-elevated);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.qr-bloc--preuve::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--edge-gradient); opacity: 0.6;
}
.qr-bloc--preuve .qr-fr { border-left-color: var(--border-gold); }

/* — Hadith : filet émeraude, pour le distinguer du verset au premier regard — */
.qr-bloc--hadith {
  padding: clamp(16px, 3.5vw, 24px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-accent);
  border-radius: var(--radius-sm);
}

/* — Parole d'un savant : en retrait, corps réduit — */
.qr-bloc--parole {
  padding: clamp(14px, 3vw, 20px);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}
.qr-bloc--parole .qr-ar { font-size: calc(var(--qr-ar-size) * 0.86); }

/* — Référence — */
.qr-ref {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  margin: var(--sp-4) 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--text-tertiary);
}
.qr-ref svg { flex: none; width: 13px; height: 13px; margin-top: 2px; }

/* -------------------------------------------------------------------------
   8. SHARH
   Section distincte. Tant qu'aucun sharh n'est saisi, un encart explique
   pourquoi — plutôt qu'un blanc que le lecteur prendrait pour un bogue.
   ---------------------------------------------------------------------- */
.qr-sharh { margin: clamp(32px, 6vw, 52px) 0 0; }
.qr-sharh__title {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-lg); font-weight: var(--fw-bold);
}
.qr-sharh__title svg { flex: none; width: 19px; height: 19px; color: var(--accent-2-text); }
.qr-sharh__title::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: var(--edge-gradient); opacity: 0.4;
}
.qr-sharh__corps {
  padding: clamp(18px, 4vw, 26px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.qr-sharh__source {
  margin: var(--sp-4) 0 0; padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm); line-height: var(--lh-normal);
  color: var(--text-secondary);
}
.qr-sharh__source strong { color: var(--text); font-weight: var(--fw-semibold); }

.qr-sharh--vide {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-5);
  font-size: var(--fs-sm); line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
}
.qr-sharh--vide svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--text-tertiary); }
.qr-sharh--vide strong { color: var(--text); font-weight: var(--fw-semibold); }

/* -------------------------------------------------------------------------
   9. NAVIGATION ENTRE SECTIONS
   ---------------------------------------------------------------------- */
.qr-nav {
  display: grid; gap: var(--sp-3);
  margin-top: clamp(32px, 7vw, 56px);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}
@media (min-width: 640px) { .qr-nav { grid-template-columns: 1fr 1fr; } }
.qr-nav__link {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--tap-min);
  padding: var(--sp-4);
  color: inherit; text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.qr-nav__link:hover { background: var(--surface-strong); border-color: var(--border-accent); transform: translateY(-1px); }
.qr-nav__link--next { flex-direction: row-reverse; text-align: right; }
.qr-nav__link svg { flex: none; width: 18px; height: 18px; color: var(--accent); }
.qr-nav__body { min-width: 0; flex: 1 1 auto; }
.qr-nav__label {
  display: block; margin-bottom: 3px;
  font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.qr-nav__title {
  display: block;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.35;
  color: var(--text);
}

.qr-retour { margin: var(--sp-8) 0 0; font-size: var(--fs-sm); }
.qr-retour a {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap-min);
  color: var(--text-secondary); text-decoration: none;
}
.qr-retour a:hover { color: var(--accent); }
.qr-retour svg { width: 16px; height: 16px; }

/* -------------------------------------------------------------------------
   10. NOTE DE FIN, ÉTAT VIDE, BANNIÈRE
   ---------------------------------------------------------------------- */
.qr-note {
  margin: clamp(32px, 6vw, 48px) 0 0;
  padding: var(--sp-5);
  font-size: var(--fs-sm); line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.qr-note h2 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display); font-size: var(--fs-base); color: var(--text);
}
.qr-note p { margin: 0 0 var(--sp-3); }
.qr-note p:last-child { margin-bottom: 0; }
.qr-note ul { margin: 0 0 var(--sp-3); padding-left: 1.15em; }
.qr-note li { margin-bottom: 5px; }

.qr-empty { padding: clamp(36px, 8vw, 64px) var(--sp-5); text-align: center; color: var(--text-secondary); }
.qr-empty svg { width: 32px; height: 32px; margin-bottom: var(--sp-4); color: var(--text-tertiary); }
.qr-empty h2 { margin: 0 0 var(--sp-2); font-family: var(--font-display); font-size: var(--fs-lg); color: var(--text); }
.qr-empty p { margin: 0 auto; max-width: 46ch; font-size: var(--fs-sm); }

.qr-toast {
  position: fixed;
  left: 50%; bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translate(-50%, 140%);
  z-index: 120;
  display: flex; align-items: center; gap: var(--sp-3);
  width: min(92vw, 460px);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm); color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-base) var(--ease-out);
}
.qr-toast.is-visible { transform: translate(-50%, 0); }
.qr-toast button { margin-left: auto; }

/* -------------------------------------------------------------------------
   11. PRÉFÉRENCES SYSTÈME ET IMPRESSION
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .qr-toc__link, .qr-toc__num, .qr-nav__link, .qr-toast,
  .qr-search__input, .qr-subnav__link { transition: none; }
  .qr-nav__link:hover { transform: none; }
}

@media (prefers-contrast: more) {
  .qr-toc__link, .qr-bloc--hadith, .qr-bloc--parole, .qr-sharh__corps { border-color: var(--border-accent); }
  .qr-fr { color: var(--text); }
}

/* La feuille commune print.css neutralise déjà flous, ombres et animations.
   Restent les éléments qui n'ont aucun sens sur papier. */
@media print {
  .qr-subnav, .qr-search, .qr-progress, .qr-tools, .qr-nav, .qr-retour, .qr-toast { display: none !important; }
  .qr-bloc { break-inside: avoid; }
  .qr-bloc--preuve { border-color: #999; }
}

/* =============================================================================
   RÉGLAGE DE LA TAILLE DU TEXTE — groupe segmenté « Aa − + »
   -----------------------------------------------------------------------------
   Les deux commandes portaient un pictogramme : un « A » barré d'un moins,
   un « A » barré d'un plus. À 16px, les deux se ressemblaient et le trait
   distinctif disparaissait — on ne voyait que deux ronds. Un − et un + en
   TEXTE se lisent à toutes les tailles, dans toutes les polices, et ne
   dépendent d'aucun tracé.

   Les trois éléments forment un groupe segmenté : le « Aa » dit de quoi il
   s'agit, les deux boutons disent quoi faire. Ensemble ils se lisent d'un coup
   d'œil, là où deux icônes isolées demandaient une infobulle.

   Géométrie conforme au contrat du Design System : hauteur 44px (--tap-min),
   rayon pilule, anneau de focus émeraude à 2px.
   ========================================================================== */
.qr-taille {
  display: inline-flex; align-items: center;
  height: var(--tap-min);
  padding: 0 var(--sp-1) 0 var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

.qr-taille__label {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--text-tertiary);
  padding-right: var(--sp-2);
  border-right: 1px solid var(--border);
  margin-right: 2px;
  user-select: none;
}

.qr-taille__btn {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  /* Le bouton mesure 38px mais le groupe qui le contient fait 44 : la cible
     réelle au doigt est celle du groupe, sans espace mort entre les deux. */
  padding: 0;
  font-family: var(--font-body);
  /* 20px : un « + » de 16px paraît maigre à côté d'un « − » de même corps,
     parce que le moins n'occupe qu'une ligne. */
  font-size: 20px;
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--text);
  background: none; border: 0; border-radius: 50%;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.qr-taille__btn:hover { background: var(--surface-strong); color: var(--accent); }
.qr-taille__btn:active { background: var(--surface-strong); }
.qr-taille__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Borne atteinte : le bouton reste en place — le retirer ferait sauter la
   rangée — mais annonce clairement qu'il n'a plus d'effet. */
.qr-taille__btn:disabled {
  color: var(--text-tertiary);
  opacity: 0.45;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) { .qr-taille__btn { transition: none; } }

/* La barre d'outils aligne des hauteurs de 44px : les boutons y sont des
   .ds-btn pleine taille, plus des .ds-btn--sm. */
.qr-tools { align-items: center; }

/* =============================================================================
   PROPRE AUX QUATRE RÈGLES
   La barre d'étude, les modes d'affichage et les états de mémorisation vivent
   désormais dans assets/design/design-system.css (section S21) : ils sont
   partagés avec Les Trois Fondements et les 40 Nawawî. Ne subsiste ici que ce
   qui n'appartient qu'à cette application.
   ========================================================================== */

/* — Texte en préparation — une section dont le matn n'a pas encore été
     collationné. Ton neutre : ce n'est pas une erreur, c'est un état déclaré. */
.qr-attente {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  margin: 0;
  padding: var(--sp-5);
  font-size: var(--fs-sm); line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
}
.qr-attente svg { flex: none; width: 19px; height: 19px; margin-top: 2px; color: var(--accent-2-text); }
.qr-attente strong { color: var(--text); font-weight: var(--fw-semibold); }

/* — Marques d'état dans le sommaire — */
.qr-toc__item.is-appris  .qr-toc__num { color: var(--deep-black); background: var(--accent); border-color: var(--accent); }
.qr-toc__item.is-reviser .qr-toc__num { color: var(--accent-2-text); border-color: var(--border-gold); }

/* Attribution de source en pied de section — discrète mais toujours visible :
   la provenance d'un texte religieux ne doit pas être une information cachée. */
.qr-avis--source {
  margin-top: var(--sp-6);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.qr-avis--source a { color: var(--text-secondary); }
.qr-avis--source a:hover { color: var(--accent); }