/*
Styles du bloc « En-tête de page » (blocks/page-header/).

Transposition de l'en-tête des pages et articles de l'ancien thème classique :
bandeau d'image en fond, signature pivotée à gauche, icône du contenu et bloc
de titre sur fond prune.
*/

/* Premier bloc de la page : le block-gap de wp-site-blocks laisserait une
   bande vide au-dessus de l'image. */
.wp-site-blocks > .page-header {
	margin-block-start: 0;
}

.page-header {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-block-end: var(--wp--preset--spacing--50);
	overflow-x: clip; /* la signature pivotée déborde à gauche */
}

/* Le bloc prune passe en premier, l'image mise en avant vient dessous. */
.page-header__side {
	order: 1;
}

.page-header__split {
	order: 2;
}

.page-header__bg {
	order: 3;
}

/* Les logos de l'en-tête se superposent au haut du bloc : on leur fait place.
   Empilés, ils mesurent environ 180 px. */
.page-header {
	padding-block-start: 180px;
}

/* ------------------------------------------- Image mise en avant, en fond */

.page-header__bg {
	position: relative;
	height: 38vh;
	overflow: hidden;
	top:-40px;
}

.page-header__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Le voile animé de l'original : un dégradé clair qui balaie l'image
   lentement. Décoratif, il s'efface si l'animation n'est pas voulue. */
.page-header__veil {
	position: absolute;
	inset: 0;
	background-size: 400% 400%;
	animation: page-header-veil 15s ease infinite;
	background-image: linear-gradient(
		-45deg,
		rgb(220 220 220 / 0.2),
		rgb(255 255 255 / 0.69),
		rgb(222 222 222 / 0.4),
		rgb(255 255 255 / 0.2),
		rgb(255 255 255 / 0.2)
	);
}

@keyframes page-header-veil {
	0%,
	100% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.page-header__veil {
		animation: none;
	}
}

/* --------------------------------------------------- La signature pivotée */

.page-header__side {
	position: relative;
	z-index: 1;
	text-align: center;
	color: var(--wp--preset--color--cloud);
}

.page-header__name,
.page-header__tag {
	margin: 0;
}

.page-header__name {
	font-size: 1.2em;
}

.page-header__name span {
	color: var(--wp--preset--color--plum);
	font-weight: 600;
	font-style: italic;
}

.page-header__tag {
	font-size: 0.9rem;
}

/* ------------------------------------------------ Icône, titre, sous-titre */

/* Fond partagé comme sur l'accueil : blanc à gauche, prune à droite. Sous
   782px il n'y a qu'une colonne, le prune prend tout. */
.page-header__split {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	background-image: linear-gradient(
		to right,
		var(--wp--preset--color--snow) 0%,
		var(--wp--preset--color--plum) 0%
	);
}

.page-header__wplogo {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 0;
	opacity: 0.9;
	pointer-events: none;
	display: none;
}

.page-header__icon {
	margin: 1rem auto;
	color: var(--wp--preset--color--snow);
}

.page-header__icon svg {
	width: auto;
	/* Sur petit écran, l'icône ne dépasse pas la moitié de la largeur. */
	height: min(var(--page-header-icon-size, 279px), 45vw);
	max-width: 100%;
	fill: currentColor;
}

.page-header__text {
	position: relative;
	z-index: 1;
	padding: 3vw 10vw 6vw;
	color: var(--wp--preset--color--snow);
}

.page-header__text a {
	color: var(--wp--preset--color--snow);
}

.page-header__title {
	margin-block: 0;
}

/* -------------------------------------------------------------- Desktop */

@media (min-width: 782px) {
	.page-header {
		padding-block-start: 0;
	}

	.page-header__bg {
		height: 55vh;
		clip-path: polygon(0 17%, 100% 0, 100% 83%, 0 100%);
	}

	/* Signature à la verticale le long du bord gauche, comme sur l'accueil. */
	.page-header__side {
		position: absolute;
		top: 34rem;
		left: 262px;
		z-index: 1;
		transform-origin: left center;
		rotate: -90deg;
		translate: -50% 0;
		text-align: right;
		white-space: nowrap;
	}

	.page-header__name {
		font-size: 1.75em;
	}

	.page-header__split {
		grid-template-columns: 1fr 1fr;
		margin-block-start: -140px;
	}

	/* Le bloc coiffe la page : il porte les logos superposés. */
	.page-header__split {
		margin-block-start: 0;
		padding-block-start: 130px;
		padding-block-end: 150px;
		background-image: linear-gradient(
			to right,
			var(--wp--preset--color--snow) 50%,
			var(--wp--preset--color--plum) 50%
		);
	}

	/* L'icône passe sur la moitié blanche : elle reprend la couleur du texte. */
	.page-header__icon {
		color: var(--wp--preset--color--aubergine);
	}

	.page-header__wplogo {
		display: block;
		top: -10px;
		right: -100px;
	}

	.page-header__wplogo svg {
		width: 250px;
		height: auto;
	}

	.page-header__icon {
		margin: auto;
	}

	.page-header__icon svg {
		height: var(--page-header-icon-size, 279px);
	}

	/* Le fond prune vient de bg-top.svg : le bloc n'a plus besoin du sien. */
	.page-header__text {
		margin: 5vw 6vw;
		padding: 0;
		background-color: transparent;
	}
}

@media (min-width: 782px) {

}