/*
Theme Name: Trinational Bookclub
Theme URI: https://trinational-bookclub.com
Author: Adnan
Description: Thème sur mesure du Trinational Bookclub.
Version: 0.1.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
Text Domain: trinational-bookclub
*/

/* =========================================================================
   CE FICHIER NE CONTIENT QUE CE QUE theme.json NE SAIT PAS EXPRIMER.

   Il est chargé par la fonction tbc_feuille_de_style() de functions.php.
   Sans cet appel, WordPress ne le lit pas et rien de ce qui suit ne
   s'applique.

   Règle absolue : aucune valeur en dur. Toujours une variable de préréglage,
   var(--wp--preset--color--encre-800) et jamais #243B32. Sinon un changement
   de palette laisse derrière lui des orphelins introuvables.

   Les seules exceptions tolérées sont les valeurs qui ne décrivent rien du
   design : 0, 1px de filet, et les hauteurs imposées par un wireframe.
   ========================================================================= */


/* =========================================================================
   1. L'EN-TÊTE
   ========================================================================= */

/*
 * La barre reste collée en haut pendant le défilement.
 *
 * « sticky » veut dire : l'élément se comporte normalement jusqu'à ce qu'il
 * atteigne la position indiquée par « top », puis il s'y fige. C'est ce qui
 * le différencie de « fixed », qui le sort du flux dès le départ et laisse
 * un trou à sa place.
 *
 * z-index décide qui passe devant qui quand deux éléments se superposent.
 * 100 place l'en-tête au-dessus du contenu ordinaire et bien en dessous des
 * fenêtres de dialogue de WordPress, qui montent beaucoup plus haut.
 */
.tbc-entete {
	position: sticky;
	top: 0;
	z-index: 100;

	/*
	 * LE FILET N'APPARAÎT QU'UNE FOIS L'EN-TÊTE DÉTACHÉ DU HAUT.
	 *
	 * Un trait permanent sous l'en-tête découpe la page en deux avant même
	 * qu'on ait commencé à lire. Il n'a de raison d'être qu'au moment où
	 * l'en-tête se met à flotter au-dessus du contenu : là, il dit où finit
	 * la barre et où commence la page.
	 *
	 * On le déclare donc transparent et on ne lui donne sa couleur qu'à
	 * l'état posé. Déclarer la bordure dès maintenant, plutôt que de
	 * l'ajouter plus tard, évite que la page ne saute d'un pixel au premier
	 * défilement : la place est réservée dès le départ.
	 */
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}

body.entete-posee .tbc-entete {
	border-bottom-color: var(--wp--preset--color--filet-fin);
}

/*
 * LE VOILE FLOUTÉ, ET POURQUOI IL EST SUR UN PSEUDO-ÉLÉMENT.
 *
 * Ce bloc mérite d'être lu, parce qu'il corrige un vrai piège de CSS et que
 * tu le recroiseras.
 *
 * backdrop-filter floute ce qui passe DERRIÈRE l'élément, donc le texte de
 * la page pendant qu'il défile. La couleur « voile-papier » étant
 * semi-transparente, sans ce flou on obtiendrait une bouillie illisible.
 *
 * Le piège : un élément qui porte backdrop-filter, filter, transform ou
 * perspective devient le « bloc conteneur » de tous ses descendants en
 * position fixed. Autrement dit, un enfant en position: fixed cesse de se
 * caler sur la fenêtre du navigateur et se cale sur lui.
 *
 * Or le panneau de menu mobile de WordPress est en position: fixed et compte
 * précisément là-dessus pour occuper tout l'écran. Placé sur l'en-tête, le
 * backdrop-filter l'enfermait dans une barre de 48 px de haut, avec un
 * défilement interne. C'était exactement le symptôme observé.
 *
 * La parade : porter le flou sur un pseudo-élément ::before qui couvre
 * l'en-tête. Le pseudo-élément n'a aucun descendant, il n'emprisonne donc
 * personne. Le voile est identique à l'œil.
 *
 * inset: 0 est le raccourci de top/right/bottom/left à zéro : le pseudo
 * s'étire sur toute la surface de son parent. z-index: -1 le place derrière
 * le contenu de l'en-tête, sans pouvoir passer derrière l'en-tête lui-même.
 * La ligne -webkit- sert aux Safari un peu anciens.
 */
.tbc-entete::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--wp--preset--color--voile-papier);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);

	/*
	 * EN HAUT DE PAGE, LE VOILE N'EXISTE PAS.
	 *
	 * L'en-tête portait en permanence un fond légèrement différent de celui
	 * de la page : une bande claire posée sur du papier, avec une couture
	 * visible entre les deux. Tant que rien ne défile dessous, ce fond ne
	 * sert à rien — il n'y a rien à masquer.
	 *
	 * Le voile apparaît donc au moment où il devient utile, quand du contenu
	 * commence à passer derrière. La transition évite le clignotement : sans
	 * elle, le fond apparaîtrait d'un coup au premier pixel parcouru.
	 */
	opacity: 0;
	transition: opacity 0.2s ease;
}

body.entete-posee .tbc-entete::before {
	opacity: 1;
}

/*
 * Quand tu es connecté, WordPress affiche sa barre noire d'administration en
 * haut de l'écran. Sur grand écran elle est fixe, et un en-tête collé à 0
 * passerait dessous. On le décale de sa hauteur, 32 px.
 *
 * Sur mobile cette barre défile avec la page, le décalage n'a donc pas lieu
 * d'être. Tes visiteurs, eux, ne la voient jamais : la classe « admin-bar »
 * n'existe alors pas sur la page.
 */
@media (min-width: 783px) {
	.admin-bar .tbc-entete {
		top: 32px;
	}
}

/*
 * LA HAUTEUR DE L'EN-TÊTE.
 *
 * 48 et 64 px venaient des wireframes, qui supposaient un nom de club en
 * petits caractères. Avec la marque à sa nouvelle taille, la barre paraissait
 * étriquée : le contenu remplissait toute la hauteur disponible, sans air
 * au-dessus ni en dessous, ce qui donne cette impression de bandeau écrasé.
 *
 * 64 et 88 px laissent respirer le signe et le nom. Le min-height ne force
 * rien : si le contenu est plus haut, la barre grandit.
 */
.tbc-entete__ligne {
	min-height: var(--tbc-entete-hauteur, 64px);
}

/*
 * LA HAUTEUR N'EST PLUS ÉCRITE QU'UNE FOIS, et voici ce que ça a coûté de
 * l'apprendre.
 *
 * Le chiffre vivait à deux endroits : ici, en dur, et dans la variable
 * --tbc-entete-hauteur (section 23) dont se servent les bandeaux pour passer
 * DERRIÈRE la barre sans perdre de hauteur. En agrandissant la barre, j'ai
 * changé le premier et oublié le second : les bandeaux ont continué de
 * remonter de 64 px alors que la barre en faisait 88. Les 24 px de différence
 * ont été mangés par le menu, en haut de chaque image.
 *
 * La règle vaut au-delà du CSS : quand une même mesure est écrite à deux
 * endroits, ce n'est pas une duplication, c'est un bogue en attente. Ici la
 * barre LIT la variable ; il n'y a plus qu'un chiffre à changer.
 */

/*
 * Les liens de navigation ne sont pas soulignés, contrairement aux liens
 * dans le texte courant.
 *
 * Ce n'est pas une incohérence. Le soulignement sert à distinguer un lien du
 * texte qui l'entoure. Dans un menu, il n'y a pas de texte autour : tout est
 * cliquable, et la position suffit à le dire. Il revient au survol et au
 * focus clavier, là où il signale une cible active.
 */
.tbc-entete a {
	text-decoration: none;
}

.tbc-entete a:hover,
.tbc-entete a:focus-visible {
	text-decoration: underline;
}

/*
 * La page courante, soulignée en noyer.
 *
 * WordPress ajoute tout seul la classe « current-menu-item » à l'entrée qui
 * correspond à la page affichée. On n'a rien à gérer, seulement à la styler.
 */
.tbc-nav .current-menu-item > a,
.tbc-nav .current_page_item > a,
.tbc-nav .current-menu-item > a:hover {
	border-bottom: 2px solid var(--wp--preset--color--noyer-600);
	padding-bottom: 3px;
	color: var(--wp--preset--color--encre-900);
	text-decoration: none;
}


/* =========================================================================
   2. LA RECHERCHE DANS L'EN-TÊTE
   ========================================================================= */

/*
 * UN CHAMP OUVERT, ET PLUS UNE LOUPE À DÉPLIER.
 *
 * La version précédente n'affichait qu'une icône : le champ ne sortait qu'au
 * clic. C'est compact, mais ça demande de savoir que la loupe cache un champ,
 * et ça coûte un geste avant de pouvoir taper.
 *
 * Le champ est maintenant visible d'emblée, sur les deux tailles d'écran. La
 * loupe passe à l'intérieur, à droite, et sert de bouton d'envoi.
 *
 * L'enveloppe porte la bordure et le fond ; le champ lui-même n'a plus ni
 * l'un ni l'autre, sinon on verrait deux cadres imbriqués.
 */
.tbc-entete .wp-block-search__inside-wrapper {
	background-color: var(--wp--preset--color--papier-0);
	border: 1px solid var(--wp--preset--color--papier-4);
	border-radius: 3px;
	padding: 2px 4px 2px var(--wp--preset--spacing--espace-15);
}

.tbc-entete .wp-block-search__input {
	background-color: transparent;
	border: 0;
	padding: 6px 0;
	min-width: 0;
	font-size: var(--wp--preset--font-size--corps-sm);
	color: var(--wp--preset--color--encre-800);
}

/*
 * Le contour de focus se pose sur l'enveloppe, pas sur le champ. Sinon
 * l'anneau se dessine à l'intérieur du cadre et devient illisible.
 */
.tbc-entete .wp-block-search__input:focus {
	outline: none;
}

.tbc-entete .wp-block-search__inside-wrapper:focus-within {
	outline: 2px solid var(--wp--preset--color--port-500);
	outline-offset: 2px;
}

/*
 * Le bouton hérite du style de bouton de theme.json : fond encre 800, angles
 * arrondis, 11 px de retrait. À l'intérieur d'un champ, ça donne un pavé vert
 * qui mange la moitié de la largeur. On ne garde que le glyphe.
 */
.tbc-entete .wp-block-search__button {
	background-color: transparent;
	color: var(--wp--preset--color--encre-600);
	border: 0;
	padding: 0 4px;
	min-width: 0;
	box-shadow: none;
}

.tbc-entete .wp-block-search__button:hover,
.tbc-entete .wp-block-search__button:focus {
	background-color: transparent;
	color: var(--wp--preset--color--port-700);
}

.tbc-entete .wp-block-search__button svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/*
 * Sur grand écran, le champ se place APRÈS les quatre entrées et prend une
 * largeur fixe. Sans elle, il s'étirerait sur tout l'espace disponible et
 * déséquilibrerait la barre.
 *
 * « order: 1 » le fait passer après tous ses voisins, qui valent 0 par
 * défaut. C'est une propriété des conteneurs flex, et elle ne touche ni à
 * l'ordre du code ni à l'ordre de tabulation au clavier.
 */
@media (min-width: 601px) {
	.tbc-nav .wp-block-navigation__container > li:has(.wp-block-search),
	.tbc-nav .wp-block-navigation__container > .wp-block-search {
		order: 1;
	}

	.tbc-entete .wp-block-search {
		width: 200px;
	}
}

/* Dans le panneau mobile, le champ occupe toute la largeur. */
.tbc-entete .is-menu-open .wp-block-search {
	width: 100%;
}


/*
 * LE SEUIL DE BASCULE DU MENU.
 *
 * LE DÉFAUT DE WORDPRESS, ET POURQUOI IL NE SUFFIT PAS ICI.
 *
 * Le bloc Navigation replie ses entrées derrière un bouton en dessous de
 * 600 px. Ce seuil est écrit dans le CSS du cœur de WordPress, pas dans un
 * réglage du bloc : « overlayMenu: mobile » choisit le comportement, jamais
 * la largeur à laquelle il se déclenche.
 *
 * Notre barre porte le nom du club, un champ de recherche de 200 px, cinq
 * entrées fixes et jusqu'à trois entrées dynamiques. Mesurée, elle réclame
 * environ 1 060 px. Entre 600 et 1 100 px, elle ne tient donc pas — et comme
 * la rangée est en « nowrap », rien ne passe à la ligne : la barre déborde,
 * et c'est la PAGE ENTIÈRE qui se met à défiler de côté.
 *
 * L'effet est déroutant parce qu'il ne ressemble pas à sa cause. On croit
 * que la page de scrutin est cassée, alors que c'est l'en-tête, sur toutes
 * les pages, qui pousse le document au-delà de la fenêtre.
 *
 * LA CORRECTION. On étend le comportement mobile jusqu'à 1 099 px en
 * redonnant, sur cette plage, les deux règles que WordPress applique en
 * dessous de 600 : le menu se cache, le bouton apparaît. Le préfixe
 * .tbc-entete suffit à l'emporter sur les règles du cœur, qui n'en ont pas.
 *
 * Rien d'autre à écrire : tout l'habillage du panneau ouvert, plus bas dans
 * cette section, vit hors de toute media query et s'applique donc déjà à
 * cette largeur-là.
 */
@media (min-width: 600px) and (max-width: 1099px) {

	.tbc-entete .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.tbc-entete .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.tbc-entete .wp-block-navigation__responsive-container-close {
		display: block;
	}
}


/* =========================================================================
   3. LE PANNEAU DE MENU SUR MOBILE
   ========================================================================= */

/*
 * WordPress ajoute la classe « is-menu-open » au panneau quand il s'ouvre.
 * Tout ce qui suit ne concerne donc que le menu déplié sur petit écran.
 *
 * Le conteneur passe en colonne tout seul. On le force en pleine largeur,
 * sinon chaque entrée ne fait que la largeur de son texte et le filet de
 * séparation s'arrête au milieu de l'écran.
 */
.tbc-entete .is-menu-open .wp-block-navigation__container {
	align-items: stretch;
	width: 100%;
	gap: 0;
}

.tbc-entete .is-menu-open .wp-block-navigation-item {
	width: 100%;
	padding-top: var(--wp--preset--spacing--espace-2);
	padding-bottom: var(--wp--preset--spacing--espace-2);
	border-bottom: 1px solid var(--wp--preset--color--filet-fin);
}

.tbc-entete .is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	font-family: var(--wp--preset--font-family--titrage);
	font-size: var(--wp--preset--font-size--titre-1);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -0.015em;
}

/*
 * La ligne de recherche n'est pas une entrée de menu : ni filet, ni grande
 * taille.
 *
 * Le sélecteur ne suppose plus que le champ soit un enfant DIRECT de la
 * liste. Selon la version de WordPress, il est parfois emballé d'un niveau
 * supplémentaire, et la règle ratait alors sa cible : c'est une des causes du
 * filet en trop qu'on voyait dans le panneau.
 */
.tbc-entete .is-menu-open li:has(.wp-block-search) {
	border-bottom: 0;
	padding-bottom: var(--wp--preset--spacing--espace-4);
}

/* Dans le panneau, la loupe reprend une taille confortable au doigt. */
.tbc-entete .is-menu-open .wp-block-search__button svg {
	width: 24px;
	height: 24px;
}


/* --- 3.1 Le retrait du panneau ------------------------------------------ */

/*
 * Sans cette règle, le texte du menu déplié colle au bord gauche de l'écran.
 *
 * WordPress applique bien un retrait à son panneau, mais nos entrées sont en
 * largeur 100 % pour que le filet de séparation traverse toute la ligne, et
 * elles ressortent du retrait. On le repose donc sur le panneau lui-même, ce
 * qui décale d'un coup la croix de fermeture, la recherche et les entrées.
 *
 * 20 px, la même valeur que le retrait de l'en-tête replié : le nom du club
 * et les entrées du menu commencent exactement au même endroit, avant et
 * après ouverture.
 */
.tbc-entete .wp-block-navigation__responsive-container.is-menu-open {
	padding-left: var(--wp--preset--spacing--espace-25);
	padding-right: var(--wp--preset--spacing--espace-25);
}


/* --- 3.2 Les entrées dynamiques ------------------------------------------ */

/*
 * TROIS ENTRÉES QUI NE SONT PAS DES RUBRIQUES.
 *
 * « Livres », « Scrutins », « Blog », « Le club » nomment des endroits du
 * site. « En lecture · Le Pain nu » et « Se connecter » ne nomment rien : la
 * première est une information d'état, la seconde une action.
 *
 * Les mettre au même niveau typographique que les quatre autres rendait le
 * menu illisible, parce que rien ne disait au lecteur qu'il changeait de
 * nature de chose. On les traite donc à part : plus petites, dans la police
 * de texte, et détachées par un blanc plutôt que par un filet.
 */
.tbc-entete .is-menu-open .tbc-nav__dyn {
	width: auto;
	border-top: 0;
	border-bottom: 0;
	padding-top: var(--wp--preset--spacing--espace-1);
	padding-bottom: var(--wp--preset--spacing--espace-1);
	margin-top: var(--wp--preset--spacing--espace-4);
}

/*
 * Le blanc ne se met que sur la PREMIÈRE des trois. On le donne à toutes,
 * puis on l'enlève à celles qui en suivent une autre : « A + A » vise un
 * élément immédiatement précédé de son semblable.
 *
 * L'avantage sur une règle « la première de la série » : quand une entrée
 * disparaît, parce qu'aucun scrutin n'est ouvert par exemple, elle sort
 * vraiment du document et la suivante devient d'elle-même la première.
 */
.tbc-entete .is-menu-open .tbc-nav__dyn + .tbc-nav__dyn {
	margin-top: 0;
}

/*
 * PLUS AUCUN FILET SUR CES TROIS-LÀ, et c'est la correction du défaut.
 *
 * La version précédente posait un filet au-dessus du groupe, à trente-deux
 * pixels du filet de « Le club ». Résultat : deux traits parallèles séparés
 * par un blanc, ce qui se lit comme un bug et non comme une séparation. Le
 * blanc seul suffit à dire qu'on change de nature de contenu.
 */
.tbc-entete .is-menu-open .tbc-nav__dyn .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--corps);
	font-size: var(--wp--preset--font-size--corps-sm);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	width: auto;
}

.tbc-entete .tbc-nav .tbc-nav__encours .wp-block-navigation-item__content {
	color: var(--wp--preset--color--encre-700);
}


/* --- 3.2bis Le poids des entrées de menu --------------------------------- */

/*
 * La taille venait du bloc, réglée sur « corps » : 17 px au lieu de 13. Mais
 * une entrée de menu n'est pas du texte courant, elle doit se détacher d'un
 * coup d'œil. Public Sans 500 est déjà chargée par le thème pour les boutons,
 * elle ne coûte donc aucun téléchargement de plus.
 *
 * Trois classes, pour passer devant la règle de WordPress qui en compte
 * autant. Le raisonnement est le même qu'au paragraphe suivant, sur le bouton
 * de compte : la spécificité se compte, elle ne se devine pas.
 */
.tbc-entete .tbc-nav .wp-block-navigation-item__content {
	font-weight: 500;
	letter-spacing: 0.005em;
}


/* --- 3.3 Le lien de compte, traité en bouton ----------------------------- */

/*
 * Une action ne se présente pas comme un lien de navigation. Le bouton dit
 * « ceci fait quelque chose » là où un lien dit « ceci mène quelque part ».
 * Aligné avec les quatre rubriques, « Se connecter » ne pouvait que brouiller
 * la lecture du menu.
 *
 * Il reprend les valeurs du bouton défini dans theme.json, un cran plus
 * petit : dans une barre de 64 px, un bouton à taille pleine écraserait les
 * rubriques qu'il côtoie.
 */
/*
 * SUR LA LONGUEUR DES SÉLECTEURS QUI SUIVENT.
 *
 * Trois classes empilées, ce n'est pas de la coquetterie : c'est une
 * question de SPÉCIFICITÉ, la règle qui décide qui gagne quand deux
 * déclarations visent la même propriété du même élément.
 *
 * Le compte se fait par classes : une classe vaut un point, et le sélecteur
 * qui en a le plus l'emporte, quel que soit l'ordre dans le fichier. La règle
 * de WordPress et la mienne, plus haut dans ce fichier, en comptaient trois.
 * La mienne à deux perdait donc, et le bouton gardait la couleur et la
 * largeur des entrées de menu.
 *
 * Le symptôme était parlant : l'état de survol s'affichait correctement,
 * parce qu'une pseudo-classe comme :hover ajoute un point et faisait passer
 * cette règle-là devant. L'état normal, non.
 */
.tbc-entete .tbc-nav .tbc-nav__compte .wp-block-navigation-item__content {
	display: inline-block;
	width: auto;
	background-color: var(--wp--preset--color--encre-800);
	color: var(--wp--preset--color--papier-0);
	border-radius: 3px;
	padding: 8px 14px;
	font-family: var(--wp--preset--font-family--corps);
	font-size: var(--wp--preset--font-size--corps-sm);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: none;
}

.tbc-entete .tbc-nav .tbc-nav__compte .wp-block-navigation-item__content:hover,
.tbc-entete .tbc-nav .tbc-nav__compte .wp-block-navigation-item__content:focus-visible {
	background-color: var(--wp--preset--color--encre-900);
	color: var(--wp--preset--color--papier-0);
	text-decoration: none;
}

/*
 * L'ordre sur grand écran : les quatre rubriques, la loupe, puis le bouton.
 * L'action se place en bout de barre, là où l'œil la cherche.
 *
 * Rappel du fonctionnement : « order » ne vaut que dans un conteneur flex, et
 * un élément sans réglage vaut 0. La loupe à 1 passe donc après les rubriques,
 * le bouton à 2 après la loupe.
 */
@media (min-width: 601px) {
	.tbc-nav__compte {
		order: 2;
		margin-left: var(--wp--preset--spacing--espace-1);
	}

	/*
	 * L'état du club ne monte pas dans la barre : le livre en lecture comme
	 * le scrutin ouvert font doublon avec la page d'accueil, qui les annonce
	 * déjà en toutes lettres.
	 *
	 * Deux classes ne suffisaient pas ici non plus : WordPress met ses
	 * entrées de menu en display: flex avec un sélecteur qui en compte deux,
	 * et à égalité c'est la dernière lue qui gagne. Trois classes tranchent
	 * sans dépendre de l'ordre de chargement des feuilles de style.
	 */
	.tbc-entete .tbc-nav .tbc-nav__encours {
		display: none;
	}
}


/* =========================================================================
   4. LE PIED DE PAGE
   ========================================================================= */

/*
 * Même raisonnement que dans l'en-tête : ce sont des liens de navigation,
 * pas des liens dans du texte.
 *
 * Le contraste est largement suffisant sans soulignement. Papier 1 sur
 * Encre 800 donne un rapport de 10,65 pour 1, là où la norme WCAG AA
 * demande 4,5.
 */
.tbc-pied a {
	text-decoration: none;
}

.tbc-pied a:hover,
.tbc-pied a:focus-visible {
	text-decoration: underline;
}

/*
 * L'anneau de focus par défaut est bleu port. Sur le fond vert foncé du pied
 * de page il devient presque invisible. On le repasse en papier.
 */
.tbc-pied a:focus-visible,
.tbc-pied button:focus-visible,
.tbc-pied input:focus-visible {
	outline: 2px solid var(--wp--preset--color--papier-1);
	outline-offset: 2px;
}

/* La ligne du bas s'empile sur les écrans étroits plutôt que de se serrer. */
.tbc-pied__bas {
	row-gap: var(--wp--preset--spacing--espace-1);
}


/* =========================================================================
   5. LA FICHE LIVRE
   ========================================================================= */

/* --- 5.1 Le surtitre, motif récurrent du design system ------------------ */

/*
 * Petite ligne en capitales espacées, en Courier Prime. Elle revient une
 * dizaine de fois dans la page. Une classe vaut mieux que dix réglages.
 */
.tbc-surtitre {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin-bottom: var(--wp--preset--spacing--espace-15);
}


/* --- 5.2 Les trois statuts --------------------------------------------- */

/*
 * LE MÉCANISME, EN UNE PHRASE : le gabarit contient les trois variantes,
 * functions.php pose une classe sur le <body>, et le CSS masque les deux
 * qui ne correspondent pas.
 *
 * On masque par la négative, jamais par l'affirmative. « body:not(.statut-lu)
 * .tbc-info--lu { display: none } » cache la zone quand le statut ne
 * correspond pas, et ne dit RIEN quand il correspond.
 *
 * L'inverse serait un piège. Écrire « .statut-lu .tbc-info--lu { display:
 * block } » forcerait un affichage en bloc, alors que WordPress met certaines
 * de ces zones en display: flex. La règle serait plus spécifique que celle de
 * WordPress et casserait la mise en page. En ne disant rien, on laisse chaque
 * bloc garder le display que WordPress lui a donné.
 *
 * display: none, et pas visibility ni opacity : le contenu doit disparaître
 * aussi pour les lecteurs d'écran, pas seulement à l'œil.
 */
body:not(.statut-lu) .tbc-info--lu,
body:not(.statut-lu) .tbc-pastille--lu,
body:not(.statut-lu) .tbc-sommaire__compte-rendu,
body:not(.statut-en-lecture) .tbc-info--en-lecture,
body:not(.statut-en-lecture) .tbc-pastille--en-lecture,
body:not(.statut-propose) .tbc-info--propose,
body:not(.statut-propose) .tbc-pastille--propose {
	display: none;
}


/* --- 5.3 La pastille de statut ----------------------------------------- */

.tbc-pastille {
	display: inline-block;
	font-family: var(--wp--preset--font-family--chiffres);
	font-size: var(--wp--preset--font-size--micro);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	border-radius: 3px;
	padding: 5px 9px;
	margin: 0 0 var(--wp--preset--spacing--espace-15);
}

.tbc-pastille--lu {
	background-color: var(--wp--preset--color--mousse-100);
	color: var(--wp--preset--color--mousse-700);
}

.tbc-pastille--en-lecture {
	background-color: var(--wp--preset--color--encre-800);
	color: var(--wp--preset--color--papier-1);
}

.tbc-pastille--propose {
	border: 1px solid var(--wp--preset--color--noyer-400);
	color: var(--wp--preset--color--encre-600);
}


/* --- 5.4 La couverture -------------------------------------------------- */

/*
 * Le coin inférieur gauche est coupé en biais, comme une page cornée.
 * clip-path découpe l'image selon une liste de points, en partant du coin
 * haut gauche et en tournant dans le sens des aiguilles d'une montre.
 *
 * Le dernier point, « 0 calc(100% - 32px) », remonte le long du bord gauche
 * et crée la diagonale avec l'avant-dernier.
 */
/*
 * La grande couverture garde ses proportions d'origine : c'est le seul
 * endroit du site où l'on regarde vraiment une couverture, un rognage s'y
 * verrait. Mais « proportions d'origine » ne veut pas dire « taille libre ».
 *
 * width: auto avec max-width et max-height laisse l'image se réduire en
 * gardant sa forme, sans jamais dépasser sa colonne ni 480 px de haut. Une
 * couverture ordinaire, 300 de large et 450 de haut, ne bouge pas d'un pixel :
 * le plafond ne se déclenche que pour celles qui sortaient du cadre. C'est le
 * principe d'un garde-fou, il ne change rien tant que tout va bien.
 *
 * width: auto est ici obligatoire. Avec une largeur imposée à 100 %, un
 * plafond de hauteur ne réduirait pas l'image : il l'écraserait.
 */
.tbc-couverture img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 480px;
	height: auto;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 32px 100%, 0 calc(100% - 32px));
}

@media (min-width: 782px) {
	.tbc-couverture img {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 64px 100%, 0 calc(100% - 64px));
	}
}

/* Un livre sans couverture ne doit pas laisser un trou dans la grille. */
.tbc-couverture:empty {
	display: none;
}


/* --- 5.5 L'en-tête de fiche --------------------------------------------- */

.tbc-fiche__titre {
	margin-top: var(--wp--preset--spacing--espace-25);
	margin-bottom: var(--wp--preset--spacing--espace-05);
}

.tbc-fiche__auteur {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--espace-3);
}

.tbc-fiche__auteur a,
.tbc-fiche__origine a,
.tbc-sommaire a,
.tbc-fiche__navigation a {
	text-decoration: none;
}

.tbc-fiche__auteur a:hover,
.tbc-fiche__origine a:hover,
.tbc-sommaire a:hover,
.tbc-fiche__navigation a:hover {
	text-decoration: underline;
}

.tbc-fiche__origine {
	gap: var(--wp--preset--spacing--espace-1);
	margin-top: var(--wp--preset--spacing--espace-1);
}

/*
 * L'extrait, sous les caractéristiques du livre.
 *
 * Il tient en quelques lignes et occupe le blanc laissé par la couverture.
 * Sa largeur est bornée en « ch », une unité qui vaut la largeur du chiffre
 * zéro dans la police courante : 46ch donne une quarantaine de caractères
 * par ligne quelle que soit la taille de texte choisie.
 */
.tbc-fiche__extrait {
	max-width: 46ch;
	margin-top: var(--wp--preset--spacing--espace-25);
	margin-bottom: 0;
}


/* --- 5.6 Les zones d'information ---------------------------------------- */

.tbc-info--lu {
	gap: var(--wp--preset--spacing--espace-5);
	align-items: center;
}

.tbc-info__chiffre {
	margin: 0;
	line-height: 1;
}

.tbc-info__contexte {
	border-left: 1px solid var(--wp--preset--color--mousse-300);
	padding-left: var(--wp--preset--spacing--espace-4);
}

/* Les deux lignes de contexte tiennent lieu de phrase, pas de paragraphes. */
.tbc-info__mois,
.tbc-info__rapporteur {
	margin: 0;
}

.tbc-info__mois::before {
	content: "Lu en ";
}

.tbc-info__rapporteur::before {
	content: "Séance rapportée par ";
}

.tbc-info__rapporteur-sombre::before {
	content: "Rapporteur désigné : ";
}

.tbc-info__proposant::before {
	content: "Proposé par ";
}

/*
 * Sur le contenu généré par ::before.
 *
 * Ces mots ne sont pas dans le HTML, ils sont ajoutés par le CSS. C'est
 * légitime ici parce qu'ils sont purement rédactionnels : la donnée, elle,
 * reste dans le document. Ne jamais y mettre une information indispensable,
 * elle ne serait ni copiable ni fiable pour les lecteurs d'écran.
 */

.tbc-info__date {
	margin-top: var(--wp--preset--spacing--espace-1);
	margin-bottom: var(--wp--preset--spacing--espace-3);
}

.tbc-horaires__ligne {
	gap: var(--wp--preset--spacing--espace-3);
	align-items: baseline;
}

.tbc-horaires__ligne p {
	margin: 0;
	color: var(--wp--preset--color--papier-3);
}

.tbc-horaires__ville {
	min-width: 7em;
}

.tbc-info__rapporteur-sombre {
	margin-top: var(--wp--preset--spacing--espace-3);
	padding-top: var(--wp--preset--spacing--espace-15);
	border-top: 1px solid var(--wp--preset--color--filet-inverse);
	color: var(--wp--preset--color--papier-3);
}


/* --- 5.7 Le corps et le rail -------------------------------------------- */

/*
 * Sur mobile, le texte puis le rail, dans l'ordre du document.
 * À partir de 900 px, deux colonnes, et « order: -1 » fait remonter le rail
 * à gauche sans qu'on ait à toucher à l'ordre du HTML.
 *
 * L'ordre du document reste celui de la lecture au clavier et à la voix.
 * C'est pour ça qu'on le laisse logique et qu'on déplace visuellement.
 */
@media (min-width: 900px) {

	.tbc-fiche__corps {
		display: flex;
		gap: var(--wp--preset--spacing--espace-8);
		align-items: flex-start;
	}

	.tbc-fiche__rail {
		order: -1;
		flex: 0 0 220px;
		position: sticky;
		top: 96px;
	}

	.admin-bar .tbc-fiche__rail {
		top: 128px;
	}

	/*
	 * min-width: 0 sur un élément flex n'est pas décoratif. Par défaut, un
	 * élément flex refuse de devenir plus étroit que son contenu le plus
	 * large : un mot très long ou un bloc de code ferait déborder toute la
	 * colonne. Cette ligne lève ce refus.
	 */
	.tbc-fiche__texte {
		flex: 1 1 auto;
		min-width: 0;
		max-width: 64ch;
	}
}

.tbc-sommaire {
	border-left: 2px solid var(--wp--preset--color--noyer-600);
	padding-left: var(--wp--preset--spacing--espace-2);
	margin-bottom: var(--wp--preset--spacing--espace-5);
}

.tbc-sommaire p {
	margin: 0 0 var(--wp--preset--spacing--espace-15);
}

/*
 * Le défilement vers une ancre s'arrête sous l'en-tête collant si on ne dit
 * rien. scroll-margin-top réserve la hauteur nécessaire au-dessus de la
 * cible.
 */
.tbc-ancre,
.tbc-compte-rendu__titre {
	scroll-margin-top: 96px;
}


/* --- 5.8 Les pastilles de thèmes ---------------------------------------- */

.tbc-pastilles a {
	display: inline-block;
	background-color: var(--wp--preset--color--port-100);
	color: var(--wp--preset--color--port-700);
	border: 1px solid var(--wp--preset--color--port-300);
	border-radius: 999px;
	padding: 6px 11px;
	margin: 0 var(--wp--preset--spacing--espace-05) var(--wp--preset--spacing--espace-1) 0;
	text-decoration: none;
}

.tbc-pastilles a:hover,
.tbc-pastilles a:focus-visible {
	background-color: var(--wp--preset--color--port-300);
	text-decoration: none;
}

.tbc-terme-simple a {
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--noyer-400);
}


/* --- 5.9 Le compte rendu ------------------------------------------------ */

/*
 * Ces règles stylent le motif « Compte rendu de séance ». Le motif porte
 * déjà ses couleurs et ses retraits ; ce qui suit n'ajoute que ce que les
 * réglages de blocs ne savent pas exprimer.
 */
.tbc-compte-rendu__titre {
	margin-top: 0;
}

.tbc-compte-rendu__meta {
	padding-bottom: var(--wp--preset--spacing--espace-25);
	border-bottom: 1px solid var(--wp--preset--color--filet-fin);
	line-height: 1.7;
}

.tbc-compte-rendu__chapeau {
	line-height: 1.3;
}

.tbc-compte-rendu__citation {
	border-left: 3px solid var(--wp--preset--color--noyer-600);
	padding-left: var(--wp--preset--spacing--espace-3);
	margin-left: 0;
}

.tbc-compte-rendu__citation cite {
	display: block;
	font-family: var(--wp--preset--font-family--chiffres);
	font-size: var(--wp--preset--font-size--micro);
	font-style: normal;
	color: var(--wp--preset--color--noyer-600);
}

.tbc-compte-rendu__signature {
	margin-top: var(--wp--preset--spacing--espace-3);
	padding-top: var(--wp--preset--spacing--espace-2);
	border-top: 1px solid var(--wp--preset--color--filet-fin);
}


/* --- 5.10 Les remarques --------------------------------------------------- */

/*
 * CE QUI A CHANGÉ, ET POURQUOI.
 *
 * Une remarque était un filet horizontal, un nom en tout petit et un texte
 * plus petit que le reste de la page. Trois signaux qui disent la même chose :
 * ceci est secondaire. Or c'est l'inverse : sur un site de club de lecture,
 * ce que les gens s'écrivent est le contenu, la fiche n'est que le prétexte.
 *
 * On lui donne donc le vocabulaire d'un objet à part entière, le même que le
 * panneau du scrutin : un fond, un filet, du retrait, un angle arrondi de
 * 5 px. Trois éléments portent la lecture :
 *
 *   le portrait — un visage arrête l'œil mieux qu'un nom ;
 *   le prénom en police de titrage — il devient une signature, pas une
 *     métadonnée ;
 *   le texte à la taille du corps — une remarque de lecture n'est pas une
 *     note de bas de page.
 *
 * Le filet horizontal disparaît : entre deux cartes posées sur le fond de la
 * page, la séparation est déjà faite. Le garder aurait été dire deux fois la
 * même chose.
 */
.tbc-remarque {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--espace-2);
	margin: 0 0 var(--wp--preset--spacing--espace-2);
	padding: var(--wp--preset--spacing--espace-3);
	background-color: var(--wp--preset--color--papier-0);
	border: 1px solid var(--wp--preset--color--filet-fin);
	border-radius: 5px;
}

/*
 * Dans le panneau du scrutin, qui est déjà en papier-0, la carte prend le ton
 * juste au-dessus. Sur son propre fond, elle ne se verrait pas.
 */
.tbc-voix .tbc-remarque {
	background-color: var(--wp--preset--color--papier-1);
}

/*
 * Le portrait. Même dessin que sur la page du club — un rond, un fond de
 * repli, un filet — à une échelle qui tient dans une carte.
 *
 * Le rond est porté par le conteneur et non par l'image : l'image peut être
 * de n'importe quel format, c'est le cadre qui décide de la forme, et
 * object-fit: cover se charge de la remplir sans la déformer.
 */
.tbc-remarque__portrait {
	flex: 0 0 auto;
	/* Sans border-box, le filet d'un pixel s'ajoute par-dessus les 44 et le
	   rond mesure 46. Deux pixels ne se voient pas ; un rond de 46 à côté
	   d'un rond de 44, ailleurs sur le site, se voit. */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	border-radius: 50%;
	overflow: hidden;
	background-color: var(--wp--preset--color--papier-2);
	border: 1px solid var(--wp--preset--color--filet-fin);
}

.tbc-remarque__portrait img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* L'initiale, quand le membre n'a pas déposé de portrait. */
.tbc-remarque__portrait .tbc-membre__initiale {
	font-size: var(--wp--preset--font-size--titre-4);
}

/*
 * min-width: 0 n'est pas une précaution, c'est une correction.
 *
 * Un élément flexible refuse par défaut de descendre sous la largeur de son
 * contenu le plus large. Une adresse collée dans une remarque, ou un mot
 * allemand, élargirait donc la carte au-delà de la page. La ligne ci-dessous
 * lève cette règle et rend au texte le droit de revenir à la ligne.
 */
.tbc-remarque__corps {
	flex: 1 1 auto;
	min-width: 0;
	/* min-width autorise la carte à rétrécir ; overflow-wrap autorise le
	   TEXTE à se couper. Il faut les deux : sans la seconde, une adresse
	   collée dans une remarque reste un seul mot insécable, et c'est la
	   page entière qui se met à défiler de côté sur un téléphone. */
	overflow-wrap: anywhere;
}

/*
 * L'ESPACE ENTRE LA SIGNATURE ET LE TEXTE, ÉCRIT UNE SEULE FOIS.
 *
 * WordPress pose entre deux blocs empilés l'écart global du thème, ici 24 px.
 * C'est la bonne valeur entre deux sections d'une page ; à l'intérieur d'une
 * carte, elle détache la signature du texte qu'elle signe, et la carte se lit
 * comme deux choses au lieu d'une.
 *
 * Sa règle est enveloppée dans :where(), donc de spécificité nulle : la
 * nôtre l'emporte sans avoir à surenchérir. On ne met la mesure qu'ici — pas
 * de marge basse sur l'en-tête en plus, sinon l'écart réel devient la somme
 * de deux nombres écrits à deux endroits.
 */
.tbc-remarque__corps > * {
	margin-block-start: 0;
}

.tbc-remarque__corps > * + * {
	margin-block-start: var(--wp--preset--spacing--espace-1);
}

.tbc-remarque__entete {
	gap: var(--wp--preset--spacing--espace-1);
	align-items: baseline;
	margin-bottom: 0;
}

.tbc-remarque__entete p,
.tbc-remarque__entete div {
	margin: 0;
}

.tbc-remarque__nom {
	font-weight: 600;
	line-height: 1.2;
}

/*
 * Le premier et le dernier paragraphe collent aux bords du retrait. Sans ces
 * deux lignes, la marge par défaut d'un <p> s'ajoute au padding de la carte
 * et le texte flotte au milieu.
 */
.tbc-remarque .wp-block-comment-content > p:first-child {
	margin-top: 0;
}

.tbc-remarque .wp-block-comment-content > p:last-child {
	margin-bottom: 0;
}


/* --- 5.11 La navigation entre livres ------------------------------------- */

.tbc-fiche__navigation {
	gap: var(--wp--preset--spacing--espace-5);
}

.tbc-fiche__navigation .post-navigation-link-next {
	text-align: right;
	margin-left: auto;
}


/* =========================================================================
   6. LE MOTIF PARTAGÉ : LA CARTE DE LIVRE
   ========================================================================= */

/*
 * LE MÉCANISME DU « VIDE DISPARAÎT ».
 *
 * Un livre proposé n'a ni mois de lecture ni note. Les sources de liaison
 * rendent alors une chaîne vide, et le paragraphe se retrouve sans contenu.
 *
 * La pseudo-classe :empty vise exactement ces éléments : un paragraphe sans
 * le moindre caractère à l'intérieur. Une seule règle remplace toutes les
 * conditions qu'on ne peut pas écrire dans un bloc.
 *
 * C'est aussi ce qui fait apparaître la pastille « proposé » uniquement sur
 * les livres proposés : sur les autres, la valeur est vide, donc masquée.
 */
.tbc-carte p:empty,
.tbc-accueil p:empty,
.tbc-archive p:empty,
.tbc-fiche p:empty {
	display: none;
}

.tbc-carte__couverture img {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 0 4px 12px rgba(36, 59, 50, 0.10);
}

/* .tbc-carte__mois et .tbc-carte__note ont disparu de la carte : le mois et
   la note sont réunis dans .tbc-carte__donnees, section 30. Les classes ne
   sont plus rendues nulle part, leurs règles sont donc retirées plutôt que
   laissées à traîner. */

.tbc-carte__pastille {
	border: 1px solid var(--wp--preset--color--noyer-400);
	color: var(--wp--preset--color--encre-600);
	margin-top: var(--wp--preset--spacing--espace-15);
	align-self: flex-start;
}

/*
 * align-self, et voilà pourquoi.
 *
 * La pastille est en display: inline-block, ce qui devrait la faire tenir à
 * la largeur de son texte. Sauf que la carte est une colonne flexible : dans
 * une colonne flexible, chaque enfant est étiré sur toute la largeur par
 * défaut, inline-block ou pas. La pastille devenait donc une barre d'un bord
 * à l'autre de la carte, alors que la même pastille, sur une fiche de livre,
 * se contentait de son texte.
 *
 * align-self: flex-start annule cet étirement pour ce seul enfant. La règle à
 * retenir : dans un conteneur flexible, ce n'est plus l'élément qui décide de
 * sa largeur, c'est le conteneur — jusqu'à ce qu'on lui rende la main.
 */

.tbc-carte__titre {
	margin: 0;
}

.tbc-carte__titre a,
.tbc-carte__auteur a {
	text-decoration: none;
}

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

.tbc-carte__auteur {
	margin: 0 0 var(--wp--preset--spacing--espace-05);
}


/* =========================================================================
   7. LA PAGE D'ACCUEIL
   ========================================================================= */

/* --- 7.1 Le ruban du scrutin -------------------------------------------- */

/*
 * Le ruban et la zone du scrutin vivent entièrement à l'intérieur de leur
 * boucle de requête. Quand aucun scrutin n'est ouvert, la boucle ne rend
 * rien, et les deux zones disparaissent d'elles-mêmes. Aucun cadre vide,
 * aucun « rien à voter ».
 */
.tbc-ruban p,
.tbc-ruban a {
	margin: 0;
	text-decoration: none;
}

.tbc-ruban__lien a::after {
	content: " →";
}


/* --- 7.2 Le livre du mois ------------------------------------------------ */

.tbc-mois__couverture img {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 0 6px 18px rgba(36, 59, 50, 0.14);
}

.tbc-mois__titre {
	margin: var(--wp--preset--spacing--espace-1) 0 0;
}

.tbc-mois__titre a,
.tbc-mois__auteur a {
	text-decoration: none;
}

.tbc-mois__titre a:hover,
.tbc-mois__auteur a:hover {
	text-decoration: underline;
}

.tbc-mois__auteur {
	margin: 0 0 var(--wp--preset--spacing--espace-15);
}

.tbc-mois__meta {
	margin: 0;
}

.tbc-mois__extrait {
	max-width: 44ch;
}

.tbc-appel__date {
	margin: var(--wp--preset--spacing--espace-05) 0;
}

.tbc-appel__villes {
	margin: 0;
}

/*
 * Le bouton « Lire la fiche ».
 *
 * Le bloc « Lire la suite » de WordPress produit un simple lien. On lui donne
 * l'apparence du bouton défini dans theme.json, sans dupliquer ses valeurs :
 * les variables --wp--custom-- n'existent pas, mais les préréglages, si.
 */
.tbc-bouton {
	display: inline-block;
	background-color: var(--wp--preset--color--encre-800);
	color: var(--wp--preset--color--papier-0);
	border-radius: 3px;
	padding: 13px var(--wp--preset--spacing--espace-25);
	font-size: var(--wp--preset--font-size--corps-sm);
	font-weight: 500;
	text-decoration: none;
}

.tbc-bouton:hover,
.tbc-bouton:focus-visible {
	background-color: var(--wp--preset--color--encre-900);
	color: var(--wp--preset--color--papier-0);
	text-decoration: none;
}


/* --- 7.3 Le scrutin et ses candidats ------------------------------------- */

.tbc-scrutin__titre {
	margin-top: 0;
}

.tbc-scrutin__titre a {
	text-decoration: none;
}

.tbc-candidats {
	margin-top: var(--wp--preset--spacing--espace-3);
	margin-bottom: var(--wp--preset--spacing--espace-3);
}

.tbc-candidat__couverture img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	margin-bottom: var(--wp--preset--spacing--espace-15);
}

/*
 * aspect-ratio impose la proportion de la carte, object-fit décide de ce que
 * devient une image qui ne l'a pas. « cover » remplit le cadre en rognant les
 * bords, ce qui garde la grille régulière.
 *
 * On ne le fait QUE dans les listes. Sur la fiche du livre, la couverture
 * garde sa proportion d'origine : c'est là qu'on la regarde vraiment, et un
 * titre coupé s'y verrait.
 */

.tbc-candidat h3 {
	margin: 0;
}

.tbc-candidat a {
	text-decoration: none;
}

.tbc-candidat a:hover {
	text-decoration: underline;
}


/* --- 7.4 Les dernières lectures ------------------------------------------ */

.tbc-ligne-livre {
	gap: var(--wp--preset--spacing--espace-2);
	border-top: 1px solid var(--wp--preset--color--filet-fin);
	padding-top: var(--wp--preset--spacing--espace-2);
	margin-bottom: var(--wp--preset--spacing--espace-2);
}

.tbc-ligne-livre__couverture {
	flex: none;
	width: 44px;
}

.tbc-ligne-livre__couverture img {
	display: block;
	width: 44px;
	height: 66px;
	object-fit: cover;
}

.tbc-ligne-livre__texte {
	flex: 1 1 auto;
	min-width: 0;
}

.tbc-ligne-livre__texte h3,
.tbc-ligne-livre__texte div {
	margin: 0;
}

.tbc-ligne-livre__texte a {
	text-decoration: none;
}

.tbc-ligne-livre__texte a:hover {
	text-decoration: underline;
}

.tbc-ligne-livre__note {
	flex: none;
	margin: 0;
}

.tbc-lien-suite {
	margin-top: var(--wp--preset--spacing--espace-2);
}

.tbc-lien-suite,
.tbc-lien-suite a {
	text-decoration: none;
}


/* --- 7.5 Le journal ------------------------------------------------------ */

.tbc-article {
	margin-bottom: var(--wp--preset--spacing--espace-4);
}

.tbc-article__signature {
	gap: var(--wp--preset--spacing--espace-1);
	margin-bottom: var(--wp--preset--spacing--espace-05);
}

.tbc-article__signature p,
.tbc-article__signature div {
	margin: 0;
}

.tbc-article h3 {
	margin: 0 0 var(--wp--preset--spacing--espace-05);
}

.tbc-article h3 a {
	text-decoration: none;
}

.tbc-article h3 a:hover {
	text-decoration: underline;
}


/* =========================================================================
   8. L'ARCHIVE DES LIVRES
   ========================================================================= */

.tbc-archive__titre {
	margin-bottom: var(--wp--preset--spacing--espace-1);
}

.tbc-archive__contexte {
	gap: var(--wp--preset--spacing--espace-1);
	max-width: 56ch;
}

.tbc-archive__contexte p {
	margin: 0;
}

.tbc-tri {
	gap: var(--wp--preset--spacing--espace-3);
	align-items: baseline;
}

.tbc-tri p {
	margin: 0;
}

.tbc-tri a {
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
}

.tbc-tri a:hover,
.tbc-tri a:focus-visible {
	border-bottom-color: var(--wp--preset--color--noyer-600);
	text-decoration: none;
}

/*
 * La grille : deux colonnes au téléphone, trois à partir de 768 px, quatre
 * au-delà de 1100 px, comme dans les trois largeurs du wireframe.
 *
 * Le bloc Boucle de requête écrit lui-même « grid-template-columns » en ligne
 * pour appliquer son réglage de colonnes. On ne peut donc pas le surcharger
 * depuis une feuille de style ordinaire, sauf à passer par !important.
 *
 * C'est l'un des rares emplois légitimes de !important : surcharger un style
 * en ligne écrit par un outil, et non par nous. Partout ailleurs, il masque
 * un problème de spécificité qu'il vaut mieux régler.
 */
.tbc-grille {
	gap: var(--wp--preset--spacing--espace-4) var(--wp--preset--spacing--espace-3) !important;
}

@media (min-width: 768px) {
	.tbc-grille {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 1100px) {
	.tbc-grille {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

.tbc-pagination {
	margin-top: var(--wp--preset--spacing--espace-8);
	padding-top: var(--wp--preset--spacing--espace-2);
	border-top: 1px solid var(--wp--preset--color--filet-fin);
}

.tbc-pagination a {
	display: inline-block;
	border: 1px solid var(--wp--preset--color--noyer-600);
	border-radius: 3px;
	padding: 10px 14px;
	font-size: var(--wp--preset--font-size--corps-sm);
	text-decoration: none;
}

.tbc-pagination a:hover,
.tbc-pagination a:focus-visible {
	background-color: var(--wp--preset--color--papier-2);
	text-decoration: none;
}


/* =========================================================================
   9. LE SCRUTIN
   ========================================================================= */

/*
 * Deux états, un seul gabarit. Même logique que les trois statuts de livre :
 * on masque par la négative, jamais par l'affirmative.
 */
body:not(.scrutin-ouvert) .tbc-etat--ouvert,
body:not(.scrutin-clos) .tbc-etat--clos {
	display: none;
}

.tbc-pastille-scrutin {
	border: 1px solid var(--wp--preset--color--argile-600);
	background-color: var(--wp--preset--color--argile-100);
	color: var(--wp--preset--color--noyer-600);
}

/*
 * Le texte de la pastille est en Noyer 600 et non en Argile 600, comme le
 * voudrait le wireframe. Argile sur Argile 100 donne un contraste de 2,96
 * pour 1, très en dessous des 4,5 exigés, et la pastille fait 11 px.
 * Noyer 600 monte à 6,12 en gardant la même famille de teintes chaudes.
 * La bordure, elle, reste en argile : une bordure n'est pas du texte.
 */

.tbc-scrutin-fiche__mois {
	margin: var(--wp--preset--spacing--espace-15) 0 0;
}

/* Le titre saisi dans WordPress devient un sous-titre : le mois porte la page. */
.tbc-scrutin-fiche__titre {
	margin: var(--wp--preset--spacing--espace-05) 0 0;
	font-weight: 400;
}

.tbc-mot {
	border-left: 3px solid var(--wp--preset--color--noyer-600);
	padding-left: var(--wp--preset--spacing--espace-25);
}

.tbc-mot__texte p {
	font-family: var(--wp--preset--font-family--titrage);
	font-size: var(--wp--preset--font-size--titre-3);
	font-style: italic;
	font-weight: 300;
	line-height: 1.45;
}

.tbc-mot__signature {
	margin-bottom: 0;
}

/*
 * Les deux candidats, à égalité stricte : mêmes champs, même ordre, aucune
 * teinte. Ils sont maintenant posés dans deux cartes, comme sur l'accueil.
 *
 * En dessous de 600 px, ils s'empilent. Deux colonnes sur un téléphone,
 * cartes et retraits compris, laissaient environ 130 px par titre : de quoi
 * couper un titre sur quatre lignes. La comparaison n'a plus besoin d'être
 * côte à côte quand elle tient sur un seul coup d'œil vertical.
 */
.tbc-duel {
	gap: var(--wp--preset--spacing--espace-3) !important;
	grid-template-columns: minmax(0, 1fr) !important;
}

@media (min-width: 601px) {
	.tbc-duel {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: var(--wp--preset--spacing--espace-4) !important;
	}
}

.tbc-duel__cote {
	display: flex;
	flex-direction: column;
}

/* Le lien « La fiche » se colle en bas, pour que les deux colonnes s'alignent. */
.tbc-duel__cote .tbc-lien-suite {
	margin-top: auto;
}

.tbc-carte__edition {
	margin: var(--wp--preset--spacing--espace-05) 0 var(--wp--preset--spacing--espace-1);
}

.tbc-resultat__titre,
.tbc-resultat__auteur {
	margin: 0;
}

.tbc-resultat__titre a,
.tbc-resultat__auteur a {
	text-decoration: none;
}

.tbc-bouton--clair {
	background-color: var(--wp--preset--color--papier-1);
	color: var(--wp--preset--color--encre-800);
	margin-top: var(--wp--preset--spacing--espace-2);
}

.tbc-bouton--clair:hover,
.tbc-bouton--clair:focus-visible {
	background-color: var(--wp--preset--color--papier-0);
	color: var(--wp--preset--color--encre-800);
}

.tbc-bouton--contour {
	background-color: transparent;
	color: var(--wp--preset--color--encre-800);
	border: 1px solid var(--wp--preset--color--noyer-600);
}

.tbc-bouton--contour:hover,
.tbc-bouton--contour:focus-visible {
	background-color: var(--wp--preset--color--papier-2);
	color: var(--wp--preset--color--encre-800);
}

.tbc-note-conception {
	margin-top: var(--wp--preset--spacing--espace-2);
}


/* =========================================================================
   10. LA FRISE DES SCRUTINS
   ========================================================================= */

/*
 * Le fil vertical est dessiné par une bordure gauche sur chaque jalon, et la
 * pastille par un pseudo-élément posé dessus. Aucune image, aucun bloc en
 * plus : le trait est la bordure elle-même.
 */
.tbc-frise__chapeau {
	max-width: 56ch;
	margin-bottom: var(--wp--preset--spacing--espace-8);
}

.tbc-jalon {
	position: relative;
	border-left: 1px solid var(--wp--preset--color--papier-4);
	padding-left: var(--wp--preset--spacing--espace-4);
	padding-bottom: var(--wp--preset--spacing--espace-6);
}

.tbc-jalon::before {
	content: "";
	position: absolute;
	left: -4px;
	top: 10px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--noyer-600);
}

/* Le dernier jalon n'a pas de fil qui continue sous lui. */
.tbc-frise__liste > li:last-child .tbc-jalon,
.tbc-frise__liste > .tbc-jalon:last-child {
	border-left-color: transparent;
}

.tbc-jalon__entete {
	gap: var(--wp--preset--spacing--espace-2);
	align-items: baseline;
}

.tbc-jalon__entete p {
	margin: 0;
}

.tbc-jalon__titre {
	margin: var(--wp--preset--spacing--espace-1) 0 0;
}

.tbc-jalon__titre a {
	text-decoration: none;
}

.tbc-jalon__titre a:hover {
	text-decoration: underline;
}

.tbc-jalon__vote {
	margin: var(--wp--preset--spacing--espace-1) 0 0;
}

.tbc-jalon__mot {
	margin-top: var(--wp--preset--spacing--espace-15);
	line-height: 1.45;
}


/* =========================================================================
   11. L'ARTICLE
   ========================================================================= */

/*
 * La colonne ne s'élargit jamais au-delà de 600 px, soit une soixantaine de
 * caractères par ligne. Sur un écran de 1600 px, la marge reste vide : pas de
 * barre latérale, pas de sommaire flottant, pas de bouton de partage collant.
 *
 * Une seule chose a le droit de déborder : l'image. C'est ce que fait le
 * réglage « Pleine largeur » d'un bloc Image, qui monte à 840 px ici.
 */
.tbc-article-page__signature {
	gap: var(--wp--preset--spacing--espace-1);
}

.tbc-article-page__signature p,
.tbc-article-page__signature div {
	margin: 0;
}

.tbc-article-page__titre {
	margin: var(--wp--preset--spacing--espace-2) 0;
}

.tbc-article-page__chapeau {
	line-height: 1.4;
	margin-bottom: var(--wp--preset--spacing--espace-3);
}

.tbc-article-page__reperes p,
.tbc-article-page__reperes div {
	margin: 0;
}

/*
 * Le corps de l'article monte d'un cran par rapport au reste du site, et
 * l'interligne aussi. Public Sans en graisse 300 est clair, et un texte long
 * le paie.
 */
.tbc-article-page__texte p {
	font-size: var(--wp--preset--font-size--corps-lg);
	line-height: 1.7;
}

/*
 * Les titres respirent au-dessus, pas en dessous. L'œil doit voir le titre
 * appartenir à ce qui suit, pas à ce qui précède.
 */
.tbc-article-page__texte h2,
.tbc-article-page__texte h3 {
	margin-top: var(--wp--preset--spacing--espace-5);
	margin-bottom: var(--wp--preset--spacing--espace-2);
}

.tbc-article-page__themes {
	margin-top: var(--wp--preset--spacing--espace-5);
}


/* =========================================================================
   12. LE GABARIT DE TERME
   ========================================================================= */

.tbc-terme__retour a,
.tbc-lien-suite a {
	text-decoration: none;
}

.tbc-terme__nom {
	margin: 0 0 var(--wp--preset--spacing--espace-15);
}

/*
 * Un nom d'auteur s'écrit en italique display partout sur le site. Un pays,
 * une langue, un genre s'écrivent en romain. Le gabarit est unique, la règle
 * typographique tient dans un sélecteur d'attribut : WordPress pose sur le
 * <body> une classe qui nomme la taxonomie affichée.
 */
.tax-auteur .tbc-terme__nom {
	font-style: italic;
}

.tbc-terme__description {
	max-width: 56ch;
	margin: 0 0 var(--wp--preset--spacing--espace-2);
}

.tbc-terme__compte {
	margin: 0 0 var(--wp--preset--spacing--espace-8);
}


/* =========================================================================
   13. LA RECHERCHE ET LA PAGE INTROUVABLE
   ========================================================================= */

.tbc-recherche__champ {
	margin-bottom: var(--wp--preset--spacing--espace-2);
}

.tbc-recherche__champ .wp-block-search__input {
	background-color: var(--wp--preset--color--papier-0);
	border: 1px solid var(--wp--preset--color--papier-4);
	border-radius: 3px;
	padding: var(--wp--preset--spacing--espace-15);
}

.tbc-recherche__titre {
	margin-bottom: var(--wp--preset--spacing--espace-4);
}

/*
 * Le type de contenu occupe une colonne fixe à gauche : l'œil descend la
 * colonne et voit la nature de chaque résultat sans avoir à lire.
 */
.tbc-resultat {
	gap: var(--wp--preset--spacing--espace-2);
	align-items: flex-start;
	border-top: 1px solid var(--wp--preset--color--filet-fin);
	padding-top: var(--wp--preset--spacing--espace-2);
	margin-bottom: var(--wp--preset--spacing--espace-2);
}

.tbc-resultat__type {
	flex: none;
	width: 56px;
	margin: 0;
	padding-top: 6px;
}

.tbc-resultat__corps {
	flex: 1 1 auto;
	min-width: 0;
}

.tbc-resultat__corps h2 {
	margin: 0;
}

.tbc-resultat__corps h2 a {
	text-decoration: none;
}

.tbc-resultat__corps h2 a:hover {
	text-decoration: underline;
}

.tbc-vide__actions {
	gap: var(--wp--preset--spacing--espace-2);
	margin-top: var(--wp--preset--spacing--espace-3);
}

.tbc-vide__actions p {
	margin: 0;
}

.tbc-introuvable__pistes p {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--filet-fin);
	padding: var(--wp--preset--spacing--espace-2) 0;
}

.tbc-introuvable__pistes a {
	text-decoration: none;
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--espace-2);
}

.tbc-introuvable__pistes a::after {
	content: "→";
	font-family: var(--wp--preset--font-family--chiffres);
	font-size: var(--wp--preset--font-size--legende);
	color: var(--wp--preset--color--noyer-600);
}


/* =========================================================================
   14. HARMONISATION DES CARTES ET DES COUVERTURES
   ========================================================================= */

/* --- 14.1 Toutes les couvertures au même format -------------------------- */

/*
 * LE PROBLÈME. Les couvertures viennent d'éditeurs différents et n'ont pas
 * deux fois la même proportion : un poche fait 1 pour 1,64, un grand format
 * 1 pour 1,61, une numérisation maison n'importe quoi. Dans une grille, ça
 * donne des vignettes de hauteurs différentes et des lignes qui ondulent.
 *
 * LA SOLUTION. aspect-ratio impose la proportion du cadre, object-fit décide
 * de ce que devient l'image qui ne l'a pas. « cover » remplit le cadre en
 * rognant les bords : quelques pixels en haut et en bas, invisibles, et la
 * grille redevient régulière.
 *
 * 2/3 est la proportion du livre imprimé, celle qu'on avait retenue pour les
 * couvertures à l'étape 3.
 *
 * L'EXCEPTION, et elle est volontaire : la fiche du livre. C'est le seul
 * endroit où l'on regarde vraiment une couverture, et un titre rogné s'y
 * verrait. Elle y garde sa proportion d'origine. Voir la section 5.4.
 */
.tbc-carte__couverture img,
.tbc-mois__couverture img,
.tbc-candidat__couverture img,
.tbc-ligne-livre__couverture img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: contain;
	background-color: var(--wp--preset--color--papier-2);
}

/*
 * « contain » et non « cover », et c'est une correction.
 *
 * « cover » remplit le cadre en rognant ce qui dépasse. Sur une photo, c'est
 * sans conséquence. Sur une couverture de livre, ça coupe le nom de l'auteur
 * en haut et la mention d'édition en bas : exactement ce qu'on voyait sur
 * Nils Holgersson.
 *
 * « contain » fait entrer l'image entière dans le cadre et laisse deux bandes
 * de papier sur les côtés. Les hauteurs restent égales, ce qui était le but,
 * et aucune couverture n'est mutilée.
 */

/* La vignette des dernières lectures garde sa largeur fixe de 44 px. */
.tbc-ligne-livre__couverture img {
	width: 44px;
	height: auto;
}

/*
 * Une couverture manquante ne doit pas faire s'effondrer la carte : le bloc
 * garde sa place, en papier creusé, comme dans les wireframes.
 */
.tbc-carte__couverture:empty,
.tbc-candidat__couverture:empty,
.tbc-duel__cote .tbc-carte__couverture:empty {
	display: block;
	aspect-ratio: 2 / 3;
	background-color: var(--wp--preset--color--papier-2);
	border: 1px dashed var(--wp--preset--color--papier-4);
}


/* --- 14.2 Des blocs voisins de même hauteur ------------------------------ */

/*
 * LE PROBLÈME. Deux cartes côte à côte n'ont pas le même contenu : un titre
 * de dix mots contre un de deux, une note contre rien. Chacune prend donc la
 * hauteur de ce qu'elle contient, et les cartes ne s'alignent plus.
 *
 * LA SOLUTION, en trois temps.
 *
 * 1. L'élément de grille s'étire sur toute la hauteur de sa rangée. C'est le
 *    comportement par défaut d'une grille CSS, mais WordPress emballe chaque
 *    contenu dans un <li> qu'il faut penser à étirer aussi.
 * 2. La carte devient une colonne flexible occupant cette hauteur entière.
 * 3. Le dernier élément reçoit « margin-top: auto », ce qui pousse tout le
 *    blanc restant au-dessus de lui. Les notes, les liens et les boutons
 *    s'alignent alors d'une carte à l'autre, quelle que soit la longueur des
 *    titres.
 *
 * C'est le motif standard de la carte à pied aligné. Tu le réutiliseras.
 */
.tbc-grille > li,
.tbc-duel > li,
.tbc-candidats .wp-block-post-template > li {
	height: 100%;
}

.tbc-carte,
.tbc-duel__cote,
.tbc-candidat {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.tbc-duel__cote .tbc-lien-suite {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--espace-1);
}

/*
 * Le titre réserve la place de deux lignes, même s'il n'en fait qu'une.
 *
 * Sans ça, un titre court et un titre de dix mots décalent tout ce qui les
 * suit : l'auteur d'une carte se retrouve à la hauteur de l'édition de sa
 * voisine. Deux lignes couvrent la grande majorité des titres ; celui de Nils
 * Holgersson en prendra trois et décalera encore un peu, ce qui est le prix à
 * payer pour ne jamais couper un titre.
 *
 * 1,12 est l'interligne posé sur ces titres, 2 fois 1,12 em fait donc deux
 * lignes pleines.
 */
.tbc-duel__cote .tbc-carte__titre,
.tbc-candidat h3 {
	min-height: 2.24em;
}

/*
 * Le titre et l'auteur ne s'étirent pas, seul le blanc au-dessus du pied le
 * fait. Sans « flex: none », un titre court se laisserait allonger et le
 * texte se retrouverait centré verticalement, ce qui ne se voit qu'une fois
 * les deux cartes côte à côte.
 */
.tbc-carte > *,
.tbc-duel__cote > *,
.tbc-candidat > * {
	flex: none;
}


/* =========================================================================
   15. LE VOTE
   ========================================================================= */

/*
 * La vedette de l'accueil dit maintenant ce qu'on regarde, et pas seulement
 * quand. « Août 2026 » seul pouvait se lire comme une date de parution.
 *
 * Elle reprend la pastille « en lecture » de la fiche du livre : même statut,
 * même signe. C'est ce qui fait qu'on apprend un site sans l'apprendre.
 */
.tbc-pastille-lecture {
	background-color: var(--wp--preset--color--encre-800);
	color: var(--wp--preset--color--papier-1);
}

/*
 * Le choix du titre, au-dessus du champ de commentaire. Deux cases en pleine
 * largeur plutôt qu'une liste déroulante : à deux options, un menu qu'il faut
 * ouvrir coûte un geste de plus pour rien.
 *
 * -------------------------------------------------------------------------
 * TROIS TENTATIVES, UNE SEULE CAUSE.
 *
 * Le texte sortait de sa case. J'ai accusé le <fieldset>, puis la grille,
 * puis le box-sizing. Aucune des trois corrections n'a rien changé, ce qui
 * est en soi une information : quand une correction plausible ne produit
 * aucun effet, c'est qu'on ne touche pas la cause.
 *
 * La cause est une règle de WordPress lui-même, livrée avec le bloc
 * « formulaire de commentaire » :
 *
 *   .wp-block-post-comments-form .comment-form
 *     input:not([type=submit]):not([type=checkbox]):not([type=hidden])
 *   { display: block; width: 100%; }
 *
 * Elle est écrite pour les champs texte, et elle écarte trois types de
 * champs. Le bouton radio n'en fait pas partie : nos deux radios prenaient
 * donc 100 % de la largeur de leur case. Le titre n'avait plus de place et
 * débordait à côté de la bordure.
 *
 * Ma règle « width: 18px » existait bien, mais elle perdait :
 *   .tbc-vote__choix input   → 1 classe, 1 balise
 *   la règle de WordPress    → 2 classes, 3 attributs, 1 balise
 * La plus précise l'emporte, quel que soit l'ordre des feuilles de style.
 *
 * LA PARADE. Plutôt que de surenchérir en précision contre une règle que je
 * ne maîtrise pas, on sort l'élément du chemin : le bouton radio natif passe
 * hors flux et devient invisible, et le rond est redessiné à la main sur
 * l'étiquette. WordPress peut lui donner la largeur qu'il veut, plus rien
 * dans la mise en page n'en dépend.
 *
 * C'est un réflexe utile en général : contre du CSS qui ne t'appartient pas,
 * neutraliser vaut mieux que surenchérir. La surenchère se rejoue à chaque
 * mise à jour.
 */

.tbc-vote {
	margin: 0 0 var(--wp--preset--spacing--espace-4);
}

.tbc-vote .tbc-vote__question {
	font-family: var(--wp--preset--font-family--chiffres);
	font-size: var(--wp--preset--font-size--micro);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--noyer-600);
	margin: 0 0 var(--wp--preset--spacing--espace-2);
}

/*
 * La liste est une vraie <ul>, remise à plat. Une <li> est un élément de
 * bloc par nature : même si tout le reste de cette feuille disparaissait,
 * la bordure entourerait encore la ligne entière et le texte resterait
 * dedans. C'est la deuxième sécurité, après le radio sorti du flux.
 */
.tbc-vote .tbc-vote__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--espace-2);
}

@media (min-width: 601px) {
	.tbc-vote .tbc-vote__liste {
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--espace-3);
	}
}

/*
 * position: relative N'EST PAS DÉCORATIF ICI. C'est la correction d'un
 * débordement qui faisait défiler toute la page de côté.
 *
 * LE MÉCANISME, EN TROIS TEMPS.
 *
 * 1. WordPress impose « width: 100% » à tous les champs du formulaire de
 *    commentaire. Sa règle exclut les boutons d'envoi et les cases à cocher,
 *    pas les boutons radio. Le nôtre reçoit donc 100 %.
 *
 * 2. On a sorti ce radio du flux avec position: absolute, pour redessiner le
 *    rond à la main. Mais « 100 % » d'un élément absolu se calcule par
 *    rapport à son bloc conteneur, c'est-à-dire au plus proche ancêtre
 *    positionné. Il n'y en avait aucun sur ce chemin : le bloc conteneur
 *    devenait la fenêtre entière.
 *
 * 3. Un radio invisible de 1 470 px de large, posé au milieu de la page,
 *    poussait donc le document 450 px au-delà du bord. Invisible, mais
 *    présent dans la mise en page : opacity: 0 ne retire rien du calcul.
 *
 * Le <li> devient ce bloc conteneur. « 100 % » vaut alors la largeur de la
 * case, et le radio ne peut plus dépasser de nulle part.
 *
 * POURQUOI PAS UNE RÈGLE PLUS PRÉCISE SUR LA LARGEUR. Il faudrait battre en
 * spécificité une règle du cœur qui compte quatre sélecteurs de classe. On
 * l'a déjà tenté ailleurs sur ce même formulaire, et perdu. Donner un repère
 * à l'élément règle la cause au lieu de surenchérir.
 */
.tbc-vote .tbc-vote__liste .tbc-vote__item {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Le radio natif : hors flux, transparent, et sourd aux clics. Il reste dans
 * la page, donc au clavier et pour un lecteur d'écran rien ne change. C'est
 * l'étiquette qui reçoit les clics, grâce au couple id / for.
 *
 * On n'utilise pas display: none, qui le retirerait aussi du clavier et de
 * la validation « required ».
 */
.tbc-vote .tbc-vote__liste .tbc-vote__radio {
	position: absolute;
	/* Ancré sur le <li>, et non laissé à sa position d'origine : la largeur
	   imposée par WordPress se mesure alors exactement sur la case. */
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	margin: 0;
}

.tbc-vote .tbc-vote__liste .tbc-vote__choix {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: var(--wp--preset--spacing--espace-2);
	padding-left: calc(var(--wp--preset--spacing--espace-2) + 28px);
	background-color: var(--wp--preset--color--papier-0);
	border: 1px solid var(--wp--preset--color--papier-4);
	border-radius: 3px;
	text-align: left;
	cursor: pointer;
}

/*
 * Le rond dessiné à la main. ::before est l'anneau, ::after la pastille
 * intérieure, masquée tant que rien n'est choisi.
 */
.tbc-vote .tbc-vote__liste .tbc-vote__choix::before {
	content: "";
	position: absolute;
	left: var(--wp--preset--spacing--espace-2);
	top: calc(var(--wp--preset--spacing--espace-2) + 4px);
	width: 16px;
	height: 16px;
	border: 1px solid var(--wp--preset--color--noyer-600);
	border-radius: 50%;
	background-color: var(--wp--preset--color--papier-0);
}

.tbc-vote .tbc-vote__liste .tbc-vote__choix::after {
	content: "";
	position: absolute;
	left: calc(var(--wp--preset--spacing--espace-2) + 5px);
	top: calc(var(--wp--preset--spacing--espace-2) + 9px);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--encre-800);
	opacity: 0;
}

/*
 * « + » veut dire « l'élément qui suit immédiatement ». On lit donc :
 * l'étiquette qui suit un radio coché. C'est pour ça que l'input est frère
 * de l'étiquette et non dedans.
 */
.tbc-vote .tbc-vote__liste .tbc-vote__radio:checked + .tbc-vote__choix {
	border-color: var(--wp--preset--color--noyer-600);
	background-color: var(--wp--preset--color--papier-2);
}

.tbc-vote .tbc-vote__liste .tbc-vote__radio:checked + .tbc-vote__choix::after {
	opacity: 1;
}

.tbc-vote .tbc-vote__liste .tbc-vote__radio:focus-visible + .tbc-vote__choix {
	outline: 2px solid var(--wp--preset--color--port-500);
	outline-offset: 2px;
}

.tbc-vote .tbc-vote__liste .tbc-vote__titre {
	display: block;
	font-family: var(--wp--preset--font-family--titrage);
	font-size: var(--wp--preset--font-size--titre-4);
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--encre-900);
}

.tbc-vote .tbc-vote__liste .tbc-vote__auteur {
	display: block;
	font-family: var(--wp--preset--font-family--titrage);
	font-size: var(--wp--preset--font-size--corps-sm);
	font-style: italic;
	font-weight: 300;
	color: var(--wp--preset--color--encre-600);
}

/* Le titre choisi, repris au-dessus de chaque voix. */
.tbc-voix-choisie {
	font-family: var(--wp--preset--font-family--titrage);
	font-size: var(--wp--preset--font-size--titre-4);
	font-weight: 600;
	color: var(--wp--preset--color--encre-900);
	margin: 0 0 var(--wp--preset--spacing--espace-05);
}


/* =========================================================================
   16. LA PAGE DU SCRUTIN, LISIBILITÉ
   ========================================================================= */

.tbc-scrutin-fiche__section {
	margin-bottom: var(--wp--preset--spacing--espace-1);
}

.tbc-scrutin-fiche__consigne {
	max-width: 52ch;
	margin-bottom: var(--wp--preset--spacing--espace-4);
}

/*
 * L'étiquette de vote : le bouton radio à gauche, le titre aligné à gauche
 * juste après.
 *
 * Le texte apparaissait centré parce que rien ne disait le contraire et que
 * la zone de commentaires de WordPress centre certains de ses éléments. Un
 * texte centré dans une case à cocher se lit mal : l'œil cherche un début de
 * ligne stable, et il n'en trouve pas.
 */
/*
 * Le titre du formulaire de WordPress, remis dans la même famille que les
 * autres titres de section de la page.
 */
.tbc-voix .comment-reply-title,
.tbc-remarques .comment-reply-title {
	font-family: var(--wp--preset--font-family--titrage);
	font-size: var(--wp--preset--font-size--titre-3);
	font-weight: 600;
	margin-top: var(--wp--preset--spacing--espace-6);
	margin-bottom: var(--wp--preset--spacing--espace-2);
}

/* La ligne « Connecté en tant que » n'est pas une consigne, elle s'efface. */
.tbc-voix .logged-in-as,
.tbc-remarques .logged-in-as {
	font-size: var(--wp--preset--font-size--legende);
	color: var(--wp--preset--color--encre-600);
}

/*
 * L'autre proposition, en pied de scrutin clos.
 *
 * Discrète mais présente : le titre en petit, un mot d'explication, et le
 * lien vers la liste filtrée. C'est la réponse à une vraie question du club,
 * « qu'est-ce qu'il devient, le livre qui perd ? ».
 */
.tbc-non-retenu__titre {
	margin: var(--wp--preset--spacing--espace-05) 0 0;
}

.tbc-non-retenu__auteur {
	margin: 0;
	color: var(--wp--preset--color--encre-600);
}

.tbc-non-retenu__mot {
	max-width: 56ch;
	margin: var(--wp--preset--spacing--espace-15) 0 0;
}

/* La ligne de filtre sous la barre de tri de l'archive. */
/*
 * LE FILTRE DANS LA BARRE DE TRI.
 *
 * margin-left: auto pousse le groupe contre le bord droit sans avoir à
 * changer la justification du conteneur : c'est le moyen le plus simple de
 * séparer deux familles de commandes sur une même ligne.
 *
 * En dessous de 700 px, il repasse à la ligne et se recale à gauche : à
 * droite sur un écran étroit, il se lirait comme la suite du tri.
 */
.tbc-tri__vue {
	gap: var(--wp--preset--spacing--espace-2);
	align-items: baseline;
}

@media (min-width: 701px) {
	.tbc-tri__vue {
		margin-left: auto;
	}
}

@media (max-width: 700px) {
	.tbc-tri__vue {
		width: 100%;
		margin-top: var(--wp--preset--spacing--espace-1);
	}
}

/*
 * Si le titre retenu n'a pas encore été renseigné, la boucle ne rend rien :
 * il resterait un surtitre et un paragraphe qui parlent d'un livre absent.
 * :has() permet de masquer le bloc entier tant qu'il ne contient pas de
 * titre de livre. C'est la même pseudo-classe que pour la case cochée :
 * styler un parent d'après son contenu.
 */
.tbc-non-retenu:not(:has(.wp-block-post-title)) {
	display: none;
}


/* =========================================================================
   17. LE DÉCOMPTE EN BARRES, LES AVIS, ET LES RETOUCHES DU DUEL
   ========================================================================= */

/*
 * LES CASES DE VOTE À HAUTEUR ÉGALE.
 *
 * Un titre sur trois lignes face à un titre sur une ligne donnait deux cases
 * de hauteurs différentes, et l'ensemble penchait.
 *
 * La chaîne à respecter tient en trois maillons : la <li> s'étire déjà toute
 * seule sur la hauteur de sa rangée (c'est le défaut d'une grille), mais
 * l'étiquette qu'elle contient garde la hauteur de son texte. On la force à
 * remplir sa <li> en faisant de la <li> un conteneur flexible et de
 * l'étiquette son unique élément extensible.
 *
 * C'est le même motif que les cartes de l'archive : la hauteur descend du
 * parent, elle ne remonte pas de l'enfant.
 */
.tbc-vote .tbc-vote__liste .tbc-vote__item {
	display: flex;
}

.tbc-vote .tbc-vote__liste .tbc-vote__choix {
	flex: 1 1 auto;
}

/*
 * Les avis, au-dessus du formulaire : « tu as déjà voté pour X », « ta voix a
 * été mise à jour ». Un liseré à gauche plutôt qu'un encadré complet : c'est
 * une information de service, pas une alerte.
 */
.tbc-avis {
	margin: 0 0 var(--wp--preset--spacing--espace-3);
	padding: var(--wp--preset--spacing--espace-15) var(--wp--preset--spacing--espace-2);
	border-left: 3px solid var(--wp--preset--color--noyer-600);
	background-color: var(--wp--preset--color--papier-2);
	font-size: var(--wp--preset--font-size--corps-sm);
	color: var(--wp--preset--color--encre-800);
}

.tbc-avis--ok {
	border-left-color: var(--wp--preset--color--mousse-500);
}

/*
 * LES BARRES DE RÉSULTAT.
 *
 * Trois colonnes : le titre, la piste, le compte. La grille les aligne d'une
 * ligne à l'autre, ce qu'une suite de blocs en ligne ne ferait pas : les
 * pistes commenceraient à des abscisses différentes selon la longueur des
 * titres, et la comparaison visuelle serait fausse.
 *
 * minmax(0, 1fr) sur la piste plutôt que 1fr : sans le minimum à zéro, une
 * colonne de grille refuse de descendre en dessous de la largeur de son
 * contenu, et la ligne déborde sur petit écran. C'est le même piège que le
 * fieldset, sous un autre nom.
 */
.tbc-barres {
	margin: 0 0 var(--wp--preset--spacing--espace-4);
}

/* Le style du total et du reste est posé en section 18, avec les rôles. */

.tbc-barres__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--espace-15);
}

.tbc-barre {
	display: grid;
	grid-template-columns: minmax(0, 11em) minmax(0, 1fr) 2em;
	align-items: center;
	gap: var(--wp--preset--spacing--espace-2);
	margin: 0;
}

@media (max-width: 600px) {
	.tbc-barre {
		grid-template-columns: minmax(0, 1fr) 2em;
	}

	/*
	 * Sur téléphone le titre passe au-dessus, sur toute la largeur, et la
	 * piste garde la deuxième ligne. Onze caractères de titre en colonne
	 * étroite couperaient chaque titre en quatre.
	 */
	.tbc-barre__titre {
		grid-column: 1 / -1;
	}
}

.tbc-barre__titre {
	font-family: var(--wp--preset--font-family--titrage);
	font-size: var(--wp--preset--font-size--corps-sm);
	line-height: 1.25;
	color: var(--wp--preset--color--encre-900);
}

.tbc-barre__piste {
	display: block;
	height: 10px;
	border-radius: 5px;
	background-color: var(--wp--preset--color--papier-3);
	overflow: hidden;
}

/*
 * La largeur est écrite en style en ligne par PHP, parce qu'elle change à
 * chaque voix : c'est une donnée, pas une décision de mise en forme. La
 * transition adoucit le passage d'une valeur à l'autre au rechargement.
 */
.tbc-barre__remplissage {
	display: block;
	height: 100%;
	border-radius: 5px;
	background-color: var(--wp--preset--color--encre-800);
	transition: width 0.3s ease;
}

.tbc-barre__compte {
	font-family: var(--wp--preset--font-family--chiffres);
	font-size: var(--wp--preset--font-size--corps-sm);
	color: var(--wp--preset--color--encre-800);
	text-align: right;
}

/* L'échéance disparaît quand aucune date de clôture n'est renseignée. */
.tbc-echeance:empty {
	display: none;
}

/*
 * LE DUEL, DEUX RETOUCHES.
 *
 * 1. De l'air entre la couverture et le titre. Collés, l'œil lisait le titre
 *    comme une légende de l'image plutôt que comme un titre d'ouvrage.
 * 2. Le lien vers la fiche devient un vrai bouton, pleine largeur en pied de
 *    carte. Une flèche et trois mots en corps de texte se voyaient à peine à
 *    côté de deux couvertures.
 */
.tbc-duel__cote .tbc-carte__couverture {
	margin-bottom: var(--wp--preset--spacing--espace-3);
}

.tbc-duel__cote .tbc-duel__cta {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: auto;
	text-align: center;
}


/*
 * LE PANNEAU DU VOTE.
 *
 * Le décompte, l'échéance, les voix et le formulaire formaient une suite de
 * paragraphes posés dans le vide, juste sous les deux cartes. Rien ne disait
 * où finissait la présentation et où commençait l'action.
 *
 * On en fait un panneau : un fond, un filet, du retrait, et beaucoup d'air
 * au-dessus. C'est le même vocabulaire que les cartes des candidats, à une
 * échelle plus grande — la page se lit alors en trois temps, le mot de celui
 * qui propose, les deux livres, le vote.
 */
.tbc-voix {
	padding: var(--wp--preset--spacing--espace-4);
	background-color: var(--wp--preset--color--papier-0);
	border: 1px solid var(--wp--preset--color--filet-fin);
	border-radius: 5px;
}

@media (min-width: 601px) {
	.tbc-voix {
		padding: var(--wp--preset--spacing--espace-5);
	}
}

/* Le titre du panneau n'a plus besoin de marge haute : le retrait la donne. */
.tbc-voix > h2:first-child {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--espace-3);
}

/*
 * Dans le panneau, la piste des barres passe sur un ton plus soutenu : sur
 * papier-0, papier-3 devenait trop discret pour qu'on distingue la portion
 * vide de la portion pleine.
 */
.tbc-voix .tbc-barre__piste {
	background-color: var(--wp--preset--color--papier-4);
}

/* Un filet sépare le décompte du dépôt des voix. */
.tbc-voix .tbc-barres {
	padding-bottom: var(--wp--preset--spacing--espace-4);
	border-bottom: 1px solid var(--wp--preset--color--filet-fin);
	margin-bottom: var(--wp--preset--spacing--espace-2);
}


/* =========================================================================
   18. LA HIÉRARCHIE : QUATRE RÔLES DE TEXTE, QUATRE ÉCARTS
   ========================================================================= */

/*
 * POURQUOI CETTE SECTION EXISTE.
 *
 * Le site avait des styles justes et une hiérarchie floue. Le symptôme : des
 * phrases comme « il manque 2 voix » qui flottent sans qu'on sache à quoi
 * elles se rattachent, et des valeurs comme « Meryem » posées seules, sans
 * rien pour dire qui c'est.
 *
 * Le diagnostic tient en une phrase : le même style servait à deux choses.
 * Les petites majuscules espacées étaient tantôt une ÉTIQUETTE qui nomme ce
 * qui suit, tantôt une PHRASE complète. L'œil apprend un style par ce qu'il
 * annonce ; quand un style annonce deux choses, il n'annonce plus rien.
 *
 * D'où quatre rôles, et un seul style par rôle. C'est la règle générale d'un
 * système de conception : ce n'est pas la beauté d'un style qui fait la
 * clarté, c'est le fait qu'il ne serve qu'à une chose.
 *
 * 1. ÉTIQUETTE (.tbc-surtitre)
 *    Petites majuscules espacées. Nomme ce qui suit. Deux ou trois mots, pas
 *    de verbe, pas de point final. Toujours collée à son objet.
 *    « note du club », « proposé par », « classer par ».
 *
 * 2. TITRE
 *    Famille de titrage. Une seule taille d'affichage par page, pour le
 *    sujet ; les sections en titre-3 ; rien d'autre au-dessus de titre-4.
 *
 * 3. MENTION (.tbc-mention)
 *    Une phrase de service : un état, une conséquence, une aide. Corps petit,
 *    encre atténuée, jamais de majuscules. « Il manque deux voix. »
 *
 * 4. DONNÉE (.tbc-donnees)
 *    Des faits chiffrés, dans la famille des chiffres, sans majuscules
 *    forcées. « 1906 · Actes Sud · 640 pages ».
 *
 * LA RÈGLE QUI TRANCHE, quand on hésite entre étiquette et mention : est-ce
 * qu'il y a un verbe ? S'il y a un verbe, c'est une phrase, donc une mention.
 */


/* --- 18.1 L'étiquette colle à son objet ---------------------------------- */

/*
 * Une étiquette séparée de ce qu'elle nomme n'est plus une étiquette, c'est
 * une ligne perdue. On réduit son écart en dessous, et on annule la marge
 * haute de ce qui la suit : les deux ne forment plus qu'un bloc.
 *
 * « + * » veut dire « n'importe quel élément qui suit immédiatement ». Une
 * seule règle répare toutes les paires du site d'un coup, sans avoir à
 * nommer chaque cas.
 */
.tbc-surtitre {
	margin-bottom: var(--wp--preset--spacing--espace-05);
}

.tbc-surtitre + * {
	margin-top: 0;
}


/* --- 18.2 La mention ----------------------------------------------------- */

.tbc-mention {
	font-family: var(--wp--preset--font-family--corps);
	font-size: var(--wp--preset--font-size--corps-sm);
	text-transform: none;
	letter-spacing: normal;
	margin: var(--wp--preset--spacing--espace-1) 0 0;
}

/*
 * LA COULEUR EST POSÉE À PART, ET CE DÉTAIL COMPTE.
 *
 * Quand l'éditeur applique une couleur, il ajoute la classe has-text-color.
 * Elle pèse exactement autant que .tbc-mention : selon l'ordre de chargement
 * des feuilles, l'une ou l'autre gagne, et on ne peut pas savoir laquelle.
 * Sur le bandeau sombre du résultat, perdre ce bras de fer donnait de
 * l'encre atténuée sur fond encre foncée — illisible.
 *
 * :not(.has-text-color) règle le problème par la logique plutôt que par la
 * force : la règle ne s'applique que là où personne n'a choisi de couleur.
 */
.tbc-mention:not(.has-text-color) {
	color: var(--wp--preset--color--encre-600);
}

/* Vide, elle disparaît : une mention sans texte ne garde pas sa place. */
.tbc-mention:empty {
	display: none;
}


/* --- 18.3 La donnée ------------------------------------------------------ */

.tbc-donnees {
	font-family: var(--wp--preset--font-family--chiffres);
	font-size: var(--wp--preset--font-size--legende);
	text-transform: none;
	letter-spacing: 0.01em;
	margin: var(--wp--preset--spacing--espace-05) 0 0;
}

.tbc-donnees:not(.has-text-color) {
	color: var(--wp--preset--color--noyer-600);
}

.tbc-donnees:empty {
	display: none;
}


/* --- 18.4 Le rythme vertical --------------------------------------------- */

/*
 * QUATRE ÉCARTS, ET PAS UN DE PLUS.
 *
 * L'espace est le premier outil de hiérarchie, avant la taille et avant la
 * couleur. Deux éléments proches se lisent comme liés, deux éléments écartés
 * comme distincts : c'est un réflexe de perception, pas une convention.
 *
 * Le site utilisait une dizaine d'écarts, souvent choisis au jugé. Résultat,
 * l'écart ne voulait plus rien dire. On n'en garde que quatre, et chacun a
 * un sens :
 *
 *   collé      espace-05  l'étiquette et son objet
 *   dedans     espace-2   deux lignes d'un même bloc
 *   entre      espace-4   deux blocs d'une même section
 *   section    espace-10  deux sections d'une page
 */
.tbc-section {
	margin-top: var(--wp--preset--spacing--espace-8);
}

@media (min-width: 601px) {
	.tbc-section {
		margin-top: var(--wp--preset--spacing--espace-10);
	}
}

/*
 * Le titre d'une section porte un filet fin au-dessus de lui. C'est le signe
 * le moins bruyant qui dise « nouvelle partie » : il se voit sans se lire.
 */
.tbc-section__titre {
	margin: 0 0 var(--wp--preset--spacing--espace-3);
	padding-top: var(--wp--preset--spacing--espace-2);
	border-top: 1px solid var(--wp--preset--color--filet-fin);
}


/* --- 18.5 Corrections de rôle -------------------------------------------- */

/*
 * « Il manque deux voix » est une phrase, pas une étiquette : elle repasse
 * en mention, sous les barres, à l'endroit où elle se comprend.
 */
.tbc-barres__reste {
	font-family: var(--wp--preset--font-family--corps);
	font-size: var(--wp--preset--font-size--corps-sm);
	text-transform: none;
	letter-spacing: normal;
	color: var(--wp--preset--color--encre-600);
	margin: var(--wp--preset--spacing--espace-2) 0 0;
}

/*
 * Le total passe en donnée : « 1 voix sur 3 membres » énonce un fait chiffré,
 * il ne nomme pas ce qui suit. En petites majuscules, il se faisait passer
 * pour un titre de section et l'œil s'y arrêtait deux fois.
 */
.tbc-barres__total {
	font-family: var(--wp--preset--font-family--chiffres);
	font-size: var(--wp--preset--font-size--legende);
	text-transform: none;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--noyer-600);
	margin: 0 0 var(--wp--preset--spacing--espace-2);
}

/* L'échéance du scrutin : une phrase, donc une mention. */
.tbc-echeance {
	font-family: var(--wp--preset--font-family--corps);
	font-size: var(--wp--preset--font-size--corps-sm);
	text-transform: none;
	letter-spacing: normal;
	color: var(--wp--preset--color--encre-600);
}

/*
 * Dans le bandeau sombre du résultat, les mentions et données sans couleur
 * explicite passent en papier : sinon elles héritent d'une encre prévue pour
 * un fond clair.
 */
.tbc-resultat .tbc-mention:not(.has-text-color),
.tbc-resultat .tbc-donnees:not(.has-text-color) {
	color: var(--wp--preset--color--papier-3);
}

/*
 * La consigne du scrutin est une mention, mais elle précède un bloc : elle
 * garde donc l'écart « entre ». Deux classes pour passer devant .tbc-mention,
 * qui remet toutes les marges basses à zéro.
 */
.tbc-etat .tbc-scrutin-fiche__consigne {
	margin-bottom: var(--wp--preset--spacing--espace-4);
}

/* Le compte d'un terme et le score d'un jalon sont des données. */
.tbc-terme__compte,
.tbc-jalon__vote {
	text-transform: none;
	letter-spacing: 0.01em;
}

/*
 * Les valeurs orphelines de la fiche livre reçoivent enfin une étiquette
 * dans le gabarit. Ici on s'assure seulement qu'elles se collent à elle.
 */
.tbc-info__mois,
.tbc-info__rapporteur,
.tbc-info__proposant,
.tbc-info__rapporteur-sombre {
	margin: 0;
}


/* =========================================================================
   19. LES RESPIRATIONS
   ========================================================================= */

/*
 * CE QUE CETTE SECTION CHERCHE À RÉGLER.
 *
 * Le site se lit bien mais il se lit sans pause : chaque page a la même
 * densité du début à la fin. L'œil n'a nulle part où se poser, et une
 * navigation sans pause finit par peser, même quand chaque écran est juste.
 *
 * Trois respirations, dans l'ordre du moins coûteux au plus coûteux :
 *
 *   1. L'ambiance, gratuite : la couverture du livre, floutée, derrière son
 *      en-tête. Aucun fichier à ajouter.
 *   2. La citation, gratuite aussi : du blanc et une phrase en grand.
 *   3. L'image, à insérer à la main depuis l'éditeur, via les motifs.
 */


/* --- 19.1 L'ambiance de la fiche livre ----------------------------------- */

/*
 * La bande occupe toute la largeur de la fenêtre sans un seul « vw ».
 *
 * Le truc : .tbc-fiche est un <main> en pleine largeur dont seuls les ENFANTS
 * sont ramenés à 1180 px. Un pseudo-élément posé dessus avec left: 0 et
 * right: 0 s'étend donc jusqu'aux bords, sans avoir à écrire width: 100vw —
 * qui, lui, déborde de la largeur de la barre de défilement et provoque un
 * glissement horizontal sur certains navigateurs.
 *
 * z-index: -1 place la bande derrière le contenu. Elle reste au-dessus du
 * fond de la page : quand <html> n'a pas de fond, celui de <body> est
 * transféré au canevas, et le canevas est encore en dessous.
 */
/*
 * LA BANDE EST PORTÉE PAR <body>, PAS PAR <main>.
 *
 * Accrochée à <main>, elle commençait sous l'en-tête : celui-ci occupe sa
 * place en haut de la page, et la teinte démarrait donc en dessous, avec une
 * ligne nette et une bande de papier nu au-dessus.
 *
 * Remonter la bande de la hauteur exacte de la barre fonctionnait, mais liait
 * deux éléments qui n'ont rien à voir : la moindre correction de hauteur
 * d'en-tête aurait décalé l'ambiance.
 *
 * Sur <body>, elle se dessine à partir du haut du DOCUMENT. Elle passe donc
 * derrière l'en-tête sans rien savoir de lui, et l'accueil n'a plus qu'une
 * seule surface, de la barre jusqu'au contenu.
 *
 * position: absolute sans parent positionné : le repère devient le bloc
 * conteneur initial, c'est-à-dire la page elle-même. C'est exactement ce
 * qu'on veut ici.
 *
 * z-index: -1 la place derrière tout le contenu. Elle reste au-dessus du fond
 * de page : quand <html> n'a pas de fond, celui de <body> est transféré au
 * canevas, et le canevas est encore en dessous.
 */
body::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	height: var(--tbc-ambiance-hauteur, 320px);
	background-image: var(--tbc-ambiance);
	background-size: cover;
	background-position: center 30%;

	/*
	 * Un flou large transforme l'image en aplat de couleur : on ne lit plus
	 * un titre ni un visage, on perçoit une teinte. C'est le but, sinon deux
	 * fois la même couverture sur le même écran ferait doublon.
	 *
	 * saturate remonte la couleur que le flou a fait perdre.
	 */
	filter: blur(36px) saturate(1.3);
	opacity: 0.4;

	/*
	 * Le masque fait disparaître la bande vers le bas au lieu de la couper
	 * net. Un bord franc se lirait comme une erreur de mise en page ; un
	 * fondu se lit comme une intention.
	 *
	 * -webkit-mask-image reste nécessaire pour Safari.
	 */
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);

	pointer-events: none;
}

/*
 * SANS COUVERTURE, RIEN NE S'AFFICHE, ET C'EST AUTOMATIQUE.
 *
 * Quand PHP n'écrit pas la variable --tbc-ambiance, var() ne trouve rien et
 * la déclaration background-image devient invalide. Le navigateur la jette :
 * la bande reste là, sans image, donc invisible. Pas de règle de secours à
 * écrire, pas de rectangle gris.
 *
 * C'est une propriété utile des variables CSS : une valeur manquante annule
 * la déclaration au lieu de produire un repli hasardeux.
 */


/* --- 19.2 La citation ----------------------------------------------------- */

/*
 * Une respiration typographique : beaucoup de blanc, une phrase en grand, un
 * filet vertical pour dire d'où elle vient. Elle ne coûte aucun fichier et
 * fonctionne partout — dans un compte rendu, dans un article, sur la page du
 * club.
 */
.tbc-respiration-citation {
	margin: var(--wp--preset--spacing--espace-10) 0;
	padding: var(--wp--preset--spacing--espace-2) 0 var(--wp--preset--spacing--espace-2) var(--wp--preset--spacing--espace-4);
	border-left: 2px solid var(--wp--preset--color--noyer-400);
}

.tbc-respiration-citation p {
	font-family: var(--wp--preset--font-family--titrage);
	font-size: var(--wp--preset--font-size--titre-2);
	font-weight: 300;
	font-style: italic;
	line-height: 1.3;
	color: var(--wp--preset--color--encre-800);
	margin: 0;
}

.tbc-respiration-citation cite,
.tbc-respiration-citation .tbc-respiration-citation__source {
	display: block;
	font-family: var(--wp--preset--font-family--chiffres);
	font-size: var(--wp--preset--font-size--micro);
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--noyer-600);
	margin-top: var(--wp--preset--spacing--espace-2);
}


/* --- 19.3 Les images de respiration --------------------------------------- */

/*
 * Une image insérée pour faire respirer n'est pas une illustration de
 * paragraphe : elle prend de la place, et sa légende est en retrait.
 */
.tbc-respiration-image {
	margin: var(--wp--preset--spacing--espace-10) 0;
}

/*
 * Une photo en portrait, affichée à sa taille naturelle sur 1320 px de large,
 * dépassait largement la hauteur de l'écran. On plafonne, et on recadre.
 */
.tbc-respiration-image img {
	width: 100%;
	max-height: 460px;
	object-fit: cover;
	border-radius: 5px;
	display: block;
}

.tbc-respiration-image figcaption,
.tbc-respiration-duo figcaption {
	font-family: var(--wp--preset--font-family--chiffres);
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--noyer-600);
	text-align: left;
	margin-top: var(--wp--preset--spacing--espace-1);
}

.tbc-respiration-duo {
	margin: var(--wp--preset--spacing--espace-10) 0;
}

.tbc-respiration-duo img {
	width: 100%;
	border-radius: 5px;
	display: block;
}

/*
 * Les deux images du duo se recadrent à la même hauteur. Sans ça, une photo
 * de portrait et une photo de paysage côte à côte donnent une ligne bancale,
 * et le duo perd tout son intérêt.
 */
.tbc-respiration-duo .wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}


/* --- 19.4 Le journal ------------------------------------------------------ */

/*
 * Une liste de billets, séparés par un filet plutôt qu'entassés. L'image mise
 * en avant, quand il y en a une, fait la respiration : elle passe en premier
 * et donne au billet un point d'accroche avant le titre.
 */
.tbc-billet {
	padding-bottom: var(--wp--preset--spacing--espace-6);
	margin-bottom: var(--wp--preset--spacing--espace-6);
	border-bottom: 1px solid var(--wp--preset--color--filet-fin);
}

/* Le dernier billet n'a pas de filet : il ne sépare de rien. */
.tbc-journal-page__liste .wp-block-post:last-child .tbc-billet {
	border-bottom: 0;
	margin-bottom: 0;
}

.tbc-billet__image {
	margin-bottom: var(--wp--preset--spacing--espace-3);
}

/*
 * Toutes les vignettes au même format, quel que soit le fichier déposé. Sans
 * ça, la liste devient une suite de rectangles de hauteurs différentes et le
 * filet de séparation ne se lit plus comme un rythme.
 */
.tbc-billet__image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 5px;
	display: block;
}

/* Sans image, aucune place réservée. */
.tbc-billet__image:empty {
	display: none;
}

.tbc-billet__signature {
	gap: var(--wp--preset--spacing--espace-15);
	margin-bottom: var(--wp--preset--spacing--espace-05);
}

.tbc-billet__titre {
	margin: 0 0 var(--wp--preset--spacing--espace-1);
}

.tbc-billet__titre a {
	text-decoration: none;
}

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

.tbc-billet__extrait {
	margin: 0;
	line-height: 1.55;
}


/* --- 19.5 Les bandeaux pleine largeur ------------------------------------- */

/*
 * UNE SEULE HAUTEUR POUR TOUT LE SITE.
 *
 * C'est la règle qui empêche les bandeaux de devenir n'importe quoi. Chaque
 * page qui en pose un obtient exactement le même format, quelle que soit
 * l'image déposée : un site où chaque page respire à sa manière n'a plus de
 * respiration du tout, il a des accidents.
 *
 * aspect-ratio impose le format, object-fit: cover remplit le cadre en
 * recadrant plutôt qu'en déformant. Le point d'accroche est au tiers
 * supérieur : sur une photo de scène, c'est là que se trouve le sujet neuf
 * fois sur dix.
 */
/*
 * UNE HAUTEUR EN PIXELS, PAS UN RAPPORT. C'est la correction qui compte.
 *
 * La première version fixait un rapport, 21/9. Un rapport grandit avec
 * l'écran : sur 1920 px de large, il donnait une bande de 820 px de haut, qui
 * remplissait la fenêtre à elle seule. Le bandeau ne coupait plus la page, il
 * la remplaçait.
 *
 * Une hauteur en pixels ne bouge pas. La bande reste une bande, sur un
 * portable comme sur un écran de bureau, et c'est l'image qui se recadre
 * pour la remplir. C'est le bon réflexe chaque fois qu'un élément doit garder
 * la même présence quelle que soit la fenêtre.
 */
.tbc-bandeau-image img {
	width: 100%;
	display: block;
	height: 180px;
	object-fit: cover;
	object-position: center 40%;
}

@media (min-width: 701px) {
	.tbc-bandeau-image img {
		height: 260px;
	}
}

@media (min-width: 1400px) {
	.tbc-bandeau-image img {
		height: 300px;
	}
}

/*
 * La légende revient dans la colonne de texte au lieu de courir sur toute la
 * largeur de l'écran. Une ligne de texte de 1600 px ne se lit pas.
 */
.tbc-bandeau-image figcaption {
	max-width: 760px;
	margin: var(--wp--preset--spacing--espace-1) auto 0;
	padding: 0 var(--wp--preset--spacing--espace-4);
	font-family: var(--wp--preset--font-family--chiffres);
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--noyer-600);
	text-align: left;
}

.tbc-bandeau-image,
.tbc-bandeau-titre {
	margin-top: var(--wp--preset--spacing--espace-10);
	margin-bottom: var(--wp--preset--spacing--espace-10);
}

/*
 * En tête de page, le bandeau colle au menu : il devient l'ouverture de la
 * page au lieu d'être une coupure au milieu.
 */
.tbc-bandeau-image:first-child,
.tbc-bandeau-titre:first-child,
main > .tbc-bandeau-image:first-of-type:first-child,
main > .tbc-bandeau-titre:first-of-type:first-child {
	margin-top: 0;
}

.tbc-bandeau-titre {
	min-height: 340px !important;
}

@media (max-width: 700px) {
	.tbc-bandeau-titre {
		min-height: 260px !important;
	}
}

/*
 * Le texte du bandeau s'aligne à gauche et s'arrête avant le bord droit. Un
 * titre centré sur toute la largeur oblige l'œil à chercher le début de
 * chaque ligne.
 */
.tbc-bandeau-titre .wp-block-cover__inner-container {
	max-width: 760px;
	margin-left: 0;
	text-align: left;
}

.tbc-bandeau-titre h2 {
	margin: 0;
	max-width: 22ch;
}

/*
 * Un dégradé du bas vers le haut par-dessus le voile uni. Le texte est en
 * bas, c'est donc là qu'il faut le plus d'assombrissement ; le haut de
 * l'image reste lisible. Un voile uni à la même force noierait toute la
 * photo pour protéger deux lignes.
 */
.tbc-bandeau-titre .wp-block-cover__background {
	/*
	 * color-mix fabrique une transparence À PARTIR d'une couleur du thème,
	 * au lieu d'écrire un rgba() en dur qui ne suivrait pas un changement de
	 * palette. « encre-900 à 75 %, le reste transparent » se lit comme la
	 * phrase qu'on aurait dite.
	 *
	 * C'est la réponse propre à un besoin fréquent : une couleur du thème,
	 * mais translucide.
	 */
	background-image: linear-gradient(
		to top,
		color-mix(in srgb, var(--wp--preset--color--encre-900) 75%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--encre-900) 15%, transparent) 70%
	);
}

/* Sans image déposée, le bandeau reste un aplat sombre lisible. */
.tbc-bandeau-titre:not(:has(img)) .wp-block-cover__background {
	background-image: none;
}

.tbc-respiration-duo__phrase {
	max-width: 56ch;
	margin: 0 0 var(--wp--preset--spacing--espace-3);
	font-family: var(--wp--preset--font-family--titrage);
	font-size: var(--wp--preset--font-size--titre-4);
	font-weight: 300;
	font-style: italic;
	line-height: 1.35;
	color: var(--wp--preset--color--encre-700);
}


/* --- 19.6 La zone libre de l'accueil -------------------------------------- */

/*
 * Le bloc « contenu » de WordPress rend toujours son enveloppe, même quand la
 * page est vide : sans cette règle, l'accueil garderait un espace mort entre
 * les dernières lectures et le journal.
 *
 * :empty ne correspond qu'à un élément sans AUCUN enfant, pas même un espace.
 * C'est exactement le cas ici, et c'est ce qui rend la règle fiable.
 */
.tbc-accueil__libre {
	margin-top: var(--wp--preset--spacing--espace-10);
}

/* Même remarque : c'est PHP qui retire cette zone quand la page est vide. */


/* =========================================================================
   20. LES ÉTATS : CE QUI SE PASSE QUAND ON SURVOLE ET QU'ON CLIQUE
   ========================================================================= */

/*
 * CE QUI MANQUAIT.
 *
 * Sur une carte de livre, seuls la couverture et le titre étaient
 * cliquables. Entre les deux, sur l'auteur, sur la note, sur le blanc, le
 * curseur redevenait une flèche et rien ne se passait. Personne ne le
 * formule, mais tout le monde le ressent : on vise un mot précis au lieu de
 * viser une carte.
 *
 * LA TECHNIQUE, dite du lien étiré. On ne multiplie pas les liens — ce serait
 * une catastrophe pour un lecteur d'écran, qui annoncerait trois fois la même
 * destination. On garde UN seul vrai lien, celui du titre, et on étend sa
 * zone sensible à toute la carte au moyen d'un pseudo-élément transparent.
 *
 * inset: 0 est un raccourci pour top/right/bottom/left à zéro : le
 * pseudo-élément couvre exactement son parent positionné.
 *
 * LE PRIX À PAYER, et il est réel : sélectionner du texte dans une carte
 * devient malaisé, puisque le clic est capté. Sur des cartes qu'on parcourt
 * et qu'on ne recopie pas, l'échange est bon. Sur un article, il ne le serait
 * pas — c'est pourquoi cette règle ne s'applique qu'aux cartes.
 */
.tbc-carte,
.tbc-candidat,
.tbc-ligne-livre {
	position: relative;
}

.tbc-carte .tbc-carte__titre a::after,
.tbc-candidat h3 a::after,
.tbc-ligne-livre h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/*
 * Le retour visuel du survol se joue sur la carte entière, pas sur le seul
 * titre : c'est la carte qu'on vise, c'est elle qui doit répondre.
 */
.tbc-carte:hover .tbc-carte__titre a,
.tbc-candidat:hover h3 a,
.tbc-ligne-livre:hover h3 a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tbc-candidat {
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.tbc-candidat:hover {
	border-color: var(--wp--preset--color--noyer-400);
	background-color: var(--wp--preset--color--papier-1);
}

.tbc-carte__couverture img,
.tbc-candidat__couverture img {
	transition: opacity 0.15s ease;
}

.tbc-carte:hover .tbc-carte__couverture img,
.tbc-candidat:hover .tbc-candidat__couverture img {
	opacity: 0.92;
}

/*
 * L'anneau de focus doit rester visible AU-DESSUS du lien étiré, sinon il
 * disparaît derrière lui au clavier — et le clavier est justement le mode où
 * l'on en a besoin.
 */
.tbc-carte .tbc-carte__titre a:focus-visible,
.tbc-candidat h3 a:focus-visible,
.tbc-ligne-livre h3 a:focus-visible {
	outline: 2px solid var(--wp--preset--color--port-500);
	outline-offset: 3px;
	z-index: 2;
}

/*
 * LES DEUX RAYONS DU SITE, pour mémoire, parce que c'est une règle qu'on
 * oublie et qu'on enfreint sans le voir :
 *
 *   3 px  → ce qu'on manipule : boutons, champs, pastilles, cases de vote
 *   5 px  → ce qui porte : cartes, panneaux, bandeaux, images
 *
 * Deux valeurs, deux familles d'objets. Toute troisième valeur introduite
 * plus tard sera une erreur, pas une nuance.
 */

/*
 * Les boutons répondent aussi, mais sans mouvement. Un bouton qui se déplace
 * au survol se dérobe sous le curseur : le geste devient une poursuite.
 */
.tbc-bouton {
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}


/* --- 19.7 L'en-tête illustré : le titre dans le bandeau ------------------- */

/*
 * POURQUOI LE TITRE ENTRE DANS L'IMAGE.
 *
 * Une image PUIS un titre, ce sont deux ouvertures à la suite : la page
 * commence deux fois, et il faut deux fois la hauteur. Le titre posé DANS
 * l'image n'en fait qu'une. On y gagne la moitié de la hauteur d'ouverture,
 * ce qui était exactement le reproche fait aux bandeaux.
 *
 * Le montage tient en trois couches empilées : l'image, un voile, le texte.
 * On les superpose avec position: absolute plutôt qu'avec background-image,
 * pour que l'image reste une vraie balise <img> — donc redimensionnée par le
 * navigateur selon l'écran, et annoncée par un lecteur d'écran si elle porte
 * un texte alternatif.
 */
.tbc-entete-illustre {
	position: relative;
	height: 240px;
	overflow: hidden;
	background-color: var(--wp--preset--color--encre-900);

	/*
	 * La marge haute négative annule celle que le gabarit pose sur <main>.
	 * Un bandeau d'ouverture doit toucher le menu : un liseré de fond entre
	 * les deux se lit comme un défaut d'assemblage.
	 *
	 * C'est le seul endroit du thème où une marge négative se justifie, et
	 * elle est exactement l'inverse d'une valeur connue — pas un chiffre
	 * trouvé à l'œil.
	 */
	margin-top: calc(-1 * var(--wp--preset--spacing--espace-6));
	margin-bottom: var(--wp--preset--spacing--espace-6);
}

@media (min-width: 701px) {
	.tbc-entete-illustre {
		height: 320px;
	}
}

@media (min-width: 1400px) {
	.tbc-entete-illustre {
		height: 360px;
	}
}

.tbc-entete-illustre__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
}

/*
 * Le voile assombrit le bas, là où se trouve le texte, et laisse le haut de
 * l'image respirer. Un voile uni de la même force noierait toute la photo
 * pour protéger une seule ligne.
 *
 * color-mix fabrique la transparence à partir d'une couleur du thème : la
 * palette peut changer, le voile suit.
 */
.tbc-entete-illustre__voile {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to top,
		color-mix(in srgb, var(--wp--preset--color--encre-900) 82%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--encre-900) 45%, transparent) 45%,
		color-mix(in srgb, var(--wp--preset--color--encre-900) 10%, transparent) 100%
	);
}

/*
 * Le texte suit la largeur du site et se cale en bas à gauche. Aligné au
 * même bord que tout le contenu qui suit, il donne à la page une seule
 * colonne de départ au lieu de deux.
 */
.tbc-entete-illustre__texte {
	position: absolute;
	inset: auto 0 0 0;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 var(--wp--preset--spacing--espace-4) var(--wp--preset--spacing--espace-4);
}

.tbc-entete-illustre__titre {
	font-family: var(--wp--preset--font-family--titrage);
	font-size: var(--wp--preset--font-size--affichage-2);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.06;
	color: var(--wp--preset--color--papier-0);
	margin: 0;
	max-width: 20ch;

	/*
	 * Une ombre portée très douce, en dernier recours : si une photo très
	 * claire passait malgré le voile, le titre resterait lisible. Elle ne se
	 * voit pas sur une image sombre.
	 */
	text-shadow: 0 1px 12px color-mix(in srgb, var(--wp--preset--color--encre-900) 55%, transparent);
}

/*
 * LE CAS SANS IMAGE. Quand aucune image n'est choisie, PHP rend le titre
 * seul. Il doit alors ressembler exactement aux titres des autres pages :
 * un emplacement vide ne doit pas se remarquer.
 */
.tbc-entete-nu {
	font-family: var(--wp--preset--font-family--titrage);
	font-size: var(--wp--preset--font-size--affichage-2);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.06;
	color: var(--wp--preset--color--encre-900);
	margin: 0 0 var(--wp--preset--spacing--espace-3);
}


/* =========================================================================
   21. LA MARQUE
   ========================================================================= */

/*
 * Le signe et le nom forment un seul objet cliquable, aligné sur leur milieu.
 *
 * display: inline-flex sur le lien plutôt que sur son parent : c'est le LIEN
 * qui doit contenir les deux, sinon le signe se retrouve en dehors de la
 * zone cliquable et l'on peut viser le logo sans rien déclencher.
 */
.tbc-marque a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--espace-15);
	text-decoration: none;
}

/*
 * La hauteur du signe se règle en pixels et sa largeur suit : un signet est
 * deux fois plus haut que large, laisser la largeur libre évite de le
 * déformer si la proportion du dessin change un jour.
 *
 * flex: none l'empêche de se comprimer quand le nom du club est long.
 */
.tbc-marque__signe {
	height: 36px;
	width: auto;
	flex: none;
	display: block;
}

@media (min-width: 601px) {
	.tbc-marque__signe {
		height: 48px;
	}
}

/*
 * Le signe hérite de la couleur du lien grâce à currentColor. On la pose donc
 * une seule fois, sur le lien, et les deux éléments restent d'accord.
 */
.tbc-marque a:hover .tbc-marque__signe,
.tbc-marque a:focus-visible .tbc-marque__signe {
	opacity: 0.85;
	transition: opacity 0.15s ease;
}

/*
 * Le nom du club ne se coupe pas en deux lignes à côté du signe : la marque
 * deviendrait un pavé. Sur les très petits écrans, c'est la taille du texte
 * qui cède, pas la mise en page.
 */
.tbc-marque a {
	white-space: nowrap;
}

@media (max-width: 420px) {
	.tbc-marque {
		font-size: var(--wp--preset--font-size--titre-4) !important;
	}

	.tbc-marque__signe {
		height: 30px;
	}
}


/* =========================================================================
   22. LE LIVRE ÉCARTÉ, ET L'AIR AUTOUR DES PASTILLES
   ========================================================================= */

/*
 * LA PASTILLE COLLÉE À LA COUVERTURE.
 *
 * Sur une carte, l'ordre est : couverture, mois de lecture, pastille. Pour un
 * livre proposé, le mois est vide — le paragraphe se masque, mais il reste le
 * frère précédent de la pastille. Or la règle « une étiquette colle à ce qui
 * la suit » (section 18.1) annulait alors la marge haute de la pastille, qui
 * venait buter contre l'image.
 *
 * Deux classes suffisent à repasser devant cette règle. C'est le bon dosage :
 * juste assez de précision pour gagner, pas un !important qui gagnerait
 * partout et pour toujours.
 */
/* Sur une carte, l'étiquette est désormais posée sur la couverture et sortie
   du flux : elle n'a plus de marge haute à corriger. La règle ne vaut plus
   que pour les candidats d'un scrutin, où elle reste dans le flux. */
.tbc-candidat .tbc-carte__pastille {
	margin-top: var(--wp--preset--spacing--espace-2);
}

/*
 * Sur la fiche, la couverture et la pastille sont dans deux colonnes. Elles
 * ne se touchent qu'une fois empilées, sur téléphone : c'est là qu'il faut
 * poser l'écart, et nulle part ailleurs.
 */
@media (max-width: 781px) {
	.tbc-fiche__tete .tbc-pastille {
		margin-top: var(--wp--preset--spacing--espace-2);
	}
}

/*
 * « NON RETENU » NE SE DIT PAS COMME « PROPOSÉ ».
 *
 * Les deux livres portent le même statut enregistré, mais pas la même
 * promesse : l'un attend son tour, l'autre l'a déjà eu. Le filet passe donc
 * du noyer clair au gris de papier, et le texte s'atténue d'un cran.
 *
 * La nuance est volontairement faible. Un livre écarté n'est pas un livre
 * raté : le club a choisi l'autre ce mois-là, voilà tout. Le signaler en
 * rouge serait un contresens.
 */
body.statut-non-retenu .tbc-pastille--propose {
	border-color: var(--wp--preset--color--papier-4);
	color: var(--wp--preset--color--encre-500);
}


/* --- 22.1 La pastille du livre écarté ------------------------------------ */

/*
 * DEUX ÉTATS QUI SE RESSEMBLAIENT TROP.
 *
 * « proposé » et « non retenu » portaient le même dessin de pastille : un
 * cadre, un fond, des petites majuscules. Dans une grille, l'œil lit d'abord
 * la FORME et seulement ensuite le mot. Deux formes identiques disaient donc
 * « même chose » avant que le texte ne dise le contraire.
 *
 * On change de forme, pas seulement de mot. Une pastille encadrée annonce un
 * état vivant : « en lecture », « proposé », « vote ouvert ». Un livre écarté
 * n'est pas un état vivant, c'est un fait passé. Il perd donc son cadre et
 * son fond, et devient une simple mention en petites capitales.
 *
 * La règle, réutilisable : ce qui se ressemble se lit comme équivalent. Pour
 * distinguer deux choses, changer le mot ne suffit jamais.
 */
.tbc-pastille--non-retenu {
	background-color: transparent;
	border: 0;
	padding-left: 0;
	padding-right: 0;
	color: var(--wp--preset--color--encre-500);
}

/*
 * Le point médian entre l'état et le mois reprend la ponctuation employée
 * partout ailleurs sur le site pour séparer deux faits sur une même ligne.
 */
.tbc-pastille--non-retenu::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 1px;
	margin-right: 6px;
	vertical-align: middle;
	background-color: var(--wp--preset--color--noyer-400);
}

/* Sur la fiche, la mention garde sa place mais reste discrète. */
body.statut-non-retenu .tbc-pastille--propose {
	background-color: transparent;
	border: 0;
	padding-left: 0;
	padding-right: 0;
	color: var(--wp--preset--color--encre-500);
}


/* --- 22.2 La section des titres non retenus ------------------------------ */

/*
 * Une section en retrait, en bas de l'archive. Elle existe, elle se consulte,
 * mais elle ne réclame pas l'attention : ce sont des livres que le club a
 * écartés, pas des livres qu'il propose.
 *
 * Le fond légèrement creusé et le retrait suffisent à la détacher. Pas de
 * filet supplémentaire : le titre de section en porte déjà un.
 */
.tbc-ecartes {
	background-color: var(--wp--preset--color--papier-2);
	border-radius: 5px;
	padding: var(--wp--preset--spacing--espace-4);
}

@media (min-width: 601px) {
	.tbc-ecartes {
		padding: var(--wp--preset--spacing--espace-5);
	}
}

.tbc-ecartes .tbc-section__titre {
	border-top: 0;
	padding-top: 0;
}

.tbc-ecartes__mot {
	max-width: 62ch;
	margin: 0 0 var(--wp--preset--spacing--espace-4);
}

/*
 * Les couvertures des écartés sont un cran plus discrètes que celles des
 * lectures. Elles restent parfaitement lisibles : c'est une hiérarchie, pas
 * une mise à l'écart.
 */
.tbc-ecartes .tbc-carte__couverture img {
	opacity: 0.88;
}

.tbc-ecartes .tbc-carte:hover .tbc-carte__couverture img {
	opacity: 1;
}


/* --- 22.3 L'état d'un livre sur sa carte --------------------------------- */

/*
 * LE LIVRE EN COURS N'ÉTAIT SIGNALÉ NULLE PART DANS L'ARCHIVE.
 *
 * Les cartes n'affichaient que la pastille « proposé ». Le livre du mois s'y
 * présentait donc comme les livres déjà lus : même mois, même dessin, rien
 * pour dire qu'il est en cours. C'est pourtant le seul de la page que
 * quelqu'un pourrait être en train de lire.
 *
 * Il reprend la pastille pleine de la page d'accueil : fond encre, texte
 * papier. Le même signe pour le même état, partout — c'est ce qui fait qu'on
 * apprend un site sans l'apprendre.
 *
 * La classe s'appelle « --en-cours » et non « --en-lecture » : cette dernière
 * est réservée à la fiche, où une règle de corps la masque hors du bon
 * statut. La réutiliser ici la ferait disparaître de l'archive.
 */
.tbc-pastille--en-cours {
	background-color: var(--wp--preset--color--encre-800);
	color: var(--wp--preset--color--papier-1);
	border: 0;
}


/* --- 22.4 Le bouton du titre retenu -------------------------------------- */

/*
 * UN BOUTON INVISIBLE, ET LA RÈGLE QUI LE RENDAIT TEL.
 *
 * Le bandeau du résultat impose une couleur de lien claire à tout ce qu'il
 * contient — c'est voulu, ses liens sont sur fond sombre. WordPress traduit
 * ça en une règle qui vise « tout lien sauf les boutons » :
 *
 *   .wp-block-group.has-link-color a:where(:not(.wp-element-button))
 *
 * Or le bloc « Lire la suite » ne rend pas un .wp-element-button : c'est un
 * simple lien. Il tombait donc dans la règle et recevait la couleur claire —
 * du papier sur du papier, un bouton parfaitement invisible.
 *
 * Trois classes suffisent à repasser devant. Et la leçon est la même que pour
 * le formulaire de vote : quand une exception de WordPress est écrite pour un
 * bloc précis, tout ce qui n'est pas ce bloc y échappe.
 */
.tbc-resultat .tbc-bouton.tbc-bouton--clair {
	color: var(--wp--preset--color--encre-800);
	background-color: var(--wp--preset--color--papier-1);
	display: inline-block;
	margin-top: var(--wp--preset--spacing--espace-3);
}

.tbc-resultat .tbc-bouton.tbc-bouton--clair:hover,
.tbc-resultat .tbc-bouton.tbc-bouton--clair:focus-visible {
	color: var(--wp--preset--color--encre-900);
	background-color: var(--wp--preset--color--papier-0);
}


/* --- 22.5 Le mot de celui qui propose ------------------------------------ */

/*
 * LA ZONE VIDE SE MASQUE CÔTÉ PHP, PAS ICI. Voir section 18 de functions.php.
 *
 * J'avais écrit « .tbc-mot:has(.tbc-mot__texte:empty) ». Ça ne pouvait pas
 * fonctionner : :empty exige un élément SANS AUCUN enfant, espaces et retours
 * à la ligne compris. Or le bloc « Contenu » de WordPress rend toujours une
 * enveloppe avec au moins un saut de ligne dedans. Elle n'est jamais vide au
 * sens de CSS, même quand elle ne contient rien de lisible.
 *
 * La règle à retenir : :empty marche pour un élément qu'on produit soi-même
 * et qu'on sait rendre littéralement vide — nos paragraphes de liaison, par
 * exemple. Il ne marche pas sur une enveloppe fabriquée par WordPress.
 */


/* =========================================================================
   23. L'EN-TÊTE POSÉ SUR UN BANDEAU
   ========================================================================= */

/*
 * UNE SEULE SOURCE POUR LA HAUTEUR DE L'EN-TÊTE.
 *
 * Deux règles en ont besoin : celle qui glisse le bandeau sous la barre, et
 * celle qui lui rend la hauteur perdue. Si elles portaient chacune leur
 * chiffre, la moindre correction en oublierait une et le titre se
 * décalerait. Une variable, deux lectures.
 */
:root {
	--tbc-entete-hauteur: 64px;
}

@media (min-width: 783px) {
	:root {
		--tbc-entete-hauteur: 88px;
	}
}

/*
 * LE BANDEAU PASSE SOUS L'EN-TÊTE.
 *
 * Jusqu'ici la barre occupait sa place en haut de la page et l'image
 * commençait dessous : deux zones, deux couleurs, une couture. En remontant
 * l'image de la hauteur exacte de la barre, elle passe DERRIÈRE — l'en-tête
 * garde son z-index de 100, il reste donc au-dessus.
 *
 * On rend ensuite au bandeau la hauteur qu'on vient de lui prendre, sinon le
 * titre remonterait d'autant.
 *
 * Sur la marge négative : elle vaut l'inverse exact de deux valeurs connues,
 * la hauteur de la barre et la marge haute du gabarit. Ce n'est pas un
 * chiffre trouvé à l'œil.
 */
body.entete-sur-image .tbc-entete-illustre {
	margin-top: calc(-1 * (var(--tbc-entete-hauteur) + var(--wp--preset--spacing--espace-6)));
	height: calc(240px + var(--tbc-entete-hauteur));
}

@media (min-width: 701px) {
	body.entete-sur-image .tbc-entete-illustre {
		height: calc(320px + var(--tbc-entete-hauteur));
	}
}

@media (min-width: 1400px) {
	body.entete-sur-image .tbc-entete-illustre {
		height: calc(360px + var(--tbc-entete-hauteur));
	}
}

/*
 * LE VOILE DE L'EN-TÊTE, SUR UNE IMAGE.
 *
 * Un dégradé sombre du haut vers le bas, qui s'éteint complètement. C'est ce
 * qui permet de poser du texte clair sur une photo dont on ne sait rien —
 * une plage de sable blanc ou un ciel de midi mettraient sinon le menu en
 * échec — sans créer la moindre arête : le voile ne s'arrête pas, il
 * disparaît.
 *
 * Le flou est retiré ici. Il servait à rendre lisible du texte défilant
 * derrière la barre ; sur une image fixe il ne fait que brouiller la photo.
 */
body.entete-sur-image:not(.entete-posee) .tbc-entete::before {
	opacity: 1;
	background-color: transparent;
	/*
	 * PLUS SOMBRE QU'IL N'Y PARAÎT NÉCESSAIRE, ET C'EST VOULU.
	 *
	 * Ma première version montait à 60 % puis s'éteignait vite. Sur une photo
	 * claire — une page de livre au soleil, un ciel — le menu devenait
	 * illisible : le voile ne compensait pas la luminosité du fond.
	 *
	 * On ne peut rien supposer d'une image qu'on ne choisit pas. Le voile doit
	 * donc suffire dans le pire des cas, celui d'une photo presque blanche.
	 * D'où un plateau soutenu sur toute la hauteur de la barre, et le fondu
	 * seulement en dessous : c'est lui qui évite l'arête, pas la faiblesse du
	 * voile.
	 *
	 * On étend le pseudo-élément sous l'en-tête pour que le fondu ait la place
	 * de se faire — sinon il devrait tenir dans 48 px et redeviendrait une
	 * transition brutale.
	 */
	bottom: auto;
	height: calc(100% + 48px);
	background-image: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--wp--preset--color--encre-900) 72%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--encre-900) 62%, transparent) 55%,
		transparent 100%
	);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/*
 * LES ENTRÉES PASSENT EN CLAIR.
 *
 * SUR LE !important, QUI N'EST PAS UN CAPRICE ICI.
 *
 * La couleur du titre du site est posée par un réglage de bloc, et WordPress
 * traduit ces réglages en une règle qu'il marque lui-même !important :
 *
 *   .wp-elements-xxxx a:where(:not(.wp-element-button)) { color: … !important }
 *
 * Une déclaration !important ne se bat pas à la précision : seule une autre
 * !important peut la reprendre. On en pose donc une, mais avec une portée
 * strictement limitée — un en-tête, sur une page à bandeau, non défilée.
 *
 * La règle générale tient toujours : !important masque presque toujours un
 * problème de précision. L'exception, c'est quand la déclaration d'en face
 * en porte déjà un et qu'on ne peut pas la modifier.
 */
body.entete-sur-image:not(.entete-posee) .tbc-entete a,
body.entete-sur-image:not(.entete-posee) .tbc-entete .wp-block-site-title a,
body.entete-sur-image:not(.entete-posee) .tbc-entete .wp-block-navigation-item__content {
	color: var(--wp--preset--color--papier-0) !important;
}

/* Le bouton d'ouverture du menu mobile est dessiné avec la couleur du texte. */
body.entete-sur-image:not(.entete-posee) .tbc-entete .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--papier-0);
}

body.entete-sur-image:not(.entete-posee) .tbc-entete .wp-block-navigation__responsive-container-open svg {
	fill: currentColor;
}

/*
 * Le champ de recherche et le bouton du compte se déclinent aussi : un filet
 * clair et un texte clair, sur fond transparent.
 */
body.entete-sur-image:not(.entete-posee) .tbc-entete .wp-block-search__inside-wrapper {
	border-color: var(--wp--preset--color--voile-papier);
	background-color: transparent;
}

body.entete-sur-image:not(.entete-posee) .tbc-entete .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--papier-3);
}

body.entete-sur-image:not(.entete-posee) .tbc-entete .tbc-nav__compte a {
	border-color: var(--wp--preset--color--voile-papier);
}

/*
 * La page courante garde son soulignement, en clair lui aussi.
 */
body.entete-sur-image:not(.entete-posee) .tbc-nav .current-menu-item > a {
	border-bottom-color: var(--wp--preset--color--papier-3);
}

/*
 * LE PANNEAU MOBILE RESTE CLAIR, QUOI QU'IL ARRIVE.
 *
 * Une fois ouvert, il couvre l'écran et n'a plus rien d'un en-tête posé sur
 * une image. Ses règles doivent donc reprendre le dessus — d'où la remise à
 * la couleur d'encre, avec le même poids que celles qui précèdent.
 */
body.entete-sur-image .wp-block-navigation__responsive-container.is-menu-open a,
body.entete-sur-image .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--encre-900) !important;
}


/* --- 23.1 Lisibilité garantie sur une photo claire ----------------------- */

/*
 * L'OMBRE PORTÉE, EN DERNIER RECOURS.
 *
 * Le voile fait l'essentiel du travail. L'ombre est la ceinture après les
 * bretelles : elle ne se voit pas sur un fond sombre, et elle sauve le texte
 * si une image très claire passait malgré tout.
 *
 * C'est une pratique courante pour du texte sur photo, à condition de rester
 * discrète. Une ombre franche donnerait l'aspect d'une vignette de diaporama.
 */
body.entete-sur-image:not(.entete-posee) .tbc-entete {
	text-shadow: 0 1px 4px color-mix(in srgb, var(--wp--preset--color--encre-900) 65%, transparent);
}

/*
 * Le champ de recherche reçoit son propre fond translucide. Un simple filet
 * clair ne suffisait pas : le texte saisi et le libellé d'invite se posaient
 * directement sur la photo.
 */
body.entete-sur-image:not(.entete-posee) .tbc-entete .wp-block-search__inside-wrapper {
	background-color: color-mix(in srgb, var(--wp--preset--color--encre-900) 35%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--papier-0) 45%, transparent);
}

body.entete-sur-image:not(.entete-posee) .tbc-entete .wp-block-search__input {
	color: var(--wp--preset--color--papier-0);
}

body.entete-sur-image:not(.entete-posee) .tbc-entete .wp-block-search__input::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--papier-0) 75%, transparent);
	opacity: 1;
}

body.entete-sur-image:not(.entete-posee) .tbc-entete .wp-block-search__button svg {
	fill: var(--wp--preset--color--papier-0);
}

/*
 * Le bouton du compte garde son fond plein : c'est une action, elle doit
 * rester la chose la plus visible de la barre, quelle que soit l'image.
 * On lui retire seulement l'ombre héritée du parent, qui salirait son texte.
 */
body.entete-sur-image:not(.entete-posee) .tbc-entete .tbc-nav__compte a {
	text-shadow: none;
	border-color: transparent;
}


/* =========================================================================
   24. LES PAGES DE SCRUTIN À LA LARGEUR DU SITE
   ========================================================================= */

/*
 * LE PROBLÈME.
 *
 * Les livres, l'accueil et les archives tiennent dans un cadre de 1320 px.
 * Les scrutins tenaient dans 820 px pour la fiche, 980 px pour la liste.
 * Une page de scrutin commençait donc 250 px plus à droite que la page qui
 * la précédait, et se terminait 250 px plus à gauche. Rien n'était cassé,
 * mais la marge changeait d'une page à l'autre : l'œil le voit avant de
 * savoir le nommer, et le site paraît mal cadré.
 *
 * LE CHOIX.
 *
 * Le cadre passe à 1320 px sur les deux gabarits, comme partout ailleurs.
 * Mais une ligne de texte de 1320 px de long ne se lit pas : au retour à la
 * ligne, l'œil ne retrouve pas le début de la ligne suivante. On garde donc
 * une mesure de lecture — autour de 62 caractères — sur les blocs de prose
 * seulement. Le cadre est commun, la ligne de texte reste courte.
 *
 * C'est la distinction utile : la largeur de la PAGE et la largeur de la
 * LIGNE sont deux réglages différents. Les confondre, c'est choisir entre un
 * site mal cadré et un texte illisible.
 */

.tbc-scrutin-fiche .tbc-mention,
.tbc-scrutin-fiche .tbc-mot__texte p,
.tbc-scrutin-fiche .tbc-mot__texte li,
.tbc-frise__chapeau,
.tbc-jalon__mot {
	max-width: 62ch;
}

/*
 * L'EN-TÊTE : l'état rejoint le titre.
 *
 * « clos » posé seul au-dessus du mois n'appartenait à rien : une pastille
 * est une étiquette, et une étiquette a besoin de la chose qu'elle étiquette
 * à côté d'elle. Sur la même ligne que le titre du scrutin, elle redevient
 * lisible : on lit « clos · Le duel de septembre » d'un seul mouvement.
 *
 * align-items: baseline aligne les deux textes sur la ligne d'écriture et
 * non sur le haut des boîtes : la pastille, plus petite, ne flotte pas.
 */
.tbc-scrutin-fiche__ligne {
	align-items: baseline;
	gap: var(--wp--preset--spacing--espace-2);
	margin-top: var(--wp--preset--spacing--espace-1);
}

.tbc-scrutin-fiche__ligne .tbc-pastille,
.tbc-scrutin-fiche__ligne .tbc-scrutin-fiche__titre {
	margin: 0;
}

/*
 * LE DUEL SUR UN CADRE LARGE.
 *
 * Deux colonnes de 1320 px donnent 640 px par carte. Une couverture occupant
 * toute la largeur de sa carte deviendrait une affiche de 640 px de large et
 * presque 1000 px de haut : le titre du livre passerait sous la ligne de
 * flottaison. On plafonne donc la couverture, pas la carte.
 *
 * width: auto avec max-width laisse l'image garder ses proportions : sans
 * lui, une hauteur imposée l'écraserait.
 */
@media (min-width: 901px) {
	.tbc-duel__cote .tbc-carte__couverture img {
		max-width: 240px;
		width: auto;
		height: auto;
	}
}

/*
 * Le bouton « Voir la fiche » ne s'étire plus sur 640 px : un bouton large
 * comme une carte de crédit se lit comme un bouton, un bouton large comme
 * une porte se lit comme une bannière.
 */
@media (min-width: 901px) {
	.tbc-duel__cote .tbc-duel__cta {
		width: auto;
		max-width: 280px;
	}
}

/*
 * LE PANNEAU DU VOTE.
 *
 * Le panneau garde la largeur du cadre — c'est un meuble, il a le droit
 * d'être large — mais ce qu'on y lit garde sa mesure : les voix déposées,
 * le formulaire et l'échéance. Les barres de décompte, elles, s'étirent :
 * plus une barre est longue, mieux on compare deux longueurs.
 */
.tbc-voix .tbc-remarque,
.tbc-voix .comment-form,
.tbc-voix .tbc-echeance {
	max-width: 68ch;
}

/*
 * LE RÉSULTAT.
 *
 * Le bandeau sombre s'étire lui aussi. La colonne du milieu — titre, auteur,
 * édition, score — garde sa mesure : sans elle, « 5 voix sur 7 » se
 * retrouverait à un mètre de la couverture qu'il commente.
 */
.tbc-resultat__livre > .wp-block-column:nth-child(2) {
	max-width: 62ch;
}

/*
 * LA FRISE DES SCRUTINS.
 *
 * L'en-tête d'un jalon — le mois à gauche, le proposant à droite — était
 * séparé de 980 px. À 1320 px les deux bouts de la ligne n'ont plus rien à
 * voir l'un avec l'autre. On les regroupe à gauche.
 */
.tbc-frise .tbc-jalon__entete {
	justify-content: flex-start;
	gap: var(--wp--preset--spacing--espace-2);
	align-items: baseline;
}

/*
 * Ouvert et clos ne se ressemblent pas.
 *
 * La pastille était argile dans les deux cas : la même couleur d'alerte
 * douce pour « viens voter » et pour « c'est fini ». L'argile appelle, elle
 * doit donc rester au vote ouvert. Un scrutin clos passe en papier creusé,
 * une teinte qui range plutôt qu'elle n'appelle.
 *
 * La distinction ne coûte aucune classe supplémentaire dans le gabarit :
 * functions.php pose déjà « scrutin-clos » sur le body, on s'en sert.
 */
body.scrutin-clos .tbc-pastille-scrutin {
	background-color: var(--wp--preset--color--papier-2);
	border-color: var(--wp--preset--color--noyer-200);
	color: var(--wp--preset--color--noyer-600);
}


/* =========================================================================
   25. UNE SEULE GOUTTIÈRE POUR TOUT LE SITE
   ========================================================================= */

/*
 * LA RÈGLE, écrite une fois pour toutes.
 *
 *   Toute page commence et finit au même endroit : le cadre de 1320 px.
 *   À l'intérieur, une image ou un panneau a le droit de prendre tout le
 *   cadre ; une ligne de texte s'arrête à sa mesure de lecture, et elle
 *   s'arrête À DROITE. Elle ne se recentre jamais.
 *
 * Ce dernier point est la partie contre-intuitive. WordPress, dans une mise
 * en page « contrainte », centre chaque enfant : max-width plus marges
 * automatiques. Un texte de 68 caractères dans un cadre de 1320 px se
 * retrouverait donc au milieu, décalé de 200 px vers la droite, pendant que
 * le titre de la page, lui, resterait collé au bord gauche. Deux bords
 * gauches différents sur la même page : c'est pire que le problème de
 * départ. On remet donc la marge gauche à zéro partout où l'on pose une
 * mesure de lecture.
 */

.tbc-page .tbc-page__texte > p,
.tbc-page .tbc-page__texte > ul,
.tbc-page .tbc-page__texte > ol,
.tbc-page .tbc-page__texte > h2,
.tbc-page .tbc-page__texte > h3,
.tbc-page .tbc-page__texte > h4,
.tbc-page .tbc-page__texte > blockquote,
.tbc-journal-page > p,
.tbc-billet__extrait,
.tbc-billet__titre {
	max-width: 68ch;
	margin-left: 0;
	margin-right: auto;
}

/*
 * LA GALERIE DU CLUB.
 *
 * Elle échappe à la mesure de lecture : ce n'est pas un texte, c'est une
 * galerie de portraits. Elle prend donc tout le cadre.
 *
 * POURQUOI DU FLEX ET NON UNE GRILLE.
 *
 * La première version était une grille en auto-fit : le navigateur mettait
 * autant de colonnes que la largeur en autorisait. Simple, mais deux défauts.
 * Elle en mettait six quand il y avait la place, ce qui laissait le septième
 * membre seul ; et surtout, une grille remplit toujours à partir de la
 * gauche. Une rangée incomplète reste collée à gauche, quoi qu'on écrive :
 * justify-content déplace la grille entière, jamais sa dernière rangée.
 *
 * Le flex, lui, centre chaque rangée séparément. Cinq membres au maximum par
 * rangée, et les deux qui restent se placent au milieu.
 *
 * LE CALCUL DE LA LARGEUR. Chaque membre occupe une fraction exacte du
 * cadre : la largeur totale moins les gouttières, divisée par le nombre de
 * colonnes voulu. Ce nombre est une variable, donc le calcul est écrit une
 * seule fois et seuls les paliers le changent. Sans ça, il faudrait recopier
 * la formule à chaque palier — et une formule recopiée finit toujours par
 * diverger d'une copie à l'autre.
 */
.tbc-club {
	max-width: none;
	margin-top: var(--wp--preset--spacing--espace-6);
}

.tbc-club__liste {
	--tbc-club-colonnes: 2;
	--tbc-club-gouttiere: var(--wp--preset--spacing--espace-4);

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--espace-5) var(--tbc-club-gouttiere);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.tbc-club__liste {
		--tbc-club-colonnes: 3;
	}
}

@media (min-width: 760px) {
	.tbc-club__liste {
		--tbc-club-colonnes: 4;
	}
}

@media (min-width: 1000px) {
	.tbc-club__liste {
		--tbc-club-colonnes: 5;
	}
}

.tbc-membre {
	flex: 0 0 calc(
		(100% - (var(--tbc-club-colonnes) - 1) * var(--tbc-club-gouttiere))
		/ var(--tbc-club-colonnes)
	);
	min-width: 0;
	margin: 0;
	text-align: center;
}

/*
 * Le portrait est un cercle de 112 px. La photo le remplit sans se déformer
 * grâce à object-fit: cover, qui recadre plutôt qu'il n'écrase — une photo
 * de portrait n'est jamais carrée, et un visage étiré se remarque tout de
 * suite.
 */
.tbc-membre__portrait {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 112px;
	height: 112px;
	margin: 0 auto var(--wp--preset--spacing--espace-2);
	border-radius: 50%;
	overflow: hidden;
	background-color: var(--wp--preset--color--papier-2);
	border: 1px solid var(--wp--preset--color--filet-fin);
}

.tbc-membre__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* L'initiale, quand la photo manque. */
.tbc-membre__initiale {
	font-family: var(--wp--preset--font-family--titrage);
	font-size: var(--wp--preset--font-size--titre-1);
	font-weight: 600;
	color: var(--wp--preset--color--noyer-600);
	line-height: 1;
}

.tbc-membre__nom {
	margin: 0;
	font-family: var(--wp--preset--font-family--titrage);
	font-size: var(--wp--preset--font-size--titre-3);
	font-weight: 600;
	line-height: 1.2;
}

/*
 * La citation est en italique et d'un ton plus clair : elle appartient au
 * membre, pas au site. Les guillemets sont posés par le CSS et non saisis
 * dans le champ, pour que personne n'ait à se demander s'il doit les écrire.
 */
.tbc-membre__citation {
	max-width: 26ch;
	margin: var(--wp--preset--spacing--espace-05) auto 0;
	font-family: var(--wp--preset--font-family--titrage);
	font-size: var(--wp--preset--font-size--corps-sm);
	font-style: italic;
	font-weight: 300;
	color: var(--wp--preset--color--encre-700);
	line-height: 1.4;
}

/*
 * Les guillemets sont posés par le CSS, pour que le membre n'ait pas à les
 * taper dans son profil : la ponctuation appartient à la mise en forme, pas
 * au texte saisi.
 *
 * L'espace est INSÉCABLE (\00a0), et ce n'est pas du zèle typographique. Avec
 * une espace ordinaire, le guillemet fermant se retrouve seul sur une
 * deuxième ligne dès que la citation remplit la première — ce qui arrivait
 * sur les cartes étroites de la galerie.
 *
 * La règle française veut de toute façon une espace insécable avant les
 * signes doubles ; ici elle règle aussi un défaut d'affichage.
 */
.tbc-membre__citation::before {
	content: "«\00a0";
}

.tbc-membre__citation::after {
	content: "\00a0»";
}

/*
 * LE BANDEAU DU RÉSULTAT, en trois colonnes.
 *
 * La couverture ne s'étire pas à sa colonne : 150 px suffisent à la
 * reconnaître, et une couverture plus haute que le texte qu'elle accompagne
 * déséquilibre la ligne.
 */
.tbc-resultat__livre .tbc-carte__couverture img {
	max-width: 150px;
	width: 100%;
	height: auto;
	display: block;
}

/* Le bouton se pose à droite de sa colonne, aligné sur le bord du bandeau. */
.tbc-resultat__cta {
	display: inline-block;
	white-space: nowrap;
}

@media (min-width: 782px) {
	.tbc-resultat__livre > .wp-block-column:last-child {
		text-align: right;
	}
}


/* =========================================================================
   26. LA GOUTTIÈRE COMMUNE, SUITE : ARTICLE, RECHERCHE, 404
   ========================================================================= */

/*
 * Même règle qu'à la section 25, appliquée aux trois derniers gabarits qui
 * gardaient leur propre largeur : l'article du journal (600 px), la
 * recherche (760 px) et la page introuvable (680 px).
 *
 * Le cadre passe à 1320 px, la ligne de texte garde sa mesure, et elle
 * s'arrête à droite plutôt que de se recentrer.
 */
.tbc-article-page .tbc-article-page__texte > p,
.tbc-article-page .tbc-article-page__texte > ul,
.tbc-article-page .tbc-article-page__texte > ol,
.tbc-article-page .tbc-article-page__texte > h2,
.tbc-article-page .tbc-article-page__texte > h3,
.tbc-article-page .tbc-article-page__texte > h4,
.tbc-article-page .tbc-article-page__texte > blockquote,
.tbc-article-page__chapeau,
.tbc-article-page__titre,
.tbc-recherche > p,
.tbc-introuvable > p,
.tbc-introuvable > h1,
.tbc-lecteur-page > p {
	max-width: 68ch;
	margin-left: 0;
	margin-right: auto;
}


/* =========================================================================
   27. LES LECTURES RECOMMANDÉES
   ========================================================================= */

/*
 * LE QUATRIÈME STATUT.
 *
 * On complète la liste de la section 5.2 : chaque zone se masque quand la
 * classe de corps ne lui correspond pas. Toujours par la négative — écrire
 * la règle à l'endroit imposerait un display que WordPress n'a pas prévu.
 *
 * Une recommandation n'a ni note, ni séance, ni scrutin. Elle n'a pas non
 * plus de sommaire : sa fiche est courte, et un sommaire de deux lignes ne
 * sert personne.
 *
 * LES REMARQUES, ELLES, RESTENT. Elles étaient masquées ici au départ, par
 * symétrie avec le reste. C'était une erreur de raisonnement : un livre
 * recommandé n'a pas été lu ENSEMBLE, mais il est lu quand même, chacun de
 * son côté. C'est justement la fiche où l'on a le plus envie de laisser un
 * mot — « je l'ai fini, il vaut le détour » — et c'est ce qui donne à une
 * recommandation une chance de devenir une proposition.
 */
body:not(.statut-recommande) .tbc-info--recommande,
body:not(.statut-recommande) .tbc-pastille--recommande,
body.statut-recommande .tbc-sommaire,
body.statut-recommande .tbc-rail__propose {
	display: none;
}

/*
 * La pastille reprend l'argile, la couleur des choses en attente, mais en
 * plein plutôt qu'en contour : « proposé » est un cadre vide, parce que le
 * livre attend une décision ; « recommandé » est plein, parce qu'il n'attend
 * rien — c'est un état stable, pas une file d'attente.
 */
.tbc-pastille--recommande {
	background-color: var(--wp--preset--color--argile-100);
	color: var(--wp--preset--color--noyer-600);
}

/*
 * LA COUVERTURE D'UNE RECOMMANDATION.
 *
 * Le coin corné est la signature des livres du club — ceux qu'on a lus,
 * qu'on lit, qu'on va peut-être lire. Une recommandation ne l'a pas : sa
 * couverture reste entière, avec un filet d'argile. La différence se voit
 * avant qu'on ait lu le moindre mot, ce qui est exactement le rôle d'un
 * signe.
 */
body.statut-recommande .tbc-couverture img {
	clip-path: none;
	border: 1px solid var(--wp--preset--color--argile-600);
	border-radius: 2px;
}

/* Le plafond de hauteur de la grande couverture est posé en section 5.4,
   avec le reste de ses règles : il vaut pour tous les statuts. */

.tbc-info--recommande .tbc-mention {
	margin-top: var(--wp--preset--spacing--espace-05);
	max-width: 62ch;
}


/* =========================================================================
   28. POUR ALLER PLUS LOIN
   ========================================================================= */

/*
 * La grille serrée : quatre colonnes de cartes réduites, pour les listes
 * secondaires — les livres reliés, les favoris d'un membre, ses
 * propositions. Ce sont des renvois, pas le sujet de la page : ils doivent
 * se parcourir d'un regard sans concurrencer ce qui les précède.
 *
 * auto-fit plutôt qu'un nombre fixe de colonnes : sur un téléphone, quatre
 * colonnes donneraient 70 px par couverture.
 */
/*
 * IL N'Y A PLUS DE GRILLE SERRÉE, ET C'EST UNE CORRECTION.
 *
 * J'avais créé une variante « .tbc-grille--serree » pour les listes
 * secondaires : quatre colonnes annoncées, mais un auto-fit à 150 px de
 * minimum. Dans un cadre de 1320 px, auto-fit ne s'arrête pas à quatre : il
 * remplit la ligne. On obtenait huit colonnes de 150 px, donc des couvertures
 * deux fois plus petites que celles de la grille principale, sur la fiche
 * d'un livre comme sur celle d'un membre.
 *
 * La leçon vaut d'être retenue : auto-fit avec minmax() ne PLAFONNE pas le
 * nombre de colonnes, il le déduit de la largeur disponible. Le columnCount
 * écrit dans le gabarit ne le contredit pas, il est simplement écrasé.
 *
 * Une seule grille, donc, et une seule carte : la même sur l'archive, sur une
 * fiche de livre, sur une fiche de membre, sur une page de terme.
 */
.tbc-plus-loin__mot {
	max-width: 62ch;
	margin-bottom: var(--wp--preset--spacing--espace-4);
}


/* =========================================================================
   29. LA FICHE DE LECTEUR
   ========================================================================= */

/*
 * L'en-tête : portrait à gauche, identité à droite. En dessous de 600 px,
 * la ligne se casse et le portrait passe au-dessus — flex-wrap suffit, sans
 * media query.
 */
/*
 * PAS DE FILET SOUS L'EN-TÊTE, et c'est une correction.
 *
 * J'avais posé une bordure basse ici, alors que chaque titre de section porte
 * déjà un filet au-dessus de lui (section 18.4). On obtenait deux traits
 * séparés par un vide : l'un fermait l'en-tête, l'autre ouvrait la section
 * suivante, et ils disaient la même chose.
 *
 * La règle à retenir : un séparateur appartient à UN seul système. Ici c'est
 * le titre de section qui porte le trait, sur toutes les pages du site.
 * L'en-tête se contente de son blanc.
 */
.tbc-lecteur {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--espace-4);
	padding-bottom: var(--wp--preset--spacing--espace-4);
}

.tbc-lecteur__portrait {
	width: 140px;
	height: 140px;
	margin: 0;
	flex: none;
}

.tbc-lecteur__texte {
	min-width: 260px;
	flex: 1 1 320px;
}

.tbc-lecteur__role {
	margin: 0;
	color: var(--wp--preset--color--noyer-600);
}

.tbc-lecteur__nom {
	margin: var(--wp--preset--spacing--espace-05) 0 0;
	font-family: var(--wp--preset--font-family--titrage);
	font-size: var(--wp--preset--font-size--affichage-2);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.06;
}

.tbc-lecteur__citation {
	max-width: 52ch;
	margin: var(--wp--preset--spacing--espace-2) 0 0;
	font-family: var(--wp--preset--font-family--titrage);
	font-size: var(--wp--preset--font-size--titre-3);
	font-style: italic;
	font-weight: 300;
	color: var(--wp--preset--color--encre-700);
	line-height: 1.35;
}

.tbc-lecteur__citation::before {
	content: "« ";
}

.tbc-lecteur__citation::after {
	content: " »";
}

.tbc-lecteur__etiquette {
	margin: var(--wp--preset--spacing--espace-3) 0 0;
	color: var(--wp--preset--color--noyer-600);
}

/*
 * 76 caractères, et le chiffre n'est pas pris au hasard.
 *
 * À 62, la phrase de deux lignes laissait un mot seul sur la seconde : « me
 * questionner. » pendu sous 590 px de texte. Une ligne orpheline de 93 px est
 * ce qui se voit le plus dans un bloc de texte.
 *
 * J'ai mesuré dans un navigateur, à plusieurs largeurs. 76 caractères font
 * tenir une phrase de présentation ordinaire sur une seule ligne, et le bloc
 * s'arrête aux deux tiers du cadre — assez large pour ne pas hacher le texte,
 * assez court pour ne pas courir d'un bord à l'autre. Une présentation plus
 * longue passera à la ligne, ce qui est le comportement voulu : on ne lit pas
 * un paragraphe sur 1300 px.
 */
.tbc-lecteur__gouts {
	max-width: 76ch;
	margin: var(--wp--preset--spacing--espace-05) 0 0;
	font-size: var(--wp--preset--font-size--corps-sm);
	color: var(--wp--preset--color--encre-700);
}

.tbc-lecteur__billet {
	padding: var(--wp--preset--spacing--espace-2) 0;
	border-bottom: 1px solid var(--wp--preset--color--filet-fin);
}

.tbc-lecteur__billet > * {
	margin: 0;
}

/*
 * LE LIEN ÉTIRÉ.
 *
 * Le prénom porte le lien — c'est lui qu'annonce un lecteur d'écran. Le
 * pseudo-élément ::after, en position absolue sur toute la carte, étend
 * ensuite la zone cliquable au portrait et à la citation. La souris gagne
 * une grande cible, le clavier garde un libellé qui a du sens.
 *
 * La carte doit être « position: relative » pour que l'absolu se cale sur
 * elle : sans ça, le lien s'étirerait sur toute la page.
 */
.tbc-membre {
	position: relative;
}

.tbc-membre__lien {
	text-decoration: none;
	color: inherit;
}

.tbc-membre__lien::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 6px;
}

.tbc-membre:hover .tbc-membre__nom,
.tbc-membre:focus-within .tbc-membre__nom {
	color: var(--wp--preset--color--mousse-700);
}

.tbc-membre:hover .tbc-membre__portrait,
.tbc-membre:focus-within .tbc-membre__portrait {
	border-color: var(--wp--preset--color--mousse-700);
}


/* =========================================================================
   30. LA CARTE À QUATRE EMPLACEMENTS
   ========================================================================= */

/*
 * LE PROBLÈME QUE ÇA RÈGLE.
 *
 * Une carte portait, au-dessus de son titre, un mois de lecture et une
 * pastille d'état. Un livre lu en avait un, un livre en lecture les deux, une
 * recommandation un seul, un livre proposé aucun. Les titres d'une même
 * rangée commençaient donc à quatre hauteurs différentes.
 *
 * LA RÈGLE GÉNÉRALE, et elle vaut bien au-delà de ce site : pour que des
 * éléments s'alignent, ce qui les précède doit avoir une hauteur FIXE. Tout
 * ce qui est facultatif doit donc passer soit après, soit hors du flux.
 *
 * Ici les deux : l'étiquette d'état sort du flux en se posant sur la
 * couverture, le mois et la note passent sous le titre. Ce qui reste
 * au-dessus du titre — la couverture seule — a une proportion fixe, donc une
 * hauteur qui ne dépend que de la largeur de la carte.
 */

.tbc-carte__visuel {
	position: relative;
	margin: 0;
}

/*
 * L'ÉTIQUETTE SUR LA COUVERTURE.
 *
 * En bas à gauche : le haut d'une couverture porte presque toujours le nom de
 * l'auteur et le titre, le bas est le plus souvent de l'image.
 *
 * position: absolute la retire du flux — elle ne pousse plus rien, c'est tout
 * l'intérêt. Le calage se fait sur .tbc-carte__visuel, qui est en position
 * relative : sans ce parent, l'étiquette se calerait sur la page entière.
 */
.tbc-carte__visuel .tbc-carte__pastille {
	position: absolute;
	left: var(--wp--preset--spacing--espace-1);
	bottom: var(--wp--preset--spacing--espace-1);
	margin: 0;
	z-index: 2;
	max-width: calc(100% - 2 * var(--wp--preset--spacing--espace-1));
}

/*
 * Le fond doit tenir sur n'importe quelle couverture : une page blanche comme
 * une photo de nuit. D'où un aplat franc plutôt qu'une transparence, et une
 * ombre portée courte qui décolle l'étiquette de l'image sans l'assombrir.
 *
 * On garde les couleurs déjà définies pour chaque état — « en lecture » reste
 * en encre pleine, « non retenu » garde son filet — mais on force un fond
 * opaque là où il n'y en avait pas, sinon l'étiquette « proposé », qui n'est
 * qu'un contour, deviendrait illisible sur une image chargée.
 */
.tbc-carte__visuel .tbc-carte__pastille {
	background-color: var(--wp--preset--color--papier-0);
	box-shadow: 0 1px 6px rgba(36, 59, 50, 0.22);
}

.tbc-carte__visuel .tbc-pastille--en-cours {
	background-color: var(--wp--preset--color--encre-800);
}

/*
 * LES QUATRE EMPLACEMENTS.
 *
 * Le titre suit immédiatement le visuel : c'est ce qui garantit l'alignement.
 * La ligne de données se colle en pied de carte, comme le faisait la note.
 */
.tbc-carte__titre {
	margin: var(--wp--preset--spacing--espace-2) 0 0;
}

/*
 * Le duel d'un scrutin réemploie les classes de carte sans en être une : sa
 * couverture porte déjà sa propre marge basse. Sans cette remise à zéro, les
 * deux écarts s'additionneraient.
 */
.tbc-duel__cote .tbc-carte__titre {
	margin-top: 0;
}

/*
 * LA LIGNE DE DONNÉES SUIT L'AUTEUR, elle ne va pas au pied de la carte.
 *
 * Ma première version la poussait en bas avec « margin-top: auto », pour que
 * les mois et les notes s'alignent d'une carte à l'autre. C'était aligner ce
 * qui n'en avait pas besoin : sur une carte au titre court, ça ouvrait un
 * grand trou entre l'auteur et sa date, et l'œil lisait ce vide comme une
 * séparation.
 *
 * Une seule chose doit s'aligner dans une grille de livres : les TITRES.
 * C'est par eux qu'on parcourt une liste. Le reste suit son titre, et il a
 * raison de le suivre de près : ce sont des informations sur le même livre.
 */
.tbc-carte__donnees {
	margin: var(--wp--preset--spacing--espace-1) 0 0;
	text-transform: none;
	letter-spacing: 0.01em;
}


/* =========================================================================
   31. LA GRILLE SERRÉE, LE PIED DE PAGE, LES FILMS
   ========================================================================= */

/* --- 31.1 La grille serrée ----------------------------------------------- */

/*
 * SIX PAR RANGÉE, ET POURQUOI CETTE FOIS C'EST JUSTIFIÉ.
 *
 * J'avais supprimé une variante « serrée » il y a quelques jours parce
 * qu'elle était fausse : un auto-fit à 150 px donnait huit colonnes au lieu
 * des quatre annoncées, et les couvertures d'une même page n'avaient plus la
 * même taille.
 *
 * Celle-ci est différente sur deux points. Elle sert des sections SECONDAIRES
 * — les livres recommandés, les films d'un membre — où l'on parcourt du
 * regard au lieu de détailler. Et surtout elle fixe le nombre de colonnes à
 * chaque palier au lieu de le laisser au navigateur : trois, quatre, six. On
 * sait donc exactement ce qu'on obtient.
 *
 * La carte reste la même : mêmes emplacements, même alignement des titres.
 * Seule l'échelle change.
 */
.tbc-grille--serree {
	gap: var(--wp--preset--spacing--espace-3) var(--wp--preset--spacing--espace-25) !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (min-width: 768px) {
	.tbc-grille--serree {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 1100px) {
	.tbc-grille--serree {
		grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	}
}

/*
 * Dans une section de recommandations, chaque carte est une recommandation :
 * répéter l'étiquette six fois par rangée ne dit plus rien. Le titre de la
 * section le dit une fois pour toutes.
 */
.tbc-recommandes .tbc-carte__pastille {
	display: none;
}

.tbc-recommandes__mot {
	max-width: 62ch;
	margin: 0 0 var(--wp--preset--spacing--espace-4);
}


/* --- 31.2 Le pied de page ------------------------------------------------ */

/*
 * LE BOGUE : une colonne de liens espacée comme un texte.
 *
 * Les cinq rubriques du pied sont des paragraphes. Ils héritaient donc de
 * l'écart entre PARAGRAPHES, réglé pour du texte courant, et se retrouvaient
 * séparés de près de cinquante pixels. Ça se voyait d'autant plus que la
 * colonne d'à côté, elle, est serrée.
 *
 * Les paragraphes sont maintenant groupés, et le groupe impose son propre
 * écart. C'est la bonne façon de faire : on ne corrige pas un espacement en
 * annulant une règle générale, on donne à l'élément un contexte où la règle
 * générale ne s'applique pas.
 */
.tbc-pied__menu > p {
	margin: 0 0 var(--wp--preset--spacing--espace-1);
}

.tbc-pied__menu > p:last-child {
	margin-bottom: 0;
}

/*
 * Les trois colonnes du pied démarrent à la même ligne. Sans ça, chacune
 * commence à la hauteur de sa première ligne de texte, qui dépend de sa
 * taille de police : trois débuts différents pour trois colonnes voisines.
 */
.tbc-pied .wp-block-columns > .wp-block-column > *:first-child {
	margin-top: 0;
}


/* --- 31.3 Les films ------------------------------------------------------ */

/*
 * L'étiquette d'une fiche de film. Port profond, comme la salle avant que
 * les lumières ne s'éteignent : elle ne se confond avec aucun des quatre
 * états d'un livre.
 */
.tbc-pastille--film {
	background-color: var(--wp--preset--color--port-900);
	color: var(--wp--preset--color--papier-1);
	border: 0;
}

.tbc-fiche__conseil {
	margin-top: var(--wp--preset--spacing--espace-3);
}

/*
 * LA BARRE DES GENRES.
 *
 * Elle reprend le meuble de la barre de tri des livres — deux filets, des
 * liens en ligne — parce que c'est le même geste : réduire une liste. Un
 * site s'apprend par ses répétitions.
 */
.tbc-tri--films {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--espace-25);
	margin: var(--wp--preset--spacing--espace-5) 0 var(--wp--preset--spacing--espace-6);
	padding: var(--wp--preset--spacing--espace-15) 0;
	border-top: 1px solid var(--wp--preset--color--filet-fin);
	border-bottom: 1px solid var(--wp--preset--color--filet-fin);
}

.tbc-tri--films > p {
	margin: 0;
	font-size: var(--wp--preset--font-size--corps-sm);
}

.tbc-tri--films .tbc-surtitre {
	font-family: var(--wp--preset--font-family--chiffres);
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--noyer-600);
}

/* Le genre affiché porte un filet sous lui, comme la page courante du menu. */
.tbc-tri__lien--actif > a {
	border-bottom: 2px solid var(--wp--preset--color--noyer-600);
	padding-bottom: 2px;
	text-decoration: none;
}

.tbc-films__chapeau {
	max-width: 68ch;
	margin-left: 0;
	margin-right: auto;
}

.tbc-film__casting {
	margin: var(--wp--preset--spacing--espace-05) 0 var(--wp--preset--spacing--espace-3);
}

/*
 * « Où le voir » disparaît avec sa valeur.
 *
 * Le CSS masque déjà les paragraphes vides, mais une ÉTIQUETTE n'est pas
 * vide : elle contient son propre mot. Il faut donc regarder la valeur qui
 * la suit, ce que :has() permet — « le rail qui contient une valeur vide ».
 *
 * :has() est la première façon en CSS de remonter d'un élément vers son
 * parent. Avant, ce genre de condition demandait du PHP ou du JavaScript.
 */
.tbc-fiche__rail:has(.tbc-film__ou:empty) .tbc-film__ou-etiquette,
.tbc-fiche__rail:has(.tbc-film__casting:empty) .tbc-film__casting {
	display: none;
}

/* La fiche d'un film n'a ni sommaire ni compte rendu : rien à masquer. */
.tbc-fiche--film .tbc-fiche__auteur {
	margin-bottom: var(--wp--preset--spacing--espace-2);
}

/*
 * Le mot d'invitation sous le titre des avis. Une mention, donc collée à ce
 * qu'elle annonce, mais avec l'air qu'il faut avant le premier avis.
 */
.tbc-avis__mot {
	max-width: 62ch;
	margin: 0 0 var(--wp--preset--spacing--espace-4);
}

/*
 * L'AMBIANCE D'UNE FICHE DE FILM.
 *
 * Rien à écrire ici : la bande colorée est dessinée par body::before
 * (section 13 de functions.php et section 12 de cette feuille), à partir
 * d'une variable que le PHP pose sur <body>. Étendre l'effet aux films a
 * donc coûté une condition en PHP et zéro ligne de CSS.
 *
 * C'est le bénéfice d'avoir séparé la DONNÉE (quelle image, quelle hauteur)
 * du DESSIN (comment on la floute). Le jour où un troisième type de contenu
 * voudra la même chose, ce sera la même condition.
 */


/* =========================================================================
   32. LA BARRE DE NAVIGATION BASSE
   ========================================================================= */

/*
 * Le balisage est écrit par tbc_barre_de_navigation(), section 29 de
 * functions.php, sur le crochet wp_footer. Il est donc présent sur tous les
 * gabarits, y compris la recherche et la page 404.
 *
 * PAR DÉFAUT, ELLE N'EXISTE PAS. On la masque d'abord et on ne l'allume qu'en
 * dessous de 782 pixels. L'ordre compte : écrite dans l'autre sens, elle
 * apparaîtrait une fraction de seconde sur les grands écrans avant que la
 * règle ne la range.
 */
.tbc-barre {
	display: none;
}

@media (max-width: 781px) {

	:root {
		--tbc-barre-hauteur: 60px;
	}

	/*
	 * env(safe-area-inset-bottom) vaut zéro partout, sauf sur les iPhone sans
	 * bouton d'accueil où il vaut la hauteur de la barre horizontale du bas.
	 * Sans lui, la dernière rangée de pictogrammes passe dessous et devient
	 * intouchable. C'est la seule ligne de cette feuille qui s'adresse à un
	 * matériel précis, et elle ne coûte rien ailleurs.
	 */
	.tbc-barre {
		display: block;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 90;
		background-color: var(--wp--preset--color--papier-0);
		border-top: 1px solid var(--wp--preset--color--filet-fin);
		padding-bottom: calc(var(--wp--preset--spacing--espace-05) + env(safe-area-inset-bottom, 0px));
	}

	/*
	 * On rend au corps de page la hauteur que la barre lui prend, sinon la
	 * dernière ligne du pied de page reste cachée dessous et on ne peut plus
	 * la lire, quel que soit le défilement.
	 */
	body {
		padding-bottom: calc(var(--tbc-barre-hauteur) + var(--wp--preset--spacing--espace-05) + env(safe-area-inset-bottom, 0px));
	}

	/*
	 * WordPress pose « has-modal-open » sur le corps de page quand le menu
	 * déplié s'ouvre. La barre s'efface alors : deux navigations superposées
	 * ne se lisent pas, et le panneau doit couvrir l'écran entier.
	 */
	body.has-modal-open .tbc-barre {
		display: none;
	}

	.tbc-barre__liste {
		display: flex;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/*
	 * flex: 1 1 0 donne à chaque entrée la même largeur, quelle que soit la
	 * longueur de son mot. « Connexion » et « Moi » occupent donc la même
	 * case, et les pictogrammes restent alignés sur une grille régulière.
	 */
	.tbc-barre__item {
		flex: 1 1 0;
		min-width: 0;
	}

	/*
	 * La cible tactile fait toute la case, pas seulement le pictogramme. Les
	 * recommandations d'accessibilité demandent au moins 44 pixels dans les
	 * deux sens ; on est à 56 en hauteur et au quart de la largeur d'écran.
	 */
	.tbc-barre__lien {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--wp--preset--spacing--espace-05);
		min-height: var(--tbc-barre-hauteur);
		padding: var(--wp--preset--spacing--espace-1) var(--wp--preset--spacing--espace-025);
		color: var(--wp--preset--color--encre-500);
		font-family: var(--wp--preset--font-family--corps);
		font-size: var(--wp--preset--font-size--micro);
		line-height: 1.1;
		text-decoration: none;
	}

	.tbc-barre__lien svg {
		display: block;
		width: 24px;
		height: 24px;
	}

	/*
	 * L'ENTRÉE COURANTE. Deux signaux plutôt qu'un : la couleur passe au texte
	 * appuyé, et un trait se pose en haut de la case. La couleur seule ne
	 * suffit pas, c'est la première règle d'accessibilité qu'on enfreint sans
	 * y penser.
	 *
	 * Le crochet est aria-current, posé par le PHP. Pas de classe « active »
	 * en plus : une seule source, donc rien qui puisse diverger.
	 */
	.tbc-barre__lien[aria-current="page"] {
		color: var(--wp--preset--color--encre-900);
		box-shadow: inset 0 2px 0 0 var(--wp--preset--color--encre-800);
	}

	.tbc-barre__lien:focus-visible {
		outline: 2px solid var(--wp--preset--color--port-500);
		outline-offset: -3px;
	}

	/*
	 * line-height 1.3 et non 1.1, et c'est la correction du libellé qui
	 * paraissait coupé. Un interligne trop serré sur une boîte qui masque ce
	 * qui déborde rogne le bas des lettres à jambage, le p de Compte et le
	 * y d'un futur libellé. Le pixel du bas achève de dégager la ligne.
	 */
	.tbc-barre__mot {
		max-width: 100%;
		overflow: hidden;
		padding-bottom: 1px;
		line-height: 1.3;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}


/* =========================================================================
   33. PROPOSER UN LIVRE DEPUIS LA RECHERCHE
   ========================================================================= */

/*
 * Le balisage est écrit par tbc_bloc_de_proposition(), section 33 de
 * functions.php, et remplace un jeton posé dans templates/search.html. Il
 * n'apparaît que sur une recherche sans résultat, et seulement pour un membre
 * connecté.
 *
 * DESSINÉ POUR LE TÉLÉPHONE D'ABORD. Une ligne par livre, empilée, avec un
 * bouton pleine largeur : c'est là que la proposition se fera, entre deux
 * conversations, pas devant un ordinateur.
 */

.tbc-proposition {
	margin-top: var(--wp--preset--spacing--espace-5);
	padding-top: var(--wp--preset--spacing--espace-4);
	border-top: 1px solid var(--wp--preset--color--filet-fin);
}

.tbc-proposition__titre {
	margin: 0 0 var(--wp--preset--spacing--espace-3);
	font-family: var(--wp--preset--font-family--titrage);
	font-size: var(--wp--preset--font-size--titre-4);
	font-weight: 600;
}

.tbc-proposition__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * align-items: start et non center. Les couvertures n'ont pas toutes le même
 * rapport de forme ; centrer ferait danser le titre d'une ligne à l'autre.
 */
.tbc-proposition__item {
	display: flex;
	align-items: start;
	gap: var(--wp--preset--spacing--espace-2);
	flex-wrap: wrap;
	padding: var(--wp--preset--spacing--espace-3) 0;
	border-bottom: 1px solid var(--wp--preset--color--filet-fin);
}

.tbc-proposition__couverture {
	flex: 0 0 auto;
	width: 48px;
	height: auto;
	border-radius: 2px;
}

/*
 * flex: 1 1 12rem laisse le texte occuper la place disponible et autorise le
 * retour à la ligne du bouton sur les écrans étroits, sans qu'aucun média
 * n'ait à être écrit.
 */
.tbc-proposition__texte {
	flex: 1 1 12rem;
	min-width: 0;
}

.tbc-proposition__livre {
	margin: 0;
	font-family: var(--wp--preset--font-family--titrage);
	font-size: var(--wp--preset--font-size--corps-lg);
	font-weight: 600;
	line-height: 1.2;
}

.tbc-proposition__detail {
	margin: var(--wp--preset--spacing--espace-05) 0 0;
	color: var(--wp--preset--color--encre-500);
	font-size: var(--wp--preset--font-size--corps-sm);
}

.tbc-proposition__forme {
	flex: 0 0 auto;
	margin: 0;
}

.tbc-proposition__forme .tbc-bouton {
	width: 100%;
}

.tbc-proposition__note,
.tbc-proposition__invite {
	margin-top: var(--wp--preset--spacing--espace-3);
	color: var(--wp--preset--color--encre-500);
	font-size: var(--wp--preset--font-size--corps-sm);
}

/*
 * Le message de retour après une proposition. Il remplace tout le bloc : une
 * fois le livre proposé, réafficher la liste inviterait à recommencer.
 */
.tbc-proposition__retour {
	margin-top: var(--wp--preset--spacing--espace-4);
	padding: var(--wp--preset--spacing--espace-2) var(--wp--preset--spacing--espace-25);
	border-left: 3px solid var(--wp--preset--color--filet-fin);
	font-size: var(--wp--preset--font-size--corps);
}

.tbc-proposition__retour--ok {
	border-left-color: var(--wp--preset--color--mousse-700);
	background-color: var(--wp--preset--color--mousse-100);
}

@media (min-width: 601px) {

	.tbc-proposition__item {
		flex-wrap: nowrap;
		align-items: center;
	}

	.tbc-proposition__couverture {
		width: 56px;
	}
}


/* =========================================================================
   34. LES ONGLETS DE LA RECHERCHE
   ========================================================================= */

/*
 * Écrits par tbc_bloc_de_filtres(), section 34 de functions.php, à la place
 * d'un jeton posé dans templates/search.html.
 *
 * Ils défilent horizontalement s'ils ne tiennent pas, plutôt que de passer à
 * la ligne : trois onglets tiennent partout, mais le jour où « Articles » et
 * « Scrutins » s'ajouteront, rien ne cassera.
 */

.tbc-filtres {
	margin: var(--wp--preset--spacing--espace-3) 0 var(--wp--preset--spacing--espace-4);
	border-bottom: 1px solid var(--wp--preset--color--filet-fin);
	overflow-x: auto;
}

.tbc-filtres__liste {
	display: flex;
	gap: var(--wp--preset--spacing--espace-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * La zone tactile fait quarante-quatre pixels de haut, minimum
 * recommandé pour un doigt. Le trait de l'onglet actif est posé en bas, sur
 * le filet, et non en dessous : les deux se confondent en une seule ligne.
 */
.tbc-filtres__lien {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--espace-05);
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--espace-2);
	color: var(--wp--preset--color--encre-500);
	font-size: var(--wp--preset--font-size--corps-sm);
	text-decoration: none;
	white-space: nowrap;
	box-shadow: inset 0 -2px 0 0 transparent;
}

.tbc-filtres__lien:hover {
	color: var(--wp--preset--color--encre-900);
}

.tbc-filtres__lien[aria-current="page"] {
	color: var(--wp--preset--color--encre-900);
	font-weight: 600;
	box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--encre-800);
}

.tbc-filtres__lien:focus-visible {
	outline: 2px solid var(--wp--preset--color--port-500);
	outline-offset: -2px;
}

/*
 * Le nombre en chiffres tabulaires : les onglets ne bougent plus d'un pixel
 * quand on passe de 9 à 10 résultats.
 */
.tbc-filtres__compte {
	color: var(--wp--preset--color--encre-300);
	font-family: var(--wp--preset--font-family--chiffres);
	font-size: var(--wp--preset--font-size--micro);
	font-variant-numeric: tabular-nums;
}

.tbc-filtres__lien[aria-current="page"] .tbc-filtres__compte {
	color: var(--wp--preset--color--encre-500);
}


/* =========================================================================
   35. LE CHAMP DE PROPOSITION DES LISTES, ET LES INTERTITRES DE SOURCE
   ========================================================================= */

/*
 * Complète la section 33. Ces règles servent les deux ajouts : le champ de
 * recherche posé au bas des listes de livres et de films, et l'intertitre qui
 * sépare les livres des films sur la page de recherche.
 */

.tbc-proposition__titre {
	margin: 0 0 var(--wp--preset--spacing--espace-2);
	font-family: var(--wp--preset--font-family--titrage);
	font-size: var(--wp--preset--font-size--titre-4);
	font-weight: 600;
}

/*
 * LES ONGLETS DU BLOC DE PROPOSITION. Ils reprennent tel quel le dessin des
 * onglets de la recherche, section 34 : deux fois la même action, choisir ce
 * qu'on regarde, donc deux fois le même objet. Seule l'assise change, plus
 * serrée ici parce qu'on est déjà à l'intérieur d'un bloc.
 *
 * Un intertitre par source avait été essayé d'abord, et ne suffisait pas :
 * deux listes de titres avec vignette se ressemblent trop pour qu'un petit
 * mot en sépare la frontière.
 */
.tbc-filtres--proposition {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--espace-2);
}

/*
 * LE CHAMP DE RECHERCHE DES LISTES. En colonne sur téléphone, en ligne dès
 * qu'il y a la place. Le libellé reste visible : un champ sans libellé oblige
 * à deviner, et la place ne manque pas ici.
 */
.tbc-proposition__recherche {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--espace-1);
	margin-bottom: var(--wp--preset--spacing--espace-3);
}

.tbc-proposition__label {
	flex: 1 0 100%;
	color: var(--wp--preset--color--encre-500);
	font-size: var(--wp--preset--font-size--corps-sm);
}

.tbc-proposition__champ {
	flex: 1 1 12rem;
	min-width: 0;
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--espace-2);
	border: 1px solid var(--wp--preset--color--filet-fin);
	border-radius: 2px;
	background-color: var(--wp--preset--color--papier-0);
	color: var(--wp--preset--color--encre-900);
	font-family: var(--wp--preset--font-family--corps);
	font-size: var(--wp--preset--font-size--corps);
}

.tbc-proposition__champ:focus-visible {
	outline: 2px solid var(--wp--preset--color--port-500);
	outline-offset: 1px;
}

@media (min-width: 601px) {

	.tbc-proposition__label {
		flex: 0 0 auto;
	}
}


/* =========================================================================
   36. LA PAGINATION DES PROPOSITIONS
   ========================================================================= */

/*
 * Deux liens sous la liste, écrits par tbc_pagination_de_proposition(),
 * section 33 de functions.php.
 *
 * justify-content: space-between met « précédents » à gauche et « suivants »
 * à droite. Quand il n'y a que le second, margin-left: auto le renvoie seul à
 * droite : sans cette ligne, il se collerait à gauche et on croirait avoir
 * perdu le premier.
 */
.tbc-proposition__pages {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--espace-2);
	margin-top: var(--wp--preset--spacing--espace-3);
	padding-top: var(--wp--preset--spacing--espace-2);
	border-top: 1px solid var(--wp--preset--color--filet-fin);
}

.tbc-proposition__page {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--port-700);
	font-size: var(--wp--preset--font-size--corps-sm);
	text-decoration: none;
}

.tbc-proposition__page:hover {
	text-decoration: underline;
}

.tbc-proposition__page--suivant {
	margin-left: auto;
}


/* =========================================================================
   37. L'ÉCRAN DE PROPOSITION, ET SON BOUTON D'ACCÈS
   ========================================================================= */

/*
 * Le bouton en haut des listes de livres et de films. Aligné à droite dès
 * qu'il y a la place, pleine largeur sur téléphone : un bouton qu'on vise du
 * pouce mérite toute la largeur, un bouton qu'on vise à la souris n'en a pas
 * besoin.
 */
.tbc-proposition__acces {
	margin: 0 0 var(--wp--preset--spacing--espace-4);
}

.tbc-proposition__acces .tbc-bouton {
	display: block;
	text-align: center;
}

@media (min-width: 601px) {

	.tbc-proposition__acces {
		display: flex;
		justify-content: flex-end;
	}

	.tbc-proposition__acces .tbc-bouton {
		display: inline-block;
	}
}

/*
 * L'ÉCRAN DÉDIÉ. Le champ y est plus grand que partout ailleurs : c'est la
 * seule chose que la page demande, autant qu'elle se voie. 52 pixels de haut,
 * et la taille de texte du corps augmenté, ce qui évite au passage le zoom
 * automatique de Safari sur iPhone, déclenché sous 16 pixels.
 */
.tbc-ecran__mot {
	margin-bottom: var(--wp--preset--spacing--espace-5);
	max-width: 52ch;
}

.tbc-ecran .tbc-proposition {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.tbc-ecran .tbc-proposition__recherche {
	margin-bottom: var(--wp--preset--spacing--espace-4);
}

.tbc-ecran .tbc-proposition__champ {
	min-height: 52px;
	font-size: var(--wp--preset--font-size--corps-lg);
}

.tbc-ecran .tbc-proposition__label {
	flex: 1 0 100%;
}

.tbc-ecran .tbc-proposition__titre {
	margin-top: var(--wp--preset--spacing--espace-4);
}


/* =========================================================================
   38. LES ÉTOILES DES MEMBRES
   ========================================================================= */

/*
 * Trois objets différents, un seul vocabulaire.
 *
 *   la moyenne, sous le titre de la section ;
 *   la note d'une remarque, à la suite de sa date ;
 *   le champ de notation, dans le formulaire.
 *
 * Les étoiles pleines prennent l'argile, la couleur des choses en attente et
 * des recommandations. Les vides prennent papier-4, le ton le plus soutenu de
 * la famille du fond : présentes, mais sans prétendre à l'encre.
 */

/* --- 38.1 La moyenne sur la fiche ----------------------------------------- */

.tbc-etoiles-moyenne {
	margin: 0 0 var(--wp--preset--spacing--espace-3);
	font-family: var(--wp--preset--font-family--chiffres);
	color: var(--wp--preset--color--noyer-600);
	letter-spacing: 0.04em;
}

/*
 * Tant que personne n'a noté, la liaison rend une chaîne vide et WordPress
 * écrit un paragraphe sans contenu. Sans cette ligne, il occuperait sa
 * hauteur et creuserait un trou sous le titre. Même mécanisme que pour
 * l'échéance d'un scrutin sans date de clôture.
 */
.tbc-etoiles-moyenne:empty {
	display: none;
}

/* --- 38.2 La note d'une remarque ------------------------------------------ */

.tbc-etoiles-lues {
	margin: 0;
	font-size: var(--wp--preset--font-size--corps-sm);
	line-height: 1;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--argile-600);
}

/* --- 38.3 Le champ de notation -------------------------------------------- */

.tbc-etoiles {
	margin-bottom: var(--wp--preset--spacing--espace-3);
}

.tbc-etoiles__question {
	margin: 0 0 var(--wp--preset--spacing--espace-05);
	font-size: var(--wp--preset--font-size--legende);
	color: var(--wp--preset--color--encre-600);
}

/*
 * position: relative N'EST PAS DÉCORATIF ICI, et la raison vaut d'être
 * relue : c'est exactement le piège qui faisait défiler la page de scrutin
 * de côté.
 *
 * WordPress impose « width: 100% » à tous les champs du formulaire de
 * commentaire, et sa règle n'écarte pas les boutons radio. Les nôtres sont
 * hors flux ; or « 100 % » d'un élément absolu se mesure sur son plus proche
 * ancêtre POSITIONNÉ. Sans repère ici, ce serait la fenêtre entière, et cinq
 * radios invisibles de la largeur de l'écran pousseraient le document
 * au-delà de son bord.
 *
 * flex-direction: row-reverse remet dans l'ordre des étoiles écrites de 5 à 1
 * dans le code. C'est ce qui permet de colorer « celle-ci et celles d'en
 * dessous » avec un sélecteur de frère suivant, sans une ligne de script.
 */
.tbc-etoiles__choix {
	position: relative;
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 2px;
}

.tbc-etoiles .tbc-etoiles__choix .tbc-etoiles__radio {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
	margin: 0;
}

.tbc-etoiles__etoile {
	display: block;
	cursor: pointer;
	font-size: 28px;
	line-height: 1;
	color: var(--wp--preset--color--papier-4);
	transition: color 0.15s ease;
}

.tbc-etoiles__etoile::before {
	content: "★";
}

/*
 * L'ORDRE DE CES TROIS RÈGLES EST LE MÉCANISME, pas une mise en forme.
 *
 * 1. La note cochée allume son étoile et toutes celles d'en dessous.
 * 2. Dès que la souris entre dans le groupe, tout s'éteint...
 * 3. ...et seule la branche survolée se rallume.
 *
 * Sans la deuxième, survoler deux étoiles après en avoir coché quatre
 * laisserait cinq étoiles allumées et deux allumées en même temps : on ne
 * saurait plus ce qu'on est en train de choisir.
 */
.tbc-etoiles__radio:checked ~ .tbc-etoiles__etoile {
	color: var(--wp--preset--color--argile-600);
}

.tbc-etoiles__choix:hover .tbc-etoiles__etoile {
	color: var(--wp--preset--color--papier-4);
}

/*
 * Les deux sélecteurs sont écrits avec le même nombre de classes, et ce
 * n'est pas du zèle. « .tbc-etoiles__etoile:hover » seul en compte une de
 * moins que la règle d'extinction juste au-dessus : il perdait, et l'étoile
 * survolée restait éteinte pendant que celles d'en dessous s'allumaient.
 * Cliquer la quatrième en allumait trois.
 */
.tbc-etoiles__choix .tbc-etoiles__etoile:hover,
.tbc-etoiles__etoile:hover ~ .tbc-etoiles__etoile {
	color: var(--wp--preset--color--argile-600);
}

/* Le radio est invisible : c'est son étiquette qui doit montrer le focus. */
.tbc-etoiles__radio:focus-visible + .tbc-etoiles__etoile {
	outline: 2px solid var(--wp--preset--color--mousse-700);
	outline-offset: 2px;
}

/*
 * Le libellé lu par les lecteurs d'écran, invisible à l'œil. On ne peut pas
 * le cacher avec display: none, qui le retirerait aussi de la synthèse
 * vocale. On le réduit donc à un pixel, hors du champ de vision.
 */
.tbc-etoiles .screen-reader-text,
.tbc-etoiles-lues .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}


/* =========================================================================
   39. CORRIGER SA PROPRE REMARQUE
   ========================================================================= */

/*
 * Le lien de correction est DISCRET PAR CONSTRUCTION. Il n'apparaît que pour
 * celui qui a écrit la remarque, et il ne doit pas concurrencer le texte : on
 * lui donne la taille d'une mention et la couleur d'un détail, pas celle d'un
 * bouton. Ce qui compte sur la page, c'est ce que les gens se sont écrit.
 */

.tbc-corriger {
	margin-top: var(--wp--preset--spacing--espace-1);
}

/*
 * <summary> porte une flèche que les navigateurs dessinent eux-mêmes. On la
 * retire pour poser la nôtre, qui pivote à l'ouverture — c'est le seul signe
 * qui dise « ça se replie » avant qu'on ait cliqué.
 */
.tbc-corriger__ouvrir {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--espace-05);
	cursor: pointer;
	list-style: none;
	font-size: var(--wp--preset--font-size--legende);
	color: var(--wp--preset--color--encre-600);
}

.tbc-corriger__ouvrir::-webkit-details-marker {
	display: none;
}

.tbc-corriger__ouvrir::before {
	content: "›";
	display: inline-block;
	transition: transform 0.15s ease;
}

.tbc-corriger[open] > .tbc-corriger__ouvrir::before {
	transform: rotate(90deg);
}

.tbc-corriger__ouvrir:hover,
.tbc-corriger[open] > .tbc-corriger__ouvrir {
	color: var(--wp--preset--color--encre-800);
}

.tbc-corriger__ouvrir:focus-visible {
	outline: 2px solid var(--wp--preset--color--mousse-700);
	outline-offset: 3px;
	border-radius: 2px;
}

.tbc-corriger__formulaire {
	margin-top: var(--wp--preset--spacing--espace-2);
	padding-top: var(--wp--preset--spacing--espace-2);
	border-top: 1px solid var(--wp--preset--color--filet-fin);
}

/*
 * Ce formulaire vit DANS la liste des remarques, hors du bloc « formulaire de
 * commentaire » de WordPress. Aucune de ses règles ne s'y applique, y compris
 * celle qui met les champs à 100 % : on écrit donc la largeur nous-mêmes, et
 * box-sizing pour que le retrait ne s'ajoute pas par-dessus.
 */
.tbc-corriger__texte {
	box-sizing: border-box;
	width: 100%;
	padding: var(--wp--preset--spacing--espace-15);
	font-family: var(--wp--preset--font-family--corps);
	font-size: var(--wp--preset--font-size--corps-sm);
	line-height: 1.55;
	color: var(--wp--preset--color--encre-800);
	background-color: var(--wp--preset--color--papier-0);
	border: 1px solid var(--wp--preset--color--filet-fin);
	border-radius: 3px;
	resize: vertical;
}

.tbc-corriger__texte:focus-visible {
	outline: 2px solid var(--wp--preset--color--mousse-700);
	outline-offset: 1px;
}

.tbc-corriger__actions {
	margin: var(--wp--preset--spacing--espace-15) 0 0;
}

.tbc-corriger__actions .tbc-bouton {
	border: 0;
	cursor: pointer;
	font-family: inherit;
}

/* Dans une carte de remarque, les étoiles se serrent un peu. */
.tbc-corriger .tbc-etoiles {
	margin-bottom: var(--wp--preset--spacing--espace-15);
}

.tbc-corriger .tbc-etoiles__etoile {
	font-size: 22px;
}

/*
 * « Sans note » n'est pas une étoile : c'est la sortie de l'échelle. On lui
 * donne l'allure d'une case à cocher ordinaire pour qu'elle ne se confonde
 * pas avec les cinq autres choix.
 */
.tbc-etoiles__aucune {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--espace-05);
	margin: var(--wp--preset--spacing--espace-05) 0 0;
	font-size: var(--wp--preset--font-size--legende);
	color: var(--wp--preset--color--encre-600);
}

.tbc-etoiles__aucune input {
	width: auto;
	margin: 0;
}

.tbc-etoiles__aucune label {
	cursor: pointer;
}

/* La mention d'une remarque corrigée, sur la ligne de signature. */
.tbc-remarque__corrigee {
	margin: 0;
	font-family: var(--wp--preset--font-family--chiffres);
	font-size: var(--wp--preset--font-size--micro);
	font-style: italic;
	color: var(--wp--preset--color--encre-500);
}


/* =========================================================================
   40. L'ATTRIBUTION DES FILMS
   ========================================================================= */

/*
 * Une ligne discrète sous le bas du pied de page. Le logo TMDB doit rester
 * moins visible que la marque du site : dix pixels de haut, posé sur la
 * ligne de texte comme un mot parmi les autres.
 */
.tbc-pied__attribution {
	margin-top: var(--wp--preset--spacing--espace-1);
}

.tbc-pied__tmdb img {
	display: inline-block;
	width: auto;
	height: 10px;
	margin-right: 0.35em;
	vertical-align: baseline;
}