/**
 * Page « Contact » — formulaire et coordonnées.
 *
 * Figma : deux panneaux accolés de 595 px de haut, 676 pour le formulaire et
 * 345 pour les coordonnées, calés à gauche du conteneur sur 1019 px au total.
 *
 * Les panneaux ne sont pas à l'échelle comme les scènes des autres pages : ils
 * contiennent un formulaire, donc des libellés à lire et des zones à toucher.
 * Leur typographie reste en rem et leur hauteur suit le contenu.
 *
 * Emplacement : assets/css/components/contact-bloc.css
 */

/* position: relative pour que les panneaux passent devant le cercle sable de
   la section précédente : celui-ci est positionné, il peindrait sinon par
   dessus un bloc qui ne l'est pas, quel que soit l'ordre du HTML. La pastille
   photo, elle, garde son z-index et reste au-dessus. */
/* La marge négative rattrape le ciel blanc que porte le haut de la photo,
   comme sur la page Actualités, sans quoi l'écart avec l'arbre atteint 138 px.
   La maquette fait affleurer les deux à 2 px près, mais notre photo n'a pas le
   même cadrage : une pousse s'y trouve juste sous le panneau là où Figma a un
   bord de nuage. On garde donc un filet d'air plutôt que le zéro théorique. */
.contact-bloc {
	position: relative;
	padding-block-end: var(--space-6);
	margin-block-end: calc(min(1440px, 100vw) * -0.028);
}

/* Angles vifs : relevé sur la maquette, où le crème commence à x 87 dès la
   première ligne du panneau — aucun rayon. L'ombre, elle, est bien là :
   environ 15 px de diffusion, 8 % de noir au ras du bord. */
.contact-bloc__grille {
	display: grid;
	gap: 0;
	max-width: 1019px;          /* Figma : 676 + 345, panneaux accolés */
	box-shadow: 0 2px 20px rgb(0 0 0 / 18%);
}

.contact-bloc__titre {
	margin-block-end: var(--space-6);
	font-size: var(--fs-h2);
	color: var(--color-text-muted);
}

/* ── Panneau du formulaire ─────────────────────────────────── */

.contact-bloc__form {
	padding: var(--space-7);
	background-color: var(--e4y-cream);
}

.contact-bloc__formulaire {
	gap: var(--space-5);
}

/* Pilule de 71 × 31, mesurée sur la maquette : nettement plus menue que le
   bouton courant du site, dont le gabarit de 44 px de haut vise la cible
   tactile. Ici le formulaire n'en a qu'un, posé en bas de colonne. */
.contact-bloc__formulaire .form-contact__envoi {
	min-height: 0;
	padding: var(--space-2) var(--space-3);
	font-size: var(--fs-small);   /* Figma : 14 px */
	border-radius: var(--radius-full);
}

/* ── Panneau des coordonnées ───────────────────────────────── */

.contact-bloc__coord {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	padding: var(--space-7) var(--space-6);
	color: var(--color-text-inverse);
	background-color: var(--e4y-green);
}

.contact-bloc__titre--coord {
	margin-block-end: 0;
	color: var(--color-text-inverse);
}

.contact-bloc__liste {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-bloc__item {
	display: flex;
	gap: var(--space-4);
	align-items: flex-start;
}

.contact-bloc__icone {
	flex: none;
	width: 29px;
	height: 29px;
}

/* Le « @ » est un caractère et non un tracé : on l'aligne sur la taille des
   deux icônes qui l'entourent. */
.contact-bloc__icone--arobase {
	font-size: 1.75rem;
	line-height: 1;
	text-align: center;
}

.contact-bloc__valeur {
	font-size: var(--fs-body);
	line-height: var(--lh-heading);
	font-weight: var(--fw-bold);
}

/* Sans soulignement, comme dans la maquette : le libellé au-dessus dit déjà
   qu'il s'agit d'un téléphone ou d'un e-mail. Il réapparaît au survol et au
   focus, pour que le lien reste identifiable comme tel. */
.contact-bloc__valeur a {
	text-decoration: none;
}

.contact-bloc__valeur a:hover,
.contact-bloc__valeur a:focus-visible {
	text-decoration: underline;
}

/* Intitulé en petit au-dessus de la valeur : « Siège », « Standard »… */
.contact-bloc__cle {
	display: block;
	font-size: var(--fs-caption);
	font-weight: var(--fw-regular);
	opacity: 0.75;
}

/* ── Réseaux sociaux ───────────────────────────────────────── */

.contact-bloc__reseaux {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Le cercle fait partie du pictogramme : rien à dessiner en CSS. */
.contact-bloc__reseau {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: color var(--duration) var(--ease);
}

.contact-bloc__reseau-icone {
	display: block;
	width: 27px;
	height: 27px;
}

.contact-bloc__reseau:hover,
.contact-bloc__reseau:focus-visible {
	color: var(--e4y-amber);
}

/* ── Horaires ──────────────────────────────────────────────── */

.contact-bloc__horaires {
	margin: 0;
	padding-block-start: var(--space-5);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	border-block-start: 1px solid var(--e4y-overlay-light);
}


/* ============================================================
   Desktop 900px — les deux panneaux côte à côte
   ============================================================ */

@media (min-width: 900px) {

	.contact-bloc__grille {
		grid-template-columns: 676fr 345fr;   /* proportions Figma */
	}

	/* Deux colonnes de champs, sauf l'objet et le message qui prennent toute
	   la largeur — comme dans la maquette.
	   Le sélecteur porte les deux classes : les feuilles de components/ sont
	   chargées par ordre alphabétique, donc form-contact.css passe après
	   celle-ci et son display: flex l'emporterait à égalité de spécificité. */
	.form-contact.contact-bloc__formulaire {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--space-7);
	}

	.contact-bloc__formulaire .form-contact__ligne--objet,
	.contact-bloc__formulaire .form-contact__ligne--message,
	.contact-bloc__formulaire .form-contact__pied,
	.contact-bloc__formulaire .form-contact__retour {
		grid-column: 1 / -1;
	}

}


/* ============================================================
   Mobile — retraits resserrés et cibles tactiles

   Les retraits des panneaux sont des relevés desktop : 48 px de chaque côté
   ramenaient les champs à 250 px dans une colonne de 346. Et deux commandes
   dessinées pour la souris — la pilule d'envoi de 31 px, les pictogrammes de
   réseaux de 27 — passent sous le seuil de 44 px que réclame le doigt. Leur
   dessin ne change pas, seule leur zone sensible s'élargit.
   ============================================================ */

@media (max-width: 767px) {

	.contact-bloc__form {
		padding: var(--space-5);
	}

	.contact-bloc__coord {
		padding: var(--space-5);
	}

	.contact-bloc__formulaire .form-contact__envoi {
		min-height: 44px;
		padding-inline: var(--space-5);
	}

	/* La marge négative reprend au voisinage ce que le retrait ajoute : la
	   rangée garde son dessin, seule la zone sensible s'élargit. */
	.contact-bloc__reseaux {
		gap: var(--space-2);
		margin-inline: calc(-1 * var(--space-3));
	}

	.contact-bloc__reseau {
		padding: var(--space-3);
	}

}