/* OZE Contact — chargé uniquement lorsque le shortcode [oze_contact] est rendu. */
.oze-contact {
	--oze-contact-cream: #F7F6F3;
	--oze-contact-white: #FFFFFF;
	--oze-contact-brown: #3D3834;
	--oze-contact-text: #544D48;
	--oze-contact-muted: #665F59;
	--oze-contact-border: #D8CFC4;
	--oze-contact-sage: #4F7F6F;
	--oze-contact-terra: #A85340;
	--oze-contact-terra-hover: #8E4536;
	--oze-contact-title-font: var(--e-global-typography-primary-font-family, Georgia, serif);
	--oze-contact-text-font: var(--e-global-typography-text-font-family, Helvetica, Arial, sans-serif);
	width: 100%;
	padding: 40px 20px;
	background: var(--oze-contact-cream);
	color: var(--oze-contact-text);
	font-family: var(--oze-contact-text-font);
	font-size: 16px;
	line-height: 1.55;
	scroll-margin-top: 96px;
}
.oze-contact *, .oze-contact *::before, .oze-contact *::after { box-sizing: border-box; }
.oze-contact__inner {
	display: grid;
	grid-template-columns: minmax(0, 58fr) minmax(320px, 42fr);
	grid-template-areas:
		"title media"
		"intro media"
		"booking media"
		"form media"
		"privacy media";
	column-gap: 48px;
	row-gap: 0;
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	align-items: start;
}
.oze-contact__title {
	grid-area: title;
	min-width: 0;
}
.oze-contact__title .elementor-heading-title {
	margin: 0 0 12px;
	font-family: var(--oze-contact-title-font);
	font-size: clamp(32px, 4vw, 44px);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: 0;
	color: var(--oze-contact-brown);
}
.oze-contact__intro { grid-area: intro; min-width: 0; max-width: 580px; }
.oze-contact__intro p { margin: 0 0 18px; font-size: 17px; }
.oze-contact__booking {
	grid-area: booking;
	justify-self: start;
	min-width: 0;
}
.oze-contact__booking .elementor-button {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 0 0 18px;
	padding: 10px 18px;
	border: 1px solid var(--oze-contact-terra);
	border-radius: 10px;
	background: transparent;
	color: var(--oze-contact-terra);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.oze-contact__booking .elementor-button:hover { background: #F1E7E2; color: var(--oze-contact-terra-hover); border-color: var(--oze-contact-terra-hover); }
.oze-contact__media {
	grid-area: media;
	align-self: stretch;
	min-height: 420px;
	overflow: hidden;
	border-radius: 120px 24px 120px 24px;
	box-shadow: 0 4px 18px rgba(61, 56, 52, .1);
}
.oze-contact__media .elementor-widget-container { width: 100%; height: 100%; overflow: hidden; }
.oze-contact__media img { display: block; width: auto; max-width: none; height: 100%; margin-left: auto; object-fit: cover; object-position: right center; }
.oze-contact__form-host { grid-area: form; min-width: 0; max-width: 640px; }
.oze-contact__form { margin: 0; }
.oze-contact__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.oze-contact__field { margin: 0; }
.oze-contact__field--message { grid-column: 1 / -1; }
.oze-contact__field label {
	display: block;
	margin: 0 0 5px;
	color: var(--oze-contact-brown);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
}
.oze-contact__field input, .oze-contact__field textarea {
	display: block;
	width: 100%;
	min-height: 50px;
	padding: 11px 13px;
	border: 1px solid var(--oze-contact-border);
	border-radius: 11px;
	background: var(--oze-contact-white);
	color: var(--oze-contact-brown);
	font: inherit;
	font-size: 16px;
	line-height: 1.45;
	box-shadow: none;
	transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
.oze-contact__field textarea { min-height: 130px; resize: vertical; }
.oze-contact__field input:focus, .oze-contact__field textarea:focus {
	outline: 0;
	border-color: var(--oze-contact-sage);
	box-shadow: 0 0 0 3px rgba(79, 127, 111, .2);
}
.oze-contact__field.is-invalid input, .oze-contact__field.is-invalid textarea { border-color: #A93B2B; }
.oze-contact__error { display: block; margin-top: 3px; color: #8E2C1E; font-size: 13px; font-weight: 600; line-height: 1.35; }
.oze-contact__error:empty { display: none; }
.oze-contact__trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.oze-contact__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	margin-top: 4px;
	padding: 13px 26px;
	border: 1px solid var(--oze-contact-terra) !important;
	border-radius: 10px;
	background: var(--oze-contact-terra) !important;
	color: #FFFFFF !important;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
	transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.oze-contact__submit::before { content: none !important; display: none !important; }
.oze-contact__submit:hover:not(:disabled), .oze-contact__submit:focus-visible:not(:disabled) { background: var(--oze-contact-terra-hover) !important; border-color: var(--oze-contact-terra-hover) !important; }
.oze-contact__submit:disabled { opacity: .65; cursor: wait; }
.oze-contact__booking .elementor-button:focus-visible, .oze-contact__submit:focus-visible { outline: 3px solid var(--oze-contact-sage); outline-offset: 3px; }
.oze-contact__status { margin: 10px 0 0; font-size: 14px; font-weight: 600; }
.oze-contact__status:empty { display: none; }
.oze-contact__status.is-success { color: #35604F; }
.oze-contact__status.is-error { color: #8E2C1E; }
.oze-contact__fallback { margin: 6px 0 0; color: var(--oze-contact-muted); font-size: 14px; }
.oze-contact__fallback[hidden] { display: none !important; }
.oze-contact__fallback a { color: var(--oze-contact-sage); font-weight: 600; }
.oze-contact__privacy { grid-area: privacy; min-width: 0; max-width: 640px; color: var(--oze-contact-muted); }
.oze-contact__privacy p { margin: 12px 0 0; font-size: 14px; line-height: 1.5; }
.oze-contact__privacy a { color: var(--oze-contact-sage); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 900px) {
	.oze-contact { padding: 44px 20px; }
	.oze-contact__inner { grid-template-columns: minmax(0, 56fr) minmax(280px, 44fr); column-gap: 28px; }
	.oze-contact__media { min-height: 420px; border-radius: 90px 20px 90px 20px; }
	.oze-contact__fields { grid-template-columns: 1fr; gap: 12px; }
	.oze-contact__field--message { grid-column: auto; }
}

/* Pile verticale dès 860 px — le point de rupture mobile du site — avec
   l'ordre de lecture voulu : titre, accroche, bouton de réservation, visuel,
   formulaire, puis mention de confidentialité. Une seule colonne, donc une
   zone par ligne : aucun élément ne peut partager une cellule avec un autre. */
@media (max-width: 860px) {
	.oze-contact { padding: 32px 20px; }
	.oze-contact__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "title" "intro" "booking" "media" "form" "privacy";
	}
	.oze-contact__title .elementor-heading-title { margin-bottom: 10px; font-size: 32px; }
	.oze-contact__intro p { margin-bottom: 18px; font-size: 16px; }
	.oze-contact__media { min-height: 0; height: 190px; margin-bottom: 22px; border-radius: 70px 16px 70px 16px; }
	.oze-contact__media img { height: 140%; transform: translateY(-14%); }
	.oze-contact__booking { margin: 18px 0 0; }
	.oze-contact__privacy { margin-top: 12px; }
	.oze-contact__submit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.oze-contact *, .oze-contact *::before, .oze-contact *::after { transition: none !important; }
}

/* ==========================================================================
   Mise en page du bouton d'envoi — correctif structurel.

   Le thème applique à TOUS les boutons :
       button:before, button:after {
           content:""; width:100%; height:100%;
           position:absolute; left:0; top:0; z-index:-1;
       }
   Seul ::before était neutralisé ici. Le ::after restant est un bloc
   positionné en absolu de la taille de son bloc conteneur : le bouton n'ayant
   aucune position, ce bloc conteneur était le conteneur Elementor de la carte
   (« .e-con » est en position: relative), et non le bouton. Un rectangle de la
   hauteur de toute la carte se calait donc sur son coin haut-gauche, sous le
   bouton d'envoi, et venait se superposer au contenu voisin.

   On neutralise ce pseudo-élément et on positionne le bouton : plus aucun
   pseudo-élément ne peut sortir de ses limites.
   ========================================================================== */
.oze-contact__submit { position: relative; }
.oze-contact__submit::after { content: none !important; display: none !important; }

/* Mobile et tablette : le bouton occupe sa propre ligne, toute la largeur du
   conteneur, avec une respiration nette au-dessus et en dessous. La mise en
   page vient du flux (colonne flexible), sans marge compensatoire. */
@media (max-width: 860px) {
	.oze-contact__form {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
	.oze-contact__fields { margin: 0; }
	.oze-contact__submit {
		width: 100%;
		max-width: 100%;
		margin: 16px 0 0;
	}
	.oze-contact__status { margin: 10px 0 0; }
	.oze-contact__fallback { margin: 8px 0 0; }
	/* Respiration entre le dernier élément du formulaire et ce qui suit. */
	.oze-contact { padding-bottom: 28px; }
}

/* ==========================================================================
   Section Contact en pile verticale : neutralisation des marges négatives.

   Quatre widgets de la section portent une marge basse négative réglée dans
   l'éditeur Elementor pour resserrer la colonne de gauche du gabarit deux
   colonnes : titre −60 px, accroche −55 px, bouton −52 px, formulaire −62 px
   (« .elementor-8506 .elementor-element.elementor-element-XXXXXXX »,
   spécificité 0-3-0, donc prioritaire sur les classes de zone).

   Dans une grille, c'est la BOÎTE DE MARGE d'un élément qui détermine la
   hauteur de sa ligne : une marge basse négative rend la ligne plus courte que
   son contenu, et la ligne suivante démarre donc à l'intérieur de la
   précédente. En deux colonnes le débordement se perdait à côté du visuel ;
   en une seule colonne il se superpose au bloc suivant — d'où l'accroche par
   dessus le titre et la mention de confidentialité par dessus le formulaire.

   On annule ces marges sur mobile uniquement, puis on rétablit explicitement
   les respirations voulues. Le desktop conserve son réglage d'origine.
   ========================================================================== */
@media (max-width: 860px) {
	.oze-contact .oze-contact__inner > .elementor-element { margin-bottom: 0; }
	.oze-contact .oze-contact__inner > .oze-contact__booking { margin-top: 18px; }
	.oze-contact .oze-contact__inner > .oze-contact__media { margin-bottom: 22px; }
	.oze-contact .oze-contact__inner > .oze-contact__privacy { margin-top: 12px; }
}