/* =============================================================================
   LES TROIS FONDEMENTS — feuille d'application
   /trois-fondements/usul.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
     ./usul.css                           ce fichier

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

   Toutes les règles sont préfixées `uf-` — 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. */
  --uf-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. */
  --uf-ar-size: clamp(1.45rem, 5vw, 1.85rem);
  --uf-ar-lh: 2.25;

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

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

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

.uf-hero {
  position: relative;
  padding: clamp(30px, 7vw, 60px) 0 clamp(20px, 4vw, 32px);
}
.uf-hero::before {
  content: "";
  position: absolute; inset: -90px 0 auto 0; height: 480px;
  background: var(--halo);
  pointer-events: none; z-index: -1;
}
.uf-hero__ar {
  margin: 0 0 var(--sp-3);
  font-family: var(--uf-font-ar);
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  line-height: 1.8;
  direction: rtl;
  color: var(--accent-2-text);
}
.uf-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;
}
.uf-hero__lead {
  max-width: 62ch; margin: 0;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}
.uf-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);
}
.uf-hero__auteur svg { width: 16px; height: 16px; color: var(--text-tertiary); }
.uf-hero__auteur em { font-style: normal; color: var(--text-tertiary); }

/* -------------------------------------------------------------------------
   2. NAVIGATION INTERNE
   ---------------------------------------------------------------------- */
.uf-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))) {
  .uf-subnav { background: var(--bg); }
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .uf-subnav { background: var(--bg); }
}
.uf-subnav__inner {
  display: flex; gap: var(--sp-2);
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.uf-subnav__inner::-webkit-scrollbar { display: none; }
.uf-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);
}
.uf-subnav__link svg { width: 16px; height: 16px; opacity: 0.85; }
.uf-subnav__link:hover { color: var(--text); }
.uf-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.
   ---------------------------------------------------------------------- */
.uf-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)) {
  .uf-avis { background: var(--surface); }
}
.uf-avis svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--accent-2-text); }
.uf-avis strong { color: var(--text); font-weight: var(--fw-semibold); }

/* -------------------------------------------------------------------------
   4. RECHERCHE (sommaire)
   ---------------------------------------------------------------------- */
.uf-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(--uf-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))) {
  .uf-search { background: var(--bg); }
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .uf-search { background: var(--bg); }
}
.uf-search__field { position: relative; }
.uf-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. */
.uf-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);
}
.uf-search__input::placeholder { color: var(--text-tertiary); }
.uf-search__input:focus {
  outline: none; border-color: var(--border-accent); background: var(--surface-strong);
}
.uf-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;
}
.uf-search__clear svg { width: 15px; height: 15px; }
.uf-search__clear:hover { color: var(--text); background: var(--surface-strong); }
.uf-search__clear.is-visible { display: grid; }

.uf-results-note {
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
}
.uf-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. */
.uf-hits { margin: var(--sp-2) 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.uf-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;
}
.uf-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)) {
  .uf-hits mark { background: var(--surface-strong); }
}
.uf-hits li[lang="ar"] {
  direction: rtl; text-align: right;
  font-family: var(--uf-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
   ---------------------------------------------------------------------- */
.uf-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);
}
.uf-progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.uf-progress__label {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary);
}
.uf-progress__count { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-secondary); }
.uf-progress__count strong { color: var(--accent); font-size: var(--fs-md); }
.uf-progress__bar {
  height: 8px; background: var(--surface-strong);
  border-radius: var(--radius-pill); overflow: hidden;
}
.uf-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);
}
.uf-progress__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
@media (prefers-reduced-motion: reduce) { .uf-progress__bar i { transition: none; } }

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

.uf-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);
}
.uf-toc__link:hover { border-color: var(--border-accent); background: var(--surface); }

.uf-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. */
.uf-toc__item.is-lue .uf-toc__num {
  color: var(--deep-black); background: var(--accent); border-color: var(--accent);
}
.uf-toc__body { min-width: 0; flex: 1 1 auto; display: grid; gap: 3px; }
.uf-toc__title {
  font-family: var(--font-display);
  font-size: var(--fs-base); font-weight: var(--fw-bold); line-height: 1.3;
}
.uf-toc__ar {
  font-family: var(--uf-font-ar);
  font-size: 1.05rem; line-height: 1.7;
  direction: rtl; color: var(--accent-2-text);
}
.uf-toc__resume {
  font-size: var(--fs-xs); line-height: var(--lh-normal); color: var(--text-tertiary);
}
.uf-toc__go { flex: none; width: 16px; height: 16px; color: var(--text-tertiary); }
.uf-toc [hidden] { display: none !important; }

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

.uf-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);
}
.uf-breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.uf-breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.uf-breadcrumb svg { width: 12px; height: 12px; opacity: 0.6; }

.uf-section__head { margin-bottom: clamp(22px, 5vw, 34px); }
.uf-section__pills {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.uf-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);
}
.uf-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;
}
.uf-section__ar {
  margin: 0;
  font-family: var(--uf-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. */
.uf-tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.uf-tools .ds-btn svg { width: 16px; height: 16px; }

/* — Bloc générique — */
.uf-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. */
.uf-ar {
  margin: 0;
  font-family: var(--uf-font-ar);
  font-size: var(--uf-ar-size);
  line-height: var(--uf-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. */
.uf-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 — */
.uf-bloc--matn .uf-ar { color: var(--text); }

/* — Preuve coranique : encadrée d'or, l'ornement de l'écosystème — */
.uf-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;
}
.uf-bloc--preuve::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--edge-gradient); opacity: 0.6;
}
.uf-bloc--preuve .uf-fr { border-left-color: var(--border-gold); }

/* — Hadith : filet émeraude, pour le distinguer du verset au premier regard — */
.uf-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 — */
.uf-bloc--parole {
  padding: clamp(14px, 3vw, 20px);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}
.uf-bloc--parole .uf-ar { font-size: calc(var(--uf-ar-size) * 0.86); }

/* — Référence — */
.uf-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);
}
.uf-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.
   ---------------------------------------------------------------------- */
.uf-sharh { margin: clamp(32px, 6vw, 52px) 0 0; }
.uf-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);
}
.uf-sharh__title svg { flex: none; width: 19px; height: 19px; color: var(--accent-2-text); }
.uf-sharh__title::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: var(--edge-gradient); opacity: 0.4;
}
.uf-sharh__corps {
  padding: clamp(18px, 4vw, 26px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.uf-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);
}
.uf-sharh__source strong { color: var(--text); font-weight: var(--fw-semibold); }

.uf-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);
}
.uf-sharh--vide svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--text-tertiary); }
.uf-sharh--vide strong { color: var(--text); font-weight: var(--fw-semibold); }

/* -------------------------------------------------------------------------
   9. NAVIGATION ENTRE SECTIONS
   ---------------------------------------------------------------------- */
.uf-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) { .uf-nav { grid-template-columns: 1fr 1fr; } }
.uf-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);
}
.uf-nav__link:hover { background: var(--surface-strong); border-color: var(--border-accent); transform: translateY(-1px); }
.uf-nav__link--next { flex-direction: row-reverse; text-align: right; }
.uf-nav__link svg { flex: none; width: 18px; height: 18px; color: var(--accent); }
.uf-nav__body { min-width: 0; flex: 1 1 auto; }
.uf-nav__label {
  display: block; margin-bottom: 3px;
  font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.uf-nav__title {
  display: block;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.35;
  color: var(--text);
}

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

/* -------------------------------------------------------------------------
   10. NOTE DE FIN, ÉTAT VIDE, BANNIÈRE
   ---------------------------------------------------------------------- */
.uf-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);
}
.uf-note h2 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display); font-size: var(--fs-base); color: var(--text);
}
.uf-note p { margin: 0 0 var(--sp-3); }
.uf-note p:last-child { margin-bottom: 0; }
.uf-note ul { margin: 0 0 var(--sp-3); padding-left: 1.15em; }
.uf-note li { margin-bottom: 5px; }

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

.uf-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);
}
.uf-toast.is-visible { transform: translate(-50%, 0); }
.uf-toast button { margin-left: auto; }

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

@media (prefers-contrast: more) {
  .uf-toc__link, .uf-bloc--hadith, .uf-bloc--parole, .uf-sharh__corps { border-color: var(--border-accent); }
  .uf-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 {
  .uf-subnav, .uf-search, .uf-progress, .uf-tools, .uf-nav, .uf-retour, .uf-toast { display: none !important; }
  .uf-bloc { break-inside: avoid; }
  .uf-bloc--preuve { border-color: #999; }
}