/* Le scroll-snap doit être porté par le conteneur qui DÉFILE (le document), pas par
   .snap-container qui ne défile pas. Limité à l'accueil via :has(.snap-container) ;
   ailleurs (aucun point de snap), la règle est inerte. */
html:has(.snap-container) {
	/* PROXIMITY (et non mandatory) : le snap accroche encore fermement le passage
	   carrousel → Actualités (en quittant le hero plein écran, le seul point proche
	   est le haut des Actualités), MAIS une fois sur les Actualités on peut continuer
	   librement jusqu'au footer. En 'mandatory', le footer (plus court qu'un écran)
	   n'est jamais le point le plus proche → le scroll re-snappait sans cesse en haut
	   des Actualités, rendant le footer inatteignable. */
	scroll-snap-type: y proximity;
	/* Le smooth global (style.css) entre en conflit avec le snap et fige le scroll
	   en haut du carrousel : on le neutralise ici pour que le snap soit franc.
	   Le clic-vers-Actualités reste animé (son JS appelle
	   scrollIntoView({behavior:'smooth'}), indépendant de cette règle). */
	scroll-behavior: auto;
}

/* Mobile : la règle ci-dessus est inerte — la page n'y défile plus du tout (cf.
   body.home { overflow: hidden } plus bas), donc il n'y a rien à « snapper ». */

/* (Le smooth-scroll « Lenis » a été retiré : le snap hero⇄Actualités repose donc
   uniquement sur le scroll-snap CSS natif ci-dessus — plus de neutralisation .glc-soft.) */

/* ---------------------------------------------------------------------------
   Hero / carrousel
--------------------------------------------------------------------------- */
.hero {
	position: relative;
	width: 100%;
	height: 100vh; /* plein écran (avec viewport-fit=cover : jusque sous la barre d'état) */
	overflow: hidden;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	user-select: none;   /* le drag souris ne sélectionne pas le texte */
	touch-action: pan-y; /* geste vertical = scroll page ; horizontal = JS (carrousel) */
	cursor: grab;
}

.hero.is-dragging {
	cursor: grabbing;
}

/* Bureau : zones flèche gauche/droite du hero (cf. front-page.js → is-zone-left/right,
   grille virtuelle de 6 colonnes, 1/6 à chaque bord). Le curseur SYSTÈME y est masqué
   (cursor:none) au profit d'un chevron réel qui suit la souris (.hero-cursor, repositionné
   en JS) : MÊME construction bordures que .we-chevron / .lightbox-chevron / le bouton
   Retour, mais en mix-blend-mode:difference — sans fond ni cercle, il s'inverse sur
   n'importe quelle image (clair sur zone sombre, sombre sur zone claire), automatiquement
   lisible sans avoir à deviner une couleur fixe. Le clic dans ces zones avance/recule
   d'une diapo au lieu de faire défiler vers Actualités (zone centrale, 4/6 du milieu :
   comportement inchangé). Mobile/tablette : aucune zone (front-page.js ne les active pas
   sous le seuil mqMobile) — .hero-cursor y reste caché (opacity:0, jamais positionné). */
.hero.is-zone-left:not(.is-dragging),
.hero.is-zone-right:not(.is-dragging) {
	cursor: none;
}

.hero-cursor {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	pointer-events: none;
	z-index: 5;
	opacity: 0;
	will-change: transform;
	transition: opacity 0.15s ease;
}

.hero-cursor::before {
	content: "";
	position: absolute;
	top: -0.425rem;
	left: -0.425rem;
	width: 0.85rem;
	height: 0.85rem;
	border-left: var(--chevron-weight) solid #fff;
	border-bottom: var(--chevron-weight) solid #fff;
	mix-blend-mode: difference;
}

.hero-cursor.is-visible {
	opacity: 1;
}

.hero.is-zone-left .hero-cursor::before {
	transform: rotate(45deg); /* pointe à gauche */
}

.hero.is-zone-right .hero-cursor::before {
	transform: rotate(-135deg); /* pointe à droite */
}

/* Piste : toutes les slides empilées au même endroit ; transition en FONDU
   (le JS bascule la classe .is-active, l'opacité est animée en CSS). */
.hero-track {
	position: relative;
	height: 100%;
}

.hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 2.618s ease; /* ~3 s : φ² (puissance du nombre d'or la plus proche de 3 s) */
}

.hero-slide.is-active {
	opacity: 1;
}

.hero-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Point focal BUREAU par défaut (--foc-d, posé en ligne par front-page.php) ; le point
	   focal MOBILE (--foc-m) prend le relais sous le seuil mobile, cf. media query. */
	object-position: var(--foc-d, 50% 50%);
	border-radius: 0;       /* exception : images du carrousel en plein cadre, non arrondies */
	pointer-events: none;   /* évite le drag fantôme de l'image */
	-webkit-user-drag: none;
}

/* Mobile : cadrage propre (point focal portrait choisi en admin, méta _carrousel_focal_mobile).
   EXCEPTION tablette en paysage (1024–1280px) : l'accueil y reprend l'agencement DESKTOP
   (point focal desktop, hero non verrouillé) — seule la barre de navigation y reste mobile
   (bouton « Menu »), cf. style.css @media max-width:1280px (bloc header/nav, inchangé). */
@media (max-width: 1280px) and (not ((min-width: 1024px) and (orientation: landscape))) {
	.hero-slide img {
		object-position: var(--foc-m, 50% 50%);
	}

	/* Le hero EST l'écran verrouillé (cf. body.home plus bas) : position:fixed avec les
	   quatre bords à 0, plutôt qu'une hauteur en 100vh. 100vh reste figé sur le plus
	   GRAND viewport possible (barre Safari repliée) ; un élément fixed avec top/right/
	   bottom/left:0, lui, épouse nativement le viewport RÉELLEMENT visible à tout instant
	   — barre d'adresse haut ou bas, dépliée ou non, sans JS ni unité dvh. (height:auto
	   annule le 100vh hérité : sinon la hauteur explicite prime sur bottom:0, cf. règles
	   de sur-contrainte CSS, et le bas du hero ne suivrait plus le viewport réel.) */
	.hero {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: auto;
		height: auto;
	}
}


/* ---------------------------------------------------------------------------
   Teinte des barres du navigateur (iOS 26) — recette Apple
--------------------------------------------------------------------------- */
/* Voir front-page.php : la structure est imposée (conteneur fixe de hauteur < 50vh,
   enfant en 100vh portant la couleur). Safari en reprend le background-color pour
   peindre la zone sous ses barres. Mobile uniquement : ailleurs, aucune barre à teinter. */
.glc-bar-tint {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	display: block;
	width: 100vw;
	height: 48px;         /* < 50vh : requis */
	pointer-events: none;
}
/* INVISIBLE dans la page (opacity:0) mais TOUJOURS échantillonné par Safari : les trois
   sources sur iOS 26 signalent — comme un piège — qu'un élément fixe reste lu pour teinter
   les barres même en opacity:0 (seul display:none l'en exclut). On s'en sert ici à
   l'endroit : la couleur part bien dans la barre d'état, sans que ce bloc opaque de 100vh
   ne vienne masquer le dégradé de fond (body::before) et aplatir l'accueil. */
.glc-bar-tint {
	opacity: 0;
}
.glc-bar-tint > div {
	height: 100vh;        /* requis : c'est ce qui étend la teinte sous les barres */
	background-color: var(--color-bg-4); /* couleur reprise par la barre d'état */
}
@media (min-width: 1281px), (min-width: 1024px) and (max-width: 1280px) and (orientation: landscape) {
	.glc-bar-tint { display: none; } /* pas de notch/île à teinter en tablette non plus */
}

/* ---------------------------------------------------------------------------
   Zone de sécurité du hero (mobile) — SEULEMENT ce que Safari peint lui-même
--------------------------------------------------------------------------- */
/* Logo, bouton Menu et légende reposent DIRECTEMENT sur la photo (comme le site de
   référence) — aucune bande ne les encadre. Les deux bandes ci-dessous ne couvrent QUE
   l'encoche/île dynamique et la zone de geste : les seules zones où l'écran existe mais
   où la PAGE ne peut rien afficher (viewport-fit=cover). .hero étant désormais fixed
   avec les quatre bords à 0 (cf. règle ci-dessus), il épouse déjà le viewport RÉELLEMENT
   visible — la barre d'adresse Safari, dépliée ou non, n'a donc plus besoin d'être
   compensée ici : env() suffit, sans JS. */
@media (max-width: 1280px) {
	.hero::before,
	.hero::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		background: var(--color-bg-4); /* même noir que .glc-bar-tint, cf. plus haut */
		z-index: 2;           /* au-dessus des diapos, sous la légende (z-index 5) */
		pointer-events: none;
	}
	.hero::before {
		top: 0;
		height: env(safe-area-inset-top, 0px);
	}
	.hero::after {
		bottom: 0;
		height: env(safe-area-inset-bottom, 0px);
	}
}

.hero-slide .hero-slide-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(26, 4, 2, 0.15) 0%, rgba(26, 4, 2, 0.55) 100%);
}

/* Légende du hero (bas à gauche) : nom de la galerie + dernière actualité,
   cliquable vers sa fiche. Reprend l'emplacement de l'ancienne légende de slide. */
.hero-legend {
	position: absolute;
	left: var(--header-padding-side); /* aligné sur le bord gauche du logo (au repos) */
	bottom: var(--header-padding-y);  /* = espace au-dessus du logo → cadrage symétrique haut/bas */
	z-index: 5;
	max-width: 32em;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	color: var(--color-text);
	text-decoration: none;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); /* lisibilité sur image claire, sans voile */
}

.hero-legend-gallery {
	font-family: var(--font-ui);
	font-size: var(--nav-size); /* = taille des liens de nav (Type Deux Medium) */
	font-weight: 500;
	letter-spacing: 0.04em;
	opacity: 0.85;
}

.hero-legend-title {
	font-family: var(--font-display);
	font-size: var(--fs-title-fluid); /* titre marquee « à l'affiche » (20.4→26) */
	line-height: 1.1;
	transition: color 0.2s ease;
}

/* Accent au survol du titre de légende : pointeurs FINS uniquement. Sur écran tactile,
   :hover « colle » après un tap et fige l'accent → désactivé via @media (hover: hover).
   (La lueur jaune associée est gérée pareillement dans style.css.) */
@media (hover: hover) {
	a.hero-legend:hover .hero-legend-title {
		color: var(--color-accent);
	}
}

.hero-legend-dates {
	font-family: var(--font-ui);
	font-size: var(--fs-h4); /* métadonnée (dates) */
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.7;
}

/* Cas sans aucune image de carrousel : nom de la galerie centré (état vide). */
.hero-fallback .hero-slide-caption {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.hero-fallback .hero-slide-caption .hero-slide-title {
	font-family: var(--font-display);
	margin: 0;
	font-size: var(--fs-d1);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Actualités
--------------------------------------------------------------------------- */
.actualites {
	position: relative;
	min-height: 100vh;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	/* Même gabarit que la page News (.content-wrap) : dégagement du header fixe en haut
	   (sinon la nav mord le titre) ; marge gauche = --page-padding, marge DROITE alignée
	   sur la fin de « Contact » (--marge-site-right). Ordre : haut · droite · bas · gauche. */
	padding: calc(var(--header-height) + var(--nav-gap)) var(--marge-site-right) 4rem var(--page-padding);
	/* Apparition = FONDU seul (aucun mouvement directionnel). */
	opacity: 0;
	transition: opacity 0.9s ease;
}

.actualites.is-visible {
	opacity: 1;
}

/* Bloc « à la une » : grande image + infos (réutilisé sur l'accueil et l'archive). */
.actualite-featured {
	display: grid;
	/* Inversé : INFOS à gauche (1fr), IMAGE à droite (part AGRANDIE du conteneur → la « une »
	   occupe plus de place). L'ordre du DOM (image puis infos) est repositionné via `order`. */
	grid-template-columns: minmax(0, 1fr) 62%;
	gap: 3rem;
	align-items: start;
	margin-bottom: 4.5rem;
}

/* Infos à la une : à GAUCHE, alignées en haut de l'image ; le texte sur plusieurs
   lignes suit la marge GAUCHE de la page. */
.actualite-featured-info {
	order: 1;            /* colonne de gauche */
	text-align: left;
}

.actualite-featured .actualite-thumb {
	order: 2;            /* colonne de droite (image) */
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--img-radius); /* coins arrondis transparents (pas de fond) */
}

.actualite-featured .actualite-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.actualite-featured .actualite-title {
	/* Aligné sur le titre de la fiche News correspondante (.actualite-single-title) :
	   même taille (D3), même interligne et même marge → continuité visuelle du titre
	   entre la « une » du listing et l'article. Graisse (400) et police (display)
	   déjà identiques via les règles de base. */
	font-size: var(--fs-d3);
	line-height: 1.08;
	margin: 0 0 1rem;
}

.actualite-featured .actualite-title a {
	color: inherit;
	transition: color 0.2s ease;
}

.actualite-featured .actualite-title a:hover {
	color: var(--color-accent);
}

/* Méta de la « une » alignées sur celles de la fiche News (.actualite-single-header)
   pour une continuité listing ↔ article : le sous-titre reprend la taille PARTAGÉE
   (H4 — plus de surcharge H3 propre à la une), et dates/lieu passent en H4 (au lieu
   du H5 des cartes). */
.actualite-featured .actualite-dates,
.actualite-featured .actualite-lieu {
	font-size: var(--fs-h4);
}

/* Description courte : court paragraphe éditorial affiché seulement à la une
   (menant vers le bouton « En savoir plus »). Corps de texte lisible, un cran
   sous les méta, avec un léger dégagement au-dessus. */
.actualite-featured .actualite-description {
	font-family: var(--font-display); /* corps du site (EB Garamond) */
	font-style: italic;
	font-size: var(--fs-h3);
	line-height: 1.45;
	opacity: 0.85;
	max-width: 46ch;
	margin: 1.25rem 0 0;
}

/* Grille des publications suivantes : 3 colonnes en desktop. */
.actualites-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem 2.5rem;
}

/* Carte (version réduite du bloc à la une), entièrement cliquable. */
.actualite-card {
	display: block;
	color: var(--color-text);
}

.actualite-card .actualite-thumb {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--img-radius); /* coins arrondis transparents (pas de fond) */
	margin-bottom: 1.25rem;
}

.actualite-card .actualite-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.actualite-card .actualite-title {
	font-size: var(--fs-h2);
	margin-bottom: 0.4rem;
	transition: color 0.2s ease;
}

.actualite-card:hover .actualite-title {
	color: var(--color-accent);
}

/* Méta partagées (sous-titre, dates, lieu) : à la une, cartes et fiche single. */

/* Sous-titre : taille de CORPS (H2). Il était à H4 — la taille des légendes et des
   dates —, donc illisible sous un titre en D3 et impossible à distinguer des méta
   en capitales qui le suivent. H4 × φ = 0.86 × 1.618 ≈ 1.40rem : la remontée tombe
   PILE sur H2, soit deux pas √φ de l'échelle, sans introduire de valeur hors canon. */
.actualite-soustitre {
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--fs-h2);
	opacity: 0.85;
	margin: 0 0 0.5rem;
}

/* Exception des cartes du listing : leur titre est déjà à H2 ; le sous-titre y reste
   donc un pas √φ en dessous (H3), pour ne pas peser autant que le titre. À la une et
   sur la fiche, le titre est en D3 : le sous-titre garde la taille de corps. */
.actualite-card .actualite-soustitre {
	font-size: var(--fs-h3);
}

.actualite-dates,
.actualite-lieu {
	font-family: var(--font-ui);
	font-size: var(--fs-h5);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.6;
	margin: 0 0 0.25rem;
}

/* Lien « En savoir plus » texte (fiche single actualité). NB : dans la section News
   (bloc à la une), ce lien est un BOUTON identique à « Enquire » → cf. .actualite-more-btn. */
.actualite-more {
	display: inline-block;
	margin-top: 1.5rem;
	font-family: var(--font-ui);
	font-size: var(--fs-h5);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent);
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

/* « En savoir plus » de la section News : bouton (.gl-button .oeuvre-enquire) — seul
   l'espacement au-dessus est propre ici (le bouton n'a pas de marge haute). */
.actualite-more-btn {
	margin-top: 1.5rem;
}

.actualites-empty {
	text-align: center;
	opacity: 0.7;
}

/* Mobile : l'accueil est un ÉCRAN UNIQUE, sans défilement — le hero plein écran
   (carrousel, logo/menu, légende, bandes noires) EST la page, comme le site de
   référence. Ni l'aperçu Actualités ni le pied de page global ne sont accessibles ;
   le tap sur le hero mène à la vraie page Journal (cf. front-page.js), seul chemin
   vers les actualités depuis le mobile. Même principe de « vue verrouillée » que la
   Collection desktop (body.post-type-archive-oeuvre, cf. style.css).
   EXCEPTION tablette en paysage (1024–1280px) : l'accueil s'y comporte comme sur bureau
   (défilement normal, aperçu Actualités et pied de page visibles) — seule la barre de
   navigation y reste mobile (bouton « Menu »), cf. style.css (bloc header/nav, inchangé).
   Le pied de page, lui, GARDE sa mise en page mobile empilée à ce seuil (cf. style.css,
   bloc @media max-width:1280px non touché) : simplement, il redevient visible au lieu
   d'être masqué. */
@media (max-width: 1280px) and (not ((min-width: 1024px) and (orientation: landscape))) {
	/* html ET body : en mode standards, c'est <html> qui porte le scroll — verrouiller
	   seulement body.home laisse window.scrollTo()/le rebond iOS déplacer la page. */
	html:has(.snap-container) {
		height: 100vh;
		overflow: hidden;
	}
	body.home {
		height: 100vh;
		overflow: hidden;
	}
	/* Fond de page NOIR PUR (invisible : le hero plein écran le recouvre entièrement) —
	   sert uniquement à donner la bonne couleur à .glc-bar-tint (accent Safari) et aux
	   bandes de sécurité ci-dessus. LES QUATRE stops : body::before (style.css) peint un
	   dégradé RADIAL complet (--color-bg-1 au centre → -4 au bord) ; ne noircir QUE le
	   4e stop laissait les teintes chaudes du centre (--color-bg-1, brique/rouge) visibles
	   là où le point focal retombe (bas de l'écran pour ce gabarit) — d'où le rouge
	   aperçu au tap/pendant le fondu d'entrée, avant que la photo ne recouvre le dégradé.
	   Deux classes (comme le body réel) pour l'emporter sur body.glc-grad-front-page
	   { --color-bg-1..4: ... } à spécificité égale sinon. */
	body.home.glc-grad-front-page {
		--color-bg-1: #000;
		--color-bg-2: #000;
		--color-bg-3: #000;
		--color-bg-4: #000;
		/* Le fond mobile est un dégradé en hex codés en dur (--glc-grad-image, style.css) :
		   il ignore --color-bg-*. On le supprime ici pour que le canvas — donc les barres
		   de Safari — reste noir pur. */
		--glc-grad-image: none;
	}
	body.home > .site-footer {
		display: none;
	}
	.actualites {
		display: none;
	}
}

/* Mobile (≤1280px, comme la Collection) : UNE colonne → chaque actualité est une GRANDE
   vignette pleine largeur, plutôt qu'une petite carte en grille. (S'applique à la page
   Journal, à TOUT seuil ≤1280px, tablette en paysage comprise — le Journal n'entre pas
   dans l'exception tablette. Sur l'accueil, `body:not(.home)` exclut cette règle : la
   section y est soit masquée [mobile réel, cf. bloc ci-dessus] soit en mode desktop
   3 colonnes, la valeur par défaut hors media query, ci-dessous [tablette en paysage].) */
@media (max-width: 1280px) {
	body:not(.home) .actualites-grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

@media (max-width: 880px) {
	.hero-legend {
		/* var(--header-padding-side), pas un rem fixe : c'est la RÉFÉRENCE de cadrage
		   mobile/tablette unique (cf. style.css:2561 et suivants) — gauche/droite du
		   header (logo/menu), haut, et ici bas-gauche de la légende doivent tomber sur
		   la même valeur, pour un cadre uniforme des 4 bords à tout seuil ≤1280px. */
		left: var(--header-padding-side);
		/* + env(safe-area-inset-bottom) : même recette que .site-footer (style.css) et
		   que la bande noire .hero::after ci-dessus (ligne ~156), qui peint déjà cette
		   zone en bas de l'écran. Sans ce terme, l'offset restait FIXE : sur un viewport
		   où cette zone hors-page est haute (geste Android, home indicator iOS…), la
		   légende retombait dedans au lieu de rester au-dessus. Avec env(), le padding
		   part toujours du bord RÉELLEMENT visible, quelle que soit la hauteur de la bande. */
		bottom: calc(var(--header-padding-side) + env(safe-area-inset-bottom, 0px));
	}

	.actualite-featured {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		margin-bottom: 3rem;
	}
	/* « Une » mobile AGRANDIE : image pleine largeur ET plus HAUTE (4/3) que les cartes
	   (16/10) → la publication à la une occupe visiblement plus de place. */
	.actualite-featured .actualite-thumb {
		aspect-ratio: 4 / 3;
	}
	/* Une seule colonne : on rétablit l'ordre du DOM (image en haut, infos dessous). */
	.actualite-featured .actualite-thumb,
	.actualite-featured-info {
		order: 0;
	}
	/* (.actualites-grid déjà en 1 colonne dès ≤1280px, cf. plus haut.) */
}

/* ======================================================================
   FICHE ACTUALITÉ (refonte) : en-tête façon légende d'accueil, slider
   « Œuvres exposées », et section « About » en deux colonnes.
   ====================================================================== */

/* En-tête : Titre (Garamond) + dates + lieu (méta capitales), comme l'accueil.
   Pas d'image à la une ici (elle ne sert que de vignette). */
.actualite-single-header {
	max-width: 52rem;
	margin: 0 0 2.5rem;
}

.actualite-single-header .actualite-single-title {
	font-family: var(--font-display);
	font-size: var(--fs-d3); /* titre de fiche News réduit d'un cran (D2 → D3) */
	line-height: 1.08;
	font-weight: 400;
	margin: 0 0 1rem;
}

.actualite-single-header .actualite-dates,
.actualite-single-header .actualite-lieu {
	font-size: var(--fs-h4);
	opacity: 0.7;
	margin: 0.25rem 0 0;
}

/* --- Slider « Œuvres exposées » (bloc galerie-lamy/works-exhibited) --- */
.works-exhibited {
	margin: 4rem 0;
}

.works-exhibited .we-title {
	font-family: var(--font-ui);
	font-size: var(--fs-h4); /* section « Related works » : un cran plus grand (H5 → H4) */
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.6;
	margin: 0 0 1.5rem;
}

.we-frame {
	/* --we-h posé ICI (pas seulement sur .we-slide, cf. plus bas) : c'est l'ANCÊTRE commun
	   à .we-viewport ET .we-nav, donc la seule portée où la custom property est utilisable
	   des DEUX côtés (une déclaration sur .we-slide seul ne serait pas héritée par .we-nav,
	   son frère hors de .we-viewport). */
	--we-h: clamp(220px, 26vw, 340px);
	display: flex;
	/* start, PAS center : centrer sur le cadre centrerait les flèches sur image + légende
	   (.we-slide-title, en dessous de chaque vignette) et les ferait tomber plus bas que
	   l'image elle-même. On les recale à la main (margin-top ci-dessous, cf. .we-nav) sur
	   la SEULE hauteur de l'image (--we-h, fixe — contrairement à Créations où la vignette
	   est en ratio fluide, cf. alignNav(), assets/js/actualite.js : ici pas besoin de JS,
	   --we-h suffit en CSS pur). */
	align-items: flex-start;
	gap: 0.75rem;
}

.we-viewport {
	flex: 1 1 auto;
	overflow: hidden;
}

.we-track {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
	padding-bottom: 0.25rem;
}
.we-track::-webkit-scrollbar { /* Chrome/Safari */
	display: none;
}

.we-slide {
	/* Largeur de la diapo = hauteur × ratio de l'image → la diapo prend la largeur de
	   l'image (verticale = étroite, horizontale = large), sans recadrage. --we-h (héritée
	   de .we-frame, cf. plus haut) est partagée avec l'image ci-dessous ; --we-ratio est
	   posé en ligne par render.php. */
	flex: 0 0 auto;
	width: calc(var(--we-h) * var(--we-ratio, 1));
	scroll-snap-align: start;
	text-decoration: none;
	color: var(--color-text);
}

/* Vignette = IMAGE SEULE (le titre est en légende dessous, cf. .we-slide-title). */
.we-slide-media {
	position: relative;
	display: block;
	width: 100%;
	height: var(--we-h);
	overflow: hidden;
	border-radius: var(--img-radius);
	transition: box-shadow 0.2s ease; /* survol : ombre externe (cf. ci-dessous) */
}

/* Survol d'une œuvre exposée / liée : même ombre externe discrète que la galerie
   Collection — uniquement l'ombre externe (pas de dégradé/ombre interne).
   Réservé aux pointeurs FINS (souris) : sur écran tactile, :hover « colle » après un
   tap et fige l'ombre → on le désactive via @media (hover: hover). */
@media (hover: hover) {
	.we-slide-media:hover {
		box-shadow: var(--img-hover-shadow);
	}
}

.we-slide-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover; /* ratio du cadre = ratio de l'image → aucun rognage réel */
}

/* Légende sous la vignette : TITRE de l'œuvre (1re ligne du cartel = désignation), en
   EB Garamond (var(--font-display)). Calée à GAUCHE (défaut), largeur = celle de la
   vignette (le texte s'enroule dedans). Accent au survol/focus, comme les autres liens d'œuvre. */
.we-slide-title {
	display: block;
	margin-top: 0.7rem;
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	line-height: 1.3;
	text-align: left;
	color: inherit;
}

/* Accent au focus clavier : toujours actif (accessibilité). */
.we-slide:focus-visible .we-slide-title {
	color: var(--color-accent);
}
/* Accent au survol : pointeurs FINS uniquement (cf. ombre ci-dessus) → pas d'effet
   « collé » au tap sur écran tactile. */
@media (hover: hover) {
	.we-slide:hover .we-slide-title {
		color: var(--color-accent);
	}
}

/* Flèches de navigation (chevron CSS fin, comme le bouton Retour des œuvres). */
.we-nav {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	/* Centre le bouton (2.5rem) sur --we-h (hauteur de l'image), pas sur le cadre entier
	   (.we-frame est en align-items:flex-start désormais, cf. plus haut) — sinon la légende
	   sous chaque vignette pousse le centrage réel plus bas que l'image. */
	margin-top: calc((var(--we-h) - 2.5rem) / 2);
	padding: 0;
	background: transparent;
	color: var(--color-text);
	border: 0;              /* flèche SIMPLE, sans cercle (comme lightbox / Retour) */
	cursor: pointer;
	transition: color 0.2s ease, opacity 0.2s ease;
}
.we-nav:hover:not([disabled]) {
	color: var(--color-accent);
}
.we-nav[disabled] {
	opacity: 0.25;
	cursor: default;
}
.we-no-nav .we-nav {
	display: none; /* tout tient dans le cadre → pas de flèches */
}

.we-chevron {
	display: inline-block;
	width: 0.85rem;
	height: 0.85rem;
	border-left: var(--chevron-weight) solid currentColor;
	border-bottom: var(--chevron-weight) solid currentColor;
	transform: rotate(45deg); /* pointe à gauche (prev) */
}
.we-next .we-chevron {
	transform: rotate(-135deg); /* pointe à droite (next) */
}

/* --- Section « About » (pattern deux colonnes) --- */
.actualite-about {
	margin: 3.5rem 0;
	gap: 4rem;
}

.about-subtitle {
	font-family: var(--font-ui);
	font-size: var(--fs-h5);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 400;
	opacity: 0.6;
	margin: 0 0 1rem;
}

@media (max-width: 1280px) {
	.actualite-about {
		gap: 2rem;
	}
	/* Mobile : vignettes « Related works » PLUS PETITES (hauteur réduite ; la largeur suit
	   toujours le ratio via --we-h). Le titre est resserré pour rester proportionné. */
	.we-slide {
		--we-h: clamp(150px, 34vw, 240px);
	}
	.we-slide-title {
		font-size: var(--fs-h3);
		margin-top: 0.5rem;
	}
}