/* ==========================================================================
   KB Tenues d'Occasion — Elementor wrapper reset
   Page-scoped to /services/tenues-doccasion/ only. Resets Elementor's
   default 10px vertical padding on .e-con-inner for every Tenues
   d'Occasion content section, while preserving padding-left / padding-right
   (gutters). Header (.kb-header) and Footer (.kb-footer) widgets do NOT
   use .e-con-inner, so they are untouched. Left/right padding and
   per-section spacing remain intact. The :has() selector targets
   each section root directly so the rule reaches every container
   regardless of body class.
   ========================================================================== */
.e-con:has(.kb-tenues-occasion-hero) > .e-con-inner,
.e-con:has(.kb-tenues-occasion-moment) > .e-con-inner,
.e-con:has(.kb-tenues-occasion-silhouette) > .e-con-inner,
.e-con:has(.kb-tenues-occasion-mouvement) > .e-con-inner,
.e-con:has(.kb-tenues-occasion-lumiere) > .e-con-inner,
.e-con:has(.kb-tenues-occasion-justesse) > .e-con-inner,
.e-con:has(.kb-tenues-occasion-occasions) > .e-con-inner,
.e-con:has(.kb-tenues-occasion-presence) > .e-con-inner,
.e-con:has(.kb-tenues-occasion-finalcta) > .e-con-inner {
    padding-block: 0 !important;
}

/* ==========================================================================
   KB Tenues d'Occasion Hero — Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-tenues-occasion-hero. Same single-canvas
   architecture as the rest of the Hero family: a full-bleed
   background image, a soft Bordeaux / near-black left-to-right
   gradient overlay for copy readability, and the editorial copy
   block (eyebrow / H1 / body / 2 CTAs / bottom microcopy) layered
   on the LEFT side of the canvas. The right side of the photograph
   stays unobstructed so the bride / woman in evening dress
   remains the dominant subject.

   Composition (locked, mirrored from the supplied reference):
     - Cinematic full-width hero directly under the header.
     - Dark Bordeaux / near-black photographic fade on the left.
     - Two canonical outline buttons on the same row at desktop:
       PRIMARY = Porcelain outline, SECONDARY = Gold outline.
       Stack vertically on mobile.
     - Restrained bottom microcopy preceded by a 36px horizontal
       Gold rule, well clear of the CTAs.
     - No cards. No icons. No decorative SaaS elements. No serif.
       No italic. No radius. No shadow.

   Spacing rules:
     - The Hero is the FIRST section — no incoming 100/80/64px gap
       above. The .kb-hero shared reset (home-hero.css) already
       handles the page-level block-padding reset and the
       full-bleed ancestor escape.

   Elementor is content-only. All values driven by tokens.css.
   All visual styling lives here.
   ========================================================================== */

.kb-tenues-occasion-hero {
    position: relative;
    width: 100%;
    background-color: var(--kb-porcelain);
    color: var(--kb-ink);
    overflow: hidden;
    /* No incoming top gap. The Hero is the FIRST section — it
       starts immediately below the global Header at all
       breakpoints. The FULL-BLEED ESCAPE block above already
       zeroes .site-main block-padding, .atlasyn-container
       padding, and the .e-con / .e-con-inner padding; this
       property guarantees the Hero root itself never inherits
       or accumulates any top margin/padding regardless of
       breakpoint. */
    margin-top: 0 !important;
    padding-top: 0 !important;
    /* Definite Hero height — same viewport-minus-header rule as
       the rest of the Hero family. No top section gap: the Hero
       begins immediately beneath the global Header. */
    min-height: calc(100svh - var(--kb-header-height-desktop));
}

/* Soft Bordeaux / near-black left-to-right gradient. Lives
   between the image (z-index 0) and the copy (z-index 2) so the
   editorial text always has a calm, near-black readable field on
   the left while the right side of the photograph (the bride /
   woman in evening dress) stays fully visible and cinematic.
   Multi-stop curve calibrated for the occasion composition: the
   far-left pocket is the deepest Bordeaux / near-black so the
   eyebrow + H1 + body always sit inside the readable field
   regardless of the source photograph; the curve eases out
   smoothly so the fade feels photographic (not a flat SaaS
   gradient). */
.kb-tenues-occasion-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--kb-ink) 90%, transparent) 0%,
        color-mix(in srgb, var(--kb-ink) 80%, var(--kb-bordeaux)) 10%,
        color-mix(in srgb, var(--kb-ink) 62%, var(--kb-bordeaux)) 22%,
        color-mix(in srgb, var(--kb-bordeaux) 72%, transparent) 36%,
        color-mix(in srgb, var(--kb-bordeaux) 50%, transparent) 50%,
        color-mix(in srgb, var(--kb-bordeaux) 28%, transparent) 64%,
        color-mix(in srgb, var(--kb-bordeaux) 10%, transparent) 76%,
        color-mix(in srgb, var(--kb-bordeaux) 3%, transparent) 86%,
        transparent 92%
    );
}

/* ==========================================================================
   FULL-BLEED ESCAPE — KB Tenues d'Occasion Hero.
   The page-level .site-main (parent theme 2rem block padding) and
   .atlasyn-container (1200px wrapper) plus the Elementor .e-con
   (1140px wrapper) are all reset to width 100% / no padding so
   the Hero section root is the single source of truth for the
   outer dimensions. The :has() selector scopes each reset to
   pages whose main loop actually contains a Tenues d'Occasion
   Hero widget — all unrelated .e-con / .atlasyn-container /
   .site-main instances stay untouched. The .kb-hero shared
   contract in home-hero.css defines the same architecture for
   the home page; this block is the page-scoped mirror so the
   reset also applies when the home-hero stylesheet is not
   enqueued.
   ========================================================================== */
.site-main:has(.kb-tenues-occasion-hero) {
    padding-block: 0;
}

.atlasyn-container:has(.kb-tenues-occasion-hero) {
    max-width: 100% !important;
    width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
}

.e-con:has(.kb-tenues-occasion-hero) {
    --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-hero) > .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;
}

/* ---- Single-canvas layout ----------------------------------------------- */
.kb-tenues-occasion-hero__layout {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: inherit;
    width: 100%;
}

/* ---- Copy block ---------------------------------------------------------
   padding-inline-start: max(0, (100vw - 1140) / 2) pins the copy's
   left edge to the 1140px content frame on viewports >= 1140px. On
   narrower viewports the max() collapses to 0 so the copy sits at
   viewport left. The copy block footprint is owned by the inner
   max-width (~58% of 1140 ≈ 661px) — enough width for the 60px H1
   to wrap into exactly 3 visual lines on desktop, the 2 CTAs to
   sit on a single row, and the bottom microcopy to read calmly
   while still leaving the right half of the canvas open for the
   woman in evening dress. */
.kb-tenues-occasion-hero__copy {
    padding-inline-start: max(0px, calc((100vw - var(--kb-content-width)) / 2));
    min-width: 0;
    flex: 0 0 auto;
}

.kb-tenues-occasion-hero__copy-inner {
    width: 100%;
    max-width: calc(var(--kb-content-width) * 0.58);
    margin-inline-start: 0;
}

/* ---- Media background layer --------------------------------------------- */
.kb-tenues-occasion-hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 0;
    overflow: hidden;
    /* Theme-controlled fallback surface for when no Hero image is
       approved yet — Bordeaux → Ink diagonal wash so the canvas
       never reads as an empty void. */
    background:
        linear-gradient(135deg, var(--kb-bordeaux) 0%, var(--kb-ink) 100%);
}

.kb-tenues-occasion-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Desktop focal point: the woman in evening dress (the
       dominant subject) sits primarily on the right; with
       object-fit:cover filling a viewport-wide canvas, "right
       center" keeps her visible on the right while the left side
       stays open for the readable Bordeaux / Ink overlay + copy. */
    object-position: right center;
}

/* ---- Eyebrow ------------------------------------------------------------
   Reuses the canonical .kb-section-eyebrow primitive (base.css) for
   Montserrat / 12px / 500 / uppercase / 0.18em / Gold. The
   .kb-tenues-occasion-hero__eyebrow class only acts as a
   section-scoped hook — no typography duplication here. No
   decorative line, no underline, no ornament. */
.kb-tenues-occasion-hero__eyebrow {
    margin: 0 0 var(--kb-space-l) 0;
}

/* ---- Hero title ---------------------------------------------------------
   Single H1 on the page. Raleway display, hairline weight,
   line-height 1, text-wrap: balance for editorial proportion. The
   newline characters from the Elementor control are preserved by
   nl2br() in the PHP template so the three-line title renders
   exactly as authored ("Quand la soirée / compte, / la tenue
   aussi."). Porcelain on the Bordeaux overlay for AA-grade
   contrast. Non-italic, no serif, no underline. Desktop scale:
   60px (locked). */
.kb-tenues-occasion-hero__title {
    margin: 0 0 var(--kb-space-l) 0;
    font-family: var(--kb-font-display);
    font-size: 60px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.015em;
    color: var(--kb-porcelain);
    font-style: normal;
    text-wrap: balance;
    text-decoration: none;
}

/* ---- Body copy ----------------------------------------------------------
   Restrained body column. Porcelain, small body face, no italic.
   Desktop size 17px (locked). Line-height 1.7 for editorial
   readability. 48ch reading column caps the line length so the
   body never crowds the woman on the right. */
.kb-tenues-occasion-hero__text {
    margin: 0 0 0 0;
    font-family: var(--kb-font-body);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--kb-porcelain);
    max-width: 48ch;
    text-wrap: pretty;
    font-style: normal;
}

/* ---- CTA group ----------------------------------------------------------
   Two canonical outline buttons (PRIMARY = Porcelain, SECONDARY =
   Gold) sit on the same row at desktop and stack vertically on
   mobile. Reuses the site-wide .kb-button primitive (54px height,
   28px padding, Montserrat 13px / 500 / 0.12em, radius 0,
   --kb-transition-button). Only color tokens are overridden on
   top of the primitive — height / padding / font / radius /
   transition are never touched here. The state cascade is the
   Hero-canonical split: :visited → NORMAL, :hover (fine pointer
   only) → fill inversion, :active → same fill as hover (works on
   touch), :focus-visible → NORMAL + restrained Gold focus ring.
   The :hover / :active / :focus-visible rules are independent so
   a click releases the fill immediately, focus-visible never
   paints the hover state, and visited never alters the brand
   colors. */
.kb-tenues-occasion-hero__ctas {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kb-space-s);
    margin-top: 40px;
    width: 100%;
    max-width: 100%;
}

.kb-tenues-occasion-hero__ctas .kb-button {
    width: auto;
    flex: 0 0 auto;
}

.kb-tenues-occasion-hero__cta {
    flex: 0 0 auto;
    /* Hero-scoped motion refinement. Promotes the base 300ms
       transition to --kb-transition-button (500ms cubic-bezier
       (.22, 1, .36, 1)) for a calmer, more premium hover.
       background-color, color and border-color only — no
       transition: all, no transform, no scale. */
    transition:
        background-color var(--kb-transition-button),
        color var(--kb-transition-button),
        border-color var(--kb-transition-button);
}

/* PRIMARY / PORCELAIN — outline architecture, Porcelain frame. */
.kb-tenues-occasion-hero__cta--primary,
.kb-tenues-occasion-hero__cta--primary:visited {
    background-color: transparent;
    color: var(--kb-porcelain);
    border-color: var(--kb-porcelain);
}

.kb-tenues-occasion-hero__cta--primary:active {
    background-color: var(--kb-porcelain);
    color: var(--kb-ink);
    border-color: var(--kb-porcelain);
}

.kb-tenues-occasion-hero__cta--primary:focus-visible {
    background-color: transparent;
    color: var(--kb-porcelain);
    border-color: var(--kb-porcelain);
    outline: 2px solid var(--kb-gold);
    outline-offset: 3px;
}

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

/* SECONDARY / GOLD — outline architecture, Gold frame. */
.kb-tenues-occasion-hero__cta--secondary,
.kb-tenues-occasion-hero__cta--secondary:visited {
    background-color: transparent;
    color: var(--kb-gold);
    border-color: var(--kb-gold);
}

.kb-tenues-occasion-hero__cta--secondary:active {
    background-color: var(--kb-gold);
    color: var(--kb-ink);
    border-color: var(--kb-gold);
}

.kb-tenues-occasion-hero__cta--secondary:focus-visible {
    background-color: transparent;
    color: var(--kb-gold);
    border-color: var(--kb-gold);
    outline: 2px solid var(--kb-gold);
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .kb-tenues-occasion-hero__cta--secondary:hover {
        background-color: var(--kb-gold);
        color: var(--kb-ink);
        border-color: var(--kb-gold);
    }
}

/* ---- Bottom microcopy ---------------------------------------------------
   Restrained editorial microcopy at the bottom-left of the copy
   block, well clear of the CTAs. Preceded by a 36px horizontal
   Gold rule that anchors the microcopy as a standalone editorial
   line. Sits at the natural bottom of the copy block, never
   floating or absolute. */
.kb-tenues-occasion-hero__microcopy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-top: 56px;
    width: 100%;
    max-width: 100%;
}

.kb-tenues-occasion-hero__microcopy-rule {
    display: block;
    width: 36px;
    height: 1px;
    background-color: var(--kb-gold);
    border: 0;
    margin: 0;
}

.kb-tenues-occasion-hero__microcopy-text {
    margin: 0;
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--kb-gold);
    font-style: normal;
}

/* ==========================================================================
   Tablet (768px – 1199px)
   - Same single-canvas principle as desktop.
   - Min-height accounts for the tablet header (80px).
   - 32px gutter applied via padding-inline.
   - H1 scales to 53px. Body 17px. Eyebrow 11.5px.
   - The copy block keeps the same ~58% width rule; the gradient
     is slightly stronger on the left so copy remains readable on
     a narrower canvas.
   - Object-position shifts inward to keep the woman visible on
     the right while the overlay swallows more of the left side.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1199px) {
    .kb-tenues-occasion-hero {
        min-height: calc(100svh - var(--kb-header-height-tablet));
    }

    .kb-tenues-occasion-hero__copy {
        padding-inline-start: var(--kb-gutter-tablet);
        padding-inline-end: var(--kb-gutter-tablet);
    }

    .kb-tenues-occasion-hero__media img {
        object-position: 72% center;
    }

    .kb-tenues-occasion-hero__eyebrow {
        font-size: 11.5px;
    }

    .kb-tenues-occasion-hero__title {
        font-size: 53px;
    }

    .kb-tenues-occasion-hero__text {
        font-size: 17px;
        max-width: 44ch;
    }

    .kb-tenues-occasion-hero__ctas {
        margin-top: 32px;
    }

    .kb-tenues-occasion-hero__microcopy {
        margin-top: 40px;
    }
}

/* ==========================================================================
   Mobile (≤ 767px)
   - Full-width background, copy remains readable.
   - H1 scales to 46px. Body 17px. Eyebrow 11px.
   - Copy block left-aligned with the canonical 20px gutter.
   - The entire text block (eyebrow → title → body → CTAs →
     microcopy) is VERTICALLY CENTERED via the existing flex
     structure on the .kb-tenues-occasion-hero__layout wrapper.
     No top/translateY hacks; the wrapper's `align-items: center`
     already in place does the work.
   - Stronger Bordeaux atmosphere for guaranteed readability on
     small screens regardless of the source photograph.
   - Object-position is intentionally shifted right so the woman
     stays visible (no random desktop crop) and the left side
     stays clear for the overlay + copy.
   - CTAs stack vertically, full-width.
   - No serif. No italic. No radius. No shadow.
   ========================================================================== */
@media (max-width: 767px) {
    .kb-tenues-occasion-hero {
        min-height: calc(100svh - var(--kb-header-height-mobile));
    }

    /* Mobile Bordeaux atmosphere: layered horizontal + vertical
       fade. The horizontal layer (second, sits behind) provides
       the brand tint on the left; the vertical layer (first, on
       top) adds a subtle bottom darken so the copy sits in a
       controlled readable pocket. The upper-right of the canvas
       stays clear for the woman. */
    .kb-tenues-occasion-hero::after {
        background:
            linear-gradient(
                to bottom,
                transparent 18%,
                color-mix(in srgb, var(--kb-ink) 32%, transparent) 100%
            ),
            linear-gradient(
                to right,
                color-mix(in srgb, var(--kb-ink) 84%, transparent) 0%,
                color-mix(in srgb, var(--kb-ink) 62%, var(--kb-bordeaux)) 24%,
                color-mix(in srgb, var(--kb-bordeaux) 42%, transparent) 50%,
                transparent 72%
            );
    }

    /* The single-canvas layout already uses `align-items: center`
       on the desktop. Mobile inherits that — the entire text
       block (eyebrow → title → body → CTAs → microcopy) is
       therefore vertically centered inside the Hero without any
       top / transform hacks. */
    .kb-tenues-occasion-hero__layout {
        align-items: center;
    }

    .kb-tenues-occasion-hero__copy {
        width: 100%;
        padding-inline-start: var(--kb-gutter-mobile);
        padding-inline-end: var(--kb-gutter-mobile);
        padding-top: 32px;
        padding-bottom: var(--kb-space-l);
    }

    .kb-tenues-occasion-hero__copy-inner {
        max-width: none;
        width: 100%;
    }

    .kb-tenues-occasion-hero__media img {
        /* Mobile focal point: shift the visible window further
           right so the woman remains the dominant subject and
           the left side (covered by the overlay) carries the
           dark fade. */
        object-position: 78% center;
    }

    .kb-tenues-occasion-hero__eyebrow {
        font-size: 11px;
        margin-bottom: 20px;
    }

    .kb-tenues-occasion-hero__title {
        font-size: 46px;
        line-height: 1;
    }

    .kb-tenues-occasion-hero__text {
        font-size: 17px;
        line-height: 1.7;
        max-width: none;
    }

    .kb-tenues-occasion-hero__ctas {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
        margin-top: 28px;
    }

    .kb-tenues-occasion-hero__ctas .kb-button {
        width: 100%;
        flex: 0 0 auto;
    }

    .kb-tenues-occasion-hero__microcopy {
        margin-top: 32px;
        gap: 16px;
    }
}

/* ==========================================================================
   HERO EDITORIAL ENTRANCE (page-load CSS keyframes)
   ------------------------------------------------------------
   Same architecture as the rest of the Hero family. The Hero is
   above the fold and present at first render, so it uses its OWN
   dedicated CSS @keyframes (NOT the generic [data-kb-reveal] /
   IntersectionObserver system used by below-the-fold sections).
   CSS animations are deterministic for above-the-fold load — no
   first-paint class sequencing race, no IntersectionObserver
   dependency, no forced reflow.

   The image + the entire copy group are the two animated layers.
   The eyebrow, H1, body text, the 2 CTAs and the bottom microcopy
   ride the parent copy wrapper — they are NOT animated
   independently.
   ========================================================================== */

@keyframes kb-tenues-occasion-hero-media-enter {
    from {
        opacity: 0;
        transform: scale(1.025);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes kb-tenues-occasion-hero-copy-enter {
    from {
        opacity: 0;
        transform: translate3d(0, 26px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.kb-tenues-occasion-hero__media {
    animation-name: kb-tenues-occasion-hero-media-enter;
    animation-duration: 1200ms;
    animation-timing-function: var(--kb-reveal-easing);
    animation-delay: 0ms;
    animation-fill-mode: both;
    animation-iteration-count: 1;
}

.kb-tenues-occasion-hero__copy {
    animation-name: kb-tenues-occasion-hero-copy-enter;
    animation-duration: 1100ms;
    animation-timing-function: var(--kb-reveal-easing);
    animation-delay: 180ms;
    animation-fill-mode: both;
    animation-iteration-count: 1;
}

@media (prefers-reduced-motion: reduce) {
    .kb-tenues-occasion-hero__media,
    .kb-tenues-occasion-hero__copy {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 767px) {
    .kb-tenues-occasion-hero__media {
        animation-duration: 1000ms;
    }

    .kb-tenues-occasion-hero__copy {
        animation-duration: 950ms;
        animation-delay: 140ms;
    }
}