/*
 * Fichier : intemporris.css
 * Emplacement : designs/intemporris/assets/css/
 *
 * Responsabilité :
 * Socle du design Intemporris. Il pose les variables du design et habille ce
 * que les trois domaines de catalogue ont en commun : les cartes de contenu,
 * leur grille, les dossiers de collection, la barre de vues et ses filtres,
 * et la pagination.
 *
 * Ce que cette feuille ne fait pas :
 *   Elle ne touche ni au balisage ni aux gabarits. Le thème Discovery et
 *   l'extension AB-Story Reader produisent les classes, cette feuille les
 *   met en forme. Ce qui appartient à un seul domaine est écrit dans la
 *   feuille de ce domaine.
 *
 * Périmètre :
 *   Chaque règle est portée par l'un des trois conteneurs de catalogue :
 *   abs-catalogue pour les livres audio, abs-archive-podcast pour les
 *   podcasts, abs-archive-fiction pour les fictions. Les trois domaines
 *   nomment leurs cartes de la même façon, et une règle sans conteneur
 *   s'applique aussi aux blocs des autres pages.
 *
 * Couleurs, espacements et rayons :
 *   Toutes les valeurs viennent des variables du thème, avec une valeur de
 *   repli. Le thème redéfinit ses variables pour prefers-contrast: more, et
 *   une seule valeur posée en dur crève ce mécanisme en silence.
 *
 * Lumière :
 *   La matière du design tient en trois plans : le fond de page, la dalle
 *   des cartes, et une lueur basse qui dort au repos et se lève au survol.
 *   La lueur emprunte la couleur de la couverture, que le moteur de palettes
 *   du Reader pose sur la carte dans --abs-palette-vibrante, et la mêle à
 *   l'accent du design. Sans palette, elle revient à l'accent seul.
 *
 * Largeurs :
 *   Les dispositions suivent la largeur du conteneur, par requêtes de
 *   conteneur. Une page de catalogue posée dans une colonne étroite se replie
 *   comme sur un téléphone.
 *
 * Accessibilité : WCAG 2.1 niveau AA strict.
 *   - Le contour de focus du thème reste visible partout.
 *   - Aucune information ne repose sur la seule couleur : un état retenu
 *     porte aussi son remplissage et son contour.
 *   - Le mouvement s'arrête sous prefers-reduced-motion, et les lueurs
 *     disparaissent sous prefers-contrast: more.
 */

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) {
	container: intemporris / inline-size;

	/* Accent du design. Un domaine le redéfinit pour sa couleur. */
	--intemporris-accent: var(--intemporris-or, #946a1f);

	/* Teinte de la lumière. Le moteur de palettes d'AB-Story Reader pose sur
	   les cartes, les mises en avant et les fiches les couleurs tirées de la
	   couverture, sous le préfixe --abs-palette. Le thème sert les mêmes
	   valeurs sous --discovery-palette pour ses propres contenus. La lumière
	   prend la plus vive et la mêle à l'accent du design : l'or reste la
	   base, l'oeuvre ne fait que la colorer. Sans palette, aucune propriété
	   n'est servie et la teinte revient à l'accent. --intemporris-teinte
	   force la valeur. La couleur brute n'est jamais employée : elle ne
	   garantit aucun contraste. */
	--intemporris-palette: var(--abs-palette-vibrante, var(--discovery-palette-vibrante, var(--abs-palette-accent, var(--intemporris-accent))));
	--intemporris-lumiere: var(--intemporris-teinte, color-mix(in srgb, var(--intemporris-palette) 55%, var(--intemporris-accent)));

	/* Or lisible en texte : l'accent mêlé à la couleur du texte du thème. */
	--intemporris-accent-texte: color-mix(in srgb, var(--intemporris-accent) 55%, var(--discovery-color-text, #ffffff));
	--intemporris-sur-accent: var(--discovery-color-background, #000000);

	--intemporris-filet: color-mix(in srgb, var(--discovery-color-text, #ffffff) 14%, transparent);
	/* Le contour d'une carte porte deja un peu d'or au repos. */
	--intemporris-filet-carte: color-mix(in srgb, var(--intemporris-accent) 30%, transparent);
	--intemporris-filet-accent: color-mix(in srgb, var(--intemporris-accent) 45%, transparent);
	--intemporris-halo: color-mix(in srgb, var(--intemporris-accent) 22%, transparent);
	--intemporris-voile: color-mix(in srgb, var(--intemporris-accent) 14%, transparent);

	/* Les trois plans de la matière. */
	--intemporris-dalle-haut: color-mix(in srgb, var(--discovery-color-text, #ffffff) 9%, transparent);
	--intemporris-dalle-bas: color-mix(in srgb, var(--discovery-color-background, #000000) 58%, transparent);
	--intemporris-panneau: color-mix(in srgb, var(--discovery-color-text, #ffffff) 13%, var(--discovery-color-background, #000000));

	/* Les trois lueurs de la nappe, de la plus proche à la plus lointaine. */
	--intemporris-nappe-a: color-mix(in srgb, var(--intemporris-lumiere) 32%, transparent);
	--intemporris-nappe-b: color-mix(in srgb, var(--intemporris-lumiere) 22%, transparent);
	--intemporris-nappe-c: color-mix(in srgb, var(--intemporris-lumiere) 14%, transparent);
	--intemporris-nappe-flou: 0.5rem;

	/* Le verre : un noir-brun translucide, un reflet posé en haut, un bord
	   bronze. La part d'or du bouton d'action se règle par un seul jeton. */
	--intemporris-verre-part: 26%;
	--intemporris-verre-fond: color-mix(in srgb, var(--intemporris-accent) 12%, var(--discovery-color-background, #000000));
	--intemporris-verre-bouton: color-mix(in srgb, var(--intemporris-accent) var(--intemporris-verre-part), var(--discovery-color-background, #000000));
	--intemporris-verre-reflet: color-mix(in srgb, var(--discovery-color-text, #ffffff) 16%, transparent);
	--intemporris-verre-reflet-bas: color-mix(in srgb, var(--discovery-color-text, #ffffff) 8%, transparent);
	--intemporris-verre-fume: color-mix(in srgb, var(--discovery-color-background, #000000) 65%, transparent);
	--intemporris-verre-fume-clair: color-mix(in srgb, var(--discovery-color-background, #000000) 55%, transparent);
	--intemporris-verre-bord: color-mix(in srgb, var(--intemporris-accent) 46%, transparent);
	--intemporris-verre-bord-bouton: color-mix(in srgb, var(--intemporris-accent) 55%, transparent);
	--intemporris-verre-bord-vif: color-mix(in srgb, var(--intemporris-accent) 84%, transparent);
	--intemporris-verre-bord-etat: color-mix(in srgb, var(--intemporris-accent) 42%, transparent);
	--intemporris-verre-lueur: color-mix(in srgb, var(--intemporris-accent) 62%, transparent);
	--intemporris-verre-noyau: color-mix(in srgb, var(--intemporris-accent) 52%, transparent);
	--intemporris-verre-halo: color-mix(in srgb, var(--intemporris-accent) 16%, transparent);
	--intemporris-verre-halo-bouton: color-mix(in srgb, var(--intemporris-accent) 20%, transparent);
	--intemporris-verre-halo-vif: color-mix(in srgb, var(--intemporris-accent) 38%, transparent);
	--intemporris-verre-flou: 0.5rem;

	/* Le souffle de la mise en avant : des lueurs qui naissent du coin bas
	   gauche, s'éteignent près du centre et reviennent à peine à droite. */
	--intemporris-souffle-a: color-mix(in srgb, var(--intemporris-lumiere) 28%, transparent);
	--intemporris-souffle-b: color-mix(in srgb, var(--intemporris-lumiere) 10%, transparent);
	--intemporris-souffle-c: color-mix(in srgb, var(--intemporris-lumiere) 12%, transparent);
	--intemporris-souffle-d: color-mix(in srgb, var(--intemporris-lumiere) 14%, transparent);
	--intemporris-souffle-e: color-mix(in srgb, var(--intemporris-lumiere) 8%, transparent);
	--intemporris-souffle-flou: 2rem;
	--intemporris-souffle-flou-lointain: 2.5rem;

	--intemporris-trame: color-mix(in srgb, var(--intemporris-accent) 26%, transparent);
	--intemporris-ombre: var(--intemporris-ombre-couleur, rgb(0 0 0 / 0.45));
	--intemporris-portee: 0 1.25rem 2.5rem -1rem;

	--intemporris-filet-epaisseur: 1.5px;
	--intemporris-rayon: var(--discovery-radius-md, 0.5rem);
	--intemporris-rayon-grand: var(--discovery-radius-lg, 1rem);
	--intemporris-rond: var(--discovery-radius-full, 9999px);
	--intemporris-cible: 2.75rem;
	--intemporris-duree: var(--discovery-duration-normal, 240ms);
	--intemporris-approche-titre: -0.025em;
	--intemporris-approche-etiquette: 0.1em;

	/* Bobine de ruban : moyeu, flasque, bande enroulée, jante, halo. */
	--intemporris-bobine:
		radial-gradient(closest-side, var(--discovery-color-surface, #141414) 0 11%, var(--intemporris-accent) 11% 12.5%, transparent 12.5%),
		radial-gradient(closest-side, transparent 0 23.5%, var(--intemporris-filet-accent) 23.5% 25%, transparent 25%),
		radial-gradient(closest-side, transparent 0 12.5%, var(--discovery-color-surface, #141414) 12.5% 23.5%, transparent 23.5%),
		radial-gradient(closest-side, transparent 0 66%, var(--intemporris-filet-accent) 66% 67.5%, var(--discovery-color-surface, #141414) 67.5%),
		repeating-radial-gradient(closest-side, var(--intemporris-trame) 0 1px, transparent 1px 3px),
		radial-gradient(closest-side, var(--intemporris-halo), var(--discovery-color-surface, #141414));
}

/* Le mouvement de la nappe : une dérive lente, de quelques pour cent. */

@keyframes intemporris-nappe {

	0%, 100% {
		transform: translate3d(0, 0, 0) scale(1);
	}

	50% {
		transform: translate3d(1.5%, -2%, 0) scale(1.05);
	}
}

/* Le souffle dérive plus lentement encore, et son contre-courant à rebours.
   Aucune forme ne se dessine : deux nappes floutées se déplacent de quelques
   pour cent, c'est tout. */

@keyframes intemporris-souffle {

	0%, 100% {
		transform: translate3d(0, 0, 0) scale(1);
	}

	50% {
		transform: translate3d(2.5%, -1.5%, 0) scale(1.06);
	}
}

@keyframes intemporris-souffle-retour {

	0%, 100% {
		transform: translate3d(0, 0, 0) scale(1.04);
	}

	50% {
		transform: translate3d(-3%, 1.5%, 0) scale(1);
	}
}

/* Barre de vues et filtres
   ======================================================================= */

/* La barre range les onglets et les filtres sur une ligne, et les empile
   quand la place manque. Elle appartient au socle : les trois domaines la
   rendent de la meme facon. */
:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) :is(.abs-catalogue-barre, .abs-archive-barre) {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--discovery-space-4, 1rem) var(--discovery-space-5, 1.25rem);
	margin: 0 0 var(--discovery-space-5, 1.25rem);
}

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) :is(.abs-catalogue-onglets, .abs-archive-onglets) {
	gap: var(--discovery-space-1, 0.25rem);
	margin-inline-end: auto;
	padding: var(--discovery-space-1, 0.25rem);
	border: 1px solid var(--intemporris-filet);
	border-radius: var(--intemporris-rond);
	background-color: var(--discovery-color-surface, #141414);
}

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-archive-onglet {
	min-block-size: var(--intemporris-cible);
	padding: var(--discovery-space-2, 0.5rem) var(--discovery-space-5, 1.25rem);
	border: 1px solid transparent;
	border-radius: var(--intemporris-rond);
	background-color: transparent;
	color: var(--discovery-color-muted, #b3b3b3);
	font-weight: var(--discovery-weight-semibold, 600);
	line-height: var(--discovery-line-tight, 1.2);
	transition: color var(--intemporris-duree), border-color var(--intemporris-duree), background-color var(--intemporris-duree);
}

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-archive-onglet:hover {
	border-color: var(--intemporris-filet-accent);
	color: var(--discovery-color-text, #ffffff);
}

/* L'onglet retenu porte son remplissage et son contour, non sa seule
   couleur. */
:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-archive-onglet[aria-selected="true"] {
	border-color: var(--intemporris-accent);
	background-color: var(--intemporris-voile);
	color: var(--discovery-color-text, #ffffff);
}

/* Un filtre tient dans une seule pilule : l'étiquette au-dessus, la liste et
   son bouton d'envoi soudés dessous. */
:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) :is(.abs-catalogue-form, .abs-archive-form) {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0;
}

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) :is(.abs-catalogue-form, .abs-archive-form)::before {
	content: "";
	grid-row: 2;
	grid-column: 1 / -1;
	z-index: -1;
	align-self: stretch;
	border: 1px solid var(--discovery-color-muted, #b3b3b3);
	border-radius: var(--intemporris-rond);
	background-color: var(--discovery-color-surface, #141414);
}

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) :is(.abs-catalogue-label, .abs-archive-label) {
	grid-row: 1;
	grid-column: 1 / -1;
	width: auto;
	margin: 0 0 var(--discovery-space-1, 0.25rem);
	padding-inline-start: var(--discovery-space-4, 1rem);
	font-size: var(--discovery-text-xs, 0.75rem);
	font-weight: var(--discovery-weight-semibold, 600);
	letter-spacing: var(--intemporris-approche-etiquette);
	text-transform: uppercase;
}

/* Les listes perdent la flèche du navigateur et reçoivent un chevron tracé
   dans la couleur du texte. */
:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) select {
	appearance: none;
	width: auto;
	min-inline-size: 11rem;
	min-block-size: var(--intemporris-cible);
	padding-block: 0;
	padding-inline: var(--discovery-space-4, 1rem) var(--discovery-space-8, 2rem);
	border-color: var(--discovery-color-muted, #b3b3b3);
	border-radius: var(--intemporris-rond);
	background-color: var(--discovery-color-surface, #141414);
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(100% - var(--discovery-space-4, 1rem) - 0.3rem) 55%,
		calc(100% - var(--discovery-space-4, 1rem)) 55%;
	background-size: 0.3rem 0.3rem;
	background-repeat: no-repeat;
	font-size: var(--discovery-text-sm, 0.875rem);
}

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) :is(.abs-catalogue-form, .abs-archive-form) select {
	grid-row: 2;
	grid-column: 1;
	border: 0;
	background-color: transparent;
}

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) :is(.abs-catalogue-form, .abs-archive-form) .abs-bouton-envoi {
	grid-row: 2;
	grid-column: 2;
	min-block-size: calc(var(--intemporris-cible) - var(--discovery-space-2, 0.5rem));
	margin-inline-end: var(--discovery-space-1, 0.25rem);
	padding: 0 var(--discovery-space-4, 1rem);
	border: 1px solid var(--intemporris-filet-accent);
	border-radius: var(--intemporris-rond);
	background-color: var(--intemporris-voile);
	color: var(--discovery-color-text, #ffffff);
	font-size: var(--discovery-text-sm, 0.875rem);
	font-weight: var(--discovery-weight-semibold, 600);
	line-height: var(--discovery-line-tight, 1.2);
	transition: background-color var(--intemporris-duree), color var(--intemporris-duree), border-color var(--intemporris-duree);
}

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) :is(.abs-catalogue-form, .abs-archive-form) .abs-bouton-envoi:hover {
	border-color: var(--intemporris-accent-texte);
	background-color: var(--intemporris-accent-texte);
	color: var(--intemporris-sur-accent);
}

/* Cartes de contenu
   ======================================================================= */

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-grille {
	gap: var(--discovery-space-10, 2.5rem) var(--discovery-space-6, 1.5rem);
	margin: 0 0 var(--discovery-space-12, 3rem);
}

/* La carte est une dalle : la couverture posée dessus, le texte dans la
   partie sombre, et la nappe au pied. */
:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-carte-lien {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	gap: var(--discovery-space-4, 1rem);
	padding: var(--discovery-space-3, 0.75rem) var(--discovery-space-3, 0.75rem) var(--discovery-space-5, 1.25rem);
	border: 1px solid var(--intemporris-filet-carte);
	border-radius: var(--intemporris-rayon);
	background: linear-gradient(180deg, var(--intemporris-dalle-haut), var(--intemporris-dalle-bas) 45%, var(--intemporris-dalle-bas));
	color: var(--discovery-color-text, #ffffff);
	transition: border-color var(--intemporris-duree), box-shadow var(--intemporris-duree);
}

/* La nappe : trois lueurs décalées et floutées, sans forme reconnaissable. */
:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-carte-lien::after {
	content: "";
	position: absolute;
	z-index: 0;
	inset-inline: calc(var(--discovery-space-4, 1rem) * -1);
	inset-block-end: calc(var(--discovery-space-4, 1rem) * -1);
	block-size: 9rem;
	background:
		radial-gradient(ellipse 45% 60% at 24% 88%, var(--intemporris-nappe-a), transparent 72%),
		radial-gradient(ellipse 32% 48% at 63% 104%, var(--intemporris-nappe-b), transparent 74%),
		radial-gradient(ellipse 58% 38% at 88% 82%, var(--intemporris-nappe-c), transparent 76%);
	filter: blur(var(--intemporris-nappe-flou));
	opacity: 0.85;
	transition: opacity var(--intemporris-duree), transform var(--intemporris-duree);
	animation: intemporris-nappe 26s ease-in-out infinite;
	pointer-events: none;
}

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) :is(.abs-carte-image, .abs-carte-texte) {
	position: relative;
	z-index: 1;
}

/* Au passage, la lumière monte et déborde sur l'angle inférieur gauche. */
:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-carte-lien:hover,
:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-carte-lien:focus-visible {
	border-color: color-mix(in srgb, var(--intemporris-lumiere) 65%, transparent);
	box-shadow:
		inset 0 calc(var(--discovery-space-8, 2rem) * -1) var(--discovery-space-12, 3rem) calc(var(--discovery-space-8, 2rem) * -1) color-mix(in srgb, var(--intemporris-lumiere) 55%, transparent),
		0 0 var(--discovery-space-10, 2.5rem) color-mix(in srgb, var(--intemporris-lumiere) 24%, transparent);
}

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-carte-lien:hover::after,
:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-carte-lien:focus-visible::after {
	opacity: 1;
	transform: translateY(calc(var(--discovery-space-1, 0.25rem) * -1));
}

/* La couverture est montrée en entier : elle n'est jamais recadrée. */
:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-carte-couverture {
	object-fit: contain;
	border-radius: var(--discovery-radius-sm, 0.25rem);
	background-color: var(--discovery-color-surface, #141414);
}

/* Contenu sans image à la une : une bobine prend la place de la couverture,
   au format des autres cartes. */
:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-carte-lien:not(:has(.abs-carte-image))::before {
	content: "";
	position: relative;
	z-index: 1;
	display: block;
	inline-size: 100%;
	aspect-ratio: var(--abs-forme-couverture, 1 / 1);
	border-radius: var(--discovery-radius-sm, 0.25rem);
	background: var(--intemporris-bobine);
}

/* Le texte de la carte : aucun trait, des prix alignés d'une carte à
   l'autre, et deux lignes réservées au titre. */
:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-carte-texte {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--discovery-space-2, 0.5rem);
	padding: 0 var(--discovery-space-2, 0.5rem);
}

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-carte-titre {
	min-block-size: calc(2em * var(--discovery-line-tight, 1.2));
	font-size: var(--discovery-text-base, 1rem);
	font-weight: var(--discovery-weight-semibold, 600);
	line-height: var(--discovery-line-tight, 1.2);
	color: var(--discovery-color-text, #ffffff);
	text-wrap: pretty;
	text-decoration-color: var(--intemporris-accent);
	text-underline-offset: 0.2em;
}

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-carte-parties {
	gap: var(--discovery-space-1, 0.25rem) var(--discovery-space-3, 0.75rem);
	margin-block-start: auto;
	font-variant-numeric: tabular-nums;
}

/* Une partie qui en suit une autre s'en sépare par un point. */
:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-carte-partie + .abs-carte-partie:not(.abs-carte-partie-promotion)::before {
	content: "";
	display: inline-block;
	inline-size: 0.25em;
	block-size: 0.25em;
	margin-inline-end: var(--discovery-space-3, 0.75rem);
	border-radius: var(--intemporris-rond);
	background-color: currentColor;
	vertical-align: middle;
}

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-carte-lien:focus-visible {
	outline-offset: var(--discovery-space-1, 0.25rem);
}

/* Dossiers de collection
   ======================================================================= */

/* Le dossier se lit en deux plans : un panneau arrière, dont la languette
   fait partie de la silhouette, et une façade posée devant, plus basse de
   quelques pixels. Le fond de page, le panneau et la façade se distinguent. */

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-dossiers {
	gap: var(--discovery-space-6, 1.5rem);
}

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-dossier {
	display: flex;
}

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-dossier-lien {
	--intemporris-panneau-hauteur: var(--discovery-space-10, 2.5rem);
	--intemporris-panneau-decroche: var(--discovery-space-4, 1rem);
	--intemporris-facade-depart: var(--discovery-space-6, 1.5rem);
	--intemporris-languette: 34%;
	--intemporris-facade-haut: color-mix(in srgb, var(--discovery-color-text, #ffffff) 8%, var(--discovery-color-background, #000000));
	--intemporris-facade-bas: color-mix(in srgb, var(--discovery-color-text, #ffffff) 3%, var(--discovery-color-background, #000000));

	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--discovery-space-4, 1rem);
	inline-size: 100%;
	padding: calc(var(--intemporris-facade-depart) + var(--discovery-space-5, 1.25rem)) var(--discovery-space-5, 1.25rem) var(--discovery-space-6, 1.5rem) var(--discovery-space-5, 1.25rem);
	border: 0;
	color: var(--discovery-color-text, #ffffff);
	text-decoration: none;
}

/* Le panneau arrière, et sa languette découpée avec la pente du carton. */
:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-dossier-onglet {
	position: absolute;
	z-index: 0;
	inset-block-start: 0;
	inset-inline: 0;
	inline-size: auto;
	block-size: var(--intemporris-panneau-hauteur);
	border: 0;
	border-radius: var(--intemporris-rayon) var(--intemporris-rayon) 0 0;
	background: linear-gradient(180deg, var(--intemporris-panneau), color-mix(in srgb, var(--intemporris-panneau) 70%, var(--discovery-color-background, #000000)));
	clip-path: polygon(
		0 0,
		var(--intemporris-languette) 0,
		calc(var(--intemporris-languette) + 5%) var(--intemporris-panneau-decroche),
		100% var(--intemporris-panneau-decroche),
		100% 100%,
		0 100%);
	transition: background var(--intemporris-duree);
}

/* La façade, posée devant le panneau. */
:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-dossier-lien::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset-block-start: var(--intemporris-facade-depart);
	inset-block-end: 0;
	inset-inline: 0;
	border: 1px solid var(--intemporris-filet);
	border-radius: var(--intemporris-rayon);
	background:
		radial-gradient(ellipse 60% 55% at 26% 108%, color-mix(in srgb, var(--intemporris-lumiere) 12%, transparent), transparent 72%),
		linear-gradient(180deg, var(--intemporris-facade-haut), var(--intemporris-facade-bas));
	transition: border-color var(--intemporris-duree), box-shadow var(--intemporris-duree), background var(--intemporris-duree);
	pointer-events: none;
}

/* Au repos le contour est à peine là. L'or arrive au survol et au focus. */
:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-dossier-lien:hover::before,
:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-dossier-lien:focus-visible::before {
	border-color: color-mix(in srgb, var(--intemporris-lumiere) 55%, transparent);
	box-shadow:
		inset 0 calc(var(--discovery-space-6, 1.5rem) * -1) var(--discovery-space-10, 2.5rem) calc(var(--discovery-space-6, 1.5rem) * -1) color-mix(in srgb, var(--intemporris-lumiere) 45%, transparent),
		0 0 var(--discovery-space-6, 1.5rem) color-mix(in srgb, var(--intemporris-lumiere) 16%, transparent);
	background:
		radial-gradient(ellipse 70% 60% at 26% 106%, color-mix(in srgb, var(--intemporris-lumiere) 26%, transparent), transparent 74%),
		linear-gradient(180deg, var(--intemporris-facade-haut), var(--intemporris-facade-bas));
}

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-dossier-lien:hover .abs-dossier-onglet,
:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-dossier-lien:focus-visible .abs-dossier-onglet {
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--intemporris-lumiere) 22%, var(--intemporris-panneau)),
		color-mix(in srgb, var(--intemporris-panneau) 70%, var(--discovery-color-background, #000000)));
}

/* Les languettes changent de largeur d'une carte à l'autre : c'est la
   silhouette qui dit le dossier, non une étiquette. */
:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-dossier:nth-child(3n) .abs-dossier-lien {
	--intemporris-languette: 42%;
}

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-dossier:nth-child(3n + 2) .abs-dossier-lien {
	--intemporris-languette: 28%;
}

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-dossier-corps {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: var(--discovery-space-5, 1.25rem);
	row-gap: var(--discovery-space-1, 0.25rem);
	min-inline-size: 0;
	padding: 0;
	border: 0;
	background: none;
}

/* La bobine sort du bord de la façade : elle appartient à la matière du
   dossier, elle n'est pas posée dessus. */
:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-dossier-corps::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / span 2;
	inline-size: var(--discovery-space-16, 4rem);
	block-size: var(--discovery-space-16, 4rem);
	margin-inline-start: calc(var(--discovery-space-10, 2.5rem) * -1);
	border-radius: var(--intemporris-rond);
	background: var(--intemporris-bobine);
	opacity: 0.75;
	transition: opacity var(--intemporris-duree);
}

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-dossier-lien:hover .abs-dossier-corps::before,
:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-dossier-lien:focus-visible .abs-dossier-corps::before {
	opacity: 1;
}

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-dossier-nom {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	font-family: var(--intemporris-police-dossier, Georgia, "Times New Roman", "Noto Serif", serif);
	font-size: var(--discovery-text-xl, 1.25rem);
	font-weight: var(--discovery-weight-normal, 400);
	line-height: 1.25;
	color: var(--discovery-color-text, #ffffff);
	text-wrap: pretty;
	text-decoration-color: var(--intemporris-accent);
	text-underline-offset: 0.2em;
}

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-dossier-compte {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
	font-size: var(--discovery-text-sm, 0.875rem);
	font-variant-numeric: tabular-nums;
}

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-dossier-lien::after {
	content: "";
	position: relative;
	z-index: 2;
	inline-size: 0.6rem;
	block-size: 0.6rem;
	margin-inline-end: var(--discovery-space-1, 0.25rem);
	border-block-start: 1px solid var(--discovery-color-muted, #b3b3b3);
	border-inline-end: 1px solid var(--discovery-color-muted, #b3b3b3);
	transform: rotate(45deg);
	transition: border-color var(--intemporris-duree);
}

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-dossier-lien:hover::after,
:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-dossier-lien:focus-visible::after {
	border-color: var(--intemporris-accent-texte);
}

/* Le débordement du dossier est masqué : le contour de focus se pose à
   l'intérieur de la carte. */
:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-dossier-lien:focus-visible {
	outline-offset: calc(var(--discovery-focus-offset, 2px) * -1);
}

/* Sélection sans résultat
   ======================================================================= */

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) :is(.abs-catalogue-vide, .abs-archive-vide) {
	padding: var(--discovery-space-6, 1.5rem);
	border: 1px dashed var(--intemporris-filet-accent);
	border-radius: var(--intemporris-rayon-grand);
	background-color: var(--discovery-color-surface, #141414);
	text-align: center;
}

/* Pagination
   ======================================================================= */

/* Les pastilles restent centrées, en haut de page comme en bas. */

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .woocommerce-pagination {
	margin: 0 0 var(--discovery-space-8, 2rem);
}

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) nav.woocommerce-pagination ul.page-numbers {
	display: flex;
	justify-content: center;
	gap: var(--discovery-space-2, 0.5rem);
	margin: 0;
	border: 0;
}

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) nav.woocommerce-pagination ul.page-numbers li {
	float: none;
	overflow: visible;
	border: 0;
}

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .woocommerce-pagination li > .page-numbers {
	display: inline-grid;
	place-items: center;
	min-inline-size: var(--intemporris-cible);
	min-block-size: var(--intemporris-cible);
	padding: 0 var(--discovery-space-3, 0.75rem);
	border: 1px solid var(--intemporris-filet);
	border-radius: var(--intemporris-rond);
	background:
		linear-gradient(180deg, var(--intemporris-verre-reflet-bas), transparent 55%),
		var(--intemporris-verre-fume);
	color: var(--discovery-color-text, #ffffff);
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	backdrop-filter: blur(var(--intemporris-verre-flou));
	box-shadow: inset 0 1px 0 var(--intemporris-verre-reflet-bas);
	transition: border-color var(--intemporris-duree), box-shadow var(--intemporris-duree);
}

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .woocommerce-pagination a.page-numbers:hover {
	border-color: var(--intemporris-verre-bord);
	background:
		linear-gradient(180deg, var(--intemporris-verre-reflet), transparent 55%),
		var(--intemporris-verre-fume-clair);
	color: var(--discovery-color-text, #ffffff);
	box-shadow:
		inset 0 1px 0 var(--intemporris-verre-reflet),
		0 0 var(--discovery-space-5, 1.25rem) var(--intemporris-verre-halo);
}

:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .woocommerce-pagination li > .page-numbers.current {
	border-color: var(--intemporris-verre-bord-etat);
	background:
		radial-gradient(ellipse 130% 120% at 50% 112%, var(--intemporris-verre-noyau), transparent 72%),
		linear-gradient(180deg, var(--intemporris-verre-reflet), transparent 50%),
		var(--intemporris-verre-fond);
	color: var(--discovery-color-text, #ffffff);
	font-weight: var(--discovery-weight-bold, 700);
	box-shadow:
		inset 0 1px 0 var(--intemporris-verre-reflet),
		0 0 var(--discovery-space-6, 1.5rem) color-mix(in srgb, var(--intemporris-accent) 22%, transparent);
}

/* Largeurs du conteneur
   ======================================================================= */

@container intemporris (max-width: 56rem) {

	:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-grille {
		grid-template-columns: repeat(min(var(--abs-colonnes, 3), 3), minmax(0, 1fr));
	}

	:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-dossiers {
		grid-template-columns: repeat(min(var(--abs-colonnes, 4), 2), minmax(0, 1fr));
	}
}

@container intemporris (max-width: 40rem) {

	:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) :is(.abs-catalogue-barre, .abs-archive-barre) {
		flex-direction: column;
		align-items: stretch;
	}

	:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) :is(.abs-catalogue-onglets, .abs-archive-onglets) {
		display: flex;
		margin-inline-end: 0;
	}

	:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-archive-onglet-element {
		display: flex;
		flex: 1 1 0;
	}

	:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-archive-onglet {
		inline-size: 100%;
		padding-inline: var(--discovery-space-3, 0.75rem);
		font-size: var(--discovery-text-sm, 0.875rem);
	}

	:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) select {
		min-inline-size: 0;
		inline-size: 100%;
	}

	:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--discovery-space-8, 2rem) var(--discovery-space-4, 1rem);
	}

	:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-carte-lien {
		padding: var(--discovery-space-2, 0.5rem) var(--discovery-space-2, 0.5rem) var(--discovery-space-4, 1rem);
	}

	:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-carte-titre {
		font-size: var(--discovery-text-sm, 0.875rem);
	}

	:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-carte-parties {
		font-size: var(--discovery-text-xs, 0.75rem);
	}

	:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-dossiers {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Mouvement réduit
   ======================================================================= */

@media (prefers-reduced-motion: reduce) {

	:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-archive-onglet,
	:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-bouton-envoi,
	:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-carte-lien,
	:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-carte-lien::after,
	:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-dossier-lien::before,
	:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-dossier-onglet,
	:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-dossier-corps::before,
	:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-dossier-lien::after {
		transition: none;
		animation: none;
	}

	:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-carte-lien:hover::after,
	:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-carte-lien:focus-visible::after {
		transform: none;
	}
}

/* Contraste renforcé
   ======================================================================= */

@media (prefers-contrast: more) {

	:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) {
		--intemporris-filet: var(--discovery-color-border, #ffffff);
		--intemporris-filet-accent: var(--discovery-color-border, #ffffff);
		--intemporris-accent-texte: var(--discovery-color-text, #ffffff);
		--intemporris-halo: transparent;
		--intemporris-voile: transparent;
		--intemporris-nappe-a: transparent;
		--intemporris-nappe-b: transparent;
		--intemporris-nappe-c: transparent;
		--intemporris-souffle-a: transparent;
		--intemporris-souffle-b: transparent;
		--intemporris-souffle-c: transparent;
		--intemporris-souffle-d: transparent;
		--intemporris-souffle-e: transparent;
		--intemporris-verre-lueur: transparent;
		--intemporris-verre-halo: transparent;
		--intemporris-verre-halo-bouton: transparent;
		--intemporris-verre-halo-vif: transparent;
		--intemporris-dalle-haut: var(--discovery-color-surface, #141414);
		--intemporris-dalle-bas: var(--discovery-color-surface, #141414);
		--intemporris-panneau: var(--discovery-color-border, #ffffff);
	}

	:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .abs-dossier-lien {
		--intemporris-facade-haut: var(--discovery-color-surface, #141414);
		--intemporris-facade-bas: var(--discovery-color-surface, #141414);
	}

	/* Sans transparence ni flou, les pastilles retrouvent une surface pleine,
	   et la page courante s'inverse pour rester lisible de loin. */

	:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .woocommerce-pagination li > .page-numbers {
		background: var(--discovery-color-surface, #141414);
		backdrop-filter: none;
		box-shadow: none;
	}

	:is(.abs-catalogue, .abs-archive-podcast, .abs-archive-fiction) .woocommerce-pagination li > .page-numbers.current {
		border-color: var(--discovery-color-text, #ffffff);
		background: var(--discovery-color-text, #ffffff);
		color: var(--discovery-color-background, #000000);
	}
}