/* ============================================================
   PHONY — Chrome 2026 (chargé en dernier)
   Overlay glass sur le hero, IA courte, drawer éditorial.
   Breakpoint hamburger : 1200px (tablette = menu).
============================================================ */

.skip-link {
    position: absolute;
    left: 12px;
    top: -48px;
    z-index: 4000;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--primary-blue, oklch(45% 0.19 260));
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}
.skip-link:focus {
    top: calc(10px + env(safe-area-inset-top, 0px));
    outline: 2px solid var(--accent-yellow, oklch(85% 0.21 85));
    outline-offset: 3px;
}

.crumbs {
    background: oklch(97% 0.01 260);
    border-bottom: 1px solid oklch(92% 0.01 260);
}
.crumbs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 0;
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px var(--spacing-md, 24px);
    list-style: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-700, oklch(45% 0.01 260));
}
.crumbs__item { display: inline-flex; align-items: center; }
.crumbs__item:not(:last-child)::after {
    content: '/';
    margin: 0 8px;
    color: oklch(70% 0.01 260);
    font-weight: 500;
}
.crumbs a { color: var(--primary-blue, oklch(45% 0.19 260)); }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--gray-900, oklch(20% 0.01 260)); }

:root {
    --hdr-h: 64px;
    --hdr-h-m: 56px;
    --hdr-logo: 32px;
    --hdr-logo-m: 32px;
    --hdr-safe: env(safe-area-inset-top, 0px);
    --hdr-stack: calc(var(--hdr-h) + var(--hdr-safe));
    --hdr-glass: color-mix(in oklch, white 64%, transparent);
    --hdr-glass-scrolled: color-mix(in oklch, white 88%, transparent);
    --hdr-line: oklch(91% 0.01 260);
    --hdr-ink: oklch(18% 0.02 260);
    --hdr-muted: oklch(48% 0.02 260);
}

@media (max-width: 1200px) {
    :root { --hdr-stack: calc(var(--hdr-h-m) + var(--hdr-safe)); }
}

.admin-view-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    min-height: 36px;
    padding: 6px 16px;
    background: var(--accent-yellow, oklch(85% 0.21 85));
    color: oklch(22% 0.06 85);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.admin-view-banner a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
html:has(body.has-admin-view) {
    --hdr-stack: calc(var(--hdr-h) + var(--hdr-safe) + 36px);
}
@media (max-width: 1200px) {
    html:has(body.has-admin-view) {
        --hdr-stack: calc(var(--hdr-h-m) + var(--hdr-safe) + 36px);
    }
}

html {
    scroll-padding-top: calc(var(--hdr-stack) + 12px);
    overflow-x: clip !important;
}
body {
    overflow-x: clip !important;
}

/* --- Plus de bandeau promo --- */
.top-banner { display: none !important; }

/* --- Barre au-dessus du hero (plus d’overlay) --- */
.site-chrome {
    position: sticky !important;
    top: 0 !important;
    left: auto;
    right: auto;
    width: 100%;
    z-index: 2100 !important;
    margin-bottom: 0 !important;
    padding-top: var(--hdr-safe) !important;
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid var(--hdr-line) !important;
    box-shadow: none !important;
    transition: box-shadow .28s ease;
}

.site-chrome.is-scrolled {
    background: #fff !important;
    border-bottom-color: var(--hdr-line) !important;
    box-shadow: 0 10px 32px -20px oklch(20% 0.04 260 / 0.45);
}

.header {
    position: relative !important;
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
    padding: 0 !important;
}
.header::before,
.header::after { content: none !important; }
.header.scrolled { box-shadow: none !important; }

.header-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    min-height: var(--hdr-h) !important;
    overflow: visible !important;
}

.logo,
.logo:hover,
.logo:active {
    display: flex !important;
    align-items: center !important;
    transform: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
    opacity: 1 !important;
}
.logo picture { display: flex; line-height: 0; }
.logo-img,
.site-chrome .logo-img,
.header.scrolled .logo-img {
    height: var(--hdr-logo) !important;
    width: auto !important;
    max-width: min(160px, calc(100vw - 132px)) !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.header-call { display: none !important; }

.header-account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid oklch(20% 0.02 260 / 0.12);
    color: var(--hdr-ink);
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
    background: #fff;
    flex-shrink: 0;
}
.header-account svg { width: 16px; height: 16px; }
.header-account:hover,
.header-account.is-active {
    border-color: var(--primary-blue, oklch(45% 0.19 260));
    color: var(--primary-blue, oklch(45% 0.19 260));
    background: oklch(97% 0.012 260);
}

/* --- Desktop nav (≥ 1201px) --- */
@media (min-width: 1201px) {
    .nav-desktop {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        flex: 1 1 auto !important;
    }
    .nav-desktop > a,
    .nav-desktop .nav-dropdown-trigger {
        position: relative;
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        padding: 8px 14px !important;
        border-radius: 999px !important;
        font-size: 14.5px !important;
        font-weight: 600 !important;
        letter-spacing: -0.015em;
        color: var(--hdr-ink) !important;
        background: transparent !important;
        white-space: nowrap;
        transition: background .18s ease, color .18s ease !important;
    }
    .nav-desktop > a::after,
    .nav-desktop .nav-dropdown-trigger::after {
        content: none !important;
        display: none !important;
    }
    .nav-desktop > a:hover,
    .nav-desktop .nav-dropdown-trigger:hover {
        background: oklch(100% 0 0 / 0.55) !important;
        color: var(--hdr-ink) !important;
        transform: none !important;
    }
    .nav-desktop > a.active,
    .nav-desktop .nav-dropdown-trigger.active {
        background: oklch(100% 0 0 / 0.7) !important;
        color: var(--primary-blue, oklch(45% 0.19 260)) !important;
    }

    .nav-caret {
        font-size: 9px !important;
        opacity: .7;
        transition: transform .2s ease;
    }
    .nav-item-dropdown {
        position: relative;
        z-index: 2;
    }
    .nav-item-dropdown:hover,
    .nav-item-dropdown:focus-within { z-index: 5; }
    .nav-item-dropdown:hover .nav-caret,
    .nav-item-dropdown:focus-within .nav-caret { transform: rotate(180deg); }

    .nav-dropdown-panel {
        top: calc(100% - 2px) !important;
        margin-top: 0 !important;
        min-width: 272px !important;
        padding: 14px 8px 8px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-50%) !important;
        transition: opacity .12s ease, visibility 0s !important;
    }
    .nav-dropdown-panel::before {
        content: "";
        position: absolute;
        inset: 10px 0 0 0;
        z-index: -1;
        pointer-events: none;
        border-radius: 18px;
        border: 1px solid oklch(100% 0 0 / 0.5);
        background: color-mix(in oklch, white 86%, transparent);
        backdrop-filter: blur(24px) saturate(1.5);
        -webkit-backdrop-filter: blur(24px) saturate(1.5);
        box-shadow: 0 28px 56px -24px oklch(20% 0.05 260 / 0.5);
    }
    .nav-item-dropdown:hover .nav-dropdown-panel,
    .nav-item-dropdown:focus-within .nav-dropdown-panel {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateX(-50%) !important;
    }
    .nav-dropdown-panel a {
        position: relative;
        z-index: 1;
        display: flex !important;
        flex-direction: column;
        align-items: flex-start !important;
        gap: 2px;
        padding: 10px 12px !important;
        border-radius: 12px !important;
        font-size: 14.5px !important;
        font-weight: 600 !important;
        color: var(--hdr-ink) !important;
        background: transparent !important;
    }
    .nav-dropdown-panel a small {
        font-size: 12px;
        font-weight: 500;
        color: var(--hdr-muted);
        letter-spacing: 0;
    }
    .nav-dropdown-panel a:hover,
    .nav-dropdown-panel a.active {
        background: oklch(95% 0.03 260) !important;
        color: var(--primary-blue) !important;
        padding-left: 12px !important;
    }

    .btn-header-desktop {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        height: 42px !important;
        min-height: 42px !important;
        min-width: 0 !important;
        width: auto !important;
        padding: 0 16px !important;
        border-radius: 999px !important;
        background: var(--accent-yellow, oklch(85% 0.21 85)) !important;
        color: oklch(18% 0.04 85) !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em;
        box-shadow: 0 8px 20px -12px oklch(75% 0.18 85 / 0.9) !important;
        transform: none !important;
    }
    .btn-header-desktop::before { content: none !important; display: none !important; }
    .btn-header-desktop:hover {
        background: oklch(88% 0.2 85) !important;
        color: oklch(18% 0.04 85) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 12px 24px -12px oklch(70% 0.18 85 / 0.95) !important;
    }
    html.gsap-on .btn-header-desktop,
    html.gsap-on .btn-header-desktop:hover,
    html.gsap-on .btn-header-desktop:active {
        transform: none;
    }
    html.gsap-on .btn-header-desktop:hover {
        transform: translateY(-1px) !important;
    }
    .btn-header-phone-label { display: inline !important; }
    .header-call,
    .menu-toggle { display: none !important; }
    .mnav { display: none !important; }
}

@media (min-width: 1201px) and (max-width: 1500px) {
    .nav-desktop > a,
    .nav-desktop .nav-dropdown-trigger {
        padding: 8px 10px !important;
        font-size: 13.5px !important;
    }
    .header-account-label { display: none; }
    .header-account { width: 42px; padding: 0; }
}

/* --- Téléphone / tablette --- */
@media (max-width: 1200px) {
    .nav-desktop,
    .btn-header-desktop { display: none !important; }

    .header-container {
        min-height: var(--hdr-h-m) !important;
        gap: 12px !important;
    }
    .logo-img,
    .site-chrome .logo-img,
    .header.scrolled .logo-img {
        height: var(--hdr-logo-m) !important;
        max-width: calc(100vw - 120px) !important;
    }

    .header-account {
        width: 42px;
        height: 42px;
        padding: 0;
    }
    .header-account-label { display: none; }

    .menu-toggle {
        display: inline-flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        padding: 0 !important;
        border: 1px solid oklch(20% 0.02 260 / 0.12) !important;
        border-radius: 50% !important;
        background: oklch(100% 0 0 / 0.55) !important;
        z-index: 2102;
    }
    .menu-toggle .bar {
        width: 16px !important;
        height: 1.75px !important;
        margin: 0 !important;
        border-radius: 2px;
        background: var(--hdr-ink) !important;
        transform-origin: center;
    }
    .menu-toggle .bar:nth-child(3) { width: 16px !important; margin-left: 0 !important; }
    .menu-toggle.active .bar:nth-child(1) { transform: translateY(6.75px) rotate(45deg) !important; width: 16px !important; }
    .menu-toggle.active .bar:nth-child(2) { opacity: 0; transform: scaleX(0) !important; }
    .menu-toggle.active .bar:nth-child(3) { transform: translateY(-6.75px) rotate(-45deg) !important; width: 16px !important; margin-left: 0 !important; }

}

/* --- Drawer éditorial --- */
html.menu-open {
    overflow: clip !important;
    overscroll-behavior: none;
}
html.menu-open body {
    overflow: clip !important;
    overscroll-behavior: none;
    touch-action: auto !important;
}
html.menu-open .mnav__scroll {
    touch-action: pan-y;
    overscroll-behavior: contain;
}

.mnav {
    position: fixed;
    inset: 0;
    z-index: 2000;
    visibility: hidden;
    pointer-events: none;
    contain: layout paint;
    transition: visibility 0s linear .24s;
}
.mnav.is-open {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s;
}

.mnav__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: oklch(15% 0.03 260 / 0.42);
    opacity: 0;
    transition: opacity .2s ease;
}
.mnav.is-open .mnav__backdrop { opacity: 1; }

.mnav__panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    top: var(--site-top, 56px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: oklch(99.5% 0.005 260);
    transform: translate3d(0, 12px, 0);
    opacity: 1;
    transition: transform .28s cubic-bezier(0.16, 1, 0.3, 1);
}
.mnav.is-open .mnav__panel {
    transform: translate3d(0, 0, 0);
}

.mnav__scroll {
    flex: 1 1 auto;
    min-height: 0;
    width: 100% !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 4px 8px !important;
}

.mnav__list { list-style: none; margin: 0; padding: 4px 0 0; }
.mnav__item { border: none !important; }

.mnav__link,
.mnav__toggle {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 0;
    padding: 12px 8px !important;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none !important;
    font-family: var(--font-heading, Montserrat, sans-serif);
    font-size: clamp(28px, 8vw, 36px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.045em;
    line-height: 1.12;
    color: var(--hdr-ink) !important;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mnav__link.is-active,
.mnav__toggle.is-active {
    color: var(--primary-blue, oklch(45% 0.19 260)) !important;
    background: none !important;
}

.mnav__icon { display: none !important; }
.mnav__label { flex: 1; }

.mnav__link--sub,
.mnav__sublink {
    display: flex;
    align-items: center;
    min-height: 0;
    padding: 8px 8px 8px 10px !important;
    font-family: var(--font-body, Inter, sans-serif);
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em;
    color: var(--hdr-muted) !important;
    text-decoration: none;
}
.mnav__link--sub.is-active,
.mnav__sublink.is-active { color: var(--primary-blue) !important; }

.mnav__chevron {
    font-size: 14px !important;
    color: var(--hdr-muted);
    transition: transform .22s ease;
}
.mnav__sub.is-open .mnav__chevron { transform: rotate(180deg); }

.mnav__sub-panel {
    list-style: none;
    margin: 0 0 8px !important;
    padding: 0 8px 4px 10px !important;
    border: none !important;
}
.mnav__sub-panel[hidden] { display: none; }

.mnav__footer {
    flex-shrink: 0;
    display: grid;
    gap: 6px;
    width: 100% !important;
    max-width: none !important;
    padding: 10px 20px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid var(--hdr-line);
    background: oklch(99.5% 0.005 260) !important;
    box-shadow: none !important;
}
.mnav__call {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100% !important;
    min-height: 48px;
    padding: 0 16px !important;
    border-radius: 999px !important;
    background: var(--accent-yellow, oklch(85% 0.21 85)) !important;
    color: oklch(18% 0.04 85) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}
.mnav__call::before { content: none !important; }
.mnav__call:active { transform: scale(.98); }
.mnav__meta {
    margin: 0;
    text-align: center;
    font-size: 12px;
    color: var(--hdr-muted);
}

html.menu-open .scroll-top,
html.menu-open .dwc {
    visibility: hidden !important;
    pointer-events: none !important;
}

h2.footer-heading {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
}

@media (max-width: 1200px) and (max-height: 700px) {
    .mnav__link,
    .mnav__toggle {
        font-size: clamp(22px, 6.2vh, 30px) !important;
        padding: 8px 8px !important;
    }
    .mnav__footer {
        padding: 6px 20px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
        gap: 4px;
    }
    .mnav__call {
        min-height: 44px;
        padding: 0 16px !important;
        font-size: 15px !important;
    }
    .mnav__meta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .site-chrome,
    .mnav,
    .mnav__panel,
    .mnav__backdrop,
    .nav-desktop a { transition: none !important; }
}