/* ============================================================================
   Page Contact — styles dédiés (enqueue conditionnel via functions.php)
   BEM : .page-contact__*
   Tokens : voir style.css :root
   ========================================================================== */

.page-contact {
	background: #fff;
	color: var(--cauris-ink, #1B1B1B);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.page-contact__hero {
	padding: clamp(3rem, 8vw, 7rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.page-contact__title {
	font-family: var(--cauris-font-serif);
	font-weight: 700;
	font-size: clamp(2.75rem, 6.5vw, 5rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--cauris-bronze, #3d2c14);
	margin: 0 0 1.5rem;
}

/* Conteneur : le texte vient de l'extrait OU du contenu de la page, donc il
   peut contenir plusieurs <p>. La typo s'hérite, on ne gère que les marges. */
.page-contact__lead {
	font-family: var(--cauris-font-sans);
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	line-height: 1.65;
	color: rgba(61, 44, 20, .78);
	margin: 0;
}

.page-contact__lead > :last-child {
	margin-bottom: 0;
}

/* ── Section principale : 2 colonnes (form + info) ───────────────────────── */

.page-contact__body {
	border-top: 1px solid rgba(61, 44, 20, .12);
	padding: clamp(3rem, 6vw, 5.5rem) 0;
	background: var(--cauris-bg, #F8F4EC);
}

.page-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

/* ── Colonne formulaire ──────────────────────────────────────────────────── */

.page-contact__form-col {
	min-width: 0;
}

.page-contact__form-heading {
	font-family: var(--cauris-font-serif);
	font-weight: 700;
	font-size: clamp(1.75rem, 3vw, 2.4rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--cauris-bronze, #3d2c14);
	margin: 0 0 .75rem;
}

.page-contact__form-intro {
	font-family: var(--cauris-font-sans);
	font-size: .95rem;
	line-height: 1.6;
	color: rgba(61, 44, 20, .7);
	margin: 0 0 2.5rem;
}

/* Message de retour après soumission (Post/Redirect/Get). */
.page-contact__notice {
	font-family: var(--cauris-font-sans);
	font-size: .95rem;
	line-height: 1.6;
	padding: 1rem 1.25rem;
	margin: 0 0 2rem;
	border-left: 3px solid;
	border-radius: 2px;
	/* La redirection après envoi pointe sur #contact-notice et le focus est posé
	   ici par cauris-contact.js : sans cette marge, l'en-tête collant recouvrirait
	   le message une fois le défilement terminé. Recette AC-13. */
	scroll-margin-top: calc(var(--cauris-header-h, 92px) + 1.5rem);
}

.page-contact__notice:focus {
	outline: 2px solid var(--cauris-gold-1, #BF953F);
	outline-offset: 3px;
}

.page-contact__notice--success {
	border-left-color: var(--cauris-gold-1, #BF953F);
	background: rgba(191, 149, 63, .09);
	color: var(--cauris-bronze, #3d2c14);
}

.page-contact__notice--error {
	border-left-color: #a3341f;
	background: rgba(163, 52, 31, .07);
	color: #7d2818;
}

/* Honeypot anti-bot : hors écran plutôt que display:none, que certains bots détectent. */
.page-contact__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.page-contact__form {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.page-contact__row {
	display: grid;
	gap: 1.75rem;
}

.page-contact__row--split {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ── Champ : floating label ──────────────────────────────────────────────── */

.page-contact__field {
	position: relative;
	min-width: 0;
}

.page-contact__input,
.page-contact__select {
	display: block;
	width: 100%;
	padding: 1.4rem 0 .65rem;
	border: 0;
	border-bottom: 1.5px solid rgba(61, 44, 20, .22);
	background: transparent;
	font-family: var(--cauris-font-sans);
	font-size: 1.02rem;
	color: var(--cauris-ink, #1B1B1B);
	line-height: 1.4;
	border-radius: 0;
	outline: none;
	transition: border-color .25s ease;
	appearance: none;
	-webkit-appearance: none;
}

.page-contact__input--textarea {
	padding-top: 1.6rem;
	padding-bottom: 1rem;
	min-height: 180px;
	resize: vertical;
}

.page-contact__input:hover,
.page-contact__select:hover {
	border-bottom-color: rgba(61, 44, 20, .45);
}

.page-contact__input:focus,
.page-contact__select:focus {
	border-bottom-color: var(--cauris-gold-1, #BF953F);
	border-bottom-width: 2px;
	padding-bottom: calc(.65rem - .5px);
}

.page-contact__input--textarea:focus {
	padding-bottom: calc(1rem - .5px);
}

.page-contact__input:focus-visible,
.page-contact__select:focus-visible {
	outline: none;
}

/* Floating label — masqué visuellement quand le champ est rempli (déplacé en haut) */
.page-contact__label {
	position: absolute;
	left: 0;
	top: 1.4rem;
	font-family: var(--cauris-font-sans);
	font-size: 1rem;
	/* .55 ne donnait que 3,26:1 sur le crème. Au repos ce label flottant est le
	   seul nom visible du champ, il doit donc franchir les 4,5:1 : .75 le porte
	   à 5,74:1 sans le confondre avec la saisie, qui reste en bronze plein. */
	color: rgba(61, 44, 20, .75);
	pointer-events: none;
	transform-origin: 0 50%;
	transition: transform .2s ease, color .2s ease;
	white-space: nowrap;
	max-width: 100%;
}

.page-contact__input:focus + .page-contact__label,
.page-contact__input:not(:placeholder-shown) + .page-contact__label,
.page-contact__select:focus + .page-contact__label {
	transform: translateY(-1.25rem) scale(.78);
	color: var(--cauris-bronze, #3d2c14);
}

/* Le label « statique » est utilisé pour les select (pas de :placeholder-shown). */
.page-contact__label--static {
	position: static;
	display: block;
	margin-bottom: .35rem;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cauris-bronze, #3d2c14);
	transform: none;
	opacity: .8;
}

.page-contact__field--select .page-contact__select {
	padding-top: .65rem;
	padding-right: 1.5rem;
}

.page-contact__field--select {
	position: relative;
}

/* Ré-arranger l'ordre visuel pour le select : label au-dessus, input en-dessous */
.page-contact__field--select .page-contact__label--static {
	order: -1;
}

.page-contact__field--select {
	display: flex;
	flex-direction: column;
}

.page-contact__select-arrow {
	position: absolute;
	right: .35rem;
	bottom: .85rem;
	pointer-events: none;
	color: var(--cauris-bronze, #3d2c14);
	font-size: .85rem;
	opacity: .65;
}

/* ── Consentement RGPD ──────────────────────────────────────────────────── */

.page-contact__consent {
	display: flex;
	align-items: flex-start;
	gap: .85rem;
	padding-top: .5rem;
}

.page-contact__checkbox {
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	margin-top: .25rem;
	accent-color: var(--cauris-gold-1, #BF953F);
	cursor: pointer;
}

.page-contact__consent-label {
	font-family: var(--cauris-font-sans);
	font-size: .85rem;
	line-height: 1.55;
	color: rgba(61, 44, 20, .7);
	cursor: pointer;
}

.page-contact__consent-label a {
	color: var(--cauris-bronze, #3d2c14);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── Bouton submit ──────────────────────────────────────────────────────── */

.page-contact__submit-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
	margin-top: .5rem;
}

.page-contact__submit {
	display: inline-flex;
	align-items: center;
	gap: .85rem;
	padding: 1.1rem 2rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728);
	background-size: 200% 100%;
	background-position: 0 0;
	/* Encre et non bronze : le libellé fait 14,7px en 600, donc le seuil reste
	   4,5:1, et le bronze ne mesure que 4,09:1 sur la butée sombre #B38728 du
	   dégradé. Au survol background-position passe à 100 %, ce qui amène
	   justement cette butée sous le texte. L'encre y tient 5,26:1 et aligne le
	   bouton sur le CTA du header et sur celui de la newsletter. */
	color: var(--cauris-ink, #1B1B1B);
	font-family: var(--cauris-font-sans);
	font-size: .92rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 2px 12px rgba(191, 149, 63, .25);
	transition: background-position .55s ease, transform .25s ease, box-shadow .25s ease, gap .25s ease;
}

.page-contact__submit:hover,
.page-contact__submit:focus-visible {
	background-position: 100% 0;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(191, 149, 63, .35);
	gap: 1.15rem;
	outline: none;
}

.page-contact__submit:active {
	transform: translateY(0);
}

.page-contact__submit-arrow {
	font-size: 1rem;
	line-height: 1;
}

.page-contact__form-note {
	margin: 0;
	font-family: var(--cauris-font-sans);
	font-size: .82rem;
	/* .65 plafonnait à 4,28:1 sur le crème ; .8 monte à 6,68:1. */
	color: rgba(61, 44, 20, .8);
}

/* ── Colonne info ────────────────────────────────────────────────────────── */

.page-contact__info-col {
	min-width: 0;
	position: sticky;
	top: clamp(80px, 8vh, 110px);
}

.page-contact__info {
	background: #fff;
	border: 1px solid rgba(61, 44, 20, .08);
	border-left: 3px solid var(--cauris-gold-1, #BF953F);
	border-radius: 6px;
	padding: clamp(1.75rem, 2.5vw, 2.25rem);
	display: flex;
	flex-direction: column;
	gap: 1.65rem;
	box-shadow: 0 6px 24px rgba(61, 44, 20, .04);
}

.page-contact__info-heading {
	font-family: var(--cauris-font-serif);
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1.2;
	letter-spacing: -0.005em;
	color: var(--cauris-bronze, #3d2c14);
	margin: 0;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid rgba(61, 44, 20, .1);
}

.page-contact__info-block {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.page-contact__info-label {
	font-family: var(--cauris-font-sans);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	/* opacity: .9 retirée : elle ramenait le doré texte à 4,20:1 sur le blanc,
	   alors que le jeton seul y tient 5,14:1. Le libellé fait 10,9px, le seuil
	   reste donc 4,5:1. */
	color: var(--cauris-gold-dark, #8A6825);
}

.page-contact__info-value {
	font-family: var(--cauris-font-sans);
	font-size: .98rem;
	line-height: 1.55;
	color: var(--cauris-bronze, #3d2c14);
	font-style: normal;
	margin: 0;
}

.page-contact__info-link {
	color: var(--cauris-bronze, #3d2c14);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size .35s ease, color .25s ease;
	display: inline-block;
}

.page-contact__info-link:hover,
.page-contact__info-link:focus-visible {
	background-size: 100% 1px;
	color: var(--cauris-gold-dark, #8E6C28);
}

.page-contact__address {
	font-style: normal;
}

/* Cities chips */
.page-contact__cities {
	list-style: none;
	margin: .5rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.page-contact__city {
	display: inline-flex;
	align-items: center;
	padding: .35rem .85rem;
	border-radius: 999px;
	border: 1px solid rgba(61, 44, 20, .2);
	font-family: var(--cauris-font-sans);
	font-size: .8rem;
	color: var(--cauris-bronze, #3d2c14);
	line-height: 1;
	background: rgba(255, 255, 255, .65);
}

/* ── Section carte ───────────────────────────────────────────────────────── */

.page-contact__map-section {
	padding: clamp(3rem, 6vw, 5.5rem) 0;
	border-top: 1px solid rgba(61, 44, 20, .12);
}

.page-contact__map-heading {
	font-family: var(--cauris-font-serif);
	font-weight: 700;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.2;
	letter-spacing: -0.005em;
	color: var(--cauris-bronze, #3d2c14);
	margin: 0 0 2rem;
	text-align: center;
}

/* Hauteurs fixées par le dossier v1.0 (§07) : 420 / 360 / 300 px.
   La hauteur est portée par le conteneur, pas par l'iframe : l'espace est
   donc réservé avant que Google réponde, et le chargement différé de la
   carte ne provoque aucun saut de mise en page. */
.page-contact__map-frame {
	position: relative;
	height: 420px;
	overflow: hidden;
	background: var(--cauris-bg, #F8F4EC);
	box-shadow: 0 12px 40px rgba(61, 44, 20, .08);
}

/* Paliers repris tels quels du §07/§08 (1200 / 768–1199 / < 768), et non
   les points de rupture généraux du fichier : le dossier fixe ici des
   hauteurs chiffrées, pas un simple comportement. */
@media (max-width: 1199.98px) {
	.page-contact__map-frame { height: 360px; }
}

@media (max-width: 767.98px) {
	.page-contact__map-frame { height: 300px; }
}

.page-contact__map-iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.page-contact__map-caption {
	margin: 1.25rem 0 0;
	text-align: center;
	font-family: var(--cauris-font-sans);
	font-size: .88rem;
	font-style: italic;
	/* .65 plafonnait à 4,29:1 sur le crème pour un texte de 14,1px. .75 monte à
	   5,74:1. Cette légende porte la mention « point de rendez-vous » d'AC-09,
	   elle doit rester pleinement lisible. */
	color: rgba(61, 44, 20, .75);
}

/* Lien de repli vers Google Maps — toujours rendu, y compris quand
   l'iframe est absente ou bloquée. Cible tactile ≥ 44 px de haut. */
.page-contact__map-link-wrap {
	margin: .75rem 0 0;
	text-align: center;
}

.page-contact__map-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: .5rem .25rem;
	font-family: var(--cauris-font-sans);
	font-size: .95rem;
	font-weight: var(--cauris-weight-medium, 500);
	color: var(--cauris-gold-dark, #8E6C28);
	text-decoration: underline;
	text-underline-offset: .25em;
}

.page-contact__map-link:hover,
.page-contact__map-link:focus-visible {
	color: var(--cauris-bronze, #3d2c14);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
	.page-contact__grid {
		grid-template-columns: 1fr;
	}

	.page-contact__info-col {
		position: static;
		top: auto;
	}

	.page-contact__row--split {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767.98px) {
	.page-contact__hero {
		padding-top: 2.5rem;
	}

	.page-contact__form {
		gap: 1.5rem;
	}

	.page-contact__submit {
		width: 100%;
		justify-content: center;
	}

	.page-contact__submit-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

}

/* ── Accessibilité : prefers-reduced-motion ──────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.page-contact__submit,
	.page-contact__input,
	.page-contact__select,
	.page-contact__label,
	.page-contact__info-link {
		transition: none !important;
	}

	.page-contact__submit:hover {
		transform: none;
	}
}