/**
 * Advanced Photo Suite — diaporama d'accueil.
 *
 * Plein écran, sobre, sans commande visible. Trois choix méritent explication.
 *
 * `100dvh` plutôt que `100vh` : sur téléphone, la barre d'adresse du
 * navigateur se rétracte au défilement, et `100vh` reste figé à la hauteur
 * SANS barre. Une image calée sur `100vh` dépasse donc du bas à l'arrivée sur
 * la page — le défaut le plus visible d'un plein écran mobile.
 *
 * La transition n'agit que sur l'opacité : c'est la seule propriété, avec
 * `transform`, que le navigateur sait animer sans recalculer la page. Un
 * fondu sur une image plein écran doit rester impeccable.
 *
 * Aucune commande : pas de flèches, pas de pastilles. Le diaporama est un
 * fond, pas un objet à manipuler. La navigation du site est la seule chose
 * cliquable.
 */

/*
 * La pleine largeur passe par `alignfull`, l'alignement natif du thème, et non
 * par un `100vw` maison : dans une mise en page contrainte, le thème impose
 * une largeur maximale à ses enfants directs, qui l'emportait sur la nôtre.
 */
.aps-diapo {
	position: relative;
	height: 100dvh;
	min-height: 520px;
	overflow: clip;
	background: #0f0d0b;
	display: grid;
	place-items: center;
	isolation: isolate;
}

.aps-diapo-plans {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.aps-diapo-plan {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 1600ms ease-in-out;
	will-change: opacity;
}

.aps-diapo-plan.is-actif { opacity: 1; }

.aps-diapo-plan picture,
.aps-diapo-plan img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Le voile d'ensemble : un dégradé vertical qui assombrit le haut et le bas,
 * là où rien n'est écrit. Il porte la lisibilité de l'entête posée sur la
 * photographie — sans lui, un plan très clair effacerait le logo.
 *
 * Un dégradé RADIAL avait été essayé pour concentrer l'ombre au centre : sur un
 * écran étroit, son ovale se voyait nettement. Une forme qu'on distingue sur
 * une photographie est une faute.
 */
.aps-diapo-voile {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(10, 8, 6, calc(var(--aps-diapo-voile, .45) * 0.7)) 0%,
		rgba(10, 8, 6, calc(var(--aps-diapo-voile, .45) * 0.18)) 45%,
		rgba(10, 8, 6, calc(var(--aps-diapo-voile, .45) * 0.85)) 100%
	);
	pointer-events: none;
}

/*
 * La page d'accueil se passe du pied de page : un pied sous un plein écran ne
 * se voit qu'au défilement, et il n'y a rien à faire défiler ici.
 *
 * L'entête, elle, reste — c'est celle du thème, posée sur la photographie par
 * `header.css`. Elle était autrefois masquée au profit d'un second logo rendu
 * par le diaporama lui-même ; il n'y en a plus qu'un.
 */
body.aps-accueil-diaporama .wp-site-blocks > footer { display: none; }

/* Le titre de la page n'a rien à faire par-dessus un diaporama d'accueil. */
body.aps-accueil-diaporama .wp-block-post-title { display: none; }

/*
 * Le modèle de page pose ses marges en STYLE EN LIGNE sur la balise <main> :
 * aucun sélecteur ne peut les battre. D'où l'exception, cantonnée à cette
 * page — sans elle, un bandeau blanc coiffe le diaporama plein écran.
 */
body.aps-accueil-diaporama main,
body.aps-accueil-diaporama .wp-block-post-content {
	margin-block-start: 0 !important;
	padding-block: 0 !important;
}

/* Rien ne coiffe le plein écran : le thème rembourre la racine. */
body.aps-accueil-diaporama .wp-site-blocks { padding-block: 0; }

.aps-diapo-vide {
	padding: 2rem;
	border: 1px dashed currentColor;
	opacity: .8;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.aps-diapo-plan { transition: none; }
}