/* ==========================================================================
   KB Couture Mariage Section 03 / La Ligne Nuptiale — Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-couture-mariage-ligne. All values driven by
   tokens.css. Elementor = content only — every visual treatment
   lives here.

   Composition (final, locked to the reference image):

     Centered 1140px editorial section on a Porcelain ground
     (#F7EEE9). Three visual columns inside the 1140px
     composition (no full-bleed Bordeaux, no dark section
     background — only the imagery itself carries dark tones).

       LEFT  (~26% of 1140 = 300px) — editorial copy block:
             eyebrow → large Raleway H2 (3 lines) → one
             Montserrat body paragraph → small vertical
             technical list (DÉCOLLETÉ / ÉPAULES / TAILLE /
             VOLUME / DOS / LONGUEUR / PROPORTIONS) anchored
             to a small Gold vertical line treatment →
             lower-left microcopy ("UNE SILHOUETTE PENSÉE DANS
             LES MOINDRES DÉTAILS.") isolated in the Porcelain
             negative space.

       CENTER (dominant — ~38% of 1140 = 440px) — ONE tall
             layered bridal composition made of TWO separate
             image layers:
               Layer 1: background / room image (z-index 1)
                        fills the wrapper via object-fit: cover.
               Layer 2: bride transparent PNG cutout
                        (z-index 2) sitting on top, anchored
                        inside the SAME wrapper via
                        object-fit: contain so the full figure
                        is visible and aligned.
             The wrapper is `position: relative` so both
             layers share the same containing block. No
             aggressive parallax, no rotation, no mouse-follow,
             no floating animation. The depth comes purely from
             the explicit z-index separation — restrained,
             editorial.

       RIGHT  (~26% of 1140 = 300px) — restrained editorial
             column with:
               - upper-right microcopy
                 ("DES DÉTAILS QUI CHANGENT TOUT.") anchored
                 to a small Gold vertical line treatment;
               - top detail image (close-up lace / neckline /
                 bodice), right-aligned with a small right
                 inset so it sits slightly INSIDE the right
                 column's right edge;
               - bottom detail image (back / buttons / hand
                 detail), positioned LOWER AND slightly to
                 the right of the top one. Its right edge
                 sits flush with the 1140px content edge so
                 it reads as offset-right while staying
                 safely inside the section boundary.
               - lower-right microcopy
                 ("L'ÉQUILIBRE ENTRE TECHNIQUE ET ÉMOTION.")
                 anchored to a small Gold vertical line
                 treatment.

   The TOP of the eyebrow on the LEFT must align with the TOP
   edge of the central composition. (align-items: start.)

   Hierarchy of the three photographs (locked):
     1. main layered composition  = LARGEST photographic element
     2. right detail images       = SECONDARY (smaller, staggered)
     3. (no tertiary image in this section)

   No horizontal overflow at any viewport. The composition
   fits inside 1140px. NO 100vw, NO negative offsets, NO
   viewport escapes.

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

   Elementor contract: every image is a real <img> selected
   through a MEDIA content control. No inline
   style="background-image:..." is ever emitted. All visual
   styling lives here in the child-theme CSS.

   No serif. No italic. No "Maison" wording. No decorative
   eyebrow line. No title underline. No flower / star ornament.
   No cards. No boxes. No icons. No radius. No border. No
   shadow on images. No filled CTA button.

   Microcopy is NOT body text: 11.5px desktop / 11px mobile,
   Montserrat / 500 / uppercase / 0.22em / Gold. The 15px
   body rule does not apply to microcopy.

   Technical list is NOT body text either: 11.5px desktop /
   11px mobile, Montserrat / 500 / uppercase / 0.22em / Gold.
   Each item is a structural <span> inside its own <li>.

   Subtle 3D depth: pure z-index separation between the
   background image (z-index 1) and the bride PNG (z-index 2).
   No parallax, no translate, no scale animation, no
   mouse-follow. The depth is locked at rest.
   ========================================================================== */

/* ==========================================================================
   FULL-BLEED ESCAPE — Section 03 Couture Mariage / La Ligne Nuptiale
   ------------------------------------------------------------
   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-couture-mariage-ligne) {
    --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-inline: 0 !important;
    padding-inline: 0 !important;
    padding-block: 0 !important;
}

.e-con:has(.kb-couture-mariage-ligne) > .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;
}

/* ==========================================================================
   Section root — 1140px centered, 100px top spacing.
   Porcelain ground. Ink text. No bottom padding.
   ========================================================================== */
.kb-couture-mariage-ligne {
    position: relative;
    width: 100%;
    background-color: var(--kb-porcelain);
    color: var(--kb-ink);
    padding-top: var(--kb-section-space-desktop);
    /* No horizontal overflow on any viewport. The composition
       fits inside 1140px. */
    overflow: hidden;
}

.kb-couture-mariage-ligne__inner {
    width: 100%;
    max-width: var(--kb-content-width);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

/* ==========================================================================
   GRID — 3 columns: text LEFT / layered composition CENTER /
   microcopy + detail images RIGHT.
   ------------------------------------------------------------
   Desktop:
     grid-template-columns: minmax(0, 1fr) 440px minmax(0, 1fr);
     column-gap: 40px;
     align-items: stretch; <-- the row sizes to the tallest
                                 column (the LEFT copy block by
                                 default), and the central
                                 composition stretches to that
                                 same height. This keeps the TOP
                                 of the eyebrow aligned with the
                                 TOP of the central visual AND
                                 the BOTTOM of the central
                                 visual aligned with the BOTTOM
                                 of the left content.
   The center column is a fixed 440px so the layered composition
   width is deterministic; the two side columns take the
   remaining 1140 − 440 − 2×40 = 620px (≈ 310px each) which
   comfortably fits the text block on the left and the
   microcopy / detail images on the right.
   ========================================================================== */
.kb-couture-mariage-ligne__grid {
    width: 100%;
    max-width: var(--kb-content-width);
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px minmax(0, 1fr);
    column-gap: 40px;
    align-items: stretch;
    row-gap: 0;
    min-width: 0;
}

/* ==========================================================================
   COPY (LEFT) — eyebrow / title / body / technical list /
   lower-left microcopy. Restrained column width so the body
   copy never bleeds into the central composition.
   ========================================================================== */
.kb-couture-mariage-ligne__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin: 0;
    padding: 0;
    min-width: 0;
    max-width: 300px;
    width: 100%;
}

/* ---- Eyebrow ----
   Reuses the canonical .kb-section-eyebrow primitive (base.css)
   for Montserrat / 12px desktop / 11.5px tablet / 11px mobile
   / 500 / uppercase / 0.18em / Gold. 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-couture-mariage-ligne__eyebrow {
    margin: 0 0 28px 0;
}

/* ---- Title ----
   Raleway / 300 / Ink / non-italic. Three-line editorial
   title. 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-couture-mariage-ligne__title {
    margin: 0 0 32px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: var(--kb-font-display);
    font-size: 44px;
    font-weight: 300;
    font-style: normal;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--kb-ink);
    text-transform: none;
    text-align: left;
    text-wrap: balance;
    text-decoration: none;
    max-width: 100%;
}

.kb-couture-mariage-ligne__title em,
.kb-couture-mariage-ligne__title i {
    font-style: normal;
    color: var(--kb-ink);
}

.kb-couture-mariage-ligne__title-line {
    display: block;
}

/* ---- Body — one Montserrat paragraph ----
   Comfortable line-height. Restrained column width. NO italic. */
.kb-couture-mariage-ligne__body {
    margin: 0 0 48px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-width: 100%;
    width: 100%;
}

.kb-couture-mariage-ligne__paragraph {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    font-family: var(--kb-font-body);
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.7;
    color: var(--kb-ink);
    text-wrap: pretty;
    max-width: 100%;
}

.kb-couture-mariage-ligne__paragraph em,
.kb-couture-mariage-ligne__paragraph i {
    font-style: normal;
    color: var(--kb-ink);
}

.kb-couture-mariage-ligne__paragraph-line {
    display: block;
}

/* Gap between the first short line and the second long
   paragraph inside the body block. */
.kb-couture-mariage-ligne__paragraph-line:first-of-type {
    margin-bottom: 10px;
}

/* ==========================================================================
   TECHNICAL LIST — Décolleté / Épaules / Taille / Volume /
   Dos / Longueur / Proportions.
   ------------------------------------------------------------
   Vertical list, one item per line, anchored to a small Gold
   vertical line treatment. Each item is a structural <span>
   inside its own <li> so the line breaks from the Elementor
   control become real DOM items.

   Treated as microcopy, NOT body text. 11.5px desktop /
   11px mobile, Montserrat / 500 / uppercase / 0.22em / Gold.
   ========================================================================== */
.kb-couture-mariage-ligne__techlist {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 56px 0;
    padding: 0;
    min-width: 0;
    max-width: 100%;
}

.kb-couture-mariage-ligne__techlist-rule {
    display: block;
    flex: 0 0 auto;
    width: 1px;
    /* The vertical line spans the natural height of the list
       so it visually anchors the whole column of items. */
    align-self: stretch;
    background-color: var(--kb-gold);
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.kb-couture-mariage-ligne__techlist-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.kb-couture-mariage-ligne__techlist-item {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--kb-font-body);
    font-size: 11.5px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--kb-ink);
    text-wrap: balance;
}

.kb-couture-mariage-ligne__techlist-item em,
.kb-couture-mariage-ligne__techlist-item i {
    font-style: normal;
    color: var(--kb-ink);
}

.kb-couture-mariage-ligne__techlist-text {
    display: block;
}

/* ==========================================================================
   MICROCOPY (LEFT LOWER + RIGHT UPPER + RIGHT LOWER)
   ------------------------------------------------------------
   Small uppercase editorial text. NOT body text (15px does
   not apply). Montserrat / 11.5px desktop / 11px mobile /
   500 / uppercase / 0.22em / Gold. Each line is a
   structural <span>.

   The microcopy block is a flex row that pairs a small
   Gold vertical line (1px × 28px) with the text block, so
   the rule visually anchors the text to the reference's
   editorial "tally" treatment.
   ========================================================================== */
.kb-couture-mariage-ligne__microcopy {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.kb-couture-mariage-ligne__microcopy--lower-left {
    margin-top: 0;
}

.kb-couture-mariage-ligne__microcopy--upper-right {
    margin-bottom: 32px;
}

.kb-couture-mariage-ligne__microcopy--lower-right {
    margin-top: 24px;
}

.kb-couture-mariage-ligne__microcopy-rule {
    display: block;
    flex: 0 0 auto;
    width: 1px;
    height: 28px;
    background-color: var(--kb-gold);
    border: 0;
    border-radius: 0;
    margin: 6px 0 0 0;
    padding: 0;
    pointer-events: none;
}

.kb-couture-mariage-ligne__microcopy-text {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--kb-font-body);
    font-size: 11.5px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--kb-ink);
    text-wrap: balance;
    max-width: 100%;
}

.kb-couture-mariage-ligne__microcopy-line {
    display: block;
}

/* ==========================================================================
   CENTRAL LAYERED COMPOSITION (CENTER) — dominant layered
   bridal composition: background image (z-index 1) + bride
   transparent PNG (z-index 2).
   ------------------------------------------------------------
   The composition wrapper is a relative container that
   reserves real vertical room for the layered image so the
   section height accounts for it and the next section starts
   cleanly below. No overflow on the section.

   The .__main-visual is the SHARED containing block for both
   image layers. Its position is `relative` and its
   dimensions are locked via aspect-ratio + height. Both
   layers (.__main-bg and .__bride) are absolutely positioned
   against THIS same wrapper, so their alignment stays
   mathematically locked across breakpoints. No responsive
   drift, no parallax, no mouse-follow gimmicks.

   The depth is purely z-index separation:
     - background image = z-index 1 (sits behind)
     - bride PNG         = z-index 2 (sits in front)
   No transform / scale / translate is used to create the
   depth — the layers stay at rest, exactly as a couture
   editorial composition should.
   ========================================================================== */
.kb-couture-mariage-ligne__composition {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin: 0;
    padding: 0;
    min-width: 0;
    /* Stretch to the row height (driven by the LEFT copy
       block) so the central visual frame ends at the same
       visual bottom as the left editorial block. */
    align-self: stretch;
    height: 100%;
}

/* Main visual wrapper — the shared containing block for
   both image layers. Its height is now driven by the row
   (which equals the left content height), NOT by a fixed
   pixel value. The background image (object-fit: cover)
   and the bride PNG (object-fit: contain) both fill /
   fit within this same frame, so the layered composition
   always matches the height of the editorial copy block
   to its left. */
.kb-couture-mariage-ligne__main-visual {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    /* The OUTER wrapper is no longer clipping. The
       background figure keeps its own overflow: hidden so
       the room image stays cropped inside its rectangular
       frame, while the bride PNG (z-index 2, no overflow
       hidden) is allowed to extend slightly past the LEFT
       edge of this frame as an editorial breakout. */
    overflow: visible;
    /* Subtle dark base so the empty wrapper (while the BG
       image loads) does not flash a flat Porcelain square
       inside the editorial composition. Falls back to a
       very dark tone that disappears behind the imagery. */
    background-color: color-mix(
        in srgb,
        var(--kb-ink) 88%,
        var(--kb-bordeaux)
    );
    border: 0;
    border-radius: 0;
    box-shadow: none;
    /* Clean stacking context so the bride PNG layer is
       contained locally and the z-index 1 / 2 layers do
       not leak to ancestor sections. */
    isolation: isolate;
    z-index: 1;
}

/* LAYER 1 — background / room image. Sits at z-index 1.
   object-fit: cover so the room fills the entire wrapper
   regardless of the room image's natural aspect ratio.
   This figure keeps its own overflow: hidden so the room
   image is always cropped inside its rectangular frame,
   even though the OUTER wrapper (.__main-visual) is now
   overflow: visible to allow the bride PNG breakout. */
.kb-couture-mariage-ligne__main-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    z-index: 1;
}

.kb-couture-mariage-ligne__main-bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* LAYER 2 — bride transparent PNG. Sits at z-index 2,
   above the background. object-fit: contain so the full
   figure is visible (not cropped) regardless of the
   wrapper's aspect ratio. object-position keeps the
   figure grounded at the bottom of the frame so the
   bride feels integrated into the room, not pasted on
   top of it.

   The figure has no overflow: hidden (default: visible)
   AND a small negative transform on the X axis so a
   restrained part of the bridal silhouette extends
   past the LEFT edge of the central frame. The
   background frame itself does NOT move — only the
   transparent bride layer breaks out, as a subtle
   editorial gesture. The breakout amount is fixed at
   6% of the wrapper width so it scales proportionally
   with the central column. */
.kb-couture-mariage-ligne__bride {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    /* Restrained leftward breakout. The figure visually
       shifts left by 6% of the central column width
       (~26px at 440px desktop). Only a small part of
       the bridal silhouette crosses the frame edge. */
    transform: translateX(-6%);
    z-index: 2;
}

.kb-couture-mariage-ligne__bride img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

/* DESKTOP ONLY — bride scale-up.
   The bride PNG figure is grown ~22% (1.22x) from its
   bottom edge so the figure becomes more dominant in the
   central composition while its bottom alignment, the
   overall section height, the -6% leftward editorial
   breakout, and the 3D z-index separation are all
   preserved. transform-origin is locked to bottom-center
   so the scale extends the figure UPWARD only — the
   bottom of the bride stays exactly at the same line as
   before, the same as the background frame, the same as
   the next section's incoming top. The -6% translateX
   (a percentage of the un-scaled element width) is
   preserved as-is so the horizontal position stays
   unchanged. Scoped strictly to ≥1200px so tablet and
   mobile remain untouched. */
@media (min-width: 1200px) {
    .kb-couture-mariage-ligne__bride {
        transform-origin: center bottom;
        transform: translateX(-6%) scale(1.22);
    }
}

/* Optional foreground editorial treatment reserved for
   z-index 3. The current composition does not use it, but
   the slot is documented in the stacking so future
   foreground treatments (a subtle gradient or a
   micro-overlay) can land here without rewriting the
   stacking. The .__main-visual wrapper itself already
   owns z-index 1 via isolation: isolate, so any future
   z-index 3 element placed inside it stays local. */

/* ==========================================================================
   RIGHT COLUMN — upper-right microcopy + top detail image +
   bottom detail image + lower-right microcopy.
   ------------------------------------------------------------
   The right column is a flex column that stacks the
   upper-right microcopy, the top detail image, the bottom
   detail image, and the lower-right microcopy.

   The two detail images each FILL the full available width
   of the right column (width: 100%). There is no internal
   left gutter — the images own the entire image area
   cleanly. The vertical gap between the two detail images
   is a single controlled 10px (owned by the top image's
   margin-bottom, single source).

   The upper-right and lower-right microcopy blocks are
   left-aligned (align-self: flex-start) so the LEFT edge
   of each microcopy block aligns with the LEFT edge of
   the detail image beside it (image is 100% of the right
   column, so the block's left edge sits at the right
   column's left edge). Each block keeps its existing
   width (max-width: 200px) and its current vertical
   position — only the horizontal alignment shifts so
   the text shares the same left edge as the image.
   ========================================================================== */
.kb-couture-mariage-ligne__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0;
    padding: 0;
    min-width: 0;
    max-width: 100%;
}

/* Details row wrapper — invisible on desktop / tablet. The
   wrapper groups the two right detail items (microcopy +
   image, microcopy + image) so they can be arranged as a
   single 2-column row on mobile. `display: contents` on
   desktop / tablet keeps the original right column flex
   stack untouched (each child behaves as a direct child
   of `__right`). The mobile media query promotes the
   wrapper to a real 2-column grid. */
.kb-couture-mariage-ligne__details-row {
    display: contents;
}

/* Bottom row wrapper — invisible on desktop / tablet. The
   wrapper groups the technical list and the lower-left
   microcopy so they can be laid out side-by-side as a
   single flex row on mobile. `display: contents` on
   desktop / tablet keeps the original LEFT copy column
   flex stack untouched (each child behaves as a direct
   child of `__copy`). The mobile media query promotes
   the wrapper to a real flex row. */
.kb-couture-mariage-ligne__bottom-row {
    display: contents;
}

/* Upper-right microcopy container — left edge of the block
   aligns with the LEFT edge of the detail image directly
   below it (image is 100% width of the right column, so
   the block's left edge sits at the right column's left
   edge). The block keeps its current vertical position
   and its existing width (max-width: 200px). */
.kb-couture-mariage-ligne__right .kb-couture-mariage-ligne__microcopy--upper-right {
    align-self: flex-start;
    max-width: 200px;
}

.kb-couture-mariage-ligne__microcopy--upper-right .kb-couture-mariage-ligne__microcopy-text {
    text-align: left;
    align-items: flex-start;
}

/* Right detail images — fill the full available width of
   the right column. There is no internal left gutter —
   each image owns the entire image area cleanly. Same
   shared aspect-ratio (4/5) and same object-fit: cover
   so neither image stretches or distorts. */
.kb-couture-mariage-ligne__detail {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 5;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: color-mix(
        in srgb,
        var(--kb-ink) 86%,
        var(--kb-bordeaux)
    );
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.kb-couture-mariage-ligne__detail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Top detail — full column width. Sits directly below the
   upper-right microcopy. The 10px margin-bottom is the
   single source of the editorial vertical gap between
   the two detail images (the bottom image has no
   margin-top so the two rules never stack).

   Targeted with the exact compound selector + !important
   so no later figure / margin: 0 / margin-block reset
   (Elementor or otherwise) can override the 10px. */
.kb-couture-mariage-ligne__detail.kb-couture-mariage-ligne__detail--top {
    margin-bottom: 10px !important;
}

/* Bottom detail — full column width. No top margin; the
   10px vertical gap is owned by the top image's
   margin-bottom (single source). */
.kb-couture-mariage-ligne__detail--bottom {
    margin: 0;
}

/* Lower-right microcopy container — left edge of the block
   aligns with the LEFT edge of the bottom detail image
   directly above it (image is 100% width of the right
   column, so the block's left edge sits at the right
   column's left edge). The block keeps its current
   vertical position and its existing width
   (max-width: 200px). */
.kb-couture-mariage-ligne__right .kb-couture-mariage-ligne__microcopy--lower-right {
    align-self: flex-start;
    max-width: 200px;
    margin-top: 32px;
}

.kb-couture-mariage-ligne__microcopy--lower-right .kb-couture-mariage-ligne__microcopy-text {
    text-align: left;
    align-items: flex-start;
}

/* ==========================================================================
   TABLET (≤ 1199px) — 80px top spacing. 32px side gutter.
   The 3-column editorial composition is preserved as long as
   the math fits inside 1140px. The central layered
   composition tightens to 380px; the right detail images
   tighten to 220px; the body copy column is held at 280px.
   All other proportions scale proportionally.
   ========================================================================== */
@media (max-width: 1199px) {
    .kb-couture-mariage-ligne {
        padding-top: var(--kb-section-space-tablet);
    }

    .kb-couture-mariage-ligne__inner,
    .kb-couture-mariage-ligne__grid {
        padding-inline: var(--kb-gutter-tablet);
    }

    .kb-couture-mariage-ligne__grid {
        grid-template-columns: minmax(0, 1fr) 380px minmax(0, 1fr);
        column-gap: 28px;
    }

    .kb-couture-mariage-ligne__copy {
        max-width: 280px;
    }

    .kb-couture-mariage-ligne__body {
        max-width: 100%;
    }

    .kb-couture-mariage-ligne__composition {
        max-width: 380px;
    }

    .kb-couture-mariage-ligne__main-visual {
        height: 100%;
    }

    .kb-couture-mariage-ligne__detail {
        width: 100%;
    }

    .kb-couture-mariage-ligne__detail--top {
        margin: 0 0 10px 0;
    }

    .kb-couture-mariage-ligne__right .kb-couture-mariage-ligne__microcopy--upper-right,
    .kb-couture-mariage-ligne__right .kb-couture-mariage-ligne__microcopy--lower-right {
        max-width: 180px;
    }
}

/* ==========================================================================
   MOBILE (≤ 767px) — 64px top spacing. 20px side gutter.
   The 3-column editorial composition is collapsed to a
   single column. Final mobile order (locked):
     1. eyebrow
     2. title
     3. main layered visual
     4. details row (single 2-column row holding both right
        detail items side-by-side — text above its own image
        in each column, ≈ 48% width each, 12px column gap,
        same 4/5 aspect-ratio + object-fit: cover so both
        columns render at exactly the same height)
     5. body
     6. bottom row (technical list + lower-left microcopy
        side-by-side in one flex row, calc(50% - 8px) each,
        16px gap)

   The desktop literal overlap is NOT reproduced. Instead
   the elements stack with the dominant layered composition
   first (3), then the side-by-side details row (4), then
   the body (5), then the side-by-side bottom row (6), with
   restrained gaps. The main layered visual remains the
   LARGEST photographic element; the right detail images
   remain SECONDARY.

   CRITICAL — MOBILE LAYERED VISUAL: the main visual must
   still be TWO SEPARATE LAYERS (background image + bride
   PNG) on mobile. Both layers share the same wrapper so
   their alignment stays locked. Scale both layers
   responsively; do NOT flatten them.

   DOM ORDERING STRATEGY (mobile only):
   The desktop grid places the copy in column 1, the
   composition in column 2, the right column in column 3.
   On mobile, the copy is collapsed to `display: contents`
   so its children become direct flex items of the grid,
   and explicit `order` is applied to place them in the
   final mobile sequence. The composition sits as a direct
   flex item. The right column keeps its real DOM (now
   grouped by an internal `__details-row` wrapper) and
   that wrapper is the single flex item that takes the
   right-column slot in the mobile order. The grid is
   converted to a single-column flex column so `order`
   works. Inside the details-row, a 2-column CSS grid
   places each microcopy above its own detail image.
   The left column's last two children (technical list
   and lower-left microcopy) are also grouped by an
   internal `__bottom-row` wrapper so they can be
   arranged as a single flex row at the bottom of the
   mobile flow. The grid is converted to a single-column
   flex column so `order` works.
   ========================================================================== */
@media (max-width: 767px) {
    .kb-couture-mariage-ligne {
        padding-top: var(--kb-section-space-mobile);
        padding-inline: 0;
        overflow: hidden;
    }

    .kb-couture-mariage-ligne__inner {
        width: calc(100% - 2 * var(--kb-gutter-mobile));
        padding-inline: 0;
    }

    .kb-couture-mariage-ligne__grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        row-gap: 0;
        column-gap: 0;
        padding: 0;
    }

    /* Copy collapsed to `display: contents` so its children
       (eyebrow, title, body, techlist, lower-left microcopy)
       become direct flex children of the grid and can be
       placed via `order`. */
    .kb-couture-mariage-ligne__copy {
        display: contents;
        max-width: 100%;
    }

    .kb-couture-mariage-ligne__right {
        display: contents;
    }

    /* Mobile order (locked):
         1. eyebrow            order 1
         2. title              order 2
         3. composition        order 3
         4. details-row        order 4 (the two text+image
                                          item blocks sit
                                          side-by-side inside
                                          this single 2-column
                                          grid — explicit
                                          grid-row / grid-column
                                          below positions each
                                          cell)
         5. body               order 5
         6. bottom-row         order 6 (technical list +
                                          lower-left microcopy
                                          sit side-by-side in
                                          one flex row)
    */
    .kb-couture-mariage-ligne__eyebrow                 { order: 1; }
    .kb-couture-mariage-ligne__title                   { order: 2; }
    .kb-couture-mariage-ligne__composition             { order: 3; }
    .kb-couture-mariage-ligne__details-row             { order: 4; }
    .kb-couture-mariage-ligne__body                    { order: 5; }
    .kb-couture-mariage-ligne__bottom-row              { order: 6; }

    /* The composition must keep its layered structure on
       mobile. The wrapper becomes full mobile width minus
       the 20px gutter, and the height scales proportionally
       via the 3/4 aspect-ratio so the background and bride
       PNG stay aligned. No flattening. */
    .kb-couture-mariage-ligne__composition {
        max-width: 100%;
        width: 100%;
        margin: 32px 0 0 0;
        padding: 0;
    }

    .kb-couture-mariage-ligne__main-visual {
        height: auto;
        aspect-ratio: 3 / 4;
    }

    /* DETAILS ROW (mobile only) — single 2-column editorial
       row holding both right detail items side-by-side.
       Each column is one item: microcopy text on top, image
       below. The wrapper is `display: grid` here (overriding
       the desktop `display: contents`) so the four children
       are placed by explicit grid-column / grid-row rather
       than by the parent flex `order`. The main image /
       bride PNG composition above is untouched. The
       `margin-bottom: 24px` opens breathing room before
       the body block below. */
    .kb-couture-mariage-ligne__details-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 12px;
        row-gap: 16px;
        align-items: start;
        justify-items: stretch;
        width: 100%;
        max-width: 100%;
        margin: 32px 0 24px 0;
        padding: 0;
    }

    /* Explicit grid placement — one column per item, with
       the text above its own image. */
    .kb-couture-mariage-ligne__details-row .kb-couture-mariage-ligne__microcopy--upper-right {
        grid-column: 1;
        grid-row: 1;
    }

    .kb-couture-mariage-ligne__details-row .kb-couture-mariage-ligne__detail--top {
        grid-column: 1;
        grid-row: 2;
    }

    .kb-couture-mariage-ligne__details-row .kb-couture-mariage-ligne__microcopy--lower-right {
        grid-column: 2;
        grid-row: 1;
    }

    .kb-couture-mariage-ligne__details-row .kb-couture-mariage-ligne__detail--bottom {
        grid-column: 2;
        grid-row: 2;
    }

    /* Detail images inside the row — same aspect-ratio (4/5)
       and same `object-fit: cover` on the img so both
       columns render with EXACTLY the same height. Full
       width of their own column (≈ 48% of the mobile
       content area after the 12px column-gap and 20px
       gutters). The desktop 70% / 280px cap and the
       previous mobile 70% cap are overridden here. */
    .kb-couture-mariage-ligne__details-row .kb-couture-mariage-ligne__detail {
        position: relative;
        width: 100%;
        max-width: 100%;
        aspect-ratio: 4 / 5;
        margin: 0;
    }

    .kb-couture-mariage-ligne__details-row .kb-couture-mariage-ligne__detail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /* Top detail — fill the existing grid row height (no
       aspect-ratio lock) so the LEFT image renders at the
       exact same height as the RIGHT image frame. The
       `align-self: stretch` lets the grid row drive the
       height; the `height: 100%` makes the <img> fill that
       stretched figure. */
    .kb-couture-mariage-ligne__detail--top {
        aspect-ratio: auto !important;
        height: 100% !important;
        align-self: stretch !important;
    }

    .kb-couture-mariage-ligne__detail--top img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Bottom detail — same 3/4 aspect-ratio as the top frame
       and same img fill so both figures render at the exact
       same height and both visible images end on the same
       bottom line. */
    .kb-couture-mariage-ligne__detail--bottom {
        aspect-ratio: 3 / 4;
        height: auto;
    }

    .kb-couture-mariage-ligne__detail--bottom img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .kb-couture-mariage-ligne__details-row .kb-couture-mariage-ligne__detail--top,
    .kb-couture-mariage-ligne__details-row .kb-couture-mariage-ligne__detail--bottom {
        align-self: stretch;
        margin: 0;
    }

    /* Right microcopy containers inside the row — compact,
       left-aligned, no extra top margin (the row's row-gap
       already provides the vertical breathing room between
       the text and the image below it). */
    .kb-couture-mariage-ligne__details-row .kb-couture-mariage-ligne__microcopy--upper-right,
    .kb-couture-mariage-ligne__details-row .kb-couture-mariage-ligne__microcopy--lower-right {
        margin: 0;
        align-self: start;
        justify-self: start;
        max-width: 100%;
    }

    .kb-couture-mariage-ligne__details-row .kb-couture-mariage-ligne__microcopy--upper-right .kb-couture-mariage-ligne__microcopy-text,
    .kb-couture-mariage-ligne__details-row .kb-couture-mariage-ligne__microcopy--lower-right .kb-couture-mariage-ligne__microcopy-text {
        text-align: left;
        align-items: flex-start;
    }

    /* BOTTOM ROW (mobile only) — single flex row holding
       the technical list and the lower-left microcopy
       side-by-side. The wrapper is `display: flex` here
       (overriding the desktop `display: contents`) so the
       two children sit next to each other instead of
       stacking vertically. The composition above is
       untouched. */
    .kb-couture-mariage-ligne__bottom-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    /* Each block inside the bottom row — exactly half of
       the available width minus half the gap, so the two
       columns land flush to the row's outer edges with
       the 16px gap between them. The previous mobile
       margin-top / margin-bottom on the technical list
       and the lower-left microcopy are zeroed here so
       the gap from the row's own flex spacing is the
       single source. */
    .kb-couture-mariage-ligne__bottom-row .kb-couture-mariage-ligne__techlist,
    .kb-couture-mariage-ligne__bottom-row .kb-couture-mariage-ligne__microcopy--lower-left {
        width: calc(50% - 8px);
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    .kb-couture-mariage-ligne__bottom-row .kb-couture-mariage-ligne__microcopy--lower-left {
        align-self: flex-start;
    }

    .kb-couture-mariage-ligne__bottom-row .kb-couture-mariage-ligne__microcopy--lower-left .kb-couture-mariage-ligne__microcopy-text {
        text-align: left;
        align-items: flex-start;
    }

    /* Manifesto typography on mobile. */
    .kb-couture-mariage-ligne__eyebrow {
        margin-bottom: 18px;
    }

    .kb-couture-mariage-ligne__title {
        font-size: 36px;
        line-height: 1.08;
        max-width: 100%;
        margin-bottom: 24px;
    }

    .kb-couture-mariage-ligne__body {
        gap: 0;
        margin-bottom: 32px;
        max-width: 100%;
    }

    .kb-couture-mariage-ligne__paragraph {
        font-size: 15px;
        line-height: 1.65;
    }

    .kb-couture-mariage-ligne__microcopy-text,
    .kb-couture-mariage-ligne__techlist-item {
        font-size: 11px;
    }
}

/* ==========================================================================
   TABLET MIDDLE POINT (768–1024px)
   ------------------------------------------------------------
   Only semantic typography overrides between mobile and
   desktop: title 40px; eyebrow 11.5px (already handled by
   the canonical .kb-section-eyebrow primitive in base.css).
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    .kb-couture-mariage-ligne__title {
        font-size: 40px;
    }

    .kb-couture-mariage-ligne__eyebrow {
        margin-bottom: 24px;
    }
}

/* ==========================================================================
   SCROLL REVEAL — Section 03 Couture Mariage / La Ligne Nuptiale
   ------------------------------------------------------------
   Three visual groups animate as their own editorial units:
     - left copy block (eyebrow + title + body + technical
       list + lower-left microcopy, ONE object)
     - central layered composition (background image + bride
       PNG, ONE object — both layers are wrapped in the
       shared .__main-visual container and reveal together
       as a single editorial unit)
     - right column (upper-right microcopy + top detail +
       bottom detail + lower-right microcopy, ONE object)
   The reveal system is unchanged. We only bind the existing
   fade-up behaviour to the group nodes.
   ========================================================================== */
.kb-couture-mariage-ligne__copy[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 24px;
    transition-delay: 0ms;
    transition-duration: 1000ms;
}

.kb-couture-mariage-ligne__composition[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 28px;
    transition-delay: 120ms;
    transition-duration: 1100ms;
}

.kb-couture-mariage-ligne__right[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 24px;
    transition-delay: 240ms;
    transition-duration: 1000ms;
}

@media (max-width: 767px) {
    .kb-couture-mariage-ligne__copy[data-kb-reveal="fade-up"],
    .kb-couture-mariage-ligne__composition[data-kb-reveal="fade-up"],
    .kb-couture-mariage-ligne__right[data-kb-reveal="fade-up"] {
        --kb-reveal-distance: 16px;
        transition-duration: 900ms;
    }
}

/* ==========================================================================
   REDUCED MOTION — no entrance offset, opacity locked to 1.
   Mirrors the convention used by the other KB sections.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .kb-couture-mariage-ligne [data-kb-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}