/*
 * Fichier : intemporris-livre-audio.css
 * Emplacement : designs/intemporris/assets/css/
 *
 * Responsabilité :
 * Ce qui appartient au catalogue des livres audio : l'entête de la page, la
 * barre de vues et ses filtres, les commandes de WooCommerce, le livre mis en
 * avant, et les informations que seules les cartes de ce domaine portent,
 * le prix, la notation, la promotion et la durée d'écoute.
 *
 * Dépendance :
 *   Cette feuille suit intemporris.css, qui pose les variables du design et
 *   habille les cartes, les dossiers et la pagination.
 *
 * Accent :
 *   Le catalogue emploie l'accent des livres audio, le même que celui du
 *   lecteur pour ce domaine. Les podcasts et les fictions posent le leur dans
 *   leur propre feuille.
 *
 * Accessibilité : WCAG 2.1 niveau AA strict.
 *   - Le prix et la durée restent du texte, dans la couleur du thème ou dans
 *     un or mêlé à elle.
 *   - La promotion porte son texte, sa surface et son contour : elle ne
 *     repose pas sur la seule couleur.
 */

/* L'accent des livres audio, le même que celui du lecteur pour ce domaine.
   Un réglage posé sur la page le remplace sans toucher à cette feuille. */
.abs-catalogue {
	--intemporris-or: var(--intemporris-accent-livre-audio, #946a1f);
}

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

/* Le titre de la page, et un filet qui part de la gauche sous lui. */

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

.abs-catalogue .abs-catalogue-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-catalogue .abs-catalogue-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-catalogue .abs-catalogue-description {
	max-inline-size: var(--discovery-lecture-max, 42rem);
	margin-block-start: var(--discovery-space-3, 0.75rem);
}

/* Barre et commandes
   ======================================================================= */

/* Le compteur et le tri de WooCommerce, en bandeau entre deux filets. */
.abs-catalogue .abs-catalogue-commandes {
	align-items: center;
	margin: 0 0 var(--discovery-space-8, 2rem);
	padding: var(--discovery-space-2, 0.5rem) 0;
	border-block: 1px solid var(--intemporris-filet);
}

.abs-catalogue .woocommerce-result-count {
	font-variant-numeric: tabular-nums;
}

/* Livre mis en avant
   ======================================================================= */

/* La mise en avant est une grande dalle : la couverture à gauche, le surtitre
   et le texte à droite, et la nappe au pied. Le bloc de texte s'efface de la
   mise en page pour que ses parties se placent une à une dans la grille. */

.abs-catalogue .abs-catalogue-avant {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 15rem) 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 var(--intemporris-filet);
	border-radius: var(--intemporris-rayon);
	background:
		linear-gradient(180deg, var(--intemporris-dalle-haut), var(--intemporris-dalle-bas) 45%, var(--intemporris-dalle-bas)),
		var(--discovery-color-surface, #141414);
}

.abs-catalogue .abs-catalogue-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));
	opacity: 0.8;
	animation: intemporris-souffle 38s ease-in-out infinite;
	pointer-events: none;
}

/* Le contre-courant : la même matière, plus faible et plus lente, qui revient
   de la droite. Les deux nappes ensemble ne dessinent rien. */
.abs-catalogue .abs-catalogue-avant::after {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0;
	background:
		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-lointain));
	opacity: 0.7;
	animation: intemporris-souffle-retour 54s ease-in-out infinite;
	pointer-events: none;
}

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

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

.abs-catalogue .abs-avant-couverture {
	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-catalogue .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);
	color: var(--intemporris-accent-texte);
}

.abs-catalogue .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-catalogue .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-catalogue .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-catalogue .abs-avant-titre a,
.abs-catalogue .abs-avant-role a {
	color: var(--discovery-color-text, #ffffff);
	text-decoration-line: underline;
	text-decoration-color: var(--intemporris-filet-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: text-decoration-color var(--intemporris-duree);
}

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

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

.abs-catalogue .abs-avant-commerce {
	align-items: baseline;
	gap: var(--discovery-space-4, 1rem);
	margin: 0;
}

.abs-catalogue .abs-avant-prix {
	font-size: var(--discovery-text-2xl, 1.5rem);
	font-weight: var(--discovery-weight-bold, 700);
	font-variant-numeric: tabular-nums;
	color: var(--intemporris-accent-texte);
}

.abs-catalogue .abs-avant-personnes {
	display: grid;
	gap: var(--discovery-space-1, 0.25rem);
	margin: 0;
}

.abs-catalogue .abs-avant-role {
	margin: 0;
}

.abs-catalogue .abs-avant-actions {
	gap: var(--discovery-space-3, 0.75rem);
	margin: var(--discovery-space-2, 0.5rem) 0 0;
}

/* Le bouton mène à la fiche. C'est du verre sombre, tenu par un bord bronze,
   avec un reflet en haut et une lumière dorée posée sur le côté gauche. La
   commande d'écoute qui l'accompagne appartient au lecteur Galactique et
   garde l'habillage de son design. */
.abs-catalogue .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-verre-bord-bouton);
	border-radius: var(--intemporris-rond);
	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)) 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), box-shadow var(--intemporris-duree);
}

/* La lumière dort à gauche. Au passage elle traverse le bouton et se pose de
   l'autre côté. Un plan négatif la tient au-dessus du fond et sous le texte. */
.abs-catalogue .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);
	pointer-events: none;
}

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

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

.abs-catalogue .abs-carte-partie-prix {
	font-weight: var(--discovery-weight-bold, 700);
	color: var(--intemporris-accent-texte);
}

.abs-catalogue :is(.abs-carte-partie-notation, .abs-carte-partie-duree) {
	color: var(--discovery-color-muted, #b3b3b3);
}

.abs-catalogue .abs-carte-partie-promotion {
	order: -1;
	padding: 0 var(--discovery-space-2, 0.5rem);
	border: 1px solid var(--intemporris-accent);
	border-radius: var(--intemporris-rond);
	background-color: var(--intemporris-voile);
	color: var(--discovery-color-text, #ffffff);
	font-size: var(--discovery-text-xs, 0.75rem);
	letter-spacing: var(--intemporris-approche-etiquette);
	text-transform: uppercase;
}

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

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

	/* Le texte se range à droite de la couverture et les commandes passent
	   dessous, sur toute la largeur : la carte reste courte. */
	.abs-catalogue .abs-catalogue-avant {
		grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
		column-gap: var(--discovery-space-4, 1rem);
		row-gap: var(--discovery-space-2, 0.5rem);
		padding: var(--discovery-space-5, 1.25rem);
	}

	.abs-catalogue .abs-avant-image {
		grid-column: 1;
		grid-row: 1 / span 4;
		align-self: start;
		inline-size: 100%;
	}

	.abs-catalogue .abs-avant-texte {
		display: contents;
	}

	.abs-catalogue :is(.abs-avant-surtitre, .abs-avant-titre, .abs-avant-commerce, .abs-avant-personnes) {
		grid-column: 2;
	}

	.abs-catalogue :is(.abs-avant-titre, .abs-avant-commerce, .abs-avant-personnes, .abs-avant-actions) {
		position: relative;
		z-index: 1;
	}

	.abs-catalogue .abs-avant-actions {
		grid-column: 1 / -1;
		inline-size: 100%;
		margin-block-start: var(--discovery-space-3, 0.75rem);
	}

	.abs-catalogue .abs-avant-actions .abs-bouton,
	.abs-catalogue .abs-avant-actions .gp-bouton,
	.abs-catalogue .abs-avant-actions .gp-bouton__declencheur {
		inline-size: 100%;
		justify-content: center;
	}

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

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

	.abs-catalogue .abs-avant-prix {
		font-size: var(--discovery-text-xl, 1.25rem);
	}

	.abs-catalogue .abs-catalogue-commandes {
		flex-direction: column;
		align-items: stretch;
	}
}

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

	/* Trop étroit pour deux colonnes : la couverture reprend sa place en
	   tête et le texte passe dessous, ligne à ligne. */
	.abs-catalogue .abs-catalogue-avant {
		grid-template-columns: minmax(0, 1fr);
	}

	.abs-catalogue .abs-avant-image {
		grid-column: 1;
		grid-row: 1;
		inline-size: 9rem;
		max-inline-size: 60%;
	}

	.abs-catalogue .abs-avant-surtitre {
		grid-column: 1;
		grid-row: 2;
	}

	.abs-catalogue .abs-avant-titre {
		grid-column: 1;
		grid-row: 3;
	}

	.abs-catalogue .abs-avant-commerce {
		grid-column: 1;
		grid-row: 4;
	}

	.abs-catalogue .abs-avant-personnes {
		grid-column: 1;
		grid-row: 5;
	}

	.abs-catalogue .abs-avant-actions {
		grid-column: 1;
		grid-row: 6;
	}
}

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

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

	.abs-catalogue .abs-catalogue-avant::before,
	.abs-catalogue .abs-catalogue-avant::after,
	.abs-catalogue .abs-avant-titre a,
	.abs-catalogue .abs-avant-role a,
	.abs-catalogue .abs-avant-actions .abs-bouton,
	.abs-catalogue .abs-avant-actions .abs-bouton::before {
		transition: none;
		animation: none;
	}

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

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

@media (prefers-contrast: more) {

	/* Le verre redevient une surface pleine, sans transparence ni flou, et
	   le souffle disparaît. Le bouton garde son contour et son texte. */

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

	.abs-catalogue .abs-avant-actions .abs-bouton::before,
	.abs-catalogue .abs-catalogue-avant::after {
		display: none;
	}
}