/**
 * Fichier : intemporris-accueil.css
 * Emplacement : designs/intemporris/assets/css/intemporris-accueil.css
 *
 * Responsabilité :
 * Habillage de la page d'accueil du site : le slider de publications, le
 * texte de présentation composé en blocs, et le module des nouveautés.
 *
 * Voix de la page :
 *   L'or appartient aux livres audio. La structure de l'accueil — le slider,
 *   le texte de présentation, le titre et la rangée d'onglets — ne le porte
 *   donc pas : elle reprend l'ardoise de l'en-tête et du pied, ce bleu tiré
 *   vers le gris qui tient tout le site.
 *
 *   La couleur de domaine apparaît à l'intérieur des nouveautés : chaque
 *   panneau redéfinit --intemporris-or comme le font les feuilles des
 *   archives, et toute la matière du design s'y recalcule — or pour les
 *   livres audio, bleu pour les podcasts, violet pour les fictions. Un
 *   domaine que l'extension ajouterait demain tombe sur l'or par défaut.
 *
 * Trois respirations :
 *   Le slider, le texte, les nouveautés. Ce qui les sépare est du vide, non
 *   un filet : chaque groupe se lit d'abord à sa respiration.
 *
 * Slider :
 *   Le fichier abs-slider.css de l'extension demande qu'une extension du
 *   site redéfinisse ses variables « sans cibler les sélecteurs du slider ».
 *   C'est ce que fait cette feuille : elle ne pose aucune règle sur .abs-
 *   slide ni .abs-slider, seulement des valeurs portées par le conteneur
 *   d'accueil, dont tout le slider hérite.
 *
 *   Ce qui est réglé contenu par contenu depuis l'administration — image ou
 *   couleur de fond, flou, superposition, couleur du texte, bordure et ombre
 *   de la couverture, position de la couverture, présence de l'accroche ou
 *   du bouton — sort en style en ligne et l'emporte sur cette feuille. Rien
 *   ici ne suppose qu'une diapositive ait une couverture, une accroche ou un
 *   bouton.
 *
 * Nouveautés :
 *   Le module réemploie les classes déjà habillées par le socle (.abs-carte,
 *   .abs-grille) : le socle étend son périmètre à .abs-nouveautes, et cette
 *   feuille ne traite que ce qui appartient en propre à l'accueil — le titre
 *   de section, la rangée d'onglets et la mise en avant. Le nombre d'onglets
 *   et de colonnes vient de l'administration ; la mise en avant peut n'avoir
 *   ni couverture ni bouton.
 *
 * Accessibilité :
 *   Aucun élément n'est réordonné ni masqué. Les cibles gardent 2,75 rem.
 *   Au repos rien ne bouge : la lumière ne passe que sous la main ou au
 *   focus clavier, et s'éteint sous prefers-reduced-motion.
 *
 * @package Intemporris
 * @since   1.0.9
 */

/* Matière de l'accueil
   ======================================================================= */

/* L'ardoise de l'enveloppe, reprise au centre de la page. Les mêmes valeurs
   que l'en-tête et le pied, sous des noms propres à l'accueil : les jetons
   du socle vivent sur les panneaux des nouveautés, ceux-ci sur la page. */
.home .discovery-main {
	--intemporris-accueil-abs: var(--intemporris-bleu-site, #3a5cab);
	--intemporris-accueil-ardoise: color-mix(in srgb, var(--intemporris-accueil-abs) 30%, #7e8693);

	/* Les deux diffusions qui donnent sa profondeur à la nuit. Elles se
	   règlent d'un seul jeton : c'est la part d'ardoise dans le noir. */
	--intemporris-accueil-part: 22%;
	--intemporris-accueil-diffusion: color-mix(in srgb, var(--intemporris-accueil-ardoise) var(--intemporris-accueil-part), transparent);
	--intemporris-accueil-diffusion-basse: color-mix(in srgb, var(--intemporris-accueil-abs) 14%, transparent);

	/* Le verre froid : celui des flèches du slider. */
	--intemporris-accueil-verre: color-mix(in srgb, var(--intemporris-accueil-ardoise) 14%, var(--discovery-color-background, #000000));
	--intemporris-accueil-verre-clair: color-mix(in srgb, var(--intemporris-accueil-ardoise) 24%, var(--discovery-color-background, #000000));
	--intemporris-accueil-bord: color-mix(in srgb, var(--intemporris-accueil-ardoise) 34%, transparent);

	/* La clarté qui marque la diapositive en cours : un argent froid, lisible
	   sur n'importe quelle image de fond sans virer au blanc pur. */
	--intemporris-accueil-clair: color-mix(in srgb, #dfe4ea 74%, var(--intemporris-accueil-ardoise));

	/* Jetons de forme, hors des panneaux où le socle pose les siens. */
	--intemporris-filet: color-mix(in srgb, var(--discovery-color-text, #ffffff) 12%, transparent);
	--intemporris-rayon: var(--discovery-radius-md, 0.5rem);
	--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;
}

/* Slider de l'accueil
   ======================================================================= */

/* Valeurs seulement : le slider les lit par héritage. Elles sont portées par
   le conteneur de l'accueil plutôt que par :root, pour ne rien changer
   ailleurs si le slider est un jour posé sur une autre page.
   Le slider montre tous les domaines à la fois : sa navigation ne porte
   aucune couleur de domaine, seulement l'ardoise et la clarté. */
.abs-slider-accueil {
	/* Hauteur : de quoi tenir une couverture et trois lignes, pas l'écran. */
	--abs-slider-hauteur: 30rem;
	--abs-slider-hauteur-mobile: 21rem;
	--abs-slider-couv-part: 32%;
	--abs-slider-rayon: var(--intemporris-rayon, 0.5rem);

	/* Le titre d'une diapositive est le plus grand mot de la page ; il reste
	   sous le titre de la fiche vers laquelle il mène. */
	--abs-slider-titre-min: 1.5rem;
	--abs-slider-titre-fluide: 2.2vw;
	--abs-slider-titre-max: 2.5rem;
	--abs-slider-accroche-min: 1rem;
	--abs-slider-accroche-fluide: 0.6vw;
	--abs-slider-accroche-max: 1.125rem;
	--abs-slider-accroche-mesure: 46ch;

	/* Flèches : du verre d'ardoise, qui s'éclaircit au passage. */
	--abs-slider-btn-taille: var(--intemporris-cible, 2.75rem);
	--abs-slider-btn-bg: var(--intemporris-accueil-verre);
	--abs-slider-btn-couleur: var(--discovery-color-text, #ffffff);
	--abs-slider-btn-bg-hover: var(--intemporris-accueil-verre-clair);

	/* Pastilles : éteintes au repos, claires pour la diapositive en cours. */
	--abs-slider-bullet-taille: 0.5rem;
	--abs-slider-bullet-gap: var(--discovery-space-3, 0.75rem);
	--abs-slider-bullet-bg: color-mix(in srgb, var(--discovery-color-text, #ffffff) 30%, transparent);
	--abs-slider-bullet-bg-actif: var(--intemporris-accueil-clair);

	/* Le contour des pastilles et du bouton de pause : un bord froid plutôt
	   qu'un cerne blanc. */
	--abs-slider-nav-bordure: color-mix(in srgb, var(--intemporris-accueil-ardoise) 52%, transparent);

	/* Le contour de focus du slider prend celui du thème : sur tout le site,
	   le clavier laisse la même trace. */
	--abs-slider-focus-couleur: var(--discovery-focus-color, #ffb454);
	--abs-slider-focus-epaisseur: var(--discovery-focus-width, 3px);

	/* Ombres servies quand l'administration les coche, contenu par contenu.
	   Celle du texte compte double dès qu'une image de fond arrive : c'est
	   elle qui tient l'accroche lisible sur une zone claire. */
	--abs-slider-couv-ombre: 0 1.25rem 2.5rem -1rem rgb(0 0 0 / 0.55);
	--abs-slider-texte-ombre: 0 1px 3px rgb(0 0 0 / 0.65), 0 2px 12px rgb(0 0 0 / 0.45);

	/* Barre de progression : servie seulement si l'administration l'allume. */
	--abs-slider-barre-hauteur: 2px;
	--abs-slider-barre-bg: color-mix(in srgb, var(--discovery-color-text, #ffffff) 12%, transparent);
	--abs-slider-barre-remplissage: var(--intemporris-accueil-clair);

	/* Vignettes : servies seulement si l'administration les allume. */
	--abs-slider-thumbnails-bg: color-mix(in srgb, var(--discovery-color-background, #000000) 62%, transparent);
	--abs-slider-thumbnail-bg: color-mix(in srgb, var(--intemporris-accueil-ardoise) 14%, transparent);
	--abs-slider-thumbnail-bordure: transparent;
	--abs-slider-thumbnail-bordure-active: var(--intemporris-accueil-clair);

	/* Les badges éditoriaux (bande-annonce, bonus, explicite) sont décrits
	   dans l'en-tête d'abs-slider.css, mais aucune règle ni aucun balisage ne
	   les emploie aujourd'hui : rien à régler tant que la fonction n'existe
	   pas. Le jour où elle arrive, quatre valeurs suffiront ici.
	 */

	/* Respiration sous le slider : le texte ne colle pas à l'image. */
	margin-block-end: var(--discovery-space-16, 4rem);
}

/* Texte de présentation
   ======================================================================= */

/* Le texte vient des blocs de l'éditeur : son contenu et son ordre se
   règlent en administration, jamais ici. Cette feuille ne travaille que la
   colonne de lecture, le rythme, et la lumière posée derrière. */

/* La zone éditoriale est une bande : son décor traverse la fenêtre, son texte
   s'arrête où s'arrête celui de la page. Bornée à la largeur du document, la
   matière dessinait un rectangle plus clair au milieu du noir, avec deux
   arêtes franches sur un écran large.

   C'est le principe que le thème applique à l'en-tête et au pied depuis la
   1.2.6 : le fond couvre la fenêtre, le remplissage latéral borne le contenu.
   La même formule est reprise ici, à la largeur du document. */
.home .discovery-entry {
	position: relative;
	isolation: isolate;
	margin-inline: calc(50% - 50vw);
	padding-block: var(--discovery-space-12, 3rem) var(--discovery-space-16, 4rem);
	padding-inline: max(
		var(--discovery-space-4, 1rem),
		calc((100% - var(--discovery-content-max, 75rem)) / 2 + var(--discovery-space-4, 1rem))
	);
}

/* La bande déborde de la colonne du thème. Le recadrage se fait sur la page
   elle-même, et non sur ce conteneur : posé sur lui, il recouperait la bande
   à la largeur du document, ce qui est précisément le défaut à corriger.
   Seul l'axe horizontal est concerné, et seulement sur l'accueil. */
body.home {
	overflow-x: clip;
}

.home .discovery-entry-content {
	max-inline-size: 42rem;
	margin-block: 0;
	margin-inline: auto;
}

.home .discovery-entry-content > :first-child {
	margin-block-start: 0;
}

.home .discovery-entry-content h1 {
	margin: 0 0 var(--discovery-space-7, 1.75rem);
	font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem);
	letter-spacing: var(--intemporris-approche-titre, -0.025em);
	line-height: 1.1;
	text-wrap: balance;
}

.home .discovery-entry-content p {
	margin: 0 0 var(--discovery-space-5, 1.25rem);
	line-height: var(--discovery-line-relaxed, 1.7);
}

/* Le premier paragraphe tient lieu de chapeau : un cran plus grand, dans la
   couleur pleine du texte. Les suivants passent en couleur secondaire — la
   hiérarchie se lit sans qu'aucune règle ne soit tracée. */
.home .discovery-entry-content > p:first-of-type {
	font-size: var(--discovery-text-lg, 1.125rem);
	color: var(--discovery-color-text, #ffffff);
}

.home .discovery-entry-content > p:first-of-type ~ p {
	color: var(--discovery-color-muted, #b3b3b3);
}

.home .discovery-entry-content p:last-child {
	margin-block-end: 0;
}

/* Un paragraphe vide laissé par l'éditeur creuse un trou dans le rythme sans
   rien dire : il ne prend pas de place. */
.home .discovery-entry-content p:empty {
	display: none;
}

/* Décor de la bande : la chambre habitée
   ======================================================================= */

/* Une pièce sombre où quelqu'un lit à voix haute : une lampe hors champ, des
   murs qui se referment sur les bords, de la poussière dans la lumière. Deux
   choses l'habitent.

     Un souffle de résonance : deux arcs seulement, nés du même point hors
     cadre que dans la variante Résonance, tenus bien plus bas ; et une onde
     qui s'ouvre de loin en loin. La pièce n'est pas muette.

     Des poussières de couleur : dans la lumière flottent les quatre couleurs
     de la maison — l'ardoise du site, l'or des livres audio, le bleu des
     podcasts, le violet des fictions. Elles ne tiennent aucune structure :
     ce sont des grains, portés par un souffle lent qui va et revient.

   À noter, parce que c'est une décision et non un oubli : on s'était dit
   qu'aucune couleur de domaine n'entrerait dans cette zone, pour qu'elle ne
   concoure pas avec les contenus. Ici elles entrent, mais en poussière et
   jamais en matière — l'accueil est le carrefour, et c'est le seul endroit
   du site où les quatre univers flottent dans le même air. Si à l'usage ça
   brouille les parutions, un seul jeton éteint la couleur et la chambre
   redevient celle d'à côté. */

.home .discovery-entry {
	--intemporris-chambre-chaleur: 22%;
	--intemporris-chambre-teinte: color-mix(in srgb, #9a8f84 var(--intemporris-chambre-chaleur), var(--intemporris-accueil-ardoise));
	--intemporris-chambre-lueur: color-mix(in srgb, var(--intemporris-chambre-teinte) 44%, transparent);
	--intemporris-chambre-lueur-loin: color-mix(in srgb, var(--intemporris-chambre-teinte) 20%, transparent);
	--intemporris-chambre-mur: color-mix(in srgb, var(--discovery-color-background, #000000) 85%, transparent);
	--intemporris-decor-fondu: linear-gradient(to bottom, transparent, #000 14%, #000 88%, transparent);
	--intemporris-chambre-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");

	/* La part de couleur dans les poussières. À 0 %, la chambre redevient
	   celle d'à côté, sans rien perdre de sa lumière. */
	--intemporris-poussiere-part: 72%;
	--intemporris-poussiere-ardoise: color-mix(in srgb, var(--intemporris-accueil-ardoise) var(--intemporris-poussiere-part), transparent);
	--intemporris-poussiere-or: color-mix(in srgb, var(--intemporris-or, #946a1f) var(--intemporris-poussiere-part), transparent);
	--intemporris-poussiere-podcast: color-mix(in srgb, var(--intemporris-accent-podcast, #3b6fd4) var(--intemporris-poussiere-part), transparent);
	--intemporris-poussiere-fiction: color-mix(in srgb, var(--intemporris-accent-fiction, #7c4dea) var(--intemporris-poussiere-part), transparent);

	--intemporris-chambre-arc: color-mix(in srgb, var(--intemporris-accueil-ardoise) 26%, transparent);
	--intemporris-chambre-onde: color-mix(in srgb, var(--intemporris-accueil-ardoise) 38%, transparent);
	/* Le passage de la main n'allume rien non plus. */
	.home .discovery-entry:is(:hover, :focus-within) .discovery-entry-content::before,
	.home .discovery-entry:is(:hover, :focus-within) .discovery-entry-content::after {
		animation: none;
	}

}

/* La lampe, comme dans la chambre d'écoute. */
.home .discovery-entry::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block: -6rem 0;
	inset-inline: 0;
	background:
		radial-gradient(ellipse 44% 54% at 3% 78%, var(--intemporris-chambre-lueur), transparent 70%),
		radial-gradient(ellipse 66% 40% at 20% 100%, var(--intemporris-chambre-lueur-loin), transparent 74%),
		radial-gradient(ellipse 26% 40% at 98% 24%, var(--intemporris-chambre-lueur-loin), transparent 72%);
	mask-image: var(--intemporris-decor-fondu);
	pointer-events: none;
}

/* Les murs, et dedans les deux arcs : la résonance est dans la pièce, pas
   par-dessus. */
.home .discovery-entry::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background:
		radial-gradient(circle 44rem at 106% 40%, transparent 47.6%, var(--intemporris-chambre-arc) 48.1%, transparent 48.9%),
		radial-gradient(circle 44rem at 106% 40%, transparent 61.4%, var(--intemporris-chambre-arc) 61.8%, transparent 62.7%),
		linear-gradient(to right, var(--intemporris-chambre-mur), transparent 26%),
		linear-gradient(to left, var(--intemporris-chambre-mur), transparent 24%);
	mask-image: var(--intemporris-decor-fondu);
	pointer-events: none;
}

/* Les poussières. La couleur est posée par masses très douces, et le grain
   sert de masque : on ne voit donc que les grains, chacun prenant la couleur
   de l'endroit où il flotte. Le souffle les emporte et les ramène. */
.home .discovery-entry-content::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -20%;
	background:
		radial-gradient(ellipse 30% 34% at 12% 72%, var(--intemporris-poussiere-or), transparent 68%),
		radial-gradient(ellipse 26% 30% at 46% 32%, var(--intemporris-poussiere-podcast), transparent 70%),
		radial-gradient(ellipse 26% 32% at 80% 62%, var(--intemporris-poussiere-fiction), transparent 70%),
		radial-gradient(ellipse 44% 48% at 26% 50%, var(--intemporris-poussiere-ardoise), transparent 72%);
	mask-image: var(--intemporris-chambre-grain);
	opacity: 0.52;
	pointer-events: none;
}

/* L'onde, de loin en loin. */
.home .discovery-entry-content::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block-start: 26%;
	inset-inline-end: -12rem;
	inline-size: 24rem;
	aspect-ratio: 1;
	border: 1px solid var(--intemporris-chambre-onde);
	border-radius: 50%;
	opacity: 0;
	transform: scale(0.35);
	pointer-events: none;
}

/* Le souffle et l'onde partent ensemble quand la main entre dans la bande :
   une impulsion, pas un cycle. La poussière revient se poser où elle était,
   et l'onde s'éteint avant d'atteindre le texte. */
.home .discovery-entry:is(:hover, :focus-within) .discovery-entry-content::before {
	animation: intemporris-chambre-souffle 17s ease-in-out 1 both;
}

.home .discovery-entry:is(:hover, :focus-within) .discovery-entry-content::after {
	animation: intemporris-decor-onde 12.5s ease-out 1.8s 1 backwards;
}

/* L'onde : elle s'ouvre depuis le point hors cadre, s'élargit et s'éteint
   avant d'atteindre le texte. */
@keyframes intemporris-decor-onde {
	0% { opacity: 0; transform: scale(0.3); }
	12% { opacity: 0.78; }
	64% { opacity: 0.28; }
	88%, 100% { opacity: 0; transform: scale(2.3); }
}

/* Le souffle : lent, sans direction franche, il revient sur ses pas. Sa
   course est assez longue pour qu'on la voie en s'approchant, assez lente
   pour qu'on n'en soit jamais sûr de loin. Ses trois temps ne tombent pas
   sur ceux de l'onde : rien n'est synchronisé, sinon la matière se met à
   ressembler à un fond animé. */
@keyframes intemporris-chambre-souffle {
	0% { transform: translate3d(0, 0, 0); opacity: 0.5; }
	38% { transform: translate3d(-3.25rem, -2.5rem, 0); opacity: 0.72; }
	71% { transform: translate3d(-4.75rem, -1.25rem, 0); opacity: 0.6; }
	100% { transform: translate3d(0, 0, 0); opacity: 0.5; }
}

/* Sur téléphone, il n'y a plus de marge où loger une matière, et le doigt n'a
   pas de survol. La chambre passe donc DERRIÈRE le texte, comme au bureau,
   mais tenue beaucoup plus bas : la lampe presque éteinte, la couleur au
   tiers, un grain plus gros et plus rare — un bruit fin, réduit sur un petit
   écran, ne se lit plus comme de la poussière mais comme un flou.

   Les murs restent, parce qu'ils assombrissent les bords et servent la
   lecture. Les arcs et l'onde se retirent : ils traverseraient les mots. */
@media (max-width: 62rem) {

	.home .discovery-entry {
		/* La pièce tout entière est baissée d'un cran. */
		--intemporris-chambre-lueur: color-mix(in srgb, var(--intemporris-chambre-teinte) 26%, transparent);
		--intemporris-chambre-lueur-loin: color-mix(in srgb, var(--intemporris-chambre-teinte) 13%, transparent);
		--intemporris-poussiere-part: 40%;

		/* Le fond de grain : une teinte d'ardoise étendue à toute la colonne.
		   Sans elle, le grain n'existe que là où passe une couleur, et la
		   texture se réduit à une tache au lieu d'être une matière. */
		--intemporris-poussiere-fond: color-mix(in srgb, var(--intemporris-accueil-ardoise) 30%, transparent);

		--intemporris-chambre-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='1' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
	}

	/* La lampe éclaire le bas de la colonne, foyer tenu à l'intérieur du bloc
	   pour qu'aucun dégradé ne soit tranché par son bord. */
	.home .discovery-entry::before {
		inset-block: 0;
		background:
			radial-gradient(ellipse 66% 34% at 14% 76%, var(--intemporris-chambre-lueur), transparent 74%),
			radial-gradient(ellipse 80% 26% at 78% 88%, var(--intemporris-chambre-lueur-loin), transparent 76%);
	}

	/* Les murs seuls : les arcs traverseraient le texte. */
	.home .discovery-entry::after {
		background:
			linear-gradient(to right, var(--intemporris-chambre-mur), transparent 22%),
			linear-gradient(to left, var(--intemporris-chambre-mur), transparent 20%);
	}

	/* Les poussières occupent toute la colonne, à la limite du perceptible :
	   assez pour que le noir ne soit pas vide, assez peu pour que le texte
	   garde tout son contraste. */
	.home .discovery-entry-content::before {
		inset: 0;
		opacity: 0.34;
		background:
			radial-gradient(ellipse 34% 22% at 16% 72%, var(--intemporris-poussiere-or), transparent 76%),
			radial-gradient(ellipse 30% 20% at 46% 34%, var(--intemporris-poussiere-podcast), transparent 78%),
			radial-gradient(ellipse 30% 20% at 76% 58%, var(--intemporris-poussiere-fiction), transparent 78%),
			radial-gradient(ellipse 44% 30% at 30% 50%, var(--intemporris-poussiere-ardoise), transparent 78%),
			linear-gradient(var(--intemporris-poussiere-fond), var(--intemporris-poussiere-fond));
	}

	/* L'onde ne passe pas derrière les mots. */
	.home .discovery-entry-content::after {
		display: none;
	}
}

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

	.home .discovery-entry-content::before {
		opacity: 0.6;
		animation: none;
	}

	.home .discovery-entry-content::after {
		opacity: 0.26;
		transform: scale(1.35);
		animation: none;
	}
}

/* Sortie de la bande
   ======================================================================= */

/* ---------------------------------------------------------------------
   Quand la main s'en va au milieu d'un passage, l'animation est retirée et la
   valeur reviendrait d'un coup. La transition la rattrape : la lumière se
   retire, elle ne se coupe pas. */
.home .discovery-entry-content::before,
.home .discovery-entry-content::after {
	transition: opacity 600ms ease, transform 900ms ease;
}

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

	.home .discovery-entry-content::before,
	.home .discovery-entry-content::after {
		transition: none;
	}
}

/* Nouveautés : titre et onglets
   ======================================================================= */

.abs-nouveautes {
	margin-block: 0 var(--discovery-space-16, 4rem);
}

.abs-nouveautes .abs-nouveautes-titre {
	margin: 0 0 var(--discovery-space-6, 1.5rem);
	font-size: var(--discovery-text-2xl, 1.5rem);
	letter-spacing: var(--intemporris-approche-titre, -0.025em);
	line-height: var(--discovery-line-tight, 1.2);
}

/* La rangée d'onglets est un rail à coins doux qui tient des onglets en
   pilule. Le rail ne prend pas la forme d'une pilule lui-même : les libellés
   d'ici sont longs, et une pilule haute de trois lignes taillerait ses
   angles dans le texte. Le nombre d'onglets vient de l'administration : la
   rangée passe à la ligne plutôt que de comprimer ses libellés. */
.abs-nouveautes .abs-nouveautes-onglets {
	display: flex;
	flex-wrap: wrap;
	gap: var(--discovery-space-1, 0.25rem);
	inline-size: fit-content;
	max-inline-size: 100%;
	margin: 0 0 var(--discovery-space-8, 2rem);
	padding: var(--discovery-space-1, 0.25rem);
	border: 1px solid var(--intemporris-filet, rgb(255 255 255 / 0.14));
	border-radius: calc(var(--intemporris-rayon, 0.5rem) + var(--discovery-space-2, 0.5rem));
	background-color: var(--discovery-color-surface, #141414);
	list-style: none;
}

/* Chaque onglet porte la couleur de son domaine, et elle ne se montre qu'une
   fois l'onglet survolé ou retenu : au repos, la rangée reste éteinte. Un
   domaine inconnu de cette feuille garde l'or par défaut. */
.abs-nouveautes .abs-nouveautes-onglet {
	--intemporris-accent: var(--intemporris-or, #946a1f);
	--intemporris-filet-accent: color-mix(in srgb, var(--intemporris-accent) 45%, transparent);
	--intemporris-voile: color-mix(in srgb, var(--intemporris-accent) 14%, transparent);
}

#abs-nouveautes-onglet-podcasts {
	--intemporris-or: var(--intemporris-accent-podcast, #3b6fd4);
}

#abs-nouveautes-onglet-fictions {
	--intemporris-or: var(--intemporris-accent-fiction, #7c4dea);
}

.abs-nouveautes .abs-nouveautes-onglet {
	min-block-size: var(--intemporris-cible, 2.75rem);
	padding: var(--discovery-space-2, 0.5rem) var(--discovery-space-5, 1.25rem);
	border: 1px solid transparent;
	border-radius: var(--intemporris-rond, 9999px);
	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, 240ms),
		border-color var(--intemporris-duree, 240ms),
		background-color var(--intemporris-duree, 240ms);
}

.abs-nouveautes .abs-nouveautes-onglet:hover {
	border-color: var(--intemporris-filet-accent, rgb(148 106 31 / 0.45));
	color: var(--discovery-color-text, #ffffff);
}

.abs-nouveautes .abs-nouveautes-onglet[aria-selected="true"] {
	border-color: var(--intemporris-accent, #946a1f);
	background-color: var(--intemporris-voile, rgb(148 106 31 / 0.14));
	color: var(--discovery-color-text, #ffffff);
}

/* Nouveautés : couleur des panneaux
   ======================================================================= */

/* Le socle pose ses jetons sur chaque panneau ; il suffit d'y redéfinir
   --intemporris-or pour que toute la matière du panneau se recalcule —
   lumière, filets, verre, nappes — exactement comme le font les feuilles des
   archives pour leurs pages. Les clés des domaines sont des constantes de
   l'extension (ABS_Nouveautes::DOMAINE_*) : l'administration change leur
   titre et peut les éteindre, jamais leur nom. */
#abs-nouveautes-panneau-podcasts {
	--intemporris-or: var(--intemporris-accent-podcast, #3b6fd4);
}

#abs-nouveautes-panneau-fictions {
	--intemporris-or: var(--intemporris-accent-fiction, #7c4dea);
}

/* Nouveautés : mise en avant
   ======================================================================= */

/* La mise en avant est la même dalle que celle du catalogue : la couverture
   à gauche, le surtitre et le texte à droite, la lumière posée au pied. Le
   bloc du corps s'efface de la mise en page pour que ses parties se placent
   une à une dans la grille. */
.abs-nouveautes .abs-avant {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	/* La couverture mise en avant reste plus grande que celles de la grille :
	   c'est ce qui dit qu'elle est mise en avant. */
	grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	column-gap: var(--discovery-space-10, 2.5rem);
	row-gap: var(--discovery-space-3, 0.75rem);
	margin: 0 0 var(--discovery-space-12, 3rem);
	padding: var(--discovery-space-8, 2rem);
	border: 1px solid color-mix(in srgb, var(--discovery-color-text, #ffffff) 10%, transparent);
	border-radius: var(--intemporris-rayon, 0.5rem);
	background: linear-gradient(180deg, var(--intemporris-dalle-haut), var(--intemporris-dalle-bas) 45%, var(--intemporris-dalle-bas));
	background-color: var(--discovery-color-surface, #141414);
	box-shadow:
		inset 1px 1px 0 var(--intemporris-biseau-clair),
		inset -1px -1px 0 var(--intemporris-biseau-sombre),
		inset 0 0 var(--discovery-space-12, 3rem) var(--intemporris-creux);
}

/* Une mise en avant sans couverture — c'est le cas des podcasts — ne garde
   pas une colonne vide : elle revient à une seule colonne. */
.abs-nouveautes .abs-avant:not(:has(.abs-avant-image)) {
	grid-template-columns: minmax(0, 1fr);
}

.abs-nouveautes .abs-avant:not(:has(.abs-avant-image)) :is(.abs-avant-surtitre, .abs-avant-texte) {
	grid-column: 1;
}

/* Le souffle : une lumière posée derrière la couverture. Elle ne bouge pas.
   Rien ne tourne au repos. */
.abs-nouveautes .abs-avant::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0;
	background:
		radial-gradient(ellipse 72% 90% at 6% 110%, var(--intemporris-souffle-a), transparent 74%),
		radial-gradient(ellipse 65% 60% at 42% 92%, var(--intemporris-souffle-b), transparent 76%),
		radial-gradient(ellipse 52% 76% at 90% 70%, var(--intemporris-souffle-c), transparent 76%);
	filter: blur(var(--intemporris-souffle-flou, 2rem));
	opacity: 0.8;
	pointer-events: none;
}

/* L'éclat traverse la dalle en biais, seulement quand la main vient dessus
   ou qu'un de ses liens reçoit le focus. Il ne joue pas à l'ouverture : la
   page en porte trois, une par onglet. */
.abs-nouveautes .abs-avant::after {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0;
	background: linear-gradient(104deg, transparent 38%, var(--intemporris-eclat-clair) 47%, var(--intemporris-eclat-or) 50%, var(--intemporris-eclat-clair) 53%, transparent 62%);
	transform: translateX(110%);
	pointer-events: none;
}

.abs-nouveautes .abs-avant:hover::after,
.abs-nouveautes .abs-avant:has(:focus-visible)::after {
	animation: intemporris-eclat-passage 6s ease-in-out 1 backwards;
}

.abs-nouveautes .abs-avant-corps {
	display: contents;
}

.abs-nouveautes .abs-avant-image {
	position: relative;
	z-index: 1;
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: center;
}

/* Les couvertures sont l'œuvre de la maison : elles se montrent entières,
   jamais recadrées ni voilées. */
.abs-nouveautes .abs-avant-couverture {
	inline-size: 100%;
	block-size: auto;
	object-fit: contain;
	border-radius: var(--intemporris-rayon, 0.5rem);
	background-color: var(--discovery-color-surface, #141414);
	box-shadow:
		var(--intemporris-portee, 0 1.25rem 2.5rem -1rem) var(--intemporris-ombre, rgb(0 0 0 / 0.45)),
		0 0 var(--discovery-space-10, 2.5rem) var(--intemporris-halo);
}

.abs-nouveautes .abs-avant-surtitre {
	position: relative;
	z-index: 1;
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	display: flex;
	align-items: center;
	gap: var(--discovery-space-3, 0.75rem);
	margin: 0;
	font-size: var(--discovery-text-xs, 0.75rem);
	letter-spacing: var(--intemporris-approche-etiquette, 0.1em);
	text-transform: uppercase;
	color: var(--intemporris-accent-texte, #d2b177);
}

.abs-nouveautes .abs-avant-surtitre::before {
	content: "";
	flex: none;
	inline-size: var(--discovery-space-8, 2rem);
	block-size: var(--intemporris-filet-epaisseur, 1.5px);
	background-color: var(--intemporris-accent, #946a1f);
	box-shadow: 0 0 var(--discovery-space-2, 0.5rem) var(--intemporris-halo);
}

.abs-nouveautes .abs-avant-texte {
	position: relative;
	z-index: 1;
	grid-column: 2;
	grid-row: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--discovery-space-4, 1rem);
}

.abs-nouveautes .abs-avant-titre {
	margin: 0;
	font-size: var(--discovery-text-3xl, 2rem);
	letter-spacing: var(--intemporris-approche-titre, -0.025em);
	line-height: 1.05;
	text-wrap: balance;
}

.abs-nouveautes :is(.abs-avant-titre, .abs-avant-role) a {
	color: var(--discovery-color-text, #ffffff);
	text-decoration-line: underline;
	text-decoration-color: var(--intemporris-filet-accent, rgb(148 106 31 / 0.45));
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: text-decoration-color var(--intemporris-duree, 240ms);
}

.abs-nouveautes .abs-avant-titre a {
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
}

.abs-nouveautes :is(.abs-avant-titre, .abs-avant-role) a:hover,
.abs-nouveautes :is(.abs-avant-titre, .abs-avant-role) a:focus-visible {
	text-decoration-color: var(--intemporris-accent, #946a1f);
}

.abs-nouveautes .abs-avant-personnes {
	display: grid;
	gap: var(--discovery-space-1, 0.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.abs-nouveautes .abs-avant-role {
	margin: 0;
	color: var(--discovery-color-muted, #b3b3b3);
}

.abs-nouveautes .abs-avant-role-libelle {
	color: var(--discovery-color-muted, #b3b3b3);
}

.abs-nouveautes .abs-avant-resume {
	margin: 0;
	max-inline-size: 46ch;
	line-height: var(--discovery-line-relaxed, 1.7);
	color: var(--discovery-color-muted, #b3b3b3);
}

.abs-nouveautes .abs-avant-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--discovery-space-3, 0.75rem);
	margin: var(--discovery-space-2, 0.5rem) 0 0;
}

/* Le bouton mène à la fiche : du verre sombre tenu par un bord bronze, la
   lumière endormie à gauche qui traverse au passage de la main. La commande
   d'écoute qui l'accompagne appartient au lecteur Galactique et garde
   l'habillage de son design. */
.abs-nouveautes .abs-avant-actions .abs-bouton {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	min-block-size: var(--intemporris-cible, 2.75rem);
	padding: 0 var(--discovery-space-6, 1.5rem);
	border: 1px solid var(--intemporris-verre-bord-bouton);
	border-radius: var(--intemporris-rond, 9999px);
	background:
		linear-gradient(180deg, var(--intemporris-verre-reflet), transparent 45%),
		var(--intemporris-verre-bouton);
	color: var(--discovery-color-text, #ffffff);
	font-size: var(--discovery-text-sm, 0.875rem);
	font-weight: var(--discovery-weight-semibold, 600);
	text-decoration: none;
	backdrop-filter: blur(var(--intemporris-verre-flou, 0.5rem)) saturate(1.05);
	box-shadow:
		inset 0 1px 0 var(--intemporris-verre-reflet),
		0 0 var(--discovery-space-6, 1.5rem) var(--intemporris-verre-halo-bouton);
	transition:
		border-color var(--intemporris-duree, 240ms),
		box-shadow var(--intemporris-duree, 240ms);
}

.abs-nouveautes .abs-avant-actions .abs-bouton::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block: -50%;
	inset-inline-start: -14%;
	inline-size: 50%;
	background: radial-gradient(closest-side, var(--intemporris-verre-lueur), transparent 74%);
	filter: blur(0.4rem);
	opacity: 0.9;
	transform: translateX(0);
	transition:
		transform 900ms ease-in-out,
		opacity var(--intemporris-duree, 240ms);
	pointer-events: none;
}

.abs-nouveautes .abs-avant-actions .abs-bouton:hover,
.abs-nouveautes .abs-avant-actions .abs-bouton:focus-visible {
	border-color: var(--intemporris-verre-bord-vif);
	box-shadow:
		inset 0 1px 0 var(--intemporris-verre-reflet),
		0 0 var(--discovery-space-8, 2rem) var(--intemporris-verre-halo-vif);
}

.abs-nouveautes .abs-avant-actions .abs-bouton:hover::before,
.abs-nouveautes .abs-avant-actions .abs-bouton:focus-visible::before {
	transform: translateX(165%);
	opacity: 1;
}

/* Téléphone
   ======================================================================= */

/* Sous 48 rem la mise en avant s'empile : la couverture, puis le texte, le
   bouton en pleine largeur. Aucune colonne ne se comprime. */
@media (max-width: 48rem) {

	/* Les libellés sont longs : la rangée devient une pile, chaque onglet
	   occupant toute la largeur. Les onglets gardent leur pilule, le rail
	   ses coins doux. */
	.abs-nouveautes .abs-nouveautes-onglets {
		flex-direction: column;
		inline-size: 100%;
	}

	.abs-nouveautes .abs-nouveautes-onglet {
		inline-size: 100%;
		text-align: start;
	}

	.abs-nouveautes .abs-avant {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto;
		row-gap: var(--discovery-space-5, 1.25rem);
		padding: var(--discovery-space-6, 1.5rem);
	}

	.abs-nouveautes .abs-avant-image {
		grid-column: 1;
		grid-row: 2;
		justify-self: center;
		max-inline-size: 13rem;
	}

	.abs-nouveautes :is(.abs-avant-surtitre, .abs-avant-texte) {
		grid-column: 1;
	}

	.abs-nouveautes .abs-avant-surtitre {
		grid-row: 1;
	}

	.abs-nouveautes .abs-avant-texte {
		grid-row: 3;
	}

	/* Le bloc de texte cesse de se serrer sur son contenu : ses parties
	   prennent la largeur de la dalle. */
	.abs-nouveautes .abs-avant-texte {
		align-items: stretch;
	}

	/* Les commandes s'empilent. La largeur est donnée par la colonne, jamais
	   par une base de 100 % : dans une colonne, cette base vaut la hauteur,
	   et les boutons repartiraient en deuxième colonne, hors de la dalle. */
	.abs-nouveautes .abs-avant-actions {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		align-self: stretch;
	}

	.abs-nouveautes .abs-avant-actions .abs-bouton {
		inline-size: 100%;
		justify-content: center;
	}

	.home .discovery-entry-content {
		margin-block-end: var(--discovery-space-12, 3rem);
	}
}

/* Mouvement et contraste
   ======================================================================= */

/* Qui demande moins de mouvement n'en reçoit aucun : la lumière du bouton se
   pose sans traverser, l'éclat ne passe pas. */
@media (prefers-reduced-motion: reduce) {

	.abs-nouveautes .abs-avant:hover::after,
	.abs-nouveautes .abs-avant:has(:focus-visible)::after {
		animation: none;
	}

	.abs-nouveautes .abs-avant-actions .abs-bouton::before {
		transition: opacity var(--intemporris-duree, 240ms);
	}

	.abs-nouveautes .abs-avant-actions .abs-bouton:hover::before,
	.abs-nouveautes .abs-avant-actions .abs-bouton:focus-visible::before {
		transform: translateX(0);
	}
}

/* Qui demande plus de contraste reçoit des bords francs et pas de matière. */
@media (prefers-contrast: more) {

	.abs-nouveautes .abs-avant {
		background: var(--discovery-color-surface, #141414);
		border-color: var(--discovery-color-muted, #b3b3b3);
		box-shadow: none;
	}

	.abs-nouveautes .abs-avant::before,
	.abs-nouveautes .abs-avant::after {
		display: none;
	}

	.abs-nouveautes .abs-avant-actions .abs-bouton {
		background: var(--discovery-color-surface, #141414);
		border-color: var(--discovery-color-text, #ffffff);
		box-shadow: none;
		backdrop-filter: none;
	}

	.abs-nouveautes .abs-avant-actions .abs-bouton::before {
		display: none;
	}
}