/*
 * kp-contact-block.css — Bloc 2 colonnes "Form + Contact details + Map"
 * (Page Contact bloc 2).
 *
 * Figma : 10132:2663. Gauche (760) : form avec champs darker style + bouton.
 * Droite (680) : cadre crème avec 5 lignes Company/Phone/Email/Hours/Address
 * + map 576×367.
 *
 * Form : HTML inerte stylé. À wire vers Fluent Forms via shortcode
 * [fluentform id="X"] quand le form sera créé en admin WP (cf. learnings projet).
 *
 * Auto-enqueué (kp-pattern-contact-block, dep kp-tokens).
 */

.kp-contact-block {
	display: flex;
	align-items: stretch;
	background: var(--kp-color-surface-deep);
}

.kp-contact-block__col {
	flex: 1 1 0;
	min-width: 0;
	padding: var(--kp-section-padding-y, 9.375rem) 3.25rem; /* 150 / 52 */
	display: flex;
	flex-direction: column;
	gap: 2.5rem; /* 40 */
}

.kp-contact-block__col--form {
	flex-basis: 760px;
	max-width: 47.5rem;
	background: var(--kp-color-surface-deep);
	color: var(--kp-color-text-inverse);
}

.kp-contact-block__col--details {
	flex-basis: 680px;
	max-width: 42.5rem;
	background: var(--kp-color-surface-deep);
}

.kp-contact-block__header {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.kp-contact-block__eyebrow-line {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0 0.25rem;
	font-family: var(--kp-font-sans);
	font-size: 0.875rem;
	font-weight: var(--kp-font-weight-medium);
	letter-spacing: 0.125em;
	text-transform: uppercase;
	color: var(--kp-color-text-inverse);
	line-height: 1;
}

.kp-contact-block__eyebrow-line > i {
	width: 6px;
	height: 6px;
	background: currentColor;
	flex-shrink: 0;
}

.kp-contact-block__title {
	margin: 0;
	font-family: var(--kp-font-sans);
	font-size: 2.875rem; /* 46 */
	font-weight: var(--kp-font-weight-regular);
	line-height: 1.05;
	letter-spacing: -0.05em;
	color: var(--kp-color-text-inverse);
}

/* --- FORM --- */
.kp-contact-block__form {
	display: flex;
	flex-direction: column;
	gap: 2rem; /* 32 */
}

.kp-contact-block__field {
	display: flex;
	flex-direction: column;
	gap: 0.625rem; /* 10 */
}

.kp-contact-block__label {
	font-family: var(--kp-font-sans);
	font-size: 1.125rem; /* 18 */
	font-weight: var(--kp-font-weight-regular);
	letter-spacing: -0.02em;
	color: var(--kp-color-text-inverse);
	line-height: 1.3;
}

.kp-contact-block__form {
	color-scheme: dark; /* informe le browser : UI native = dark (override le fond blanc par défaut Chrome/Safari) */
}

.kp-contact-block__input,
.kp-contact-block__select,
.kp-contact-block__textarea {
	width: 100%;
	padding: 1.5rem; /* 24 */
	background-color: #16110d !important; /* !important contre user-agent stylesheet & WP form filters. Morgan r3 */
	background-image: none;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--kp-radius-sm, 4px);
	font-family: var(--kp-font-sans);
	font-size: 1.125rem;
	font-weight: var(--kp-font-weight-regular);
	letter-spacing: -0.02em;
	color: var(--kp-color-text-inverse) !important;
	-webkit-text-fill-color: var(--kp-color-text-inverse); /* Safari autofill fix */
	line-height: 1.3;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Autofill : navigateurs forcent souvent un fond jaune/blanc → on neutralise. */
.kp-contact-block__input:-webkit-autofill,
.kp-contact-block__select:-webkit-autofill,
.kp-contact-block__textarea:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px #16110d inset !important;
	-webkit-text-fill-color: #fff !important;
	caret-color: #fff;
}

.kp-contact-block__input::placeholder,
.kp-contact-block__textarea::placeholder {
	color: #5a524c !important; /* gris solide warm-dark, discret — Morgan r3 */
	-webkit-text-fill-color: #5a524c !important;
	opacity: 1; /* override l'opacité native de certains browsers */
	font-style: italic;
}

/* Select : "Sélectionner une enveloppe" rendu comme placeholder gris discret. */
.kp-contact-block__select:has(option[value=""]:checked) {
	color: #5a524c !important;
	font-style: italic;
}
.kp-contact-block__select option[value=""] {
	color: #5a524c;
	font-style: italic;
}

.kp-contact-block__input:focus,
.kp-contact-block__select:focus,
.kp-contact-block__textarea:focus {
	outline: none;
	border-color: var(--kp-color-brand-primary);
	background: #1f1814;
}

.kp-contact-block__textarea {
	min-height: 10rem;
	resize: vertical;
	font-family: var(--kp-font-sans);
}

.kp-contact-block__select {
	appearance: none;
	-webkit-appearance: none;
	background-color: #16110d !important;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 11l7 7 7-7' stroke='%23df732e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 1.5rem center !important;
	background-size: 1.75rem !important;
	padding-right: 4rem;
	cursor: pointer;
}

.kp-contact-block__select option {
	background-color: #16110d;
	color: #fff;
}

/* Radios stylés (2 options). */
.kp-contact-block__radios {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.kp-contact-block__radio {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1.5rem;
	background: #16110d;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--kp-radius-sm, 4px);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.kp-contact-block__radio:hover {
	background: #1f1814;
	border-color: rgba(255, 255, 255, 0.2);
}

.kp-contact-block__radio input[type="radio"] {
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	margin: 0;
	accent-color: var(--kp-color-brand-primary);
	cursor: pointer;
}

.kp-contact-block__radio span {
	font-family: var(--kp-font-sans);
	font-size: 1.125rem;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--kp-color-text-inverse);
}

/* Checkbox RGPD. */
.kp-contact-block__checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-top: 1rem;
}

.kp-contact-block__checkbox input[type="checkbox"] {
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	margin: 0;
	accent-color: var(--kp-color-brand-primary);
	cursor: pointer;
}

.kp-contact-block__checkbox span {
	font-family: var(--kp-font-sans);
	font-size: 0.9375rem;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var(--kp-color-text-muted);
}

.kp-contact-block__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 3.5rem;
	padding: 0.75rem 1.5rem;
	border: 1px solid var(--kp-color-border-subtle);
	border-radius: var(--kp-radius-sm, 4px);
	background: var(--kp-color-brand-primary);
	color: var(--kp-color-text-on-brand);
	font-family: var(--kp-font-sans);
	font-size: 1.125rem;
	font-weight: var(--kp-font-weight-medium);
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.kp-contact-block__submit:hover,
.kp-contact-block__submit:focus-visible {
	background: var(--kp-color-brand-primary-hover);
	color: var(--kp-color-text-on-brand);
}

.kp-contact-block__hint {
	font-family: var(--kp-font-sans);
	font-size: 0.875rem;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var(--kp-color-text-faint);
	text-align: center;
}

/* --- Contact details (right column) --- */
.kp-contact-block__details-card {
	background: #f7e6d7;
	color: #0e0e0e;
	border-radius: var(--kp-radius-sm, 4px);
	overflow: hidden;
}

.kp-contact-block__details-row {
	padding: 1.125rem 1.5rem; /* 18 / 24 — réduit (Morgan r3) */
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	display: flex;
	flex-direction: column;
	gap: 0.375rem; /* 6 — réduit */
}

.kp-contact-block__details-row:first-child {
	border-top: 0;
}

/* Labels en petit + orange brand — Morgan r3. */
.kp-contact-block__details-label {
	font-family: var(--kp-font-sans);
	font-size: 0.75rem; /* 12 — réduit */
	font-weight: var(--kp-font-weight-medium);
	letter-spacing: 0.125em;
	text-transform: uppercase;
	color: var(--kp-color-brand-primary);
	line-height: 1;
}

.kp-contact-block__details-value {
	margin: 0;
	font-family: var(--kp-font-sans);
	font-size: 1.25rem; /* 20 — réduit légèrement */
	font-weight: var(--kp-font-weight-regular);
	line-height: 1.25;
	letter-spacing: -0.03em;
	color: #0e0e0e;
}

.kp-contact-block__details-value a {
	color: inherit;
	text-decoration: none;
	transition: color 0.18s ease;
}

.kp-contact-block__details-value a:hover {
	color: var(--kp-color-brand-primary);
}

/* Map iframe */
.kp-contact-block__map {
	margin-top: 1.5rem;
	width: 100%;
	height: 22.9375rem; /* 367 */
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: var(--kp-radius-sm, 4px);
	overflow: hidden;
}

.kp-contact-block__map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	filter: grayscale(0.3) contrast(1.1);
}

@media (max-width: 980px) {
	.kp-contact-block {
		flex-direction: column;
	}
	.kp-contact-block__col {
		max-width: 100%;
		padding: 4rem 1.5rem;
	}
	.kp-contact-block__title {
		font-size: clamp(1.75rem, 5vw, 2.5rem);
	}
}