/*
 * Fichier : intemporris-fiction.css
 * Emplacement : designs/intemporris/assets/css/
 *
 * Responsabilité :
 * Ce qui appartient à l'archive des fictions sonores : l'accent du domaine,
 * l'entête, le tri et le compte des fictions, la fiction mise en avant, la
 * ligne d'informations des cartes et la pagination. Les cartes, la grille,
 * la barre, ses filtres et les dossiers des styles viennent du socle.
 *
 * Dépendance :
 *   Cette feuille suit intemporris.css, qui pose les variables du design.
 *
 * Accent :
 *   Le violet des fictions, le même que celui du lecteur pour ce domaine. Il
 *   sert aux filets, aux lueurs et aux remplissages, jamais au texte posé
 *   sur le fond : les textes emploient l'accent mêlé à la couleur du texte.
 *
 * Mouvement :
 *   Au repos, rien ne bouge. L'éclat de la fiction mise en avant passe une
 *   fois à l'ouverture, puis seulement quand le pointeur vient sur la carte
 *   ou qu'un de ses liens reçoit le focus.
 *
 * Accessibilité : WCAG 2.1 niveau AA strict.
 *   - L'ordre de lecture reste celui du balisage.
 *   - La page courante de la pagination porte sa surface, son contour et sa
 *     graisse : elle ne tient pas à la seule couleur.
 */

/* L'accent des fictions. La propriété --intemporris-accent-fiction, posée
   sur la page, le remplace sans toucher à cette feuille. */
.abs-archive-fiction {
	--intemporris-or: var(--intemporris-accent-fiction, #7c4dea);
}

/* Entête
   ======================================================================= */

.abs-archive-fiction .abs-archive-entete {
	position: relative;
	margin: 0 0 var(--discovery-space-6, 1.5rem);
	padding-block-end: var(--discovery-space-5, 1.25rem);
}

.abs-archive-fiction .abs-archive-entete::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: var(--intemporris-filet-epaisseur);
	background: linear-gradient(90deg, var(--intemporris-accent), var(--intemporris-filet-accent) 40%, transparent 85%);
	box-shadow: 0 0 var(--discovery-space-3, 0.75rem) var(--intemporris-halo);
}

.abs-archive-fiction .abs-archive-titre {
	margin: 0;
	font-size: var(--discovery-text-4xl, 2.5rem);
	font-weight: var(--discovery-weight-bold, 700);
	letter-spacing: var(--intemporris-approche-titre);
	line-height: 1.05;
	text-wrap: balance;
}

.abs-archive-fiction .abs-archive-description {
	max-inline-size: var(--discovery-lecture-max, 42rem);
	margin-block-start: var(--discovery-space-3, 0.75rem);
	color: var(--discovery-color-muted, #b3b3b3);
}

/* Onglets de vue
   ======================================================================= */

/* Le sélecteur segmenté du socle. Chaque onglet se tient dans le conteneur :
   il ne descend pas sous lui et prend la taille de texte des onglets du
   catalogue. */
.abs-archive-fiction .abs-archive-onglet-element {
	margin-block-end: 0;
}

.abs-archive-fiction .abs-archive-onglet {
	font-size: var(--discovery-text-sm, 0.875rem);
	border-block-end-width: 1px;
}

/* Filtre et tri
   ======================================================================= */

/* Les menus gardent la place de leur chevron et la taille de texte des
   filtres du catalogue. Le filtre de la barre ne porte pas de marge sous
   lui : la barre règle seule son espacement. */
.abs-archive-fiction .abs-archive-form select {
	padding-inline: var(--discovery-space-4, 1rem) var(--discovery-space-8, 2rem);
	font-size: var(--discovery-text-sm, 0.875rem);
}

.abs-archive-fiction .abs-archive-barre .abs-archive-form {
	margin-block-end: 0;
}

/* Tri et compte
   ======================================================================= */

/* Le filet du haut du bandeau est porté par la barre, dans la couleur du
   design : le tri peut ainsi garder la mesure de la pilule du filtre au lieu
   de s'étirer sur toute la page. Le compte ferme le bandeau par le filet du
   bas. L'archive reste dans le flux : son panneau ne forme pas de boîte
   propre, et la vue qu'il présente ne doit pas être mise en grille. */
.abs-archive-fiction .abs-archive-barre {
	margin-block-end: 0;
	padding-block-end: var(--discovery-space-5, 1.25rem);
	border-block-end: 1px solid var(--intemporris-filet);
}

.abs-archive-fiction > .abs-archive-form-tri {
	max-inline-size: 26rem;
	margin: 0;
	padding-block: var(--discovery-space-4, 1rem) var(--discovery-space-2, 0.5rem);
}

.abs-archive-fiction > .abs-archive-resultats {
	margin: 0 0 var(--discovery-space-8, 2rem);
	padding-block: var(--discovery-space-2, 0.5rem) var(--discovery-space-3, 0.75rem);
	border-block-end: 1px solid var(--intemporris-filet);
	color: var(--discovery-color-muted, #b3b3b3);
	font-size: var(--discovery-text-sm, 0.875rem);
	font-variant-numeric: tabular-nums;
}

/* Sans tri, dans la vue des styles, le compte suit directement la barre. */
.abs-archive-fiction:not(:has(> .abs-archive-form-tri)) > .abs-archive-resultats {
	padding-block-start: var(--discovery-space-3, 0.75rem);
}

/* Fiction mise en avant
   ======================================================================= */

/* La même dalle que la grande carte du catalogue : biseau clair, arête
   sombre, souffle immobile au pied, éclat au passage. La fiction peut ne
   pas avoir de couverture : la dalle ne présente alors que son texte, dans
   une colonne de lecture. */
.abs-archive-fiction .abs-avant {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	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);
	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);
}

.abs-archive-fiction .abs-avant:has(.abs-avant-image) {
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	column-gap: var(--discovery-space-10, 2.5rem);
}

.abs-archive-fiction .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%),
		radial-gradient(ellipse 60% 55% at 72% 112%, var(--intemporris-souffle-d), transparent 74%),
		radial-gradient(ellipse 40% 60% at 24% 12%, var(--intemporris-souffle-e), transparent 78%);
	filter: blur(var(--intemporris-souffle-flou));
	opacity: 0.8;
	pointer-events: none;
}

.abs-archive-fiction .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%);
	animation: intemporris-eclat-ouverture 6s ease-in-out 1 backwards;
	pointer-events: none;
}

.abs-archive-fiction .abs-avant:hover::after {
	animation:
		intemporris-eclat-ouverture 6s ease-in-out 1 backwards,
		intemporris-eclat-passage 6s ease-in-out 1 backwards;
}

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

.abs-archive-fiction .abs-avant-corps {
	display: contents;
}

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

.abs-archive-fiction .abs-avant-couverture {
	display: block;
	inline-size: 100%;
	block-size: auto;
	object-fit: contain;
	border-radius: var(--intemporris-rayon);
	background-color: var(--discovery-color-surface, #141414);
	box-shadow: var(--intemporris-portee) var(--intemporris-ombre), 0 0 var(--discovery-space-10, 2.5rem) var(--intemporris-halo);
}

.abs-archive-fiction .abs-avant-surtitre {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: var(--discovery-space-3, 0.75rem);
	margin: 0;
	font-size: var(--discovery-text-xs, 0.75rem);
	font-weight: var(--discovery-weight-semibold, 600);
	letter-spacing: var(--intemporris-approche-etiquette);
	text-transform: uppercase;
	color: var(--intemporris-accent-texte);
}

.abs-archive-fiction .abs-avant:has(.abs-avant-image) .abs-avant-surtitre {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
}

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

.abs-archive-fiction .abs-avant-texte {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--discovery-space-4, 1rem);
	max-inline-size: var(--discovery-lecture-max, 42rem);
	margin: 0;
}

.abs-archive-fiction .abs-avant:has(.abs-avant-image) .abs-avant-texte {
	grid-column: 2;
	grid-row: 2;
}

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

.abs-archive-fiction .abs-avant-titre a {
	color: var(--discovery-color-text, #ffffff);
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
	transition: text-decoration-color var(--intemporris-duree);
}

.abs-archive-fiction .abs-avant-titre a:hover,
.abs-archive-fiction .abs-avant-titre a:focus-visible {
	text-decoration-color: var(--intemporris-accent);
}

/* La ligne d'informations : diffusion, nombre d'épisodes, rythme. */
.abs-archive-fiction .abs-avant .abs-meta {
	margin: 0;
	font-size: var(--discovery-text-sm, 0.875rem);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
	color: var(--intemporris-accent-texte);
}

.abs-archive-fiction .abs-avant-resume {
	margin: 0;
	color: color-mix(in srgb, var(--discovery-color-text, #ffffff) 82%, transparent);
	line-height: 1.6;
}

.abs-archive-fiction .abs-avant-resume p {
	margin: 0;
}

.abs-archive-fiction .abs-avant-resume p + p {
	margin-block-start: var(--discovery-space-3, 0.75rem);
}

/* Les actions de la fiction. L'écoute, proposée quand la fiction porte une
   bande-annonce, est l'action principale : elle porte le verre éclairé et
   sa lumière qui traverse au passage. Le détail est du verre fumé, qui
   s'éclaire à peine. */
.abs-archive-fiction .abs-avant-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--discovery-space-3, 0.75rem);
	margin: var(--discovery-space-2, 0.5rem) 0 0;
}

.abs-archive-fiction .abs-avant-actions .abs-bouton {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	min-block-size: var(--intemporris-cible);
	padding: 0 var(--discovery-space-6, 1.5rem);
	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-size: var(--discovery-text-sm, 0.875rem);
	font-weight: var(--discovery-weight-semibold, 600);
	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);
}

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

.abs-archive-fiction .abs-avant-actions .abs-bouton-principal {
	border-color: var(--intemporris-verre-bord-bouton);
	background:
		linear-gradient(180deg, var(--intemporris-verre-reflet), transparent 45%),
		var(--intemporris-verre-bouton);
	box-shadow:
		inset 0 1px 0 var(--intemporris-verre-reflet),
		0 0 var(--discovery-space-6, 1.5rem) var(--intemporris-verre-halo-bouton);
}

.abs-archive-fiction .abs-avant-actions .abs-bouton-principal::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);
	pointer-events: none;
}

.abs-archive-fiction .abs-avant-actions .abs-bouton-principal:hover,
.abs-archive-fiction .abs-avant-actions .abs-bouton-principal: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-archive-fiction .abs-avant-actions .abs-bouton-principal:hover::before,
.abs-archive-fiction .abs-avant-actions .abs-bouton-principal:focus-visible::before {
	transform: translateX(165%);
	opacity: 1;
}

/* Informations des cartes
   ======================================================================= */

.abs-archive-fiction .abs-carte-texte .abs-meta {
	margin: 0;
	font-size: var(--discovery-text-sm, 0.875rem);
	font-variant-numeric: tabular-nums;
	color: var(--discovery-color-muted, #b3b3b3);
}

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

/* Les pages de l'archive : des liens présentés en pastilles de verre, la
   page courante avec un noyau de lumière. Les liens précédent et suivant
   portent leur texte en toutes lettres. */
.abs-archive-fiction .abs-pagination {
	margin: 0 0 var(--discovery-space-8, 2rem);
}

.abs-archive-fiction .abs-pagination-liste {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--discovery-space-2, 0.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.abs-archive-fiction .abs-pagination-entree {
	margin: 0;
}

.abs-archive-fiction .abs-pagination .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-size: var(--discovery-text-sm, 0.875rem);
	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);
}

.abs-archive-fiction .abs-pagination :is(.prev, .next).page-numbers {
	padding-inline: var(--discovery-space-5, 1.25rem);
}

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

.abs-archive-fiction .abs-pagination .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);
	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: 40rem) {

	.abs-archive-fiction .abs-archive-titre {
		font-size: var(--discovery-text-3xl, 2rem);
	}

	/* Les deux onglets partagent la largeur et gardent la même hauteur,
	   même quand un libellé passe à la ligne. */
	.abs-archive-fiction .abs-archive-onglets {
		align-items: stretch;
	}

	.abs-archive-fiction .abs-archive-onglet-element {
		align-items: stretch;
	}

	.abs-archive-fiction .abs-archive-onglet {
		justify-content: center;
		padding-inline: var(--discovery-space-2, 0.5rem);
		text-align: center;
	}

	.abs-archive-fiction .abs-avant {
		padding: var(--discovery-space-5, 1.25rem);
	}

	/* Avec une couverture, seuls le surtitre, le titre et la ligne
	   d'informations se tiennent à côté d'elle. Le résumé et les actions
	   passent dessous, sur toute la largeur de la carte. */
	.abs-archive-fiction .abs-avant:has(.abs-avant-image) {
		grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
		grid-template-rows: none;
		column-gap: var(--discovery-space-4, 1rem);
		row-gap: var(--discovery-space-2, 0.5rem);
	}

	.abs-archive-fiction .abs-avant:has(.abs-avant-image) .abs-avant-image {
		grid-column: 1;
		grid-row: 1 / span 3;
		align-self: start;
	}

	.abs-archive-fiction .abs-avant:has(.abs-avant-image) .abs-avant-texte {
		display: contents;
	}

	.abs-archive-fiction .abs-avant:has(.abs-avant-image) :is(.abs-avant-titre, .abs-meta, .abs-avant-resume, .abs-avant-actions) {
		position: relative;
		z-index: 1;
	}

	.abs-archive-fiction .abs-avant:has(.abs-avant-image) .abs-avant-surtitre {
		grid-column: 2;
		grid-row: 1;
		align-self: start;
	}

	.abs-archive-fiction .abs-avant:has(.abs-avant-image) .abs-avant-titre {
		grid-column: 2;
		grid-row: 2;
	}

	.abs-archive-fiction .abs-avant:has(.abs-avant-image) .abs-meta {
		grid-column: 2;
		grid-row: 3;
	}

	.abs-archive-fiction .abs-avant:has(.abs-avant-image) .abs-avant-resume {
		grid-column: 1 / -1;
		grid-row: 4;
		margin-block-start: var(--discovery-space-3, 0.75rem);
	}

	.abs-archive-fiction .abs-avant:has(.abs-avant-image) .abs-avant-actions {
		grid-column: 1 / -1;
		grid-row: 5;
	}

	.abs-archive-fiction .abs-avant-titre {
		font-size: var(--discovery-text-2xl, 1.5rem);
	}

	.abs-archive-fiction .abs-avant-surtitre::before {
		inline-size: var(--discovery-space-4, 1rem);
	}

	.abs-archive-fiction .abs-avant-actions {
		inline-size: 100%;
	}

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

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

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

	.abs-archive-fiction .abs-avant::after {
		display: none;
	}

	.abs-archive-fiction .abs-avant-titre a,
	.abs-archive-fiction .abs-avant-actions .abs-bouton,
	.abs-archive-fiction .abs-avant-actions .abs-bouton-principal::before,
	.abs-archive-fiction .abs-pagination .page-numbers {
		transition: none;
	}

	.abs-archive-fiction .abs-avant-actions .abs-bouton-principal:hover::before,
	.abs-archive-fiction .abs-avant-actions .abs-bouton-principal:focus-visible::before {
		transform: none;
		opacity: 1;
	}
}

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

@media (prefers-contrast: more) {

	.abs-archive-fiction .abs-avant {
		background: var(--discovery-color-surface, #141414);
	}

	.abs-archive-fiction .abs-avant::before,
	.abs-archive-fiction .abs-avant::after,
	.abs-archive-fiction .abs-avant-actions .abs-bouton-principal::before {
		display: none;
	}

	.abs-archive-fiction .abs-avant-actions .abs-bouton,
	.abs-archive-fiction .abs-pagination .page-numbers {
		background: var(--discovery-color-surface, #141414);
		border-color: var(--discovery-color-border, #ffffff);
		backdrop-filter: none;
		box-shadow: none;
	}

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