/* ===== HEADER ULTRA ADAPTATIF — LIGHT ONLY (fix scroll + menu mobile full-screen) ===== */
:root {
    --hx-bg: #fff;
    --hx-bg-2: #f7f9fc;
    --hx-line: #e7edf6;
    --hx-text: #0b1220;
    --hx-muted: #58627a;
    --hx-accent: #2563eb;
    --hx-accent2: #7c3aed;
    --hx-shadow: 0 18px 50px rgba(11, 18, 32, .08);
}

/* kill le scroll horizontal global */
html,
body {
    height: 100%;
    overflow-x: hidden
}

* {
    box-sizing: border-box
}

a,
button,
summary {
    -webkit-tap-highlight-color: transparent
}

:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--hx-accent) 60%, transparent);
    outline-offset: 2px
}

body {
    margin: 0;
    font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--hx-text);
    background: var(--hx-bg);
    line-height: 1.35;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Accent + header */
.ux-accent {
    height: 4px;
    background: linear-gradient(90deg, var(--hx-accent), var(--hx-accent2))
}

.ux-header {
    --hx-h: 64px;
    /* hauteur header réf (update en mobile plus bas) */
    position: sticky;
    top: 0;
    z-index: 80;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(1.15) blur(14px);
    border-bottom: 1px solid var(--hx-line);
    box-shadow: 0 8px 24px rgba(11, 18, 32, .06);
    padding-top: env(safe-area-inset-top);
}

.ux-wrap {
    max-width: min(1280px, 100% - 32px);
    margin-inline: auto;
    padding-block: clamp(8px, 1.4vw, 14px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(8px, 1vw, 16px);
    position: relative;
    min-height: var(--hx-h);
    /* lock la hauteur pour le calcul du menu mobile */
    container-type: inline-size;
}

/* Brand */
.ux-brand {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1vw, 12px);
    text-decoration: none
}

.ux-logo {
    display: grid;
    place-items: center;
    inline-size: clamp(26px, 3.2vw, 32px);
    block-size: clamp(26px, 3.2vw, 32px);
    border-radius: 10px;
    box-shadow: 0 6px 22px rgba(37, 99, 235, .18)
}

.ux-name {
    font-weight: 900;
    letter-spacing: .2px;
    color: var(--hx-text);
    font-size: clamp(.98rem, 1.5vw, 1.08rem)
}

/* Menu desktop */
.ux-menu {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.6vw, 20px)
}

.ux-link {
    position: relative;
    display: inline-block;
    padding-block: clamp(6px, .8vw, 10px);
    padding-inline: clamp(4px, .6vw, 6px);
    font-weight: 700;
    color: var(--hx-muted);
    text-decoration: none;
    --u: linear-gradient(90deg, var(--hx-accent), var(--hx-accent2));
    background-image: var(--u);
    background-repeat: no-repeat;
    background-size: 0% 2px;
    background-position: 0% 100%;
    transition: background-size .25s ease, color .2s ease;
}

.ux-link:hover {
    color: var(--hx-text);
    background-size: 100% 2px
}

/* Mega (details) */
.ux-mega {
    position: relative
}

.ux-mega>summary {
    list-style: none;
    cursor: pointer
}

.ux-mega>summary::-webkit-details-marker {
    display: none
}

.ux-mega[open]>summary {
    color: var(--hx-text)
}

.ux-mega__panel {
    position: absolute;
    inset-block-start: calc(100% + 12px);
    inset-inline-start: 0;
    min-inline-size: 260px;
    background: #fff;
    border: 1px solid var(--hx-line);
    border-radius: 16px;
    padding: 10px;
    box-shadow: var(--hx-shadow);
    z-index: 90;
}

.ux-mega__panel a {
    display: block;
    padding: 12px;
    border-radius: 10px;
    color: var(--hx-text);
    text-decoration: none;
    font-weight: 600;
    min-block-size: 44px;
}

.ux-mega__panel a:hover {
    background: #eef3ff
}

/* Actions */
.ux-actions {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1vw, 12px)
}

.ux-btn {
    display: inline-block;
    padding: clamp(8px, 1.1vw, 12px) clamp(10px, 1.4vw, 14px);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--hx-accent), var(--hx-accent2));
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    box-shadow: 0 12px 30px rgba(37, 99, 235, .20);
    min-block-size: 44px;
    white-space: nowrap;
}

.ux-btn.ghost {
    background: #fff;
    border: 1px solid #d7deea;
    color: var(--hx-text);
    box-shadow: none
}

.ux-link.strong {
    color: var(--hx-text)
}

/* User menu */
.ux-user {
    position: relative
}

.ux-user__btn {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--hx-line);
    background: #fff;
    border-radius: 999px;
    padding: 8px 12px;
    cursor: pointer;
    min-block-size: 44px
}

.ux-user__btn::-webkit-details-marker {
    display: none
}

.ux-avatar {
    display: grid;
    place-items: center;
    inline-size: clamp(30px, 3.2vw, 34px);
    block-size: clamp(30px, 3.2vw, 34px);
    border-radius: 50%;
    background: #eef3ff;
    color: #1e3a8a;
    font-weight: 900
}

.ux-user__name {
    font-weight: 700;
    color: var(--hx-text)
}

.ux-user__menu {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: calc(100% + 8px);
    min-inline-size: 200px;
    background: #fff;
    border: 1px solid var(--hx-line);
    border-radius: 12px;
    padding: 6px;
    box-shadow: var(--hx-shadow);
    z-index: 90;
}

.ux-user__menu a {
    display: block;
    padding: 10px;
    border-radius: 8px;
    color: var(--hx-text);
    text-decoration: none;
    min-block-size: 44px
}

.ux-user__menu a:hover {
    background: #eef3ff
}

/* Ruban */
.ux-ribbon {
    position: relative;
    block-size: 10px;
    border-block-start: 1px solid var(--hx-line)
}

.ux-ribbon__glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(600px 14px at 10% 50%, rgba(37, 99, 235, .22), transparent 60%),
        radial-gradient(600px 14px at 90% 50%, rgba(124, 58, 237, .22), transparent 60%);
    pointer-events: none;
}

/* Burger */
.ux-burger__cb {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none
}

.ux-burger {
    display: none;
    inline-size: 42px;
    block-size: 42px;
    border-radius: 10px;
    padding: 8px;
    cursor: pointer;
    z-index: 100
}

.ux-burger span {
    display: block;
    block-size: 2px;
    background: var(--hx-text);
    margin-block: 6px;
    border-radius: 2px
}

/* ===== Container queries desktop (fine-tune) ===== */
@container (max-width: 980px) {
    .ux-menu {
        gap: 14px
    }

    .ux-link {
        padding-block: 9px
    }

    .ux-btn {
        padding-block: 9px;
        padding-inline: 12px
    }
}

@container (max-width: 760px) {
    .ux-actions {
        gap: 10px
    }

    .ux-name {
        font-size: .98rem
    }
}

/* ===== Responsive ===== */
/* Tablet ≤ 1024px */
@media (max-width:1024px) {
    .ux-wrap {
        padding-inline: 16px
    }
}

/* Mobile LARGE ≤ 900px  — MENU = OVERLAY FULL-SCREEN (fix “summary” caché) */
@media (max-width:900px) {
    .ux-header {
        --hx-h: 60px
    }

    /* header un peu plus compact sur mobile */
    .ux-burger {
        display: inline-grid;
        place-items: center
    }

    .ux-menu {
        position: fixed;
        /* avant: absolute → bug de hauteur, now full-screen */
        top: calc(env(safe-area-inset-top) + var(--hx-h));
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, .98);
        backdrop-filter: blur(8px);
        border-top: 1px solid var(--hx-line);
        display: none;
        flex-direction: column;
        gap: 0;
        padding: 10px 0;
        overflow: auto;
        /* scroll interne propre */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        z-index: ninety-nine;
        /* 99 > header */
    }

    .ux-burger__cb:checked~.ux-menu {
        display: flex
    }

    .ux-menu .ux-link,
    .ux-menu .ux-mega {
        inline-size: 100%;
        padding: 12px 16px
    }

    .ux-menu .ux-link {
        font-size: 1.05rem
    }

    /* le mega se déroule DANS le flux → pas coupé */
    .ux-mega__panel {
        position: static;
        box-shadow: none;
        border-radius: 12px;
        margin: 6px 0;
        padding: 6px
    }
}

/* Mobile MED ≤ 680px */
@media (max-width:680px) {
    .ux-logo {
        inline-size: 28px;
        block-size: 28px
    }

    .ux-btn {
        font-weight: 800
    }

    .ux-user__btn {
        padding: 6px 10px
    }

    .ux-avatar {
        inline-size: 32px;
        block-size: 32px
    }

    .ux-ribbon {
        display: none
    }
}

/* Mobile SMALL ≤ 480px */
@media (max-width:480px) {
    .ux-wrap {
        padding-inline: 12px
    }

    .ux-actions {
        gap: 8px
    }

    .ux-btn {
        padding: 8px 10px;
        border-radius: 10px
    }

    .ux-user__btn {
        padding: 6px 10px
    }
}

/* Ultra-wide ≥ 1600px */
@media (min-width:1600px) {
    .ux-wrap {
        max-width: min(1400px, 100% - 96px)
    }

    .ux-menu {
        gap: 24px
    }

    .ux-link {
        padding-inline: 8px
    }
}

/* Pointer coarse (touch) */
@media (pointer:coarse) {

    .ux-link,
    .ux-btn,
    .ux-user__btn {
        min-block-size: 44px
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ux-link {
        transition: none
    }
}

/* Forced colors */
@media (forced-colors: active) {
    :root {
        --hx-line: CanvasText
    }

    .ux-header {
        background: Canvas;
        border-color: CanvasText
    }

    .ux-link,
    .ux-name,
    .ux-user__name {
        color: CanvasText
    }

    .ux-btn {
        border: 1px solid CanvasText;
        box-shadow: none
    }
}

/* Print */
@media print {

    .ux-accent,
    .ux-header {
        display: none !important
    }
}

/* Compat container principal */
.container {
    max-width: min(1200px, 100% - 32px);
    margin-inline: auto;
    padding-inline: 0;
}

/* iOS/Chrome mobile viewport */
@supports (height: 100dvh) {
    .ux-menu {
        max-block-size: calc(100dvh - var(--hx-h) - env(safe-area-inset-top))
    }
}