/* ==========================================================================
   KB Tenues d'Occasion Section 02 / Le Moment — Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-tenues-occasion-moment. All values driven by
   tokens.css. Elementor = content only — every visual treatment
   lives here.

   Reference image controls the COMPOSITION:
     - Desktop: full-bleed section root split 50 / 50.
       LEFT  — one large photograph filling the full visual height.
       RIGHT — calm Porcelain editorial content area:
                 eyebrow -> title -> body 1 -> body 2 -> small Gold rule
                 -> three editorial items (01 / 02 / 03) on ONE row,
                 separated by thin vertical rules.
     - Mobile: image FIRST, then content. The 3 editorial items may
       stack vertically for readability.

   Project design system controls the STYLE: Porcelain ground on the
   right, Raleway display title in Ink, Montserrat body in Ink,
   Bordeaux eyebrow (no decorative line), thin Gold rule (between
   body and items) + thin vertical Ink rules between items, no
   cards, no boxes, no icons, no radius, no border, no shadow, no
   filled CTA, no autoplay, no carousel on this section.

   Section spacing (locked):
     100px desktop / 80px tablet / 64px mobile. TOP-ONLY.
     No bottom padding — the next section owns its own top spacing.

   Typography (locked):
     Desktop — title 44px / body 15px / eyebrow 12px
     Tablet  — title 40px / body 15px / eyebrow 11.5px
     Mobile  — title 36px / body 15px / eyebrow 11px
     Title  = Raleway.
     Body / eyebrow / item number / item label / item body = Montserrat.

   No serif. No italic. No decorative eyebrow line. No title
   underline. No cards. No boxes. No icons. No filled CTA.
   No image border. No image radius. No image shadow.
   ========================================================================== */

/* ==========================================================================
   FULL-BLEED ESCAPE — Section 02 Tenues d'Occasion / Le Moment
   ------------------------------------------------------------
   The Elementor container that holds this section is reset to
   padding 0 / width 100% so our own section root is the single
   source of truth for the outer dimensions. Mirrors the same
   escape used by the other KB sections.
   ========================================================================== */
.e-con:has(.kb-tenues-occasion-moment) {
    --container-default-width: 100% !important;
    --container-max-width: 100% !important;
    --container-default-padding: 0px !important;
    --container-default-padding-block: 0px !important;
    --container-default-padding-inline: 0px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-inline: 0 !important;
    padding-block: 0 !important;
}

.e-con:has(.kb-tenues-occasion-moment) > .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    --container-default-padding: 0px !important;
    --container-default-padding-block: 0px !important;
    --container-default-padding-inline: 0px !important;
    height: auto !important;
    min-height: 0 !important;
}

/* ==========================================================================
   Section root — full-bleed Porcelain canvas on the right, single
   photograph on the LEFT. Incoming top spacing: 100px desktop.
   No bottom padding (the next section owns its own top spacing).

   The inner content frame is the 1140px site content width
   (centered on viewports > 1140px; takes the full viewport
   with 32px gutter on tablet and 20px gutter on mobile). The
   50/50 split is realized inside the 1140px frame so the entire
   composition stays inside the project boxing rule.
   ========================================================================== */
.kb-tenues-occasion-moment {
    position: relative;
    width: 100%;
    background-color: var(--kb-porcelain);
    color: var(--kb-ink);
    padding-top: var(--kb-section-space-desktop);
    overflow: hidden;
}

/* ==========================================================================
   INNER EDITORIAL LAYER — LOCKED 1140px CONTENT FRAME.
   The inner content frame is the 1140px site content width
   (centered on viewports > 1140px; takes the full viewport
   with 32px gutter on tablet and 20px gutter on mobile).
   ========================================================================== */
.kb-tenues-occasion-moment__inner {
    position: relative;
    width: 100%;
    max-width: 1140px; /* LOCKED 1140px content frame — boxing rule */
    margin-inline: auto;
    display: block;
    /* No bottom padding — the next section owns its own
       top spacing. */
    padding-bottom: 0;
}

/* ==========================================================================
   LAYOUT — desktop 50/50 editorial split.
   ------------------------------------------------------------
   The desktop composition is a 2-column grid inside the
   1140px frame:
     LEFT  (50%) — single photograph filling the full visual
                   height of the row.
     RIGHT (50%) — calm Porcelain editorial content area.
   The photograph stretches to the row height defined by the
   content column (eyebrow -> title -> body 1 -> body 2 ->
   rule -> items).
   ========================================================================== */
.kb-tenues-occasion-moment__layout {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0;
    align-items: stretch;
    min-width: 0;
}

/* ==========================================================================
   PHOTOGRAPH (LEFT 50%) — single editorial image.
   The figure fills the full row height. The image is a real
   <img> element with object-fit: cover so the source
   photograph fills the column without distortion. No border,
   no radius, no shadow.

   The figure sits in the column box; the image absolutely
   covers the figure so the column's row height is honored
   regardless of the source photograph's aspect ratio.
   ========================================================================== */
.kb-tenues-occasion-moment__media {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    min-height: 480px;
}

.kb-tenues-occasion-moment__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    filter: none;
}

/* ==========================================================================
   CONTENT (RIGHT 50%) — Porcelain editorial area.
   ------------------------------------------------------------
   The content is a normal flow block, vertically centered
   inside the row. Padding-left is the only gutter between
   the photograph and the content so the editorial copy
   reads with comfortable breathing room from the image edge.
   ========================================================================== */
.kb-tenues-occasion-moment__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    min-width: 0;
    padding: 0;
    padding-inline-start: clamp(40px, 6vw, 96px);
    /* Vertically center the content against the photograph
       on desktop so the eyebrow / title / body / items sit
       at the visual center of the row. */
    justify-content: center;
}

/* ==========================================================================
   EYEBROW
   Reuses the canonical .kb-section-eyebrow primitive (base.css)
   for Montserrat / 12px / 500 / uppercase / 0.18em / Bordeaux.
   The local class only owns the bottom margin so the gap to
   the title is a single source. NO decorative line, NO
   ornament, NO underline.
   ========================================================================== */
.kb-tenues-occasion-moment__eyebrow {
    margin: 0 0 32px 0;
    color: var(--kb-bordeaux);
}

/* ==========================================================================
   TITLE — LOCKED 44px (Services typography rule).
   Raleway, Ink, non-italic, light weight. Each line is a
   structural <span> so the line breaks from the Elementor
   control become real DOM lines. text-wrap: balance for
   refined proportion. No serif, no italic, no underline,
   no ornament.
   ========================================================================== */
.kb-tenues-occasion-moment__title {
    margin: 0 0 36px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: var(--kb-font-display);
    font-size: 44px; /* LOCKED */
    font-weight: 300;
    font-style: normal;
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--kb-ink);
    text-transform: none;
    text-align: left;
    text-wrap: balance;
    text-decoration: none;
    max-width: 100%;
}

.kb-tenues-occasion-moment__title em,
.kb-tenues-occasion-moment__title i {
    font-style: normal;
    color: var(--kb-ink);
}

.kb-tenues-occasion-moment__title-line {
    display: block;
}

/* ==========================================================================
   BODY — LOCKED 15px (Services typography rule).
   Two restrained paragraphs. Montserrat / Ink / comfortable
   line-height. Each line is a structural <span> so the
   intended multi-line layout renders verbatim. No italic.
   A single source of gap between the two paragraphs is owned
   by the paragraph bottom margin.
   ========================================================================== */
.kb-tenues-occasion-moment__body {
    margin: 24px 0 36px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    font-family: var(--kb-font-body);
    font-size: 15px; /* LOCKED */
    font-weight: 400;
    font-style: normal;
    line-height: 1.75;
    color: var(--kb-ink);
    text-transform: none;
    text-align: left;
    text-wrap: pretty;
    max-width: 46ch;
    width: 100%;
}

.kb-tenues-occasion-moment__paragraph {
    margin: 0;
}

.kb-tenues-occasion-moment__paragraph + .kb-tenues-occasion-moment__paragraph {
    margin-top: 18px;
}

.kb-tenues-occasion-moment__paragraph em,
.kb-tenues-occasion-moment__paragraph i {
    font-style: normal;
    color: var(--kb-ink);
}

.kb-tenues-occasion-moment__paragraph-line {
    display: block;
}

/* ==========================================================================
   SMALL GOLD RULE
   A single short horizontal Gold rule sits between the body
   paragraphs and the editorial items. The rule is 36px wide
   and 1px tall, left-aligned with the content.
   ========================================================================== */
.kb-tenues-occasion-moment__rule {
    display: block;
    width: 36px;
    height: 1px;
    background-color: var(--kb-gold);
    margin: 0 0 32px 0;
    border: 0;
    padding: 0;
    flex: 0 0 auto;
}

/* ==========================================================================
   EDITORIAL ITEMS — 3 horizontal items on ONE row.
   ------------------------------------------------------------
   The three items sit side-by-side on desktop, separated by
   thin vertical Ink rules. Each item has:
     - a tracked number (Montserrat / 11px / 500 / 0.2em / Bordeaux)
     - a tracked uppercase label (Montserrat / 12px / 500 / 0.18em / Ink)
     - a single short body line (Montserrat / 15px / 400 / Ink)
   No cards. No icons. No boxes. No radius. No border on the
   items themselves — only the vertical rule between items.
   ========================================================================== */
.kb-tenues-occasion-moment__items {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    max-width: 100%;
}

.kb-tenues-occasion-moment__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    min-width: 0;
    padding-inline-end: 28px;
    flex: 1 1 0;
}

.kb-tenues-occasion-moment__item + .kb-tenues-occasion-moment__item {
    padding-inline-start: 28px;
    border-inline-start: 1px solid var(--kb-ink-divider-soft);
}

.kb-tenues-occasion-moment__item-number {
    display: block;
    margin: 0 0 16px 0;
    font-family: var(--kb-font-body);
    font-size: 11px;
    font-weight: 500;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0.2em;
    color: var(--kb-bordeaux);
    text-transform: none;
    text-align: left;
}

.kb-tenues-occasion-moment__item-label {
    display: block;
    margin: 0 0 8px 0;
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 0.18em;
    color: var(--kb-ink);
    text-transform: uppercase;
    text-align: left;
}

.kb-tenues-occasion-moment__item-body {
    display: block;
    margin: 0;
    font-family: var(--kb-font-body);
    font-size: 15px; /* LOCKED */
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    color: var(--kb-ink);
    text-transform: none;
    text-align: left;
}

/* ==========================================================================
   TABLET (≤ 1199px)
   ------------------------------------------------------------
   The 50/50 split is preserved on tablet so the composition
   stays locked. Typography scales down one step. The 32px
   gutter from the project tokens is used.
   ========================================================================== */
@media (max-width: 1199px) {
    .kb-tenues-occasion-moment {
        padding-top: var(--kb-section-space-tablet);
    }

    .kb-tenues-occasion-moment__inner {
        width: calc(100% - 2 * var(--kb-gutter-tablet));
    }

    .kb-tenues-occasion-moment__content {
        padding-inline-start: clamp(32px, 4vw, 56px);
    }

    .kb-tenues-occasion-moment__eyebrow {
        margin-bottom: 26px;
    }

    .kb-tenues-occasion-moment__title {
        font-size: 40px;
        margin-bottom: 28px;
    }

    .kb-tenues-occasion-moment__body {
        font-size: 15px;
        margin-bottom: 28px;
    }

    .kb-tenues-occasion-moment__rule {
        margin-bottom: 28px;
    }

    .kb-tenues-occasion-moment__item-number {
        font-size: 11px;
        margin-bottom: 14px;
    }

    .kb-tenues-occasion-moment__item-label {
        font-size: 12px;
        margin-bottom: 8px;
    }

    .kb-tenues-occasion-moment__item {
        padding-inline-end: 20px;
    }

    .kb-tenues-occasion-moment__item + .kb-tenues-occasion-moment__item {
        padding-inline-start: 20px;
    }
}

/* ==========================================================================
   MOBILE (≤ 767px)
   ------------------------------------------------------------
   The 50/50 desktop grid collapses to a single column.

   The DOM places the photograph INSIDE __layout and the
   eyebrow / title / body / rule / items INSIDE __content.
   To achieve the locked mobile order
       eyebrow -> title -> image -> body -> rule -> items
   both wrappers are flattened with `display: contents` so
   their children become direct flex children of __inner.
   `order` positions every child in the correct slot. The
   DOM shape stays untouched.

   24px gap between title and image, and between image and
   body (single source = margin on the image).

   The 3 editorial items sit on ONE horizontal row, top-aligned,
   in 3 equal columns with a 10px gap (display: grid; repeat(3,
   1fr); gap: 10px). All vertical separators + padding from
   the desktop row are zeroed.

   The 20px mobile gutter frames the composition. Typography
   is locked: title 36px / body 15px / eyebrow 11px. Image
   size / crop / aspect-ratio are preserved.
   ========================================================================== */
@media (max-width: 767px) {
    .kb-tenues-occasion-moment {
        padding-top: var(--kb-section-space-mobile);
        padding-bottom: 0;
        padding-inline: 0;
        overflow: hidden;
    }

    .kb-tenues-occasion-moment__inner {
        width: calc(100% - 2 * var(--kb-gutter-mobile));
        max-width: 100%;
        padding-inline: 0;
        /* The single source of truth for the mobile flex
           column. __layout and __content are flattened with
           `display: contents` below so every leaf element
           (eyebrow, title, media, body, rule, items)
           participates directly in this flex container and
           can be positioned with `order`. */
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-width: 0;
    }

    /* Flatten the desktop 50/50 grid wrapper so its children
       (image, content) become direct flex children of
       __inner. */
    .kb-tenues-occasion-moment__layout {
        display: contents;
    }

    /* Flatten the content wrapper so eyebrow / title / body /
       rule / items become direct flex children of __inner.
       This is what allows the `order` property below to
       interleave the photograph between the title and the
       body. */
    .kb-tenues-occasion-moment__content {
        display: contents;
    }

    /* Photograph: same size / crop / aspect-ratio as before
       (4/5, object-fit cover, full width). Only the margin
       is re-tuned so the 24px gap to the title (above) and
       the 24px gap to the body (below) are owned by a single
       source. The image itself is unchanged. */
    .kb-tenues-occasion-moment__media {
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 0 0 24px 0;
        aspect-ratio: 4 / 5;
    }

    /* LOCKED mobile order. */
    .kb-tenues-occasion-moment__eyebrow { order: 1; }
    .kb-tenues-occasion-moment__title   { order: 2; }
    .kb-tenues-occasion-moment__media   { order: 3; }
    .kb-tenues-occasion-moment__body    { order: 4; }
    .kb-tenues-occasion-moment__rule    { order: 5; }
    .kb-tenues-occasion-moment__items   { order: 6; }

    .kb-tenues-occasion-moment__eyebrow {
        margin-bottom: 24px;
    }

    .kb-tenues-occasion-moment__title {
        font-size: 36px; /* LOCKED */
        line-height: 1.1;
        /* 24px gap to the image (single source of the
           title -> image gap). */
        margin: 0 0 24px 0;
    }

    .kb-tenues-occasion-moment__body {
        font-size: 15px;
        max-width: 100%;
        margin-bottom: 24px;
    }

    .kb-tenues-occasion-moment__rule {
        margin-bottom: 24px;
    }

    /* Items on ONE horizontal row, 3 equal columns, 10px gap,
       top-aligned. Replaces the desktop flex row's column
       direction + separators. */
    .kb-tenues-occasion-moment__items {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        align-items: start;
    }

    /* Reset the desktop row's padding + border separators so
       the 3 columns read as one calm editorial row with a
       single 10px gap. */
    .kb-tenues-occasion-moment__item {
        padding: 0;
        border: 0;
        flex: 0 0 auto;
    }

    .kb-tenues-occasion-moment__item + .kb-tenues-occasion-moment__item {
        padding: 0;
        border: 0;
    }
}

/* ==========================================================================
   SCROLL REVEAL — Section 02 Tenues d'Occasion / Le Moment
   ------------------------------------------------------------
   The page-load reveal may happen ONCE on the content block
   (eyebrow + title + body + rule + items) and on the
   photograph. Internal text is NOT revealed independently.
   ========================================================================== */
.kb-tenues-occasion-moment__content[data-kb-reveal="fade-up"],
.kb-tenues-occasion-moment__media[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 20px;
    transition-duration: 900ms;
}

.kb-tenues-occasion-moment__media[data-kb-reveal="fade-up"] {
    transition-delay: 80ms;
}

@media (max-width: 767px) {
    .kb-tenues-occasion-moment__content[data-kb-reveal="fade-up"],
    .kb-tenues-occasion-moment__media[data-kb-reveal="fade-up"] {
        --kb-reveal-distance: 14px;
        transition-duration: 800ms;
        transition-delay: 0ms;
    }
}

/* ==========================================================================
   REDUCED MOTION — no entrance offset, opacity locked to 1.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .kb-tenues-occasion-moment [data-kb-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}