/* =============================================================================
   DOMAINE DU BAMBOIS — PAGE CONTACT
   Version: 1.0.0

   Tous les sélecteurs sont préfixés .dbb-contact pour éviter tout conflit.
   Ce fichier s'appuie sur les variables définies dans global.css.
   ============================================================================= */

/* ── Variables locales ────────────────────────────────────────────────────── */
.dbb-contact {
	--contact-max-width:  1180px;
	--contact-padding-x: clamp(20px, 5vw, 64px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════════════ */

.dbb-contact-hero {
	position: relative;
	min-height: clamp(320px, 48vh, 520px);
	background-size:    cover;
	background-position: center 30%;
	background-repeat:  no-repeat;
	display:            flex;
	align-items:        flex-end;
	padding-bottom:     clamp(48px, 8vh, 88px);
}

/* Overlay — plus léger qu'en page d'accueil, c'est une page intérieure */
.dbb-contact-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0,  0,  0,  0)    0%,
		rgba(26, 46, 36, 0.08) 30%,
		rgba(26, 46, 36, 0.52) 70%,
		rgba(26, 46, 36, 0.72) 100%
	);
	pointer-events: none;
}

.dbb-contact-hero-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--contact-max-width);
	margin-inline: auto;
	padding-inline: var(--contact-padding-x);
}

.dbb-contact-eyebrow {
	display:        inline-flex;
	align-items:    center;
	gap:            10px;
	font-family:    var(--dbb-font-body);
	font-size:      0.72rem;
	font-weight:    500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color:          var(--dbb-gold);
	margin-bottom:  18px;
}

.dbb-contact-eyebrow::before {
	content:    '';
	display:    inline-block;
	width:      24px;
	height:     1px;
	background: var(--dbb-gold);
	opacity:    0.7;
	flex-shrink: 0;
}

.dbb-contact-hero-title {
	font-family:    var(--dbb-font-display);
	font-size:      clamp(2.4rem, 5vw, 3.8rem);
	font-weight:    600;
	color:          var(--dbb-white);
	letter-spacing: -0.02em;
	line-height:    1.1;
	margin-bottom:  18px;
	text-shadow:    0 2px 24px rgba(0, 0, 0, 0.18);
}

.dbb-contact-hero-sub {
	font-family: var(--dbb-font-body);
	font-size:   clamp(0.95rem, 1.4vw, 1.1rem);
	font-weight: 300;
	color:       rgba(255, 255, 255, 0.78);
	max-width:   44ch;
	line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CORPS PRINCIPAL
   ═══════════════════════════════════════════════════════════════════════════ */

.dbb-contact-main {
	background:   var(--dbb-off-white);
	padding-block: clamp(64px, 10vh, 100px);
}

.dbb-contact-container {
	max-width:     var(--contact-max-width);
	margin-inline: auto;
	padding-inline: var(--contact-padding-x);
}

/* ── Grille 2 colonnes ────────────────────────────────────────────────────── */
.dbb-contact-grid {
	display: grid;
	grid-template-columns: 1fr 400px;
	gap:     clamp(40px, 6vw, 80px);
	align-items: start;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COLONNE FORMULAIRE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Carte formulaire — élévation douce sur le fond off-white */
.dbb-contact-form-col {
	background:    #FFFFFF;
	border:        1px solid rgba(200, 169, 106, 0.14);
	border-radius: 20px;
	padding:       clamp(32px, 5vw, 52px);
	box-shadow:
		0 2px 12px rgba(47, 79, 62, 0.05),
		0 8px 40px rgba(47, 79, 62, 0.04);
}

.dbb-contact-form-header {
	padding-bottom: 32px;
	border-bottom:  1px solid rgba(200, 169, 106, 0.16);
	margin-bottom:  40px;
}

.dbb-contact-form-title {
	font-family:    var(--dbb-font-display);
	font-size:      clamp(1.5rem, 2.5vw, 2rem);
	font-weight:    600;
	color:          var(--dbb-green-deep);
	letter-spacing: -0.015em;
	margin-bottom:  10px;
}

.dbb-contact-form-desc {
	font-size:   0.88rem;
	font-weight: 300;
	color:       var(--dbb-text-muted);
	line-height: 1.75;
}

/* ── Notices (succès / erreur) ────────────────────────────────────────────── */
.dbb-contact-notice {
	display:       flex;
	align-items:   flex-start;
	gap:           16px;
	padding:       20px 24px;
	border-radius: var(--dbb-radius-md);
	margin-bottom: 32px;
	font-size:     0.9rem;
	line-height:   1.65;
}

.dbb-contact-notice strong {
	display:       block;
	margin-bottom: 4px;
	font-weight:   600;
}

.dbb-contact-notice p {
	line-height: 1.6;
	margin: 0;
}

.dbb-contact-notice--success {
	background: rgba(47, 79, 62, 0.07);
	border:     1px solid rgba(47, 79, 62, 0.18);
	color:      var(--dbb-green-deep);
}

.dbb-contact-notice--error {
	background: rgba(180, 50, 50, 0.06);
	border:     1px solid rgba(180, 50, 50, 0.18);
	color:      #8b1a1a;
}

.dbb-contact-notice-icon {
	width:      24px;
	height:     24px;
	flex-shrink: 0;
	margin-top: 1px;
}

/* ── Structure du formulaire ─────────────────────────────────────────────── */
.dbb-contact-form {
	display:        flex;
	flex-direction: column;
	gap:            28px;
}

.dbb-contact-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap:     24px;
}

.dbb-contact-field {
	display:        flex;
	flex-direction: column;
	gap:            10px;
}

.dbb-contact-field--full {
	grid-column: 1 / -1;
}

/* ── Labels — style hôtel luxe ───────────────────────────────────────────── */
.dbb-contact-label {
	font-family:    var(--dbb-font-body);
	font-size:      0.68rem;
	font-weight:    500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color:          var(--dbb-green-deep);
}

.dbb-contact-required {
	color:       var(--dbb-gold);
	margin-left: 3px;
	font-size:   0.85em;
}

.dbb-contact-optional {
	font-weight:    300;
	color:          var(--dbb-text-muted);
	font-style:     italic;
	font-size:      0.78em;
	margin-left:    4px;
	letter-spacing: 0;
	text-transform: none;
}

/* ── Inputs et textarea ──────────────────────────────────────────────────── */
.dbb-contact-input {
	font-family:   var(--dbb-font-body);
	font-size:     0.94rem;
	font-weight:   400;
	color:         #1c2920;
	background:    #FAF9F6; /* crème chaud — cohérent avec l'univers nature */
	border:        1px solid rgba(200, 169, 106, 0.24);
	border-radius: 14px;
	padding:       16px 22px;
	width:         100%;
	box-shadow:    inset 0 1px 4px rgba(0, 0, 0, 0.04);
	transition:
		border-color 0.28s ease,
		box-shadow   0.28s ease,
		background   0.28s ease;
	outline: none;
}

.dbb-contact-input::placeholder {
	color:   #a8b4ae;
	opacity: 1;
}

.dbb-contact-input:hover {
	border-color: rgba(200, 169, 106, 0.42);
	background:   #FDFCF9;
}

.dbb-contact-input:focus {
	border-color: #C8A96A;
	background:   #FFFEF8;
	box-shadow:
		0 0 0 5px rgba(200, 169, 106, 0.12),
		inset 0 1px 4px rgba(0, 0, 0, 0.03);
}

/* ── Select personnalisé ─────────────────────────────────────────────────── */
.dbb-contact-select-wrap {
	position: relative;
}

.dbb-contact-select {
	appearance:   none;
	-webkit-appearance: none;
	padding-right: 40px;
	cursor:        pointer;
}

.dbb-contact-select-arrow {
	position:       absolute;
	right:          18px;
	top:            50%;
	transform:      translateY(-50%);
	width:          15px;
	height:         15px;
	color:          #C8A96A;
	pointer-events: none;
	opacity:        0.7;
}

/* ── Textarea ────────────────────────────────────────────────────────────── */
.dbb-contact-textarea-wrap {
	position: relative;
}

.dbb-contact-textarea {
	resize:         vertical;
	min-height:     188px;
	line-height:    1.8;
	padding-bottom: 42px; /* espace pour le compteur de caractères */
	background:     #F7F5F2; /* légèrement plus foncé que les inputs — différenciation subtile */
}

.dbb-contact-charcount {
	position:     absolute;
	bottom:       14px;
	right:        18px;
	font-size:    0.68rem;
	color:        #C8A96A;
	font-family:  var(--dbb-font-body);
	letter-spacing: 0.06em;
	pointer-events: none;
	user-select:  none;
	opacity:      0.55;
}

/* ── Honeypot ────────────────────────────────────────────────────────────── */
.dbb-contact-honeypot {
	position: absolute;
	opacity:  0;
	height:   0;
	overflow: hidden;
	pointer-events: none;
}

/* ── Ligne de soumission ─────────────────────────────────────────────────── */
.dbb-contact-submit-row {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             16px;
	flex-wrap:       wrap;
	padding-top:     8px;
}

.dbb-contact-required-note {
	font-size:      0.72rem;
	color:          var(--dbb-text-muted);
	font-weight:    300;
	letter-spacing: 0.04em;
}

/* ── Bouton d'envoi ──────────────────────────────────────────────────────── */
.dbb-contact-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             12px;
	font-family:     var(--dbb-font-body);
	font-size:       0.75rem;
	font-weight:     500;
	letter-spacing:  0.14em;
	text-transform:  uppercase;
	color:           #FAFAF8;
	background:      linear-gradient(145deg, #3d6452 0%, #2F4F3E 60%, #243d30 100%);
	border:          none;
	border-top:      1px solid rgba(255, 255, 255, 0.12); /* reflet subtil */
	border-radius:   100px;
	padding:         16px 38px;
	cursor:          pointer;
	transition:
		transform    0.35s cubic-bezier(0.34, 1.4, 0.64, 1),
		box-shadow   0.35s ease,
		background   0.35s ease;
	white-space:     nowrap;
	position:        relative;
	overflow:        hidden;
}

/* Shimmer — ligne de lumière qui traverse au hover */
.dbb-contact-btn::before {
	content:    '';
	position:   absolute;
	inset:      0;
	background: linear-gradient(
		108deg,
		transparent            35%,
		rgba(255, 255, 255, 0.10) 50%,
		transparent            65%
	);
	transform:  translateX(-120%);
	transition: transform 0.55s ease;
}

.dbb-contact-btn:hover::before {
	transform: translateX(120%);
}

.dbb-contact-btn:hover:not(:disabled) {
	background: linear-gradient(145deg, #476959 0%, #2a4636 60%, #1e3228 100%);
	transform:  translateY(-3px);
	box-shadow:
		0 14px 42px rgba(47, 79, 62, 0.28),
		0  4px 14px rgba(47, 79, 62, 0.16),
		0  0px  0px 1px rgba(47, 79, 62, 0.10);
}

.dbb-contact-btn:active:not(:disabled) {
	transform:   translateY(-1px);
	box-shadow:  0 4px 16px rgba(47, 79, 62, 0.20);
	transition-duration: 0.12s;
}

.dbb-contact-btn:disabled {
	opacity: 0.55;
	cursor:  not-allowed;
}

.dbb-contact-btn-arrow {
	width:      17px;
	height:     17px;
	flex-shrink: 0;
	transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.dbb-contact-btn:hover:not(:disabled) .dbb-contact-btn-arrow {
	transform: translateX(5px);
}

/* Spinner — masqué par défaut, visible en .is-loading */
.dbb-contact-btn-spinner {
	display:    none;
	width:      18px;
	height:     18px;
	flex-shrink: 0;
	animation:  dbb-spin 0.8s linear infinite;
}

.dbb-contact-btn.is-loading .dbb-contact-btn-arrow   { display: none; }
.dbb-contact-btn.is-loading .dbb-contact-btn-spinner { display: block; }
.dbb-contact-btn.is-loading .dbb-contact-btn-label   { opacity: 0.8; }

@keyframes dbb-spin {
	to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COLONNE INFORMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.dbb-contact-info-col {
	display:        flex;
	flex-direction: column;
	gap:            16px;
}

/* ── Cartes d'info ───────────────────────────────────────────────────────── */
.dbb-contact-info-card {
	display:       flex;
	align-items:   flex-start;
	gap:           18px;
	background:    var(--dbb-white);
	border:        1px solid rgba(47, 79, 62, 0.09);
	border-radius: var(--dbb-radius-md);
	padding:       24px;
	transition:    box-shadow var(--dbb-transition);
}

.dbb-contact-info-card:hover {
	box-shadow: var(--dbb-shadow-sm);
}

/* Carte mise en avant (Airbnb) */
.dbb-contact-info-card--highlight {
	border-color:   rgba(200, 169, 106, 0.25);
	background:     linear-gradient(135deg, var(--dbb-white) 0%, rgba(200, 169, 106, 0.04) 100%);
}

.dbb-contact-info-icon-wrap {
	flex-shrink:   0;
	width:         40px;
	height:        40px;
	display:       flex;
	align-items:   center;
	justify-content: center;
	background:    rgba(47, 79, 62, 0.06);
	border-radius: var(--dbb-radius-sm);
}

.dbb-contact-info-icon {
	width:  20px;
	height: 20px;
	color:  var(--dbb-green-deep);
}

.dbb-contact-info-card--highlight .dbb-contact-info-icon-wrap {
	background: rgba(200, 169, 106, 0.12);
}

.dbb-contact-info-card--highlight .dbb-contact-info-icon {
	color: var(--dbb-gold);
}

.dbb-contact-info-label {
	font-family:    var(--dbb-font-body);
	font-size:      0.72rem;
	font-weight:    500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color:          var(--dbb-gold);
	margin-bottom:  6px;
}

.dbb-contact-info-text {
	font-size:   0.9rem;
	font-weight: 400;
	color:       var(--dbb-text-dark);
	line-height: 1.65;
	margin: 0;
}

.dbb-contact-info-muted {
	font-size:   0.8rem;
	font-weight: 300;
	color:       var(--dbb-text-muted);
	font-style:  italic;
	display:     block;
	margin-top:  2px;
}

.dbb-contact-info-link {
	font-size:   0.9rem;
	font-weight: 400;
	color:       var(--dbb-green-deep);
	text-decoration: none;
	transition:  color var(--dbb-transition);
	display:     block;
}

.dbb-contact-info-link:hover {
	color: var(--dbb-gold);
}

/* ── Bouton Airbnb ───────────────────────────────────────────────────────── */
.dbb-contact-airbnb-btn {
	display:      inline-flex;
	align-items:  center;
	gap:          6px;
	margin-top:   12px;
	font-family:  var(--dbb-font-body);
	font-size:    0.78rem;
	font-weight:  500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:        var(--dbb-gold);
	text-decoration: none;
	transition:   gap var(--dbb-transition), color var(--dbb-transition);
}

.dbb-contact-airbnb-btn svg {
	width:  14px;
	height: 14px;
	transition: transform var(--dbb-transition);
}

.dbb-contact-airbnb-btn:hover {
	gap:   10px;
	color: var(--dbb-gold-light);
}

.dbb-contact-airbnb-btn:hover svg {
	transform: translateX(2px);
}

/* ── Note bas de colonne ─────────────────────────────────────────────────── */
.dbb-contact-info-note {
	margin-top:  4px;
	padding:     16px 20px;
	background:  rgba(47, 79, 62, 0.04);
	border-left: 2px solid rgba(47, 79, 62, 0.15);
	border-radius: 0 var(--dbb-radius-sm) var(--dbb-radius-sm) 0;
}

.dbb-contact-info-note p {
	font-size:   0.83rem;
	font-weight: 300;
	color:       var(--dbb-text-muted);
	line-height: 1.7;
	margin:      0;
	font-style:  italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS — Scroll reveal (réutilise le pattern global)
   ═══════════════════════════════════════════════════════════════════════════ */

.dbb-contact .dbb-reveal {
	opacity:    0;
	transform:  translateY(24px);
	transition:
		opacity   0.65s ease,
		transform 0.65s ease;
	transition-delay: calc(var(--i, 0) * 100ms + 30ms);
}

.dbb-contact .dbb-reveal.is-visible {
	opacity:   1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.dbb-contact .dbb-reveal {
		opacity:    1;
		transform:  none;
		transition: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tablette — ≤ 1024px */
@media (max-width: 1024px) {
	.dbb-contact-grid {
		grid-template-columns: 1fr;
	}

	.dbb-contact-info-col {
		flex-direction: row;
		flex-wrap:      wrap;
	}

	.dbb-contact-info-card {
		flex: 1 1 calc(50% - 8px);
		min-width: 220px;
	}

	.dbb-contact-info-card--highlight,
	.dbb-contact-info-note {
		flex: 1 1 100%;
	}
}

/* Mobile — ≤ 640px */
@media (max-width: 640px) {

	/* Carte formulaire — padding réduit sur mobile */
	.dbb-contact-form-col {
		padding:       28px 20px;
		border-radius: 16px;
	}

	.dbb-contact-row {
		grid-template-columns: 1fr;
	}

	.dbb-contact-hero {
		min-height: clamp(260px, 44vh, 360px);
	}

	.dbb-contact-info-col {
		flex-direction: column;
	}

	.dbb-contact-info-card {
		flex: 1 1 100%;
	}

	.dbb-contact-submit-row {
		flex-direction: column;
		align-items:    stretch;
	}

	.dbb-contact-btn {
		justify-content: center;
		width: 100%;
	}

	.dbb-contact-required-note {
		text-align: center;
	}
}