/*
 * Habillage du site.
 *
 * Reprend ce qui a été relevé sur la production : fond blanc, texte #111111,
 * Work Sans, et le rythme déconstruit de la galerie — pleines largeurs, demies
 * et tiers séparés par du blanc. Ce qui change : des marges régulières là où
 * Elementor en produisait d'aléatoires, la marque et la campagne révélées au
 * survol, des transitions tenues et des contrastes conformes.
 */

:root {
	--ano-bg: #ffffff;
	--ano-fg: #111111;
	--ano-muted: #6f6f76;
	--ano-line: #ededf0;
	--ano-accent: #111111;

	/*
	 * Valeurs relevées sur anothernightoff.com à 1440 px : marge extérieure de
	 * 10 px, gouttière de 20 px. Ce blanc qui sépare les vignettes fait partie
	 * de l'identité du site — il ne s'agit pas d'une mosaïque compacte.
	 */
	--ano-gap: 20px;
	--ano-gutter: 10px;
	--ano-radius: 0px;
}

/* L'entête, les titres et le pied s'alignent sur la marge de la grille. */
.site-header__inner,
.page-intro,
.page-head,
.page-content,
.site-footer {
	padding-inline: clamp(10px, 1.6vw, 22px);
}

/* La légende se pose sur l'image et n'apparaît qu'au survol : le blanc qui
   entoure les vignettes reste du blanc, il ne sert pas de zone de texte. */
.film-card__trigger {
	position: relative;
	display: block;
}

.film-card__caption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 22px clamp(14px, 2vw, 26px) clamp(14px, 2vw, 22px);
	color: #fff;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.35) 55%, transparent);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--ano-speed) var(--ano-ease), transform var(--ano-speed) var(--ano-ease);
	pointer-events: none;
}

.film-card__trigger:hover .film-card__caption,
.film-card__trigger:focus-visible .film-card__caption {
	opacity: 1;
	transform: translateY(0);
}

.film-card__brand {
	color: rgba(255, 255, 255, 0.82);
	font-size: 11px;
	letter-spacing: 0.16em;
}

.film-card__campaign {
	font-size: clamp(14px, 1.3vw, 17px);
	font-weight: 400;
	margin-top: 2px;
}

.film-card__duration {
	color: rgba(255, 255, 255, 0.6);
}

/* Un léger assombrissement accompagne le survol, sans masquer l'image. */
.film-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.12);
	opacity: 0;
	transition: opacity var(--ano-speed) var(--ano-ease);
	pointer-events: none;
}

.film-card__trigger:hover .film-card__media::after,
.film-card__trigger:focus-visible .film-card__media::after {
	opacity: 1;
}

/* Typographie de l'entête, alignée sur celle du site actuel. */
.site-brand__text,
.site-nav__list a {
	font-weight: 500;
}

.page-title {
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: clamp(18px, 2.2vw, 26px);
}

/* Sur tactile, où il n'y a pas de survol, la légende reste lisible. */
@media (hover: none) {
	.film-card__caption {
		opacity: 1;
		transform: none;
	}
}