/*
Theme Name:  Tachoumcha — منصة تشمشه للتراث والمعرفة
Description: Thème sur-mesure de la plateforme culturelle de حلف تشمش. Le modèle de contenu vit dans le plugin « Tachoumcha Core » ; ce thème ne porte que la présentation.
Version:     0.23.0
Author:      INNOVAI Consulting
Text Domain: tachoumcha
Requires PHP: 7.4
*/

@import url("assets/fonts.css");
/* ⚠️ tokens.css n'est PLUS importé ici : une URL d'`@import` ne porte pas de
   numéro de version, donc bumper le thème rafraîchissait style.css mais pas
   les jetons — on servait des couleurs périmées à qui avait déjà visité. Il
   est mis en file par functions.php avec `?ver=`, en dépendance de celle-ci
   pour garder l'ordre de cascade. */

/* ============================================================================
 * Le système, en trois règles.
 *   1. Le PROFOND porte les surfaces sombres.
 *   2. L'OR ne trace QUE le lien. Jamais un aplat, jamais du texte.
 *   3. Les lignes sont des FILETS (1 px), pas des ombres portées. Angles vifs.
 * Et une interdiction : AUCUN ROUGE.
 * ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { direction: rtl; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--fond); color: var(--encre);
  font-family: var(--f-texte); font-size: 1.0625rem; line-height: var(--lh-texte);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; line-height: 1.3; margin: 0; }
a { color: var(--profond-2); text-underline-offset: .25em; }
img, svg { max-width: 100%; height: auto; }

.enveloppe { max-width: 78rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.75rem); }
.ui { font-family: var(--f-ui); font-weight: 300; font-size: .875rem; line-height: 1.7; }

/* ============================================================================
 * En-tête et menu à deux niveaux
 * Le cahier des charges du client décrit 9 sections AVEC leurs sous-rubriques :
 * le menu doit donc dérouler, pas aplatir.
 * ========================================================================== */

.entete {
  position: sticky; top: 0; z-index: 30;
  /* La surface la plus sombre du site : c'est ce qui fait que la barre se lit
     comme un cadre POSÉ sur la page, et non comme le prolongement du hero.
     94 % → 97 % : en haut de page il n'y a aucun contenu SOUS la barre, juste
     le fond ivoire, et les 6 % de transparence le laissaient remonter — la
     barre s'éclaircissait donc exactement là où elle doit trancher. */
  background: color-mix(in oklab, var(--profond-bas) 97%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  color: var(--sur-profond);
  border-bottom: 1px solid color-mix(in oklab, var(--or) 32%, transparent);
}
.entete__barre { display: flex; align-items: center; justify-content: space-between;
                 gap: 2.25rem; min-height: 4.2rem; }

.marque { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: inherit; flex: none; }

/* ── Le logo ───────────────────────────────────────────────────────────────
 * Posé sur une PASTILLE CLAIRE, et ce n'est pas un choix graphique mais une
 * nécessité : l'encrier et le dos du livre sont du même indigo que la barre.
 * Détouré et posé directement dessus, le logo y perd son encrier — vérifié en
 * composant le fichier transparent sur la couleur réelle de la barre.
 *
 * La pastille est en `--sur-profond` et non en crème fixe : c'est LE jeton qui
 * signifie « ce qui s'écrit sur une surface sombre », donc le seul garanti
 * clair dans les cinq palettes, y compris « السَّمَر » dont tout le reste est
 * noir. Une valeur en dur y serait un accident qui attend son heure.
 *
 * Le filet d'or, c'est la règle de la maison : ce qui délimite est un filet,
 * jamais une ombre. Il rattache la pastille au bord inférieur de la barre, qui
 * est du même or.
 */
/* Hauteur en dur, et non `align-self: stretch` : sur un élément remplacé,
   `stretch` fixe la hauteur sur la ligne, `aspect-ratio` en déduit la largeur,
   ce qui ré-agrandit la ligne — la barre était passée de 67 à 136 px. Le
   nombre ci-dessous cale le logo sur la hauteur optique du bloc nom+baseline ;
   c'est le rapport à tenir si la typographie de la marque bouge. */
.marque__logo { flex: none; width: 2.8rem; height: 2.8rem;
                border-radius: 26%; background: var(--sur-profond); padding: 3px;
                border: 1px solid color-mix(in oklab, var(--or) 42%, transparent);
                transition: border-color .25s, scale .25s cubic-bezier(.2,.9,.3,1.4); }
.marque:hover .marque__logo, .marque:focus-visible .marque__logo {
  border-color: var(--or); scale: 1.04;
}

.marque__nom  { font-family: var(--f-display); font-weight: 700; font-size: .99rem;
                line-height: 1.25; letter-spacing: -.005em; }
/* Pas de filet entre le nom et la baseline : la barre en a déjà un en bas, et
   deux traits d'or à trois millimètres l'un de l'autre se lisent comme une
   hésitation. L'écart et la graisse suffisent à séparer les deux lignes. */
.marque__sous { font-family: var(--f-ui); font-weight: 300; font-size: .655rem; opacity: .6;
                display: block; margin-top: .26rem; letter-spacing: .012em; }

/* Neuf sections sur UNE ligne — mais qui OCCUPENT la barre au lieu de se
   tasser contre la marque : le menu prend toute la largeur restante et répartit
   ses entrées. Rétréci à l'excès, il laissait la moitié de l'en-tête vide. */
/* ⚠️ PAS d'`overflow` ici — jamais.
 *
 * Une soupape `overflow-x: auto` avait été posée pour empêcher le menu de
 * pousser la page en débordement horizontal. Elle a cassé les sous-menus : un
 * conteneur de défilement ROGNE ses enfants en position absolue, et les
 * déroulés, qui sortent sous la barre, disparaissaient purement et simplement.
 * Le débordement est désormais réglé par le resserrement puis le retour à la
 * ligne (voir les paliers plus bas), qui n'introduisent aucun rognage.
 *
 * `min-width: 0` reste nécessaire : un enfant flex refuse par défaut de
 * descendre sous la largeur de son contenu. */
.nav { font-family: var(--f-ui); font-weight: 300; font-size: .86rem;
       flex: 1 1 auto; min-width: 0; }
.nav > ul { list-style: none; display: flex; flex-wrap: nowrap;
            justify-content: space-between; gap: 0; margin: 0; padding: 0; }
.nav li { position: relative; }
.nav a { color: var(--sur-profond); text-decoration: none; opacity: .82; display: block;
         padding: .5rem .5rem; white-space: nowrap;
         transition: opacity .18s, background .18s; }

/* L'icône se lit à pleine opacité, dans un or CLAIRCI vers l'ivoire : à
   0,72 d'opacité sur un trait de 1,3 px, elle se noyait dans l'indigo du
   bandeau. Un trait fin sur fond sombre a besoin de contraste, pas de
   discrétion — la retenue vient de la taille, pas de l'effacement. */
.nav > ul > li > a { display: flex; align-items: center; gap: .42rem; }
.nav__icone { flex: none; width: 1.12em; height: 1.12em; fill: none; stroke: currentColor;
              stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
              color: color-mix(in oklab, var(--or) 45%, var(--sur-profond));
              opacity: 1; transition: color .18s, translate .18s, scale .18s; }
.nav > ul > li:hover > a .nav__icone,
.nav > ul > li:focus-within > a .nav__icone,
.nav .current-menu-item > a .nav__icone { color: var(--or); translate: 0 -1px; scale: 1.08; }
.nav > ul > li > a { box-shadow: inset 0 -1px 0 transparent; }
.nav > ul > li:hover > a, .nav > ul > li:focus-within > a,
.nav .current-menu-item > a { opacity: 1; box-shadow: inset 0 -1px 0 var(--or); }

/* Le déroulé. Ouvert au survol ET au focus clavier : un sous-menu qu'on ne
   peut atteindre qu'à la souris exclut le clavier et les lecteurs d'écran. */
.nav .sub-menu {
  list-style: none; margin: 0; padding: .4rem 0;
  position: absolute; inset-inline-start: 0; top: 100%; min-width: 15rem; z-index: 40;
  /* Le déroulé appartient à la barre : même valeur qu'elle, sinon il flotte. */
  background: var(--profond-bas); border: 1px solid color-mix(in oklab, var(--or) 30%, transparent);
  box-shadow: 0 22px 48px -26px rgba(0, 0, 0, .9);
  opacity: 0; visibility: hidden; translate: 0 -6px;
  transition: opacity .18s, translate .18s, visibility .18s;
}
.nav li:hover > .sub-menu, .nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; translate: 0 0; }

/* Les dernières entrées ouvrent leur déroulé VERS L'INTÉRIEUR. Ancré en
   `inset-inline-start` comme les autres, un déroulé de 15 rem sur la dernière
   entrée sort de la fenêtre : il devient à moitié inatteignable, et il tirait
   dix pixels de défilement horizontal sur toute la page. */
.nav > ul > li:nth-last-child(-n+2) > .sub-menu { inset-inline-start: auto; inset-inline-end: 0; }
.nav .sub-menu a { padding: .45rem 1rem; font-size: .8rem; opacity: .78; white-space: nowrap; }
.nav .sub-menu a:hover { opacity: 1; background: color-mix(in oklab, var(--or) 12%, transparent); }

/* Palier intermédiaire : neuf entrées en `nowrap` plus la marque dépassaient
   la fenêtre en dessous de ~1340 px et poussaient TOUTE la page en débordement
   horizontal — une bande vide apparaissait sur le côté. On resserre avant que
   ça arrive, plutôt que de masquer le débordement après coup. */
@media (max-width: 84rem) {
  .nav { font-size: .78rem; }
  .nav a { padding-inline: .36rem; }
  .marque__sous { display: none; }
  .marque__nom { font-size: .86rem; }
}

/* Dernier recours avant la bascule mobile : le menu passe sur deux lignes
   plutôt que de pousser la page. Deux lignes se lisent ; une page décalée de
   200 px, non — et un menu rogné encore moins. */
@media (max-width: 76rem) {
  .nav > ul { flex-wrap: wrap; justify-content: flex-end; row-gap: .1rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * LE MENU BURGER — tablette et mobile (≤ 68 rem)
 *
 * Le menu compte 89 entrées : neuf sections, dont « المجموعات » qui porte les
 * vingt-trois groupes et « عن اللجنة » sept sous-rubriques. Déplié d'un bloc,
 * le panneau serait un mur de quatre-vingt-neuf liens. Les sous-menus sont donc
 * REPLIÉS, chacun derrière son chevron — c'est ce qui rend le burger utilisable
 * ici, pas le bouton lui-même.
 *
 * Le lien et le chevron sont DEUX cibles distinctes : « المجموعات » est une
 * page, et son chevron ouvre la liste des groupes. Fondre les deux forcerait à
 * choisir entre atteindre la page et voir ses enfants.
 * ═══════════════════════════════════════════════════════════════════════ */

.burger { display: none; }

/* Les chevrons sont posés par le script sur TOUTES les entrées à enfants, quelle
   que soit la largeur — c'est le seul moyen qu'ils soient déjà là au moment où
   l'on rétrécit la fenêtre. Au-dessus de 68 rem, le déroulé s'ouvre au survol :
   ils n'y servent à rien et sont masqués. Sans cette règle ils s'affichaient en
   boutons bruts dans la barre de bureau. */
.nav__plier { display: none; }

@media (max-width: 68rem) {
  /* La barre reste une LIGNE — marque à droite, bouton à gauche — donc elle
     reste basse, donc `sticky` redevient tenable. Elle était passée en colonne
     et en `static` du temps où les neuf sections s'y empilaient. */
  .entete__barre { gap: 1rem; min-height: 3.8rem; }

  /* Le bouton n'apparaît QUE si le script tourne (`html.js`, posé par une ligne
     en tête de document). Sans lui il ne replierait rien : mieux vaut pas de
     bouton qu'un bouton mort devant quatre-vingt-neuf liens. */
  .js .burger {
    display: inline-flex; align-items: center; gap: .5rem; flex: none;
    min-height: 44px; padding: .45rem .85rem;      /* cible tactile ≥ 44 px */
    font-family: var(--f-ui); font-weight: 400; font-size: .78rem;
    color: var(--sur-profond); background: transparent; cursor: pointer;
    border: 1px solid color-mix(in oklab, var(--or) 42%, transparent);
    transition: background .18s, border-color .18s;
  }
  .burger[aria-expanded="true"] { background: color-mix(in oklab, var(--or) 14%, transparent);
                                  border-color: var(--or); }

  /* ── Sous 26rem, le mot « القائمة » sort de la ligne ─────────────────────
   * Mesuré sur un écran de 375 px : marque (non rétrécissable, `flex: none`)
   * + gouttière + bouton de 94 px dépassent la largeur, le bouton se retrouve
   * à x = −11 px, et TOUTE la page gagne un défilement horizontal de 11 px.
   * Le symptôme se voit partout — c'est la barre —, pas seulement sur l'accueil.
   *
   * On retire le mot, pas le nom accessible : `clip-path` le garde dans
   * l'arbre d'accessibilité. Un `display: none` aurait supprimé le seul texte
   * du bouton, qui n'a pas d'`aria-label` — le lecteur d'écran aurait annoncé
   * « bouton », sans plus. Le pictogramme à trois traits reste, et il est
   * compris. */
  @media (max-width: 26rem) {
    .burger__mot { position: absolute; width: 1px; height: 1px;
                   overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    /* `.8rem` et pas moins : le pictogramme fait 17 px, et c'est ce padding
       qui porte le bouton à 44 px de large — la cible tactile que la règle
       ci-dessus tenait déjà en hauteur. */
    .js .burger { gap: 0; padding-inline: .8rem; }
  }

  /* Trois traits qui deviennent une croix : l'état du panneau se lit sur le
     bouton, sans avoir à regarder ailleurs. */
  .burger__ico, .burger__ico::before, .burger__ico::after {
    display: block; width: 17px; height: 2px; background: currentColor; border-radius: 2px;
    transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .18s;
  }
  .burger__ico { position: relative; }
  .burger__ico::before, .burger__ico::after { content: ""; position: absolute; inset-inline: 0; }
  .burger__ico::before { top: -6px; }
  .burger__ico::after  { top:  6px; }
  .burger[aria-expanded="true"] .burger__ico { background: transparent; }
  .burger[aria-expanded="true"] .burger__ico::before { transform: translateY(6px) rotate(45deg); }
  .burger[aria-expanded="true"] .burger__ico::after  { transform: translateY(-6px) rotate(-45deg); }

  /* ── Le panneau ─────────────────────────────────────────────────────────
   * En surcouche et non dans le flux : dans le flux, l'ouverture pousse toute
   * la page vers le bas et le visiteur perd l'endroit où il lisait.
   */
  .js .nav {
    position: absolute; inset-inline: 0; top: 100%; z-index: 40;
    background: var(--profond-bas);
    border-block: 1px solid color-mix(in oklab, var(--or) 30%, transparent);
    box-shadow: 0 26px 52px -26px rgba(0,0,0,.9);
    max-height: min(76svh, 40rem); overflow-y: auto; overscroll-behavior: contain;
    padding: .4rem 0 .8rem;
    display: none;
  }
  .entete { position: sticky; }
  .entete__barre { position: relative; }
  .js .nav[data-ouvert="true"] { display: block; }

  .nav > ul { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; }
  .nav > ul > li { border-top: 1px solid color-mix(in oklab, var(--sur-profond) 10%, transparent); }
  .nav > ul > li:first-child { border-top: 0; }
  .nav > ul > li > a { min-height: 48px; padding-inline: clamp(1rem, 4vw, 2.75rem);
                       font-size: .95rem; box-shadow: none; }
  .nav > ul > li:hover > a, .nav > ul > li:focus-within > a { box-shadow: none;
                       background: color-mix(in oklab, var(--or) 9%, transparent); }

  /* Le chevron, posé par assets/menu.js sur les seules entrées qui ont des
     enfants. Superposé au lien plutôt que placé à côté : il garde la ligne à
     48 px sans réduire la zone cliquable du lien. */
  /* Hauteur FIXE, calée sur celle de la ligne — et non `inset-block: 0`, qui
     l'étirait sur tout le <li> : une fois les vingt-trois groupes dépliés, le
     chevron se retrouvait centré au milieu de la liste, à cinq cents pixels de
     la ligne qu'il commande. */
  .nav__plier {
    position: absolute; inset-block-start: 0; height: 48px; inset-inline-end: 0;
    width: 3.4rem; display: grid; place-items: center; cursor: pointer;
    background: transparent; border: 0; border-inline-start: 1px solid
                color-mix(in oklab, var(--sur-profond) 10%, transparent);
    color: var(--sur-profond); opacity: .7;
  }
  .nav__plier svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor;
                    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
                    transition: rotate .25s cubic-bezier(.2,.8,.2,1); }
  .nav__plier[aria-expanded="true"] { opacity: 1; color: var(--or); }
  .nav__plier[aria-expanded="true"] svg { rotate: 180deg; }

  /* Le déroulé s'ouvre EN PLACE : un menu flottant sur un écran de 375 px sort
     de l'écran. Et il est replié par défaut — c'est tout l'intérêt. */
  .nav .sub-menu { position: static; opacity: 1; visibility: visible; translate: 0; border: 0;
                   box-shadow: none; min-width: 0; padding: .2rem 0 .5rem;
                   background: color-mix(in oklab, #000 22%, transparent); }
  .js .nav .sub-menu { display: none; }
  .js .nav li[data-ouvert="true"] > .sub-menu { display: block; }
  .nav .sub-menu a { padding-block: .5rem; white-space: normal; min-height: 40px;
                     padding-inline: calc(clamp(1rem, 4vw, 2.75rem) + 1rem) clamp(1rem, 4vw, 2.75rem); }

  /* Sans script : la barre reprend sa disposition en colonne d'avant le
     burger, et les quatre-vingt-neuf entrées s'affichent. C'est long, mais
     c'est navigable — un bouton qui ne répond pas ne l'est pas. */
  html:not(.js) .entete { position: static; }
  html:not(.js) .entete__barre { flex-direction: column; align-items: stretch;
                                 gap: .5rem; padding-block: .85rem; }
}

/* ============================================================================
 * LE HERO — الخِزانة, le rayonnage
 *
 * Les ouvrages sont posés sur la tranche, comme dans une vraie bibliothèque.
 * L'épaisseur du dos EST la pagination réelle ; au survol le livre sort du
 * rayon et pivote pour montrer son plat.
 * ========================================================================== */

/* Le fond du hero — de la PROFONDEUR, pas du poids.
 *
 * ⚠️ Le sens de lecture du dégradé a été INVERSÉ, et c'est le point important.
 * Le hero partait de `--profond 74% + #000`, c'est-à-dire plus sombre que la
 * barre de menu, et on rattrapait le manque de bord par une ombre interne de
 * 26 px. Deux corrections qui vont dans le même sens : plus de noir. Résultat,
 * une seule masse sombre du haut de l'écran jusqu'aux livres.
 *
 * Maintenant le hero COMMENCE clair, à `--profond-haut`, et descend vers le
 * sombre. La barre de menu se détache parce qu'elle est la surface foncée sur
 * un fond plus clair — un contraste de valeur, pas un effet d'ombre. Le poids
 * revient en bas, là où il sert : sous le rayonnage et derrière le cartouche.
 *
 * Quatre couches, aucune image, ~0 octet de plus :
 *   1. une résille losangée très pâle (la géométrie du décor savant, suggérée
 *      et non imitée) — deux dégradés répétés, pas de fichier ;
 *   2. un halo derrière le rayon : la lumière tombe sur les livres ;
 *   3. la descente du clair vers le sombre, de la barre vers le pied de scène ;
 *   4. un filet lumineux tout en haut : la tranche éclairée sous la barre.
 */
.hero {
  position: relative; overflow: hidden;
  color: var(--sur-profond);
  background:
    repeating-linear-gradient( 45deg, transparent 0 27px, color-mix(in oklab, var(--or) 7%, transparent) 27px 28px),
    repeating-linear-gradient(-45deg, transparent 0 27px, color-mix(in oklab, var(--or) 7%, transparent) 27px 28px),
    radial-gradient(62% 48% at 50% 44%, color-mix(in oklab, var(--profond-2) 68%, transparent) 0%, transparent 72%),
    linear-gradient(180deg,
        var(--profond-haut) 0%,
        color-mix(in oklab, var(--profond) 55%, var(--profond-haut)) 40%,
        var(--profond) 78%,
        color-mix(in oklab, var(--profond) 86%, #000) 100%);
  /* Plus d'ombre interne descendante : elle rongeait exactement le contraste
     qu'on vient d'installer. À la place, la ligne claire d'une tranche. */
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--sur-profond) 12%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--or) 26%, transparent);
  /* ⚠️ Le dégagement du HAUT se mesure en `vh`, pas en `vw`.
     Il était en `vw` comme le reste des espacements du site, et c'est faux
     ICI : un portable est LARGE et COURT (1440 × 780). En `vw` il prenait donc
     le maximum — 56 px — précisément sur les écrans où la hauteur manque, et
     les trois amorces sous le champ tombaient sous la ligne de flottaison.
     En `vh` l'espace se resserre quand l'écran est bas et reste ample quand il
     est haut. Le bas garde `vw` : il vient APRÈS les amorces, il ne joue rien
     dans ce qu'on voit sans défiler. */
  padding-block: clamp(1.5rem, 3.2vh, 3.5rem) clamp(2.5rem, 5vw, 4rem);
}
/* Vignette : les angles s'éteignent, le centre reste. C'est ce qui « creuse »
   la scène et pousse l'œil vers le rayon. Allégée (.5 → .3) et remontée à 34 %
   d'opacité nulle : à .5 elle rendait au hero le poids qu'on lui retire. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(84% 72% at 50% 46%, transparent 46%, rgba(0, 0, 0, .3) 100%);
}
.hero > * { position: relative; z-index: 1; }

.hero__tete { text-align: center; }

.hero__sur {
  font-family: var(--f-ui); font-weight: 300; font-size: .74rem; letter-spacing: .1em;
  color: var(--or); display: flex; align-items: center; justify-content: center;
  gap: .8rem; margin: 0 0 .5rem;
}
/* Deux filets qui s'ouvrent de part et d'autre — le titre est centré, la ligne
   ne peut donc plus filer d'un seul côté. */
.hero__sur::before, .hero__sur::after {
  content: ""; flex: 0 1 7rem; height: 1px; background: currentColor; opacity: .38;
  animation: filet 1.1s .15s cubic-bezier(.2,.7,.2,1) backwards;
}
.hero__sur::before { transform-origin: left; }
.hero__sur::after  { transform-origin: right; }
@keyframes filet { from { scale: 0 1; } }

/* Le titre porte seul l'en-tête depuis que la formule qui le doublait a été
   retirée : il monte donc en taille — un h1 unique doit peser ce que pesaient
   les deux lignes réunies, sinon le haut de page a l'air d'avoir perdu
   quelque chose.
   Les deux filets d'or qui encadraient le surtitre lui reviennent : ils
   tenaient la ligne, pas le texte. */
.hero__titre { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 900; margin-bottom: .4rem;
               text-wrap: balance; letter-spacing: -.015em; line-height: 1.28;
               display: flex; flex-wrap: wrap; align-items: center;
               justify-content: center; gap: .1em .35em; }
.hero__titre::before, .hero__titre::after {
  content: ""; flex: 0 1 5.5rem; height: 1px; background: var(--or); opacity: .42;
  animation: filet 1.1s .15s cubic-bezier(.2,.7,.2,1) backwards;
}
.hero__titre::before { transform-origin: left; }
.hero__titre::after  { transform-origin: right; }
@media (max-width: 40rem) { .hero__titre::before, .hero__titre::after { flex-basis: 2rem; } }
.mot { display: inline-block; animation: monte .7s cubic-bezier(.16,.84,.28,1) backwards; }
@keyframes monte { from { opacity: 0; translate: 0 .5em; rotate: -1.2deg; } }

/* ── Le rayon ────────────────────────────────────────────────────────────── */

/* Le rayon tient dans la MÊME largeur que le menu et le reste du site : il
   s'arrêtait aux bords de l'écran, ce qui le désalignait de tout et donnait
   l'impression d'un bandeau publicitaire posé sur la page. */
.rayon { position: relative; max-width: 78rem; margin-inline: auto;
         padding-inline: clamp(1rem, 4vw, 2.75rem); }

/* Le rayon ne se coupe pas net aux bords : il s'y DISSOUT. Un livre sort du
   champ en fondu d'un côté et reparaît de l'autre — la boucle devient
   circulaire au lieu de buter sur une arête.
   Le padding haut est généreux exprès : le plat sort du rayon vers le haut, et
   `overflow: hidden` (imposé par le défilement) le rognerait sinon.
   La PERSPECTIVE est ici et pas sur `.rayon` : `perspective` ne s'applique
   qu'aux enfants directs, et `overflow: hidden` coupe la chaîne `preserve-3d`.
   Posée un cran trop haut, elle n'atteignait pas les livres et le pivot était
   orthographique — de la 3D à plat. */
.rayon__cadre {
  /* `direction: ltr` sur LE CADRE — c'est la clef du défilement.
   *
   * En RTL, une rangée plus large que son conteneur déborde vers la GAUCHE :
   * elle est calée à droite et sa tête part hors champ à gauche. La
   * translation vers la gauche vidait donc le côté droit au lieu d'y ramener
   * des livres — ils partaient et ne revenaient jamais.
   * Posée sur la piste, la déclaration ne servait à rien : c'est le CONTENEUR
   * qui décide où son contenu déborde, pas le contenu. Sur le cadre, le
   * débordement passe à droite et la boucle tourne. Les titres reprennent
   * `direction: rtl` sur `.livre`. */
  direction: ltr;
  /* 6 rem au-dessus : le dégagement dans lequel le plat s'ouvre sans être
     rogné. Au-delà, ça n'ouvrirait qu'une bande vide sous le titre. */
  overflow: hidden; padding-block: clamp(3rem, 5.5vh, 4.5rem) 1rem;
  /* Fondu court (5 %) : un livre doit avoir REPARU de l'autre côté avant
     d'avoir fini de s'effacer de celui-ci. Avec un fondu large, il existait un
     instant où les deux extrémités étaient vides et le rayon semblait se
     vider. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.rayon__piste { display: flex; width: max-content;
                animation: defile 78s linear infinite; }
/* La piste contient DEUX lots identiques : après un déplacement d'exactement
   la moitié de sa propre largeur, le second lot occupe la place du premier et
   la boucle est invisible. Toute autre valeur produit un saut. */
@keyframes defile { to { translate: -50% 0; } }

/* Pause au survol — sans elle on ne peut pas viser un livre, et l'effet le
   plus soigné devient injouable. */
.rayon:hover .rayon__piste, .rayon:focus-within .rayon__piste { animation-play-state: paused; }

.rayon__lot { display: flex; align-items: flex-end; gap: 5px; list-style: none; margin: 0;
              padding-inline: 2.5px; }

/* Hauteurs légèrement inégales : sur une vraie étagère, deux volumes ne font
   jamais la même taille, et c'est ce qui empêche le rayon de ressembler à une
   barre de progression. Agrandies d'un tiers — un rayon qu'on regarde de loin
   doit avoir la présence d'un meuble, pas d'une frise. */
/* ── LA HAUTEUR DES VOLUMES SUIT CELLE DE L'ÉCRAN ──────────────────────────
 * `--h-livre` vaut 19 rem — la taille voulue — TANT QUE la fenêtre est haute,
 * et se resserre en dessous. Le pivot est calculé : 304 px (19 rem) ÷ 31 vh =
 * ~980 px. Au-dessus de ce seuil le clamp bute sur son maximum, donc RIEN NE
 * CHANGE sur un grand écran ; en dessous seulement,
 * le rayon cède la hauteur qu'il faut pour que les trois amorces sous le champ
 * restent au-dessus de la ligne de flottaison.
 *
 * Les trois hauteurs restent inégales, en proportion : sur une vraie étagère
 * deux volumes ne font jamais la même taille, et c'est ce qui empêche le rayon
 * de ressembler à une barre de progression.
 */
.rayon { --h-livre: clamp(13.5rem, 31vh, 19rem); }
.rayon__case { flex: none; width: var(--ep); height: var(--h-livre);
               transition: translate .45s cubic-bezier(.22,.86,.28,1); }
.rayon__case:nth-child(3n)   { height: calc(var(--h-livre) * 1.095); }
.rayon__case:nth-child(4n+1) { height: calc(var(--h-livre) * .937); }
.rayon__case:hover, .rayon__case:focus-within { z-index: 6; }

/* ── LE VOLUME PRÉSENTÉ DE FACE ───────────────────────────────────────────
 * Un sur quatre, posé plat vers l'avant comme dans une librairie. C'est LUI
 * qui fait exister le rayon au premier coup d'œil : on voit une couverture
 * avant d'avoir bougé la souris — et au doigt, où il n'y a pas de survol, c'est
 * la seule chose qu'on verra jamais.
 *
 * Un peu plus court que les dos qui l'entourent, et posé sur la même ligne de
 * base : il a l'air appuyé CONTRE eux, pas planté devant.
 */
.rayon__case--face { width: 11rem; height: calc(var(--h-livre) * .863); }
.rayon__case--face:nth-child(3n)   { height: calc(var(--h-livre) * .863); }
.rayon__case--face:nth-child(4n+1) { height: calc(var(--h-livre) * .863); }

.livre__face { position: absolute; inset: 0; overflow: hidden;
               border: 1px solid color-mix(in oklab, var(--or) 55%, transparent);
               box-shadow: 0 18px 34px -18px rgba(0,0,0,.95),
                           inset 0 0 0 1px rgba(0,0,0,.3);
               transition: box-shadow .4s ease; }
/* La couverture ÉCLAIRCIE dans le rayon, et elle seule.
   Les teintes de couverture sont calculées pour l'ivoire de la page ; posées
   sur l'indigo du hero, elles s'y noient et le volume de face devient un
   rectangle sombre parmi des dos sombres. Un filtre local suffit : on ne
   touche ni au jeton, ni à la couverture telle qu'elle paraît ailleurs. */
.livre__face .couv { height: 100%; aspect-ratio: auto;
                     filter: brightness(1.35) saturate(1.12); }
.rayon__case--face:hover .livre__face .couv,
.rayon__case--face:focus-within .livre__face .couv { filter: brightness(1.5) saturate(1.18); }

/* La tranche du volume de face — le mince liseré sombre au bord droit, qui dit
   que c'est un objet épais et non une image collée. */
.livre__face::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; width: 6px;
  background: linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,.12));
  pointer-events: none;
}
.rayon__case--face:hover .livre__face,
.rayon__case--face:focus-within .livre__face {
  box-shadow: 0 30px 54px -20px rgba(0,0,0,1), inset 0 0 0 1px color-mix(in oklab, var(--or) 40%, transparent);
}
/* Le volume de face n'a ni dos ni plat à ouvrir : il montre déjà sa couverture.
   Il se contente de s'avancer.
   ⚠️ Le DOS doit être retiré, pas seulement ignoré : `.livre__dos` vient après
   `.livre__face` dans le DOM et, à `z-index` égal, se peignait PAR-DESSUS la
   couverture. On ne voyait qu'un panneau plat de la couleur de la reliure —
   la couverture était bien là, dessous, parfaitement rendue. */
.rayon__case--face .livre__plat,
.rayon__case--face .livre__dos { display: none; }

/* ── Le geste d'ouverture ─────────────────────────────────────────────────
 * Le dos s'efface et le plat grandit à sa place : le volume « se retourne »
 * pour montrer sa face.
 *
 * C'était d'abord un vrai pivot 3D (rotateY sur une chaîne preserve-3d). Il
 * fonctionnait en isolation mais s'aplatissait ici : le transform se calculait
 * correctement — vérifié au `getComputedStyle` — et se rendait à plat, donc le
 * plat, présenté à 90°, avait une largeur nulle et restait invisible. Plutôt
 * que de continuer à chercher lequel des six ancêtres cassait la scène, on
 * prend le geste qui ne PEUT pas casser : deux opacités et une échelle.
 * Il se lit aussi bien, il marche au tactile, et il ne dépend de rien. */
.livre { direction: rtl; position: relative; display: block; width: 100%; height: 100%;
         transition: translate .45s cubic-bezier(.22,.86,.28,1); }
.rayon__case:hover .livre, .rayon__case:focus-within .livre { translate: 0 -.9rem; }

.livre__dos {
  position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(90deg,
      rgba(0,0,0,.34) 0%, rgba(255,255,255,.10) 22%,
      rgba(255,255,255,.02) 62%, rgba(0,0,0,.30) 100%), var(--cuir);
  border-radius: 1px 3px 3px 1px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-block: 1.35rem; gap: .5rem;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
/* Les deux filets d'or du dos — la dorure de la reliure. */
.livre__dos::before, .livre__dos::after {
  content: ""; position: absolute; inset-inline: 15%; height: 1px;
  background: var(--or); opacity: .6;
}
.livre__dos::before { top: .75rem; }
.livre__dos::after  { bottom: .75rem; }

/* Le titre court le long du dos, comme sur un vrai livre : UNE seule colonne.
   Sans `nowrap`, il se cassait en deux ou trois colonnes et le dos devenait
   illisible — un vrai dos n'a jamais qu'une ligne. */
.livre__titre {
  writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap;
  font-family: var(--f-display); font-weight: 700; font-size: .72rem; line-height: 1;
  color: color-mix(in oklab, var(--sur-profond) 93%, transparent);
  max-height: 72%; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.livre__auteur {
  writing-mode: vertical-rl; white-space: nowrap;
  font-family: var(--f-ui); font-weight: 300; font-size: .56rem; line-height: 1;
  color: color-mix(in oklab, var(--or) 82%, transparent);
  max-height: 20%; overflow: hidden; text-overflow: ellipsis;
}

/* Le plat s'ouvre CENTRÉ sur la tranche et déborde de part et d'autre : une
 * couverture à la largeur d'un dos serait un timbre-poste, et c'est justement
 * ce qu'on vient voir. Il tient dans le dégagement du cadre, donc rien n'est
 * rogné. */
.livre__plat {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 14.5rem; height: 20rem; z-index: 2;
  background: var(--fond-2); border: 1px solid color-mix(in oklab, var(--or) 55%, transparent);
  box-shadow: 0 34px 64px -26px rgba(0, 0, 0, .95);
  opacity: 0; scale: .8; pointer-events: none; overflow: hidden;
  transition: opacity .26s, scale .38s cubic-bezier(.2,.9,.3,1.32);
}
.rayon__case:hover .livre__plat, .rayon__case:focus-within .livre__plat { opacity: 1; scale: 1; }
/* Le dos s'efface pendant que le plat grandit — sinon la couverture aurait
   l'air posée SUR le livre au lieu d'être le livre. */
.livre__dos { transition: opacity .22s; }
.rayon__case:hover .livre__dos, .rayon__case:focus-within .livre__dos { opacity: 0; }
.livre__plat img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

.livre__legende {
  position: absolute; inset-inline: 0; bottom: 0; padding: .6rem .75rem .7rem;
  background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--profond) 94%, transparent) 38%);
  color: var(--sur-profond); display: grid; gap: .2rem;
}
.livre__legende strong { font-family: var(--f-display); font-weight: 700; font-size: .8rem; line-height: 1.45; }
.livre__legende em { font-family: var(--f-ui); font-weight: 300; font-style: normal; font-size: .68rem; opacity: .75; }

/* ══════════════════════════════════════════════════════════════════════════
 * LE BOÎTIER DE DVD — les enregistrements sur la même étagère
 *
 * Un boîtier se reconnaît sans légende, à trois choses, et toutes les trois
 * sont ici de la donnée, pas du décor :
 *
 *   · sa TRANCHE est mince et TOUJOURS LA MÊME (`tach_epaisseur()` renvoie une
 *     constante) — un enregistrement de deux heures n'est pas plus épais qu'un
 *     de dix minutes, alors qu'un volume de 600 pages l'est ;
 *   · il est PLUS COURT qu'un volume relié : 190 mm contre 240 ;
 *   · c'est du PLASTIQUE NOIR, pas du cuir teint. Le reflet vertical du
 *     polypropylène remplace la dorure du dos.
 *
 * Tout le reste — le geste d'ouverture, l'avancée au survol, le lot répété —
 * est celui du livre, sans une ligne de plus : ce sont des objets de la même
 * étagère, ils doivent se manipuler pareil.
 * ═══════════════════════════════════════════════════════════════════════ */

/* Plus court, et posé sur la même ligne de base : il a l'air rangé PARMI les
   volumes, pas devant eux. Les variantes de hauteur (`3n`, `4n+1`) sont
   neutralisées — des boîtiers de tailles différentes n'existent pas. */
.rayon__case--dvd,
.rayon__case--dvd:nth-child(3n),
.rayon__case--dvd:nth-child(4n+1) { height: calc(var(--h-livre) * .79); }
.rayon__case--dvd.rayon__case--face { width: 8.6rem; height: calc(var(--h-livre) * .79); }

/* Le dos : graphite, pas cuir. Le dégradé serré au bord gauche est le reflet
   du plastique — c'est ce qui distingue une matière brillante d'une matière
   mate à cette taille. */
.rayon__case--dvd .livre__dos {
  background: linear-gradient(90deg,
      rgba(0,0,0,.55) 0%, rgba(255,255,255,.16) 12%, rgba(255,255,255,.04) 26%,
      rgba(0,0,0,.10) 70%, rgba(0,0,0,.55) 100%), #1A1A1D;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  padding-block: .9rem;
}
/* Pas de dorure : un boîtier n'est pas relié. Deux filets clairs à la place,
   qui rendent le liseré du plastique en haut et en bas. */
.rayon__case--dvd .livre__dos::before,
.rayon__case--dvd .livre__dos::after { background: rgba(255,255,255,.28); opacity: 1; }
.rayon__case--dvd .livre__titre { font-size: .64rem; }
.rayon__case--dvd .livre__auteur { color: rgba(255,255,255,.5); }

/* La jaquette est un PORTRAIT 135×190 — pas le 3/4 d'un livre. */
.rayon__case--dvd .livre__plat { width: 12rem; height: 16.9rem; background: #101013; }

/* ── La pochette ─────────────────────────────────────────────────────────── */
.poch { position: absolute; inset: 0; display: block; overflow: hidden; background: #101013; }
.poch__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
             object-fit: cover; display: block; }
/* Le disque au trait, quand aucune image n'est déposée. Un boîtier vide reste
   un boîtier — il ne doit pas devenir un rectangle nu. */
.poch__vide { position: absolute; inset: 0; display: grid; place-items: center; }
.poch__vide svg { inline-size: 38%; block-size: auto; fill: none;
                  stroke: color-mix(in oklab, var(--or) 55%, transparent); stroke-width: 1; }

/* Le film brillant du plastique par-dessus la jaquette : une diagonale claire,
   très basse en opacité. C'est elle qui donne l'impression qu'on regarde une
   image SOUS une surface, et non une image collée. */
.poch::after { content: ""; position: absolute; inset: 0; pointer-events: none;
               background: linear-gradient(118deg,
                 rgba(255,255,255,.16) 0%, rgba(255,255,255,.03) 26%,
                 transparent 46%, transparent 100%); }

.poch__lire { position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
              translate: -50% -60%;
              inline-size: 2.6rem; block-size: 2.6rem; display: grid; place-items: center;
              border-radius: 50%; border: 1px solid rgba(255,255,255,.75);
              background: rgba(0,0,0,.34); backdrop-filter: blur(1px);
              transition: scale .25s, background .25s; }
.poch__lire svg { inline-size: 1.4rem; block-size: 1.4rem; fill: #fff; }
.rayon__case--dvd:hover .poch__lire,
.rayon__case--dvd:focus-within .poch__lire { scale: 1.12; background: rgba(0,0,0,.5); }

.poch__bande { position: absolute; inset-inline: 0; inset-block-end: 0;
               padding: 1.6rem .7rem .6rem; display: grid; gap: .15rem;
               background: linear-gradient(180deg, transparent,
                           color-mix(in oklab, #000 88%, transparent) 42%);
               color: #fff; }
.poch__bande strong { font-family: var(--f-display); font-weight: 700;
                      font-size: .74rem; line-height: 1.4;
                      display: -webkit-box; -webkit-line-clamp: 3;
                      -webkit-box-orient: vertical; overflow: hidden; }
.poch__bande em { font-family: var(--f-ui); font-weight: 300; font-style: normal;
                  font-size: .64rem; color: color-mix(in oklab, var(--or) 88%, #fff); }

/* En vitrine (le boîtier présenté de face), la jaquette est plus petite : on
   réduit ce qui deviendrait illisible plutôt que de tout laisser à l'échelle. */
.rayon__case--dvd.rayon__case--face .poch__lire { inline-size: 2rem; block-size: 2rem; }
.rayon__case--dvd.rayon__case--face .poch__lire svg { inline-size: 1.05rem; block-size: 1.05rem; }
.rayon__case--dvd.rayon__case--face .poch__bande strong { font-size: .66rem; -webkit-line-clamp: 2; }

/* Le boîtier de face n'a pas besoin du filet d'or ni de l'éclaircissement
   prévus pour les couvertures dessinées : une photographie se suffit. */
.rayon__case--dvd .livre__face { border-color: rgba(255,255,255,.22); }

/* ── L'OMBRE PORTÉE DES VOLUMES SUR LA PLANCHE ────────────────────────────
 * Sans elle, les livres sont posés SUR une ligne ; avec elle, ils sont posés
 * DANS une étagère. C'est le seul ajout qui donne de la profondeur au rayon
 * sans toucher aux livres eux-mêmes : une bande sombre étroite juste sous eux,
 * là où le volume masque la lumière.
 * Posée sur le lot et non sur chaque livre : une ombre par livre se serait
 * additionnée dans les interstices de 5 px et aurait dessiné un peigne.
 */
.rayon__lot::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1.6rem;
  background: linear-gradient(to top, rgba(0,0,0,.42), transparent);
  pointer-events: none; z-index: 1;
}
.rayon__lot { position: relative; }


/* La tablette : les livres reposent dessus, ils ne flottent pas.
   Pas de marge propre — `.rayon` porte déjà le retrait, et la cumuler
   décalait la planche par rapport aux livres qui s'y posent. */
.rayon__tablette {
  height: .8rem;
  background: linear-gradient(180deg,
      color-mix(in oklab, var(--or) 62%, transparent) 0 1px,
      color-mix(in oklab, var(--brun) 68%, transparent) 1px 42%,
      color-mix(in oklab, var(--brun) 34%, transparent) 42% 100%);
  box-shadow: 0 18px 30px -14px rgba(0,0,0,.95);
  /* Même fondu que le rayon : sans lui, la planche dépassait des livres de la
     largeur exacte du dégradé et trahissait le truquage aux deux bouts. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}

/* ── Vérification du pivot sans souris (outil, avec ?da=1) ────────────────
 * Force un livre en position ouverte pour contrôler que le plat n'est pas
 * rogné par l'`overflow: hidden` du cadre. Une capture d'écran ne survole
 * rien : sans ça, la géométrie du débordement ne se vérifie qu'à l'œil, sur
 * la machine du client.
 */
.rayon__case.est-ouvert { z-index: 6; }
.rayon__case.est-ouvert .livre { translate: 0 -.9rem; }
.rayon__case.est-ouvert .livre__plat { opacity: 1; scale: 1; }
.rayon__case.est-ouvert .livre__dos { opacity: 0; }
.da-outils .rayon__piste { animation: none; }

/* Même raison pour le menu : une capture d'écran ne survole rien. Avec ?da=1,
   le deuxième déroulé est ouvert d'office, ce qui permet de vérifier qu'aucun
   ancêtre ne le rogne — c'est exactement le défaut qu'un `overflow` posé sur
   `.nav` avait introduit. */
.da-outils .nav > ul > li:nth-child(2) > .sub-menu {
  opacity: 1; visibility: visible; translate: 0 0;
}

@media (max-width: 62rem) {
  /* Sur mobile : plus de défilement automatique ni de 3D — on fait glisser au
     doigt. Le pivot au survol n'a de toute façon pas de sens au tactile. */
  .rayon__cadre { perspective: none; padding-block: 1.5rem .35rem;
                  overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .rayon__piste { animation: none; }
  .rayon__case:hover .livre, .rayon__case:focus-within .livre { transform: translateY(-.6rem); }
  .livre__plat { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rayon__piste { animation: none; }
  .rayon__cadre { overflow-x: auto; }
}

/* ============================================================================
 * « اسأل تشمشه » — la barre de question, sous le rayon
 *
 * L'animation ne dit pas « IA » avec des circuits et des cerveaux bleus : elle
 * dit ce que le système FAIT. Des grains descendent du rayon vers la barre —
 * c'est la récupération : la réponse est tirée des livres. Puis un halo tourne
 * autour du champ pendant qu'il cherche.
 *
 * Pourquoi pas Lottie : le lecteur pèse ~50–60 Ko de JS avant le premier
 * pixel, plus le JSON. Le public visé est en 3G mauritanienne — on paierait le
 * « wow » avec le temps de chargement, donc on le perdrait. Tout ce qui suit
 * tient en CSS et s'anime sur le compositeur.
 * ========================================================================== */

/* ── La carte « اسأل الخزانة » ──────────────────────────────────────────────
 * Traitée comme un OBJET PRÉCIEUX, pas comme un widget : cartouche à double
 * filet d'or et écoinçons aux quatre angles — le cadre d'un frontispice de
 * manuscrit. C'est le vocabulaire du fonds lui-même.
 *
 * Ce qui donne de la valeur ici, c'est l'encadrement et la retenue, pas le
 * mouvement : l'ancien noyau à orbites attirait l'œil sans rien dire du
 * contenu, et sur un site de patrimoine une animation « technologique » sonne
 * emprunté. Retiré.
 */
.ask {
  position: relative; isolation: isolate;
  max-width: 44rem; margin: 3.5rem auto 0;
  padding: clamp(1.6rem, 3.5vw, 2.4rem) clamp(1.4rem, 4vw, 2.6rem) clamp(1.4rem, 3vw, 1.9rem);
  text-align: center;
  /* ── LA CARTE EST UN PARCHEMIN, PAS UN PANNEAU SOMBRE ────────────────────
   * Elle était en indigo assombri sur l'indigo du hero : du bleu foncé sur du
   * bleu foncé, séparés par un seul filet d'or. Elle ne se détachait pas, et
   * le seul geste que le visiteur doit faire — poser une question — se
   * fondait dans le décor.
   *
   * Elle passe donc en clair. Ce n'est pas un contraste arbitraire : le fonds
   * est fait de PAPIER, et une carte de papier posée sur la salle sombre est
   * exactement le rapport qu'entretiennent un manuscrit et la pièce où on le
   * consulte. L'or y redevient ce qu'il est ailleurs — un filet sur du clair,
   * comme sur un frontispice — au lieu d'un liseré lumineux sur du noir.
   */
  background:
    radial-gradient(130% 120% at 50% -20%, color-mix(in oklab, #fff 55%, var(--fond-2)) 0%, transparent 70%),
    var(--fond-2);
  color: var(--encre);
  border: 1px solid color-mix(in oklab, var(--brun) 34%, transparent);
  box-shadow: 0 44px 84px -40px #000,
              0 2px 0 color-mix(in oklab, var(--or) 40%, transparent),
              inset 0 1px 0 #fff;
  transition: border-color .3s, box-shadow .3s;
}
.ask:focus-within { border-color: color-mix(in oklab, var(--or) 68%, transparent);
                    box-shadow: 0 50px 90px -38px #000,
                                0 2px 0 var(--or), inset 0 1px 0 #fff; }

/* Le second filet, en retrait — la double réglure du cartouche. */
.ask::before {
  content: ""; position: absolute; inset: .5rem; pointer-events: none;
  border: 1px solid color-mix(in oklab, var(--or) 22%, transparent);
}

/* Les écoinçons : deux traits d'or à chaque angle du filet intérieur. */
.ask__coin { position: absolute; width: .85rem; height: .85rem; pointer-events: none;
             border: 0 solid var(--or); opacity: .7; }
.ask__coin:nth-child(1) { top: .5rem;  left: .5rem;  border-top-width: 1px; border-left-width: 1px; }
.ask__coin:nth-child(2) { top: .5rem;  right: .5rem; border-top-width: 1px; border-right-width: 1px; }
.ask__coin:nth-child(3) { bottom: .5rem; left: .5rem;  border-bottom-width: 1px; border-left-width: 1px; }
.ask__coin:nth-child(4) { bottom: .5rem; right: .5rem; border-bottom-width: 1px; border-right-width: 1px; }

.ask__titre { font-family: var(--f-display); font-weight: 700; font-size: 1.35rem;
              margin: 0 0 .4rem; }
/* Sur le parchemin, la baseline s'écrit à l'encre pâlie — plus en ivoire
   translucide, qui était fait pour le fond sombre d'avant. */
.ask__sous  { font-family: var(--f-ui); font-weight: 300; font-size: .82rem; line-height: 1.75;
              max-width: 40ch; margin: 0 auto 1.4rem;
              color: color-mix(in oklab, var(--encre) 66%, transparent); }

.ask__ligne {
  position: relative; display: flex; align-items: stretch;
  /* Le champ est maintenant sur du clair : il lui faut sa propre valeur, sinon
     il disparaît dans la carte. Le blanc franc le creuse. */
  background: #fff;
  border: 1px solid color-mix(in oklab, var(--or) 40%, transparent);
  border-bottom-width: 3px; border-bottom-color: var(--or);
  transition: box-shadow .25s;
}

/* Le halo tournant, seulement quand le champ est actif : une aura permanente
   deviendrait un papier peint qu'on ne voit plus au bout de dix secondes. */
@property --tour { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.ask__ligne::before {
  content: ""; position: absolute; inset: -2px; z-index: -1;
  background: conic-gradient(from var(--tour),
      transparent 0 62%, color-mix(in oklab, var(--or) 85%, transparent) 78%,
      var(--or) 86%, transparent 96% 100%);
  opacity: 0; transition: opacity .3s;
  animation: tour 3.2s linear infinite;
}
@keyframes tour { to { --tour: 360deg; } }
.ask__ligne:focus-within::before { opacity: 1; }
.ask__ligne:focus-within { box-shadow: 0 22px 50px -30px rgba(0,0,0,1); }

.ask__champ { flex: 1 1 auto; min-width: 0; border: 0; background: transparent;
              font-family: var(--f-ui); font-weight: 300; font-size: 1rem; color: var(--encre);
              padding: 1.15rem 1rem; }
.ask__champ::placeholder { color: color-mix(in oklab, var(--encre) 46%, transparent); }
.ask__champ:focus { outline: none; }

.ask__envoi { flex: none; border: 0; cursor: pointer; background: var(--profond-2); color: var(--sur-profond);
              font-family: var(--f-ui); font-size: .9rem; padding-inline: 1.6rem; transition: background .18s; }
.ask__envoi:hover { background: color-mix(in oklab, var(--profond-2) 74%, var(--or)); }

.ask__pastilles { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
                  margin: 1.1rem 0 0; list-style: none; padding: 0; }
.ask__pastille { font-family: var(--f-ui); font-weight: 300; font-size: .78rem; cursor: pointer;
                 color: var(--glose); background: transparent;
                 border: 1px solid color-mix(in oklab, var(--brun) 34%, transparent);
                 padding: .42rem .8rem; transition: background .18s, border-color .18s, translate .18s; }
.ask__pastille:hover { background: color-mix(in oklab, var(--or) 15%, transparent);
                       border-color: var(--or); color: var(--brun); translate: 0 -2px; }

.ask__note { font-family: var(--f-ui); font-weight: 300; font-size: .72rem; text-align: center;
             margin: 1.1rem 0 0; letter-spacing: .04em; color: var(--glose); }

/* ══════════════════════════════════════════════════════════════════════════
 * DANS LE HERO : PAS DE CARTE. La zone est posée à même le fond.
 *
 * La carte de parchemin est retirée ici — plus de fond, plus de filets, plus
 * d'écoinçons, plus d'ombre portée. Elle ajoutait un rectangle dans une page
 * qui en aligne déjà trois (l'en-tête, le rayon, la tablette), et le regard
 * finissait par compter des cadres au lieu de voir le champ.
 *
 * Ce qui reste flotte : le TITRE, écrit dans la lumière du hero, et la LIGNE
 * DE SAISIE, seul objet de la page à avoir du relief. Le contraste fait le
 * travail que faisait le cadre — et mieux, parce qu'il désigne un endroit au
 * lieu d'en délimiter un.
 *
 * ⚠️ EXCEPTION ASSUMÉE À LA CHARTE, et bornée à cette zone : angles ARRONDIS
 * et OMBRES PORTÉES, là où le reste du site tient les angles vifs et les
 * filets. C'est une demande explicite du client (« angles arrondis et
 * flottante »). La règle générale ne bouge pas — hors du hero, rien n'est
 * arrondi. Si l'exception devait s'étendre, c'est la charte qu'il faudrait
 * rouvrir, pas cette section qu'il faudrait copier.
 * ═══════════════════════════════════════════════════════════════════════ */
.ask--hero {
  background: none; border: 0; box-shadow: none; padding-inline: 0;
  padding-block: 0; max-width: 46rem; color: var(--sur-profond);
  /* Même raison qu'au dégagement du hero : en `vh`, pour que les trois amorces
     restent visibles sans défiler sur un écran bas. */
  margin-top: clamp(1.3rem, 3.6vh, 3.5rem);
}
.ask--hero::before { content: none; }   /* le second filet du cartouche */
.ask--hero:focus-within { box-shadow: none; border-color: transparent; }

/* Le titre s'écrit dans la lumière. Une ombre douce le décolle de l'image :
   sans elle, une zone claire du fond suffit à le faire disparaître. */
.ask--hero .ask__titre {
  font-size: clamp(1.15rem, 2.6vw, 1.55rem); font-weight: 700;
  color: var(--sur-profond); margin-bottom: .5rem;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.ask--hero .ask__sous {
  color: color-mix(in oklab, var(--sur-profond) 74%, transparent);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
  margin-bottom: clamp(.85rem, 2.2vh, 1.5rem);
}

/* ── LA LIGNE DE SAISIE : le seul objet en relief de la page ──────────────
 * Le relief ne vient pas d'une ombre unique mais de quatre couches, et c'est
 * ce qui fait la différence entre « posé » et « collé » :
 *   1. une ombre de CONTACT, courte et dense, juste sous l'objet ;
 *   2. une ombre de PORTÉE, longue et diffuse, qui donne la hauteur ;
 *   3. un liseré clair sur l'arête haute — la lumière qui frappe le dessus ;
 *   4. un liseré sombre sous l'arête basse — l'épaisseur vue de face.
 * Une seule ombre large aurait fait une tache ; ces quatre-là font un objet.
 */
.ask--hero .ask__ligne {
  background: color-mix(in oklab, #fff 94%, var(--fond-2));
  border: 0; border-radius: 999px;
  /* ⚠️ `padding-inline-start`, pas un raccourci physique. En RTL le champ est
     à DROITE et le bouton à gauche ; un `padding-left` collait donc le texte
     saisi contre l'arête du côté où il commence. */
  padding: .3rem; padding-inline-start: 1.5rem;
  box-shadow:
    0 2px 6px rgba(10, 14, 24, .28),
    0 22px 44px -18px rgba(10, 14, 24, .55),
    inset 0 1px 0 #fff,
    inset 0 -1px 0 color-mix(in oklab, var(--brun) 22%, transparent);
  transition: box-shadow .28s cubic-bezier(.2,.7,.2,1), translate .28s cubic-bezier(.2,.7,.2,1);
}
/* Au focus l'objet MONTE : l'ombre s'allonge et se dilue, comme une chose
   qu'on soulève. C'est le même geste que le survol des cartes de مجموعة. */
.ask--hero .ask__ligne:focus-within {
  translate: 0 -3px;
  box-shadow:
    0 3px 8px rgba(10, 14, 24, .26),
    0 34px 60px -20px rgba(10, 14, 24, .6),
    0 0 0 3px color-mix(in oklab, var(--or) 34%, transparent),
    inset 0 1px 0 #fff;
}
/* Le halo tournant appartenait au cartouche : sur un objet arrondi et flottant
   il ferait un gyrophare. Le liseré d'or au focus dit la même chose, plus bas. */
.ask--hero .ask__ligne::before { content: none; }

.ask--hero .ask__champ { color: var(--encre); padding: .95rem .2rem; }
.ask--hero .ask__champ::placeholder { color: color-mix(in oklab, var(--encre) 42%, transparent); }

.ask--hero .ask__envoi {
  border-radius: 999px; padding-inline: 1.7rem; padding-block: .78rem;
  background: var(--profond); color: var(--sur-profond);
  box-shadow: 0 1px 0 color-mix(in oklab, #fff 30%, transparent) inset,
              0 4px 12px -4px rgba(10, 14, 24, .7);
  transition: background .18s, translate .18s;
}
.ask--hero .ask__envoi:hover { background: var(--profond-2); translate: 0 -1px; }

/* Les amorces : du verre sur l'image. Assez de fond pour rester lisibles
   au-dessus d'une zone claire, assez peu pour ne pas redevenir des boutons. */
.ask--hero .ask__pastille {
  margin-top: clamp(.75rem, 1.8vh, 1.1rem);
  border-radius: 999px; color: color-mix(in oklab, var(--sur-profond) 88%, transparent);
  background: color-mix(in oklab, #000 26%, transparent);
  border-color: color-mix(in oklab, var(--sur-profond) 26%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px -8px rgba(10, 14, 24, .7);
}
.ask--hero .ask__pastille:hover {
  color: var(--sur-profond); background: color-mix(in oklab, #000 40%, transparent);
  border-color: color-mix(in oklab, var(--or) 70%, transparent);
}
.ask--hero .ask__note { color: color-mix(in oklab, var(--sur-profond) 60%, transparent); }

/* ── La portée : toute la خزانة, ou un ouvrage ───────────────────────────
 * Rendue visible parce qu'elle est le contrôle du lecteur sur le
 * cloisonnement : on ne se contente pas de promettre que les livres ne se
 * mélangent pas, on lui donne le moyen de restreindre lui-même.
 */
.ask__portee { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem;
               margin: 0 0 1.1rem; }
.ask__cible { font-family: var(--f-ui); font-weight: 300; font-size: .72rem; cursor: pointer;
              background: transparent; color: color-mix(in oklab, var(--sur-profond) 62%, transparent);
              border: 1px solid color-mix(in oklab, var(--sur-profond) 22%, transparent);
              padding: .3rem .7rem; max-width: 15rem; overflow: hidden;
              text-overflow: ellipsis; white-space: nowrap;
              transition: color .18s, border-color .18s, background .18s; }
.ask__cible:hover { color: var(--sur-profond); border-color: color-mix(in oklab, var(--or) 55%, transparent); }
.ask__cible.est-active { color: var(--profond); background: var(--or); border-color: var(--or); }

/* ── La réponse ─────────────────────────────────────────────────────────── */

.reponse { text-align: start; }
/* ⚠️ Toute cette zone s'écrit sur le PARCHEMIN de la carte, pas sur du sombre.
   Elle avait gardé les couleurs d'avant — `--sur-profond`, l'ivoire fait pour
   le fond foncé — et la réponse sortait donc ivoire sur ivoire : invisible.
   La règle : ici, l'encre est `--encre`, jamais `--sur-profond`. */
.reponse__texte { margin: 0 0 .8rem; font-size: 1.02rem; line-height: 1.95;
                  color: var(--encre); }
.reponse__texte strong { font-weight: 700; color: var(--brun); }

/* Les points d'attente — trois, dans le rythme d'un calame qui court. */
.reponse--attente { display: flex; align-items: center; gap: .7rem; }
.reponse--attente .reponse__texte { margin: 0; opacity: .7; }
.reponse__points { flex: none; width: 2.4rem; height: .35rem; position: relative; }
.reponse__points::before, .reponse__points::after,
.reponse--attente .reponse__points { }
.reponse__points {
  background:
    radial-gradient(circle 3px at 3px 50%,  var(--or) 98%, transparent) 0    0/1rem 100% no-repeat,
    radial-gradient(circle 3px at 3px 50%,  var(--or) 98%, transparent) .7rem 0/1rem 100% no-repeat,
    radial-gradient(circle 3px at 3px 50%,  var(--or) 98%, transparent) 1.4rem 0/1rem 100% no-repeat;
  animation: pointille 1.1s ease-in-out infinite;
}
@keyframes pointille { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* Une source = un LIVRE et une page. Jamais une page seule : sur une
   bibliothèque de plusieurs ouvrages, « صفحة ٢٣٤ » ne veut rien dire. */
.reponse__sources { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
                    margin: 1rem 0 0; }
.reponse__label { font-family: var(--f-ui); font-weight: 300; font-size: .72rem;
                  color: color-mix(in oklab, var(--encre) 55%, transparent); }
.source { display: inline-flex; align-items: baseline; gap: .45rem; text-decoration: none;
          font-family: var(--f-ui); font-weight: 300; font-size: .72rem;
          color: var(--encre); padding: .25rem .6rem;
          border: 1px solid color-mix(in oklab, var(--brun) 34%, transparent);
          transition: background .18s, border-color .18s; }
.source:hover { background: color-mix(in oklab, var(--or) 14%, transparent); border-color: var(--or); }
.source__kitab { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source__page { color: var(--glose); white-space: nowrap; }

/* Les relances : c'est ici, sous la réponse, que le fil repart. Les amorces
   d'en-tête ont disparu à la première question (cf. assets/ask.js) — elles
   ouvraient, elles n'accompagnent pas. */
.reponse__suivantes { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
                      list-style: none; margin: 1.1rem 0 0; padding: 0; }
.reponse__suivantes__l { font-family: var(--f-ui); font-weight: 300; font-size: .72rem;
                         color: color-mix(in oklab, var(--encre) 55%, transparent);
                         margin-inline-end: .2rem; }

.reponse__signaler { display: block; margin: 1.1rem 0 0; padding: 0; cursor: pointer;
                     background: none; border: 0; font-family: var(--f-ui); font-weight: 300;
                     font-size: .7rem; text-decoration: underline; text-underline-offset: .25em;
                     color: color-mix(in oklab, var(--encre) 48%, transparent); }
.reponse__signaler:hover:not([disabled]) { color: var(--brun); }
.reponse__signaler[disabled] { cursor: default; text-decoration: none; opacity: .6; }

.reponse--erreur .reponse__texte,
.reponse--demo .reponse__texte { color: color-mix(in oklab, var(--encre) 70%, transparent);
                                 font-size: .95rem; }

/* ============================================================================
 * Sections
 * ========================================================================== */

.section { padding-block: clamp(3rem, 6.5vw, 5rem); }
.section--pale { background: var(--fond-2); border-block: var(--filet); }

.section__tete { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 2rem; }
.section__titre { font-size: clamp(1.3rem, 2.9vw, 1.85rem); white-space: nowrap; }
.section__filet { flex: 1 1 auto; height: 1px; background: var(--or); opacity: .45;
                  scale: 0 1; transform-origin: right; transition: scale .9s cubic-bezier(.2,.7,.2,1); }
.est-visible .section__filet { scale: 1 1; }
.section__lien { font-family: var(--f-ui); font-weight: 300; font-size: .82rem; white-space: nowrap;
                 text-decoration: none; }

/* ══════════════════════════════════════════════════════════════════════════
 * أبواب المعرفة — les domaines de savoir, en cartes transparentes
 *
 * Geste emprunté à « مرافقنا » d'ithra : une carte SANS FOND, dont le contour
 * est une squircle tracée en SVG. C'est le même chemin que les 23 مجموعات
 * (`#tach-squircle`), déposé une fois et référencé — pas un second tracé.
 *
 * Pourquoi une squircle et pas `border-radius` : un `border-radius` raccorde
 * un arc de cercle à une droite, et la cassure de courbure se voit. La
 * superellipse n'en a pas. C'est tout l'écart entre « pastille » et « contour
 * dessiné ».
 *
 * ── La section est CLAIRE, et c'est un choix ──────────────────────────────
 * Chez ithra ces cartes sont posées sur une photographie sombre. Ici le hero
 * juste au-dessus est déjà de l'indigo plein ; enchaîner une seconde surface
 * sombre ferait deux écrans de bleu à la suite — exactement ce qu'on a retiré
 * du hero parce que ça pesait. Sur le clair, le contour se lit en brun et
 * l'or reste pour le survol, où il désigne la carte visée.
 *
 * ── Le remplissage au survol ──────────────────────────────────────────────
 * C'est LE MÊME CHEMIN qui se remplit, pas un rectangle posé derrière. Un fond
 * rectangulaire sous un contour arrondi laisse voir ses quatre coins dépasser
 * dans les angles ; on l'a vu sur les cartes de مجموعة avant de passer par le
 * `<use>`.
 * ═══════════════════════════════════════════════════════════════════════ */

.abwab {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(.9rem, 2vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}

.bab {
  position: relative; display: grid; place-items: center; align-content: center;
  gap: .1rem; aspect-ratio: 1; padding: 1rem .7rem;
  text-align: center; text-decoration: none; color: var(--encre);
  transition: translate .3s cubic-bezier(.2,.7,.2,1), color .25s;
}
.bab:hover, .bab:focus-visible { translate: 0 -4px; }

/* Le contour. `non-scaling-stroke` : le SVG est mis à l'échelle de la carte,
   et sans lui le filet grossirait avec elle — il doit rester à 1 px, comme
   tous les filets du site. */
.bab__forme {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
  pointer-events: none; overflow: visible;
}
.bab__forme use {
  fill: transparent; stroke: color-mix(in oklab, var(--brun) 38%, transparent);
  stroke-width: 1; vector-effect: non-scaling-stroke;
  transition: fill .3s, stroke .3s;
}
.bab:hover .bab__forme use, .bab:focus-visible .bab__forme use {
  fill: color-mix(in oklab, var(--or) 10%, transparent);
  stroke: var(--or);
}

/* L'icône est un TRAIT, jamais un aplat : la charte réserve l'or au filet et
   au lien, et une icône pleine en ferait une surface. */
.bab__icone {
  inline-size: clamp(1.9rem, 4.5vw, 2.5rem); block-size: auto; margin-bottom: .55rem;
  fill: none; stroke: color-mix(in oklab, var(--brun) 80%, transparent);
  stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .25s, scale .3s cubic-bezier(.2,.7,.2,1);
}
.bab:hover .bab__icone, .bab:focus-visible .bab__icone { stroke: var(--or); scale: 1.06; }

.bab__nom { font-family: var(--f-display); font-weight: 700;
            font-size: clamp(.82rem, 1.6vw, .95rem); line-height: 1.4;
            text-wrap: balance; }
.bab__n { font-family: var(--f-ui); font-weight: 300; font-size: .7rem;
          color: var(--glose); }

/* Sur « السَّمَر », tout le site est sombre : le contour brun s'y éteint. On le
   relève, comme les filets ailleurs dans cette palette. */
:root[data-palette="samar"] .bab__forme use {
  stroke: color-mix(in oklab, var(--sur-profond) 22%, transparent);
}
:root[data-palette="samar"] .bab__icone {
  stroke: color-mix(in oklab, var(--sur-profond) 62%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════════
 * LES LISTES — archives de type et de taxonomie (archive.php)
 *
 * L'en-tête reprend la mécanique du titre de section : un filet d'or qui court
 * sous la ligne. Ce n'est pas une décoration reportée — c'est la marque que le
 * site pose partout où quelque chose COMMENCE, et une page de liste commence.
 * ═══════════════════════════════════════════════════════════════════════ */

.liste { padding-block: clamp(2rem, 5vw, 3.5rem); }

.liste__tete { margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
               padding-bottom: 1.1rem; border-bottom: var(--filet); }
.liste__sur { font-family: var(--f-ui); font-weight: 300; font-size: .74rem;
              letter-spacing: .1em; color: var(--glose); margin: 0 0 .35rem; }
.liste__titre { font-size: clamp(1.6rem, 3.8vw, 2.4rem); margin: 0; line-height: 1.25; }
.liste__chapeau { max-width: var(--mesure); margin: .9rem 0 0;
                  line-height: var(--lh-texte); color: color-mix(in oklab, var(--encre) 78%, transparent); }
.liste__compte { font-family: var(--f-ui); font-weight: 300; font-size: .8rem;
                 color: var(--glose); margin: .6rem 0 0; }

/* ── Le filtre ────────────────────────────────────────────────────────────
   Les `<select>` reprennent `.ask__select`, déjà écrit pour le parchemin de
   l'assistant : même objet, même dessin. Ce qui s'ajoute ici, c'est la
   disposition — et le libellé AU-DESSUS du champ, jamais à côté : en arabe
   les libellés sont longs et une mise en ligne les fait tous tomber de
   travers dès que l'un dépasse. */
.liste__filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem;
                  margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem); }
.liste__filtre { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.liste__filtre__l { font-family: var(--f-ui); font-weight: 300; font-size: .74rem;
                    color: var(--glose); }
.liste__filtres .ask__select { max-width: min(20rem, 46vw); }

.liste__go { font-family: var(--f-ui); font-size: .82rem; cursor: pointer;
             color: var(--sur-profond); background: var(--profond);
             border: 0; padding: .62rem 1.4rem; transition: background .18s; }
.liste__go:hover { background: var(--profond-2); }
.liste__raz { font-family: var(--f-ui); font-weight: 300; font-size: .78rem;
              align-self: center; }

.liste__vide { padding: 3rem 1.5rem; text-align: center; border: var(--filet);
               background: var(--fond-2); color: var(--glose); }

/* ── Les notices sans couverture (أعلام · أماكن · أنشطة · وسائط) ──────────
   Une seule colonne, mesure tenue : ici c'est du TEXTE qui identifie, et un
   texte se lit sur soixante-dix signes, pas sur la largeur de l'écran. */
.notices { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.notice { display: flex; gap: 1.2rem; align-items: flex-start;
          padding-block: 1.4rem; border-bottom: var(--filet); }
.notice:first-child { border-top: var(--filet); }
.notice__vue { flex: none; inline-size: 5.5rem; }
.notice__vue img { display: block; inline-size: 100%; block-size: auto;
                   border: var(--filet); }
.notice__corps { min-inline-size: 0; max-width: var(--mesure); }
.notice__titre { font-family: var(--f-display); font-weight: 700;
                 font-size: 1.08rem; line-height: 1.5; margin: 0; }
.notice__titre a { color: var(--encre); text-decoration: none; transition: color .18s; }
.notice__titre a:hover { color: var(--profond-2); box-shadow: 0 1px 0 var(--or); }
.notice__texte { margin: .45rem 0 0; font-size: .92rem; line-height: 1.8;
                 color: color-mix(in oklab, var(--encre) 72%, transparent); }
/* Les mêmes séparateurs que `.fonds__meta` : une ligne de faits, séparés d'un
   point médian, jamais des étiquettes empilées. */
.notice__meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: .5rem 0 0;
                font-family: var(--f-ui); font-weight: 300; font-size: .76rem;
                color: var(--glose); }
.notice__meta span + span::before { content: "·"; margin-inline-end: .9rem;
                                    color: color-mix(in oklab, var(--brun) 45%, transparent); }

/* ── La pagination ──────────────────────────────────────────────────────── */
.pages { margin-top: clamp(2rem, 5vw, 3rem); }
.pages .screen-reader-text { position: absolute; width: 1px; height: 1px;
                             overflow: hidden; clip-path: inset(50%); }
.pages .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.pages .page-numbers { font-family: var(--f-ui); font-weight: 300; font-size: .84rem;
                       min-inline-size: 2.3rem; padding: .5rem .7rem; text-align: center;
                       text-decoration: none; color: var(--encre);
                       border: 1px solid color-mix(in oklab, var(--brun) 30%, transparent);
                       transition: background .18s, border-color .18s, color .18s; }
.pages a.page-numbers:hover { border-color: var(--or);
                              background: color-mix(in oklab, var(--or) 12%, transparent); }
.pages .page-numbers.current { color: var(--sur-profond); background: var(--profond);
                               border-color: var(--profond); }
.pages .page-numbers.dots { border-color: transparent; }

/* ══════════════════════════════════════════════════════════════════════════
 * LES FICHES sans gabarit propre (single.php) — عَلَم · مكان · وسيط · نشاط
 *
 * Deux colonnes quand il y a une image, une seule sinon — et la notice tient
 * la MESURE. C'est le point : une biographie est du texte suivi, et le stub la
 * jetait sur toute la largeur de l'écran, où l'œil perd la ligne au retour.
 * ═══════════════════════════════════════════════════════════════════════ */

.fiche { padding-block: clamp(2rem, 5vw, 3.5rem); }

.fiche__tete { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: start; }
@media (min-width: 48rem) {
  .fiche__tete:has(.fiche__vue) { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
}
/* `inline-size: auto` et non `100%` — la règle qui interdit d'AGRANDIR.
 *
 * La colonne fait 15rem (240 px). Le portrait de ولد الأمير, seul exemplaire
 * que le client a autorisé, fait 120×151 : étiré à 240 px il devenait une
 * bouillie, à l'endroit le plus regardé de la fiche. Une petite image nette
 * vaut mieux qu'une grande floue — et le vide à côté d'elle dit la vérité :
 * il manque un original correct. Une image plus grande, elle, remplira la
 * colonne d'elle-même. */
.fiche__vue { justify-self: start; }
.fiche__vue img { display: block; inline-size: auto; max-inline-size: 100%;
                  block-size: auto; border: var(--filet); }

.fiche__sur { font-family: var(--f-ui); font-weight: 300; font-size: .74rem;
              letter-spacing: .1em; margin: 0 0 .4rem; }
.fiche__sur a { color: var(--glose); text-decoration: none; }
.fiche__sur a:hover { color: var(--brun); box-shadow: 0 1px 0 var(--or); }

.fiche__titre { font-size: clamp(1.7rem, 4vw, 2.5rem); margin: 0; line-height: 1.25;
                text-wrap: balance; }

.fiche__liens { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0 0; }
.fiche__mj { font-family: var(--f-ui); font-weight: 300; font-size: .74rem;
             text-decoration: none; color: var(--glose); padding: .28rem .7rem;
             border: 1px solid color-mix(in oklab, var(--brun) 30%, transparent);
             transition: border-color .18s, color .18s, background .18s; }
.fiche__mj:hover { color: var(--brun); border-color: var(--or);
                   background: color-mix(in oklab, var(--or) 12%, transparent); }

.fiche__texte { max-width: var(--mesure); margin-top: 1.3rem;
                line-height: var(--lh-texte); }
.fiche__texte p { margin: 0 0 1.1rem; }
.fiche__texte a { color: var(--or); }

.fiche__vide { margin-top: 1.3rem; padding: 1.5rem; border: var(--filet);
               background: var(--fond-2); color: var(--glose); }

.fiche__oeuvres { margin-top: clamp(2.5rem, 6vw, 4rem); }

/* ── Précédent / suivant ─────────────────────────────────────────────────── */
.fiche__nav { display: grid; gap: .8rem; margin-top: clamp(2.5rem, 6vw, 4rem);
              padding-top: 1.4rem; border-top: var(--filet); }
@media (min-width: 40rem) { .fiche__nav { grid-template-columns: 1fr 1fr; } }
.fiche__nav__l { display: flex; flex-direction: column; gap: .25rem;
                 text-decoration: none; padding: .9rem 1.1rem;
                 border: 1px solid color-mix(in oklab, var(--brun) 26%, transparent);
                 transition: border-color .2s, background .2s; }
.fiche__nav__l:hover { border-color: var(--or);
                       background: color-mix(in oklab, var(--or) 8%, transparent); }
.fiche__nav__l span { font-family: var(--f-ui); font-weight: 300; font-size: .72rem;
                      color: var(--glose); }
.fiche__nav__l strong { font-family: var(--f-display); font-weight: 700;
                        font-size: .95rem; line-height: 1.5; color: var(--encre); }
/* Le précédent se range du côté d'où l'on vient : en RTL, à gauche. */
.fiche__nav__l--p { text-align: end; }

/* ── Le fonds : de vraies couvertures ────────────────────────────────────── */

.fonds { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.25rem 1.75rem;
         grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.fonds__item { display: flex; flex-direction: column; gap: .75rem; }
.fonds__vue { position: relative; display: block; }
/* Le volume est suggéré par un filet décalé — l'épaisseur d'un livre posé —,
   pas par une ombre portée générique. */
.fonds__vue::after { content: ""; position: absolute; inset-block: .4rem -.4rem; inset-inline: -.4rem .4rem;
                     border: var(--filet); z-index: -1; transition: inset .25s; }
.fonds__item:hover .fonds__vue::after { inset-block: .7rem -.7rem; inset-inline: -.7rem .7rem;
                                        border-color: var(--or); }
.fonds__img { display: block; width: 100%; aspect-ratio: 3 / 4.2; object-fit: cover; object-position: top;
              background: var(--fond-2); border: var(--filet); filter: saturate(.9); }
.fonds__titre { font-family: var(--f-display); font-weight: 700; font-size: 1.02rem; line-height: 1.5; margin: 0; }
.fonds__titre a { color: var(--encre); text-decoration: none; transition: color .18s; }
.fonds__titre a:hover { color: var(--profond-2); box-shadow: 0 1px 0 var(--or); }
.fonds__meta { font-family: var(--f-ui); font-weight: 300; font-size: .74rem; margin: 0;
               /* 66 %, mesuré — pas 58 %. À 58 % la ligne de faits tombait
                  entre 4,11 et 4,45:1 selon la palette, sous le seuil AA de
                  4,5 exigé pour ce corps (≈11,5 px). À 66 % : 5,31 à 6,73
                  sur les cinq. Voir CHARTE.md § 7. */
               color: color-mix(in oklab, var(--encre) 66%, transparent);
               display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem; }

/* Le statut d'accès est une INFORMATION. Aucun rouge : « مقيّد » se dit par un
   trait tireté, pas par une alarme. */
.acces { font-family: var(--f-ui); font-weight: 300; font-size: .68rem; padding: .1rem .45rem;
         border: 1px solid; letter-spacing: .02em; }
.acces--libre        { color: var(--vert);  border-color: color-mix(in oklab, var(--vert) 45%, transparent); }
/* `--glose` et non `--brun` : sur « السَّمَر », le brun tombait à 3,69:1 sur le
   fond des cartes — le seul niveau d'accès réellement porté par le fonds
   aujourd'hui, illisible sur la palette sombre. Le glose passe partout
   (5,60 à 7,30) et, sur « النيلة », il est à un cheveu du brun : #6E5325 contre
   #6B4A2F. On corrige donc sans rien changer à la palette validée. */
.acces--consultation { color: var(--glose); border-color: color-mix(in oklab, var(--glose) 45%, transparent); }
.acces--restricted   { color: var(--glose); border-style: dashed;
                       border-color: color-mix(in oklab, var(--glose) 55%, transparent); }

/* ══════════════════════════════════════════════════════════════════════════
 * LA FICHE D'UN وسيط — le lecteur, puis de quoi citer
 *
 * Une seule colonne jusqu'à 60rem : le lecteur pleine largeur, la notice, la
 * bandelette. Au-delà, la notice et la bandelette se mettent côte à côte —
 * mais la notice garde `--mesure`, sinon elle s'étirerait à mesure que
 * l'écran grandit et redeviendrait illisible, ce qui est précisément le
 * défaut qu'`archive.php` avait corrigé.
 * ═══════════════════════════════════════════════════════════════════════ */

.fiche--wasit .fiche__sur { display: flex; align-items: center; gap: .6rem; }
/* Le type de vidéo se lit comme une ÉTIQUETTE, pas comme un fil d'Ariane :
   « الوسائط » est un lieu où l'on peut aller, « محاضرة » est un fait. */
.fiche__sur__n { color: var(--glose); }
.fiche__sur__n::before { content: "·"; margin-inline-end: .6rem; }

.wasit__mutahaddith { font-family: var(--f-ui); font-weight: 300; font-size: .92rem;
                      margin: .8rem 0 0; color: var(--glose); }
.wasit__mutahaddith .ui { font-size: .74rem; letter-spacing: .08em;
                          margin-inline-end: .6rem; }
.wasit__mutahaddith a { color: var(--encre); text-decoration: none;
                        box-shadow: 0 1px 0 var(--or); }
.wasit__mutahaddith a:hover { color: var(--profond-2); }

/* ── Le lecteur ───────────────────────────────────────────────────────────
 * Encadré d'un filet, pas d'une ombre : c'est la règle de la maison (angles
 * vifs, filets — PROPOSITION § 4.4). `aspect-ratio` plutôt que le vieux
 * padding-bottom : l'iframe se dimensionne toute seule et ne saute pas au
 * chargement. */
.wasit__lecteur { margin-top: clamp(1.4rem, 3vw, 2rem); border: var(--filet);
                  background: var(--profond); }
.wasit__lecteur iframe { display: block; inline-size: 100%; aspect-ratio: 16 / 9;
                         border: 0; }

/* La notice-fantôme d'un enregistrement restreint. Aucun rouge, aucun cadenas :
   le trait tireté dit « fermé » comme partout ailleurs sur le site. */
.wasit__ferme { margin-top: clamp(1.4rem, 3vw, 2rem); padding: clamp(1.5rem, 4vw, 2.4rem);
                border: 1px dashed color-mix(in oklab, var(--glose) 55%, transparent);
                background: var(--fond-2); text-align: center; }
.wasit__ferme p { margin: 0 0 1.1rem; color: var(--glose);
                  font-family: var(--f-ui); font-weight: 300; }
.wasit__talab { display: inline-block; font-family: var(--f-ui); font-weight: 300;
                font-size: .82rem; text-decoration: none; color: var(--brun);
                padding: .5rem 1.4rem; border: 1px solid var(--or);
                transition: background .2s, color .2s; }
.wasit__talab:hover { background: color-mix(in oklab, var(--or) 14%, transparent); }

/* ── Notice + bandelette ─────────────────────────────────────────────────── */
.wasit__deux { display: grid; gap: clamp(1.8rem, 4vw, 2.8rem);
               margin-top: clamp(1.8rem, 4vw, 2.6rem); align-items: start; }
@media (min-width: 60rem) {
  .wasit__deux { grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem); }
}
.wasit__texte .fiche__texte { margin-top: 0; }

.wasit__bitaqa { border: var(--filet); background: var(--fond-2);
                 padding: clamp(1.1rem, 2.5vw, 1.5rem); }
.wasit__bitaqa__t { font-size: .95rem; margin: 0 0 1rem; padding-bottom: .7rem;
                    border-bottom: var(--filet); }

/* Deux colonnes : le libellé tient sa largeur, la valeur prend le reste. Une
   `<dl>` en flux laisserait les valeurs se décaler d'une ligne à l'autre et le
   cartouche cesserait de se lire comme un tableau. */
.wasit__faits { display: grid; grid-template-columns: auto minmax(0, 1fr);
                gap: .55rem 1rem; margin: 0; font-family: var(--f-ui); font-weight: 300; }
.wasit__faits dt { font-size: .72rem; letter-spacing: .04em; color: var(--glose);
                   white-space: nowrap; }
.wasit__faits dd { margin: 0; font-size: .84rem; color: var(--encre); }

/* La référence imprimée. Le seul filet d'or de la bandelette : sur ce site,
   l'or ne trace que le LIEN entre deux entités — ici, entre un enregistrement
   et l'ouvrage où il est publié. */
.wasit__istinad { margin: 1.2rem 0 0; padding-top: 1rem;
                  border-top: 1px solid color-mix(in oklab, var(--or) 55%, transparent); }
.wasit__istinad .ui { display: block; font-size: .72rem; letter-spacing: .04em;
                      color: var(--glose); margin-bottom: .3rem; }
.wasit__istinad strong { font-family: var(--f-texte); font-size: .95rem;
                         line-height: 1.7; color: var(--encre); }

/* Le crédit. Petit, gris, en bas — mais TOUJOURS là : une institution
   patrimoniale ne montre pas le travail d'un déposant sans le nommer. */
.wasit__credit { margin: 1.2rem 0 0; padding-top: .9rem; border-top: var(--filet);
                 font-family: var(--f-ui); font-weight: 300; font-size: .74rem;
                 line-height: 1.75; color: var(--glose); }
.wasit__credit a { color: var(--brun); text-decoration: none;
                   box-shadow: 0 1px 0 color-mix(in oklab, var(--or) 60%, transparent); }
.wasit__credit a:hover { color: var(--encre); }

/* ══════════════════════════════════════════════════════════════════════════
 * LA CARTE DE CONTENU
 *
 * Une pièce du fonds en vignette : image quand il y en a une, glyphe tracé
 * sinon ; le titre, l'intervenant, et les deux ou trois faits sur lesquels on
 * décide de cliquer. Le même objet pour un enregistrement, un article ou un
 * manuscrit — deux gabarits de carte pour la même chose finissent toujours par
 * diverger sur le premier détail corrigé d'un seul côté.
 *
 * Elle servait le carrousel « مختارات من الخزانة », retiré le 06/08/2026 : la
 * خزانة du hero fait le même travail, et mieux depuis que les enregistrements
 * y figurent en boîtiers. Il reste la grille de « الصوتيات والمرئيات ».
 * ═══════════════════════════════════════════════════════════════════════ */

.mukht__l { display: flex; flex-direction: column; block-size: 100%;
            text-decoration: none; color: inherit; border: var(--filet);
            background: var(--fond-2);
            transition: border-color .2s, transform .2s; }
.mukht__l:hover,
.mukht__l:focus-visible { border-color: var(--or); transform: translateY(-3px); }
.mukht__l:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

/* La vignette : pas d'image, un aplat profond et un glyphe tracé. C'est ce qui
   permet à un article de journal et à un manuscrit de tenir dans la même
   rangée sans que l'un ait l'air d'un livre et l'autre d'un lien. */
.mukht__tuile { position: relative; display: flex; align-items: center; justify-content: center;
                aspect-ratio: 16 / 7; background: var(--profond);
                color: var(--sur-profond); }
.mukht__glyphe { inline-size: 2.4rem; block-size: 2.4rem; fill: none;
                 stroke: currentColor; stroke-width: 1.25;
                 stroke-linecap: round; stroke-linejoin: round;
                 opacity: .85; transition: opacity .2s, scale .2s; }
.mukht__l:hover .mukht__glyphe { opacity: 1; scale: 1.06; }
/* ── La vraie vignette, quand il y en a une ───────────────────────────────
 * L'image d'attente de la vidéo, versée dans la médiathèque. Elle remplace
 * l'aplat + glyphe : une rangée de rectangles indigo identiques ne donnait
 * aucune prise à l'œil. */
.mukht__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
              object-fit: cover; display: block; filter: saturate(.92); }
/* Le fond reste sombre DERRIÈRE l'image : les posters YouTube d'archives sont
   souvent en 4:3 et laissent deux bandes sur les côtés d'une tuile en 16:7.
   Sans ce fond, les bandes seraient blanches et la carte se casserait en deux. */
.mukht__tuile--vue { background: var(--profond); }
/* Un voile en bas : l'étiquette de type est en blanc, et un poster clair la
   rendait illisible. Dégradé et non aplat — l'image reste lisible. */
.mukht__tuile--vue::after { content: ""; position: absolute; inset: 0; pointer-events: none;
                            background: linear-gradient(to bottom,
                              color-mix(in oklab, #000 42%, transparent) 0%,
                              transparent 46%); }
.mukht__l:hover .mukht__img { filter: saturate(1); }

.mukht__naw { position: absolute; z-index: 1;
              inset-block-start: .6rem; inset-inline-start: .7rem;
              font-family: var(--f-ui); font-weight: 300; font-size: .66rem;
              letter-spacing: .06em; padding: .12rem .5rem;
              color: var(--sur-profond);
              background: color-mix(in oklab, #000 34%, transparent);
              border: 1px solid color-mix(in oklab, var(--or) 60%, transparent); }

.mukht__corps { display: flex; flex-direction: column; gap: .45rem;
                padding: .95rem 1rem 1.05rem; flex: 1 1 auto; }
/* Trois lignes maximum : au-delà, les cartes cessent d'avoir la même hauteur
   et la rangée se déforme d'un titre à l'autre. */
.mukht__titre { font-family: var(--f-display); font-weight: 700; font-size: .96rem;
                line-height: 1.55; color: var(--encre);
                display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
                overflow: hidden; }
.mukht__l:hover .mukht__titre { color: var(--profond-2); }
.mukht__qui { font-family: var(--f-ui); font-weight: 300; font-size: .76rem;
              color: var(--glose); }
.mukht__meta { margin-block-start: auto; padding-block-start: .5rem;
               display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem;
               font-family: var(--f-ui); font-weight: 300; font-size: .72rem;
               /* 66 %, mesuré — pas 58 %. À 58 % la ligne de faits tombait
                  entre 4,11 et 4,45:1 selon la palette, sous le seuil AA de
                  4,5 exigé pour ce corps (≈11,5 px). À 66 % : 5,31 à 6,73
                  sur les cinq. Voir CHARTE.md § 7. */
               color: color-mix(in oklab, var(--encre) 66%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .mukht__l, .mukht__glyphe { transition: none; }
  .mukht__l:hover, .mukht__l:focus-visible { transform: none; }
}

/* ── La grille de cartes ──────────────────────────────────────────────────
 * Reste disponible pour une rangée posée (une page de rubrique, par exemple).
 * `auto-fill` plutôt qu'un nombre de colonnes fixe. */
.mukhtarat__grille { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem;
                     grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }

/* ══════════════════════════════════════════════════════════════════════════
 * LE RUBAN — le fonds enregistré qui défile, sur l'accueil
 *
 * Même mécanique que le rayon du hero, et c'est délibéré : deux dispositifs
 * qui défilent sur la même page doivent défiler PAREIL, sinon la page bégaie.
 * La piste porte DEUX lots identiques et se déplace d'exactement la moitié de
 * sa largeur : au terme du cycle, le second lot occupe la place du premier et
 * la boucle est invisible. Toute autre valeur produit un saut.
 *
 * La durée est calculée dans le gabarit d'après le nombre de pièces (`--duree`)
 * : sans ça, un fonds de neuf enregistrements défilerait à la même vitesse
 * qu'un fonds de cent, donc quatre fois trop vite le jour où la commission
 * dépose le sien.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ⚠️ Le plein-bord déborde la page, et il faut le CLIPPER.
 *
 * `margin-inline: calc(50% - 50vw)` étire la bande d'un bord à l'autre — mais
 * `100vw` compte la barre de défilement verticale, que `100%` ne compte pas.
 * La bande dépasse donc de sa largeur, et TOUTE la page gagne un défilement
 * horizontal : le même symptôme que le bouton de menu corrigé la veille.
 *
 * `clip` et non `hidden` : `hidden` ferait de la section un conteneur de
 * défilement, ce qui casserait toute position collante à l'intérieur. */
.section:has(.ruban) { overflow-x: clip; }

.ruban { position: relative; }
/* Le cadre déborde l'enveloppe et va d'un bord à l'autre : une bande qui
   s'arrête à la colonne de texte a l'air d'un tableau, pas d'un défilement. */
.ruban__cadre { overflow: hidden;
                margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%);
                -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
                        mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%); }

.ruban__piste { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: .25rem 0 1rem;
                width: max-content;
                animation: ruban-defile var(--duree, 45s) linear infinite; }
@keyframes ruban-defile { to { translate: 50% 0; } }

/* ⚠️ `translate: 50%` et non `-50%` : la page est en RTL, la piste se remplit
   de droite à gauche, et le défilement doit donc aller dans l'autre sens que
   sur un site latin. Avec la valeur négative, les cartes partaient du mauvais
   côté et le raccord de boucle sautait. */

.ruban .mukht { flex: none; inline-size: 17rem; }

/* Au survol et au focus, la bande s'arrête : sans ça on ne peut pas viser une
   carte, et le lien devient injouable à la souris. */
.ruban:hover .ruban__piste,
.ruban:focus-within .ruban__piste { animation-play-state: paused; }

/* Le réglage système a le dernier mot : plus de défilement du tout. La bande
   reste alors parcourable — elle déborde, et le clavier atteint chaque carte. */
@media (prefers-reduced-motion: reduce) {
  .ruban__piste { animation: none; }
  .ruban__cadre { overflow-x: auto; scrollbar-width: thin; }
}

/* ── Les rubriques du document client, en pastilles ───────────────────────
 * Ce sont les sept portes que la commission a nommées. Chacune porte son
 * compte : c'est ce qui distingue une rubrique qui ATTEND d'une rubrique qui A,
 * et c'est aussi, pour la LJC, la vue la plus honnête de son propre fonds. */
.aqsam { list-style: none; margin: 0 0 clamp(1.5rem, 3.5vw, 2.2rem); padding: 0;
         display: flex; flex-wrap: wrap; gap: .5rem; }
.qism { display: inline-flex; align-items: baseline; gap: .5rem;
        font-family: var(--f-ui); font-weight: 300; font-size: .8rem;
        text-decoration: none; color: var(--encre);
        padding: .4rem .85rem;
        border: 1px solid color-mix(in oklab, var(--brun) 30%, transparent);
        transition: border-color .18s, background .18s; }
.qism:hover, .qism:focus-visible { border-color: var(--or);
                                   background: color-mix(in oklab, var(--or) 12%, transparent); }
.qism__n { font-size: .7rem; color: var(--glose); }

/* Une rubrique encore vide reste CLIQUABLE et lisible — son archive explique
   qu'elle attend son fonds. Elle est seulement mise en retrait : trait tireté,
   comme partout sur ce site où quelque chose n'est pas encore là. */
.qism--vide { border-style: dashed;
              border-color: color-mix(in oklab, var(--brun) 22%, transparent);
              color: var(--glose); }

/* ══════════════════════════════════════════════════════════════════════════
 * LA VITRINE DES 23 مجموعات — bande de cartes qui défile
 *
 * A remplacé la constellation ET le tableau qui la suivait : deux dispositifs
 * pour la même liste, dont l'un ne se lisait qu'au survol et l'autre
 * ressemblait à un registre d'état civil.
 *
 * La mécanique vient du hero d'ithra.com, démontée dans inc/majmuaat.php.
 * L'essentiel : l'impression qu'elles FLOTTENT ne vient d'aucune ombre portée
 * — il n'y en a pas une seule chez eux. Elle vient de deux choses :
 *
 *   · la bande DÉBORDE de la colonne de texte et court sur tout l'écran, donc
 *     rien ne l'encadre et rien ne la pose ;
 *   · les cartes qui ne sont pas au premier plan sont FLOUES et légèrement
 *     réduites. C'est de la profondeur de champ : ce qui est flou est loin.
 *     Deux propriétés, et la bande cesse d'être plate.
 *
 * Le registre, lui, reste celui de la maison : les 23 teintes de --mj, l'or, le
 * folio en texture. Rien du violet d'Ithra.
 *
 * Les 23 cartes sont RIGOUREUSEMENT identiques — même taille, même graisse,
 * même rang que la liste de la LJC. Le compte ne change ni la taille ni la
 * place : contrainte politique, tenue par la feuille de style.
 * ═══════════════════════════════════════════════════════════════════════ */

/* Le `<defs>` qui porte le tracé de la squircle. Hors flux, jamais
   `display: none` — un `<use>` qui référence un sous-arbre non rendu casse
   dans certains moteurs. */
.squircle-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── La scène ─────────────────────────────────────────────────────────────
 * Section sombre au milieu d'une page claire. Ce n'est pas une préférence
 * décorative : les cartes doivent flotter SUR quelque chose. Sur l'ivoire de
 * la page, une carte posée sur du vide ne flotte pas, elle tombe.
 */
.section--scene { position: relative; isolation: isolate; overflow: hidden;
                  background: var(--profond); color: var(--sur-profond); }
.section--scene .section__titre { color: var(--sur-profond); }
.section--scene .section__filet { opacity: .55; }
.section--scene .section__lien  { color: color-mix(in oklab, var(--sur-profond) 72%, transparent); }

/* Pas une texture d'ambiance : une PAGE d'un ouvrage déposé, la même que le
   hero. Le fonds sert de fond au fonds. */
.scene__fond { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
/* Floutée et très basse : c'est une MATIÈRE, pas un document. À .16 sans flou,
   on lisait le texte du folio derrière les cartes et la page devenait un
   concours entre deux contenus. */
.scene__fond img { width: 100%; height: 100%; object-fit: cover;
                   opacity: .08; filter: grayscale(.6) contrast(1.05) blur(5px); }
.scene__voile { position: absolute; inset: 0; z-index: -1; pointer-events: none;
                background:
                  radial-gradient(120% 90% at 50% -15%,
                                  color-mix(in oklab, var(--profond-2) 70%, transparent), transparent 70%),
                  linear-gradient(color-mix(in oklab, var(--profond) 50%, transparent),
                                  color-mix(in oklab, var(--profond) 86%, transparent)); }

/* ══════════════════════════════════════════════════════════════════════════
 * VARIANTE « سَبْخة » — la scène en plein jour, sur les dunes de l'Adrar
 *
 * `?scene=sable` (cf. tach_scene()). Ce n'est pas la même scène en plus clair :
 * ce qui fait flotter les cartes change de nature.
 *
 *   · Sur le fond SOMBRE, une ombre portée est invisible. Ce sont le flou de
 *     lointain et la couleur des cartes qui portent seuls l'effet.
 *   · Sur le SABLE, l'ombre portée redevient l'outil principal — c'est elle qui
 *     décolle la carte du sol. Et la photo apporte une perspective
 *     atmosphérique VRAIE : l'horizon s'estompe de lui-même, le flou de la
 *     bande ne fait que la prolonger. C'est la version où « elles flottent »
 *     se lit sans qu'on ait à y croire.
 *
 * La couleur de texte passe à `--profond` et non à `--encre` : `--encre` est
 * CLAIRE dans la palette « السَّمَر » (site sombre), et le titre disparaîtrait
 * sur le sable. `--profond` est sombre dans les cinq — c'est le seul jeton sur
 * lequel on puisse s'appuyer ici.
 * ═══════════════════════════════════════════════════════════════════════ */

.section--sable { background: var(--fond); color: var(--profond); }
.section--sable .section__titre { color: var(--profond); }
.section--sable .section__lien  { color: color-mix(in oklab, var(--profond) 72%, transparent); }
.section--sable .section__filet { opacity: .8; }

/* La photo est ICI le sujet, pas une texture : pleine opacité, aucun filtre. */
.section--sable .scene__fond img { opacity: 1; filter: none; }

/* Un voile d'ivoire aux deux bords seulement, pour raccorder la photo au fond
   de page : une photo à bord franc posée dans une charte fait toujours
   « collée ».
   Volontairement FAIBLE en haut : le ciel de la photo est un bleu franc, et le
   titre en `--profond` y tient déjà 4,8:1 — largement au-dessus des 3:1
   exigés pour du grand texte. Le laver davantage coûterait le ciel pour un
   contraste dont on n'a pas besoin. */
.section--sable .scene__voile {
  background:
    linear-gradient(color-mix(in oklab, var(--fond) 58%, transparent) 0%,
                    transparent 20%),
    linear-gradient(to top, color-mix(in oklab, var(--fond) 40%, transparent), transparent 28%);
}

/* L'OMBRE PORTÉE, le geste de cette variante. Teintée de brun et non de noir :
   une ombre sur du sable n'est pas grise, elle prend la couleur du sol. Deux
   ombres superposées — une large et diffuse pour la hauteur, une courte et
   dense pour le contact — sinon la carte a l'air décalquée. */
.section--sable .majmuaa {
  box-shadow: 0 34px 54px -26px color-mix(in oklab, var(--brun) 62%, #000),
              0 6px 14px -8px color-mix(in oklab, var(--brun) 44%, #000);
}
.section--sable .majmuaa:hover, .section--sable .majmuaa:focus-visible {
  box-shadow: 0 52px 74px -30px color-mix(in oklab, var(--brun) 66%, #000),
              0 10px 20px -10px color-mix(in oklab, var(--brun) 40%, #000);
}

/* Le lointain s'éclaircit au lieu de s'assombrir : sur un désert, ce qui est
   loin se DÉLAVE dans la brume de chaleur. C'est la perspective atmosphérique,
   et elle va dans le sens opposé de celle du fond sombre. */
.section--sable .vitrine__place.est-loin { opacity: .62; }

/* Le halo de couleur n'a plus lieu d'être : il servait à éclairer une surface
   sombre. Sur du sable en plein jour, il ne ferait que salir. */
.section--sable .vitrine__halo { display: none; }

.section--sable .cartes__fleche { color: var(--profond);
                                  border-color: color-mix(in oklab, var(--brun) 45%, transparent); }
.section--sable .cartes__fleche:hover { background: color-mix(in oklab, var(--or) 22%, transparent);
                                        border-color: var(--or); color: var(--brun); }

/* ── L'annonce du tirage au sort ──────────────────────────────────────────
 * Petite, mais pas cachée : elle explique pourquoi l'ordre n'est pas celui de
 * la liste de la LJC. Sans elle, un visiteur qui revient et voit un autre
 * ordre croit à un classement qui bouge.
 */
.vitrine__note { display: flex; align-items: center; gap: .45rem;
                 margin: 0 0 .35rem;
                 padding-inline: var(--marge-bande);
                 font-size: .7rem; opacity: .58; }
.vitrine__de { font-size: .95rem; line-height: 1; color: var(--or); opacity: .85; }
.section--sable .vitrine__note { opacity: .72; }

/* Ligne de crédit d'image. Inutilisée depuis que la photo de fond est celle du
   client — conservée parce que le jour où une image vient d'un tiers, la
   mention doit exister AVANT la mise en ligne, pas après. */
.scene__credit { margin: 1.1rem 0 0; font-size: .68rem; opacity: .55; text-align: start; }
.scene__credit a { color: inherit; }

/* ── La bande ─────────────────────────────────────────────────────────────
 * Elle sort de l'enveloppe et va d'un bord à l'autre de l'écran. C'est la
 * moitié de l'effet : une bande cadrée dans une colonne de texte se lit comme
 * un tableau, une bande qui sort du cadre se lit comme une PROFONDEUR — on
 * comprend qu'il y en a d'autres au-delà de l'écran.
 *
 * `margin-inline: calc(50% - 50vw)` remonte au bord de la fenêtre depuis
 * n'importe quel parent centré, sans toucher au balisage. `100vw` seul
 * déborderait de la largeur de la barre de défilement.
 */
.vitrine { position: relative; isolation: isolate;
           margin-inline: calc(50% - 50vw);
           /* La marge de l'enveloppe (78 rem centrées + rembourrage), calculée
              UNE fois : la piste, le gouvernail, la note et le calage du
              `scroll-snap` doivent tous tomber sur la même verticale que le
              titre. Quatre copies de cette expression, c'était trois occasions
              de les désaccorder. */
           --marge-bande: max(clamp(1rem, 4vw, 2.75rem), calc(50vw - 39rem + 2.75rem)); }

/* Le halo : la teinte de la carte au centre du cadre, sous la bande. Disque de
   taille fixe déplacé en `translate` — un `radial-gradient` dont on bouge le
   centre ne s'interpole pas, il sauterait d'une carte à l'autre. */
.vitrine__halo {
  position: absolute; z-index: 0; pointer-events: none;
  left: 0; top: 0; width: 40rem; height: 40rem; margin: -20rem 0 0 -20rem;
  translate: var(--hx, 50%) var(--hy, 50%);
  background: radial-gradient(closest-side,
              color-mix(in oklab, var(--mj-actif, var(--or)) 55%, transparent), transparent);
  filter: blur(48px); opacity: 0;
  transition: translate .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease, background .6s ease;
}
.vitrine.est-vive .vitrine__halo { opacity: .42; }

/* ── Le cadre qui défile ──────────────────────────────────────────────────
 * Défilement NATIF (`overflow-x` + `scroll-snap`) et non une piste transformée,
 * comme partout ailleurs sur ce site : on récupère gratuitement le glissé au
 * doigt, la molette horizontale, le trackpad et les flèches du clavier. Une
 * piste en `translate` aurait fallu tout réimplémenter, moins bien.
 *
 * `overflow-y: visible` est IMPOSSIBLE à côté d'un `overflow-x: auto` (la
 * spécification le force à `auto`). Les cartes ne peuvent donc pas déborder en
 * hauteur : la place du survol est réservée par le rembourrage vertical.
 *
 * `mask-image` estompe les deux bouts au lieu de les couper net : une carte
 * tranchée par un bord dit « boîte », une carte qui s'évanouit dit « il y en a
 * d'autres derrière ».
 */
.vitrine__cadre {
  position: relative; z-index: 1;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: inline mandatory;
  scroll-behavior: smooth;
  /* MÊME valeur que le rembourrage de la piste, obligatoirement : c'est sur
     `scroll-padding` que le `scroll-snap` cale la carte, et non sur le
     rembourrage. Une valeur plus petite ici et le navigateur fait défiler la
     bande de la différence dès le chargement — la première carte se retrouve
     décalée du titre sans qu'on ait touché à rien. */
  /* Début seulement : c'est lui qui cale la première carte sous le titre. Côté
     fin, la marge est déjà dans le rembourrage du dernier <li> (voir plus
     bas) ; l'ajouter ici la compterait deux fois. */
  scroll-padding-inline-start: var(--marge-bande);
  scroll-padding-inline-end: 0;
  padding-block: 2.5rem;                 /* la place où la carte se soulève */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Les deux fondus sont des VARIABLES pour que le script puisse éteindre
     celui du bord qu'on a atteint : un fondu qui subsiste au bout de la course
     donne l'impression que la dernière carte est coupée alors qu'elle est
     entière. Repères PHYSIQUES (gauche/droite), parce qu'un dégradé CSS ne
     connaît pas l'axe logique. */
  --fondu-g: 7rem; --fondu-d: 7rem;
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fondu-g),
                              #000 calc(100% - var(--fondu-d)), transparent 100%);
  transition: --fondu-g .3s, --fondu-d .3s;
}
/* En RTL, le DÉBUT de la lecture est à droite et la FIN à gauche.
   Chaque règle repose les DEUX fondus, jamais un seul : sinon la règle LTR et
   la règle RTL, qui touchent des propriétés différentes, s'appliquent toutes
   les deux et éteignent les deux bords à la fois — la bande perd alors ses
   fondus au premier bout atteint. */
.vitrine__cadre.est-au-debut { --fondu-g: 0rem; --fondu-d: 7rem; }
.vitrine__cadre.est-au-bout  { --fondu-g: 7rem; --fondu-d: 0rem; }
[dir="rtl"] .vitrine__cadre.est-au-debut { --fondu-g: 7rem; --fondu-d: 0rem; }
[dir="rtl"] .vitrine__cadre.est-au-bout  { --fondu-g: 0rem; --fondu-d: 7rem; }

/* Bande trop courte pour défiler : les deux états cohabitent, les deux fondus
   doivent tomber. Placée en dernier, elle tranche dans les deux directions. */
.vitrine__cadre.est-au-debut.est-au-bout,
[dir="rtl"] .vitrine__cadre.est-au-debut.est-au-bout { --fondu-g: 0rem; --fondu-d: 0rem; }
/* ── Le cadre pendant la DÉRIVE (assets/majmuaat.js § 4) ──────────────────
 * Deux réglages natifs doivent céder, et ils ne cèdent que là — un lecteur qui
 * a demandé `prefers-reduced-motion` garde la bande magnétique d'origine.
 *
 *   · `scroll-snap-type: none`. Le magnétisme ramène la position sur le point
 *     d'ancrage le plus proche : il annulerait, à chaque image, le dixième de
 *     pixel que la dérive vient d'ajouter. La bande resterait rigoureusement
 *     immobile, sans la moindre erreur en console.
 *   · `scroll-behavior: auto`. En `smooth`, CHAQUE écriture de `scrollLeft`
 *     ouvre une animation d'une trentaine d'images ; soixante par seconde se
 *     chevauchent et la bande tremble. Les flèches, elles, demandent leur
 *     lissage explicitement (`scrollBy({behavior:'smooth'})`) et ne perdent
 *     donc rien.
 *
 * On perd le calage au doigt sur mobile. C'est le prix, et il est modeste :
 * cette bande est une vitrine qu'on parcourt, pas un carrousel paginé où l'on
 * doit tomber juste. */
.vitrine__cadre.derive { scroll-snap-type: none; scroll-behavior: auto; }

.vitrine__cadre::-webkit-scrollbar { display: none; }
.vitrine__cadre:focus-visible { outline: 2px solid var(--or); outline-offset: -4px; }

/* La piste s'aligne PAR LE BAS : une rangée calée en haut se lit comme un
   tableau, calée en bas comme des objets posés. Les marges latérales sont
   celles de l'enveloppe, pour que la première carte tombe pile sous le titre. */
.vitrine__piste {
  list-style: none; margin: 0; padding: 0;
  /* Rembourrage de DÉBUT seulement : il aligne la première carte sur le titre.
     La marge de fin est portée par le dernier élément (voir plus bas) — un
     `padding-inline-end` sur une piste en défilement n'est pas restitué au bout
     de la course, et la vingt-troisième carte se collait au bord de l'écran
     alors que la première a 140 px de marge. */
  padding-inline-start: var(--marge-bande);
  display: flex; align-items: flex-end; gap: clamp(1rem, 2.2vw, 1.9rem);
  /* La perspective est ICI et pas sur les cartes : posée sur chacune, elle
     donne à chacune son propre point de fuite et l'ensemble se tord. */
  perspective: 1400px;
}
/* Sans `@property`, une variable de longueur ne s'interpole pas : les fondus
   sauteraient au lieu de s'éteindre. La déclaration est purement cosmétique —
   un navigateur qui l'ignore fait la même chose, en moins doux. */
@property --fondu-g { syntax: '<length>'; inherits: false; initial-value: 7rem; }
@property --fondu-d { syntax: '<length>'; inherits: false; initial-value: 7rem; }

.vitrine__place { flex: 0 0 auto; scroll-snap-align: start; }

/* La DERNIÈRE carte s'aligne sur la FIN, pas sur le début.
   Avec `scroll-snap-type: mandatory`, une carte ne peut se caler que sur une
   position atteignable. La dernière ne peut jamais amener son bord de début en
   tête de cadre — il n'y a plus assez de course derrière elle — donc le
   navigateur retombait sur l'avant-dernière et la vingt-troisième restait
   coupée, quoi qu'on fasse. Alignée sur la fin, elle se pose entière contre le
   bord opposé.
   Elle a besoin, pour ça, que la course aille 140 px plus loin qu'elle — d'où
   le rembourrage ci-dessous.

   ── La marge de fin est le REMBOURRAGE DU DERNIER ÉLÉMENT ─────────────────
   Et pas autre chose. Quatre méthodes essayées et mesurées sur la course de
   défilement réelle (`scrollWidth`) :

     `padding-inline-end` sur la piste ........... +0 px
     `margin-inline-end` sur le dernier enfant ... +0 px
     un `::after` ou un `<li>` vide de 140 px .... +0 px
     `padding-inline-end` sur le dernier <li> ... +140 px  ✔

   En RTL, le moteur arrête la zone de défilement au bord du dernier CONTENU :
   tout ce qui est vide au-delà — rembourrage de conteneur, marge, boîte sans
   contenu — ne compte pas. Un rembourrage porté par un élément qui a du
   contenu, lui, fait partie de sa boîte et compte. C'est contre-intuitif et
   ça ne s'invente pas : ne pas « simplifier » en remettant une marge. */
.vitrine__place:last-child { scroll-snap-align: end; padding-inline-end: var(--marge-bande); }

/* ── La carte ─────────────────────────────────────────────────────────────
 * Format portrait, coins largement arrondis — ici un vrai `border-radius`
 * suffit : la squircle ne se justifie que sur un carré, où la courbure des
 * quatre coins est visible d'un coup d'œil. Sur un portrait de 27 rem, elle ne
 * changerait rien qu'on puisse voir, et coûterait un découpage de plus.
 */
.majmuaa {
  position: relative; display: flex; align-items: flex-end;
  /* Chez Ithra le portrait est en 63/100, mais leur carte est REMPLIE par une
     affiche. La nôtre est un aplat de couleur : au même élancement, le milieu
     est un grand vide. On raccourcit d'un cran — assez pour rester un portrait,
     pas assez pour devenir une vignette. */
  width: clamp(13rem, 21vw, 17.5rem); aspect-ratio: 70 / 100;
  border-radius: clamp(1.3rem, 2.4vw, 1.9rem);
  overflow: hidden; text-decoration: none; color: var(--sur-profond);
  border: 1px solid color-mix(in oklab, var(--or) 24%, transparent);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(var(--z, 0px));
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, border-color .5s ease;
}

/* La respiration : chaque carte sur sa propre phase (délai NÉGATIF indexé par
   --i), sinon les 23 montent et descendent en bloc et ça fait « bannière ». */
@media (prefers-reduced-motion: no-preference) {
  .majmuaa { animation: flotte 8s calc(var(--i, 0) * -.43s) ease-in-out infinite alternate; }
}
@keyframes flotte { from { translate: 0 -.4rem; } to { translate: 0 .4rem; } }

/* ── La face ──────────────────────────────────────────────────────────────
 * Le folio n'est PAS une illustration, c'est du PAPIER. Zoomé et flouté, donc :
 * à l'échelle 1 on lisait le texte, et les 23 cartes devenaient 23 copies du
 * même scan — un mensonge sur le fonds. Zoomé, il ne reste que le grain, la
 * tache et la fibre. C'est honnête : un papier commun, pas 23 illustrations.
 *
 * Le voile monte du bas exactement comme le `bottom-overlay` d'Ithra : c'est
 * lui qui donne au nom son assise sans avoir à poser un bandeau opaque dessous.
 * Il part de la teinte pleine en bas et s'éteint aux trois quarts.
 */
.majmuaa__face { position: absolute; inset: 0; z-index: 0; overflow: hidden;
                 background: color-mix(in oklab, var(--mj) 46%, var(--profond)); }
.majmuaa__grain { position: absolute; inset: 0; width: 100%; height: 100%;
                  object-fit: cover; opacity: .24; scale: 3.6;
                  filter: grayscale(1) contrast(1.3) blur(3px);
                  mix-blend-mode: overlay; }
.majmuaa__voile { position: absolute; inset: 0;
                  background: linear-gradient(to top,
                    color-mix(in oklab, var(--mj) 82%, var(--profond)) 0%,
                    color-mix(in oklab, var(--mj) 66%, var(--profond)) 34%,
                    color-mix(in oklab, var(--mj) 30%, transparent) 68%,
                    transparent 100%); }

/* ── Le وسم ───────────────────────────────────────────────────────────────
 * La marque de bétail du groupe, dans un cartouche en squircle, en haut de la
 * carte. C'est ICI que la squircle vaut le détour : le cartouche est carré et
 * on le regarde de près, donc la courbure continue de ses quatre coins se voit.
 *
 * Le trait est en `currentColor` pour hériter de la teinte posée juste dessous
 * — une seule couleur à changer, jamais deux à tenir d'accord.
 *
 * Un وسم est une BRÛLURE : cela se trace au trait, jamais en aplat.
 */
.wasm { position: absolute; z-index: 1;
        inset-block-start: clamp(.9rem, 1.8vw, 1.25rem);
        inset-inline-start: clamp(.9rem, 1.8vw, 1.25rem);
        width: clamp(4rem, 6.4vw, 5.4rem); aspect-ratio: 1;
        display: grid; place-items: center;
        color: color-mix(in oklab, var(--sur-profond) 82%, var(--mj));
        transition: color .45s ease, scale .45s cubic-bezier(.2,.9,.3,1.4); }

.wasm__cartouche { position: absolute; inset: 0; width: 100%; height: 100%; }
.wasm__cartouche use { fill: color-mix(in oklab, var(--profond) 42%, transparent);
                       stroke: color-mix(in oklab, currentColor 38%, transparent);
                       stroke-width: 3; vector-effect: non-scaling-stroke;
                       transition: fill .45s ease, stroke .45s ease; }

.wasm__trace { position: relative; width: 62%; height: 62%;
               fill: none; stroke: currentColor; stroke-width: 7;
               stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* Vingt-deux marques sur vingt-trois ne sont pas encore transmises. Le
   cartouche reste, en pointillé : un emplacement manifestement à remplir se
   lit comme une demande, un cartouche absent comme un oubli. */
.wasm--vide .wasm__cartouche use { stroke-dasharray: 5 7; stroke-opacity: .55;
                                   fill: color-mix(in oklab, var(--profond) 26%, transparent); }

.majmuaa:hover .wasm, .majmuaa:focus-visible .wasm { scale: 1.06; color: var(--sur-profond); }
.majmuaa:hover .wasm__cartouche use, .majmuaa:focus-visible .wasm__cartouche use {
  fill: color-mix(in oklab, var(--profond) 62%, transparent);
  stroke: color-mix(in oklab, var(--or) 70%, transparent);
}

/* ── Le pied de la carte ───────────────────────────────────────────────────
 * Chiffres en haut, filet d'or, nom en bas — mais dans le DOM le nom vient en
 * PREMIER (cf. inc/majmuaat.php), d'où `column-reverse`. L'ordre de lecture et
 * l'ordre visuel n'ont aucune raison de coïncider ici.
 */
.majmuaa__pied { position: relative; z-index: 1; width: 100%;
                 display: flex; flex-direction: column-reverse; align-items: stretch;
                 gap: .55rem; padding: clamp(.9rem, 1.8vw, 1.25rem); }

.majmuaa__nom { font-family: var(--f-display); font-weight: 700;
                font-size: clamp(1.05rem, 1.9vw, 1.5rem); line-height: 1.35;
                text-wrap: balance; overflow-wrap: anywhere;
                text-shadow: 0 2px 14px color-mix(in oklab, var(--profond) 85%, #000); }

/* Le filet d'or, comme partout ailleurs sur le site : c'est LUI qui sépare, pas
   une ombre ni un bandeau. */
.majmuaa__filet { height: 1px; background: color-mix(in oklab, var(--or) 55%, transparent); }

/* ── Les trois chiffres ────────────────────────────────────────────────────
 * مخطوط · مؤلَّف · عَلَم. Ce sont désormais les SEULS compteurs du site : le
 * bandeau de totaux du hero a été retiré, il disputait la place à la carte de
 * question. Compter par groupe informe ; compter en total décorait.
 *
 * Chasse tabulaire : sans elle, un « 11 » est visiblement plus étroit qu'un
 * « 34 » et les trois colonnes dansent d'une carte à l'autre.
 */
.majmuaa__chiffres { display: flex; gap: clamp(.7rem, 1.6vw, 1.15rem); align-items: flex-end; }
.majmuaa__stat { display: grid; gap: .05rem; }
.majmuaa__n { font-family: var(--f-ui); font-weight: 400; line-height: 1;
              font-size: clamp(1.15rem, 2vw, 1.6rem); font-variant-numeric: tabular-nums;
              color: var(--sur-profond);
              text-shadow: 0 2px 12px color-mix(in oklab, var(--profond) 85%, #000); }
.majmuaa__u { font-family: var(--f-ui); font-weight: 300; font-size: .64rem;
              opacity: .62; white-space: nowrap; }

/* Un fonds vide se dit, il ne se maquille pas : le zéro s'estompe au lieu de
   disparaître. Le retirer laisserait croire que la colonne n'existe pas pour ce
   groupe, alors qu'elle attend un dépôt — et ferait trois cartes de largeurs
   différentes selon ce qui a été versé. */
.majmuaa__stat--vide { opacity: .42; }

/* ── Survol et focus ───────────────────────────────────────────────────────
 * La carte se soulève, son filet passe à l'or, le cartouche du وسم s'éclaire.
 * `--z` remonte au parent en perspective (.vitrine__piste), c'est lui qui donne
 * le point de fuite commun aux 23.
 */
.majmuaa:hover, .majmuaa:focus-visible {
  --z: 26px; outline: none;
  border-color: color-mix(in oklab, var(--or) 70%, transparent);
  box-shadow: 0 34px 60px -30px #000;
}
.majmuaa:hover .majmuaa__filet, .majmuaa:focus-visible .majmuaa__filet {
  background: var(--or);
}
.majmuaa:hover .majmuaa__stat--vide, .majmuaa:focus-visible .majmuaa__stat--vide {
  opacity: .6;
}
.majmuaa:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

/* ══ LA PROFONDEUR DE CHAMP ═══════════════════════════════════════════════
 * LE geste d'Ithra, et le seul qui compte : ce qui n'est pas au premier plan
 * est FLOU et plus petit. L'œil lit ça comme de la distance, et la bande cesse
 * d'être une rangée pour devenir un espace.
 *
 * `.est-loin` est posé par le script sur toute carte qui n'est pas entièrement
 * dans le cadre. Pas d'observateur = pas de classe = toutes nettes : on perd
 * l'effet, jamais la lisibilité.
 * ═══════════════════════════════════════════════════════════════════════ */
.vitrine__place { transition: filter .45s ease, opacity .45s ease; }
.vitrine__place.est-loin { filter: blur(2.5px); opacity: .55; }
.vitrine__place.est-loin .majmuaa { transform: scale(.93); }

/* ── Le gouvernail ─────────────────────────────────────────────────────────
 * Mêmes flèches que le carrousel du hero (`.cartes__fleche`) : un seul geste à
 * apprendre sur tout le site. Elles se rangent dans l'enveloppe, pas au bord
 * de l'écran où la bande, elle, a le droit d'aller.
 */
/* `.vitrine .cartes__gouvernail` et pas `.vitrine__gouvernail` seul : la règle
   générale de `.cartes__gouvernail` est déclarée plus bas dans la feuille et
   gagnerait à égalité de spécificité. */
.vitrine .cartes__gouvernail {
  position: relative; z-index: 2; justify-content: flex-start; margin-top: 0;
  padding-inline: var(--marge-bande);
}
.cartes__fleche[disabled] { opacity: .3; pointer-events: none; }

/* ── Étroit ────────────────────────────────────────────────────────────────
 * Au doigt il n'y a pas de survol, et le flou coûte cher à composer sur un
 * téléphone d'entrée de gamme : on garde le défilement, on retire le reste.
 */
@media (max-width: 48rem) {
  .vitrine__cadre { padding-block: 1.5rem 1.25rem;
                    mask-image: linear-gradient(to right, transparent 0, #000 2rem,
                                                #000 calc(100% - 2rem), transparent 100%); }
  .majmuaa { animation: none; }
  .vitrine__place.est-loin { filter: none; opacity: .78; }
  .vitrine__place.est-loin .majmuaa { transform: none; }
}

/* ── Pied ────────────────────────────────────────────────────────────────── */

.pied { background: var(--profond); color: color-mix(in oklab, var(--sur-profond) 76%, transparent);
        padding-block: 3rem 0; font-family: var(--f-ui); font-weight: 300; font-size: .84rem; }
.pied a { color: var(--sur-profond); text-decoration: none; opacity: .82;
          transition: opacity .18s, color .18s; }
.pied a:hover { opacity: 1; color: var(--or); }

/* Trois colonnes, la première deux fois plus large : elle porte le nom, la
   baseline et les comptes, les deux autres des listes de liens. */
.pied__grille { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem);
                grid-template-columns: 1.6fr 1fr 1fr; align-items: start;
                padding-bottom: 2.5rem; }
@media (max-width: 52rem) { .pied__grille { grid-template-columns: 1fr 1fr; }
                            .pied__marque { grid-column: 1 / -1; } }
@media (max-width: 30rem) { .pied__grille { grid-template-columns: 1fr; } }

.pied__nom   { font-family: var(--f-display); font-weight: 700; font-size: 1.02rem;
               color: var(--sur-profond); margin: 0 0 .35rem; line-height: 1.4; }
.pied__note  { margin: 0; opacity: .68; line-height: 1.7; }
.pied__titre { font-family: var(--f-display); font-weight: 700; font-size: .84rem;
               color: var(--sur-profond); margin: 0 0 .85rem; padding-bottom: .5rem;
               border-bottom: 1px solid color-mix(in oklab, var(--or) 34%, transparent); }
.pied__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

/* ── Les comptes ──────────────────────────────────────────────────────────
 * `--ton` porte la couleur de marque du réseau. Elle ne sert qu'au SURVOL :
 * en permanence, trois pastilles bleu-rouge-vert dans un pied indigo et or
 * feraient trois taches sans rapport avec la charte. Au survol, elle confirme
 * qu'on a visé le bon réseau — c'est là qu'elle est utile.
 */
.pied__rs { margin-top: 1.5rem; }
.pied__rs .pied__titre { margin-bottom: .7rem; }
.pied__rs__b { display: flex; gap: .5rem; flex-wrap: wrap; }
.pied__rs__a { display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
               color: color-mix(in oklab, var(--sur-profond) 78%, transparent);
               border: 1px solid color-mix(in oklab, var(--sur-profond) 22%, transparent);
               transition: color .2s, border-color .2s, background .2s, translate .2s; }
.pied__rs__a svg { width: 1.15rem; height: 1.15rem; }
a.pied__rs__a:hover { color: var(--ton); border-color: var(--ton); translate: 0 -2px;
                      background: color-mix(in oklab, var(--ton) 12%, transparent); }

/* Compte pas encore ouvert : visible, mais visiblement pas cliquable. Le trait
   tireté est le même vocabulaire que « accès restreint » — sur ce site, ce qui
   n'est pas disponible se dit par la FORME. */
.pied__rs__a--bientot { opacity: .42; border-style: dashed; cursor: default; }

/* ── La barre de copyright ────────────────────────────────────────────────── */
.pied__bas { border-top: 1px solid color-mix(in oklab, var(--sur-profond) 12%, transparent);
             background: color-mix(in oklab, var(--profond) 78%, #000); }
.pied__bas__in { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem;
                 justify-content: space-between; align-items: baseline;
                 padding-block: 1rem; font-size: .76rem; }
.pied__bas p { margin: 0; }
.pied__mention { opacity: .55; }

/* ══════════════════════════════════════════════════════════════════════════
 * LA COUVERTURE DESSINÉE
 *
 * Les scans du fonds sont des photocopies des années 1990 : gris, empâtées,
 * indistinguables en vignette. L'information, elle, est intacte — on la remet
 * en page (cf. inc/couverture.php). Rien n'est inventé : chaque ligne est
 * relevée sur la page de titre.
 *
 * `container-type: inline-size` : la couverture sert au rayon du hero comme aux
 * vignettes du fonds, à des tailles qui vont du simple au triple. Les tailles
 * de texte suivent donc la LARGEUR DE LA COUVERTURE (`cqi`) et non celle de la
 * fenêtre — sinon la même règle donne un titre énorme sur une vignette de
 * 90 px et minuscule sur un plat de 300 px.
 * ═══════════════════════════════════════════════════════════════════════ */
.couv {
  container-type: inline-size;
  display: block; position: relative; inline-size: 100%; aspect-ratio: 3 / 4;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in oklab, #fff 12%, transparent), transparent 62%),
    var(--ton, var(--profond));
  color: var(--sur-profond); overflow: hidden;
}

/* Le cadre du frontispice : double filet d'or et écoinçons aux quatre angles.
   Même vocabulaire que la carte « اسأل الخزانة » — c'est celui du fonds. */
.couv__cadre { position: absolute; inset: 5.5%; display: flex; flex-direction: column;
               align-items: center; justify-content: center; gap: 4cqi;
               padding: 6cqi 5cqi; text-align: center;
               border: 1px solid color-mix(in oklab, var(--or) 52%, transparent);
               box-shadow: inset 0 0 0 3cqi color-mix(in oklab, #000 12%, transparent),
                           inset 0 0 0 3.4cqi color-mix(in oklab, var(--or) 26%, transparent); }

.couv__coin { position: absolute; width: 4.5cqi; height: 4.5cqi; border: 0 solid var(--or);
              opacity: .8; }
.couv__coin:nth-child(1) { top: 2cqi; right: 2cqi; border-top-width: 1px; border-right-width: 1px; }
.couv__coin:nth-child(2) { top: 2cqi; left: 2cqi;  border-top-width: 1px; border-left-width: 1px; }
.couv__coin:nth-child(3) { bottom: 2cqi; right: 2cqi; border-bottom-width: 1px; border-right-width: 1px; }
.couv__coin:nth-child(4) { bottom: 2cqi; left: 2cqi;  border-bottom-width: 1px; border-left-width: 1px; }

/* ── Le médaillon du portrait ──────────────────────────────────────────────
 * Rond et cerclé d'or : le vocabulaire du frontispice, pas celui d'un trombi.
 * Tout est en `cqi` comme le reste de la couverture — le médaillon suit donc
 * l'échelle en vignette de 160 px comme en fiche de 240, sans réglage à part.
 *
 * `object-position: top` : les portraits déposés sont des photos d'identité,
 * cadrées large avec de l'air au-dessus. Centrées, elles coupent le menton. */
.couv__portrait { flex: none; inline-size: 30cqi; block-size: 30cqi;
                  border-radius: 50%; overflow: hidden;
                  border: 1px solid color-mix(in oklab, var(--or) 70%, transparent);
                  box-shadow: 0 0 0 1.2cqi color-mix(in oklab, #000 22%, transparent); }
.couv__portrait img { inline-size: 100%; block-size: 100%; object-fit: cover;
                      object-position: top; display: block; filter: saturate(.92); }

/* Avec un portrait, le titre cède un peu de place : deux éléments qui veulent
   chacun le centre de la couverture se disputeraient la hauteur, et c'est le
   titre qui déborderait. */
.couv--portrait .couv__titre { font-size: clamp(5.5cqi, 7.6cqi, 9cqi); }
.couv--portrait .couv__cadre { gap: 3cqi; }

.couv__sur { font-family: var(--f-ui); font-weight: 300; font-size: 4.4cqi;
             letter-spacing: .04em; color: color-mix(in oklab, var(--or) 82%, var(--sur-profond));
             line-height: 1.5; }

/* Le titre porte la couverture : c'est la seule ligne qu'on lit en vignette.
   `text-wrap: balance` évite le mot solitaire sur la dernière ligne, qui est
   ce qui fait « mal composé » sur un titre court. */
.couv__titre { font-family: var(--f-display); font-weight: 700;
               font-size: clamp(6.5cqi, 9cqi, 11cqi); line-height: 1.45;
               text-wrap: balance; overflow-wrap: anywhere;
               text-shadow: 0 1px 10px color-mix(in oklab, #000 55%, transparent); }

/* Le filet d'or entre le titre et les mentions — il sépare ce qu'on lit de qui
   en répond, comme sur une vraie page de titre. */
.couv__mentions { position: relative; display: grid; gap: 1.6cqi; padding-top: 4.5cqi;
                  font-family: var(--f-ui); font-size: 4cqi; line-height: 1.5; }
.couv__mentions::before { content: ""; position: absolute; inset-block-start: 0;
                          inset-inline: 22%; height: 1px;
                          background: color-mix(in oklab, var(--or) 55%, transparent); }
.couv__m__l { font-weight: 300; opacity: .62; }
.couv__m__l::after { content: " : "; }
.couv__m__v { font-weight: 400; }

.couv__bas { position: absolute; inset-block-end: 5cqi; inset-inline: 6cqi;
             font-family: var(--f-ui); font-weight: 300; font-size: 3.6cqi;
             opacity: .62; line-height: 1.5; }

/* En très petite vignette, les mentions et l'éditeur ne se lisent plus : ils
   deviennent du bruit gris autour du titre. On les retire plutôt que de les
   laisser illisibles — c'est le titre qui identifie l'ouvrage. */
@container (max-width: 150px) {
  .couv__mentions, .couv__bas, .couv__sur { display: none; }
  .couv__titre { font-size: 11cqi; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * LA COUVERTURE D'UN MANUSCRIT — des feuillets, pas un plat
 *
 * La composition ci-dessus imite une PAGE DE TITRE. Un manuscrit mauritanien
 * n'en a pas : la tradition محظرة le garde en FEUILLETS LIBRES, non reliés,
 * rangés dans une محفظة de cuir. Trois choses le disent ici, et chacune est
 * un écart délibéré d'avec la couverture imprimée :
 *
 *   1. LA PILE. Deux feuillets dépassent derrière le premier, décalés et
 *      pivotés d'un ou deux degrés. C'est le seul signe qui, à la taille d'une
 *      vignette, distingue un manuscrit d'un imprimé AVANT qu'on lise le titre.
 *   2. LE PARCHEMIN. Les couvertures imprimées tirent leur ton du titre
 *      (`--ton`) pour qu'on les reconnaisse de loin. Ici la matière est la même
 *      pour tous : deux manuscrits ne se distinguent pas par la couleur de leur
 *      papier, et prétendre le contraire serait un ornement mensonger.
 *   3. LE LOSANGE. Le cartouche en معيّن remplace le cadre rectangulaire —
 *      c'est la forme de l'ornement maghribin, et elle ne peut pas se confondre
 *      avec la fiche imprimée d'à côté.
 *
 * L'encre est BRUNE, sur clair : l'inverse exact du plat imprimé, qui est clair
 * sur teinte profonde. Et l'or reste un FILET (charte § 5) : il cerne le
 * losange, il ne le remplit jamais.
 *
 * ⚠️ La pile tient DANS le cadre 3/4 : les feuillets sont posés en retrait, pas
 * débordants. `.couv` est en `overflow: hidden` pour le rayon du hero, et des
 * feuillets qui dépasseraient seraient coupés net — ce qui se lirait comme un
 * défaut de rendu, pas comme une pile.
 * ═══════════════════════════════════════════════════════════════════════ */
.couv--makhtut { background: none; color: var(--encre); }

/* La matière, partagée par les trois feuillets. Le grain est une trame très
   basse en dégradés répétés : une texture d'image aurait coûté un fichier pour
   un effet qu'on ne remarque qu'en s'approchant. */
.couv--makhtut .couv__feuillet,
.couv--makhtut .couv__cadre {
  position: absolute;
  background:
    radial-gradient(80% 60% at 30% 10%, color-mix(in oklab, var(--fond-2) 92%, transparent), transparent 70%),
    linear-gradient(168deg, var(--fond-2), color-mix(in oklab, var(--fond) 88%, var(--brun)));
  border: 1px solid color-mix(in oklab, var(--brun) 26%, transparent);
  border-radius: 1px;
  box-shadow: 0 6px 14px -8px rgba(0,0,0,.45);
}

/* Les deux feuillets du dessous : plus mats, un peu plus bas, pivotés en sens
   contraires. Les angles opposés font la pile — deux décalages du même côté
   donneraient une ombre portée, pas des feuilles. */
.couv--makhtut .couv__feuillet { z-index: 0; filter: brightness(.965); }
.couv--makhtut .couv__feuillet:nth-of-type(1) { inset: 3% 1% 5% 7%; transform: rotate(-2.2deg); }
.couv--makhtut .couv__feuillet:nth-of-type(2) { inset: 2% 7% 6% 1%; transform: rotate(1.6deg); }

/* Le feuillet du dessus porte le texte. Il écrase les règles du cadre imprimé
   (inset en pourcentage, double filet en `inset box-shadow`, écoinçons). */
.couv--makhtut .couv__cadre {
  inset: 0 4% 8% 4%; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3.4cqi; padding: 5cqi 3cqi; text-align: center;
  box-shadow: 0 10px 22px -12px rgba(0,0,0,.5);
}

/* ── Le معيّن, en MARQUE d'ouverture ───────────────────────────────────────
 * Deux losanges emboîtés, filet d'or : la rosette qui ouvre un frontispice
 * maghribin. Petit, et au-dessus du titre.
 *
 * ⚠️ IL A D'ABORD ÉTÉ UN CADRE, et c'était une impasse — la trace est ici pour
 * qu'on ne la refasse pas. Un carré de côté S pivoté à 45° occupe S√2 en
 * largeur ET en hauteur, et n'offre à son texte que le carré INSCRIT, soit
 * S/√2 ≈ 70 % de S. Pour loger un titre de trois mots il fallait un losange si
 * grand que ses pointes sortaient du feuillet ; réduit à ce qui tenait, il ne
 * laissait au titre que cinq caractères par ligne. Or les titres du fonds sont
 * longs (« عمدة الأئمة في الطب », et les منظومات le sont bien plus). Une forme
 * dont la place utile vaut la moitié de l'encombrement ne peut pas porter du
 * texte de longueur variable. */
.couv--makhtut .couv__losange {
  flex: none; inline-size: 11cqi; aspect-ratio: 1; transform: rotate(45deg);
  display: grid; place-items: center;
  border: 1px solid color-mix(in oklab, var(--or) 78%, transparent);
}
.couv--makhtut .couv__losange > span {
  inline-size: 44%; aspect-ratio: 1;
  border: 1px solid color-mix(in oklab, var(--or) 55%, transparent);
  background: color-mix(in oklab, var(--or) 14%, transparent);
}

/* Le titre a maintenant toute la largeur du feuillet, comme sur la couverture
   imprimée — mais en encre brune sur parchemin, et sans ombre portée : une
   ombre sur du clair salit au lieu de détacher. */
.couv--makhtut .couv__titre {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(6cqi, 8.4cqi, 10cqi); line-height: 1.45;
  color: var(--encre); text-shadow: none;
  text-wrap: balance; overflow-wrap: anywhere;
}

.couv--makhtut .couv__auteur {
  font-family: var(--f-ui); font-size: 4.2cqi; line-height: 1.5;
  color: color-mix(in oklab, var(--glose) 88%, var(--encre));
}

/* Les lignes du colophon, séparées du titre par le même filet d'or que les
   mentions de la couverture imprimée : le fonds garde une seule grammaire. */
.couv--makhtut .couv__colophon {
  position: relative; display: grid; gap: 1.4cqi; padding-top: 4cqi;
  font-family: var(--f-ui); font-size: 3.7cqi; line-height: 1.5;
  color: color-mix(in oklab, var(--encre) 78%, transparent);
}
.couv--makhtut .couv__colophon::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 26%; height: 1px;
  background: color-mix(in oklab, var(--or) 62%, transparent);
}
.couv--makhtut .couv__m__l { font-weight: 300; opacity: .7; }
.couv--makhtut .couv__m__v { font-weight: 400; }

/* « مخطوط », en pied : l'étiquette du catalogueur. Discrète, en petites
   capitales espacées — c'est une mention de nature, pas un titre. */
.couv--makhtut .couv__mention {
  position: absolute; inset-block-end: 4cqi; inset-inline: 0;
  font-family: var(--f-ui); font-weight: 300; font-size: 3.2cqi;
  letter-spacing: .22em; color: color-mix(in oklab, var(--glose) 80%, transparent);
}

/* En vignette, seul le titre survit — comme pour l'imprimé. La PILE, elle,
   reste : c'est justement à cette taille qu'elle porte toute l'information. */
@container (max-width: 150px) {
  .couv--makhtut .couv__colophon,
  .couv--makhtut .couv__auteur,
  .couv--makhtut .couv__mention { display: none; }
  /* Le titre reste seul avec la marque : c'est lui qui identifie la pièce. */
  .couv--makhtut .couv__titre { font-size: 10cqi; }
  .couv--makhtut .couv__losange { inline-size: 9cqi; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * LA COUVERTURE D'UN ARTICLE — une page, pas un objet
 *
 * Papier clair, filets HORIZONTAUX, manchette en tête, date en pied. Le livre
 * a un cadre fermé et des écoinçons, le manuscrit une pile de feuillets et un
 * معيّن ; l'article n'a que des lignes qui traversent — c'est la grammaire de
 * la page imprimée, et elle ne ressemble à aucune des deux autres.
 *
 * Pas de teinte tirée du titre (`--ton`) : les trois articles viennent du même
 * support et le disent en tête. Leur donner trois couleurs de fond ferait
 * croire à trois provenances.
 * ═══════════════════════════════════════════════════════════════════════ */
.couv--maqal {
  background:
    linear-gradient(172deg, var(--fond-2), color-mix(in oklab, var(--fond) 92%, var(--brun)));
  color: var(--encre);
  border: 1px solid color-mix(in oklab, var(--brun) 22%, transparent);
}
.couv--maqal .couv__cadre {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3.2cqi; padding: 9cqi 6cqi; text-align: center;
  border: 0; box-shadow: none;
}

/* La manchette : le support, en tête, entre deux filets. C'est la seule pièce
   de la composition qui touche les bords — comme le bandeau d'un journal. */
.couv--maqal .couv__manchette {
  position: absolute; inset-block-start: 0; inset-inline: 0;
  padding: 2.6cqi 4cqi;
  border-block-end: 1px solid color-mix(in oklab, var(--or) 50%, transparent);
  background: color-mix(in oklab, var(--or) 8%, transparent);
  font-family: var(--f-ui); font-weight: 300; font-size: 3.3cqi;
  letter-spacing: .06em; line-height: 1.45;
  color: color-mix(in oklab, var(--glose) 92%, var(--encre));
  /* Deux lignes au plus : « موقع أخبار انيفرار (niefrar.org) » tient sur une,
     mais un nom de revue long ne doit pas repousser le titre hors du cadre. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Le portrait de l'auteur — la seule image que possède un article. Rond, cerclé
   d'or, au-dessus du titre : la place de la vignette d'auteur dans la presse en
   ligne, qui se lit comme une signature et non comme une illustration.
   `object-position: top` : les portraits déposés sont cadrés large avec de l'air
   au-dessus ; centrés, ils coupent le menton. */
.couv--maqal .couv__portrait {
  flex: none; inline-size: 22cqi; block-size: 22cqi;
  border-radius: 50%; overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--or) 72%, transparent);
  box-shadow: 0 0 0 1cqi color-mix(in oklab, var(--fond-2) 90%, transparent),
              0 4px 12px -6px rgba(0,0,0,.35);
}
.couv--maqal .couv__portrait img { inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: top; display: block; filter: saturate(.92); }

.couv--maqal .couv__titre {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(5.6cqi, 7.8cqi, 9.5cqi); line-height: 1.45;
  color: var(--encre); text-shadow: none;
  text-wrap: balance; overflow-wrap: anywhere;
}
/* Avec le portrait, le titre cède un peu : deux éléments qui veulent le centre
   se disputent la hauteur, et c'est le titre qui déborderait du feuillet. */
.couv--maqal.couv--portrait .couv__titre { font-size: clamp(5cqi, 6.8cqi, 8.4cqi); }
.couv--maqal.couv--portrait .couv__cadre { gap: 2.4cqi; }
.couv--maqal.couv--portrait .couv__titre::after { margin-block-start: 2.6cqi; }
/* Le filet sous le titre : court et centré, il sépare le titre de la signature
   sans fermer la composition — un cadre en ferait un livre. */
.couv--maqal .couv__titre::after {
  content: ""; display: block; inline-size: 26%; block-size: 1px;
  margin: 3.4cqi auto 0; background: color-mix(in oklab, var(--or) 65%, transparent);
}
.couv--maqal .couv__auteur {
  font-family: var(--f-ui); font-size: 4cqi; line-height: 1.5;
  color: color-mix(in oklab, var(--glose) 88%, var(--encre));
}

/* Le pied : la nature de la pièce et sa date, de part et d'autre. La date est
   ce qui identifie un article — elle a sa place, pas une mention en passant. */
.couv--maqal .couv__pied {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: 2cqi;
  padding: 3cqi 5cqi;
  border-block-start: 1px solid color-mix(in oklab, var(--or) 34%, transparent);
  font-family: var(--f-ui); font-weight: 300; font-size: 3.2cqi; line-height: 1.4;
  color: color-mix(in oklab, var(--glose) 85%, transparent);
}
.couv--maqal .couv__nature { letter-spacing: .16em; }
.couv--maqal .couv__date { font-variant-numeric: tabular-nums; }

/* En vignette, la manchette et le pied deviennent illisibles : le titre reste
   seul, comme pour les deux autres registres. Les FILETS, eux, restent — c'est
   par eux qu'on reconnaît un article de loin. */
@container (max-width: 150px) {
  .couv--maqal .couv__manchette,
  .couv--maqal .couv__auteur,
  .couv--maqal .couv__portrait { display: none; }
  .couv--maqal .couv__pied { justify-content: center; }
  .couv--maqal .couv__nature { display: none; }
  .couv--maqal .couv__titre { font-size: 9.5cqi; }
  .couv--maqal.couv--portrait .couv__titre { font-size: 9.5cqi; }
  .couv--maqal .couv__cadre { padding: 6cqi 4cqi; }
}

/* ── Corrections propres à une palette ───────────────────────────────────── */

/* « السَّمَر » : le site est sombre, mais les couvertures scannées sont du papier
   blanc. Sans cet abaissement elles crèvent la page comme des dalles de néon. */
:root[data-palette="samar"] .fonds__img { filter: saturate(.85) brightness(.86); }
:root[data-palette="samar"] .fonds__img:hover { filter: none; }
/* « النهار » : fond blanc franc, les filets par transparence deviennent trop
   pâles pour structurer. On les renforce. */
:root[data-palette="nahar"] { --filet: 1px solid color-mix(in oklab, var(--brun) 45%, transparent); }
/* « الفجر » : même cas — fond très clair et brun froid peu contrasté. */
:root[data-palette="fajr"]  { --filet: 1px solid color-mix(in oklab, var(--brun) 45%, transparent); }

/* ============================================================================
 * VARIANTE « cartes » — hero à image pleine et carrousel chevauchant
 *
 * Geste emprunté à ithra.com : une photographie plein cadre TEINTÉE à la
 * couleur de marque (chez eux le violet, ici l'indigo), la barre de recherche
 * DANS l'image plutôt qu'en dessous, et des cartes qui débordent sur le bas du
 * hero pour lier deux sections au lieu de les empiler.
 *
 * Ce qu'on n'emprunte pas : les coins très arrondis, le turquoise et l'orange,
 * les pastilles de billetterie. C'est le langage d'un centre culturel qui vend
 * des entrées ; ici on publie des manuscrits. Angles vifs et filets d'or.
 *
 * L'image de fond n'est pas une photo d'ambiance : c'est une PAGE d'un des
 * ouvrages déposés. Le fonds se présente lui-même.
 * ========================================================================== */

.hero--cartes { padding-block: 0; }

.hero__fond {
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
  /* `saturate(0)` d'abord : la teinte doit venir UNIQUEMENT de la charte, pas
     du jaune du papier — c'est ce qui fait que l'image appartient au site au
     lieu d'y être posée.
     Et un flou d'1,5 px : sans lui on LIT le fond, et le regard quitte le
     titre pour déchiffrer une page qui n'est pas là pour ça. Flouté, le texte
     redevient ce qu'il doit être — une trame d'écriture. */
  filter: saturate(0) brightness(.4) contrast(1.05) blur(3px);
  opacity: .34;
  /* Le flou éclaircit les bords : on déborde pour ne pas voir le halo au ras
     du cadre. */
  scale: 1.06;
}
.hero__fond img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }

/* La teinte de marque, par-dessus l'image. Multiply garde le grain du papier
   au lieu de l'aplatir sous un voile opaque. */
.hero--cartes::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--profond); mix-blend-mode: multiply; opacity: .55;
}
.hero--cartes::after {
  /* Le fondu vers le bas : les cartes doivent émerger d'une zone sombre, sinon
     elles flottent sur du texte. */
  background:
    radial-gradient(70% 55% at 50% 30%, transparent 30%, color-mix(in oklab, var(--profond) 70%, transparent) 100%),
    linear-gradient(180deg, transparent 35%, var(--profond) 96%);
}

.hero--cartes .hero__grille {
  position: relative; z-index: 2;
  display: block; padding-block: clamp(4rem, 11vw, 8rem) clamp(9rem, 15vw, 12rem);
}
.hero--cartes .hero__tete { text-align: center; max-width: 46rem; margin-inline: auto; }
.hero--cartes .hero__titre { font-size: clamp(2.1rem, 6vw, 4rem); margin-bottom: 1.1rem;
                             text-shadow: 0 2px 24px rgba(0, 0, 0, .55); }
.hero--cartes .ask { margin-top: 2.25rem; }

/* ── Le carrousel ────────────────────────────────────────────────────────── */

.cartes {
  position: relative; z-index: 3;
  /* Le chevauchement : les cartes mordent sur le bas du hero. C'est ce
     décalage qui donne la profondeur — empilées, elles ne diraient rien. */
  margin-top: clamp(-9rem, -12vw, -7rem);
  padding-block: 0 clamp(2rem, 4vw, 3rem);
}
.cartes__cadre {
  overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none;
  padding-inline: clamp(1rem, 4vw, 2.75rem); padding-block: .5rem 1.25rem;
  /* Les cartes se dissolvent aux bords plutôt que d'être tranchées net. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.cartes__cadre::-webkit-scrollbar { display: none; }

.cartes__piste { display: flex; gap: 1.1rem; list-style: none; margin: 0; padding: 0;
                 width: max-content; }

.carte { flex: none; width: 15rem;
         animation: carte-pose .6s calc(var(--i, 0) * 70ms + 250ms) cubic-bezier(.2,.85,.3,1) backwards; }
@keyframes carte-pose { from { opacity: 0; translate: 0 2rem; } }
@media (max-width: 44rem) { .carte { width: 12.5rem; } }

.carte__lien { display: block; text-decoration: none; color: var(--sur-profond);
               background: color-mix(in oklab, var(--profond) 62%, #000);
               border: 1px solid color-mix(in oklab, var(--or) 34%, transparent);
               box-shadow: 0 26px 52px -30px #000;
               transition: translate .3s cubic-bezier(.2,.85,.3,1), border-color .3s, box-shadow .3s; }
.carte__lien:hover, .carte__lien:focus-visible {
  translate: 0 -.6rem; border-color: var(--or); box-shadow: 0 34px 60px -28px #000;
}

.carte__vue { position: relative; display: block; aspect-ratio: 3 / 3.9; overflow: hidden;
              background: var(--fond-2); }
.carte__vue img { width: 100%; height: 100%; object-fit: cover; object-position: top;
                  display: block; filter: saturate(.9); transition: scale .5s cubic-bezier(.2,.85,.3,1); }
.carte__lien:hover .carte__vue img { scale: 1.05; }

.carte__acces { position: absolute; inset-block-start: .6rem; inset-inline-start: .6rem;
                background: color-mix(in oklab, var(--profond) 88%, transparent);
                backdrop-filter: blur(4px); }

.carte__corps { display: grid; gap: .3rem; padding: .85rem .9rem 1rem;
                border-top: 1px solid color-mix(in oklab, var(--or) 22%, transparent); }
.carte__titre  { font-family: var(--f-display); font-weight: 700; font-size: .86rem; line-height: 1.5;
                 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                 overflow: hidden; }
.carte__auteur { font-family: var(--f-ui); font-weight: 300; font-size: .7rem;
                 color: color-mix(in oklab, var(--or) 78%, transparent);
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte__pages  { font-family: var(--f-ui); font-weight: 300; font-size: .66rem;
                 color: color-mix(in oklab, var(--sur-profond) 48%, transparent); }

/* ── Les flèches ────────────────────────────────────────────────────────── */

.cartes__gouvernail { display: flex; justify-content: center; gap: .5rem; margin-top: .25rem; }
.cartes__fleche {
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--sur-profond);
  border: 1px solid color-mix(in oklab, var(--or) 45%, transparent);
  transition: background .18s, border-color .18s, color .18s;
}
.cartes__fleche:hover { background: color-mix(in oklab, var(--or) 18%, transparent);
                        border-color: var(--or); color: var(--or); }
.cartes__fleche svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor;
                      stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* En RTL, « suivant » va vers la gauche : le chevron doit suivre la lecture. */
[dir="rtl"] .cartes__fleche svg { scale: -1 1; }

@media (prefers-reduced-motion: reduce) {
  .cartes__cadre { scroll-behavior: auto; }
}

/* ── Apparition au défilement ────────────────────────────────────────────── */

.apparait { opacity: 0; translate: 0 16px; transition: opacity .7s ease-out, translate .7s ease-out; }
.apparait.est-visible { opacity: 1; translate: 0 0; }

/* ── Accessibilité ───────────────────────────────────────────────────────── */

/* Le lien d'évitement se cache VERS LE HAUT et non sur le côté.
   `inset-inline-start: -9999px` est la recette classique, mais elle est écrite
   pour du LTR : en RTL, l'inline start est à DROITE, donc -9999px projette le
   lien 9999 px au-delà du bord droit et crée un débordement horizontal de toute
   la page. Le déplacer verticalement n'a pas ce défaut, dans les deux sens
   d'écriture. */
.saut-au-contenu { position: absolute; inset-inline-start: 1rem; top: 0;
                   translate: 0 -300%; background: var(--fond);
                   color: var(--encre); padding: .75rem 1rem; z-index: 50; }
.saut-au-contenu:focus { translate: 0 0; top: .5rem; }

:where(a, button, input):focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }

.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden;
                      clip-path: inset(50%); white-space: nowrap; }
.screen-reader-text:focus { position: static; width: auto; height: auto; clip-path: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .apparait { opacity: 1; translate: none; }
  .section__filet { scale: 1 1; }
  .majmuaa { animation: none; translate: none; transform: none; }
  /* Le défilement de la bande reste, il porte l'information ; c'est le saut
     animé qu'on retire, pas la possibilité de parcourir les 23. */
  .vitrine__cadre { scroll-behavior: auto; }
  .vitrine__place.est-loin { filter: none; opacity: .8; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * LA LISEUSE — « مطالعة الكتاب »
 *
 * Portée du thème de la Jamʿiyya Ahbaiyib, où elle sert depuis juillet 2026.
 * Les jetons de couleur sont ceux d'ici (--or, --profond-bas, --sur-profond) ;
 * la géométrie et le comportement sont repris tels quels.
 *
 * Elle vit DANS la page de l'ouvrage, elle n'occupe pas l'écran : on lit la
 * notice et le livre du même mouvement, sans changer de contexte.
 * ═══════════════════════════════════════════════════════════════════════ */

/* La visionneuse du fascicule. Elle emprunte volontairement la langue visuelle
   du feuilleteur de manuscrits (`.fx`) — même barre sombre, mêmes icônes de
   24, mêmes chevrons — pour qu'on lise un جزء et un مخطوط du même geste. Elle
   ne s'en sépare que sur un point : celle-ci vit DANS la page, quand l'autre
   occupe l'écran. D'où un jeu de règles distinct plutôt qu'un `.fx` étiré :
   mêler les deux aurait rendu chaque retouche risquée pour l'autre. */
.lis { position: relative; border: 1px solid color-mix(in oklab, var(--or) 30%, transparent); border-radius: 0;
  overflow: hidden; background: var(--profond-bas); color: var(--sur-profond); box-shadow: 0 26px 52px -26px rgba(0,0,0,.9);
  display: flex; flex-direction: column; }

.lis__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex: none;
  padding: .45rem clamp(.6rem, 1.6vw, 1rem); border-block-end: 1px solid color-mix(in oklab, var(--or) 22%, transparent);
  background: rgba(0,0,0,.22); }
.lis__id { min-inline-size: 0; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.lis__p { font-family: "Amiri", serif; font-size: clamp(.95rem, .8rem + .5vw, 1.15rem);
  color: var(--or); line-height: 1.25; font-variant-numeric: tabular-nums; }
.lis__sur { font-size: .82rem; color: color-mix(in srgb, var(--sur-profond) 70%, transparent); }
.lis__cmd { display: flex; gap: .18rem; flex: none; align-items: center;
  padding: .18rem; border-radius: 11px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1); }
.lis__b { inline-size: 30px; block-size: 30px; display: grid; place-items: center; cursor: pointer;
  color: color-mix(in srgb, var(--sur-profond) 78%, transparent); background: transparent;
  border: 0; border-radius: 8px; transition: background .2s, color .2s; }
.lis__b svg { inline-size: 17px; block-size: 17px; display: block; }
.lis__b:hover { background: rgba(255,255,255,.14); color: var(--or); }
.lis__b[aria-pressed="true"] { background: var(--or); color: #23180a; }
.lis__b:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

/* La scène ne défile PAS : elle porte les flèches, qui doivent rester en place
   quand la page grandit. C'est la ZONE, à l'intérieur, qui défile.
   ⚠ `flex: none`. Depuis que tout son contenu est en position absolue, la scène
   n'a plus de hauteur propre : avec `flex: 1` (donc `flex-basis: 0`) elle se
   réduisait à ses seules marges — 28 px — et la page s'affichait en timbre. Sa
   hauteur est désormais posée, pas déduite. */
.lis__scene { position: relative; flex: none;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(28,85,65,.5), transparent 70%), var(--profond-bas); }
.lis__zone { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain;
  padding: clamp(.5rem, 1.4vh, 1rem);
  /* La molette agrandit au lieu de défiler : le déplacement se fait au glissé,
     et le curseur doit l'annoncer. */
  cursor: grab; touch-action: pan-x pan-y pinch-zoom; }
.lis--tire .lis__zone { cursor: grabbing; }
/* `min-*: 100%` et non `100%` : la page centrée tant qu'elle tient, et libre de
   déborder dès qu'on agrandit — sans quoi elle serait rognée au lieu de défiler. */
.lis__vue { display: grid; place-items: center; min-inline-size: 100%; min-block-size: 100%;
  inline-size: max-content; block-size: max-content; }
/* La toile porte l'ombre d'une feuille posée : c'est une page de livre, pas une
   zone de rendu. Fond crème sous elle, le temps du rendu — un flash blanc pur
   sur ce vert sombre se voit comme un défaut.
   ⚠ Pas de `max-inline-size: 100%` : il écraserait la largeur posée par le
   script et le zoom n'irait jamais au-delà de la fenêtre. */
.lis__c { display: block; flex: none;
  border-radius: 2px; background: #e9e2d2; box-shadow: 0 18px 44px -20px rgba(0,0,0,.8);
  -webkit-user-drag: none; user-select: none; }
.lis__etat { position: absolute; inset-block-start: 50%; inset-inline: 0; text-align: center;
  font-size: .82rem; color: rgba(242,233,214,.75); font-family: "Amiri", serif; }
.lis__etat[hidden] { display: none; }
/* Le taux d'agrandissement, à côté du numéro de page : sans lui, « الحجم
   الحقيقي » ne se distingue d'un zoom voisin qu'à l'œil. */
.lis__z { font-size: .82rem; color: var(--or); font-variant-numeric: tabular-nums;
  padding-inline: .5rem; border-inline: 1px solid color-mix(in oklab, var(--or) 30%, transparent); }

.lis__nav { position: absolute; inset-block: 0; inline-size: clamp(42px, 7vw, 76px); z-index: 2;
  display: grid; place-items: center; cursor: pointer; border: 0; background: transparent;
  color: rgba(255,255,255,.5); transition: color .25s, background .25s; }
.lis__nav svg { inline-size: 28px; block-size: 28px; display: block; }
.lis__nav:hover { color: var(--or); background: linear-gradient(var(--sens), rgba(0,0,0,.3), transparent); }
.lis__nav:disabled { opacity: .22; cursor: default; background: none; color: rgba(255,255,255,.5); }
/* Positions PHYSIQUES, jamais logiques — même règle que `.fx__nav`, et pour la
   même raison : on progresse vers la GAUCHE dans un livre arabe, ce qui tient
   au LIVRE et non au sens du texte de la page. */
.lis__nav--suiv { left: 0;  --sens: 90deg; }
.lis__nav--prec { right: 0; --sens: -90deg; }
.lis__nav:focus-visible { outline: 2px solid var(--or); outline-offset: -6px; }

/* En plein écran, la scène prend toute la hauteur disponible. Sinon on la borne
   — mais largement : en « page entière » c'est la HAUTEUR qui décide de la
   taille du texte, et une scène courte donnait une page de 550 px, illisible
   pour de l'arabe scanné. On lui laisse presque toute la fenêtre ; la barre du
   site reste visible au-dessus, et le zoom fait le reste. */
.lis__scene { block-size: min(94svh, 1500px); }
.lis--plein { border: 0; border-radius: 0; }
/* En plein écran la scène reprend toute la place restante : là, `flex: 1` a un
   sens, car la hauteur vient du conteneur et non du contenu. */
.lis--plein .lis__scene { flex: 1; min-block-size: 0; block-size: auto; }

/* La liseuse déborde de la colonne de texte : une page A4 n'a pas à tenir dans
   une largeur pensée pour des paragraphes. Elle reste bornée, sinon la page
   entière se réduirait à un timbre au milieu d'un océan de vert.

   ⚠️ CORRIGÉ LE 07/08/2026 — la règle était :
       inline-size: min(1500px, 96vw); margin-inline: auto;
   et elle poussait la liseuse HORS DE L'ÉCRAN, à gauche, avec une barre de
   défilement horizontale sur toute la page. Deux fautes dans une ligne :

   1. `margin-inline: auto` NE CENTRE PAS un élément plus large que son
      conteneur. La mise en page est alors sur-contrainte, et CSS résout en
      forçant la marge de FIN : en RTL c'est la marge GAUCHE. Tout le
      débordement partait donc du même côté — 222 px à gauche, 0 à droite —
      au lieu d'être réparti. En LTR le défaut existait aussi, mais à droite,
      là où l'œil le pardonne ; en arabe il coupait la barre d'outils.

   2. `96vw` compte la BARRE DE DÉFILEMENT. Même centrée, la liseuse aurait
      dépassé de la moitié de sa largeur de chaque côté, et ce dépassement
      crée lui-même la barre : un cercle vicieux classique.

   La règle ci-dessous déborde SYMÉTRIQUEMENT, par marges négatives égales, et
   se calcule sur ce qui reste réellement autour du conteneur. Les `3rem`
   soustraits sont la marge de sûreté qui absorbe la barre de défilement et
   laisse la liseuse respirer contre le bord. Le `clamp()` la ramène à zéro
   sur mobile, où il n'y a rien à déborder. */
.ouvrage__lecture .lis {
  --lis-debord: clamp(0rem, (100vw - 100% - 3rem) / 2, 10rem);
  inline-size: min(1500px, calc(100% + 2 * var(--lis-debord)));
  margin-inline: calc(-1 * var(--lis-debord));
}

.lis__tiroir { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  background: rgba(6,20,15,.82); backdrop-filter: blur(3px); padding: 1rem; }
.lis__tiroir[hidden] { display: none; }
.lis__tiroir__in { position: relative; inline-size: min(420px, 100%);
  background: #102b21; border: 1px solid color-mix(in oklab, var(--or) 26%, transparent); border-radius: 0;
  padding: 1.4rem 1.3rem 1.2rem; box-shadow: 0 30px 70px -30px #000; }
.lis__tiroir__in h3 { font-family: "Amiri", serif; color: var(--or); font-size: 1.1rem;
  margin-block-end: .8rem; }
.lis__tiroir__x { position: absolute; inset-block-start: .5rem; inset-inline-end: .6rem;
  inline-size: 28px; block-size: 28px; border: 0; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.07); color: var(--sur-profond); }
.lis__tiroir__x:hover { background: rgba(190,60,50,.3); }
.lis__tiroir__n { margin-block-start: .6rem; font-size: .82rem; color: rgba(242,233,214,.6); }
.lis__aller { display: flex; gap: .5rem; }
.lis__aller input { flex: 1; min-inline-size: 0; padding: .55rem .7rem; border-radius: 9px;
  border: 1px solid color-mix(in oklab, var(--or) 26%, transparent); background: rgba(0,0,0,.25); color: var(--sur-profond);
  font: inherit; }
.lis__aide { list-style: none; display: grid; gap: .5rem; font-size: .82rem; }
.lis__aide b { display: inline-grid; place-items: center; min-inline-size: 2.4em; padding: .12rem .4rem;
  margin-inline-end: .5rem; border-radius: 6px; background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14); color: var(--or); font-family: system-ui, sans-serif; }

@media (max-width: 620px) {
  .lis__scene { block-size: 68svh; }
  .lis__sur { display: none; }
}

/* ── La page d'un ouvrage ──────────────────────────────────────────────────
 * Notice à droite, couverture à gauche, puis la liseuse en pleine largeur.
 * La couverture est étroite exprès : c'est un repère de reconnaissance, pas le
 * sujet — le sujet est la notice, puis le livre.
 */
.ouvrage { padding-block: clamp(2rem, 5vw, 3.5rem); }
.ouvrage__tete { display: grid; gap: clamp(1.5rem, 4vw, 3rem);
                 grid-template-columns: minmax(9rem, 15rem) 1fr; align-items: start;
                 margin-bottom: clamp(2rem, 5vw, 3.5rem); }
@media (max-width: 44rem) { .ouvrage__tete { grid-template-columns: 1fr; }
                            .ouvrage__couv { max-width: 13rem; } }

.ouvrage__titre  { font-size: clamp(1.4rem, 3.4vw, 2.1rem); line-height: 1.4; margin: 0 0 .5rem; }
.ouvrage__auteur { font-family: var(--f-ui); font-size: .95rem; margin: 0 0 1.4rem; }
.ouvrage__auteur a { color: var(--glose); text-decoration: none;
                     box-shadow: 0 1px 0 color-mix(in oklab, var(--or) 50%, transparent); }
.ouvrage__auteur a:hover { color: var(--brun); }

/* Une définition par ligne, l'intitulé en discret : c'est une notice de
   catalogue, pas un tableau — on la parcourt du regard. */
.ouvrage__faits { margin: 0 0 1.4rem; display: grid; gap: .45rem; }
.ouvrage__fait  { display: flex; gap: .6rem; align-items: baseline; font-size: .92rem; }
.ouvrage__fait dt { font-family: var(--f-ui); font-weight: 300; opacity: .58;
                    min-width: 6.5rem; flex: none; }
.ouvrage__fait dd { margin: 0; }

.ouvrage__acces { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 1.2rem; }
.ouvrage__mj { font-family: var(--f-ui); font-weight: 300; font-size: .72rem;
               padding: .12rem .5rem; text-decoration: none; color: var(--glose);
               border: 1px solid color-mix(in oklab, var(--brun) 32%, transparent); }
.ouvrage__mj:hover { border-color: var(--or); color: var(--brun); }
.ouvrage__texte { max-width: var(--mesure); line-height: var(--lh-texte); }

.ouvrage__lecture { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.ouvrage__note  { margin: .9rem 0 0; opacity: .6; font-size: .78rem; }
.ouvrage__vide  { padding: 2.5rem 1.5rem; text-align: center; border: var(--filet);
                  background: var(--fond-2); opacity: .75; }

/* Le texte publié ailleurs. Pas un `.ouvrage__vide` grisé : il n'y a rien
   d'absent ici — l'œuvre existe et elle est lisible, simplement pas chez nous.
   Le cartouche est donc plein, et le lien porte le filet d'or, qui sur ce site
   ne trace que le lien entre deux entités. */
.ouvrage__ailleurs { padding: clamp(1.5rem, 4vw, 2.2rem); border: var(--filet);
                     background: var(--fond-2); text-align: center; }
.ouvrage__ailleurs__t { margin: 0 auto; max-width: var(--mesure);
                        font-family: var(--f-ui); font-weight: 300; font-size: .86rem;
                        line-height: 1.85; color: var(--glose); }
.ouvrage__ailleurs__l { display: inline-block; margin-top: 1.3rem; padding: .6rem 1.6rem;
                        font-family: var(--f-ui); font-weight: 300; font-size: .88rem;
                        text-decoration: none; color: var(--encre);
                        border: 1px solid var(--or);
                        transition: background .2s, color .2s; }
.ouvrage__ailleurs__l:hover,
.ouvrage__ailleurs__l:focus-visible { background: color-mix(in oklab, var(--or) 16%, transparent); }

/* ══════════════════════════════════════════════════════════════════════════
 * LE TEXTE INTÉGRAL D'UN ARTICLE — « المقال »
 *
 * Quand la commission a le droit de republier un texte, on le publie pour de
 * bon : lisible, composé, sans avoir à sortir du site. C'est la différence
 * entre un catalogue qui renvoie ailleurs et une bibliothèque qui donne à lire.
 *
 * ── Ce qui fait la lisibilité d'une prose arabe suivie ────────────────────
 *   · la MESURE avant tout : 34 em. Au-delà, l'œil perd la ligne au retour, et
 *     l'arabe le pardonne moins que le latin — la ligne de base est continue,
 *     il n'y a pas de majuscules pour se raccrocher ;
 *   · l'INTERLIGNE de `--lh-texte` (1,9), qui est déjà calibré pour du texte
 *     vocalisé — les diacritiques ont besoin de la place au-dessus ;
 *   · Amiri, la seule libre qui tienne un paragraphe avec تشكيل ;
 *   · un BLANC franc entre paragraphes plutôt qu'un alinéa : la composition
 *     arabe moderne ne renfonce pas.
 *
 * ── Une page posée sur le site ────────────────────────────────────────────
 * Le texte n'est pas jeté sur le fond de la page : il est dans un cartouche
 * clair, encadré d'un filet, avec une marge généreuse. C'est ce qui le fait
 * lire comme un DOCUMENT et non comme une section de plus.
 * ═══════════════════════════════════════════════════════════════════════ */

.maqal { margin-top: clamp(2rem, 5vw, 3.25rem);
         padding: clamp(1.8rem, 5vw, 4rem) clamp(1.2rem, 4vw, 3rem);
         background: var(--fond-2); border: var(--filet); }

/* Trois losanges d'or, décroissants : l'ornement de tête d'un chapitre. Le
   vocabulaire du frontispice, déjà employé par la couverture et le cartouche
   « اسأل الخزانة » — on n'invente pas un troisième registre. */
.maqal__tete { display: flex; align-items: center; justify-content: center; gap: .55rem;
               margin-block-end: clamp(1.6rem, 4vw, 2.4rem); }
.maqal__tete span { inline-size: .42rem; block-size: .42rem; rotate: 45deg;
                    background: var(--or); opacity: .75; }
.maqal__tete span:nth-child(2) { inline-size: .58rem; block-size: .58rem; opacity: 1; }

/* La MESURE est portée par les paragraphes, pas par le bloc.
 *
 * Brider le conteneur bridait aussi les fac-similés, qui se retrouvaient à
 * 280 px : une page de manuscrit se regarde en grand, une phrase se lit en
 * étroit. Les deux besoins sont contradictoires, donc les deux règles sont
 * séparées. */
/* ── LE SOMMAIRE — « محتويات المقال » ─────────────────────────────────────
 * Posé à la mesure du texte, pas en pleine largeur : il fait partie de la
 * lecture, il ne l'annonce pas depuis l'extérieur. Numéroté en chiffres
 * arabes-indiens par `counter()` — la liste `<ol>` par défaut sortirait « 1. »,
 * seul chiffre latin d'une page qui n'en a aucun autre. */
.maqal__sommaire {
  /* La même colonne physique que le corps — voir `--mesure-corps` plus bas. */
  max-inline-size: 37rem; margin: 0 auto clamp(2rem, 5vw, 3rem);
  padding: 1.1rem clamp(1rem, 3vw, 1.6rem);
  background: color-mix(in oklab, var(--or) 6%, transparent);
  border-inline-start: 2px solid color-mix(in oklab, var(--or) 55%, transparent);
}
.maqal__sommaire__t {
  font-family: var(--f-ui); font-weight: 600; font-size: .82rem;
  letter-spacing: .1em; color: var(--glose);
  margin: 0 0 .7rem; padding: 0; border: 0;
}
.maqal__sommaire ol { list-style: none; margin: 0; padding: 0; counter-reset: fasl; }
.maqal__sommaire li { counter-increment: fasl; margin-block-end: .42rem; line-height: 1.6; }
.maqal__sommaire li:last-child { margin-block-end: 0; }
.maqal__sommaire li::before {
  content: counter(fasl, arabic-indic) " · ";
  color: var(--or); font-variant-numeric: tabular-nums;
}
.maqal__sommaire a {
  font-family: var(--f-texte); font-size: 1rem; color: var(--brun);
  text-decoration: none; box-shadow: 0 1px 0 transparent; transition: box-shadow .2s, color .2s;
}
.maqal__sommaire a:hover { color: var(--encre);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--or) 70%, transparent); }

/* La cible d'une ancre s'arrête sous l'en-tête collant si on ne l'en écarte
   pas : le titre visé se retrouve caché derrière la barre du site. */
.maqal__corps > h2 { scroll-margin-block-start: 6rem; }

.maqal__corps { font-family: var(--f-texte); font-size: 1.09rem;
                line-height: var(--lh-texte); color: var(--encre);
                text-align: justify; text-justify: inter-word; }
/* ⚠️ LA MESURE EN `rem`, PAS EN `em` — corrigé le 07/08/2026.
 *
 * `--mesure` vaut `34em`, et `em` se résout sur la taille de police de CHAQUE
 * élément. Un titre composé en 1,62 rem recevait donc une colonne de 881 px là
 * où les paragraphes en recevaient 593 : les titres dépassaient de 144 px de
 * chaque côté du texte qu'ils annonçaient. C'est invisible tant qu'on ne mesure
 * pas, et c'est très visible une fois qu'on l'a vu.
 *
 * 37 rem = 34 × 1,09 rem, la mesure du corps de texte. Tous les blocs partagent
 * ainsi la MÊME colonne physique, quelle que soit leur taille de police. */
.maqal__corps { --mesure-corps: 37rem; }
.maqal__corps > p,
.maqal__corps > blockquote,
.maqal__corps > h2, .maqal__corps > h3,
.maqal__corps > .nazm,
.maqal__corps > ul, .maqal__corps > ol { max-inline-size: var(--mesure-corps); margin-inline: auto; }
/* ⚠️ `margin-block`, PAS `margin`. La règle disait `margin: 0 0 1.35em`, et le
 * raccourci remettait à zéro les marges LATÉRALES posées juste au-dessus par
 * `margin-inline: auto`. À spécificité égale, la dernière l'emportait : les
 * paragraphes étaient collés au bord droit du cartouche pendant que les titres,
 * les vers et les citations restaient centrés. Le décalage était de 220 px, et
 * il expliquait une bonne part de l'impression de mise en page bancale — le
 * texte ne tombait pas sous le titre qui l'annonçait. */
.maqal__corps p { margin-block: 0 1.35em; }

/* ⚠️ PAS DE صدر المقال — retiré le 07/08/2026, sur remarque du client.
 *
 * Le premier paragraphe était composé un cran plus grand, en équivalent arabe
 * de la lettrine. L'intention se défendait ; le résultat non. Le lecteur ne
 * voyait pas un ornement d'ouverture, il voyait un paragraphe dont le corps ne
 * correspondait pas au reste — donc une erreur de composition.
 *
 * La lettrine fonctionne parce qu'elle porte sur UNE lettre : on comprend au
 * premier coup d'œil que c'est un ornement. Étalée sur un paragraphe entier,
 * la même idée devient une incohérence de corps, et rien ne dit au lecteur
 * qu'elle est voulue.
 *
 * L'entrée du texte est déjà annoncée ailleurs, et mieux : le RÉSUMÉ, dans la
 * colonne de notice (`.ouvrage__chapeau`), qui est un élément distinct et se
 * lit comme tel. C'est la solution de la presse en ligne — un chapeau séparé,
 * pas un premier paragraphe déguisé.
 *
 * Le corps du texte est donc UNIFORME du premier mot au dernier. */

/* ── LES TITRES DE SECTION ─────────────────────────────────────────────────
 * Rétablis le 07/08/2026. Les trois articles étaient publiés en une file de
 * paragraphes identiques — 91, 17 et 222 — parce que l'extraction avait tout
 * aplati : l'original, lui, est découpé en sections titrées. Sans elles, un
 * texte de trente mille caractères n'offre aucune prise, et c'est exactement
 * ce que le client a vu.
 *
 * BEAUCOUP D'AIR AU-DESSUS, PEU EN DESSOUS. C'est la règle qui fait qu'un titre
 * se rattache à ce qui SUIT et non à ce qui précède — sans elle il flotte entre
 * deux blocs et le lecteur hésite. Le rapport est d'environ 3 pour 1.
 *
 * Le losange qui l'ouvre est le même que celui de `.maqal__tete`, de la
 * couverture de manuscrit et du cartouche « اسأل الخزانة » : un seul ornement
 * pour tout le site, décliné, plutôt que quatre inventions. */
.maqal__corps > h2 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.28rem, 1.1rem + .8vw, 1.62rem); line-height: 1.5;
  color: var(--encre); text-align: start; text-wrap: balance;
  margin: 2.6em auto .85em; padding-block-end: .5rem;
  border-block-end: 1px solid color-mix(in oklab, var(--or) 42%, transparent);
  display: flex; align-items: baseline; gap: .6rem;
}
.maqal__corps > h2::before {
  content: ""; flex: none; inline-size: .5rem; block-size: .5rem;
  rotate: 45deg; background: var(--or); translate: 0 -.15rem;
}
/* Un titre juste après le صدر المقال n'a pas besoin de ses 2,6em : le texte
   vient de commencer, il n'y a rien dont il faille le détacher. */
.maqal__corps > p:first-child + h2 { margin-block-start: 1.4em; }

/* ── LE نظم — deux hémistiches, une gouttière ──────────────────────────────
 * Le صدر et le عجز étaient séparés par un ۞ au fil du texte, et plusieurs بيت
 * se retrouvaient soudés dans un même paragraphe : la poésie se lisait comme de
 * la prose. Elle occupe maintenant sa propre colonne double, et le ۞ est devenu
 * la GOUTTIÈRE — c'est la présentation des diwans imprimés.
 *
 * Bords extérieurs alignés, blanc au centre : avec des hémistiches de longueurs
 * inégales — la règle en حساني —, c'est la seule répartition qui garde une
 * colonne droite. Tout pousser vers le centre donnerait deux bords déchiquetés.
 *
 * ⚠️ `text-align` posé explicitement sur chaque moitié : `.maqal__corps` est en
 * `justify`, et un hémistiche justifié s'étire jusqu'à la gouttière en écartant
 * ses mots. Un vers ne se justifie jamais. */
.maqal__corps .nazm {
  margin: 1.9em auto; padding: 1.15em clamp(.8rem, 3%, 1.6rem);
  background: color-mix(in oklab, var(--or) 5%, transparent);
  border-block: 1px solid color-mix(in oklab, var(--or) 26%, transparent);
  font-size: 1.02rem; line-height: 1.95;
}
.maqal__corps .bayt {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 clamp(1rem, 5%, 2.4rem); margin: 0 0 .35em;
}
.maqal__corps .bayt:last-child { margin-block-end: 0; }
.maqal__corps .sadr { text-align: start; }
.maqal__corps .ajz  { text-align: end; }
/* Les lignes où le ۞ tombait dans un mot : posées telles quelles, centrées.
   Voir `vers()` dans tools/structurer-articles.py. */
.maqal__corps .bayt--brut { display: block; text-align: center; }

/* Sous la mesure d'un vers double, les deux hémistiches s'empilent. Le عجز est
   décalé pour qu'on voie qu'il appartient au vers d'au-dessus et n'en ouvre pas
   un nouveau — c'est ce que fait le blanc de la gouttière en pleine largeur. */
@media (max-width: 34rem) {
  .maqal__corps .bayt { grid-template-columns: 1fr; gap: 0; margin-block-end: .8em; }
  .maqal__corps .ajz { text-align: start; padding-inline-start: 1.6rem; }
}

/* Les citations : en retrait, sans guillemets ajoutés — le texte source porte
   déjà sa ponctuation.
   ⚠️ `margin-block` et non `margin` : même piège que pour les paragraphes, le
   raccourci écrasait le `margin-inline: auto` et sortait la citation de la
   colonne. */
.maqal__corps blockquote { margin-block: 1.8em; padding-inline-start: 1.2rem;
                           border-inline-start: 2px solid color-mix(in oklab, var(--or) 55%, transparent);
                           color: var(--glose); font-size: .98rem; }

/* Le crédit, en pied de texte. On lit d'abord, on vérifie ensuite — mais la
   vérification est à un clic, et la republication est déclarée. */
/* 37 rem, la colonne du corps — et non `--mesure`, qui en `em` sur un texte de
   0,78 rem donnerait un filet de crédit 170 px plus court que le texte qu'il
   ferme. Même correction que pour les titres. */
.maqal__source { max-inline-size: 37rem; margin: clamp(2rem, 5vw, 3rem) auto 0;
                 padding-block-start: 1.2rem; border-top: var(--filet);
                 font-family: var(--f-ui); font-weight: 300; font-size: .78rem;
                 line-height: 1.8; color: var(--glose); }
.maqal__source a { color: var(--brun); text-decoration: none;
                   box-shadow: 0 1px 0 color-mix(in oklab, var(--or) 60%, transparent); }
.maqal__source a:hover { color: var(--encre); }

/* Le chapeau, dans la colonne de notice : le résumé prend la place que le
   texte intégral ne peut pas y tenir. */
.ouvrage__chapeau { max-width: var(--mesure); margin: 1.2rem 0 0;
                    font-family: var(--f-texte); font-size: 1rem;
                    line-height: 1.85; color: var(--glose); }

/* ── La planche de fac-similés ────────────────────────────────────────────
 * Les feuillets dont l'article parle. Ils DÉBORDENT la mesure du texte, et
 * c'est voulu : un document se regarde en grand, une phrase se lit en étroit.
 * Chacun est encadré d'un filet — c'est une pièce d'archive, pas une photo
 * d'ambiance. */
.planche { margin: clamp(2rem, 5vw, 3rem) auto 0; max-inline-size: min(100%, 54rem); }
.planche__vues { display: grid; gap: 1rem;
                 grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
                 align-items: start; }
.planche__vues img { inline-size: 100%; block-size: auto; display: block;
                     border: var(--filet); background: #fff; }
.planche figcaption { margin-block-start: .9rem; text-align: center;
                      font-family: var(--f-ui); font-weight: 300; font-size: .76rem;
                      color: var(--glose); }

/* ══════════════════════════════════════════════════════════════════════════
 * LA PAGE « اسأل المكتبة »
 *
 * Le hero garde la question, cette page porte la RÉPONSE — c'est elle qui a
 * besoin de place : huit cents caractères, quatre sources avec leurs pages,
 * des questions de suite.
 *
 * ── Pourquoi elle n'est PAS sombre ────────────────────────────────────────
 * Elle l'a été, par mimétisme avec le hero : « c'est le même objet, agrandi ».
 * L'argument ne tient pas à l'usage. Le hero est une vitrine qu'on traverse ;
 * ici on LIT, longuement, un texte qui peut faire mille signes et qu'on relit
 * en remontant vers les sources. Un mur d'indigo derrière une carte de papier
 * convient à un coup d'œil, pas à dix minutes de lecture — et il écrasait la
 * carte au lieu de la porter.
 *
 * Fond clair, donc, et c'est le parchemin qui reste l'objet : la page devient
 * la table sur laquelle il est posé. Le rapport est le même que sur le site
 * de l'ONG Habeyib, dont le lecteur reconnaîtra la mécanique.
 * ═══════════════════════════════════════════════════════════════════════ */
.isal { background: var(--fond); color: var(--encre);
        padding-block: clamp(2.5rem, 6vw, 4.5rem); min-height: 60svh; }
.isal__tete { text-align: center; max-width: 44rem; margin: 0 auto clamp(1.5rem, 4vw, 2.5rem); }
.isal__titre { font-size: clamp(1.8rem, 4.4vw, 2.8rem); margin: 0 0 .7rem; }
.isal__sous { font-family: var(--f-ui); font-weight: 300; font-size: .95rem;
              line-height: 1.8; opacity: .72; margin: 0; }
.isal__texte { max-width: var(--mesure); margin: clamp(2rem, 5vw, 3rem) auto 0;
               line-height: var(--lh-texte); opacity: .82; }
.isal__texte a { color: var(--or); }

/* ══════════════════════════════════════════════════════════════════════════
 * LA CARTE DEVIENT UNE MESSAGERIE
 *
 * Trois bandes empilées, et l'ordre ne bouge jamais : la portée en haut (elle
 * gouverne tout), le FIL au milieu — seule zone qui défile —, la saisie en bas.
 * Le geste est toujours au même endroit ; c'est ce qui distingue une
 * conversation d'un formulaire, où la page entière se réorganise à chaque envoi.
 *
 * Le fil est BORNÉ en hauteur, et c'est le point. Si la carte grandissait avec
 * la conversation, le champ de saisie descendrait hors de l'écran à la
 * troisième question : il faudrait faire défiler la page pour poser la
 * suivante. Borné, il reste sous les yeux quelle que soit la longueur du fil.
 *
 * Et son ombre s'allège : celle du hero est calculée pour du papier posé sur
 * une salle sombre. Sur la table claire de cette page, la même ombre fait une
 * flaque de suie sous la carte.
 * ═══════════════════════════════════════════════════════════════════════ */
.ask--page { max-width: 58rem; margin-top: 0;
             display: flex; flex-direction: column; min-height: 0;
             box-shadow: 0 30px 60px -46px color-mix(in oklab, var(--brun) 90%, #000),
                         0 2px 0 color-mix(in oklab, var(--or) 40%, transparent),
                         inset 0 1px 0 #fff; }
.ask--page:focus-within { box-shadow: 0 34px 66px -44px color-mix(in oklab, var(--brun) 90%, #000),
                                      0 2px 0 var(--or), inset 0 1px 0 #fff; }

/* ── Le fil ────────────────────────────────────────────────────────────── */
.ask__fil {
  text-align: start; display: flex; flex-direction: column; gap: 1.6rem;
  /* `min-height` en plus du max : sans lui la carte se rétracte sur l'accueil
     puis bondit à la première réponse, et toute la page saute avec elle. */
  min-block-size: 14rem; max-block-size: min(58vh, 34rem);
  overflow-y: auto; overscroll-behavior: contain;
  padding-block: .4rem; padding-inline-end: .5rem; margin-block-end: 1.1rem;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--brun) 40%, transparent) transparent;
}
.ask__fil::-webkit-scrollbar { inline-size: 7px; }
.ask__fil::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--brun) 34%, transparent); }

/* L'accueil : ce que dit la bibliothèque avant qu'on lui ait rien demandé. */
.ask__accueil { display: flex; flex-direction: column; gap: .2rem; }
.ask__hello { margin: 0; font-family: var(--f-ui); font-weight: 300;
              font-size: .88rem; line-height: 1.85;
              color: color-mix(in oklab, var(--encre) 62%, transparent); }
.ask__accueil .ask__pastilles { justify-content: flex-start; }

/* ── Le lecteur parle : une bulle d'indigo ────────────────────────────────
   Angles vifs, comme tout le reste — une bulle arrondie est le vocabulaire des
   messageries, pas celui d'une bibliothèque. Ce qui la désigne comme parole,
   c'est la couleur pleine et le côté où elle se range. */
.msg--moi { display: flex; justify-content: flex-end; }
.msg__bulle { max-inline-size: 82%; padding: .65rem 1rem; line-height: 1.85;
              font-size: .98rem;
              color: var(--sur-profond); background: var(--profond);
              border-inline-end: 2px solid var(--or); }

/* ── La bibliothèque répond : une initiale, puis du texte nu ──────────────
   Pas de bulle. C'est du texte de livre, qui se lit ; l'encadrer en ferait un
   message de service. L'initiale est en `--sur-profond` et non en or : l'or ne
   trace que le lien et les filets, jamais du texte (cf. la charte). */
.msg--mkt { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; }
.msg__ava { inline-size: 2.2rem; block-size: 2.2rem; display: grid; place-items: center;
            font-family: var(--f-display); font-weight: 700; font-size: 1rem; line-height: 1;
            color: var(--sur-profond); background: var(--profond);
            border: 1px solid color-mix(in oklab, var(--or) 55%, transparent); }
.msg__corps { min-inline-size: 0; }
/* Dans le fil, la réponse n'a plus de filet de séparation : c'est le fil qui
   sépare les tours. Le filet servait quand elle remplaçait le formulaire. */
.msg__corps .reponse { margin: 0; padding: 0; border-top: 0; }

/* ── La barre de saisie, ancrée ──────────────────────────────────────────── */
.ask--page .ask__ligne { flex: none; }

/* ── Le sélecteur de portée ────────────────────────────────────────────────
 * Un `<select>` natif, et c'est voulu : il encaisse deux cents titres sans
 * changer de forme, se manipule au clavier, et le navigateur y ajoute la
 * recherche par frappe et le menu natif du mobile. Les boutons faisaient déjà
 * trois rangées avec huit ouvrages.
 */
.ask__portee { display: flex; align-items: center; justify-content: center;
               flex-wrap: wrap; gap: .6rem; margin-bottom: 1.1rem; }
.ask__portee__l { font-family: var(--f-ui); font-weight: 300; font-size: .78rem; opacity: .6; }
/* ⚠️ Sur le PARCHEMIN, comme le champ de saisie : le sélecteur était resté en
   ivoire sur un aplat noir translucide, hérité de la carte sombre d'avant. Il
   faisait une pastille sombre au milieu du papier. */
.ask__select {
  font-family: var(--f-ui); font-size: .88rem; color: var(--encre);
  background: #fff;
  border: 1px solid color-mix(in oklab, var(--or) 42%, transparent);
  padding: .5rem 2rem .5rem .8rem; max-width: min(28rem, 100%); cursor: pointer;
  /* Le chevron dessiné : les flèches natives sont grises et cassent le
     cartouche doré. En arrière-plan plutôt qu'en pseudo-élément — un `<select>`
     n'accepte pas d'enfant. */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: .85rem calc(50% - 1px), calc(.85rem + 5px) calc(50% - 1px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  transition: border-color .2s;
}
.ask__select:hover, .ask__select:focus-visible { border-color: var(--or); }
/* Le menu déroulant est peint par le système, qui n'hérite pas des couleurs du
   `<select>` chez tout le monde. On force les deux. */
.ask__select option, .ask__select optgroup { background: var(--fond); color: var(--encre); }
.ask__select optgroup { font-family: var(--f-display); font-weight: 700; }