/* L'Encre Interdite — réglages du site, posés APRÈS la feuille livrée.
   Fichier à nous : celle de Claude Design reste intacte et remplaçable.

   DÉBORDEMENT DU MENU DE GAUCHE (2026-10-20). Dans la feuille livrée, chaque
   ligne de catégorie est une boîte flexible qui passe à la ligne : losange,
   libellé, pointillés, compteur. Quand le libellé est long — « LITTÉRATURE
   GÉNÉRALE », en capitales dans la base — l'ensemble ne tient plus et c'est le
   COMPTEUR qui bascule sous la ligne. D'où l'impression que cette catégorie
   était plus décalée que les autres : elle est bien au même niveau que « Dark
   Romance », mais son « 2 produits » tombait dessous.

   Élargir seul ne suffisait pas : essayé à 290 et 330 px, le compteur sautait
   encore. `min-width: 0` sur le libellé non plus — les pointillés gardent leur
   place.

   La ligne devient donc une GRILLE à quatre colonnes, où chacun garde la
   sienne : le libellé peut se replier sur deux lignes sans rien pousser. La
   colonne du panneau passe par ailleurs de 248 à 320 px, dans le gabarit
   propre au site. */
.ei-shop .mc-filters .wc-block-product-categories-list li {
	display: grid;
	grid-template-columns: auto minmax(0, auto) minmax(10px, 1fr) auto;
	align-items: baseline;
	column-gap: 6px;
}
.ei-shop .mc-filters .wc-block-product-categories-list li > a {
	grid-column: 2;
	min-width: 0;
}
.ei-shop .mc-filters .wc-block-product-categories-list li::after {
	grid-column: 3;
}
.ei-shop .mc-filters .wc-block-product-categories-list li > .wc-block-product-categories-list-item-count {
	grid-column: 4;
	white-space: nowrap;
}
/* La sous-liste reprend toute la largeur, sous les quatre colonnes. */
.ei-shop .mc-filters .wc-block-product-categories-list li > ul {
	grid-column: 1 / -1;
}

/* COUVERTURES ROGNÉES. Le socle impose aux images produit un `aspect-ratio:
   3/4` avec `object-fit: cover` : tout ce qui n'est pas exactement à ce format
   est recadré, et on perd ce qui dépasse. Relevé sur les couvertures du site :
   0,62 — 0,63 — 0,70 — et 1,0 pour un coffret carré, contre 0,75 attendu. Le
   nom de l'auteur sautait en haut, le bandeau du film en bas, les côtés du
   coffret.

   `contain` montre la couverture entière. Le cadre garde sa taille, donc la
   grille reste alignée et les titres sur une même ligne — essayé aussi en
   laissant le cadre épouser chaque couverture, mais les hauteurs inégales
   désalignaient toute la rangée.

   Les bandes laissées autour d'une couverture étroite se fondent dans le fond
   de la carte. Le filet doré, lui, encadre la boîte : une couverture dans son
   cadre, ce qui va bien à une librairie. */
.ei-shop .wc-block-product .wc-block-components-product-image img {
	object-fit: contain;
}

/* ============================================================================
   FILTRES PRIX ET DISPONIBILITÉ

   Le gabarit du socle posait les anciens blocs de filtre (`price-filter`,
   `stock-filter`), conçus pour le bloc « Tous les produits ». La grille est un
   Product Collection : ces filtres ne s'accrochaient à rien et rendaient 152
   octets de vide. Ils sont remplacés, dans le gabarit propre à ce site, par
   `product-filter-price` et `product-filter-status`, qui savent lui parler.

   La feuille livrée habillait les anciens — ses sélecteurs ne trouvent plus
   rien. Voici l'habillage des nouveaux, dans le même parchemin.
   ========================================================================== */

/* Les deux boutons de la fenêtre mobile n'ont rien à faire sur un écran large :
   le panneau est déjà déplié à côté des produits. */
@media (min-width: 761px) {
	.ei-shop .wc-block-product-filters__open-overlay,
	.ei-shop .wc-block-product-filters__close-overlay {
		display: none;
	}
}

/* Un titre par filtre, comme « Catégories » au-dessus de la liste. Les blocs
   ne portent que des légendes réservées aux lecteurs d'écran. */
.ei-shop .wp-block-woocommerce-product-filter-price::before,
.ei-shop .wp-block-woocommerce-product-filter-status::before {
	display: block;
	margin: 22px 0 14px;
	font-family: var(--wp--preset--font-family--display, "Cormorant", Georgia, serif);
	font-weight: 600;
	font-size: 25px;
	letter-spacing: .06em;
	font-variant: small-caps;
	text-align: center;
	color: var(--ei-bord);
}
.ei-shop .wp-block-woocommerce-product-filter-price::before { content: "Prix"; }
.ei-shop .wp-block-woocommerce-product-filter-status::before { content: "Disponibilité"; }

/* ---- Curseur de prix ---- */
.ei-shop .wc-block-product-filter-price-slider__range {
	accent-color: var(--ei-bord);
}
.ei-shop .wc-block-product-filter-price-slider__content input[type="text"] {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 4px 8px;
	border: 1px solid rgba(122, 86, 40, .5);
	border-radius: 0;
	background: rgba(255, 255, 255, .35);
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	font-size: 13px;
	color: var(--ei-sepia);
	text-align: center;
}
/* Le conteneur porte TROIS enfants : le curseur, puis le champ du minimum et
   celui du maximum. Mis en ligne, le curseur se retrouvait écrasé à gauche des
   deux champs, réduit à ses deux poignées — inutilisable. Une grille lui rend
   toute la largeur, et pose les champs dessous. */
.ei-shop .wc-block-product-filter-price-slider__content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 10px;
	row-gap: 12px;
	align-items: center;
	margin-top: 10px;
	max-width: 100%;
}
.ei-shop .wc-block-product-filter-price-slider__range { grid-column: 1 / -1; }
.ei-shop .wc-block-product-filter-price-slider__left { grid-column: 1; min-width: 0; }
.ei-shop .wc-block-product-filter-price-slider__right { grid-column: 2; min-width: 0; }

/* Le double curseur, redessiné : deux `input[type=range]` superposés sur une
   même piste, dont seules les poignées reçoivent la souris. Le bloc tient à
   jour `--low` et `--high` sur le conteneur — la plage retenue s'y accroche. */
.ei-shop .wc-block-product-filter-price-slider__range {
	position: relative;
	height: 26px;
}
.ei-shop .wc-block-product-filter-price-slider__range .range-bar {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 3px;
	margin-top: -1.5px;
	background: rgba(122, 86, 40, .35);
}
.ei-shop .wc-block-product-filter-price-slider__range .range-bar::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--low, 0%);
	right: calc(100% - var(--high, 100%));
	background: var(--ei-bord);
}
.ei-shop .wc-block-product-filter-price-slider__range input[type="range"] {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	appearance: none;
	background: transparent;
	/* La piste ne doit pas intercepter le clic : les deux curseurs se
	   recouvrent, et celui du dessus bloquerait l'autre partout. */
	pointer-events: none;
}
.ei-shop .wc-block-product-filter-price-slider__range input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	pointer-events: auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid #F4EBDC;
	background: var(--ei-bord);
	box-shadow: 0 1px 3px rgba(40, 22, 10, .5);
	cursor: pointer;
}
.ei-shop .wc-block-product-filter-price-slider__range input[type="range"]::-moz-range-thumb {
	pointer-events: auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid #F4EBDC;
	background: var(--ei-bord);
	box-shadow: 0 1px 3px rgba(40, 22, 10, .5);
	cursor: pointer;
}
.ei-shop .wc-block-product-filter-price-slider__range input[type="range"]::-webkit-slider-runnable-track,
.ei-shop .wc-block-product-filter-price-slider__range input[type="range"]::-moz-range-track {
	background: transparent;
	border: 0;
}
/* Le curseur lui-même ne doit pas dépasser non plus. */
.ei-shop .wp-block-woocommerce-product-filter-price,
.ei-shop .wp-block-woocommerce-product-filter-price-slider,
.ei-shop .wc-block-product-filter-price-slider__range {
	max-width: 100%;
	box-sizing: border-box;
}

/* ---- Cases à cocher ----
   La coche est un SVG sans dimension propre : sans cette contrainte elle
   s'étire à toute la largeur du panneau et couvre la ligne. */
.ei-shop .wc-block-product-filter-checkbox-list__item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 5px 0;
}
.ei-shop .wc-block-product-filter-checkbox-list__input-wrapper {
	position: relative;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
}
.ei-shop .wc-block-product-filter-checkbox-list__input {
	appearance: none;
	margin: 0;
	width: 16px;
	height: 16px;
	border: 1px solid rgba(122, 86, 40, .7);
	background: rgba(255, 255, 255, .35);
	cursor: pointer;
}
.ei-shop .wc-block-product-filter-checkbox-list__input:checked {
	background: var(--ei-bord);
	border-color: var(--ei-bord);
}
.ei-shop .wc-block-product-filter-checkbox-list__mark {
	position: absolute;
	inset: 3px;
	width: auto;
	height: auto;
	pointer-events: none;
	color: #F4EBDC;
}
.ei-shop .wc-block-product-filter-checkbox-list__label {
	display: flex;
	align-items: center;
	gap: 9px;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--sans, "Albert Sans", sans-serif);
	font-size: 15px;
	color: var(--ei-sepia);
}
.ei-shop .wc-block-product-filter-checkbox-list__count {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	font-size: 12px;
	color: var(--ei-sepia-m);
}
/* Le bloc enveloppe ses cases dans un `fieldset` : sa bordure par défaut
   dessinerait un second cadre dans le parchemin. */
.ei-shop .wp-block-woocommerce-product-filter-status fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

/* ---- Bouton « Appliquer » ---- */
.ei-shop .wc-block-product-filters__apply {
	display: block;
	width: 100%;
	margin-top: 18px;
	padding: .8em 1.2em;
	border: 1px solid var(--ei-gold);
	border-radius: 0;
	background: var(--ei-bord);
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #F4EBDC;
	cursor: pointer;
}
.ei-shop .wc-block-product-filters__apply:hover {
	background: var(--ei-gold);
	color: #1A120E;
}