/**
 * nav-v2.css — Navigation pure CSS, zéro Bootstrap / Porto theme
 * Dépend de : colors.css (palette), opto-core.css (tokens)
 *
 * Sections :
 *   1. Variables locales nav
 *   2. Accessibilité sr-only
 *   3. Header + sticky
 *   4. Logo
 *   5. Top bar (événement + téléphone)
 *   6. Actions (user, langue, CTA, hamburger)
 *   7. Dropdowns details/summary (topbar)
 *   8. Nav principale
 *   9. Mega-menu Products
 *  10. Dropdown simple (About Us)
 *  11. Badges HOT / NEW
 *  12. LinkedIn
 *  13. Mobile (< 992 px)
 *  14. Focus visible
 *  15. Reduced motion
 */

/* ─── 1. Variables locales nav ──────────────────────────── */
:root {
    --nav-bg:            #ffffff;
    --nav-height:        56px;   /* hauteur de la ligne menu */
    --nav-height-sticky: 56px;
    --nav-topbar-height: 40px;
    --nav-link-color:    var(--navy-blue);
    --nav-link-hover:    var(--mint-green);
}

/* ─── 2. Accessibilité sr-only ──────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ─── 3. Header + sticky ────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--nav-bg);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    transition: box-shadow var(--transition-base);
}
.site-header.is-sticky {
    box-shadow: var(--shadow-md);
}

.site-header__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: var(--nav-topbar-height) var(--nav-height);
    grid-template-areas:
        "logo topbar   actions"
        "logo site-nav site-nav";
    column-gap: var(--space-md);
}

/* Sticky : topbar disparaît, tout en 1 ligne */
.site-header.is-sticky .site-header__inner {
    grid-template-areas: "logo site-nav actions";
    grid-template-rows: var(--nav-height-sticky);
    align-items: center;
}

/* ─── 4. Logo ───────────────────────────────────────────── */
.site-header__logo {
    grid-area: logo;
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: var(--space-2) 0;
}

.site-header__logo-img {
    display: block;
    width: 185px;
    height: auto;
    transition: width var(--transition-base);
}

@media (min-width: 992px) {
    .site-header:not(.is-sticky) .site-header__logo-img {
        width: 265px;
    }
}

/* ─── 5. Top bar ────────────────────────────────────────── */
.site-header__topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-lg);
    height: var(--nav-topbar-height);
    border-bottom: 1px solid var(--border-color);
}

.site-header.is-sticky .site-header__topbar { display: none; }

.topbar__event {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--navy-blue);
    text-decoration: none;
    white-space: nowrap;
}
.topbar__event:hover { text-decoration: underline; }
.topbar__event img   { max-height: 26px; width: auto; }
.topbar__event-date  { font-weight: var(--weight-light); color: #6c757d; }

.topbar__phone {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--navy-blue);
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition-color);
}
.topbar__phone:hover { color: var(--mint-green); }

/* ─── 6. Actions ────────────────────────────────────────── */
.site-header__actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--nav-topbar-height);
    border-bottom: 1px solid var(--border-color);
}

.site-header.is-sticky .site-header__actions {
    height: var(--nav-height-sticky);
    border-bottom: none;
}

/* CTA */
.site-header__cta {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--navy-blue);
    background: var(--lemon-yellow);
    border-radius: var(--radius-full);
    text-decoration: none;
    white-space: nowrap;
    transition:
        background var(--transition-fast),
        transform var(--transition-fast);
}
.site-header__cta:hover {
    background: var(--pale-yellow);
    color: var(--navy-blue);
    transform: translateY(-1px);
}

/* Hamburger */
.site-nav__hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: var(--space-2);
    cursor: pointer;
    color: var(--navy-blue);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
    line-height: 0;
}
.site-nav__hamburger:hover { background: rgba(34, 47, 87, 0.06); }

/* ─── 7. Dropdowns details/summary (topbar actions) ────── */
details { position: relative; }

details > summary,
summary.site-nav__link {
    list-style: none;
    cursor: pointer;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::marker               { display: none; }

.nav-dropdown__trigger {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--navy-blue);
    border-radius: var(--radius-sm);
    user-select: none;
    transition: background var(--transition-fast);
}
.nav-dropdown__trigger:hover { background: rgba(34, 47, 87, 0.05); }

.nav-dropdown__trigger .chevron {
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}
details[open] > .nav-dropdown__trigger .chevron {
    transform: rotate(180deg);
}

/* Panel flottant */
.nav-dropdown__panel {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: var(--z-dropdown);
    background: #fff;
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-md);
    min-width: 220px;
    padding: var(--space-2) 0;
    list-style: none;
    margin: 0;
}

/* Caché par défaut — ouvert via details[open] */
details .nav-dropdown__panel  { display: none; }
details[open] .nav-dropdown__panel { display: block; }

.nav-dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    font-size: var(--text-sm);
    color: var(--navy-blue);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.nav-dropdown__item:hover { background: rgba(34, 47, 87, 0.04); }

.nav-dropdown__item--active { font-weight: var(--weight-semibold); cursor: default; }
.nav-dropdown__item--active:hover { background: none; }

.nav-dropdown__divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: var(--space-2) 0;
}

.nav-dropdown__section-label {
    display: block;
    padding: var(--space-2) var(--space-5) var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    pointer-events: none;
    user-select: none;
}

/* ─── 8. Nav principale ─────────────────────────────────── */
.site-nav {
    grid-area: site-nav;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: var(--nav-height);
}

.site-nav__list {
    flex: 1;
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.site-nav__item { position: relative; }

/* Lien / summary du menu principal */
.site-nav__link {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0 var(--space-3);
    height: var(--nav-height);
    font-size: 13.5px;
    font-weight: var(--weight-semibold);
    color: var(--nav-link-color);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition:
        color var(--transition-fast),
        border-color var(--transition-fast);
}
.site-nav__link:hover,
.site-nav__link.is-active {
    border-bottom-color: var(--mint-green);
}

/* Chevron inline dans les summary du menu principal */
.site-nav__link .chevron {
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}
details[open] > .site-nav__link .chevron {
    transform: rotate(180deg);
}

/* ─── 9. Mega-menu Products ─────────────────────────────── */
details .mega-menu { display: none; }  /* fermé par défaut */

.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: min(920px, 96vw);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    background: #fff;
    box-shadow: var(--shadow-lg);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    border-top: 2px solid var(--mint-green);
    padding: var(--space-lg);
    z-index: var(--z-dropdown);
}

/* Ouvert via click (details[open]) ou hover desktop */
details[open] .mega-menu { display: grid; }

.mega-menu__heading {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #94a3b8;
    margin: 0 0 var(--space-3);
}

.mega-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mega-menu__list a {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--navy-blue);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}
.mega-menu__list a:hover { background: rgba(34, 47, 87, 0.04); }

.mega-menu__sub {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    color: #94a3b8;
    line-height: 1.3;
}

/* Hover desktop : affiche mega-menu même si details pas [open] */
@media (min-width: 992px) {
    .site-nav__item--mega:hover   .mega-menu          { display: grid; }
    .site-nav__item--dropdown:hover .nav-dropdown__panel { display: block; }
}

/* ─── 10. Dropdown simple (About Us) ────────────────────── */
.site-nav__item--dropdown .nav-dropdown__panel {
    top: 100%;
    right: auto;
    left: 0;
    min-width: 290px;
}

/* ─── 11. Badges HOT / NEW ──────────────────────────────── */
.nav-badge {
    display: inline-block;
    padding: 1px 5px;
    font-size: 9px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--navy-blue);
    color: #fff;
    border-radius: 3px;
    vertical-align: middle;
    line-height: 1.6;
}

/* ─── 12. LinkedIn ──────────────────────────────────────── */
.site-nav__social {
    display: flex;
    align-items: center;
    color: var(--navy-blue);
    opacity: 0.45;
    transition: opacity var(--transition-fast);
    flex-shrink: 0;
}
.site-nav__social:hover { opacity: 1; }

/* ─── 13. Mobile (< 992 px) ─────────────────────────────── */
@media (max-width: 991px) {

    /* Grille mobile : logo + hamburger en row 1, nav en row 2 */
    .site-header__inner {
        grid-template-columns: auto 1fr;
        grid-template-rows: 64px 0fr;  /* row 2 auto-collapse */
        grid-template-areas:
            "logo actions"
            "site-nav site-nav";
        column-gap: 0;
    }

    /* Transition sur row 2 quand nav ouverte */
    .site-header__inner:has(.site-nav__list.is-open) {
        grid-template-rows: 64px 1fr;
    }

    /* Masquer topbar sur mobile */
    .site-header__topbar { display: none; }

    /* Actions mobile : masquer user/lang/cta, montrer hamburger */
    .site-header__actions {
        justify-content: flex-end;
        height: 64px;
        border-bottom: none;
        padding-right: var(--space-2);
    }

    .site-header__actions .nav-dropdown,
    .site-header__cta    { display: none; }

    .site-nav__hamburger { display: flex; }

    /* Nav : la liste se cache / s'ouvre */
    .site-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        min-height: 0;
        overflow: hidden;
        border-top: 1px solid var(--border-color);
    }

    .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--duration-slow) var(--ease-out);
    }
    .site-nav__list.is-open { max-height: 100vh; }

    /* Lien nav mobile */
    .site-nav__link {
        height: auto;
        padding: var(--space-4) var(--container-pad);
        border-bottom: 1px solid var(--border-color);
        border-left: none;
        width: 100%;
        box-sizing: border-box;
    }

    /* Mega-menu mobile : liste empilée */
    .mega-menu {
        position: static;
        transform: none;
        width: 100%;
        grid-template-columns: 1fr;
        box-shadow: none;
        border-radius: 0;
        border-top: none;
        border-left: 3px solid var(--mint-green);
        padding: var(--space-3) var(--container-pad);
        background: rgba(34, 47, 87, 0.03);
        gap: var(--space-md);
    }
    details .mega-menu { display: none; }
    details[open] .mega-menu { display: grid; }

    /* Dropdown About Us mobile */
    .site-nav__item--dropdown .nav-dropdown__panel {
        position: static;
        box-shadow: none;
        border-radius: 0;
        border-left: 3px solid var(--border-color);
        background: rgba(34, 47, 87, 0.03);
        padding: var(--space-2) 0;
        min-width: 0;
    }

    /* LinkedIn caché sur mobile */
    .site-nav__social { display: none; }

    /* Sticky mobile : layout identique non-sticky */
    .site-header.is-sticky .site-header__inner {
        grid-template-areas:
            "logo actions"
            "site-nav site-nav";
        grid-template-columns: auto 1fr;
        grid-template-rows: 64px 0fr;
        align-items: unset;
    }
    .site-header.is-sticky .site-header__inner:has(.site-nav__list.is-open) {
        grid-template-rows: 64px 1fr;
    }
    .site-header.is-sticky .site-header__actions {
        height: 64px;
        border-bottom: none;
    }
    .site-header.is-sticky .site-header__logo-img { width: 185px; }
}

/* ─── 14. Focus visible ─────────────────────────────────── */
.site-nav__link:focus-visible,
.nav-dropdown__trigger:focus-visible,
.nav-dropdown__item:focus-visible,
.site-header__cta:focus-visible,
.site-nav__hamburger:focus-visible,
.site-nav__social:focus-visible,
.topbar__phone:focus-visible,
.topbar__event:focus-visible {
    outline: 2px solid var(--mint-green);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ─── 15. Reduced motion ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .site-header,
    .site-header__logo-img,
    .site-nav__list,
    .nav-dropdown__trigger .chevron,
    .site-nav__link .chevron {
        transition: none;
    }
}

/* ─── 16. Variante Landing Page SEA (_topnav_lp.html) ───── */
.site-header--lp {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.site-header-lp__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    height: 64px;
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.site-header--lp .site-header__logo {
    grid-area: unset;
    margin-right: auto;   /* pousse téléphone + CTA à droite */
}

.lp-nav__phone {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--navy-blue);
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition-color);
}
.lp-nav__phone:hover { color: var(--mint-green); }

/* Masquer le texte téléphone sur mobile, garder l'icône */
@media (max-width: 575px) {
    .lp-nav__phone span { display: none; }
}