/*
 * Pages génériques (mentions légales, politique de confidentialité…).
 * Mise en forme sobre, indépendante des maquettes de sections.
 */

.l-page__header {
	padding-block: var(--space-3xl) var(--space-lg);
}

.l-page__title {
	max-width: 20ch;
	font-size: var(--fs-700);
}

.l-page__intro {
	max-width: 60ch;
	margin-top: var(--space-md);
	color: var(--color-grey);
	font-size: var(--fs-400);
}

.l-page__content {
	max-width: 780px;
	padding-bottom: var(--space-3xl);
}

.l-error {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-lg);
	padding-block: var(--space-4xl);
}

.l-error__title {
	font-size: var(--fs-700);
}


/* ==========================================================================
   Sections communes aux pages intérieures
   ==========================================================================
   Introduction en deux colonnes, bandeau illustré, blocs image + texte et
   contenu enrichi : ces motifs se répètent d'une page à l'autre, ils sont
   donc définis ici plutôt que dupliqués dans chaque feuille de page.
   ========================================================================== */

/* ==========================================================================
   Introduction
   ========================================================================== */

.s-intro {
	padding-block: 160px 96px;
}

.s-intro__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--space-2xl);
}

.s-intro__head {
	flex: 1 1 52%;
	min-width: 0;
}

.s-intro__title {
	margin: 12px 0 0;
	font-size: 3rem;        /* 48 px */
	font-weight: 800;
	line-height: 1.6;
	text-transform: uppercase;
}

.s-intro__text {
	flex: 1 1 34%;
	min-width: 0;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.6;
}

/* ==========================================================================
   Bandeau illustré
   ========================================================================== */

/*
 * Proportions du dégradé exporté depuis la maquette (1920 × 501).
 * Image et halo partagent une même cellule de grille.
 */
.s-band {
	display: grid;
	grid-template-areas: "stack";
	aspect-ratio: 1920 / 501;
	overflow: hidden;
	isolation: isolate;
	background-color: var(--color-violet-deep);
}

.s-band > * {
	grid-area: stack;
	min-width: 0;
}

.s-band__media {
	position: relative;
	z-index: 0;
	overflow: hidden;
}

.s-band__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.s-band__gradient {
	position: relative;
	z-index: 1;
}

.s-band__blobs {
	position: absolute;
	inset: 0;
	/* stdDeviation="139.5" dans l'export, soit le flou de calque 279 de Figma. */
	filter: blur(calc(139.5 / 1920 * 100vw));
}

/*
 * Les ellipses sont posées par la matrice de l'export : leurs vecteurs de base
 * ne sont pas orthogonaux, la forme est cisaillée et non simplement pivotée.
 * La translation reste séparée, matrix() n'acceptant que des nombres bruts.
 */
.s-band__blob {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	border-radius: 50%;
	background-color: var(--blob-color);
	width: calc(var(--blob-w) / 1920 * 100vw);
	height: calc(var(--blob-h) / 1920 * 100vw);
	transform-origin: 0 0;
	transform:
		translate(calc(var(--blob-x) / 1920 * 100vw), calc(var(--blob-y) / 1920 * 100vw))
		matrix(-0.358761, 0.933429, -0.984617, -0.174724, 0, 0);
}

.s-band__blob--1 { --blob-color: #ffffff; --blob-x: 1631.6;  --blob-y: -143.914; --blob-w: 314.268; --blob-h: 434.378; }
.s-band__blob--2 { --blob-color: #ff6922; --blob-x: 1480.56; --blob-y: -170.715; --blob-w: 507.184; --blob-h: 701.024; }
.s-band__blob--3 { --blob-color: #7b3dff; --blob-x: 1066.99; --blob-y: -244.106; --blob-w: 507.184; --blob-h: 701.024; }

/* ==========================================================================
   Blocs image + texte
   ========================================================================== */

.s-split {
	padding-block: 120px;
}

.s-split__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3xl);
}

.s-split__row + .s-split__row {
	margin-top: 120px;
}

/*
 * L'image passe à droite par inversion visuelle : l'ordre du balisage reste
 * inchangé, donc la lecture au clavier et à la voix suit toujours le même fil.
 */
.s-split__row--media-last {
	flex-direction: row-reverse;
}

.s-split__media,
.s-split__content {
	flex: 1 1 calc(50% - var(--space-3xl));
	min-width: 0;
}

.s-split__media {
	overflow: hidden;
	border-radius: var(--radius-md);
	/* Format carré imposé, quel que soit le cadrage du fichier fourni. */
	aspect-ratio: 1;
}

.s-split__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.s-split__title {
	margin: 0;
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.6;
	text-transform: uppercase;
}

.s-split__text {
	margin-top: var(--space-lg);
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.6;
}

.s-split__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-lg);
	margin-top: var(--space-xl);
}

/* ==========================================================================
   Contenu enrichi commun
   ========================================================================== */

.s-rich > * {
	margin: 0;
}

.s-rich > * + * {
	margin-top: var(--space-md);
}

.s-rich strong {
	font-weight: 600;
}


/* --- Adaptations des sections communes ------------------------------------ */

@media (max-width: 1199px) {
	.s-intro {
		padding-block: var(--space-3xl) var(--space-2xl);
	}

	.s-split {
		padding-block: var(--space-3xl);
	}

	.s-intro__title {
		font-size: clamp(1.75rem, 1rem + 3.1vw, 3rem);
	}

	.s-split__title {
		font-size: clamp(1.375rem, 0.9rem + 2vw, 2rem);
	}

	.s-split__row + .s-split__row {
		margin-top: var(--space-3xl);
	}
}

@media (max-width: 767px) {
	.s-intro__head,
	.s-intro__text,
	.s-split__media,
	.s-split__content {
		flex-basis: 100%;
	}

	.s-band {
		aspect-ratio: 4 / 3;
	}
}

/* ==========================================================================
   Halo d'angle sur les visuels
   ========================================================================== */

/*
 * Halo posé dans l'angle inférieur gauche des images, repris de l'export SVG
 * (repère 800 × 562). La rotation indiquée dans la maquette n'est pas reprise :
 * ces formes sont des cercles parfaits, qu'une rotation laisse identiques.
 *
 * Le repère est ancré en bas du visuel et mis à l'échelle de sa largeur grâce
 * aux unités de conteneur : le halo garde donc ses proportions quelle que soit
 * la taille de l'image, sans dépendre de la largeur de la fenêtre.
 */
.c-glow-corner {
	container-type: inline-size;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	aspect-ratio: 800 / 562;
	pointer-events: none;
}

.c-glow-corner__layer {
	position: absolute;
	inset: 0;
	/* stdDeviation="139.5" dans l'export. */
	filter: blur(calc(139.5 / 800 * 100cqw));
}

.c-glow-corner__blob {
	position: absolute;
	display: block;
	border-radius: 50%;
	background-color: var(--blob-color);
	/* L'export donne un centre et un rayon : la boîte part du centre moins le rayon. */
	left: calc((var(--blob-cx) - var(--blob-r)) / 800 * 100cqw);
	top: calc((var(--blob-cy) - var(--blob-r)) / 800 * 100cqw);
	width: calc(var(--blob-r) * 2 / 800 * 100cqw);
	aspect-ratio: 1;
}

/* Ordre du document SVG : de l'arrière-plan vers le premier plan. */
.c-glow-corner__blob--1 { --blob-color: #ffffff; --blob-cx: -147.451; --blob-cy: 561.628; --blob-r: 151.5; }
.c-glow-corner__blob--2 { --blob-color: #ff6922; --blob-cx: 69.8056;  --blob-cy: 523.561; --blob-r: 244.5; }
.c-glow-corner__blob--3 { --blob-color: #7b3dff; --blob-cx: 352.821;  --blob-cy: 599.395; --blob-r: 244.5; }

/* Le visuel doit contenir le halo et le rogner. */
.s-split__media,
.s-event__media {
	position: relative;
	overflow: hidden;
}

/* ==========================================================================
   Introduction centrée
   ========================================================================== */

/*
 * Variante centrée de l'introduction : une seule colonne, texte aligné au
 * centre et largeur de lecture limitée.
 */
.s-intro--center .s-intro__inner {
	justify-content: center;
	text-align: center;
}

.s-intro--center .s-intro__head {
	flex: 1 1 100%;
	max-width: 900px;
	margin-inline: auto;
}

.s-intro--center .s-intro__text {
	max-width: 720px;
	margin: var(--space-lg) auto 0;
}

/* ==========================================================================
   Bandeau d'appel à l'action
   ========================================================================== */

/*
 * Image de fond et contenu partagent une même cellule de grille : le texte
 * reste centré, l'image se recadre sans jamais dicter la hauteur du bandeau.
 */
.s-cta-band {
	display: grid;
	grid-template-areas: "stack";
	isolation: isolate;
	min-height: 520px;
	background-color: var(--color-violet-deep);
	color: var(--color-white);
}

.s-cta-band > * {
	grid-area: stack;
	min-width: 0;
}

.s-cta-band__background {
	position: relative;
	z-index: 0;
	overflow: hidden;
}

.s-cta-band__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.s-cta-band__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-block: var(--space-4xl);
	text-align: center;
}

.s-cta-band__title {
	margin: 0;
	font-size: 3rem;
	font-weight: 800;
	line-height: 1.3;
	text-transform: uppercase;
}

.s-cta-band__text {
	max-width: 46ch;
	margin: var(--space-lg) 0 0;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.6;
}

.s-cta-band__action {
	margin: var(--space-xl) 0 0;
}

@media (max-width: 1199px) {
	.s-cta-band {
		min-height: 0;
	}

	.s-cta-band__title {
		font-size: clamp(1.75rem, 1rem + 3.1vw, 3rem);
	}
}

/* ==========================================================================
   Halo de fond de page
   ========================================================================== */

/*
 * Halo de fond commun aux pages intérieures. Il court derrière le contenu
 * sans appartenir à aucune section : il est posé sur une zone qui les englobe.
 *
 * Les ellipses de l'export portent une rotation de 180°, sans effet sur une
 * ellipse — la symétrie centrale la laisse identique. Seules comptent donc
 * leur position et leurs deux rayons.
 */
.l-glow-zone {
	position: relative;
	isolation: isolate;
}

.l-glow {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.l-glow__blobs {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	/* Hauteur du repère de l'export (1920 × 1269). */
	height: calc(1269 / 1920 * 100vw);
	/* stdDeviation="250" dans l'export. */
	filter: blur(calc(250 / 1920 * 100vw));
}

.l-glow__blob {
	position: absolute;
	display: block;
	border-radius: 50%;
	background-color: var(--blob-color);
	/* Le repère du SVG donne un centre et deux rayons. */
	left: calc((var(--blob-cx) - var(--blob-rx)) / 1920 * 100vw);
	top: calc((var(--blob-cy) - var(--blob-ry)) / 1920 * 100vw);
	width: calc(var(--blob-rx) * 2 / 1920 * 100vw);
	height: calc(var(--blob-ry) * 2 / 1920 * 100vw);
}

.l-glow__blob--1 { --blob-color: #ff6922; --blob-cx: 1070.63; --blob-cy: 602.741; --blob-rx: 496.3;   --blob-ry: 102.741; }
.l-glow__blob--2 { --blob-color: #ff6922; --blob-cx: 174.885; --blob-cy: 602.887; --blob-rx: 342.885; --blob-ry: 70.982; }
.l-glow__blob--3 { --blob-color: #7b3dff; --blob-cx: 1685.7;  --blob-cy: 666.259; --blob-rx: 496.3;   --blob-ry: 102.741; }
.l-glow__blob--4 { --blob-color: #ffffff; --blob-cx: 941.251; --blob-cy: 681.919; --blob-rx: 307.536; --blob-ry: 63.6643; }

.l-glow-zone__content {
	position: relative;
	z-index: 1;
}


/* Le halo de marque s'intercale entre l'image de fond et le texte du bandeau. */
.s-cta-band .c-brand-glow {
	/*
	 * Le bandeau est plus court que la section d'accueil dont vient le repère :
	 * la hauteur de référence est resserrée d'autant.
	 */
	--glow-height: 520;

	position: relative;
	z-index: 1;
	overflow: hidden;
}

.s-cta-band__inner {
	z-index: 2;
}