/*
 * Ekdotis — feuille de style du thème parent.
 *
 * Sans framework, sans dépendance externe, sans build (CDC § 1.4).
 * Grid, Flexbox, custom properties, clamp(), container queries.
 *
 * À ce stade, ce fichier ne déclare que le vocabulaire de base. Aucune règle
 * de mise en page : elles arriveront avec les gabarits du CDC § 17.
 *
 * Deux règles de nommage :
 *
 * — par rôle, jamais par teinte. Un nom de couleur ment dès le premier client
 *   qui change de palette ; un nom de rôle reste vrai.
 * — sans préfixe. Le thème parent n'existe que pour être surchargé (§ 1.3) et
 *   il n'y a aucun autre CSS dans le périmètre. Une surcharge client s'écrit
 *   donc au plus court, dans le style.css de l'enfant :
 *
 *     :root { --accent: #7A1F2B; }
 */

:root {
	/*
	 * COULEURS — UN RÔLE, UN NOM.
	 *
	 * Nommées par rôle et sans préfixe : le parent n'a aucun autre CSS à
	 * côtoyer, et c'est ce qui permet à un thème enfant de changer l'identité
	 * du site en une trentaine de lignes.
	 *
	 * Le vocabulaire a été DÉDOUBLÉ un temps : une seconde série `--color-*`
	 * est arrivée avec la maquette de fiche livre et nommait les mêmes rôles.
	 * Un enfant devait alors poser chaque valeur deux fois, faute de quoi la
	 * moitié de la page restait au défaut. Les deux séries sont fusionnées ici.
	 *
	 * CONTRASTES À PRÉSERVER, mesurés sur la maquette :
	 *   --text-faint sur blanc ........... 4,54:1
	 *   --alert sur --surface-alt ........ 4,9:1
	 *   --accent sur --accent-soft ....... 11:1
	 *   --text-on-accent sur --accent .... 4,5:1
	 *
	 * Deux teintes ont été écartées en maquette pour échec AA et ne doivent
	 * pas revenir : #EFB739 sur crème (1,9:1), #5563FF sur #ECECF8 (3,9:1).
	 */
	--text: #1a1a1a;
	--text-muted: #4a4a4a;
	--text-faint: #767676;

	--surface: #ffffff;
	--surface-alt: #f6f4f0;

	--accent: #7a2e2e;
	--accent-soft: #f2ecec;
	--text-on-accent: #ffffff;
	/*
	 * Texte atténué sur l'aplat d'accent — liens de menu, mentions du pied.
	 * RÔLE DÉRIVÉ, jamais saisi : trois quarts de texte sur accent, un quart
	 * d'accent, part relevée jusqu'au seuil si l'accent est clair (socle,
	 * `ekdotis_derive_text_on_accent_muted()`). La valeur ci-dessous est celle
	 * de la palette Encre, 5,98:1 sur son accent ; toute autre palette l'écrase
	 * par la feuille d'identité.
	 */
	--text-on-accent-muted: #decbcb;

	--alert: #9c5c00;

	/*
	 * Trois filets, trois usages.
	 *
	 * --border trace les séparateurs décoratifs : rien n'y est porteur
	 * d'information, aucun seuil de contraste ne s'y applique.
	 *
	 * --border-soft est le même filet, en plus discret, là où il ne fait que
	 * marquer une respiration — la ligne au-dessus d'« Existe aussi en ».
	 *
	 * --border-strong cerne les composants d'interface, et doit atteindre
	 * 3:1 sur le fond. Il est déclaré plus bas, avec son motif.
	 */
	--border: #dcd8d2;
	--border-soft: #e6e2dc;

	/*
	 * Le lien, quand il doit se distinguer du texte courant. Le repli neutre
	 * est la couleur d'accent : un enfant qui la surcharge emmène les liens
	 * avec elle, ce qui est le comportement attendu par défaut.
	 */
	--link: var(--accent);

	/*
	 * Fiche livre — mesures de la maquette.
	 *
	 * --cover-single-width est la largeur d'affichage de la couverture sur la
	 * fiche. Le § 17.15 la fixe à 390 px depuis le 26 août, pour un fichier de
	 * 780 px : le doublement est nécessaire aux écrans à haute densité, et le
	 * recadrage reste désactivé — la hauteur suit le rapport de l'original.
	 *
	 * C'est la mesure du produit, et elle suppose des couvertures fournies en
	 * haute définition — exigence de montage, § 17.15. Le fonds de chantier ne
	 * la tient pas ; il sert à vérifier qu'une fiche pauvre tient debout, pas à
	 * décider d'une mesure.
	 */
	--book-aside-width: 300px;
	--book-columns-gap: 48px;
	--book-prizes-width: 292px;

	/* § 4.2 — largeur du portrait d'auteur. Elle vaut 292 px comme l'encadré
	   de distinctions, et c'est une coïncidence : deux choses sans rapport qui
	   partagent un nombre ne partagent pas une variable. */
	--portrait-width: 292px;

	/* Aligne le titre de la mise en avant sur le haut de sa couverture. */
	--derniere-parution-titre-marge: 20px;

	/* § 4.1 — borne de lisibilité de la biographie. Plus large que celle du
	   livre : une notice biographique se lit d'un trait, un descriptif se
	   parcourt. */
	--prose-width: 90ch;

	/* § 4 — gouttière de la fiche auteur. Elle suit celle du livre par défaut,
	   et peut s'en détacher : les deux grilles n'ont pas le même contenu. */
	--author-columns-gap: var(--book-columns-gap);
	/* L'écart unique des deux fiches, livre et auteur (14 octobre) : d'une
	   rubrique à la suivante, et sur la fiche auteur de l'en-tête à la première
	   rubrique — 36 px, la règle de Phil : 36 entre deux éléments, 24 à
	   l'intérieur d'un élément. Il remplace --auteur-ecart et --rubrique-ecart
	   (42 px au parent, 36 en mobile, 52 / 56 / 64 dans les formes). */
	--fiche-ecart: var(--space-l);
	/* L'encadré (14 octobre) : la biographie de la fiche auteur et le contenu
	   des pages standard — fond, filet vertical à gauche, retraits et colonne
	   de texte, posés par une forme ; au parent, transparent, nul, et la
	   colonne de lecture — rien ne change. Renommés au § 2.74 : ils ne servaient qu'à la biographie. */
	--encadre-fond: transparent;
	--encadre-filet: 0px;
	--encadre-retrait-bloc: 0px;
	--encadre-retrait-cote: 0px;
	--encadre-colonne: var(--reading-width);
	/* La pagination (14 octobre au soir, suivi § 2.75) : le parent la dispose
	   — centrée, flèches, cibles de 44 px, « Page n sur N » en petit écran —,
	   une forme la dessine. Au parent : famille d'interface, aucun disque,
	   aucun fond au survol, la page courante en gras. */
	--pagination-famille: var(--font-ui);
	--pagination-corps: var(--font-size-s);
	--pagination-arrondi: 0;
	--pagination-survol: transparent;
	--pagination-courante-fond: transparent;
	--pagination-courante-texte: var(--text);
	--pagination-courante-graisse: 600;
	--book-prizes-gap: 40px;
	--cover-single-width: 390px;

	/*
	 * Titres de section — § 17.
	 *
	 * Ce sont des SECTIONS, pas des libellés de champ. En petites capitales
	 * grises de douze pixels, « Avis & presse » se lisait comme l'étiquette
	 * d'une ligne de formulaire : la fiche paraissait plate, sans niveaux.
	 *
	 * Les titres de rubrique de la colonne annexe — « À télécharger »,
	 * « Version numérique » — gardent, eux, le traitement d'étiquette : ils
	 * coiffent une liste courte dans une colonne étroite, pas une section.
	 */
	--section-title-family: var(--font-body);
	--section-title-size: clamp(1.375rem, 1vw + 1.125rem, 1.6875rem);
	--section-title-weight: 600;
	--section-title-transform: none;
	--section-title-spacing: 0;
	/* Le second rang des intitulés (14 octobre) : un cran sous le titre de
	   section — le compagnon du texte de présentation, et, dans une forme qui
	   le choisit, les rubriques de la fiche livre et de la fiche auteur. */
	--section-title-size-second: calc(var(--section-title-size) * 0.8);

	/*
	 * Familles typographiques — hébergées dans le thème, aucune ressource
	 * distante (§ 21.4).
	 *
	 * CE SONT LES PILES DU DUO « CLASSIQUE », ET IL FAUT QUE ÇA LE RESTE. Le
	 * plugin n'émet son bloc `:root` que pour ce qui s'écarte du défaut : sur
	 * un site laissé sur `classique`, il n'écrit rien du tout. Le défaut du
	 * thème doit donc dire exactement ce que le duo promet, sans quoi la fonte
	 * du duo par défaut est installée, déclarée, et n'arrive jamais dans la
	 * page.
	 */
	--font-editorial: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
	--font-body: var(--font-editorial);
	--font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

	/*
	 * Échelle typographique fluide.
	 *
	 * Elle descend jusqu'à `4xs` : signatures, dates, surtitres en capitales
	 * et liens de pied de page vivent tous en dessous de `xs`, et s'arrêter
	 * là obligeait chaque enfant à rouvrir l'échelle pour son compte.
	 */
	--font-size-4xs: 0.6875rem;
	--font-size-3xs: 0.71875rem;
	--font-size-2xs: 0.78125rem;
	--font-size-xs: 0.8125rem;
	--font-size-s: 0.9375rem;
	--font-size-m: 1rem;
	--font-size-l: clamp(1.125rem, 0.25vw + 1.0625rem, 1.25rem);
	--font-size-xl: clamp(1.375rem, 0.75vw + 1.1875rem, 1.75rem);
	--font-size-2xl: clamp(1.75rem, 1.5vw + 1.375rem, 2.5rem);
	--font-size-3xl: clamp(2.25rem, 2.5vw + 1.625rem, 3.5rem);

	/*
	 * Interlignage et longueur de ligne.
	 *
	 * `loose` est le cran de la prose et des citations : un texte suivi
	 * respire plus qu'une ligne d'interface, et le distinguer évite de
	 * régler l'interlignage bloc par bloc.
	 */
	--leading-tight: 1.15;
	--leading-snug: 1.35;
	--leading-normal: 1.6;
	--leading-loose: 1.75;
	/*
	 * DEUX MESURES, À NE PAS CONFONDRE.
	 *
	 * --content-width borne la PAGE. Elle est unique : tous les gabarits s'y
	 * tiennent, sans exception. C'est une contrainte de composition.
	 *
	 * --reading-width borne un TEXTE SUIVI, à 65-75 signes par ligne. Au-delà,
	 * l'œil perd sa ligne en revenant à la gauche. C'est une contrainte de
	 * lisibilité, et elle ne s'applique qu'à de la prose : un descriptif de
	 * livre, oui ; une grille de couvertures ou un tableau de caractéristiques,
	 * non.
	 *
	 * Les deux se surchargent depuis un thème enfant (§ 1.3), le parent ne
	 * portant qu'une valeur par défaut.
	 */
	--content-width: 1280px;
	--reading-width: 68ch;

	/*
	 * Titre et auteur dans les listes de livres — vignettes de grille, de rail
	 * et de résultats. La fiche livre a ses propres règles et n'en dépend pas :
	 * un titre de fiche est une tête de page, pas une ligne de liste.
	 *
	 * Le parent porte le mécanisme, l'enfant la valeur (§ 1.3).
	 *
	 * CONTRASTE. #767676 mesure 4,54:1 sur blanc — le seuil AA est atteint sans
	 * renoncer à un gris nettement plus clair que le titre. #BBBBBB, envisagé
	 * d'abord, tombait à 1,92:1 ; #8A8A8A à 3,45:1, ce qui aurait suffi à du
	 * gros texte mais pas ici : le nom se rend au corps du titre, et aucune
	 * tolérance ne s'applique en dessous de 24 px.
	 */
	--list-title-color: #25256d;
	--list-title-weight: 500;
	--list-author-color: #767676;
	--list-author-weight: 400;

	/* Échelle d'espacement. */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-s: 1rem;
	--space-m: 1.5rem;
	--space-l: 2.25rem;
	--space-xl: 3.5rem;
	--space-2xl: 5rem;

	/* Gouttière latérale de la boîte de page. */
	--gutter: clamp(1rem, 4vw, 3rem);

	/* Traits, rayons, ombres, mouvement. */

	/*
	 * Deux bordures, deux usages.
	 *
	 * --border trace les séparateurs décoratifs : filets, bords de tableau,
	 * contours de carte. Rien n'y est porteur d'information, aucun seuil de
	 * contraste ne s'y applique, et l'assombrir alourdirait la page.
	 *
	 * --border-strong cerne les composants d'interface — boutons, onglets,
	 * puces de filtre. Ceux-là doivent atteindre 3:1 sur le fond pour rester
	 * perceptibles : c'est leur bordure qui dit où cliquer.
	 */
	--border-width: 1px;
	--border-strong: #8c8880;
	--radius-s: 2px;
	--radius-m: 4px;
	--shadow-raised: 0 1px 2px rgb(0 0 0 / 8%), 0 4px 12px rgb(0 0 0 / 6%);
	--transition: 160ms ease;
	--focus-ring: 2px solid var(--accent);
	--focus-offset: 2px;

	/*
	 * ÉCHELLE D'EMPILEMENT — cinq plans, 10 octobre.
	 *
	 * Toute valeur de `z-index` de la feuille se rattache à l'un d'eux, jamais
	 * à un nombre. Trois plans avant (header, dropdown, overlay), et le
	 * raccourci alphabétique de l'index des auteurs partageait celui de
	 * l'en-tête : à valeur égale, l'ordre du document décide, et le raccourci,
	 * venu après, peignait par-dessus l'en-tête et son sous-menu déployé. Vu sur
	 * l'index des auteurs d'Eurédit. Un menu déployé passe désormais au-dessus
	 * de tout contenu de page, partout.
	 *
	 *   contenu   ce qui se pose sur un objet de la page (pastille sur la
	 *             couverture) ;
	 *   collant   ce qui reste visible au défilement sous l'en-tête
	 *             (raccourci alphabétique) ;
	 *   entete    l'en-tête collant, qui crée le contexte de ses menus ;
	 *   menu      les menus déroulants, dans l'en-tête ;
	 *   fenetre   ce qui couvre la page entière (menu mobile, lien d'évitement).
	 */
	--z-contenu: 1;
	--z-collant: 10;
	--z-entete: 20;
	--z-menu: 30;
	--z-fenetre: 40;

	/* Hauteur réelle de l'en-tête collant, écrite par front.js (ResizeObserver)
	   pour que ce qui se colle sous lui le suive, compact ou non. Repli : la
	   hauteur dépliée à 1 280 px. */
	--entete-hauteur: 4.5rem;

	/*
	 * EN-TÊTE — maquette du 10 octobre (MAQUETTE_ENTETE, hors dépôt). Les
	 * valeurs sont des défauts du parent ; un enfant les change par ses jetons,
	 * jamais par une règle. Les couleurs et les familles viennent de l'écran.
	 */
	--entete-hauteur-repos: 72px;
	--entete-hauteur-compact: 56px;
	--entete-hauteur-mobile: 64px;
	--entete-marque-corps: 26px;
	--entete-marque-corps-compact: 22px;
	--entete-marque-max: 22rem;
	--entete-menu-corps: 17px;
	--sous-menu-corps: 16px;
	--menu-mobile-corps: 22px;
	--menu-mobile-sous-corps: 18px;
	/* Le champ de recherche dans la ligne (13 octobre) : 12 rem à 1 280 px et
	   au-delà, 9 rem à 1 024, en pente entre les deux ; la hauteur des entrées
	   du menu, calculée comme elle : corps, interligne et remplissage. */
	--recherche-largeur: clamp(9rem, 18.75vw - 3rem, 12rem);
	--recherche-champ-hauteur: calc(var(--entete-menu-corps) * var(--leading-normal) + 2 * var(--space-3xs));
	/* Le contour de focus du champ : l'accent du site, résolu ici à la racine,
	   donc l'accent vrai même quand une forme recolore l'en-tête en y
	   redéfinissant --accent. */
	--recherche-focus: var(--accent);
	/* Le filet bas de l'en-tête (13 octobre) : une limite de structure, très
	   claire, dérivée de la palette — un dixième d'encre dans le fond de page.
	   Il ne compte pas dans la règle « au plus un filet dans le contenu de la
	   page » (CDC § 21.10). */
	--entete-filet: color-mix(in srgb, var(--text) 10%, var(--surface));
	--cible: 44px;

	/*
	 * Couvertures — § 3.13.
	 *
	 * --cover-base : hauteur d'affichage d'un livre au format de référence.
	 * 18,75 rem, soit 300 px : une couverture ordinaire fait alors près de
	 * 200 px de large et remplit sa colonne de 218 px. À 15 rem elle n'en
	 * faisait que 158, et les gouttières paraissaient énormes — c'est la
	 * hauteur qui dimensionne, la largeur suit.
	 *
	 * --book-scale : posée par vignette, vaut 1 par défaut — repli sur une
	 * hauteur uniforme quand les dimensions manquent.
	 *
	 * --cover-max-scale : hauteur réservée à la boîte, pour que les
	 * couvertures d'une même ligne posent sur une base commune. CETTE VALEUR
	 * EST RECALCULÉE PAR LISTE par ekdotis_covers_reserve_style() : c'est
	 * l'échelle la plus haute que la liste atteint vraiment, pas un plafond
	 * réglé d'avance. Une liste où personne ne dépasse l'échelle 1 ne réserve
	 * rien au-dessus des couvertures.
	 *
	 * Le 1,25 qui reste ici n'est qu'un repli : une liste qui oublierait de
	 * déclarer sa réserve garde trop de place, ce qui est laid mais jamais
	 * tronqué.
	 */
	/* Largeur d'une vignette de « Du même auteur ». VALEUR NEUTRE : le README
	   dit 150 px (120 en mobile) ; ce sont des mesures de maquette, et la
	   session C les arrêtera avec le reste de l'échelle. */
	/* Découpages de la fiche livre — README v2. Les gouttières sont des
	   mesures de composition, pas des espacements fins : elles tiennent le
	   rapport des colonnes et se règlent avec elles. */
	/* Ligne de caractéristique : étiquette et valeur côte à côte. Mesures du
	   README, en variables — la session C les confirmera. */
	/* ---------------------------------------------------------------------
	 * Fiche livre v2 — mesures de forme
	 *
	 * DES MESURES, PAS DES RÉGLAGES. Le § 1.8 laisse au code ce qui se mesure
	 * et n'a pas à être demandé à un opérateur de montage. Aucune de ces
	 * valeurs n'entre au schéma : elles décrivent un dessin arrêté, elles ne
	 * posent pas de question.
	 *
	 * Chacune est nommée par son RÔLE. Aucune ne porte de couleur ni de corps :
	 * ceux-là sont des rôles du socle, et se lisent tels quels.
	 * ------------------------------------------------------------------ */

	/* Le tiret d'intitulé — marquage net, décision insistante du README. */
	/* Le tiret d'intitulé de rubrique est à zéro depuis le 13 octobre : un trait
	   répété de plus. Un enfant qui le veut le rend par ses jetons. */
	--rubrique-tiret-l: 0;
	--rubrique-tiret-e: 0;
	--rubrique-marge: 16px;
	/* L'écart entre un intitulé de rubrique et le premier élément de son contenu
	   (14 octobre) — fiche livre et fiche auteur, surtitre de la mise en avant
	   compris : 24 px depuis le soir même. Le lien « tout voir » est en pied de
	   rubrique, à --rubrique-pied-ecart du bas du contenu (24 px, l'intérieur
	   d'un élément) ; rien sous lui, l'écart entre rubriques fait le reste. */
	--rubrique-intitule-ecart: var(--space-m);
	--rubrique-pied-ecart: var(--space-m);

	/* La zone d'achat de la fiche (31 octobre) : son écart sous le prix, et
	   entre les blocs qu'y posent les extensions de vente. Une forme le repose. */
	--zone-achat-ecart: var(--space-s);

	/* Le bandeau clair de la zone haute, et la respiration qui la sépare du bas.
	   Sa couleur est un jeton (13 octobre) : le fil d'Ariane de la fiche, le
	   bandeau et son pseudo-élément pleine largeur le lisent tous trois, et une
	   forme le repose (l'accent, pour la contemporaine). */
	--livre-bandeau-fond: var(--surface-alt);
	--livre-bandeau-haut: 22px;
	--livre-bandeau-bas: 52px;
	--livre-zones-ecart: 52px;

	/* L'ombre de la couverture : SEUL RELIEF DE LA PAGE. Elle ne se confond pas
	   avec `--shadow-raised`, qui sert les vignettes de liste.
	   LA TEINTE VIENT DU RÔLE `texte`, DILUÉE — le README dit « noir chaud »,
	   et le noir chaud d'une palette est sa couleur de texte. Écrire un gris
	   en dur donnerait une ombre froide sur une palette bleue et fausse sur
	   toutes. `color-mix` la fait suivre la palette sans un réglage de plus. */
	--shadow-couverture: 0 6px 20px color-mix(in srgb, var(--text) 18%, transparent);

	/* Une ligne de caractéristique. */
	/*
	 * L'ÉCART ENTRE LES TROIS BLOCS DE LA COLONNE, et l'air autour d'un filet.
	 *
	 * `--carac-padding-haut` et `--carac-padding-bas` sont morts avec la
	 * composition du 26 août : ils rembourraient une LIGNE filetée, et il n'y a
	 * plus de filet par ligne. Ces deux-ci nomment ce qui existe maintenant.
	 */
	--carac-bloc-ecart: 26px;
	--carac-filet-marge: 18px;

	/* La barre d'onglets. */
	/* L'écart entre deux couvertures d'une rangée bibliographique. 30 px : ni
	   --space-m (24) ni --space-l (36) ne tombent dessus. */
	--biblio-ecart: 30px;

	--onglets-ecart: 30px;
	--onglets-filet-actif: 2px;

	/* Les deux seuls arrondis de la page. */
	--pastille-rayon: 999px;
	--puce-taille: 8px;

	/* La vignette d'un média, en 16/9. */
	--vignette-video: 168px;

	/* 124 PX ET NON LES 110 DU README — mesuré le 26 août sur les six duos.
	   « Langue d'origine », la plus longue étiquette du fonds, demande 111 px
	   en pile système, 118 en Public Sans, 120 en Archivo et 122 en Luciole,
	   la fonte du duo « Lisible » : 110 la repliait sur quatre duos sur six.
	   Le README a été dessiné sur Archivo ; le socle tourne sur celui des six
	   que le site a choisi. */
	/*
	 * L'ÉCART ENTRE DEUX MENTIONS DU BLOC TECHNIQUE.
	 *
	 * IL REMPLACE `--carac-etiquette` ET `--carac-gouttiere`, morts le 26 août :
	 * l'intitulé passe en ligne avec sa valeur, il n'y a plus de colonne
	 * d'étiquettes à dimensionner ni de gouttière entre deux colonnes.
	 *
	 * Les 124 px de l'étiquette avaient coûté une mesure sur les six duos, et la
	 * règle « une mesure prise dans une seule fonte n'est pas une mesure » en
	 * est sortie. La mesure était juste ; la composition l'a rendue sans objet.
	 */
	--carac-ligne-ecart: 5px;

	/*
	 * La gouttière entre la couverture et le texte de la zone haute. 70 px
	 * depuis le 26 août : la couverture ayant grandi de 300 à 390, un écart de
	 * 35 la collait à la titraille.
	 */
	--book-haut-gouttiere: 70px;

	/* La colonne des caractéristiques, ferrée à droite. */
	--book-mesures-largeur: 280px;

	/*
	 * `--book-bas-gouttiere` (90px) EST MORT le 26 août au soir, avec la grille
	 * qu'il espaçait. La colonne de gauche ayant repris la colonne de la
	 * couverture, c'est `--book-haut-gouttiere` qui les sépare toutes les deux :
	 * une seule gouttière pour une seule colonne, quel que soit son étage.
	 */

	/*
	 * `--book-retrait-sans-annexe` (375px) ET `--book-lecture-seule` (720px)
	 * SONT MORTS le 26 août, avec la bascule qu'ils servaient. Elle transformait
	 * en marge le vide d'une colonne d'annexe absente, quand la colonne de
	 * droite ne portait que « À propos ». Le texte de présentation ayant remonté
	 * hors de la zone basse, il n'y a plus de prose à border : les rangées de
	 * bibliographie veulent de la largeur, pas un retrait.
	 */

	/* Couverture d'une rangée « Du même auteur » — 110 px au README, 100 en
	   mobile. La hauteur suit la proportion réelle du livre (§ 3.13). */
	/*
	 * 170 PX DEPUIS LE 26 AOÛT AU SOIR, contre 110. Les bibliographies ont
	 * quitté une colonne de 790 px pour la pleine largeur : à 110, six titres
	 * se serraient à une taille où l'on ne reconnaît plus une couverture.
	 *
	 * CINQ PAR RANGÉE DEPUIS LA RECETTE DU SOIR, et 212 px : (1184 − 4 × 30) / 5.
	 * Le seuil de défilement suit — il ne commande pas la composition, c'est le
	 * nombre qui tient dans la largeur. Ces couvertures ne sont pas là pour être
	 * regardées mais pour être BALAYÉES : on cherche un titre dans une œuvre.
	 */
	--biblio-colonne: 212px;

	--cover-base: 18.75rem;
	--cover-max-scale: 1.25;

	/*
	 * Proportions d'image — § 12.2.
	 *
	 * --cover-ratio est déclarée plus haut : elle est POSÉE PAR VIGNETTE par
	 * ekdotis_cover_style(), parce qu'une couverture n'est pas recadrée et que
	 * son rapport est une information affichée (§ 3.13). Les trois ci-dessous
	 * sont l'inverse : ce sont des cadres imposés au média, et ils ne varient
	 * pas d'une entrée à l'autre.
	 *
	 * --cover-large-ratio ne suit pas le rapport du livre : la disposition en
	 * grande image compose un bloc, pas une étagère.
	 */
	--banner-ratio: 16 / 9;
	--cover-large-ratio: 4 / 5;
	--news-ratio: 3 / 2;

	/*
	 * Pistes de grille — § 12.2.
	 *
	 * LE MINIMUM EST LA PROPRIÉTÉ, LA PISTE SE COMPOSE À PARTIR DE LUI. Le
	 * plafond à deux colonnes du conteneur de flux a besoin du nombre seul,
	 * pas de la piste : deux déclarations plutôt qu'une évitent de le réécrire
	 * en dur là-bas.
	 *
	 * EN REM, PAS EN PIXELS. La cellule contient du texte — un titre sous une
	 * couverture. Un lecteur qui agrandit la police obtiendrait sinon un texte
	 * plus grand dans une colonne inchangée, donc un débordement ; en rem la
	 * colonne suit. C'est aussi la convention des grilles déjà écrites.
	 *
	 * Le quart de rem de --compact-col-min est délibéré : la densité compacte
	 * est serrée, 5rem l'élargirait de 4 px sans raison.
	 *
	 * Toutes en auto-fill à l'usage : le nombre de colonnes se calcule, il ne
	 * se déclare pas, et aucune requête média n'est nécessaire.
	 */
	--cover-col-min: 9.5rem;
	--cover-col: minmax(var(--cover-col-min), 1fr);

	--catalogue-col-min: 7.5rem;
	--catalogue-col: minmax(var(--catalogue-col-min), 1fr);

	--compact-col-min: 4.75rem;
	--compact-col: minmax(var(--compact-col-min), 1fr);

	--news-col-min: 15rem;
	--news-col: minmax(var(--news-col-min), 1fr);

	--half-col-min: 20rem;
	--half-col: minmax(var(--half-col-min), 1fr);

	/*
	 * Cadre derrière les couvertures des tuiles (13 octobre) : un fond et une
	 * marge d'air autour de la couverture, peints sur la case que la tuile
	 * réserve (accueil.css). Transparent et nul ici : c'est une forme qui les
	 * pose, et les trois modes d'alignement les respectent.
	 */
	--couverture-cadre-fond: transparent;
	--couverture-cadre-marge: 0px;

	/*
	 * Bande des nouveautés de l'accueil (13 octobre) : un fond de bord à bord
	 * derrière la section, comme le fil d'Ariane (§ 2.46), le contenu calé sur
	 * la grille, et un retrait vertical dans la bande. Transparent et nul ici :
	 * une forme les pose (accueil.css peint).
	 */
	--accueil-nouveautes-fond: transparent;
	--accueil-nouveautes-retrait: 0px;

	/*
	 * Rythme vertical de la page d'accueil — § 12.2, § 2.5.
	 *
	 * Porté par `gap` sur le conteneur de flux, et par lui seul : un bloc
	 * absent ne laisse alors aucune marge résiduelle, sans qu'aucune règle
	 * n'ait à le prévoir.
	 *
	 * Aucun cran de --space-* ne tombe sur cette valeur — elle est entre
	 * --space-xl et --space-2xl — et c'est la respiration de la page, pas un
	 * espacement de composant. Elle prend en revanche l'unité du barème
	 * qu'elle côtoie : un espacement vertical ne conditionne aucun retour à la
	 * ligne, et une seconde unité dans une échelle existante se paierait à
	 * chaque lecture.
	 */
	--block-gap: 4rem;
}

@media (max-width: 43.75rem) {
	:root {
		--block-gap: 2.75rem;
	}
}

/* -------------------------------------------------------------------------
 * Socle
 * ---------------------------------------------------------------------- */

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

body {
	margin: 0;
	background: var(--surface);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--font-size-m);
	line-height: var(--leading-normal);
}

/*
 * LE LIEN PREND LA COULEUR DE LIEN, PARTOUT — consigne du 3 août, étendue au
 * site entier le 9 octobre au tri du gisement Minuit (« vrai partout »).
 *
 * `inherit` laissait chaque lien prendre la teinte de son voisinage : l'auteur
 * en encre, l'autre édition en gris, le sommaire en noir. Trois zones restent
 * dehors, et pour la même raison — elles sont écrites sur un aplat : l'en-tête
 * et le pied, dont les liens ont leur propre rôle, et le fil d'Ariane, dont la
 * couleur est celle de la bande. Voir la section « Habillage » en fin de
 * fichier. Un composant qui pose sa propre couleur par classe la garde.
 */
/*
 * LIENS : SOULIGNÉS AU SURVOL ET AU FOCUS SEULEMENT — 13 octobre, règle
 * commune aux trois directions, décision de Phil. Au repos la couleur de
 * lien suffit ; un filet sous chaque lien est un trait de plus sur une page
 * qui ne doit en garder qu'un. Vaut partout, descriptifs et biographies
 * compris : les règles locales qui disaient déjà « pas de soulignement »
 * (vignettes, fiche, cartes) deviennent redondantes et restent, parce
 * qu'elles portent la couleur. Contraste lien / texte mesuré à 3:1 sur les
 * palettes du registre (suivi § 2.44).
 */
a {
	color: var(--link);
	text-decoration: none;
}

a:hover,
a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

img {
	max-width: 100%;
	height: auto;
}

:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}

h1,
h2 {
	font-weight: 600;
	line-height: var(--leading-tight);
	margin: 0;
}

/*
 * AUCUNE COUPURE DE MOT DANS UN TITRE — règle permanente (26 octobre, 10h09,
 * CLAUDE.md, CDC § 21.10). Ni césure, ni coupe au caractère, dans aucune
 * direction : un titre se replie entre ses mots. Les règles qui coupaient
 * (`hyphens: auto` et `overflow-wrap: break-word` sur trois titres de la forme
 * Affiche) sont retirées ; `overflow-wrap: anywhere`, posé sur les entrées des
 * listes et hérité par leurs titres, est neutralisé ici. Le texte courant
 * garde sa césure.
 */
h1,
h2,
h3,
h4,
h5,
h6 {
	hyphens: manual;
	overflow-wrap: normal;
	word-break: normal;
}

/*
 * LE MOT TROP LONG POUR SA COLONNE (26 octobre) : ni coupe ni débordement,
 * le corps baisse juste ce qu'il faut. `ekdotis_titre_ajuste()` enveloppe le
 * texte du titre et pose, en variables, les signes de son mot le plus large
 * par classe de chasse (le mécanisme de la date de la vedette, § 2.92) ; le
 * titre devient le conteneur, et l'enveloppe prend le plus petit de son
 * corps (1em) et de la largeur du titre divisée par la chasse de ce mot.
 * Plancher : 1 rem, ou le corps du titre s'il est plus petit.
 *
 * Chasses du parent : le plus large de chaque classe sur les polices de titre
 * des quatre directions (Bricolage Grotesque, Newsreader, EB Garamond, Public
 * Sans, Outfit), mesurées de 16 à 120 px ; chaque forme pose celles de ses
 * polices. --chasse-interlettre, en em par signe, compte l'interlettrage
 * négatif des titres quand la forme le garantit ; 0 par défaut. Sur les
 * 1 420 mots des titres de LLL, à 16, 25, 40 et 72 px, la largeur réelle fait
 * 87 à 92 % de la prévision en moyenne, dans chacune des polices.
 */
:is(h1, h2, h3, h4, h5, h6):has(.titre-ajuste) {
	container-type: inline-size;
	/* Conteneur, le titre n'a plus de largeur propre : dans une grille qui
	   cale ses éléments au début (la tuile de livre de l'accueil), il
	   s'étire ; dans une rangée flex, les deux règles ci-dessous. */
	justify-self: stretch;
}

/* Les titres placés dans une rangée flex prennent la place restante : sans
   cela, conteneurs, ils tombaient à zéro de large (nom de la fiche auteur à
   côté du portrait, titre de collection à côté de son logo). */
.auteur__entete > .auteur__nom,
.archive-intro__titraille > .archive-intro__titre,
.archive-intro > .archive-intro__titre {
	flex: 1 1 auto;
	min-width: 0;
}

.titre-ajuste {
	--chasse-fines: 0.389;
	--chasse-etroites: 0.517;
	--chasse-demi: 0.605;
	--chasse-moyennes: 0.642;
	--chasse-larges: 0.947;
	--chasse-capfines: 0.521;
	--chasse-capitales: 0.847;
	--chasse-caplarges: 0.985;
	--chasse-treslarges: 1.176;
	--chasse-chiffres: 0.682;
	--chasse-ponctuation: 0.788;
	--chasse-interlettre: 0;
	font-size: max(
		min(1em, 1rem),
		min(
			1em,
			100cqi / (
				var(--t-fines, 0) * var(--chasse-fines)
				+ var(--t-etroites, 0) * var(--chasse-etroites)
				+ var(--t-demi, 0) * var(--chasse-demi)
				+ var(--t-moyennes, 0) * var(--chasse-moyennes)
				+ var(--t-larges, 0) * var(--chasse-larges)
				+ var(--t-capfines, 0) * var(--chasse-capfines)
				+ var(--t-capitales, 0) * var(--chasse-capitales)
				+ var(--t-caplarges, 0) * var(--chasse-caplarges)
				+ var(--t-treslarges, 0) * var(--chasse-treslarges)
				+ var(--t-chiffres, 0) * var(--chasse-chiffres)
				+ var(--t-ponctuation, 0) * var(--chasse-ponctuation)
				+ var(--t-signes, 0) * var(--chasse-interlettre)
				+ 0.001
			)
		)
	);
}

/* -------------------------------------------------------------------------
 * En-tête et pied de site
 * ---------------------------------------------------------------------- */

.bandeau-site,
.pied-site {
	border-color: var(--border);
	border-style: solid;
	border-width: 0;
	font-family: var(--font-ui);
}

.bandeau-site {
	border-bottom-width: var(--border-width);
}

/* LA BANDE AVANT LE PIED (26 octobre, suivi § 2.109). Le pied se tient à
   `--pied-ecart` du contenu — cinq unités par défaut : c'est la bande de fond
   de page entre la dernière section et le pied, à laquelle s'ajoute le
   remplissage bas de l'enveloppe qui ferme la page (`--fin-de-page`, lu par
   la fiche livre, la fiche auteur, la fiche de rencontre et leurs rubriques).
   Quand la page finit sur un aplat pleine largeur, cette bande n'a pas lieu
   d'être : l'aplat touche le pied, et sa respiration est son propre
   remplissage. La forme, seule à savoir quelles sections sont des aplats,
   met les deux jetons à zéro sur le corps des pages qu'un aplat ferme. Les
   pages qui finissent sur le fond clair gardent l'écart. */
.pied-site {
	border-top-width: var(--border-width);
	color: var(--text-muted);
	font-size: var(--font-size-s);
	margin-top: var(--pied-ecart, var(--space-2xl));
}

.bandeau-site__interne,
.pied-site__interne,
.site-principal {
	margin-inline: auto;
	max-width: var(--content-width);
	padding-inline: var(--gutter);
}

/*
 * UNE LIGNE : LA MARQUE, LE MENU, LES OUTILS — maquette du 10 octobre.
 *
 * `position: relative` sur l'enveloppe interne : c'est elle qui borne le
 * panneau large des collections, gouttières comprises.
 */
.bandeau-site__interne {
	align-items: center;
	display: flex;
	/* Le retour à la ligne est une sécurité, pas un état : un menu trop long
	   pour la ligne fait passer les outils dessous au lieu d'élargir la page.
	   Ce qui passe dessous reste à droite (12 octobre) : la ligne se justifie
	   à la fin, et c'est la marque qui absorbe l'espace libre par sa marge
	   automatique — pas le menu, dont la marge automatique aurait laissé les
	   outils seuls à gauche sur leur ligne, et le champ de recherche hors de
	   l'écran. */
	flex-wrap: wrap;
	gap: var(--space-m);
	justify-content: flex-end;
	min-height: var(--entete-hauteur-repos);
	/* Le remplissage vertical est un jeton : la bande de recherche le lit
	   pour partir du bas de la ligne, compacte ou non. */
	--entete-remplissage: var(--space-2xs);
	padding-block: var(--entete-remplissage);
	position: relative;
	transition: min-height var(--transition);
}

.pied-site__interne {
	padding-block: var(--space-m);
}

/* Le logo du pied (26 octobre, suivi § 2.105) : la hauteur seule est fixée,
   la largeur suit — jamais déformé. LE NOM EN REGARD (suivi § 2.106) : le
   lien est une rangée qui se replie ; le nom, sur une ligne jamais coupée,
   est à côté du logo tant qu'il y tient, dessous sinon. Le paragraphe est
   le conteneur du titre ajusté : la largeur du pied décide du corps du nom
   quand même elle ne suffit pas. `--pied-nom` : la couleur du nom, par
   défaut celle du texte du pied ; une forme la règle. */
.pied-site {
	--pied-nom: currentColor;
}

.pied-site__logo {
	container-type: inline-size;
	margin: var(--space-m) 0 var(--space-s);
}

.pied-site__logo a {
	align-items: center;
	color: var(--pied-nom);
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--space-s) var(--space-m);
	line-height: 1;
	max-width: 100%;
	text-decoration: none;
}

.pied-site__logo a:hover .pied-site__nom,
.pied-site__logo a:focus-visible .pied-site__nom {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pied-site__logo img {
	display: block;
	height: 4rem;
	width: auto;
}

/* Le logo en tête de la première colonne, à la place du nom (2 novembre 2026,
   W7 bis) : même hauteur, jamais plus large que la colonne. */
.pied-site__marque--logo a {
	display: inline-block;
	line-height: 0;
	max-width: 100%;
}

.pied-site__marque--logo img {
	display: block;
	height: auto;
	max-height: 4rem;
	max-width: 100%;
	width: auto;
}

.pied-site__marque--logo a:focus-visible {
	outline: var(--focus-ring, 2px solid currentColor);
	outline-offset: 4px;
}

/* La couleur est posée sur le nom lui-même : la règle des liens du pied, plus
   bas dans la feuille, reprendrait celle du lien. */
.pied-site__nom {
	color: var(--pied-nom);
	flex: 0 1 auto;
	font-size: var(--font-size-l);
	font-weight: 600;
	hyphens: manual;
	max-width: 100%;
	overflow-wrap: normal;
	white-space: nowrap;
}

/*
 * LA MARQUE : le logo s'il existe, sinon le nom. Bornée à 22 rem : un nom long
 * passe sur deux lignes équilibrées, l'en-tête grandit d'autant, rien n'est
 * tronqué. Pas de baseline.
 */
.bandeau-site__marque {
	flex: 0 1 auto;
	font-size: var(--entete-marque-corps);
	font-weight: 500;
	line-height: 1.1;
	margin: 0 auto 0 0;
	max-inline-size: var(--entete-marque-max);
	text-wrap: balance;
	transition: font-size var(--transition);
}

.bandeau-site__marque a {
	text-decoration: none;
}

.bandeau-site__marque .custom-logo-link {
	display: block;
	line-height: 0;
}

/* Logo et nom dans un seul lien (en-tête en colonne, 26 octobre, suivi
   § 2.103) : côte à côte dans la barre, l'un sur l'autre dans la colonne. */
.bandeau-site__marque-lien {
	align-items: center;
	display: flex;
	gap: var(--space-xs);
	text-decoration: none;
}

.bandeau-site__marque .custom-logo {
	display: block;
	height: 3rem;
	max-width: var(--entete-marque-max);
	transition: height var(--transition);
	width: auto;
}

/* LE MENU, poussé contre les outils par la marge automatique de la marque ;
   les entrées ne se coupent pas. */
.navigation__liste {
	align-items: center;
	display: flex;
	font-size: var(--entete-menu-corps);
	gap: var(--space-m);
	list-style: none;
	margin: 0;
	padding: 0;
}

.navigation__liste > .navigation__entree > a {
	padding-block: var(--space-3xs);
	text-decoration: none;
	white-space: nowrap;
}

/* La page courante : en graisse, et plus soulignée (13 octobre — un filet de
   moins ; la couleur pleine la distingue déjà, voir la section Habillage). */
.navigation__liste > .navigation__entree > a[aria-current="page"] {
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Fil d'Ariane — § 17
 * ---------------------------------------------------------------------- */

/*
 * L'enveloppe porte la largeur de page, le fil porte la gouttière — la même
 * répartition que .bandeau-site et son __inner. Sans fond déclaré, l'enveloppe
 * est invisible : c'est un crochet pour les thèmes enfants, pas un ornement.
 */

/*
 * L'enveloppe court d'un bord à l'autre de la FENÊTRE ; le fil, lui, reste
 * dans la boîte de page. Un aplat de fil d'Ariane s'arrêtant à la largeur de
 * contenu laissait deux bandes blanches sur les côtés, ce qui le faisait lire
 * comme un encadré posé sur la page plutôt que comme un bandeau.
 *
 * Même répartition que .bandeau-site : le fond en pleine largeur, le contenu
 * borné. C'est l'enveloppe qui a changé de rôle le 3 août — elle bornait, elle
 * ne borne plus.
 */

.fil-ariane {
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	margin-inline: auto;
	max-width: var(--content-width);
	padding-block: var(--space-s) 0;
	padding-inline: var(--gutter);
}

/*
 * Le fil se replie au lieu de déborder. `flex-wrap` suffit sur les chemins
 * courts ; c'est le maillon lui-même qui doit pouvoir rétrécir, faute de quoi
 * un titre de livre long imposerait sa largeur à toute la page sur mobile.
 */

.fil-ariane__liste {
	color: var(--text-muted);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3xs) var(--space-2xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.fil-ariane__entree {
	align-items: baseline;
	display: flex;
	gap: var(--space-2xs);
	min-width: 0;
}

.fil-ariane__entree + .fil-ariane__entree::before {
	color: var(--text-faint);
	content: "›";
}

.fil-ariane__entree a {
	color: inherit;
}

/*
 * La page courante est le maillon le plus long, et le seul qui puisse être
 * abrégé sans perte : les précédents sont des repères, celui-ci répète un
 * titre déjà affiché juste dessous.
 */

.fil-ariane__entree--courant span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 39.999rem) {
	.fil-ariane__entree--courant span {
		max-width: 14rem;
	}
}

/* -------------------------------------------------------------------------
 * Archives
 * ---------------------------------------------------------------------- */

.archive-intro {
	padding-block: var(--space-l) var(--space-m);
}

.archive-intro__titre {
	font-size: var(--font-size-2xl);
}

.archive-intro__titraille {
	align-items: center;
	display: flex;
	gap: var(--space-s);
}

.archive-intro__logo img {
	height: auto;
	width: 4rem;
}

.archive-intro__banniere img {
	width: 100%;
}

.archive-intro__texte {
	color: var(--text-muted);
	margin-top: var(--space-xs);
	max-width: var(--reading-width);
}

.archive-tri {
	align-items: baseline;
	color: var(--text-muted);
	display: flex;
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	gap: var(--space-2xs);
	margin-top: var(--space-m);
}

.archive-tri__liste {
	display: flex;
	gap: var(--space-2xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.archive-tri__entree + .archive-tri__entree::before {
	content: "·";
	margin-inline-end: var(--space-2xs);
}

.archive-tri__courant {
	color: var(--text);
	font-weight: 600;
}

.archive-vide {
	color: var(--text-muted);
	padding-block: var(--space-xl);
}

/* -------------------------------------------------------------------------
 * Grille du catalogue — § 3.13
 *
 * La zone de couverture a une hauteur fixe, l'image se cale sur sa base :
 * les livres posent sur une ligne commune, comme sur une étagère, et les
 * titres restent alignés entre eux.
 * ---------------------------------------------------------------------- */

.livre-grille {
	display: grid;
	gap: var(--space-l) var(--space-m);
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	padding-block: var(--space-m);
}

.couverture {
	align-items: flex-end;
	display: flex;
	height: calc(var(--cover-base) * var(--cover-max-scale));
	justify-content: center;
}

/*
 * Le cadre a exactement la taille de la couverture — élément de flex, il prend
 * la taille de ce qu'il contient. C'est lui qui sert de repère à la pastille
 * en surimpression : la boîte .couverture, elle, a la hauteur du plus grand
 * format du catalogue, et son coin haut gauche flotte donc dans le vide
 * au-dessus d'un poche.
 */

.couverture__cadre {
	max-width: 100%;
	position: relative;
}

/*
 * DANS LES LISTES SEULEMENT, les couvertures se calent à gauche, comme le
 * titre et le nom d'auteur qui les suivent. Centrées, un poche se décalait de
 * sa propre légende et la colonne perdait sa ligne verticale — d'autant plus
 * visible que les largeurs varient d'un format à l'autre.
 *
 * La fiche livre garde sa couverture centrée dans sa colonne : elle n'y est
 * pas la légende de quoi que ce soit, et rien ne s'aligne dessous.
 *
 * `align-items: flex-end` ne bouge nulle part : c'est lui qui pose les
 * couvertures sur une ligne de base commune, comme sur une étagère, et le
 * § 3.13 en dépend. On ne change que l'axe horizontal.
 */

.livre-vignette .couverture {
	justify-content: flex-start;
}

/*
 * LA BOÎTE DE L'IMAGE EST L'IMAGE.
 *
 * La couverture est dimensionnée par sa HAUTEUR (§ 3.13) et la largeur suit —
 * mais elle ne peut pas dépasser sa colonne, sans quoi les quelques
 * couvertures presque carrées du fonds mordent sur la gouttière.
 *
 * Ce plafond se pose sur la largeur, pas par un `object-fit` qui laisserait
 * l'image flotter dans une boîte trop grande : la pastille se cale sur le coin
 * haut gauche de l'élément, et une boîte plus haute que son image la
 * décrochait dans le vide au-dessus de la couverture. Le défaut ne se voyait
 * qu'en présence de dimensions, donc pas sur ce fonds — mais il serait apparu
 * le jour de leur reprise.
 *
 * La largeur est donc déclarée, `aspect-ratio` en déduit la hauteur, et
 * `max-width` mord sur les deux à la fois. La boîte colle à l'image.
 */

.couverture__image,
.couverture__substitut {
	aspect-ratio: var(--cover-ratio, 0.6667);
	height: auto;
	max-width: 100%;
	width: calc(var(--cover-base) * var(--book-scale, 1) * var(--cover-ratio, 0.6667));
}

.couverture__image {
	box-shadow: var(--shadow-raised);
	display: block;
	object-fit: contain;
	object-position: center bottom;
}

.livre-vignette .couverture__image {
	object-position: left bottom;
}

/* -------------------------------------------------------------------------
 * LES TROIS MODES DANS LES LISTES — § 3.13, réglage `couverture_alignement`
 *
 * PORTÉE : les listes, et elles seules. La fiche livre (`.livre__couverture`)
 * garde la largeur du § 17.15 — une couverture seule ne s'aligne sur rien —, et
 * la « dernière parution » de la fiche auteur est dans le même cas.
 *
 * `align-items: flex-end` ne bouge dans aucun mode : c'est lui qui pose les
 * couvertures sur une ligne de base commune, et c'est la règle des listes, pas
 * une option de l'une d'elles.
 *
 * LA LARGEUR DE COLONNE EST INCONNUE DE LA FEUILLE — toutes les grilles du
 * socle sont en `auto-fill`, et le rail de bibliographie divise la sienne par
 * 5,5. Une hauteur en pixels s'y fait rogner par `max-width` sans prévenir, et
 * l'égalité de hauteur tombe : mesuré le 24 août, le rail donnait 148 px de
 * large à tout le monde et des hauteurs de 200 à 234 px — c'est-à-dire le mode
 * largeur, dans un site réglé sur la hauteur.
 *
 * D'où le `min()` : la mesure absolue tant qu'elle tient dans la colonne, une
 * mesure relative à la colonne dès qu'elle n'y tient plus. La seconde emploie
 * les deux bornes que le plugin pose sur le conteneur de liste, et l'égalité de
 * hauteur ne dépend alors plus d'un seul pixel connu d'avance.
 *
 * LE CADRE PORTE LA LARGEUR, PAS L'IMAGE. Un pourcentage sur l'image se
 * résoudrait contre un cadre dont la largeur vient de l'image : le calcul
 * tournerait en rond. Le cadre a, lui, la largeur de la colonne pour référence.
 * ---------------------------------------------------------------------- */

/* --- hauteur égale, et proportionnel qui n'en est que la variante ------- */

.couvertures-hauteur .livre-vignette .couverture,
.couvertures-hauteur .livre-editions .couverture,
.couvertures-proportionnel .livre-vignette .couverture,
.couvertures-proportionnel .livre-editions .couverture {
	aspect-ratio: var(--list-max-ratio, 0.6667);
	height: auto;
	max-height: calc(var(--cover-base) * var(--cover-max-scale, 1));
}

.couvertures-hauteur .livre-vignette,
.couvertures-hauteur .livre-editions .couverture__cadre,
.couvertures-proportionnel .livre-vignette,
.couvertures-proportionnel .livre-editions .couverture__cadre {
	--cover-width: min(
		calc(var(--cover-base) * var(--book-scale, 1) * var(--cover-ratio, 0.6667)),
		calc(100% * var(--book-scale, 1) / var(--cover-max-scale, 1) * var(--cover-ratio, 0.6667) / var(--list-max-ratio, 0.6667))
	);
}

/* --- largeur égale : la cellule commande, la proportion suit ------------
 *
 * Le rendu que l'accueil avait seul jusqu'au 24 août ; il devient un choix,
 * disponible partout. La boîte prend la proportion la plus ÉTROITE de la liste
 * — la plus haute, donc, à largeur commune.
 *
 * Le coût est réel et assumé : cette réserve est plus haute que les 300 px des
 * deux autres modes. Sur la première page du catalogue, la couverture la plus
 * étroite vaut 0,552, soit une boîte à 1,8 fois la largeur de colonne.
 */

.couvertures-largeur .livre-vignette .couverture,
.couvertures-largeur .livre-editions .couverture {
	aspect-ratio: var(--list-min-ratio, 0.6667);
	height: auto;
}

.couvertures-largeur .livre-vignette,
.couvertures-largeur .livre-editions .couverture__cadre {
	--cover-width: 100%;
}

/* --- ce qui vaut dans les trois modes -----------------------------------
 *
 * Le cadre prend la largeur calculée, l'image remplit son cadre. La légende de
 * la vignette lit la même variable : elle ne dépasse jamais la couverture
 * qu'elle légende, quel que soit le mode.
 */

.livre-vignette .couverture__cadre,
.livre-editions .couverture__cadre {
	width: var(--cover-width, auto);
}

.livre-vignette .couverture__image,
.livre-vignette .couverture__substitut,
.livre-editions .couverture__image,
.livre-editions .couverture__substitut {
	width: 100%;
}

/*
 * Pastille d'état posée SUR la couverture, coin haut gauche.
 *
 * Le pied est occupé : certaines couvertures portent un bandeau de prix
 * imprimé — Goncourt, Livre Inter — et une pastille posée là le recouvrirait.
 * Le haut d'une couverture porte le nom de l'auteur, jamais un bandeau.
 */

.couverture__pastille {
	background: var(--accent);
	color: var(--text-on-accent);
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
	inset-block-start: 0;
	inset-inline-start: 0;
	line-height: 1.6;
	padding: 0 0.5em;
	position: absolute;
	z-index: var(--z-contenu);
}

.couverture__substitut {
	aspect-ratio: 2 / 3;
	background: var(--surface-alt);
	display: block;
}

/*
 * LA LÉGENDE NE DÉPASSE JAMAIS SA COUVERTURE.
 *
 * Les colonnes de la grille sont égales, mais les couvertures ne le sont pas
 * (§ 3.13) : un poche est plus étroit qu'un grand format. Le texte, lui,
 * remplissait toute la colonne, et un titre long s'étalait bien au-delà de
 * l'image qu'il légende — ce qui se lisait comme des gouttières inégales
 * alors que la grille était régulière.
 *
 * La largeur se calcule donc par vignette, à partir des deux variables que le
 * plugin y pose : la hauteur d'affichage (--book-scale) et la proportion de
 * l'image (--cover-ratio). Pas une largeur fixe : celle de SA couverture.
 *
 * Le repli 0.6667 est la proportion de la composition de remplacement, servie
 * aux livres sans image. Le `min(…, 100%)` protège les quelques couvertures
 * presque carrées, plus larges que la colonne.
 */

.livre-vignette {
	--cover-width: min(
		calc(var(--cover-base) * var(--book-scale, 1) * var(--cover-ratio, 0.6667)),
		100%
	);

	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
}

.livre-vignette__titre,
.livre-vignette__contributeurs,
.livre-vignette__collection,
.livre-vignette__mentions,
.livre-vignette .livre-etats {
	max-width: var(--cover-width);
}

.livre-vignette__lien {
	color: inherit;
	text-decoration: none;
}

/*
 * Une seule règle pour toutes les listes. Les deux gabarits de vignette —
 * ordinaire et numérique — partagent ces classes, et ils servent tous les
 * contextes : catalogue, collections, rayons, rails d'accueil, résultats de
 * recherche, fiche auteur, 404, nouveautés, à paraître.
 */

/*
 * Titre et auteur partagent tout — famille, corps, interlignage — et ne se
 * distinguent que par la graisse et la couleur. Deux corps différents dans une
 * même légende donnaient deux blocs, là où il n'y a qu'une information : ce
 * livre, de cet auteur.
 *
 * L'interlignage est posé explicitement sur les deux : le titre est un `h2` et
 * hérite sinon de l'interlignage serré des titres, le nom d'auteur un `p` et
 * de celui du corps de texte. Sans cette ligne, « même interlignage » serait
 * faux d'un tiers.
 */

.livre-vignette__titre,
.livre-vignette__contributeurs {
	font-family: var(--font-body);
	font-size: var(--font-size-m);
	line-height: var(--leading-snug);
}

.livre-vignette__titre {
	color: var(--list-title-color);
	font-weight: var(--list-title-weight);
	margin-top: var(--space-2xs);
}

.livre-vignette__contributeurs {
	color: var(--list-author-color);
	font-weight: var(--list-author-weight);
	margin: 0;
}

/* La phrase de rôle sous le titre d'une vignette (fiche auteur, 14 octobre) :
   un cran sous le titre dans l'échelle — m, s (deux crans, xs, le matin :
   trop petit). Les noms des signataires et le « Avec » gardent le corps de la
   ligne. EN BLOC, avec son propre interligne : en ligne, ses lignes gardaient
   le pas de la ligne parente (le montant de 19 px, 26 px de pas) ; en bloc
   elles prennent le leur, --leading-snug sur leur corps. Le point médian qui
   la séparait du « Avec » n'a plus de sens devant un bloc : masqué. */
.livre-vignette__roles {
	display: block;
	font-size: var(--font-size-s);
	line-height: var(--leading-snug);
}

.livre-vignette__separateur:has(+ .livre-vignette__roles) {
	display: none;
}

.livre-vignette__collection {
	color: var(--text-faint);
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
	margin: 0;
}

/* La ligne de mentions — date · pages · prix — n'existe que si l'écran la
   demande (§ 12.2, clé `vignette_mentions`). Même voix que la collection ;
   des nombres dans une phrase, donc chiffres elzéviriens, comme la tuile. */
.livre-vignette__mentions {
	color: var(--text-faint);
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
	font-variant-numeric: oldstyle-nums;
	margin: 0;
}

/*
 * Ni le titre ni le nom d'auteur ne sont soulignés au repos. Le nom est devenu
 * un lien et en avait hérité le soulignement du navigateur ; il reste
 * cliquable, et c'est le survol qui le dit.
 *
 * La couleur est reprise elle aussi : sans cela le lien prendrait celle des
 * liens et la règle de liste ne vaudrait que pour les contributeurs sans
 * fiche — c'est-à-dire presque personne.
 */

.livre-vignette__titre,
.livre-vignette__contributeurs a {
	text-decoration: none;
}

.livre-vignette__contributeurs a {
	color: inherit;
}

.livre-vignette__lien:hover .livre-vignette__titre,
.livre-vignette__contributeurs a:hover {
	text-decoration: underline;
}

/*
 * La collection suit la même règle que le nom d'auteur : cliquable, mais sans
 * décoration au repos. Trois lignes soulignées sous chaque couverture
 * donnaient une vignette entièrement rayée.
 */

.livre-vignette__collection a {
	color: inherit;
	text-decoration: none;
}

.livre-vignette__collection a:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Pastilles d'état
 * ---------------------------------------------------------------------- */

.livre-etats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3xs);
	margin: var(--space-3xs) 0 0;
}

.livre-etat {
	background: var(--surface-alt);
	border-radius: var(--radius-s);
	color: var(--text-muted);
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
	padding: 0.1em 0.5em;
}

/*
 * « À paraître » n'est plus une pastille de légende : elle se pose sur la
 * couverture (.couverture__pastille). Seule « À la une » garde ce traitement, et
 * elle n'est plus affichée par défaut — voir ekdotis_visible_badges().
 */

.livre-etat--epingle {
	background: var(--accent);
	color: var(--text-on-accent);
}

/* -------------------------------------------------------------------------
 * Pagination
 * ---------------------------------------------------------------------- */

/*
 * UNE RÈGLE POUR TOUTES LES PAGINATIONS (14 octobre au soir, suivi § 2.75) —
 * catalogue, collections, domaines, actualités, séries d'événements : un seul
 * gabarit, `archive/pagination.php`. Centrée sous le contenu, à --fiche-ecart
 * du bas réel de la dernière rangée ; chaque numéro dans une cible de 44 px ;
 * les flèches ‹ › au dessin des boutons des rangées défilantes ; au-dessus de
 * 48 rem les numéros, en dessous « Page n sur N ». Aucun filet, aucune
 * capitale. Les jetons --pagination-* portent ce qu'une forme dessine.
 */
.pagination {
	align-items: center;
	display: flex;
	font-family: var(--pagination-famille);
	font-size: var(--pagination-corps);
	gap: var(--space-2xs);
	justify-content: center;
	margin-top: var(--fiche-ecart);
	padding-block: 0 var(--space-l);
}

/* La liste qui précède n'ajoute pas son remplissage bas : l'écart est la seule
   marge de la pagination, du bas réel de la dernière rangée. */
.liste-entrees:has(+ .pagination) {
	padding-bottom: 0;
}

.pagination__liste {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3xs);
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pagination__entree .page-numbers {
	align-items: center;
	border-radius: var(--pagination-arrondi);
	color: var(--accent);
	display: inline-flex;
	height: var(--cible);
	justify-content: center;
	line-height: 1;
	min-width: var(--cible);
	text-decoration: none;
}

.pagination__entree a.page-numbers:hover {
	background: var(--pagination-survol);
	text-decoration: none;
}

.pagination__entree a.page-numbers:focus-visible,
.pagination__fleche:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	text-decoration: none;
}

.pagination__entree .current {
	background: var(--pagination-courante-fond);
	color: var(--pagination-courante-texte);
	font-weight: var(--pagination-courante-graisse);
}

.pagination__entree .dots {
	color: var(--text-faint);
}

/* Les flèches : les boutons des rangées défilantes (§ 2.63). */
.pagination__fleche {
	align-items: center;
	border-radius: var(--radius-m);
	color: var(--accent);
	display: inline-flex;
	flex: 0 0 auto;
	font-family: var(--font-ui);
	font-size: 1.75rem;
	height: var(--cible);
	justify-content: center;
	line-height: 1;
	text-decoration: none;
	width: var(--cible);
}

.pagination__fleche:hover,
.pagination__fleche:focus-visible {
	background: var(--accent-soft);
	text-decoration: none;
}

.pagination__fleche.est-inactif {
	background: none;
	color: var(--text-faint);
	cursor: default;
}

.pagination__etat {
	display: none;
	margin: 0;
}

@media (max-width: 47.99rem) {
	.pagination__liste {
		display: none;
	}

	.pagination__etat {
		display: block;
		padding-inline: var(--space-2xs);
	}
}

/* -------------------------------------------------------------------------
 * Fiche livre
 * ---------------------------------------------------------------------- */

.livre {
	padding-block: var(--space-l) var(--fin-de-page, var(--space-xl));
}

/*
 * L'ARTICLE REFERME SES FLOTTANTS — 13 octobre, constat de Phil sur Eurédit.
 * La couverture et la colonne de gauche flottent ; seule la zone large les
 * dégageait (`clear: both`), et elle n'est rendue que si elle a un contenu.
 * Sans elle, la colonne — une longue biographie — descendait sur le pied de
 * page. Un dégagement en fin d'article ne crée aucun contexte de formatage
 * de bloc : `.livre__haut` n'est pas touché, la couverture le déborde
 * toujours (§ 17.16).
 */
.livre::after {
	clear: both;
	content: "";
	display: block;
}

/*
 * Liens de la fiche : pas de soulignement au repos, souligné au survol.
 *
 * La fiche est dense en entités cliquables — auteurs, collections, domaines,
 * autre édition, diffuseur. Toutes soulignées, la titraille devenait un
 * grillage. C'est la règle de la maquette, et c'est déjà celle des vignettes
 * depuis la recette du 1er août.
 *
 * PORTÉE AU CONTRAT D'ADOPTION depuis le 26 août, et non plus à la seule fiche
 * livre : la fiche auteur est aussi dense en entités cliquables, et elle rendait
 * ses titres de rencontres soulignés là où la fiche livre ne les soulignait pas.
 * Un même bloc a le même dessin d'un gabarit à l'autre — le soulignement en fait
 * partie. *La convention du reste du site n'est toujours pas rediscutée : un
 * gabarit qui n'adopte pas le contrat garde la sienne.*
 */

.livre a,
.rubriques-socle a {
	text-decoration: none;
}

.livre a:hover,
.livre a:focus-visible,
.rubriques-socle a:hover,
.rubriques-socle a:focus-visible {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Les deux colonnes — annexe 300 px, principale au reste
 * ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * Fiche livre — les deux découpages de la maquette v2
 *
 * DEUX GRILLES QUI NE S'ALIGNENT PAS, ET C'EST VOULU. La zone haute découpe
 * 340 / 590 / 280, la zone basse 400 / 790 : la colonne couverture et la
 * colonne annexe ne partagent pas leur bord. Le README le dit en toutes
 * lettres — ne pas les aligner.
 *
 * LES PROPORTIONS, PAS LES PIXELS. Les valeurs du README supposent un
 * conteneur de 1280 px ; `--content-width` vaut 1280 par défaut mais reste
 * réglable (§ 17.15). Exprimées en `fr`, les colonnes gardent leur rapport à
 * toute l mais reste
 * réglable (§ 17.15). Exprimées en `fr`, les colonnes gardent leur rapport à
 * toute largeur, les gouttières étant retranchées d'abord.
 *
 * LA ZONE HAUTE N'EST PLUS UNE GRILLE — 26 août. Une grille impose à sa rangée
 * la hauteur de sa plus haute cellule : le bandeau descendait donc jusqu'au bas
 * de la couverture, et laissait jusqu'à 300 px de vide à droite sur une fiche
 * courante — deux tiers du fonds. Aucune valeur d'alignement ne corrige cela,
 * parce que le défaut n'est pas dans l'alignement mais dans le fait que la
 * couverture COMPTE dans la hauteur.
 *
 * ELLE FLOTTE DONC, et un flottant ne compte pas. Le bandeau se ferme sur le
 * plus haut des deux blocs de texte, la couverture le déborde et se pose sur le
 * fond de page ; le texte de présentation, écrit hors du bandeau, se range
 * contre elle et reprend la pleine largeur sous elle.
 *
 * `.livre__haut` NE DOIT SURTOUT PAS ÊTRE UN CONTEXTE DE FORMATAGE DE BLOC —
 * ni `overflow`, ni `display: flow-root`, ni grille, ni flex. Un flottant ne
 * sort pas d'un tel contexte, et tout le mécanisme s'effondrerait en silence :
 * le bandeau reprendrait la hauteur de la couverture et le texte cesserait de
 * la contourner. C'est la seule chose à ne pas faire dans ce fichier.
 *
 * `.livre__texte`, LUI, EN EST UN, et c'est ce qui le range à droite du
 * flottant sans le chevaucher : un conteneur de grille en largeur automatique
 * se rétrécit de lui-même à la place qui reste.
 * ---------------------------------------------------------------------- */

/*
 * IL N'Y A PLUS DE GRILLE SOUS LE BANDEAU — 26 août au soir.
 *
 * Deux colonnes de grille commencent à la même hauteur. Or celles-ci ne le
 * doivent pas : la présentation part contre la couverture, la colonne de gauche
 * part SOUS elle. Une grille imposait donc à la colonne d'attendre la fin de la
 * présentation, et 550 px de blanc s'ouvraient sous la couverture pendant que
 * le texte courait à côté — c'est le défaut que la recette a relevé.
 *
 * Deux flottants gauches empilés font ce qu'aucune grille ne fait : chacun
 * commence où le précédent finit, et le texte les longe tous les deux.
 */

@media (min-width: 52rem) {
	/*
	 * LA MARGE BASSE DU FLOTTANT EST CE QUI SÉPARE LA COUVERTURE DE LA ZONE
	 * BASSE, et il faut la poser ici plutôt que sur la zone basse.
	 *
	 * `.livre__large` porte bien ses 52 px de respiration, mais `clear` les
	 * MANGE : le dégagement d'un flottant remplace la marge au lieu de s'y
	 * ajouter. Sans cette marge-ci, la bibliographie commençait à trente pixels
	 * sous le bas du dernier flottant.
	 */
	/*
	 * LES FICHIERS JOINTS NE FLOTTENT PLUS SOUS LA COUVERTURE — 26 août au soir.
	 * Ils sont descendus dans la colonne de gauche de la zone basse, où ils
	 * coiffent la version numérique et les rencontres. Le second flottant et son
	 * `clear: left` sont partis avec eux ; la couverture est de nouveau seule à
	 * déborder.
	 */
	.livre__couverture {
		float: left;
		margin-block-end: var(--livre-zones-ecart);
		margin-inline-end: var(--book-haut-gouttiere);
		width: var(--cover-single-width);
	}

	/*
	 * DEUX RANGÉES DANS LE TEXTE, ET LA COLONNE DE DROITE LES TRAVERSE.
	 *
	 * Fichiers et feuilletage se rangent sous la titraille, dans sa colonne.
	 * Une rangée de grille étant aussi haute que sa plus haute cellule, les
	 * caractéristiques enjambent les deux rangées ; seule la colonne de gauche
	 * est découpée, et la rangée 2 y commence là où la titraille finit.
	 *
	 * `align-items: start` va avec : sans lui, chaque cellule s'étirerait à la
	 * hauteur de sa rangée et le calage par le haut serait perdu.
	 *
	 * LA COLONNE DES CARACTÉRISTIQUES PREND LA LARGEUR DE SON CONTENU, 280 px au
	 * plus (`fit-content`), et la titraille s'étend jusqu'à elle moins
	 * --space-xl. Correction de la classique (14 octobre, `9fba9ae`, suivi
	 * § 2.69), portée ici pour toutes les directions le 29 octobre (suivi
	 * § 2.113) : 280 px fixes et 70 px de gouttière bornaient la titraille à
	 * 374 px en contemporaine à 1 280 (« Le masque de chair… » sur quatre
	 * lignes), 132 px à 1 024.
	 */
	.livre__texte {
		align-items: start;
		column-gap: var(--space-xl);
		display: grid;
		grid-template-columns: minmax(0, 1fr) fit-content(var(--book-mesures-largeur));
	}

	.livre__titraille {
		grid-column: 1;
		grid-row: 1;
	}

	.livre__actions {
		grid-column: 1;
		grid-row: 2;
	}

	.livre__mesures {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	/*
	 * LE FERRAGE À DROITE EST CE QUI EMPÊCHE LE BLANC DE SE LIRE COMME UN TROU.
	 * Les deux blocs de texte ont chacun leur bord : la titraille le sien à
	 * gauche, les caractéristiques le leur à droite. Entre les deux, le vide
	 * cesse d'être un manque et devient une gouttière.
	 */
	.livre__mesures {
		text-align: right;
	}

	/*
	 * LE TEXTE DE PRÉSENTATION CONTOURNE LA COUVERTURE, puis reprend sous elle.
	 * Rien à écrire pour cela : c'est le contournement d'un flottant, et il
	 * suffit de ne pas l'en empêcher.
	 */
	/*
	 * LE TEXTE S'ALIGNE SUR LA COLONNE ET N'Y DÉROGE JAMAIS — arbitrage de la
	 * recette du 26 août, et c'est l'inverse de la référence.
	 *
	 * Liana Levi laisse le texte reprendre la pleine largeur sous la couverture.
	 * On ne la suit pas : un texte de vingt lignes à 126 caractères ne se lit
	 * pas. LA MESURE CONSTANTE L'EMPORTE SUR LE CONTOURNEMENT.
	 *
	 * UNE MARGE, ET NON UNE BORNE. Une `max-width` laisse le bloc commencer au
	 * bord gauche du conteneur, DERRIÈRE la couverture, et seules ses lignes
	 * sont raccourcies par le flottant : il restait 90 px de texte utile, sept
	 * mots par ligne. Une marge gauche égale à la couverture plus sa gouttière
	 * pose le bord du bloc là où la couverture s'arrête — et il y reste, sous
	 * elle comme à côté d'elle.
	 *
	 * LES DEUX BLOCS PARTAGENT LEUR BORD DROIT : le texte s'arrête où
	 * s'arrêtent les caractéristiques, c'est-à-dire au bord du conteneur. Rien
	 * à écrire pour cela, c'est la largeur automatique d'un bloc.
	 */
	/*
	 * ELLE LONGE LES FLOTTANTS, ELLE NE LES DÉGAGE PAS — c'est toute la
	 * différence avec la zone large, et c'est ce qui manquait aux onglets : ils
	 * étaient dans la zone large, donc ils descendaient sous toute la colonne de
	 * gauche et s'étalaient en pleine largeur, à sept cents pixels du texte
	 * qu'ils prolongent.
	 *
	 * Aucun `clear` ici : le retrait suffit à placer l'enveloppe à droite de la
	 * couverture puis de la colonne, et elle s'arrête où son contenu s'arrête,
	 * même si la colonne de gauche continue plus bas.
	 *
	 * LE RETRAIT EST PORTÉ PAR L'ENVELOPPE, pas par chacun des deux blocs : un
	 * bord commun s'écrit une fois, sans quoi il diverge à la première retouche.
	 */
	.livre__centre {
		margin-inline-start: calc(
			var(--cover-single-width) + var(--book-haut-gouttiere)
		);
		margin-top: var(--livre-zones-ecart);
	}

	/* Les onglets prolongent le texte : l'écart d'une rubrique, pas d'une zone. */
	.livre__centre > * + * {
		margin-top: var(--fiche-ecart);
	}

	/*
	 * SANS COLONNE DE GAUCHE, LE BLOC CENTRAL SE CALE AU BORD DE LA GRILLE —
	 * en Affiche seulement (`forme-affiche.css`), la seule forme dont le
	 * bandeau contient la couverture. Écrite ici le 26 octobre (suivi
	 * § 2.99), la règle valait pour toutes : en classique et en
	 * contemporaine, la couverture déborde du bandeau de 260 à 280 px, et le
	 * texte la contournait en colonne étroite avant de repartir dessous
	 * (Eurédit, « Lettres à une inconnue », 30 octobre).
	 */

	/* Le cartouche de la collection s'aligne en haut avec le texte de
	   présentation (l'écart de zone) : collé au bandeau, un aplat sur un
	   aplat. Les cartouches de biographie ont leur surtitre dans cet écart. */
	.livre__colonne > .rubrique--collection-cartouche:first-child {
		margin-top: var(--livre-zones-ecart);
	}

	/*
	 * La borne de lecture du § 17.15 est levée ici : la colonne fait 724 px et
	 * c'est elle qui mesure la ligne. Laisser `--reading-width` aurait rendu un
	 * bloc de 550 px flottant dans une colonne de 724, avec 174 px de vide
	 * contre le bord que les deux blocs sont censés partager.
	 */
	.livre__presentation .livre-apropos {
		max-width: none;
	}

	/*
	 * LA COLONNE DE GAUCHE EST LA COLONNE DE LA COUVERTURE — même largeur, même
	 * bord, même gouttière. `clear: left` la fait tomber sous elle : deux
	 * flottants de même largeur s'empilent, et la colonne prend la suite de la
	 * couverture comme si elles n'en faisaient qu'une.
	 */
	.livre__colonne {
		clear: left;
		float: left;
		margin-block-end: var(--livre-zones-ecart);
		margin-inline-end: var(--book-haut-gouttiere);
		width: var(--cover-single-width);
	}

	/*
	 * LA ZONE LARGE DÉGAGE LES DEUX FLOTTANTS — la couverture et la colonne.
	 * `both` et non `left` : c'est la seule valeur qui reste juste le jour où
	 * un thème enfant fait flotter quelque chose à droite.
	 */
	.livre__large {
		clear: both;
	}

	/*
	 * LES VIDÉOS REPRENNENT LEURS TROIS COLONNES. La surcharge « une seule
	 * colonne » avait été écrite pour l'annexe de 400 px ; le bloc a déménagé
	 * en pleine largeur et la règle générale du socle redevient la bonne.
	 */
	.livre__large .liste-medias {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.livre__large .lecteur {
		display: block;
	}

	.livre__large .lecteur__ouvrir {
		width: auto;
	}
}

/* -------------------------------------------------------------------------
 * Ordre d'empilement mobile (< 52 rem) — README « Ordre d'empilement mobile »
 *
 * Zone haute : couverture → titraille → caractéristiques → fichiers →
 * feuilletage. Les trois premiers suivent le balisage ; les fichiers et le
 * feuilletage, eux, doivent PASSER DERRIÈRE les caractéristiques, qui sont
 * leur voisin de droite en desktop. D'où leur enveloppe propre, et ce rang.
 *
 * Zone basse : contenu d'abord, annexe ensuite — le contexte après le livre.
 * ---------------------------------------------------------------------- */

@media (max-width: 51.999rem) {
	/*
	 * RIEN NE FLOTTE ET RIEN NE DÉBORDE : tout empile. La couverture reprend sa
	 * place dans la pile, et le bandeau la contient de nouveau — il n'y a plus
	 * de vide à droite à éviter, puisqu'il n'y a plus de droite.
	 */
	.livre__couverture,
	.livre__colonne {
		float: none;
		margin-inline-end: 0;
		width: auto;
	}

	/*
	 * L'ORDRE MOBILE EST CELUI DU BALISAGE, ET PLUS AUCUNE RÈGLE NE LE CORRIGE.
	 *
	 * Les trois `order` posés le matin réparaient le rang des fichiers joints,
	 * qui vivaient alors dans la zone haute. Ils sont descendus dans la zone
	 * basse : la pile tombe juste toute seule — couverture, titraille,
	 * caractéristiques, feuilletage, colonne de gauche, présentation, zone
	 * large.
	 *
	 * L'INVERSION DES DEUX COLONNES EST PARTIE AVEC ELLES, à la recette du soir.
	 * `.livre__contenu { order: 1 }` faisait passer la colonne de droite devant
	 * celle de gauche, et son motif — « le contexte après le livre » — avait
	 * expiré le jour où « À propos » a quitté cette colonne. La colonne de
	 * gauche précède désormais celle de droite, comme le balisage le dit.
	 *
	 * *Une règle qui compense une structure devient fausse quand la structure
	 * change ; les deux ont été retirées, pas ajustées.*
	 */
	.livre__texte {
		display: flex;
		flex-direction: column;
	}

	.livre__titraille {
		order: 1;
	}

	.livre__mesures {
		order: 2;
	}

	.livre__actions {
		order: 3;
	}

	/*
	 * L'EXTRAIT DE BIOGRAPHIE PARAÎT EN MOBILE, APRÈS LE DESCRIPTIF — 17
	 * octobre au soir (recette de Phil ; il était masqué, README § 83). Dans
	 * le balisage, la colonne de gauche précède le bloc central ; seule une
	 * fiche qui porte la carte passe en colonne flexible, et la colonne y
	 * suit le bloc central. Les autres fiches ne reçoivent aucune règle.
	 */
	.livre:has(> .livre__colonne :is(.rubrique--biographie, .rubrique--biographies-colonne, .rubrique--collection-cartouche)) {
		display: flex;
		flex-direction: column;
	}

	/* L'écart d'une rubrique au-dessus de la carte (1er novembre, point 58) :
	   le bloc central n'a pas de marge basse ni la colonne de marge haute,
	   et « Lire la suite » touchait la carte (0 px, Aubéron à 375). */
	.livre:has(> .livre__colonne :is(.rubrique--biographie, .rubrique--biographies-colonne, .rubrique--collection-cartouche)) > .livre__colonne {
		margin-block-start: var(--fiche-ecart);
		order: 1;
	}

	.livre:has(> .livre__colonne :is(.rubrique--biographie, .rubrique--biographies-colonne, .rubrique--collection-cartouche)) > .livre__large {
		order: 2;
	}

	/* Un écart de rubrique entre le bloc argument et les caractéristiques,
	   qui passent dessous (17 octobre au soir, recette de Phil). */
	.livre__titraille .livre-argument {
		margin-block-end: var(--rubrique-marge);
	}
}

/*
 * SUR LA FICHE, LA COUVERTURE EST DIMENSIONNÉE PAR SA LARGEUR.
 *
 * Le § 3.13 dimensionne par la hauteur, mais il vise l'effet d'étagère d'une
 * LISTE : des couvertures de formats différents posées sur une même ligne. Sur
 * une fiche il n'y en a qu'une — rien à aligner, aucune proportion relative à
 * rendre, et le § 17.15 demande explicitement 300 px affichés pour un fichier
 * de 600 px, sans recadrage.
 *
 * La boîte reprend donc une hauteur automatique : la réserve du § 3.13 n'a
 * plus d'objet ici.
 *
 * La couverture reste CENTRÉE dans sa colonne — décision de la recette du
 * 1er août. L'alignement à gauche ne valait que pour les vignettes, où le
 * titre et l'auteur se calent dessous.
 */

.livre__couverture .couverture {
	height: auto;
	justify-content: center;
}

.livre__couverture .couverture__image,
.livre__couverture .couverture__substitut {
	aspect-ratio: var(--cover-ratio, 0.6667);
	height: auto;
	max-width: 100%;
	width: var(--cover-single-width);
}

/*
 * PAS DE FILET SOUS LA COUVERTURE.
 *
 * La maquette en portait un — trois pixels navy, la « ligne d'étagère » —
 * retiré à la recette. La règle est supprimée, et non seulement sa couleur :
 * un filet transparent garderait ses trois pixels et le retrait qui va avec,
 * laissant sous chaque couverture un espace que rien n'expliquerait.
 *
 * La classe .book-cover--placeholder reste posée par le gabarit : elle ne sert
 * plus ici, mais elle dit qu'une couverture est une composition de
 * remplacement, ce qu'un thème enfant peut vouloir traiter.
 */

/* -------------------------------------------------------------------------
 * Titraille — un flux, plus une grille
 *
 * ELLE ÉTAIT UNE GRILLE À DEUX COLONNES, `minmax(0,1fr) auto`, et la seconde
 * n'existait que pour l'encadré des distinctions. Les distinctions ont rejoint
 * la colonne des caractéristiques (maquette v2) : l'encadré n'est plus rendu
 * ici, mais la grille l'attendait toujours.
 *
 * CE QUE ÇA FAISAIT, ET C'EST INSTRUCTIF. La titraille v2 a six enfants à plat
 * — collection, titre, sous-titre, rayon, contributeurs, pastille. Une grille à
 * deux colonnes les range en quinconce, et la seconde colonne, dimensionnée
 * `auto` sur un contenu qui n'existait plus, valait ZÉRO pixel : le sous-titre
 * y tombait, s'écrivait sur cinq lignes dans une colonne de largeur nulle, et
 * débordait par-dessus les contributeurs. Les 250 px de blanc sous la titraille
 * étaient la hauteur que ses rangées réservaient.
 *
 * Une règle qui survit à son motif ne se contente pas d'être inutile : elle
 * attend un contenu qui ne viendra plus, et compose autour de son absence.
 * ---------------------------------------------------------------------- */

.livre__etat {
	color: var(--alert);
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
	font-weight: 600;
	margin: 0 0 var(--space-2xs);
}

/*
 * Le titre de la fiche prend le cran du dessus, `3xl`, et le sous-titre le cran
 * sous lui. Tous deux portaient un cran de moins : le titre du livre se lisait
 * au même corps que « Avis & presse », et la page n'avait plus de tête.
 *
 * LEURS CORPS ET LEURS GRAISSES ONT DÉMÉNAGÉ — 26 août. Ils vivent avec le
 * reste de la titraille, dans le contrat `--livre-*` de la section « Fiche
 * livre v2 » plus bas, d'où l'écran de configuration les atteint. Ces deux
 * règles avaient un doublon depuis la session C : il fallait les lire toutes
 * les deux pour savoir ce que rendait la page, et l'une gagnait sur
 * l'interligne pendant que l'autre gagnait sur l'interlettrage.
 *
 * Ne restent ici que les marges, qui sont de la mise en page.
 */

.livre__titre {
	margin: 0;
}

.livre__sous-titre {
	font-style: italic;
	margin: var(--space-2xs) 0 0;
}

/* -------------------------------------------------------------------------
 * Distinctions — § 3.15, deux rendus selon le nombre
 * ---------------------------------------------------------------------- */

/* Une seule : une ligne, fond ajusté au texte. Pas de titre de rubrique. */

.distinction {
	align-items: center;
	background: var(--surface-alt);
	display: inline-flex;
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	gap: var(--space-2xs);
	margin: var(--space-s) 0 0;
	padding: var(--space-3xs) var(--space-2xs);
}

.distinction .icone--distinction {
	color: var(--accent);
	flex: none;
}

/*
 * Deux et plus : un encadré à droite de la titraille. La gouttière est ICI,
 * portée par l'encadré, jamais par un `gap` de la grille — voir le commentaire
 * de .livre__titraille.
 */

.distinctions {
	background: var(--surface-alt);
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	margin-inline-start: var(--book-prizes-gap);
	padding: var(--space-s);
	width: var(--book-prizes-width);
}

.distinctions__liste {
	list-style: disc;
	margin: 0;
	padding-inline-start: var(--space-s);
}

.distinctions__entree + .distinctions__entree {
	margin-top: var(--space-3xs);
}

@media (max-width: 52rem) {
	/* La bascule de la titraille est partie avec sa grille : il n'y a plus de
	   seconde colonne à replier. */

	.distinctions {
		margin-inline-start: 0;
		margin-top: var(--space-m);
		width: auto;
	}
}

/* -------------------------------------------------------------------------
 * Contributeurs — § 3.6
 * ---------------------------------------------------------------------- */

.livre-contributeurs {
	font-family: var(--font-ui);
	margin-top: var(--space-m);
}

.livre-contributeurs > p {
	margin: 0 0 var(--space-3xs);
}

.livre-contributeurs__auteurs {
	font-size: var(--font-size-l);
}

.livre-contributeurs__mention,
.livre-contributeurs__separateur {
	color: var(--text-muted);
}

.livre-contributeurs__roles,
.livre-contributeurs__complement {
	color: var(--text-muted);
	font-size: var(--font-size-s);
}

/*
 * « et 17 autres » est un <details> en ligne, pas un bloc : il se lit dans la
 * phrase des auteurs, à sa place. Le triangle du navigateur est retiré — la
 * mention se suffit, et un marqueur au milieu d'une ligne de noms la casse.
 */

.livre-contributeurs__tout-voir {
	display: inline;
}

.livre-contributeurs__tout-voir summary {
	color: var(--link);
	cursor: pointer;
	display: inline;
	list-style: none;
}

.livre-contributeurs__tout-voir summary::-webkit-details-marker {
	display: none;
}

.livre-contributeurs__tout-voir summary:hover {
	text-decoration: underline;
}

.livre-contributeurs__suite {
	font-size: var(--font-size-s);
	list-style: none;
	margin: var(--space-2xs) 0 0;
	padding: 0;
}

/* -------------------------------------------------------------------------
 * Parution, prix, autre édition — § 3.4, § 3.11, § 3.16
 * ---------------------------------------------------------------------- */

.livre-parution {
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	margin-top: var(--space-m);
}

.livre-parution__lignes {
	margin: 0;
}

.livre-parution__ligne {
	display: flex;
	gap: var(--space-2xs);
}

.livre-parution__ligne dt {
	color: var(--text-muted);
}

.livre-parution__ligne dt::after {
	content: " :";
}

.livre-parution__ligne dd {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Autres éditions, panneau d'onglet — § 3.16, § 3.13
 *
 * LA COUVERTURE SEULE (26 octobre, décision de Phil, suivi § 2.108) : les
 * éditions rapprochées sont leurs couvertures, côte à côte sur une même ligne
 * de base — la couverture d'un poche est plus courte, et c'est par le bas que
 * la comparaison se lit —, chacune le lien vers sa fiche. Plus de tableau
 * date · ISBN · prix ni de « Voir le livre » : les deux colonnes, leurs deux
 * seuils et la ligne en flex du tableau sont partis avec eux.
 *
 * LA HAUTEUR DE BASE EST LOCALE : 15 rem — 240 px — au lieu des 300 px du
 * catalogue, nettement en dessous de la couverture principale, dont la
 * couverture n'est plus voisine ; le § 3.13 joue entièrement — c'est la base
 * qui change, pas le mode.
 * ---------------------------------------------------------------------- */

.livre-editions {
	--cover-base: 15rem;

	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-m);
	list-style: none;
	margin: 0;
	padding: 0;
}

.livre-editions__entree {
	flex: none;
	max-width: 100%;
}

/* Le lien se referme sur sa couverture ; le focus se voit autour d'elle. */
.livre-editions__couverture {
	display: block;
}

.livre-editions__couverture:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 4px;
}

/* -------------------------------------------------------------------------
 * Version numérique, panneau d'onglet — § 3.17
 *
 * Aucune règle de tableau ici : le balisage est celui de Détails, et c'est le
 * même `.livre-meta` qui le met en page. Deux panneaux, une seule disposition —
 * si l'un change, l'autre suit, ce qui est le comportement voulu.
 * ---------------------------------------------------------------------- */

.livre-numerique__lien {
	margin-top: var(--space-m);
}

/* -------------------------------------------------------------------------
 * Onglets de la fiche — À propos / Détails / Sommaire
 * ---------------------------------------------------------------------- */

.livre-onglets {
	margin-top: var(--space-l);
}

/*
 * SEUL BLOC BORNÉ À LA LARGEUR DE LECTURE (§ 17.15). L'onglet Détails, lui,
 * ne l'est jamais : une grille de caractéristiques n'est pas de la prose, et
 * la borner laissait 628 px vides à droite. C'est le défaut corrigé en v9, et
 * il ne doit pas revenir par la porte des onglets.
 */

.livre-apropos {
	max-width: var(--reading-width);
}

.livre-apropos__chapo {
	font-size: var(--font-size-l);
	font-style: italic;
	margin: 0 0 var(--space-s);
}

.livre-apropos__texte > :first-child {
	margin-top: 0;
}

/* -------------------------------------------------------------------------
 * TRONCATURE D'UN TEXTE LONG — § 3.8, § 4.1
 *
 * UN SEUL NOM POUR DEUX BLOCS. Le mécanisme est né le 3 août pour le
 * descriptif du livre, sous le nom de ce bloc-là ; la biographie d'auteur le
 * demande à son tour le 6. Le renommer maintenant coûte quatre sélecteurs et
 * évite qu'un troisième bloc ne recopie les règles une fois de plus.
 *
 * TOUT EST DÉPLIÉ PAR DÉFAUT, et c'est la classe `js` de l'en-tête qui replie.
 * Une page qui masque du texte sans pouvoir le révéler serait pire que pas de
 * troncature du tout : sans JavaScript, le lecteur a le texte entier et le
 * bouton ne s'affiche pas, puisqu'il ne servirait à rien.
 *
 * Le repli est un `display: none` et non une hauteur bornée : la suite doit
 * sortir du flux, sinon elle continue de pousser la fiche vers le bas — ce
 * qu'on cherchait précisément à éviter.
 * ---------------------------------------------------------------------- */

.texte-long__tout-voir {
	display: none;
}

.js .texte-long--tronque .texte-long__suite {
	display: none;
}

.js .texte-long--tronque.est-ouvert .texte-long__suite {
	display: block;
}

.js .texte-long--tronque .texte-long__tout-voir {
	background: none;
	font-weight: 600;
	border: 0;
	color: var(--link);
	cursor: pointer;
	display: inline-block;
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	margin-top: var(--space-2xs);
	padding: 0;
}

/*
 * LA PRÉSENTATION D'UNE COLLECTION, REPLIÉE DANS SA TÊTE (26 octobre, suivi
 * § 2.101) : le même mécanisme, mais le bouton est un bouton — le gabarit
 * de la direction (`.bouton`), restitué ici parce que la règle du lien
 * ci-dessus, plus spécifique, l'emportait. Dépliée, la suite reçoit le
 * focus (front.js) : pas de contour sur un bloc de texte.
 */
.js .archive-intro .texte-long--tronque .texte-long__tout-voir {
	background: var(--accent);
	border-radius: var(--radius-m);
	color: var(--text-on-accent);
	margin-top: var(--space-s);
	padding: var(--space-2xs) var(--space-s);
}

.archive-intro .texte-long__visible > :last-child,
.archive-intro .texte-long__suite > :last-child {
	margin-bottom: 0;
}

.archive-intro .texte-long__suite:focus {
	outline: none;
}

.livre-details {
	max-width: none;
}

.livre-details__autres {
	margin-top: var(--space-m);
}

.livre-details__autres-titre {
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	margin: 0 0 var(--space-2xs);
}

/* Sommaire — <details> natifs, aucun JavaScript. */

.livre-sommaire__partie {
	padding-block: var(--space-2xs);
}

.livre-sommaire__titre {
	cursor: pointer;
	font-family: var(--font-body);
	font-weight: 600;
}

.livre-sommaire__partie--plat {
	font-weight: 600;
	margin: 0;
}

.livre-sommaire__entrees {
	color: var(--text-muted);
	list-style: none;
	margin: var(--space-2xs) 0 0;
	padding-inline-start: var(--space-s);
}

.livre-sommaire__entrees li + li {
	margin-top: var(--space-3xs);
}

/* -------------------------------------------------------------------------
 * Colonne annexe — à télécharger, version numérique
 * ---------------------------------------------------------------------- */

.livre-annexe__titre {
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	font-weight: 600;
	margin: 0 0 var(--space-2xs);
}

.livre-annexe .fichiers__entree {
	padding-block: var(--space-2xs);
}

/* -------------------------------------------------------------------------
 * Icône du type de fichier joint — § 3.12
 *
 * LA BOÎTE EXISTE MÊME SANS DESSIN. Elle mesure 22 × 26, la taille du dessin,
 * et cette réserve est structurelle : un type sans icône laisse un blanc de la
 * bonne largeur, et le titre du fichier ne se décale pas d'une ligne à l'autre.
 *
 * L'ICÔNE PASSE DEVANT — `order: -1`. Le balisage met le titre en premier
 * parce que c'est lui qui compte : il est le lien, il est ce qu'un lecteur
 * d'écran doit lire d'abord. L'ordre visuel se règle en CSS, où il ne coûte
 * rien à personne.
 *
 * LE LIBELLÉ RESTE LU, JAMAIS VU. Il est masqué par la technique du décalage
 * hors cadre plutôt que par `display: none`, qui le retirerait aussi aux
 * lecteurs d'écran — et ceux-là n'ont pas d'icône à regarder.
 * ---------------------------------------------------------------------- */

/*
 * `display` MANQUAIT, ET LA RÉSERVE NE S'APPLIQUAIT PAS — défaut préexistant,
 * trouvé le 25 août.
 *
 * L'élément est un `span` : par défaut `inline`, et un élément inline ignore
 * `width` et `height`. Les 22 × 26 ci-dessous n'ont donc jamais rien borné, et
 * le SVG tombait sur sa taille intrinsèque — mesuré 504 × 596 sur la fiche de
 * « La Jalousie », une icône de document haute comme la moitié de la page.
 *
 * Le défaut ne date pas de cette session : la règle n'a jamais été portée,
 * elle était seulement moins visible dans une colonne annexe étroite, où
 * `max-width` la ramenait à la largeur de colonne.
 */

.fichiers__type {
	color: var(--link);
	display: inline-flex;
	flex: none;
	height: 26px;
	order: -1;
	width: 22px;
}

.fichiers__type svg {
	display: block;
	height: 100%;
	width: 100%;
}

.fichiers__type-intitule {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Feuilleter un extrait — § 3.17.

   La place de l'icône est réservée mais vide : le jeu SVG du § 3.12 n'existe
   pas encore, et un lien qui se décale de vingt pixels le jour où il arrive
   est un défaut qu'on peut éviter d'avance. Mêmes dimensions que la réserve
   du type des fichiers joints, pour que les deux lignes s'alignent. */

.feuilletage {
	align-items: center;
	display: flex;
	gap: var(--space-2xs);
	margin: 0;
}

.feuilletage__icone {
	color: var(--link);
	flex: none;
	height: 26px;
	width: 22px;
}

.feuilletage__icone svg {
	display: block;
	height: 100%;
	width: 100%;
}

.feuilletage__lien {
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
}

/* -------------------------------------------------------------------------
 * Zone basse
 * ---------------------------------------------------------------------- */

.livre__zone-basse > * + * {
	margin-top: var(--space-xl);
}

/*
 * LA BOÎTE CRÈME A DISPARU AVEC SON BALISAGE — 25 août.
 *
 * `.livre-echo` fondait avis et vidéos dans un seul encadré ; le README en fait
 * deux sections distinctes du bas de page, et l'enveloppe n'est plus rendue.
 * Ses règles sont retirées plutôt que laissées : une règle qui ne vise plus
 * aucun balisage ne lève aucune erreur et ne rend rien — elle se contente de
 * faire croire qu'un dessin existe encore.
 *
 * Ce que la boîte apportait en habillage — fond, retrait, filets d'accent —
 * relève de la session C, qui redessinera le bas de page sur le balisage
 * nouveau. Entre les deux, les rubriques prennent le dessin générique.
 */

/* -------------------------------------------------------------------------
 * Caractéristiques — une ligne par donnée
 *
 * ÉTIQUETTE ET VALEUR CÔTE À CÔTE, grille 110 px / 1fr. Empilées, les onze
 * lignes doublaient la hauteur de la colonne et la fiche paraissait plus
 * longue qu'elle n'est. Une valeur longue passe à la ligne dans sa cellule
 * sans casser la grille : c'est ce que `minmax(0, 1fr)` garantit.
 *
 * TROIS BLOCS, DEUX FILETS, ET LES FILETS APPARTIENNENT AU BLOC QUI LES SUIT.
 *
 * `border-top` plutôt qu'une règle conditionnelle : le filet du bloc technique
 * ne se dessine que s'il a un frère au-dessus, celui d'« autres informations »
 * ne se dessine que si le bloc existe. Pas de distinctions, pas de filet du
 * haut ; une colonne réduite au seul bloc technique n'en a aucun. Le gabarit
 * n'a rien à tester, et la feuille non plus.
 *
 * SUR LE FONDS RÉEL, LE CAS COURANT EST « AUCUN FILET » : 2 fiches sur 1 598
 * portent une distinction, 563 portent une phrase d'autres informations. La
 * maquette a été dessinée sur la fiche la plus riche du site, qui est aussi la
 * moins représentative.
 * ---------------------------------------------------------------------- */

.livre-caracteristiques {
	margin: 0;
}

.livre-caracteristiques__bloc + .livre-caracteristiques__bloc {
	margin-top: var(--carac-bloc-ecart);
}

/*
 * LE FILET SE DESSINE SUR UN BLOC QUI EN SUIT UN AUTRE. Le premier bloc de la
 * colonne, quel qu'il soit, n'en porte jamais — c'est ce que `+` garantit.
 */

.livre-caracteristiques__ligne {
	margin: 0;
}

.livre-caracteristiques__ligne + .livre-caracteristiques__ligne {
	margin-top: var(--carac-ligne-ecart);
}

/*
 * Les distinctions : une par ligne, sans puce. Le socle remet à plat toutes ses
 * listes de la même façon — voir la règle commune des contributeurs, du
 * palmarès et des fichiers joints.
 */

.livre-caracteristiques__liste {
	display: grid;
	gap: var(--space-3xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* -------------------------------------------------------------------------
 * Du même auteur — une ligne, qui défile dans son conteneur
 *
 * TOUTE RANGÉE DÉFILE DANS SON CONTENEUR, À TOUTE LARGEUR (26 octobre, point
 * 47, suivi § 2.110 ; c'était sous 52 rem seulement depuis le 10 octobre,
 * fiche Binet d'Eurédit). Le gabarit ne marque `--defilante` qu'au-delà de
 * cinq titres, le compte qui tient dans une rangée de 1 280 px — mais la
 * rangée n'a pas toujours 1 280 px : en disposition colonne (Affiche), la
 * zone large fait 1 064 px à 1 440 et 662 à 1 024, et cinq couvertures de
 * 212 px (1 156 px avec les écarts) débordaient de la page — 68 px sur
 * « Océans » à 1 440, 477 à 1 024 : la page entière défilait de côté. Le
 * mécanisme ne dépend plus du compte : `overflow-x` et `scroll-snap` sur
 * toute rangée, sans une ligne de JavaScript ; une rangée qui tient n'a ni
 * barre ni défilement, et la page ne s'élargit jamais.
 *
 * La classe `--defilante` reste le balisage des rangées qui défilent partout
 * (`tabindex` de groupe, rôle, nom, sans script) ; pour les autres, le script
 * pose la zone focalisable quand la rangée déborde réellement, et les
 * vignettes sont des liens : la tabulation les atteint et le navigateur fait
 * défiler la rangée jusqu'à elles.
 * ---------------------------------------------------------------------- */

.biblio-ligne {
	display: grid;
	gap: var(--space-m);
	grid-auto-columns: var(--biblio-colonne);
	grid-auto-flow: column;
	justify-content: start;
	overflow-x: auto;
	scroll-snap-type: x proximity;
}

.biblio-ligne > * {
	scroll-snap-align: start;
}

/* En pied, aligné à gauche. Une boîte flexible plutôt qu’un paragraphe en
   ligne : sa hauteur est celle du lien, sans la ligne de base d’un corps
   plus grand qui ajoutait 3 px au-dessus et dessous. */
.rubrique__pied {
	display: flex;
	justify-content: flex-start;
	margin: var(--rubrique-pied-ecart) 0 0;
}

.rubrique__tout-voir {
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
}

.onglets__compteur {
	opacity: 0.75;
}

/* -------------------------------------------------------------------------
 * Avis — grille de trois, citation bornée
 * ---------------------------------------------------------------------- */

/*
 * TROIS COLONNES, QUEL QUE SOIT LE NOMBRE — § 17.6, § 17.7.
 *
 * `repeat(3, …)` et non `auto-fit` : `auto-fit` replie les colonnes vides et
 * laisse le survivant s'étirer sur toute la largeur. Un avis seul y devenait
 * une citation de 1 200 px de long, illisible, et le bloc perdait sa forme —
 * exactement ce qui avait été corrigé le 1er août sur les médias.
 *
 * LA RÈGLE EST ÉCRITE UNE FOIS POUR LES DEUX BLOCS. Ils la demandaient tous
 * les deux et l'avaient résolue chacun de son côté, l'un correctement et
 * l'autre pas : c'est ainsi que deux blocs jumeaux divergent. Un troisième
 * bloc de rangée en héritera au lieu d'avoir à redécider.
 *
 * À NE PAS ÉTENDRE AUX GRILLES DE VIGNETTES. Celles du catalogue emploient
 * `auto-fill`, qui garde ses colonnes vides et ne s'étire donc jamais : elles
 * n'ont pas le défaut et comptent leurs colonnes selon la place disponible,
 * pas selon un nombre fixe.
 */

.liste-medias,
.rubrique--avis .onglets__panneau {
	display: grid;
	gap: var(--space-m);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/*
 * DANS L'ANNEXE, UNE SEULE COLONNE — corrigé le 25 août.
 *
 * Les trois colonnes ci-dessus ont été écrites pour une zone basse pleine
 * largeur, où elles valaient 380 px chacune. La maquette v2 range la revue de
 * presse et les vidéos dans une colonne de 400 px : les trois colonnes y
 * tombaient à 110 px, et les citations se composaient sur deux mots de large.
 *
 * Le nombre de colonnes est une décision de composition, pas un dessin : il
 * dépend de la place, et la place a changé.
 */

/*
 * LES VIDÉOS NE SONT PLUS ICI. La règle visait la colonne étroite ; le bloc a
 * déménagé en pleine largeur et y reprend ses trois colonnes. Ne reste que le
 * panneau d'avis, qui vit dans la colonne centrale et n'a jamais eu la place de
 * trois colonnes.
 */

.livre .rubrique--avis .onglets__panneau {
	grid-template-columns: minmax(0, 1fr);
}

/*
 * LA REVUE DE PRESSE PREND TROIS COLONNES EN ZONE LARGE — demande du 26 août.
 * Elle en a la largeur, et trois citations côte à côte se lisent mieux
 * qu'empilées.
 *
 * LA RÈGLE NOMME LA ZONE, PAS LE BLOC, et c'est délibéré : trois colonnes est
 * une décision de PLACE. Le jour où la revue de presse retournerait dans une
 * colonne de 390 px, cette règle ne doit pas l'y suivre — elle y écraserait
 * trois citations dans la largeur d'une. C'est le partage arrêté la veille : ce
 * qui décrit une chose se scope à la fiche, ce qui décrit une place se scope à
 * la zone.
 *
 * ELLE EST ÉCRITE ICI, JUSTE APRÈS LE REPLI, ET NON DANS LA SECTION DE LA ZONE
 * LARGE. Les deux sélecteurs ont la même spécificité — trois classes chacun —,
 * et c'est donc l'ORDRE qui tranche. Placée plus haut dans le fichier, comme
 * elle l'était d'abord, elle perdait en silence : la colonne unique restait, et
 * aucune erreur ne le disait. *À spécificité égale, la place dans le fichier
 * est la règle ; elle doit donc se lire près de ce qu'elle recouvre.*
 */

@media (min-width: 52rem) {
	.livre__large .rubrique--avis .onglets__panneau {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/*
	 * LE HAUT S'ALIGNE, LE BAS RESTE IRRÉGULIER — et c'est le seul des deux
	 * bords qu'on puisse tenir.
	 *
	 * ÉGALISER LE BAS SERAIT UN MENSONGE DE FORME : les citations vont de deux
	 * à six lignes, et rien ne remplirait l'écart qu'un blanc. Le filet de la
	 * citation, lui, s'étirerait jusqu'au bas de la plus longue et annoncerait
	 * un texte qui n'existe pas. On aligne donc ce qui commence, et on laisse
	 * finir ce qui finit.
	 */
	.livre__large .rubrique--avis .avis {
		align-self: start;
	}

	/*
	 * EXTRAITS ENTIERS — 30 octobre (maquette Rey, `avis_extraits_entiers`) :
	 * deux colonnes au lieu de trois, haut aligné, bas libre. Écrite après la
	 * règle des trois colonnes, qui a la même spécificité moins une classe.
	 */
	.livre__large .rubrique--avis-entier .onglets__panneau,
	.livre__large .rubrique--avis-entier .avis__suite-liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Extraits entiers : la citation n'est plus bornée ; le dépliant prend toute
   la rangée et range ses extraits sur la grille du panneau. */
.livre__zone-basse .rubrique--avis-entier .avis__citation,
.rubrique--avis-entier .avis__citation {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: none;
	overflow: visible;
}

.rubrique--avis-entier .avis__suite {
	grid-column: 1 / -1;
}

.rubrique--avis-entier .avis__suite-bouton {
	cursor: pointer;
	font-family: var(--font-ui);
	min-height: var(--cible);
}

.rubrique--avis-entier .avis__suite-liste {
	align-items: start;
	display: grid;
	gap: var(--space-m);
	grid-template-columns: minmax(0, 1fr);
	margin-top: var(--space-m);
}

@media (max-width: 52rem) {
	.liste-medias,
	.rubrique--avis .onglets__panneau {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 34rem) {
	.liste-medias,
	.rubrique--avis .onglets__panneau {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * PIÈGE À CONNAÎTRE : le script bascule les panneaux par l'attribut `hidden`,
 * dont le `display: none` vient de la feuille du navigateur. Une règle
 * d'auteur qui pose `display: grid` la bat, et TOUS les panneaux
 * s'afficheraient à la fois. D'où la règle suivante, qui n'est pas
 * décorative.
 *
 * Elle l'emporte par la spécificité — l'attribut vaut une classe de plus — et
 * non par l'ordre : la règle de grille ci-dessus peut donc être déplacée sans
 * rallumer le piège.
 */

.rubrique--avis .onglets__panneau[hidden] {
	display: none;
}

.livre__zone-basse .avis {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	padding-block: var(--space-2xs) 0;
}

.avis__signature {
	color: var(--text-muted);
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
	margin: 0;
}

.avis__lien {
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
	margin: 0;
	margin-top: auto;
	padding-top: var(--space-2xs);
}

/*
 * Citation bornée à trois lignes, quelle que soit la largeur de colonne.
 *
 * L'accesseur coupe déjà le texte à 320 signes pour ne pas expédier
 * cinquante kilo-octets par encart ; ce plafond-ci est celui de la MISE EN
 * PAGE — trois lignes de haut, sans quoi une colonne de la rangée pousserait
 * les deux autres. La reprise ayant versé l'article entier dans le champ de
 * citation, les deux bornes sont nécessaires : l'une pour le poids, l'autre
 * pour la forme.
 */

.livre__zone-basse .avis__citation {
	border-left: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	margin: 0;
	max-width: none;
	overflow: hidden;
	padding-left: 0;
}

/*
 * Agenda et actualités se font face. Une colonne seule prend toute la largeur
 * plutôt que de laisser un blanc en face d'elle (§ 2.5) : c'est `auto-fit` qui
 * s'en charge, sans que le gabarit ait à compter.
 */

/*
 * `.livre__paire` a disparu avec son balisage — 25 août. Rencontres et
 * actualités ne se font plus face en bas de page : elles sont l'une sous
 * l'autre dans la colonne annexe, où le lien avec CE livre reste évident.
 */

.rubrique {
	margin-top: var(--space-l);
	padding-top: var(--space-m);
}

.livre__titre-rubrique {
	font-family: var(--section-title-family);
	font-size: var(--section-title-size);
	font-weight: var(--section-title-weight);
	letter-spacing: var(--section-title-spacing);
	line-height: var(--leading-tight);
	margin-bottom: var(--space-xs);
	text-transform: var(--section-title-transform);
}

.livre-rayons {
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	margin-top: var(--space-m);
}

.livre-rayons__groupe {
	margin: 0 0 var(--space-3xs);
}

.livre-rayons__intitule {
	color: var(--text-faint);
	margin-inline-end: var(--space-2xs);
}

.livre-rayons__lien + .livre-rayons__lien::before {
	content: ", ";
}

.livre-meta {
	display: grid;
	gap: 2px;
	margin: 0;
}

/* Les lignes alternent sur le fond secondaire : le filet entre lignes est
   parti (13 octobre). */
.livre-meta__ligne:nth-child(odd) {
	background: var(--surface-alt);
}

.livre-meta__ligne {
	display: grid;
	gap: var(--space-2xs);
	grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
	padding-block: var(--space-2xs);
	padding-inline: var(--space-xs);
}

.livre-meta__intitule {
	color: var(--text-muted);
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
}

.livre-meta__valeur {
	margin: 0;
}

.livre-meta__autres {
	color: var(--text-muted);
	margin-top: var(--space-s);
}

.contributeurs,
.palmares,
.fichiers,
.formats {
	list-style: none;
	margin: 0;
	padding: 0;
}

.contributeurs__entree,
.palmares__entree,
.fichiers__entree,
.formats__entree {
	padding-block: var(--space-3xs);
}

.contributeurs__role,
.palmares__annee,
.palmares__mention,
.formats__format {
	color: var(--text-faint);
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
}

.contributeurs__mention {
	color: var(--text-muted);
	font-style: italic;
}

.contributeurs__complement {
	color: var(--text-muted);
	margin-top: var(--space-s);
}

.livre-numerique__lien {
	margin-top: var(--space-m);
}

.bouton {
	background: var(--accent);
	border-radius: var(--radius-m);
	color: var(--text-on-accent);
	display: inline-block;
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	padding: var(--space-2xs) var(--space-s);
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * Archives — brique commune (§ 17)
 * ---------------------------------------------------------------------- */

.liste-entrees {
	display: grid;
	gap: var(--space-xl) var(--space-l);
	padding-block: var(--space-m);
}

.liste-entrees > * {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Les colonnes de .liste-entrees--grille sont définies plus bas, avec le pas qui
 * les accorde au nombre de livres par page. */

.liste-entrees--cartes {
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

/*
 * La liste en pile occupe la boîte de page, comme les autres. C'est la
 * citation qu'elle contient qui est du texte suivi, et c'est donc elle qui
 * porte la largeur de lecture — pas la colonne. Sans quoi la revue de presse
 * s'affichait dans une colonne de six cent soixante pixels, le reste vide.
 */

.liste-entrees--empilee {
	grid-template-columns: minmax(0, 1fr);
}

.archive-intro__chapo,
.archive-note {
	color: var(--text-muted);
	max-width: var(--reading-width);
}

.archive-note {
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	padding-block: var(--space-m);
}

/* Filtres par sous-type. */

.sous-types {
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	padding-block: var(--space-2xs);
}

.sous-types__liste,
.alphabet__liste {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.sous-types__entree a,
.alphabet__entree a {
	background: var(--surface-alt);
	border-radius: var(--radius-m);
	display: inline-block;
	padding: 0.1em 0.6em;
	text-decoration: none;
}

.sous-types__courant {
	background: var(--accent);
	border-radius: var(--radius-m);
	color: var(--text-on-accent);
	display: inline-block;
	padding: 0.1em 0.6em;
}

/* Cartes de contenu relié. */

.carte {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}

.carte--avis {
	padding-bottom: var(--space-m);
}

.carte__image {
	height: auto;
	width: 100%;
}

.carte__titre {
	font-size: var(--font-size-l);
}

.carte__titre a {
	text-decoration: none;
}

.carte__titre a:hover {
	text-decoration: underline;
}

.carte__date,
.carte__mention,
.carte__chapo,
.carte__relie {
	margin: 0;
}

.carte__date,
.carte__mention {
	color: var(--text-muted);
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
}

.carte__chapo {
	max-width: var(--reading-width);
}

.carte__lien-relie + .carte__lien-relie::before {
	content: " · ";
}

.carte__relie {
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
}

.carte__lecteur iframe,
.carte__lecteur embed,
.carte__lecteur object {
	aspect-ratio: 16 / 9;
	height: auto;
	max-width: 100%;
	width: 100%;
}

.pastille {
	background: var(--surface-alt);
	border-radius: var(--radius-s);
	color: var(--text-muted);
	display: inline-block;
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
	padding: 0.1em 0.5em;
}

.pastille--en-cours {
	background: var(--accent);
	color: var(--text-on-accent);
}

.avis__source {
	font-size: var(--font-size-s);
	font-weight: 600;
	margin: 0;
}

.avis__citation {
	margin: var(--space-2xs) 0;
	max-width: var(--reading-width);
}

/* Index des auteurs (§ 17.3). */

/*
 * LE RACCOURCI SE COLLE SOUS L'EN-TÊTE, PAS DESSUS — 10 octobre. Il se collait
 * à 0 avec le plan de l'en-tête : au défilement il recouvrait l'en-tête, et
 * sous-menu déployé il passait devant lui. Il prend le plan « collant » et la
 * hauteur réelle de l'en-tête, que front.js tient à jour.
 */
.alphabet {
	padding-block: var(--space-m);
	position: sticky;
	top: var(--entete-hauteur);
	background: var(--surface);
	z-index: var(--z-collant);
}

.index-auteurs__groupe {
	padding-block: var(--space-s);
}

.index-auteurs__lettre {
	font-size: var(--font-size-xl);
}

.index-auteurs__liste {
	columns: 3 14rem;
	list-style: none;
	margin: var(--space-2xs) 0 0;
	padding: 0;
}

.index-auteurs__entree {
	break-inside: avoid;
	padding-block: var(--space-3xs);
}

.index-auteurs__roles {
	color: var(--text-faint);
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
	display: block;
}

/* Résultats de recherche (§ 13.3). */

.recherche-entites {
	display: grid;
	gap: var(--space-m);
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	padding-block: var(--space-m);
}

.carte-entite {
	align-items: center;
	border-radius: var(--radius-m);
	display: flex;
	gap: var(--space-s);
	padding: var(--space-s);
}

.carte-entite__media img {
	border-radius: 50%;
	height: 4rem;
	object-fit: cover;
	width: 4rem;
}

.carte-entite__titre {
	font-size: var(--font-size-l);
}

.carte-entite__titre a {
	text-decoration: none;
}

.carte-entite__mention {
	color: var(--text-muted);
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	margin: 0;
}

/*
 * Les cinq sections. L'intitulé porte la raison pour laquelle un résultat est
 * là ; il doit donc se lire d'un coup d'œil, sans dominer les résultats
 * eux-mêmes.
 */

.recherche-rubrique {
	padding-block: var(--space-2xs);
}

.recherche-rubrique__titre,
.recherche-contenus__intitule {
	font-size: var(--font-size-l);
	margin-top: var(--space-l);
	padding-bottom: var(--space-3xs);
}

.recherche-contenus__intitule {
	border-bottom: 0;
	font-size: var(--font-size-m);
	margin-top: var(--space-m);
}

.recherche-rubrique__tout-voir {
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	margin: var(--space-2xs) 0 0;
}

/*
 * Auteurs en liste compacte, au-delà de quelques-uns. Les colonnes se calent
 * sur la largeur disponible : trente noms tiennent alors en quelques lignes,
 * là où trente cartes occuperaient plusieurs écrans.
 */

.liste-auteurs {
	columns: 3 14rem;
	list-style: none;
	margin: var(--space-2xs) 0 0;
	padding: 0;
}

.liste-auteurs__entree {
	break-inside: avoid;
	padding-block: var(--space-3xs);
}

.liste-auteurs__roles {
	color: var(--text-muted);
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	display: block;
}

/* Collections et rayons : une ligne, sous les auteurs. */

.recherche-termes {
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	padding-block: var(--space-2xs);
}

.recherche-termes__line {
	margin: 0;
}

.recherche-termes__intitule {
	color: var(--text-muted);
}

.recherche-termes__separateur {
	color: var(--text-muted);
	padding-inline: var(--space-3xs);
}

/*
 * LES ÉCARTS DES FICHES SUR LA PAGE DE RÉSULTATS (14 octobre, suivi § 2.70).
 * Un seul écart sous l'intitulé, --rubrique-intitule-ecart (24 px), porté par
 * l'intitulé seul (le contrat `rubriques-socle`) : ni remplissage de
 * section, ni remplissage haut de la grille ou de la liste qui suit, ni
 * remplissage bas sous l'intitulé. Entre deux rubriques, --fiche-ecart
 * (36 px), du bas réel de la dernière vignette à l'intitulé suivant. La ligne
 * des collections appartient à la rubrique des auteurs : 24 px au-dessus
 * d'elle, puis l'écart des rubriques.
 */
.recherche-resultats .recherche-rubrique {
	padding-block: 0;
}

.recherche-resultats .recherche-rubrique__titre.livre__titre-rubrique {
	padding-bottom: 0;
}

.recherche-resultats .recherche-entites,
.recherche-resultats .recherche-rubrique .liste-entrees,
.recherche-resultats .liste-auteurs {
	margin-top: 0;
	padding-block: 0;
}

.recherche-resultats .recherche-rubrique + .recherche-rubrique,
.recherche-resultats .recherche-termes + .recherche-rubrique {
	margin-top: var(--fiche-ecart);
}

.recherche-resultats .recherche-rubrique--auteurs + .recherche-termes {
	margin-top: var(--rubrique-intitule-ecart);
	padding-block: 0;
}

/*
 * LES ENTRÉES D'AUTEUR, COMME L'INDEX DES AUTEURS. Le nom en famille
 * éditoriale, au corps et à la graisse du texte, en lien ; la qualité en
 * mention atténuée, comme `.index-auteurs__roles`. La carte perd le
 * remplissage de 16 px et l'arrondi qui n'existent nulle part ailleurs, et
 * sa grille ses 24 px haut et bas.
 */
.recherche-resultats .carte-entite {
	border-radius: 0;
	padding: 0;
}

/* La photo en bloc : en ligne, elle laissait 7 px de jambage sous elle, que
   l'écart suivant comptait en plus. */
.recherche-resultats .carte-entite__media img {
	display: block;
}

.recherche-resultats .carte-entite__titre {
	font-family: var(--font-editorial);
	font-size: var(--font-size-m);
	font-weight: 400;
	margin: 0;
}

.recherche-resultats .carte-entite__mention,
.recherche-resultats .liste-auteurs__roles {
	color: var(--text-faint);
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
}

.recherche-message {
	color: var(--text-muted);
	padding-block: var(--space-m);
}

/* Repli du pluriel simple : dire ce qui a été cherché à la place. */

.recherche-message--variante {
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	padding-block: var(--space-3xs);
}

.recherche-contenus__liste,
.recherche-suggestions__liste {
	list-style: none;
	margin: var(--space-2xs) 0 0;
	padding: 0;
}

.recherche-suggestions {
	font-family: var(--font-ui);
	padding-block: var(--space-m);
}

.recherche-suggestions__chapo {
	color: var(--text-muted);
	margin: 0;
}

/* Les quatre portes en ligne (26 octobre, suivi § 2.98) ; la forme les
   habille. */
.recherche-suggestions__liste {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs) var(--space-m);
}

/* Mouvement réduit — respecte le réglage système. */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	.alphabet {
		position: static;
	}
}

/* -------------------------------------------------------------------------
 * Accessibilité
 * ---------------------------------------------------------------------- */

.lien-evitement,
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.lien-evitement:focus {
	background: var(--surface);
	clip: auto;
	height: auto;
	padding: var(--space-2xs) var(--space-s);
	width: auto;
	z-index: var(--z-fenetre);
}

/* -------------------------------------------------------------------------
 * En-tête et sous-menu des collections — § 17.9
 * ---------------------------------------------------------------------- */

.bandeau-site {
	background: var(--surface);
	position: sticky;
	top: 0;
	z-index: var(--z-entete);
}

/* COMPACT au défilement (front.js, seuils 120 / 60 px) : 56 px, marque à 22 px. */
.bandeau-site.est-compact .bandeau-site__interne {
	--entete-remplissage: 6px;
	min-height: var(--entete-hauteur-compact);
}

.bandeau-site.est-compact .bandeau-site__marque {
	font-size: var(--entete-marque-corps-compact);
}

.bandeau-site.est-compact .bandeau-site__marque .custom-logo {
	height: 2.25rem;
}

/*
 * LES OUTILS : la loupe, les réseaux, la bascule. Des cibles de 44 px à toute
 * largeur (10 octobre ; elles ne l'étaient que sous 48 rem).
 */
.bandeau-site__outils {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	gap: var(--space-xs);
}

.bandeau-site__loupe,
.bandeau-site .reseaux__lien,
.bandeau-site__bascule {
	align-items: center;
	background: none;
	border: var(--border-width) solid transparent;
	border-radius: var(--radius-m);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	height: var(--cible);
	justify-content: center;
	min-width: var(--cible);
	padding: 0;
	text-decoration: none;
	width: auto;
}

.bandeau-site .reseaux {
	gap: 2px;
	margin: 0;
}

.bandeau-site .reseaux__lien {
	width: var(--cible);
}

.bandeau-site .reseaux__lien svg,
.bandeau-site__loupe svg {
	display: block;
	height: 22px;
	width: 22px;
}

/* La loupe de la barre mobile et la bascule n'existent que sous 64 rem. */
.bandeau-site__loupe,
.bandeau-site__bascule {
	display: none;
}

.bandeau-site__bascule {
	font-size: 15px;
	font-weight: 600;
	padding-inline: var(--space-xs);
}

/*
 * LA RECHERCHE DANS LA LIGNE — 13 octobre. Le champ est toujours visible, à
 * droite de la ligne, à la hauteur des entrées du menu ; la loupe est DEDANS,
 * c'est le bouton d'envoi. Rien à ouvrir, rien à scripter : la loupe-bascule
 * du 10 octobre et la bande sous la ligne du 12 ont disparu — la recherche
 * est accessible d'un geste, et visible avant le geste. Aucune bordure, le
 * fond de page, l'ombre légère du socle, un rayon discret ; la largeur
 * descend de 12 à 9 rem entre 1 280 et 1 024 px pour laisser la ligne au
 * menu (jeton `--recherche-largeur`).
 */
.recherche {
	align-items: center;
	display: flex;
	margin: 0;
	position: relative;
}

.recherche__champ {
	border: 0;
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-raised);
	font: 1rem var(--font-ui);
	height: var(--recherche-champ-hauteur);
	margin: 0;
	/* La place de la loupe, à droite dans le champ. */
	padding: 0 var(--recherche-champ-hauteur) 0 var(--space-xs);
	width: var(--recherche-largeur);
}

.recherche__bouton {
	align-items: center;
	background: none;
	border: 0;
	border-radius: var(--radius-m);
	cursor: pointer;
	display: inline-flex;
	inset-block: 0;
	inset-inline-end: 0;
	justify-content: center;
	padding: 0;
	position: absolute;
	width: var(--recherche-champ-hauteur);
}

.recherche__bouton svg {
	display: block;
	height: 18px;
	width: 18px;
}

.navigation__liste > .navigation__entree {
	align-items: center;
	display: flex;
	position: relative;
}

.navigation__deplier {
	align-items: center;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	line-height: 1;
	padding: var(--space-3xs);
}

.navigation__chevron {
	display: block;
	transition: transform var(--transition);
}

.navigation__entree.est-ouvert .navigation__chevron,
.navigation__entree--a-panneau:hover .navigation__chevron,
.navigation__entree--a-panneau:focus-within:not(.est-replie) .navigation__chevron {
	transform: rotate(180deg);
}

/*
 * Porteur de sous-menu sans destination — § 17.9.
 *
 * C'est un <button> et non un lien : une entrée qui ne mène nulle part ne doit
 * pas se comporter comme un lien, et un `href="#"` renvoie en haut de page.
 * Voir ekdotis_nav_menu_carrier_markup(). Il ne reste donc qu'à lui rendre
 * l'apparence de ses voisins — un bouton arrive avec le style du système.
 */

.navigation__porteur {
	align-items: baseline;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	gap: var(--space-3xs);
	padding: 0;
}

.navigation__porteur:hover {
	text-decoration: underline;
}

.sous-menu {
	background: var(--surface);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-raised);
	display: none;
	font-size: var(--sous-menu-corps);
	left: 0;
	margin-top: var(--space-2xs);
	min-width: 16rem;
	padding: var(--space-s) var(--space-m);
	position: absolute;
	top: 100%;
	z-index: var(--z-menu);
}

/* Un pont invisible entre l'entrée et le panneau : le survol ne se perd pas
   dans l'écart de 8 px. */
.sous-menu::before {
	content: "";
	height: calc(var(--space-2xs) + 1px);
	inset-inline: 0;
	position: absolute;
	top: calc(-1 * var(--space-2xs) - 1px);
}

.sous-menu a {
	display: block;
	line-height: 1.3;
	padding-block: 2px;
	text-decoration: none;
}

.sous-menu a:hover,
.sous-menu a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sous-menu__collections,
.sous-menu__domaines ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sous-menu__collections li,
.sous-menu__domaines li {
	padding-block: var(--space-3xs);
}

.sous-menu__titre {
	color: var(--text-faint);
	font-size: var(--font-size-xs);
	margin: 0 0 var(--space-3xs);
}

/* Panneau large : collections en colonnes, domaines dans une colonne à part. */

/*
 * Panneau large, au-delà de douze collections : il prend la largeur du
 * conteneur de l'en-tête, gouttières comprises — son entrée redevient statique
 * et c'est `.bandeau-site__interne` qui le borne. Trois colonnes, lues de haut
 * en bas puis colonne suivante ; les domaines à droite quand ils existent.
 */
.navigation__liste > .navigation__entree:has(> .sous-menu--panneau) {
	position: static;
}

.sous-menu--panneau {
	/* Les bords de la boîte de remplissage de `.bandeau-site__interne` sont
	   déjà les bords extérieurs des gouttières : zéro, pas moins la gouttière. */
	left: 0;
	min-width: 0;
	padding: var(--space-m) var(--gutter);
	right: 0;
}

.sous-menu--panneau .sous-menu__interne {
	display: flex;
	gap: var(--space-l);
}

.sous-menu--panneau .sous-menu__collections {
	column-gap: var(--space-l);
	columns: 3;
	flex: 3 1 0;
}

.sous-menu--panneau .sous-menu__collections li {
	break-inside: avoid;
}

.sous-menu--panneau .sous-menu__domaines {
	flex: 1 1 0;
	padding-left: var(--space-m);
}

/* Survol réservé aux pointeurs fins et à la ligne d'ordinateur : au doigt,
   rien ne se déclenche au survol. */

@media (hover: hover) and (min-width: 64rem) {
	.navigation__entree--a-panneau:hover .sous-menu,
	.navigation__entree--a-panneau:focus-within .sous-menu {
		display: block;
	}
}

.navigation__entree.est-ouvert .sous-menu {
	display: block;
}

/* Échap a replié le sous-menu et rendu le focus au chevron : tant que le
   focus reste dans l'entrée, `focus-within` ne doit pas le rouvrir. Le script
   retire la classe quand le focus sort ou au prochain clic. */
.navigation__entree.est-replie .sous-menu {
	display: none;
}

/*
 * DEUX NIVEAUX — 1er novembre 2026 (W6 bis, ancien menu d'Aubéron ; § 17.9).
 *
 * Dès qu'une collection a des sous-collections, le sous-menu est une liste
 * dont chaque parent garde son lien et reçoit une flèche ; ses enfants
 * s'ouvrent dans un panneau à côté sur ordinateur, dessous en mobile. Ni
 * filet ni capitale : le panneau a le fond, l'ombre et le rayon du sous-menu.
 */
.sous-menu--deux-niveaux {
	min-width: 17rem;
}

.sous-menu__ligne {
	align-items: center;
	display: flex;
	gap: var(--space-2xs);
}

.sous-menu__ligne > a {
	flex: 1 1 auto;
}

/* La flèche a la couleur des liens du sous-menu (`a`, `--link`). */
.sous-menu__fleche {
	align-items: center;
	background: none;
	border: 0;
	color: var(--link);
	cursor: pointer;
	display: inline-flex;
	flex: none;
	justify-content: center;
	padding: var(--space-3xs);
}

.sous-menu__chevron {
	display: block;
	transition: transform var(--transition);
}

.sous-menu__enfants {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sous-menu__enfants li {
	padding-block: var(--space-3xs);
}

.sous-menu__parent.est-ouvert > .sous-menu__enfants {
	display: block;
}

/*
 * Sur ordinateur, le panneau des enfants se pose à droite du sous-menu, à
 * hauteur de son parent. IL S'OUVRE SANS DÉLAI ET SE FERME APRÈS 300 MS
 * (décision de Phil) : une diagonale du parent vers le panneau traverse les
 * entrées voisines sans le refermer. Le délai est celui de la visibilité, en
 * transition : aucune minuterie de script. Un élément invisible ne prend pas
 * le focus : le clavier passe par la flèche (front.js).
 */
@media (min-width: 64rem) {
	.sous-menu__parent {
		position: relative;
	}

	.sous-menu__enfants {
		background: var(--surface);
		border-radius: var(--radius-m);
		box-shadow: var(--shadow-raised);
		display: block;
		left: calc(100% + var(--space-m));
		min-width: 16rem;
		padding: var(--space-s) var(--space-m);
		position: absolute;
		top: calc(-1 * var(--space-s));
		transition: visibility 0s linear 300ms;
		visibility: hidden;
		z-index: var(--z-menu);
	}

	/* Un pont invisible au-dessus de la marge du sous-menu. */
	.sous-menu__enfants::before {
		content: "";
		inset-block: 0;
		position: absolute;
		right: 100%;
		width: calc(var(--space-m) + 2px);
	}

	.sous-menu__parent.est-ouvert > .sous-menu__enfants {
		transition-delay: 0s;
		visibility: visible;
	}
}

@media (hover: hover) and (min-width: 64rem) {
	.sous-menu__parent:hover > .sous-menu__enfants {
		transition-delay: 0s;
		visibility: visible;
	}
}

/* Fermé au clavier (gauche, Échap) : tout de suite, et le survol ne le
   rouvre pas tant que la souris n'est pas revenue (front.js). */
.sous-menu__parent.est-replie > .sous-menu__enfants {
	transition: none;
	visibility: hidden;
}

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

/*
 * SOUS 64 REM : LA BARRE ET LE PANNEAU — 10 octobre (48 rem avant).
 *
 * La bascule se fait avant que la ligne ne casse avec un nom de site long : à
 * 22 rem de marque sur deux lignes, six entrées et trois outils, la ligne tient
 * à 1 280 px et plus à 1 100. La barre : marque · loupe · « Menu », le champ
 * de recherche sur une seconde ligne quand il est ouvert ; le menu en panneau
 * plein écran SOUS la barre, qui reste visible ; les réseaux en bas du
 * panneau. Pas de compact : la barre est déjà basse.
 */
@media (max-width: 63.999rem) {
	.bandeau-site__interne,
	.bandeau-site.est-compact .bandeau-site__interne {
		flex-wrap: wrap;
		gap: var(--space-xs);
		min-height: var(--entete-hauteur-mobile);
		padding-block: var(--space-2xs);
	}

	/* Base de flex à zéro : un nom long se replie dans la place qui reste à
	   côté de la loupe et de la bascule, au lieu de les pousser dessous. */
	.bandeau-site__marque,
	.bandeau-site.est-compact .bandeau-site__marque {
		flex: 1 1 0;
		font-size: var(--entete-marque-corps-compact);
		margin: 0;
		max-inline-size: none;
		min-width: 0;
	}

	/* Le logo se réduit avec sa boîte, proportions gardées (2 novembre 2026,
	   W7) : à hauteur fixe, il débordait de la marque dès que la barre portait
	   aussi « Panier (n) » — sous la loupe à 320 px (Aubéron, logo de 657 ×
	   176). Au plus 2,5 rem de haut, au plus la largeur de la marque. */
	.bandeau-site__marque .custom-logo,
	.bandeau-site.est-compact .bandeau-site__marque .custom-logo {
		height: auto;
		max-height: 2.5rem;
		max-width: 100%;
	}

	/* Les outils se dissolvent dans la barre : loupe puis bascule à droite.
	   Avec le script (`a-recherche-panneau`), la loupe est là et le champ de
	   la ligne se tait — celui du panneau le remplace, en tête du menu. Sans
	   script, pas de loupe : le champ de la ligne passe en dixième position,
	   sur sa propre ligne sous la barre, et la recherche fonctionne. */
	.bandeau-site__outils {
		display: contents;
	}

	.bandeau-site__loupe {
		margin-inline-start: auto;
		order: 1;
	}

	.a-recherche-panneau .bandeau-site__loupe {
		display: inline-flex;
	}

	.bandeau-site__bascule {
		display: inline-flex;
		order: 2;
	}

	.bandeau-site__reseaux {
		display: none;
	}

	.bandeau-site__outils .recherche {
		flex: 1 0 100%;
		margin: 0 0 var(--space-2xs);
		order: 10;
	}

	.a-recherche-panneau .bandeau-site__outils .recherche {
		display: none;
	}

	.recherche__champ {
		font-size: 1.0625rem;
		height: var(--cible);
		padding-inline-end: var(--cible);
		width: 100%;
	}

	.recherche__bouton {
		width: var(--cible);
	}

	.recherche__bouton svg {
		height: 22px;
		width: 22px;
	}

	.navigation {
		display: none;
		margin: 0;
	}

	.a-menu-ouvert .navigation {
		background: var(--surface);
		bottom: 0;
		display: flex;
		flex-direction: column;
		gap: var(--space-m);
		inset-inline: 0;
		overflow-y: auto;
		padding: var(--space-m) var(--gutter) var(--space-l);
		position: fixed;
		top: var(--entete-hauteur);
		z-index: var(--z-fenetre);
	}

	.navigation__liste {
		align-items: stretch;
		flex-direction: column;
		font-size: var(--menu-mobile-corps);
		gap: 0;
	}

	.navigation__liste > .navigation__entree {
		flex-wrap: wrap;
	}

	.navigation__liste > .navigation__entree > a,
	.navigation__porteur {
		align-items: center;
		display: flex;
		flex: 1 1 auto;
		min-height: var(--cible);
		padding-block: var(--space-xs);
		white-space: normal;
	}

	.navigation__liste > .navigation__entree > a[aria-current="page"] {
		font-weight: 600;
		text-decoration: none;
	}

	.navigation__deplier {
		height: var(--cible);
		justify-content: center;
		width: var(--cible);
	}

	.navigation__chevron {
		height: 14px;
		width: 14px;
	}

	/* Les collections en liste, en retrait ; pas de survol, plus de filet
	   d'accent (13 octobre). */
	.sous-menu,
	.sous-menu--panneau {
		border: 0;
		border-radius: 0;
		padding-left: var(--space-s);
		box-shadow: none;
		flex: 1 0 100%;
		font-size: var(--menu-mobile-sous-corps);
		margin: 0 0 var(--space-s);
		min-width: 0;
		padding: 0 0 0 var(--space-s);
		position: static;
	}

	.sous-menu::before {
		display: none;
	}

	.sous-menu--panneau .sous-menu__interne {
		display: block;
	}

	.sous-menu--panneau .sous-menu__collections {
		columns: 1;
	}

	.sous-menu--panneau .sous-menu__domaines {
		border-left: 0;
		margin-top: var(--space-s);
		padding-left: 0;
	}

	/* Deux niveaux : les enfants dessous, en retrait, à la flèche ; la flèche
	   tourne vers le bas quand ils sont ouverts. */
	.sous-menu__fleche {
		min-height: var(--cible);
		min-width: var(--cible);
	}

	.sous-menu__parent.est-ouvert .sous-menu__chevron {
		transform: rotate(90deg);
	}

	.sous-menu__enfants {
		padding-left: var(--space-s);
	}

	.sous-menu a {
		align-items: center;
		display: flex;
		min-height: var(--cible);
		padding-block: var(--space-2xs);
	}

	.navigation__reseaux {
		align-items: center;
		display: flex;
		gap: var(--space-xs);
		margin-top: auto;
		padding-top: var(--space-m);
	}

	.navigation__reseaux-titre {
		font-size: 13px;
		font-weight: 600;
		margin: 0 var(--space-2xs) 0 0;
	}
}

@media (min-width: 64rem) {
	.navigation__reseaux,
	.navigation .recherche {
		display: none;
	}
}

/*
 * DISPOSITION EN COLONNE — § 17.9, 17 octobre (maquette LLL, § 2).
 *
 * UN BALISAGE, DEUX MISES EN PAGE. Réglage d'écran `entete_disposition` ; en
 * « colonne », `body` porte `.entete-colonne` (functions.php). Tout ce bloc
 * est préfixé par cette classe et borné à 64 rem et plus : en « ligne »,
 * aucune règle ne s'applique, et sous 64 rem la barre mobile est la même dans
 * les deux dispositions.
 *
 * `body` devient une grille à deux pistes : l'en-tête dans la première, sur
 * toute la hauteur ; le fil d'Ariane, `<main>` et le pied dans la seconde,
 * dans cet ordre, `<main>` sur la piste souple — un contenu court pousse le
 * pied en bas de la fenêtre. Ce qui est positionné (lien d'évitement, barre
 * d'administration) n'occupe aucune case.
 *
 * LA COLONNE NE COLLE QUE SI ELLE TIENT DANS LA FENÊTRE — 17 octobre, à
 * 15h (recette de Phil : plus jamais de barre propre à la colonne). Par
 * défaut, et toujours sans script, elle défile avec la page : étirée sur
 * toutes les rangées, son fond couvre la hauteur de la page, son contenu
 * garde sa hauteur naturelle, sans hauteur imposée ni défilement propre.
 * front.js mesure le contenu et pose `.colonne-collante` sur `body` quand il
 * tient : la colonne colle alors, haute au moins de la fenêtre — sa zone de
 * grille couvre toutes les rangées, et `align-self: start` l'empêche d'être
 * étirée, sans quoi elle n'aurait nulle part où coller — et les réseaux
 * descendent au bas de la fenêtre.
 *
 * DANS LA COLONNE, l'ordre du document, qui est celui de la tabulation : la
 * marque, le menu, la recherche (le formulaire des outils, loupe dans le
 * champ), les réseaux poussés en bas. Le menu est vertical et ses sous-listes
 * — les collections de « Catalogue », les sous-entrées de l'éditeur — sont
 * toujours dépliées : une colonne n'a pas de survol, et les collections ne
 * sont jamais derrière un clic.
 *
 * STRUCTURE SEULEMENT : aucune couleur, famille ni corps nouveaux. La colonne
 * garde l'aplat de l'en-tête ; ses sous-listes, qui ne sont plus des panneaux
 * sur fond de page, prennent les rôles des entrées du menu sur cet aplat.
 * L'habillage viendra d'une direction.
 */
:root {
	--colonne-largeur: 17.5rem;
	/* Le menu resserré du 17 octobre (15h) : à 64 rem et plus, au pointeur ;
	   le mobile garde ses cibles de 44 px. */
	--colonne-remplissage-bloc: 32px;
	--colonne-remplissage-ligne: var(--space-m);
	--colonne-ecart: 28px;
	--colonne-entree-hauteur: 34px;
	--colonne-sous-hauteur: 26px;
	--colonne-sous-corps: 15px;
	--colonne-sous-interligne: 1.2;
}

@media (min-width: 64rem) {
	/* Ce qui se collait sous l'en-tête se colle en haut de la fenêtre : la
	   hauteur que front.js écrit sur la racine est celle de la colonne. */
	body.entete-colonne {
		--entete-hauteur: 0px;
		display: grid;
		grid-template-columns: var(--colonne-largeur) minmax(0, 1fr);
		grid-template-rows: auto 1fr auto;
	}

	body.entete-colonne > * {
		grid-column: 2;
		min-width: 0;
	}

	body.entete-colonne > .fil-ariane-bande {
		grid-row: 1;
	}

	body.entete-colonne > .site-principal {
		grid-row: 2;
		/* La boîte de page se cale dans sa piste, comme elle se calait dans
		   la fenêtre. */
		width: 100%;
	}

	body.entete-colonne > .pied-site {
		grid-row: 3;
	}

	/* Par défaut : défile avec la page, étirée sur toutes les rangées. */
	body.entete-colonne > .bandeau-site {
		/* Le filet bas n'a plus de sens au pied d'une colonne ; l'aplat
		   sépare, aucun filet vertical ne le remplace. */
		border-bottom-width: 0;
		grid-column: 1;
		grid-row: 1 / -1;
		position: relative;
	}

	/* Collée, quand front.js a mesuré qu'elle tient dans la fenêtre. */
	body.entete-colonne.colonne-collante > .bandeau-site {
		align-self: start;
		min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
		min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
	}

	/* Le menu principal n'est pas répété au pied : la colonne le montre
	   déjà (17 octobre, recette LLL). Le menu secondaire reste. */
	.entete-colonne .pied-site__colonne--principal {
		display: none;
	}

	/* La compaction au défilement ne concerne que la ligne : front.js pose
	   toujours `.est-compact`, la colonne le neutralise ici. */
	.entete-colonne .bandeau-site__interne,
	.entete-colonne .bandeau-site.est-compact .bandeau-site__interne {
		align-items: stretch;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: var(--colonne-ecart);
		justify-content: flex-start;
		margin: 0;
		max-width: none;
		padding: var(--colonne-remplissage-bloc) var(--colonne-remplissage-ligne);
		/* La transition de hauteur sert la compaction de la ligne. En colonne
		   elle retardait la mesure de front.js : la hauteur neutralisée le
		   temps de la lecture ne s'appliquait pas tout de suite. */
		transition: none;
	}

	/* Collée, elle remplit la fenêtre : les réseaux en descendent au bas. */
	.entete-colonne.colonne-collante .bandeau-site__interne {
		min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
		min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	}

	.entete-colonne .bandeau-site__marque,
	.entete-colonne .bandeau-site.est-compact .bandeau-site__marque {
		flex: 0 0 auto;
		font-size: var(--entete-marque-corps);
		margin: 0;
		max-inline-size: none;
	}

	.entete-colonne .bandeau-site__marque .custom-logo,
	.entete-colonne .bandeau-site.est-compact .bandeau-site__marque .custom-logo {
		height: 3rem;
		max-width: 100%;
	}

	/* Logo et nom côte à côte (26 octobre, 15h33, décision de Phil, suivi
	   § 2.104) : le logo à 6 rem, le nom sur ses deux lignes calé au centre
	   du logo. Dans les 232 px utiles de la colonne, 67 px de logo et 12
	   d'écart laissent 153 px au nom : « qui Libèrent » fait 204 px à 38 px,
	   142 à 26 — le nom passe à 26 px (mesuré sur la police réelle).
	   `text-wrap: balance` équilibre « Les Liens / qui Libèrent » ; aucune
	   coupure de mot. */
	.entete-colonne .bandeau-site__marque--logo-et-nom .custom-logo {
		height: 6rem;
		width: auto;
	}

	.entete-colonne .bandeau-site__marque--logo-et-nom .bandeau-site__nom {
		font-size: 26px;
		hyphens: manual;
		overflow-wrap: normal;
		text-wrap: balance;
	}

	.entete-colonne .navigation {
		flex: 0 0 auto;
	}

	.entete-colonne .navigation__liste {
		align-items: stretch;
		flex-direction: column;
		gap: 0;
	}

	.entete-colonne .navigation__liste > .navigation__entree {
		flex-wrap: wrap;
		position: static;
	}

	.entete-colonne .navigation__liste > .navigation__entree > a,
	.entete-colonne .navigation__porteur {
		align-items: center;
		display: flex;
		flex: 1 1 auto;
		min-height: var(--colonne-entree-hauteur);
		white-space: normal;
	}

	/* Toujours déplié : ni chevron ni bouton de dépliage. */
	.entete-colonne .navigation__deplier,
	.entete-colonne .navigation__chevron {
		display: none;
	}

	.entete-colonne .sous-menu,
	.entete-colonne .sous-menu--panneau,
	.entete-colonne .navigation__entree.est-replie .sous-menu {
		background: none;
		border-radius: 0;
		box-shadow: none;
		display: block;
		flex: 1 0 100%;
		font-size: var(--colonne-sous-corps);
		line-height: var(--colonne-sous-interligne);
		margin: 0 0 var(--space-2xs);
		min-width: 0;
		padding: 0 0 0 var(--space-s);
		position: static;
	}

	.entete-colonne .sous-menu__collections li,
	.entete-colonne .sous-menu__domaines li {
		padding-block: 0;
	}

	.entete-colonne .sous-menu::before {
		display: none;
	}

	.entete-colonne .sous-menu--panneau .sous-menu__interne {
		display: block;
	}

	.entete-colonne .sous-menu--panneau .sous-menu__collections {
		columns: 1;
	}

	/* Deux niveaux dans l'en-tête en colonne : toujours déplié, comme le
	   premier — les enfants en retrait sous leur parent, sans flèche. */
	.entete-colonne .sous-menu__fleche {
		display: none;
	}

	.entete-colonne .sous-menu__enfants {
		background: none;
		box-shadow: none;
		display: block;
		padding: 0 0 0 var(--space-s);
		position: static;
		visibility: visible;
	}

	.entete-colonne .sous-menu__enfants::before {
		display: none;
	}

	.entete-colonne .sous-menu--panneau .sous-menu__domaines {
		margin-top: var(--space-s);
		padding-left: 0;
	}

	.entete-colonne .sous-menu a {
		align-items: center;
		display: flex;
		line-height: var(--colonne-sous-interligne);
		min-height: var(--colonne-sous-hauteur);
		padding-block: 0;
	}

	/* Les rôles des entrées du menu, sur l'aplat de l'en-tête : atténué au
	   repos, plein au survol et au focus, l'anneau en texte-sur-accent. */
	.entete-colonne .sous-menu,
	.entete-colonne .sous-menu__titre,
	.entete-colonne .sous-menu a {
		color: var(--text-on-accent-muted);
	}

	.entete-colonne .sous-menu a:hover,
	.entete-colonne .sous-menu a:focus-visible,
	.entete-colonne .sous-menu a[aria-current="page"] {
		color: var(--text-on-accent);
	}

	.entete-colonne .sous-menu a:focus-visible,
	.entete-colonne .navigation__liste > .navigation__entree > a:focus-visible,
	.entete-colonne .navigation__porteur:focus-visible,
	.entete-colonne .bandeau-site__marque a:focus-visible {
		outline: 2px solid var(--text-on-accent);
		outline-offset: 2px;
	}

	/*
	 * LA TÊTE DE LA FICHE LIVRE DANS LA PISTE DU CONTENU — 17 octobre. Les
	 * seuils de la fiche (52 rem) se lisent sur la FENÊTRE ; en colonne, la
	 * fiche n'a que la piste de droite. À 1 024 px, 662 px de piste pour une
	 * couverture de 390, 70 de gouttière et 280 de caractéristiques : la
	 * titraille tombait à une largeur nulle et la grille débordait. La fiche
	 * devient un conteneur, et deux requêtes, plus bas, se règlent sur SA
	 * largeur. En ligne, aucun conteneur : rien ne change.
	 */
	.entete-colonne .livre {
		container: fiche / inline-size;
	}

	.entete-colonne .bandeau-site__outils {
		align-items: stretch;
		display: contents;
	}

	.entete-colonne .bandeau-site__outils .recherche {
		flex: 0 0 auto;
	}

	.entete-colonne .recherche__champ {
		width: 100%;
	}

	.entete-colonne .bandeau-site__reseaux {
		flex: 0 0 auto;
		margin-top: auto;
	}

	.entete-colonne .bandeau-site .reseaux {
		flex-wrap: wrap;
	}
}

/* Sans mouvement : l'en-tête change d'état sans transition. */
@media (prefers-reduced-motion: reduce) {
	.bandeau-site__interne,
	.bandeau-site__marque,
	.bandeau-site__marque .custom-logo,
	.navigation__chevron {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * Pied de page — § 17.10
 * ---------------------------------------------------------------------- */

.pied-site__colonnes {
	display: grid;
	gap: var(--space-l);
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.pied-site__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pied-site__marque {
	font-weight: 600;
	margin: 0;
}

.pied-site__adresse {
	font-style: normal;
}

.pied-site__note,
.pied-site__mentions-legales {
	margin-top: var(--space-l);
}

/* -------------------------------------------------------------------------
 * Fiches de détail
 * ---------------------------------------------------------------------- */

/* LA LARGEUR DE LECTURE BORNE LA PROSE, PAS LA FICHE (§ 17.15).
   Elle était portée par `.fiche`, ce qui la faisait descendre sur tout ce que
   la fiche contient — y compris le pied, qui montre désormais des couvertures.
   Une grille de vignettes n'est pas un paragraphe : elle n'a pas à tenir en
   68 caractères. */

.fiche {
	padding-block: var(--space-l) var(--fin-de-page, var(--space-xl));
}

.fiche__entete,
.fiche__media,
.fiche__contenu {
	max-width: var(--reading-width);
}

.fiche__titre {
	font-size: var(--font-size-2xl);
}

.fiche__date,
.fiche__mention {
	color: var(--text-muted);
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	margin: 0 0 var(--space-2xs);
}

.fiche__chapo {
	font-size: var(--font-size-l);
}

.fiche__media {
	margin-block: var(--space-m);
}

.fiche__pied {
	margin-top: var(--space-l);
	padding-top: var(--space-m);
}

/* Le pied ne réserve pas la gouttière haute de la grille du catalogue : le
   filet et le titre de section la posent déjà. */

.fiche__pied .liste-entrees--grille {
	padding-block: var(--space-xs) 0;
}

.fiche__pied .liste-reliee--auteurs {
	margin-top: var(--space-s);
}

/*
 * FICHE RENCONTRE — § 17.4 (26 octobre, suivi § 2.97). Tête (titre, date,
 * lieu, pastille), puis l'image à gauche et la colonne de texte à droite à
 * partir de 900 px — une colonne dessous ; le livre et les auteurs en
 * cartouches sur le fond secondaire ; au pied, l'agenda et les autres
 * rencontres du livre. Aucun filet. Les liens posés sur le fond secondaire
 * prennent la couleur du texte : la couleur de lien des palettes y descend
 * sous 4,5:1 (suivi § 2.96).
 */
.rencontre__titre {
	font-size: var(--font-size-2xl);
	margin: 0 0 var(--space-2xs);
}

.rencontre__date,
.rencontre__lieu {
	color: var(--text-muted);
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	margin: 0 0 var(--space-2xs);
}

.rencontre__date .pastille {
	margin-inline-start: var(--space-2xs);
}

.rencontre__corps {
	display: grid;
	gap: var(--space-l);
	margin-top: var(--space-l);
}

@media (min-width: 56.25rem) {
	.rencontre__corps:has(> .rencontre__media) {
		align-items: start;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	}
}

.rencontre__media {
	display: block;
}

/* Jamais recadrée : l'image garde son rapport. Une couverture, seule en
   colonne sous 900 px, ne prend pas tout l'écran du téléphone. */
.rencontre__image {
	display: block;
	height: auto;
	max-width: 100%;
	width: 100%;
}

@media (max-width: 56.24rem) {
	.rencontre__media--couverture {
		max-width: 15rem;
	}
}

.rencontre__colonne {
	display: flex;
	flex-direction: column;
	gap: var(--space-l);
	max-width: var(--reading-width);
	min-width: 0;
}

.rencontre__texte > :first-child {
	margin-top: 0;
}

.rencontre__texte > :last-child {
	margin-bottom: 0;
}

.rencontre-livre {
	align-items: flex-start;
	background: var(--surface-alt);
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	padding: var(--space-m);
}

.rencontre-livre__surtitre,
.rencontre-livre__contributeurs {
	font-family: var(--font-ui);
	margin: 0;
}

.rencontre-livre__surtitre {
	color: var(--text-muted);
	font-size: var(--font-size-s);
}

/* Le titre ajusté est un conteneur : sans largeur propre dans la colonne
   flex alignée au début, il s'effondrait (un mot par ligne, au plancher). */
.rencontre-livre__titre {
	align-self: stretch;
	font-size: var(--font-size-xl);
	margin: 0;
}

.rencontre-livre a:not(.bouton) {
	color: var(--text);
}

.rencontre-livre__bouton {
	margin-top: var(--space-xs);
}

.rencontre__pied {
	display: flex;
	flex-direction: column;
	gap: var(--space-l);
	margin-top: var(--space-xl);
}

.rencontre__agenda {
	font-family: var(--font-ui);
	margin: 0;
}

.rencontre__autres-intitule {
	font-size: var(--font-size-l);
	margin: 0 0 var(--space-s);
}

.rencontres-autres {
	display: grid;
	gap: var(--space-s);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.rencontre-compacte {
	background: var(--surface-alt);
	display: flex;
	flex-direction: column;
	font-family: var(--font-ui);
	gap: var(--space-3xs);
	padding: var(--space-s) var(--space-m);
}

.rencontre-compacte__date {
	font-weight: 700;
}

.rencontre-compacte__titre {
	color: var(--text);
	font-weight: 600;
}

.rencontre-compacte__lieu {
	color: var(--text-muted);
	font-size: var(--font-size-s);
}

/* Fiche d'avis — § 5, § 17.7. */

.fiche--avis .fiche__source {
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	margin: 0 0 var(--space-2xs);
}

.fiche--avis .fiche__contenu {
	margin-top: var(--space-m);
}

.fiche__lien-source {
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	margin-top: var(--space-m);
}

/* Fiche média — § 6, § 17.6.

   Le lecteur n'est pas borné par la largeur de lecture : c'est un bloc
   structuré, pas de la prose (§ 17.15). Il n'occupe pas non plus toute la page
   — il déclenche une fenêtre, il n'est pas la fenêtre — d'où la largeur de la
   fenêtre elle-même, qui donne à la page l'échelle de ce qui va s'ouvrir. */

.fiche__lecteur {
	margin-block: var(--space-m);
	max-width: min(48rem, 100%);
}

.fiche--media .lecteur__intitule {
	font-size: var(--font-size-l);
}

.fiche--media .lecteur__legende {
	max-width: var(--reading-width);
}

/* Fiche auteur — § 4. */

.auteur {
	padding-block: var(--space-l) var(--fin-de-page, var(--space-xl));
}

.auteur__entete {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	/* La qualité juste sous le nom (14 octobre) : un demi-rem entre les deux. */
	gap: var(--space-2xs) var(--space-m);
}

/*
 * LE PORTRAIT EST UN RECTANGLE, COMME LES COUVERTURES — 26 aout.
 *
 * Le cercle n'etait pas une decision : c'etait un RESTE. `.auteur__image` etait
 * declare deux fois — ici en medaillon de 8 rem, et plus bas a la largeur du
 * portrait avec une hauteur automatique. La seconde gagnait sur les dimensions,
 * et le `border-radius` de la premiere lui survivait seul. Troisieme doublon de
 * declaration de la semaine, apres titre/sous-titre et les fichiers joints.
 *
 * Les deux regles sont fondues plus bas. Le socle n'a que DEUX elements
 * arrondis — la pastille d'etat et la puce de disponibilite (§ 17.18).
 */

.auteur__nom {
	font-size: var(--font-size-2xl);
	margin-bottom: 0;
}

/*
 * LA MENTION DE ROLE PASSE SOUS LE NOM — 26 aout. Elle se rangeait a cote de
 * lui, ce qui la faisait lire comme une apposition au nom plutot que comme une
 * qualification de la personne.
 */

.auteur__roles {
	color: var(--text-muted);
	display: block;
	font-family: var(--font-ui);
	margin: 0;
	width: 100%;
}

.auteur__biographie,
.auteur__biblio {
	max-width: var(--reading-width);
}

.auteur__note {
	color: var(--text-faint);
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	margin-top: var(--space-xl);
}

/* Encarts reliés. */

.liste-reliee,
.liste-evenements {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Agenda et actualités — maquette du 1er août.
 *
 * Les deux listes partagent une même anatomie : un repère à gauche — le
 * quantième pour une rencontre, la vignette pour une actualité — et le texte à
 * droite. C'est ce parallèle qui les fait lire comme une paire, face à face
 * dans la zone basse.
 */

.liste-reliee__entree,
.liste-evenements__entree {
	display: flex;
	gap: var(--space-s);
	padding-block: var(--space-xs);
}

.liste-reliee__entree:first-child,
.liste-evenements__entree:first-child {
	border-top: 0;
}

.liste-evenements__corps,
.liste-reliee__corps {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	min-width: 0;
}

/* Le bloc de date, quantième au-dessus du mois. */

.date-evenement {
	display: flex;
	flex: none;
	flex-direction: column;
	font-family: var(--font-ui);
	line-height: 1;
	text-align: center;
	width: 3rem;
}

.date-evenement__jour {
	font-size: var(--font-size-l);
	font-weight: 600;
}

.date-evenement__mois {
	color: var(--text-muted);
	font-size: var(--font-size-xs);
}

.liste-evenements__lieu {
	color: var(--text-faint);
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
}

.liste-evenements__statut,
.liste-reliee__type {
	align-self: flex-start;
	background: var(--accent-soft);
	color: var(--accent);
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
	padding: 0 0.4em;
}

.liste-reliee__vignette {
	flex: none;
	width: 4rem;
}

.liste-reliee__vignette img {
	display: block;
	height: auto;
	width: 100%;
}

.liste-reliee__date {
	color: var(--text-faint);
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
}

.evenement-passe summary {
	cursor: pointer;
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	margin-top: var(--space-s);
}

.liste-reliee__tout-voir {
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
}

/* Onglets d'avis — § 17.7. */

.onglets {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin-bottom: var(--space-s);
}

/*
 * Onglets — deux états, aucune animation (maquette du 1er août).
 *
 * Angles vifs : la maquette n'a aucun rayon nulle part, ni sur les blocs, ni
 * sur les encadrés, ni sur les boutons.
 *
 * Contraste mesuré : #FFFDF7 sur #25256D = 4,5:1 à l'état actif, #25256D sur
 * #ECECF8 = 11:1 au repos. Les deux tiennent le seuil AA.
 */

.onglets__onglet {
	background: var(--accent-soft);
	border: 0;
	color: var(--accent);
	cursor: pointer;
	font: inherit;
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
	font-weight: 600;
	padding: 11px 18px;
}

/*
 * L'ÉTAT ACTIF SE DIT DE DEUX FAÇONS, parce que le socle a deux mécanismes
 * d'onglets — 25 août.
 *
 * Les avis gardent `front.js` et son `aria-selected`. La fiche livre est passée
 * aux boutons radio : son état actif est celui du bouton coché, et la feuille
 * le lit avec `:checked ~`. Les DÉCLARATIONS sont les mêmes, écrites une fois :
 * ce sont deux chemins vers un seul dessin, pas deux dessins.
 *
 * `nth-of-type` COMPTE PAR TYPE D'ÉLÉMENT, et c'est ce qui rend cette liste
 * lisible : les entrées sont les seuls `input` de la section, les étiquettes
 * les seuls enfants de `.onglets`. Le rang de l'un désigne le rang de l'autre.
 */

.onglets__onglet[aria-selected="true"],
.livre-onglets--barre .onglets__entree:nth-of-type(1):checked ~ .onglets .onglets__onglet:nth-child(1),
.livre-onglets--barre .onglets__entree:nth-of-type(2):checked ~ .onglets .onglets__onglet:nth-child(2),
.livre-onglets--barre .onglets__entree:nth-of-type(3):checked ~ .onglets .onglets__onglet:nth-child(3),
.livre-onglets--barre .onglets__entree:nth-of-type(4):checked ~ .onglets .onglets__onglet:nth-child(4),
.livre-onglets--barre .onglets__entree:nth-of-type(5):checked ~ .onglets .onglets__onglet:nth-child(5) {
	background: var(--accent);
	/* Le texte sur accent, pas le fond secondaire : même rendu sur Encre, bon
	   rôle sur toute palette (corrigé le 9 octobre). */
	color: var(--text-on-accent);
}

/* -------------------------------------------------------------------------
 * Onglets de la fiche livre — sans JavaScript
 *
 * LE MÉCANISME EST DANS L'ORDRE DU BALISAGE. `:checked ~ …` ne regarde que ce
 * qui SUIT : les entrées viennent en premier, les étiquettes ensuite, les
 * panneaux en dernier. Déplacer un `input` sous son panneau casserait la
 * bascule sans qu'aucune erreur ne le signale.
 * ---------------------------------------------------------------------- */

/*
 * HORS DU FLUX, JAMAIS `display: none`. Un champ masqué ainsi sort du parcours
 * clavier — et c'est précisément ce parcours qu'on est venu chercher : un
 * groupe de boutons radio se traverse AUX FLÈCHES, nativement, ce que le
 * mécanisme JavaScript ne faisait pas.
 */

.onglets__entree {
	height: 1px;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	width: 1px;
}

.livre-onglets--barre .onglets__onglet {
	cursor: pointer;
}

/*
 * LE FOCUS SE VOIT SUR L'ÉTIQUETTE, pas sur l'entrée qui le reçoit : l'entrée
 * est hors du flux, un anneau dessiné là ne se verrait nulle part. Même anneau
 * que partout ailleurs (`:focus-visible` du socle), posé sur l'étiquette du
 * même rang.
 */

.livre-onglets--barre .onglets__entree:nth-of-type(1):focus-visible ~ .onglets .onglets__onglet:nth-child(1),
.livre-onglets--barre .onglets__entree:nth-of-type(2):focus-visible ~ .onglets .onglets__onglet:nth-child(2),
.livre-onglets--barre .onglets__entree:nth-of-type(3):focus-visible ~ .onglets .onglets__onglet:nth-child(3),
.livre-onglets--barre .onglets__entree:nth-of-type(4):focus-visible ~ .onglets .onglets__onglet:nth-child(4),
.livre-onglets--barre .onglets__entree:nth-of-type(5):focus-visible ~ .onglets .onglets__onglet:nth-child(5) {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}

/* Un panneau ne se montre que si son entrée est cochée. */

.livre-onglets--barre .onglets__panneau {
	display: none;
}

/*
 * LE DÉCALAGE D'UN RANG N'EST PAS UNE ERREUR : `nth-of-type` compte parmi les
 * `div` frères, et `.onglets` — la barre — est le premier d'entre eux. Le
 * premier panneau est donc le deuxième `div`. Écrire ici 1 à 5 aurait laissé
 * l'onglet d'ouverture vide, et rien ne l'aurait signalé.
 */

.livre-onglets--barre .onglets__entree:nth-of-type(1):checked ~ .onglets__panneau:nth-of-type(2),
.livre-onglets--barre .onglets__entree:nth-of-type(2):checked ~ .onglets__panneau:nth-of-type(3),
.livre-onglets--barre .onglets__entree:nth-of-type(3):checked ~ .onglets__panneau:nth-of-type(4),
.livre-onglets--barre .onglets__entree:nth-of-type(4):checked ~ .onglets__panneau:nth-of-type(5),
.livre-onglets--barre .onglets__entree:nth-of-type(5):checked ~ .onglets__panneau:nth-of-type(6) {
	display: block;
}

/*
 * LA BARRE DÉFILE SUR PETIT ÉCRAN plutôt que de passer à la ligne : cinq
 * onglets sur deux lignes se lisent comme deux barres. Le README le demande,
 * et la zone reste parcourable au clavier par les flèches du groupe radio.
 */

@media (max-width: 51.999rem) {
	.livre-onglets--barre .onglets {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
	}

	.livre-onglets--barre .onglets__onglet {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
}

.avis {
	padding-block: var(--space-s);
}

/* Lecteurs différés — § 6. */

.lecteur {
	margin: 0 0 var(--space-m);
}

/*
 * La grille de `.liste-medias` est déclarée avec celle des avis, dans la section
 * « Avis » : les deux rangées suivent la même règle de trois colonnes, et une
 * vidéo seule ne doit pas plus s'étirer qu'un avis seul. Une seule déclaration
 * pour éviter qu'elles ne redivergent.
 */

/*
 * LE FOND D'ATTENTE EST SOMBRE, ET C'EST UNE CORRECTION DE CONTRASTE — 26 août.
 *
 * La vignette porte un texte blanc, parce qu'elle porte d'ordinaire une image
 * de couverture vidéo. Quand le média n'en a pas — la moitié du fonds — il ne
 * restait que `--surface-alt`, un fond clair : blanc sur clair, même sous le
 * voile à 35 %, mesuré à 1,06:1 sur la fiche de La Jalousie. Sous le seuil AA
 * d'un facteur quatre.
 *
 * Le fond d'attente descend donc aux sept dixièmes de la couleur de texte, et
 * ce dosage TIENT SANS LE VOILE : mesuré à 6,5:1 en ignorant le `::before`,
 * parce qu'un voile à 35 % ne rattrape pas non plus une image de couverture
 * claire. Il reste une valeur DÉRIVÉE des jetons : elle suit la palette, et la
 * bascule vers une palette sombre ne la laisse pas en arrière. Une image, quand
 * il y en a une, le recouvre entièrement.
 */

.lecteur__ouvrir {
	align-items: center;
	aspect-ratio: 16 / 9;
	background-color: color-mix(in srgb, var(--text) 70%, var(--surface-alt));
	background-position: center;
	background-size: cover;
	color: var(--text-on-accent);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	justify-content: center;
	padding: var(--space-2xs);
	position: relative;
	text-align: center;
	text-shadow: 0 1px 3px rgb(0 0 0 / 70%);
}

.lecteur__ouvrir::before {
	background: rgb(0 0 0 / 35%);
	content: "";
	inset: 0;
	position: absolute;
}

.lecteur__icone,
.lecteur__intitule,
.lecteur__nature {
	position: relative;
}

.lecteur__icone {
	font-size: var(--font-size-2xl);
}

.lecteur__nature {
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
	opacity: 0.85;
}

/*
 * Fenêtre de lecture — § 17.6.
 *
 * `<dialog>` natif : le navigateur fournit le fond inerte, la fermeture par
 * Échap, le piégeage du focus et son retour au déclencheur. Rien de tout cela
 * n'est réécrit ici, et c'est le motif du choix (§ 1.4).
 *
 * Le fond est stylé par `::backdrop`, que seul un dialogue MODAL reçoit —
 * d'où `showModal()` et non `show()` dans le script.
 */

.lecteur-fenetre {
	background: var(--text);
	border: 0;
	color: var(--surface-alt);
	max-width: min(64rem, 92vw);
	padding: 0;
	width: 100%;
}

.lecteur-fenetre::backdrop {
	background: rgb(0 0 0 / 78%);
}

.lecteur-fenetre__cadre {
	aspect-ratio: 16 / 9;
}

.lecteur-fenetre__cadre iframe {
	border: 0;
	display: block;
	height: 100%;
	width: 100%;
}

.lecteur-fenetre__fermer {
	display: flex;
	justify-content: flex-end;
}

.lecteur-fenetre__fermer button {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font-size: var(--font-size-l);
	line-height: 1;
	padding: var(--space-2xs) var(--space-xs);
}

.lecteur__cadre iframe {
	height: 100%;
	width: 100%;
}

.lecteur__legende {
	color: var(--text-muted);
	font-size: var(--font-size-s);
	margin: var(--space-2xs) 0 0;
}

/* Page 404 — § 17.11. */

/*
 * La 404 se tient dans la boîte de page comme tout le reste : elle portait sa
 * propre largeur, plus étroite de deux cents pixels, sans que rien ne le
 * justifie. Seul son message est du texte suivi.
 */

.introuvable {
	padding-block: var(--space-l) var(--space-xl);
}

.introuvable__chapo {
	max-width: var(--reading-width);
}

.introuvable__titre {
	font-size: var(--font-size-2xl);
}

.introuvable__recherche {
	margin-block: var(--space-m);
}

/* « Nos dernières parutions » : le contrat des intitulés de section
   (--section-title-*), celui des blocs de l'accueil (26 octobre, suivi
   § 2.98) ; c'était l'intitulé de rubrique des fiches, plus grand. */
.introuvable__intitule {
	font-family: var(--section-title-family);
	font-size: var(--section-title-size);
	font-weight: var(--section-title-weight);
	letter-spacing: var(--section-title-spacing);
	line-height: var(--leading-snug);
	margin: 0 0 var(--space-m);
	text-transform: var(--section-title-transform);
}

/*
 * LE FORMULAIRE DE LA PAGE (`searchform.php`, 26 octobre, suivi § 2.98) : le
 * champ de l'en-tête — mêmes jetons, loupe dedans, même focus —, à la largeur
 * d'une saisie plutôt qu'à celle de l'outil de l'en-tête.
 */
.recherche--page {
	max-width: 32rem;
}

.recherche--page .recherche__champ {
	font-size: 1.0625rem;
	width: 100%;
}

.recherche-tete__formulaire {
	margin-top: var(--space-m);
}

/* Quand la tête d'archive est une rangée flex (Visuelle), le message et le
   formulaire prennent leur ligne : sinon le formulaire s'asseyait à côté
   du titre et le serrait (mesuré à 390 px). */
.archive-intro > .recherche-message,
.archive-intro > .recherche-tete__formulaire {
	flex: 0 0 100%;
}

/* -------------------------------------------------------------------------
 * Sections de la page d'accueil — § 12
 * ---------------------------------------------------------------------- */

.section {
	padding-block: var(--space-l);
}

.section__titre {
	font-size: var(--font-size-xl);
	margin-bottom: var(--space-s);
}

.section__texte {
	max-width: var(--reading-width);
}

.section__tout-voir {
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	margin-top: var(--space-s);
}

.banniere {
	position: relative;
}

.banniere__media img {
	height: auto;
	width: 100%;
}

.banniere__corps {
	max-width: var(--reading-width);
	padding-block: var(--space-m);
}

/*
 * Défilement horizontal — § 12.3.
 *
 * CSS pur avec scroll-snap : rien ne bouge tout seul, le visiteur pilote. Un
 * carrousel rotatif dégraderait performance et accessibilité pour un gain nul,
 * le premier écran étant le seul réellement vu.
 */

.liste-entrees--defilante {
	-webkit-overflow-scrolling: touch;

	/*
	 * Largeur de colonne explicite, jamais 1fr : avec grid-auto-flow: column,
	 * une fraction se calcule sur l'espace libre et la grille finit par
	 * déborder de son conteneur au lieu de défiler dedans.
	 */
	grid-auto-columns: clamp(9rem, 72vw, 12rem);
	grid-auto-flow: column;
	grid-template-columns: none;
	max-width: 100%;
	min-width: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding-bottom: var(--space-2xs);
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.liste-entrees--defilante > * {
	scroll-snap-align: start;
}

.liste-entrees--defilante.liste-entrees--cartes {
	grid-auto-columns: clamp(15rem, 82vw, 20rem);
}

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

/* Réseaux sociaux — § 17.10. */

.reseaux {
	display: flex;
	gap: var(--space-2xs);
	list-style: none;
	margin: var(--space-s) 0 0;
	padding: 0;
}

.reseaux__lien {
	align-items: center;
	border-radius: 50%;
	color: var(--text-muted);
	display: inline-flex;
	height: 2rem;
	justify-content: center;
	width: 2rem;
}

.reseaux__lien:hover,
.reseaux__lien:focus-visible {
	border-color: var(--accent);
	color: var(--accent);
}

/* -------------------------------------------------------------------------
 * Alignement des cartes en grille
 *
 * Une carte sans pastille de type ne doit pas remonter son titre : les cartes
 * voisines partiraient de lignes différentes. Chaque zone reçoit donc une
 * ligne fixe, et une zone absente laisse sa ligne vide plutôt que de décaler
 * les suivantes. Rien n'est affiché pour autant — le § 2.5 interdit un bloc
 * vide visible, pas une ligne de grille inoccupée.
 * ---------------------------------------------------------------------- */

.liste-entrees--cartes {
	align-items: start;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

.liste-entrees--cartes .carte {
	display: grid;
	grid-template-rows: auto auto auto 1fr auto;
	row-gap: var(--space-2xs);
}

.liste-entrees--cartes .carte__media {
	grid-row: 1;
}

.liste-entrees--cartes .carte__type,
.liste-entrees--cartes .carte__date:first-of-type {
	grid-row: 2;
}

.liste-entrees--cartes .carte__titre {
	grid-row: 3;
}

.liste-entrees--cartes .carte__chapo,
.liste-entrees--cartes .carte__mention,
.liste-entrees--cartes .carte__lecteur {
	grid-row: 4;
}

.liste-entrees--cartes .carte__relie,
.liste-entrees--cartes .carte--actualite .carte__date {
	align-self: end;
	grid-row: 5;
}

/*
 * Le rail de défilement garde la même structure interne : seule la direction
 * change, pas la composition de la carte.
 */

.liste-entrees--defilante.liste-entrees--cartes .carte {
	height: auto;
}

/*
 * Recherche en mobile — § 17.9. Le lien « ⌕ » vers la page de résultats et le
 * formulaire natif rangé dans le menu ont disparu le 10 octobre : la loupe de
 * la barre déploie le champ sur place (bloc « En-tête et sous-menu des
 * collections », plus haut). « La recherche reste accessible d'un geste. »
 */

/*
 * Rail de défilement en mobile — § 12.3.
 *
 * Sous 40rem, une carte occupe l'essentiel de la largeur : deux couvertures
 * côte à côte y seraient illisibles. Le débord de la suivante reste visible,
 * pour dire que le rail défile.
 */

@media (max-width: 39.999rem) {
	.liste-entrees--defilante {
		grid-auto-columns: 72vw;
	}

	.liste-entrees--defilante.liste-entrees--cartes {
		grid-auto-columns: 86vw;
	}
}

/* =========================================================================
 * Reprise du rendu — phase 9c
 * ====================================================================== */

/* -------------------------------------------------------------------------
 * 1 et 4 — le rail ne coupe plus de carte
 *
 * La cause n'était pas un conteneur non borné : le rail faisait bien 100 % de
 * la colonne. C'est la largeur de colonne qui ne divisait pas la largeur
 * disponible — 192 px + 36 px de gouttière dans 1104 px donnent 4,84 cartes,
 * donc une cinquième coupée aux quatre cinquièmes.
 *
 * La colonne se calcule désormais à partir du nombre de cartes voulues :
 * N cartes et N-1 gouttières remplissent exactement la largeur. En mobile,
 * une valeur fractionnaire ménage le liséré d'appel.
 * ---------------------------------------------------------------------- */

.liste-entrees--defilante {
	--rail-gap: var(--space-m);
	--rail-visible: 4;

	column-gap: var(--rail-gap);
	grid-auto-columns: calc( ( 100% - ( var(--rail-visible) - 1 ) * var(--rail-gap) ) / var(--rail-visible) );
	scroll-padding-inline-start: 0;
}

.liste-entrees--defilante.liste-entrees--cartes {
	--rail-visible: 3;

	grid-auto-columns: calc( ( 100% - ( var(--rail-visible) - 1 ) * var(--rail-gap) ) / var(--rail-visible) );
}

@media (max-width: 63.999rem) {
	.liste-entrees--defilante {
		--rail-visible: 3;
	}

	.liste-entrees--defilante.liste-entrees--cartes {
		--rail-visible: 2;
	}
}

@media (max-width: 39.999rem) {
	/*
	 * Une carte pleine et un liséré d'appel de 12 % : assez pour dire que le
	 * rail défile, trop peu pour donner l'impression d'un titre coupé.
	 */
	.liste-entrees--defilante,
	.liste-entrees--defilante.liste-entrees--cartes {
		--rail-visible: 1.14;
	}
}

/* -------------------------------------------------------------------------
 * 2 — placeholder composé, jamais un rectangle vide
 *
 * Un livre sans couverture reçoit la même composition qu'une couverture
 * réelle : fond clair, filet de tête, titre et signature. Il respecte les
 * proportions du § 3.13 comme une vraie couverture, puisqu'il porte la même
 * variable d'échelle.
 * ---------------------------------------------------------------------- */

.couverture__substitut {
	align-items: center;
	aspect-ratio: 2 / 3;
	background: var(--surface-alt);
	box-shadow: var(--shadow-raised);
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	justify-content: center;
	padding: var(--space-s) var(--space-2xs);
	position: relative;
	text-align: center;
}

.couverture__substitut::before {
	background: var(--accent);
	content: "";
	inset: 0 0 auto;
	height: 0.4rem;
	position: absolute;
}

.couverture__substitut-titre {
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--font-size-s);
	line-height: var(--leading-snug);
	overflow: hidden;
	text-wrap: balance;
}

.couverture__substitut-auteur {
	color: var(--text-muted);
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
	padding-top: var(--space-2xs);
	width: 70%;
}

/* -------------------------------------------------------------------------
 * 3 — cartes d'actualité alignées
 *
 * Le placement en cinq lignes ne suffisait pas : une ligne sans contenu se
 * réduit à zéro et les suivantes remontent. La structure change donc plutôt
 * que la grille — le titre est toujours le premier élément textuel, la
 * pastille passe dessous. Elle s'y lit aussi bien, et plus rien ne dépend de
 * la présence ou non d'un type.
 * ---------------------------------------------------------------------- */

.liste-entrees--cartes .carte {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	grid-template-rows: none;
}

.liste-entrees--cartes .carte > * {
	grid-row: auto;
}

.carte__media {
	order: 1;
}

.carte__titre {
	order: 2;
}

.carte__type {
	order: 3;
}

.carte__chapo,
.carte__mention,
.carte__lecteur {
	order: 4;
}

.carte__date {
	order: 5;
}

.carte__relie {
	order: 6;
	padding-top: var(--space-2xs);
}

/* -------------------------------------------------------------------------
 * 5 — respiration verticale resserrée d'un tiers
 * ---------------------------------------------------------------------- */

.section {
	padding-block: var(--space-m);
}

.liste-entrees {
	gap: var(--space-l) var(--space-m);
	padding-block: var(--space-s);
}

/*
 * 5 COLONNES EN DESKTOP, et respiration resserrée — repères 2 et 3 de la
 * recette du 1er août.
 *
 * Le pas minimal fait le nombre de colonnes : à 13 rem, cinq colonnes tiennent
 * dans les 1184 px de la boîte de page et six n'y tiennent plus. Six colonnes
 * étaient trop serrées pour des légendes qui portent un titre, un auteur et
 * une collection.
 *
 * ACCORDÉ AVEC ekdotis_config('books_per_page'), fixé à 25 = 5 × 5 pour que
 * chaque page se termine sur une ligne pleine. Changer l'un oblige à
 * réaccorder l'autre.
 *
 * Le resserrement ne vaut que pour les grilles de livres : les listes de
 * cartes — actualités, événements — portent des blocs de texte de hauteurs
 * inégales et gardent leur respiration.
 */

.liste-entrees--grille {
	/*
	 * Vertical réglé à la valeur, pas au pas de l'échelle : 45 px entre les
	 * lignes, et 60 px sous la barre de tri. Ni l'un ni l'autre ne tombe sur
	 * un cran de --space-*, et les arrondir aurait été trahir la demande.
	 *
	 * Le retrait de tête vaut 36 px et non 60 : la barre de tri pose déjà
	 * 24 px sous elle. Les deux s'ajoutent.
	 *
	 * L'horizontal ne bouge pas — la gouttière entre colonnes reste au pas
	 * commun.
	 */
	gap: 45px var(--space-m);
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	padding-block: 36px var(--space-2xs);
}

.section__titre {
	margin-bottom: var(--space-2xs);
}

/*
 * Correction du placement — les cartes enferment leur contenu dans
 * .carte__corps, et l'ordre doit donc s'appliquer là, pas sur .carte : les
 * pseudo-classes d'ordre ne portent que sur les enfants directs d'un
 * conteneur flex.
 *
 * Titre en premier, pastille dessous : plus rien ne dépend de la présence
 * d'un type, et deux cartes voisines partent toujours de la même ligne.
 */

.carte__corps {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-2xs);
	min-width: 0;
}

.carte__corps > .carte__titre {
	order: 1;
}

.carte__corps > .carte__type {
	order: 2;
}

.carte__corps > .carte__chapo,
.carte__corps > .carte__mention,
.carte__corps > .carte__lecteur,
.carte__corps > .avis__citation,
.carte__corps > .avis__source,
.carte__corps > .avis__lien {
	order: 3;
}

/* La date ferme la carte : c'est une mention de service, pas une accroche. */

.carte__corps > .carte__date {
	order: 4;
	padding-top: var(--space-2xs);
}

.carte__corps > .carte__relie {
	order: 5;
	padding-top: var(--space-2xs);
}

/* La pastille ne s'étire pas à la largeur de la carte. */

.carte__type {
	align-self: flex-start;
}

/* =========================================================================
 * Finition du rendu — phase 9d
 * ====================================================================== */

/* -------------------------------------------------------------------------
 * 1 — une carte fait la hauteur de son contenu
 *
 * Les règles précédentes étiraient chaque carte à la hauteur de sa ligne
 * (height: 100%), étiraient son corps (flex: 1 1 auto) puis poussaient la date
 * en bas (margin-top: auto). Trois mécanismes qui, ensemble, creusaient un
 * blanc au milieu des cartes courtes.
 *
 * Ce qui aligne les cartes entre elles, c'est align-items: start sur la
 * grille — leur point de départ, pas leur hauteur. Une carte sans chapô est
 * simplement plus courte que sa voisine, et c'est le comportement attendu.
 * ---------------------------------------------------------------------- */

.liste-entrees--cartes,
.liste-entrees--grille {
	align-items: start;
}

.carte__corps {
	flex: 0 1 auto;
}

/*
 * Les cartes d'événement suivent la même règle : une date et un lieu se
 * placent sous le titre, pas au pied d'une carte étirée.
 */

.carte--evenement .carte__corps,
.carte--actualite .carte__corps,
.carte--media .carte__corps,
.carte--avis .carte__corps {
	justify-content: flex-start;
}

/*
 * LA CARTE D'ÉVÉNEMENT, DE HAUT EN BAS (§ 17.4, 26 octobre, recette LLL) :
 * image, date, titre, lieu, bouton — l'ordre du balisage. Les ordres communs
 * des cartes (média en 1 sur une carte dont le corps reste en 0, date en 5)
 * mettaient l'image sous le texte et la date sous le lieu ; ils sont remis à
 * zéro ici, pour l'événement seul.
 */

/* Sous le bandeau d'une archive de cartes, --space-l : les 36 px que la grille
   du catalogue pose sous le sien (écrits en dur, `.liste-entrees--grille`),
   la valeur de --fiche-ecart. Le commun des listes n'en donnait que 16. */
.archive--cards > .liste-entrees--cartes {
	padding-top: var(--space-l);
}

.carte--evenement > *,
.carte--evenement .carte__corps > * {
	order: 0;
}

/* Hauteur fixe : les cartes d'une rangée commencent leur texte à la même
   ligne. L'image s'y pose sur le bas, contenue — jamais recadrée ni étirée. */
.carte--evenement > .carte__media {
	align-items: flex-end;
	display: flex;
	height: var(--cover-base);
}

.carte--evenement .carte__image {
	height: auto;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

/* La date mise en avant : police de titre, graisse forte, encre, deux crans
   au-dessus du lieu. */
.carte--evenement .carte__date--evenement {
	color: var(--text);
	font-family: var(--section-title-family);
	font-size: var(--font-size-xl);
	font-weight: 700;
	line-height: var(--leading-tight);
}

/* Le texte de l'événement (« avec qui », 26 octobre, 08h36) : corps du texte
   courant, encre, deux lignes au plus. */
.carte--evenement .carte__texte {
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--font-size-m);
	line-height: var(--leading-normal);
	margin: 0;
}

/*
 * TEXTE COUPÉ ENTRE DEUX MOTS (`entity/event-texte`). Chaque mot est une boîte
 * insécable : `-webkit-line-clamp` et `text-overflow` masquent alors des mots
 * entiers avant « … », au lieu de trancher au caractère (« Anthon… »). Une
 * espace précède « … » : celle d'avant le mot masqué.
 */
.texte-coupe {
	overflow: hidden;
}

.texte-coupe > span {
	display: inline-block;
}

.texte-coupe--1 {
	text-overflow: ellipsis;
	white-space: nowrap;
}

.texte-coupe--2 {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

/* Les auteurs nommés, en lien vers leur fiche (26 octobre, 08h58) : couleur de
   lien de la palette, soulignés au survol et au focus seulement. Sur un aplat,
   la forme leur donne la couleur du texte de l'aplat. */
.texte-coupe a {
	color: var(--link);
	text-decoration: none;
}

.texte-coupe a:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Le gabarit du bouton de la direction (`.bouton`, celui de « Découvrir le
   livre »), en accent doux sur encre dans toutes : 13:1 et plus sur les
   quatre palettes. Le survol garde les couleurs et souligne. */
.carte--evenement .carte__bouton {
	align-self: flex-start;
	background: var(--accent-soft);
	color: var(--text);
	margin-top: var(--space-2xs);
}

.carte--evenement .carte__bouton:hover,
.carte--evenement .carte__bouton:focus-visible {
	background: var(--accent-soft);
	color: var(--text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Sous 600 px, une colonne, quelle que soit la gouttière. */
@media (max-width: 37.49rem) {
	.archive--cards > .liste-entrees--cartes {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -------------------------------------------------------------------------
 * 2 — barres de défilement discrètes, mais jamais absentes
 *
 * Elles signalent qu'il existe du contenu au-delà du bord : les supprimer
 * priverait d'une information. Au repos, elles se fondent dans le fond ; au
 * survol et au focus clavier, elles reprennent leur contraste. La gouttière
 * reste réservée dans les deux cas, pour que rien ne saute.
 * ---------------------------------------------------------------------- */

.liste-entrees--defilante {
	padding-bottom: 0;
	scrollbar-color: transparent transparent;
	transition: scrollbar-color var(--transition);
}

.liste-entrees--defilante:hover,
.liste-entrees--defilante:focus-within {
	scrollbar-color: var(--border-strong) transparent;
}

.liste-entrees--defilante::-webkit-scrollbar {
	height: 8px;
}

.liste-entrees--defilante::-webkit-scrollbar-thumb {
	background: transparent;
	border-radius: 4px;
}

.liste-entrees--defilante:hover::-webkit-scrollbar-thumb,
.liste-entrees--defilante:focus-within::-webkit-scrollbar-thumb {
	background: var(--border-strong);
}

@media (prefers-reduced-motion: reduce) {
	.liste-entrees--defilante {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * 3 — un rail dont le contenu tient se comporte en grille
 *
 * Quand il y a autant de cartes que d'emplacements, il n'y a rien à faire
 * défiler : ni barre, ni débord d'appel, ni gouttière réservée. Le nombre
 * d'emplacements variant avec la largeur, la bascule est déclarée par palier.
 *
 * :has() n'est pas partout ; là où il manque, le rail garde son comportement
 * de défilement, qui reste correct — simplement moins net.
 * ---------------------------------------------------------------------- */

@media (min-width: 64rem) {
	.liste-entrees--defilante:not(:has( > :nth-child(5) )) {
		overflow-x: visible;
		scroll-snap-type: none;
	}
}

@media (min-width: 40rem) and (max-width: 63.999rem) {
	.liste-entrees--defilante:not(:has( > :nth-child(4) )) {
		overflow-x: visible;
		scroll-snap-type: none;
	}

	.liste-entrees--defilante.liste-entrees--cartes:not(:has( > :nth-child(3) )) {
		overflow-x: visible;
		scroll-snap-type: none;
	}
}

/* -------------------------------------------------------------------------
 * Fiche auteur — § 4
 *
 * STRUCTURE SEULEMENT. Aucune couleur, aucun corps, aucune famille : ce
 * gabarit est posé le 6 août sans habillage, qui viendra dans le thème enfant.
 * Ce qui est ici décrit des rapports — une colonne contre une autre, un seuil,
 * un nombre de colonnes — et ces rapports ne se surchargent pas (§ 1.3).
 * ---------------------------------------------------------------------- */

/* Ni largeur bornée ni gouttière ici (14 octobre) : `main.site-principal` les
   porte déjà, et la fiche les redoublait — son contenu commençait 48 px à
   droite du fil d'Ariane et du pied. Même chose pour `.rubriques` plus bas. */
.fiche-auteur {
	display: grid;
	gap: var(--author-columns-gap);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 60rem) {
	.fiche-auteur {
		grid-template-columns: var(--book-aside-width) minmax(0, 1fr);
	}

	/* SANS PORTRAIT, PAS DE COLONNE : la fiche reprend toute la largeur plutôt
	   que de réserver trois cents pixels à rien (§ 2.5, § 17.15). */

	.fiche-auteur--sans-annexe {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * LES MARGES DE LA FICHE AUTEUR REPRENNENT CELLES DE LA FICHE LIVRE — 26 aout.
 *
 * Elle etait nettement plus serree, et l'ecart ne tenait a aucune decision :
 * elle avait ete montee avant que la fiche livre ne fixe son echelle. On reprend
 * `--fiche-ecart` (ex-`--rubrique-ecart`, 14 octobre) et `--livre-zones-ecart`
 * plutot que d'inventer une seconde echelle — deux echelles pour un meme site
 * divergent a la premiere retouche.
 */

.fiche-auteur__annexe {
	display: flex;
	flex-direction: column;
	gap: var(--fiche-ecart);
}

/* Plus d'écart de zone au-dessus de la fiche (14 octobre) : l'article porte
   déjà son remplissage haut (`.auteur`, --space-l), et le nom tombait à 96 px
   du fil d'Ariane là où les titres de rubrique sont à 36. */

/*
 * UN SEUL ÉCART SUR LA FICHE AUTEUR (14 octobre) : `--fiche-ecart`, la valeur
 * mesurée entre le bas de la couverture mise en avant et « Au catalogue »
 * (56 px, --space-xl). Il sépare l'en-tête (nom et qualité) de ce qui suit —
 * mise en avant, biographie ou catalogue —, puis chaque rubrique de la
 * suivante, avec ou sans biographie. La marge de zone des rubriques était
 * déjà sans effet (`.rubriques-socle .rubrique { margin: 0 }`).
 */
.fiche-auteur__principal {
	display: flex;
	flex-direction: column;
	gap: var(--fiche-ecart);
}

/*
 * LA BIOGRAPHIE PREND LE BORD DE LA TITRAILLE et n'en deroge pas : meme bord
 * gauche, meme bord droit que le nom et la mention de role. L'entete et elle
 * sont un seul bloc de texte, et la marge qui les separait le niait.
 */


/*
 * LA BIOGRAPHIE PARTAGE LE BORD DROIT DE LA TITRAILLE, et lève donc sa borne de
 * lecture.
 *
 * C'est le cas que le § 17.15 a nommé le 26 août : quand une composition impose
 * à un bloc de partager son bord, c'est la colonne qui commande et la mesure se
 * subit. Mesuré ici : 740 px, soit environ 92 caractères — au-dessus des 68 à
 * 75. Le prix du bord partagé, assumé comme sur la fiche livre.
 */

/* Le bloc prend toute la largeur du contenu et porte l'encadré que la forme
   dessine (jetons --encadre-*) ; sans biographie, le gabarit ne rend rien. */
.fiche-auteur__principal .auteur__biographie {
	background: var(--encadre-fond);
	border-left: var(--encadre-filet) solid var(--accent);
	max-width: none;
	padding: var(--encadre-retrait-bloc) var(--encadre-retrait-cote);
}

/* La biographie est de la prose (§ 17.15) : bornée à une colonne de lecture,
   --encadre-colonne — --reading-width au parent, ce que la forme veut
   ailleurs (14 octobre ; 148 à 166 signes par ligne mesurés à 1 280 avant). */
.fiche-auteur__principal .auteur__biographie-texte {
	max-width: var(--encadre-colonne);
}

.auteur__image {
	display: block;
	height: auto;
	max-width: 100%;
	object-fit: cover;
	width: var(--portrait-width);
}

/* La prose de la biographie est bornée ; le reste de la colonne ne l'est pas.
   C'est le § 17.15, et l'erreur corrigée sur la fiche livre le 4 août. */

.auteur__biographie-texte {
	max-width: var(--prose-width);
}

.rubriques {
	display: flex;
	flex-direction: column;
	gap: var(--fiche-ecart);
	/* Le remplissage bas ferme la page avec la fiche : même jeton (§ 2.109). */
	padding-block: var(--fiche-ecart) var(--fin-de-page, var(--fiche-ecart));
}

/* § 4.6 — mise en avant : un tiers de couverture, deux tiers de texte. Cette
   répartition ne vaut que pour un titre seul ; à plusieurs, le bloc rend une
   rangée de vignettes et cette règle ne s'applique pas. */

.grille-tiers {
	display: grid;
	gap: var(--space-m);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 40rem) {
	.grille-tiers {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	}
}

.derniere-parution__couverture {
	display: block;
}

/*
 * LA COUVERTURE CALÉE À GAUCHE, LE TEXTE JUSTE APRÈS — 13 octobre, constat de
 * Phil sur Eurédit (Réquéna). La grille en tiers donnait un tiers de largeur à
 * une couverture qui n'en prend que la moitié, et le composant générique de
 * couverture — celui du bandeau de la fiche livre — la centrait dans cette
 * colonne et la posait en bas : du vide des deux côtés et au-dessus, le texte
 * au milieu de la page. Ici la colonne prend la largeur de l'image, et la
 * couverture se cale en haut à gauche ; le titre garde ses vingt pixels
 * d'alignement sur le haut de l'image. `.grille-tiers` lui-même ne change pas.
 */
@media (min-width: 40rem) {
	.derniere-parution .grille-tiers {
		grid-template-columns: auto minmax(0, 1fr);
	}
}

.derniere-parution .couverture {
	align-items: flex-start;
	height: auto;
	justify-content: flex-start;
}

/*
 * LE TITRE S'ALIGNE SUR LE HAUT DE SA COUVERTURE. Vingt pixels : la couverture
 * n'a pas de hauteur de ligne, le titre si — sans cette marge, sa premiere
 * ligne part plus haut que le bord de l'image et les deux colonnes ne se
 * repondent pas.
 */

.derniere-parution__titre {
	margin-top: var(--derniere-parution-titre-marge);
}

/* Les quatre mentions reprennent la colonne des caracteristiques (§ 17.18). */

.derniere-parution__mentions {
	margin-top: var(--space-s);
}

/* § 4.10 — le nombre de colonnes est décidé en PHP ; la feuille ne fait que
   l'appliquer. Une colonne jusqu'à quatre références, deux jusqu'à huit, trois
   au-delà. */

.biblio-externe__liste--deux-colonnes,
.biblio-externe__liste--trois-colonnes {
	column-gap: var(--space-l);
}

.biblio-externe__liste--deux-colonnes {
	column-count: 2;
}

.biblio-externe__liste--trois-colonnes {
	column-count: 3;
}

@media (max-width: 48rem) {
	.biblio-externe__liste--deux-colonnes,
	.biblio-externe__liste--trois-colonnes {
		column-count: 1;
	}
}

/* -------------------------------------------------------------------------
 * Bibliographie de la fiche auteur — rangée, puis rail — § 4.3, § 12.3
 *
 * SIX COUVERTURES PAR LIGNE, PAS PLUS. `repeat(6, …)` et non `auto-fill` : la
 * largeur d'une vignette doit être la même qu'un auteur en ait trois ou vingt,
 * sinon deux blocs de la même page ne se comparent plus.
 * ---------------------------------------------------------------------- */

.rubrique--bibliographie .liste-entrees--grille {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 64rem) {
	.rubrique--bibliographie .liste-entrees--grille {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 40rem) {
	.rubrique--bibliographie .liste-entrees--grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * LE RAIL DOIT SE VOIR, ET LE § 12.3 INTERDIT LES FLÈCHES.
 *
 * Trois indications, toutes statiques, aucune ligne de JavaScript.
 *
 * 1. LA SIXIÈME VIGNETTE EST COUPÉE. Les colonnes valent un sixième de la
 *    largeur moins une marge : la carte suivante entre dans le cadre sans y
 *    tenir. Une couverture tronquée dit « ça continue » mieux que n'importe
 *    quel signe ajouté — c'est l'objet lui-même qui le dit.
 *
 * 2. UN DÉGRADÉ DE BORD, posé en `mask-image`. Il s'efface de lui-même quand le
 *    rail est défilé jusqu'au bout, parce que le masque suit le contenu : c'est
 *    le seul indicateur qui dise COMBIEN il reste, et non seulement qu'il
 *    reste.
 *
 * 3. LA BARRE DE DÉFILEMENT RESTE VISIBLE. Le socle la masquait au repos ; ici
 *    elle est l'affordance la plus universelle, et la cacher reviendrait à
 *    dissimuler la seule commande de la zone.
 */

.rubrique--bibliographie .liste-entrees--defilante {
	/* CINQ VIGNETTES ET DEMIE, ET C'EST LE POINT. Six colonnes pleines
	   tiendraient pile dans le cadre et rien ne dirait qu'il y en a d'autres :
	   mesuré, la sixième s'arrêtait à 1064 px pour 1120 px de rail. À 5,5 elle
	   dépasse le bord, et une couverture coupée annonce la suite mieux que
	   n'importe quel signe ajouté. La rangée fixe, elle, en montre six pleines. */
	grid-auto-columns: calc((100% - 5 * var(--space-m)) / 5.5);
	mask-image: linear-gradient(to right, #000 calc(100% - 4rem), transparent 100%);
	padding-inline-end: var(--space-xl);
	scrollbar-color: var(--border-strong) transparent;
	scrollbar-width: thin;
}

/* Défilé jusqu'au bout, il n'y a plus rien à annoncer : le dégradé se retire.
   `animation-timeline` n'est pas encore partout — le repli est le dégradé
   permanent, qui n'a jamais empêché de lire la dernière vignette. */

@supports (animation-timeline: scroll(self inline)) {
	.rubrique--bibliographie .liste-entrees--defilante {
		animation: ekdotis-voile-rail linear both;
		animation-timeline: scroll(self inline);
	}

	@keyframes ekdotis-voile-rail {
		to {
			mask-image: linear-gradient(to right, #000 100%, transparent 100%);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.rubrique--bibliographie .liste-entrees--defilante {
		animation: none;
	}
}

@media (max-width: 64rem) {
	.rubrique--bibliographie .liste-entrees--defilante {
		grid-auto-columns: calc((100% - 3 * var(--space-m)) / 3.5);
	}
}

@media (max-width: 40rem) {
	.rubrique--bibliographie .liste-entrees--defilante {
		grid-auto-columns: calc((100% - var(--space-m)) / 1.7);
	}
}

/* Le fil de collection sous une vignette de bibliographie. */

.livre-vignette__separateur {
	padding-inline: 0.25em;
}

/* -------------------------------------------------------------------------
 * Rangées défilantes pilotées — § 12.3, 14 octobre
 *
 * LE SCRIPT POSE DES ÉTATS, LA FEUILLE DESSINE. `est-pilotee` : le rail a ses
 * boutons, la barre native disparaît (sans script elle reste, repli).
 * `a-suite-gauche` / `a-suite-droite` : il reste du contenu de ce côté, et
 * le fondu ne s'affiche que là — plus de dégradé permanent ni d'animation
 * liée au défilement, le script sait où en est le rail. Les boutons ‹ ›
 * tiennent à droite de la ligne de l'intitulé, dans une enveloppe
 * `defilement__entete` qui reprend la marge basse de l'intitulé ; discrets :
 * ni fond ni bordure au repos, l'accent, une cible de 44 px, atténués en
 * bout de course. Une rangée qui tient n'a ni boutons (`a-defilement` absent)
 * ni fondu (aucune classe de suite).
 * ---------------------------------------------------------------------- */

/* Les trois rails nommés, pour peser autant que leurs règles propres
   (`.rubrique--bibliographie .liste-entrees--defilante` pose la barre fine et
   le dégradé) : à poids égal, la règle écrite après l'emporte. */
.liste-entrees--defilante.est-pilotee,
.biblio-ligne.est-pilotee,
.bloc-piste.est-pilotee {
	animation: none;
	mask-image: none;
	scrollbar-width: none;
}

.liste-entrees--defilante.est-pilotee::-webkit-scrollbar,
.biblio-ligne.est-pilotee::-webkit-scrollbar,
.bloc-piste.est-pilotee::-webkit-scrollbar {
	display: none;
}

.liste-entrees--defilante.est-pilotee.a-suite-droite,
.biblio-ligne.est-pilotee.a-suite-droite,
.bloc-piste.est-pilotee.a-suite-droite {
	mask-image: linear-gradient(to right, #000 calc(100% - 4rem), transparent 100%);
}

.liste-entrees--defilante.est-pilotee.a-suite-gauche,
.biblio-ligne.est-pilotee.a-suite-gauche,
.bloc-piste.est-pilotee.a-suite-gauche {
	mask-image: linear-gradient(to left, #000 calc(100% - 4rem), transparent 100%);
}

.liste-entrees--defilante.est-pilotee.a-suite-gauche.a-suite-droite,
.biblio-ligne.est-pilotee.a-suite-gauche.a-suite-droite,
.bloc-piste.est-pilotee.a-suite-gauche.a-suite-droite {
	mask-image: linear-gradient(to right, transparent 0, #000 4rem, #000 calc(100% - 4rem), transparent 100%);
}

/*
 * UN SEUL ÉCART SOUS L'INTITULÉ, PILOTÉ OU NON (14 octobre, soir). La marge
 * basse est portée par l'enveloppe, jamais par l'intitulé qu'elle contient
 * (sélecteurs assez lourds pour l'emporter sur la règle de l'intitulé), et
 * la liste qui suit l'enveloppe ne rajoute pas son remplissage haut, comme
 * sous un intitulé seul. Les boutons ne grandissent pas la ligne : leur
 * conteneur est de hauteur nulle, centré sur l'intitulé, et les cibles de
 * 44 px débordent dessus sans le pousser — 24 + 24 + 16 = 64 px avant, 24
 * après, comme sous « Dernière parution ».
 */
.defilement__entete {
	align-items: center;
	display: flex;
	gap: var(--space-s);
	justify-content: space-between;
	margin-bottom: var(--rubrique-intitule-ecart);
}

.defilement__entete > .livre__titre-rubrique,
.defilement__entete > .bloc__intitule,
.livre .defilement__entete > .livre__titre-rubrique,
.rubriques-socle .defilement__entete > .livre__titre-rubrique {
	flex: 1 1 auto;
	margin-bottom: 0;
	min-width: 0;
}

.livre .defilement__entete + .liste-entrees,
.rubriques-socle .defilement__entete + .liste-entrees {
	padding-block-start: 0;
}

.defilement__commandes {
	align-items: center;
	display: none;
	flex: 0 0 auto;
	gap: var(--space-3xs);
	height: 0;
}

.defilement__entete.a-defilement .defilement__commandes {
	display: flex;
}

.defilement__bouton {
	align-items: center;
	background: none;
	border: 0;
	border-radius: var(--radius-m);
	color: var(--accent);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 1.75rem;
	height: var(--cible);
	justify-content: center;
	line-height: 1;
	padding: 0;
	width: var(--cible);
}

.defilement__bouton:hover,
.defilement__bouton:focus-visible {
	background: var(--accent-soft);
}

.defilement__bouton:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.defilement__bouton.est-inactif {
	background: none;
	color: var(--text-faint);
	cursor: default;
}

/* -------------------------------------------------------------------------
 * Page standard — § 2.5
 * ---------------------------------------------------------------------- */

/* UNE SEULE GOUTTIÈRE (14 octobre au soir, suivi § 2.74). `.site-principal`
   porte déjà la largeur du contenu et la gouttière ; l'article les répétait —
   `margin-inline: auto`, `max-width`, `padding-inline: var(--gutter)` — et
   le titre comme le texte partaient une gouttière à droite du fil d'Ariane
   et du pied (48 px à 1 280, 16 à 375), comme la fiche auteur au § 2.55. */
.page-standard {
	padding-block: var(--space-l) var(--space-xl);
}

.page-standard__titre {
	margin: 0 0 var(--rubrique-intitule-ecart);
	max-width: var(--reading-width);
}

/*
 * LE CONTENU DE LA PAGE DANS L'ENCADRÉ DE LA BIOGRAPHIE (14 octobre au soir,
 * suivi § 2.74). Le bloc prend la largeur du contenu et porte l'encadré que
 * la forme dessine (jetons --encadre-*, les mêmes que la biographie de la
 * fiche auteur) ; la colonne de prose, à l'intérieur, reste bornée
 * (--encadre-colonne, --reading-width au parent : 65 à 75 signes, la
 * contrainte du § 3.8). Une page sans contenu n'a pas de bloc (gabarit).
 */
.page-standard__contenu {
	background: var(--encadre-fond);
	border-left: var(--encadre-filet) solid var(--accent);
	padding: var(--encadre-retrait-bloc) var(--encadre-retrait-cote);
}

.page-standard__texte {
	max-width: var(--encadre-colonne);
}

.page-standard__texte > :first-child {
	margin-top: 0;
}

.page-standard__texte > :last-child {
	margin-bottom: 0;
}

/*
 * LE MOTIF DE PAGE STANDARD (26 octobre, suivi § 2.96, CDC § 14.1.1). Le
 * contenu d'une page porte ses rôles en classes simples, posées par la reprise
 * ou à la main dans l'éditeur : chapô (`p.chapo`), exergue (`blockquote`),
 * signature (`p.signature`), note (`p.note`), fiches de contact
 * (`div.contacts > div.contact`, `p.contact__role`, `p.contact__nom`). Ici le
 * rendu de base, sobre, que toutes les directions reçoivent ; une forme le
 * reprend à son goût. Aucun filet : l'exergue est en retrait, les fiches sur
 * un fond. `.contacts > .contact` et non `.contact` seul : le formulaire de
 * contact (§ 14.2) porte déjà `.contact`.
 */
.page-standard__texte .chapo {
	font-size: var(--font-size-l);
}

.page-standard__texte blockquote {
	font-size: var(--font-size-l);
	font-style: italic;
	margin: var(--space-l) 0;
	padding-inline-start: var(--space-l);
}

.page-standard__texte blockquote > :last-child {
	margin-bottom: 0;
}

.page-standard__texte .signature {
	margin-top: var(--space-l);
	text-align: left;
}

.page-standard__texte .note {
	color: var(--text-muted);
	font-size: var(--font-size-s);
}

.page-standard__texte .contacts {
	display: grid;
	gap: var(--space-s);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	margin-block: var(--space-m) var(--space-l);
}

.page-standard__texte .contacts > .contact {
	background: var(--surface-alt);
	max-width: none;
	padding: var(--space-s) var(--space-m);
}

.page-standard__texte .contacts > .contact > p {
	margin: 0;
}

.page-standard__texte .contact__role {
	color: var(--text-muted);
	font-size: var(--font-size-s);
}

.page-standard__texte .contact__nom {
	font-weight: 700;
}

/* Un courriel peut se couper n'importe où plutôt que de déborder de sa
   fiche ; un nom, jamais (il se replie entre ses mots), un numéro non plus. */
/* Sur le fond des fiches, la couleur de lien des palettes descend sous
   4,5:1 (classique 4,3, visuelle 4,0, mesuré) : elle s'assombrit d'un
   tiers vers l'encre, sa teinte reste. */
.page-standard__texte .contacts a {
	color: color-mix(in srgb, var(--link) 70%, var(--text));
}

.page-standard__texte .contacts a[href^="mailto:"] {
	overflow-wrap: anywhere;
}

.page-standard__texte .contacts a[href^="tel:"] {
	white-space: nowrap;
}

/* LE MODÈLE « PLEINE LARGEUR » (2 novembre 2026, suivi § 2.169) : la borne de
   lecture est levée sur le texte, dans toutes les directions — la colonne
   prend la largeur du contenu (en classique, l'intérieur de l'encadré). Le
   reste de la page standard ne change pas. */
body.page-template-modelespleine-largeur-php .page-standard__texte {
	max-width: none;
}

/*
 * LES TABLEAUX DE CONTENU (2 novembre 2026, pages légales d'Aubéron, décision
 * de Phil, suivi § 2.168). Le bloc Tableau de WordPress pose une grille de
 * bordures — un filet par cellule — et, à 375 px, quatre colonnes ne tiennent
 * pas : le tableau défilait dans son cadre. Ici, aucune bordure : intitulés en
 * gras dans la famille d'interface, rangées séparées par l'espace, texte en
 * haut des cellules. Sous 48 rem, chaque rangée s'empile en bloc, chaque
 * valeur précédée de l'intitulé de sa colonne (`data-libelle`, posé au rendu
 * par ekdotis_tableau_libelles()) ; l'en-tête reste pour les lecteurs d'écran.
 */
.wp-block-table {
	margin-block: var(--space-m) var(--space-l);
	overflow-x: visible;
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table thead,
.wp-block-table tfoot,
.wp-block-table th,
.wp-block-table td {
	border: 0;
}

.wp-block-table th,
.wp-block-table td {
	padding: var(--space-2xs) var(--space-s) var(--space-2xs) 0;
	text-align: left;
	vertical-align: top;
}

.wp-block-table th {
	font-family: var(--font-ui);
	font-weight: 700;
}

.wp-block-table tbody tr + tr td {
	padding-top: var(--space-s);
}

@media (max-width: 47.99rem) {
	.wp-block-table table,
	.wp-block-table tbody,
	.wp-block-table tr,
	.wp-block-table td {
		display: block;
	}

	.wp-block-table thead {
		block-size: 1px;
		clip-path: inset(50%);
		inline-size: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
	}

	.wp-block-table tbody tr + tr {
		margin-top: var(--space-m);
	}

	.wp-block-table td,
	.wp-block-table tbody tr + tr td {
		padding: 0 0 var(--space-3xs);
	}

	.wp-block-table td[data-libelle]::before {
		content: attr(data-libelle);
		display: block;
		font-family: var(--font-ui);
		font-weight: 700;
	}
}

/* Le formulaire de contact, hors de l'encadré, à l'écart des éléments. */
.page-standard__formulaire {
	margin-top: var(--fiche-ecart);
}

.page-standard__titre + .page-standard__formulaire {
	margin-top: 0;
}

/* -------------------------------------------------------------------------
 * Formulaire de contact — § 14.2
 * ---------------------------------------------------------------------- */

.contact {
	max-width: var(--reading-width);
}

.contact__formulaire {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
}

.contact__champ {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	margin: 0;
}

.contact__label {
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
}

.contact__facultatif {
	color: var(--text-faint);
	font-size: var(--font-size-xs);
}

/*
 * ZONES TACTILES DE 44 PX. C'est la hauteur en dessous de laquelle un doigt
 * manque sa cible sur un écran tactile — elle vaut pour les champs comme pour
 * le bouton, et elle se pose ici plutôt que sur chaque élément.
 */
.contact__saisie {
	background: var(--surface);
	border: var(--border-width) solid var(--border-strong);
	border-radius: var(--radius-s);
	color: var(--text);
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	min-height: 2.75rem;
	padding: var(--space-2xs) var(--space-xs);
	width: 100%;
}

textarea.contact__saisie {
	line-height: var(--leading-normal);
	resize: vertical;
}

.contact__envoyer {
	border: 0;
	cursor: pointer;
	min-height: 2.75rem;
	padding-inline: var(--space-m);
}

.contact__actions {
	margin: 0;
}

/*
 * Le défaut se dit deux fois : par la couleur du filet, et par le message. La
 * couleur seule ne suffit pas — elle n'est lue ni par un daltonien ni par un
 * lecteur d'écran.
 */
.contact__champ--erreur .contact__saisie {
	border-color: var(--alert);
	border-width: 2px;
}

.contact__erreur {
	color: var(--alert);
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
}

.contact__succes,
.contact__alerte {
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	margin: 0 0 var(--space-m);
	padding: var(--space-xs) var(--space-s);
}

.contact__succes {
	background: var(--accent-soft);
}

.contact__alerte {
	background: var(--surface-alt);
}

.contact__resume {
	margin: var(--space-2xs) 0 0;
	padding-left: var(--space-m);
}

/*
 * LE LEURRE SORT DE L'ÉCRAN, IL NE DISPARAÎT PAS.
 *
 * `display: none` et `visibility: hidden` sont exactement ce que certains
 * robots testent avant de remplir un champ : ils sautent ce qui est
 * explicitement caché. Un décalage hors cadre laisse le champ « visible » au
 * sens du calcul de style, donc rempli — et il reste inatteignable pour un
 * humain, que `aria-hidden` et `tabindex="-1"` écartent déjà.
 */
.contact__leurre {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	top: auto;
	width: 1px;
}

/* Liens d'action — l'ornement, jamais le mot
   ------------------------------------------------------------------------
   LA FLÈCHE EST UNE DÉCORATION, ET SA PLACE EST ICI. Neuf libellés la
   portaient dans leur texte — « Tout l'agenda → » — et sept n'en avaient pas,
   sans qu'aucune règle explique lesquels. Depuis que ces libellés se règlent à
   l'écran (revue du 21 août), la laisser dans le texte reviendrait à demander à
   l'opérateur de saisir un ornement : il l'oublierait une fois sur deux, ou
   choisirait un autre signe, et l'uniformité dépendrait de sa mémoire.

   LE SENS DE LECTURE DÉCIDE DU CÔTÉ. « Précédent » remonte, « Suivant »
   avance : la paire se lit d'un bloc, et ses deux flèches sortent du même
   endroit — l'une en `::before`, l'autre en `::after`. Ce n'est pas une
   exception à la règle, c'est la règle appliquée à un cas qui a deux sens.

   `aria-hidden` n'existe pas sur un pseudo-élément : on ne peut pas le cacher
   aux lecteurs d'écran. C'est pourquoi le mot doit se suffire — « Voir le
   livre » se comprend sans flèche, et la flèche n'ajoute rien à l'oral. */

.lien-action::after {
	content: " →";
	white-space: nowrap;
}

/* Ce que les fontes savent faire, et qu'il faut leur demander
   ------------------------------------------------------------------------
   INSTALLER LES TABLES SANS LES ACTIVER NE SERT À RIEN. Les neuf familles du
   § 19.5 portent leurs petites capitales et leurs chiffres elzéviriens ; sans
   ces trois règles, le navigateur ne les emploierait jamais et le socle aurait
   payé 1 Mo de fontes pour un rendu inchangé.

   TROIS EMPLACEMENTS, ET PAS UN DE PLUS. Le relevé du 21 août dit où les
   sigles et les dates se rencontrent ; la revue du 24 a écarté le reste. Ce
   qu'on ne touche pas est aussi un choix :

     · pas d'elzéviriens sur les VALEURS de la fiche — cette liste porte des
       ISBN, des EAN, des dimensions et un nombre de pages, et aucune date.
       Un identifiant se recopie chiffre à chiffre : il se lit mieux aligné.
     · pas d'elzéviriens sur les prix ni la pagination, qui s'alignent en
       colonne et perdraient leur ligne de base commune.
     · pas de petites capitales sur les titres ni les menus : elles y
       remplaceraient un dessin par un autre sans qu'on l'ait demandé.

   UNE FAMILLE SANS CES TABLES IGNORE CES RÈGLES, sans dommage et sans repli
   fabriqué : la pile système du duo « Classique » rend exactement comme avant.
   `font-variant-*` ne synthétise rien — c'est pourquoi on peut le poser
   largement sans risque. */

/* Les intitulés de la version numérique étaient en petites capitales ; plus
   depuis le 13 octobre — aucune capitale nulle part, règle de Phil. Les sigles
   (ISBN, EAN, PDF) restent ce qu'ils sont dans le gabarit. */

/* Les dates de carte — actualités, événements — et la ligne de méta des tuiles
   de livre : ce sont des nombres dans une phrase, pas des identifiants. */
.carte__date,
.livre-tuile__meta {
	font-variant-numeric: oldstyle-nums;
}

/* Le corps de fiche : « paru en 1957 », « 3 000 exemplaires ». Les chiffres y
   sont du texte, et se composent comme du texte. */
.fiche__chapo,
.livre-apropos__texte {
	font-variant-numeric: oldstyle-nums;
}

/* Le crédit de fonte : présent quand la licence l'exige, discret toujours. */
.pied-site__credit-fonte {
	color: var(--text-faint);
	font-size: var(--font-size-2xs);
	margin-top: var(--space-2xs, .35rem);
}

/* =========================================================================
 * FICHE LIVRE v2 — LE DESSIN
 *
 * Transposé de `design/fiche-livre2/README-passation.md`. La maquette a été
 * LUE, jamais recopiée : son balisage n'est pas le nôtre, et ses valeurs de
 * couleur et de corps sont un exemple de réglage, pas une commande.
 *
 * RIEN N'EST ÉCRIT EN DUR. Les huit rôles de couleur du README existent au
 * socle sous d'autres noms — « fond d'accent » est `--accent-soft`, « gris des
 * mentions » est `--text-muted`, « gris léger » est `--border` — et les huit
 * corps sont les rôles de l'échelle. La palette et le duo typographique se
 * changent à l'écran de configuration : ce dessin ne doit pas s'en apercevoir.
 * ====================================================================== */

/* -------------------------------------------------------------------------
 * L'intitulé de rubrique — un contrat propre à la fiche
 *
 * POURQUOI UN CONTRAT À PART, ET POURQUOI IL FAUDRA LE RÉSORBER.
 *
 * `.livre__titre-rubrique` sert treize gabarits et lit les quatre POIGNÉES DE
 * MONTAGE du titre de section — corps, graisse, casse, interlettrage —,
 * réglables à l'écran depuis le 20 août. Le README v2 arrête pour la fiche un
 * traitement très différent : capitales, 700, interlettrage large, corps de
 * mention fine, tiret d'accent au-dessus.
 *
 * Redéfinir `--section-title-*` sur `.livre` aurait été plus court d'une ligne
 * — et aurait BATTU LES POIGNÉES : `ekdotis_preset_css()` les écrit sur
 * `:root`, une redéfinition sur `.livre` l'emporte, et un client qui règle la
 * casse ne verrait rien changer sur sa fiche livre. Un réglage qui ne fait
 * rien sans le dire est précisément le défaut que la mécanique de provenance
 * combat.
 *
 * D'où ce contrat séparé. Conséquence assumée : DEUX TRAITEMENTS COEXISTENT —
 * la fiche livre d'un côté, l'accueil, les archives et la fiche auteur de
 * l'autre. La convergence se posera le jour où ces gabarits seront redessinés.
 * ---------------------------------------------------------------------- */
/*
 * `.rubriques-socle` — LE CONTRAT D'ADOPTION DU DESSIN DE RUBRIQUE.
 *
 * CE QU'IL EST. Une classe qu'un gabarit se pose a lui-meme pour dire : « mes
 * rubriques prennent le dessin du socle » — tiret d'accent, capitales fines,
 * pas de filet, ecart de 42 px. Elle ne decrit aucune forme ; elle DECLARE une
 * intention, et le contrat qui suit la sert.
 *
 * POURQUOI PAS `.livre, .fiche-auteur`. La liste s'allongerait a chaque gabarit
 * redessine — cinq restent a faire —, et une liste de selecteurs est une dette
 * qu'on paie sans s'en apercevoir : elle se modifie a chaque fois, dans un
 * fichier que personne n'ouvre pour cela. Le cout d'une classe d'intention est
 * un mot par gabarit, paye une fois, la ou la decision se prend.
 *
 * POURQUOI PAS `:root`. Le contrat redefinirait les poignees generales
 * `--section-title-*` et rendrait muets les quatre champs « Intitule de
 * section » de l'ecran — un reglage qui ne fait rien sans le dire, exactement
 * ce que la mecanique de provenance combat (§ 21.6). C'est le motif du scopage
 * d'origine, et il tient toujours.
 *
 * COMMENT L'ADOPTER. Un gabarit ajoute `rubriques-socle` a son conteneur
 * racine. Rien d'autre. Un gabarit qui ne l'adopte pas garde le dessin general,
 * et ses champs d'ecran continuent de le commander.
 */

.livre,
.rubriques-socle {
	--rubrique-famille: var(--font-ui);
	--rubrique-corps: var(--font-size-xs);
	--rubrique-graisse: 700;
	--rubrique-casse: none;
	--rubrique-interlettrage: 0;
	--rubrique-interligne: var(--leading-snug);

	/*
	 * LA TITRAILLE, SIX ÉLÉMENTS, CINQ PROPRIÉTÉS CHACUN — 26 août.
	 *
	 * CHAQUE JETON PART DU RÔLE QU'IL HÉRITE, et c'est ce qui fait tenir le
	 * « vide = le réglage général s'applique » de l'écran sans une ligne de
	 * PHP : `--livre-auteurs-corps` vaut `var(--font-size-l)` tant que personne
	 * n'écrit rien, donc il suit le degré « Chapô » comme avant. Le jour où
	 * quelqu'un règle la fiche, le composeur écrit un second `.livre { }` qui
	 * recouvre le jeton — et lui seul.
	 *
	 * L'ÉCRAN N'EN EXPOSE QUE TREIZE SUR TRENTE : corps et graisse partout, la
	 * casse pour le seul sur-titre. Les autres sont ici, à portée de session, et
	 * en exposer un de plus ne demandera qu'une entrée de schéma.
	 *
	 * CE BLOC EST LA SEULE SOURCE. Titre et sous-titre étaient déclarés deux
	 * fois dans ce fichier — une fois en session A, une fois en session C — et
	 * il fallait lire les deux pour savoir ce que rendait la page. Les règles de
	 * la session A ne gardent plus que leurs marges.
	 */

	/* Sur-titre : « Littérature › Romans ». */
	--livre-collection-corps: var(--font-size-xs);
	--livre-collection-graisse: 700;
	--livre-collection-casse: none;
	--livre-collection-interlettrage: normal;
	--livre-collection-interligne: var(--leading-normal);

	/*
	 * Titre. Son corps reste `--font-size-3xl`, écrit sur `:root` par le
	 * composeur : le jeton n'a pas d'autre lecteur que cette page, et le
	 * facteur d'échelle continue de le moduler.
	 */
	--livre-titre-corps: var(--font-size-3xl);
	--livre-titre-graisse: 700;
	--livre-titre-casse: none;
	--livre-titre-interlettrage: -0.018em;
	--livre-titre-interligne: 1.12;

	/* Sous-titre, en italique éditoriale. */
	--livre-sous-titre-corps: var(--font-size-xl);
	--livre-sous-titre-graisse: 400;
	--livre-sous-titre-casse: none;
	--livre-sous-titre-interlettrage: normal;
	--livre-sous-titre-interligne: var(--leading-snug);

	/* Ligne de direction : « sous la direction de… ». */
	--livre-direction-corps: var(--font-size-m);
	--livre-direction-graisse: 400;
	--livre-direction-casse: none;
	--livre-direction-interlettrage: normal;
	--livre-direction-interligne: var(--leading-normal);

	/* Ligne d'auteurs. */
	--livre-auteurs-corps: var(--font-size-l);
	--livre-auteurs-graisse: 400;
	--livre-auteurs-casse: none;
	--livre-auteurs-interlettrage: normal;
	--livre-auteurs-interligne: var(--leading-normal);

	/*
	 * LE TEXTE DE PRÉSENTATION EST AU CORPS COURANT — 10 octobre, décision de
	 * Phil sur relevé d'Eurédit.
	 *
	 * Il valait « chapô moins quatre pixels » depuis la recette du 26 août : un
	 * seul jeton, mais rattaché à un autre rôle que le courant, avec un écart
	 * fixe. Le jour où Eurédit a monté son corps courant à 19, la présentation
	 * est restée à 16 — le seul texte de lecture du site sous le body, et le
	 * rapport voulu en août s'était inversé sans que rien ne le dise.
	 *
	 * UNE TAILLE DE TEXTE DE LECTURE SE RATTACHE AU COURANT, jamais à un autre
	 * rôle avec un écart fixe : le rapport s'inverse dès qu'on règle l'un sans
	 * l'autre. Le jeton suit donc `--font-size-m` — « corps de texte courant »
	 * et l'échelle générale —, et l'onglet Fiche livre le déroge en pixels
	 * (`livre_presentation_corps`, vide par défaut), comme les six éléments de
	 * titraille. Le chapô en italique du résumé garde `--font-size-l` : c'est
	 * une hiérarchie, pas un écart.
	 */
	--livre-presentation-corps: var(--font-size-m);

	/*
	 * LA CITATION DE PRESSE, EN JETONS — recette du 26 août.
	 *
	 * Elle était au corps du chapô avec l'interligne courant : quatre citations
	 * occupaient plus de place que le texte du livre lui-même, dans une colonne
	 * qui n'est pas la sienne. Elle descend d'un cran et se resserre.
	 *
	 * Deux jetons plutôt que deux valeurs posées sur place, pour la même raison
	 * que le texte de présentation : un onglet de gabarit les exposera le jour
	 * où on le lui demandera.
	 */
	--avis-citation-corps: var(--font-size-s);
	--avis-citation-interligne: var(--leading-snug);

	/* Mentions de rôle : les contributeurs secondaires. */
	--livre-roles-corps: var(--font-size-s);
	--livre-roles-graisse: 400;
	--livre-roles-casse: none;
	--livre-roles-interlettrage: normal;
	--livre-roles-interligne: var(--leading-normal);

	/*
	 * « ET 3 AUTRES » SUIT LA LIGNE D'AUTEURS, ET IL A FALLU LE LUI DIRE.
	 *
	 * Il ne portait aucune déclaration de corps — ni jeton ni valeur en dur — et
	 * héritait donc de son parent. Or son parent n'est pas la ligne d'auteurs :
	 * le `<details>` est écrit dans le `<p class="…__auteurs">`, mais un
	 * `<details>` FERME UN PARAGRAPHE à l'analyse, et il ressort frère de la
	 * ligne à laquelle il appartient. Mesuré : 16 px quand les auteurs sont à 20.
	 *
	 * Sans ce jeton, régler la ligne d'auteurs aurait laissé « et 3 autres »
	 * derrière, en silence. Il n'est pas à l'écran : c'est un morceau de la
	 * phrase des auteurs, pas un élément qu'on règle à part.
	 */
	--livre-tout-voir-corps: var(--livre-auteurs-corps);
}

.livre .livre__titre-rubrique,
.rubriques-socle .livre__titre-rubrique,
.rubriques-socle .derniere-parution__surtitre {
	color: var(--text);
	font-family: var(--rubrique-famille);
	font-size: var(--rubrique-corps);
	font-weight: var(--rubrique-graisse);
	letter-spacing: var(--rubrique-interlettrage);
	line-height: var(--rubrique-interligne);
	margin: 0 0 var(--rubrique-intitule-ecart);
	text-transform: var(--rubrique-casse);
}

/*
 * L'ÉCART UNIQUE SOUS L'INTITULÉ (14 octobre). Un seul jeton,
 * `--rubrique-intitule-ecart`, entre l'intitulé et ce qui suit ; une liste de
 * vignettes qui suit directement un intitulé ne rajoute pas son remplissage
 * haut. Le lien « tout voir » n'est plus sous l'intitulé mais en pied de
 * rubrique (14 octobre au soir) : l'intitulé n'a qu'un cas.
 */
.livre .livre__titre-rubrique + .liste-entrees,
.rubriques-socle .livre__titre-rubrique + .liste-entrees {
	padding-block-start: 0;
}

/* Entre deux groupes d'une même bibliographie (« Ses livres », « Autres
   contributions »), l'écart des éléments : du bas réel de la rangée — la
   dernière ligne de vignette, le rail n'ayant pas de remplissage bas — à
   l'intitulé suivant, avec ou sans enveloppe de commandes (14 octobre). */
.rubrique--bibliographie .liste-entrees + .livre__titre-rubrique,
.rubrique--bibliographie .liste-entrees + .defilement__entete {
	margin-top: var(--fiche-ecart);
}

/*
 * LE TIRET EST UN PSEUDO-ÉLÉMENT, pas une balise. Le balisage de la session A
 * n'a pas à changer pour recevoir un dessin, et un thème enfant qui n'en veut
 * pas le retire d'une ligne.
 */

.livre .livre__titre-rubrique::before,
.rubriques-socle .livre__titre-rubrique::before {
	background: var(--accent);
	content: "";
	display: block;
	height: var(--rubrique-tiret-e);
	margin-bottom: calc(var(--rubrique-marge) * 0.6);
	width: var(--rubrique-tiret-l);
}

/*
 * « EN POCHE » S'ÉCRIT UN CRAN SOUS « AU CATALOGUE ».
 *
 * Les autres groupes distinguent des RÔLES et se répondent d'égal à égal ; le
 * poche découpe le premier par le FORMAT (§ 3.16). Un sous-ensemble au même
 * corps que son ensemble se lit comme une rubrique de même rang, et le lecteur
 * croit voir deux listes indépendantes là où il y en a une et sa subdivision.
 *
 * ELLE EST ÉCRITE ICI, JUSTE APRÈS LE CONTRAT QU'ELLE RECOUVRE. Les deux
 * sélecteurs ont la même spécificité — deux classes chacun —, et c'est donc
 * l'ORDRE qui tranche. Placée neuf cents lignes plus haut, comme elle l'était
 * d'abord, elle perdait en silence : le sous-titre gardait le corps du titre,
 * et aucune erreur ne le disait. *C'est la deuxième fois de la journée que ce
 * piège se referme — je l'avais écrit le matin même pour la revue de presse.*
 */

.livre .livre__titre-rubrique--sous,
.rubriques-socle .livre__titre-rubrique--sous {
	font-size: var(--font-size-3xs);
}

/* -------------------------------------------------------------------------
 * Zone haute — le bandeau clair
 *
 * LE BANDEAU COMMENCE AU FIL D'ARIANE, qui est rendu par `header.php` et sert
 * tous les gabarits. On ne le déplace pas — ce serait une exception payée
 * ailleurs : on lui donne le même fond, et les deux boîtes se rejoignent.
 *
 * LA BANDE FAIT LA LARGEUR DU CONTENEUR, pas celle de la fenêtre. Le fil
 * d'Ariane borne déjà sa boîte à `--content-width` et pose la gouttière en
 * padding ; la zone haute, elle, vit à l'intérieur de la gouttière. La marge
 * négative la ramène au même bord, le padding rend l'alignement du contenu.
 * ---------------------------------------------------------------------- */

/*
 * LE FIL D'ARIANE ENTRE DANS LE BANDEAU — recette du 26 août.
 *
 * Il portait déjà le fond du bandeau, mais `.livre` posait 36 px de padding
 * haut entre les deux : une bande blanche traversait l'aplat, et le fil se
 * lisait comme un élément d'avant la fiche. Mesuré — fil jusqu'à 167 px,
 * bandeau à partir de 203.
 *
 * LE FIL N'EST PAS DÉPLACÉ POUR AUTANT. Il est rendu par `header.php` et sert
 * tous les types de contenu ; c'est le retrait de la fiche qui cède, pas
 * l'en-tête commun.
 */
.single-catalogue .livre {
	padding-top: 0;
}

.single-catalogue .fil-ariane {
	background: var(--livre-bandeau-fond);
	padding-block: var(--livre-bandeau-haut) 0;
}

/*
 * LE BANDEAU EST PLEINE LARGEUR, D'UN SEUL APLAT AVEC LE FIL D'ARIANE —
 * décision de Phil du 13 octobre. Le bandeau vit dans la colonne de contenu ;
 * ses marges négatives le faisaient toucher les bords à 1 280 px et plus au-
 * delà, quand le fil d'Ariane, rendu hors de `<main>`, file toujours d'un bord
 * à l'autre. Le fond manquant est peint par un pseudo-élément absolu de la
 * hauteur du bandeau, dont l'ombre portée s'étale sur toute la largeur et se
 * coupe à sa hauteur : `clip-path` sur le pseudo-élément seul, qui n'a pas de
 * descendant à couper, et pas de `100vw`, donc aucun défilement horizontal.
 *
 * `.livre__haut` reçoit `position: relative` et `z-index: 0`, qui ne créent
 * PAS de contexte de formatage de bloc (§ 17.16) : la couverture flottante
 * continue de déborder sur le fond de page. Ils créent un contexte
 * d'empilement, où le pseudo-élément passe sous le contenu (`z-index: -1`) et
 * la couverture au-dessus ; le sous-menu de l'en-tête, dans le contexte de
 * l'en-tête (`--z-entete`), reste au-dessus de tout.
 */
.livre__haut {
	background: var(--livre-bandeau-fond);
	color: var(--text);
	margin-inline: calc(var(--gutter) * -1);
	padding-block: var(--livre-bandeau-haut) var(--livre-bandeau-bas);
	padding-inline: var(--gutter);
	position: relative;
	z-index: 0;
}

.livre__haut::before {
	box-shadow: 0 0 0 100vmax var(--livre-bandeau-fond);
	clip-path: inset(0 -100vmax);
	content: "";
	/* Un pixel plus haut que le bandeau, sous la bande du fil d'Ariane de la
	   même couleur : le bord du bandeau tombe parfois entre deux pixels et
	   l'ombre y laissait une ligne plus claire (vu sur Eurédit à 1 600). */
	inset: -1px 0 0;
	position: absolute;
	z-index: -1;
}

.livre__large {
	margin-top: var(--livre-zones-ecart);
}

/*
 * L'ÉCART EST UNE GOUTTIÈRE DE GRILLE, PAS UNE MARGE — et c'est la seconde fois
 * que ce piège se referme.
 *
 * Écrit en `> * + * { margin-top }`, il était mangé par la remise à plat
 * `.livre .rubrique { margin: 0 }`, plus spécifique : les blocs de la zone large
 * se touchaient, et le tiret d'accent de chacun venait souligner le « lire la
 * suite » du précédent. Exactement le défaut corrigé le matin sur la colonne,
 * reparu dès qu'une seconde zone a eu des rubriques.
 *
 * *Une remise à plat plus spécifique qu'une marge de frère la mangera toujours.
 * Une gouttière de grille, jamais.*
 */

.livre__large {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--fiche-ecart);
}

/* -------------------------------------------------------------------------
 * Colonne couverture
 * ---------------------------------------------------------------------- */

/*
 * L'OMBRE EST LE SEUL RELIEF DE LA PAGE, et elle remplace ici celle des
 * vignettes de liste. Aucun cadre : un filet autour d'une couverture qui en
 * porte souvent un imprimé ferait deux traits.
 */

.livre__couverture .couverture__image,
.livre__couverture .couverture__substitut {
	box-shadow: var(--shadow-couverture);
}

/*
 * LE SUBSTITUT PREND LE FOND DE LA PAGE, PAS CELUI DU BANDEAU. Partout ailleurs
 * il se pose en `--surface-alt` sur `--surface` : un aplat clair sur le fond
 * courant. Dans la zone haute, le bandeau EST `--surface-alt`, et le substitut
 * s'y dissolvait — vu sur Le Cadastre des vagues, où il ne restait qu'un titre
 * flottant sous un trait d'accent.
 *
 * Les deux rôles s'échangent : le rapport est le même, l'ordre est inversé.
 */

.livre__couverture .couverture__substitut {
	background: var(--surface);
}

.couverture-hd {
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
	margin: var(--space-s) 0 0;
}

.couverture-hd__mesure {
	color: var(--text-muted);
}

/* -------------------------------------------------------------------------
 * Titraille
 *
 * ORDRE DU README : collection, titre, sous-titre, rayon, contributeurs,
 * pastille. Chaque ligne se tait d'elle-même quand elle n'a rien à dire ; les
 * marges sont donc portées PAR LE HAUT de chaque élément, faute de quoi la
 * disparition d'une ligne laisserait derrière elle la marge de la précédente.
 *
 * SANS LIGNE DE RAYON EST LE CAS NORMAL : 1 216 fiches du fonds sur 1 598 —
 * 76 % — n'en ont pas. La titraille est dessinée dans cet état d'abord.
 * ---------------------------------------------------------------------- */

.livre__collection {
	color: var(--accent);
	font-family: var(--font-ui);
	font-size: var(--livre-collection-corps);
	font-weight: var(--livre-collection-graisse);
	letter-spacing: var(--livre-collection-interlettrage);
	line-height: var(--livre-collection-interligne);
	margin: 0 0 var(--space-2xs);
	text-transform: var(--livre-collection-casse);
}

.livre__titre {
	font-family: var(--font-editorial);
	font-size: var(--livre-titre-corps);
	font-weight: var(--livre-titre-graisse);
	letter-spacing: var(--livre-titre-interlettrage);
	line-height: var(--livre-titre-interligne);
	margin: 0;
	text-transform: var(--livre-titre-casse);
}

.livre__sous-titre {
	color: var(--text);
	font-family: var(--font-editorial);
	font-size: var(--livre-sous-titre-corps);
	font-style: italic;
	font-weight: var(--livre-sous-titre-graisse);
	letter-spacing: var(--livre-sous-titre-interlettrage);
	line-height: var(--livre-sous-titre-interligne);
	margin: var(--space-2xs) 0 0;
	text-transform: var(--livre-sous-titre-casse);
}

/*
 * LES TROIS NIVEAUX DE CONTRIBUTION, ET C'EST LEUR ÉCART QUI SE RÈGLE.
 *
 * Direction, auteurs, mentions de rôle : un éditeur de littérature les veut
 * hiérarchisés, un éditeur de sciences humaines veut ses traducteurs lisibles.
 * Les trois portent donc leur corps et leur graisse plutôt que d'hériter du
 * conteneur — la ligne de direction n'avait aucune déclaration et prenait ce
 * qui passait.
 *
 * Ces règles sont scopées à la titraille : les mêmes classes servent ailleurs,
 * sur les vignettes de liste, et n'ont pas à suivre le réglage d'une fiche.
 */

.livre__titraille .livre-contributeurs__directeur {
	font-size: var(--livre-direction-corps);
	font-weight: var(--livre-direction-graisse);
	letter-spacing: var(--livre-direction-interlettrage);
	line-height: var(--livre-direction-interligne);
	text-transform: var(--livre-direction-casse);
}

.livre__titraille .livre-contributeurs__auteurs {
	font-size: var(--livre-auteurs-corps);
	font-weight: var(--livre-auteurs-graisse);
	letter-spacing: var(--livre-auteurs-interlettrage);
	line-height: var(--livre-auteurs-interligne);
	text-transform: var(--livre-auteurs-casse);
}

.livre__titraille .livre-contributeurs__roles,
.livre__titraille .livre-contributeurs__complement {
	font-size: var(--livre-roles-corps);
	font-weight: var(--livre-roles-graisse);
	letter-spacing: var(--livre-roles-interlettrage);
	line-height: var(--livre-roles-interligne);
	text-transform: var(--livre-roles-casse);
}

.livre__titraille .livre-contributeurs__tout-voir {
	font-size: var(--livre-tout-voir-corps);
}

.livre__rayon {
	color: var(--text-muted);
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
	margin: var(--space-xs) 0 0;
}

.livre__rayon-lien {
	color: inherit;
}

.livre__titraille .livre-contributeurs {
	margin-top: var(--space-m);
}

/*
 * LA PASTILLE — avec la puce de disponibilité, le SEUL ARRONDI de la page.
 * Fond d'accent, texte accent : un aplat clair, jamais sombre.
 */

.livre__etat {
	background: var(--accent-soft);
	border-radius: var(--pastille-rayon);
	color: var(--accent);
	display: inline-block;
	font-family: var(--font-ui);
	font-size: var(--font-size-4xs);
	font-weight: 700;
	margin: var(--space-m) 0 0;
	padding: 5px 13px;
}

/* -------------------------------------------------------------------------
 * Fichiers joints et feuilletage
 * ---------------------------------------------------------------------- */

.livre__actions {
	margin-top: var(--space-l);
}

.fichiers__intitule {
	color: var(--text-muted);
	font-family: var(--font-ui);
	font-size: var(--font-size-4xs);
	margin: 0 0 var(--space-2xs);
}

/*
 * LES FICHIERS ONT DÉMÉNAGÉ DEUX FOIS LE 26 AOÛT — sous la couverture le matin,
 * dans la colonne de gauche le soir — et ces règles ont appris à ne plus
 * nommer d'emplacement.
 *
 * Écrites pour `.livre__actions`, elles étaient devenues muettes au premier
 * déplacement : le bloc reprenait le rendu de liste du socle, nom de fichier en
 * éditoriale et pictogramme rejeté derrière le texte. Vu à la capture, pas au
 * code. Réécrites pour `.livre__fichiers`, elles seraient redevenues muettes au
 * second.
 *
 * ELLES VISENT DONC LE BLOC LUI-MÊME. `.fichiers` est la liste des fichiers
 * joints où qu'elle se trouve, et c'est ce qu'elles décrivent. *Un sélecteur qui
 * nomme un emplacement se périme à chaque recomposition ; un sélecteur qui
 * nomme une chose, jamais.*
 */

.fichiers__entree {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3xs) var(--space-2xs);
	padding-block: var(--space-3xs);
}

.fichiers__lien {
	color: var(--accent);
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	font-weight: 600;
}

.fichiers__mesure {
	color: var(--text-muted);
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
}

/*
 * LE BOUTON DE FEUILLETAGE — un filet, pas un fond. L'inversion au survol est
 * la seule chose qui bouge de toute la page, et elle attend une action.
 */

.livre__actions .livre-annexe--feuilletage {
	margin-top: var(--space-m);
}

.livre__actions .feuilletage {
	margin: 0;
}

.livre__actions .feuilletage__lien {
	background: var(--accent-soft);
	color: var(--accent);
	display: inline-block;
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	font-weight: 600;
	padding: 11px 22px;
	text-decoration: none;
	transition: background-color var(--transition), color var(--transition);
}

.livre__actions .feuilletage__lien:hover,
.livre__actions .feuilletage__lien:focus-visible {
	background: var(--accent);
	color: var(--text-on-accent);
}

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

/* -------------------------------------------------------------------------
 * Caractéristiques — colonne droite de la zone haute
 *
 * LES CORPS ET LES COULEURS N'ONT PAS BOUGÉ LE 26 AOÛT, la composition seule a
 * changé : mention fine et grise pour les intitulés, corps de mention pour les
 * valeurs, corps de chapô pour le prix. Ce qui a disparu, c'est la
 * micro-étiquette en capitales au-dessus de sa valeur — l'intitulé est
 * redevenu un mot dans une phrase.
 * ---------------------------------------------------------------------- */

/*
 * L'INTITULÉ DE BLOC EST UNE LIGNE À LUI, SANS DEUX-POINTS. « Distinctions » et
 * « Autres informations » coiffent ce qui suit, ils ne l'introduisent pas.
 */

.livre-caracteristiques__intitule {
	color: var(--text);
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	line-height: var(--leading-snug);
	margin: 0 0 var(--space-3xs);
}

.livre-caracteristiques__ligne {
	color: var(--text);
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	line-height: var(--leading-snug);
}

/*
 * L'INTITULÉ EST GRIS, LA VALEUR EST NOIRE, et c'est tout ce qui les sépare.
 * Sur une même ligne, deux corps différents feraient boiter la ligne de base ;
 * la nuance de gris suffit à dire lequel des deux est la donnée.
 */

.livre-caracteristiques__etiquette,
.livre-caracteristiques__separateur {
	color: var(--text-muted);
}

/*
 * UN IDENTIFIANT NE SE REPLIE PAS AU MILIEU — arbitrage du 26 août, tenu par un
 * autre moyen. Les deux lignes étaient empilées pour que l'ISBN garde toute la
 * largeur ; l'intitulé en ligne leur rend la place, et il reste à garantir que
 * la coupure, si elle arrive, se fasse AVANT le nombre et jamais dedans.
 *
 * C'est la seule chose qu'un lecteur recopie caractère par caractère.
 */

.livre-caracteristiques__ligne[data-cle="isbn"] .livre-caracteristiques__valeur,
.livre-caracteristiques__ligne[data-cle="ean"] .livre-caracteristiques__valeur {
	white-space: nowrap;
}

/* Une distinction par ligne, en accent : ce sont des arguments, pas des données. */

.livre-caracteristiques__liste {
	color: var(--accent);
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	font-weight: 600;
	line-height: var(--leading-snug);
}

/* La phrase des autres informations : du texte, pas une valeur. */

.livre-caracteristiques__phrase {
	color: var(--text);
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	line-height: var(--leading-normal);
	margin: 0;
}

/* Le prix se lit d'un coup d'œil : c'est la seule valeur au corps du chapô. */

.livre-caracteristiques__ligne[data-cle="prix"] {
	font-size: var(--font-size-l);
	font-weight: 700;
}

/*
 * LA PUCE DE DISPONIBILITÉ — second et dernier arrondi de la page. Elle ne
 * porte aucune couleur sémantique nouvelle : un signal, pas un code. La
 * disponibilité a rejoint les lignes sans intitulé, à la place du prix qu'elle
 * remplace (§ 3.11) : la puce marque donc le début de la ligne.
 */

.livre-caracteristiques__ligne[data-cle="disponibilite"] .livre-caracteristiques__valeur::before {
	background: var(--accent);
	border-radius: var(--pastille-rayon);
	content: "";
	display: inline-block;
	height: var(--puce-taille);
	margin-inline-end: var(--space-3xs);
	width: var(--puce-taille);
}

/* -------------------------------------------------------------------------
 * Zone basse — l'annexe
 *
 * ÉCART SANS FILET entre les rubriques : le tiret d'accent marque déjà chaque
 * début, un trait de plus ferait redondance.
 * ---------------------------------------------------------------------- */

/*
 * L'ÉCART EST UNE GOUTTIÈRE DE GRILLE, PAS UNE MARGE — corrigé le 26 août.
 *
 * Écrit d'abord en `> * + * { margin-top }`, il était mangé par le
 * `.livre__colonne .rubrique { margin: 0 }` de la ligne suivante, plus
 * spécifique : les cinq rubriques se touchaient exactement, et le tiret
 * d'accent de chacune venait souligner le « tout voir » de la précédente.
 * Mesuré à 0 px entre les cinq blocs, vu à l'image avant d'être mesuré.
 *
 * Une gouttière de grille ne se laisse pas remettre à zéro par une règle de
 * marge : la remise à zéro des rubriques reste nécessaire — elles portent leur
 * propre encadré ailleurs — et les deux ne se contredisent plus.
 */

.livre__colonne {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--fiche-ecart);
}

/*
 * LA REMISE À PLAT VAUT POUR TOUTES LES RUBRIQUES DE LA FICHE, pas pour celles
 * d'une zone. `.rubrique` porte un filet haut et deux marges dans le socle ; la
 * fiche les retire, parce que le tiret d'accent marque déjà chaque début et
 * qu'un trait de plus ferait redondance.
 *
 * Scopée à la colonne, la règle laissait revenir le filet sur la revue de
 * presse et les vidéos dès qu'elles ont changé de zone. Vu à la capture.
 */
.livre .rubrique,
.rubriques-socle .rubrique {
	border: 0;
	margin: 0;
	padding: 0;
}

.livre .rubrique__tout-voir,
.rubriques-socle .rubrique__tout-voir {
	display: inline-block;
	font-size: var(--font-size-xs);
}

/* Les rencontres — la date en accent, le lieu en mention fine. */

.livre .liste-evenements__entree + .liste-evenements__entree,
.rubriques-socle .liste-evenements__entree + .liste-evenements__entree {
	margin-top: var(--space-s);
}

.livre .date-evenement,
.rubriques-socle .date-evenement {
	color: var(--accent);
	font-family: var(--font-ui);
	font-weight: 700;
}

.livre .liste-evenements__titre,
.rubriques-socle .liste-evenements__titre {
	font-weight: 600;
}

.livre .liste-evenements__lieu,
.rubriques-socle .liste-evenements__lieu {
	color: var(--text-muted);
	font-size: var(--font-size-xs);
}

/*
 * LES RENCONTRES PASSÉES SONT PLUS DISCRÈTES, PAS CACHÉES. Une rencontre qui a
 * eu lieu autour d'un livre est un fait éditorial permanent ; son étiquette est
 * une micro-étiquette sans tiret d'accent — c'est une partie du bloc
 * « Rencontres », pas un bloc voisin.
 */

.evenements-passes__intitule {
	color: var(--text-muted);
	font-family: var(--font-ui);
	font-size: var(--font-size-4xs);
	margin: var(--space-m) 0 var(--space-2xs);
}

.liste-evenements--compacte .liste-evenements__entree + .liste-evenements__entree {
	margin-top: var(--space-2xs);
}

.liste-evenements--compacte .liste-evenements__titre {
	font-size: var(--font-size-xs);
	font-weight: 400;
}

.liste-evenements--compacte .liste-evenements__lieu {
	font-size: var(--font-size-3xs);
}

/*
 * LE FILTRE PRESSE / AUTRES EST UN FILTRE, PAS UNE NAVIGATION — 26 août.
 *
 * Les avis gardent leurs onglets et leur `front.js` : rien n'est migré ici, le
 * mécanisme est intact. Mais le dessin du socle les rend en aplat d'accent, et
 * sur cette page l'aplat devenait la chose la plus forte de la colonne — plus
 * forte que le titre du livre.
 *
 * Il n'a pas non plus reçu le dessin de la barre d'onglets de la zone basse :
 * deux barres identiques côte à côte se seraient lues comme UNE navigation en
 * deux morceaux. Un filtre se dit autrement — l'actif en accent gras, les
 * autres en mention fine, sans boîte.
 */

.livre .rubrique--avis .onglets {
	gap: var(--space-s);
	margin-bottom: var(--space-s);
}

.livre .rubrique--avis .onglets__onglet {
	background: none;
	color: var(--text-muted);
	font-size: var(--font-size-xs);
	font-weight: 500;
	padding: 0;
}

.livre .rubrique--avis .onglets__onglet[aria-selected="true"] {
	background: none;
	color: var(--accent);
	font-weight: 700;
}

/* La revue de presse — la citation en éditoriale italique, la source en mention. */

.livre .avis {
	border: 0;
	padding: 0;
}

/*
 * PAS DE MARGE ENTRE DEUX AVIS : C'EST LA GOUTTIÈRE DU PANNEAU QUI LES SÉPARE.
 *
 * La règle qui vivait ici — `margin-top` sur `.avis + .avis` — avait été écrite
 * quand les avis s'empilaient dans une colonne. Le panneau est une grille et
 * porte déjà son écart ; la marge s'y ajoutait, invisible tant que la grille
 * n'avait qu'une colonne, et **elle est devenue un décalage dès qu'il y en a eu
 * trois** : les deuxième et troisième citations partaient 24 px plus bas que la
 * première, journaux et « lire la suite » désalignés.
 *
 * *Une marge de frère et une gouttière de conteneur font la même chose sur une
 * pile et deux choses différentes sur une grille. Quand le conteneur gagne une
 * gouttière, la marge de frère n'est plus redondante : elle est fausse.*
 */

.livre .avis__citation {
	color: var(--text);
	font-family: var(--font-editorial);
	font-size: var(--avis-citation-corps);
	font-style: italic;
	line-height: var(--avis-citation-interligne);
}

.livre .avis__signature {
	font-size: var(--font-size-xs);
}

/*
 * CES TROIS-LÀ NOMMENT LEUR ZONE, ET C'EST JUSTE : une vignette de 168 px et
 * une colonne unique sont des décisions de LARGEUR, pas de nature. Le bloc a
 * quitté la colonne pour la pleine largeur, où il reprend ses trois colonnes ;
 * ces règles ne le suivent pas, et ne doivent pas le suivre.
 */

/*
 * LES VIDÉOS ONT QUITTÉ LA COLONNE POUR LA PLEINE LARGEUR, et les deux règles
 * qui les mettaient en vignette de 168 px avec la légende à droite sont parties
 * avec elle : dans la zone large, le bloc reprend les trois colonnes du socle.
 *
 * *Elles nommaient une zone à bon droit — une vignette de 168 px est une
 * décision de largeur, pas de nature. C'est précisément pour cela qu'elles ne
 * suivent pas le bloc : ce qui dépend de la place ne se déménage pas.*
 */

.livre .lecteur__legende {
	font-size: var(--font-size-xs);
	line-height: var(--leading-snug);
	margin: 0;
}

.livre .lecteur__icone {
	font-size: var(--font-size-l);
}

/*
 * L'INTITULÉ RESTE VISIBLE ET SE BORNE À DEUX LIGNES. Le masquer aurait rendu
 * les 168 × 95 px du README au pixel près, mais une vignette sans légende — le
 * cas d'un média qui n'en porte pas — n'aurait plus rien donné à lire, et le
 * nom accessible du lien serait devenu la seule trace du titre.
 *
 * Deux lignes de corps minuscule tiennent dans le rapport 16/9 ; au-delà, la
 * boîte grandit plutôt que de couper un titre au milieu d'un mot.
 */

.livre .lecteur__intitule {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	font-size: var(--font-size-3xs);
	line-height: var(--leading-snug);
	overflow: hidden;
}

/*
 * LA NATURE PASSE EN COIN. Dans le flux, « Podcast » ajoutait ses 23 px à la
 * colonne et la vignette montait à 113 px au lieu des 95 du rapport 16/9. En
 * coin, elle reste lisible, distingue toujours un podcast d'une vidéo — c'est
 * ce que le titre du bloc promet — et rend le rapport à la boîte.
 */

.livre .lecteur__nature {
	font-size: var(--font-size-3xs);
	inset: var(--space-3xs) auto auto var(--space-3xs);
	position: absolute;
}

/* -------------------------------------------------------------------------
 * Zone basse — la barre d'onglets
 *
 * LE FILET DE L'ACTIF CHEVAUCHE CELUI DE LA BARRE. Les deux traits se
 * superposent d'un pixel : sans ce chevauchement, l'onglet actif paraîtrait
 * flotter au-dessus de sa propre ligne.
 * ---------------------------------------------------------------------- */

.livre-onglets--barre .onglets {
	gap: var(--onglets-ecart);
	margin-bottom: var(--space-m);
}

.livre-onglets--barre .onglets__onglet {
	background: none;
	border-bottom: var(--onglets-filet-actif) solid transparent;
	color: var(--text-muted);
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	font-weight: 500;
	margin-bottom: 0;
	padding: 0 0 var(--space-2xs);
}

.livre-onglets--barre .onglets__entree:nth-of-type(1):checked ~ .onglets .onglets__onglet:nth-child(1),
.livre-onglets--barre .onglets__entree:nth-of-type(2):checked ~ .onglets .onglets__onglet:nth-child(2),
.livre-onglets--barre .onglets__entree:nth-of-type(3):checked ~ .onglets .onglets__onglet:nth-child(3),
.livre-onglets--barre .onglets__entree:nth-of-type(4):checked ~ .onglets .onglets__onglet:nth-child(4),
.livre-onglets--barre .onglets__entree:nth-of-type(5):checked ~ .onglets .onglets__onglet:nth-child(5) {
	background: none;
	border-bottom-color: var(--accent);
	color: var(--text);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Panneaux, presse et médias — des blocs, pas des zones
 *
 * UN SÉLECTEUR QUI NOMME UNE ZONE SE PÉRIME À CHAQUE RECOMPOSITION. La fiche
 * livre a changé de découpage cinq fois le 26 août ; à chaque fois, des règles
 * écrites pour l'ancienne zone sont devenues muettes sans qu'aucune erreur ne
 * le signale, et le bloc a repris le rendu générique du socle. Le filtre de la
 * revue de presse a retrouvé son aplat d'accent deux fois de suite, le
 * sommaire a perdu ses filets, les fichiers joints leur pictogramme.
 *
 * CES RÈGLES SONT DONC SCOPÉES À `.livre`, la fiche entière, et non à la zone
 * où le bloc se trouve aujourd'hui. Elles décrivent une CHOSE — un avis, un
 * sommaire, un lecteur de média — et une chose ne change pas de nature en
 * changeant de colonne.
 *
 * L'EXCEPTION EST CE QUI DÉPEND VRAIMENT DE LA LARGEUR : la grille des vidéos
 * et la forme de leur vignette. Celles-là nomment la zone, parce que c'est la
 * zone qui les commande.
 *
 * *La règle du chapô a disparu d'ici : le texte de présentation n'a plus qu'un
 * seul corps, et la distinction avec elle.*
 * ---------------------------------------------------------------------- */

/*
 * LE TEXTE DE PRÉSENTATION N'A QU'UN CORPS — recette du 26 août au soir.
 *
 * Il en avait deux, et le second ne tombait pas où l'on croyait. La règle de
 * chapô visait `p:first-child`, et `.livre-apropos__texte` existe DEUX FOIS
 * dans le balisage : le fragment visible et sa suite repliée. Le premier
 * paragraphe de CHACUN passait donc en gros — celui du texte, et celui qui
 * apparaît au milieu quand on déplie. Les six autres restaient au corps
 * courant.
 *
 * Vu à la recette comme « le dernier paragraphe est plus petit » ; mesuré,
 * c'était l'inverse — deux paragraphes plus GRANDS que les six autres, et le
 * second au milieu du texte. *Un défaut se décrit par ce qu'on voit et se
 * corrige par ce qu'on mesure.*
 *
 * UN SEUL CORPS FERME LA QUESTION, et il ferme aussi la double sélection : il
 * n'y a plus de premier paragraphe à distinguer. Le texte de l'éditeur est
 * d'une seule voix — ce n'est pas un article avec son chapô, c'est une
 * présentation.
 *
 * LE CORPS RETENU EST CELUI DU CHAPÔ, non celui du courant : c'est ce que la
 * recette voyait comme « le reste », et descendre l'ensemble au corps courant
 * aurait mis toute la présentation à douze pixels.
 */

.livre__presentation .livre-apropos {
	font-size: var(--livre-presentation-corps);
	line-height: var(--leading-normal);
}

.livre__presentation .livre-apropos__texte {
	line-height: 1.65;
}

/* Le sommaire — titre à gauche, folio à droite, un filet par ligne. */

.livre .sommaire__entree {
	padding-block: var(--space-2xs);
}

/* -------------------------------------------------------------------------
 * Zone basse — les deux bibliographies
 * ---------------------------------------------------------------------- */

/*
 * LES DEUX COLONNES BASSES PARTENT DU MÊME BORD. `.livre-onglets` porte une
 * marge haute de 36 px pour les gabarits où il suit du texte ; premier enfant
 * de la colonne de contenu, elle décalait le panneau de 36 px sous l'annexe et
 * les deux tirets d'accent ne se répondaient plus. Vu sur Requiem.
 */

.livre__onglets > .livre-onglets:first-child,
.livre__onglets > .livre-onglets--seul:first-child {
	margin-top: 0;
}

/*
 * LA MARGE HAUTE EST PARTIE : la zone large porte désormais sa gouttière, et
 * cette marge s'y ajoutait au lieu de la remplacer — 84 px au lieu de 42 sous
 * les vidéos. Elle datait du temps où les bibliographies vivaient dans une
 * colonne sans gouttière.
 */

.livre .rubrique--biblio {
	border: 0;
	padding: 0;
}

.biblio-ligne {
	gap: var(--biblio-ecart);
}

/*
 * LE TITRE QUITTE L'ACCENT, et c'est un arbitrage de dessin, pas une reprise
 * du README — qui dit « titre en titraille » sans nommer de couleur.
 *
 * Dix titres d'affilée en accent faisaient des deux rangées le bloc le plus
 * coloré de la page basse, devant le titre du livre lui-même. Les listes de
 * l'annexe — rencontres, actualités, sélections — sont déjà des liens en
 * couleur de texte : la fiche a donc déjà ce vocabulaire, ces rangées le
 * rejoignent. Le lien « Tous les livres de… » garde l'accent, et la couverture
 * au-dessus reste cliquable.
 *
 * LE CORPS EST CELUI DE TOUTES LES VIGNETTES (26 octobre, 16h45, décision de
 * Phil, suivi § 2.110) : ces règles ne posent plus de corps ni d'interlignage
 * — elles en posaient de plus petits (`--font-size-s` et `-xs`), et la fiche
 * livre montrait ses titres nettement moins gros que la fiche auteur, où la
 * règle commune des vignettes (et celle d'une forme : 25 px en Affiche) vaut.
 * Le titre, la collection et l'année suivent désormais la vignette, partout.
 */

.biblio-ligne .livre-vignette__titre,
.biblio-ligne .livre-vignette__titre a {
	color: var(--text);
	font-family: var(--font-editorial);
}

.biblio-ligne .livre-vignette__collection {
	color: var(--text-muted);
	font-family: var(--font-ui);
}

/* -------------------------------------------------------------------------
 * Zone basse — l'extrait de biographie
 * ---------------------------------------------------------------------- */

.livre-biographie__texte {
	color: var(--text);
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	line-height: 1.7;
}

/* Le lien sous la biographie, à 24 px du texte (14 octobre au soir, suivi
   § 2.71) : l'écart de pied d'une rubrique, l'intérieur d'un élément. Une
   boîte flexible, comme `.rubrique__pied` : sa hauteur est celle du lien. */
.livre-biographie__suite {
	display: flex;
	font-size: var(--font-size-xs);
	margin: var(--rubrique-pied-ecart) 0 0;
}

/* La zone d'achat, sous le prix (31 octobre) : l'espacement seulement.
   Ni bordure, ni fond, ni couleur : chaque extension habille ses blocs, et le
   conteneur n'existe que si l'une d'elles a écrit. */
.livre__zone-achat {
	display: flex;
	flex-direction: column;
	gap: var(--zone-achat-ecart);
	margin: var(--zone-achat-ecart) 0 0;
}

/* L'écart entre deux blocs est le jeton, pas la marge de chacun. */
.livre__zone-achat > * {
	margin: 0;
}

/* Le bouton de commande, sous le prix (17 octobre). */
.livre-commande {
	margin: var(--space-s) 0 0;
}

/*
 * L'EXERGUE DE PRESSE — 30 octobre (maquette Rey, § 17.7). Sous les
 * contributeurs, il clôt le cartouche. Structure seulement : la citation, puis
 * le média et le signataire sur une ligne ; aucun filet.
 */
.livre__exergue {
	margin: var(--space-m) 0 0;
	max-width: var(--reading-width);
}

.livre__exergue-citation {
	margin: 0;
}

.livre__exergue-citation p {
	margin: 0;
}

.livre__exergue-source {
	display: flex;
	flex-wrap: wrap;
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	gap: 0 var(--space-xs);
	margin-top: var(--space-2xs);
}

.livre__exergue-signataire {
	color: var(--text-muted);
}

/*
 * LE BANDEAU DE COLLECTION — 30 octobre (maquette Rey, § 8.1). Sous la tête,
 * passé sous la couverture qui flotte ; la couleur de la collection en fond,
 * celle du texte calculée par le contraste (variables posées par le gabarit).
 */
.livre__bandeau-collection {
	align-items: center;
	background: var(--bandeau-collection-fond);
	clear: both;
	color: var(--bandeau-collection-texte);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-l);
	justify-content: space-between;
	margin: var(--space-l) 0;
	padding: var(--space-s) var(--space-m);
}

.livre__bandeau-collection p {
	margin: 0;
}

.livre__bandeau-collection a {
	color: inherit;
}

.livre__bandeau-collection-marque {
	font-family: var(--font-ui);
	font-weight: 600;
}

.livre__bandeau-collection-logo {
	display: block;
	height: 2rem;
	width: auto;
}

.livre__bandeau-collection-nom {
	font-family: var(--font-ui);
}

/*
 * PLUSIEURS CARTES DE BIOGRAPHIE — 17 octobre (maquette LLL, F3). En zone
 * large, une carte par contributeur : côte à côte au-dessus de 48 rem, dans
 * une grille qui en loge autant que la largeur permet à 20 rem au moins,
 * empilées en dessous. Chaque carte reprend le dessin de l'extrait seul — le
 * texte et le lien ci-dessus — et y ajoute le nom de la personne, en lien.
 * Une carte seule ne passe pas par ici (book/biographie.php).
 */
.livre-biographies {
	display: grid;
	gap: var(--space-l);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48rem) {
	.livre-biographies {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	}
}

.livre-biographie {
	min-width: 0;
}

.livre-biographie__nom {
	font-size: var(--font-size-l);
	margin: 0 0 var(--space-s);
}

.livre-biographie__nom a {
	color: inherit;
}

/*
 * DANS LA COLONNE DE GAUCHE (26 octobre, suivi § 2.99) : les mêmes cartouches,
 * empilés en une colonne, un surtitre à la place de l'intitulé de rubrique.
 */
.rubrique--biographies-colonne .livre-biographies {
	grid-template-columns: minmax(0, 1fr);
}

.livre-biographies__surtitre,
.livre-collection-cartouche__surtitre {
	color: var(--text-muted);
	font-family: var(--font-ui);
	font-size: var(--font-size-s);
	margin: 0 0 var(--space-s);
}

/*
 * LE CARTOUCHE DE LA COLLECTION — colonne annexe à défaut de tout le reste
 * (book/collection-cartouche.php). Rendu de base sur le fond secondaire ; la
 * forme le reprend. Les liens posés sur ce fond prennent la couleur du texte
 * (la couleur de lien des palettes y descend sous 4,5:1, suivi § 2.96).
 */
.livre .livre-collection-cartouche {
	background: var(--surface-alt);
	padding: var(--space-m);
}

.livre-collection-cartouche__surtitre {
	margin-bottom: var(--space-2xs);
}

.livre-collection-cartouche__nom {
	font-size: var(--font-size-xl);
	margin: 0 0 var(--space-s);
}

.livre-collection-cartouche a {
	color: var(--text);
}

.livre-collection-cartouche__texte {
	margin: 0 0 var(--space-s);
}

.livre-collection-cartouche__suite {
	font-family: var(--font-ui);
	margin: 0;
}

/*
 * LE BLOC ARGUMENT DANS LA TÊTE — 17 octobre. Il suit les contributeurs dans
 * la colonne du titre ; il prend la couleur de la tête de chaque direction,
 * sans règle de couleur ici.
 */
.livre__titraille .livre-argument {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	margin-top: var(--space-m);
}

.livre__titraille .livre-argument__accroche {
	font-size: var(--font-size-l);
	margin: 0;
}

.livre__titraille .livre-argument__texte > :first-child {
	margin-top: 0;
}

.livre__titraille .livre-argument__texte > :last-child {
	margin-bottom: 0;
}

/*
 * Les requêtes de la fiche en colonne (le conteneur `fiche` n'existe qu'en
 * disposition colonne, à 64 rem et plus). LES CARACTÉRISTIQUES PASSENT
 * TOUJOURS SOUS LA TITRAILLE ET LE BLOC ARGUMENT (17 octobre au soir, recette
 * de Phil ; sous 1 050 px de piste seulement, le matin) : la colonne du titre
 * prend toute la largeur à droite de la couverture. Sous 800 px, la largeur
 * de couverture se réduit à 40 % de la piste, entre 220 et 390 px — par son
 * jeton, que lisent aussi la colonne annexe et le retrait du bloc central.
 */
@container fiche (min-width: 0) {
	.livre__texte {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Même écart qu'en mobile : les caractéristiques sont dessous. */
	.livre__titraille .livre-argument {
		margin-block-end: var(--rubrique-marge);
	}

	.livre__mesures {
		grid-column: 1;
		grid-row: 2;
		text-align: start;
	}

	.livre__actions {
		grid-row: 3;
	}
}

@container fiche (max-width: 799.98px) {
	.livre__haut,
	.livre__colonne,
	.livre__centre,
	.livre__large {
		--cover-single-width: clamp(220px, 40cqi, 390px);
	}
}

/* -------------------------------------------------------------------------
 * Mobile — les mêmes décisions, resserrées
 * ---------------------------------------------------------------------- */

@media (max-width: 51.999rem) {
	:root {
		--onglets-ecart: 24px;
		--biblio-colonne: 100px;
		--biblio-ecart: 20px;
	}

	/*
	 * La couverture se centre et se réduit ; le bouton de feuilletage prend
	 * toute la largeur — c'est la seule action de la zone haute.
	 */
	.livre__couverture {
		text-align: center;
	}

	.livre__couverture .couverture {
		justify-content: center;
	}

	/*
	 * `display: block` NE SUFFIT PAS : `.feuilletage` est un conteneur flex, et
	 * un élément flex garde sa largeur de contenu quel que soit son display.
	 * Mesuré à 158 px sur 343 avant correction.
	 */
	.livre__actions .feuilletage__lien {
		display: block;
		flex: 1;
		text-align: center;
	}
}

/* =========================================================================
 * HABILLAGE — tri du gisement `ekdotis-minuit`, 9 octobre
 *
 * L'habillage validé par Phil sur la maquette Claude Design (2-5 août) vivait
 * dans le thème enfant de Minuit, inactif depuis le 19 août. Le tri du suivi
 * § 3.11 a classé ses règles : ce qui est une FORME que tout éditeur voudrait
 * monte ici, sur les jetons, jamais en dur ; ce qui est une VALEUR de Minuit
 * (navy, crème, Spectral, Archivo, corps) reste dehors — c'est le rôle des
 * palettes et des duos ; ce qui visait un sélecteur disparu depuis les
 * recompositions des 25-26 août ne monte pas. Règle de départage : quand le
 * gisement et une recomposition du parent se contredisent, le parent l'emporte.
 *
 * Aucune couleur littérale : l'aplat d'en-tête et de pied est `--accent`, ses
 * textes `--text-on-accent` et `--text-on-accent-muted` (rôle dérivé du
 * 9 octobre), la bande du fil d'Ariane et l'encadré éditorial `--surface-alt`.
 * Chaque couple texte/fond est mesuré sur les quatre palettes du registre.
 * ====================================================================== */

/* -------------------------------------------------------------------------
 * En-tête — aplat d'accent (CDC § 17.9)
 *
 * `.bandeau-site` reste collant et compact au défilement ; seul son fond
 * change. La marque passe en famille éditoriale (arbitrage D1). Les liens de
 * menu sont un cran sous la marque, et remontent au survol.
 * ---------------------------------------------------------------------- */

.bandeau-site {
	background: var(--accent);
	/* Le filet bas de l'en-tête, pour tous les sites et toutes les directions. */
	border-bottom: var(--border-width) solid var(--entete-filet);
	color: var(--text-on-accent);
}

.bandeau-site__marque {
	color: var(--text-on-accent);
	font-family: var(--font-body);
}

/* Un cran sous la marque : les entrées, le chevron, la loupe, les pictogrammes,
   en texte-sur-accent atténué (rôle dérivé, 4,5:1 garanti) ; pleins au
   survol, au focus, sur la page courante, et quand ils sont actifs. */
.navigation__liste > .navigation__entree > a,
.navigation__porteur,
.navigation__deplier,
.bandeau-site__loupe,
.bandeau-site .reseaux__lien {
	color: var(--text-on-accent-muted);
}

.bandeau-site__marque a,
.bandeau-site__marque a:hover,
.bandeau-site__marque a:focus-visible,
.navigation__liste > .navigation__entree > a:hover,
.navigation__liste > .navigation__entree > a:focus-visible,
.navigation__liste > .navigation__entree > a[aria-current="page"],
.navigation__porteur:hover,
.navigation__porteur:focus-visible,
.navigation__entree--a-panneau:hover > .navigation__deplier,
.navigation__entree:focus-within > .navigation__deplier,
.navigation__entree.est-ouvert > .navigation__deplier,
.bandeau-site__loupe:hover,
.bandeau-site__loupe:focus-visible,
.bandeau-site .reseaux__lien:hover,
.bandeau-site .reseaux__lien:focus-visible,
.bandeau-site__bascule {
	color: var(--text-on-accent);
}

.bandeau-site .reseaux__lien {
	border-color: transparent;
}

/* Le focus se voit sur l'aplat : anneau en texte-sur-accent, pas en accent. */
.bandeau-site__loupe:focus-visible,
.bandeau-site .reseaux__lien:focus-visible,
.bandeau-site__bascule:focus-visible,
.navigation__deplier:focus-visible {
	outline: 2px solid var(--text-on-accent);
	outline-offset: 2px;
}

/* Le champ de recherche, sur fond de page, encre du texte, sa loupe en encre
   atténuée (§ 17.9 — la recherche est accessible d'un geste, encore faut-il
   la voir). Au focus, un contour de 2 px à l'accent du site, décalé
   (13 octobre ; c'était l'anneau en texte-sur-accent de l'aplat). */
.recherche__champ {
	background: var(--surface);
	color: var(--text);
}

/* L'invite « Rechercher » en encre atténuée : le gris du navigateur faisait
   4,2:1 sur le champ de Classique, 4,4 sur celui de Visuelle (26 octobre,
   suivi § 2.98). */
.recherche__champ::placeholder {
	color: var(--text-muted);
	opacity: 1;
}

.recherche__champ:focus-visible {
	outline: 2px solid var(--recherche-focus);
	outline-offset: 2px;
}

.recherche__bouton {
	color: var(--text-muted);
}

.recherche__bouton:hover,
.recherche__bouton:focus-visible {
	color: var(--text);
}

.recherche__bouton:focus-visible {
	outline: 2px solid var(--recherche-focus);
	outline-offset: -2px;
}

/* Le sous-menu des collections et le menu mobile plein écran sont des
   PANNEAUX sur fond de page : leurs liens reprennent la couleur de lien,
   leur texte l'encre. Sans ces règles, le texte atténué sur accent
   s'écrirait sur du blanc. */
.sous-menu,
.a-menu-ouvert .navigation {
	color: var(--text);
}

.sous-menu a,
.a-menu-ouvert .navigation__liste > .navigation__entree > a,
.a-menu-ouvert .navigation__porteur,
.a-menu-ouvert .navigation__deplier,
.a-menu-ouvert .navigation__entree.est-ouvert > .navigation__deplier,
.navigation__reseaux .reseaux__lien {
	color: var(--link);
}

.navigation__reseaux .reseaux__lien {
	border-color: var(--border);
}

.navigation__reseaux-titre {
	color: var(--text-faint);
}

.a-menu-ouvert .navigation__deplier:focus-visible,
.a-menu-ouvert .navigation__liste > .navigation__entree > a:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Fil d'Ariane — une bande, une couleur (arbitrage D2)
 *
 * L'enveloppe `.fil-ariane-bande` porte la largeur de la fenêtre : l'aplat
 * file d'un bord à l'autre. `--surface-alt` partout, fiche livre comprise,
 * où il prolonge le bandeau haut de la fiche. Le texte du chemin parcouru
 * est atténué ; ses liens ne prennent pas la couleur de lien.
 * ---------------------------------------------------------------------- */

.fil-ariane-bande {
	background: var(--surface-alt);
}

/* Sur la fiche livre, la bande du fil d'Ariane est celle du bandeau (jeton). */
.single-catalogue .fil-ariane-bande {
	background: var(--livre-bandeau-fond);
}

.fil-ariane {
	color: var(--text-muted);
}

.fil-ariane a {
	color: inherit;
}

/* -------------------------------------------------------------------------
 * Pied de page — aplat d'accent (CDC § 17.10)
 *
 * Les colonnes sont celles du parent. La marque et les intitulés de colonne
 * en texte sur accent, le reste un cran dessous ; les liens remontent au
 * survol. Les filets des notes et les pastilles de réseaux reprennent le
 * texte atténué : un filet gris de page sur l'accent ne se verrait pas.
 * ---------------------------------------------------------------------- */

.pied-site {
	background: var(--accent);
	border-top-width: 0;
	color: var(--text-on-accent-muted);
}

.pied-site__marque,
.pied-site__colonne > nav,
.pied-site__colonne[aria-label] {
	color: var(--text-on-accent);
}

.pied-site a {
	color: var(--text-on-accent-muted);
}

.pied-site a:hover,
.pied-site a:focus-visible {
	color: var(--text-on-accent);
}

.pied-site__credit-fonte {
	color: var(--text-on-accent-muted);
}

.pied-site .reseaux__lien {
	border-color: var(--text-on-accent-muted);
	color: var(--text-on-accent-muted);
}

.pied-site .reseaux__lien:hover,
.pied-site .reseaux__lien:focus-visible {
	border-color: var(--text-on-accent);
	color: var(--text-on-accent);
}

/* -------------------------------------------------------------------------
 * Composants — formes retenues pour tous
 * ---------------------------------------------------------------------- */

/* Bouton sans rayon (arbitrage D4). */
.bouton {
	border-radius: 0;
}

/* Sécurité : un encadré sans contenu ne se voit pas (le gabarit ne le rend
   plus depuis le 13 octobre, § 2.5). */
.encadre-editorial:not(:has(*)) {
	display: none;
}

/* L'encadré éditorial de la fiche auteur — troisième surface du système,
   après la page et le fond secondaire des aplats. Il n'avait aucune règle. */
.encadre-editorial {
	background: var(--surface-alt);
	padding: var(--space-m) var(--space-l);
}

/* Les étiquettes en bas de casse, capitale initiale seule (CDC § 17.18) :
   « Autres informations » et le nom du média d'un avis (arbitrages D9, D10). */
.livre-details__autres-titre,
.avis__source {
	letter-spacing: 0;
	text-transform: none;
}

/* Coupe des lignes sans orpheline, là où un titre ou une prose se lit. */
.livre__titre,
.livre-apropos__chapo,
.livre-apropos__texte p,
.auteur__biographie-texte p {
	text-wrap: pretty;
}

/* Dans la fiche livre, le titre de vignette garde sa couleur de liste et le
   bouton son texte sur accent : compagnons de la couleur de lien générale. */
.livre .livre-vignette__titre {
	color: var(--list-title-color);
}

.livre .bouton,
.livre .bouton:hover {
	color: var(--text-on-accent);
}

/* -------------------------------------------------------------------------
 * Fiche auteur — § 4
 *
 * Le nom au corps du titre de livre (arbitrage D14) : il héritait du corps des
 * titres de rubrique, et le nom de la personne dont on lit la fiche était
 * aussi gros que les intertitres de sa propre page. Le surtitre de la mise en
 * avant n'avait aucune règle ; le titre de la mise en avant prend le cran du
 * sous-titre de livre (arbitrage D15).
 * ---------------------------------------------------------------------- */

.auteur__nom {
	font-size: var(--font-size-3xl);
	font-weight: 600;
	line-height: var(--leading-tight);
}

/* Le surtitre de la mise en avant (« Dernière parution ») est un intitulé de
   rubrique comme « Au catalogue » (14 octobre) : il lit les jetons --rubrique-*
   dans la règle commune, plus haut. */

.derniere-parution__titre {
	font-family: var(--font-body);
	font-size: var(--font-size-xl);
	font-weight: 600;
	line-height: var(--leading-snug);
}

/* -------------------------------------------------------------------------
 * Fiche auteur — la carte de la dernière parution (29 octobre, décision de
 * Phil, CORRECTIONS point 57 ; suivi § 2.117)
 *
 * Le bloc « Dernière parution » a disparu ; le premier livre paru de « Ses
 * livres » est rendu en carte (`.livre-vignette--carte`) : fond d'accent,
 * rayon 16 px, tout le texte en texte sur accent — aucun atténué, le rapport
 * texte sur accent étant celui que le registre des palettes contrôle. Le prix
 * en gras, l'étiquette en pilule inversée (accent sur texte sur accent, même
 * rapport). La carte déborde de son remplissage par une marge négative : sa
 * couverture reste sur la ligne des autres.
 *
 * Dans la bibliographie, les couvertures s'alignent en haut, sans hauteur
 * réservée : chaque légende suit sa couverture.
 * ---------------------------------------------------------------------- */
.rubrique--bibliographie .liste-entrees {
	align-items: start;
}

.rubrique--bibliographie .couverture {
	align-items: flex-start;
	height: auto;
	justify-content: flex-start;
}

.rubrique--bibliographie .livre-vignette .couverture__image {
	object-position: left top;
}

/* Le débord de la carte : son remplissage, rendu par une marge négative.
   16 px, 8 px sous 48 rem — la gouttière de page y fait 16 px, et la carte
   collait au bord de l'écran. La rangée lit la même valeur pour lui faire
   place (plus bas). */
.rubrique--bibliographie {
	--carte-debord: var(--space-s);
}

@media (max-width: 47.99rem) {
	.rubrique--bibliographie {
		--carte-debord: var(--space-2xs);
	}
}

.livre-vignette--carte {
	background: var(--accent);
	border-radius: 16px;
	color: var(--text-on-accent);
	/* À droite, pas de marge négative : la première colonne de la rangée est
	   plus large du débord (plus bas), et c'est elle qui lui fait place. */
	margin: calc(-1 * var(--carte-debord, var(--space-s))) 0 calc(-1 * var(--carte-debord, var(--space-s))) calc(-1 * var(--carte-debord, var(--space-s)));
	padding: var(--carte-debord, var(--space-s));
}

.livre-vignette--carte a,
.livre-vignette--carte .livre-vignette__titre,
.livre-vignette--carte p,
.livre-vignette--carte .livre-vignette__roles,
.livre-vignette--carte .livre-vignette__separateur,
.livre-vignette--carte .livre-contributeurs__separateur,
.livre-vignette--carte .livre-contributeurs__mention {
	color: var(--text-on-accent);
}

.livre-vignette--carte :focus-visible {
	outline-color: var(--text-on-accent);
}

.livre-vignette__prix {
	font-family: var(--font-ui);
	font-size: var(--font-size-m);
	font-weight: 700;
	margin: var(--space-2xs) 0 0;
}

.livre-vignette--carte .livre-vignette__etiquette {
	align-self: flex-start;
	background: var(--text-on-accent);
	border-radius: 999px;
	color: var(--accent);
	font-family: var(--font-ui);
	font-size: var(--font-size-xs);
	font-weight: 700;
	line-height: var(--leading-snug);
	margin: var(--space-xs) 0 0;
	max-width: 100%;
	padding: 0.2em 0.75em;
	white-space: nowrap;
}

/*
 * LA RANGÉE FAIT PLACE À LA CARTE (30 octobre, décision de Phil). Toutes les
 * couvertures gardent la même largeur, celle de la carte comprise ; la carte
 * déborde sur la gouttière, et la rangée lui rend ce débord : sa PREMIÈRE
 * COLONNE est plus large de `--carte-debord`, les autres gardent la largeur
 * commune, `(100 % − gouttières − débord) / n`. Les colonnes restent alignées
 * d'une ligne à l'autre ; la vignette qui tombe en première colonne sur une
 * ligne suivante se tient à la largeur commune (`:nth-child`, au pas de la
 * grille : 6, 4 sous 64 rem, 2 sous 40 rem). Le rail, une seule ligne, n'a
 * que sa première colonne à élargir, et s'ouvre à gauche pour montrer le
 * débord que sa boîte défilante couperait.
 */
.rubrique--bibliographie .liste-entrees--grille:has(> .livre-vignette--carte) {
	--carte-piste: calc((100% - 5 * var(--space-m) - var(--carte-debord)) / 6);
	column-gap: var(--space-m);
	grid-template-columns: calc(var(--carte-piste) + var(--carte-debord)) repeat(5, var(--carte-piste));
}

.rubrique--bibliographie .liste-entrees--grille:has(> .livre-vignette--carte) > :nth-child(6n + 1):not(.livre-vignette--carte) {
	width: calc(100% - var(--carte-debord));
}

@media (max-width: 64rem) {
	.rubrique--bibliographie .liste-entrees--grille:has(> .livre-vignette--carte) {
		--carte-piste: calc((100% - 3 * var(--space-m) - var(--carte-debord)) / 4);
		grid-template-columns: calc(var(--carte-piste) + var(--carte-debord)) repeat(3, var(--carte-piste));
	}

	.rubrique--bibliographie .liste-entrees--grille:has(> .livre-vignette--carte) > :nth-child(6n + 1):not(.livre-vignette--carte) {
		width: auto;
	}

	.rubrique--bibliographie .liste-entrees--grille:has(> .livre-vignette--carte) > :nth-child(4n + 1):not(.livre-vignette--carte) {
		width: calc(100% - var(--carte-debord));
	}
}

@media (max-width: 40rem) {
	.rubrique--bibliographie .liste-entrees--grille:has(> .livre-vignette--carte) {
		--carte-piste: calc((100% - var(--space-m) - var(--carte-debord)) / 2);
		grid-template-columns: calc(var(--carte-piste) + var(--carte-debord)) var(--carte-piste);
	}

	.rubrique--bibliographie .liste-entrees--grille:has(> .livre-vignette--carte) > :nth-child(4n + 1):not(.livre-vignette--carte) {
		width: auto;
	}

	.rubrique--bibliographie .liste-entrees--grille:has(> .livre-vignette--carte) > :nth-child(2n + 1):not(.livre-vignette--carte) {
		width: calc(100% - var(--carte-debord));
	}
}

.rubrique--bibliographie .liste-entrees--defilante:has(> .livre-vignette--carte) {
	grid-template-columns: calc((100% - 5 * var(--space-m)) / 5.5 + var(--carte-debord));
	margin-inline-start: calc(-1 * var(--carte-debord));
	padding-inline-start: var(--carte-debord);
	scroll-padding-inline-start: var(--carte-debord);
}

/* Les mêmes seuils que les colonnes du rail (5,5, puis 3,5, puis 1,7
   vignettes visibles, plus haut). */
@media (max-width: 64rem) {
	.rubrique--bibliographie .liste-entrees--defilante:has(> .livre-vignette--carte) {
		grid-template-columns: calc((100% - 3 * var(--space-m)) / 3.5 + var(--carte-debord));
	}
}

@media (max-width: 40rem) {
	.rubrique--bibliographie .liste-entrees--defilante:has(> .livre-vignette--carte) {
		grid-template-columns: calc((100% - var(--space-m)) / 1.7 + var(--carte-debord));
	}
}

/* Le sous-titre d'un titre homonyme, juste sous le titre (29 octobre,
   `ekdotis_titre_homonyme()`). */
.livre-vignette__sous-titre,
.livre-tuile__sous-titre,
.catalogue-tuile__sous-titre {
	color: var(--text-muted);
	font-family: var(--font-body);
	font-size: var(--font-size-s);
	line-height: var(--leading-snug);
	margin: 0;
}