/*
 * Sections sur image de fond, comme sur le site actuel : textes blancs, titres de section,
 * grandes phrases (h3), bandeau de page, bords en vagues (formes reprises de Divi).
 */
.wp-block-cover {
	--vague-haut: url("data:image/svg+xml,%3Csvg viewBox='0 0 1280 140' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M0 51.76c36.21-2.25 77.57-3.58 126.42-3.58 320 0 320 57 640 57 271.15 0 312.58-40.91 513.58-53.4V0H0z' fill-opacity='.3'/%3E%3Cpath d='M0 24.31c43.46-5.69 94.56-9.25 158.42-9.25 320 0 320 89.24 640 89.24 256.13 0 307.28-57.16 481.58-80V0H0z' fill-opacity='.5'/%3E%3Cpath d='M0 0v3.4C28.2 1.6 59.4.59 94.42.59c320 0 320 84.3 640 84.3 285 0 316.17-66.85 545.58-81.49V0z'/%3E%3C/g%3E%3C/svg%3E");
	--vague-bas: url("data:image/svg+xml,%3Csvg viewBox='0 0 1280 140' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M1280 3.4C1050.59 18 1019.4 84.89 734.42 84.89c-320 0-320-84.3-640-84.3C59.4.59 28.2 1.6 0 3.4V140h1280z' fill-opacity='.3'/%3E%3Cpath d='M0 24.31c43.46-5.69 94.56-9.25 158.42-9.25 320 0 320 89.24 640 89.24 256.13 0 307.28-57.16 481.58-80V140H0z' fill-opacity='.5'/%3E%3Cpath d='M1280 51.76c-201 12.49-242.43 53.4-513.58 53.4-320 0-320-57-640-57-48.85.01-90.21 1.35-126.42 3.6V140h1280z'/%3E%3C/g%3E%3C/svg%3E");

	& .wp-block-cover__inner-container {
		color: var(--wp--preset--color--blanc);
	}

	& :is(h1, h2, h3, h4) {
		color: var(--wp--preset--color--blanc);
	}

	/* Titre de section sur image : 50 px. */
	& h2 {
		font-size: clamp(2rem, 3.5vw, 3.125rem);
		line-height: 1;
	}

	/* Grande phrase sur image : Urbanist 500, 32 px, ombre douce. */
	& h3 {
		font-family: var(--wp--preset--font-family--texte);
		font-size: clamp(1.5rem, 2.3vw, 2rem);
		font-weight: 500;
		line-height: 1.2;
		text-shadow: 0 0 0.3em rgb(0 0 0 / 40%);
	}
}

/*
 * Couverture pleine largeur : sur les côtés, la marge du site (celle des autres sections), et
 * pas le 1 em de WordPress, qui collait presque le texte au bord sur tablette et téléphone.
 */
.wp-block-cover.alignfull {
	padding-inline: max(1em, var(--wp--style--root--padding-left, 1em));
}

/* Comme une section Divi : la hauteur vient du contenu et des marges, pas d'un minimum. */
.wp-block-cover:not([style*="min-height"]) {
	min-height: 0;
	padding-block: clamp(2.5rem, 4vw, 3.5rem);
}

/* Bandeau de page : titre League Spartan 800 en capitales, ombre encre. */
.wp-block-cover.is-style-bandeau {
	padding-block: 5vw;
	text-align: center;

	& h1 {
		margin-inline: auto;
		max-width: none;
		font-size: clamp(2.5rem, 5vw, 4.5rem);
		font-weight: 600;
		line-height: 1.1;
		text-transform: uppercase;
		text-shadow: 0.08em 0.08em 0.08em var(--wp--preset--color--encre);
	}

	& p {
		font-family: var(--wp--preset--font-family--titres);
		font-size: clamp(1.125rem, 1.7vw, 1.5rem);
		line-height: 1.2;
		text-shadow: 0.08em 0.08em 0.08em var(--wp--preset--color--encre);
	}
}

/* Vagues : la forme blanche mange le haut et le bas de l'image. */
.wp-block-cover:is(.is-style-vagues, .is-style-vague-haut)::before,
.wp-block-cover.is-style-vagues::after {
	position: absolute;
	inset-inline: 0;
	z-index: 1;
	height: clamp(3rem, 7vw, 6.25rem);
	pointer-events: none;
	content: "";
	background-size: 100% 100%;
}

.wp-block-cover:is(.is-style-vagues, .is-style-vague-haut)::before {
	top: 0;
	background-image: var(--vague-haut);
}

.wp-block-cover.is-style-vagues::after {
	bottom: 0;
	background-image: var(--vague-bas);
}

.wp-block-cover:is(.is-style-vagues, .is-style-vague-haut) {
	padding-block: clamp(4rem, 9vw, 8rem);
}

/* Héros de l'accueil : texte centré, ombre portée nette sous le titre. */
.wp-block-cover.is-style-heros {
	text-align: center;

	& :is(h1, p) {
		text-shadow: 0 0.08em 0 rgb(0 0 0 / 40%);
	}
}

/* Encadré blanc translucide sur une image : le texte repasse en encre, sans ombre. */
.wp-block-cover .airfins-encadre-clair {
	color: var(--wp--preset--color--texte);

	& :is(h1, h2, h3, h4) {
		color: var(--wp--preset--color--encre);
		text-shadow: none;
	}
}

/* Flèche du héros vers la suite de la page, comme sur le site actuel. */
.wp-block-cover.is-style-heros .wp-block-cover__inner-container {
	position: static;

	/* Sans position, le conteneur passerait sous l'image de fond : son contenu reste devant. */
	& > :not(.airfins-defiler) {
		position: relative;
		z-index: 1;
	}
}

.wp-block-cover .airfins-defiler {
	position: absolute;
	bottom: 1.5rem;
	left: 50%;
	z-index: 2;
	margin: 0;
	transform: translateX(-50%);

	& a {
		display: block;
		width: 3rem;
		height: 3rem;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23fff' stroke-width='2.5'%3E%3Ccircle cx='24' cy='24' r='21'/%3E%3Cpath d='m15 20 9 9 9-9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	}
}

/*
 * Téléphone : comme le site actuel, l'accueil montre un autre héros, et cache la section
 * « expérience » et deux images. Au-delà, le héros de téléphone est caché.
 */
@media (width <= 767px) {
	.airfins-cache-mobile {
		display: none !important;
	}
}

@media (width > 767px) {
	.airfins-mobile-seulement {
		display: none !important;
	}
}

/*
 * Carte cliquable (gammes de l'accueil) : le lien du bouton s'étend à toute la carte, et le
 * voile fonce de 20 % au survol. Pour que le lien couvre la carte, le contenu perd sa
 * position ; l'image et le voile passent alors sous lui (z-index négatifs dans la carte).
 */

/*
 * Cartes côte à côte (gammes de l'accueil) : même hauteur, même quand le texte du bouton
 * passe sur deux lignes dans l'une d'elles.
 */
.wp-block-column:has(> .airfins-carte-lien) {
	display: flex;
	flex-direction: column;

	& > .airfins-carte-lien {
		flex: 1;
	}
}

.wp-block-cover.airfins-carte-lien {
	isolation: isolate;

	& .wp-block-cover__image-background {
		z-index: -2;
	}

	& .wp-block-cover__background {
		z-index: -1;
		box-shadow: inset 0 0 0 100vmax rgb(0 0 0 / 0%);
		transition: box-shadow 0.3s;
	}

	&:is(:hover, :focus-within) .wp-block-cover__background {
		box-shadow: inset 0 0 0 100vmax rgb(0 0 0 / 20%);
	}

	& :is(.wp-block-cover__inner-container, .wp-block-buttons, .wp-block-button, .wp-block-button__link) {
		position: static;
	}

	& .wp-block-button__link::before {
		position: absolute;
		inset: 0;
		content: "";
	}
}

/* Encadré blanc sur une image : les liens repassent aux couleurs d'un fond clair. */
.wp-block-cover .airfins-encadre-clair a:not(.wp-element-button) {
	color: var(--wp--preset--color--ocean);

	&:is(:hover, :focus-visible) {
		color: var(--wp--preset--color--lagon);
	}
}