/**
 * Bloc de contact « Besoin d'information » — page E4Y Hub et pages pays.
 *
 * Les deux maquettes le dessinent au pixel près identique : même cercle de
 * 694 px au même endroit, même anneau de départ 345° aux mêmes couleurs, mêmes
 * pastilles, mêmes champs. Seules les photographies et le titre changent, d'où
 * un composant et deux sections qui l'appellent avec leurs propres champs.
 *
 * Deux mises en page, et non une seule à l'échelle comme l'appel de la page
 * Programme : la composition circulaire réduit tout proportionnellement, ce qui
 * conviendrait à une citation mais rendrait le formulaire inutilisable sous
 * 768 px — champs de quelques pixels de haut, texte illisible. En dessous, le
 * bloc devient donc un simple panneau orange ; au-dessus, la composition de la
 * maquette reprend ses droits.
 *
 * Repères Figma, origine au haut du cercle orange (y = 7137) :
 *   cercle orange 474 / 0   / Ø 694      anneau    97 / 114,45 / Ø 486,7
 *   pastilles     992 / 25  / Ø 296      panneau  597 / 156    / l 426
 *                 978 / 462 / Ø 214      champs   630 / 285 et 347, l 379
 *                                        bouton   632 / 502    / 116 × 49
 *
 * Emplacement : assets/css/components/bloc-contact.css
 */

/* Aucun écart en haut : l'arc du panneau creuse déjà une trentaine de pixels
   sous ce qui précède, et le guillemet fermant de la citation laisse par
   ailleurs une boîte à moitié vide. À 48 px déclarés, la bande blanche en
   paraissait le double. Le desktop reprend l'écart plein plus bas, où le
   cercle de la maquette n'a pas cette courbe. */
.bloc-contact {
	padding-block: 0;
}

/* ── Mobile : panneau simple ───────────────────────────────── */

/* isolation plutôt qu'un z-index : le calque de couleur est posé en z-index
   négatif sous le contenu, et sans contexte d'empilement il passerait derrière
   le fond de la page. */
.bloc-contact {
	isolation: isolate;
}

.bloc-contact__scene {
	position: relative;
	overflow: hidden;
	padding: var(--space-9) var(--gutter) var(--space-7);
}

/* L'orange ne vient pas d'un fond posé sur la scène mais d'un calque courbe :
   le panneau s'ouvre sur le même arc que les autres sections de la page.
   Il déborde latéralement puis est rogné — calé sur la largeur de l'écran,
   l'arc se redresserait net sur les bords au lieu d'y arriver en pente
   douce. */
.bloc-contact__scene::before {
	content: '';
	position: absolute;
	z-index: -1;
	inset-block: 0;
	inset-inline-start: 50%;
	width: var(--courbe-largeur);
	background-color: var(--e4y-orange);
	border-radius: 50% 50% 0 0 / var(--courbe-rayon-mob) var(--courbe-rayon-mob) 0 0;
	transform: translateX(-50%);
}

.bloc-contact__cercle,
.bloc-contact__anneau,
.bloc-contact__pastille {
	display: none;   /* décor : rien à montrer quand la place manque */
}

.bloc-contact__titre {
	margin-block: 0 var(--space-5);
	font-size: var(--fs-h2);
	color: var(--color-text-inverse);
	text-align: center;
}


/* ============================================================
   768 px — la composition circulaire de la maquette
   ============================================================ */

@media (min-width: 768px) {

	/* Figma laisse 241 px entre le bas de la citation et le haut du cercle. La
	   section-citation en apporte déjà 96 par son padding : le reste est ici.

	   En bas, à l'inverse, la maquette fait remonter l'image de l'arbre jusqu'à
	   ce que sa première feuille touche le bas du cercle. Notre photo commence
	   par 48 px de ciel blanc à cette largeur : la marge négative les ramène
	   sous le cercle, et le z-index garde l'arc visible par-dessus — le fichier
	   fourni est opaque là où celui de Figma est transparent. */
	.bloc-contact {
		position: relative;
		z-index: 1;
		padding-block: var(--space-11) 0;
		margin-block-end: calc(min(1440px, 100vw) * -0.0333);
		overflow: hidden;
	}

	.bloc-contact__scene {
		container-type: inline-size;
		position: relative;
		overflow: visible;
		max-width: 1440px;
		margin-inline: auto;
		padding: 0;
		aspect-ratio: 1440 / 694;
	}

	/* L'arc appartient au repli mobile : ici c'est le cercle de la maquette
	   qui porte l'orange. */
	.bloc-contact__scene::before {
		content: none;
	}

	.bloc-contact__cercle,
	.bloc-contact__anneau,
	.bloc-contact__pastille {
		display: block;
	}

	/* ── Grand cercle orange ───────────────────────────────── */

	.bloc-contact__cercle {
		position: absolute;
		top: 0;
		left: 32.917cqw;
		width: 48.194cqw;             /* Figma : 694 px */
		aspect-ratio: 1;
		background-color: var(--e4y-orange);
		border-radius: var(--radius-full);
	}

	/* ── Anneau photographique ─────────────────────────────── */

	.bloc-contact__anneau {
		position: absolute;
		top: 7.948cqw;
		left: 6.740cqw;
		width: 33.799cqw;             /* Figma : 486,7 px */
	}

	.bloc-contact__photo-anneau {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* ── Pastilles photo flottantes ────────────────────────── */

	.bloc-contact__pastille {
		position: absolute;
		overflow: hidden;
		border-radius: var(--radius-full);
	}

	.bloc-contact__pastille--haut {
		top: 1.736cqw;
		left: 68.889cqw;
		width: 20.556cqw;             /* Figma : 296 px */
		aspect-ratio: 1;
	}

	.bloc-contact__pastille--bas {
		top: 32.083cqw;
		left: 67.917cqw;
		width: 14.861cqw;             /* Figma : 214 px */
		aspect-ratio: 1;
	}

	.bloc-contact__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* ── Panneau : titre et formulaire ─────────────────────── */

	/* Le titre occupe les 426 px de sa boîte Figma — c'est ce qui lui donne ses
	   trois lignes — tandis que les champs, plus étroits, se centrent dessous. */
	.bloc-contact__panneau {
		position: absolute;
		top: 10.833cqw;
		left: 41.458cqw;
		width: 29.583cqw;             /* Figma : 426 px */
	}

	.bloc-contact__titre {
		margin-block-end: 0.972cqw;   /* Figma : 14 px sous le titre */
		font-size: 2.222cqw;          /* Figma : 32 px */
	}

	.bloc-contact__form {
		width: 26.319cqw;             /* Figma : 379 px */
		margin-inline: auto;
		gap: 0.972cqw;                /* Figma : 14 px entre les champs */
	}

	.bloc-contact__form .form-contact__champ {
		padding: 0.7cqw 1.458cqw;     /* Figma : retrait de 21 px à gauche */
		font-size: 1.389cqw;          /* Figma : 20 px */
	}

	.bloc-contact__form .form-contact__champ[type='email'] {
		height: 3.333cqw;             /* Figma : 48 px */
	}

	.bloc-contact__form .form-contact__champ--message {
		height: 9.444cqw;             /* Figma : 136 px */
	}

	.bloc-contact__form .form-contact__envoi {
		min-height: 3.403cqw;         /* Figma : 49 px */
		margin-block-start: 0.347cqw; /* Figma : 19 px sous le message, soit 5 de plus */
		padding: 0.6cqw 0.9cqw;
		gap: 0.6cqw;
		font-size: 1.389cqw;          /* Figma : 20 px */
	}

	.bloc-contact__form .btn__icon--arrow {
		width: 1.46cqw;
		height: auto;
	}

	.bloc-contact__form .form-contact__retour {
		font-size: 1.1cqw;
	}

}