/**
 * Page « Contact » — bloc d'introduction.
 *
 * Même technique que les blocs d'introduction des autres pages : scène
 * plafonnée à la largeur de maquette, tout exprimé en cqw. Pas d'anneau ici,
 * la maquette pose une pastille photo simple.
 *
 * Repères Figma, origine au bas du bandeau (y = 628) :
 *   cercle sable 528 / 235 / Ø 947    pastille 972 / 869 / Ø 371
 *   accroche     624 / 679 / l. 574   colonne  100 / 693
 *
 * Emplacement : assets/css/components/contact-intro.css
 */

/* overflow-x et non overflow : le cercle déborde à droite et doit être rogné,
   mais la pastille photo déborde vers le bas, sur le bloc suivant — c'est le
   dessin de la maquette. */
.contact-intro {
	overflow-x: clip;
}

.contact-intro__scene {
	container-type: inline-size;
	position: relative;
	max-width: 1440px;
	margin-inline: auto;
	aspect-ratio: 1440 / 405;
}

/* ── Grand cercle sable ────────────────────────────────────── */

.contact-intro__cercle {
	position: absolute;
	top: -27.292cqw;
	left: 36.667cqw;
	width: 65.764cqw;           /* Figma : 947 px */
	aspect-ratio: 1;
	background-color: var(--e4y-sand);
	border-radius: var(--radius-full);
}

/* ── Accroche dans le cercle ───────────────────────────────── */

.contact-intro__accroche {
	position: absolute;
	top: 3.542cqw;
	left: 43.333cqw;
	width: 39.861cqw;           /* Figma : 574 px */
	margin: 0;
	font-family: var(--font-display);
	font-size: 3.333cqw;        /* Figma : 48 px */
	font-weight: var(--fw-bold);
	line-height: 1.19;
	color: var(--color-text);
	text-align: center;
}

/* ── Colonne de texte ──────────────────────────────────────── */

/* left : le bord gauche du conteneur, pour s'aligner sur le logo — voir
   hub-intro.css, qui détaille le calcul. */
.contact-intro__colonne {
	position: absolute;
	top: 4.514cqw;
	left: calc((min(1440px, 100vw) - min(var(--container-max), 100vw)) / 2 + var(--gutter));
	width: 29.722cqw;           /* Figma : 428 px */
}

.contact-intro__titre {
	margin: 0;
	font-size: 3.333cqw;        /* Figma : 48 px */
	text-transform: uppercase;
	color: var(--color-text);
}

.contact-intro__texte {
	margin-block-start: 1.25cqw;
	font-size: 1.389cqw;        /* Figma : 20 px */
	line-height: 1.25;
	color: var(--color-text);
}

.contact-intro__texte p + p {
	margin-block-start: 1cqw;
}

/* ── Pastille photo ────────────────────────────────────────── */

/* Pas de z-index : la maquette fait passer la pastille SOUS le panneau vert du
   bloc suivant — la photo n'y apparaît qu'à partir du bord droit du panneau.
   Sans z-index, elle reste au-dessus du cercle sable qui la précède dans le
   HTML, et le bloc suivant, positionné, passe devant elle. */
.contact-intro__pastille {
	position: absolute;
	top: 16.736cqw;
	left: 67.5cqw;
	width: 25.764cqw;           /* Figma : 371 px */
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--radius-full);
}

.contact-intro__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ============================================================
   Sous 1200px — la composition se déplie

   Même repli que les blocs d'introduction des autres pages, dont cette scène
   reprend la technique : tout est en cqw, et à 402 px un cqw ne vaut plus que
   4 px — titre à 13 px, texte à 5,6.

   Le fichier Figma ne propose pas de maquette mobile pour cette page ; c'est
   la grammaire de l'accueil qui sert de règle, comme ailleurs.
   ============================================================ */

@media (max-width: 1199px) {

	.contact-intro__scene {
		/* Le diamètre sert aussi de repère au retrait et au chevauchement :
		   en pourcentage, ils se seraient calculés sur la scène. */
		--contact-disque: min(360px, 92vw);
		display: flex;
		flex-direction: column;
		align-items: center;
		aspect-ratio: auto;
		padding-block: var(--space-7) var(--space-6);
	}

	/* Le disque sable est repris par l'accroche elle-même : deux boîtes pour
	   un seul cercle ne pouvaient plus rester alignées une fois la position
	   absolue abandonnée. */
	.contact-intro__cercle {
		display: none;
	}

	.contact-intro__colonne {
		position: static;
		order: 1;
		width: 100%;
		max-width: var(--container-narrow);
		padding-inline: var(--gutter);
	}

	.contact-intro__titre {
		font-size: var(--fs-h1);
	}

	.contact-intro__texte {
		margin-block-start: var(--space-3);
		font-size: var(--fs-body);
	}

	.contact-intro__texte p + p {
		margin-block-start: var(--space-3);
	}

	/* Les coupures de l'accroche ont été saisies pour la boîte de 574 px de
	   la maquette : dans un disque de 360, elles s'ajoutaient au repli naturel
	   du texte. */
	.contact-intro__accroche br {
		display: none;
	}

	.contact-intro__accroche {
		position: static;
		order: 2;
		display: grid;
		place-items: center;
		width: var(--contact-disque);
		aspect-ratio: 1;
		margin-block-start: var(--space-7);
		padding-inline: calc(var(--contact-disque) * 0.11);
		font-size: var(--fs-h3);
		background-color: var(--e4y-sand);
		border-radius: var(--radius-full);
	}

	/* Chevauche le bas du disque, à la place qu'occupe l'anneau sur les autres
	   pages. La maquette la glisse sous le panneau suivant ; dépliée, elle n'a
	   plus rien à passer dessous et redevient une pastille pleine. */
	.contact-intro__pastille {
		position: static;
		order: 3;
		width: min(200px, 52vw);
		margin-block-start: calc(var(--contact-disque) * -0.14);
	}

}