/*
Theme Name: Orthopedic Center Nivelles
Template: atomic-wp-theme
Text Domain: orthopedic-center-nivelles
Version: 0.2.0-ocn.27
*/

/* ============================================================
   OCN CHILD THEME — TRANSITIONAL CANONICAL PASS
   ------------------------------------------------------------
   Ownership:
   - Gutenberg/Core: full / constrained / wide / columns / blockGap
   - OCN theme.json: contentSize / wideSize / typography / colors / radii
   - Atomic WP: background media / overlay / motion / shapes / generic runtime
   - This stylesheet: OCN-specific presentation only

   During the page-by-page migration, legacy selectors remain as aliases where
   needed. They can be removed in the final cleanup once all saved blocks use
   the canonical OCN classes.
   ============================================================ */

/* ===== Variables & Tokens ===== */
:root {
        --ocn-night: #172b3d;
        --ocn-slate: #374657;
        --ocn-mist: #eaf3fa;
        --ocn-blue: #087ff5;
        --ocn-white: #ffffff;
        --ocn-header-offset: var(--wp--custom--layout--header-offset, 5.75rem);
        --ocn-radius-xs: var(--wp--custom--radius--xs, 0.25rem);
        /* Fallbacks mirror the child theme.json tokens exactly. */
        --ocn-radius-sm: var(--wp--custom--radius--sm, 0.6875rem);
        --ocn-radius-md: var(--wp--custom--radius--md, 0.9375rem);
        --ocn-radius-lg: var(--wp--custom--radius--lg, 1rem);
        --ocn-border-soft: rgb(23 43 61 / 0.1);
        --ocn-border-strong: rgb(23 43 61 / 0.16);
        --ocn-shadow-soft: var(--wp--custom--shadow--soft, 0 8px 18px rgb(23 43 61 / 0.06));
        --ocn-shadow-strong: var(--wp--custom--shadow--strong, 0 14px 28px rgb(23 43 61 / 0.09));
        --ocn-shadow-card: var(--wp--custom--shadow--card, 0 14px 30px rgb(23 43 61 / 0.08));
        --ocn-shadow-menu: var(--wp--custom--shadow--menu, 0 14px 30px rgb(23 43 61 / 0.1));
        /* FUTURE ATOMIC PRESET CANDIDATE — shared OCN glass material values. */
        --ocn-glass-alpha: 0.80;
        --ocn-glass-blur: 5px;
        --ocn-glass-background: rgb(255 255 255 / var(--ocn-glass-alpha));
        --ocn-glass-fallback: rgb(255 255 255 / 0.94);
        --ocn-page-end-spacing: clamp(2.5rem, 4vw, 4.5rem);
        --ocn-nav-desktop-optical-offset-y: -13px;
        --ocn-accent-soft: rgb(8 127 245 / 0.16);
        --ocn-accent-line: rgb(8 127 245 / 0.48);
        --ocn-dot-pattern: radial-gradient(circle, rgb(8 127 245 / 0.18) 0.8px, transparent 1px);
        --ocn-section-padding: var(--wp--custom--layout--sectionPadding, clamp(3.25rem, 4.75vw, 5.25rem));
}

/* ===== Base Scroll Behaviour ===== */
html {
        scroll-behavior: smooth;
        scroll-padding-top: var(--ocn-header-offset);
}

:where([id]) {
        scroll-margin-top: calc(var(--ocn-header-offset) + var(--wp--preset--spacing--20));
}

/* ===== Utilities - Feedback Reset ===== */
/* OCN — Utilities Feedback Reset (FONCTIONNEL, pas visuel).
   Resets the aria-live status text for copy/share buttons and hides it
   when empty to avoid screen-reader pollution.
   ============================================================ */
[data-awp-copy-feedback],
[data-awp-share-status] {
        display: inline-block;
        margin-inline-start: 0.5rem;
        font-size: 0.875rem;
        line-height: 1.5;
        opacity: 0;
        transition: opacity 160ms ease;
        vertical-align: middle;
}
[data-awp-copy-feedback]:not(:empty),
[data-awp-share-status]:not(:empty) {
        opacity: 0.9;
}
[data-awp-copy-feedback]:empty,
[data-awp-share-status]:empty {
        display: none;
}
@media (prefers-reduced-motion: reduce) {
        [data-awp-copy-feedback],
        [data-awp-share-status] { transition: none; }
}
/* ------------------------------------------------------------ */

/* PAGE END — the final real surface, never a button/card/inner column, owns
   the breathing room and paints its background through it.
   FUTURE ATOMIC PRESET CANDIDATE: page-end spacing.
   Pages either place that surface directly in post content or use one
   full-width page wrapper. The branches cannot pad both wrapper and surface. */
.awp-site-main {
        padding-bottom: 0;
}

.awp-site-main.awp-site-main--front-page {
        padding-top: 0;
}

.awp-site-main > .wp-block-post-content > :last-child:is(
        .ocn-section, .ocn-surface, .wp-block-cover.alignfull,
        .alignfull:not(:has(> .alignfull))
),
.awp-site-main > .wp-block-post-content > :only-child:not(:is(.ocn-section, .ocn-surface, .wp-block-cover)):has(> .alignfull)
        > :last-child:is(.ocn-section, .ocn-surface, .wp-block-cover.alignfull) {
        padding-block-end: var(--ocn-page-end-spacing);
}

/* Title-only templates can carry an inline Gutenberg bottom margin even
   though there is no following content for that margin to separate. */
.awp-site-main:not(:has(> .wp-block-post-content)) > :last-child {
        margin-block-end: 0 !important;
}

/* ===== Header & Navigation ===== */
/* =========================================================
   OCN NAVBAR — TOKENS / OPTIONS
   FUTURE ATOMIC PRESET CANDIDATE: full shell, wide inner, gutters,
   TOP/SCROLLED padding, logo widths, radius, materials and motion.
   ========================================================= */

.ocn-site-header,
.ocn-site-footer {
        border-radius: 0;
}

.ocn-site-header {
        position: sticky;
        top: var(--wp-admin--admin-bar--height, 0px);
        z-index: 40;
        overflow: visible;
        width: 100%;
        max-width: none;
        margin: 0;
        padding-block: 0;
        border-radius: 0;
        border-inline: 0;
        box-sizing: border-box;
}
.ocn-site-header .awp-site-header__inner,
.ocn-site-header .wp-block-navigation.ocn-primary-navigation {
        position: static;
}

/* Shared inner rhythm; desktop width is set in the desktop geometry block. */
.ocn-site-header .awp-site-header__inner {
        gap: var(--wp--preset--spacing--40);
}

.ocn-brand-lockup {
        gap: 0.9rem;
}

.ocn-brand-lockup .wp-block-site-logo {
        margin: 0;
}

.ocn-brand-lockup .wp-block-site-logo img {
        width: auto;
        height: auto;
}

.ocn-brand-lockup__text {
        min-width: 0;
}

.ocn-brand-lockup__name,
.ocn-brand-lockup__city {
        margin: 0;
        line-height: 1;
}

.ocn-brand-lockup__name {
        color: var(--wp--preset--color--contrast);
        font-weight: 300;
        font-size: clamp(1rem, 0.94rem + 0.3vw, 1.2rem);
        letter-spacing: -0.03em;
}

.ocn-brand-lockup__name strong {
        font-weight: 800;
}

.ocn-brand-lockup__city {
        color: var(--wp--preset--color--primary);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-transform: uppercase;
}

.ocn-site-header .wp-block-site-logo {
        position: relative;
        z-index: 2;
}

.ocn-site-header .wp-block-site-logo img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: none;
        object-fit: contain;
}

.ocn-primary-navigation .wp-block-navigation__container {
        gap: clamp(1rem, 1.3vw, 1.6rem);
}

/* OCN's two-region desktop header uses one flex row. Core owns the
   responsive overlay below 782px. */
@media (min-width: 783px) {
        /* The shell and inner measure stay fixed while the page scrolls. */
        .ocn-site-header.awp-site-header--width-full {
                width: 100%;
                max-width: none;
                margin-inline: 0;
                padding-block: 0;
                box-sizing: border-box;
        }

        /* INNER CONTENT — same canonical WIDE measure in every desktop state. */
        .ocn-site-header .awp-site-header__inner {
                width: 100%;
                max-width: var(--wp--style--global--wide-size);
                margin-inline: auto;
                box-sizing: border-box;
                padding-block: 10px;
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
        }

        .ocn-site-header .wp-block-site-logo {
                flex: 0 0 auto;
        }

        .ocn-site-header .ocn-primary-navigation {
                flex: 1 1 auto;
                width: auto;
                min-width: 0;
                margin-inline-start: auto;
                display: flex;
                align-self: center;
                align-items: center;
                justify-content: flex-end;
                translate: 0 var(--ocn-nav-desktop-optical-offset-y);
        }

        .ocn-site-header .ocn-primary-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
                display: flex;
                flex: 1 1 auto;
                align-items: center;
                justify-content: flex-end;
                width: 100%;
        }

        .ocn-site-header .ocn-primary-navigation .wp-block-navigation__responsive-container-content {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                width: 100%;
                height: 100%;
        }

        .ocn-site-header .ocn-primary-navigation .wp-block-navigation__responsive-close,
        .ocn-site-header .ocn-primary-navigation .wp-block-navigation__responsive-dialog {
                display: flex;
                align-items: center;
                width: 100%;
        }

        .ocn-site-header .ocn-primary-navigation > .wp-block-navigation__container,
        .ocn-site-header .ocn-primary-navigation .wp-block-navigation__container {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                flex-direction: row !important;
                flex-wrap: nowrap !important;
                height: 100%;
                transform: none;
                max-width: 100%;
        }

        /* Preserve the logo's intrinsic display while keeping one size. */
        .ocn-site-header .wp-block-site-logo img,
        .ocn-site-header .wp-block-site-logo a {
                opacity: 1 !important;
                visibility: visible !important;
                transform: none !important;
        }

        .ocn-site-header .wp-block-site-logo img {
                width: 188px !important;
                max-width: 188px;
                height: auto;
                transition: none;
        }

        .ocn-site-header .ocn-primary-navigation .wp-block-navigation__container
                > .wp-block-navigation-item
                > .wp-block-navigation-item__content,
        .ocn-site-header .ocn-primary-navigation .wp-block-navigation__container
                > .wp-block-navigation-item
                > a {
                display: inline-flex;
                align-self: center;
                align-items: center;
                line-height: 1.2;
                box-sizing: border-box;
        }

        .ocn-site-header .ocn-primary-navigation .wp-block-navigation__container > .wp-block-navigation-item {
                display: flex;
                align-items: center;
        }

}

@media (max-width: 782px) {
        .ocn-site-header .awp-site-header__inner {
                width: 100%;
                max-width: none;
                margin-inline: 0;
                gap: var(--wp--preset--spacing--30);
                flex-wrap: nowrap !important;
                align-items: center !important;
        }

        .ocn-site-header .wp-block-site-logo {
                min-width: 0;
                flex: 0 1 auto;
        }

        .ocn-site-header .wp-block-navigation {
                order: 2;
                flex: 0 0 auto !important;
                width: auto !important;
                min-width: 0 !important;
                max-width: none !important;
        }

        .ocn-site-header .wp-block-navigation__responsive-container-open {
                margin-inline-start: auto;
                align-self: center;
                justify-self: end;
        }
}

.ocn-primary-navigation .wp-block-navigation-item,
.ocn-site-header .wp-block-navigation .wp-block-navigation-item {
        align-items: center;
}

.ocn-primary-navigation .wp-block-navigation-item__content,
.ocn-site-header .wp-block-navigation .wp-block-navigation-item__content {
        position: relative;
        padding: 0.45rem 0;
        line-height: 1.2;
        text-decoration: none !important;
        text-shadow: none;
}

.ocn-site-header {
        --awp-nav-link-hover-color: var(--wp--preset--color--contrast);
        --awp-nav-link-active-color: var(--wp--preset--color--contrast);
}

.ocn-primary-navigation .wp-block-navigation-item__content::before,
.ocn-site-header .wp-block-navigation .wp-block-navigation-item__content::before {
        content: none !important;
}

/* ============================================================
   ACTIVE STATE / MENU CONTEXT — single canonical underline
   ============================================================
   WordPress Core already exposes all required state classes via
   `wp_nav_menu` / `block-navigation` renderer:
     • .current-menu-item       → directly-visited page
     • .current-menu-parent     → direct parent of the shown page
     • .current-menu-ancestor   → any ancestor (grand-parent etc.)
     • .is-active               → block-navigation / Gutenberg alias
     • aria-current="page"      → on the <a> label itself
   No URL / route-based hardcoding. We pin visual underline to the
   exact text span (not full row width) using % width + translateX,
   OCN accent blue, 1 px fine stroke, animation subtle.
   Works for: homepage, team archive, single practitioner, specialty
   page, contact page, etc. — any page where Core assigns a state. */

.ocn-primary-navigation .wp-block-navigation-item__content,
.ocn-site-header .wp-block-navigation .wp-block-navigation-item__content {
        /* Establishes positioning context for the underline pseudo. */
        position: relative;
        display: inline-flex;
        vertical-align: baseline;
}

/* ────────────────────────────────────────────────────
   Underline primitive — drawn UNDER THE WORD (NOT full row)
   attached to .wp-block-navigation-item__label (the inline text
   span rendered by Gutenberg Core), so underline width ALWAYS
   equals glyph length — never stretches across the full padded row.
   Full-width click target preserved intact on .__content (padding
   and min-height still belong to the outer click row). */
/* Anchor underline positioning context inside the label span
   (NOT the full padded content row) so underline width ALWAYS
   equals glyph length exactly. Full click-row click target still
   belongs to .__content which keeps its padding/min-height. */
.ocn-primary-navigation .wp-block-navigation-item__label,
.ocn-site-header .wp-block-navigation .wp-block-navigation-item__label {
        position: relative;
        display: inline-block;
}

.ocn-primary-navigation .wp-block-navigation-item__content .wp-block-navigation-item__label::after,
.ocn-site-header .wp-block-navigation .wp-block-navigation-item__content .wp-block-navigation-item__label::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -0.38rem;
        width: calc(100% - 0.05em);
        height: 1px;
        border-radius: 999px;
        background: var(--ocn-blue);
        transform: translateX(-50%) scaleX(0);
        transform-origin: center;
        transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease;
        opacity: 0.94;
        pointer-events: none;
}

/* Hover / focus / keyboard → reveal underline under the word */
.ocn-primary-navigation .wp-block-navigation-item__content:hover .wp-block-navigation-item__label::after,
.ocn-primary-navigation .wp-block-navigation-item__content:focus-visible .wp-block-navigation-item__label::after,
.ocn-site-header .wp-block-navigation .wp-block-navigation-item__content:hover .wp-block-navigation-item__label::after,
.ocn-site-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible .wp-block-navigation-item__label::after {
        transform: translateX(-50%) scaleX(1);
}

/* ACTIVE (Core-owned state classes) → UNDERLINE HELD
   This covers:
     • page itself active
     • direct parent shown (.current-menu-parent, e.g. "Équipe" while
       viewing single-doctor page)
     • deeper ancestor (.current-menu-ancestor, e.g. grandparent) */
.ocn-primary-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content .wp-block-navigation-item__label::after,
.ocn-primary-navigation .wp-block-navigation-item.current-menu-parent > .wp-block-navigation-item__content .wp-block-navigation-item__label::after,
.ocn-primary-navigation .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content .wp-block-navigation-item__label::after,
.ocn-primary-navigation .wp-block-navigation-item.is-active > .wp-block-navigation-item__content .wp-block-navigation-item__label::after,
.ocn-primary-navigation .wp-block-navigation-item > a[aria-current="page"] .wp-block-navigation-item__label::after,
.ocn-site-header .wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content .wp-block-navigation-item__label::after,
.ocn-site-header .wp-block-navigation .wp-block-navigation-item.current-menu-parent > .wp-block-navigation-item__content .wp-block-navigation-item__label::after,
.ocn-site-header .wp-block-navigation .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content .wp-block-navigation-item__label::after,
.ocn-site-header .wp-block-navigation .wp-block-navigation-item.is-active > .wp-block-navigation-item__content .wp-block-navigation-item__label::after,
.ocn-site-header .wp-block-navigation .wp-block-navigation-item > a[aria-current="page"] .wp-block-navigation-item__label::after {
        transform: translateX(-50%) scaleX(1);
        opacity: 1;
}

/* Active/current labels keep their normal dark color and weight; the blue
   underline alone carries the state without changing text width. */
.ocn-primary-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.ocn-primary-navigation .wp-block-navigation-item.current-menu-parent > .wp-block-navigation-item__content,
.ocn-primary-navigation .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content,
.ocn-primary-navigation .wp-block-navigation-item.is-active > .wp-block-navigation-item__content,
.ocn-primary-navigation .wp-block-navigation-item > a[aria-current="page"],
.ocn-site-header .wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.ocn-site-header .wp-block-navigation .wp-block-navigation-item.current-menu-parent > .wp-block-navigation-item__content,
.ocn-site-header .wp-block-navigation .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content,
.ocn-site-header .wp-block-navigation .wp-block-navigation-item.is-active > .wp-block-navigation-item__content,
.ocn-site-header .wp-block-navigation .wp-block-navigation-item > a[aria-current="page"] {
        color: var(--wp--preset--color--contrast);
        text-decoration: none !important;
}

/* TOP-LEVEL PARENT held-active via descendant active marker.
   The submenu-container inside a parent <li> is tagged `.has-active-descendant`
   by the OCN PHP bridge (functions.php L1295); this makes the TOP-LEVEL
   label underline itself even when the user is on a single-practitioner or
   single-specialty page (subitem).

   CRITICAL INVERSION GUARD (NOT "every sibling active on dropdown open"):
   — Held underline applies ONLY to the TOP-LEVEL <li> direct child
     `.wp-block-navigation-item__content`.
   — `.wp-block-navigation-submenu__toggle` (the chevron inside the top-level
     parent) is EXCLUDED via :not(.wp-block-navigation-submenu__toggle)
     selector because it is NOT a real item label.
   — Items INSIDE `.__submenu-container` are NEVER reached because the rule
     uses `:direct-child >` only on `.__container > li.has-child`, which is
     always level 1. */
.ocn-primary-navigation
        .wp-block-navigation__container
        > .wp-block-navigation-item:has(
                > .wp-block-navigation__submenu-container.has-active-descendant
        )
        > .wp-block-navigation-item__content:not(.wp-block-navigation-submenu__toggle),
.ocn-site-header
        .wp-block-navigation
        .wp-block-navigation__container
        > .wp-block-navigation-item:has(
                > .wp-block-navigation__submenu-container.has-active-descendant
        )
        > .wp-block-navigation-item__content:not(.wp-block-navigation-submenu__toggle) {
        color: var(--wp--preset--color--contrast);
        text-decoration: none !important;
}
.ocn-primary-navigation
        .wp-block-navigation__container
        > .wp-block-navigation-item:has(
                > .wp-block-navigation__submenu-container.has-active-descendant
        )
        > .wp-block-navigation-item__content:not(.wp-block-navigation-submenu__toggle) .wp-block-navigation-item__label::after,
.ocn-site-header
        .wp-block-navigation
        .wp-block-navigation__container
        > .wp-block-navigation-item:has(
                > .wp-block-navigation__submenu-container.has-active-descendant
        )
        > .wp-block-navigation-item__content:not(.wp-block-navigation-submenu__toggle) .wp-block-navigation-item__label::after {
        transform: translateX(-50%) scaleX(1);
        opacity: 1;
}

/* ────────────────────────────────────────────────────
   Submenu level-2 (desktop dropdowns + mobile accordions) — underline
   attached to .wp-block-navigation-item__label (text-span), NOT full padded row.
   Same 1 px fine stroke as the top level. */
.wp-block-navigation.ocn-primary-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.ocn-site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        position: relative;
}
.wp-block-navigation.ocn-primary-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content .wp-block-navigation-item__label::after,
.ocn-site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content .wp-block-navigation-item__label::after {
        left: 50% !important;
        width: calc(100% - 0.05em) !important;
        bottom: -0.38rem !important;
        height: 1px !important;
        opacity: 0.96;
        background: color-mix(in srgb, var(--ocn-blue) 92%, transparent 8%);
}
.wp-block-navigation.ocn-primary-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content .wp-block-navigation-item__label::after,
.wp-block-navigation.ocn-primary-navigation .wp-block-navigation__submenu-container .current-menu-ancestor > .wp-block-navigation-item__content .wp-block-navigation-item__label::after,
.wp-block-navigation.ocn-primary-navigation .wp-block-navigation__submenu-container .is-active > .wp-block-navigation-item__content .wp-block-navigation-item__label::after,
.wp-block-navigation.ocn-primary-navigation .wp-block-navigation__submenu-container a[aria-current="page"] .wp-block-navigation-item__label::after,
.ocn-site-header .wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content .wp-block-navigation-item__label::after,
.ocn-site-header .wp-block-navigation .wp-block-navigation__submenu-container .current-menu-ancestor > .wp-block-navigation-item__content .wp-block-navigation-item__label::after,
.ocn-site-header .wp-block-navigation .wp-block-navigation__submenu-container .is-active > .wp-block-navigation-item__content .wp-block-navigation-item__label::after,
.ocn-site-header .wp-block-navigation .wp-block-navigation__submenu-container a[aria-current="page"] .wp-block-navigation-item__label::after {
        transform: translateX(-50%) scaleX(0.92) !important;
        opacity: 0.92 !important;
}
.wp-block-navigation.ocn-primary-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation.ocn-primary-navigation .wp-block-navigation__submenu-container .current-menu-ancestor > .wp-block-navigation-item__content,
.wp-block-navigation.ocn-primary-navigation .wp-block-navigation__submenu-container .is-active > .wp-block-navigation-item__content,
.wp-block-navigation.ocn-primary-navigation .wp-block-navigation__submenu-container a[aria-current="page"],
.ocn-site-header .wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content,
.ocn-site-header .wp-block-navigation .wp-block-navigation__submenu-container .current-menu-ancestor > .wp-block-navigation-item__content,
.ocn-site-header .wp-block-navigation .wp-block-navigation__submenu-container .is-active > .wp-block-navigation-item__content,
.ocn-site-header .wp-block-navigation .wp-block-navigation__submenu-container a[aria-current="page"] {
        /* Current row keeps the same dark label/weight as its siblings;
           the held underline and soft row background indicate state. */
        color: var(--wp--preset--color--contrast) !important;
        background: color-mix(in srgb, var(--ocn-blue) 7%, transparent 93%) !important;
        background-color: color-mix(in srgb, var(--ocn-blue) 7%, transparent 93%) !important;
        text-decoration: none !important;
}

.ocn-primary-navigation .wp-block-navigation-submenu__toggle,
.ocn-site-header .wp-block-navigation .wp-block-navigation-submenu__toggle {
        padding: 0.45rem 0 0.45rem 0.25rem;
        color: var(--wp--preset--color--secondary);
}

.ocn-primary-navigation .wp-block-navigation-submenu__toggle:hover,
.ocn-primary-navigation .wp-block-navigation-submenu__toggle:focus-visible,
.ocn-site-header .wp-block-navigation .wp-block-navigation-submenu__toggle:hover,
.ocn-site-header .wp-block-navigation .wp-block-navigation-submenu__toggle:focus-visible {
        color: var(--wp--preset--color--contrast);
        background: transparent;
}

.ocn-primary-navigation .wp-block-navigation-submenu__toggle svg,
.ocn-site-header .wp-block-navigation .wp-block-navigation-submenu__toggle svg {
        width: 0.75rem;
        height: 0.75rem;
        transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), color 180ms ease;
        stroke: currentColor;
        stroke-width: 1.5;
        fill: none;
}

.ocn-primary-navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg,
.ocn-site-header .wp-block-navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
        transform: rotate(180deg);
}

        @media (min-width: 783px) {
        .wp-block-navigation.ocn-primary-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container,
        .ocn-site-header .wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container,
        .awp-mega-menu > .wp-block-navigation__submenu-container,
        .awp-mega-menu > .awp-mega-menu__panel {
                width: max-content;
                min-width: 12.5rem;
                max-width: min(19rem, calc(100vw - 2rem));
                padding: 0.55rem 0.35rem;
                border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 14%, rgb(23 43 61 / 0.08));
                border-radius: var(--wp--custom--radius--md, 0.9375rem);
                box-shadow:
                        0 1px 0 rgb(255 255 255 / 0.85) inset,
                        0 18px 44px -16px rgb(23 43 61 / 0.20),
                        0 2px 6px rgb(23 43 61 / 0.06);
                isolation: auto !important;
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                left: 0 !important;
                right: auto !important;
                transform: translateY(8px);
                transform-origin: top left;
                top: calc(100% + 0.125rem) !important;
                height: auto;
                overflow: visible;
                transition:
                        opacity 460ms cubic-bezier(0.16, 1, 0.3, 1),
                        transform 460ms cubic-bezier(0.16, 1, 0.3, 1),
                        visibility 0s linear 460ms,
                        background-color 180ms ease;
        }

        /* Canonical Core dropdown material: one state-independent owner. */
        .wp-block-navigation.ocn-primary-navigation.ocn-primary-navigation.ocn-primary-navigation.ocn-primary-navigation .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container,
        .ocn-site-header.ocn-site-header.ocn-site-header.ocn-site-header .wp-block-navigation.wp-block-navigation.wp-block-navigation .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container {
                -webkit-backdrop-filter: blur(var(--ocn-glass-blur)) saturate(160%) !important;
                backdrop-filter: blur(var(--ocn-glass-blur)) saturate(160%) !important;
                background: rgb(248 251 254 / var(--ocn-glass-alpha)) !important;
                background-color: rgb(248 251 254 / var(--ocn-glass-alpha)) !important;
                isolation: auto !important;
                contain: layout style !important;
                overflow: visible !important;
        }

        .wp-block-navigation.ocn-primary-navigation .wp-block-navigation__container > li.wp-block-navigation-item.has-child,
        .ocn-site-header .wp-block-navigation .wp-block-navigation__container > li.wp-block-navigation-item.has-child {
                position: relative;
        }

        /* Hover bridge: closes the physical gap between parent item bottom and submenu panel
           top so diagonal/downward pointer movement never leaves the hover-zone. */
        .wp-block-navigation.ocn-primary-navigation .wp-block-navigation__container > li.wp-block-navigation-item.has-child::after,
        .ocn-site-header .wp-block-navigation .wp-block-navigation__container > li.wp-block-navigation-item.has-child::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                top: 100%;
                height: 18px;
                display: block;
                pointer-events: auto;
                background: transparent;
                z-index: 1;
        }

        .wp-block-navigation.ocn-primary-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container > li.wp-block-navigation-item,
        .ocn-site-header .wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container > li.wp-block-navigation-item {
                background: transparent !important;
                background-color: transparent !important;
                box-shadow: none !important;
                border-radius: 0 !important;
                margin: 0 !important;
        }

        .wp-block-navigation.ocn-primary-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
        .ocn-site-header .wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 0.9rem;
                width: 100%;
                padding: 0.7rem 0.85rem !important;
                border-radius: calc(var(--wp--custom--radius--md, 0.9375rem) - 4px);
                white-space: normal;
                line-height: 1.35 !important;
                /* NORMAL submenu item (default, NOT bold, NOT selected).
                   An open dropdown does NOT mean every sibling becomes bold:
                   weight stays regular 400 for all non-active items. */
                color: var(--wp--preset--color--contrast) !important;
                background: transparent !important;
                background-color: transparent !important;
                font-size: clamp(0.875rem, 1.6vw, 0.925rem);
                font-weight: 400;
                letter-spacing: 0;
                justify-content: flex-start;
                transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
        }

        /* Legacy L528–534 neutralised: old desktop submenu underline used
           `left:1rem; right:1rem; bottom:0.52rem; opacity:.35` = pleine
           largeur row, incompatible avec "underline sous le mot" spec.
           New canonical rules in L371–379 win via specificity and override
           every prop below. */
        @media (any-pointer: fine) {
                .wp-block-navigation.ocn-primary-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container .wp-block-navigation-item__content .wp-block-navigation-item__label::after,
                .ocn-site-header .wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container .wp-block-navigation-item__content .wp-block-navigation-item__label::after {
                        opacity: 0.96;
                }
        }

        /* Full-row hover: parent LI state applies bg across icon + spacing.
           Feedback is the background and fine underline, not text weight. */
        .wp-block-navigation.ocn-primary-navigation .wp-block-navigation__submenu-container > li.wp-block-navigation-item:hover > .wp-block-navigation-item__content,
        .wp-block-navigation.ocn-primary-navigation .wp-block-navigation__submenu-container > li.wp-block-navigation-item:focus-within > .wp-block-navigation-item__content,
        .ocn-site-header .wp-block-navigation .wp-block-navigation__submenu-container > li.wp-block-navigation-item:hover > .wp-block-navigation-item__content,
        .ocn-site-header .wp-block-navigation .wp-block-navigation__submenu-container > li.wp-block-navigation-item:focus-within > .wp-block-navigation-item__content {
                background: color-mix(in srgb, var(--ocn-blue) 5%, var(--wp--preset--color--surface) 95%) !important;
                background-color: color-mix(in srgb, var(--ocn-blue) 5%, var(--wp--preset--color--surface) 95%) !important;
                color: var(--wp--preset--color--contrast) !important;
        }

        /* Icon box + SVG in submenu items — primary brand blue for legibility on photography */
        .wp-block-navigation.ocn-primary-navigation .wp-block-navigation__submenu-container .awp-nav-icon,
        .ocn-site-header .wp-block-navigation .wp-block-navigation__submenu-container .awp-nav-icon {
                background: color-mix(in srgb, var(--wp--preset--color--primary) 7%, var(--wp--preset--color--background) 98%);
                border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 26%, transparent);
        }

        .wp-block-navigation.ocn-primary-navigation .wp-block-navigation__submenu-container .awp-nav-icon__svg,
        .wp-block-navigation.ocn-primary-navigation .wp-block-navigation__submenu-container .awp-nav-icon > svg,
        .ocn-site-header .wp-block-navigation .wp-block-navigation__submenu-container .awp-nav-icon__svg,
        .ocn-site-header .wp-block-navigation .wp-block-navigation__submenu-container .awp-nav-icon > svg {
                stroke: var(--wp--preset--color--primary, #087FF5);
                color: var(--wp--preset--color--primary, #087FF5);
        }

        .wp-block-navigation.ocn-primary-navigation .wp-block-navigation__submenu-container > li.wp-block-navigation-item:hover > .wp-block-navigation-item__content .awp-nav-icon,
        .wp-block-navigation.ocn-primary-navigation .wp-block-navigation__submenu-container > li.wp-block-navigation-item:focus-within > .wp-block-navigation-item__content .awp-nav-icon,
        .ocn-site-header .wp-block-navigation .wp-block-navigation__submenu-container > li.wp-block-navigation-item:hover > .wp-block-navigation-item__content .awp-nav-icon,
        .ocn-site-header .wp-block-navigation .wp-block-navigation__submenu-container > li.wp-block-navigation-item:focus-within > .wp-block-navigation-item__content .awp-nav-icon {
                background: rgb(255 255 255 / 0.96);
                border-color: color-mix(in srgb, var(--wp--preset--color--primary) 34%, transparent);
        }

        .wp-block-navigation.ocn-primary-navigation .wp-block-navigation-item.has-child.has-child.has-child.open-on-hover-click.open-on-hover-click:hover > .wp-block-navigation__submenu-container,
        .wp-block-navigation.ocn-primary-navigation .wp-block-navigation-item.has-child.has-child.has-child.open-on-hover-click.open-on-hover-click:focus-within > .wp-block-navigation__submenu-container,
        .wp-block-navigation.ocn-primary-navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
        .ocn-site-header .wp-block-navigation .wp-block-navigation-item.has-child.has-child.has-child.open-on-hover-click.open-on-hover-click:hover > .wp-block-navigation__submenu-container,
        .ocn-site-header .wp-block-navigation .wp-block-navigation-item.has-child.has-child.has-child.open-on-hover-click.open-on-hover-click:focus-within > .wp-block-navigation__submenu-container,
        .ocn-site-header .wp-block-navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
        .awp-mega-menu.awp-mega-menu.awp-mega-menu:hover > .wp-block-navigation__submenu-container,
        .awp-mega-menu.awp-mega-menu.awp-mega-menu:focus-within > .wp-block-navigation__submenu-container,
        .awp-mega-menu.awp-mega-menu.awp-mega-menu:hover > .awp-mega-menu__panel,
        .awp-mega-menu.awp-mega-menu.awp-mega-menu:focus-within > .awp-mega-menu__panel {
                display: flex !important;
                opacity: 1 !important;
                visibility: visible !important;
                pointer-events: auto !important;
                transform: translateY(0) !important;
                transition-delay: 0s !important;
                transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1), transform 240ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s !important;
                height: auto !important;
                overflow: visible !important;
                width: max-content !important;
                min-width: 12.5rem !important;
        }
}

/* ===== Mobile dropdown navigation — anchored under header ===== */
@media (max-width: 782px) {
        /* Core marks the document modal-open. Keep the page's normal scroll
           container so a short anchored menu does not freeze visible content. */
        html.has-modal-open:has(.ocn-site-header .wp-block-navigation__responsive-container.is-menu-open) {
                overflow-y: auto !important;
        }
}

/* ─────────────────────────────────────────────────────────────
   0. GLOBAL BODY DIMMING when menu is open — subtle, page-centric
   Applies a faint neutral overlay on <main> + sibling content so the
    background remains perceptible but yields focus to the dropdown. */
@media (max-width: 782px) {
        body:has(.ocn-site-header .wp-block-navigation__responsive-container.is-menu-open) {
                --ocn-nav-open: 1;
        }
        @media (prefers-reduced-motion: no-preference) {
                body {
                        --ocn-nav-open: 0;
                }
                body:has(.ocn-site-header .wp-block-navigation__responsive-container.is-menu-open) {
                        transition: --ocn-nav-open 300ms ease;
                }
        }
        /* Dimming veil — lives on <main> content, not page backdrop */
        body:has(.ocn-site-header .wp-block-navigation__responsive-container.is-menu-open) main,
        body:has(.ocn-site-header .wp-block-navigation__responsive-container.is-menu-open) #content,
        body:has(.ocn-site-header .wp-block-navigation__responsive-container.is-menu-open) .wp-site-blocks > *:not(.wp-block-template-part:has(.ocn-site-header)) {
                filter: brightness(0.985) saturate(0.96);
                opacity: 0.96;
                transition: opacity 320ms ease, filter 320ms ease;
        }
        /* Safe fallback veil via body ::after if no main wrapper — very faint */
        @supports not selector(:has(*)) {
                body.menu-open::after {
                        content: "";
                        position: fixed;
                        inset: 0;
                        background: rgb(23 43 61 / 0.04);
                        z-index: 45;
                        pointer-events: none;
                }
        }

        /* Mobile keeps the same full-width glass shell. */
        .ocn-site-header .awp-site-header__inner {
                padding-block: 10px;
                padding-inline: var(--awp-page-gutter);
                row-gap: 0;
                column-gap: var(--wp--preset--spacing--30);
        }
        .ocn-site-header .wp-block-site-logo img {
                width: 176px !important;
                max-width: 176px;
                height: auto;
        }
        body:has(.ocn-site-header.ocn-site-header.ocn-site-header
                .wp-block-navigation.wp-block-navigation
                .wp-block-navigation__responsive-container.is-menu-open)
                .ocn-site-header.ocn-site-header.ocn-site-header
                .wp-block-navigation.wp-block-navigation
                .wp-block-navigation__responsive-container.is-menu-open {
                border-left: 1px solid color-mix(in srgb, var(--ocn-blue, #1d4e89) 8%, rgba(255,255,255,0.92)) !important;
                border-right: 1px solid color-mix(in srgb, var(--ocn-blue, #1d4e89) 8%, rgba(255,255,255,0.92)) !important;
                border-bottom: 1px solid color-mix(in srgb, var(--ocn-blue, #1d4e89) 8%, rgba(255,255,255,0.92)) !important;
                border-top: 0 !important;
                box-shadow:
                        0 20px 56px -18px rgb(23 43 61 / 0.22),
                        0 2px 0 rgb(23 43 61 / 0.025);
                /* clip-path REMOVED: creating paint containment that cancels backdrop-blur sampling. */
                -webkit-backdrop-filter: blur(var(--ocn-glass-blur)) saturate(150%) !important;
                backdrop-filter: blur(var(--ocn-glass-blur)) saturate(150%) !important;
                background: rgb(255 255 255 / var(--ocn-glass-alpha)) !important;
                background-color: rgb(255 255 255 / var(--ocn-glass-alpha)) !important;
        }

        /* ────────────────────────────────────────────────────────
           2. DROPDOWN PANEL POSITIONING — anchored DIRECTLY under
              .ocn-site-header sticky box (controlling block).

              SPECIFICITY NOTE (CRITICAL — DO NOT DOWNGRADE):
                Atomic/Core ships rules like
                  `.wp-block-navigation__responsive-container.is-menu-open`
                with `!important` and loads AFTER this stylesheet. To win
                the cascade we need HIGHER specificity than 0-3-0, not just
                source-order parity.
                Selector below chains 5 classes + 1 structural pseudo
                = 0-6-0 + guarantees panel always pins to header.bottom
                regardless of later plugin CSS.

              Containing block is `.ocn-site-header` (position:sticky):
                • `top:100%`         → panel.top ≡ header.bottom (+/- 1px)
                • `left:0; right:0`  → panel box = header box (same width)
                • `width:auto`       → width derived from offsets, no guess */
        body:not(.atomic-wp-never)
                .ocn-site-header.ocn-site-header.ocn-site-header
                .wp-block-navigation.wp-block-navigation
                .wp-block-navigation__responsive-container,
        body:not(.atomic-wp-never)
                .ocn-site-header.ocn-site-header.ocn-site-header
                .wp-block-navigation.wp-block-navigation
                .wp-block-navigation__responsive-container.has-modal-open,
        body:not(.atomic-wp-never)
                .ocn-site-header.ocn-site-header.ocn-site-header
                .wp-block-navigation.wp-block-navigation
                .wp-block-navigation__responsive-container.is-menu-open {
                /* `inset` shorthand MUST come BEFORE longhand top/left/right/bottom
                   in the same declaration block, otherwise it silently overrides
                   them even with identical !important priority (last-wins semantic). */
                inset: auto !important;
                position: absolute !important;
                /* ↓ per-side longhand AFTER inset, so individual values take priority */
                top: 100% !important;
                left: 0 !important;
                right: 0 !important;
                bottom: auto !important;
                width: auto !important;
                min-width: 0 !important;
                max-width: none !important;
                height: auto !important;
                min-height: 0 !important;
                max-height: calc(100svh - (clamp(52px, 10vw, 72px) + env(safe-area-inset-top)) - 24px) !important;
                z-index: 90 !important;
                margin: 0 !important;
                margin-top: 0 !important;
                margin-bottom: 0 !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                padding: 0 !important;
                padding-top: 0 !important;
                padding-bottom: 0 !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
                transform-origin: 50% 0% !important;
                transform: translate3d(0, 0, 0) !important;
                will-change: auto !important;
                overflow: hidden !important;
                isolation: auto;
                box-sizing: border-box !important;
                border-top: 0 !important;
                border-top-left-radius: 0 !important;
                border-top-right-radius: 0 !important;
                border-bottom-left-radius: var(--ocn-radius-md) !important;
                border-bottom-right-radius: var(--ocn-radius-md) !important;
                border: 1px solid color-mix(in srgb, var(--ocn-blue, #1d4e89) 8%, rgba(255,255,255,0.92)) !important;
                border-top: 0 !important;
                box-shadow: 0 14px 40px -16px rgba(0, 35, 75, 0.22);
        }

        /* ────────────────────────────────────────────────────────
           3. ANIMATION FINALE — "the header grows downward" (§2)
           ────────────────────────────────────────────────────────
              A. Shell grow: max-height 0 → full; scaleY 0.985
                 → 1.002 → 1.  Duration 430 ms target (380–500 ms
                 spec). Easing `cubic-bezier(.2,.84,.2,1)` — calm,
                 premium, negligible micro-overshoot at the end so
                 the dropdown feels settled, not "bouncy".
              B. Items stagger: 42 ms step per spec §5 35–55 ms.
                 Base delay 60 ms → items 1→6 delays 60/102/144/
                 186/228/270 ms. Translation 2 px → 0, opacity 0→1.
                 Not demonstrative; panel feels like it unfolds.
              C. `prefers-reduced-motion`: bounce cancels, stagger
                 delays 0, transitions none, final frame instant. */
        @media (prefers-reduced-motion: no-preference) {
                .ocn-site-header .wp-block-navigation__responsive-container.is-menu-open {
                        animation: ocn-dropdown-grow 620ms cubic-bezier(0.2, 0.84, 0.2, 1) both;
                }
                .ocn-site-header
                        .wp-block-navigation__responsive-container.is-menu-open
                        .wp-block-navigation__responsive-container-content {
                        animation: ocn-dropdown-slide-down 620ms cubic-bezier(0.2, 0.84, 0.2, 1) both;
                }
                .ocn-site-header .wp-block-navigation__responsive-container.is-menu-open.is-menu-closing {
                        animation: ocn-dropdown-close 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
                        pointer-events: none;
                }
                .ocn-site-header .wp-block-navigation__responsive-container.is-menu-open.is-menu-closing
                        .wp-block-navigation__responsive-container-content {
                        animation: ocn-dropdown-content-out 280ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
                }
        }
        @keyframes ocn-dropdown-close {
                from { opacity: 1; scale: 1 1; }
                to { opacity: 0; scale: 1 0.94; }
        }
        @keyframes ocn-dropdown-content-out {
                from { opacity: 1; transform: translateY(0); }
                to { opacity: 0; transform: translateY(-8px); }
        }
        @keyframes ocn-dropdown-grow {
                0% {
                        opacity: 0;
                        max-height: 0;
                }
                62% {
                        opacity: 1;
                        max-height: calc(100svh - (clamp(52px, 10vw, 72px) + env(safe-area-inset-top)) - 24px);
                }
                100% {
                        opacity: 1;
                        max-height: calc(100svh - (clamp(52px, 10vw, 72px) + env(safe-area-inset-top)) - 24px);
                }
        }
        @keyframes ocn-dropdown-slide-down {
                0% {
                        opacity: 0;
                        transform: translateY(-14px);
                }
                62% {
                        opacity: 1;
                        transform: translateY(1px);
                }
                100% {
                        opacity: 1;
                        transform: translateY(0);
                }
        }

        /* MOBILE MAIN NAV ITEMS — centered, with full-width touch targets. */
        .ocn-site-header
                .wp-block-navigation__responsive-container
                .wp-block-navigation__responsive-container-content
                > .wp-block-navigation
                > .wp-block-navigation__container {
                justify-content: center;
        }
        .ocn-site-header
                .wp-block-navigation__responsive-container
                .wp-block-navigation__responsive-container-content
                > .wp-block-navigation
                > .wp-block-navigation__container
                > .wp-block-navigation-item {
                width: 100%;
                justify-content: center;
                text-align: center;
        }
        .ocn-site-header
                .wp-block-navigation__responsive-container
                .wp-block-navigation__responsive-container-content
                > .wp-block-navigation
                > .wp-block-navigation__container
                > .wp-block-navigation-item
                > .wp-block-navigation-item__content,
        .ocn-site-header
                .wp-block-navigation__responsive-container
                .wp-block-navigation__responsive-container-content
                > .wp-block-navigation
                > .wp-block-navigation__container
                > .wp-block-navigation-item
                > a {
                justify-content: center;
                text-align: center;
                width: 100%;
                min-height: 48px;
                padding-block: 0.7rem;
        }

        /* Top-level stagger on panel opening; submenu visibility is now owned
           separately by Core's aria-expanded toggle below. */
        @media (prefers-reduced-motion: no-preference) {
                .ocn-site-header
                        .wp-block-navigation__responsive-container.is-menu-open
                        .wp-block-navigation__responsive-container-content
                        > .wp-block-navigation
                        > .wp-block-navigation__container
                        > .wp-block-navigation-item {
                        opacity: 0;
                        transform: translateY(-12px);
                        animation: ocn-nav-item-in 520ms cubic-bezier(0.2, 0.84, 0.2, 1) both;
                }
                .ocn-site-header
                        .wp-block-navigation__responsive-container.is-menu-open
                        .wp-block-navigation__responsive-container-content
                        > .wp-block-navigation
                        > .wp-block-navigation__container
                        > .wp-block-navigation-item:nth-child(1) { animation-delay: 90ms; }
                .ocn-site-header
                        .wp-block-navigation__responsive-container.is-menu-open
                        .wp-block-navigation__responsive-container-content
                        > .wp-block-navigation
                        > .wp-block-navigation__container
                        > .wp-block-navigation-item:nth-child(2) { animation-delay: 132ms; }
                .ocn-site-header
                        .wp-block-navigation__responsive-container.is-menu-open
                        .wp-block-navigation__responsive-container-content
                        > .wp-block-navigation
                        > .wp-block-navigation__container
                        > .wp-block-navigation-item:nth-child(3) { animation-delay: 174ms; }
                .ocn-site-header
                        .wp-block-navigation__responsive-container.is-menu-open
                        .wp-block-navigation__responsive-container-content
                        > .wp-block-navigation
                        > .wp-block-navigation__container
                        > .wp-block-navigation-item:nth-child(4) { animation-delay: 216ms; }
                .ocn-site-header
                        .wp-block-navigation__responsive-container.is-menu-open
                        .wp-block-navigation__responsive-container-content
                        > .wp-block-navigation
                        > .wp-block-navigation__container
                        > .wp-block-navigation-item:nth-child(5) { animation-delay: 258ms; }
                .ocn-site-header
                        .wp-block-navigation__responsive-container.is-menu-open
                        .wp-block-navigation__responsive-container-content
                        > .wp-block-navigation
                        > .wp-block-navigation__container
                        > .wp-block-navigation-item:nth-child(6) { animation-delay: 300ms; }
                .ocn-site-header
                        .wp-block-navigation__responsive-container.is-menu-open
                        .wp-block-navigation__responsive-container-content
                        > .wp-block-navigation
                        > .wp-block-navigation__container
                        > .wp-block-navigation-item:nth-child(n+7) { animation-delay: 342ms; }

                /* Existing child stagger remains decorative and cannot open
                   a closed accordion; the toggle controls visibility. */
                .ocn-site-header
                        .wp-block-navigation__responsive-container.is-menu-open
                        .wp-block-navigation__responsive-container-content
                        > .wp-block-navigation
                        > .wp-block-navigation__container
                        > .wp-block-navigation-submenu:nth-child(3)
                        ul.wp-block-navigation__submenu-container
                        > .wp-block-navigation-item {
                        animation: ocn-nav-item-in 520ms cubic-bezier(0.2, 0.84, 0.2, 1) both;
                }
                .ocn-site-header
                        .wp-block-navigation__responsive-container.is-menu-open
                        .wp-block-navigation__responsive-container-content
                        > .wp-block-navigation
                        > .wp-block-navigation__container
                        > .wp-block-navigation-submenu:nth-child(3)
                        ul.wp-block-navigation__submenu-container
                        > .wp-block-navigation-item:nth-child(1) { animation-delay: 216ms; }
                .ocn-site-header
                        .wp-block-navigation__responsive-container.is-menu-open
                        .wp-block-navigation__responsive-container-content
                        > .wp-block-navigation
                        > .wp-block-navigation__container
                        > .wp-block-navigation-submenu:nth-child(3)
                        ul.wp-block-navigation__submenu-container
                        > .wp-block-navigation-item:nth-child(2) { animation-delay: 254ms; }
                .ocn-site-header
                        .wp-block-navigation__responsive-container.is-menu-open
                        .wp-block-navigation__responsive-container-content
                        > .wp-block-navigation
                        > .wp-block-navigation__container
                        > .wp-block-navigation-submenu:nth-child(3)
                        ul.wp-block-navigation__submenu-container
                        > .wp-block-navigation-item:nth-child(3) { animation-delay: 292ms; }
                .ocn-site-header
                        .wp-block-navigation__responsive-container.is-menu-open
                        .wp-block-navigation__responsive-container-content
                        > .wp-block-navigation
                        > .wp-block-navigation__container
                        > .wp-block-navigation-submenu:nth-child(3)
                        ul.wp-block-navigation__submenu-container
                        > .wp-block-navigation-item:nth-child(4) { animation-delay: 330ms; }
                .ocn-site-header
                        .wp-block-navigation__responsive-container.is-menu-open
                        .wp-block-navigation__responsive-container-content
                        > .wp-block-navigation
                        > .wp-block-navigation__container
                        > .wp-block-navigation-submenu:nth-child(3)
                        ul.wp-block-navigation__submenu-container
                        > .wp-block-navigation-item:nth-child(5) { animation-delay: 368ms; }
                .ocn-site-header
                        .wp-block-navigation__responsive-container.is-menu-open
                        .wp-block-navigation__responsive-container-content
                        > .wp-block-navigation
                        > .wp-block-navigation__container
                        > .wp-block-navigation-submenu:nth-child(3)
                        ul.wp-block-navigation__submenu-container
                        > .wp-block-navigation-item:nth-child(6) { animation-delay: 406ms; }
                .ocn-site-header
                        .wp-block-navigation__responsive-container.is-menu-open
                        .wp-block-navigation__responsive-container-content
                        > .wp-block-navigation
                        > .wp-block-navigation__container
                        > .wp-block-navigation-submenu:nth-child(4)
                        ul.wp-block-navigation__submenu-container
                        > .wp-block-navigation-item {
                        animation: ocn-nav-item-in 520ms cubic-bezier(0.2, 0.84, 0.2, 1) both;
                }
                .ocn-site-header
                        .wp-block-navigation__responsive-container.is-menu-open
                        .wp-block-navigation__responsive-container-content
                        > .wp-block-navigation
                        > .wp-block-navigation__container
                        > .wp-block-navigation-submenu:nth-child(4)
                        ul.wp-block-navigation__submenu-container
                        > .wp-block-navigation-item:nth-child(1) { animation-delay: 258ms; }
                .ocn-site-header
                        .wp-block-navigation__responsive-container.is-menu-open
                        .wp-block-navigation__responsive-container-content
                        > .wp-block-navigation
                        > .wp-block-navigation__container
                        > .wp-block-navigation-submenu:nth-child(4)
                        ul.wp-block-navigation__submenu-container
                        > .wp-block-navigation-item:nth-child(2) { animation-delay: 296ms; }
                .ocn-site-header
                        .wp-block-navigation__responsive-container.is-menu-open
                        .wp-block-navigation__responsive-container-content
                        > .wp-block-navigation
                        > .wp-block-navigation__container
                        > .wp-block-navigation-submenu:nth-child(4)
                        ul.wp-block-navigation__submenu-container
                        > .wp-block-navigation-item:nth-child(3) { animation-delay: 334ms; }
                .ocn-site-header
                        .wp-block-navigation__responsive-container.is-menu-open
                        .wp-block-navigation__responsive-container-content
                        > .wp-block-navigation
                        > .wp-block-navigation__container
                        > .wp-block-navigation-submenu:nth-child(4)
                        ul.wp-block-navigation__submenu-container
                        > .wp-block-navigation-item:nth-child(4) { animation-delay: 372ms; }
                .ocn-site-header
                        .wp-block-navigation__responsive-container.is-menu-open
                        .wp-block-navigation__responsive-container-content
                        > .wp-block-navigation
                        > .wp-block-navigation__container
                        > .wp-block-navigation-submenu:nth-child(4)
                        ul.wp-block-navigation__submenu-container
                        > .wp-block-navigation-item:nth-child(5) { animation-delay: 410ms; }
                .ocn-site-header
                        .wp-block-navigation__responsive-container.is-menu-open
                        .wp-block-navigation__responsive-container-content
                        > .wp-block-navigation
                        > .wp-block-navigation__container
                        > .wp-block-navigation-submenu:nth-child(4)
                        ul.wp-block-navigation__submenu-container
                        > .wp-block-navigation-item:nth-child(6) { animation-delay: 448ms; }
        }
        }
        @keyframes ocn-nav-item-in {
                from {
                        opacity: 0;
                        transform: translateY(10px);
                }
                to {
                        opacity: 1;
                        transform: translateY(0);
                }
        }

        /* ────────────────────────────────────────────────────────
           4. Inner scroll — inherits 100% of shell box (§3 FIX)
           ──────────────────────────────────────────────────────── */
        .ocn-site-header .wp-block-navigation__responsive-container.is-menu-open
                .wp-block-navigation__responsive-container-content {
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
                /* The animated outer shell has max-height but no definite
                   height, so percentages cannot constrain scrolling here. */
                max-height: calc(100svh - (clamp(52px, 10vw, 72px) + env(safe-area-inset-top)) - 26px) !important;
                height: auto;
                min-height: 0;
                box-sizing: border-box;
                /* Compact panel padding */
                padding-top: clamp(0.65rem, 2vw, 0.85rem) !important;
                padding-bottom: calc(clamp(0.95rem, 2.6vw, 1.2rem) + env(safe-area-inset-bottom)) !important;
                padding-inline: var(--awp-page-gutter) !important;
                scroll-padding-block-end: 32px;
        }

/* §1 REGRESSION FIX — explicit MOBILE-ONLY (≤ 782 px) wrapper for L1104–L1331.
   Prevents scope leak to desktop ≥ 783 px. Nested @media (max-width: 782px)
   inside the existing parent wrapper of same scope is valid CSS (logical AND
   of identical conditions = same constraint; guarantees isolation even if
   outer @media closed prematurely). */
@media (max-width: 782px) {

        .ocn-site-header .wp-block-navigation__responsive-container.is-menu-open
                .wp-block-navigation__responsive-container-content {
                display: flex !important;
                flex-direction: column !important;
                align-items: stretch !important;
                justify-content: flex-start !important;
                width: 100% !important;
                min-width: 100% !important;
                max-width: 100% !important;
                grid-template-columns: 1fr !important;
                grid: none !important;
                columns: 1 !important;
                gap: 0 !important;
                margin: 0 !important;
                float: none !important;
                position: static !important;
                inset: auto !important;
                left: auto !important;
                right: auto !important;
        }

        /* Descendants only: lock layout + kill rogue Gutenberg inline transforms
           BUT deliberately EXCLUDE the content surface so ocn-dropdown-slide-down
           keyframe can animate its translateY (glide vers le bas). */
        .ocn-site-header .wp-block-navigation__responsive-container-content > *,
        .ocn-site-header .wp-block-navigation__responsive-container .wp-block-navigation,
        .ocn-site-header .wp-block-navigation__responsive-container .wp-block-navigation > .wp-block-navigation__container {
                display: flex !important;
                flex-direction: column !important;
                align-items: stretch !important;
                justify-content: flex-start !important;
                width: 100% !important;
                min-width: 100% !important;
                max-width: 100% !important;
                grid-template-columns: 1fr !important;
                grid: none !important;
                columns: 1 !important;
                gap: 0 !important;
                margin: 0 !important;
                float: none !important;
                position: static !important;
                inset: auto !important;
                left: auto !important;
                right: auto !important;
                transform: none !important;
        }

        /* Hide inner "duplicate" open button — Core sometimes renders it */
        .ocn-site-header .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-open,
        .ocn-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-open,
        .wp-block-navigation-overlay .wp-block-navigation-overlay-open {
                display: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
        }

        /* Desktop inline container — hidden under mobile breakpoint */
        .ocn-site-header .wp-block-navigation:not(.wp-block-navigation__responsive-container .wp-block-navigation) > .wp-block-navigation__container {
                display: none !important;
        }

        /* ────────────────────────────────────────────────────────
           5. Nav items — compact, left-aligned, single dividers
           ────────────────────────────────────────────────────────
           Padding reduced from 0.95rem → 0.78rem for tighter vertical
           feel; keeps WCAG 44px vertical hit area via min-height. */
        .ocn-site-header .wp-block-navigation__responsive-container .wp-block-navigation-item,
        .ocn-site-header .wp-block-navigation__responsive-container .wp-block-navigation__container .wp-block-navigation-item {
                display: block !important;
                width: 100% !important;
                min-width: 0 !important;
                max-width: 100% !important;
                grid-template-columns: 1fr !important;
                grid: none !important;
                columns: 1 !important;
                float: none !important;
                position: static !important;
                margin: 0 !important;
                padding: 0 !important;
                transform: none !important;
                border-bottom: 1px solid color-mix(in srgb, var(--ocn-night) 6%, transparent);
        }

        .ocn-site-header .wp-block-navigation__responsive-container .wp-block-navigation-item:last-child {
                border-bottom: 0;
        }

        /* Top-level label + toggle — left-aligned row */
        .ocn-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
                width: 100%;
                max-width: 100%;
                margin: 0;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                flex-wrap: wrap;
        }

        /* Keep the full-width centered parent label; Core's accessible toggle
           occupies the same row, while its children take the next row. */
        .ocn-site-header .wp-block-navigation__responsive-container.is-menu-open
                .wp-block-navigation__container > .wp-block-navigation-item.has-child {
                display: grid !important;
                grid-template-columns: minmax(0, 1fr) auto !important;
                align-items: center;
        }
        .ocn-site-header .wp-block-navigation__responsive-container.is-menu-open
                .wp-block-navigation__container > .wp-block-navigation-item.has-child
                > .wp-block-navigation-item__content {
                grid-column: 1 / -1;
                grid-row: 1;
        }
        .ocn-site-header .wp-block-navigation__responsive-container.is-menu-open
                .wp-block-navigation__container > .wp-block-navigation-item.has-child
                > .wp-block-navigation-submenu__toggle {
                grid-column: 2;
                grid-row: 1;
                z-index: 2;
                margin-inline-end: 0.25rem;
        }

        .ocn-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content,
        .ocn-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item a {
                font-size: 1.02rem;
                font-weight: 500;
                line-height: 1.38;
                letter-spacing: -0.005em;
                color: var(--ocn-night);
                padding: 1rem 0.25rem;
                text-align: center !important;
                box-sizing: border-box;
                border-radius: 0;
                background: transparent;
                text-decoration: none;
                display: flex !important;
                align-items: center;
                justify-content: center !important;
                gap: 0.7rem;
                border: none;
                flex: 1 1 100% !important;
                width: 100% !important;
                max-width: 100% !important;
                min-height: 44px;
        }

        @media (prefers-reduced-motion: no-preference) {
                .ocn-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content,
                .ocn-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item a {
                        transition:
                                color 200ms cubic-bezier(0.16, 1, 0.3, 1),
                                background-color 200ms cubic-bezier(0.16, 1, 0.3, 1),
                                padding 220ms ease,
                                opacity 220ms ease,
                                transform 220ms ease;
                }
        }

        .ocn-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:hover,
        .ocn-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:focus-visible,
        .ocn-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
                color: var(--ocn-night);
                background: transparent;
                outline: none;
        }

        /* ────────────────────────────────────────────────────────
           6. Submenu toggle + children — compact accordion
           ──────────────────────────────────────────────────────── */
        .ocn-site-header .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu__toggle {
                padding: 0.2rem 0.5rem;
                margin-left: 0.25rem;
                color: var(--ocn-night);
                background: transparent;
                border: none;
                border-radius: var(--ocn-radius-sm);
                min-width: 40px;
                min-height: 40px;
                display: inline-flex !important; /* Core hides overlay toggles by default. */
                align-items: center;
                justify-content: center;
                cursor: pointer;
                flex: 0 0 auto;
                order: 2;
        }
        @media (prefers-reduced-motion: no-preference) {
                .ocn-site-header .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu__toggle,
                .ocn-site-header .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu__toggle svg {
                        transition:
                                transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
                                color 200ms cubic-bezier(0.16, 1, 0.3, 1),
                                background-color 200ms cubic-bezier(0.16, 1, 0.3, 1);
                }
        }
        .ocn-site-header .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu__toggle:hover,
        .ocn-site-header .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu__toggle:focus-visible {
                color: var(--ocn-blue);
                background: var(--ocn-mist);
                outline: none;
        }
        .ocn-site-header .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu__toggle[data-ocn-accordion-open="true"] svg {
                transform: rotate(180deg);
                color: var(--ocn-blue);
        }

        /* Submenu children — the existing Core button is reused as the
           mobile accordion control; the child bridge owns its mobile state. */
        .ocn-site-header.ocn-site-header.ocn-site-header
                .wp-block-navigation.wp-block-navigation
                .wp-block-navigation__responsive-container.is-menu-open
                .wp-block-navigation__responsive-container-content
                ul.wp-block-navigation__submenu-container {
                background: rgb(255 255 255 / var(--ocn-glass-alpha)) !important;
                background-color: rgb(255 255 255 / var(--ocn-glass-alpha)) !important;
                -webkit-backdrop-filter: blur(var(--ocn-glass-blur)) saturate(150%) !important;
                backdrop-filter: blur(var(--ocn-glass-blur)) saturate(150%) !important;
                isolation: auto !important;
                border-radius: 0.85rem;
                padding-block: 0.35rem;
                box-shadow: 0 8px 26px -14px rgb(23 43 61 / 0.22);
        }
        .ocn-site-header.ocn-site-header.ocn-site-header
                .wp-block-navigation.wp-block-navigation
                .wp-block-navigation__responsive-container.is-menu-open
                .wp-block-navigation__responsive-container-content
                ul.wp-block-navigation__submenu-container {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                justify-content: flex-start;
                gap: 0;
                margin: 0;
                padding-inline-start: var(--wp--preset--spacing--30);
                padding-block: 0;
                list-style: none;
                width: 100%;
                max-width: 100%;
                min-width: 0;
                border: 1px solid color-mix(in srgb, var(--ocn-blue, #1d4e89) 7%, rgba(255,255,255,0.9));
                border-width: 0;
                box-sizing: border-box;
                grid-column: 1 / -1;
                grid-row: 2;
                position: static;
                max-height: 0;
                overflow: hidden;
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
        }
        @media (prefers-reduced-motion: no-preference) {
                .ocn-site-header .wp-block-navigation__responsive-container.is-menu-open
                        .wp-block-navigation__responsive-container-content ul.wp-block-navigation__submenu-container {
                        transition: max-height 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
                                opacity 240ms ease,
                                padding-block 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
                                visibility 0s linear 320ms;
                }
        }
        .ocn-site-header.ocn-site-header.ocn-site-header
                .wp-block-navigation.wp-block-navigation
                .wp-block-navigation__responsive-container.is-menu-open
                .wp-block-navigation__responsive-container-content
                .wp-block-navigation-item.has-child:has(> .wp-block-navigation-submenu__toggle[data-ocn-accordion-open="true"])
                > ul.wp-block-navigation__submenu-container {
                max-height: 28rem;
                padding-block: 0.35rem;
                border-width: 1px;
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
                transition-delay: 0s;
        }
        .ocn-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item {
                width: 100%;
                justify-content: flex-start;
                border-bottom: 1px solid color-mix(in srgb, var(--ocn-night) 4%, transparent);
        }
        .ocn-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content,
        .ocn-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__submenu-container .wp-block-navigation-item a {
                font-size: 0.94rem;
                font-weight: 400;
                line-height: 1.38;
                letter-spacing: -0.002em;
                color: var(--ocn-slate) !important;
                padding: 0.68rem 0.25rem;
                text-align: left !important;
                justify-content: flex-start !important;
                width: 100%;
                flex: 1 1 auto;
                min-height: 40px;
        }
        /* Icon markup stays intact for desktop; mobile child rows are text-only. */
        .ocn-site-header .wp-block-navigation__responsive-container.is-menu-open
                ul.wp-block-navigation__submenu-container .awp-nav-icon {
                display: none !important;
        }
        .ocn-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
        .ocn-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible,
        .ocn-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
                color: var(--ocn-slate) !important;
        }

        /* Reduced motion — blanket cancel on animations/stagger/bounce */
        @media (prefers-reduced-motion: reduce) {
                .ocn-site-header .wp-block-navigation__responsive-container,
                .ocn-site-header .wp-block-navigation__responsive-container *,
                .ocn-site-header .wp-block-navigation__responsive-container-content *,
                .ocn-site-header .wp-block-navigation-submenu__toggle,
                .ocn-site-header .wp-block-navigation-submenu__toggle svg,
                .ocn-site-header .wp-block-navigation__responsive-container-content
                        > .wp-block-navigation
                        > .wp-block-navigation__container
                        > .wp-block-navigation-item {
                        animation: none !important;
                        animation-delay: 0ms !important;
                        transition: none !important;
                        transform: none !important;
                        opacity: 1 !important;
                        max-height: none !important;
                }
                .ocn-site-header .wp-block-navigation__responsive-container.is-menu-open
                        .wp-block-navigation__responsive-container-content ul.wp-block-navigation__submenu-container {
                        max-height: 0 !important;
                }
                .ocn-site-header .wp-block-navigation__responsive-container.is-menu-open
                        .wp-block-navigation-item.has-child:has(> .wp-block-navigation-submenu__toggle[data-ocn-accordion-open="true"])
                        > ul.wp-block-navigation__submenu-container {
                        max-height: none !important;
                }
        }
} /* /end §1 MOBILE-ONLY explicit wrapper — rules L1104–L1331 scoped ≤ 782 px */


/* OCN submenu icon tuning — explicit values for the Navigation-owned
 * --awp-nav-submenu-icon-* tokens (geometry + stroke, dropdown scope only).
 * Canonical defaults live on .awp-nav in the principal plugin's navigation
 * frontend.css; this block pins OCN's chosen values in one findable place.
 * Container colors, hover/active states and every other icon usage
 * (cards, buttons, top-level links) are untouched — see the scoped
 * .wp-block-navigation__submenu-container .awp-nav-icon rules above/below. */
.ocn-primary-navigation,
.ocn-site-header {
        --awp-nav-submenu-icon-box-size: 40px;
        --awp-nav-submenu-icon-size: 19px;
        --awp-nav-submenu-icon-stroke: 1.5;
        --awp-nav-submenu-icon-radius: 9px;
}

.awp-nav-icon__placeholder {
        display: none;
}

/* Icon + label row layout — shared desktop submenu AND mobile submenu. */
.ocn-primary-navigation .wp-block-navigation__submenu-container > li > .wp-block-navigation-item__content,
.ocn-site-header .wp-block-navigation .wp-block-navigation__submenu-container > li > .wp-block-navigation-item__content {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0.9rem !important;
        width: 100% !important;
}

.ocn-header-cta {
        justify-self: end;
}

.ocn-button {
        transform: none !important;
}

:where(
        .ocn-primary-navigation .wp-block-navigation-item__content,
        .ocn-primary-navigation .wp-block-navigation-submenu__toggle,
        .ocn-site-header .wp-block-navigation .wp-block-navigation-item__content,
        .ocn-site-header .wp-block-navigation .wp-block-navigation-submenu__toggle,
        .ocn-editorial-index a,
        .ocn-expertise-entry a
):focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgb(8 127 245 / 0.18);
        border-radius: var(--ocn-radius-sm);
}

/* ===== Footer ===== */
.ocn-site-footer {
        background: var(--wp--preset--color--contrast);
        color: rgb(255 255 255 / 0.8);
}

.ocn-site-footer .awp-site-footer__inner {
        display: grid;
        grid-template-columns: minmax(12rem, 1.2fr) repeat(2, minmax(10rem, 1fr)) minmax(12rem, 1.05fr);
        gap: var(--wp--preset--spacing--50);
        align-items: start;
}

.ocn-site-footer__identity,
.ocn-site-footer__specialties,
.ocn-site-footer__team,
.ocn-site-footer__cta {
        display: grid;
        gap: var(--wp--preset--spacing--20);
        align-content: start;
}

.ocn-site-footer__title {
        margin: 0;
        color: var(--ocn-white);
        font-size: clamp(1.05rem, 0.98rem + 0.2vw, 1.18rem);
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.1;
}

.ocn-site-footer__address,
.ocn-site-footer__meta {
        margin: 0;
        color: rgb(255 255 255 / 0.72);
        line-height: 1.7;
}

.ocn-site-footer__label {
        margin: 0;
        color: var(--ocn-white);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        opacity: 0.72;
}

.ocn-site-footer a {
        color: rgb(255 255 255 / 0.78);
}

.ocn-site-footer a:hover,
.ocn-site-footer a:focus-visible {
        color: var(--ocn-white);
}

.ocn-site-footer__bottom {
        width: 100%;
        align-items: center;
        row-gap: 0.75rem;
        column-gap: var(--wp--preset--spacing--40);
}

.ocn-site-footer__identity .wp-block-image { margin: 0; }
.ocn-site-footer { --awp-footer-logo-width: 10rem; }
.ocn-site-footer .ocn-site-footer__identity { justify-items: start; text-align: left; }
.ocn-site-footer .ocn-site-footer__label { color: var(--ocn-white); opacity: 0.8; }
.ocn-site-footer :is(.ocn-site-footer__address, .ocn-site-footer__meta) { color: rgb(255 255 255 / 0.72); opacity: 1; }
.ocn-site-footer__identity .wp-block-image img {
        display: block;
        width: 10rem !important;
        height: auto !important;
        object-fit: contain;
}
.ocn-footer-dynamic-links .wp-block-post-template { margin: 0; }
.ocn-footer-dynamic-links .wp-block-post-title { margin: 0 0 0.65rem; font-weight: 500; line-height: 1.4; }
.ocn-footer-dynamic-links .wp-block-post-title a { text-decoration: none; }
.ocn-site-footer__cta .wp-block-buttons { margin-block: 0.5rem; }
.ocn-site-footer__bottom { margin-block-start: var(--wp--preset--spacing--50); }
.ocn-site-footer .awp-footer-legal-links a { text-underline-offset: 0.2em; }

.awp-footer-legal-links .wp-block-navigation__container {
        display: flex;
        flex-wrap: wrap;
        gap: var(--wp--preset--spacing--30);
        align-items: center;
        justify-content: flex-end;
}

.awp-footer-legal-links .wp-block-navigation-item__label {
        font-size: 0.85rem;
        line-height: 1.4;
}

@media (max-width: 1023px) {
        .ocn-site-footer .awp-site-footer__inner {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: var(--wp--preset--spacing--40);
        }
}

/* ──────────────────────────────────────────────────────────────
   Footer mobile (≤ 782 px)
   Single column, ALL content centered.
   Breakpoint harmonized with canonical Atomic nav breakpoint (782).
   ────────────────────────────────────────────────────────────── */
@media (max-width: 782px) {
        .ocn-site-footer .awp-site-footer__inner {
                grid-template-columns: 1fr;
                gap: var(--wp--preset--spacing--40);
        }

        /* Every column block: center internal items + inline content. */
        .ocn-site-footer .ocn-site-footer__identity,
        .ocn-site-footer .ocn-site-footer__specialties,
        .ocn-site-footer .ocn-site-footer__team,
        .ocn-site-footer .ocn-site-footer__cta {
                justify-items: center;
                text-align: center;
        }

        /* Logo footer — center + size reduction for mobile.
           Root cause analysis (why logo was too large / left-aligned on mobile):
           — HTML inline:  <img style="width:160px;height:auto">
           — Parent Atomic: `--awp-footer-logo-width: 9rem` (default),
                             `object-position: left center`
           — OCN override:   `--awp-footer-logo-width: 10rem` +
                             `width: 10rem !important` (scoped desktop+mobile)
           Result on mobile: 10rem ≈ 160px — inherited without a mobile token.
           Fix: explicit mobile token + center the object-position. */
        .ocn-site-footer {
                --awp-footer-logo-width-mobile: 8.5rem;
        }
        .ocn-site-footer .ocn-site-footer__identity .wp-block-image img {
                width: min(100%, var(--awp-footer-logo-width-mobile)) !important;
                max-width: var(--awp-footer-logo-width-mobile);
                object-position: center;
                margin-inline: auto;
        }

        /* Lists (specialties, team query loop titles) */
        .ocn-site-footer .ocn-footer-dynamic-links .wp-block-post-title {
                text-align: center;
        }

        /* Bottom bar — vertical stack, fully centered */
        .ocn-site-footer__bottom {
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                row-gap: 1rem;
        }

        /* Legal links nav — center */
        .awp-footer-legal-links .wp-block-navigation__container {
                justify-content: center;
                gap: 0.5rem 1rem;
                text-align: center;
        }
}

.ocn-home,
.ocn-page,
.ocn-practitioner-profile {
        display: grid;
        gap: 0;
}

/* ===== OCN Editorial Eyebrow =====
   One reusable site-level primitive for section labels. The line is
   presentation only; the paragraph remains ordinary Gutenberg content. */
.ocn-eyebrow,
.ocn-home__eyebrow,
.ocn-home__kicker,
.ocn-page__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
        width: fit-content;
        color: var(--wp--preset--color--muted, #6d7c8c);
}

.ocn-eyebrow::before,
.ocn-home__eyebrow::before,
.ocn-home__kicker::before,
.ocn-page__eyebrow::before {
        content: "";
        display: block;
        width: clamp(2.25rem, 5vw, 4rem);
        height: 1px;
        flex: 0 0 auto;
        background: currentColor;
        opacity: 0.55;
}

/* ===== Canonical OCN Hero =====
   Background/media/overlay/motion/shapes are owned by Atomic WP.
   Width is owned by Gutenberg: outer alignfull + constrained, inner alignwide.
   OCN CSS owns only brand presentation and copy measure.
   Legacy .ocn-specialites-hero* selectors remain temporary aliases. */
.ocn-section--night .ocn-eyebrow,
.ocn-section--night .ocn-home__eyebrow,
.ocn-section--night .ocn-home__kicker,
.ocn-section--night .ocn-page__eyebrow,
.ocn-hero .ocn-page__eyebrow,
.ocn-hero .ocn-eyebrow,
.ocn-specialites-hero .ocn-page__eyebrow {
        color: rgb(255 255 255 / 0.88);
}

.ocn-hero,
.ocn-specialites-hero {
        position: relative;
        isolation: isolate;
        min-height: clamp(34rem, 72svh, 48rem);
        padding-block: clamp(2.5rem, 5vw, 4.25rem);
        overflow: hidden;
}

.ocn-hero__inner,
.ocn-specialites-hero__inner {
        position: relative;
        z-index: 1;
        display: grid;
        align-items: center;
        width: 100%;
        min-height: inherit;
}

.ocn-hero__copy,
.ocn-specialites-hero__copy {
        display: grid;
        gap: var(--wp--preset--spacing--30);
        width: min(100%, 47.5rem);
        color: var(--ocn-white);
}

/* No panel/surface behind hero copy. Contrast is provided by the Atomic
   Background Media overlay configured on the Gutenberg hero block. */
.ocn-hero__copy h1,
.ocn-hero__copy p,
.ocn-specialites-hero__copy h1,
.ocn-specialites-hero__copy p {
        color: inherit;
}

.ocn-hero__copy h1,
.ocn-specialites-hero__copy h1 {
        max-width: 15ch;
        margin: 0;
        text-wrap: balance;
}

.ocn-hero__lede,
.ocn-specialites-hero__lede {
        max-width: 42rem;
        margin: 0;
        color: rgb(255 255 255 / 0.86) !important;
        font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
        line-height: 1.65;
}

.ocn-hero__actions,
.ocn-home__hero-actions {
        gap: 0.9rem;
}

.ocn-home > *,
.ocn-page > *,
.ocn-practitioner-profile > *,
.ocn-team-grid > *,
.ocn-expertise-index > *,
.ocn-center-grid > *,
.ocn-contact-grid > * {
        margin-block-start: 0 !important;
        margin-block-end: 0 !important;
}

.ocn-section,
.ocn-home__section,
.ocn-page-section,
.ocn-practitioner-hero,
.ocn-practitioner-intro,
.ocn-practitioner-expertise,
.ocn-practitioner-links,
.ocn-practitioner-appointment,
.ocn-practitioner-final {
        position: relative;
        isolation: isolate;
        padding-block: var(--ocn-section-padding);
}

/* ===== Layout Vocabulary ===== */
/* ============================================================
   LAYOUT VOCABULAIRE SÉMANTIQUE UNIQUEMENT
   Mécanique réelle de largeur :
   → theme.json (contentSize / wideSize)
   → layout.type: constrained = Core Gutenberg.
   Ces classes = hooks de composition / documentation.
   ELLES NE PORTENT AUCUNE width / max-width.
   ============================================================ */
.ocn-section--contained,
.ocn-section--bleed,
.ocn-section--wide {
        /* Vocabulaire seulement. Utiliser pour documenter le comportement :
           contained = fond + contenu contenus (équivalent au pattern canonique Core.
           bleed = fond full-bleed (outer alignfull) + inner wide/constrained.
           wide = contenu plus large que contenu standard (inner wide).
        */
}
.ocn-section__inner {
        /* Accroche sémantique. La largeur réelle est portée par layout.type: constrained / alignwide. */
}

.ocn-section--white {
        background: linear-gradient(180deg, rgb(255 255 255 / 1) 0%, rgb(255 255 255 / 0.985) 100%);
}

.ocn-section--frost {
        background: linear-gradient(180deg, rgb(248 251 254 / 0.96) 0%, rgb(255 255 255 / 1) 100%);
        box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.85), inset 0 -1px 0 rgb(23 43 61 / 0.035);
}

.ocn-section--mist,
.ocn-section--surface-mist,
.ocn-page-section.ocn-section--mist,
.ocn-page-section.ocn-section--surface-mist,
.ocn-home__section.ocn-section--mist,
.ocn-home__section.ocn-section--surface-mist,
.ocn-practitioner-intro.ocn-section--mist,
.ocn-practitioner-intro.ocn-section--surface-mist,
.ocn-practitioner-links.ocn-section--mist,
.ocn-practitioner-links.ocn-section--surface-mist {
        background: linear-gradient(180deg, rgb(255 255 255 / 0.62) 0%, rgb(234 243 250 / 0.96) 100%);
        box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.82), inset 0 -1px 0 rgb(23 43 61 / 0.04);
}

.ocn-section--night,
.ocn-section--surface-night,
.ocn-page-section.ocn-section--night,
.ocn-page-section.ocn-section--surface-night,
.ocn-home__section.ocn-section--night,
.ocn-home__section.ocn-section--surface-night,
.ocn-practitioner-final.ocn-section--night,
.ocn-practitioner-final.ocn-section--surface-night {
        background: linear-gradient(180deg, rgb(23 43 61 / 0.98) 0%, rgb(18 35 49 / 1) 100%);
        color: rgb(255 255 255 / 0.88);
}

.ocn-section--night :is(h1, h2, h3, h4, h5, h6, p, li, strong, a),
.ocn-section--surface-night :is(h1, h2, h3, h4, h5, h6, p, li, strong, a) {
        color: inherit;
}

.ocn-eyebrow,
.ocn-home__eyebrow,
.ocn-home__kicker,
.ocn-page__eyebrow,
.ocn-practitioner-card__specialty {
        margin: 0;
        color: var(--wp--preset--color--primary);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
}

/* ===== Editorial Vertical Rhythm ===== */
/* ============================================================
   Editorial vertical rhythm — ONE canonical sibling-rule set.
   Applies to flow containers (is-layout-flow, post-content).
   Grid layouts keep their native row-gap for baseline separation;
   inside them we tune only eyebrow→heading / heading→paragraph.
   Eyebrow→heading  : TIGHT   (~ 6-8 px line-height micro-space).
   Heading→lede/p   : CLEAR   (~ 1.00 rem = 16 px; on grid = +8px).
   Paragraph→p      : NORMAL  (~ 0.85 rem = 14 px; on grid = +6px).
   Editorial→struct : LARGER  (~ 1.50 rem for structural transitions).
   Compact panel/component classes carry their own blockGap.
   ============================================================ */
.wp-block-post-content > .ocn-page__eyebrow + .wp-block-heading,
.wp-block-post-content > .ocn-home__eyebrow + .wp-block-heading,
.wp-block-post-content > .ocn-home__kicker + .wp-block-heading,
.wp-block-post-content > .ocn-eyebrow + .wp-block-heading,
.entry-content > .ocn-page__eyebrow + .wp-block-heading,
.entry-content > .ocn-home__eyebrow + .wp-block-heading,
.entry-content > .ocn-home__kicker + .wp-block-heading,
.entry-content > .ocn-eyebrow + .wp-block-heading,
.ocn-page-section__inner > .ocn-page__eyebrow + h1,
.ocn-page-section__inner > .ocn-home__eyebrow + h1,
.ocn-page-section__inner > .ocn-home__kicker + h1,
.ocn-page-section__inner > .ocn-eyebrow + h1,
.ocn-page-section__inner > .ocn-page__eyebrow + h2,
.ocn-page-section__inner > .ocn-home__eyebrow + h2,
.ocn-page-section__inner > .ocn-home__kicker + h2,
.ocn-page-section__inner > .ocn-eyebrow + h2,
.ocn-page-section__inner > .ocn-page__eyebrow + h3,
.ocn-page-section__inner > .ocn-home__eyebrow + h3,
.ocn-page-section__inner > .ocn-home__kicker + h3,
.ocn-page-section__inner > .ocn-eyebrow + h3,
.ocn-page-section__inner > .ocn-page__eyebrow + .wp-block-heading,
.ocn-page-section__inner > .ocn-home__eyebrow + .wp-block-heading,
.ocn-page-section__inner > .ocn-home__kicker + .wp-block-heading,
.ocn-page-section__inner > .ocn-eyebrow + .wp-block-heading,
.ocn-section__inner > .ocn-page__eyebrow + .wp-block-heading,
.ocn-section__inner > .ocn-home__eyebrow + .wp-block-heading,
.ocn-section__inner > .ocn-home__kicker + .wp-block-heading,
.ocn-section__inner > .ocn-eyebrow + .wp-block-heading,
.wp-block-group.is-layout-flow > .ocn-page__eyebrow + h1,
.wp-block-group.is-layout-flow > .ocn-home__eyebrow + h1,
.wp-block-group.is-layout-flow > .ocn-home__kicker + h1,
.wp-block-group.is-layout-flow > .ocn-eyebrow + h1,
.wp-block-group.is-layout-flow > .ocn-page__eyebrow + h2,
.wp-block-group.is-layout-flow > .ocn-home__eyebrow + h2,
.wp-block-group.is-layout-flow > .ocn-home__kicker + h2,
.wp-block-group.is-layout-flow > .ocn-eyebrow + h2,
.wp-block-group.is-layout-flow > .ocn-page__eyebrow + h3,
.wp-block-group.is-layout-flow > .ocn-home__eyebrow + h3,
.wp-block-group.is-layout-flow > .ocn-home__kicker + h3,
.wp-block-group.is-layout-flow > .ocn-eyebrow + h3,
.wp-block-group.is-layout-flow > .ocn-page__eyebrow + .wp-block-heading,
.wp-block-group.is-layout-flow > .ocn-home__eyebrow + .wp-block-heading,
.wp-block-group.is-layout-flow > .ocn-home__kicker + .wp-block-heading,
.wp-block-group.is-layout-flow > .ocn-eyebrow + .wp-block-heading {
	margin-block-start: clamp(0.375rem, 0.7vw, 0.5rem);
}

.wp-block-post-content > h1 + p,
.wp-block-post-content > h2 + p,
.wp-block-post-content > h3 + p,
.wp-block-post-content > h4 + p,
.wp-block-post-content > h5 + p,
.wp-block-post-content > h6 + p,
.wp-block-post-content > h1 + .wp-block-paragraph,
.wp-block-post-content > h2 + .wp-block-paragraph,
.wp-block-post-content > h3 + .wp-block-paragraph,
.wp-block-post-content > .wp-block-heading + p,
.wp-block-post-content > .wp-block-heading + .wp-block-paragraph,
.wp-block-post-content > .wp-block-heading + ul,
.wp-block-post-content > .wp-block-heading + ol,
.entry-content > h1 + p,
.entry-content > h2 + p,
.entry-content > h3 + p,
.entry-content > h4 + p,
.entry-content > .wp-block-heading + p,
.entry-content > .wp-block-heading + .wp-block-paragraph,
.ocn-page-section__inner > h1 + p,
.ocn-page-section__inner > h2 + p,
.ocn-page-section__inner > h3 + p,
.ocn-page-section__inner > .wp-block-heading + p,
.ocn-page-section__inner > .wp-block-heading + .wp-block-paragraph,
.ocn-section__inner > h1 + p,
.ocn-section__inner > h2 + p,
.ocn-section__inner > h3 + p,
.ocn-section__inner > .wp-block-heading + p,
.ocn-section__inner > .wp-block-heading + .wp-block-paragraph,
.wp-block-group.is-layout-flow > h1 + p,
.wp-block-group.is-layout-flow > h2 + p,
.wp-block-group.is-layout-flow > h3 + p,
.wp-block-group.is-layout-flow > h4 + p,
.wp-block-group.is-layout-flow > .wp-block-heading + p,
.wp-block-group.is-layout-flow > .wp-block-heading + .wp-block-paragraph,
.wp-block-group.is-layout-flow > .wp-block-heading + ul,
.wp-block-group.is-layout-flow > .wp-block-heading + ol,
.wp-block-group.is-layout-flow > .wp-block-heading + dl {
	margin-block-start: var(--wp--preset--spacing--40, 1rem);
}

.wp-block-post-content > p + p,
.wp-block-post-content > .wp-block-paragraph + p,
.wp-block-post-content > .wp-block-paragraph + .wp-block-paragraph,
.entry-content > p + p,
.entry-content > .wp-block-paragraph + p,
.entry-content > .wp-block-paragraph + .wp-block-paragraph,
.ocn-page-section__inner > p + p,
.ocn-page-section__inner > .wp-block-paragraph + p,
.ocn-page-section__inner > .wp-block-paragraph + .wp-block-paragraph,
.ocn-section__inner > p + p,
.ocn-section__inner > .wp-block-paragraph + p,
.ocn-section__inner > .wp-block-paragraph + .wp-block-paragraph,
.wp-block-group.is-layout-flow > p + p,
.wp-block-group.is-layout-flow > .wp-block-paragraph + p,
.wp-block-group.is-layout-flow > .wp-block-paragraph + .wp-block-paragraph {
	margin-block-start: var(--wp--preset--spacing--30, 0.85rem);
}

.wp-block-post-content > .wp-block-group + .wp-block-columns,
.wp-block-post-content > .wp-block-group + .wp-block-cover,
.wp-block-post-content > .wp-block-columns + .wp-block-group,
.wp-block-post-content > .wp-block-media-text + .wp-block-group,
.wp-block-post-content > .wp-block-cover + .wp-block-group,
.entry-content > .wp-block-group + .wp-block-columns,
.entry-content > .wp-block-group + .wp-block-cover,
.entry-content > .wp-block-columns + .wp-block-group,
.ocn-page-section.is-layout-flow > * > .wp-block-group + .wp-block-columns,
.ocn-page-section.is-layout-flow > * > .wp-block-group + .wp-block-cover,
.ocn-page-section.is-layout-flow > * > .wp-block-columns + .wp-block-group,
.ocn-section.is-layout-flow > * > .wp-block-group + .wp-block-columns,
.ocn-section.is-layout-flow > * > .wp-block-group + .wp-block-cover,
.ocn-section.is-layout-flow > * > .wp-block-columns + .wp-block-group {
	margin-block-start: var(--wp--preset--spacing--50, 1.5rem);
}

/* Grid-layout editorial containers (hero-copy, page-intro, etc.) already
   provide 16px row-gap. Apply a NEGATIVE offset to reach the same
   editorial contract TIGHT/CLEAR values WITHOUT double-counting the gap.
   These MUST match or exceed the specificity of the FLOW rules above because
   hero-copy carries both .is-layout-flow AND display:grid. */
.ocn-home__hero-copy.wp-block-group > .ocn-home__eyebrow + h1,
.ocn-home__hero-copy.wp-block-group > .ocn-home__kicker + h1,
.ocn-home__hero-copy.wp-block-group > .ocn-home__eyebrow + .wp-block-heading,
.ocn-page-intro.wp-block-group > .ocn-page__eyebrow + h1,
.ocn-page-lede.wp-block-group > .ocn-page__eyebrow + h1,
.ocn-page-section-intro.wp-block-group > .ocn-page__eyebrow + h1,
.ocn-practitioner-intro.wp-block-group > .ocn-page__eyebrow + h1 {
        margin-block-start: calc(clamp(0.375rem, 0.7vw, 0.5rem) - 1rem);
}
.ocn-home__hero-copy.wp-block-group > h1 + p,
.ocn-home__hero-copy.wp-block-group > h1 + .wp-block-paragraph,
.ocn-home__hero-copy.wp-block-group > .wp-block-heading + p,
.ocn-home__hero-copy.wp-block-group > .wp-block-heading + .wp-block-paragraph,
.ocn-page-intro.wp-block-group > h1 + p,
.ocn-page-intro.wp-block-group > .wp-block-heading + p,
.ocn-page-lede.wp-block-group > h1 + p,
.ocn-page-lede.wp-block-group > .wp-block-heading + p,
.ocn-page-section-intro.wp-block-group > h1 + p,
.ocn-page-section-intro.wp-block-group > .wp-block-heading + p,
.ocn-practitioner-intro.wp-block-group > h1 + p,
.ocn-practitioner-intro.wp-block-group > .wp-block-heading + p {
        margin-block-start: 0;
}
.ocn-home__hero-copy.wp-block-group > p + p,
.ocn-home__hero-copy.wp-block-group > .wp-block-paragraph + .wp-block-paragraph,
.ocn-page-intro.wp-block-group > p + p,
.ocn-page-lede.wp-block-group > p + p,
.ocn-page-section-intro.wp-block-group > p + p,
.ocn-practitioner-intro.wp-block-group > p + p {
        margin-block-start: 0;
}

.ocn-section--night .ocn-eyebrow,
.ocn-section--night .ocn-home__eyebrow,
.ocn-section--night .ocn-home__kicker,
.ocn-section--night .ocn-page__eyebrow,
.ocn-section--surface-night .ocn-eyebrow,
.ocn-section--surface-night .ocn-home__eyebrow,
.ocn-section--surface-night .ocn-home__kicker,
.ocn-section--surface-night .ocn-page__eyebrow {
        color: rgb(8 127 245 / 0.95);
}

.ocn-page-section .wp-block-columns,
.ocn-practitioner-hero .wp-block-columns {
        gap: var(--wp--preset--spacing--60);
        align-items: center;
}

/* ===== Practitioner Profile Hero ===== */
/* ------------------------------------------------------------
   Practitioner profile hero
   Ratio image ~37%, texte ~63%.
   Max image width capped 400–420px desktop. Pas de portrait dominateur.
   Traitement photo = traitement cartes (subtil)
   ------------------------------------------------------------ */
.ocn-practitioner-hero .wp-block-column[class*="ocn-practitioner-hero__media"] {
        flex-basis: 37%;
        flex-shrink: 0;
        max-width: min(100%, 26.25rem); /* 420px borne supérieure stricte */
        justify-self: start;
}
.ocn-practitioner-hero .wp-block-column.ocn-practitioner-hero__content {
        flex-basis: 63%;
        min-width: 0;
}
.ocn-practitioner-hero__media {
        margin: 0;
        position: relative;
        line-height: 0;
}
.ocn-practitioner-hero__media figure,
.ocn-practitioner-hero__media .wp-block-image {
        margin: 0;
        border-radius: var(--ocn-radius-md);
        border: 1px solid var(--ocn-border-soft);
        box-shadow: var(--ocn-shadow-card);
        overflow: hidden;
        background: var(--ocn-white);
        line-height: 0;
}
.ocn-practitioner-hero__media img {
        width: 100%;
        height: auto;
        max-height: 32rem; /* 512px */
        object-fit: cover;
        object-position: center 18%;
        display: block;
}

.ocn-home__hero-copy,
.ocn-page-intro,
.ocn-page-lede,
.ocn-page-section > .alignwide > .wp-block-group,
.ocn-practitioner-intro > .wp-block-group,
.ocn-practitioner-expertise > .wp-block-group,
.ocn-practitioner-links > .wp-block-group,
.ocn-practitioner-appointment > .wp-block-group,
.ocn-practitioner-final > .wp-block-group {
        display: grid;
        gap: var(--wp--preset--spacing--40);
}

.ocn-home__hero-copy > * + h1,
.ocn-home__hero-copy > * + h2,
.ocn-page-intro > * + h1,
.ocn-page-intro > * + h2,
.ocn-page-section > .alignwide > .wp-block-group > * + h2,
.ocn-page-section > .alignwide > .wp-block-group > * + h3 {
        margin-top: var(--wp--preset--spacing--10);
}

.ocn-home__hero-copy > h1 + p,
.ocn-home__hero-copy > h2 + p,
.ocn-page-intro > h1 + p,
.ocn-page-intro > h2 + p,
.ocn-page-section > .alignwide > .wp-block-group > h2 + p,
.ocn-page-section > .alignwide > .wp-block-group > h3 + p {
        margin-top: calc(var(--wp--preset--spacing--10) * -1);
}

.ocn-home__hero-copy h1,
.ocn-page-intro h1 {
        margin: 0;
        text-wrap: balance;
}

.ocn-home__hero-copy h1 {
        max-width: 11ch;
}

.ocn-home__hero-copy p,
.ocn-page-intro p,
.ocn-page-lede p,
.ocn-home__intro,
.ocn-contact-note p {
        margin: 0;
        max-width: 42rem;
        color: var(--wp--preset--color--secondary);
        font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem);
        line-height: 1.75;
}

.ocn-page-intro h1,
.ocn-page-section h2,
.ocn-practitioner-hero__content h1 {
        max-width: 24ch;
        text-wrap: balance;
}

.ocn-section--night .ocn-home__hero-copy p,
.ocn-section--night .ocn-page-intro p,
.ocn-section--night .ocn-page-lede p,
.ocn-section--night .ocn-home__intro,
.ocn-section--night .ocn-contact-note p,
.ocn-section--surface-night .ocn-home__hero-copy p,
.ocn-section--surface-night .ocn-page-intro p,
.ocn-section--surface-night .ocn-page-lede p,
.ocn-section--surface-night .ocn-home__intro,
.ocn-section--surface-night .ocn-contact-note p {
        color: rgb(255 255 255 / 0.8);
}

.ocn-home__hero-actions,
.ocn-page-links,
.ocn-page-cta,
.ocn-practitioner-card__actions {
        gap: 0.9rem;
}

.ocn-page-links,
.ocn-page-cta {
        display: grid;
        align-content: start;
}

.ocn-page-links::before {
        content: "";
        width: clamp(4rem, 9vw, 6.25rem);
        height: 1px;
        background: linear-gradient(90deg, var(--ocn-accent-line) 0%, transparent 100%);
}

.ocn-section--night .ocn-page-links::before,
.ocn-section--surface-night .ocn-page-links::before {
        background: linear-gradient(90deg, rgb(8 127 245 / 0.88) 0%, transparent 100%);
}

/* CTA kicker copy may also carry the editorial eyebrow line; suppress it
   only inside the page-end CTA, leaving section eyebrows elsewhere intact. */
.ocn-page-cta :is(.ocn-eyebrow, .ocn-home__eyebrow, .ocn-home__kicker, .ocn-page__eyebrow)::before {
        content: none;
}

.ocn-image-placeholder {
        display: grid;
        align-content: end;
        gap: 0.5rem;
        min-height: 24rem;
        padding: var(--wp--preset--spacing--40);
        border: 1px solid var(--ocn-border-soft);
        background: linear-gradient(160deg, rgb(255 255 255 / 0.88) 0%, rgb(234 243 250 / 0.96) 100%);
        border-radius: var(--ocn-radius-md);
        box-shadow: var(--ocn-shadow-soft);
}

.ocn-image-placeholder--hero,
.ocn-split-feature__media .ocn-image-placeholder {
        position: relative;
        min-height: clamp(24rem, 42vw, 34rem);
        padding: clamp(1.5rem, 3vw, 2rem);
        overflow: hidden;
}

.ocn-image-placeholder--hero::before,
.ocn-split-feature__media .ocn-image-placeholder::before {
        content: "";
        position: absolute;
        inset: 1rem auto auto 1rem;
        width: 2.6rem;
        height: 2.6rem;
        border-top: 1px solid rgb(8 127 245 / 0.28);
        border-left: 1px solid rgb(8 127 245 / 0.28);
        pointer-events: none;
}

.ocn-image-placeholder--hero::after,
.ocn-split-feature__media .ocn-image-placeholder::after {
        content: "";
        position: absolute;
        right: 1rem;
        bottom: 1rem;
        width: 3rem;
        height: 3rem;
        background-image: var(--ocn-dot-pattern);
        background-size: 0.45rem 0.45rem;
        opacity: 0.42;
        pointer-events: none;
}

.ocn-image-placeholder p {
        margin: 0;
        color: var(--wp--preset--color--contrast);
}

.ocn-image-placeholder__label {
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
}

.ocn-context-panel {
        position: absolute;
        right: clamp(1rem, 2vw, 1.5rem);
        bottom: clamp(1rem, 2vw, 1.5rem);
        display: grid;
        gap: 0.35rem;
        max-width: 18rem;
        padding: 0.9rem 1rem;
        border: 1px solid rgb(255 255 255 / 0.5);
        border-radius: var(--ocn-radius-md);
        background: rgb(255 255 255 / 0.74);
        box-shadow: var(--ocn-shadow-soft);
        -webkit-backdrop-filter: blur(16px) saturate(135%);
        backdrop-filter: blur(16px) saturate(135%);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        .ocn-context-panel,
        .ocn-glass-panel {
                background: var(--ocn-glass-fallback);
        }
}

.ocn-context-panel p {
        margin: 0;
        max-width: none;
}

.ocn-context-panel__label {
        color: var(--wp--preset--color--primary);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
}

.ocn-glass-panel {
        display: grid;
        gap: 0.6rem;
        max-width: 20rem;
        padding: 1rem 1.1rem;
        border: 1px solid rgb(255 255 255 / 0.22);
        border-radius: var(--ocn-radius-md);
        background: rgb(255 255 255 / 0.12);
        box-shadow: var(--ocn-shadow-soft);
        -webkit-backdrop-filter: blur(14px) saturate(135%);
        backdrop-filter: blur(14px) saturate(135%);
}

.ocn-glass-panel > * {
        margin: 0;
}

.ocn-glass-panel p {
        max-width: none;
        color: inherit;
        font-size: 0.98rem;
        line-height: 1.6;
}

.ocn-glass-panel__label {
        color: rgb(255 255 255 / 0.76);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
}

.ocn-split-feature,
.ocn-split-feature__body {
        align-items: center;
}

.ocn-split-feature__body {
        display: grid;
        gap: var(--wp--preset--spacing--30);
}

.ocn-split-feature__body > * {
        margin-block: 0;
}

.ocn-editorial-index {
        counter-reset: ocn-editorial-index;
        margin: 0;
        padding: 0;
        list-style: none;
        border-top: 1px solid var(--ocn-border-soft);
}

.ocn-editorial-index li {
        counter-increment: ocn-editorial-index;
        display: grid;
        grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 0.9fr);
        gap: 1rem;
        align-items: start;
        padding-block: 1rem;
        border-bottom: 1px solid var(--ocn-border-soft);
}

.ocn-editorial-index li::before {
        content: counter(ocn-editorial-index, decimal-leading-zero);
        color: rgb(55 70 87 / 0.56);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
}

.ocn-editorial-index a {
        color: var(--wp--preset--color--contrast);
        font-weight: 600;
        text-decoration: none;
}

.ocn-editorial-index a:hover,
.ocn-editorial-index a:focus-visible {
        color: var(--wp--preset--color--primary);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.22em;
}

.ocn-editorial-index span {
        color: var(--wp--preset--color--secondary);
        line-height: 1.6;
}

.ocn-expertise-index,
.ocn-center-grid,
.ocn-contact-grid {
        display: grid;
        gap: 1.5rem;
        border-top: 0;
        grid-auto-rows: 1fr;
}

.ocn-expertise-index {
        counter-reset: ocn-expertise;
        grid-template-columns: 1fr;
        gap: 0;
        grid-auto-rows: auto;
}

.ocn-center-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ocn-contact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem 1.75rem;
}

.ocn-contact-card,
.ocn-center-grid__item {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-content: start;
        height: 100%;
        min-height: 100%;
        position: relative;
        overflow: hidden;
        padding: 1.5rem;
        border: 1px solid var(--ocn-border-soft);
        border-radius: var(--ocn-radius-md);
        background: linear-gradient(180deg, rgb(255 255 255 / 1) 0%, rgb(248 251 254 / 1) 100%);
        box-shadow: var(--ocn-shadow-soft);
}

.ocn-center-grid__item {
        padding-inline-start: 1.65rem;
}

.ocn-contact-card::before,
.ocn-center-grid__item::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 2px;
        background: linear-gradient(180deg, rgb(8 127 245 / 0.55) 0%, rgb(8 127 245 / 0.08) 78%, transparent 100%);
        opacity: 0.85;
}

.ocn-expertise-entry {
        counter-increment: ocn-expertise;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 0.45rem 1rem;
        align-items: start;
        padding: 1.4rem 0;
        border-bottom: 1px solid var(--ocn-border-soft);
        background: transparent;
        box-shadow: none;
}

.ocn-expertise-entry::before {
        content: counter(ocn-expertise, decimal-leading-zero);
        grid-column: 1;
        grid-row: 1 / span 2;
        color: rgb(55 70 87 / 0.56);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        padding-top: 0.35rem;
}

.ocn-expertise-entry h3,
.ocn-contact-card h3,
.ocn-center-grid__item h3 {
        margin: 0;
        font-size: clamp(1.15rem, 1.05rem + 0.3vw, 1.45rem);
}

.ocn-expertise-entry > .wp-block-heading,
.ocn-expertise-entry > p {
        grid-column: 2;
}

.ocn-expertise-entry > .wp-block-buttons {
        grid-column: 3;
        grid-row: 1 / span 2;
        justify-self: end;
        align-self: center;
}

.ocn-expertise-entry p,
.ocn-contact-card p,
.ocn-center-grid__item p,
.ocn-page-section ul,
.ocn-practitioner-profile ul {
        margin: 0;
}

.ocn-expertise-entry .wp-block-buttons,
.ocn-contact-card .wp-block-buttons {
        gap: 0.75rem;
        justify-content: center;
}

.ocn-contact-card .wp-block-buttons > .wp-block-button,
.ocn-contact-card .wp-block-buttons > .wp-block-button:first-child:last-child,
.ocn-contact-card > .wp-block-buttons > .wp-block-button {
        justify-content: center;
        margin-left: auto !important;
        margin-right: auto !important;
}

.ocn-team-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        gap: clamp(1.75rem, 2.4vw, 2.4rem);
        align-items: stretch;
}

.ocn-team-grid > * {
        min-width: 0;
}

.ocn-center-grid > :first-child,
.ocn-contact-grid > :first-child,
.ocn-team-grid > :first-child,
.ocn-expertise-index > :first-child,
.ocn-grid--practitioner-portrait .wp-block-post-template > li:first-of-type,
.ocn-grid--practitioner-compact .wp-block-post-template > li:first-of-type {
        margin-block-start: 0 !important;
        margin-block-end: 0 !important;
        grid-column: auto !important;
        grid-row: auto !important;
        flex-basis: auto !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
}

.ocn-practitioner-card {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        min-height: 100%;
        position: relative;
        background: var(--ocn-white);
        border: 1px solid var(--ocn-border-soft);
        border-radius: var(--ocn-radius-md);
        box-shadow: var(--ocn-shadow-card);
        overflow: hidden;
        transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

.ocn-practitioner-card__media {
        margin: 0;
        position: relative;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        padding: 0.25rem;
        background: linear-gradient(180deg, rgb(234 243 250 / 0.92) 0%, rgb(255 255 255 / 1) 100%);
        border: 1px solid rgb(8 127 245 / 0.12);
        line-height: 0;
        box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.8), inset 0 -1px 2px rgb(23 43 61 / 0.04);
}

.ocn-practitioner-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        display: block;
        border-radius: calc(var(--ocn-radius-sm) - 2px);
        transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), filter 220ms ease;
}

.ocn-practitioner-card__content {
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        align-content: start;
        gap: 1rem;
        padding: 1.25rem 1.3rem 1.3rem;
}

.ocn-practitioner-card__name {
        margin: 0;
        font-size: clamp(1.2rem, 1.08rem + 0.28vw, 1.45rem);
        line-height: 1.08;
        max-width: 16ch;
}

.ocn-practitioner-card__specialty {
        width: fit-content;
        padding-bottom: 0.42rem;
        border-bottom: 1px solid rgb(8 127 245 / 0.18);
}

.ocn-practitioner-card__content p:not(.ocn-practitioner-card__specialty) {
        color: var(--wp--preset--color--secondary);
        line-height: 1.72;
        max-width: 30ch;
}

.ocn-practitioner-card__actions {
        justify-content: center;
        align-items: center;
        margin-top: auto;
        padding-top: 0.1rem;
}

.ocn-practitioner-card__actions > .wp-block-button {
        margin-left: 0 !important;
        margin-right: 0 !important;
        justify-content: center;
}

.ocn-practitioner-card:hover,
.ocn-practitioner-card:focus-within {
        border-color: rgb(8 127 245 / 0.16);
        transform: translateY(-2px);
        box-shadow: 0 18px 34px rgb(23 43 61 / 0.09);
}

.ocn-practitioner-hero__media .wp-block-image,
.ocn-practitioner-hero__media figure {
        margin: 0;
        overflow: hidden;
        border-radius: var(--ocn-radius-md);
        border: 1px solid var(--ocn-border-soft);
        box-shadow: var(--ocn-shadow-card);
        background: var(--ocn-white);
}

.ocn-practitioner-hero__content {
        display: grid;
        gap: var(--wp--preset--spacing--30);
}

.ocn-practitioner-hero__content > p {
        margin: 0;
        color: var(--wp--preset--color--secondary);
        font-size: 1.02rem;
        line-height: 1.75;
}

.ocn-practitioner-intro .wp-block-group,
.ocn-practitioner-expertise .wp-block-group,
.ocn-practitioner-links .wp-block-group,
.ocn-practitioner-appointment .wp-block-group,
.ocn-practitioner-final .wp-block-group {
        display: grid;
        gap: var(--wp--preset--spacing--30);
    }

.ocn-practitioner-expertise ul,
.ocn-page-section ul {
        padding-left: 1.2rem;
        line-height: 1.8;
    }

.ocn-practitioner-links .wp-block-buttons,
.ocn-practitioner-appointment .wp-block-buttons,
.ocn-practitioner-final .wp-block-buttons,
.ocn-page-links .wp-block-buttons,
.ocn-page-cta .wp-block-buttons {
        gap: 0.9rem;
    }

.ocn-map-shell {
        overflow: hidden;
        border: 1px solid var(--ocn-border-soft);
        background: var(--ocn-white);
}

.ocn-map-shell .awp-map {
        margin: 0;
        border: 0;
        box-shadow: none;
    }

.ocn-contact-note,
.ocn-page-note {
        display: grid;
        gap: 0.85rem;
        padding: 1.25rem;
        border: 1px solid var(--ocn-border-soft);
        background: var(--wp--preset--color--surface);
        border-radius: var(--ocn-radius-md);
}

.ocn-contact-note strong,
.ocn-page-note strong {
        color: var(--wp--preset--color--contrast);
    }

.ocn-section--night .ocn-contact-note,
.ocn-section--night .ocn-page-note,
.ocn-section--surface-night .ocn-contact-note,
.ocn-section--surface-night .ocn-page-note {
        background: rgb(255 255 255 / 0.06);
        border-color: rgb(255 255 255 / 0.14);
}

/* ===== Media Treatment & Overlays ===== */
/* ============================================================
   OCN Media treatment + overlays
   Source image untouched. Gradients = ::after du wrapper.
   Palette OCN : night #172B3D / primary #087FF5 / mist #EAF3FA
   ============================================================ */
.ocn-media {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        border-radius: var(--ocn-radius-md);
        background: var(--ocn-mist);
}
.ocn-media img,
.ocn-media .wp-block-cover__image-background,
.ocn-media .wp-block-cover-image {
        position: relative;
        z-index: 0;
        transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), filter 420ms ease;
        will-change: transform;
}
.ocn-media::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        transition: opacity 320ms ease;
        opacity: 0.92;
}

/* overlay-soft — léger calmant, pas d'effet filtre Instagram */
.ocn-media--overlay-soft::after {
        background: linear-gradient(180deg, rgb(23 43 61 / 0.04) 0%, rgb(23 43 61 / 0.16) 52%, rgb(23 43 61 / 0.28) 100%);
        opacity: 0.9;
}

/* overlay-left — gradient depuis la gauche, copié lue à droite (sujet sur droite) */
.ocn-media--overlay-left::after {
        background: linear-gradient(90deg,
                rgb(23 43 61 / 0.44) 0%,
                rgb(23 43 61 / 0.26) 28%,
                rgb(23 43 61 / 0.08) 60%,
                rgb(23 43 61 / 0) 100%);
}

/* overlay-right — gradient depuis la droite, copié lue à gauche (sujet sur gauche) */
.ocn-media--overlay-right::after {
        background: linear-gradient(270deg,
                rgb(23 43 61 / 0.42) 0%,
                rgb(23 43 61 / 0.26) 30%,
                rgb(23 43 61 / 0.08) 62%,
                rgb(23 43 61 / 0) 100%);
}

/* overlay-bottom — uniquement pour lisibilité captions / copy en bas */
.ocn-media--overlay-bottom::after {
        background: linear-gradient(180deg,
                rgb(23 43 61 / 0) 0%,
                rgb(23 43 61 / 0.08) 50%,
                rgb(23 43 61 / 0.36) 100%);
}

/* overlay-radial — légère emphase radiale autour du centre, pour anatomie/détail */
.ocn-media--overlay-radial::after {
        background: radial-gradient(ellipse at 50% 50%,
                rgb(23 43 61 / 0) 0%,
                rgb(23 43 61 / 0) 58%,
                rgb(23 43 61 / 0.28) 100%);
        opacity: 0.9;
}

/* placeholder — intérieurs temporaires / stock, pas les locaux réels OCN */
.ocn-media--placeholder {
        filter: saturate(0.86) contrast(0.96);
}
.ocn-media--placeholder::after {
        background: linear-gradient(180deg, rgb(234 243 250 / 0.06) 0%, rgb(234 243 250 / 0.18) 100%);
        opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
        .ocn-media img,
        .ocn-media .wp-block-cover__image-background {
                transition: none !important;
        }
}

@media (max-width: 1100px) {
        .ocn-center-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .ocn-team-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
        }
}

@media (max-width: 782px) {
        :root {
                --ocn-header-offset: 8.75rem;
        }

        .ocn-site-header .awp-site-header__inner,
        .ocn-site-footer .awp-site-footer__inner {
                grid-template-columns: 1fr;
        }

        .ocn-primary-navigation,
        .ocn-header-cta,
        .ocn-site-footer__nav {
                justify-self: start;
        }

        .ocn-site-header .awp-site-header__inner {
                gap: var(--wp--preset--spacing--30);
        }

        .ocn-image-placeholder {
                min-height: 18rem;
        }

        .ocn-home__hero--cover {
                min-height: clamp(30rem, 72svh, 40rem) !important;
                padding-block-start: calc(var(--ocn-header-offset) + 1rem);
        }

        .ocn-home__hero-layout {
                grid-template-columns: 1fr;
        }

        .ocn-context-panel {
                position: static;
                max-width: none;
                margin-top: 0.85rem;
        }

        .ocn-editorial-index li,
        .ocn-expertise-entry {
                grid-template-columns: auto minmax(0, 1fr);
        }

        .ocn-editorial-index li::before {
                grid-row: 1 / span 2;
        }

        .ocn-expertise-entry::before {
                grid-row: 1 / span 3;
        }

        .ocn-editorial-index span,
        .ocn-expertise-entry > .wp-block-buttons {
                grid-column: 2;
        }

        .ocn-expertise-entry > .wp-block-buttons {
                grid-row: auto;
                justify-self: start;
                margin-top: 0.25rem;
        }

        .ocn-expertise-index,
        .ocn-contact-grid,
        .ocn-center-grid,
        .ocn-team-grid {
                grid-template-columns: 1fr;
        }

        /* Practitioner hero — stack mobile: image avant/après, pas dominateur */
        .ocn-practitioner-hero .wp-block-columns {
                flex-direction: column;
                gap: var(--wp--preset--spacing--40);
        }
        .ocn-practitioner-hero .wp-block-column[class*="ocn-practitioner-hero__media"],
        .ocn-practitioner-hero .wp-block-column.ocn-practitioner-hero__content {
                flex-basis: auto;
                width: 100%;
                max-width: none;
        }
        .ocn-practitioner-hero__media img {
                max-height: 24rem;
                object-position: center 22%;
        }

        .ocn-site-footer__bottom {
                align-items: start;
        }
}

@media (prefers-reduced-motion: reduce) {
        html {
                scroll-behavior: auto;
        }

        .ocn-primary-navigation .wp-block-navigation-item__content .wp-block-navigation-item__label::after,
        .ocn-site-header .wp-block-navigation .wp-block-navigation-item__content .wp-block-navigation-item__label::after,
        .wp-block-navigation.ocn-primary-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content .wp-block-navigation-item__label::after,
        .ocn-site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content .wp-block-navigation-item__label::after,
        .ocn-primary-navigation .wp-block-navigation-item__content::after,
        .ocn-button .wp-block-button__link,
        .wp-block-navigation.ocn-primary-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container,
        .awp-mega-menu > .wp-block-navigation__submenu-container,
        .awp-mega-menu > .awp-mega-menu__panel,
        .ocn-practitioner-card,
        .ocn-practitioner-card__media img {
                transition: none !important;
        }
}

/* ===== Visual Signature — Accent Primitives ===== */
/* ============================================================
   OCN Visual Signature — Gradient Accent Primitives
   Single source of truth: CSS vars defined in functions.php
   ============================================================ */

.ocn-accent-rail {
        position: relative;
}

.ocn-accent-rail::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: var(--ocn-accent-rail-width, 2px);
        background: linear-gradient(
                180deg,
                var(--ocn-accent-from, #087FF5) 0%,
                var(--ocn-accent-via, rgba(8, 127, 245, 0.55)) 55%,
                var(--ocn-accent-to, rgba(8, 127, 245, 0)) 100%
        );
        border-radius: 999px;
        pointer-events: none;
}

.ocn-accent-rule {
        display: block;
        width: var(--ocn-accent-rule-width, 80px);
        height: var(--ocn-accent-rule-height, 2px);
        background: linear-gradient(
                90deg,
                var(--ocn-accent-from, #087FF5) 0%,
                var(--ocn-accent-via, rgba(8, 127, 245, 0.5)) 65%,
                var(--ocn-accent-to, rgba(8, 127, 245, 0)) 100%
        );
        border-radius: 999px;
        margin-block: 1.05rem 1.25rem;
        flex-shrink: 0;
}

/* ===== Expertise Index ===== */
/* ============================================================
   Expertise Index — Editorial rows with icon + accent rule
   NOT cards. One accent per component.
   ============================================================ */

.ocn-expertise-index {
        display: grid;
        gap: clamp(1.25rem, 2vw, 2rem);
}

.ocn-expertise-entry {
        position: relative;
        display: grid;
        grid-template-columns: 4.25rem minmax(0, 1fr) auto;
        align-items: start;
        column-gap: 1.5rem;
        row-gap: 0.35rem;
        padding: 1.35rem 1.5rem 1.35rem 1.75rem;
        border-radius: var(--ocn-radius-md);
        background: transparent;
        transition: background 220ms ease, border-color 220ms ease;
}

.ocn-expertise-entry:hover,
.ocn-expertise-entry:focus-within {
        background: rgb(234 243 250 / 0.42);
}

.ocn-expertise-entry > .wp-block-heading {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        font-size: clamp(1.05rem, 0.9rem + 0.35vw, 1.3rem);
        letter-spacing: -0.01em;
}

.ocn-expertise-entry > p:not(.ocn-expertise-entry__practitioners) {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
        color: var(--wp--preset--color--secondary);
        line-height: 1.72;
        max-width: 62ch;
}

.ocn-expertise-entry > .wp-block-buttons {
        grid-column: 3;
        grid-row: 1 / span 2;
        align-self: center;
        justify-self: end;
}

.ocn-expertise-entry__icon {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.3rem;
        background: rgb(234 243 250 / 0.55);
        border: 1px solid rgb(8 127 245 / 0.12);
        border-radius: calc(var(--ocn-radius-sm, 6px) + 2px);
        flex-shrink: 0;
}

.ocn-expertise-entry__icon svg {
        width: 42px;
        height: 42px;
        stroke-width: 1.75;
}

.ocn-expertise-entry__practitioners {
        grid-column: 2;
        grid-row: 3;
        margin: 0;
        color: var(--wp--preset--color--secondary);
        font-size: 0.95rem;
        opacity: 0.9;
}

.ocn-expertise-entry__rule {
        grid-column: 2;
        grid-row: 4;
        margin-block: 0.2rem 0;
}

@media (max-width: 782px) {
        .ocn-expertise-entry {
                grid-template-columns: 3.5rem minmax(0, 1fr);
                padding: 1.1rem 0.9rem 1.1rem 1rem;
                column-gap: 1rem;
        }

        .ocn-expertise-entry__icon {
                width: 46px;
                height: 46px;
                grid-row: 1 / span 2;
        }

        .ocn-expertise-entry__icon svg {
                width: 34px;
                height: 34px;
        }

        .ocn-expertise-entry > .wp-block-heading {
                grid-column: 2;
        }

        .ocn-expertise-entry > p {
                grid-column: 2;
        }

        .ocn-expertise-entry > .wp-block-buttons {
                grid-column: 2;
                grid-row: auto;
                justify-self: start;
                margin-top: 0.5rem;
        }

        .ocn-expertise-entry__rule {
                display: none;
        }
}

/* ===== Contact Cards & Practitioner Grid ===== */
/* ============================================================
   Contact page — Practitioner routing cards
   Approved thin gradient rail on left edge.
   ============================================================ */

.ocn-contact-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
        gap: clamp(1.25rem, 2vw, 2rem);
}

.ocn-contact-card {
        position: relative;
        padding: 1.5rem 1.6rem 1.5rem 1.85rem;
        background: var(--ocn-white);
        border: 1px solid var(--ocn-border-soft);
        border-radius: var(--ocn-radius-md);
        box-shadow: var(--ocn-shadow-soft);
        transition: border-color 220ms ease, box-shadow 220ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ocn-contact-card::before {
        content: "";
        position: absolute;
        top: 12%;
        bottom: 12%;
        left: 0;
        width: var(--ocn-accent-rail-width, 2px);
        background: linear-gradient(
                180deg,
                var(--ocn-accent-from, #087FF5) 0%,
                var(--ocn-accent-via, rgba(8, 127, 245, 0.55)) 55%,
                var(--ocn-accent-to, rgba(8, 127, 245, 0)) 100%
        );
        border-radius: 999px;
        pointer-events: none;
}

.ocn-contact-card:hover,
.ocn-contact-card:focus-within {
        border-color: rgb(8 127 245 / 0.16);
        box-shadow: 0 18px 34px rgb(23 43 61 / 0.09);
        transform: translateY(-2px);
}

.ocn-contact-card > .wp-block-heading {
        margin: 0 0 0.4rem;
        font-size: clamp(1.05rem, 0.9rem + 0.38vw, 1.32rem);
}

.ocn-contact-card > p {
        margin: 0 0 1.1rem;
        color: var(--wp--preset--color--secondary);
        line-height: 1.72;
}

.ocn-contact-card > .wp-block-buttons,
.ocn-center-grid__item > .wp-block-buttons {
        gap: 0.75rem;
        flex-wrap: wrap;
        margin-top: auto;
}

/* ===== Specialites page (provisioned /expertises/ fallback — .ocn-expertises-page scope) ===== */
/* Retain the existing provisioner path mapping so re-runs stay consistent. */
.ocn-expertises-page .ocn-expertise-index {
        counter-reset: ocn-expertise;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(1.25rem, 1.8vw, 1.75rem);
        grid-auto-rows: 1fr;
}

.ocn-expertises-page .ocn-expertise-entry {
        counter-increment: ocn-expertise;
        display: flex;
        flex-direction: column;
        gap: 0.9rem;
        height: 100%;
        min-height: 100%;
        align-content: start;
        position: relative;
        overflow: hidden;
        padding: 1.4rem 1.45rem 1.5rem;
        border: 1px solid var(--ocn-border-soft);
        border-radius: var(--ocn-radius-md);
        background: linear-gradient(180deg, rgb(255 255 255 / 1) 0%, rgb(248 251 254 / 1) 100%);
        box-shadow: var(--ocn-shadow-soft);
        transition: border-color 220ms ease, box-shadow 220ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ocn-expertises-page .ocn-expertise-entry:hover,
.ocn-expertises-page .ocn-expertise-entry:focus-within {
        border-color: rgb(8 127 245 / 0.16);
        box-shadow: 0 18px 34px rgb(23 43 61 / 0.09);
        transform: translateY(-2px);
}

.ocn-expertises-page .ocn-expertise-entry::before {
        grid-column: unset;
        grid-row: unset;
        padding-top: 0;
        position: absolute;
        top: 0.95rem;
        right: 1.15rem;
}

.ocn-expertises-page .ocn-expertise-entry__icon {
        grid-column: unset;
        grid-row: unset;
        width: 52px;
        height: 52px;
}

.ocn-expertises-page .ocn-expertise-entry__icon svg {
        width: 38px;
        height: 38px;
}

.ocn-expertises-page .ocn-expertise-entry > .wp-block-heading,
.ocn-expertises-page .ocn-expertise-entry > p,
.ocn-expertises-page .ocn-expertise-entry__practitioners,
.ocn-expertises-page .ocn-expertise-entry__rule {
        grid-column: unset;
        grid-row: unset;
        margin: 0;
}

.ocn-expertises-page .ocn-expertise-entry__rule {
        margin-block: 0.1rem 0;
}

.ocn-expertises-page .ocn-expertise-entry > .wp-block-buttons {
        grid-column: unset;
        grid-row: unset;
        justify-self: unset;
        align-self: unset;
        margin-top: auto;
        padding-top: 0.2rem;
        gap: 0.75rem;
        justify-content: flex-start;
        flex-wrap: wrap;
}

@media (max-width: 1100px) {
        .ocn-expertises-page .ocn-expertise-index {
                grid-template-columns: repeat(2, minmax(0, 1fr));
        }
}

@media (max-width: 782px) {
        .ocn-expertises-page .ocn-expertise-entry {
                padding: 1.25rem 1.25rem 1.35rem;
        }

        .ocn-expertises-page .ocn-expertise-entry__icon {
                width: 48px;
                height: 48px;
        }

        .ocn-expertises-page .ocn-expertise-entry__icon svg {
                width: 34px;
                height: 34px;
        }

        .ocn-expertises-page .ocn-expertise-entry__rule {
                display: block;
        }

        .ocn-expertises-page .ocn-expertise-entry > .wp-block-buttons {
                justify-content: center;
                margin-top: auto;
                padding-top: 0.4rem;
        }
}

/* ===== Final Polish — Micro-refinements ===== */
/* ============================================================
   FINAL POLISH — QW6/QW7/QW8/QW9/QW10 micro-raffinements ciblés
   ============================================================ */

/* QW6 — Practitioner CTA hierarchy:
   section "Liens contextuels" (3 outline CTAs) = downgrade visuel
   éditorial links flèche. Section finale "Prendre rendez-vous"
   KEEPS filled primary (ocn-button not outline) + filled outline secondary.
   S'assurer les CTAs "Rendez-vous" filled restent filled. */
.ocn-practitioner-links .wp-block-button__link.wp-element-button {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.35rem 0;
        border: 0 !important;
        background: transparent !important;
        color: var(--wp--preset--color--primary) !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        font-weight: 600;
        font-size: 0.98rem;
        line-height: 1.45;
        letter-spacing: 0;
        text-decoration: none;
}
.ocn-practitioner-links .wp-block-button__link.wp-element-button::after {
        content: "→";
        display: inline-block;
        width: 1rem;
        height: 1rem;
        line-height: 1rem;
        text-align: center;
        color: inherit;
        transition: transform 220ms ease;
}
.ocn-practitioner-links .wp-block-button__link.wp-element-button:hover,
.ocn-practitioner-links .wp-block-button__link.wp-element-button:focus-visible {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.2em;
        background: transparent !important;
        color: var(--wp--preset--color--primary) !important;
}
.ocn-practitioner-links .wp-block-button__link.wp-element-button:hover::after {
        transform: translateX(3px);
}

/* QW7 — split-feature media: traitement image + aspect 4:3, objet-fit cover */
.ocn-split-feature__media {
        line-height: 0;
}
.ocn-split-feature__media > * {
        width: 100%;
        height: 100%;
        min-height: clamp(18rem, 34vw, 30rem);
}
.ocn-split-feature__media figure,
.ocn-split-feature__media .wp-block-image,
.ocn-split-feature__media img {
        margin: 0;
        width: 100%;
        height: 100%;
        display: block;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        object-position: center;
        border-radius: var(--ocn-radius-md);
        box-shadow: var(--ocn-shadow-card);
        overflow: hidden;
        background: var(--ocn-mist);
}
.ocn-split-feature__media img {
        filter: saturate(0.95) contrast(1.02);
}
@media (prefers-reduced-motion: reduce) {
        .ocn-split-feature__media img { filter: none; }
}

/* Map shell branding only. Maps owns action placement and consumes Core buttons. */
.ocn-map-shell {
        overflow: hidden;
        border-radius: var(--ocn-radius-md);
        box-shadow: var(--ocn-shadow-strong);
}

/* QW9 — Heading widths harmonisées (2 variantes: standard + large hero)
   Standard = 24ch pour h1 page et 32ch pour h2.
   Large (hero) = 28ch max (déjà set ailleurs → 11ch override here ? NOT touched.) */
.ocn-page-section h3,
.ocn-center-grid__item h3,
.ocn-contact-card h3,
.ocn-practitioner-card__name {
        max-width: 32ch;
        text-wrap: pretty;
}
.ocn-page-section h2 {
        max-width: 32ch;
}
/* Large variant (override narrower previous; hero = home cover only) */
body.home .ocn-home__hero-copy h1 {
        max-width: 28ch;
}
/* Paragraph body content line-heights & measure 65ch for readability */
.ocn-page-section p,
.ocn-practitioner-profile .wp-block-group > p,
.ocn-practitioner-profile ul li,
.ocn-practitioner-profile ol li {
        max-width: 65ch;
}

/* QW10 — Footer micro-polish (alignements / contrastes secondaires) */
.ocn-site-footer {
        padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
        border-top: 1px solid rgb(255 255 255 / 0.08);
}
.ocn-site-footer__bottom {
        padding-block-start: var(--wp--preset--spacing--40);
        border-top: 1px solid rgb(255 255 255 / 0.08);
        margin-block-start: var(--wp--preset--spacing--40);
        font-size: 0.9rem;
        color: rgb(255 255 255 / 0.62);
}
.ocn-site-footer__address strong,
.ocn-site-footer__meta strong {
        color: var(--ocn-white);
        font-weight: 600;
}
.ocn-site-footer .ocn-brand-lockup__name {
        font-size: clamp(1.08rem, 1.02rem + 0.2vw, 1.25rem);
        letter-spacing: -0.02em;
}
.ocn-site-footer .ocn-brand-lockup__city {
        font-size: 0.74rem;
        letter-spacing: 0.2em;
}

/* ===== Page Rail — Overlay Mode ===== */
/* ============================================================
   Page Rail — OCN Overlay Mode
   Fixed overlay, does NOT consume content width.
   Mission requirement: "It must NOT create a second page column".
   ============================================================ */

.awp-page-rail--ready,
.awp-page-rail--right {
        display: block !important;
        position: relative;
}

.awp-page-rail__content {
        width: 100%;
        min-inline-size: 0;
}

.awp-page-rail__aside {
        position: fixed !important;
        right: clamp(0.6rem, 1.4vw, 1.4rem);
        top: calc(var(--ocn-header-offset, 92px) + var(--wp--preset--spacing--30));
        z-index: 60;
        max-block-size: min(32rem, calc(100vh - var(--ocn-header-offset, 92px) - 2rem));
        width: clamp(8.5rem, 11vw, 11rem);
        overflow: visible;
        background: rgb(255 255 255 / 0.94);
        -webkit-backdrop-filter: blur(10px) saturate(140%);
        backdrop-filter: blur(10px) saturate(140%);
        border: 1px solid rgb(23 43 61 / 0.08);
        box-shadow: 0 14px 32px rgb(23 43 61 / 0.10);
        border-radius: var(--ocn-radius-md);
        padding: 0.75rem 0.7rem 0.85rem;
}

.awp-page-rail--ready:not(.awp-page-rail--right) > .awp-page-rail__aside {
        right: auto;
        left: clamp(0.6rem, 1.4vw, 1.4rem);
}

.awp-page-rail__nav {
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
}

.awp-page-rail__item .awp-rail__track {
        display: none;
}

.awp-page-rail__items {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
}

.awp-page-rail__item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.38rem 0.45rem;
        border-radius: calc(var(--ocn-radius-sm, 6px));
        transition: background 180ms ease;
}

.awp-page-rail__item:hover {
        background: rgb(234 243 250 / 0.7);
}

.awp-page-rail__item--active {
        background: rgb(234 243 250 / 0.85);
        position: relative;
}

.awp-page-rail__item--active::after {
        content: "";
        position: absolute;
        left: 0;
        top: 10%;
        bottom: 10%;
        width: 2px;
        background: linear-gradient(180deg,
                var(--ocn-accent-from, #087FF5) 0%,
                var(--ocn-accent-via, rgba(8, 127, 245, 0.6)) 100%);
        border-radius: 999px;
}

.awp-utility-dock {
        margin-top: 0.7rem;
        padding-top: 0.7rem;
        border-top: 1px solid rgb(23 43 61 / 0.08);
}

.awp-utility-dock summary {
        font-size: 0.85rem;
        font-weight: 600;
        padding: 0.25rem 0.1rem;
}

@media (max-width: 1100px) {
        .awp-page-rail__aside {
                display: none !important;
        }
}

/* ===== Homepage Team Teaser ===== */
/* ===== Homepage team teaser — responsive 3-col layout =====
   Ciblage via `body.home .ocn-team-grid` pour viser EXCLUSIVEMENT
   le teaser homepage (3 colonnes × 2 rangées desktop, 2 tablette, 1 mobile)
   sans affecter la page équipe qui reste en 3 colonnes via le sélecteur
   générique. Aucun gap/align/space altéré. */

body.home .ocn-team-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: stretch !important;
        gap: clamp(1rem, 1.6vw, 1.5rem) !important;
}

body.home .ocn-team-grid > * {
        flex: 1 1 calc(33.333% - 1rem) !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: calc(33.333% - 1rem) !important;
}

body.home .ocn-practitioner-card__media {
        aspect-ratio: 1 / 1 !important;
        padding: 0.25rem !important;
}

body.home .ocn-practitioner-card__content {
        padding: 1rem 1rem 1.1rem !important;
        gap: 0.4rem !important;
}

body.home .ocn-practitioner-card__name {
        font-size: var(--wp--preset--font-size--medium) !important;
        line-height: 1.25 !important;
}

@media (max-width: 819px) {
        body.home .ocn-team-grid > * {
                flex-basis: calc(50% - 0.875rem) !important;
                max-width: calc(50% - 0.875rem) !important;
        }
}

@media (max-width: 520px) {
        body.home .ocn-team-grid > * {
                flex-basis: 100% !important;
                max-width: 24rem !important;
        }
}

/* ===== Orientation 3-Step Index ===== */
/* ============================================================
   v2 — OCN Orientation 3 steps icons
   ============================================================ */
.ocn-editorial-index li {
	display: flex !important;
	align-items: flex-start !important;
	gap: 0.875rem !important;
}
.ocn-editorial-index li .awp-icon {
	margin-inline-end: 0;
	flex-shrink: 0 !important;
	width: 28px !important;
	height: 28px !important;
	margin-top: 0.125rem !important;
	--awp-icon-primary: var(--wp--preset--color--accent, #087FF5) !important;
	--awp-icon-secondary: var(--wp--preset--color--secondary, #374657) !important;
}
.ocn-orient-step__body {
	display: block !important;
	min-width: 0 !important;
}
.ocn-orient-step__body a {
	display: block !important;
	margin-bottom: 0.25rem !important;
}
.ocn-orient-step__body span {
	display: block !important;
}

/* ===== Single Practitioner Hero ===== */
/* ================================================================
   §11 · Single Practitioner hero layout + editorial rhythm.
   38% / 62% columns; portrait max-width 420px clamped;
   sibling pair gaps per editorial contract (tight→clear→large).
   ================================================================ */
.ocn-practitioner-single-hero {
        padding-block: clamp(2.75rem, 4.5vw, 4rem);
}
.ocn-practitioner-single-hero .ocn-single-hero__portrait-col {
        display: flex;
        justify-content: center;
        align-items: flex-start;
}
.ocn-practitioner-single-portrait {
        max-width: min(100%, 420px);
        width: 100%;
        margin: 0;
}
.ocn-practitioner-single-portrait img {
        width: 100%;
        height: auto;
        max-height: clamp(320px, 52vw, 560px);
        object-fit: cover;
        object-position: center 22%;
        border-radius: var(--ocn-radius-md);
        display: block;
        background: var(--ocn-mist);
        overflow: hidden;
}
.ocn-practitioner-single-hero .ocn-single-hero__copy-col {
        display: flex;
        flex-direction: column;
        justify-content: center;
}
.ocn-practitioner-hero {
        display: flex;
        flex-direction: column;
        gap: 0;
}
.ocn-practitioner-hero__eyebrow + .ocn-practitioner-hero__name {
        margin-block-start: clamp(0.375rem, 0.8vw, 0.625rem);
}
.ocn-practitioner-hero__name + .ocn-practitioner-hero__pro-title {
        margin-block-start: 0.75rem;
}
.ocn-practitioner-hero__pro-title + .ocn-practitioner-hero__ctas {
        margin-block-start: 1.5rem;
}
.ocn-practitioner-hero__domains {
        letter-spacing: -0.005em;
}
.ocn-single-hero__cols {
        align-items: center;
}
@media (max-width: 781.98px) {
        .ocn-practitioner-single-hero .ocn-single-hero__portrait-col {
                margin: 0 auto var(--wp--preset--spacing--40);
                max-width: 320px;
        }
}

/* ===== Portrait Accent Primitive ===== */
/* ================================================================
   §14 · Portrait accent — reusable primitive (rest: top+left 30-35%).
   Targets: .ocn-portrait-accent (generic class) +
            .wp-block-image.is-style-ocn-portrait-accent (registered
            block style, one-click editor apply; see functions.php).
   NO glow / neon / thick border / image zoom.
   Inherits parent card radius.
   ================================================================ */
.ocn-portrait-accent,
.wp-block-image.is-style-ocn-portrait-accent,
.ocn-portrait--with-accent,
.ocn-card-portrait .wp-block-post-featured-image,
.ocn-practitioner-single-portrait {
        position: relative;
        isolation: isolate;
}
.ocn-portrait-accent::before,
.wp-block-image.is-style-ocn-portrait-accent::before,
.ocn-portrait--with-accent::before,
.ocn-card-portrait .wp-block-post-featured-image::before,
.ocn-practitioner-single-portrait::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        border-radius: inherit;
        background:
                linear-gradient(
                        135deg,
                        rgba(8, 127, 245, 0.84) 0%,
                        rgba(8, 127, 245, 0.42) 22%,
                        rgba(8, 127, 245, 0) 33%
                ) top left / 100% 100% no-repeat,
                linear-gradient(
                        135deg,
                        rgba(8, 127, 245, 0) 67%,
                        rgba(8, 127, 245, 0.36) 78%,
                        rgba(23, 43, 61, 0.52) 100%
                ) bottom right / 100% 100% no-repeat;
        mix-blend-mode: multiply;
        opacity: 0.92;
}
.wp-block-image.is-style-ocn-portrait-accent img {
        position: relative;
        z-index: 1;
}

/* ===== Card Perimeter Hover ===== */
/* ================================================================
   §15 · Card perimeter — CSS-only complete-on-hover.
   4-edge draw: top→right→bottom→left combined diagonal sweep,
   540ms cubic-bezier(0.16,1,0.3,1) ; reduced-motion = snap static.
   ZERO scale/zoom on card, image or inner content.
   Uses mask-size expand from opposite corners to close full frame.
   ================================================================ */
.ocn-card-portrait {
        position: relative;
        isolation: isolate;
        border-radius: var(--ocn-radius-md);
}
.ocn-card-portrait::before,
.ocn-card-portrait::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 4;
        border-radius: inherit;
        border: 1.5px solid transparent;
        background: linear-gradient(white, white) padding-box,
                    linear-gradient(135deg, var(--ocn-primary) 0%, rgba(8,127,245,0.0) 50%, var(--ocn-night) 100%) border-box;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        opacity: 0;
}
.ocn-card-portrait::before {
        -webkit-mask-size: 0% 0%;
                mask-size: 0% 0%;
        -webkit-mask-position: 0% 0%;
                mask-position: 0% 0%;
        transition: opacity 180ms ease, mask-size 540ms cubic-bezier(0.16, 1, 0.3, 1) 0ms, -webkit-mask-size 540ms cubic-bezier(0.16, 1, 0.3, 1) 0ms;
}
.ocn-card-portrait::after {
        -webkit-mask-size: 0% 0%;
                mask-size: 0% 0%;
        -webkit-mask-position: 100% 100%;
                mask-position: 100% 100%;
        transition: opacity 180ms ease, mask-size 540ms cubic-bezier(0.16, 1, 0.3, 1) 80ms, -webkit-mask-size 540ms cubic-bezier(0.16, 1, 0.3, 1) 80ms;
}
.ocn-card-portrait:hover::before,
.ocn-card-portrait:focus-within::before,
.ocn-card-portrait:hover::after,
.ocn-card-portrait:focus-within::after {
        opacity: 0.9;
        -webkit-mask-size: 100% 100%;
                mask-size: 100% 100%;
}
@media (prefers-reduced-motion: reduce) {
        .ocn-card-portrait::before,
        .ocn-card-portrait::after {
                transition: none;
        }
        .ocn-card-portrait:hover::before,
        .ocn-card-portrait:focus-within::before {
                -webkit-mask-size: 100% 100%;
                        mask-size: 100% 100%;
                opacity: 0.8;
        }
        .ocn-card-portrait:hover::after,
        .ocn-card-portrait:focus-within::after {
                opacity: 0;
        }
}

/* ===== Portrait Card Query Loop ===== */
/* ================================================================
   §17 · Portrait card — Query Loop compatible (li.wp-block-post).
   Subtle 4-6px translateY + short soft shadow on hover.
   ABSOLUTELY NO scale / zoom / image-transform.
   Spécialité(s): [interpunct] format inherited from core/post-terms.
   ================================================================ */
.ocn-grid--practitioner-portrait .wp-block-post-template {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        gap: clamp(1.75rem, 2.4vw, 2.4rem);
}
.ocn-card-portrait {
        list-style: none;
        padding: var(--wp--preset--spacing--30);
        border-radius: var(--ocn-radius-md);
        background: var(--ocn-mist);
        transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
                    box-shadow 380ms cubic-bezier(0.16, 1, 0.3, 1),
                    background-color 280ms ease;
        will-change: transform;
}
.ocn-card-portrait:hover,
.ocn-card-portrait:focus-within {
        transform: translateY(5px);
        background: #FFFFFF;
        box-shadow: var(--ocn-shadow-card);
}
.ocn-card-portrait .wp-block-post-featured-image {
        margin: 0 0 var(--wp--preset--spacing--40);
        border-radius: var(--ocn-radius-sm);
        overflow: hidden;
}
.ocn-card-portrait .wp-block-post-featured-image img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 4;
        object-fit: cover;
        object-position: center 20%;
}
.ocn-card-portrait .wp-block-post-title {
        font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.35rem);
        letter-spacing: -0.02em;
        line-height: 1.12;
        margin: 0;
}
.ocn-card-portrait .wp-block-post-title a {
        color: var(--ocn-night);
        text-decoration: none;
}
.ocn-card-portrait .wp-block-post-title a:hover {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
}
.ocn-card-portrait .wp-block-post-excerpt p {
        margin: 0;
        font-size: 0.92rem;
        line-height: 1.6;
}
.ocn-card-portrait__domains {
        font-size: 0.8rem;
        text-transform: none;
        letter-spacing: 0;
        line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
        .ocn-card-portrait {
                transition: none;
        }
        .ocn-card-portrait:hover,
        .ocn-card-portrait:focus-within {
                transform: none;
        }
}

/* ===== Compact Practitioner Cards ===== */
/* ================================================================
   §18 · Compact card — Query Loop compatible. No portrait.
   Panel surface (reuses .awp-pattern-panel parent canonical padding).
   Booking CTA CONDITIONALLY rendered via shortcode; empty shortcode =
   no markup, card stays clean when booking URL absent.
   ================================================================ */
.ocn-grid--practitioner-compact .wp-block-post-template {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        gap: clamp(1.5rem, 2vw, 2rem);
}
.ocn-card-compact {
        list-style: none;
}
.ocn-card-compact__inner {
        height: 100%;
        transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
                    box-shadow 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ocn-card-compact:hover .ocn-card-compact__inner,
.ocn-card-compact:focus-within .ocn-card-compact__inner {
        transform: translateY(4px);
        box-shadow: var(--ocn-shadow-soft);
}
.ocn-card-compact .wp-block-post-title {
        font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
        letter-spacing: -0.02em;
        line-height: 1.15;
        margin: 0;
}
.ocn-card-compact .wp-block-post-title a {
        color: var(--ocn-night);
}
.ocn-card-compact__domains {
        font-size: 0.8rem;
        line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
        .ocn-card-compact__inner { transition: none; }
        .ocn-card-compact:hover .ocn-card-compact__inner,
        .ocn-card-compact:focus-within .ocn-card-compact__inner { transform: none; }
}

/* ===== Practitioner Appointment Section ===== */
/* ================================================================
   §13 · Bottom contact section (auto-appended via the_content@8).
   Wrapped in .ocn-practitioner-appointment — ensure proper spacing
   and hierarchy. Uses parent-aligned surface (mist panel).
   ================================================================ */
.ocn-practitioner-appointment {
        margin-block-start: clamp(2.5rem, 4vw, 3.5rem);
        padding-block: clamp(2rem, 3vw, 2.75rem);
        padding-inline: clamp(1rem, 2vw, 1.5rem);
        border-radius: var(--ocn-radius-md);
        background: var(--ocn-mist);
}
.ocn-practitioner-appointment > .alignwide {
        max-width: none;
        margin: 0 auto;
}
.ocn-practitioner-appointment h2 {
        font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
        letter-spacing: -0.02em;
        margin: 0 0 var(--wp--preset--spacing--40);
        color: var(--ocn-night);
}

/* ===== Practitioner Content Rhythm ===== */
/* ================================================================
   §4 · Practitioner post-content — editorial flow vertical rhythm.
   Applies only to ocn_practitioner single post body content (not
   compact surfaces). Matches the home / Le centre canonical pairs.
   Uses body.single-ocn_practitioner isolation.
   ================================================================ */
body.single-ocn_practitioner .wp-block-post-content .is-layout-flow > * + h2,
body.single-ocn_practitioner .entry-content .is-layout-flow > * + h2 {
        margin-block-start: clamp(1.75rem, 2.4vw, 2.5rem);
}
body.single-ocn_practitioner .wp-block-post-content .is-layout-flow > * + h3,
body.single-ocn_practitioner .entry-content .is-layout-flow > * + h3 {
        margin-block-start: clamp(1.25rem, 1.7vw, 1.75rem);
}
body.single-ocn_practitioner .wp-block-post-content .is-layout-flow > h2 + p,
body.single-ocn_practitioner .entry-content .is-layout-flow > h2 + p,
body.single-ocn_practitioner .wp-block-post-content .is-layout-flow > h3 + p,
body.single-ocn_practitioner .entry-content .is-layout-flow > h3 + p {
        margin-block-start: var(--wp--preset--spacing--40);
}
body.single-ocn_practitioner .wp-block-post-content .is-layout-flow > p + p,
body.single-ocn_practitioner .entry-content .is-layout-flow > p + p {
        margin-block-start: var(--wp--preset--spacing--30);
}
body.single-ocn_practitioner .wp-block-post-content .is-layout-flow > * + .wp-block-group.awp-pattern-panel,
body.single-ocn_practitioner .entry-content .is-layout-flow > * + .wp-block-group.awp-pattern-panel {
        margin-block-start: var(--wp--preset--spacing--50);
}

/* ============================================================
   OCN MOBILE NAV — DROPDOWN VISUAL SKIN
   Single canonical skin. Bloc A (@media L489) owns structure + layout.
   This block owns: visual surface (unified with header), burger custom
   draw, close-button relocation, desktop-safe footer gap reduction.
   ============================================================ */

/* ──────────────────────────────────────────────────────────────
   1. PANEL VISUAL — FULL FUSION WITH HEADER (§1 brief)
   ──────────────────────────────────────────────────────────────
   The panel and the open-header MUST read as one rounded card.
   Fixes for two-surface illusion (ROOT CAUSE §1 — part 2):
     • panel background = exact 0.985 solid white (shared with open
       header bg → zero two-tone seam even on pure-black device frames
       behind glass);
     • PANEL TOP BORDER REMOVED — no "line between header and panel";
     • PANEL TOP RADIUS forced 0 (bottom radius carries the card shape)
       — same declaration as open-state header bottom-radius 0;
     • shadow: panel bears ONLY the LOWER HALF of a shared elevation
       (header L587–589 bears the top/hairline + mid, panel here adds
       the lower drop → net = one continuous shadow below a single card)
     • no independent inset/top-layer effects.
   Desktop untouched (no @media scope means same on desktop, but panel
   is display:none on desktop because it's a responsive-container). */
.ocn-site-header .wp-block-navigation__responsive-container {
        background-color: rgb(255 255 255 / 0.985);
        color: var(--ocn-night);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-top: 0 !important;                 /* seam removed */
        border-top-left-radius: 0 !important;     /* shared with header bottom-radius 0 */
        border-top-right-radius: 0 !important;
        border-bottom-left-radius: var(--ocn-radius-md);
        border-bottom-right-radius: var(--ocn-radius-md);
        /* Shared-card shadow complement. Header L587–589 carries the
           top hairline; this carries the lower drop. */
        box-shadow:
                0 16px 42px -16px rgb(23 43 61 / 0.18),
                0 2px 0 rgb(23 43 61 / 0.025);
}

.ocn-site-header .wp-block-navigation__responsive-container.is-menu-open {
        box-sizing: border-box;
}

.ocn-site-header .wp-block-navigation__responsive-dialog {
        max-width: none;
        width: 100%;
        min-height: 0;
        position: relative;
        box-sizing: border-box;
}

/* ──────────────────────────────────────────────────────────────
   2. HAMBURGER + CLOSE — shared chrome, 44×44 hit area
   ────────────────────────────────────────────────────────────── */
.ocn-site-header .wp-block-navigation__responsive-container-close,
.ocn-site-header .wp-block-navigation-overlay-close,
.ocn-site-header .wp-block-navigation__responsive-container-open {
        color: var(--ocn-night);
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        border-radius: var(--ocn-radius-sm);
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        position: relative;
        z-index: 2;
}

.ocn-site-header .wp-block-navigation__responsive-container-close svg,
.ocn-site-header .wp-block-navigation-overlay-close svg,
.ocn-site-header .wp-block-navigation__responsive-container-open svg {
        display: none !important;
}

/* ──────────────────────────────────────────────────────────────
   3. BURGER — 3 equal lines via CSS (Core SVG hidden)
   stroke 2 px, width 22 px, spacing 5 px, radius 1 px. */
.ocn-site-header .wp-block-navigation__responsive-container-open::before,
.ocn-site-header .wp-block-navigation__responsive-container-open::after {
        content: "";
        position: absolute;
        left: 50%;
        width: 22px;
        height: 2px;
        background: currentColor;
        border-radius: 1px;
        transform: translate(-50%, 0);
        transform-origin: center;
}
.ocn-site-header .wp-block-navigation__responsive-container-open::before { top: calc(50% - 7px); }
.ocn-site-header .wp-block-navigation__responsive-container-open::after  { top: calc(50% + 5px); }
.ocn-site-header .wp-block-navigation__responsive-container-open {
        background-image: linear-gradient(currentColor, currentColor);
        background-size: 22px 2px;
        background-position: center center;
        background-repeat: no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
        .ocn-site-header .wp-block-navigation__responsive-container-open::before,
        .ocn-site-header .wp-block-navigation__responsive-container-open::after,
        .ocn-site-header .wp-block-navigation__responsive-container-open {
                transition:
                        transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
                        top 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
                        opacity 220ms ease,
                        background-size 220ms ease;
        }
}

/* ──────────────────────────────────────────────────────────────
   4. BURGER → X MORPH in-place (same DOM element, same flow position)
      Problem that forced this approach:
        - Core close button is a CHILD of responsive-container;
        - Panel has `overflow: hidden` + `transform: translate3d()`;
        - Any close-button negative offset to reach header zone is CLIPPED.
      Therefore: reuse the OPEN button itself as the CLOSE control.
        - Open button stays visible when .is-menu-open (forced !important);
        - Top line drops to center then rotates 45°;
        - Bottom line rises to center then rotates -45°;
        - Middle line (bg image) fades to opacity 0;
        - Core close button is HIDDEN entirely (display:none).
      Result: X renders at exact burger flow coordinates — zero estimates. */

/* A. Force burger button VISIBLE even when open — Core may hide it */
@media (max-width: 782px) {
        .ocn-site-header .wp-block-navigation__responsive-container-open {
                display: inline-flex !important;
                visibility: visible !important;
                opacity: 1 !important;
        }
        /* B. Hide Core close button inside panel — morph supersedes it */
        .ocn-site-header .wp-block-navigation__responsive-container-close,
        .ocn-site-header .wp-block-navigation-overlay-close {
                display: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
        }
        /* C. MORPH: burger lines into X when menu open */
        body:has(.ocn-site-header .wp-block-navigation__responsive-container.is-menu-open)
                .ocn-site-header .wp-block-navigation__responsive-container-open {
                background-size: 0 2px;                /* middle line: shrink to 0 width */
                background-position: center center;
        }
        body:has(.ocn-site-header .wp-block-navigation__responsive-container.is-menu-open)
                .ocn-site-header .wp-block-navigation__responsive-container-open::before {
                top: 50%;                              /* top line → vertical center */
                transform: translate(-50%, -50%) rotate(45deg);
        }
        body:has(.ocn-site-header .wp-block-navigation__responsive-container.is-menu-open)
                .ocn-site-header .wp-block-navigation__responsive-container-open::after {
                top: 50%;                              /* bottom line → vertical center */
                transform: translate(-50%, -50%) rotate(-45deg);
        }
}

/* Fallback X lines: retained for JS-toggled states or overlay-close edge
   cases (hidden above; here as inert guard if ever un-hidden). */
.ocn-site-header .wp-block-navigation__responsive-container-close::before,
.ocn-site-header .wp-block-navigation__responsive-container-close::after,
.ocn-site-header .wp-block-navigation-overlay-close::before,
.ocn-site-header .wp-block-navigation-overlay-close::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 22px;
        height: 2px;
        background: currentColor;
        border-radius: 1px;
        transform-origin: center;
}
.ocn-site-header .wp-block-navigation__responsive-container-close::before,
.ocn-site-header .wp-block-navigation-overlay-close::before {
        transform: translate(-50%, -50%) rotate(45deg);
}
.ocn-site-header .wp-block-navigation__responsive-container-close::after,
.ocn-site-header .wp-block-navigation-overlay-close::after {
        transform: translate(-50%, -50%) rotate(-45deg);
}

/* ──────────────────────────────────────────────────────────────
   5. SHARED HOVER / FOCUS rings (burger + X + submenu toggles)
   ────────────────────────────────────────────────────────────── */
.ocn-site-header .wp-block-navigation__responsive-container-close:hover,
.ocn-site-header .wp-block-navigation__responsive-container-close:focus-visible,
.ocn-site-header .wp-block-navigation-overlay-close:hover,
.ocn-site-header .wp-block-navigation-overlay-close:focus-visible,
.ocn-site-header .wp-block-navigation__responsive-container-open:hover,
.ocn-site-header .wp-block-navigation__responsive-container-open:focus-visible {
        background: var(--ocn-mist);
        color: var(--ocn-blue);
        outline: none;
}
.ocn-site-header .wp-block-navigation__responsive-container-close:focus-visible,
.ocn-site-header .wp-block-navigation-overlay-close:focus-visible,
.ocn-site-header .wp-block-navigation__responsive-container-open:focus-visible {
        box-shadow: 0 0 0 3px rgba(8, 127, 245, 0.22);
}

/* ──────────────────────────────────────────────────────────────
   6. HEADER MOBILE COMPACT SIZING — NOW LIVED IN BLOC A (L530)
      Kept here as explicit inheritance fallback guard for any
      selector that didn't catch the @media scoped rule.
      Values are IDENTICAL to Bloc A's declarations.
      padding-block 8/14 px; logo 180 px default mobile. */
@media (max-width: 782px) {
        .ocn-site-header .awp-site-header__inner {
                padding-block: clamp(8px, 1.6vw, 14px);
                padding-inline: var(--awp-page-gutter);
                row-gap: 0;
                column-gap: var(--wp--preset--spacing--30);
        }
        .ocn-site-header .wp-block-site-logo img {
                width: var(--awp-nav-logo-width-mobile, 180px) !important;
                max-width: var(--awp-nav-logo-width-mobile, 180px);
                height: auto;
        }
        .ocn-site-header {
                z-index: 100;
                overflow: visible;
        }
}

/* ──────────────────────────────────────────────────────────────
   7. REDUCED MOTION — blanket cancel on nav decorative animation
   ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
        .ocn-site-header .wp-block-navigation__responsive-container,
        .ocn-site-header .wp-block-navigation__responsive-container *,
        .ocn-site-header .wp-block-navigation__responsive-container-close,
        .ocn-site-header .wp-block-navigation__responsive-container-open,
        .ocn-site-header .wp-block-navigation-overlay-close {
                animation: none !important;
                animation-delay: 0ms !important;
                transition: none !important;
                transform: none !important;
        }
}

/* The Core sibling block gap and OCN footer top margin must not recreate
   external whitespace below the final content surface. */

/* ── 1. Kill the sibling block-gap on footer template-part only (last
      direct child of .wp-site-blocks after main). Selector narrow &
      semantic: ONLY the template-part immediately after .awp-site-main,
      never any other sibling, never the template parts inside main/footer. */
.awp-site-main + footer.wp-block-template-part {
        margin-block-start: 0;
}

.ocn-site-footer {
        margin-block-start: 0;
}

/* Ensure no stray last-block margin bleeds above the footer */
:where(main, #content, .wp-site-blocks > main) > :last-child {
        margin-block-end: 0;
}
:where(.wp-block-post-content, .entry-content, .is-layout-constrained, .is-layout-flow) > :last-child {
        margin-block-end: 0;
}
/* Footer inner padding preserved — breathing inside the dark tile */
.ocn-site-footer {
        padding-block-start: var(--wp--preset--spacing--55, var(--wp--preset--spacing--60));
}



/* =========================================================
   OCN NAVBAR MATERIALS — CANONICAL OWNERS
   ========================================================= */

/*
 * Le header ne porte pas lui-même le backdrop-filter.
 * Le verre vit sur ::before afin que les dropdowns descendants
 * puissent disposer de leur propre backdrop-filter.
 */
.ocn-site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding-block: 0 !important;
	border-radius: 0 !important;
	transform: none !important;
	box-shadow: none !important;
	background: transparent !important;

	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;

	isolation: auto;
	overflow: visible;
}

.awp-header-template-part:has(.ocn-site-header).awp-nav--is-hidden {
	transform: none !important;
}

.ocn-site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;

	background: var(--ocn-glass-background);

	-webkit-backdrop-filter: blur(var(--ocn-glass-blur)) saturate(155%);
	backdrop-filter: blur(var(--ocn-glass-blur)) saturate(155%);

	border-radius: inherit;

	box-shadow:
		0 1px 0 rgb(255 255 255 / 0.48) inset,
		0 8px 28px rgb(23 43 61 / 0.065);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.ocn-site-header::before {
		background: var(--ocn-glass-fallback);
	}
}

@media (max-width: 782px) {
	body:has(.ocn-site-header .wp-block-navigation__responsive-container.is-menu-open)
		.ocn-site-header::before {
		background: var(--ocn-glass-background);
		-webkit-backdrop-filter: blur(var(--ocn-glass-blur)) saturate(150%);
		backdrop-filter: blur(var(--ocn-glass-blur)) saturate(150%);
	}
}

.ocn-site-header > * {
	position: relative;
	z-index: 1;
}


/* Desktop Core dropdown glass is owned by the high-specificity rule in the
   DESKTOP DROPDOWNS section above; mega-menu panels are owned here. */

@media (min-width: 783px) {

	.ocn-site-header .ocn-primary-navigation,
	.ocn-site-header
		.ocn-primary-navigation
		.wp-block-navigation__responsive-container:not(.is-menu-open),
	.ocn-site-header
		.ocn-primary-navigation
		.wp-block-navigation__responsive-close,
	.ocn-site-header
		.ocn-primary-navigation
		.wp-block-navigation__responsive-dialog,
	.ocn-site-header
		.ocn-primary-navigation
		.wp-block-navigation__responsive-container-content,
	.ocn-site-header
		.ocn-primary-navigation
		.wp-block-navigation__container {
		background: transparent !important;
		background-color: transparent !important;
		box-shadow: none !important;
	}

	/*
	 * Core garde le responsive-container dans le DOM en desktop.
	 * Aucun verre / blur à ce niveau.
	 */
	.ocn-site-header .wp-block-navigation__responsive-container {
		background: transparent !important;
		background-color: transparent !important;

		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;

		box-shadow: none !important;
	}


	/* =====================================================
	   DROPDOWN GLASS
	   ===================================================== */

	.awp-mega-menu > .awp-mega-menu__panel {
		background: rgb(248 251 254 / var(--ocn-glass-alpha)) !important;
		background-color: rgb(248 251 254 / var(--ocn-glass-alpha)) !important;

		border-color: rgb(23 43 61 / 0.10) !important;

		-webkit-backdrop-filter:
			blur(var(--ocn-glass-blur))
			saturate(160%) !important;

		backdrop-filter:
			blur(var(--ocn-glass-blur))
			saturate(160%) !important;

		box-shadow:
			0 1px 0 rgb(255 255 255 / 0.60) inset,
			0 18px 44px -16px rgb(23 43 61 / 0.18),
			0 4px 14px rgb(23 43 61 / 0.07);
	}
}


/* =========================================================
   OCN — MOBILE NAV OVERLAY
   ========================================================= */

@media (max-width: 782px) {

	.ocn-site-header .wp-block-navigation__responsive-container {
		background-color:
			color-mix(
				in srgb,
				var(
					--awp-nav-mobile-bg,
					var(--wp--preset--color--background)
				) 82%,
				transparent
			) !important;

		color:
			var(
				--awp-nav-mobile-fg,
				var(--wp--preset--color--text)
			);

		-webkit-backdrop-filter:
			blur(var(--awp-nav-mobile-blur, 20px))
			saturate(160%);

		backdrop-filter:
			blur(var(--awp-nav-mobile-blur, 20px))
			saturate(160%);
	}
}


/* =========================================================
   OCN — BUTTON LIGHT SWEEP
   Large, doux, lent.
   ========================================================= */

.ocn-button .wp-block-button__link,
.wp-block-button.ocn-button > .wp-block-button__link {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}


/*
 * ::before reste disponible pour l'effet uniquement sur les boutons
 * qui n'utilisent pas l'ancien modèle icon-before d'Atomic.
 */
.ocn-button:not(.is-style-has-icon-before)
	.wp-block-button__link::before,

.wp-block-button.ocn-button:not(.is-style-has-icon-before)
	> .wp-block-button__link::before {
	content: "";
	position: absolute;

	top: -75%;
	bottom: -75%;
	left: -155%;

	width: 150%;

	pointer-events: none;
	z-index: 2;

	background:
		linear-gradient(
			105deg,
			transparent 0%,
			rgb(255 255 255 / 0.02) 12%,
			rgb(255 255 255 / 0.055) 26%,
			rgb(255 255 255 / 0.11) 40%,
			rgb(255 255 255 / 0.17) 50%,
			rgb(255 255 255 / 0.11) 60%,
			rgb(255 255 255 / 0.055) 74%,
			rgb(255 255 255 / 0.02) 88%,
			transparent 100%
		);

	filter: blur(9px);

	transform: translateX(0) skewX(-8deg);
}


.ocn-button:not(.is-style-has-icon-before)
	.wp-block-button__link:hover::before,

.ocn-button:not(.is-style-has-icon-before)
	.wp-block-button__link:focus-visible::before,

.wp-block-button.ocn-button:not(.is-style-has-icon-before)
	> .wp-block-button__link:hover::before,

.wp-block-button.ocn-button:not(.is-style-has-icon-before)
	> .wp-block-button__link:focus-visible::before {
	animation:
		ocn-button-sweep
		1800ms
		cubic-bezier(0.22, 0.61, 0.36, 1);
}


@keyframes ocn-button-sweep {
	from {
		transform: translateX(0) skewX(-8deg);
	}

	to {
		transform: translateX(235%) skewX(-8deg);
	}
}


/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.ocn-button .wp-block-button__link::before {
		animation: none !important;
	}
}

/* =========================================================
   OCN — HOMEPAGE EDITORIAL ICONS
   Les icônes des informations pratiques utilisent le bleu OCN.
   ========================================================= */

.ocn-editorial-index li .awp-icon {
	--awp-icon-primary:
		var(--wp--preset--color--primary, #087ff5) !important;

	--awp-icon-secondary:
		var(--wp--preset--color--primary, #087ff5) !important;

	color: var(--wp--preset--color--primary, #087ff5) !important;
}


/* =========================================================
   OCN — SPECIALTY CTA BUTTON ICONS
   Taille spécifique à cette composition uniquement.
   ========================================================= */

.ocn-expertise-entry .wp-block-button__link .awp-button-icon {
	width: 1.2em !important;
	height: 1.2em !important;
	flex: 0 0 auto;
}

.ocn-expertise-entry .wp-block-button__link {
	gap: 0.5rem;
}

/* =========================================================
   OCN PAGE INTRO — EDITORIAL WIDTH
   ========================================================= */

.ocn-page-intro__inner {
	width: min(100%, 56.25rem); /* 900px */
	margin-inline: auto;
}

.ocn-center-page .ocn-page-intro h1 {
	max-width: none;

	font-size: clamp(3.4rem, 5.5vw, 5.7rem);
	font-weight: 640;
	line-height: 0.94;
	letter-spacing: -0.055em;

	color: var(--ocn-night);
	text-wrap: balance;
}

.ocn-center-page .ocn-page-intro .ocn-home__lede {
	max-width: 45rem; /* 720px */

	margin-inline: 0;
	margin-top: 0;

	color: var(--ocn-slate);

	font-size: clamp(1rem, 1.15vw, 1.1rem);
	line-height: 1.65;
}

/* =========================================================
   OCN — LE CENTRE / EDITORIAL RHYTHM
   ========================================================= */

.ocn-center-page {
	color: var(--ocn-night);
}

.ocn-center-page h1,
.ocn-center-page h2,
.ocn-center-page h3 {
	color: var(--ocn-night);
}


/* Eyebrow / kicker */
.ocn-center-page .ocn-page__eyebrow,
.ocn-center-page .ocn-home__kicker {
	margin-top: 0;
	margin-bottom: 1.25rem;
}


/* Main page intro */
.ocn-center-page .ocn-page-intro__inner {
	width: min(100%, 56.25rem);
	margin-inline: auto;
}

.ocn-center-page .ocn-page-intro h1 {
	margin: 0 0 1.35rem;
}

.ocn-center-page .ocn-page-intro .ocn-home__lede {
	margin: 0;
	max-width: 45rem;
}


/* Image / text presentation block */
.ocn-center-page .ocn-split-feature__body h2 {
	margin: 0 0 1.65rem;
}

.ocn-center-page .ocn-split-feature__body .ocn-home__intro {
	margin: 0;
}


/* Editorial index */
.ocn-center-page .ocn-editorial-index {
	margin: 2rem 0 0;
	padding: 0;
}

.ocn-center-page .ocn-editorial-index li {
	padding-block: 1.1rem;
}


/* Shorter OCN editorial rule */
.ocn-center-page .ocn-page__eyebrow::before,
.ocn-center-page .ocn-home__kicker::before {
	width: 34px;
}

@media (max-width: 680px) {
	.ocn-center-page .ocn-page__eyebrow::before,
	.ocn-center-page .ocn-home__kicker::before {
		width: 26px;
	}
}

/* =========================================================
   TEAM GRID — COMPACT VARIANT
   ========================================================= */

.ocn-team-grid--compact {
	gap: clamp(1.25rem, 2vw, 1.75rem);
}

.ocn-team-grid--compact .ocn-practitioner-card__media {
	aspect-ratio: 1 / 1;
}

.ocn-team-grid--compact .ocn-practitioner-card__content {
	gap: 0.7rem;
	padding: 1rem 1.1rem 1.1rem;
}

.ocn-team-grid--compact .ocn-practitioner-card__specialty {
	padding-bottom: 0.3rem;
}

.ocn-team-grid--compact .ocn-practitioner-card__content p:not(.ocn-practitioner-card__specialty) {
	line-height: 1.55;
}

.ocn-team-grid--compact .ocn-practitioner-card__actions {
	gap: 0.55rem;
	padding-top: 0.2rem;
}

.ocn-team-grid--compact .ocn-practitioner-card__actions .wp-block-button__link {
	min-height: 42px;
	padding-top: 0.55rem;
	padding-bottom: 0.55rem;
}


/* Contact — layout éditorial du formulaire */

.ocn-contact-form-layout {
	display: grid;
	grid-template-columns:
		minmax(17rem, 0.72fr)
		minmax(0, 1.28fr);
	gap: clamp(3rem, 7vw, 6rem);
	align-items: start;
}

.ocn-contact-form-copy {
	max-width: 30rem;
}

.ocn-contact-form-slot {
	box-shadow: var(--ocn-shadow-soft);
}

@media (max-width: 960px) {

	.ocn-contact-form-layout {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.ocn-contact-form-copy {
		max-width: 42rem;
	}
}


/* =========================================================
   OCN FOOTER — CANONICAL
   ========================================================= */

.ocn-site-footer {
	background: var(--wp--preset--color--contrast);
	color: rgb(255 255 255 / 0.80);
}


/* =========================================================
   MAIN GRID
   ========================================================= */

.ocn-site-footer .awp-site-footer__inner {
	display: grid;

	grid-template-columns:
		minmax(13rem, 1.2fr)
		minmax(11rem, 1fr)
		minmax(11rem, 1fr)
		minmax(13rem, 1.05fr);

	gap: var(--wp--preset--spacing--50);

	align-items: start;
}


/* =========================================================
   COLUMNS
   ========================================================= */

.ocn-site-footer__identity,
.ocn-site-footer__specialties,
.ocn-site-footer__team,
.ocn-site-footer__cta {
	min-width: 0;
}

.ocn-site-footer__specialties,
.ocn-site-footer__team,
.ocn-site-footer__cta {
	display: grid;
	align-content: start;

	gap: var(--wp--preset--spacing--20);
}


/* =========================================================
   IDENTITY
   ========================================================= */

.ocn-site-footer__identity {
	display: grid;
	align-content: start;
	justify-items: center;

	gap: var(--wp--preset--spacing--20);

	text-align: center;
}


/* =========================================================
   LOGO
   ========================================================= */

.ocn-site-footer__logo-wrap {
	display: flex !important;

	width: 100%;

	justify-content: center !important;
	align-items: flex-start;

	margin: 0 !important;
	padding: 0 !important;
}

.ocn-site-footer__logo {
	display: block;

	width: clamp(11rem, 12vw, 13.75rem);
	max-width: 100%;

	margin: 0 !important;
	padding: 0 !important;
}

.ocn-site-footer__logo img {
	display: block;

	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;

	margin: 0 !important;

	object-fit: contain;
	object-position: center;
}


/* =========================================================
   ADDRESS
   ========================================================= */

.ocn-site-footer__address {
	margin: 0;

	color: rgb(255 255 255 / 0.72);

	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;

	text-align: center;
}


/* =========================================================
   COLUMN LABELS
   ========================================================= */

.ocn-site-footer__label {
	margin: 0;

	color: var(--wp--preset--color--background);

	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.2;

	letter-spacing: 0.18em;
	text-transform: uppercase;

	opacity: 0.82;
}


/* =========================================================
   DYNAMIC LINKS
   ========================================================= */

.ocn-footer-dynamic-links {
	margin: 0;
}

.ocn-footer-dynamic-links .wp-block-post-template {
	display: grid;

	gap: 0.7rem;

	margin: 0;
	padding: 0;

	list-style: none;
}

.ocn-footer-dynamic-links .wp-block-post {
	margin: 0;
	padding: 0;
}

.ocn-footer-dynamic-links .wp-block-post-title {
	margin: 0 !important;

	color: rgb(255 255 255 / 0.82) !important;

	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.4;

	letter-spacing: 0;
}

.ocn-footer-dynamic-links .wp-block-post-title a {
	color: inherit !important;

	text-decoration: none !important;

	transition: color 180ms ease;
}

.ocn-footer-dynamic-links .wp-block-post-title a:hover,
.ocn-footer-dynamic-links .wp-block-post-title a:focus-visible {
	color: var(--wp--preset--color--background) !important;

	text-decoration: none !important;
}


/* =========================================================
   GENERIC FOOTER LINKS
   ========================================================= */

.ocn-site-footer a {
	color: rgb(255 255 255 / 0.80);

	text-decoration: none;
}

.ocn-site-footer a:hover,
.ocn-site-footer a:focus-visible {
	color: var(--wp--preset--color--background);
}


/* =========================================================
   CTA
   ========================================================= */

.ocn-site-footer__cta {
	justify-items: start;
}

.ocn-site-footer__actions {
	margin: 0.35rem 0 0;
}

.ocn-site-footer__actions .wp-block-button {
	margin: 0;
}

.ocn-site-footer__actions .wp-block-button__link {
	background: rgb(255 255 255 / 0.06);

	color: var(--wp--preset--color--background);

	border:
		1px solid
		rgb(255 255 255 / 0.55);

	box-shadow: none;
}

.ocn-site-footer__actions .wp-block-button__link:hover,
.ocn-site-footer__actions .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--background);

	color: var(--wp--preset--color--contrast);

	border-color: var(--wp--preset--color--background);
}


/* =========================================================
   META
   ========================================================= */

.ocn-site-footer__meta {
	margin: 0;

	color: rgb(255 255 255 / 0.68);

	line-height: 1.6;
}

.ocn-site-footer__meta a {
	color: inherit;
}


/* =========================================================
   BOTTOM BAR
   ========================================================= */

.ocn-site-footer__bottom {
	width: 100%;

	margin-block-start: var(--wp--preset--spacing--50);

	align-items: center;

	column-gap: var(--wp--preset--spacing--40);
	row-gap: 0.75rem;
}

.ocn-site-footer__bottom > * {
	margin: 0;
}


/* =========================================================
   LEGAL NAVIGATION
   ========================================================= */

.ocn-site-footer .awp-footer-legal-links {
	margin: 0;
}

.ocn-site-footer
	.awp-footer-legal-links
	.wp-block-navigation__container {
	display: flex;

	flex-wrap: wrap;

	align-items: center;
	justify-content: flex-end;

	gap: var(--wp--preset--spacing--30);
}

.ocn-site-footer
	.awp-footer-legal-links
	.wp-block-navigation-item__content {
	color: rgb(255 255 255 / 0.72);

	text-decoration: none;
}

.ocn-site-footer
	.awp-footer-legal-links
	.wp-block-navigation-item__content:hover,
.ocn-site-footer
	.awp-footer-legal-links
	.wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--background);

	text-decoration: none;
}

.ocn-site-footer
	.awp-footer-legal-links
	.wp-block-navigation-item__label {
	font-size: 0.85rem;
	line-height: 1.4;
}


/* =========================================================
   ATOMIC ATTRIBUTION
   ========================================================= */

.ocn-site-footer
	.atomic-wp-footer-attribution,
.ocn-site-footer
	.awp-footer-attribution {
	color: rgb(255 255 255 / 0.38);

	font-size: 0.8rem;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1023px) {

	.ocn-site-footer .awp-site-footer__inner {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap:
			var(--wp--preset--spacing--50)
			var(--wp--preset--spacing--40);
	}

	.ocn-site-footer__identity {
		justify-items: start;

		text-align: left;
	}

	.ocn-site-footer__logo-wrap {
		justify-content: flex-start !important;
	}

	.ocn-site-footer__address {
		text-align: left;
	}
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 599px) {
	.ocn-site-footer .awp-site-footer__inner {
		grid-template-columns: 1fr;

		gap: var(--wp--preset--spacing--50);
	}

	.ocn-site-footer__identity,
	.ocn-site-footer__specialties,
	.ocn-site-footer__team,
	.ocn-site-footer__cta {
		justify-items: start;

		text-align: left;
	}

	.ocn-site-footer__logo-wrap {
		justify-content: flex-start !important;
	}

	.ocn-site-footer__logo {
		width: 11rem;
	}

	.ocn-site-footer__address {
		text-align: left;
	}

	.ocn-site-footer__bottom {
		flex-direction: column;

		align-items: flex-start;
		justify-content: flex-start;

		gap: 0.8rem;
	}

	.ocn-site-footer
		.awp-footer-legal-links
		.wp-block-navigation__container {
		justify-content: flex-start;

		gap: 0.5rem 1rem;
	}
}

/* =========================================================
   CONTACT — final polish
   ========================================================= */


/* ---------------------------------------------------------
   Adresse + carte : exactement la même hauteur
   --------------------------------------------------------- */

.ocn-contact-access .wp-block-columns {
	align-items: stretch !important;
}

.ocn-contact-access .wp-block-column {
	display: flex;
}

.ocn-contact-access .wp-block-column > .wp-block-group {
	flex: 1 1 auto;
	width: 100%;
}

.ocn-contact-access .ocn-contact-note,
.ocn-contact-access .ocn-map-shell {
	height: 100%;
	min-height: 100%;
}

.ocn-contact-access .ocn-contact-note {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ocn-contact-access .ocn-map-shell {
	display: flex;
	overflow: hidden;
}

.ocn-contact-access .ocn-map-shell .awp-map {
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	min-height: 100%;
	margin: 0;
}


/* ---------------------------------------------------------
   Formulaire : plus propre / plus premium
   --------------------------------------------------------- */

.ocn-contact-form-slot {
	padding: clamp(1.5rem, 3vw, 2.25rem) !important;

	border-color: rgba(23, 43, 61, 0.1) !important;

	box-shadow:
		0 18px 45px rgba(23, 43, 61, 0.07);
}

.ocn-contact-form-slot .awp-form {
	gap: 1rem;
}

.ocn-contact-form-slot .awp-form label {
	color: var(--wp--preset--color--contrast);

	font-size: 0.82rem;
	font-weight: 600;
}

.ocn-contact-form-slot .awp-form input:not([type="checkbox"]),
.ocn-contact-form-slot .awp-form select,
.ocn-contact-form-slot .awp-form textarea {
	width: 100%;

	border-color: rgba(23, 43, 61, 0.2);
	background: #fff;

	transition:
		border-color 160ms ease,
		box-shadow 160ms ease;
}

.ocn-contact-form-slot .awp-form input:not([type="checkbox"]):focus,
.ocn-contact-form-slot .awp-form select:focus,
.ocn-contact-form-slot .awp-form textarea:focus {
	border-color: var(--wp--preset--color--primary);

	box-shadow:
		0 0 0 3px rgba(8, 127, 245, 0.1);

	outline: none;
}

.ocn-contact-form-slot .awp-form textarea {
	min-height: 8.5rem;
	resize: vertical;
}


/* ---------------------------------------------------------
   SUBMIT — on veut le voir, point
   --------------------------------------------------------- */

.ocn-contact-form-slot .awp-form button[type="submit"],
.ocn-contact-form-slot .awp-form input[type="submit"] {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;

	visibility: visible !important;
	opacity: 1 !important;

	width: 100%;
	min-height: 48px;

	margin-top: 0.35rem;
	padding: 0.75rem 1.4rem;

	border: 1px solid var(--wp--preset--color--primary) !important;
	border-radius: var(--wp--custom--radius--md);

	background: var(--wp--preset--color--primary) !important;
	color: #fff !important;

	font: inherit;
	font-weight: 650;

	cursor: pointer;
}

.ocn-contact-form-slot .awp-form button[type="submit"]:hover,
.ocn-contact-form-slot .awp-form input[type="submit"]:hover {
	filter: brightness(0.94);
}


/* Checkbox / consentement un peu plus propre */

.ocn-contact-form-slot .awp-form input[type="checkbox"] {
	width: 1rem;
	height: 1rem;
	margin-top: 0.15rem;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 782px) {

	.ocn-contact-access .wp-block-column {
		display: block;
	}

	.ocn-contact-access .ocn-contact-note,
	.ocn-contact-access .ocn-map-shell {
		height: auto;
	}

	.ocn-contact-access .ocn-map-shell .awp-map {
		min-height: 350px;
	}

	.ocn-contact-form-slot {
		padding: 1.25rem !important;
	}
}

/* =========================================================
   OCN — LEGAL PAGE
   ========================================================= */

.ocn-legal-page {
	padding-block:
		clamp(4rem, 7vw, 7rem)
		clamp(5rem, 8vw, 8rem);
}

.ocn-legal-page__inner {
	width: min(100%, 56.25rem);
	margin-inline: auto;
}

.ocn-legal-page__intro {
	margin-bottom: clamp(3.5rem, 6vw, 5rem);
}

.ocn-legal-page__intro h1 {
	max-width: 50rem;
	margin: 0;
	color: var(--ocn-night);
}

.ocn-legal-page__lede {
	max-width: 44rem;
	margin: 1.5rem 0 0;
	font-size: clamp(1rem, 1.1vw, 1.1rem);
	line-height: 1.7;
	color: var(--ocn-slate);
}

.ocn-legal-section {
	padding-block: clamp(1.75rem, 3vw, 2.5rem);
	border-top: 1px solid var(--ocn-border-soft);
}

.ocn-legal-section h2 {
	max-width: 46rem;
	margin: 0 0 1rem;
	color: var(--ocn-night);
	font-size: clamp(1.5rem, 2.4vw, 2.15rem);
	line-height: 1.08;
	letter-spacing: -0.035em;
}

.ocn-legal-section p {
	max-width: 48rem;
	margin-block: 0.7rem 0;
}

.ocn-legal-section p + p {
	margin-top: 1rem;
}

.ocn-legal-meta {
	margin-top: 2.5rem;
	color: var(--wp--preset--color--muted);
}

/* =========================================================
   OCN SURFACES — CSS ONLY
   ========================================================= */

.ocn-surface {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.ocn-surface > * {
	position: relative;
	z-index: 2;
}

.ocn-surface::before,
.ocn-surface::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}


/* =========================================================
   MIST SURFACE
   ========================================================= */

.ocn-surface--mist {
	background:
		linear-gradient(
			180deg,
			#f8fbfe 0%,
			#edf5fb 100%
		);
}

.ocn-surface--mist::before {
	z-index: 0;

	background:
		radial-gradient(
			circle at 82% 25%,
			rgb(8 127 245 / 0.08),
			transparent 28%
		),
		radial-gradient(
			circle at 75% 85%,
			rgb(8 127 245 / 0.05),
			transparent 32%
		),
		linear-gradient(
			160deg,
			transparent 0%,
			rgb(255 255 255 / 0.7) 44%,
			transparent 72%
		);
}

.ocn-surface--mist::after {
	z-index: 1;

	background-image:
		radial-gradient(
			circle,
			rgb(8 127 245 / 0.12) 0.8px,
			transparent 0.9px
		);

	background-size: 14px 14px;
	background-position: 100% 0;

	mask-image:
		linear-gradient(
			90deg,
			transparent 0%,
			transparent 58%,
			rgb(0 0 0 / 0.55) 78%,
			transparent 100%
		);

	opacity: 0.22;
}


/* =========================================================
   WHITE EDITORIAL SURFACE
   ========================================================= */

.ocn-surface--white {
	background: #fff;
}

.ocn-surface--white::before {
	z-index: 0;

	background:
		radial-gradient(
			circle at 88% 52%,
			rgb(8 127 245 / 0.055),
			transparent 30%
		),
		radial-gradient(
			circle at 70% 90%,
			rgb(23 43 61 / 0.025),
			transparent 35%
		);
}

.ocn-surface--white::after {
	z-index: 1;

	background:
		linear-gradient(
			115deg,
			transparent 0%,
			rgb(255 255 255 / 0.85) 38%,
			transparent 65%
		);

	opacity: 0.8;
}


/* =========================================================
   NIGHT SURFACE
   ========================================================= */

.ocn-surface--night {
	background:
		linear-gradient(
			145deg,
			#0d2235 0%,
			#172b3d 55%,
			#1c3852 100%
		);

	color: #fff;
}

.ocn-surface--night::before {
	z-index: 0;

	background:
		radial-gradient(
			circle at 85% 22%,
			rgb(87 157 224 / 0.18),
			transparent 26%
		),
		radial-gradient(
			circle at 75% 85%,
			rgb(8 127 245 / 0.12),
			transparent 34%
		);
}

.ocn-surface--night::after {
	z-index: 1;

	background:
		radial-gradient(
			circle at 50% 50%,
			rgb(255 255 255 / 0.035) 0.7px,
			transparent 0.8px
		);

	background-size: 7px 7px;

	opacity: 0.18;
}