/* Bandeaux & Liens — styles du front */

/* La pile sort de la colonne de contenu pour occuper toute la largeur de
   l'écran. Quand le bloc est réglé sur « pleine largeur », le thème s'en
   charge déjà et on annule le débordement pour éviter de le compter deux fois. */
.bl-pile {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: auto;
	margin: 0 calc(50% - 50vw);
	padding: 0;
}

/* Les blocs se suivent sans respiration : la pile doit rester soudée au
   bandeau de titre, sinon une bande blanche coupe le dégradé en deux. */
.bl-pile--titre,
.bl-pile--articles,
.bl-pile--categories {
	margin-top: 0;
	margin-bottom: 0;
}

.bl-pile--titre + *,
.wp-block-group > .alignfull {
	margin-top: 0;
}

.alignfull > .bl-pile,
.alignwide > .bl-pile {
	margin-left: 0;
	margin-right: 0;
}

.bl-bandeau {
	--bl-fond: #e6e6e6;
	--bl-texte: #1a1a1a;

	position: relative;
	display: block;
	border-radius: 0;
	background: var(--bl-fond);
	color: var(--bl-texte);
	text-decoration: none;
	transition: filter .16s ease;
}

/* « display: block » ci-dessus l'emportait sur l'attribut hidden du
   navigateur : la recherche masquait les bandeaux sans qu'ils disparaissent. */
.bl-bandeau[hidden] {
	display: none;
}

/* Le texte reste aligné sur la colonne de contenu du thème, même si le fond
   coloré va d'un bord à l'autre de l'écran. */
.bl-bandeau__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1180px);
	margin: 0 auto;
	padding: 1.7rem 2rem;
	box-sizing: border-box;
}

.bl-bandeau:hover {
	filter: brightness(1.05);
}

/* --- Titre --- */

.bl-bandeau__titre {
	margin: 0;
	font-size: clamp(1.1rem, 1.85vw, 1.4rem);
	font-weight: 500;
	line-height: 1.36;
	letter-spacing: .012em;
	text-transform: uppercase;
	color: var(--bl-texte);
	/* Les titres longs se déroulent sur plusieurs lignes, comme dans la
	   maquette : on ne les tronque pas. */
	overflow-wrap: break-word;
}

/* Bandeau discret : le texte se range contre la flèche, à droite. */
.bl-bandeau--droite .bl-bandeau__inner {
	justify-content: flex-end;
	gap: 1rem;
}

.bl-bandeau--petit .bl-bandeau__inner {
	padding-top: 1.15rem;
	padding-bottom: 1.15rem;
}

.bl-bandeau--petit .bl-bandeau__titre,
.bl-bandeau--categorie.bl-bandeau--petit .bl-bandeau__titre {
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	font-weight: 500;
}

.bl-bandeau--categorie .bl-bandeau__titre,
.bl-bandeau--titre .bl-bandeau__titre {
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	font-weight: 500;
}

.bl-bandeau__titre a {
	color: inherit;
	text-decoration: none;
}

/* Flèche de retour vers la liste des catégories. */
.bl-bandeau--titre .bl-bandeau__titre {
	display: flex;
	align-items: center;
	gap: .7rem;
}

.bl-retour-accueil {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	margin-left: -8px;
	border-radius: 50%;
	color: var(--bl-texte);
	transition: background .15s ease, transform .15s ease;
}

.bl-retour-accueil:hover {
	background: rgba(0, 0, 0, .12);
	transform: translateX(-3px);
}

.bl-fleche-g {
	width: 26px;
	height: 26px;
}

/* Le lien du titre couvre tout le bandeau, sauf les commandes de droite. */
.bl-lien-etendu::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* --- Corps et méta --- */

.bl-bandeau__corps {
	min-width: 0;
	flex: 1 1 auto;
}

.bl-bandeau__meta {
	margin: .5rem 0 0;
	font-size: .88rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--bl-texte);
	opacity: .68;
}

/* Sans auteur ni date, la ligne disparaît complètement. */
.bl-bandeau__meta:empty {
	display: none;
}

.bl-sep {
	margin: 0 .5em;
}

.bl-cat,
.bl-editeur {
	font-variant: all-small-caps;
	letter-spacing: .04em;
}

.bl-description {
	max-width: var(--wp--style--global--content-size, 820px);
	margin: 1.5rem auto 0;
	padding: 0 2rem;
	opacity: .8;
}

/* --- Bloc de droite --- */

.bl-bandeau__droite {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: .5rem;
	flex: 0 0 auto;
	color: var(--bl-texte);
}

.bl-compte {
	font-size: .85rem;
	font-weight: 500;
	opacity: .7;
	white-space: nowrap;
}

.bl-fleche {
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	transition: transform .16s ease;
}

.bl-bandeau:hover .bl-fleche,
.bl-fleche-lien:hover .bl-fleche {
	transform: translateX(4px);
}

.bl-fleche-lien {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--bl-texte);
	text-decoration: none;
	transition: background .15s ease;
}

.bl-fleche-lien:hover {
	background: rgba(0, 0, 0, .12);
}

/* --- Bouton favori --- */

.bl-favori {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--bl-texte);
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}

.bl-favori svg {
	width: 22px;
	height: 22px;
}

/* Le voile est noir : tous les bandeaux sont clairs. */
.bl-favori:hover {
	background: rgba(0, 0, 0, .12);
}

.bl-favori[aria-pressed="true"] svg path {
	fill: currentColor;
}

.bl-favori.bl-pulse {
	transform: scale(1.22);
}

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

.bl-bandeau a:focus-visible,
.bl-fleche-lien:focus-visible,
.bl-favori:focus-visible {
	outline: 3px solid var(--bl-texte);
	outline-offset: -6px;
	border-radius: 4px;
}

/* --- Pagination --- */

.bl-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	justify-content: center;
	margin: 2.5rem 0 3rem;
}

.bl-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 .75rem;
	border-radius: 6px;
	border: 1px solid currentColor;
	font-size: .9rem;
	font-weight: 500;
	text-decoration: none;
	opacity: .5;
	transition: opacity .15s ease;
}

.bl-pagination .page-numbers:hover,
.bl-pagination .page-numbers.current {
	opacity: 1;
}

/* --- États vides --- */

.bl-vide {
	max-width: var(--wp--style--global--content-size, 820px);
	margin: 0 auto;
	padding: 2.5rem 2rem;
	opacity: .6;
	text-align: center;
}

/* --- Mobile --- */

@media (max-width: 600px) {
	.bl-bandeau__inner {
		padding: 1.35rem 1.25rem;
		gap: .75rem;
	}

	/* Les tailles fluides tombent sur leur minimum en dessous de 600 px : on
	   relève ce plancher, sinon les titres deviennent minuscules là où
	   l'écran est déjà le plus petit. */
	.bl-bandeau__titre {
		font-size: 1.72rem;
		line-height: 1.28;
	}

	.bl-bandeau--categorie .bl-bandeau__titre,
	.bl-bandeau--titre .bl-bandeau__titre {
		font-size: 2.05rem;
	}

	.bl-bandeau--petit .bl-bandeau__titre,
	.bl-bandeau--categorie.bl-bandeau--petit .bl-bandeau__titre {
		font-size: 1.45rem;
	}

	.bl-bandeau__meta {
		font-size: 1.16rem;
	}

	.bl-index__terme {
		font-size: 1.32rem;
	}

	.bl-pile--grille .bl-bandeau__titre {
		font-size: 1.46rem;
	}

	.bl-pile--grille .bl-bandeau--categorie .bl-bandeau__titre {
		font-size: 1.56rem;
	}

	.bl-bandeau__droite {
		gap: .1rem;
	}

	.bl-fleche {
		width: 20px;
		height: 20px;
	}

	.bl-favori,
	.bl-fleche-lien {
		width: 36px;
		height: 36px;
	}

	.bl-compte {
		display: none;
	}

	.bl-bandeau--categorie .bl-compte,
	.bl-bandeau--titre .bl-compte {
		display: inline;
		font-size: .95rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bl-bandeau,
	.bl-fleche,
	.bl-favori {
		transition: none;
	}
}

/* --- Barre de filtre --- */

/* La barre ne contient parfois qu'un bouton masqué — celui du retour. Sans
   cette règle elle garde sa marge et laisse une bande blanche au milieu de la
   pile. Le script la masque aussi, ceci couvre le cas où il n'a pas encore
   tourné. */
.bl-barre:not(:has(> :not([hidden]))) {
	display: none;
}

.bl-barre[hidden] {
	display: none;
}

.bl-barre {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .6rem;
	max-width: var(--wp--style--global--wide-size, 1180px);
	margin: 0 auto;
	padding: 1rem 2rem .85rem;
}

/* Dans un bandeau de titre, le bouton se pose juste après le compteur. */
.bl-bandeau__droite .bl-filtre {
	margin-left: .35rem;
}

.bl-filtre {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem 1rem;
	border: 1.5px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-size: .85rem;
	font-weight: 500;
	font-family: inherit;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	opacity: .75;
	transition: opacity .15s ease, background .15s ease, color .15s ease;
}

.bl-filtre svg {
	width: 18px;
	height: 18px;
}

.bl-filtre:hover {
	opacity: 1;
}

.bl-filtre[aria-pressed="true"] {
	opacity: 1;
	background: #1a1a1a;
	color: #fff;
	border-color: #1a1a1a;
}

/* Dans le bandeau de titre, le bouton reprend la couleur du bandeau. */
.bl-bandeau--titre .bl-filtre {
	color: var(--bl-texte);
	opacity: .78;
	background: rgba(255, 255, 255, .35);
	border-color: rgba(0, 0, 0, .22);
}

.bl-bandeau--titre .bl-filtre:hover {
	opacity: 1;
	background: rgba(255, 255, 255, .6);
}

.bl-bandeau--titre .bl-filtre[aria-pressed="true"] {
	background: #1a1a1a;
	color: #fff;
	border-color: #1a1a1a;
}

.bl-bandeau--titre .bl-bandeau__droite {
	gap: 1rem;
}

.bl-filtre[aria-pressed="true"] svg path {
	fill: currentColor;
}

.bl-filtre__compte {
	min-width: 1.6em;
	padding: .18em .45em;
	border-radius: 999px;
	background: rgba(0, 0, 0, .14);
	font-size: .76rem;
	text-align: center;
}

.bl-filtre[aria-pressed="true"] .bl-filtre__compte {
	background: rgba(255, 255, 255, .22);
}

.bl-filtre:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

@media (max-width: 600px) {
	.bl-barre {
		padding: .85rem 1.25rem .7rem;
	}

	/* Sur mobile, l'étoile et le compteur suffisent : le libellé prendrait
	   toute la place à côté du nombre d'articles. */
	.bl-bandeau__droite .bl-filtre .bl-filtre__texte {
		display: none;
	}

	.bl-bandeau__droite .bl-filtre {
		padding: .4rem .7rem;
		gap: .35rem;
	}
}

/* --- Recherche --- */

.bl-recherche {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}

/* Rien à filtrer sur cette page : le bloc s'efface plutôt que de proposer une
   recherche sans effet. */
.bl-recherche[hidden] {
	display: none;
}

.bl-recherche__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	opacity: .7;
	transition: opacity .15s ease, background .15s ease;
}

.bl-recherche__bouton svg {
	width: 21px;
	height: 21px;
}

.bl-recherche__bouton:hover {
	opacity: 1;
	background: rgba(0, 0, 0, .1);
}

.bl-recherche__champ {
	width: clamp(150px, 20vw, 260px);
	padding: .55rem 1rem;
	border: 1px solid rgba(0, 0, 0, .28);
	border-radius: 999px;
	background: #fff;
	color: #1a1a1a;
	font-size: .9rem;
	font-family: inherit;
}

.bl-recherche__champ[hidden] {
	display: none;
}



.bl-recherche__champ:focus {
	outline: 2px solid currentColor;
	outline-offset: 1px;
	background: #fff;
}

/* --- Retour depuis les favoris --- */

.bl-retour__bouton {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .55rem 1.1rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-size: .88rem;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	opacity: .65;
	transition: opacity .15s ease;
}

.bl-retour__bouton:hover {
	opacity: 1;
}

.bl-retour__bouton:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.bl-retour__bouton .bl-fleche-g {
	width: 18px;
	height: 18px;
}

.bl-retour__bouton[hidden] {
	display: none;
}

@media (max-width: 600px) {
	.bl-bandeau--titre .bl-bandeau__inner {
		flex-wrap: wrap;
		gap: .75rem;
	}

	.bl-retour__bouton span,
	.bl-filtre__texte {
		display: none;
	}
}

/* --- Confirmation de favori --- */

.bl-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	z-index: 9999;
	transform: translateX(-50%) translateY(14px);
	max-width: min(92vw, 460px);
	padding: .85rem 1.35rem;
	border-radius: 999px;
	background: #1a1a1a;
	color: #fff;
	font-size: .88rem;
	line-height: 1.4;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}

.bl-toast.bl-toast--visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

.bl-toast a {
	color: #fff;
	font-weight: 600;
	text-decoration: underline;
	margin-left: .4rem;
}

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

/* --- Rendez-vous dans les icônes de réseaux sociaux ---------------------
 *
 * WordPress ne propose pas Calendly, et son logo est une marque déposée.
 * Plutôt que d'ajouter une icône à côté du bloc natif — qui déréglait
 * l'alignement et l'espacement de l'en-tête — on remplace le pictogramme
 * d'un lien pointant vers calendly.com. L'icône hérite alors de la taille,
 * des couleurs, des marges et du comportement mobile décidés par le thème.
 *
 * Dans l'éditeur : ajoutez une icône au bloc existant, choisissez le service
 * « Lien », et collez votre adresse Calendly.
 * -------------------------------------------------------------------- */

.wp-block-social-link a[href*="calendly."] svg {
	display: none;
}

.wp-block-social-link a[href*="calendly."]::before {
	content: "";
	display: block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5' fill='none' stroke='black' stroke-width='1.9'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='15.5' r='1.7' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5' fill='none' stroke='black' stroke-width='1.9'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='15.5' r='1.7' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Document PDF -------------------------------------------------------
 *
 * On habille le bloc « Fichier » de WordPress plutôt que d'en écrire un :
 * il gère déjà le téléversement, l'aperçu intégré et le bouton de
 * téléchargement, et il restera maintenu par les mises à jour du cœur.
 * -------------------------------------------------------------------- */

.wp-block-file {
	max-width: var(--wp--style--global--wide-size, 1180px);
	margin: 0 auto;
	padding: 2rem;
	box-sizing: border-box;
}

.wp-block-file embed,
.wp-block-file object,
.wp-block-file iframe {
	width: 100%;
	min-height: 70vh;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 8px;
}

.wp-block-file__button {
	display: inline-flex;
	align-items: center;
	margin-top: 1.25rem;
	padding: .7rem 1.4rem;
	border-radius: 999px;
	background: #1a1a1a;
	color: #fff;
	font-size: .9rem;
	font-weight: 500;
	text-decoration: none;
}

.wp-block-file__button:hover {
	opacity: .85;
}

/* L'aperçu intégré des PDF n'est pas fiable sur iOS et Android : sous cette
   largeur on ne montre que le bouton, qui ouvre le lecteur du téléphone. */
@media (max-width: 782px) {
	.wp-block-file embed,
	.wp-block-file object,
	.wp-block-file iframe {
		display: none;
	}

	.wp-block-file {
		padding: 1.5rem 1.25rem;
	}
}

/* --- Disposition en carrés ----------------------------------------------
 *
 * Variante à comparer avec les bandeaux pleine largeur. Les tuiles se
 * répartissent automatiquement selon la place disponible : quatre ou cinq
 * de front sur un écran large, deux sur une tablette, une sur un téléphone.
 * -------------------------------------------------------------------- */

.bl-pile--grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 0;
}

/* En bandeau, le contenu est calé sur la colonne de texte. Dans une tuile,
   il doit au contraire occuper toute la case. */
.bl-pile--grille .bl-bandeau__inner {
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	max-width: none;
	aspect-ratio: 1;
	gap: 1rem;
	padding: 1.5rem;
}

.bl-pile--grille .bl-bandeau__titre {
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	line-height: 1.3;
	/* Un titre de quarante mots ne doit pas faire éclater la tuile. */
	display: -webkit-box;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bl-pile--grille .bl-bandeau--categorie .bl-bandeau__titre {
	font-size: clamp(1.05rem, 1.7vw, 1.35rem);
	-webkit-line-clamp: 4;
	line-clamp: 4;
}

.bl-pile--grille .bl-bandeau__corps {
	flex: 0 1 auto;
	width: 100%;
}

.bl-pile--grille .bl-bandeau__droite {
	width: 100%;
	justify-content: space-between;
	margin-top: auto;
}

.bl-pile--grille .bl-compte {
	display: inline;
}

/* Le décalage horizontal au survol n'a pas de sens dans une mosaïque. */
.bl-pile--grille .bl-bandeau:hover .bl-fleche {
	transform: none;
}

.bl-pile--grille .bl-bandeau__meta {
	margin-top: .5rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 600px) {
	.bl-pile--grille {
		grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
	}

	/* À cette taille de texte, un carré strict rognerait les noms longs :
	   la tuile s'allonge plutôt que de tronquer. */
	.bl-pile--grille .bl-bandeau__inner {
		aspect-ratio: auto;
		min-height: 165px;
	}

	.bl-pile--grille .bl-bandeau__titre {
		-webkit-line-clamp: 7;
		line-clamp: 7;
	}

	.bl-pile--grille .bl-bandeau__inner {
		padding: 1.1rem;
		gap: .6rem;
	}
}

/* --- Bandeau double ---------------------------------------------------- */

.bl-pile--duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}

/* Vider le texte d'une moitié suffit à retrouver un bandeau normal : pas
   besoin de supprimer le bloc ni de toucher au gabarit. */
.bl-pile--duo-simple {
	grid-template-columns: 1fr;
}

.bl-pile--duo-simple .bl-bandeau__inner {
	max-width: var(--wp--style--global--wide-size, 1180px);
	margin: 0 auto;
}

.bl-bandeau--moitie .bl-bandeau__inner {
	max-width: none;
	padding-left: 2rem;
	padding-right: 2rem;
}

/* La moitié de gauche s'aligne sur la colonne de texte du reste du site, pour
   que les titres démarrent au même endroit que ceux des catégories. */
.bl-pile--duo > :first-child .bl-bandeau__inner {
	max-width: calc(var(--wp--style--global--wide-size, 1180px) / 2);
	margin-left: auto;
	margin-right: 0;
}

.bl-pile--duo > :last-child .bl-bandeau__inner {
	max-width: calc(var(--wp--style--global--wide-size, 1180px) / 2);
	margin-right: auto;
	margin-left: 0;
}

@media (max-width: 700px) {
	.bl-pile--duo {
		grid-template-columns: 1fr;
	}

	.bl-pile--duo > * .bl-bandeau__inner {
		max-width: var(--wp--style--global--wide-size, 1180px);
		margin: 0 auto;
	}
}

/* --- Sommaire alphabétique ----------------------------------------------
 *
 * Un seul flux : la lettre, ses rubriques, la lettre suivante. Les sections
 * ne repartent pas à la ligne, elles s'enchaînent, ce qui divise la hauteur
 * de la page par dix sur cent trente-huit entrées.
 * -------------------------------------------------------------------- */

.bl-index__lettres {
	display: flex;
	flex-wrap: wrap;
	gap: .2rem;
	padding: .9rem 2rem;
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--wp--preset--color--base, #fff);
	border-bottom: 1px solid rgba(128, 128, 128, .2);
}

.bl-index__lettres a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	font-size: .82rem;
	font-weight: 500;
	text-decoration: none;
	color: inherit;
	opacity: .5;
	transition: opacity .15s ease, background .15s ease;
}

.bl-index__lettres a:hover {
	opacity: 1;
	background: rgba(0, 0, 0, .08);
}

.bl-index {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .45rem 1.5rem;
	padding: 1.75rem 2rem 4rem;
}

/* La flèche de retour prend la place d'une pastille, juste avant le A. */
.bl-index__retour {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 999px;
	border: 1px solid currentColor;
	color: inherit;
	text-decoration: none;
	opacity: .55;
	transition: opacity .15s ease, transform .15s ease;
}

.bl-index__retour:hover {
	opacity: 1;
	transform: translateX(-3px);
}

.bl-index__retour .bl-fleche-g {
	width: 18px;
	height: 18px;
}

/* La pastille de lettre s'intercale dans le flux, elle n'ouvre pas de ligne. */
.bl-index__lettre {
	--bl-fond: #eee;
	--bl-texte: #1a1a1a;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.1rem;
	height: 2.1rem;
	padding: 0 .5rem;
	border-radius: 999px;
	background: var(--bl-fond);
	color: var(--bl-texte);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	scroll-margin-top: 4.5rem;
}

.bl-index__terme {
	display: inline-flex;
	align-items: baseline;
	gap: .35rem;
	color: inherit;
	text-decoration: none;
	font-size: clamp(.9rem, 1.1vw, 1rem);
	line-height: 1.5;
}

.bl-index__terme:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bl-index__compte {
	font-size: .72rem;
	opacity: .45;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
	.bl-index__lettres {
		padding: .75rem 1.25rem;
	}

	.bl-index {
		gap: .4rem 1.1rem;
		padding: 1.25rem 1.25rem 3rem;
	}
}

/* --- Retour en haut ------------------------------------------------------
 *
 * Les pages sont longues depuis que la pagination a été retirée : sans ce
 * bouton, revenir à la barre des lettres ou à l'en-tête demande un long
 * défilement.
 * -------------------------------------------------------------------- */

.bl-arriere {
	position: fixed;
	left: 1.5rem;
	bottom: 1.5rem;
	z-index: 60;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #1a1a1a;
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}

.bl-arriere svg {
	width: 22px;
	height: 22px;
}

.bl-arriere--visible {
	opacity: .85;
	transform: translateY(0);
	pointer-events: auto;
}

.bl-arriere:hover {
	opacity: 1;
}

.bl-arriere:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.bl-haut {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 60;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #1a1a1a;
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}

.bl-haut svg {
	width: 22px;
	height: 22px;
}

.bl-haut--visible {
	opacity: .85;
	transform: translateY(0);
	pointer-events: auto;
}

.bl-haut:hover {
	opacity: 1;
}

.bl-haut:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

@media (max-width: 600px) {
	.bl-haut {
		right: 1rem;
		bottom: 1rem;
		width: 42px;
		height: 42px;
	}

	.bl-arriere {
		left: 1rem;
		bottom: 1rem;
		width: 42px;
		height: 42px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bl-haut,
	.bl-arriere,
	.bl-index__retour {
		transition: none;
	}
}

/* --- Résultats de recherche et favoris ----------------------------------
 *
 * Les résultats reprennent toujours la forme de bandeaux, y compris quand la
 * liste d'origine est en mosaïque ou qu'il s'agit du sommaire : des titres
 * d'articles longs tiennent mal dans un carré, et une liste de résultats se
 * parcourt verticalement.
 * -------------------------------------------------------------------- */

.bl-pile--resultats,
.bl-index.bl-pile--resultats {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
	padding: 0;
}

/* La barre des lettres n'a plus de sens quand le sommaire affiche autre
   chose que son index. */
body.bl-resultats .bl-index__lettres {
	display: none;
}

.bl-pile--resultats .bl-bandeau__inner {
	aspect-ratio: auto;
	min-height: 0;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	max-width: var(--wp--style--global--wide-size, 1180px);
	padding: 1.7rem 2rem;
}

.bl-pile--resultats .bl-bandeau__titre {
	-webkit-line-clamp: none;
	line-clamp: none;
	overflow: visible;
	display: block;
}

@media (max-width: 600px) {
	.bl-pile--resultats .bl-bandeau__inner {
		padding: 1.35rem 1.25rem;
	}
}

/* --- Loupe rangée parmi les icônes sociales -----------------------------
 *
 * L'élément reprend la taille et l'espacement décidés par le bloc d'icônes du
 * thème : on ne fixe donc aucune dimension en pixels, tout est en em.
 * -------------------------------------------------------------------- */

.bl-social-recherche {
	display: inline-flex;
	align-items: center;
	background: none;
	padding: 0;
}

.bl-social-recherche .bl-recherche {
	position: static;
}

.bl-social-recherche .bl-recherche__bouton {
	width: 1.5em;
	height: 1.5em;
	background: none;
	opacity: 1;
}

.bl-social-recherche .bl-recherche__bouton svg {
	width: 100%;
	height: 100%;
}

.bl-social-recherche .bl-recherche__bouton:hover {
	background: none;
	opacity: .7;
}

/* Le champ est rattaché au corps de la page et positionné par le script.
 *
 * L'en-tête et ses conteneurs rognent ce qui dépasse de leurs limites, et le
 * champ s'y retrouvait coupé en deux. Sorti de là, plus rien ne le contraint. */
body > .bl-recherche__champ {
	position: fixed;
	/* Au-dessus de tout : bandeaux, barre des lettres, boutons flottants et
	   barre d'administration de WordPress. */
	z-index: 2147483000;
	box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
}

body > .bl-recherche__champ[hidden] {
	display: none;
}

/* --- Panneau de recherche mobile ----------------------------------------
 *
 * Le champ flottant repassait derrière l'en-tête sur certains navigateurs
 * mobiles, quels que soient les z-index. Un panneau opaque couvrant l'écran
 * supprime le problème à la racine : il n'y a plus rien derrière quoi passer.
 * -------------------------------------------------------------------- */

.bl-recherche__panneau {
	position: fixed;
	/* Écrit en quatre propriétés plutôt qu'en « inset » : le raccourci n'est
	   pris en charge que par les Safari récents. */
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	padding: 1.25rem;
	background: var(--wp--preset--color--base, #fff);
}

.bl-recherche__panneau[hidden] {
	display: none;
}

body.admin-bar .bl-recherche__panneau {
	top: 46px;
}

.bl-recherche__barre {
	display: flex;
	align-items: center;
	gap: .75rem;
}

/* Dans le panneau, le champ redevient un élément ordinaire du flux : plus
   aucune coordonnée à calculer. */
.bl-recherche__champ--panneau {
	position: static;
	flex: 1 1 auto;
	width: auto;
	padding: .9rem 1.1rem;
	font-size: 1.15rem;
	box-shadow: none;
}

.bl-recherche__fermer {
	flex: 0 0 auto;
	padding: .7rem .4rem;
	border: 0;
	background: none;
	color: inherit;
	font-size: 1rem;
	font-family: inherit;
	cursor: pointer;
	opacity: .7;
}

.bl-recherche__fermer:hover {
	opacity: 1;
}

.bl-recherche__aide {
	margin: 1.25rem 0 0;
	font-size: .95rem;
	line-height: 1.5;
	opacity: .6;
}

/* La page ne défile plus derrière le panneau ouvert. */
body.bl-recherche-ouverte {
	overflow: hidden;
}

/* --- Liens légaux du pied de page --------------------------------------- */

/* Ajoutés en fin de page quand le pied de page du thème n'a pas été reconnu :
   ils doivent rester visibles, ce sont des mentions obligatoires. Le script
   les replace ensuite dans le pied de page. */
.bl-legal__secours {
	padding: 1.5rem 0 2.5rem;
}

.bl-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .25rem;
	width: 100%;
	/* Un peu d'air au-dessus, et surtout en dessous : collés au bord de la
	   fenêtre, les liens donnent l'impression d'une page tronquée. */
	margin: 1.5rem auto 0;
	padding: 0 2rem 3rem;
	box-sizing: border-box;
	font-size: .88rem;
	text-align: center;
}

.bl-legal a {
	color: inherit;
	text-decoration: none;
	opacity: .6;
	transition: opacity .15s ease;
}

.bl-legal a:hover {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bl-legal__sep {
	margin: 0 .5rem;
	opacity: .35;
}

@media (max-width: 600px) {
	.bl-legal {
		padding: 0 1.25rem 2.5rem;
		font-size: .95rem;
	}
}