/*
 * Fichier : intemporris-fenetre.css
 * Emplacement : designs/intemporris/assets/css/
 *
 * Responsabilité :
 * La fenêtre d'image du thème : le dialogue qui montre une image, sa légende
 * et sa description. Elle s'ouvre depuis le logo, depuis la couverture d'une
 * fiche et depuis la galerie d'un livre audio.
 *
 * Dépendance :
 *   Cette feuille suit intemporris.css. Elle ne lui emprunte que la couleur
 *   de la page, quand la fenêtre est rendue dans un conteneur qui la porte.
 *
 * Périmètre :
 *   Les règles générales portent une seule classe : une fenêtre qui a son
 *   propre habillage le garde. Chaque commande est visée dans son conteneur.
 *
 * Accessibilité : WCAG 2.1 niveau AA strict.
 *   - L'ordre de lecture et le fonctionnement restent ceux du thème.
 *   - Le contour de focus du thème reste visible.
 *   - Les commandes gardent la hauteur d'appui du design.
 */

/* La fenêtre qui montre une image et sa description : une plaque de verre
   sombre posée sur un voile de nuit. Elle prend la couleur de la page où
   elle s'ouvre, et l'ardoise du site ailleurs. L'ordre et le fonctionnement
   restent ceux du thème. */
.discovery-dialogue {
	--intemporris-fenetre: var(--intemporris-accent, color-mix(in srgb, var(--intemporris-bleu-site, #3a5cab) 30%, #7e8693));
	--intemporris-fenetre-filet: color-mix(in srgb, var(--discovery-color-text, #ffffff) 14%, transparent);
	--intemporris-fenetre-filet-accent: color-mix(in srgb, var(--intemporris-fenetre) 45%, transparent);
}

/* L'en-tête, le pied et le visuel d'une fiche isolent leur empilement pour
   tenir leurs lumières derrière leur verre. Celui qui porte une fenêtre
   ouverte passe au-dessus de la page, le temps qu'elle est ouverte : la
   fenêtre ne reste pas enfermée sous des éléments de la page. */
:is(.discovery-site-header, .discovery-site-footer, .abs-fiche-visuel):has(.discovery-dialogue:not([hidden])) {
	z-index: 1000;
}

.discovery-dialogue-fond {
	background: var(--intemporris-fenetre-voile-nuit, rgb(3 4 8 / 0.78));
	backdrop-filter: blur(6px);
}

/* La largeur du panneau, ses marges intérieures et l'écart entre ses
   éléments restent ceux du thème : la fenêtre et l'image gardent leur
   taille. */
.discovery-dialogue-panneau {
	border: 1px solid color-mix(in srgb, var(--intemporris-fenetre) 40%, transparent);
	border-radius: var(--discovery-radius-lg, 1rem);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--intemporris-blanc, #ffffff) 7%, transparent), transparent 12rem),
		color-mix(in srgb, var(--intemporris-fenetre) 7%, var(--intemporris-fenetre-plaque-nuit, #0c0c11));
	box-shadow: 0 2rem 5rem -1.5rem var(--intemporris-ombre-profonde, rgb(0 0 0 / 0.9));
	scrollbar-width: thin;
	scrollbar-color: var(--intemporris-fenetre-filet-accent) transparent;
}

/* L'en-tête : le titre de l'image, précédé d'un filet, et la fermeture en
   pastille ronde. */
.discovery-dialogue-entete {
	align-items: center;
}

.discovery-dialogue-titre {
	display: flex;
	align-items: center;
	gap: var(--discovery-space-3, 0.75rem);
	min-inline-size: 0;
	font-size: var(--discovery-text-xl, 1.25rem);
	letter-spacing: -0.02em;
	overflow-wrap: anywhere;
}

.discovery-dialogue-titre::before {
	content: "";
	flex: none;
	inline-size: var(--discovery-space-6, 1.5rem);
	block-size: 1px;
	background: var(--intemporris-fenetre-filet-accent);
}

/* Les commandes : des capsules au contour gris, qui prennent la couleur de
   la fenêtre au passage de la main ou au focus. Chaque commande est visée
   dans son conteneur, et sa forme est posée en entier : une fenêtre rendue
   à l'intérieur du visuel d'une fiche y garde ainsi ses capsules. */
.discovery-dialogue-panneau .discovery-dialogue-entete .discovery-dialogue-fermer:not([hidden]),
.discovery-dialogue-panneau .discovery-dialogue-pied :is(.discovery-dialogue-fermer-pied, .discovery-dialogue-remonter):not([hidden]),
.discovery-dialogue-panneau .discovery-dialogue-description .discovery-dialogue-divulgation:not([hidden]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--discovery-space-2, 0.5rem);
	inline-size: auto;
	min-block-size: 2.75rem;
	padding: var(--discovery-space-2, 0.5rem) var(--discovery-space-5, 1.25rem);
	/* Le contour garde un contraste d'au moins 3 pour 1 sur la plaque. */
	border: 1px solid color-mix(in srgb, var(--discovery-color-text, #ffffff) 42%, transparent);
	border-radius: var(--discovery-radius-full, 9999px);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--discovery-color-text, #ffffff) 8%, transparent), transparent 46%),
		color-mix(in srgb, var(--intemporris-fenetre) 8%, transparent);
	color: var(--discovery-color-text, #ffffff);
	font-size: var(--discovery-text-sm, 0.875rem);
	cursor: pointer;
	transition: border-color var(--discovery-duration-normal, 240ms), background-color var(--discovery-duration-normal, 240ms);
}

/* La fermeture de l'en-tête : une pastille ronde. */
.discovery-dialogue-panneau .discovery-dialogue-entete .discovery-dialogue-fermer:not([hidden]) {
	flex: none;
	inline-size: 2.75rem;
	padding: 0;
}

.discovery-dialogue-panneau .discovery-dialogue-entete .discovery-dialogue-fermer:is(:hover, :focus-visible),
.discovery-dialogue-panneau .discovery-dialogue-pied :is(.discovery-dialogue-fermer-pied, .discovery-dialogue-remonter):is(:hover, :focus-visible),
.discovery-dialogue-panneau .discovery-dialogue-description .discovery-dialogue-divulgation:is(:hover, :focus-visible) {
	border-color: color-mix(in srgb, var(--intemporris-fenetre) 84%, transparent);
	background-color: color-mix(in srgb, var(--intemporris-fenetre) 14%, transparent);
}

/* L'image : sur une dalle sombre qui ne prend aucune place, ni marge ni
   bordure. La dalle se voit autour d'une image plus étroite que la fenêtre
   et derrière une image transparente. La taille de l'image reste celle que
   le thème lui donne. */
.discovery-dialogue-corps {
	align-items: center;
	box-shadow: 0 0 0 1px var(--intemporris-fenetre-filet);
	border-radius: var(--discovery-radius-md, 0.5rem);
	background:
		radial-gradient(ellipse 70% 60% at 50% 100%, color-mix(in srgb, var(--intemporris-fenetre) 16%, transparent), transparent 75%),
		var(--intemporris-fenetre-dalle, rgb(0 0 0 / 0.42));
}

.discovery-dialogue-image {
	border-radius: var(--discovery-radius-md, 0.5rem);
}

/* La légende : une ligne grise, centrée sous l'image. */
.discovery-dialogue-legende {
	margin: 0;
	text-align: center;
}

/* La description : derrière son bouton, puis en colonne de lecture. */
.discovery-dialogue-description {
	gap: var(--discovery-space-4, 1rem);
	padding-block-start: var(--discovery-space-5, 1.25rem);
	border-block-start-color: var(--intemporris-fenetre-filet);
}

.discovery-dialogue-texte {
	max-inline-size: 46rem;
	margin-block-start: 0;
	color: color-mix(in srgb, var(--discovery-color-text, #ffffff) 88%, var(--discovery-color-muted, #b3b3b3));
	line-height: 1.7;
}

.discovery-dialogue-texte > * {
	margin-block: 0;
}

.discovery-dialogue-texte > * + * {
	margin-block-start: var(--discovery-space-4, 1rem);
}

/* Le pied : remonter et fermer, à portée de main au bas d'une longue
   description. */
.discovery-dialogue-pied {
	padding-block-start: var(--discovery-space-5, 1.25rem);
	border-block-start-color: var(--intemporris-fenetre-filet);
}

@media (prefers-contrast: more) {

	.discovery-dialogue-fond {
		background: var(--discovery-color-background, #000000);
		backdrop-filter: none;
	}

	.discovery-dialogue-panneau {
		border-color: var(--discovery-color-border, #ffffff);
		background: var(--discovery-color-background, #000000);
	}

	.discovery-dialogue-corps {
		box-shadow: 0 0 0 1px var(--discovery-color-border, #ffffff);
		background: var(--discovery-color-background, #000000);
	}
}

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

	.discovery-dialogue-panneau .discovery-dialogue-entete .discovery-dialogue-fermer,
	.discovery-dialogue-panneau .discovery-dialogue-pied :is(.discovery-dialogue-fermer-pied, .discovery-dialogue-remonter),
	.discovery-dialogue-panneau .discovery-dialogue-description .discovery-dialogue-divulgation {
		transition: none;
	}
}