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

   Reference image controls the COMPOSITION:
     - Desktop: a centered HEADER (eyebrow -> title -> body) on a
       Porcelain ground, followed by a 3-column COMPOSITION row
       inside the 1140px frame:
         LEFT   — LE CONTEXTE block (eyebrow -> rule -> 3 items
                  stacked -> rule -> short body paragraph)
         CENTER — ONE dominant vertical portrait photograph
         RIGHT  — LA PRÉSENCE block (eyebrow -> rule -> 3 items
                  stacked -> rule -> short body paragraph)
       The two side blocks are vertically centered against the
       height of the central image. Small Gold rules are the
       only graphic ornament.
     - Mobile: single column. Order: eyebrow -> title -> body ->
       image -> left block -> right block. The 3-column grid
       collapses to a single block stack; the image keeps its
       portrait aspect ratio so the row contributes a real
       height to the section.

   Project design system controls the STYLE: Porcelain ground,
   Raleway display title in Ink, Montserrat body in Ink, Gold
   eyebrow, small Gold rules only (1px), 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 / block eyebrow / item / block 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 03 Tenues d'Occasion / La Silhouette
   ------------------------------------------------------------
   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-silhouette) {
    --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-silhouette) > .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, single centered
   1140px composition inside.
   Incoming top spacing: 100px desktop. No bottom padding — the
   next section owns its own top spacing.
   ========================================================================== */
.kb-tenues-occasion-silhouette {
    position: relative;
    width: 100%;
    background-color: var(--kb-porcelain);
    color: var(--kb-ink);
    padding-top: var(--kb-section-space-desktop);
    padding-bottom: 0;
    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-silhouette__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;
}

/* ==========================================================================
   HEADER — centered editorial block above the composition.
   Eyebrow -> title -> body. All centered.
   ========================================================================== */
.kb-tenues-occasion-silhouette__header {
    width: 100%;
    max-width: 100%;
    margin: 0 0 64px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* ==========================================================================
   EYEBROW — reuses the canonical .kb-section-eyebrow primitive
   from base.css (Montserrat / 12px / 500 / uppercase / 0.18em /
   Gold). Local class only owns the centered alignment and the
   gap to the title. NO decorative line, NO ornament, NO
   underline.
   ========================================================================== */
.kb-tenues-occasion-silhouette__eyebrow {
    text-align: center;
    margin: 0 0 28px 0;
    color: var(--kb-gold);
}

/* ==========================================================================
   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.
   ========================================================================== */
.kb-tenues-occasion-silhouette__title {
    margin: 0 0 32px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    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: center;
    text-wrap: balance;
    text-decoration: none;
    max-width: 100%;
}

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

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

/* ==========================================================================
   INTRO BODY — LOCKED 15px (Services typography rule).
   Single restrained paragraph centered under the title.
   Montserrat / Ink / comfortable line-height. Each line is a
   structural <span> so the intended multi-line layout renders
   verbatim. No italic.
   ========================================================================== */
.kb-tenues-occasion-silhouette__intro {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    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: center;
    text-wrap: pretty;
    max-width: 56ch;
    width: 100%;
}

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

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

/* ==========================================================================
   COMPOSITION — 3-column row inside the 1140px frame.
   ------------------------------------------------------------
   The desktop composition is a 3-column grid:
     LEFT   (≈ 28%) — LE CONTEXTE editorial block
     CENTER (≈ 44%) — dominant vertical portrait photograph
     RIGHT  (≈ 28%) — LA PRÉSENCE editorial block
   The side blocks are vertically centered against the
   height of the central image so the editorial copy sits
   at the visual center of the row. The columns do not
   share an internal grid — each block owns its own
   internal layout (eyebrow -> rule -> items -> rule ->
   body). A small horizontal Gold rule is the only
   graphic separator inside each block.
   ========================================================================== */
.kb-tenues-occasion-silhouette__composition {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr;
    column-gap: clamp(24px, 4vw, 56px);
    align-items: center;
    min-width: 0;
}

/* ==========================================================================
   SIDE BLOCKS — LEFT and RIGHT editorial blocks.
   Each block is a vertical stack:
     eyebrow (tracked uppercase)
     -> small Gold rule (1px × 36px)
     -> 3 items (one per line, 15px Montserrat)
     -> small Gold rule (1px × 36px)
     -> short body paragraph (15px Montserrat)
   No cards. No boxes. No borders. No icons. No shadow.
   The block is vertically centered against the central
   image by the parent grid (align-items: center). The
   right block uses the same internal structure mirrored
   with text-align: left so all four editorial columns
   (eyebrow / items / body) share a left edge.
   ========================================================================== */
.kb-tenues-occasion-silhouette__block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    min-width: 0;
    max-width: 100%;
    /* Desktop: pin both side blocks to row 1 alongside the
       image so all three share the same horizontal row, and
       center them vertically against the image. The
       composition's columns are untouched (left = col 1,
       right = col 3 via auto-flow, image = col 2). */
    grid-row: 1;
    align-self: center;
}

.kb-tenues-occasion-silhouette__block--right {
    /* Mirror of the left block — same internal layout, same
       left alignment so the editorial copy reads as a
       balanced pair against the central image. */
    align-items: flex-start;
    text-align: left;
}

/* Desktop only: narrow the LE CONTEXTE block to ~210px and
   align it to the right edge of its grid column so it sits
   visually close to the central image, mirroring the right
   block's gap. `justify-self: end` + `margin-left: auto`
   pin the block to the column's right boundary without
   touching the column width, the image, or the right
   block. The mobile collapse to `display: block` and the
   tablet media query leave this rule untouched. */
@media (min-width: 1200px) {
    .kb-tenues-occasion-silhouette__block--left {
        max-width: 210px;
        justify-self: end;
        margin-left: auto;
    }
}

/* Tracked uppercase eyebrow of each side block. */
.kb-tenues-occasion-silhouette__block-eyebrow {
    display: block;
    margin: 0 0 18px 0;
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 0.22em;
    color: var(--kb-bordeaux);
    text-transform: uppercase;
    text-align: left;
}

/* Small Gold rule — 1px × 36px, left-aligned with the
   block content. The only graphic ornament inside the
   side blocks. */
.kb-tenues-occasion-silhouette__rule {
    display: block;
    width: 36px;
    height: 1px;
    background-color: var(--kb-gold);
    margin: 0 0 22px 0;
    border: 0;
    padding: 0;
    flex: 0 0 auto;
}

/* Stack of 3 items, each on its own line, 15px Montserrat. */
.kb-tenues-occasion-silhouette__items {
    list-style: none;
    margin: 0 0 22px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    max-width: 100%;
}

.kb-tenues-occasion-silhouette__item {
    display: block;
    margin: 0;
    padding: 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;
    list-style: none;
    background: none;
}

.kb-tenues-occasion-silhouette__item::marker {
    content: '';
}

/* Short body paragraph under the second Gold rule.
   Same 15px body rule as the rest of the site. */
.kb-tenues-occasion-silhouette__block-body {
    margin: 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.65;
    color: var(--kb-ink);
    text-transform: none;
    text-align: left;
    text-wrap: pretty;
    max-width: 32ch;
    width: 100%;
}

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

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

/* ==========================================================================
   CENTRAL PHOTOGRAPH — dominant visual anchor.
   Real <img> element with object-fit: cover so the source
   portrait fills the column without distortion. No border,
   no radius, no shadow. The figure sits in the column box
   so the row's height is defined by the image's intrinsic
   portrait aspect-ratio; the side blocks are vertically
   centered against it by the parent grid.
   ========================================================================== */
.kb-tenues-occasion-silhouette__image {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    max-width: 100%;
    /* Desktop: place the portrait in the MIDDLE (1.6fr) column
       so it sits at the exact horizontal center of the 1140px
       composition. The DOM order (image, left, right) would
       otherwise auto-place the image in the LEFT (1fr) column;
       explicit column placement fixes the center alignment
       without changing the grid track template, the image
       size, or the height. Pin to row 1 so the image shares
       the same row as both side text blocks. The mobile
       collapse to `display: block` neutralizes this rule
       below 768px. */
    grid-column: 2;
    grid-row: 1;
}

.kb-tenues-occasion-silhouette__image 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;
}

/* ==========================================================================
   TABLET (≤ 1199px)
   ------------------------------------------------------------
   The 3-column composition is preserved on tablet so the
   editorial pairing stays locked. The column gap tightens
   to 32px (project gutter). Typography scales down one
   step. The image keeps its portrait aspect ratio.
   ========================================================================== */
@media (max-width: 1199px) {
    .kb-tenues-occasion-silhouette {
        padding-top: var(--kb-section-space-tablet);
    }

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

    .kb-tenues-occasion-silhouette__header {
        margin-bottom: 56px;
    }

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

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

    .kb-tenues-occasion-silhouette__intro {
        font-size: 15px;
        max-width: 56ch;
    }

    .kb-tenues-occasion-silhouette__composition {
        column-gap: 32px;
    }

    .kb-tenues-occasion-silhouette__block-eyebrow {
        font-size: 11.5px;
        margin-bottom: 16px;
    }

    .kb-tenues-occasion-silhouette__rule {
        margin-bottom: 18px;
    }

    .kb-tenues-occasion-silhouette__items {
        margin-bottom: 18px;
        gap: 4px;
    }

    .kb-tenues-occasion-silhouette__item {
        font-size: 15px;
    }

    .kb-tenues-occasion-silhouette__block-body {
        font-size: 15px;
    }
}

/* ==========================================================================
   MOBILE (≤ 767px)
   ------------------------------------------------------------
   The section is recomposed to a single column following
   the LOCKED mobile visual order: eyebrow -> title ->
   body -> central image -> left block -> right block.

   The DOM already places the header FIRST, then the
   composition with the image FIRST inside it, so the
   mobile collapse naturally renders image -> left block
   -> right block. The 3-column grid is flattened to a
   single block stack on mobile. Each side block keeps
   its internal order (eyebrow -> rule -> items -> rule
   -> body). The image keeps its portrait aspect-ratio
   so the column contributes a real height to the
   section before the text blocks begin.

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

    .kb-tenues-occasion-silhouette__inner {
        width: calc(100% - 2 * var(--kb-gutter-mobile));
        max-width: 100%;
        padding-inline: 0;
    }

    .kb-tenues-occasion-silhouette__header {
        margin-bottom: 40px;
        text-align: left;
        align-items: flex-start;
    }

    .kb-tenues-occasion-silhouette__eyebrow {
        margin-bottom: 20px;
        text-align: left;
    }

    .kb-tenues-occasion-silhouette__title {
        font-size: 36px; /* LOCKED */
        line-height: 1.1;
        margin-bottom: 24px;
        text-align: left;
        align-items: flex-start;
    }

    .kb-tenues-occasion-silhouette__intro {
        font-size: 15px;
        max-width: 100%;
        text-align: left;
        align-items: flex-start;
    }

    /* The 3-column desktop grid collapses to a single
       flex column on mobile so `order` can reposition the
       DOM (image -> left -> right) into the locked
       visual order: left block -> image -> right block.
       `align-items: flex-start` pins every child to the
       left gutter so the two editorial blocks can never
       appear horizontally centered. */
    .kb-tenues-occasion-silhouette__composition {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    /* The LE CONTEXTE block is pulled BEFORE the image
       on mobile via `order: 1`. Forced to the left
       gutter: full width, no max-width cap, zero
       inline margins, left text alignment, and
       start alignment on both axes. */
    .kb-tenues-occasion-silhouette__block--left {
        order: 1;
        margin: 0 0 24px 0;
        width: 100%;
        max-width: none;
        margin-inline: 0;
        justify-self: start;
        align-self: start;
        text-align: left;
    }

    /* The central image is the SECOND element on mobile
       per the locked visual order. It keeps its portrait
       aspect-ratio so the column contributes a real
       height. 24px above and 24px below are owned by
       the image's own margin so spacing is consistent
       regardless of the neighbouring block's height. */
    .kb-tenues-occasion-silhouette__image {
        order: 2;
        width: 100%;
        max-width: 100%;
        margin: 24px 0;
        aspect-ratio: 3 / 4;
    }

    /* The LA PRÉSENCE block is the THIRD element on
       mobile. Its top margin is 24px to create the gap
       from the image. Forced to the left gutter with
       the same full-width / start-alignment contract
       as the left block. */
    .kb-tenues-occasion-silhouette__block--right {
        order: 3;
        margin: 24px 0 0 0;
        width: 100%;
        max-width: none;
        margin-inline: 0;
        justify-self: start;
        align-self: start;
        text-align: left;
    }

    .kb-tenues-occasion-silhouette__block-eyebrow {
        font-size: 11px;
        margin-bottom: 16px;
    }

    .kb-tenues-occasion-silhouette__rule {
        margin-bottom: 18px;
    }

    .kb-tenues-occasion-silhouette__items {
        margin-bottom: 18px;
        gap: 4px;
    }

    .kb-tenues-occasion-silhouette__item {
        font-size: 15px;
    }

    .kb-tenues-occasion-silhouette__block-body {
        font-size: 15px;
        max-width: 100%;
    }
}

/* ==========================================================================
   SCROLL REVEAL — Section 03 Tenues d'Occasion / La Silhouette
   ------------------------------------------------------------
   The page-load reveal may happen ONCE on the header and
   the composition block. Internal text is NOT revealed
   independently.
   ========================================================================== */
.kb-tenues-occasion-silhouette__header[data-kb-reveal="fade-up"],
.kb-tenues-occasion-silhouette__composition[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 20px;
    transition-duration: 900ms;
}

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

@media (max-width: 767px) {
    .kb-tenues-occasion-silhouette__header[data-kb-reveal="fade-up"],
    .kb-tenues-occasion-silhouette__composition[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-silhouette [data-kb-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}