/* =====================================================================
   Vallemont — page Contact
   Chargé conditionnellement via wp_enqueue_scripts (inc/enqueue.php).
   ===================================================================== */

/* ---------- 01 · HERO ---------- */
.ct-hero {
    background: var(--vm-black);
    color: var(--vm-bone);
    padding: 180px 96px 96px;
    position: relative;
}
.ct-hero .breadcrumb,
.ct-hero .coords {
    position: absolute;
    top: 110px;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    color: var(--vm-platinum);
}
.ct-hero .breadcrumb { left: 96px; letter-spacing: 0.18em; }
.ct-hero .coords     { right: 96px; letter-spacing: 0.08em; }
.ct-hero .inner      { max-width: 1480px; margin: 0 auto; }
.ct-hero h1 {
    font-family: var(--font-display);
    font-size: 220px;
    font-weight: 500;
    line-height: 0.86;
    letter-spacing: 0;
    text-transform: uppercase;
    margin: 0;
}
.ct-hero h1 .dot {
    margin-left: -0.12em;
}
.ct-hero h1 em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    text-transform: none;
    color: var(--vm-platinum);
}
.ct-hero .lead-row {
    margin-top: 48px;
    border-top: 1px solid rgba(255,255,255,0.18);
    padding-top: 36px;
    max-width: 920px;
}
.ct-hero .lead-row .lead {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: 24px;
    line-height: 1.45;
    color: var(--vm-platinum);
    margin: 0;
    max-width: 640px;
}

/* ---------- 02 · COORDS + FORM ---------- */
.ct-coords {
    background: var(--vm-black);
    color: var(--vm-bone);
    padding: 120px 96px 144px;
    border-top: 1px solid rgba(255,255,255,0.18);
}
.ct-coords .inner {
    max-width: 1480px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 120px;
    align-items: flex-start;
}
.ct-coords .section-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vm-platinum);
    margin-bottom: 24px;
}
.ct-coords h2 {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 500;
    line-height: 0.96;
    letter-spacing: 0;
    text-transform: uppercase;
    margin: 0 0 56px;
}
.ct-coords h2 em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    text-transform: none;
    color: var(--vm-platinum);
}

/* Coordonnées rows */
.ct-coords .row {
    border-top: 1px solid rgba(255,255,255,0.18);
    padding: 24px 0;
}
.ct-coords .row:last-of-type {
    border-bottom: 1px solid rgba(255,255,255,0.18);
}
.ct-coords .row .k {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vm-platinum);
    margin-bottom: 10px;
}
.ct-coords .row .v {
    font-family: var(--font-serif);
    font-size: 18px;
    line-height: 1.5;
    color: var(--vm-bone);
    white-space: pre-line;
}
.ct-coords .row .v a {
    border-bottom: 1px solid rgba(245,245,242,0.3);
    transition: border-color 220ms;
}
.ct-coords .row .v a:hover { border-bottom-color: var(--vm-bone); }
.ct-coords .row.social .links { display: flex; gap: 32px; flex-wrap: wrap; }
.ct-coords .row.social .links a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--vm-bone);
    border-bottom: 1px solid var(--vm-bone);
    padding-bottom: 4px;
}
.ct-coords .row.social .links a svg { flex: none; }

/* Form */
.ct-form { display: flex; flex-direction: column; }
.ct-form label {
    display: block;
    border-top: 1px solid rgba(255,255,255,0.18);
    padding: 24px 0 20px;
}
.ct-form .label-row {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vm-platinum);
    margin-bottom: 12px;
}
.ct-form .label-row .hint {
    text-transform: none;
    letter-spacing: 0.06em;
    font-style: italic;
}
.ct-form input,
.ct-form textarea,
.ct-form select {
    width: 100%;
    display: block;
    background: transparent;
    border: 0;
    border-bottom: 1px solid transparent;
    outline: 0;
    font-family: var(--font-serif);
    font-size: 20px;
    color: var(--vm-bone);
    padding: 4px 0;
    transition: border-color 220ms;
    border-radius: 0;
}
.ct-form textarea { resize: vertical; min-height: 96px; }
.ct-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 24px;
    cursor: pointer;
}
.ct-form .select-wrap { position: relative; }
.ct-form .select-wrap::after {
    content: '▾';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--vm-platinum);
}
.ct-form input:focus,
.ct-form textarea:focus,
.ct-form select:focus { border-bottom-color: var(--vm-bone); }
.ct-form select option { background: var(--vm-black); color: var(--vm-bone); }
.ct-form .submit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;
    gap: 24px;
}
.ct-form .submit .legal {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vm-platinum);
    max-width: 360px;
    line-height: 1.5;
}
/* Honeypot — invisible to humans, attractive to bots */
.ct-form .vm-hp {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.ct-thanks,
.ct-error {
    border: 1px solid rgba(245,245,242,0.3);
    padding: 56px;
    text-align: center;
}
.ct-thanks .label,
.ct-error .label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vm-platinum);
    margin-bottom: 16px;
}
.ct-thanks .body,
.ct-error .body {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: 22px;
    line-height: 1.4;
    color: var(--vm-bone);
}
.ct-error { border-color: rgba(139,26,26,0.6); }
.ct-error .label { color: var(--vm-bourgogne); }

/* ---------- 03 · MAP ---------- */
.ct-map {
    background: var(--vm-black);
    color: var(--vm-bone);
    border-top: 1px solid rgba(255,255,255,0.18);
}
.ct-map .inner {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    min-height: 620px;
}
.ct-map .copy {
    padding: 120px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid rgba(255,255,255,0.18);
}
.ct-map .section-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vm-steel);
    margin-bottom: 24px;
}
.ct-map h2 {
    font-family: var(--font-display);
    font-size: 64px;
    font-weight: 500;
    line-height: 0.96;
    letter-spacing: 0;
    text-transform: uppercase;
    margin: 0;
}
.ct-map h2 em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    text-transform: none;
    color: var(--vm-platinum);
}
.ct-map .bars { margin: 32px 0; display: flex; gap: 32px; }
.ct-map .lead {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: 20px;
    line-height: 1.45;
    color: var(--vm-bone);
    margin: 0 0 36px;
    max-width: 420px;
}
.ct-map .specs {
    border-top: 1px solid rgba(255,255,255,0.18);
    border-bottom: 1px solid rgba(255,255,255,0.18);
    padding: 20px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}
.ct-map .specs .k {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vm-steel);
    margin-bottom: 6px;
}
.ct-map .specs .v {
    font-family: var(--font-serif);
    font-size: 16px;
    color: var(--vm-bone);
}
.ct-map .canvas {
    position: relative;
    background: #0E0E0E;
    overflow: hidden;
}
.ct-map .canvas svg { width: 100%; height: 100%; display: block; }

/* ---------- 04 · NOTE ---------- */
.ct-note {
    background: var(--vm-black);
    color: var(--vm-bone);
    padding: 160px 96px;
    border-top: 1px solid rgba(255,255,255,0.18);
    text-align: center;
}
.ct-note .inner { max-width: 880px; margin: 0 auto; }
.ct-note .label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vm-platinum);
    margin-bottom: 32px;
}
.ct-note p {
    font-family: var(--font-display);
    font-size: 64px;
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: 0;
    text-transform: uppercase;
    margin: 0;
}
.ct-note p em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    text-transform: none;
    color: var(--vm-platinum);
}
.ct-note .closer {
    margin-top: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.ct-note .closer .label-italic {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: 20px;
    color: var(--vm-bone);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .ct-hero { padding: 140px 56px 80px; }
    .ct-hero .breadcrumb { left: 56px; }
    .ct-hero .coords     { right: 56px; }
    .ct-hero h1 { font-size: 132px; }
    .ct-coords { padding: 96px 56px; }
    .ct-coords .inner { grid-template-columns: 1fr; gap: 80px; }
    .ct-map .inner { grid-template-columns: 1fr; min-height: 0; }
    .ct-map .copy {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,0.18);
        padding: 80px 56px;
    }
    .ct-map .canvas { min-height: 420px; }
    .ct-note { padding: 120px 56px; }
    .ct-note p { font-size: 48px; }
}
@media (max-width: 820px) {
    .ct-hero { padding: 110px 22px 56px; }
    .ct-hero .breadcrumb { top: 74px; left: 22px; font-size: 9px; }
    .ct-hero .coords     { top: 74px; right: 22px; font-size: 9px; }
    .ct-hero h1 { font-size: 64px; line-height: 0.92; }
    .ct-hero .lead-row .lead { font-size: 18px; }
    .ct-coords { padding: 72px 22px; }
    .ct-coords h2 { font-size: 38px; margin-bottom: 36px; }
    .ct-form input,
    .ct-form textarea,
    .ct-form select { font-size: 17px; }
    .ct-form .submit { flex-direction: column; align-items: stretch; gap: 18px; }
    .ct-form .submit .legal { max-width: none; }
    .ct-form .vm-btn { justify-content: space-between; }
    .ct-map .copy { padding: 56px 22px; }
    .ct-map h2 { font-size: 38px; }
    .ct-map .specs { grid-template-columns: 1fr; gap: 18px; }
    .ct-map .canvas { min-height: 320px; }
    .ct-note { padding: 72px 22px; }
    .ct-note p { font-size: 32px; }
}
@media (max-width: 600px) {
    /* Téléphone — drapeau de clôture : on garde une barre de chaque côté du
       texte (la barre bourgogne ne doit plus passer sous le texte) et on casse
       l'accroche sur 2 lignes pour que l'ensemble tienne sur une seule rangée. */
    .ct-note .closer { flex-wrap: nowrap; gap: 14px; }
    .ct-note .closer .bar { width: 40px; }
    .ct-note .closer .label-italic { display: inline-block; max-width: 180px; line-height: 1.35; }
}