/* =============================================================================
   LISTE DES SPECTACLES
   ============================================================================= */

.liste {
	--carte-radius: clamp(1rem, 2vw, 1.5rem);
	/* ⚠️ DIMENSIONNÉE PAR SON CONTENU. La maquette demande 30 px pour la date ;
	   deux lignes de 30 px sur une pastille de 96 px ne tiennent pas. À 8,5rem,
	   « 19 NOV. » s'inscrit avec sa marge. */
	--pastille: clamp(5.5rem, 9vw, 8.5rem);
	/* ⚠️ ÉCART ÉLARGI, et le vertical PLUS GRAND que l'horizontal.
	   Les cartes portent une pastille en débord haut-gauche : sans respiration
	   verticale supplémentaire, celle d'une rangée mordait sur la carte du
	   dessus. Deux valeurs distinctes plutôt qu'un `gap` unique. */
	/* ⚠️ DOUBLÉS. Les cartes portent une pastille en débord et une seconde
	   colonne décalée : les écarts qui suffisent à une grille ordinaire laissent
	   ici une page tassée. Le vertical reste plus grand que l'horizontal. */
	/* ⚠️ 120 px EN PLAFOND, valeur validée à l'œil sur grand écran.
	   `clamp` plutôt qu'une valeur fixe : à 120 px sur un mobile, deux cartes
	   seraient séparées par un tiers d'écran vide. Le minimum est celui qui
	   laisse encore respirer la pastille en débord, le milieu suit la largeur. */
	/* ⚠️ MÊME ÉCART DANS LES DEUX SENS, plafonné à 120 px comme validé à l'œil.
	   J'avais gardé l'horizontal plus serré en pensant que la pastille en débord
	   demandait surtout de la place en hauteur : c'est l'écart ENTRE LES DEUX
	   COLONNES qui manquait. Un seul token pour les deux sens.

	   `clamp` plutôt qu'une valeur fixe : à 120 px sur un mobile en une colonne,
	   deux cartes seraient séparées par un tiers d'écran vide. */
	--grille-gap: clamp(4rem, 9vw, 7.5rem);
	/* Décalage vertical de la colonne de droite : c'est lui qui fait le zigzag
	   de la maquette. Un seul réglage pour toute la page. */
	/* ⚠️ DÉCALAGE DE LA COLONNE DE DROITE, nettement accentué : à 5rem les deux
	   colonnes se lisaient presque comme des rangées. La maquette montre un
	   décrochement franc, de l'ordre de la moitié d'une carte. */
	--decalage: clamp(4rem, 11vw, 11rem);
	/* ⚠️ ÉCART VERTICAL SÉPARÉ, à 60 % de l'horizontal. Voir le raisonnement sur
	   `.liste__grille` : verticalement, l'écart s'additionne au décalage et aux
	   hauteurs inégales, alors qu'horizontalement il est seul. */
	/* ⚠️ ZÉRO EN GRILLE, ET C'EST ASSUMÉ. La pastille de date déborde de 28 % de
	   son diamètre vers le haut : à écart nul, elle chevauche la carte de la
	   rangée précédente. Vérifié avant de le faire — la carte du dessous vient
	   APRÈS dans le document, donc sa pastille se dessine PAR-DESSUS. Le
	   chevauchement va dans le bon sens ; l'inverse aurait tronqué la pastille
	   sans qu'on comprenne pourquoi.

	   ⚠️ L'ÉCART REVIENT EN COLONNE UNIQUE (voir la requête média plus bas). En
	   deux colonnes, le décalage de la colonne de droite et les hauteurs
	   inégales font déjà respirer la page ; en pile, plus rien ne sépare deux
	   cartes qui se suivent — le zéro les collerait. */
	--grille-row-gap: 0px;
	/* Respiration entre deux groupes — grille, intertitre, bouton. */
	--bloc-gap: clamp(4rem, 9vw, 7.5rem);
}

/* ─── Bandeau de tête ────────────────────────────────────────────────────── */
.liste__tete {
	background-color: var(--bg);
	color: var(--fg);
	border-radius: 0 0 var(--carte-radius) var(--carte-radius);
	padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4rem);
	text-align: center;
}
/* ⚠️ LA DESCRIPTION SUIT LA FENTE « TEXTE » DU KIT, comme le corps de page :
   c'est du texte courant, pas un sous-titre. Lui donner une fente de titre
   l'aurait fait grossir avec eux à chaque ajustement.

   ⚠️ ET LE `clamp()` ENVELOPPE LA VARIABLE (piège n° 67). */
.liste__intro {
	max-width: 46rem;
	margin: 0 auto clamp(1rem, 2.5vw, 1.75rem);
	font-family: var(--ty-texte-font-family, inherit), ui-sans-serif, system-ui, sans-serif;
	font-size: clamp(1rem, 2.5vw, var(--ty-texte-font-size, var(--fs-lg, 1.1rem)));
	font-weight: var(--ty-texte-font-weight, inherit);
	line-height: var(--ty-texte-line-height, 1.5);
}
.liste__intro p { margin: 0 0 0.6em; }
.liste__intro p:last-child { margin-bottom: 0; }

.liste__h1 {
	margin: 0 0 clamp(1rem, 2.5vw, 1.75rem);
	font-family: var(--ty-h1-font-family, var(--ff-headline, inherit)), ui-sans-serif, system-ui, sans-serif;
/* ⚠️ LE `clamp()` ENVELOPPE LA VARIABLE, IL N'EST PAS SON REPLI.
   Écrit `var(--ty-hN-font-size, clamp(…))`, le clamp ne sert QUE si la variable
   est absente — or Elementor la définit toujours. Le garde-fou responsive n'a
   donc jamais fonctionné, et les titres gardaient leur taille de grand écran sur
   un téléphone.

   ⚠️ LES VARIABLES DU KIT NE SONT PAS RESPONSIVE : Elementor définit bien une
   taille par point de rupture, mais il l'applique à ses propres widgets ; la
   variable globale ne porte qu'UNE valeur, celle du bureau. Un titre du thème
   qui s'y branche doit donc borner lui-même.

   La valeur du kit devient le MAXIMUM : le bureau reste piloté par le kit, le
   mobile ne peut plus dépasser. */
	font-size: clamp(1.9rem, 6.5vw, var(--ty-h1-font-size, 3.25rem));
	font-weight: var(--ty-h1-font-weight, var(--fw-medium, 500));
	text-transform: var(--ty-h1-text-transform, uppercase);
	line-height: var(--ty-h1-line-height, inherit);
	letter-spacing: var(--ty-h1-letter-spacing, inherit);
}

/* Filtre : une pilule blanche contenant picto, liste et bouton. */
.liste__filtre {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.4rem 1.2rem 0.4rem 0.4rem;
	border-radius: var(--r-pill, 999px);
	background-color: var(--paper);
	color: var(--ink);
}
.liste__filtre-picto {
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	flex: 0 0 auto;
	border-radius: 50%;
	background-color: var(--brand-2);
	color: var(--paper);
}
.liste__filtre-picto svg { width: 1.2rem; height: 1.2rem; }
.liste__filtre select {
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	/* ⚠️ `appearance: none` retire la flèche native ET, sur iOS, l'apparence
	   grise imposée au <select>. La flèche est redessinée ci-dessous. */
	appearance: none;
	-webkit-appearance: none;
	padding-right: 1.75rem;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
	                  linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 0.7rem top 55%, right 0.35rem top 55%;
	background-size: 0.35rem 0.35rem;
	background-repeat: no-repeat;
	font-family: var(--ty-texte-font-family, inherit), ui-sans-serif, system-ui, sans-serif;
	font-size: var(--ty-texte-font-size, inherit);
	font-weight: var(--ty-texte-font-weight, inherit);
	line-height: var(--ty-texte-line-height, inherit);
	letter-spacing: var(--ty-texte-letter-spacing, normal);
	text-transform: var(--ty-texte-text-transform, none);
}
/* ⚠️ Le bouton reste dans le flux mais devient invisible : il n'existe QUE pour
   les visiteurs sans JavaScript, chez qui le formulaire doit pouvoir être
   envoyé. Le script le masque une fois l'envoi automatique en place. */
.liste__filtre-ok {
	padding: 0.4em 1em;
	border: 0;
	border-radius: var(--r-pill, 999px);
	background-color: var(--ink);
	color: var(--paper);
	font: inherit;
	cursor: pointer;
}
.liste__filtre.is-auto .liste__filtre-ok { display: none; }

/* ─── Bouton brochure, à cheval sur le bandeau ───────────────────────────── */
.liste__brochure-zone {
	display: flex;
	justify-content: flex-end;
	/* Remontée : le disque chevauche le bas du bandeau. */
	margin-top: calc(clamp(7rem, 12vw, 9.5rem) * -0.45);
	margin-bottom: clamp(1rem, 3vw, 2rem);
	position: relative;
	z-index: 2;
}
/* ⚠️ MÊMES VALEURS QUE LE BOUTON DU PIED DE PAGE ET DE LA FICHE, à l'identique.
   Les trois sont visibles à quelques écrans d'écart : le moindre écart de forme
   ou de geste se voit. Les noms de tokens sont ceux du pied de page pour qu'une
   mise en commun future ne demande aucun renommage. */
.liste__brochure {
	--brochure-size: clamp(7rem, 12vw, 9.5rem);
	--btn-pop: 1.05;
	--btn-tilt: -2.5deg;
	--relay-size: calc(var(--brochure-size) * 0.22);

	width: var(--brochure-size);
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	border-radius: var(--r-pill);
	background-color: var(--ink);
	color: var(--paper);
	text-align: center;
	text-decoration: none;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.liste__brochure:hover,
.liste__brochure:focus-visible {
	transform: scale(var(--btn-pop)) rotate(var(--btn-tilt));
}
.liste__brochure-label {
	max-width: 70%;
	font-size: var(--fs-xs);
	font-weight: var(--ty-label-font-weight, var(--fw-semibold));
	text-transform: uppercase;
	letter-spacing: var(--ty-label-letter-spacing, 0.04em);
	line-height: 1.25;
	font-family: var(--ty-label-font-family, inherit), ui-sans-serif, system-ui, sans-serif;
}

/* ─── Grille en zigzag ───────────────────────────────────────────────────── */
.liste__grille {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* ⚠️ L'ÉCART VERTICAL EST PLUS PETIT QUE L'HORIZONTAL, à rebours de
	   l'intuition. Deux colonnes séparées par 120 px se lisent comme deux
	   colonnes ; deux rangées séparées par 120 px se lisent comme deux blocs
	   sans rapport — parce que verticalement, cet écart s'ajoute au décalage de
	   la colonne de droite ET aux hauteurs inégales des cartes. L'espace perçu
	   atteignait 200 px là où l'horizontal en fait 120.

	   ⚠️ UN SEUL `gap` NE POUVAIT PAS RÉPONDRE : les deux sens ne subissent pas
	   les mêmes additions. C'est ce qu'un commentaire plus haut avait conclu,
	   puis défait — l'unification était juste pour l'horizontal, elle a emporté
	   le vertical avec elle. */
	column-gap: var(--grille-gap);
	row-gap: var(--grille-row-gap);
	/* ⚠️ `align-items: start` : sans lui, les cartes d'une même rangée
	   s'étirent à la hauteur de la plus haute et le décalage ne se voit plus. */
	align-items: start;
	/* Respiration sous la grille, avant l'intertitre ou le bouton suivant. */
	margin: 0 0 var(--bloc-gap);
	padding: 0;
	list-style: none;
}
/* ⚠️ LE ZIGZAG PORTE SUR LA COLONNE, PAS SUR UNE CARTE SUR DEUX.
   `nth-child(even)` viserait une carte sur deux dans l'ordre du document — ce
   qui revient au même sur deux colonnes, mais casserait si la grille passait à
   trois. `nth-child(2n)` combiné à la colonne réelle est tout aussi fragile :
   on décale donc la COLONNE de droite via son rang de grille. */
.liste__grille > .carte:nth-child(2n) {
	margin-top: var(--decalage);
}

/* ─── Intertitre de festival ─────────────────────────────────────────────── */
.liste__groupe {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 0.6rem;
	margin: var(--bloc-gap) 0 clamp(2rem, 4vw, 3rem);
	text-align: center;
	position: relative;
}
/* Le trait qui traverse, de part et d'autre du titre. */
.liste__groupe::before {
	content: "";
	position: absolute;
	top: 0.9em;
	left: 0;
	right: 0;
	height: 1px;
	background-color: color-mix(in srgb, var(--ink) 35%, transparent);
	z-index: 0;
}
.liste__groupe-titre {
	position: relative;
	z-index: 1;
	margin: 0;
	padding-inline: 1.2rem;
	background-color: var(--paper);
	font-family: var(--ty-h2-font-family, var(--ff-headline, inherit)), ui-sans-serif, system-ui, sans-serif;
	font-size: clamp(1.25rem, 4.5vw, var(--ty-h2-font-size, 1.9rem));
	font-weight: var(--ty-h2-font-weight, var(--fw-medium, 500));
	text-transform: var(--ty-h2-text-transform, uppercase);
	line-height: var(--ty-h2-line-height, inherit);
	letter-spacing: var(--ty-h2-letter-spacing, inherit);
}
.liste__groupe-dates {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0.25em 1.1em;
	border-radius: var(--r-pill, 999px);
	background-color: var(--brand-1);
	color: var(--ink);
	font-size: var(--ty-label-font-size, var(--fs-sm, 0.9375rem));
	text-transform: var(--ty-label-text-transform, uppercase);
	font-family: var(--ty-label-font-family, inherit), ui-sans-serif, system-ui, sans-serif;
	font-weight: var(--ty-label-font-weight, inherit);
	line-height: var(--ty-label-line-height, inherit);
	letter-spacing: var(--ty-label-letter-spacing, inherit);
}
.liste__separateur {
	margin: var(--bloc-gap) 0;
	border: 0;
	border-top: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
}

/* ─── Carte ──────────────────────────────────────────────────────────────────
   Structure de la maquette : pastille de date en débord haut-gauche, visuel
   arrondi, étiquette de discipline en haut-droite sur l'image, puis un panneau
   framboise qui porte titre, compagnie, et un pied à deux colonnes — bouton à
   gauche, détails à droite.
   ─────────────────────────────────────────────────────────────────────────── */
.carte {
	position: relative;
	/* ⚠️ CONTENEUR DE REQUÊTE : le pied de carte décide de sa disposition sur SA
	   largeur, pas sur celle de la fenêtre. Entre 860 et 960 px, la grille garde
	   deux colonnes — chaque carte ne fait plus que 430 px — mais la requête
	   média, elle, voyait encore une fenêtre large et laissait le pied en ligne.
	   Le contenu débordait à droite.

	   ⚠️ `inline-size` ET NON `size` : `size` exige une hauteur définie, ce que
	   la carte n'a pas. La requête ne se déclencherait jamais. */
	container-type: inline-size;
	container-name: carte;
	/* ⚠️ NI `overflow: hidden` NI `clip` : la pastille de date DOIT déborder en
	   haut à gauche. Les arrondis sont portés par le visuel et le panneau. */
}

.carte__pastille {
	position: absolute;
	top: calc(var(--pastille) * -0.28);
	left: calc(var(--pastille) * -0.22);
	z-index: 2;
	display: grid;
	place-content: center;
	width: var(--pastille);
	height: var(--pastille);
	margin: 0;
	border-radius: 50%;
	background-color: var(--brand-1);
	color: var(--ink);
	/* ⚠️ VALEURS DE LA MAQUETTE, en `em` plutôt qu'en pixels fixes.
	   30 px sur un écran, c'est juste ; sur la pastille réduite en mobile, le
	   texte déborderait. L'échelle suit donc la taille de la pastille.
	   L'interligne resserré (0.67) est celui de la maquette : il colle les deux
	   lignes « MER. » et « 19 NOV. ». */
	font-family: var(--ty-h4-font-family, var(--ff-headline)), ui-sans-serif, system-ui, sans-serif;
	font-size: clamp(1.05rem, calc(var(--pastille) * 0.21), 1.875rem);
	font-weight: 500;
	/* ⚠️ 1.05, PAS 0.67. Le rapport 20/30 de la maquette vaut pour une date sur
	   UNE ligne ; sur deux — « MER. » puis « 19 NOV. » — les jambages de la
	   première touchaient les capitales de la seconde. 1.05 garde les lignes
	   serrées sans qu'elles se percutent. */
	line-height: 1.05;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: var(--ty-h4-letter-spacing, normal);
}
/* ⚠️ Dans un festival, la pastille s'inverse : sur des cartes jaunes, une
   pastille jaune disparaîtrait. */
.liste__grille--festival .carte__pastille {
	background-color: var(--brand-2);
	color: var(--paper);
}

/* ⚠️ ARRONDI SUR LES QUATRE ANGLES, ET LE VISUEL PASSE DEVANT LE PANNEAU.
   La maquette montre une photo entièrement arrondie qui repose SUR le bloc rose,
   non un bandeau dont seuls les angles hauts sont adoucis.

   Le chevauchement se fait par marge négative sur le panneau, pas par
   `position: absolute` : le visuel garde ainsi sa place dans le flux et donne sa
   hauteur à la carte. */
.carte__visuel {
	position: relative;
	z-index: 1;
	border-radius: 30px;
	overflow: hidden;
	background-color: var(--ink);
}
.carte__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--carte-ratio, 4 / 3);
	object-fit: cover;
}

/* Visuel de secours — voir la fiche spectacle pour le raisonnement. */
.carte__visuel.is-vide {
	display: grid;
	place-items: center;
	background-color: var(--brand-2-fonce);
	color: var(--paper);
	aspect-ratio: var(--carte-ratio, 4 / 3);
}
.carte__vide {
	display: block;
	width: 100%;
	padding: 12%;
}
.carte__vide svg {
	width: 100%;
	max-width: 7rem;
	height: auto;
	opacity: 0.35;
	margin-inline: auto;
	display: block;
}

.carte__discipline {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	padding: 0.25em 0.9em;
	border-radius: var(--r-pill, 999px);
	background-color: var(--brand-1);
	color: var(--ink);
	font-family: var(--ty-label-font-family, inherit), ui-sans-serif, system-ui, sans-serif;
	font-size: var(--ty-label-font-size, var(--fs-xs, 0.8125rem));
	font-weight: var(--ty-label-font-weight, inherit);
	letter-spacing: var(--ty-label-letter-spacing, normal);
	text-transform: var(--ty-label-text-transform, none);
}
.liste__grille--festival .carte__discipline {
	background-color: var(--brand-2);
	color: var(--paper);
}

.carte__panneau {
	/* ⚠️ LA REMONTÉE ET LA MARGE HAUTE VIENNENT DU MÊME TOKEN.
	   Tes valeurs testées — remontée de 45 px, marge de 45 px + 2rem — donnaient
	   un écart de 32 px entre le haut visible du panneau et le titre, contre
	   30 px sur les côtés. L'écart de 2 px est invisible, mais deux sources pour
	   une même mesure finissent toujours par diverger : au prochain réglage, on
	   corrigerait l'une en oubliant l'autre.

	   `--carte-chevauche` porte la remontée, `--carte-marge` la respiration.
	   Résultat identique à l'œil, un seul endroit à toucher. */
	--carte-chevauche: 45px;
	--carte-marge: 30px;

	margin-top: calc(var(--carte-chevauche) * -1);
	padding: calc(var(--carte-chevauche) + var(--carte-marge)) var(--carte-marge) var(--carte-marge);
	border-radius: var(--carte-radius);
	background-color: var(--brand-2);
	color: var(--paper);
}
.liste__grille--festival .carte__panneau {
	background-color: var(--brand-1);
	color: var(--ink);
}

.carte__titre {
	margin: 0;
	font-family: var(--ty-h3-font-family, var(--ff-headline)), ui-sans-serif, system-ui, sans-serif;
	font-size: clamp(1.1rem, 3.5vw, var(--ty-h3-font-size, 1.5rem));
	font-weight: var(--ty-h3-font-weight, var(--fw-medium, 500));
	line-height: var(--ty-h3-line-height, 1.1);
	letter-spacing: var(--ty-h3-letter-spacing, normal);
	text-transform: var(--ty-h3-text-transform, uppercase);
	overflow-wrap: break-word;
	text-wrap: balance;
}
.carte__titre a { color: inherit; text-decoration: none; }

/* ⚠️ ZONE CLIQUABLE ÉTENDUE À TOUTE LA CARTE.
   Le lien ne couvre visuellement que le titre, mais son `::after` s'étire sur la
   carte entière : elle devient cliquable sans imbriquer de liens les uns dans
   les autres, ce qui serait invalide et infernal au clavier.

   ⚠️ SANS CETTE RÈGLE, SEUL LE TEXTE DU TITRE EST CLIQUABLE — le bouton « Infos
   et réservation » est un `<span>` décoratif, pas un lien. La règle avait
   disparu en réécrivant la section des cartes ; rien ne le signalait, la carte
   restant parfaitement normale à l'œil. */
.carte__lien::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* La pastille et l'étiquette passent AU-DESSUS de la zone cliquable : sans ça,
   elles seraient masquées par elle au survol et perdraient leur relief. */
.carte__pastille,
.carte__discipline { z-index: 2; }


.carte__cie {
	margin: 0.35em 0 0;
	font-family: var(--ty-texte-font-family, inherit), ui-sans-serif, system-ui, sans-serif;
	font-size: var(--ty-texte-font-size, var(--fs-sm, 0.9375rem));
	line-height: var(--ty-texte-line-height, inherit);
	font-weight: var(--ty-texte-font-weight, inherit);
	letter-spacing: var(--ty-texte-letter-spacing, normal);
	text-transform: var(--ty-texte-text-transform, none);
}

/* ⚠️ PIED À DEUX COLONNES, alignées en BAS. Le bouton et les détails n'ont pas
   la même hauteur — trois lignes d'un côté, une pilule de l'autre : c'est leur
   base commune qui doit s'aligner, pas leur sommet. */
.carte__pied {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.2rem;
}
/* ─── Carte d'archive ─────────────────────────────────────────────────────────
   Une fiche d'une saison passée : elle se consulte, elle ne se clique plus.

   ⚠️ IL N'Y A RIEN À NEUTRALISER ICI. Le lien et le bouton ne sont pas masqués,
   ils ne sont pas RENDUS : un `<a>` invisible reste annoncé comme un lien par un
   lecteur d'écran et atteignable au clavier. Cette règle ne fait donc que
   rattraper la mise en page — sans bouton, le pied de carte n'a plus qu'un seul
   enfant et son `space-between` collerait les détails à gauche.

   Aucune couleur, aucune opacité : une programmation passée n'est pas une
   information dégradée, c'est la même information sans action possible. */
/* ─── Carte d'archive : deux colonnes ─────────────────────────────────────────
   Sans bouton, le pied laissait un vide à gauche : la liste des détails était la
   seconde colonne d'un pied à deux colonnes, et la première se retrouvait vide.

   Le filet est conservé — il sépare maintenant le titre des informations, au
   lieu de séparer le bouton des informations. Les détails REMONTENT à hauteur du
   titre : la carte se lit en deux blocs côte à côte plutôt qu'en L.

   ⚠️ AUCUNE MODIFICATION DU HTML. Le pied est simplement replacé dans la
   colonne de droite, sur les deux rangées. Toucher au gabarit aurait imposé une
   seconde structure de carte à maintenir en parallèle.

   ⚠️ TOUTES CES RÈGLES SONT PORTÉES PAR `.carte--archive`, classe posée
   uniquement quand la fiche appartient à une autre saison que celle affichée.
   Une carte de la saison en cours ne les voit jamais.

   Le partage se règle par `--archive-cols`. */
.carte--archive .carte__panneau {
	--archive-cols: 60% 40%;
	display: grid;
	grid-template-columns: var(--archive-cols);
	/* ⚠️ `align-items` NE SUFFIT PAS, IL FAUT AUSSI `align-content`.
	   Les deux ne font pas le même travail, et c'est ce qui creusait l'écart
	   entre le titre et la compagnie :
	     · `align-items` place chaque élément DANS sa rangée ;
	     · `align-content` place les RANGÉES dans la grille.

	   Le pied occupe les deux rangées et il est plus haut que titre + compagnie
	   réunis. Sans `align-content`, la hauteur en trop se répartissait entre les
	   deux rangées : le titre restait en haut, la compagnie descendait au milieu
	   de la carte. Avec `start`, les rangées se serrent en haut et tout l'espace
	   libre passe en bas. */
	align-items: start;
	align-content: start;
	/* La compagnie suit le titre à la distance qu'elle a déjà (sa marge haute) :
	   un `row-gap` s'y ajouterait et recréerait un écart, plus petit mais
	   arbitraire. */
	row-gap: 0;
	column-gap: 0;
}

.carte--archive .carte__titre,
.carte--archive .carte__cie {
	grid-column: 1;
}

/* Le pied occupe la colonne de droite sur toute la hauteur du panneau.
   ⚠️ `1 / -1` ET NON `1 / 3` : le nombre de rangées dépend de la présence de la
   compagnie, qui manque sur certaines fiches. Compter les lignes à la main
   aurait cassé la mise en page dès la première carte sans compagnie. */
.carte--archive .carte__pied {
	grid-column: 2;
	grid-row: 1 / -1;
	margin-top: 0;
	justify-content: flex-end;
}

.carte--archive .carte__details {
	/* Le filet garde sa place et son rôle : séparer deux colonnes. */
	text-align: left;
}

/* ⚠️ EN DESSOUS DE 640 PX, ON REMET UNE SEULE COLONNE. À 40 % d'une carte
   étroite, « Tarif B : de 8 € à 17 € » se casse en quatre lignes et le filet
   devient plus haut que le texte qu'il sépare. */
@media (max-width: 640px) {
	.carte--archive .carte__panneau {
		grid-template-columns: 1fr;
	}
	.carte--archive .carte__titre,
	.carte--archive .carte__cie,
	.carte--archive .carte__pied {
		grid-column: 1;
		grid-row: auto;
	}
	.carte--archive .carte__pied {
		margin-top: 1.2rem;
		justify-content: flex-start;
	}
	.carte--archive .carte__details {
		border-left: 0;
		padding-left: 0;
	}
}

.carte__cta {
	--relay-size: 1em;
	--relay-gap: 0.55em;

	display: inline-flex;
	align-items: center;
	gap: var(--sp-3, 0.7rem);
	padding: 0.55em 0.65em 0.55em 1.1em;
	border-radius: var(--r-pill, 999px);
	background-color: var(--paper);
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
	transition: filter 0.15s ease;
	font-family: var(--ty-cta-secondaire-font-family, inherit), ui-sans-serif, system-ui, sans-serif;
	font-size: var(--ty-cta-secondaire-font-size, var(--fs-sm, 0.9rem));
	font-weight: var(--ty-cta-secondaire-font-weight, var(--fw-medium, 500));
	letter-spacing: var(--ty-cta-secondaire-letter-spacing, normal);
	text-transform: var(--ty-cta-secondaire-text-transform, none);
}
.carte__cta:hover { filter: brightness(0.95); }
.carte__cta svg { width: 1em; height: 1em; flex: 0 0 auto; }

/* ⚠️ TRAIT DE SÉPARATION avant les détails, comme la maquette.
   Il est porté par les DÉTAILS et non par le bouton : le bouton est plus court,
   un trait à sa droite ne descendrait pas jusqu'en bas du bloc.
   `currentColor` plutôt qu'une couleur fixe — sur une carte de festival, le
   panneau est jaune et le trait doit passer en noir. */
.carte__details {
	margin: 0;
	padding: 0 0 0 clamp(0.75rem, 1.5vw, 1.25rem);
	border-left: 1px solid currentColor;
	list-style: none;
	text-align: right;
	font-family: var(--ty-texte-font-family, inherit), ui-sans-serif, system-ui, sans-serif;
	font-size: var(--ty-texte-font-size, var(--fs-sm, 0.9375rem));
	line-height: var(--ty-texte-line-height, 1.45);
	font-weight: var(--ty-texte-font-weight, inherit);
	letter-spacing: var(--ty-texte-letter-spacing, normal);
	text-transform: var(--ty-texte-text-transform, none);
}
/* ⚠️ LE STYLE EST POSÉ SUR LES `li`, PAS SEULEMENT SUR LA LISTE.
   L'héritage suffirait pour la police et la taille, mais pas pour la casse ni
   l'interlettrage : une valeur portée par la liste serait écrasée par tout style
   plus spécifique sur les puces. */
.carte__details li {
	font-family: var(--ty-texte-font-family, inherit), ui-sans-serif, system-ui, sans-serif;
	font-size: var(--ty-texte-font-size, var(--fs-sm, 0.9375rem));
	/* ⚠️ PAS DE GRAISSE ICI. La ligne d'horaire est mise en gras juste en
	   dessous ; une graisse posée sur toutes les puces l'écraserait, la règle
	   étant aussi spécifique et déclarée avant. C'est ce qui rendait l'horaire
	   en poids normal malgré le réglage. */
	line-height: var(--ty-texte-line-height, 1.45);
	letter-spacing: var(--ty-texte-letter-spacing, normal);
	text-transform: var(--ty-texte-text-transform, none);
}

/* ⚠️ LA GRAISSE EST FORCÉE, hors du style « Texte ».
   La ligne d'horaire et le montant du tarif sont mis en avant dans la maquette :
   c'est un choix de hiérarchie propre à la carte, qu'un style courant du kit
   n'a pas à décider. */
.carte__heure {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.3em;
	font-weight: var(--fw-bold, 700);
}

.carte__details strong { font-weight: var(--fw-bold, 700); }

/* ─── Ligne de lieu ──────────────────────────────────────────────────────────
   ⚠️ MÊME COMPOSITION QUE L'HORAIRE, picto puis texte, aligné à droite comme
   le reste de la colonne. Une puce composée différemment de sa voisine se lit
   comme une information d'une autre nature.

   ⚠️ MAIS PAS LA MÊME GRAISSE. L'horaire est mis en avant par la maquette ; le
   lieu redit « La Maline » sur la quasi-totalité des cartes. Le picto suffit à
   le faire ressortir sans lui donner un poids qu'il ne mérite pas. */
/* ─── Ligne de lieu ──────────────────────────────────────────────────────────
   ⚠️ PAS DE `display: flex` ICI, CONTRAIREMENT À L'HORAIRE — et c'est le cœur
   de la règle. En flex, le picto est un élément à part : sur une salle qui
   passe à la ligne il se centrait entre les deux lignes, en face de rien, et le
   remonter imposait un décalage calculé depuis l'interlignage — donc faux dès
   qu'un réglage de typographie le change.

   Dans le flux, le picto est un caractère de plus : il se pose de lui-même sur
   la PREMIÈRE ligne, la suite du texte revient dessous, et l'alignement à
   droite s'applique aux deux lignes sans rien à recalculer. Aucune valeur
   recopiée, donc rien qui puisse se figer. */
.carte__lieu svg {
	/* ⚠️ `inline-block` EST OBLIGATOIRE, ET C'EST LE RESET QUI L'IMPOSE.
	   `img, picture, svg, video { display: block }` vit dans `critical.css` pour
	   réserver le ratio des images. En flex, il passait inaperçu — un élément
	   flex est blockifié de toute façon. Dans le flux, le picto restait en bloc
	   et prenait sa propre ligne, au-dessus du libellé.
	   `inline-block` et non `inline` : le second ignore `width` et `height`. */
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	/* ⚠️ `middle` ET NON UNE VALEUR EN `em`. Il aligne le milieu du picto sur
	   le milieu des minuscules : le rapport tient quelle que soit la police et
	   quel que soit le corps. Un décalage chiffré aurait été juste dans une
	   seule fonte. */
	vertical-align: middle;
	/* ⚠️ AUCUNE MARGE DROITE, ET C'EST DÉLIBÉRÉ. L'épingle porte son propre
	   blanc À L'INTÉRIEUR de son `viewBox` : son tracé va de 4,5 à 19,5 sur
	   24 unités, soit environ 0,16 em de vide de chaque côté à la taille
	   d'affichage. Une marge s'y ajoutait et donnait près d'un demi-cadratin —
	   là où la flèche de l'horaire, qui remplit son cadre, en a besoin. Deux
	   pictos, deux géométries : la même valeur ne convient pas aux deux. */
}
/* ⚠️ La flèche est dessinée EN TRAIT : on l'épaissit par `stroke-width`, une
   graisse de police n'aurait aucun effet dessus. */
/* ⚠️ `flex: 0 0 auto` SUR LE PICTO. Ce SVG n'a pas d'attributs `width`/`height`,
   seulement un `viewBox` : il n'a donc aucune taille intrinsèque à défendre. Dans
   un conteneur flex à l'étroit, Safari le comprime jusqu'à zéro — la flèche
   disparaît, l'espace reste, et rien ne signale ce qui manque. Chrome, lui,
   conserve la largeur CSS : le défaut ne se voit que sur iPhone. */
.carte__heure svg {
	width: 0.85em;
	height: 0.85em;
	stroke-width: 2;
	flex: 0 0 auto;
}

/* ─── Voir plus ──────────────────────────────────────────────────────────── */
/* ⚠️ Le CSS du CTA vit dans `spectacle.css`, chargé sur la seule fiche. La liste
   en porte donc sa propre copie — même valeurs, même geste. */
.liste__plus { text-align: center; margin-block: var(--bloc-gap); }

.liste .maline-cta__link {
	--btn-size: 3.1rem;
	--pill-padding: 1.4rem;
	--pill-radius: var(--r-pill, 999px);
	--dot-gap: 0px;
	--magnet: 14px;
	--label-lh: 1.2;
	--label-gap: 0.35em;
	--relay-speed: 0.5s;
	--relay-size: 1.1rem;
	--relay-gap: 0.55em;

	display: inline-flex;
	align-items: center;
	gap: var(--dot-gap);
	text-decoration: none;
	border-radius: var(--pill-radius);
}
.liste .maline-cta__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--btn-size);
	padding-inline: var(--pill-padding);
	border-radius: var(--pill-radius);
	background-color: var(--ink);
	color: var(--paper);
	transition: transform var(--relay-speed) cubic-bezier(0.22, 1, 0.36, 1);
}
/* Cadre d'exactement une ligne : voir le raisonnement dans spectacle.css. */
.liste .maline-cta__label {
	display: block;
	height: calc(1em * var(--label-lh));
	overflow: hidden;
	line-height: var(--ty-cta-principal-line-height, var(--label-lh));
	font-family: var(--ty-cta-principal-font-family, inherit), ui-sans-serif, system-ui, sans-serif;
	font-size: var(--ty-cta-principal-font-size, inherit);
	font-weight: var(--ty-cta-principal-font-weight, inherit);
	letter-spacing: var(--ty-cta-principal-letter-spacing, normal);
	text-transform: var(--ty-cta-principal-text-transform, none);
}
.liste .maline-cta__label-stack {
	display: flex;
	flex-direction: column;
	gap: var(--label-gap);
	transition: transform var(--relay-speed) cubic-bezier(0.22, 1, 0.36, 1);
}
.liste .maline-cta__label-line { display: block; white-space: nowrap; line-height: var(--label-lh); }
.liste .maline-cta__link:hover .maline-cta__label-stack,
.liste .maline-cta__link:focus-visible .maline-cta__label-stack {
	transform: translateY(calc(-1 * (1em * var(--label-lh) + var(--label-gap))));
}
.liste .maline-cta__dot {
	display: inline-grid;
	place-items: center;
	width: var(--btn-size);
	height: var(--btn-size);
	flex: 0 0 auto;
	border-radius: 999px;
	background-color: var(--ink);
	color: var(--paper);
	transition: transform var(--relay-speed) cubic-bezier(0.22, 1, 0.36, 1);
}
.liste .maline-cta__link:hover .maline-cta__pill,
.liste .maline-cta__link:focus-visible .maline-cta__pill { transform: translateX(calc(var(--magnet) / -2)); }
.liste .maline-cta__link:hover .maline-cta__dot,
.liste .maline-cta__link:focus-visible .maline-cta__dot { transform: translateX(calc(var(--magnet) / 2)); }

@media (prefers-reduced-motion: reduce) {
	.liste .maline-cta__pill,
	.liste .maline-cta__dot,
	.liste .maline-cta__label-stack { transition: none; }
}

.liste__vide {
	text-align: center;
	padding-block: clamp(2rem, 6vw, 4rem);
	/* Reporté depuis le bloc « résultats de recherche » : une seule
	   déclaration par sélecteur. */
	margin-inline: auto;
	max-width: 34rem;
}

/* ─── Sous 860 px ────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
	/* ⚠️ LA BROCHURE DISPARAÎT, ELLE NE RÉTRÉCIT PAS. Sa pastille noire vient
	   se poser sur le filtre et sur la première carte : à cette largeur, il n'y
	   a pas de place pour un élément flottant entre l'en-tête et la liste. Elle
	   reste accessible depuis le pied de page, où elle a sa propre zone. */

	/* ⚠️ LE BOUTON PASSE APRÈS LES INFORMATIONS. Au milieu de la carte, il
	   coupait la lecture entre le titre et les détails pratiques ; en dernier,
	   il conclut la carte — c'est l'ordre naturel : je lis, puis j'agis.

	   ⚠️ `order` PLUTÔT QU'UN CHANGEMENT DE BALISAGE. Le bouton est un `<span>`
	   décoratif — le lien réel est le titre — donc déplacer son ordre visuel ne
	   déplace aucun point d'arrêt du clavier. Ce serait faux pour un vrai
	   lien. */
	/* (`.carte__pied` passe déjà en colonne plus bas dans ce même bloc.) */
	.carte__cta { order: 2; }

	/* ⚠️ LA DATE RENTRE DANS LA PASTILLE. Le coefficient de 0,21 tient sur la
	   grande pastille de bureau ; réduite en mobile, « DIM. 6 SEP. » touchait le
	   bord. On resserre l'échelle et on ménage une marge interne, plutôt que de
	   grossir la pastille — c'est sa taille qui est dictée par la maquette. */
	.carte__pastille {
		/* ⚠️ DÉBORD RÉDUIT : à 22 %, la pastille sortait de 19 px pour une marge
		   de page de 16 — elle était coupée par le bord de l'écran. À 10 % elle
		   mord encore sur la carte, sans dépasser du conteneur. Le haut suit,
		   pour garder la proportion : un débord franc à gauche et timide en haut
		   se lit comme un défaut d'alignement. */
		top: calc(var(--pastille) * -0.14);
		left: calc(var(--pastille) * -0.10);
		font-size: clamp(0.85rem, calc(var(--pastille) * 0.175), 1.5rem);
		padding: 0 0.35em;
		box-sizing: border-box;
	}
	.liste__grille {
		grid-template-columns: 1fr;
		margin-top: var(--sp-8);
		/* ⚠️ DE L'AIR SANS TOUCHER À `--gutter`, qui règle aussi l'en-tête et le
		   pied de page : les cartes touchaient presque les bords sous 400 px. */
		padding-inline: var(--sp-2);
		/* ⚠️ L'ÉCART REVIENT EN COLONNE UNIQUE. Sans les deux colonnes, il n'y a
		   plus ni décalage ni hauteurs inégales pour séparer les cartes : le
		   zéro de la grille les collerait bord à bord.

		   ⚠️ MAIS PAS L'ÉCART GÉNÉRAL NON PLUS. Il vaut jusqu'à 120 px, calibré
		   pour séparer deux COLONNES ; empilé, il découpe la liste en fragments
		   isolés. Les deux tiers suffisent à séparer sans disperser. */
		row-gap: calc(var(--grille-gap) * 0.65);
	}
	/* ⚠️ Le décalage est ANNULÉ en colonne unique : il n'y a plus de seconde
	   colonne à décaler, il ne créerait qu'un vide irrégulier. */
	.liste__grille > .carte:nth-child(2n) { margin-top: 0; }

	/* ⚠️ DE L'AIR EN HAUT ET EN BAS DE LA LISTE. Deux éléments mordent sur elle
	   sur téléphone, et aucun ne peut être déplacé :

	     · le filtre, posé en pastille par-dessus le bandeau jaune — la première
	       carte, avec sa propre pastille de date qui déborde vers le haut,
	       venait s'y coller ;
	     · la pastille « Télécharger la brochure » du pied de page, qui chevauche
	       le bloc suivant par construction — le bouton « Tous les spectacles »
	       arrivait dessous.

	   ⚠️ L'ESPACE SE RÉSERVE ICI, PAS EN DÉPLAÇANT LES PASTILLES : leur position
	   est réglée pour le grand écran, et les bouger casserait la maquette là où
	   elle est juste. */
	/* ⚠️ L'ESPACE EST CALCULÉ SUR LA PASTILLE, PAS CHOISI À L'ŒIL.
	   « Télécharger la brochure » fait 150 px sur téléphone et remonte de 56 %
	   de son diamètre au-dessus du pied de page : elle déborde donc de 84 px sur
	   le bloc précédent. Une marge de 4 rem — 64 px — passait dessous, d'où le
	   bouton recouvert.

	   Le débordement plus une respiration : la valeur suit automatiquement si le
	   diamètre ou le décalage changent, au lieu de redevenir fausse en silence.

	   ⚠️ LES DEUX VARIABLES SONT DÉCLARÉES SUR LE PIED DE PAGE, donc invisibles
	   ici : les replis reprennent leurs valeurs mobiles. Une variable absente ne
	   produit aucune erreur — elle retomberait sur zéro et le calcul rendrait la
	   seule respiration. */
	/* ⚠️ `--footer-clearance` EST PUBLIÉE PAR LE PIED DE PAGE lui-même, sur
	   `:root`. Le bouton « Voir plus » se retrouvait sinon SOUS le pied de page :
	   celui-ci remonte de 56 px par marge négative, et sa pastille déborde
	   par-dessus.

	   ⚠️ RECOPIER LES VALEURS EN REPLI NE MARCHAIT PAS : `--brochure-size` vaut
	   200 px sur grand écran et 150 en mobile, `--brochure-lift` 0,56 puis 0,30.
	   Une paire de replis fixes était fausse aux deux extrémités — 172 px posés
	   là où il en fallait 133 en mobile et 200 sur grand écran. */
	.liste__plus {
		margin-bottom: var(--footer-clearance, 200px);
	}
	/* (le pied bascule désormais sur la largeur de la CARTE — voir plus bas) */
	.carte__details { text-align: left; }

.carte__heure { justify-content: flex-start; }
	/* ⚠️ LA PASTILLE RENTRE DANS LA CARTE SOUS 700 px. À 22 % de débord elle
	   sortait de 19 px pour une marge de page de 16 : elle était coupée par le
	   bord de l'écran. À 10 %, elle mord encore sur la carte — le geste reste
	   lisible — sans dépasser du conteneur.

	   ⚠️ LE HAUT EST RÉDUIT AUSSI, pour garder la proportion. Un débord franc
	   à gauche et timide en haut se lit comme un défaut d'alignement, pas comme
	   une intention. */
	/* ⚠️ MASQUÉE, PAS RECENTRÉE. Sa pastille noire se posait sur le filtre
	   et sur la première carte : à cette largeur il n'y a pas de place pour un
	   élément flottant entre l'en-tête et la liste. Elle reste accessible depuis
	   le pied de page, où elle a sa propre zone. */
	.liste__brochure-zone { display: none; }
	.liste__filtre { width: 100%; }
	.liste__filtre select { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.liste__brochure,
	.carte__cta { transition: none; }
}


/* ─── Chargement en cours ────────────────────────────────────────────────── */
.liste__plus.is-loading a { opacity: 0.55; pointer-events: none; }


/* ─── Pied de carte : bascule sur la largeur de la carte ──────────────────────
   ⚠️ 420 px MESURÉ, PAS CHOISI. En dessous, le bouton « Infos et réservation »
   et le bloc de détails ne tiennent plus côte à côte : le second déborde à
   droite, et le texte se fait couper.

   ⚠️ UNE REQUÊTE MÉDIA NE POUVAIT PAS RÉPONDRE. La carte est étroite dans deux
   situations opposées — fenêtre large avec deux colonnes, ou fenêtre étroite
   avec une seule. Seule sa propre largeur décrit les deux cas d'un coup.
   ────────────────────────────────────────────────────────────────────────── */
@container carte (max-width: 420px) {
	.carte__pied {
		flex-direction: column;
		align-items: stretch;
	}
	.carte__details { order: 1; text-align: left; }
	.carte__cta { order: 2; }
	.carte__heure { justify-content: flex-start; }
}

/* =============================================================================
   RÉSULTATS DE RECHERCHE
   -----------------------------------------------------------------------------
   Une ligne par résultat : vignette, type, titre, extrait. Volontairement plus
   sobre que les cartes de programmation — on parcourt une liste pour trouver,
   pas pour se laisser séduire.
   ============================================================================= */

.liste__recherche {
	margin: var(--sp-6) auto 0;
	display: flex;
	gap: var(--sp-2);
	justify-content: center;
	flex-wrap: wrap;
	max-width: 34rem;
}

/* ⚠️ `min-width: 0` SUR LE CHAMP. Un `<input>` porte une largeur intrinsèque
   d'une vingtaine de caractères et refuse de descendre en dessous : dans un
   conteneur flex étroit, il fait déborder le formulaire. */
.liste__recherche input {
	flex: 1 1 16rem;
	min-width: 0;
	padding: 0.6em 1em;
	border: 1px solid currentColor;
	border-radius: var(--r-pill, 999px);
	background: transparent;
	color: inherit;
	font: inherit;
}
.liste__recherche input::placeholder { color: inherit; opacity: 0.6; }

.liste__recherche button {
	flex: 0 0 auto;
	padding: 0.6em 1.3em;
	border: 0;
	border-radius: var(--r-pill, 999px);
	background-color: var(--ink);
	color: var(--paper);
	font: inherit;
	cursor: pointer;
}

/* ─── Aucun résultat ─────────────────────────────────────────────────────────
   `.liste__vide` est déclarée plus haut, avec la liste filtrée. */
.liste__vide-piste { opacity: 0.75; }
.liste__vide-liens {
	display: flex;
	gap: var(--sp-4);
	justify-content: center;
	flex-wrap: wrap;
	margin-top: var(--sp-4);
}
.liste__vide-liens a { text-decoration: underline; }

/* ─── Pagination ─────────────────────────────────────────────────────────────
   ⚠️ CES CLASSES SONT CELLES DE WORDPRESS, pas les nôtres : `the_posts_pagination()`
   les impose. Les renommer demanderait de réécrire la fonction — pour un gain
   nul, puisqu'elles ne servent qu'ici. */
.pagination {
	margin: clamp(2rem, 5vw, 3rem) 0;
	text-align: center;
}
.pagination .nav-links {
	display: inline-flex;
	gap: var(--sp-2);
	flex-wrap: wrap;
	justify-content: center;
}
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44 px : la cible tactile minimale recommandée. */
	min-width: 44px;
	min-height: 44px;
	padding-inline: 0.6em;
	border-radius: var(--r-pill, 999px);
	text-decoration: none;
	color: inherit;
}
.pagination .page-numbers.current {
	background-color: var(--ink);
	color: var(--paper);
}
@media (hover: hover) {
	.pagination a.page-numbers:hover {
		background-color: color-mix(in srgb, var(--ink) 10%, transparent);
	}
}


/* ⚠️ LA PAGE N'EST PAS LE PANNEAU : même balisage, mais posé sur fond clair et
   sans hauteur contrainte. Ces deux règles sont tout ce qui les distingue —
   le reste du style vient de `header-footer.css`, et c'est voulu : deux jeux de
   règles auraient divergé au premier ajustement. */
.site-search__results--page {
	margin-top: clamp(2rem, 5vw, 3.5rem);
	/* Dégagement publié par le pied de page — voir `--footer-clearance`. */
	margin-bottom: var(--footer-clearance, 200px);

	/* ⚠️ LA COULEUR EST POSÉE ICI, ELLE N'EST PLUS HÉRITÉE. Dans le panneau,
	   `.site-search` impose `color: var(--paper)` sur fond noir ; la page n'a
	   pas ce conteneur, et le texte prenait la couleur de ce qui l'entourait —
	   du gris clair sur fond blanc. */
	color: var(--ink);
}

.site-search__results--page .site-search__result {
	background-color: color-mix(in srgb, var(--ink) 4%, transparent);
}

/* Le survol du panneau pose un fond jaune et du texte noir : sur fond clair,
   seul le fond change. */
.site-search__results--page .site-search__result-main,
.site-search__results--page .site-search__result-title { color: var(--ink); }