/**
 * Fichier : intemporris-actualites.css
 * Emplacement : designs/intemporris/assets/css/intemporris-actualites.css
 *
 * Responsabilité :
 * Habillage des actualités : la liste des publications, les archives par
 * catégorie ou par étiquette, et la page d'un article.
 *
 * Voix de la page :
 *   Les actualités ne sont pas un domaine : ni livre audio, ni podcast, ni
 *   fiction. Elles ne portent donc pas d'or, mais l'ardoise de l'enveloppe du
 *   site — le même bleu tiré vers le gris que l'en-tête et le pied.
 *
 * Ce qui tient la page :
 *   Du texte, et rien d'autre : ces pages n'ont ni vignette ni illustration.
 *   La hiérarchie vient donc de la typographie et de la respiration. La liste
 *   est une liste, pas une grille de cartes : un filet bleu-gris sépare deux
 *   publications, dense à gauche et perdu vers la droite — le même geste que
 *   le filet posé sous le titre de la page.
 *
 * La matière du fond :
 *   Une nuit presque noire, #030508, sur laquelle monte une brume bleue
 *   irrégulière : des zones denses, un creux sombre qui la traverse, de
 *   grandes zones de nuit. Elle ne dépasse jamais 26 sur 255 : la page reste
 *   sombre, et aucun contraste de texte n'est réduit.
 *
 *   Cette brume est une IMAGE, calculée une fois hors du site et répétée
 *   verticalement sans couture — background-size: 100% 3600px. Rien n'est
 *   calculé par le navigateur. Deux motifs : sur la liste la brume serpente
 *   d'un bord à l'autre au fil de la page ; sur un article elle se tient
 *   dans les deux marges, de part et d'autre du texte centré, en miroir.
 *
 *   Un masque l'éteint avant l'en-tête et avant le pied, pour qu'aucune
 *   coupure n'apparaisse à ces deux jonctions.
 *
 * La lumière du lecteur :
 *   Rien ne bouge au repos. Au survol d'une publication — ou quand un de ses
 *   liens reçoit le focus — une lumière monte À L'INTÉRIEUR de sa boîte et
 *   s'arrête à ses limites : un masque elliptique éteint ses bords avant les
 *   arêtes, si bien qu'aucun rectangle n'apparaît. Les deux filets qui
 *   encadrent la publication reçoivent en même temps un renflement de
 *   lumière.
 *
 *   La position de ce renflement vient de --intemporris-lueur-x. Sans le
 *   script des séparateurs, le jeton n'existe pas : le renflement se pose
 *   alors à un tiers de la ligne, et la page garde tout son sens.
 *
 * Mesure de lecture :
 *   Une ligne qui traverse les 1360 pixels du document ne se lit pas. Les
 *   accroches de la liste sont tenues à 60 caractères. Le corps d'un article
 *   est centré, comme partout ailleurs sur le site, et mesure 46 rem : cette
 *   feuille reprend pour cela la borne que le thème pose sur chaque bloc,
 *   afin que la colonne décide seule de sa largeur. Les blocs faits pour
 *   déborder — alignés larges ou pleine page — gardent leur liberté.
 *
 * Ce qui n'est pas touché :
 *   Le contenu vient des blocs de l'éditeur et du fil éditorial : cette
 *   feuille ne travaille que la colonne, le rythme et la matière. Aucun
 *   élément n'est réordonné ni masqué, aucun gabarit n'est remplacé.
 *
 *   La zone des commentaires n'est pas habillée. Elle n'apparaît pas sur les
 *   articles aujourd'hui, et elle demande un accord qui n'a pas été donné.
 *
 * Accessibilité : WCAG 2.1 niveau AA strict.
 *   Ordre de lecture inchangé, cibles de 2,75 rem, contours de focus du thème
 *   conservés. Au repos rien ne bouge, et aucune variation n'est rapide :
 *   il n'y a de clignotement nulle part. Le focus au clavier déclenche
 *   exactement la même lumière que la souris. Sous prefers-reduced-motion,
 *   les transitions sont désactivées : les états restent, le mouvement
 *   disparaît.
 *
 * @package Intemporris
 * @since   1.1.0
 */

/* Matière des actualités
   ======================================================================= */

:is(.blog, .category, .tag, .single-post) .discovery-main {
	--intemporris-abs: var(--intemporris-bleu-site, #3a5cab);
	--intemporris-ardoise: color-mix(in srgb, var(--intemporris-abs) 30%, #7e8693);

	--intemporris-verre: color-mix(in srgb, var(--intemporris-ardoise) 13%, var(--discovery-color-background, #000000));
	--intemporris-verre-clair: color-mix(in srgb, var(--intemporris-ardoise) 22%, var(--discovery-color-background, #000000));
	--intemporris-bord: color-mix(in srgb, var(--intemporris-ardoise) 34%, transparent);
	--intemporris-lueur: color-mix(in srgb, var(--intemporris-abs) 42%, transparent);
	--intemporris-halo: color-mix(in srgb, var(--intemporris-ardoise) 12%, transparent);

	--intemporris-filet: color-mix(in srgb, var(--discovery-color-text, #ffffff) 12%, transparent);
	--intemporris-filet-pale: color-mix(in srgb, var(--discovery-color-text, #ffffff) 7%, 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;

	/* La colonne de lecture : celle d'un article, et celle d'une accroche. */
	--intemporris-colonne: 40rem;
	--intemporris-mesure: 60ch;

	/* La place de l'image : une publication en a une, ou aura la sienne. */
	--intemporris-vignette: minmax(0, 18rem);
	--intemporris-forme-vignette: 3 / 2;

}

/* Fond des pages
   ======================================================================= */

/* Le fond n'est pas noir : c'est une matière sombre sur laquelle une lumière
   se pose — du métal mat plutôt qu'un aplat. Deux choses la composent, et
   les deux sont toujours là :

     les REFLETS : de larges coulées douces, aux formes inégales, qui
     traversent la page en biais. Ce sont elles qui portent la lumière ;
     aucune n'a de bord franc, aucune n'est une ligne.

     le GRAIN : des particules claires posées par-dessus, dont la densité
     suit les reflets — dense là où la lumière tombe, rare dans l'ombre.

   La couche appartient à la PAGE et défile avec elle. Rien ne bouge : le
   mouvement est dans la forme des coulées, pas dans le temps. */

:is(.blog, .category, .tag, .single-post) {
	/* La présence d'ensemble : une valeur par famille de pages. */

	/* La lumière : de l'ardoise tirée vers le blanc, pour exister sur le noir. */

	/* Le séparateur entre publications et le détail — date, tiret des
	   catégories. Chaque ambiance peut les teinter ; par défaut, l'ardoise. */
	--intemporris-separateur: color-mix(in srgb, color-mix(in srgb, var(--intemporris-bleu-site, #3a5cab) 30%, #7e8693) 72%, transparent);
	--intemporris-detail: color-mix(in srgb, color-mix(in srgb, var(--intemporris-bleu-site, #3a5cab) 30%, #7e8693) 80%, #ffffff);

	/* La nuit du site : celle de l'en-tête et du pied. La page se pose sur la
	   même, pour qu'aucune couture n'apparaisse entre les bandes et le corps. */
	--intemporris-nuit-site: color-mix(in srgb, color-mix(in srgb, var(--intemporris-bleu-site, #3a5cab) 30%, #7e8693) 6%, var(--discovery-color-background, #000000));

	/* Le fondu de la page : la matière naît lentement sous l'en-tête et
	   s'éteint lentement avant le pied. Ses paliers suivent une courbe, pas une
	   droite : une montée linéaire se voit comme un bord. */

	/* Le plancher du grain : la part qui subsiste dans l'ombre. */

	/* Deux bruits au choix. Le premier est fait de particules détachées — on
	   distingue chaque grain. Le second est un brouillard : un bruit fin et
	   continu, sans seuil, qui donne une matière plutôt que des points. */
}

/* --- Ambiance J bis : la brume bleue, sans script. ----------------------
   Le même fond, mais calculé une seule fois chez nous et livré en image.
   Les périodes des sinus ont été ajustées pour qu'elles divisent la hauteur
   du motif : l'image se répète verticalement sans couture, et le CSS seul
   habille une page de n'importe quelle longueur.

   L'image est étirée à 100 % de la largeur, ce qui est exact : le calcul
   d'origine raisonne déjà en largeur relative. L'atténuation le long de la
   page et les jonctions avec l'en-tête et le pied sont faites par un masque,
   qui les rend mieux qu'une image.

   Deux différences honnêtes avec la version calculée : le motif se répète
   tous les 3600 pixels (invisible dans une page de blog, qui en fait
   rarement plus), et le grain de ± 0,45 n'est pas dans l'image — il était
   de toute façon sous le seuil du visible. */

:is(.blog, .category, .tag, .single-post) {
	--intemporris-nuit-site: #030508;
	--intemporris-separateur: color-mix(in srgb, #8ba5c1 62%, transparent);
	--intemporris-detail: color-mix(in srgb, #8ba5c1 55%, #ffffff);
}

.single-post .discovery-main {
	/* La mesure retenue : des lignes plus longues, qui occupent la page
	   plutôt que de la laisser respirer sur les côtés. */
	--intemporris-colonne: 46rem;
}

:is(.blog, .category, .tag, .single-post) .discovery-content-area::before {
	content: "";
	position: absolute;
	z-index: -2;
	inset: 0;
	pointer-events: none;
	background-image: url("../images/intemporris-brume-liste.png");
	background-repeat: repeat-y;
	background-size: 100% 3600px;
	background-position: 0 0;
	mask-image: linear-gradient(to bottom, transparent 0, #000 360px, #000 calc(100% - 440px), transparent 100%);
}

/* Sous un article : l'autre motif, celui dont la brume se tient dans la
   marge droite, et une atténuation qui descend avec la lecture. */

.single-post .discovery-content-area::before {
	background-image: url("../images/intemporris-brume-article.png");
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		#000 340px,
		rgb(0 0 0 / 0.55) 1100px,
		rgb(0 0 0 / 0.34) 2000px,
		rgb(0 0 0 / 0.3) calc(100% - 440px),
		transparent 100%
	);
}

/* Sous un article, la matière est tenue plus bas : on doit la sentir sans
   jamais la regarder. */

.single-post {
}

/* La page porte sa matière : le corps sert de repère aux deux couches, qui
   couvrent toute sa hauteur et non le seul écran. */

body:is(.blog, .category, .tag, .single-post) {
	position: relative;
	background-color: var(--intemporris-nuit-site);
}

/* Fil d'ariane
   ======================================================================= */

/* Le chemin se lit, il ne se regarde pas : petit, en couleur secondaire, et
   posé assez haut pour ne pas peser sur le titre. */

:is(.blog, .category, .tag, .single-post) .discovery-fil-ariane {
	margin: 0 0 var(--discovery-space-8, 2rem);
	font-size: var(--discovery-text-sm, 0.875rem);
	color: var(--discovery-color-muted, #b3b3b3);
}

:is(.blog, .category, .tag, .single-post) .discovery-fil-ariane a {
	color: inherit;
	text-decoration-color: var(--intemporris-filet);
	text-underline-offset: 0.2em;
	transition: color var(--intemporris-duree), text-decoration-color var(--intemporris-duree);
}

:is(.blog, .category, .tag, .single-post) .discovery-fil-ariane a:hover,
:is(.blog, .category, .tag, .single-post) .discovery-fil-ariane a:focus-visible {
	color: var(--discovery-color-text, #ffffff);
	text-decoration-color: var(--intemporris-bord);
}

/* En-tête d'archive
   ======================================================================= */

/* Le filet d'entrée : le même geste que sur les archives des livres audio,
   des podcasts et des fictions — une ligne qui part dense à gauche et se
   perd vers la droite, avec son halo. Ici en ardoise, le blog n'étant pas un
   domaine. */

:is(.blog, .category, .tag) .discovery-archive-header {
	position: relative;
	margin: 0 0 var(--discovery-space-8, 2rem);
	padding-block-end: var(--discovery-space-5, 1.25rem);
}

:is(.blog, .category, .tag) .discovery-archive-header::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 1.5px;
	background: linear-gradient(90deg, var(--intemporris-ardoise), var(--intemporris-bord) 40%, transparent 85%);
	box-shadow: 0 0 var(--discovery-space-3, 0.75rem) var(--intemporris-halo);
}

:is(.blog, .category, .tag) .discovery-archive-title {
	margin: 0;
	font-size: clamp(1.75rem, 1.1rem + 2vw, 2.5rem);
	letter-spacing: var(--intemporris-approche-titre);
	line-height: 1.1;
	text-wrap: balance;
}

:is(.blog, .category, .tag) .discovery-archive-description,
:is(.blog, .category, .tag) .discovery-archive-introduction {
	max-inline-size: var(--intemporris-mesure);
	margin: var(--discovery-space-4, 1rem) 0 0;
	color: var(--discovery-color-muted, #b3b3b3);
	line-height: var(--discovery-line-relaxed, 1.7);
}

/* Barre de vues
   ======================================================================= */

/* Un rail à coins doux qui tient des onglets en pilule — la même forme que
   la rangée des nouveautés. Le rail n'est pas une pilule lui-même : les
   libellés sont longs et passeraient à la ligne dans une ellipse. */

:is(.blog, .category, .tag) .discovery-vues {
	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-6, 1.5rem);
	padding: var(--discovery-space-1, 0.25rem);
	border: 1px solid var(--intemporris-filet);
	border-radius: calc(var(--intemporris-rayon) + var(--discovery-space-2, 0.5rem));
	background-color: var(--discovery-color-surface, #141414);
	list-style: none;
}

:is(.blog, .category, .tag) .discovery-vue {
	margin: 0;
}

/* Trois degrés, comme dans l'en-tête du site : éteint au repos, verre clair
   sans couleur au survol, lumière bleue sous le libellé pour la vue courante.
   La couleur ne remplit jamais l'onglet. */

:is(.blog, .category, .tag) .discovery-vues .discovery-tab {
	position: relative;
	min-block-size: var(--intemporris-cible);
	padding: var(--discovery-space-2, 0.5rem) var(--discovery-space-5, 1.25rem);
	border: 1px solid transparent;
	border-block-end-width: 1px;
	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(.blog, .category, .tag) .discovery-vues .discovery-tab:hover {
	border-color: var(--intemporris-bord);
	background-color: var(--intemporris-verre);
	color: var(--discovery-color-text, #ffffff);
}

:is(.blog, .category, .tag) .discovery-vues .discovery-tab[aria-selected="true"] {
	border-color: var(--intemporris-bord);
	background-color: var(--intemporris-verre-clair);
	color: var(--discovery-color-text, #ffffff);
}

/* La lumière bleue naît sous le libellé de la vue courante, jamais derrière
   lui : le mot reste lisible sur la nuit. */

:is(.blog, .category, .tag) .discovery-vues .discovery-tab[aria-selected="true"]::after {
	content: "";
	position: absolute;
	inset-block-end: 0.35rem;
	inset-inline: 30%;
	block-size: 2px;
	border-radius: var(--intemporris-rond);
	background: linear-gradient(90deg, transparent, var(--intemporris-lueur), transparent);
}

/* Tri et décompte
   ======================================================================= */

/* Le tri tient dans une seule pilule : l'étiquette au-dessus, la liste et son
   bouton soudés dessous — la forme employée par les filtres du catalogue. */

:is(.blog, .category, .tag) .discovery-archive-tri {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0;
	inline-size: fit-content;
	max-inline-size: 100%;
	margin: 0 0 var(--discovery-space-4, 1rem);
}

:is(.blog, .category, .tag) .discovery-archive-tri::before {
	content: "";
	grid-row: 2;
	grid-column: 1 / -1;
	z-index: -1;
	align-self: stretch;
	border: 1px solid var(--intemporris-filet);
	border-radius: var(--intemporris-rond);
	background-color: var(--discovery-color-surface, #141414);
}

:is(.blog, .category, .tag) .discovery-archive-tri label {
	grid-row: 1;
	grid-column: 1 / -1;
	flex: none;
	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;
}

/* La liste perd la flèche du navigateur et reçoit un chevron tracé dans la
   couleur du texte. */

:is(.blog, .category, .tag) .discovery-archive-tri select {
	grid-row: 2;
	grid-column: 1;
	appearance: none;
	min-inline-size: 12rem;
	min-block-size: var(--intemporris-cible);
	padding-block: 0;
	padding-inline: var(--discovery-space-4, 1rem) var(--discovery-space-8, 2rem);
	border: 0;
	background-color: transparent;
	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(.blog, .category, .tag) .discovery-archive-tri .discovery-bouton {
	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-bord);
	border-radius: var(--intemporris-rond);
	background-color: var(--intemporris-verre);
	color: var(--discovery-color-text, #ffffff);
	font-size: var(--discovery-text-sm, 0.875rem);
	font-weight: var(--discovery-weight-semibold, 600);
	transition: background-color var(--intemporris-duree), border-color var(--intemporris-duree);
}

:is(.blog, .category, .tag) .discovery-archive-tri .discovery-bouton:hover {
	border-color: var(--intemporris-lueur);
	background-color: var(--intemporris-verre-clair);
}

:is(.blog, .category, .tag) .discovery-archive-decompte {
	margin: 0 0 var(--discovery-space-8, 2rem);
	font-size: var(--discovery-text-sm, 0.875rem);
	font-variant-numeric: tabular-nums;
	color: var(--discovery-color-muted, #b3b3b3);
}

/* Liste des publications
   ======================================================================= */

/* Une liste, pas une grille de cartes : rien n'entoure une publication, un
   filet très pâle la sépare de la suivante, et la respiration fait le reste.
   La colonne est tenue à la mesure de lecture. */

:is(.blog, .category, .tag) .discovery-posts {
	display: flex;
	flex-direction: column;
	max-inline-size: 68rem;
}

:is(.blog, .category, .tag) .discovery-posts > .discovery-entry {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: var(--discovery-space-8, 2rem);
	row-gap: var(--discovery-space-3, 0.75rem);
	align-items: start;
	padding-block: var(--discovery-space-8, 2rem);
	border-block-start: 1px solid var(--intemporris-filet-pale);
}

:is(.blog, .category, .tag) .discovery-posts > .discovery-entry:first-child {
	padding-block-start: 0;
}

/* Le séparateur n'est plus un filet pâle : c'est le même geste que la ligne
   sous le titre de la page — dense à gauche, perdu vers la droite. */

:is(.blog, .category, .tag) .discovery-posts > .discovery-entry {
	position: relative;
	border-block-start: 0;
}

:is(.blog, .category, .tag) .discovery-posts > .discovery-entry + .discovery-entry::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	block-size: 1px;
	background: linear-gradient(90deg, var(--intemporris-separateur), color-mix(in srgb, var(--intemporris-separateur) 45%, transparent) 55%, transparent 92%);
	pointer-events: none;
}

/* Une publication qui porte une image devient une rangée : l'image à gauche,
   le texte à droite. Sans image, rien n'est réservé — pas de colonne vide, et
   le texte reprend toute la largeur. Le balisage n'est pas touché : c'est la
   grille qui place, et le lien de l'image est déjà hors du parcours clavier
   (tabindex -1 posé par le thème). */

:is(.blog, .category, .tag) .discovery-posts > .discovery-entry:has(.discovery-post-thumbnail) {
	grid-template-columns: var(--intemporris-vignette) minmax(0, 1fr);
}

:is(.blog, .category, .tag) .discovery-posts > .discovery-entry:has(.discovery-post-thumbnail) > :not(.discovery-post-thumbnail) {
	grid-column: 2;
}

/* L'image d'une publication : elle occupe la première colonne sur toute la
   hauteur de la rangée. */

:is(.blog, .category, .tag) .discovery-post-thumbnail {
	grid-column: 1;
	grid-row: 1 / span 20;
	margin: 0;
	align-self: stretch;
}

:is(.blog, .category, .tag) .discovery-post-thumbnail img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: var(--intemporris-forme-vignette);
	object-fit: cover;
	border-radius: var(--intemporris-rayon);
	border: 1px solid var(--intemporris-filet-pale);
}

:is(.blog, .category, .tag) .discovery-entry-header {
	margin: 0 0 var(--discovery-space-3, 0.75rem);
}

:is(.blog, .category, .tag) .discovery-entry-title {
	margin: 0;
	font-size: clamp(1.5rem, 1.1rem + 1.1vw, 1.95rem);
	letter-spacing: var(--intemporris-approche-titre);
	line-height: var(--discovery-line-tight, 1.2);
	text-wrap: balance;
}

/* Le titre est un lien : son filet s'allume au passage, il n'est pas souligné
   au repos — une liste soulignée de bout en bout devient un treillis. */

:is(.blog, .category, .tag) .discovery-entry-title a {
	color: var(--discovery-color-text, #ffffff);
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
	transition: text-decoration-color var(--intemporris-duree);
}

:is(.blog, .category, .tag) .discovery-entry-title a:hover,
:is(.blog, .category, .tag) .discovery-entry-title a:focus-visible {
	text-decoration-color: var(--intemporris-bord);
}

/* Les mentions — date, auteur — se rangent sur une ligne, en petit. */

:is(.blog, .category, .tag, .single-post) .discovery-entry-meta-liste {
	display: flex;
	flex-wrap: wrap;
	gap: var(--discovery-space-2, 0.5rem) var(--discovery-space-5, 1.25rem);
	margin: 0;
	font-size: var(--discovery-text-sm, 0.875rem);
	color: var(--discovery-color-muted, #b3b3b3);
}

:is(.blog, .category, .tag, .single-post) .discovery-entry-meta-donnee {
	display: flex;
	align-items: baseline;
	gap: var(--discovery-space-2, 0.5rem);
	margin: 0;
}

:is(.blog, .category, .tag, .single-post) .discovery-entry-meta-donnee dt {
	letter-spacing: var(--intemporris-approche-etiquette);
	text-transform: uppercase;
	font-size: var(--discovery-text-xs, 0.75rem);
}

:is(.blog, .category, .tag, .single-post) .discovery-entry-meta-donnee dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

/* L'accroche garde la mesure de lecture, quelle que soit la largeur, et
   commence au même bord que le titre : le thème la centre dans sa colonne,
   ce qui décalait le texte vers la droite. */

:is(.blog, .category, .tag) .discovery-posts .discovery-entry-content {
	max-inline-size: var(--intemporris-mesure);
	margin-inline: 0;
	color: var(--discovery-color-muted, #b3b3b3);
	line-height: var(--discovery-line-relaxed, 1.7);
}

:is(.blog, .category, .tag) .discovery-posts .discovery-entry-content p {
	margin: 0;
}

/* « Lire la suite » : du verre d'ardoise, un bord qui s'éclaire au passage. */

:is(.blog, .category, .tag) .discovery-more-link {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--intemporris-cible);
	margin-block-start: var(--discovery-space-4, 1rem);
	padding: 0 var(--discovery-space-5, 1.25rem);
	border: 1px solid var(--intemporris-bord);
	border-radius: var(--intemporris-rond);
	background-color: var(--intemporris-verre);
	color: var(--discovery-color-text, #ffffff);
	font-size: var(--discovery-text-sm, 0.875rem);
	text-decoration: none;
	transition:
		background-color var(--intemporris-duree),
		border-color var(--intemporris-duree),
		box-shadow var(--intemporris-duree);
}

:is(.blog, .category, .tag) .discovery-more-link:hover,
:is(.blog, .category, .tag) .discovery-more-link:focus-visible {
	border-color: var(--intemporris-lueur);
	background-color: var(--intemporris-verre-clair);
	box-shadow: 0 0 var(--discovery-space-6, 1.5rem) var(--intemporris-halo);
}

/* Catégories et étiquettes : du texte, précédé d'un filet, jamais des pastilles
   — ce sont des mentions, pas des actions. */

:is(.blog, .category, .tag, .single-post) .discovery-entry-taxonomy {
	display: flex;
	flex-wrap: wrap;
	gap: var(--discovery-space-2, 0.5rem) var(--discovery-space-6, 1.5rem);
	margin-block-start: var(--discovery-space-4, 1rem);
	font-size: var(--discovery-text-sm, 0.875rem);
	color: var(--discovery-color-muted, #b3b3b3);
}

:is(.blog, .category, .tag, .single-post) :is(.discovery-entry-categories, .discovery-entry-tags) {
	display: flex;
	align-items: center;
	gap: var(--discovery-space-3, 0.75rem);
	margin: 0;
}

:is(.blog, .category, .tag, .single-post) :is(.discovery-entry-categories, .discovery-entry-tags)::before {
	content: "";
	flex: none;
	inline-size: var(--discovery-space-5, 1.25rem);
	block-size: 1px;
	background-color: var(--intemporris-detail);
}

:is(.blog, .category, .tag, .single-post) .discovery-entry-meta-date dd {
	color: var(--intemporris-detail);
}

:is(.blog, .category, .tag, .single-post) .discovery-entry-taxonomy a {
	color: inherit;
	text-decoration-color: var(--intemporris-filet);
	text-underline-offset: 0.2em;
	transition: color var(--intemporris-duree), text-decoration-color var(--intemporris-duree);
}

:is(.blog, .category, .tag, .single-post) .discovery-entry-taxonomy a:hover,
:is(.blog, .category, .tag, .single-post) .discovery-entry-taxonomy a:focus-visible {
	color: var(--discovery-color-text, #ffffff);
	text-decoration-color: var(--intemporris-bord);
}

/* Lumière du lecteur
   ======================================================================= */

/* La zone de contenu sert de repère aux deux couches : c'est elle que les
   scripts mesurent, c'est à elle qu'ils s'accrochent. L'isolement garde la
   toile du fond et la lueur à l'intérieur de la zone, sous le texte et
   au-dessus de la nuit de la page. */

:is(.blog, .category, .tag, .single-post) .discovery-content-area {
	position: relative;
	isolation: isolate;
}

/* Sur une description, la lumière éclaircit très légèrement le texte — elle
   ne le floute pas et ne change pas sa graisse. */

:is(.blog, .category, .tag, .single-post) :is(.discovery-entry, .discovery-content-area) p {
	transition: color 650ms ease, text-shadow 850ms ease;
}

/* Sur un séparateur, un petit reflet local qui se dissout : le filet se
   rallume à l'endroit exact où la lumière le traverse. */

:is(.blog, .category, .tag) .discovery-posts > .discovery-entry::before {
	transition: background 700ms ease;
}

/* Pour les deux versions de la brume bleue, les nappes générales sont
   remplacées par la lumière confinée ci-dessous : une seule lumière par
   publication, jamais deux. */

:is(.blog, .category, .tag) .discovery-posts > .discovery-entry::after {
	background: none;
	opacity: 0;
}

/* Lumière confinée à la publication — sans aucun script
   ======================================================================= */

/* La lumière ne se promène plus sur toute la page : elle appartient à la
   publication. Quand la main vient sur une publication (ou qu'un de ses
   liens reçoit le focus au clavier), la lumière monte à l'intérieur de sa
   boîte, et nulle part ailleurs — le fond fait déjà son travail.

   Elle est faite de trois nappes qui se recouvrent, d'axes et de tailles
   différents, jamais d'un disque : c'est ce recouvrement qui lui donne une
   forme. Elle monte en sept dixièmes de seconde et se retire en une
   seconde deux — plus lentement qu'elle n'est venue.

   Tout ceci est du CSS : aucun script n'est nécessaire. */

:is(.blog, .category, .tag) .discovery-posts > .discovery-entry,
.single-post .discovery-entry {
	position: relative;
	isolation: isolate;
}

:is(.blog, .category, .tag) .discovery-posts > .discovery-entry::after,
.single-post .discovery-entry::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	inline-size: auto;
	block-size: auto;
	opacity: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 56% 70% at 30% 40%, rgb(78 137 220 / 0.20), transparent 72%),
		radial-gradient(ellipse 34% 88% at 64% 52%, rgb(78 137 220 / 0.11), transparent 76%),
		radial-gradient(ellipse 88% 40% at 24% 74%, rgb(43 91 161 / 0.13), transparent 78%);

	/* La boîte de la publication est un rectangle ; la lumière ne doit pas
	   l'être. Ce masque lui donne une forme ronde et fait mourir ses bords
	   avant d'atteindre les arêtes : aucune délimitation ne se voit, ni en
	   bas contre le séparateur, ni sur les côtés. */
	mask-image: radial-gradient(ellipse 82% 78% at 34% 46%, #000 30%, rgb(0 0 0 / 0.6) 58%, transparent 84%);
	transition: opacity 1200ms ease;
}

:is(.blog, .category, .tag) .discovery-posts > .discovery-entry:is(:hover, :focus-within)::after,
.single-post .discovery-entry:is(:hover, :focus-within)::after {
	opacity: 1;
	transition-duration: 700ms;
}

/* Sous un article, la lumière est tenue plus bas : on y lit. */

.single-post .discovery-entry:is(:hover, :focus-within)::after {
	opacity: 0.58;
}

/* La description s'éclaircit très légèrement sous la lumière — sans être
   floutée, sans changer de graisse. */

.discovery-entry p {
	transition: color 900ms ease;
}

.discovery-entry:is(:hover, :focus-within) p {
	color: color-mix(in srgb, var(--discovery-color-text, #d5d9e0) 82%, #e2eafa);
}

/* Les filets qui encadrent la publication s'éclairent : celui du dessus et
   celui du dessous, d'un renflement de lumière posé sur la ligne.

   Sa position vient de --intemporris-lueur-x. Sans script, ce jeton n'existe
   pas : le renflement se pose alors à un tiers de la ligne et n'en bouge
   plus, ce qui suffit à faire réagir le filet. Avec le petit script des
   séparateurs, le jeton porte l'abscisse du pointeur et la lumière le suit.

   Le filet met un peu plus de temps à s'éteindre qu'à s'allumer : une
   lumière qui se retire lentement se remarque moins qu'une qui claque. */

:is(.blog, .category, .tag) .discovery-posts > .discovery-entry::before {
	transition: background 900ms ease;
}

:is(.blog, .category, .tag) .discovery-posts > .discovery-entry:is(:hover, :focus-within)::before,
:is(.blog, .category, .tag) .discovery-posts > .discovery-entry:is(:hover, :focus-within) + .discovery-entry::before {
	background:
		radial-gradient(ellipse 15rem 1px at var(--intemporris-lueur-x, 34%) 50%, rgb(198 225 255 / 0.9), rgb(126 166 214 / 0.42) 38%, transparent 100%),
		linear-gradient(90deg, color-mix(in srgb, var(--intemporris-separateur) 100%, #a8c4e8), color-mix(in srgb, var(--intemporris-separateur) 55%, transparent) 55%, transparent 92%);
	transition-duration: 320ms;
}

/* Sous le curseur, la lumière suit : elle ne doit pas traîner derrière lui,
   donc elle se pose sans transition — c'est le pointeur qui fait le
   mouvement, pas une animation. */

:is(.blog, .category, .tag) .discovery-posts > .discovery-entry:is(:hover, :focus-within)::before,
:is(.blog, .category, .tag) .discovery-posts > .discovery-entry:is(:hover, :focus-within) + .discovery-entry::before {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
.discovery-entry::after,
.discovery-entry p {
		transition: none;
	}
}

/* Page d'un article
   ======================================================================= */

.single-post .discovery-entry-header {
	max-inline-size: var(--intemporris-colonne);
	margin: 0 0 var(--discovery-space-10, 2.5rem);
}

.single-post .discovery-entry-title {
	margin: 0 0 var(--discovery-space-5, 1.25rem);
	font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.75rem);
	letter-spacing: var(--intemporris-approche-titre);
	line-height: 1.1;
	text-wrap: balance;
}

/* L'image d'une publication, quand il y en a une : elle prend la largeur de
   la colonne de lecture et garde ses proportions — une photo d'article n'est
   pas une couverture, mais rien n'oblige à la recadrer ici. */

.single-post .discovery-post-thumbnail {
	max-inline-size: var(--intemporris-colonne);
	margin: 0 0 var(--discovery-space-8, 2rem);
}

.single-post .discovery-post-thumbnail img {
	inline-size: 100%;
	block-size: auto;
	border: 1px solid var(--intemporris-filet-pale);
	border-radius: var(--intemporris-rayon);
}

/* Le corps de l'article : une colonne, un rythme, rien d'autre. Les blocs de
   l'éditeur gardent leur ordre et leur nature. */

.single-post .discovery-entry-content {
	max-inline-size: var(--intemporris-colonne);
	margin-inline: 0;
	line-height: var(--discovery-line-relaxed, 1.7);
}

.single-post .discovery-entry-content > * {
	margin-block: 0 var(--discovery-space-5, 1.25rem);
}

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

.single-post .discovery-entry-content > :last-child {
	margin-block-end: 0;
}

/* Les titres intérieurs prennent de l'air au-dessus, peu en dessous : ils
   appartiennent à ce qui suit. */

.single-post .discovery-entry-content :is(h2, h3, h4) {
	margin-block: var(--discovery-space-10, 2.5rem) var(--discovery-space-4, 1rem);
	letter-spacing: var(--intemporris-approche-titre);
	line-height: var(--discovery-line-tight, 1.2);
	text-wrap: balance;
}

.single-post .discovery-entry-content h2 {
	font-size: var(--discovery-text-2xl, 1.5rem);
}

.single-post .discovery-entry-content h3 {
	font-size: var(--discovery-text-xl, 1.25rem);
}

.single-post .discovery-entry-content :is(ul, ol) {
	padding-inline-start: var(--discovery-space-6, 1.5rem);
}

.single-post .discovery-entry-content li + li {
	margin-block-start: var(--discovery-space-2, 0.5rem);
}

/* Une citation se tient par un filet et par son retrait, sans guillemet
   dessiné ni fond. */

.single-post .discovery-entry-content blockquote {
	margin-inline: 0;
	padding-inline-start: var(--discovery-space-5, 1.25rem);
	border-inline-start: 2px solid var(--intemporris-bord);
	color: var(--discovery-color-muted, #b3b3b3);
}

/* Une image d'article peut déborder la colonne de lecture : elle garde alors
   la largeur du document, jamais plus. */

.single-post .discovery-entry-content :is(img, figure) {
	max-inline-size: 100%;
	block-size: auto;
	border-radius: var(--intemporris-rayon);
}

.single-post .discovery-entry-content figcaption {
	margin-block-start: var(--discovery-space-2, 0.5rem);
	font-size: var(--discovery-text-sm, 0.875rem);
	color: var(--discovery-color-muted, #b3b3b3);
}

.single-post .discovery-entry-taxonomy {
	max-inline-size: var(--intemporris-colonne);
	margin-block-start: var(--discovery-space-10, 2.5rem);
}

/* Position et mesure de la colonne d'un article
   ======================================================================= */

/* Le thème centre le contenu d'un article ; notre feuille le ramenait à
   gauche. Les deux se tiennent : à gauche, la page a une allure éditoriale
   et la brume occupe la marge droite ; centrée, elle ressemble à ce que fait
   le site partout ailleurs. Le réglage porte sur tous les blocs de
   l'article à la fois — titre, image, corps, catégories — sinon l'un
   flotterait sans les autres. */

.single-post :is(.discovery-entry-header, .discovery-post-thumbnail, .discovery-entry-content, .discovery-entry-taxonomy) {
	margin-inline: auto;
}

/* Le thème borne les blocs d'un article à sa propre mesure de lecture et les
   centre un à un. C'est la colonne qui doit décider, sinon l'élargir n'a
   aucun effet visible. Les blocs qui sont faits pour déborder (alignés
   larges ou pleine page) gardent leur liberté. */

.single-post .discovery-entry-content > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-inline-size: 100%;
	margin-inline: 0;
}

/* Aller au précédent, au suivant
   ======================================================================= */

/* Deux plaques de verre, côte à côte, qui disent où elles mènent. Elles
   s'empilent quand la place manque. */

.single-post .discovery-post-navigation {
	margin-block-start: var(--discovery-space-16, 4rem);
	padding-block-start: var(--discovery-space-8, 2rem);
	border-block-start: 1px solid var(--intemporris-filet-pale);
}

.single-post .discovery-post-navigation .nav-links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--discovery-space-4, 1rem);
}

.single-post .discovery-post-navigation :is(.nav-previous, .nav-next) {
	display: flex;
}

.single-post .discovery-post-navigation a {
	inline-size: 100%;
	padding: var(--discovery-space-5, 1.25rem);
	border: 1px solid var(--intemporris-filet);
	border-radius: var(--intemporris-rayon);
	background-color: var(--intemporris-verre);
	color: var(--discovery-color-text, #ffffff);
	text-decoration: none;
	line-height: var(--discovery-line-tight, 1.2);
	transition:
		border-color var(--intemporris-duree),
		background-color var(--intemporris-duree),
		box-shadow var(--intemporris-duree);
}

.single-post .discovery-post-navigation a:hover,
.single-post .discovery-post-navigation a:focus-visible {
	border-color: var(--intemporris-bord);
	background-color: var(--intemporris-verre-clair);
	box-shadow: 0 0 var(--discovery-space-8, 2rem) var(--intemporris-halo);
}

/* Le suivant s'aligne à droite : la page dit par sa forme où elle mène. */

.single-post .discovery-post-navigation .nav-next {
	justify-content: end;
	text-align: end;
}

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

@media (max-width: 48rem) {
:is(.blog, .category, .tag) .discovery-vues {
		flex-direction: column;
		inline-size: 100%;
	}

:is(.blog, .category, .tag) .discovery-vues .discovery-tab {
		inline-size: 100%;
		text-align: start;
	}

:is(.blog, .category, .tag) .discovery-archive-tri {
		inline-size: 100%;
	}

:is(.blog, .category, .tag) .discovery-more-link {
		inline-size: 100%;
		justify-content: center;
	}

/* La rangée s'empile. L'image — ou la place qui l'attend — reste en tête,
	   comme au bureau où elle occupe la colonne de gauche. */

:is(.blog, .category, .tag) .discovery-posts > .discovery-entry {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--discovery-space-4, 1rem);
	}

:is(.blog, .category, .tag) .discovery-posts > .discovery-entry > :not(.discovery-post-thumbnail) {
		grid-column: 1;
	}

:is(.blog, .category, .tag) .discovery-post-thumbnail {
		grid-column: 1;
		grid-row: 1;
	}

.single-post .discovery-post-navigation .nav-next {
		justify-content: start;
		text-align: start;
	}
}

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

@media (prefers-contrast: more) {
:is(.blog, .category, .tag) :is(.discovery-more-link, .discovery-archive-tri .discovery-bouton),
.single-post .discovery-post-navigation a {
		border-color: var(--discovery-color-text, #ffffff);
		background-color: var(--discovery-color-surface, #141414);
		box-shadow: none;
	}

:is(.blog, .category, .tag) .discovery-posts > .discovery-entry {
		border-block-start-color: var(--discovery-color-muted, #b3b3b3);
	}
}