/* ==========================================================================
   Page « Contact » (/contact.php) — SPÉCIFIQUE.
   Réutilise kk-container, kk-badge--hero, kk-btn, kk-icotile, kk-inline-link
   (components.css). On ne définit ici QUE le propre à la page : héro centré,
   cartes de canaux, encart bureaux, carte formulaire et écran de confirmation.
   Largeur de la maquette : 1200px.
   ========================================================================== */

/* --- Héro ---------------------------------------------------------------- */


.ct-hero-inner {
	--hero-pt: clamp(36px, 4.5vw, 60px);
	--hero-pb: clamp(10px, 2vw, 20px);
	text-align: center;
}

.ct-badge { text-transform: uppercase; letter-spacing: 0.04em; }

.ct-lead {
	--lead-gap: 0;
	--lead-width: 52ch;
}

/* --- Colonnes ------------------------------------------------------------- */
.ct-main {
	padding-top: clamp(24px, 3vw, 40px);
	padding-bottom: clamp(36px, 4vw, 56px);
}

.ct-split {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(20px, 3vw, 32px);
	align-items: start;
}

@media (max-width: 820px) {
	.ct-split { grid-template-columns: 1fr; }
}

/* --- Canaux de contact ---------------------------------------------------- */
.ct-channels {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ct-channel {
	display: flex;
	align-items: center;
	gap: 15px;
	--card-radius: var(--k-r-card);
	--card-padding: 18px 20px;
	text-decoration: none;
	color: inherit;
	transition: border-color .14s, transform .14s;
}

.ct-channel:hover,
.ct-channel:focus-visible {
	border-color: var(--k-orange);
	transform: translateY(-2px);
	color: inherit;
}

.ct-channel-ico {
	--tile-size: 48px;
}

.ct-channel-body { min-width: 0; }

.ct-channel-label {
	display: block;
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-s);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--k-faint);
}

.ct-channel-value {
	display: block;
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-2xl);
	color: var(--k-charcoal);
	margin-top: 2px;
	overflow-wrap: anywhere;
}

.ct-channel-sub {
	display: block;
	font-size: var(--k-text-s);
	color: var(--k-soft);
	font-weight: 600;
	margin-top: 1px;
}

/* --- Encart bureaux (bande marine) ---------------------------------------- */
.ct-offices {
	background: var(--k-gradient-dark);
	border-radius: var(--k-r-card);
	padding: 22px;
}

.ct-offices-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-l);
	color: var(--k-dark-strong);
}
.ct-offices-head span { color: var(--k-orange-glow); display: inline-flex; }

.ct-offices p {
	font-size: var(--k-text-m);
	line-height: var(--k-lh);
	margin: 0;
	color: var(--k-dark-muted);
}

/* --- Carte formulaire ------------------------------------------------------ */
.ct-card {
	--card-padding: clamp(24px, 3vw, 36px);
	--card-shadow: var(--k-shadow-lift);
}

.ct-card h2 {
	font-size: var(--k-h2-xs);
	letter-spacing: -0.01em;
	margin: 0 0 6px;
}

.ct-required {
	font-size: var(--k-text-l);
	line-height: var(--k-lh);
	color: var(--k-soft);
	margin: 0 0 24px;
}

.ct-legend {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-xs);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--k-orange-dark);
	margin-bottom: 12px;
}

.ct-legend-opt {
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: var(--k-faint);
}

.ct-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.ct-row--car { margin-bottom: 24px; }

@media (max-width: 560px) {
	.ct-row { grid-template-columns: 1fr; }
}

.ct-fields {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Champ, libellé et encart d'erreur : composant partagé .kk-field / .kk-label /
   .kk-field-error (components.css). Ne reste ici que le spécifique contact. */

.ct-turnstile { min-height: 65px; }

.ct-submit { margin-top: 4px; }
.ct-submit[disabled] { opacity: .65; cursor: progress; }

.ct-privacy {
	font-size: var(--k-text-s);
	color: var(--k-faint);
	line-height: 1.5;
	margin: 2px 0 0;
	text-align: center;
}

/* --- Confirmation d'envoi --------------------------------------------------- */
.ct-success {
	text-align: center;
	padding: clamp(20px, 3vw, 40px) 0;
}

.ct-success-ico {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--k-green-tint);
	color: var(--k-green);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.ct-success h2 {
	font-size: var(--k-h2-s);
	margin: 0 0 10px;
}

.ct-success p {
	font-size: var(--k-text-xl);
	line-height: var(--k-lh);
	color: var(--k-nav);
	margin: 0 auto 22px;
	max-width: 36ch;
}