/*
 * Fichier : intemporris-podcast.css
 * Emplacement : designs/intemporris/assets/css/
 *
 * Responsabilité :
 * Ce qui appartient à l'archive des podcasts : l'accent du domaine, l'entête,
 * le tri et le compte des épisodes, l'épisode mis en avant, la ligne
 * d'informations des cartes et la pagination. Les cartes, la grille, la
 * barre, ses filtres et les dossiers des rubriques viennent du socle.
 *
 * Dépendance :
 *   Cette feuille suit intemporris.css, qui pose les variables du design.
 *
 * Accent :
 *   Le bleu des podcasts, 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 l'épisode mis 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 podcasts. La propriété --intemporris-accent-podcast, posée
   sur la page, le remplace sans toucher à cette feuille. */
.abs-archive-podcast {
	--intemporris-or: var(--intemporris-accent-podcast, #3b6fd4);
}

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

.abs-archive-podcast .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-podcast .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-podcast .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-podcast .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-podcast .abs-archive-onglet-element {
	margin-block-end: 0;
}

.abs-archive-podcast .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-podcast .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-podcast .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-podcast .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-podcast > .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-podcast > .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 rubriques, le compte suit directement la barre. */
.abs-archive-podcast:not(:has(> .abs-archive-form-tri)) > .abs-archive-resultats {
	padding-block-start: var(--discovery-space-3, 0.75rem);
}

/* Épisode mis en avant
   ======================================================================= */

/* La même dalle que la grande carte du catalogue : biseau clair, arête
   sombre, souffle immobile au pied, éclat au passage. L'épisode peut ne pas
   avoir de couverture : la dalle ne présente alors que son texte, dans une
   colonne de lecture. */
.abs-archive-podcast .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-podcast .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-podcast .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-podcast .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-podcast .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-podcast .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-podcast .abs-avant-corps {
	display: contents;
}

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

.abs-archive-podcast .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-podcast .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-podcast .abs-avant:has(.abs-avant-image) .abs-avant-surtitre {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
}

.abs-archive-podcast .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-podcast .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-podcast .abs-avant:has(.abs-avant-image) .abs-avant-texte {
	grid-column: 2;
	grid-row: 2;
}

.abs-archive-podcast .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-podcast .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-podcast .abs-avant-titre a:hover,
.abs-archive-podcast .abs-avant-titre a:focus-visible {
	text-decoration-color: var(--intemporris-accent);
}

/* La ligne d'informations : saison, épisode, durée. */
.abs-archive-podcast .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-podcast .abs-avant-resume {
	margin: 0;
	color: color-mix(in srgb, var(--discovery-color-text, #ffffff) 82%, transparent);
	line-height: 1.6;
}

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

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

/* Les deux actions de l'épisode. L'écoute 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-podcast .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-podcast .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-podcast .abs-avant-actions .abs-bouton:hover,
.abs-archive-podcast .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-podcast .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-podcast .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-podcast .abs-avant-actions .abs-bouton-principal:hover,
.abs-archive-podcast .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-podcast .abs-avant-actions .abs-bouton-principal:hover::before,
.abs-archive-podcast .abs-avant-actions .abs-bouton-principal:focus-visible::before {
	transform: translateX(165%);
	opacity: 1;
}

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

.abs-archive-podcast .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-podcast .abs-pagination {
	margin: 0 0 var(--discovery-space-8, 2rem);
}

.abs-archive-podcast .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-podcast .abs-pagination-entree {
	margin: 0;
}

.abs-archive-podcast .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-podcast .abs-pagination :is(.prev, .next).page-numbers {
	padding-inline: var(--discovery-space-5, 1.25rem);
}

.abs-archive-podcast .abs-pagination a.page-numbers:hover,
.abs-archive-podcast .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-podcast .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-podcast .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-podcast .abs-archive-onglets {
		align-items: stretch;
	}

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

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

	.abs-archive-podcast .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-podcast .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-podcast .abs-avant:has(.abs-avant-image) .abs-avant-image {
		grid-column: 1;
		grid-row: 1 / span 3;
		align-self: start;
	}

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

	.abs-archive-podcast .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-podcast .abs-avant:has(.abs-avant-image) .abs-avant-surtitre {
		grid-column: 2;
		grid-row: 1;
		align-self: start;
	}

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

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

	.abs-archive-podcast .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-podcast .abs-avant:has(.abs-avant-image) .abs-avant-actions {
		grid-column: 1 / -1;
		grid-row: 5;
	}

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

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

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

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

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

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

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

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

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

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

@media (prefers-contrast: more) {

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

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

	.abs-archive-podcast .abs-avant-actions .abs-bouton,
	.abs-archive-podcast .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-podcast .abs-pagination .page-numbers.current {
		border-color: var(--discovery-color-text, #ffffff);
		background: var(--discovery-color-text, #ffffff);
		color: var(--discovery-color-background, #000000);
	}
}