/*
 * Bibliothèque, Insectes et Compagnie : front.
 *
 * Une seule grammaire pour l'archive et pour la fiche. Cinq éléments portent la
 * continuité, et ils sont identiques des deux côtés : la couverture, la plaque
 * qui ouvre la page, le rail sous les rangées, les bandes Neige et Crème, et le
 * crédit sous chaque photographie.
 *
 * Règle de fabrication, tenue partout : aucun texte n'est jamais posé sur une
 * photographie. Le contraste d'une image qu'on n'a pas vue ne se garantit pas. Le
 * texte vit sur Neige, sur Crème, ou sur une plaque Sapin.
 *
 * Contrastes retenus, sur 4,5 pour 1 en texte courant et 3 pour 1 en grand texte :
 *   Sapin sur Neige 25,7   Kaki sur Neige 6,5   Sapin sur Crème 10,1
 *   Kaki sur Crème 5,7     Neige sur Sapin 25,7  Anis sur Sapin 5,9
 *   Neige sur Mandarine 3,2 : grand texte seulement, d'où le bouton en Citrus
 *   Gothic 20 px. Argile sur Neige 2,5 : Argile ne porte aucun texte sur fond
 *   clair, seulement des filets et des états inactifs.
 */

.iecb {
	--iecb-neige: #F7F9F7;
	--iecb-sapin: #34382B;
	--iecb-kaki: #575D49;
	--iecb-anis: #BDBA4B;
	--iecb-creme: #EDECD9;
	--iecb-argile: #A0A093;
	--iecb-mandarine: #EA621F;

	--iecb-titre: "citrus-gothic-rough", "Oswald", "Arial Narrow", "Haettenschweiler", sans-serif;
	--iecb-corps: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Amortissement critique par défaut ; le rebond est réservé à l'élan d'un geste. */
	--iecb-ressort: cubic-bezier(.2, .8, .3, 1);
	--iecb-elan: cubic-bezier(.34, 1.32, .64, 1);

	--iecb-marge: 20px;

	background: var(--iecb-neige);
	color: var(--iecb-sapin);
	font-family: var(--iecb-corps);
	font-weight: 300;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

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

.iecb [hidden] {
	display: none !important;
}

.iecb p,
.iecb li {
	line-height: 1.65;
	text-align: left;
}

.iecb :focus-visible {
	outline: 2px solid var(--iecb-mandarine);
	outline-offset: 3px;
}

.iecb img,
.iecb svg {
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   La remise à zéro de bouton, une fois pour toutes
   --------------------------------------------------------------------------
   Tout `<button>` du plugin porte `iecb-bouton-nu`, et ce bloc est le seul
   endroit qui défend les boutons contre la feuille du site.

   La feuille du site peint tout `<button>` de la page en Mandarine pleine, et
   elle le fait en `!important` :

       .wp-block-button__link, .button, button, input[type="submit"], … {
         background-color: var(--ic-mandarine) !important;
         color: var(--ic-neige) !important;
         border-radius: var(--ic-radius) !important;
         border: none !important;
         padding: 12px 24px !important;
       }

   Un `!important` ne se bat qu'avec un `!important` : la spécificité, même
   doublée, n'y suffit pas. Ces cinq propriétés sont donc reprises ici sous la
   même forme, à des valeurs neutres, et chaque composant repeint ensuite les
   siennes avec un sélecteur de trois classes, qui passe devant celui-ci quel
   que soit l'ordre des règles.

   Cinq propriétés, pas une de plus : le plugin défend ses propres boutons, il
   ne touche à rien d'autre et n'écrase aucune variable du thème. Un nouveau
   bouton hérite de la défense en recevant la classe, sans qu'on ait à y
   repenser.
   -------------------------------------------------------------------------- */

.iecb .iecb-bouton-nu {
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	color: inherit !important;
	font: inherit;
	line-height: normal;
	letter-spacing: normal;
	text-align: inherit;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.iecb-lecteur {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.iecb-conteneur {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 var(--iecb-marge);
}

/* --------------------------------------------------------------------------
   Titres
   -------------------------------------------------------------------------- */

.iecb-titre,
.iecb-section-titre,
.iecb-bloc-titre,
.iecb-fiche-titre,
.iecb-recueils-titre {
	margin: 0;
	font-family: var(--iecb-titre);
	font-weight: 400;
	text-transform: uppercase;
	color: var(--iecb-sapin);
}

/*
 * Alignés à gauche, toujours, comme le veut la charte.
 *
 * Le conteneur `.iecb` est déjà aligné à gauche, mais un titre n'hérite de rien
 * si une règle du thème le vise directement : c'est le cas des titres d'archive
 * que Blocksy centre. La défense est la même que pour les boutons : un
 * `!important` sur la seule propriété concernée, pour les seuls titres du plugin.
 */
.iecb h1,
.iecb h2,
.iecb h3,
.iecb h4 {
	text-align: left !important;
}

.iecb-titre {
	font-size: clamp(34px, 10vw, 76px);
	line-height: .92;
	letter-spacing: -.01em;
}

.iecb-section-titre {
	font-size: clamp(21px, 5.4vw, 28px);
	line-height: 1.05;
}

.iecb-chapo {
	max-width: 58ch;
	margin: 0;
	color: var(--iecb-kaki);
	font-size: 15.5px;
	line-height: 1.62;
}

.iecb-compteur {
	margin: 0;
	color: var(--iecb-kaki);
	font-size: 13px;
}

/* --------------------------------------------------------------------------
   Porteur 2 : l'ouverture. Photographie, puis plaque Neige qui la chevauche.
   -------------------------------------------------------------------------- */

.iecb-entete {
	position: relative;
	background: var(--iecb-creme);
}

.iecb-photo {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--iecb-fond, var(--iecb-kaki));
}

.iecb-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * De combien la plaque remonte sur la photographie.
 *
 * Une seule valeur, deux usages : la remontée de la plaque, et la hauteur de la
 * bande libre au bas du bandeau, celle où se pose le crédit. Les deux doivent
 * bouger ensemble, sans quoi le crédit passerait sous la plaque.
 */
.iecb {
	--iecb-chevauchement: 34px;
}

.iecb-fiche {
	--iecb-chevauchement: 46px;
}

.iecb-plaque {
	position: relative;
	margin: calc(-1 * var(--iecb-chevauchement)) var(--iecb-marge) 0;
	padding: 22px 20px 24px;
	border-radius: 3px;
	background: var(--iecb-neige);
}

.iecb-plaque .iecb-chapo {
	margin-top: 12px;
}

.iecb-plaque .iecb-compteur {
	margin-top: 14px;
}

/* Porteur 5 : le crédit accompagne toute photographie, sans exception. */
.iecb-credit {
	max-width: 1180px;
	margin: 0 auto;
	padding: 8px var(--iecb-marge) 0;
	color: var(--iecb-kaki);
	font-size: 11.5px;
	line-height: 1.45;
}

/*
 * Le crédit d'un bandeau se pose au bas de ce bandeau, et non après la plaque.
 *
 * Il était rendu après la plaque : sur une fiche, il finissait donc sous la
 * couverture et sous le bouton d'achat, à bonne distance de la photographie
 * qu'il crédite. Il s'appuie maintenant au bas du bandeau, juste au-dessus du
 * bord de la plaque qui le chevauche : c'est la seule bande libre entre l'image
 * et le titre, d'où le décalage par `--iecb-chevauchement`.
 *
 * C'est le seul texte que le plugin pose sur une photographie, et il le fait
 * comme la pastille de note sur une couverture : plaque Sapin pleine, Neige
 * dessus, 25,7 pour 1. Le contraste ne dépend donc pas de l'image.
 */
.iecb-credit--bandeau {
	position: absolute;
	right: var(--iecb-marge);
	bottom: calc(var(--iecb-chevauchement) + 8px);
	left: auto;
	max-width: calc(100% - 2 * var(--iecb-marge));
	margin: 0;
	padding: 4px 9px;
	border-radius: 2px;
	background: var(--iecb-sapin);
	color: var(--iecb-neige);
	font-size: 11px;
}

/* --------------------------------------------------------------------------
   Porteur 4 : les bandes, le rythme de la page
   -------------------------------------------------------------------------- */

.iecb-bande {
	padding: 32px 0 28px;
	--iecb-fond-rangee: var(--iecb-neige);
}

.iecb-bande--creme {
	background: var(--iecb-creme);
	--iecb-fond-rangee: var(--iecb-creme);
}

.iecb-bande-entete {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 var(--iecb-marge);
}

.iecb-bande-entete .iecb-chapo {
	margin-top: 8px;
	font-size: 14.5px;
}

/* --------------------------------------------------------------------------
   Porteur 3 : le rail, et les rangées défilantes
   -------------------------------------------------------------------------- */

.iecb-rangee {
	position: relative;
	margin-top: 16px;
}

.iecb-rangee-entete {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	align-items: baseline;
	justify-content: space-between;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 var(--iecb-marge);
}

.iecb-rangee-legende {
	max-width: 54ch;
	margin: 6px auto 0;
	padding: 0 var(--iecb-marge);
	color: var(--iecb-kaki);
	font-size: 13.5px;
}

.iecb-rangee-tout {
	color: var(--iecb-sapin);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 1px solid var(--iecb-argile);
}

.iecb-rangee-tout:hover {
	border-bottom-color: var(--iecb-sapin);
}

.iecb-piste {
	display: flex;
	gap: 14px;
	margin-top: 14px;
	padding: 2px var(--iecb-marge) 10px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	/*
	 * L'accrochage vise le bord intérieur de la marge, pas le bord de la piste.
	 * Sans cela, le navigateur calait la première carte contre le bord dès le
	 * chargement, et une rangée qui déborde démarrait décalée de la marge.
	 */
	scroll-padding-inline: var(--iecb-marge);
	scrollbar-width: none;
	touch-action: pan-x pan-y;
}

.iecb-piste::-webkit-scrollbar {
	display: none;
}

.iecb-piste > * {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.iecb-rangee.iecb-prise .iecb-piste {
	cursor: grabbing;
	scroll-snap-type: none;
}

/* Un dégradé dit qu'il y a de la suite. Aucune flèche. */
.iecb-rangee::before,
.iecb-rangee::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 10px;
	z-index: 2;
	width: 34px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s var(--iecb-ressort);
}

.iecb-rangee::before {
	left: 0;
	background: linear-gradient(90deg, var(--iecb-fond-rangee, var(--iecb-neige)), transparent);
}

.iecb-rangee::after {
	right: 0;
	background: linear-gradient(270deg, var(--iecb-fond-rangee, var(--iecb-neige)), transparent);
}

.iecb-rangee.iecb-rangee--avant::before,
.iecb-rangee.iecb-rangee--apres::after {
	opacity: 1;
}

/* Le rail : l'étagère sur laquelle la rangée est posée. */
.iecb-etagere {
	position: relative;
}

.iecb-etagere::after {
	content: "";
	display: block;
	max-width: 1180px;
	height: 4px;
	margin: 0 auto;
	border-radius: 2px;
	background: var(--iecb-argile);
	opacity: .5;
}

/* --------------------------------------------------------------------------
   Porteur 1 : la carte de livre, identique partout
   -------------------------------------------------------------------------- */

.iecb-livre {
	display: block;
	width: 132px;
	color: inherit;
	text-decoration: none;
}

.iecb-couverture {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	aspect-ratio: 2 / 3;
	padding: 12px 10px;
	border-radius: 3px;
	overflow: hidden;
	background: var(--iecb-fond, var(--iecb-kaki));
	color: var(--iecb-encre, var(--iecb-neige));
	transition: transform .3s var(--iecb-ressort), box-shadow .3s var(--iecb-ressort), filter .3s var(--iecb-ressort);
}

.iecb-couverture-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.iecb-couverture-titre {
	margin: 0;
	font-family: var(--iecb-titre);
	font-weight: 400;
	text-transform: uppercase;
	font-size: 14px;
	line-height: 1.06;
}

.iecb-couverture-auteur {
	margin: auto 0 0;
	font-size: 10.5px;
	line-height: 1.3;
	opacity: .88;
}

/*
 * La note est posée sur la couverture, sur une plaque Sapin : c'est le seul fond
 * qui garantisse la lisibilité au-dessus d'une photographie inconnue.
 */
.iecb-note {
	position: absolute;
	left: 8px;
	bottom: 8px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 8px 3px 7px;
	border-radius: 999px;
	background: var(--iecb-sapin);
	color: var(--iecb-neige);
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.4;
}

.iecb-note-etoile {
	color: var(--iecb-anis);
	font-size: 12px;
}

.iecb-note--vide {
	background: rgba(52, 56, 43, .82);
	font-weight: 300;
	font-size: 11px;
}

/* Le coup de cœur : un signet, jamais de texte sur Mandarine. */
.iecb-fanion {
	position: absolute;
	top: 0;
	right: 10px;
	width: 18px;
	height: 27px;
	background: var(--iecb-mandarine);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
}

.iecb-livre:hover .iecb-couverture,
.iecb-livre:focus-visible .iecb-couverture {
	transform: translateY(-7px);
	box-shadow: 0 14px 22px -14px rgba(52, 56, 43, .5);
}

.iecb-livre.iecb-presse .iecb-couverture {
	transform: translateY(-2px) scale(.985);
	transition-duration: .1s;
}

.iecb-prise .iecb-couverture {
	transition: none;
}

.iecb-livre-infos {
	display: block;
	padding: 9px 1px 0;
}

.iecb-livre-titre {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.32;
	color: var(--iecb-sapin);
}

.iecb-livre-auteur {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--iecb-kaki);
}

/* --------------------------------------------------------------------------
   Filtres
   -------------------------------------------------------------------------- */

/*
 * Grand écran, et toute page servie sans script : le panneau est déplié, ses
 * familles s'alignent en pilules, et la recherche passe dessous. C'est la
 * disposition d'origine.
 */
.iecb-filtres {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 15px var(--iecb-marge);
	border-top: 1px solid var(--iecb-argile);
	border-bottom: 1px solid var(--iecb-argile);
}

.iecb-filtres-barre {
	display: flex;
	gap: 10px;
	align-items: center;
	order: 2;
}

/* Sur grand écran, le script range le tri ici, à droite de la recherche. */
.iecb-filtres-barre .iecb-famille--tri {
	flex: 0 0 auto;
}

.iecb-panneau-corps {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 8px;
	align-items: center;
}

.iecb-famille {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

/* Le nom de la famille ne sert qu'au lecteur d'écran tant que les pilules sont en ligne. */
.iecb-famille-titre {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.iecb-panneau-tete,
.iecb-panneau-voir,
.iecb-filtres-voile {
	display: none;
}

.iecb-panneau-pied {
	display: flex;
	gap: 12px;
	align-items: center;
}

.iecb-panneau-pied:not(:has(.iecb-reinit:not([hidden]))) {
	display: none;
}

.iecb-filtres-ligne {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* --------------------------------------------------------------------------
   Petit écran : la recherche, un bouton « Filtrer », et le panneau
   --------------------------------------------------------------------------
   Seulement quand le script a posé `iecb-filtres--repli` : sans lui, rien ne
   pourrait ouvrir le panneau, et les filtres restent dépliés.

   Le panneau monte du bas, sur un ressort sans rebond. Il se referme par la
   croix, le voile, Échap, le bouton du pied, ou en le tirant vers le bas par
   sa poignée. La transition repart toujours de la position affichée.
   -------------------------------------------------------------------------- */

.iecb .iecb-filtrer {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 14px !important;
	border: 1px solid var(--iecb-argile) !important;
	border-radius: 999px !important;
	background-color: var(--iecb-neige) !important;
	color: var(--iecb-sapin) !important;
	font: 700 13.5px/1.2 var(--iecb-corps);
	transition: border-color .15s var(--iecb-ressort), transform .15s var(--iecb-ressort);
}

.iecb .iecb-filtrer.iecb-filtrer--actif {
	border-color: var(--iecb-sapin) !important;
}

.iecb .iecb-filtrer.iecb-presse {
	transform: scale(.96);
	transition-duration: .08s;
}

/* Trois traits de longueur décroissante : un entonnoir sans image. */
.iecb-filtrer-icone {
	display: block;
	width: 14px;
	height: 10px;
	background:
		linear-gradient(var(--iecb-sapin), var(--iecb-sapin)) 0 0 / 14px 2px no-repeat,
		linear-gradient(var(--iecb-sapin), var(--iecb-sapin)) 2px 4px / 10px 2px no-repeat,
		linear-gradient(var(--iecb-sapin), var(--iecb-sapin)) 4px 8px / 6px 2px no-repeat;
}

.iecb-filtrer-compte {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--iecb-sapin);
	color: var(--iecb-neige);
	font-size: 12px;
	font-weight: 700;
}

html.iecb-sans-defilement {
	overflow: hidden;
}

@media (max-width: 899px) {
	.iecb-filtres.iecb-filtres--repli .iecb-filtres-barre {
		order: 0;
	}

	.iecb-filtres--repli .iecb-recherche {
		flex: 1 1 auto;
		min-width: 0;
	}

	.iecb-filtres--repli .iecb-filtres-voile {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 99998;
		background: rgba(52, 56, 43, .5);
		opacity: 0;
		pointer-events: none;
		transition: opacity .3s var(--iecb-ressort);
	}

	.iecb-filtres--repli[data-ouvert="1"] .iecb-filtres-voile {
		opacity: 1;
		pointer-events: auto;
	}

	.iecb-filtres--repli .iecb-filtres-panneau {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 99999;
		display: flex;
		flex-direction: column;
		max-height: 86vh;
		max-height: 86dvh;
		border-radius: 14px 14px 0 0;
		background: var(--iecb-neige);
		box-shadow: 0 -18px 40px -24px rgba(52, 56, 43, .6);
		transform: translate3d(0, 105%, 0);
		visibility: hidden;
		transition: transform .38s var(--iecb-ressort), visibility 0s linear .38s;
	}

	.iecb-filtres--repli[data-ouvert="1"] .iecb-filtres-panneau {
		transform: none;
		visibility: visible;
		transition: transform .38s var(--iecb-ressort), visibility 0s;
	}

	.iecb-filtres--repli .iecb-panneau-tete {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 18px 16px 8px var(--iecb-marge);
		touch-action: none;
		cursor: grab;
	}

	.iecb-panneau-poignee {
		position: absolute;
		top: 7px;
		left: 50%;
		width: 38px;
		height: 4px;
		margin-left: -19px;
		border-radius: 2px;
		background: var(--iecb-argile);
	}

	.iecb-panneau-titre {
		margin: 0;
		font-family: var(--iecb-titre);
		font-size: 20px;
		line-height: 1.1;
		text-transform: uppercase;
		color: var(--iecb-sapin);
	}

	.iecb .iecb-filtres--repli .iecb-panneau-fermer {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0 !important;
		border: 1px solid var(--iecb-argile) !important;
		border-radius: 50% !important;
		background-color: var(--iecb-neige) !important;
		color: var(--iecb-sapin) !important;
		font-size: 16px;
	}

	.iecb-filtres--repli .iecb-panneau-corps {
		display: block;
		flex: 1 1 auto;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 4px var(--iecb-marge) 12px;
	}

	.iecb-filtres--repli .iecb-famille {
		display: block;
		margin: 0 0 18px;
	}

	.iecb-filtres--repli .iecb-famille-titre {
		position: static;
		display: block;
		width: auto;
		height: auto;
		margin: 0 0 8px;
		overflow: visible;
		clip-path: none;
		color: var(--iecb-kaki);
		font-size: 12.5px;
		font-weight: 700;
	}

	.iecb-filtres--repli .iecb-filtres-sep {
		display: none;
	}

	.iecb-filtres--repli .iecb-pilule {
		padding: 8px 15px;
		font-size: 14px;
	}

	.iecb .iecb-filtres--repli .iecb-pilule.iecb-pilule--favori {
		padding: 8px 15px !important;
		font-size: 14px;
	}

	.iecb-filtres--repli .iecb-tri {
		width: 100%;
		padding: 9px 12px;
		font-size: 14px;
	}

	.iecb-filtres--repli .iecb-panneau-pied,
	.iecb-filtres--repli .iecb-panneau-pied:not(:has(.iecb-reinit:not([hidden]))) {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		padding: 12px var(--iecb-marge);
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid var(--iecb-argile);
	}

	.iecb .iecb-filtres--repli .iecb-panneau-voir {
		display: inline-flex;
		align-items: center;
		margin-left: auto;
		padding: 11px 18px !important;
		border: 0 !important;
		border-radius: 999px !important;
		background-color: var(--iecb-sapin) !important;
		color: var(--iecb-neige) !important;
		font: 700 14px/1.2 var(--iecb-corps);
	}

	.iecb-filtres--repli .iecb-reinit {
		color: var(--iecb-sapin);
		font-size: 14px;
		font-weight: 700;
	}
}

.iecb-filtres-sep {
	display: none;
	width: 1px;
	height: 22px;
	background: var(--iecb-argile);
}

.iecb-pilule {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 14px;
	border: 1px solid var(--iecb-argile);
	border-radius: 999px;
	background: var(--iecb-neige);
	color: var(--iecb-kaki);
	font: 300 13px/1.35 var(--iecb-corps);
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color .15s var(--iecb-ressort),
		border-color .15s var(--iecb-ressort),
		color .15s var(--iecb-ressort),
		transform .15s var(--iecb-ressort);
}

.iecb-pilule:hover {
	border-color: var(--iecb-kaki);
	color: var(--iecb-sapin);
}

.iecb-pilule[aria-pressed="true"],
.iecb-pilule[aria-current="true"] {
	background: var(--iecb-sapin);
	border-color: var(--iecb-sapin);
	color: var(--iecb-neige);
}

/* Retour visuel au pointerdown, pas au relâchement. */
.iecb-pilule.iecb-presse {
	transform: scale(.955);
	transition-duration: .08s;
}

/* --------------------------------------------------------------------------
   La pilule des coups de cœur
   --------------------------------------------------------------------------
   C'est la seule pilule qui soit un `<button>` : elle bascule un état au lieu
   de mener quelque part. Elle se tient donc comme les autres, et rien ne la
   distingue au repos qu'un petit rond en contour.

   La Mandarine est réservée aux appels à l'action d'achat. Un filtre n'en est
   pas un : elle n'entre qu'à l'état sélectionné, où le rond se remplit sur le
   fond Sapin que prennent toutes les pilules actives.

   Les cinq propriétés que la feuille du site force sont reprises ici en
   `!important`, sur un sélecteur de trois classes qui passe devant la remise à
   zéro. Voir le bloc `iecb-bouton-nu`, en tête de cette feuille.
   -------------------------------------------------------------------------- */

.iecb .iecb-pilule.iecb-pilule--favori {
	padding: 6px 14px !important;
	border: 1px solid var(--iecb-argile) !important;
	border-radius: 999px !important;
	background-color: var(--iecb-neige) !important;
	color: var(--iecb-kaki) !important;
	font: 300 13px/1.35 var(--iecb-corps);
}

.iecb .iecb-pilule.iecb-pilule--favori:hover {
	border-color: var(--iecb-kaki) !important;
	background-color: var(--iecb-neige) !important;
	color: var(--iecb-sapin) !important;
}

.iecb .iecb-pilule.iecb-pilule--favori[aria-pressed="true"] {
	background-color: var(--iecb-sapin) !important;
	border-color: var(--iecb-sapin) !important;
	color: var(--iecb-neige) !important;
}

.iecb-pilule-marque {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: transparent;
	border: 1.5px solid var(--iecb-argile);
	transition:
		background-color .15s var(--iecb-ressort),
		border-color .15s var(--iecb-ressort);
}

.iecb-pilule--favori:hover .iecb-pilule-marque {
	border-color: var(--iecb-kaki);
}

.iecb-pilule--favori[aria-pressed="true"] .iecb-pilule-marque {
	background: var(--iecb-mandarine);
	border-color: var(--iecb-mandarine);
}

.iecb-recherche {
	flex: 1 1 190px;
	min-width: 170px;
}

.iecb-recherche input {
	width: 100%;
	padding: 7px 2px;
	border: 0;
	border-bottom: 1px solid var(--iecb-argile);
	border-radius: 0;
	background: none;
	font: 300 14px/1.4 var(--iecb-corps);
	color: var(--iecb-sapin);
	transition: border-color .15s var(--iecb-ressort);
}

.iecb-recherche input::placeholder {
	color: var(--iecb-kaki);
	opacity: 1;
}

.iecb-recherche input:hover {
	border-bottom-color: var(--iecb-kaki);
}

.iecb-tri {
	padding: 6px 12px;
	border: 1px solid var(--iecb-argile);
	border-radius: 999px;
	background: var(--iecb-neige);
	color: var(--iecb-kaki);
	font: 300 13px/1.35 var(--iecb-corps);
	cursor: pointer;
}

.iecb-reinit {
	color: var(--iecb-sapin);
	font-size: 13px;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

/*
 * Dès qu'un filtre est actif, on quitte la lecture éditoriale pour la recherche :
 * les rangées cessent de défiler et se déplient en grilles. Le classement par
 * thème est conservé, c'est ce qui donne du sens à un résultat.
 */
.iecb-archive[data-filtre="1"] .iecb-piste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
	gap: 26px 16px;
	overflow: visible;
	scroll-snap-type: none;
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
}

.iecb-archive[data-filtre="1"] .iecb-livre {
	width: auto;
}

.iecb-archive[data-filtre="1"] .iecb-rangee::before,
.iecb-archive[data-filtre="1"] .iecb-rangee::after,
.iecb-archive[data-filtre="1"] .iecb-rangee-legende,
.iecb-archive[data-filtre="1"] .iecb-rangee-tout,
.iecb-archive[data-filtre="1"] .iecb-editorial {
	display: none;
}

.iecb-vide {
	max-width: 52ch;
	padding: 46px var(--iecb-marge);
	color: var(--iecb-kaki);
	font-size: 15px;
}

.iecb-mention {
	max-width: 75ch;
	margin: 0 auto;
	padding: 30px var(--iecb-marge) 60px;
	color: var(--iecb-kaki);
	font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   Le bandeau des recueils, et la mise en avant
   -------------------------------------------------------------------------- */

/*
 * L'étagère des recueils.
 *
 * Cinq volumes vus par la tranche, un seul ouvert sur sa couverture. Les deux
 * faces existent toujours dans le document, ancrées au même bord, celui de la
 * charnière : c'est le script qui coupe les événements de pointeur sur celle qui
 * n'est pas tournée vers le lecteur. Sans cela, la face de dos, à plat dans
 * l'espace, capterait le clic destiné à l'autre.
 *
 * Place à 380 px, calculée et non espérée :
 *   marges 2 × 20            =  40
 *   couverture 195 / 1,5     = 130
 *   quatre tranches, au pire =  38 + 24 + 24 + 25 = 111
 *   quatre jointures × 2     =   8
 *   total                    = 289 sur 380, il reste 51.
 */

.iecb-rec {
	/* La hauteur de l'étagère commande tout le reste, ici et dans le script. */
	--iecb-rec-hauteur: 195px;
	--iecb-rec-tranche-min: 24px;
	--iecb-rec-tranche-max: 38px;
	--iecb-rec-jointure: 2px;
	--iecb-rec-sous-rail: 58px;

	/*
	 * Les deux bornes du corps du texte de tranche. Le plein est le corps voulu,
	 * le minimum celui en dessous duquel on ne descend pas, même pour faire
	 * tenir un texte : sous 8,5 px une capitale étroite n'est plus lisible, et
	 * c'est alors le texte qu'il faut raccourcir. L'écran d'édition le dit.
	 */
	--iecb-tranche-corps: 10.5px;
	--iecb-tranche-corps-min: 8.5px;

	max-width: 1180px;
	margin: 0 auto;
	padding: 0 var(--iecb-marge);
}

/* --- Le repli : sans script, une rangée de couvertures -------------------- */

/*
 * L'étagère n'est mise en scène qu'une fois le script en place, qui pose
 * `iecb-rec--anime`. Sans lui, page servie sans JavaScript ou script différé par
 * un cache, les cinq couvertures s'alignent en rangée, chacune avec son bouton,
 * et tout reste cliquable. Le script ajoute la mise en scène, il n'en est pas la
 * condition.
 */
.iecb-rec-etagere {
	display: flex;
	flex-wrap: wrap;
	gap: 22px 14px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.iecb-rec-livre {
	position: relative;
	width: calc(var(--iecb-rec-hauteur) / 1.5);
}

.iecb-rec-boite {
	position: relative;
	display: block;
	width: 100%;
	height: var(--iecb-rec-hauteur);
}

/* Sans script, la tranche n'a rien à dire : c'est la couverture qu'on montre. */
.iecb-rec-tranche {
	display: none;
}

.iecb-rec-couverture {
	position: relative;
	display: flex;
	width: 100%;
	height: 100%;
}

.iecb-rec-fiche {
	position: relative;
	display: block;
	margin-top: 10px;
}

/* --- L'étagère, dès que le script est là ---------------------------------- */

.iecb-rec--anime .iecb-rec-etagere {
	display: block;
	position: relative;
	height: calc(var(--iecb-rec-hauteur) + var(--iecb-rec-sous-rail));
	/* La perspective donne son épaisseur à la rotation. */
	perspective: 1000px;
	perspective-origin: 30% 50%;
}

/* Le rail, exactement celui des rangées : même Argile, même épaisseur. */
.iecb-rec--anime .iecb-rec-etagere::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--iecb-rec-hauteur) + 6px);
	height: 4px;
	border-radius: 2px;
	background: var(--iecb-argile);
	opacity: .5;
}

.iecb-rec--anime .iecb-rec-livre {
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	height: var(--iecb-rec-hauteur);
	transform-origin: 0 50%;
	will-change: transform, width;
}

.iecb-rec--anime .iecb-rec-boite {
	height: 100%;
	transform-style: preserve-3d;
	transform-origin: 0 50%;
}

.iecb-rec--anime .iecb-rec-tranche {
	display: flex;
}

/* Les deux faces sont ancrées au même bord, celui de la charnière. */
.iecb-rec--anime .iecb-rec-face {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	backface-visibility: hidden;
	transform-origin: 0 50%;
}

.iecb-rec--anime .iecb-rec-couverture {
	width: calc(var(--iecb-rec-hauteur) / 1.5);
	transform: rotateY(90deg);
}

.iecb-rec--anime .iecb-rec-fiche {
	position: absolute;
	top: calc(var(--iecb-rec-hauteur) + 20px);
	left: 0;
	width: 100%;
	margin-top: 0;
}

/* --- Les deux faces ------------------------------------------------------- */

.iecb-rec-face {
	overflow: hidden;
	border-radius: 2px;
	text-align: left;
	text-decoration: none;
}

.iecb-rec-face:focus-visible {
	outline: 2px solid var(--iecb-mandarine);
	outline-offset: 4px;
}

/* --- La tranche : un bouton, elle ouvre sans quitter la page -------------- */

/*
 * Le fond est peint en dur, et il l'est en `!important`.
 *
 * Un `<button>` sans cela retombe sur l'apparence que lui donne la feuille du
 * site : un aplat Mandarine avec ses propres marges et sa propre couleur de
 * texte, ce qui rendrait la tranche orange et son titre illisible. La Mandarine
 * ne porte jamais de corps de texte, et une tranche n'est pas un appel à
 * l'action : elle est en Sapin, comme la couverture de repli, Neige dessus,
 * 25,7 pour 1.
 *
 * Correction de la 0.8.0, qui doublait le sélecteur « pour passer devant une
 * règle de thème sans recourir à !important ». C'était faux : la règle du site
 * est elle-même en `!important`, et aucune spécificité ne passe devant. Les
 * tranches sont donc restées Mandarine sur le site. Les cinq propriétés forcées
 * sont maintenant reprises sous la même forme, sur trois classes, ce qui passe
 * aussi devant la remise à zéro de `iecb-bouton-nu`.
 */
.iecb .iecb-rec-face.iecb-rec-tranche {
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 14px 0 !important;
	border: 0 !important;
	border-radius: 2px !important;
	background-color: var(--iecb-sapin) !important;
	color: var(--iecb-neige) !important;
	font-family: var(--iecb-corps);
	font-size: inherit;
	font-weight: inherit;
	line-height: normal;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.iecb .iecb-rec-face.iecb-rec-tranche:hover {
	background-color: var(--iecb-sapin) !important;
	color: var(--iecb-neige) !important;
}

/*
 * La photographie de tranche, quand elle existe. Même logique que la couverture :
 * l'image remplace le typographique, rien d'autre ne change. Format attendu,
 * rappelé dans le back office : 300 × 1800 px, rapport de 1 à 6, recadrage par
 * le centre.
 */
.iecb-rec-tranche-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * Le texte de tranche, et la seule règle qui compte ici : il tient en entier.
 *
 * La 0.13.0 le coupait à l'ellipse, ce qui donnait cinq tranches illisibles et
 * n'apprenait rien au visiteur. Plus d'ellipse : le corps s'ajuste au texte.
 *
 * `--iecb-tranche-unites` est le poids du texte en parts de corps, calculé par
 * `iec_biblio_tranche_unites()` et posé par le gabarit. La place utile est la
 * hauteur de l'étagère moins les deux marges de 14 px de la tranche, moins 3 px
 * qui tiennent le texte à l'écart du filet Anis : d'où les 31 px retirés.
 * 0,58 est l'avance moyenne estimée d'une capitale de la police de titre.
 *
 * Le `font-size` fixe précède le `clamp()` : un navigateur qui ne saurait pas
 * diviser par une variable rejette la seconde déclaration et garde la première,
 * il ne se retrouve jamais sans corps. Et dans tous les cas, le script mesure
 * ensuite le texte rendu et ajuste au pixel, seule façon de connaître les vraies
 * mesures d'une police chargée par un kit distant.
 */
.iecb-rec-tranche-texte {
	/* Convention française : le titre se lit de haut en bas. */
	writing-mode: vertical-rl;
	/*
	 * Toute la ligne pivote, sans exception, et c'est une correction.
	 *
	 * Sans cette déclaration, l'orientation vaut `mixed` : chaque caractère est
	 * alors orienté d'après une propriété Unicode, et tous ne pivotent pas. Les
	 * lettres se couchent, mais l'apostrophe courbe reste debout, perpendiculaire
	 * aux lettres, et occupe la pleine largeur d'un signe : « ÉLEVAGE D' » puis un
	 * trou, puis « ISOPODES ». C'est le titre saisi avec une apostrophe droite que
	 * WordPress transforme en apostrophe courbe, `wptexturize` s'appliquant au
	 * titre : la valeur enregistrée est saine, c'est le rendu vertical qui était
	 * en cause.
	 *
	 * `sideways` couche la ligne entière d'un bloc. Plus aucun caractère n'est
	 * décidé isolément : apostrophes, capitales accentuées et lettres suivent la
	 * même rotation et gardent le même espacement. La propriété préfixée sert les
	 * Safari antérieurs à la version 14.
	 */
	-webkit-text-orientation: sideways;
	text-orientation: sideways;
	font-family: var(--iecb-titre);
	text-transform: uppercase;
	font-size: var(--iecb-tranche-corps);
	font-size: clamp(
		var(--iecb-tranche-corps-min),
		calc((var(--iecb-rec-hauteur) - 31px) / (var(--iecb-tranche-unites, 20) * 0.58)),
		var(--iecb-tranche-corps)
	);
	line-height: 1;
	letter-spacing: .02em;
	white-space: nowrap;
	/*
	 * Le plafond sert à mesurer : c'est lui qui rend le dépassement lisible pour
	 * le script, qui compare la longueur du texte à la place disponible. Ce qui
	 * dépasserait malgré tout est coupé par le `overflow` de `.iecb-rec-face`, et
	 * ce cas ne devrait jamais se produire : l'écran d'édition avertit avant.
	 */
	max-height: 100%;
	color: var(--iecb-neige);
}

/* Le filet de pied, comme la bande de couleur d'un éditeur. */
.iecb-rec-tranche::after {
	content: "";
	position: absolute;
	left: 4px;
	right: 4px;
	bottom: 7px;
	height: 3px;
	border-radius: 2px;
	background: var(--iecb-anis);
	opacity: .75;
}

/* Un liseré clair sur l'arête : c'est ce qui fait lire un volume. */
.iecb-rec-tranche::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 2px;
	background: rgba(247, 249, 247, .22);
}

/* --- La couverture : une image, sans cible -------------------------------- */

/*
 * Depuis la 0.11.0, la couverture n'est plus un lien. Aucun curseur de main,
 * aucune cible : c'est le bouton « Voir la fiche », dessous, qui y mène.
 */
.iecb-rec-couverture {
	flex-direction: column;
	justify-content: space-between;
	padding: 14px 12px;
	cursor: default;
	pointer-events: none;
	user-select: none;
	background: var(--iecb-fond, var(--iecb-kaki));
	color: var(--iecb-encre, var(--iecb-neige));
}

.iecb-rec-couv-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.iecb-rec-couv-collection {
	font-size: 8.5px;
	line-height: 1.3;
	letter-spacing: .04em;
	opacity: .85;
}

.iecb-rec-couv-titre {
	display: block;
	font-family: var(--iecb-titre);
	text-transform: uppercase;
	font-size: 15px;
	line-height: 1.06;
}

.iecb-rec-couv-auteur {
	font-size: 10px;
	opacity: .85;
}

.iecb-rec-couv-filet {
	display: block;
	height: 3px;
	margin: 8px 0;
	border-radius: 2px;
	background: var(--iecb-anis);
	opacity: .75;
}

/* --- Le bouton unique sous la couverture : « Voir la fiche » -------------- */

/*
 * Un liseré Argile et du Sapin sur Neige. Seule entrée de l'étagère vers la
 * fiche, dans un nouvel onglet. Sa hauteur atteint trente-huit pixels, ce qui
 * reste une cible tenable au doigt.
 */
.iecb-rec-fiche {
	padding: 9px 8px;
	border: 1px solid var(--iecb-argile);
	border-radius: 999px;
	background: var(--iecb-neige);
	color: var(--iecb-sapin);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
	transition: border-color .15s var(--iecb-ressort), background-color .15s var(--iecb-ressort), transform .15s var(--iecb-ressort);
}

.iecb-rec-fiche::after {
	content: "\2197";
	float: right;
	margin-left: 6px;
	font-weight: 300;
}

.iecb-rec-fiche.iecb-presse {
	transform: scale(.97);
	transition-duration: .08s;
}

/*
 * Seuls les volumes rangés cachent leur bouton, et seulement une fois l'étagère
 * en place.
 *
 * Défaut corrigé : sa transparence valait zéro dans la feuille et c'est le
 * script qui la remontait à l'ouverture. Toute page où le script ne s'exécute
 * pas, est différé, combiné ou mis en cache par un outil d'optimisation ne
 * montrait jamais le bouton. C'est maintenant la feuille qui le montre, à partir
 * de l'attribut posé dans le balisage, et le script ne fait plus que l'animer.
 */
.iecb-rec--anime .iecb-rec-livre[data-ouvert="false"] .iecb-rec-fiche {
	opacity: 0;
}

/*
 * Au repos, le bouton reste sobre pour ne pas distraire de l'étagère. Au survol,
 * le contour et la flèche passent en Mandarine, la couleur de l'action : on voit
 * qu'il emmène ailleurs. Au doigt, sans survol, c'est l'enfoncement qui le montre.
 *
 * Le fond reste Neige et le libellé Sapin : en 12 à 13 px, aucun texte ne se lit
 * sur Mandarine (3,2 pour 1 en Neige, 3,6 en Sapin). Le contour et la flèche ne
 * sont pas du texte, 3 pour 1 leur suffit.
 */
.iecb-rec-fiche:hover,
.iecb-rec-fiche.iecb-presse {
	border-color: var(--iecb-mandarine);
	background: var(--iecb-neige);
	color: var(--iecb-sapin);
}

.iecb-rec-fiche:hover::after,
.iecb-rec-fiche.iecb-presse::after {
	color: var(--iecb-mandarine);
	font-weight: 700;
}

.iecb-rec-fiche:focus-visible {
	outline: 2px solid var(--iecb-mandarine);
	outline-offset: 3px;
}

.iecb-rec-aide {
	max-width: 58ch;
	margin: 8px 0 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--iecb-kaki);
}

/*
 * Sous filtre, la page passe en consultation de résultats : l'étagère se retire,
 * comme le faisait le bandeau précédent. Ce sont mes livres, pas un résultat de
 * recherche, et les laisser afficherait cinq titres qui ne répondent pas au
 * filtre en cours.
 */
.iecb-archive[data-filtre="1"] .iecb-bande--recueils {
	display: none;
}

.iecb-avant {
	max-width: 1180px;
	margin: 24px auto 0;
	border-radius: 3px;
	overflow: hidden;
	background: var(--iecb-neige);
}

/*
 * La couverture entière : l'image garde ses proportions, dans une hauteur bornée,
 * posée sur un fond Crème qui fait cadre. Aucune proportion n'est imposée, parce
 * que les couvertures n'en ont pas toutes une commune.
 */
.iecb-avant-couverture {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 22px 20px;
	background: var(--iecb-creme);
}

.iecb-avant-couv-image {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 300px;
	border-radius: 2px;
	box-shadow: 0 18px 30px -20px rgba(52, 56, 43, .65);
}

.iecb-avant-couv-typo {
	display: block;
	width: 170px;
}

.iecb-avant-texte {
	padding: 20px 20px 22px;
}

.iecb-avant-surtitre {
	color: var(--iecb-kaki);
	font-size: 12px;
	font-weight: 700;
}

.iecb-avant-titre {
	margin: 6px 0 0;
	font-size: clamp(22px, 6vw, 32px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--iecb-sapin);
}

.iecb-avant-auteur {
	margin: 4px 0 0;
	color: var(--iecb-kaki);
	font-size: 14.5px;
}

.iecb-avant-avis {
	max-width: 56ch;
	margin: 12px 0 0;
	color: var(--iecb-sapin);
	font-size: 15px;
}

.iecb-avant-note {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 14px 0 0;
	color: var(--iecb-kaki);
	font-size: 13px;
}

/*
 * Étoiles : Kaki plein, Argile éteint. Anis serait illisible sur fond clair.
 *
 * Chaque étoile est une étoile Argile recouverte d'une étoile Kaki découpée à
 * `--iecb-remplissage`. Le découpage se fait par étoile, jamais sur la rangée :
 * c'est ce qui garde une fraction exacte quel que soit l'espacement.
 */
.iecb-etoiles {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	white-space: nowrap;
}

.iecb-etoiles-rangee {
	display: inline-flex;
	gap: 1px;
}

.iecb-etoile {
	position: relative;
	display: inline-block;
	line-height: 1;
	color: var(--iecb-argile);
}

.iecb-etoile::before,
.iecb-etoile::after {
	content: "\2605";
}

.iecb-etoile::after {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--iecb-remplissage, 0%);
	overflow: hidden;
	color: var(--iecb-kaki);
}

.iecb-etoiles-chiffre {
	font-weight: 700;
	color: var(--iecb-sapin);
}

.iecb-non-lu {
	color: var(--iecb-kaki);
	font-size: 11.5px;
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

/*
 * Citrus Gothic 20 px : Neige sur Mandarine ne donne que 3,2 pour 1, conforme
 * uniquement en grand texte. Et la charte interdit Open Sans en capitales.
 */
.iecb-bouton {
	display: inline-block;
	padding: 13px 18px;
	border-radius: 2px;
	background: var(--iecb-mandarine);
	color: var(--iecb-neige);
	font-family: var(--iecb-titre);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.15;
	text-transform: uppercase;
	text-align: left;
	text-decoration: none;
	transition: filter .15s var(--iecb-ressort), transform .15s var(--iecb-ressort);
}

.iecb-bouton:hover {
	filter: brightness(1.08);
	color: var(--iecb-neige);
}

.iecb-bouton.iecb-presse {
	transform: scale(.985);
	transition-duration: .08s;
}

.iecb-bouton--maison {
	background: var(--iecb-anis);
	color: var(--iecb-sapin);
}

.iecb-bouton--maison:hover {
	color: var(--iecb-sapin);
}

.iecb-bouton--sobre {
	background: var(--iecb-sapin);
	color: var(--iecb-neige);
}

/* --------------------------------------------------------------------------
   Encarts auteur : une seule forme, la carte verticale
   -------------------------------------------------------------------------- */

.iecb-auteurs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 18px 16px;
	max-width: 1180px;
	margin: 16px auto 0;
	padding: 0 var(--iecb-marge);
	list-style: none;
}

.iecb-auteurs--une {
	grid-template-columns: minmax(0, 210px);
	padding: 0;
}

.iecb-auteur-lien {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   La fiche auteur
   --------------------------------------------------------------------------
   Elle n'ouvre pas sur une bande photographique : un portrait recadré en bandeau
   ne montre plus le visage. Le portrait est rond, il tient dans la colonne, et la
   plaque se pose à côté de lui plutôt que par-dessus.
   -------------------------------------------------------------------------- */

.iecb-entete--auteur {
	background: var(--iecb-creme);
	padding: 30px 0 26px;
}

.iecb-auteur-tete {
	display: grid;
	gap: 18px;
	align-items: start;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 var(--iecb-marge);
}

@media (min-width: 700px) {
	.iecb-auteur-tete {
		grid-template-columns: 168px 1fr;
		gap: 26px;
	}
}

.iecb-auteur-grand {
	position: relative;
	width: 132px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--iecb-fond, var(--iecb-kaki));
	color: var(--iecb-encre, var(--iecb-neige));
}

@media (min-width: 700px) {
	.iecb-auteur-grand {
		width: 168px;
	}
}

.iecb-auteur-grand img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Repli typographique, exactement celui de l'encart auteur. */
.iecb-auteur-grand-initiales {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-family: var(--iecb-titre);
	font-size: 46px;
	line-height: 1;
	letter-spacing: .02em;
}

/* La plaque ne chevauche rien ici : il n'y a pas de bande à chevaucher. */
/*
 * Deux classes : la règle `.iecb-plaque` des grands écrans, plus bas dans la
 * feuille, remettait sinon la marge négative et le centrage des autres plaques.
 * Le titre remontait sous l'en-tête et un grand vide s'ouvrait après le portrait.
 */
.iecb-plaque.iecb-plaque--auteur {
	max-width: none;
	margin: 0;
	padding: 0;
	background: transparent;
}

.iecb-plaque--auteur .iecb-titre {
	font-size: clamp(30px, 8vw, 58px);
}

.iecb-archive--auteur .iecb-fil {
	margin: 0 0 8px;
	color: var(--iecb-kaki);
	font-size: 12.5px;
}

/*
 * Un encart rond, de la même famille que le portrait de la fiche auteur.
 *
 * Défaut corrigé : le portrait est un `<span>`, donc un élément en ligne, et
 * `aspect-ratio` ne s'applique pas à un élément en ligne. Le cadre avait une
 * hauteur nulle, et l'image posée en absolu dedans ne se voyait pas : ni dans
 * « Ceux qui écrivent », ni dans « Son auteur ». Il est maintenant en bloc.
 */
.iecb-auteur-portrait {
	position: relative;
	display: block;
	width: 100%;
	max-width: 120px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--iecb-fond, var(--iecb-creme));
	color: var(--iecb-encre, var(--iecb-kaki));
}

.iecb-auteur-portrait img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Repli typographique : les initiales, comme pour une couverture sans image. */
.iecb-auteur-initiales {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-family: var(--iecb-titre);
	font-size: 26px;
	line-height: 1;
}

.iecb-auteur-texte {
	padding-top: 9px;
}

.iecb-auteur-nom {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--iecb-sapin);
}

.iecb-auteur-role {
	display: block;
	margin-top: 3px;
	color: var(--iecb-kaki);
	font-size: 13px;
	line-height: 1.5;
}

.iecb-auteur-credit {
	display: block;
	margin-top: 6px;
	color: var(--iecb-kaki);
	font-size: 11.5px;
	line-height: 1.45;
}

/* --------------------------------------------------------------------------
   La fiche
   -------------------------------------------------------------------------- */

/* La remontée vient de --iecb-chevauchement, posée sur .iecb-fiche. */

.iecb-fiche-couverture {
	width: 148px;
	margin-bottom: 16px;
}

.iecb-fiche-couverture .iecb-couverture {
	box-shadow: 0 20px 34px -22px rgba(52, 56, 43, .6);
}

.iecb-fiche-titre {
	font-size: clamp(28px, 8vw, 46px);
	line-height: .96;
	letter-spacing: -.01em;
}

.iecb-fiche-auteur {
	margin: 8px 0 0;
	font-size: 16.5px;
	font-weight: 700;
	color: var(--iecb-kaki);
}

/*
 * Le nom mène à la fiche auteur quand un terme est posé. Un filet Argile suffit
 * à le dire : c'est le traitement du reste des liens de texte du plugin, et il
 * n'y a aucune raison d'en faire un appel à l'action.
 */
.iecb-fiche-auteur a {
	color: var(--iecb-sapin);
	text-decoration: none;
	border-bottom: 1px solid var(--iecb-argile);
}

.iecb-fiche-auteur a:hover {
	border-bottom-color: var(--iecb-sapin);
}

.iecb-fiche-meta {
	margin: 10px 0 0;
	color: var(--iecb-kaki);
	font-size: 13px;
}

.iecb-puces {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.iecb-puce {
	display: inline-block;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--iecb-creme);
	color: var(--iecb-kaki);
	font-size: 12px;
	text-decoration: none;
}

.iecb-puce:hover {
	background: var(--iecb-sapin);
	color: var(--iecb-neige);
}

/*
 * Le bloc d'achat est dans la plaque, au-dessus de la ligne de flottaison. Le
 * flanc arrive en bas de page sur un petit écran, et le revenu d'affiliation est
 * l'objectif premier de la bibliothèque.
 */
.iecb-achat {
	margin-top: 18px;
	padding: 16px 18px;
	border-radius: 3px;
	background: var(--iecb-creme);
}

.iecb-prix {
	margin: 0;
	font-family: var(--iecb-titre);
	font-size: 22px;
	line-height: 1.1;
	color: var(--iecb-sapin);
}

.iecb-achat .iecb-bouton {
	display: block;
	margin-top: 10px;
}

/*
 * La divulgation est en Kaki sur Crème, 5,7 pour 1. C'est une mention légale,
 * elle doit se lire, pas se deviner.
 */
.iecb-divulgation {
	max-width: 46ch;
	margin: 10px 0 0;
	color: var(--iecb-kaki);
	font-size: 12.5px;
	line-height: 1.55;
}

.iecb-fiche-corps {
	max-width: 1180px;
	margin: 0 auto;
	padding: 26px var(--iecb-marge) 0;
}

/* Le flanc : les faits, dans la même matière Crème que les bandes de l'archive. */
.iecb-flanc {
	margin-bottom: 24px;
	padding: 18px;
	border-radius: 3px;
	background: var(--iecb-creme);
}

.iecb-flanc-ligne + .iecb-flanc-ligne {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(160, 160, 147, .5);
}

.iecb-flanc-cle {
	display: block;
	color: var(--iecb-kaki);
	font-size: 11.5px;
}

.iecb-flanc-valeur {
	display: block;
	margin-top: 2px;
	color: var(--iecb-sapin);
	font-size: 14.5px;
	font-weight: 700;
}

/* Bandes entre les sections, filets à l'intérieur d'une section. */
.iecb-bloc + .iecb-bloc {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--iecb-argile);
}

.iecb-bloc-titre {
	margin: 0 0 12px;
	font-size: 20px;
	line-height: 1.15;
}

.iecb-avis {
	max-width: 68ch;
	font-size: 16.5px;
	line-height: 1.72;
	color: var(--iecb-sapin);
}

.iecb-avis p {
	margin: 0 0 14px;
}

.iecb-avis p:last-child {
	margin-bottom: 0;
}

.iecb-avis a {
	color: var(--iecb-mandarine);
}

.iecb-avis em {
	font-style: italic;
}

.iecb-jauges {
	display: grid;
	gap: 11px;
	max-width: 520px;
}

.iecb-jauge {
	display: grid;
	grid-template-columns: 118px 1fr 34px;
	gap: 10px;
	align-items: center;
	font-size: 12.5px;
	color: var(--iecb-kaki);
}

.iecb-jauge-barre {
	height: 7px;
	border-radius: 999px;
	background: var(--iecb-creme);
	overflow: hidden;
}

.iecb-jauge-barre > span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--iecb-kaki);
}

.iecb-note-globale {
	margin: 16px 0 0;
	color: var(--iecb-kaki);
	font-size: 13px;
}

.iecb-note-globale .iecb-note-libelle {
	margin-right: 8px;
	font-weight: 700;
	color: var(--iecb-sapin);
}

/* À la fiche, la note se lit en grand : c'est la synthèse des quatre jauges. */
.iecb-note-globale .iecb-etoiles {
	font-size: 20px;
	vertical-align: -2px;
}

.iecb-note-globale .iecb-etoiles-chiffre {
	font-size: 17px;
}

.iecb-note-precision {
	display: block;
	max-width: 52ch;
	margin-top: 4px;
}

.iecb-pourqui,
.iecb-sans-avis {
	max-width: 68ch;
	padding: 16px 18px;
	border-radius: 3px;
	background: var(--iecb-creme);
	color: var(--iecb-kaki);
	font-size: 15px;
}

.iecb-pourqui {
	margin: 0;
}

.iecb-sans-avis p {
	margin: 0;
}

.iecb-sans-avis .iecb-bloc-titre {
	margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   Le lien vers l'article du site
   --------------------------------------------------------------------------
   Un lien de texte, pas un appel à l'action : la Mandarine est réservée à
   l'achat, et deux boutons orange sur une même fiche se disputeraient le clic.
   Un filet Argile qui s'assombrit au survol, le traitement des autres liens de
   texte du plugin. La cible fait 44 px de haut au doigt, marges comprises.
   -------------------------------------------------------------------------- */

.iecb-article-chapo {
	max-width: 68ch;
	margin: 0 0 8px;
	color: var(--iecb-kaki);
	font-size: 14px;
	line-height: 1.6;
}

.iecb-article-lien {
	display: inline-block;
	max-width: 68ch;
	padding: 3px 0 7px;
	border-bottom: 1px solid var(--iecb-argile);
	color: var(--iecb-sapin);
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.45;
	text-align: left;
	text-decoration: none;
	transition: border-color .15s var(--iecb-ressort), color .15s var(--iecb-ressort);
}

.iecb-article-lien:hover,
.iecb-article-lien.iecb-presse {
	border-bottom-color: var(--iecb-sapin);
	color: var(--iecb-sapin);
}

.iecb-article-lien:focus-visible {
	outline: 2px solid var(--iecb-mandarine);
	outline-offset: 3px;
}

/*
 * La flèche est en Mandarine : c'est un appel à l'action, décision d'Aubin du
 * 18 septembre 2026. Elle seule prend la couleur, jamais le libellé : la
 * Mandarine ne porte pas de corps de texte, et 3 pour 1 suffit à une flèche.
 */
.iecb-article-lien::after {
	content: "\2197";
	margin-left: 7px;
	color: var(--iecb-mandarine);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   L'encart de livres posé dans un article, par le shortcode
   -------------------------------------------------------------------------- */

.iecb.iecb-encart {
	margin: 28px 0;
	padding: 18px 18px 16px;
	border-radius: 2px;
	background: var(--iecb-creme);
	color: var(--iecb-kaki);
}

.iecb-encart-titre {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--iecb-sapin);
}

.iecb-encart-liste {
	display: grid;
	gap: 13px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.iecb-encart-lien {
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr);
	gap: 13px;
	align-items: start;
	color: inherit;
	text-decoration: none;
}

.iecb-encart-vignette .iecb-couverture {
	padding: 7px 6px;
}

.iecb-encart-vignette .iecb-couverture-titre {
	font-size: 9px;
	line-height: 1.06;
}

.iecb-encart-vignette .iecb-couverture-auteur,
.iecb-encart-vignette .iecb-note {
	display: none;
}

.iecb-encart-vignette .iecb-fanion {
	right: 6px;
	width: 12px;
	height: 18px;
}

.iecb-encart-livre {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--iecb-sapin);
}

.iecb-encart-auteur {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	color: var(--iecb-kaki);
}

.iecb-encart-note {
	display: block;
	margin-top: 4px;
	font-size: 12px;
}

.iecb-encart-lien:hover .iecb-encart-livre,
.iecb-encart-lien:focus-visible .iecb-encart-livre {
	text-decoration: underline;
}

.iecb-encart-lien:hover .iecb-couverture,
.iecb-encart-lien:focus-visible .iecb-couverture {
	transform: translateY(-4px);
}

/* --------------------------------------------------------------------------
   Repli de diagnostic, visible seulement par qui peut éditer
   -------------------------------------------------------------------------- */

.iecb-diagnostic {
	display: block;
	max-width: 1180px;
	margin: 16px auto 0;
	padding: 18px 18px 16px;
	border-radius: 3px;
	background: var(--iecb-creme);
	color: var(--iecb-kaki);
	font-size: 14px;
}

.iecb-diagnostic p {
	max-width: 72ch;
	margin: 0 0 10px;
	line-height: 1.6;
}

.iecb-diagnostic-titre {
	display: flex;
	align-items: baseline;
	gap: 9px;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--iecb-sapin);
}

.iecb-diagnostic-marque {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--iecb-mandarine);
}

.iecb-diagnostic code {
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: 13px;
}

.iecb-diagnostic-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-top: 14px;
}

.iecb-diagnostic-actions a {
	color: var(--iecb-sapin);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid var(--iecb-argile);
}

.iecb-diagnostic-note {
	margin-bottom: 0;
	font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   Le passage de la grille à la fiche
   -------------------------------------------------------------------------- */

@view-transition {
	navigation: auto;
}

.iecb-fiche-couverture .iecb-couverture {
	view-transition-name: iecb-livre;
}

@supports not (view-transition-name: none) {
	.iecb-fiche-couverture .iecb-couverture {
		animation: iecb-sortie .45s var(--iecb-elan) both;
	}
}

@keyframes iecb-sortie {
	from {
		transform: translateY(30px) scale(.9) rotate(-2deg);
		opacity: 0;
	}

	to {
		transform: none;
		opacity: 1;
	}
}

/* --------------------------------------------------------------------------
   Grands écrans
   -------------------------------------------------------------------------- */

@media (min-width: 620px) {
	.iecb-filtres-sep {
		display: block;
	}

	.iecb-livre {
		width: 152px;
	}

	.iecb-archive[data-filtre="1"] .iecb-piste {
		grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
		gap: 32px 22px;
	}
}

/*
 * L'étagère a son propre seuil, et il n'a pas de raison de suivre celui des
 * rangées : il ne dépend pas de la largeur du texte mais de la place qu'il faut
 * pour quatre tranches et une couverture sans écrasement.
 */
@media (min-width: 700px) {
	.iecb-rec {
		--iecb-rec-hauteur: 300px;
		--iecb-rec-tranche-min: 34px;
		--iecb-rec-tranche-max: 56px;
		--iecb-rec-jointure: 3px;
		--iecb-rec-sous-rail: 66px;

		/*
		 * Une étagère de 300 px de haut porte plus de texte : les bornes montent,
		 * la formule ne change pas. Rien ne redéclare `font-size` sur le texte de
		 * tranche ici, sans quoi le calcul de la règle de base serait écrasé.
		 */
		--iecb-tranche-corps: 14px;
		--iecb-tranche-corps-min: 11px;
	}

	.iecb-rec-couv-titre {
		font-size: 24px;
	}

	.iecb-rec-couv-collection {
		font-size: 11px;
	}

	.iecb-rec-couv-auteur {
		font-size: 13px;
	}

	.iecb-rec-fiche {
		font-size: 13px;
		padding: 10px 12px;
	}
}

@media (min-width: 700px) {
	.iecb {
		--iecb-marge: 28px;
	}

	.iecb-photo {
		aspect-ratio: 21 / 9;
	}

	.iecb {
		--iecb-chevauchement: 80px;
	}

	.iecb-fiche {
		--iecb-chevauchement: 90px;
	}

	.iecb-plaque {
		max-width: 1180px;
		margin: calc(-1 * var(--iecb-chevauchement)) auto 0;
		padding: 30px 32px 32px;
	}

	.iecb-plaque--etroite {
		max-width: 660px;
		margin-left: max(var(--iecb-marge), calc(50vw - 590px));
		margin-right: auto;
	}

	.iecb-plaque--fiche {
		display: grid;
		grid-template-columns: 200px minmax(0, 1fr);
		gap: 32px;
		align-items: start;
	}

	.iecb-fiche-couverture {
		width: 200px;
		margin-bottom: 0;
	}

	.iecb-avant {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	}

	.iecb-avant-couverture {
		height: 100%;
		padding: 32px;
	}

	.iecb-avant-couv-image {
		max-height: 420px;
	}

	.iecb-avant-couv-typo {
		width: 220px;
	}

	.iecb-avant-texte {
		align-self: center;
		padding: 30px 32px;
	}

	.iecb-fiche-corps {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 280px;
		gap: 40px;
		align-items: start;
	}

	.iecb-flanc {
		position: sticky;
		top: 24px;
		order: 2;
		margin-bottom: 0;
	}

	.iecb-fiche-texte {
		order: 1;
	}

	.iecb-jauge {
		grid-template-columns: 150px 1fr 34px;
		font-size: 13.5px;
	}

	.iecb-auteurs {
		grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	}
}

/* --------------------------------------------------------------------------
   Mouvement réduit : un fondu court, pas la suppression du retour visuel
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.iecb *,
	.iecb *::before,
	.iecb *::after {
		animation-duration: .12s !important;
		animation-iteration-count: 1 !important;
		transition-duration: .12s !important;
	}

	.iecb-livre:hover .iecb-couverture,
	.iecb-livre:focus-visible .iecb-couverture,
	.iecb-encart-lien:hover .iecb-couverture,
	.iecb-livre.iecb-presse .iecb-couverture,
	.iecb-pilule.iecb-presse,
	.iecb-bouton.iecb-presse {
		transform: none;
	}

	/* Le retour visuel reste, il change seulement de nature. */
	.iecb-livre:hover .iecb-couverture,
	.iecb-livre:focus-visible .iecb-couverture,
	.iecb-encart-lien:hover .iecb-couverture {
		filter: brightness(1.07);
	}

	/* L'étagère ne perd pas son retour visuel, elle perd sa durée. */
	.iecb-rec-livre {
		will-change: auto;
	}

	.iecb-rec-fiche {
		transition-duration: .12s;
	}

	.iecb-livre.iecb-presse .iecb-couverture,
	.iecb-bouton.iecb-presse {
		filter: brightness(.94);
	}

	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation-duration: .12s !important;
	}
}

/* ==========================================================================
   L'ajout au panier, sur la fiche d'un livre de la boutique
   ========================================================================== */

/*
 * Le bouton est un vrai `<button>`, il porte donc `iecb-bouton-nu` et repeint ses
 * cinq propriétés défendues avec trois classes et `!important`, comme la tranche.
 * Mandarine : c'est l'appel à l'action d'achat, le seul usage permis. Neige sur
 * Mandarine ne passe qu'en grand texte, d'où Citrus Gothic 20 px.
 */
.iecb .iecb-achat .iecb-bouton--panier {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 50px;
	margin-top: 10px;
	padding: 13px 18px !important;
	border: 0 !important;
	border-radius: 2px !important;
	background-color: var(--iecb-mandarine) !important;
	color: var(--iecb-neige) !important;
	font-family: var(--iecb-titre);
	font-size: 20px;
	line-height: 1.15;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .25s var(--iecb-ressort), transform .15s var(--iecb-ressort), filter .15s var(--iecb-ressort);
}

.iecb .iecb-achat .iecb-bouton--panier:hover {
	filter: brightness(1.08);
}

/* Retour dès l'enfoncement. */
.iecb .iecb-achat .iecb-bouton--panier.iecb-presse {
	transform: scale(.985);
	transition-duration: .08s;
}

/*
 * Pendant l'envoi, le bouton reste à sa place et à sa taille : rien ne saute. Il
 * ne se désactive pas au sens HTML, pour garder le focus clavier, mais un second
 * clic n'envoie rien.
 */
.iecb .iecb-achat[data-etat="envoi"] .iecb-bouton--panier {
	cursor: progress;
}

.iecb-panier-attente {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(247, 249, 247, .45);
	border-top-color: var(--iecb-neige);
	border-radius: 50%;
	animation: iecb-tourne .8s linear infinite;
}

.iecb-achat[data-etat="envoi"] .iecb-panier-attente {
	display: inline-block;
}

@keyframes iecb-tourne {
	to {
		transform: rotate(360deg);
	}
}

/*
 * Confirmé : le bouton quitte la Mandarine le temps de le dire. Ce n'est plus un
 * appel à l'action, c'est un accusé de réception, et il est en Sapin.
 */
.iecb .iecb-achat[data-confirme="1"] .iecb-bouton--panier {
	background-color: var(--iecb-sapin) !important;
	filter: none;
}

/* Rupture découverte au moment de l'ajout, ou produit retiré entre-temps : plus de bouton. */
.iecb-achat[data-etat="rupture"] .iecb-bouton--panier,
.iecb-achat[data-etat="indisponible"] .iecb-bouton--panier {
	display: none !important;
}

/*
 * Le retour sous le bouton se déplie par sa hauteur : grille de 0fr à 1fr. Une
 * transition CSS repart de la valeur affichée quand on l'interrompt, ce qui est
 * exactement le comportement voulu, sans une ligne de script.
 */
.iecb-panier-retour {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .32s var(--iecb-ressort);
}

.iecb-panier-retour[data-ouvert="1"] {
	grid-template-rows: 1fr;
}

.iecb-panier-retour > div {
	min-height: 0;
	overflow: hidden;
}

.iecb-panier-message {
	margin: 12px 0 0;
	color: var(--iecb-sapin);
	font-size: 14px;
	line-height: 1.55;
}

.iecb-panier-message strong {
	font-weight: 700;
}

.iecb-panier-coche {
	display: inline-block;
	margin-right: 6px;
	font-weight: 700;
	color: var(--iecb-kaki);
}

.iecb-panier-lien {
	display: inline-block;
	margin-top: 2px;
	color: var(--iecb-sapin);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid var(--iecb-sapin);
}

.iecb-panier-lien:hover {
	border-bottom-width: 2px;
}

/* Les états rendus par le serveur : rupture, et pas en vente. */
.iecb-panier-statut {
	margin: 10px 0 0;
	color: var(--iecb-sapin);
	font-size: 15px;
	line-height: 1.5;
}

.iecb-panier-statut strong {
	font-weight: 700;
}

.iecb-lien-boutique {
	display: inline-block;
	margin-top: 10px;
	padding: 9px 14px;
	border: 1px solid var(--iecb-sapin);
	border-radius: 999px;
	color: var(--iecb-sapin);
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
}

.iecb-lien-boutique:hover {
	background: var(--iecb-neige);
}

/* Visible des seuls utilisateurs qui peuvent éditer, jamais d'un visiteur. */
.iecb-diagnostic-panier,
.iecb-panier-diagnostic {
	margin: 12px 0 0;
	padding: 10px 12px;
	border-left: 3px solid var(--iecb-sapin);
	background: var(--iecb-neige);
	color: var(--iecb-sapin);
	font-size: 13px;
	line-height: 1.55;
}

/*
 * Le même encart, mais écrit par le script à la suite du message d'échec : il
 * lui faut son propre passage à la ligne, le message étant un paragraphe.
 */
.iecb-panier-diagnostic {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.iecb-panier-retour {
		grid-template-rows: 1fr;
		opacity: 0;
		transition: opacity .12s linear;
	}

	.iecb-panier-retour[data-ouvert="1"] {
		opacity: 1;
	}

	.iecb-panier-retour:not([data-ouvert="1"]) > div {
		height: 0;
	}

	.iecb-panier-attente {
		animation-duration: 2.4s;
	}

	.iecb .iecb-achat .iecb-bouton--panier.iecb-presse,
	.iecb-rec-fiche.iecb-presse {
		transform: none;
		filter: brightness(.94);
	}
}

/* ==========================================================================
   Vignette : la pastille de note ne recouvre plus la ligne d'auteur
   ========================================================================== */

/*
 * La pastille est posée en pied de couverture. Sur une couverture typographique,
 * la ligne d'auteur y était aussi, et passait dessous. Elle remonte d'autant.
 */
.iecb-couverture--pastille .iecb-couverture-auteur {
	margin-bottom: 26px;
}

.iecb-encart-vignette .iecb-couverture--pastille .iecb-couverture-auteur {
	margin-bottom: 0;
}
/* ==========================================================================
   1. La galerie « À l'intérieur »
   ========================================================================== */

/*
 * Une rangée, pas une grille : deux ou trois pages de livre n'ont pas le même
 * format, et une rangée à hauteur fixe les garde entières, sans recadrage. Au
 * doigt, elle défile avec le défilement du système.
 */
.iecb-galerie-liste {
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 2px 2px 8px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	list-style: none;
}

.iecb-galerie-liste::-webkit-scrollbar {
	display: none;
}

/* La légende prend la largeur de l'image, jamais plus. */
.iecb-galerie-item {
	display: inline-grid;
	flex: 0 0 auto;
	margin: 0;
	scroll-snap-align: start;
}

.iecb-galerie-vignette {
	display: block;
	height: 190px;
	border-radius: 3px;
	overflow: hidden;
	background: var(--iecb-creme);
	cursor: zoom-in;
	transition: transform .18s var(--iecb-ressort), box-shadow .18s var(--iecb-ressort);
}

.iecb-galerie-vignette img {
	display: block;
	width: auto;
	height: 100%;
	max-width: none;
}

.iecb-galerie-vignette:hover {
	box-shadow: 0 12px 22px -16px rgba(52, 56, 43, .7);
}

/* Retour dès l'enfoncement. */
.iecb-galerie-vignette.iecb-presse {
	transform: scale(.97);
	transition-duration: .08s;
}

.iecb-galerie-vignette:focus-visible {
	outline: 2px solid var(--iecb-mandarine);
	outline-offset: 3px;
}

/* Pendant que l'image est agrandie, sa vignette est « sortie » de la rangée. */
.iecb-galerie-vignette[data-sortie="1"] img {
	visibility: hidden;
}

.iecb-galerie-legende {
	width: 0;
	min-width: 100%;
	margin-top: 6px;
	color: var(--iecb-kaki);
	font-size: 11.5px;
	line-height: 1.45;
}

@media (min-width: 700px) {
	.iecb-galerie-vignette {
		height: 240px;
	}
}

/* ==========================================================================
   1 bis. La visionneuse
   ========================================================================== */

/*
 * Un `<dialog>` modal : le focus y est tenu, Échap le ferme, le reste de la page
 * est inerte pour le clavier et le lecteur d'écran, sans une ligne de script pour
 * l'obtenir. Il occupe tout l'écran ; son fond est une couche à part, dont le
 * script règle l'opacité au rythme du geste.
 */
.iecb-visionneuse {
	/*
	 * Tendu par ses quatre bords plutôt que dimensionné en unités d'écran : sur
	 * mobile, 100vh déborde sous la barre du navigateur, et 100dvh n'est pas
	 * toujours recalculé à temps. Les quatre bords, eux, suivent la vraie fenêtre.
	 */
	position: fixed;
	inset: 0;
	width: auto;
	max-width: none;
	height: auto;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--iecb-neige);
	overflow: hidden;
}

.iecb-visionneuse::backdrop {
	background: transparent;
}

.iecb-visionneuse[open] {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
}

.iecb-visionneuse-fond {
	position: absolute;
	inset: 0;
	background: var(--iecb-sapin);
	opacity: 0;
}

.iecb-visionneuse-barre,
.iecb-visionneuse-pied {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	opacity: 0;
}

.iecb-visionneuse-barre {
	justify-content: space-between;
}

.iecb-visionneuse-compteur {
	margin: 0;
	color: var(--iecb-creme);
	font-size: 13px;
}

.iecb-visionneuse-scene {
	position: relative;
	z-index: 1;
	touch-action: pinch-zoom;
	cursor: zoom-out;
}

.iecb-visionneuse-image {
	position: absolute;
	top: 0;
	left: 0;
	max-width: none;
	border-radius: 2px;
	transform-origin: 0 0;
	will-change: transform;
	cursor: grab;
	user-select: none;
	-webkit-user-drag: none;
}

.iecb-visionneuse-legende {
	flex: 1;
	min-width: 0;
	margin: 0;
	color: var(--iecb-neige);
	font-size: 13.5px;
	line-height: 1.5;
}

.iecb-visionneuse-legende span {
	display: block;
	color: var(--iecb-creme);
	font-size: 12px;
}

/*
 * Les boutons repeignent les cinq propriétés que la feuille du site force sur
 * tout `<button>`, avec trois classes et `!important`, comme la tranche.
 */
.iecb .iecb-visionneuse .iecb-visionneuse-bouton {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0 !important;
	border: 1px solid rgba(247, 249, 247, .45) !important;
	border-radius: 50% !important;
	background-color: transparent !important;
	color: var(--iecb-neige) !important;
	font-size: 20px;
	line-height: 1;
	transition: border-color .15s var(--iecb-ressort), transform .15s var(--iecb-ressort);
}

.iecb .iecb-visionneuse .iecb-visionneuse-bouton:hover {
	border-color: var(--iecb-neige) !important;
}

.iecb .iecb-visionneuse .iecb-visionneuse-bouton.iecb-presse {
	transform: scale(.92);
	transition-duration: .08s;
}

.iecb .iecb-visionneuse .iecb-visionneuse-bouton[disabled] {
	opacity: .35;
	cursor: default;
}

.iecb-visionneuse :focus-visible {
	outline: 2px solid var(--iecb-anis);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.iecb-visionneuse-fond,
	.iecb-visionneuse-barre,
	.iecb-visionneuse-pied,
	.iecb-visionneuse-image {
		transition: opacity .12s linear;
	}
}

/* ==========================================================================
   2. L'avis des lecteurs, sur un Recueil
   ========================================================================== */

/*
 * La distinction se voit avant de se lire :
 *   mon avis est une voix, un visage, un texte signé, une note au dixième ;
 *   l'avis des lecteurs est une foule, un grand chiffre, une répartition, et des
 *   cartes, une par lecteur, chacune avec son prénom et ses étoiles.
 */
.iecb-lecteurs-synthese {
	display: grid;
	gap: 14px 28px;
	align-items: center;
}

@media (min-width: 620px) {
	.iecb-lecteurs-synthese {
		grid-template-columns: auto minmax(0, 320px);
	}
}

.iecb-lecteurs-note {
	margin: 0;
	color: var(--iecb-kaki);
	font-size: 13.5px;
	line-height: 1.5;
}

.iecb-lecteurs-chiffre {
	display: block;
	font-family: var(--iecb-titre);
	font-size: 60px;
	line-height: .9;
	letter-spacing: -.01em;
	color: var(--iecb-sapin);
}

.iecb-lecteurs-note .iecb-etoiles {
	margin: 6px 0 2px;
	font-size: 20px;
}

.iecb-repartition {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.iecb-repartition li {
	display: grid;
	grid-template-columns: 34px 1fr 28px;
	gap: 10px;
	align-items: center;
	color: var(--iecb-kaki);
	font-size: 12.5px;
	line-height: 1.2;
}

.iecb-repartition-barre {
	height: 7px;
	border-radius: 999px;
	background: var(--iecb-creme);
	overflow: hidden;
}

.iecb-repartition-barre span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--iecb-kaki);
}

.iecb-avis-clients {
	display: grid;
	gap: 12px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 900px) {
	.iecb-avis-clients {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.iecb-avis-client {
	padding: 14px 16px;
	border-radius: 3px;
	background: var(--iecb-creme);
}

.iecb-avis-client-tete {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: baseline;
	margin: 0;
	font-size: 13px;
	color: var(--iecb-kaki);
}

.iecb-avis-client-nom {
	font-weight: 700;
	color: var(--iecb-sapin);
}

.iecb-avis-client .iecb-etoiles {
	display: flex;
	margin: 6px 0 0;
	font-size: 15px;
}

.iecb-avis-verifie {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--iecb-sapin);
	color: var(--iecb-neige);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
}

.iecb-avis-client-texte {
	margin: 8px 0 0;
	color: var(--iecb-sapin);
	font-size: 14.5px;
	line-height: 1.62;
}

.iecb-lien-texte {
	display: inline-block;
	margin-top: 14px;
	color: var(--iecb-sapin);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid var(--iecb-argile);
}

.iecb-lien-texte:hover {
	border-bottom-color: var(--iecb-mandarine);
}

.iecb-lecteurs-vide {
	max-width: 58ch;
	margin: 0;
	padding: 16px 18px;
	border-radius: 3px;
	background: var(--iecb-creme);
	color: var(--iecb-sapin);
	font-size: 15px;
	line-height: 1.6;
}

.iecb-lecteurs-vide strong {
	font-weight: 700;
}

/* Sur la vignette d'un Recueil, le nombre d'avis suit la note : c'est une moyenne de lecteurs. */
.iecb-note-nombre {
	font-weight: 300;
	opacity: .85;
}

/* ==========================================================================
   3. La signature de mon avis
   ========================================================================== */

.iecb-signature {
	display: flex;
	gap: 12px;
	align-items: center;
	margin: 0 0 14px;
}

.iecb-signature-portrait {
	position: relative;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--iecb-fond, var(--iecb-kaki));
	color: var(--iecb-encre, var(--iecb-neige));
}

.iecb-signature-portrait img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.iecb-signature-initiales {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-family: var(--iecb-titre);
	font-size: 22px;
	line-height: 1;
}

.iecb-signature-texte {
	min-width: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--iecb-kaki);
}

.iecb-signature-nom {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--iecb-sapin);
}

.iecb-signature-nom a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--iecb-argile);
}

.iecb-signature-credit {
	display: block;
	margin-top: 2px;
	font-size: 11.5px;
}