/* ==========================================================================
   KB Contact Form (Contact Section 02) — Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-contact-form. All values driven by tokens.css.

   Two-column editorial composition inside the 1140px content frame:
     - LEFT  (360px) : intro (eyebrow / title / body) + 4 contact
                       methods (WhatsApp / Téléphone / Instagram / Email)
                       with restrained inline SVG icons.
     - RIGHT (1fr)   : one clean bordered form panel (1px Gold frame,
                       no radius, no shadow, generous internal padding)
                       containing the four editorial rows
                       (PRÉNOM/NOM, EMAIL, TÉLÉPHONE/SUJET, MESSAGE)
                       + privacy consent + submit button.

   Mobile: single-column stack in spec order
   (eyebrow → title → body → methods → form). Side-by-side fields
   collapse to one per row. The form panel sits flush with the
   methods block above it (no extra top gap).

   Reveal: TWO restrained groups (intro + form panel) using the
   existing data-kb-reveal system. Individual fields / methods
   are NEVER animated. Reduced-motion safety net lives in base.css.

   Elementor contract: every value is a TEXT / TEXTAREA / URL
   content control. NO Style tab. NO inline style="..." attributes.
   All styling lives here.

   No serif. No italic. No radius (project rule). No shadow.
   No decorative eyebrow line. No title divider. No botanical
   ornament. No icon library dependency.
   ========================================================================== */

/* ==========================================================================
   Section root
   Inherits .kb-section from base.css for the standard TOP-ONLY 100px
   desktop / 80px tablet / 64px mobile rhythm. .kb-container owns
   the 1140px frame and the 32/20px gutters via the canonical KB
   pattern. No bottom padding — the next section owns its own top gap.
   ========================================================================== */
.kb-contact-form {
    position: relative;
    width: 100%;
    background-color: var(--kb-porcelain);
    color: var(--kb-ink);
}

.kb-contact-form__inner {
    width: 100%;
}

/* ==========================================================================
   Two-column grid
   360px (intro) | 1fr (form). 64px column gap on desktop. The intro
   column is intentionally narrow so the form panel reads as the
   primary visual mass. minmax(0, 1fr) prevents the form panel from
   being pushed wider than its content by long unbroken strings.
   ========================================================================== */
.kb-contact-form__grid {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    column-gap: 64px;
    row-gap: 0;
    align-items: stretch;
    width: 100%;
}

/* ==========================================================================
   Intro block (left)
   Single reveal group. Eyebrow uses the canonical Gold system
   (.kb-section-eyebrow) — no decorative line. Title is Raleway Ink
   non-italic, no divider beneath. Body is Montserrat Ink. The
   methods list follows.
   ========================================================================== */
.kb-contact-form__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.kb-contact-form__eyebrow {
    margin: 0 0 var(--kb-space-m) 0;
}

.kb-contact-form__title {
    margin: 0 0 var(--kb-space-m) 0;
    font-family: var(--kb-font-display);
    font-size: 44px;
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.005em;
    color: var(--kb-ink);
    font-style: normal;
    text-wrap: balance;
    white-space: pre-line;
}

.kb-contact-form__body {
    margin: 0 0 var(--kb-space-l) 0;
    font-family: var(--kb-font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--kb-ink);
    font-style: normal;
    max-width: 38ch;
}

/* ==========================================================================
   Contact methods list
   4 items (WhatsApp / Téléphone / Instagram / Email). Each row:
     [Gold 16x16 SVG icon] [Montserrat uppercase label / value / note]
   Rows are separated by a thin --kb-ink-divider hairline so the
   group reads as a single editorial block without the visual weight
   of cards. The first and last rows still have matching vertical
   padding so the hairlines don't sit on the text baseline.
   ========================================================================== */
.kb-contact-form__methods {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.kb-contact-form__method {
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: start;
    column-gap: 14px;
    padding: 18px 0;
    border-top: 1px solid var(--kb-ink-divider);
    font-style: normal;
}

.kb-contact-form__method:last-child {
    border-bottom: 1px solid var(--kb-ink-divider);
}

.kb-contact-form__method-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    line-height: 0;
    color: var(--kb-gold);
    flex: 0 0 auto;
    margin-top: 2px;
}

.kb-contact-form__method-icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* WhatsApp icon (uploaded image or fallback SVG) renders at 16x16
   to match the visual size of the Phone and Email icons. Instagram
   stays at 20x20 (its bubble fills the 20x20 slot naturally and
   matches the original design intent — explicitly NOT changed
   per the micro-fix scope). */
.kb-contact-form__method--whatsapp .kb-contact-form__method-icon svg,
.kb-contact-form__method--whatsapp .kb-contact-form__method-icon img {
    width: 16px;
    height: 16px;
}

.kb-contact-form__method--instagram .kb-contact-form__method-icon svg {
    width: 20px;
    height: 20px;
}

.kb-contact-form__method-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.kb-contact-form__method-label {
    font-family: var(--kb-font-body);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kb-ink);
    font-style: normal;
}

.kb-contact-form__method-value {
    font-family: var(--kb-font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--kb-ink);
    text-decoration: none;
    font-style: normal;
    transition: color var(--kb-transition-ui);
}

a.kb-contact-form__method-value:hover,
a.kb-contact-form__method-value:focus-visible {
    color: var(--kb-bordeaux);
    outline: none;
}

a.kb-contact-form__method-value:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.kb-contact-form__method-note {
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--kb-ink);
    opacity: 0.62;
    font-style: normal;
}

/* ==========================================================================
   Form panel (right)
   1px solid Gold frame, no radius, no shadow, Porcelain ground so
   it reads as one calm editorial field. Generous internal padding
   (40px desktop) so the form breathes. The form is a single
   constrained-width column; rows that pair two fields use a 1fr 1fr
   sub-grid.
   ========================================================================== */
.kb-contact-form__panel {
    background-color: var(--kb-porcelain);
    border: 1px solid var(--kb-gold);
    border-radius: var(--kb-radius);
    padding: 40px 40px 40px 40px;
    width: 100%;
    min-width: 0;
    box-shadow: none;
}

.kb-contact-form__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    /* Fill the stretched panel (height:100% on the parent) so
       the submit button can be pushed to the bottom via
       margin-top:auto. Field dimensions, gap, and internal
       padding are unchanged. */
    flex: 1 1 auto;
}

/* Two-column rows (PRÉNOM/NOM, TÉLÉPHONE/SUJET). 20px gap to
   match the form's vertical rhythm. */
.kb-contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 20px;
    width: 100%;
}

.kb-contact-form__row--two {
    grid-template-columns: 1fr 1fr;
}

/* Each field: stacked label + control. Labels are Montserrat
   uppercase Ink, small tracked typography. Controls are full
   width, transparent / Porcelain, 1px --kb-ink-divider border,
   0 radius, generous height (~52px). */
.kb-contact-form__field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.kb-contact-form__field--full {
    width: 100%;
}

.kb-contact-form__label {
    font-family: var(--kb-font-body);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kb-ink);
    font-style: normal;
}

/* Inputs + textarea + select share the same architectural
   treatment so the form reads as one editorial family. No
   Elementor default rounded styling — radius 0, 1px divider
   border, Porcelain ground, comfortable height. */
.kb-contact-form__input,
.kb-contact-form__select {
    width: 100%;
    min-width: 0;
    height: 52px;
    padding: 0 16px;
    font-family: var(--kb-font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--kb-ink);
    background-color: var(--kb-porcelain);
    border: 1px solid var(--kb-ink-divider);
    border-radius: var(--kb-radius);
    box-shadow: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transition:
        border-color var(--kb-transition-ui),
        background-color var(--kb-transition-ui);
    font-style: normal;
}

.kb-contact-form__input::placeholder {
    color: var(--kb-ink);
    opacity: 0.42;
    font-style: normal;
}

.kb-contact-form__input:hover,
.kb-contact-form__select:hover {
    border-color: color-mix(in srgb, var(--kb-ink) 35%, transparent);
}

.kb-contact-form__input:focus,
.kb-contact-form__select:focus {
    border-color: var(--kb-gold);
    background-color: var(--kb-porcelain);
    outline: none;
}

.kb-contact-form__input:focus-visible,
.kb-contact-form__select:focus-visible {
    border-color: var(--kb-bordeaux);
    outline: none;
}

/* Autofill override — Chrome paints a yellow box-shadow on
   <input>:autofill which would break the editorial frame. */
.kb-contact-form__input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--kb-porcelain) inset;
    -webkit-text-fill-color: var(--kb-ink);
    caret-color: var(--kb-ink);
}

/* Textarea — comfortable height, vertical padding, no resize
   handle artifact (resize: vertical keeps the editorial feel
   while still allowing the user to expand). */
.kb-contact-form__textarea {
    height: auto;
    min-height: 140px;
    padding: 14px 16px;
    resize: vertical;
    line-height: 1.6;
    font-family: var(--kb-font-body);
}

/* Select wrapper — hides the native arrow and paints a tiny
   Gold caret pseudo-icon so the field still reads as a dropdown
   without the OS default chrome. */
.kb-contact-form__select-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.kb-contact-form__select {
    padding-right: 40px;
    cursor: pointer;
    text-overflow: ellipsis;
}

.kb-contact-form__select-caret {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    line-height: 0;
    color: var(--kb-gold);
    pointer-events: none;
}

.kb-contact-form__select-caret svg {
    display: block;
    width: 12px;
    height: 12px;
}

/* ==========================================================================
   Privacy consent
   Compact row. Custom checkbox (no Elementor default rounded
   square), tight to its label. The consent text inherits Ink.
   ========================================================================== */
.kb-contact-form__consent {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    margin-top: 4px;
    cursor: pointer;
}

.kb-contact-form__checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 2px 0 0 0;
    flex: 0 0 auto;
    background-color: var(--kb-porcelain);
    border: 1px solid var(--kb-ink-divider);
    border-radius: var(--kb-radius);
    box-shadow: none;
    cursor: pointer;
    position: relative;
    transition:
        border-color var(--kb-transition-ui),
        background-color var(--kb-transition-ui);
}

.kb-contact-form__checkbox:hover {
    border-color: color-mix(in srgb, var(--kb-ink) 35%, transparent);
}

.kb-contact-form__checkbox:checked {
    background-color: var(--kb-ink);
    border-color: var(--kb-ink);
}

.kb-contact-form__checkbox:checked::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 5px;
    width: 4px;
    height: 7px;
    border: solid var(--kb-porcelain);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

.kb-contact-form__checkbox:focus-visible {
    outline: 2px solid var(--kb-gold);
    outline-offset: 2px;
}

.kb-contact-form__consent-text {
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--kb-ink);
    font-style: normal;
}

/* ==========================================================================
   Submit button
   Uses the project button system. Bordeaux background, Porcelain
   label, Bordeaux border. Hover (fine pointer) → Ink background
   to read as a darker variation consistent with the existing
   .kb-button primitive (inverted dark→bordeaux→ink pattern from
   the Final CTA). 54px height, 13px / 500 / 0.12em, radius 0.

   The submit button is a <button type="submit"> inside the form
   panel, so it ALSO inherits the site-wide .kb-button primitive
   rules from base.css (height 54px, padding-inline 28px, etc.).
   Local rules only override color tokens on top of that primitive.
   ========================================================================== */
.kb-contact-form__submit {
    /* Match the width of the form panel — submit is full-width
       on its own row, NOT stretched to fill the entire form. */
    align-self: flex-start;
    margin-top: auto;
    /* Hero-equivalent motion: promote the base 300ms transition
       to --kb-transition-button (500ms easeOutQuint). Only
       background-color / color / border-color — no transform. */
    transition:
        background-color var(--kb-transition-button),
        color var(--kb-transition-button),
        border-color var(--kb-transition-button);
}

/* PRIMARY DARK / BORDEAUX — submit lives inside the form panel
   (Porcelain ground) so the dark fill is the right contrast
   choice. Normal = Bordeaux; fine-pointer hover = Ink (the
   canonical site dark CTA hover pattern). */
.kb-contact-form__submit,
.kb-contact-form__submit:visited {
    background-color: var(--kb-bordeaux);
    color: var(--kb-porcelain);
    border-color: var(--kb-bordeaux);
}

.kb-contact-form__submit:active {
    background-color: var(--kb-ink);
    color: var(--kb-porcelain);
    border-color: var(--kb-ink);
}

.kb-contact-form__submit:focus-visible {
    background-color: var(--kb-bordeaux);
    color: var(--kb-porcelain);
    border-color: var(--kb-bordeaux);
    outline: 2px solid var(--kb-gold);
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .kb-contact-form__submit:hover {
        background-color: var(--kb-ink);
        color: var(--kb-porcelain);
        border-color: var(--kb-ink);
    }
}

/* ==========================================================================
   Tablet (≤ 1199px)
   - Inherits the 32px gutter and 80px top section padding from
     the canonical KB ladder (handled in base.css).
   - Grid keeps the same 2 columns; the column gap tightens to
     40px so the intro column doesn't shrink too aggressively.
   - Form panel padding eases to 32px.
   - Title scales to 42px.
   ========================================================================== */
@media (max-width: 1199px) {
    .kb-contact-form__grid {
        grid-template-columns: 320px minmax(0, 1fr);
        column-gap: 40px;
    }

    .kb-contact-form__title {
        font-size: 44px;
    }

    .kb-contact-form__panel {
        padding: 32px;
    }

    .kb-contact-form__form {
        gap: 18px;
    }
}

/* ==========================================================================
   Mobile (≤ 767px)
   - Single column stack in spec order:
     eyebrow → title → body → methods → form.
   - Side-by-side fields collapse to one per row.
   - Form panel padding eases to 24px; border-radius 0 (project rule).
   - Submit button stretches to the full form width on mobile.
   - No horizontal overflow at 390 / 375 / 360.
   ========================================================================== */
@media (max-width: 767px) {
    .kb-contact-form__grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 40px;
    }

    .kb-contact-form__title {
        font-size: 36px;
    }

    .kb-contact-form__body {
        font-size: 15px;
        max-width: none;
    }

    .kb-contact-form__panel {
        padding: 24px;
    }

    .kb-contact-form__form {
        gap: 16px;
    }

    .kb-contact-form__row {
        grid-template-columns: minmax(0, 1fr);
    }

    .kb-contact-form__input,
    .kb-contact-form__select {
        height: 50px;
        font-size: 15px;
    }

    .kb-contact-form__textarea {
        min-height: 130px;
    }

    .kb-contact-form__intro .kb-contact-form__eyebrow,
    .kb-contact-form__eyebrow {
        font-size: 12px;
    }

    .kb-contact-form__submit {
        width: 100%;
        align-self: stretch;
        /* Mobile: reset the desktop margin-top:auto so the submit
           sits in the natural form rhythm instead of being pushed
           to the bottom of an unstretched panel. */
        margin-top: 12px;
    }
}

/* Contact section escape: remove top/bottom padding of Elementor wrapper. */
.e-con:has(.kb-contact-form) > .e-con-inner {
    padding-block: 0;
}

/* Tablet (768–1024px) — middle point between desktop and mobile.
   Only semantic typography: title 40px. */
@media (min-width: 768px) and (max-width: 1024px) {
    .kb-contact-form__title {
        font-size: 40px;
    }
}