/* ═════════════════════════════════════════════════════════════════
   Ophtapod : page Contact (template-contact.php)
   Tailles en rem (voir la convention dans main.css) pour que le module
   d'accessibilité puisse mettre le texte à l'échelle.

   L'en-tête de page (.op-page-hero) et la rangée de liste (.op-fiche) sont
   partagés par plusieurs modèles : ils vivent dans main.css.
   ═════════════════════════════════════════════════════════════════ */

/* ── Contacter le centre ──────────────────────────────────────────────
   Deux colonnes sur surface blanche : l'action principale et les moyens de
   nous joindre à gauche, les informations pratiques à droite. La photo de
   fond et les cartes flottantes du modèle précédent disparaissent — c'est
   ce que la passe de design signalait comme collision. */

.op-contact-main {
	background: var(--c-white);
}

.op-contact-main__grid {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 6.25rem;
	align-items: start;
	padding: 7.5rem 0 6.875rem;
}

.op-contact-action__title {
	margin: 0;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 2.75rem;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--c-navy);
}

/* Le filet sépare le rendez-vous des moyens de nous joindre : deux gestes
   différents, un seul groupe visuel ne les distinguerait pas. */
.op-contact-action__coord {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	margin-top: 3rem;
	padding-top: 2.5rem;
	box-shadow: inset 0 0.0625rem 0 0 var(--c-rule);
}

/* Règle du centre sous les coordonnées : rendez-vous par téléphone,
   courriel pour les ordonnances. Encadré pâle à filet doré. */
.op-contact-action__note {
	margin: 2rem 0 0;
	max-width: 28rem;
	padding: 1rem 1.25rem;
	background: var(--c-blue-pale);
	border-left: 0.1875rem solid var(--c-gold);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--c-navy);
}

.op-contact-moyen__valeur {
	margin: 0;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--c-navy);
}

.op-contact-venir__title {
	margin: 0 0 2rem;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 2.75rem;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--c-navy);
}

.op-contact-venir__liste {
	display: flex;
	flex-direction: column;
}

/* Rangées non cliquables : ces informations ne mènent nulle part. Le décalage
   au survol de .op-fiche ne s'applique qu'aux ancres, il ne se déclenche
   donc pas ici. */
.op-contact-venir__liste .op-fiche {
	align-items: start;
}

/* ── Nous écrire ──────────────────────────────────────────────────────
   Colonne de 64rem sur surface pâle : le formulaire ne flotte plus au
   milieu d'une zone vide trop large. */

.op-contact-ecrire {
	background: var(--c-blue-pale);
}

.op-contact-ecrire .op-container {
	padding: 5.625rem 0;
}

.op-contact-ecrire__inner {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	max-width: 60rem;
}

.op-contact-ecrire__title {
	margin: 0;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 2.75rem;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--c-navy);
}

.op-contact-ecrire__intro {
	margin: 1rem 0 0;
	max-width: 34rem;
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--c-gray);
}

/* Le champ contraste toujours avec sa surface porteuse : carte blanche,
   donc champs pâles. */
.op-contact-form-card {
	padding: 2.5rem 2.5rem 2.75rem;
	background: var(--c-white);
	border-radius: var(--r-panel);
}

/* ── Formulaire ───────────────────────────────────────────────────────
   Mêmes classes que le formulaire de l'accueil : le script d'envoi
   (assets/js/formulaire.js) et le traitement PHP (inc/contact-form.php) sont
   globaux et s'appliquent tels quels, sans aucune modification. Les états
   des champs sont posés dans main.css depuis le lot 2.

   Variante complète : le motif occupe la pleine largeur, le nom et le
   courriel se partagent la ligne suivante. Le rang se lit sur le type
   d'élément parce que le markup du formulaire est fixe (leurre, motif, nom,
   courriel, message, consentement...). */

/* Le formulaire de contact est partagé avec l'accueil : ses classes .op-form*
   vivent dans main.css, chargé partout. Ne reste ici que ce qui est propre à
   la composition de cette page. */


/* ═════════════════════════════════════════════════════════════════
   Responsive
   ═════════════════════════════════════════════════════════════════ */

@media (max-width: 1279px) {
	:root {
		--sp-section: 6.875rem;
	}
	.op-contact-main__grid {
		grid-template-columns: 1fr;
		gap: 3.125rem;
		padding: 5.625rem 0 6.25rem;
	}
}

/* ── Mobile ───────────────────────────────────────────────────────────
   Composition mobile approuvée : le geste d'abord — la zone de contact
   groupée, téléphone et courriel en rangées pleinement tactiles — puis les
   informations pratiques, puis le formulaire. */

@media (max-width: 767px) {
	.op-contact-main__grid {
		gap: 2.5rem;
		padding: 3.125rem 0 var(--sp-section);
	}
	.op-contact-action__title,
	.op-contact-venir__title,
	.op-contact-ecrire__title {
		font-size: 1.875rem;
	}
	.op-contact-action__coord {
		gap: 1.5rem;
		margin-top: 2rem;
		padding-top: 1.5rem;
	}
	.op-contact-moyen__valeur {
		font-size: 1.25rem;
	}
	/* Cible tactile pleine sur chaque moyen de contact. */
	.op-contact-moyen__valeur a {
		display: inline-flex;
		align-items: center;
		min-height: var(--op-tap);
	}
	.op-contact-venir__title {
		margin-bottom: 1.25rem;
	}
	.op-contact-ecrire .op-container {
		padding: var(--sp-section) 0;
	}
	.op-contact-ecrire__inner {
		gap: 1.5rem;
	}
	.op-contact-ecrire__intro {
		font-size: 1rem;
	}
	.op-contact-form-card {
		padding: 1.75rem 1.25rem 2rem;
	}

}

/* ── Carte ────────────────────────────────────────────────────────────
   Bandeau pleine largeur entre les coordonnées et le formulaire. Le bouton
   Itinéraire se pose sur la carte, aligné sur le conteneur ; au doigt il
   passe sous la carte pour ne pas masquer le repère. */

.op-contact-carte {
	position: relative;
}

.op-contact-carte__iframe {
	display: block;
	width: 100%;
	height: 28rem;
	border: 0;
	/* Gris clair : la carte s'efface derrière le contenu de la page. */
	filter: grayscale(0.8) brightness(1.06) contrast(0.85);
}

.op-contact-carte__action {
	position: absolute;
	right: 0;
	bottom: 2.5rem;
	left: 0;
	display: flex;
	justify-content: flex-end;
	pointer-events: none;
}

.op-contact-carte__action .op-btn {
	pointer-events: auto;
}

@media (max-width: 767px) {
	.op-contact-carte__iframe {
		height: 20rem;
	}
	.op-contact-carte__action {
		position: static;
		padding-block: 1.5rem;
	}
}