/*
 * Fichier : intemporris-site.css
 * Emplacement : designs/intemporris/assets/css/
 *
 * Responsabilité :
 * L'enveloppe du site : l'en-tête et le pied de page, avec leurs menus, le
 * panier et les liens vers l'application mobile.
 *
 * Dépendance :
 *   Cette feuille suit intemporris.css, qui pose les variables du design.
 *
 * Périmètre :
 *   Chaque règle est portée par l'en-tête ou par le pied de page du site, et
 *   par eux seuls. Les menus du thème paraissent ailleurs dans le site : une
 *   règle posée sur un menu sans son conteneur les atteindrait tous.
 *
 * Couleur :
 *   L'enveloppe appartient au site entier, pas à un domaine. Sa matière est
 *   une ardoise sourde, presque sans teinte : elle n'entre en concurrence ni
 *   avec l'or des livres audio, qui est chaud, ni avec le bleu des podcasts
 *   et le violet des fictions sonores, qui sont froids. Le bleu du logo
 *   AB-Story n'y est pas une teinte posée sur le verre : c'est une lumière
 *   que l'interaction fait naître dedans. L'enveloppe garde la même matière
 *   d'une page à l'autre, et le visiteur reconnaît AB-Story partout.
 *
 * Trois degrés :
 *   Au repos, le verre d'un menu est éteint : il ne reste que le texte.
 *   Au passage du pointeur, le verre s'éclaircit, sans couleur encore.
 *   Au focus, au clic et sur la page courante, une lumière bleue se forme
 *   sous le libellé et se dissipe dans le verre. Elle ne remplit jamais le
 *   bouton : le verre contient la couleur, il n'en est pas rempli.
 *
 * Disposition :
 *   Le balisage décide de l'ordre et des emplacements. Cette feuille pose la
 *   matière, la lumière et les filets ; elle ne déplace rien.
 *
 * Formes :
 *   Une capsule permanente signale une action : le panier en porte une. Les
 *   menus sont du texte posé sur le verre, et la lumière vient sous le mot :
 *   six capsules côte à côte feraient de l'en-tête un tableau de boutons.
 *
 * Mouvement :
 *   Au repos, rien ne bouge. Le verre s'éveille au passage du pointeur et au
 *   focus, et c'est tout.
 *
 * Accessibilité : WCAG 2.1 niveau AA strict.
 *   - L'ordre de lecture reste celui du balisage.
 *   - La page courante porte sa lumière, son filet et sa graisse : elle ne
 *     tient pas à la seule couleur.
 *   - Le contour de focus du thème reste visible sur la nuit : il n'est
 *     jamais remplacé par la seule lueur du verre.
 *   - Les cibles gardent la hauteur d'appui du design.
 */

:is(.discovery-site-header, .discovery-site-footer) {
	/* Le bleu du logo AB-Story, la lumière de l'enveloppe. La propriété
	   --intemporris-bleu-site, posée sur la page, le remplace sans toucher à
	   cette feuille. */
	--intemporris-abs: var(--intemporris-bleu-site, #3a5cab);

	/* L'ardoise, la matière de l'enveloppe : ce bleu dégradé vers le gris. */
	--intemporris-ardoise: color-mix(in srgb, var(--intemporris-abs) 30%, #7e8693);

	/* La nuit : le fond des deux bandes, à peine tiré vers l'ardoise. */
	--intemporris-nuit: color-mix(in srgb, var(--intemporris-ardoise) 6%, var(--discovery-color-background, #000000));

	/* Les diffusions qui donnent sa profondeur à la nuit. La plus basse garde
	   un fond bleu : c'est le seul endroit où la couleur dort au repos. */
	--intemporris-diffusion: color-mix(in srgb, var(--intemporris-ardoise) 14%, transparent);
	--intemporris-diffusion-basse: color-mix(in srgb, var(--intemporris-abs) 8%, transparent);

	/* La lumière bleue : basse sous un mot, vive sur un bord. */
	--intemporris-lueur: color-mix(in srgb, var(--intemporris-abs) 42%, transparent);
	--intemporris-lueur-douce: color-mix(in srgb, var(--intemporris-ardoise) 16%, transparent);
	--intemporris-halo: color-mix(in srgb, var(--intemporris-ardoise) 12%, transparent);

	/* Le verre : une ardoise fumée, un reflet en haut, un bord froid. */
	--intemporris-verre: color-mix(in srgb, var(--intemporris-ardoise) 13%, var(--discovery-color-background, #000000));
	--intemporris-verre-neutre: color-mix(in srgb, var(--intemporris-ardoise) 12%, var(--discovery-color-background, #000000));
	--intemporris-verre-clair: color-mix(in srgb, var(--intemporris-ardoise) 20%, var(--discovery-color-background, #000000));
	--intemporris-reflet: color-mix(in srgb, var(--discovery-color-text, #ffffff) 14%, transparent);
	--intemporris-creux: color-mix(in srgb, var(--discovery-color-background, #000000) 60%, transparent);
	--intemporris-bord: color-mix(in srgb, var(--intemporris-ardoise) 34%, transparent);
	--intemporris-bord-vif: color-mix(in srgb, var(--intemporris-abs) 55%, transparent);

	/* Les filets : un gris très sombre, que la lumière traverse par endroits. */
	--intemporris-filet: color-mix(in srgb, var(--discovery-color-text, #ffffff) 12%, transparent);

	--intemporris-rayon: var(--discovery-radius-md, 0.5rem);
	--intemporris-rond: var(--discovery-radius-full, 9999px);
	--intemporris-cible: 2.75rem;
	--intemporris-duree: var(--discovery-duration-normal, 240ms);

}

/* En-tête
   ======================================================================= */

/* La bande du haut : une nuit d'encre, deux diffusions bleues posées derrière
   le verre, et un filet qui la sépare du contenu. */
.discovery-site-header {
	position: relative;
	isolation: isolate;
	max-width: none;
	padding-block: var(--discovery-space-4, 1rem);
	background-color: var(--intemporris-nuit);
}

.discovery-site-header::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background:
		radial-gradient(ellipse 55% 130% at 10% 0%, var(--intemporris-diffusion), transparent 70%),
		radial-gradient(ellipse 40% 120% at 92% 110%, var(--intemporris-diffusion-basse), transparent 72%);
	pointer-events: none;
}

/* Le filet du bas : gris sombre sur toute sa longueur, traversé de lumière
   là où l'en-tête est le plus dense. */
.discovery-site-header::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 1px;
	background: linear-gradient(90deg, var(--intemporris-filet), var(--intemporris-lueur-douce) 30%, var(--intemporris-filet) 65%, var(--intemporris-filet));
	pointer-events: none;
}

/* Depuis le thème 1.2.6, la largeur réglée en administration sort en
   --discovery-header-max et c'est la zone qui borne le contenu, par son
   remplissage latéral. Cette feuille faisait ce travail à la main avant qu'il
   existe : elle rend la main au thème. Le contenu de l'en-tête s'aligne ainsi
   sur celui de la page, et une largeur d'en-tête réglée à part est suivie. */
.discovery-site-header .discovery-header-zone {
	max-width: none;
}

/* Le logo garde son fichier et ses proportions. Le verre ne vient qu'autour
   de lui, au passage. */
.discovery-site-header .discovery-logo {
	padding: var(--discovery-space-1, 0.25rem);
	border: 1px solid transparent;
	border-radius: var(--intemporris-rayon);
	background-color: transparent;
	transition: border-color var(--intemporris-duree), box-shadow var(--intemporris-duree);
}

.discovery-site-header .discovery-logo:hover,
.discovery-site-header .discovery-logo:focus-visible {
	border-color: var(--intemporris-bord);
	box-shadow: 0 0 var(--discovery-space-8, 2rem) var(--intemporris-halo);
}

/* Menus : du texte posé sur le verre
   ======================================================================= */

/* Les entrées de menu ne portent pas de capsule. Une plaque de verre s'éveille
   derrière le mot au passage, et la lumière bleue ne vient qu'au focus, au
   clic et sur la page courante. */
:is(.discovery-site-header, .discovery-site-footer) :is(.discovery-menu-button, .discovery-tab) {
	position: relative;
	isolation: isolate;
	min-block-size: var(--intemporris-cible);
	border-color: transparent;
	border-block-end-width: 1px;
	border-radius: var(--intemporris-rayon);
	color: var(--discovery-color-muted, #b3b3b3);
	transition: color var(--intemporris-duree);
}

:is(.discovery-site-header, .discovery-site-footer) :is(.discovery-menu-button, .discovery-tab)::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	border-radius: var(--intemporris-rayon);
	border: 1px solid transparent;
	background:
		linear-gradient(180deg, var(--intemporris-reflet), transparent 40%),
		var(--intemporris-verre-neutre);
	opacity: 0;
	transition: opacity var(--intemporris-duree);
	pointer-events: none;
}

/* Le filet de lumière sous le mot : ses extrémités s'éteignent, il ne trace
   pas une barre d'un bord à l'autre. */
:is(.discovery-site-header, .discovery-site-footer) :is(.discovery-menu-button, .discovery-tab)::after {
	content: "";
	position: absolute;
	inset-inline: 15%;
	inset-block-end: 0.35rem;
	block-size: 1px;
	background: linear-gradient(90deg, transparent, var(--intemporris-lueur), transparent);
	opacity: 0;
	transition: opacity var(--intemporris-duree);
	pointer-events: none;
}

/* Deuxième degré, au passage : le verre s'éclaircit, la couleur ne vient pas
   encore. */
:is(.discovery-site-header, .discovery-site-footer) :is(.discovery-menu-button, .discovery-tab):hover,
:is(.discovery-site-header, .discovery-site-footer) :is(.discovery-menu-button, .discovery-tab):focus-visible {
	border-color: transparent;
	color: var(--discovery-color-text, #ffffff);
}

:is(.discovery-site-header, .discovery-site-footer) :is(.discovery-menu-button, .discovery-tab):hover::before {
	opacity: 0.7;
	border-color: var(--intemporris-filet);
}

:is(.discovery-site-header, .discovery-site-footer) :is(.discovery-menu-button, .discovery-tab):hover::after {
	opacity: 0;
}

/* Troisième degré, au focus, au clic et sur la page courante : la lumière
   bleue se forme sous le libellé, concentrée en bas, dissipée vers le haut.
   La graisse dit aussi la page courante : elle ne tient pas à la couleur. */
:is(.discovery-site-header, .discovery-site-footer) :is(.discovery-menu-button[aria-current], .discovery-tab[aria-selected="true"]) {
	border-color: transparent;
	color: var(--discovery-color-text, #ffffff);
	font-weight: var(--discovery-weight-semibold, 600);
}

:is(.discovery-site-header, .discovery-site-footer) :is(.discovery-menu-button, .discovery-tab):focus-visible::before,
:is(.discovery-site-header, .discovery-site-footer) :is(.discovery-menu-button, .discovery-tab):active::before,
:is(.discovery-site-header, .discovery-site-footer) :is(.discovery-menu-button[aria-current], .discovery-tab[aria-selected="true"])::before {
	opacity: 1;
	border-color: var(--intemporris-filet);
	background:
		radial-gradient(ellipse 65% 55% at 50% 112%, color-mix(in srgb, var(--intemporris-abs) 60%, transparent), transparent 70%),
		radial-gradient(ellipse 90% 90% at 50% 130%, color-mix(in srgb, var(--intemporris-abs) 26%, transparent), transparent 74%),
		linear-gradient(180deg, var(--intemporris-reflet), transparent 40%),
		var(--intemporris-verre-neutre);
}

:is(.discovery-site-header, .discovery-site-footer) :is(.discovery-menu-button, .discovery-tab):focus-visible::after,
:is(.discovery-site-header, .discovery-site-footer) :is(.discovery-menu-button, .discovery-tab):active::after,
:is(.discovery-site-header, .discovery-site-footer) :is(.discovery-menu-button[aria-current], .discovery-tab[aria-selected="true"])::after {
	opacity: 1;
}

/* La barre d'onglets ne porte plus de trait continu : ce sont les mots qui
   tiennent la ligne. */
.discovery-site-header .discovery-menu-tabs {
	gap: var(--discovery-space-1, 0.25rem);
	border-block-end: 0;
}

.discovery-site-header .discovery-tab-item {
	margin-block-end: 0;
}

/* Au pied, un filet sépare deux entrées voisines. L'en-tête s'en passe : ses
   menus y sont plus longs, et les filets y feraient une grille.

   Le filet ne paraît qu'à partir de la largeur où les liens tiennent sur une
   ligne. Plus bas, ils s'empilent, et un filet placé devant chacun laisserait
   des traits verticaux flottants en début de ligne. Les liens gagnent alors
   de l'air entre deux rangs, qui les sépare aussi bien. La valeur est écrite
   en clair : une variable est interdite dans une condition de media. */
@media (min-width: 48rem) {

	.discovery-site-footer .discovery-menu-item + .discovery-menu-item,
	.discovery-site-footer .discovery-tab-item + .discovery-tab-item {
		border-inline-start: 1px solid var(--intemporris-filet);
		padding-inline-start: var(--discovery-space-2, 0.5rem);
	}
}

@media (max-width: 47.99rem) {

	.discovery-site-footer .discovery-menu {
		row-gap: var(--discovery-space-3, 0.75rem);
	}
}

/* Panier
   ======================================================================= */

/* Le panier est une action, et il ne paraît que lorsqu'il porte quelque
   chose : il garde sa capsule et sa lumière au passage. C'est le verre le
   plus épais de l'en-tête, avec son reflet en haut et son creux au fond. */
.discovery-site-header .discovery-panier-lien {
	display: inline-flex;
	gap: var(--discovery-space-2, 0.5rem);
	align-items: center;
	min-block-size: var(--intemporris-cible);
	padding-inline: var(--discovery-space-4, 1rem);
	border: 1px solid var(--intemporris-bord);
	border-radius: var(--intemporris-rond);
	background:
		linear-gradient(180deg, var(--intemporris-reflet), transparent 42%),
		var(--intemporris-verre);
	box-shadow:
		inset 0 1px 0 var(--intemporris-reflet),
		inset 0 -1.5rem 1.5rem -1.5rem var(--intemporris-creux),
		0 0 var(--discovery-space-8, 2rem) var(--intemporris-halo);
	color: var(--discovery-color-text, #ffffff);
	text-decoration: none;
	transition: border-color var(--intemporris-duree), box-shadow var(--intemporris-duree);
}

.discovery-site-header .discovery-panier-lien:hover,
.discovery-site-header .discovery-panier-lien:focus-visible {
	border-color: var(--intemporris-bord-vif);
	box-shadow:
		inset 0 1px 0 var(--intemporris-reflet),
		inset 0 -1.5rem 1.5rem -1.5rem var(--intemporris-creux),
		0 0 var(--discovery-space-10, 2.5rem) var(--intemporris-lueur-douce);
}

/* Le décompte : une goutte de verre, un peu plus claire que la capsule qui la
   porte. */
.discovery-site-header .discovery-panier-nombre {
	min-inline-size: 1.6rem;
	padding-inline: var(--discovery-space-1, 0.25rem);
	border: 1px solid var(--intemporris-bord);
	border-radius: var(--intemporris-rond);
	background:
		radial-gradient(circle at 50% 28%, var(--intemporris-reflet), transparent 60%),
		var(--intemporris-verre-clair);
	color: var(--discovery-color-text, #ffffff);
	font-size: var(--discovery-text-sm, 0.875rem);
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/* Application mobile
   ======================================================================= */

/* Les deux badges restent reconnaissables : ils prennent le filet et le fond
   de nuit, rien de plus. Ils accompagnent le site, ils ne le devancent
   pas. */
.discovery-site-header .abs-application-mobile-lien {
	border-color: var(--intemporris-filet);
	background-color: color-mix(in srgb, var(--intemporris-verre) 60%, transparent);
	color: var(--discovery-color-muted, #b3b3b3);
}

/* Pied de page
   ======================================================================= */

/* Le pied est la même matière, au repos : une grande plaque de verre fumé
   presque noire. Un reflet d'ardoise en haut, rien au centre, une diffusion
   bleutée tout en bas qui donne sa profondeur au noir. Les emplacements du
   thème ne bougent pas. */
.discovery-site-footer {
	position: relative;
	isolation: isolate;
	background-color: var(--intemporris-nuit);
	border-block-start: 0;
	padding-block: var(--discovery-space-10, 2.5rem);
}

.discovery-site-footer::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background:
		linear-gradient(180deg, var(--intemporris-diffusion-basse), transparent 30%),
		radial-gradient(ellipse 70% 60% at 50% 125%, var(--intemporris-diffusion), transparent 72%);
	pointer-events: none;
}

/* Le filet du haut, jumeau de celui de l'en-tête. */
.discovery-site-footer::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	block-size: 1px;
	background: linear-gradient(90deg, var(--intemporris-filet), var(--intemporris-lueur-douce) 35%, var(--intemporris-filet) 70%, var(--intemporris-filet));
	pointer-events: none;
}

/* Le second filet sépare la dernière zone de celles qui la précèdent, là où
   se lit la ligne de crédit. Il suit la dernière zone quelle qu'elle soit :
   une zone ajoutée, retirée ou vidée déplace le filet avec elle, et une zone
   seule n'en porte aucun. */
.discovery-site-footer .discovery-footer-zone:not(:first-child):last-child {
	padding-block-start: var(--discovery-space-6, 1.5rem);
	border-block-start: 1px solid var(--intemporris-filet);
}

.discovery-site-footer .discovery-menu-tabs {
	border-block-end: 0;
}

.discovery-site-footer .discovery-tab-item {
	margin-block-end: 0;
}

.discovery-site-footer .discovery-footer-credit {
	color: var(--discovery-color-muted, #b3b3b3);
	font-size: var(--discovery-text-sm, 0.875rem);
}

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

/* Sous prefers-contrast, les diffusions et les lueurs s'effacent. Les états
   passent alors par une surface pleine et un contour. */
@media (prefers-contrast: more) {

	:is(.discovery-site-header, .discovery-site-footer)::before,
	:is(.discovery-site-header, .discovery-site-footer) :is(.discovery-menu-button, .discovery-tab)::after {
		display: none;
	}

	:is(.discovery-site-header, .discovery-site-footer)::after {
		background: var(--discovery-color-border, #595959);
	}

	:is(.discovery-site-header, .discovery-site-footer) :is(.discovery-menu-button, .discovery-tab)::before {
		background: var(--discovery-color-surface, #141414);
	}

	:is(.discovery-site-header, .discovery-site-footer) :is(.discovery-menu-button[aria-current], .discovery-tab[aria-selected="true"]) {
		border-color: var(--discovery-color-text, #ffffff);
	}

	.discovery-site-header .discovery-panier-lien {
		background: var(--discovery-color-surface, #141414);
		box-shadow: none;
	}
}

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

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

	:is(.discovery-site-header, .discovery-site-footer) :is(.discovery-logo, .discovery-menu-button, .discovery-tab, .discovery-panier-lien),
	:is(.discovery-site-header, .discovery-site-footer) :is(.discovery-menu-button, .discovery-tab)::before,
	:is(.discovery-site-header, .discovery-site-footer) :is(.discovery-menu-button, .discovery-tab)::after {
		transition: none;
	}
}