/* ==========================================================================
   KB Couture Mariage Section 02 / Votre Allure — Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-couture-mariage-allure. All values driven by
   tokens.css. Elementor = content only — every visual treatment
   lives here.

   Composition (final, locked to the reference image):

     Art-directed editorial composition inside a 1140px
   centered canvas on a Porcelain ground (#F7EEE9). No
   rigid CSS Grid columns. The __inner element is the
   SINGLE AUTHORITATIVE HEIGHT SOURCE (~720px tall) and
   each visual element is independently absolutely
   positioned inside it. The composition and right
   column wrappers collapse to height:0 / min-height:0
   so they no longer reserve their own bottom space.

       LEFT   (0–340px)   : editorial copy block
                            (eyebrow → large Raleway H2 →
                             two Montserrat body paragraphs
                             only — the previous editorial
                             text link "NOTRE APPROCHE" has
                             been REMOVED). The previous
                             lower-left microcopy
                             ("DES MARIÉES SINGULIÈRES. /
                             DES HISTOIRES UNIQUES.") has
                             also been REMOVED — clean
                             Porcelain negative space
                             replaces it.

       CENTER (mathematically centered) : ONE tall vertical
                             bridal portrait (440px × 580px)
                             whose centerline is the EXACT
                             midpoint of the lower-left
                             detail image's centerline and
                             the lower-right Bordeaux
                             image's centerline. See
                             "HORIZONTAL CENTERING" comment
                             block. A SMALLER lace / detail
                             image (≈ 242px, 4/3) overlaps
                             the lower-left area of the
                             main portrait at top:420px,
                             left:-50px of the composition.
                             The detail is the SMALLEST
                             photographic element.

       RIGHT  (900–1140px) : upper-right microcopy
                             ("VOTRE LIEU. / VOTRE HISTOIRE.
                             / VOTRE ALLURE. / UNE CRÉATION.")
                             absolutely anchored to the top
                             of the right region. Lower-right
                             dark Bordeaux image (240px × 320px,
                             3/4) absolutely anchored at
                             top:360px of the right region
                             (moved DOWN from 280px so it
                             clearly reads as a lower-right
                             counterweight), right edge
                             pinned to 1140px. The Bordeaux
                             image is the SECONDARY
                             photographic element.

   The TOP of the eyebrow on the LEFT aligns with the TOP
   edge of the central portrait. (Both at top:0 of the
   canvas.)

   Hierarchy of the three photographs (locked):
     1. central portrait   = largest
     2. lower-right image  = secondary
     3. lower-left detail  = smallest photographic element

   The main portrait's centerline (≈ 640px from the left
   of the 1140px canvas) sits visually between the detail
   centerline (≈ 491px) and the Bordeaux image centerline
   (≈ 1020px), reading as the editorial center of the
   composition — NOT centered on the viewport.

   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 (or Porcelain
   when over the dark image). The 15px body rule does not
   apply to microcopy.
   ========================================================================== */

/* ==========================================================================
   FULL-BLEED ESCAPE — Section 02 Couture Mariage / Votre Allure
   ------------------------------------------------------------
   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-allure) {
    --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-allure) > .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-allure {
    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;
}

/* ==========================================================================
   DESKTOP COMPOSITION — Relative canvas + absolute children.
   ------------------------------------------------------------
   The desktop composition is art-directed. Each visual
   element is independently positioned inside the 1140px
   __inner canvas. No rigid CSS Grid columns at this
   viewport.

   Canvas (1140px wide, 680px tall — hugs the lowest
   visual element) holds:
     - LEFT   (0–340px)   : editorial copy block (absolute,
                            top:0, left:0, w:340px)
     - CENTER (composition at 420–860px; main portrait
                            SHIFTED RIGHT inside the
                            composition by 115.5px so its
                            centerline = 755.5px = exact
                            midpoint of the two supporting
                            image centers) : main 440×580
                            (top:0, left:115.5px of compo-
                            sition) + lace detail overlap
                            (top:420px, left:-50px of
                            composition, w:55%)
     - RIGHT  (900–1140px): upper-right microcopy
                            (absolute, top:0, right:0) +
                            Bordeaux image (absolute,
                            top:360px, right:0, w:240px)
                            [moved DOWN from 280px]

   The lower-left microcopy has been REMOVED. Clean
   Porcelain negative space replaces it.

   HORIZONTAL CENTERING — main portrait:
     detail center  X = 370 + 121       = 491
     right image center X = 900 + 120  = 1020
     midpoint X  = (491 + 1020) / 2    = 755.5
     main left   = 755.5 - 220         = 535.5
     main center = 535.5 + 220         = 755.5 ✓
     distance main → detail = 264.5
     distance main → right  = 264.5 ✓
     (equal within 0 pixels)

   Total width: 1140px. No 100vw, no negative offsets.
   ========================================================================== */
.kb-couture-mariage-allure__inner {
    position: relative;
    width: 100%;
    max-width: var(--kb-content-width);
    /* SINGLE AUTHORITATIVE HEIGHT SOURCE. Hug the true
       bottom of the lowest absolutely positioned child:
       the Bordeaux image (top:360 + aspect-ratio 3/4 ×
       240 = 680px). No additional breathing room below
       — the section ends immediately after the image.
       __composition and __right collapse to height:0. */
    min-height: 680px;
    margin-inline: auto;
    display: block;
}

/* Disable the grid at this viewport — the composition is
   art-directed and uses absolute positioning instead.
   Inherits the same authoritative height as __inner. */
.kb-couture-mariage-allure__grid {
    display: block;
    position: relative;
    width: 100%;
    max-width: var(--kb-content-width);
    min-height: 680px;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   COPY (LEFT) — eyebrow / title / body / link.
   Absolute-positioned in the LEFT region (0–340px) of the
   1140px composition canvas. The previous lower-left
   microcopy block has been REMOVED — clean Porcelain
   negative space now extends to the bottom-left of the
   section.
   ========================================================================== */
.kb-couture-mariage-allure__copy {
    position: absolute;
    top: 0;
    left: 0;
    width: 340px;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin: 0;
    padding: 0;
    z-index: 3;
}

/* ---- 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-allure__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-allure__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-allure__title em,
.kb-couture-mariage-allure__title i {
    font-style: normal;
    color: var(--kb-ink);
}

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

/* ---- Body — two Montserrat paragraphs ----
   Comfortable line-height. Visible separation between
   paragraphs. Restrained column width. NO italic. */
.kb-couture-mariage-allure__body {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    max-width: 320px;
    width: 100%;
}

.kb-couture-mariage-allure__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-allure__paragraph em,
.kb-couture-mariage-allure__paragraph i {
    font-style: normal;
    color: var(--kb-ink);
}

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

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

/* ==========================================================================
   MICROCOPY (LEFT LOWER + RIGHT UPPER)
   ------------------------------------------------------------
   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-allure__microcopy {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* Lower-left microcopy removed — no longer present in the
   markup. Clean Porcelain negative space replaces the
   previous "DES MARIÉES SINGULIÈRES. / DES HISTOIRES
   UNIQUES." block. No rule, no wrapper, no reserved gap. */

.kb-couture-mariage-allure__microcopy--upper-right {
    margin-bottom: 24px;     /* breathing space before the lower-right image */
}

.kb-couture-mariage-allure__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-allure__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-allure__microcopy-line {
    display: block;
}

/* ==========================================================================
   CENTRAL COMPOSITION (CENTER) — dominant portrait + smaller
   lace overlap.
   ------------------------------------------------------------
   Absolute-positioned in the CENTER of the 1140px
   composition canvas. Independent of the LEFT text block
   and the RIGHT column.

     left  : 420px (= 360px text + 60px gap)
     width : 440px
     top   : 0
     height: 0     (no reserved height — every child is
                   absolutely positioned, so the wrapper
                   collapses to its content's zero
                   contribution. The composition does NOT
                   reserve its own vertical space. The
                   authoritative height lives on the
                   grid / inner canvas — see __grid /
                   __inner.)

   The detail is anchored at top:420px, left:-50px of
   the composition so it peeks out from under the main
   image's lower-left edge and acts as a visual
   counterweight to the reduced right image. Hierarchy:
   central portrait = LARGEST photographic element. The
   detail = SMALLEST photographic element.
   ========================================================================== */
.kb-couture-mariage-allure__composition {
    position: absolute;
    top: 0;
    left: 420px;
    width: 440px;
    height: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
    z-index: 1;
}

/* Central portrait — full size of the central portrait
   (440px wide, 580px tall, object-fit: cover). DOMINANT.
   Pinned to the TOP of the composition so the eyebrow on
   the LEFT aligns with the top of the central portrait.

   HORIZONTAL CENTERING: the central portrait is
   positioned so its centerline sits exactly at the
   midpoint between the lower-left detail image's
   centerline and the lower-right Bordeaux image's
   centerline (NOT viewport-centered). The composition
   itself stays at left:420px (so the detail remains
   anchored at its lower-left peek-out position). The
   central portrait is shifted RIGHT inside the
   composition by 115.5px so its center (canvas x ≈
   755.5px) equals the visual midpoint of the two
   supporting images. See the comment block above. */
.kb-couture-mariage-allure__central {
    position: absolute;
    top: 0;
    left: 115.5px;
    width: 440px;
    max-width: none;
    height: 580px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: color-mix(
        in srgb,
        var(--kb-ink) 90%,
        var(--kb-bordeaux)
    );
    border: 0;
    border-radius: 0;
    box-shadow: none;
    z-index: 1;
}

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

/* Lace / detail image — smaller than the central portrait.
   Fixed width: 242px (55% of the original 440px composition
   width that contained it on desktop). The detail now lives
   inside the __mobile-supports wrapper (which spans the full
   1140px canvas at top:0), so its left value is the
   canvas-relative position: 420 (composition) + (-50) = 370px.
   Position: top:420px (≈ 72% of the main portrait's 580px
   height) so the detail overlaps the lower-left area of the
   main image and extends slightly below it. left: 370px so
   the detail peeks out from under the main image's lower-left
   edge and acts as a visual counterweight to the reduced
   right image. z-index: 2 so the overlap reads as a layered
   editorial composition, not a stacked duplicate. */
.kb-couture-mariage-allure__detail {
    position: absolute;
    top: 420px;
    left: 370px;
    right: auto;
    bottom: auto;
    transform: none;
    width: 242px;
    aspect-ratio: 4 / 3;
    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;
    z-index: 2;
}

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

/* ==========================================================================
   MOBILE SUPPORTS WRAPPER (DESKTOP / TABLET)
   ------------------------------------------------------------
   On desktop and tablet, this wrapper is a TRANSPARENT
   absolute positioning context that spans the full 1140px
   canvas. It contains the two supporting images
   (__detail, __right-image) so their absolute positions
   remain canvas-relative (same as the original
   __composition / __right positions). On mobile it
   becomes a normal flex row (see @media below).
   ========================================================================== */
.kb-couture-mariage-allure__mobile-supports {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 680px;
    margin: 0;
    padding: 0;
    min-height: 0;
    min-width: 0;
    z-index: 1;
}

/* ==========================================================================
   RIGHT COLUMN — upper-right microcopy.
   ------------------------------------------------------------
   The right column is now an absolute positioning context
   (240px wide, right edge pinned to 1140px) that contains
   ONLY the upper-right microcopy. The lower-right dark
   Bordeaux image has been moved into the
   __mobile-supports wrapper (which spans the full canvas
   on desktop), so its absolute top:360px, right:0, w:240
   positioning is canvas-relative and matches the original
   visual exactly.

     __right              : absolute, top:0, right:0,
                            width:240px, height:0
     __microcopy--upper   : absolute, top:0, right:0

   Hierarchy: central portrait = LARGEST photographic
   element. Lower-right image = SECONDARY. Lower-left
   detail = SMALLEST.
   ========================================================================== */
.kb-couture-mariage-allure__right {
    position: absolute;
    top: 0;
    right: 0;
    width: 240px;
    height: 0;
    min-height: 0;            /* no reserved height — every
                                child is absolutely
                                positioned, so the wrapper
                                collapses to its content's
                                zero contribution. The
                                authoritative height lives
                                on the grid / inner canvas. */
    margin: 0;
    padding: 0;
    min-width: 0;
    max-width: 100%;
    z-index: 1;
}

/* Upper-right microcopy — anchored to the top of the
   right column, sits in the open negative space. */
.kb-couture-mariage-allure__right .kb-couture-mariage-allure__microcopy--upper-right {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    max-width: 200px;
    align-self: auto;
}

/* Upper-right microcopy text — left-aligned. The wrapper
   position itself is unchanged (still top:0, right:0 of
   the right column with max-width:200px). The text-
   alignment of the inner text is left, and the flex
   cross-axis (align-items) is flex-start so every
   <span> line shares the same left edge of the block
   (instead of being pushed to the right by
   align-items: flex-end). */
.kb-couture-mariage-allure__microcopy--upper-right .kb-couture-mariage-allure__microcopy-text {
    text-align: left;
    align-items: flex-start;
}

/* Right image — lower-right dark Bordeaux bridal image.
   REDUCED: 240px (was 320px). SECONDARY to dominant
   central portrait. Right edge pinned to 1140px.

   Vertical position: top:360px (was 280px, moved further
   DOWN). The top edge now begins at ≈ 62% of the main
   portrait's 580px height — clearly in the lower half,
   reading as a lower-right counterweight to the left
   detail image. Bottom: 360 + 320 = 680px, which
   extends below the central portrait's lower edge
   (580px) by 100px so the two lower images visually
   balance around the dominant central image. NO
   vertical alignment with the main portrait.
   Asymmetrical stagger preserved. */
.kb-couture-mariage-allure__right-image {
    position: absolute;
    top: 360px;
    right: 0;
    width: 240px;
    max-width: 100%;
    aspect-ratio: 3 / 4;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--kb-bordeaux);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

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

/* Right-image microcopy — sits OVER the dark Bordeaux image.
   Porcelain color (so it reads on the dark image). Same
   11.5px / 0.22em / 500 / uppercase as the other microcopy,
   but no leading vertical line (the image itself is the
   anchor). Positioned in the upper-left of the image with
   intentional padding. */
.kb-couture-mariage-allure__microcopy--on-image {
    position: absolute;
    left: 28px;
    top: 28px;
    right: 28px;
    margin: 0;
    padding: 0;
    z-index: 2;
    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-porcelain);
    text-align: left;
    text-wrap: balance;
    max-width: 100%;
}

.kb-couture-mariage-allure__microcopy--on-image .kb-couture-mariage-allure__microcopy-line {
    display: block;
}

/* ==========================================================================
   TABLET (≤ 1199px) — 80px top spacing. 32px side gutter.
   The absolute-positioned composition is preserved. The
   central portrait tightens to 380px; the right image
   tightens to 210px; the text block tightens to 280px.
   Composition canvas height reduces to 700px.

   Layout math (proportional, inside 1140px):
     LEFT  : 0–280px  (text)
     gap   : 40px
     CENTER: 320–700px (central 380px wide)
     gap   : 40px
     RIGHT : 740–950px (right column 210px wide)
     trailing 32px gutter on each side
   ========================================================================== */
@media (max-width: 1199px) {
    .kb-couture-mariage-allure {
        padding-top: var(--kb-section-space-tablet);
    }

    .kb-couture-mariage-allure__inner,
    .kb-couture-mariage-allure__grid {
        min-height: 700px;
        padding-inline: var(--kb-gutter-tablet);
    }

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

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

    .kb-couture-mariage-allure__composition {
        left: 320px;
        width: 380px;
        height: 680px;
    }

    /* Tablet horizontal centering: main is shifted right
       inside the composition by 168px so its center
       (canvas x ≈ 678px) equals the midpoint of the
       detail (center ≈ 384.5) and the Bordeaux image
       (center ≈ 1003). See desktop comment block. */
    .kb-couture-mariage-allure__central {
        left: 168px;
        width: 380px;
        max-width: none;
        height: 520px;
    }

    /* Tablet __mobile-supports — transparent positioning
       context spanning the full tablet canvas (height
       700px to match the canvas min-height). */
    .kb-couture-mariage-allure__mobile-supports {
        height: 700px;
    }

    /* Tablet __detail — was at left:-40px inside the
       composition (canvas left = 320 - 40 = 280px), now
       positioned inside the full-width __mobile-supports
       so left is canvas-relative: 280px. Width is the
       fixed pixel value matching 55% of the original
       380px composition width (≈ 209px). */
    .kb-couture-mariage-allure__detail {
        top: 380px;
        left: 280px;
        width: 209px;
    }

    .kb-couture-mariage-allure__right {
        width: 210px;
        min-height: 700px;
    }

    .kb-couture-mariage-allure__right .kb-couture-mariage-allure__microcopy--upper-right {
        max-width: 180px;
    }

    /* Tablet right image — moved further DOWN (was
       top:240px). Now top:320px so the Bordeaux image
       clearly reads as a lower-right counterweight.
       right:0 stays the same (parent __mobile-supports
       is full-width so right:0 = canvas right:0). */
    .kb-couture-mariage-allure__right-image {
        top: 320px;
        width: 210px;
    }
}

/* ==========================================================================
   MOBILE (≤ 767px) — Editorial collage layout.
   ------------------------------------------------------------
   The three desktop column wrappers (__copy,
   __composition, __right) are collapsed to
   `display: contents` on mobile so their children become
   direct flex children of the __grid. The
   __mobile-supports wrapper contains the two supporting
   images (__detail, __right-image) and becomes the new
   SUPPORT ROW directly under the main portrait — both
   supporting images are in NORMAL DOCUMENT FLOW on
   mobile (no absolute positioning).

   The __grid is converted to a single-column flex
   column so explicit `order` can sequence the final
   mobile reading order. The central portrait is a
   normal-flow block (relative, 80% width, aspect 4/5,
   centered) and is followed immediately by the support
   row (8px gap), then the body (24px gap).

   FINAL MOBILE ORDER (locked):
     1. eyebrow                       order 1
     2. title                         order 2
     3. central portrait              order 3
     4. __mobile-supports row         order 4
            (detail LEFT + Bordeaux RIGHT, side by side)
     5. body paragraphs 1+2           order 5

   The previous NOTRE APPROCHE link is no longer
   rendered (removed from the markup), so the body block
   is now the final element on mobile.

   The upper-right microcopy is HIDDEN on mobile. The
   detail image is the SMALLEST photographic element;
   the Bordeaux image is the SECONDARY photographic
   element; the central portrait is the DOMINANT
   photographic element. No element exceeds the 20px
   page gutter. No horizontal scroll. No desktop /
   tablet styles are touched.
   ========================================================================== */
@media (max-width: 767px) {
    .kb-couture-mariage-allure {
        padding-top: var(--kb-section-space-mobile);
        padding-inline: 0;
        overflow: hidden;
    }

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

    .kb-couture-mariage-allure__grid {
        display: grid;
        grid-template-columns: 1fr;
        /* GRID WRAPPER — single column on mobile.
           `grid-row` on each direct child sequences the
           final mobile reading order. The central
           portrait and the two supporting images share
           grid-row 3 (with `align-self: center` and
           `justify-self` positioning), so the supporting
           images are vertically centered against the
           dynamic central image and peek outside it on
           left/right via `transform: translateX`. No
           absolute positioning, no `padding-bottom`
           reservation needed. */
        position: relative;
        row-gap: 0;
        column-gap: 0;
        padding: 0;
        margin: 0;
        min-height: 0;
    }

    /* All three desktop column wrappers are collapsed
       to `display: contents` on mobile so their
       children become DIRECT flex children of the
       __grid (the new collage wrapper). The desktop
       `position: absolute` on these wrappers is
       dropped. */
    .kb-couture-mariage-allure__copy {
        display: contents;
        max-width: 100%;
        position: static;
        width: auto;
        min-height: 0;
    }

    .kb-couture-mariage-allure__composition {
        display: contents;
        position: static;
        width: auto;
        height: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
        max-width: 100%;
    }

    .kb-couture-mariage-allure__right {
        display: contents;
        position: static;
        width: auto;
        min-height: 0;
    }

    /* ---- Mobile grid placement (locked) ----
         grid-row 1: eyebrow
         grid-row 2: title
         grid-row 3: central portrait + detail + right-image
                     (all share the same cell; detail and
                      right-image are vertically centered
                      against the central and peek outside
                      it on left/right via translateX)
         grid-row 4: body paragraphs 1+2
    */
    .kb-couture-mariage-allure__eyebrow { grid-row: 1; }
    .kb-couture-mariage-allure__title { grid-row: 2; }
    .kb-couture-mariage-allure__central { grid-row: 3; }
    .kb-couture-mariage-allure__detail { grid-row: 3; }
    .kb-couture-mariage-allure__right-image { grid-row: 3; }
    .kb-couture-mariage-allure__body { grid-row: 4; }

    /* ---- Upper-right microcopy — HIDDEN COMPLETELY
       ON MOBILE. ----
       The upper-right microcopy block ("VOTRE LIEU. /
       VOTRE HISTOIRE. / VOTRE ALLURE. / UNE
       CRÉATION.") is removed from the mobile layout.
       The collage is now ONLY the three images. The
       desktop / tablet view of this microcopy is
       preserved by the higher-up (non-mobile) rule
       in the same stylesheet. !important is required
       to win over any inherited display or position
       value. */
    .kb-couture-mariage-allure__microcopy--upper-right {
        display: none !important;
    }

    /* ---- Central portrait = NORMAL FLOW BLOCK on
       mobile. ----
       The figure is a direct grid child of the
       __grid (the __composition wrapper is
       `display: contents` on mobile). Every
       axis/positioning property is locked with
       `!important` so the figure behaves as a
       NORMAL FLOW BLOCK, centered in the grid
       cell, with a 24px gap to the title above.
       The two supporting images (detail, Bordeaux)
       share this same grid cell (grid-row 3) and
       are positioned with `align-self: center` so
       they sit vertically centered against the
       DYNAMIC central image height — no calc
       needed. The gap to the body is owned by the
       body's margin-top (24px). `grid-column: 1 /
       -1` is added defensively. */
    .kb-couture-mariage-allure__central {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        inset: auto !important;
        transform: none !important;

        display: block !important;
        grid-column: 1 / -1;

        width: 80%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;

        margin-top: 24px !important;
        margin-right: auto !important;
        margin-bottom: 0 !important;
        margin-left: auto !important;

        justify-self: center !important;
        align-self: center !important;

        overflow: visible;
        z-index: 1;
    }

    /* The <img> inside the central figure simply fills
       its centered figure. The figure is centered, NOT
       the image — so the image is not given its own
       margins. */
    .kb-couture-mariage-allure__central > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /* ---- __mobile-supports — on mobile, the wrapper
       is `display: contents` so its two children
       (__detail, __right-image) become DIRECT grid
       children of the __grid. This lets them share
       the same grid-row as the central portrait and
       be positioned with align-self / justify-self /
       transform: translateX. The wrapper itself does
       NOT participate in the grid layout on mobile.
       (On desktop / tablet it remains a transparent
       absolute positioning context — see the rules
       above the @media blocks.) */
    .kb-couture-mariage-allure__mobile-supports {
        display: contents;
    }

    /* ---- Detail (SMALLEST photographic element) —
       LEFT side of the central image, in the SAME
       grid cell.
       The figure shares grid-row 3 with the central
       portrait and the Bordeaux image. `align-self:
       center` vertically centers it against the
       DYNAMIC central image height (no calc needed).
       `justify-self: start` anchors it to the LEFT
       edge of the grid cell, and
       `transform: translateX(-20%)` shifts it 20% of
       its own width further LEFT, so it peeks outside
       the central image's left edge like the red
       reference marks. NO absolute positioning.
       Width: 42% of the grid cell. Aspect: 4/3. */
    .kb-couture-mariage-allure__detail {
        grid-column: 1;
        align-self: center;
        justify-self: start;
        position: relative;
        inset: auto;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        transform: translateX(0);
        width: 30%;
        max-width: none;
        aspect-ratio: 4 / 3;
        margin: 0;
        z-index: 2;
    }

    /* ---- Bordeaux image (SECONDARY) — RIGHT side of
       the central image, in the SAME grid cell.
       The figure shares grid-row 3 with the central
       portrait and the detail. `align-self: center`
       vertically centers it against the DYNAMIC
       central image height (no calc needed).
       `justify-self: end` anchors it to the RIGHT
       edge of the grid cell, and
       `transform: translateX(20%)` shifts it 20% of
       its own width further RIGHT, so it peeks
       outside the central image's right edge like
       the red reference marks. NO absolute
       positioning. Width: 36% of the grid cell.
       Aspect: 3/4. */
    .kb-couture-mariage-allure__right-image {
        grid-column: 1;
        align-self: center;
        justify-self: end;
        position: relative;
        inset: auto;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        transform: translateX(0);
        width: 27%;
        max-width: none;
        aspect-ratio: 3 / 4;
        margin: 0;
        z-index: 2;
    }

    /* ---- On-image microcopy over the dark Bordeaux —
       tightened padding for the smaller Bordeaux
       footprint. */
    .kb-couture-mariage-allure__microcopy--on-image {
        left: 14px;
        top: 14px;
        right: 14px;
    }

    /* ---- Manifesto typography on mobile (UNCHANGED) ---- */
    .kb-couture-mariage-allure__eyebrow {
        margin-bottom: 18px;
    }

    .kb-couture-mariage-allure__title {
        font-size: 36px;
        line-height: 1.08;
        max-width: 100%;
        margin-bottom: 0;  /* the gap to the collage is
                              now owned by the central
                              portrait's margin-top */
    }

    .kb-couture-mariage-allure__body {
        gap: 14px;
        margin-top: 24px;     /* breathing space between
                                 the support row and the
                                 first body paragraph */
        margin-bottom: 0;
        max-width: 100%;
    }

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

    .kb-couture-mariage-allure__microcopy-text {
        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-allure__title {
        font-size: 40px;
    }

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

/* ==========================================================================
   SCROLL REVEAL — Section 02 Couture Mariage / Votre Allure
   ------------------------------------------------------------
   Three visual groups animate as their own editorial units:
     - left copy block (eyebrow + title + body + link +
       lower-left microcopy, ONE object)
     - central image composition (central portrait + lace
       overlap, ONE object — the detail is layered onto the
       central portrait and reveals with it)
     - right column (upper-right microcopy + lower-right
       image + on-image microcopy, ONE object)
   The reveal system is unchanged. We only bind the existing
   fade-up behaviour to the group nodes.
   ========================================================================== */
.kb-couture-mariage-allure__copy[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 24px;
    transition-delay: 0ms;
    transition-duration: 1000ms;
}

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

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

@media (max-width: 767px) {
    .kb-couture-mariage-allure__copy[data-kb-reveal="fade-up"],
    .kb-couture-mariage-allure__composition[data-kb-reveal="fade-up"],
    .kb-couture-mariage-allure__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-allure [data-kb-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}