/*
 * ŒUVRES MAJEURES (master pieces) — template single-oeuvre-majeure.php.
 *
 * Image mise en avant PROMINENTE (bornée, centrée, plus en plein écran). Le CARTEL (marge
 * GAUCHE, collant) est superposé à son bas-gauche au départ puis s'épingle dans la marge en
 * défilant (transition liée au scroll, pur sticky ; le « soulèvement » initial est posé en JS).
 * Corps en trois colonnes : cartel (gauche) · lecture (centre) · notes en regard (droite).
 * Marges des fiches œuvres (var(--page-padding)), logo NORMAL (se réduit au scroll, header.js).
 * Tout est scopé à body.oeuvre-majeure → inerte ailleurs (assets chargés globalement).
 */

/* --- IMAGE MISE EN AVANT : PROMINENTE mais plus en plein écran. Centrée, bornée en hauteur,
   au-dessus du texte, DANS les marges normales des fiches œuvres (var(--page-padding)). Le
   cartel (rail gauche) vient se superposer à son bas-gauche au chargement (soulèvement posé
   par masterpiece.js) puis s'épingle dans la marge en défilant. --- */
.mp-hero {
	/* Marge gauche = --page-padding ; marge DROITE alignée sur la fin de « Contact »
	   (--marge-site-right), comme .mp-body et le reste du site. Ordre : haut · droite ·
	   bas · gauche. Une image qui remplit la largeur touche donc pile la fin de Contact ;
	   une image bornée en hauteur reste centrée dans cette boîte. */
	padding: calc(var(--header-height) + var(--nav-gap)) var(--marge-site-right) 0 var(--page-padding);
	text-align: center; /* image centrée dans les marges */
}

.mp-hero-media {
	display: inline-block;
	max-width: 100%;
}

.mp-hero-media img.mp-hero-img {
	display: block;
	max-width: 100%;
	max-height: 78vh;      /* prominente, mais l'écran n'est plus entièrement occupé */
	width: auto;
	height: auto;
	margin: 0 auto;
	object-fit: contain;   /* l'œuvre est montrée ENTIÈRE, à l'honneur */
	border-radius: var(--img-radius); /* arrondi standard du site (image plus plein cadre) */
}

/* --- CORPS : rail cartel (GAUCHE) · lecture (centre) · notes en regard (DROITE), DANS les
   marges normales des fiches œuvres (var(--page-padding)) → tout tient dans ces marges.
   Colonnes latérales resserrées pour laisser respirer la colonne de lecture. --- */
.mp-body {
	display: grid;
	grid-template-columns: [rail] minmax(12rem, 17rem) [main] minmax(0, 1fr) [notes] minmax(12rem, 17rem);
	column-gap: clamp(2rem, 3.5vw, 3.5rem);
	align-items: start;
	/* Marge gauche = --page-padding ; marge DROITE alignée sur la fin de « Contact »
	   (--marge-site-right), comme .content-wrap. Ordre : haut · droite · bas · gauche. */
	padding: 2.5rem var(--marge-site-right) 4rem var(--page-padding);
}

/* Colonne centrale = lecture. Les visuels Gutenberg ne sont jamais étirés. */
.mp-main {
	min-width: 0;
}
.mp-main img {
	height: auto;
}

/* --- Marge GAUCHE : rail cartel COLLANT. Au départ « soulevé » (margin-top négatif posé
   par masterpiece.js = hauteur du rail + marge) pour se superposer au BAS DU HERO, façon
   légende d'accueil ; en défilant, il remonte et s'ÉPINGLE dans la marge → transition liée
   au scroll, pur CSS sticky. Texte clair + ombre : lisible sur l'image ET sur le dégradé. */
.mp-rail {
	position: sticky;
	/* Épinglé sous le header, exactement comme le cartel des fiches œuvres classiques
	   (le logo se réduit désormais au scroll → comportement normal). */
	top: calc(var(--header-height) + 1.5rem);
	z-index: 5; /* au-dessus de l'image pendant la superposition initiale */
	align-self: start;
	font-family: var(--font-ui);
	color: var(--color-text);
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}

/* Bouton Retour : APPARAÎT une fois le hero dépassé (sans place réservée avant → n'entre pas
   dans la hauteur qui sert à calculer la superposition sur le hero). */
.mp-back {
	display: inline-flex;
	opacity: 0;
	height: 0;
	overflow: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.mp.is-past-hero .mp-back {
	opacity: 1;
	height: auto;
	margin-bottom: 0.6rem;
	pointer-events: auto;
}

.mp-rail-cartel {
	margin-bottom: 1.5rem;
}

.mp-rail-cartel h1,
.mp-rail-cartel h2 {
	font-family: var(--font-display);
	font-size: var(--fs-title-fluid);
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 0.6rem;
}
/* Cartel (specs/provenance/biblio) : Garamond grisé (romain), même style que le rail des
   fiches œuvres classiques (.oeuvre-rail p) — couleur reprise du sous-texte Contact
   (.glc-news-sub). Le titre (h1/h2 ci-dessus) reste en Garamond non grisé. */
.mp-rail-cartel p {
	font-family: var(--font-display);
	font-size: var(--nav-size);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.5);
	margin: 0 0 0.6rem;
}
.mp-rail-cartel :last-child {
	margin-bottom: 0;
}
.mp-rail-cartel .oeuvre-subtitle {
	margin: 1rem 0 0.6rem;
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	/* En-têtes (labels) : pleine couleur — pas le gris du cartel. */
	color: var(--color-text);
}

/* --- Marge DROITE : notes en regard (façon Cairn), positionnées en JS --- */
.mp-notes {
	position: relative; /* repère des notes absolues posées par masterpiece.js */
	min-height: 100%;
}

.mp-note {
	position: absolute;
	left: 0;
	width: 100%;
	font-family: var(--font-ui);
	font-size: var(--fs-h4);
	line-height: 1.45;
	opacity: 0.72;
	transition: opacity 0.2s ease, top 0.2s ease;
}
.mp-note:hover,
.mp-note.is-active {
	opacity: 1;
}
.mp-note-num {
	color: var(--color-accent);
	margin-right: 0.35em;
	font-variant-numeric: tabular-nums;
}

/* Sur les œuvres majeures, l'appel de note NE déclenche PAS l'infobulle (notes en regard) :
   cf. masterpiece.js (body.mp-notes-on). */

/* --- Responsive : sous 1280px, une seule colonne, rail sous le contenu (non soulevé),
   notes masquées (repli sur l'infobulle native, réactivée par masterpiece.js). --- */
@media (max-width: 1280px) {
	.mp-hero {
		padding: calc(var(--header-height) + 1.5rem) var(--header-padding-side) 0;
	}
	.mp-hero-media img.mp-hero-img {
		max-height: 62vh;
	}
	.mp-body {
		grid-template-columns: 1fr;
		row-gap: 2.5rem;
		padding: clamp(2rem, 6vh, 4rem) var(--header-padding-side) 4rem;
	}
	.mp-rail {
		position: static;
		margin-top: 0 !important; /* annule la superposition posée en JS */
		z-index: auto;
		text-shadow: none;
	}
	.mp-back {
		opacity: 1;
		height: auto;
		pointer-events: auto;
	}
	.mp-notes {
		display: none;
	}
}