/**
 * Page Contact — Asonha (direction « Canopy », palette Bleu & Vert).
 *
 * Portage fidèle du prototype (classes ip-* → cn-contact-*). Réutilise les
 * variables, utilitaires (.wrap, .kicker, .lede) et boutons (.btn*) de main.css.
 * La page hérite désormais de la palette globale (teal --lime / vert --forest) :
 * aucun accent propre n'est redéfini ici. Ajoute les styles de formulaire
 * (inexistants dans le thème) ciblés sur le markup généré par Contact Form 7.
 */

/* NB : on ne recadre pas `.wrap` sur --maxw ici. Le prototype laisse
 * `.wrap { max-width: none }` : la largeur n'est bornée que par ses marges
 * latérales (clamp(20px,4vw,56px)). Ajouter `max-width:--maxw` + `margin-inline:auto`
 * centrait le bloc dans la feuille et ajoutait ~46 px morts de chaque côté,
 * soit un retrait deux fois plus grand que la maquette. */

/* ============================== Hero ============================== */
.cn-contact-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #0a1c22; /* Repli si aucune image de fond n'est choisie. */
	padding: clamp(70px, 12vw, 140px) 0 clamp(48px, 7vw, 86px);
}
.cn-contact-hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}
.cn-contact-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(160deg, rgba(10, 28, 34, .78), rgba(10, 28, 34, .5));
}
.cn-contact-hero .wrap { position: relative; }
.cn-contact-hero .kicker { color: #fff; }
.cn-contact-hero h1 {
	color: #fff;
	font-size: clamp(2.4rem, 5.2vw, 4rem);
	margin-top: 16px;
	max-width: 16ch;
}
.cn-contact-hero .lede {
	color: rgba(255, 255, 255, .86);
	margin-top: 18px;
	max-width: 60ch;
}

/* ============================ Corps =============================== */
.cn-contact-main { padding: clamp(54px, 7vw, 100px) 0; background: #fff; }
.cn-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: clamp(36px, 5vw, 72px);
	align-items: stretch;
}

/* ---- Colonne coordonnées ---- */
.cn-contact-info { display: flex; flex-direction: column; }
.cn-contact-info h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); margin-top: 12px; margin-bottom: 22px; }

.cn-contact-card {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 18px 0;
	border-bottom: 1px solid var(--line);
}
.cn-contact-card:first-of-type { border-top: 1px solid var(--line); }
.cn-contact-card .ic {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	flex: none;
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--lime) 12%, transparent);
	color: var(--lime);
}
.cn-contact-card .ic svg { width: 20px; height: 20px; }
.cn-contact-card .lab {
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 700;
}
.cn-contact-card .val {
	font-size: 1.02rem;
	color: var(--ink);
	font-weight: 600;
	margin-top: 4px;
	line-height: 1.45;
}
.cn-contact-card .val a { transition: color .15s; }
.cn-contact-card .val a:hover { color: var(--lime); }
.cn-contact-card .sub { font-size: .88rem; color: var(--muted); margin-top: 3px; font-weight: 400; }

/* ---- Carte ---- */
.cn-contact-map {
	margin-top: 24px;
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid var(--line);
	flex: 1;
	min-height: 260px;
	position: relative;
	isolation: isolate;
}
.cn-contact-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 260px;
	border: 0;
	filter: grayscale(.35) contrast(1.04) brightness(1.02);
}
.cn-contact-map-tint {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(135deg, #0D6582, #2c7d6e 55%, #6A872B);
	mix-blend-mode: color;
	opacity: .9;
}
.cn-contact-map-link {
	position: absolute;
	left: 16px;
	top: 16px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: rgba(255, 255, 255, .95);
	color: #0D6582;
	font-size: .85rem;
	font-weight: 600;
	padding: 9px 14px;
	border-radius: 10px;
	box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .4);
	transition: transform .2s;
}
.cn-contact-map-link:hover { transform: translateY(-1px); }

/* ============================ Formulaire ========================== */
.cn-contact-form {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 24px;
	padding: clamp(26px, 3vw, 38px);
	box-shadow: 0 24px 60px -38px rgba(10, 24, 16, .5);
}
.cn-contact-form h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin-top: 10px; }
.cn-contact-form .fsub { font-size: .9rem; color: var(--muted); margin: 6px 0 22px; }
.cn-contact-form-hint {
	font-size: .9rem;
	color: var(--muted);
	background: var(--bg);
	border: 1px dashed var(--line);
	border-radius: 12px;
	padding: 16px 18px;
}

/* Champs (ciblent le markup Contact Form 7). */
.cn-contact-field { margin-bottom: 16px; }
.cn-contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cn-contact-field label {
	display: block;
	font-size: .84rem;
	font-weight: 600;
	color: var(--ink-soft);
	margin-bottom: 8px;
}
.cn-contact-field label .req { color: var(--lime); }

/* CF7 enveloppe chaque contrôle : on force le wrap en bloc pleine largeur. */
.cn-contact-form .wpcf7-form-control-wrap { display: block; }

/* wpcf7_autop() insère un <br> entre le libellé et son contrôle : le libellé
 * étant déjà en bloc (avec sa marge basse), ce <br> ajoutait une ligne vide
 * dans chaque champ — le formulaire dépassait la maquette d'environ 80 px, et
 * la colonne de gauche s'étirait d'autant (carte trop haute). */
.cn-contact-form br { display: none; }

.cn-contact-field input,
.cn-contact-field textarea,
.cn-contact-field select {
	width: 100%;
	font-family: var(--font-body);
	font-size: .98rem;
	color: var(--ink);
	background: var(--bg);
	border: 1.5px solid var(--line);
	border-radius: 12px;
	padding: 13px 15px;
	transition: border-color .15s, box-shadow .15s;
}
.cn-contact-field input::placeholder,
.cn-contact-field textarea::placeholder { color: var(--muted); opacity: .7; }
.cn-contact-field input:focus,
.cn-contact-field textarea:focus,
.cn-contact-field select:focus {
	outline: none;
	border-color: var(--lime);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--lime) 16%, transparent);
}
/* CF7 rend le textarea avec un attribut « rows » (10 par défaut), qui lui donne
 * une hauteur intrinsèque bien supérieure à la maquette ; « min-height » seul ne
 * la ramenait pas. On fixe donc la hauteur, tout en laissant l'agrandissement
 * manuel possible. */
.cn-contact-field textarea { height: 130px; min-height: 130px; resize: vertical; }

/* Téléphone : indicatif + numéro dans une seule pilule. */
.cn-contact-phone {
	display: flex;
	align-items: stretch;
	background: var(--bg);
	border: 1.5px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color .15s, box-shadow .15s;
}
.cn-contact-phone:focus-within {
	border-color: var(--lime);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--lime) 16%, transparent);
}
/* Ici aussi wpcf7_autop() enveloppe les deux contrôles dans un <p>, qui devenait
 * l'unique enfant du conteneur flex : l'indicatif et le numéro s'empilaient au
 * lieu de tenir dans une seule pilule. « display:contents » sort ce <p> de
 * l'arbre de rendu, ses enfants redevenant les éléments flex. (Le <br> qui les
 * séparait est masqué plus haut, pour tout le formulaire.) Les sélecteurs
 * ci-dessous sont en descendance — et non en enfant direct — pour fonctionner
 * avec ou sans ce <p>. */
.cn-contact-phone > p {
	display: contents;
}
.cn-contact-phone .wpcf7-form-control-wrap:first-child { flex: none; }
.cn-contact-phone .wpcf7-form-control-wrap:last-child { flex: 1; }
.cn-contact-phone select,
.cn-contact-phone input {
	border: none;
	border-radius: 0;
	background: transparent;
}
.cn-contact-phone select {
	width: auto;
	min-width: 96px;
	font-weight: 600;
	border-right: 1.5px solid var(--line);
	padding-right: 30px;
}
.cn-contact-phone select:focus,
.cn-contact-phone input:focus { outline: none; box-shadow: none; }

/* Consentement (case à cocher CF7 [acceptance]). */
.cn-contact-consent {
	font-size: .86rem;
	color: var(--muted);
	line-height: 1.5;
	margin: 4px 0 20px;
}
.cn-contact-consent .wpcf7-list-item { margin: 0; }
.cn-contact-consent label {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-weight: 400;
	margin: 0;
}
.cn-contact-consent input[type="checkbox"] {
	margin-top: 3px;
	flex: none;
	width: 16px;
	height: 16px;
	accent-color: var(--lime);
}
.cn-contact-consent a { color: var(--lime); font-weight: 600; }

/* Bouton d'envoi (stylé même sans classe .btn côté CF7). */
.cn-contact-form .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1rem;
	color: #fff;
	background: var(--lime);
	border: 1.5px solid transparent;
	border-radius: 999px;
	padding: 13px 26px;
	cursor: pointer;
	transition: transform .2s, filter .2s;
}
.cn-contact-form .wpcf7-submit:hover { transform: translateY(-2px); filter: brightness(1.05); }

/* Retours de validation / envoi CF7. */
.cn-contact-form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 12px 16px;
	border-radius: 12px;
	font-size: .9rem;
}
.cn-contact-form .wpcf7-not-valid-tip { color: #c0392b; font-size: .8rem; margin-top: 6px; }
.cn-contact-form .wpcf7-form-control.wpcf7-not-valid { border-color: #c0392b; }

/* ========================= Bande réclamation ===================== */
.cn-contact-reclam {
	margin-top: clamp(34px, 4vw, 52px);
	background: #FDF1E7;
	border: 1px solid #F6D9C1;
	color: #15241b;
	border-radius: 18px;
	padding: 20px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.cn-contact-reclam .rt { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 700; color: #15241b; }
.cn-contact-reclam .rs { font-size: .9rem; color: rgba(21, 36, 27, .72); margin-top: 3px; max-width: 46ch; }
.cn-contact-reclam .btn { background: #ED7D31; color: #fff; border-color: transparent; }

/* ============================ Responsive ========================== */
@media (max-width: 860px) {
	.cn-contact-grid { grid-template-columns: 1fr; gap: 36px; }
	.cn-contact-reclam { flex-direction: column; align-items: flex-start; gap: 18px; }
}
@media (max-width: 560px) {
	.cn-contact-row { grid-template-columns: 1fr; }
}