/* =============================================================================
   HADITH — feuille d'application
   /hadith/hadith.css
   -----------------------------------------------------------------------------
   Chargée APRÈS ../assets/design/design-system.css et ../style.css :

     design-system.css   tokens, base, composants .ds-*, atomes de marque
     ../style.css        en-tête .topbar, barre .app-switch, pied de page
                         .site-footer — exactement ceux de l'accueil, donc
                         aucune duplication et aucun risque de divergence
     hadith.css          ce fichier : uniquement la mise en page propre à
                         l'application Hadith

   AUCUN token n'est redéclaré ici. Tout est hérité du Design System.
   Une seule extension locale, --hd-font-ar, sur le modèle de --font-quran
   de /coran-app/ : le texte de hadith est de la prose arabe suivie, pas du
   texte coranique vocalisé, et demande donc son propre réglage de corps et
   d'interligne.

   Toutes les règles sont préfixées `hd-` — aucune collision possible avec
   les autres applications de l'écosystème.
   ========================================================================== */

:root {
  /* Amiri d'abord : c'est déjà la police d'affichage du Design System
     (--font-display), donc le texte arabe reste dans la même famille
     typographique que le reste du projet. Scheherazade New en second, comme
     dans /coran-app/, pour les appareils où Amiri manque de vocalisation. */
  --hd-font-ar: 'Amiri', 'Scheherazade New', 'Geeza Pro', Georgia, serif;

  --hd-maxw: 760px;            /* rail de lecture d'une fiche */
  --hd-gutter: clamp(16px, 5vw, 32px);
}

/* -------------------------------------------------------------------------
   1. STRUCTURE DE PAGE
   ---------------------------------------------------------------------- */
.hd-main { min-height: 60vh; }

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

/* Halo ambiant de l'écosystème, posé une seule fois en haut de page. */
.hd-hero {
  position: relative;
  padding: clamp(32px, 7vw, 64px) 0 clamp(20px, 4vw, 32px);
}
.hd-hero::before {
  content: "";
  position: absolute; inset: -80px 0 auto 0; height: 460px;
  background: var(--halo);
  pointer-events: none; z-index: -1;
}

.hd-hero__badge { margin-bottom: var(--sp-4); }

.hd-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-3);
}
.hd-hero__title em {
  font-style: normal;
  color: var(--accent);
}
.hd-hero__lead {
  max-width: 62ch;
  margin: 0;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

/* Mention de méthodologie — ornementale, donc or. */
.hd-methode {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  margin-top: var(--sp-6);
  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);
}
.hd-methode svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--accent-2-text); }
.hd-methode strong { color: var(--text); font-weight: var(--fw-semibold); }

/* -------------------------------------------------------------------------
   2. RECHERCHE
   Barre collante sous l'en-tête : la recherche reste atteignable pendant le
   défilement de la liste, sans quoi il faudrait remonter à chaque essai.
   ---------------------------------------------------------------------- */
.hd-search {
  position: sticky;
  /* L'en-tête .topbar est lui aussi collant à top:0. Sans décalage, la barre
     de recherche viendrait se glisser DESSOUS et disparaître. Sa hauteur
     dépend de la largeur (logo fluide, retour à la ligne des pilules) : elle
     est donc mesurée en JavaScript et publiée dans --hd-topbar-h, sur le
     modèle de --topbar-real dans /coran-app/. Le repli 0px garantit une barre
     utilisable même si le script ne s'exécute pas. */
  top: var(--hd-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))) {
  .hd-search { background: var(--bg); }
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .hd-search { background: var(--bg); }
}

.hd-search__field { position: relative; }
.hd-search__field svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--text-tertiary);
  pointer-events: none;
}
/* font-size: max(16px, 1rem) — en dessous de 16px, iOS zoome sur le champ
   au moment de la saisie et la page se retrouve décalée. */
.hd-search__input {
  width: 100%;
  min-height: 52px;
  padding: 0 46px 0 42px;
  font-family: var(--font-body);
  font-size: max(16px, 1rem);
  font-weight: var(--fw-regular);
  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);
}
.hd-search__input::placeholder { color: var(--text-tertiary); }
.hd-search__input:focus {
  outline: none;
  border-color: var(--border-accent);
  background: var(--surface-strong);
}
.hd-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;
}
.hd-search__clear svg { position: static; transform: none; width: 15px; height: 15px; color: inherit; }
.hd-search__clear:hover { color: var(--text); background: var(--surface-strong); }
.hd-search__clear.is-visible { display: grid; }

/* Filtres par catégorie — rangée défilante horizontalement sur mobile.
   overflow-x est confiné à cette rangée : la page, elle, ne défile jamais
   latéralement. */
.hd-filters {
  display: flex; gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-bottom: var(--sp-1);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.hd-filters::-webkit-scrollbar { display: none; }
.hd-filters__chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 38px; padding: 0 var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.hd-filters__chip:hover { color: var(--text); border-color: var(--border-accent); }
.hd-filters__chip[aria-pressed="true"] {
  color: var(--deep-black);
  background: var(--accent);
  border-color: var(--accent);
}
.hd-filters__count {
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

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

/* -------------------------------------------------------------------------
   3. LISTE DES HADITHS
   ---------------------------------------------------------------------- */
/* Une carte masquée par la recherche porte l'attribut `hidden`. Les éléments
   d'une grille reçoivent un `display` calculé qui l'emporterait sur le
   display:none par défaut de `hidden` : la règle est donc explicite. */
.hd-list [hidden] { display: none !important; }

.hd-list {
  display: grid;
  gap: var(--sp-4);
  margin: 0 0 clamp(40px, 8vw, 72px);
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) {
  .hd-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hd-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--sp-3);
  height: 100%;
  padding: var(--sp-5);
  color: inherit; text-decoration: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.hd-card::after {                       /* liseré dégradé signature */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: var(--edge-gradient);
  opacity: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity var(--dur-base) var(--ease-out);
}
.hd-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-accent);
  box-shadow: var(--shadow-soft);
}
.hd-card:hover::after { opacity: 0.45; }
.hd-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.hd-card__top { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

.hd-card__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--accent-2-text);
  letter-spacing: 0.04em;
}

.hd-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--text);
}

.hd-card__ar {
  font-family: var(--hd-font-ar);
  font-size: 1.15rem;
  line-height: 2.1;
  direction: rtl;
  text-align: right;
  color: var(--text-secondary);
  /* Extrait : trois lignes suffisent à reconnaître le hadith, la fiche
     complète se charge d'afficher le texte intégral. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hd-card__fr {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hd-card__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  margin-top: auto; padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.hd-card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.hd-card__meta svg { width: 13px; height: 13px; }

/* -------------------------------------------------------------------------
   4. BADGE D'AUTHENTICITÉ
   L'émeraude reste réservée à l'action : un degré d'authenticité n'est pas
   un état interactif. Ces pastilles utilisent donc les rôles sémantiques du
   Design System (--success, --warning, --danger), jamais --accent.
   ---------------------------------------------------------------------- */
.hd-grade {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
}
.hd-grade::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.hd-grade--sahih {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 13%, transparent);
  border-color: color-mix(in srgb, var(--success) 34%, transparent);
}
.hd-grade--hasan {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 13%, transparent);
  border-color: color-mix(in srgb, var(--warning) 34%, transparent);
}
.hd-grade--daif {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 13%, transparent);
  border-color: color-mix(in srgb, var(--danger) 34%, transparent);
}
/* Repli pour les navigateurs sans color-mix : la pastille reste lisible. */
@supports not (color: color-mix(in srgb, red, blue)) {
  .hd-grade { background: var(--surface); border-color: var(--border); }
}

/* Étiquette de catégorie */
.hd-tag {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
a.hd-tag:hover { color: var(--text); border-color: var(--border-accent); }

/* -------------------------------------------------------------------------
   5. ÉTAT VIDE / CHARGEMENT
   ---------------------------------------------------------------------- */
.hd-empty {
  padding: clamp(40px, 9vw, 72px) var(--sp-5);
  text-align: center;
  color: var(--text-secondary);
}
.hd-empty svg { width: 34px; height: 34px; margin-bottom: var(--sp-4); color: var(--text-tertiary); }
.hd-empty h2 {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--text);
}
.hd-empty p { margin: 0 auto; max-width: 46ch; font-size: var(--fs-sm); line-height: var(--lh-normal); }

.hd-skeleton-list { display: grid; gap: var(--sp-4); }
@media (min-width: 900px) { .hd-skeleton-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hd-skeleton-card { height: 214px; border-radius: var(--radius-md); }

/* -------------------------------------------------------------------------
   6. FICHE DE HADITH
   ---------------------------------------------------------------------- */
.hd-fiche { padding: clamp(24px, 5vw, 44px) 0 clamp(40px, 8vw, 80px); }

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

.hd-fiche__head { margin-bottom: clamp(24px, 5vw, 36px); }

.hd-fiche__pills {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.hd-fiche__title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 6vw, 2.75rem);
  font-weight: var(--fw-bold);
  line-height: 1.18;
  letter-spacing: -0.015em;
  /* text-wrap: balance égalise les lignes d'un titre court sur deux lignes ;
     ignoré sans dommage par les navigateurs qui ne le connaissent pas. */
  text-wrap: balance;
}
.hd-fiche__subtitle {
  margin: 0;
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
}

/* — Bloc du texte arabe — pièce maîtresse de la fiche —
   Fond légèrement surélevé, filet or en tête : l'or est ornemental, il ne
   signale jamais une action. */
.hd-ar-block {
  position: relative;
  margin: 0 0 var(--sp-6);
  padding: clamp(22px, 5vw, 34px) clamp(18px, 4vw, 30px);
  background: var(--bg-elevated);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.hd-ar-block::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--edge-gradient); opacity: 0.6;
}
.hd-ar-block__text {
  margin: 0;
  font-family: var(--hd-font-ar);
  /* 1,5rem sur iPhone SE, 1,95rem à partir d'environ 430px : la vocalisation
     d'Amiri devient illisible en dessous de 24px de hauteur de ligne. */
  /* Idem : réglable depuis la barre d'étude partagée, valeur fluide sinon. */
  font-size: var(--ac-ar-size, clamp(1.5rem, 5.4vw, 1.95rem));
  line-height: 2.3;
  font-weight: 400;
  direction: rtl;
  text-align: right;
  color: var(--text);
  /* Justification désactivée : en RTL avec vocalisation, elle produit des
     blancs inter-mots très irréguliers. */
  text-align-last: right;
}

/* — Traduction française — */
.hd-tr {
  margin: 0 0 var(--sp-8);
  font-size: clamp(1.0625rem, 2.4vw, 1.1875rem);
  line-height: var(--lh-relaxed);
  color: var(--text);
}
.hd-tr p { margin: 0 0 var(--sp-4); }
.hd-tr p:last-child { margin-bottom: 0; }

/* — Sections — */
.hd-section { margin: 0 0 clamp(28px, 6vw, 44px); }
.hd-section__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);
  color: var(--text);
}
.hd-section__title svg { flex: none; width: 19px; height: 19px; color: var(--accent-2-text); }
.hd-section__title::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: var(--edge-gradient); opacity: 0.4;
}

/* Liste de métadonnées (rapporteur, livre, chapitre, numéro…) */
.hd-meta {
  display: grid; gap: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.hd-meta__row {
  display: grid;
  grid-template-columns: minmax(130px, 34%) 1fr;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.hd-meta__row:last-child { border-bottom: 0; }
.hd-meta__row:nth-child(odd) { background: var(--surface); }
.hd-meta dt {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  align-self: center;
}
.hd-meta dd {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text);
}
.hd-meta dd .hd-ar-inline {
  font-family: var(--hd-font-ar);
  font-size: 1.05rem;
  direction: rtl;
  color: var(--text-secondary);
}
@media (max-width: 520px) {
  .hd-meta__row { grid-template-columns: 1fr; gap: 4px; }
}

/* Chaîne de transmission — police mono, comme toute donnée technique du
   Design System. Défilement horizontal confiné au bloc. */
.hd-isnad {
  padding: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-gold);
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
}
.hd-isnad__source {
  display: block; margin-top: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}

/* Références bibliographiques */
.hd-refs { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.hd-ref {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.hd-ref__book {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text);
}
.hd-ref__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: 2px 9px;
  color: var(--accent-2-text);
  background: color-mix(in srgb, var(--accent-2) 12%, transparent);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-pill);
}
.hd-ref__chap {
  flex: 1 1 100%;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
}

.hd-biblio {
  margin: var(--sp-4) 0 0;
  padding-left: 1.15em;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}
.hd-biblio li { margin-bottom: 6px; }

/* Explication */
.hd-explication {
  padding: clamp(18px, 4vw, 26px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.hd-explication__text {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text);
}
.hd-explication__source {
  margin: 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);
}
.hd-explication__source strong { color: var(--text); font-weight: var(--fw-semibold); }
.hd-explication__warn {
  display: flex; gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--text-tertiary);
}
.hd-explication__warn svg { flex: none; width: 14px; height: 14px; margin-top: 2px; }

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

/* Barre d'actions de la fiche (copier, partager) */
.hd-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }

/* -------------------------------------------------------------------------
   7. NOTE DE MÉTHODOLOGIE EN PIED DE CONTENU
   ---------------------------------------------------------------------- */
.hd-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);
}
.hd-note h2 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  color: var(--text);
}
.hd-note p { margin: 0 0 var(--sp-3); }
.hd-note p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   8. BANNIÈRE DE MISE À JOUR (Service Worker)
   ---------------------------------------------------------------------- */
.hd-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);
}
.hd-toast.is-visible { transform: translate(-50%, 0); }
.hd-toast button { margin-left: auto; }

/* -------------------------------------------------------------------------
   9. PRÉFÉRENCES SYSTÈME
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hd-card, .hd-card::after, .hd-nav__link, .hd-toast,
  .hd-filters__chip, .hd-search__input, .hd-tag { transition: none; }
  .hd-card:hover, .hd-nav__link:hover { transform: none; }
  .hd-filters { scroll-behavior: auto; scroll-snap-type: none; }
}

@media (prefers-contrast: more) {
  .hd-card, .hd-ref, .hd-isnad, .hd-explication { border-color: var(--border-accent); }
  .hd-card__ar, .hd-card__fr { color: var(--text); }
}

/* Impression — la feuille commune ../assets/design/print.css neutralise déjà
   les flous et les ombres ; il reste à dérouler les extraits tronqués et à
   masquer ce qui n'a aucun sens sur papier. */
@media print {
  .hd-search, .hd-filters, .hd-nav, .hd-actions, .hd-toast { display: none !important; }
  .hd-card__ar, .hd-card__fr { -webkit-line-clamp: unset; display: block; overflow: visible; }
  .hd-ar-block { border-color: #999; }
}

/* =============================================================================
   COLLECTIONS — ajouts d'août 2026 (« 40 Hadiths An-Nawawî »)
   -----------------------------------------------------------------------------
   Purement additif : aucune règle précédente n'est modifiée. Mêmes tokens,
   mêmes composants, mêmes durées d'animation que le reste de l'application.
   ========================================================================== */

/* -------------------------------------------------------------------------
   C1. NAVIGATION INTERNE DE L'APPLICATION
   Deuxième barre, sous l'en-tête du site : elle situe l'utilisateur dans
   l'application (Bibliothèque · 40 Nawawî) sans dupliquer le sous-menu du
   header, qui sert lui à venir d'ailleurs sur le site.
   ---------------------------------------------------------------------- */
.hd-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))) {
  .hd-subnav { background: var(--bg); }
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .hd-subnav { background: var(--bg); }
}
.hd-subnav__inner {
  display: flex; gap: var(--sp-2);
  /* Rangée défilante sur petit écran : l'overflow est confiné ici, jamais
     sur la page. */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hd-subnav__inner::-webkit-scrollbar { display: none; }

.hd-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);
}
.hd-subnav__link svg { width: 16px; height: 16px; opacity: 0.85; }
.hd-subnav__link:hover { color: var(--text); }
.hd-subnav__link.is-current {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* -------------------------------------------------------------------------
   C2. CARTES DE COLLECTION (bibliothèque)
   ---------------------------------------------------------------------- */
.hd-colls {
  display: grid; gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
@media (min-width: 760px) { .hd-colls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.hd-coll-card {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-5);
  color: inherit; text-decoration: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.hd-coll-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--edge-gradient); opacity: 0.6;
}
.hd-coll-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-accent);
  box-shadow: var(--shadow-soft);
}
.hd-coll-card__ar {
  flex: none;
  font-family: var(--hd-font-ar);
  font-size: clamp(1.5rem, 5vw, 2rem);
  line-height: 1.6;
  direction: rtl;
  color: var(--accent-2-text);
}
.hd-coll-card__body { display: grid; gap: 2px; min-width: 0; }
.hd-coll-card__label {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.hd-coll-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg); font-weight: var(--fw-bold);
  line-height: 1.25;
}
.hd-coll-card__meta { font-size: var(--fs-sm); color: var(--text-secondary); }
.hd-coll-card__go { flex: none; width: 20px; height: 20px; margin-left: auto; color: var(--accent); }

/* -------------------------------------------------------------------------
   C3. EN-TÊTE D'UNE COLLECTION
   ---------------------------------------------------------------------- */
.hd-hero--coll { padding-bottom: var(--sp-6); }
.hd-hero__ar {
  margin: 0 0 var(--sp-3);
  font-family: var(--hd-font-ar);
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  line-height: 1.7;
  direction: rtl;
  color: var(--accent-2-text);
}
.hd-hero__auteur {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2);
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.hd-hero__auteur svg { width: 16px; height: 16px; align-self: center; color: var(--text-tertiary); }
.hd-hero__auteur span { color: var(--text-tertiary); }

/* -------------------------------------------------------------------------
   C4. PROGRESSION DE MÉMORISATION
   ---------------------------------------------------------------------- */
.hd-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);
}
.hd-progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.hd-progress__label {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.hd-progress__count { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-secondary); }
.hd-progress__count strong { color: var(--accent); font-size: var(--fs-md); }

.hd-progress__bar {
  height: 8px;
  background: var(--surface-strong);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.hd-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);
}
.hd-progress__reset { justify-self: start; }
@media (prefers-reduced-motion: reduce) { .hd-progress__bar i { transition: none; } }

/* -------------------------------------------------------------------------
   C5. GRILLE NUMÉROTÉE — retrouver un hadith par son rang
   auto-fill + minmax : le nombre de colonnes s'ajuste seul, de 6 sur un
   iPhone SE à 14 sur un écran large, sans point de rupture à maintenir.
   ---------------------------------------------------------------------- */
.hd-grid-section { margin-bottom: clamp(32px, 6vw, 56px); }

.hd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: var(--sp-2);
  margin: 0; padding: 0;
  list-style: none;
}
.hd-grid__cell {
  display: grid; place-items: center;
  min-height: var(--tap-min);
  aspect-ratio: 1 / 1;
  font-family: var(--font-mono);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary); text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.hd-grid__cell:hover {
  color: var(--text);
  border-color: var(--border-accent);
  background: var(--surface-strong);
  transform: translateY(-1px);
}
/* Mémorisé : fond émeraude plein — l'état actif de tout l'écosystème. */
.hd-grid__cell.is-memorise {
  color: var(--deep-black);
  background: var(--accent);
  border-color: var(--accent);
}
.hd-grid__cell.is-memorise:hover { color: var(--deep-black); }
@media (prefers-reduced-motion: reduce) {
  .hd-grid__cell { transition: none; }
  .hd-grid__cell:hover { transform: none; }
}

/* -------------------------------------------------------------------------
   C6. SOMMAIRE DÉTAILLÉ
   ---------------------------------------------------------------------- */
.hd-index { margin: 0 0 clamp(32px, 6vw, 56px); padding: 0; list-style: none; }
.hd-index__item + .hd-index__item { margin-top: var(--sp-2); }

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

.hd-index__num {
  flex: none;
  min-width: 34px;
  font-family: var(--font-mono);
  font-size: var(--fs-md); font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  color: var(--accent-2-text);
}
.hd-index__body { min-width: 0; flex: 1 1 auto; display: grid; gap: 3px; }
.hd-index__title {
  font-family: var(--font-display);
  font-size: var(--fs-base); font-weight: var(--fw-bold);
  line-height: 1.3;
}
.hd-index__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.hd-index__meta svg { width: 13px; height: 13px; }

/* Sur petit écran le badge d'authenticité passe sous le titre plutôt que de
   comprimer celui-ci à deux ou trois caractères par ligne. */
@media (max-width: 560px) {
  .hd-index__link { flex-wrap: wrap; row-gap: var(--sp-2); }
  .hd-index__body { flex-basis: calc(100% - 34px - var(--sp-4)); }
  .hd-index__link .hd-grade { margin-left: calc(34px + var(--sp-4)); }
}

/* -------------------------------------------------------------------------
   C7. FICHE — mode mémorisation

   L'intention d'origine était de CONSERVER toute la place de la traduction,
   pour que la page ne se replie pas sous les yeux du lecteur. Bonne intention,
   mauvais résultat : sur un hadith long, cela laissait un rectangle vide de
   plusieurs centaines de pixels avec une seule ligne de texte perdue au
   milieu. Le vide se lisait comme un défaut d'affichage, pas comme un choix.

   Compromis retenu : la zone garde une place RÉSERVÉE, mais plafonnée. Assez
   haute pour que le reste de la page ne saute pas brutalement, assez basse
   pour se lire comme un volet replié — c'est-à-dire comme un élément qu'on
   peut rouvrir. Le libellé et la bordure disent l'action ; la bordure passe
   à l'émeraude au survol parce que le bloc est cliquable (règle de marque :
   émeraude = action).
   ---------------------------------------------------------------------- */
.hd-tr {
  position: relative;
  border-radius: var(--radius-sm);
  transition: color var(--dur-base) var(--ease-out);
}
.hd-tr.is-hidden {
  /* Volet replié : hauteur bornée, jamais la hauteur du texte caché. */
  max-height: clamp(92px, 16vh, 128px);
  overflow: hidden;
  color: transparent;
  background: var(--surface);
  border: 1px dashed var(--border);
  cursor: pointer;
  user-select: none;
  transition: color        var(--dur-base) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background   var(--dur-fast) var(--ease-out);
}
.hd-tr.is-hidden:hover {
  background: var(--surface-strong);
  border-color: var(--border-accent);
}
.hd-tr.is-hidden::after {
  content: "Traduction masquée — toucher pour afficher";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  text-align: center;
}
.hd-tr.is-hidden:hover::after { color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) { .hd-tr, .hd-tr.is-hidden { transition: none; } }

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

/* -------------------------------------------------------------------------
   C8. IMPRESSION
   ---------------------------------------------------------------------- */
@media print {
  .hd-subnav, .hd-progress, .hd-grid-section, .hd-retour { display: none !important; }
  /* Le plafond de hauteur doit sauter aussi, sinon la traduction sortirait
     tronquée sur le papier. */
  .hd-tr.is-hidden {
    max-height: none; overflow: visible;
    color: var(--text); background: none; border: 0;
  }
  .hd-tr.is-hidden::after { content: none; }
}

/* =============================================================================
   40 NAWAWÎ — ajustements liés à la fusion sommaire + recherche
   -----------------------------------------------------------------------------
   La bibliothèque a disparu : le sommaire, la recherche, les filtres et la
   grille numérotée vivent désormais sur une seule page. Deux règles suffisent
   à les faire cohabiter.
   ========================================================================== */

/* Un hadith écarté par la recherche disparaît de la liste détaillée… */
.hd-index [hidden] { display: none !important; }

/* …mais s'estompe seulement dans la grille numérotée. La faire rétrécir à
   chaque frappe la rendrait illisible comme repère : sa forme doit rester
   stable, c'est tout son intérêt. */
.hd-grid__cell.is-hors-filtre {
  opacity: 0.22;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hd-grid__cell { transition: opacity var(--dur-fast) var(--ease-out),
                               color var(--dur-fast) var(--ease-out),
                               background var(--dur-fast) var(--ease-out),
                               border-color var(--dur-fast) var(--ease-out),
                               transform var(--dur-fast) var(--ease-out); }
}