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

   Composition (final):
     Section owns the 100px TOP gap to Section 02 only (no bottom
     padding — the next section owns its own top spacing). The
     visible content is a SINGLE rounded CTA container sitting
     inside the 1140px content frame (no full-bleed breakout). The
     container is the ONLY surface in the project that is allowed
     to use border-radius (24px desktop / 18px mobile). overflow:
     hidden keeps the background image + overlay clipped to the
     rounded edges. The global --kb-radius token is NOT changed.

     The container carries:
       - ONE single background image (a real <img> from a MEDIA
         content control). No collage, no multiple background
         layers, no multi-image split.
       - a restrained Bordeaux/dark overlay so the left copy stays
         readable while the couture subject on the right remains
         visible.
       - the standard Final CTA top row (logo upper-left from a
         MEDIA content control + "À VOTRE ÉCOUTE" upper-right
         label from a TEXT content control). Same control logic,
         same displayed size, same spacing, same alignment, same
         aspect ratio, same typography / color / letter-spacing
         and same responsive behavior as the Home Final CTA top
         row (NOT a reauthored variation).
       - a left-aligned editorial block of eyebrow / title / body /
         two CTAs / contact meta.

   Elementor contract: the background image is a real <img> selected
   through a MEDIA content control. No inline style="background-
   image:..." is ever emitted by the widget. The Bordeaux overlay
   is a CSS ::after. Contact meta icons are inline SVG. No asset,
   no Elementor image.

   Type rules:
     - Eyebrow: project unified eyebrow system (Montserrat / 12px /
       500 / uppercase / 0.18em / Gold). NO decorative line, NO
       ornament, NO underline.
     - Title: Raleway, Porcelain, non-italic, uniform color across
       the ENTIRE title. No decorative divider under the title.
     - Body: Montserrat, Porcelain / muted Porcelain.
     - Buttons: the existing site-wide .kb-button primitive (54px
       height, 28px inline padding, Montserrat 13px / 500, 0.12em,
       radius 0, --kb-transition-button). The local --primary and
       --secondary modifiers ONLY override color tokens on top of
       the existing primitive — the primitive is never modified.

   Reveal:
     A single restrained reveal group (.kb-contact-accomp__copy) is
     marked with data-kb-reveal="fade-up". Buttons and contact meta
     are NEVER animated individually — they all ride the parent
     group, matching the existing Sections architecture. The top
     row (logo + "À VOTRE ÉCOUTE") is NEVER animated either — it
     is present from the first paint so the rounded CTA canvas is
     already calm and editorial when the copy group lands.
   ========================================================================== */

/* ==========================================================================
   Section root
   Owns the 100px TOP gap to Section 02 only. Owns NO bottom padding.
   Wrapper width follows the canonical KB pattern (min() clamp) so
   the section is never wider than 1140px and never collides with
   narrow viewports. The rounded CTA container lives as a child
   inside the wrapper (not on the section root) so the section
   itself stays a clean rectangle.
   ========================================================================== */
.kb-contact-accomp {
    position: relative;
    width: min(
        calc(100% - 2 * var(--kb-gutter-desktop)),
        var(--kb-content-width)
    );
    max-width: var(--kb-content-width);
    margin-inline: auto;
    background-color: transparent;
    color: var(--kb-ink);
    overflow: visible;
    padding-top: var(--kb-section-space-desktop);
    /* Bottom-only 100px desktop gap to the Footer (Contact
       Accompaniment is the LAST section above the Footer, so
       it owns the visible breathing room between the CTA
       panel and the Footer top edge). Footer is NOT modified.
       Tablet / mobile mirror the standard 80 / 64 token
       ladder below so the inter-section rhythm stays
       consistent across the page. */
    padding-bottom: var(--kb-section-space-desktop);
}

/* ==========================================================================
   Rounded CTA container (the only radius surface in the project)
   Background lives here so the radius + overflow:hidden clip both
   the image and the overlay together. 24px desktop / 18px mobile.
   ========================================================================== */
.kb-contact-accomp__inner {
    position: relative;
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    background-color: var(--kb-ink);
    color: var(--kb-porcelain);
    /* Generous internal padding so the editorial copy never collides
       with the rounded edges. The copy group is positioned in the
       lower-left via min-height + flex on the layout. */
    isolation: isolate;
}

/* ==========================================================================
   Single background image
   Real <img> rendered from the MEDIA content control. position:absolute
   + inset:0 makes it cover the entire rounded container. z-index 0
   keeps it BEHIND the overlay (z-index 1) and the layout (z-index 2).
   background-size: cover is satisfied by the <img> object-fit:cover
   rule; no CSS background-image is ever emitted. object-position is
   right-biased so the couture subject naturally shows on the right
   side of the container while the left side carries the copy +
   overlay.
   ========================================================================== */
.kb-contact-accomp__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 0;
    overflow: hidden;
    background:
        linear-gradient(135deg, var(--kb-bordeaux) 0%, var(--kb-ink) 100%);
}

.kb-contact-accomp__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Right-biased focal point so the couture subject on the right
       side of the source composition stays visible after the
       rounded crop. Tuned in CSS only — never exposed to Elementor. */
    object-position: 65% center;
}

/* ==========================================================================
   Restrained Bordeaux/dark overlay
   Lives between the image (z-index 0) and the layout (z-index 2) so
   the editorial text on the left always has a calm brand-aligned
   readable field while the right side of the photograph stays
   visible. Multi-stop horizontal fade anchored on the left, easing
   into transparent by ~80% so the subject on the right is never
   tinted. Uses color-mix() against --kb-bordeaux so the overlay
   tracks the design system exactly — no hardcoded rgba literals,
   no muddy full-image veil.
   ========================================================================== */
.kb-contact-accomp__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--kb-bordeaux) 82%, transparent) 0%,
        color-mix(in srgb, var(--kb-bordeaux) 70%, transparent) 14%,
        color-mix(in srgb, var(--kb-bordeaux) 56%, transparent) 28%,
        color-mix(in srgb, var(--kb-bordeaux) 42%, transparent) 42%,
        color-mix(in srgb, var(--kb-bordeaux) 28%, transparent) 56%,
        color-mix(in srgb, var(--kb-bordeaux) 14%, transparent) 70%,
        color-mix(in srgb, var(--kb-bordeaux) 4%, transparent) 82%,
        transparent 92%
    );
}

/* ==========================================================================
   Layout — top row + copy group
   The layout is a column flex: the standard Final CTA top row (logo
   upper-left, "À VOTRE ÉCOUTE" upper-right) sits at the top, the
   copy group (eyebrow / title / body / CTAs / contact meta) sits in
   the lower portion of the rounded canvas with the right side
   naturally showing the couture subject through the background. The
   container has a definite min-height (desktop) so the editorial
   block reads as a generous 1140px-wide CTA panel.
   ========================================================================== */
.kb-contact-accomp__layout {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-height: 520px;
    padding: 36px 56px 56px 56px;
}

/* ==========================================================================
   Standard Final CTA top row (logo + "À VOTRE ÉCOUTE")
   Mirrors the Home Final CTA top row exactly: flex row, space-between,
   same min-height, same gap, same logo sizing, same ear label
   typography / color / letter-spacing. The top row is NEVER animated
   individually — it is present from the first paint so the rounded
   CTA canvas is already calm and editorial.
   ========================================================================== */
.kb-contact-accomp__top-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 44px;
}

/* Logo — real <img> from the MEDIA control. Height is capped so the
   logo never dominates the editorial block. The logo is rendered
   with its natural color (the supplied artwork may already be
   Porcelain / light). Same max-height as the Home Final CTA so
   the standard header reads identically across pages. */
.kb-contact-accomp__logo {
    flex: 0 0 auto;
    max-height: 88px;
    line-height: 0;
}

.kb-contact-accomp__logo img {
    display: block;
    max-height: 88px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* "À VOTRE ÉCOUTE" upper-right label.
   Montserrat 12px / 500 / uppercase / 0.22em / Porcelain-muted —
   the same exact typography, color, and letter-spacing as the Home
   Final CTA top row so the standard header behavior is matched. */
.kb-contact-accomp__ear {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--kb-porcelain-muted);
    font-style: normal;
}

.kb-contact-accomp__ear-text {
    display: inline-block;
}

/* ==========================================================================
   Copy group
   Lives in the lower portion of the rounded container. max-width
   caps the editorial footprint at ~62% of the container width so
   the right side stays visually free for the couture subject to
   breathe through the background. The whole group moves as ONE
   reveal (fade-up).
   ========================================================================== */
.kb-contact-accomp__copy {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 24px;
    width: 100%;
    max-width: 62%;
    margin-top: var(--kb-space-xl);
}

/* ==========================================================================
   Eyebrow
   Reuses the canonical .kb-section-eyebrow primitive (base.css) for
   Montserrat / 12px / 500 / uppercase / 0.18em / Gold. The
   .kb-contact-accomp__eyebrow class only acts as a section-scoped
   hook — no typography duplication here. NO decorative line, NO
   ornament, NO underline.
   ========================================================================== */
.kb-contact-accomp__eyebrow {
    margin: 0;
    /* Single-source spacing — no extra bottom margin; the primitive
       already owns the canonical 24px / 20px gap. */
}

/* ==========================================================================
   Title
   Raleway, Porcelain, non-italic. SAME color across the ENTIRE
   title. No decorative divider directly underneath. white-space:
   pre-line honors the editor's \n line break. text-wrap: balance
   keeps the two-line block editorial. font-weight 300 / line-height
   1.05 / size 48px desktop (matches the other Section H2s).
   ========================================================================== */
.kb-contact-accomp__title {
    margin: 0;
    font-family: var(--kb-font-display);
    font-size: 44px;
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.005em;
    color: var(--kb-porcelain);
    font-style: normal;
    text-wrap: balance;
    white-space: pre-line;
}

/* ==========================================================================
   Body copy
   Montserrat 15–16px / 400 / line-height 1.7 / Porcelain muted
   (slightly lower contrast than the title so the title still
   anchors the visual hierarchy). Line breaks honored via
   white-space: pre-line. Capped at ~56ch so the line length
   stays editorial.
   ========================================================================== */
.kb-contact-accomp__body {
    margin: 0;
    max-width: 56ch;
    font-family: var(--kb-font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--kb-porcelain-muted);
    white-space: pre-line;
    text-wrap: pretty;
    font-style: normal;
}

/* ==========================================================================
   CTA group
   Two canonical outline buttons side-by-side at desktop. Reuses
   the site-wide .kb-button primitive (54px height, 28px padding,
   Montserrat 13px / 500, 0.12em, radius 0, --kb-transition-button).
   Only color tokens are overridden on top of the primitive —
   height / padding / font / radius / transition are never touched
   here.

   Primary (Porcelain) and Secondary (Gold / WhatsApp) follow the
   same Hero hover inversion pattern: fine-pointer hover fills the
   frame and inverts the label color to Ink. :active is kept
   outside the pointer media query for touch press feedback.
   :focus-visible uses a restrained Bordeaux outline so keyboard
   focus is independent of pointer type.
   ========================================================================== */
.kb-contact-accomp__ctas {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: var(--kb-space-s);
}

.kb-contact-accomp__cta {
    /* Hero-equivalent motion: promote the base 300ms transition to
       --kb-transition-button (500ms easeOutQuint). background-color,
       color, border-color only — no transform, no scale. */
    transition:
        background-color var(--kb-transition-button),
        color var(--kb-transition-button),
        border-color var(--kb-transition-button);
}

/* PRIMARY / PORCELAIN */
.kb-contact-accomp__cta--primary,
.kb-contact-accomp__cta--primary:visited {
    background-color: transparent;
    color: var(--kb-porcelain);
    border-color: var(--kb-porcelain);
}

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

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

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

/* SECONDARY / GOLD (WhatsApp) */
.kb-contact-accomp__cta--secondary,
.kb-contact-accomp__cta--secondary:visited {
    background-color: transparent;
    color: var(--kb-gold);
    border-color: var(--kb-gold);
    /* Subtle drop shadow under the Gold label so it stays
       legible over the photographic background. Removed on
       hover when the button flips to Gold background + Ink
       text (the Ink text on Gold needs no shadow). */
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}

.kb-contact-accomp__cta--secondary:active {
    background-color: var(--kb-gold);
    color: var(--kb-ink);
    border-color: var(--kb-gold);
    text-shadow: none;
}

.kb-contact-accomp__cta--secondary:focus-visible {
    background-color: transparent;
    color: var(--kb-gold);
    border-color: var(--kb-gold);
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
    outline: 2px solid var(--kb-bordeaux);
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .kb-contact-accomp__cta--secondary:hover {
        background-color: var(--kb-gold);
        color: var(--kb-ink);
        border-color: var(--kb-gold);
        text-shadow: none;
    }
}

/* ==========================================================================
   Contact meta row
   Three items (phone / email / location) separated by thin Porcelain
   structural rules. Each item carries a tiny inline SVG icon
   (phone / envelope / location pin) + the editorial text.
   Montserrat 13px / 400 / Porcelain muted. Icons Gold. NOT
   animated individually — rides the parent
   .kb-contact-accomp__copy reveal. NO +, NO @, NO · used as
   fake icons — real SVG glyphs only.
   ========================================================================== */
.kb-contact-accomp__meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: var(--kb-space-s);
    padding-top: var(--kb-space-m);
    border-top: 1px solid var(--kb-porcelain-divider);
    width: 100%;
    max-width: 100%;
}

.kb-contact-accomp__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--kb-font-body);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--kb-porcelain-muted);
    font-style: normal;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.kb-contact-accomp__meta-item + .kb-contact-accomp__meta-item {
    position: relative;
    padding-left: 18px;
}

.kb-contact-accomp__meta-item + .kb-contact-accomp__meta-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background-color: var(--kb-porcelain-divider);
}

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

.kb-contact-accomp__meta-icon svg {
    display: block;
    width: 14px;
    height: 14px;
}

.kb-contact-accomp__meta-text {
    display: inline-block;
}

/* ==========================================================================
   Tablet (≤ 1199px)
   Section padding switches to the tablet token. Container padding
   tightens. Title scales to 42px. The copy group still occupies
   the lower-left; the right ~38% stays free for the subject to
   breathe. CTAs keep the same outline architecture.
   ========================================================================== */
@media (max-width: 1199px) {
    .kb-contact-accomp {
        padding-top: var(--kb-section-space-tablet);
    }

    .kb-contact-accomp__layout {
        min-height: 460px;
        padding: 32px 44px 44px 44px;
    }

    /* Top row collapses gracefully on tablet — same behavior as
       the Home Final CTA top row. */
    .kb-contact-accomp__top-row {
        gap: 16px;
    }

    .kb-contact-accomp__logo {
        max-height: 76px;
    }

    .kb-contact-accomp__logo img {
        max-height: 76px;
    }

    .kb-contact-accomp__ear {
        font-size: 11px;
        letter-spacing: 0.20em;
    }

    .kb-contact-accomp__copy {
        max-width: 66%;
    }

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

/* ==========================================================================
   Mobile (≤ 767px) — single-column editorial stack
   Container padding tightens to 24px. Radius drops to 18px. Title
   scales to 36px. CTAs stack vertically full-width. Contact meta
   stacks vertically without the inline separators. The overlay
   keeps a left-anchored readable field while the right side stays
   unobstructed. No horizontal overflow at 390 / 375 / 360.
   ========================================================================== */
@media (max-width: 767px) {
    .kb-contact-accomp {
        padding-top: var(--kb-section-space-mobile);
        padding-bottom: var(--kb-section-space-mobile);
    }

    .kb-contact-accomp__inner {
        border-radius: 18px;
    }

    .kb-contact-accomp__layout {
        min-height: 0;
        padding: 24px 24px 32px 24px;
    }

    /* Top row collapses gracefully on narrow viewports. Logo and
       ear label stay on a single line, but shrink together — same
       behavior as the Home Final CTA top row. */
    .kb-contact-accomp__top-row {
        gap: 12px;
    }

    .kb-contact-accomp__logo {
        max-height: 72px;
    }

    .kb-contact-accomp__logo img {
        max-height: 72px;
    }

    .kb-contact-accomp__ear {
        font-size: 10px;
        letter-spacing: 0.18em;
        gap: 10px;
    }

    .kb-contact-accomp__copy {
        max-width: 100%;
        gap: 22px;
        margin-top: var(--kb-space-l);
    }

    .kb-contact-accomp__eyebrow {
        /* 12px on mobile — local override of the .kb-section-eyebrow
           primitive in base.css (which drops to 11px on mobile). The
           non-Hero Contact sections use 12px across all viewports
           for visual consistency. */
        font-size: 12px;
        margin-bottom: 18px;
    }

    .kb-contact-accomp__title {
        font-size: 36px;
        line-height: 1.1;
    }

    .kb-contact-accomp__body {
        font-size: 15px;
        line-height: 1.7;
    }

    /* CTAs stack vertically full-width. The site-wide .kb-button
       primitive (54px height, etc.) is untouched. */
    .kb-contact-accomp__ctas {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 12px;
    }

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

    /* Contact meta stacks vertically on mobile and the inline
       separators collapse. The top hairline still separates the
       meta block from the CTAs. */
    .kb-contact-accomp__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .kb-contact-accomp__meta-item + .kb-contact-accomp__meta-item {
        padding-left: 0;
    }

    .kb-contact-accomp__meta-item + .kb-contact-accomp__meta-item::before {
        display: none;
    }
}

/* ==========================================================================
   SCROLL REVEAL — Section 03
   ------------------------------------------------------------
   Per the spec, exactly ONE reveal group: the entire copy group
   (eyebrow / title / body / CTAs / contact meta) — fade-up, ~22px,
   ~950ms, ~120ms delay. The background image, the overlay, and
   the top row (logo + "À VOTRE ÉCOUTE") are NOT animated — they
   are present from the first paint so the rounded CTA canvas is
   already calm and editorial when the copy group lands.

   Mobile: shorter distance / duration. Reduced-motion safety net
   is already in base.css — no per-section override needed.
   ========================================================================== */
.kb-contact-accomp__copy[data-kb-reveal="fade-up"] {
    transition-delay: 120ms;
    transition-duration: 950ms;
    --kb-reveal-distance: 22px;
}

@media (max-width: 767px) {
    .kb-contact-accomp__copy[data-kb-reveal="fade-up"] {
        --kb-reveal-distance: 14px;
        transition-duration: 800ms;
    }
}

/* Contact section escape: remove top/bottom padding of Elementor wrapper. */
.e-con:has(.kb-contact-accomp) > .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-accomp__title {
        font-size: 40px;
    }
}