/* ==========================================================================
   Fiche œuvre (single-oeuvre.php).

   Panneau de couleur (--fiche-fond, réglable par œuvre) : 120 % de la hauteur d’écran,
   depuis le haut de la page (derrière le header), coins arrondis ; il coupe le premier média.
   Contenu : blocs Gutenberg au rythme de la maquette (105 px entre médias, colonnes à 106 px).
   ========================================================================== */

/* ---------- Header au-dessus du panneau ---------- */
.single-oeuvre .header:not(.header--compact) .header__barre {
	background: transparent;
}

.fiche-sombre .header:not(.header--compact) {
	color: var(--c-white);

	& .header__logo-img,
	& .header__logo-survol {
		filter: invert(1);
	}

	& .burger {
		color: var(--c-white);
	}
}

/* ---------- Panneau ---------- */
/* Positionné par rapport à la page (aucun ancêtre positionné) : il part du haut, sous le header. */
.fiche__fond {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: -1;
	height: var(--fiche-fond-h);
	border-radius: var(--radius-panel);
	background: var(--fiche-fond);
}

/* ---------- Corps : jamais plus court que le panneau (la navigation reste sur fond blanc) ---------- */
.fiche__corps {
	min-height: calc(var(--fiche-fond-h) - var(--header-h));
}

/* ---------- En-tête ---------- */
.fiche__intro {
	padding-top: var(--fiche-pad-top);
}

.fiche__texte {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	grid-column: 1 / 8;
	grid-row: 1;
	padding-top: var(--fiche-texte-haut);
}

/* Thème en Display blanc ; le titre de l'œuvre vient mordre dessus. */
.fiche__theme {
	margin-left: var(--hero-titre-decalage);
	color: var(--c-white);
	transition: opacity var(--t-hover);

	&:hover {
		opacity: 0.7;
	}
}

.fiche__titre {
	position: relative;
	margin-top: var(--fiche-titre-haut);
	font-family: var(--ff-serif);
	font-style: italic;
	font-weight: var(--fw-medium);
	font-size: var(--fs-accroche);
	line-height: var(--lh-accroche);
}

.fiche__caracs {
	margin-top: var(--fiche-caracs-haut);
	font-size: var(--fs-legende);
	line-height: var(--lh-legende);
	color: var(--c-grey);
}

.fiche__description {
	max-width: var(--hero-accroche-w);
	margin-top: var(--fiche-desc-haut);

	& p + p {
		margin-top: 1lh;
	}
}

/* « Voir plus » : calé en bas de la colonne, à hauteur du bas de l'image. */
.fiche__cta {
	margin-top: auto;
	padding-top: var(--space-l);
	margin-bottom: var(--fiche-cta-bas);
}

.fiche__image {
	grid-column: 8 / -1;
	grid-row: 1;
	align-self: start;
}

.fiche__image-img {
	width: 100%;
	height: auto;
}

/* Fond sombre : textes en blanc. */
.fiche--sombre {
	& .fiche__titre,
	& .fiche__description,
	& .fiche__cta {
		color: var(--c-white);
	}

	& .fiche__cta .lien-fleche__fleche {
		color: var(--c-white);
	}

	& .fiche__caracs {
		color: var(--c-grey-light);
	}
}

/* ---------- Contenu (blocs) ---------- */
/* Espacement entre blocs : gap flex plutôt que marges entre voisins (« * + * »),
   qui compteraient aussi les éléments invisibles (<style>, <script> injectés). */
.fiche__contenu {
	display: flex;
	flex-direction: column;
	gap: var(--fiche-gap);
	margin-top: var(--fiche-contenu-haut);
	scroll-margin-top: var(--space-l);

	& > *,
	& .wp-block-column > * {
		margin-block: 0;
	}

	& .wp-block-columns {
		gap: var(--fiche-gap-colonnes);
		margin-bottom: 0;
	}

	& .wp-block-column {
		display: flex;
		flex-direction: column;
		gap: var(--fiche-gap);
	}

	& .wp-block-image,
	& .wp-block-video,
	& .wp-block-embed {
		margin: 0;
	}

	& .wp-block-image img,
	& .wp-block-video video {
		display: block;
		width: 100%;
		height: auto;
	}

	& .wp-block-video {
		position: relative;
	}

	/* Colonnes « Hauteurs égales » (case du bloc Colonnes, editor-colonnes.js) :
	   images et vidéos recadrées au format de la maquette (725 × 920).
	   Case décochée : chaque média garde le format choisi dans son propre bloc.
	   Images : format sur l'image elle-même (la légende éventuelle reste visible).
	   Vidéos sans légende : format porté par le bloc, que la vidéo remplit (Safari ignore
	   aspect-ratio sur une <video> en hauteur automatique).
	   !important : WordPress écrit en style en ligne le ratio choisi dans le bloc Image. */
	& .is-hauteurs-egales {
		& .wp-block-image img {
			aspect-ratio: var(--fiche-ratio-demi) !important;
			object-fit: cover;
		}

		& .wp-block-video:not(:has(figcaption)) {
			aspect-ratio: var(--fiche-ratio-demi);
			overflow: hidden;

			& video {
				position: absolute;
				inset: 0;
				height: 100%;
				aspect-ratio: auto !important;
				object-fit: cover;
			}
		}
	}

	& .wp-block-embed__wrapper iframe {
		width: 100%;
	}

	& .wp-block-image figcaption,
	& .wp-block-video figcaption {
		margin-top: var(--space-xs);
		font-size: var(--fs-legende);
		line-height: var(--lh-legende);
		color: var(--c-grey);
	}

	/* Textes : même largeur de lecture que la description. */
	& > p,
	& > h2,
	& > h3,
	& > ul,
	& > ol {
		max-width: var(--hero-accroche-w);
	}

	& > h2,
	& > h3 {
		font-family: var(--ff-serif);
		font-style: italic;
		font-weight: var(--fw-medium);
		font-size: var(--fs-titre-section);
		line-height: var(--lh-titre-section);
	}

	/* Style de paragraphe « Citation » et bloc citation : FreightBig centré, comme sur l'accueil. */
	& .is-style-citation,
	& .wp-block-quote {
		max-width: var(--citation-w);
		margin-inline: auto;
		padding: 0;
		border: 0;
		font-family: var(--ff-serif);
		font-style: italic;
		font-weight: var(--fw-medium);
		font-size: var(--fs-accroche);
		line-height: var(--lh-accroche);
		text-align: center;
	}

	& .wp-block-quote cite {
		display: block;
		margin-top: var(--space-s);
		font-family: var(--ff-sans);
		font-style: normal;
		font-size: var(--fs-cta);
		text-transform: uppercase;
	}
}

/* ---------- Œuvres précédente / suivante ---------- */
.nav-oeuvres {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: var(--sep-h);
	margin-top: var(--fiche-nav-haut);
	margin-bottom: var(--fiche-nav-bas);
}

.nav-oeuvres__trait {
	height: 100%;
}

.nav-oeuvres__lien {
	position: relative;
	top: var(--fiche-nav-decalage);
}

.nav-oeuvres__lien--precedent {
	justify-self: end;
	margin-right: var(--fiche-nav-ecart);
}

.nav-oeuvres__lien--suivant {
	justify-self: start;
	margin-left: var(--fiche-nav-ecart);
}

/* ---------- Mobile ---------- */
@media (max-width: 767.98px) {
	.fiche__intro {
		display: flex;
		flex-direction: column;
	}

	.fiche__texte {
		display: contents;
	}

	.fiche__theme {
		margin-left: 0;
	}

	.fiche__description {
		max-width: none;
	}

	.fiche__image {
		order: 1;
		margin-top: var(--space-l);
	}

	.fiche__cta {
		order: 2;
		margin: var(--space-l) 0 0;
		padding-top: 0;
	}

	.fiche__contenu {
		gap: var(--space-l);
		margin-top: var(--space-xl);

		& .wp-block-columns,
		& .wp-block-column {
			gap: var(--space-l);
		}
	}

	.nav-oeuvres {
		margin-block: var(--space-xl);
	}

	.nav-oeuvres__lien--precedent {
		margin-right: var(--space-m);
	}

	.nav-oeuvres__lien--suivant {
		margin-left: var(--space-m);
	}
}