/* ==========================================================================
   WYBE Header Menu — header-menu.css
   ========================================================================== */

/* ── Reset & base ────────────────────────────────────────────────────────── */

.wybe-header *,
.wybe-header *::before,
.wybe-header *::after {
    box-sizing: border-box;
}

.wybe-header .wybe-nav-list,
.wybe-header .wybe-nav-list li {
    list-style: none;
    margin:     0;
    padding:    0;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.wybe-header {
    position:   absolute;
    top:        0;
    left:       0;
    width:      100%;
    z-index:    1000;
    transition: background-color 350ms ease, box-shadow 350ms ease, padding 350ms ease;
}

.wybe-header::before {
    content:  '';
    position: absolute;
    inset:    0;
    pointer-events: none;
    z-index:  -1;
}

.wybe-header.wybe-header-sticky {
    position: fixed;
}

/* ── Header inner ────────────────────────────────────────────────────────── */

.wybe-header-inner {
    display:     flex;
    align-items: center;
    padding:     0 40px;
    height:      80px;
    width:       100%;
}

/* Layout centre : menu | logo | menu
   Grid 1fr auto 1fr : le logo est toujours au centre exact,
   les deux colonnes latérales sont symétriques → pas d'overlap. */
.wybe-layout-center {
    display:               grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:           center;
}

.wybe-layout-center .wybe-menu-left {
    justify-content: flex-end;
}

.wybe-layout-center .wybe-logo {
    padding: 0 32px;
}

.wybe-layout-center .wybe-header-right {
    display:         flex;
    align-items:     center;
    justify-content: flex-start;
    gap:             24px;
}

/* Le burger se pousse à droite sans décoller le menu du logo */
.wybe-layout-center .wybe-burger-btn {
    margin-left: auto;
}

/* Layout gauche : logo | menu | burger */
.wybe-layout-left .wybe-logo         { flex-shrink: 0; margin-right: 40px; }
.wybe-layout-left .wybe-menu-right   { flex: 1; }

/* ── Logo ────────────────────────────────────────────────────────────────── */

.wybe-logo-link {
    display:         inline-flex;
    align-items:     center;
    text-decoration: none;
    position:        relative;
}

.wybe-logo-main,
.wybe-logo-scrolled {
    max-height:        48px;
    width:             auto;
    transition:        opacity 350ms ease;
    display:           block;
}

.wybe-logo-scrolled {
    position: absolute;
    top:      0;
    left:     0;
    opacity:  0;
}

.wybe-header-scrolled .wybe-logo-main    { opacity: 0; }
.wybe-header-scrolled .wybe-logo-scrolled { opacity: 1; }

/* Si pas de logo scroll, on garde le principal visible */
.wybe-logo-link:not(:has(.wybe-logo-scrolled)) .wybe-logo-main { opacity: 1 !important; }

/* ── Menus ───────────────────────────────────────────────────────────────── */

.wybe-menu-left .wybe-nav-list,
.wybe-menu-right .wybe-nav-list {
    display:     flex;
    align-items: center;
    gap:         28px;
}

.wybe-menu-left .wybe-nav-list {
    justify-content: flex-end;
}

.wybe-menu-right .wybe-nav-list {
    justify-content: flex-start;
}

.wybe-menu-left a,
.wybe-menu-right a {
    text-decoration: none;
    font-size:       13px;
    letter-spacing:  0.08em;
    text-transform:  uppercase;
    transition:      color 250ms ease, opacity 250ms ease;
    white-space:     nowrap;
}

/* ── Dropdowns menu classique ────────────────────────────────────────────── */

.wybe-menu-left .wybe-nav-list > li,
.wybe-menu-right .wybe-nav-list > li {
    position: relative;
}

.wybe-menu-left .sub-menu,
.wybe-menu-right .sub-menu {
    position:       absolute;
    top:            100%;        /* flush : zéro gap → pas de perte de hover */
    left:           50%;
    transform:      translateX(-50%) translateY(-4px);
    min-width:      180px;
    background:     #fff;
    border-radius:  8px;
    box-shadow:     0 8px 24px rgba(0, 0, 0, 0.12);
    padding:        8px 0;
    list-style:     none;
    margin:         0;
    opacity:        0;
    visibility:     hidden;
    pointer-events: none;
    transition:     opacity 200ms ease, transform 200ms ease, visibility 200ms ease;
    z-index:        100;
    white-space:    nowrap;
}

/* Petite flèche */
.wybe-menu-left .sub-menu::before,
.wybe-menu-right .sub-menu::before {
    content:      '';
    position:     absolute;
    top:          -6px;
    left:         50%;
    transform:    translateX(-50%);
    border-width: 0 6px 6px;
    border-style: solid;
    border-color: transparent transparent #fff;
}

/* Ouverture au survol — déclenché sur le li (inclut la sub-menu enfant) */
.wybe-menu-left .wybe-nav-list > li:hover > .sub-menu,
.wybe-menu-right .wybe-nav-list > li:hover > .sub-menu {
    opacity:        1;
    visibility:     visible;
    pointer-events: auto;
    transform:      translateX(-50%) translateY(0);
}

.wybe-menu-left .sub-menu a,
.wybe-menu-right .sub-menu a {
    display:         block;
    padding:         9px 18px;
    color:           #1a1a1a;
    font-size:       13px;
    text-transform:  none;
    letter-spacing:  0.03em;
    white-space:     nowrap;
    transition:      background 150ms ease, color 150ms ease;
}

.wybe-menu-left .sub-menu a:hover,
.wybe-menu-right .sub-menu a:hover {
    background: #f5f5f5;
    color:      #1a1a1a;
    opacity:    1;
}

/* ── Burger button ───────────────────────────────────────────────────────── */

.wybe-burger-btn {
    display:          flex;
    flex-direction:   column;
    justify-content:  center;
    gap:              5px;
    width:            36px;
    height:           36px;
    padding:          0;
    background:       none;
    border:           none;
    outline:          none;
    cursor:           pointer;
    flex-shrink:      0;
    transition:       opacity 250ms ease;
}

.wybe-burger-btn:hover,
.wybe-burger-btn:focus,
.wybe-burger-btn:focus-visible,
.wybe-burger-btn:active {
    outline:    none;
    box-shadow: none;
    border:     none;
    background: none;
}

.wybe-burger-bar {
    display:          block;
    width:            24px;
    height:           2px;
    background:       currentColor;
    border-radius:    2px;
    transition:       transform 300ms ease, opacity 300ms ease;
    transform-origin: center;
}

/* Animation croix */
.wybe-burger-btn.is-open .wybe-burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.wybe-burger-btn.is-open .wybe-burger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.wybe-burger-btn.is-open .wybe-burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── États initial / scroll ──────────────────────────────────────────────── */
/* On utilise visibility + pointer-events au lieu de display:none pour que
   les colonnes du grid restent en place et le logo reste centré. */

/* Par défaut : burger caché, menus visibles */
.wybe-header .wybe-burger-btn {
    visibility:     hidden;
    pointer-events: none;
    opacity:        0;
}
.wybe-header .wybe-menu-left,
.wybe-header .wybe-menu-right {
    visibility:     visible;
    pointer-events: auto;
    opacity:        1;
}

/* Mode initial burger */
.wybe-header.wybe-nav-initial-burger .wybe-burger-btn {
    visibility:     visible;
    pointer-events: auto;
    opacity:        1;
    display:        flex;
}
.wybe-header.wybe-nav-initial-burger .wybe-menu-left,
.wybe-header.wybe-nav-initial-burger .wybe-menu-right {
    visibility:     hidden;
    pointer-events: none;
    opacity:        0;
}

/* Au scroll — burger */
.wybe-header.wybe-header-scrolled.wybe-nav-scroll-burger .wybe-burger-btn {
    visibility:     visible;
    pointer-events: auto;
    opacity:        1;
    display:        flex;
}
.wybe-header.wybe-header-scrolled.wybe-nav-scroll-burger .wybe-menu-left,
.wybe-header.wybe-header-scrolled.wybe-nav-scroll-burger .wybe-menu-right {
    visibility:     hidden;
    pointer-events: none;
    opacity:        0;
}

/* Au scroll — classique */
.wybe-header.wybe-header-scrolled.wybe-nav-scroll-classic .wybe-burger-btn {
    visibility:     hidden;
    pointer-events: none;
    opacity:        0;
}
.wybe-header.wybe-header-scrolled.wybe-nav-scroll-classic .wybe-menu-left,
.wybe-header.wybe-header-scrolled.wybe-nav-scroll-classic .wybe-menu-right {
    visibility:     visible;
    pointer-events: auto;
    opacity:        1;
}

/* Header compacté au scroll */
.wybe-header.wybe-header-scrolled .wybe-header-inner {
    height: 60px;
}

.wybe-header.wybe-header-scrolled {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
}

/* ── Overlay burger ──────────────────────────────────────────────────────── */

.wybe-burger-overlay {
    position:          fixed;
    inset:             0;
    background:        rgba(0, 0, 0, 0.45);
    z-index:           1100;
    opacity:           0;
    visibility:        hidden;
    transition:        opacity 350ms ease, visibility 350ms ease;
    backdrop-filter:   blur(2px);
}

.wybe-burger-overlay.is-open {
    opacity:    1;
    visibility: visible;
}

/* ── Panneau burger ──────────────────────────────────────────────────────── */

.wybe-burger-panel {
    position:            fixed;
    top:                 0;
    bottom:              0;
    width:               100%;
    max-width:           none;
    z-index:             1200;
    display:             flex;
    flex-direction:      column;
    align-items:         center;
    padding:             48px 40px;
    overflow-y:          auto;
    background-color:    #1a1a1a;
    background-size:     cover;
    background-position: center;
    transition:          transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Overlay de fond */
.wybe-burger-panel::before {
    content:  '';
    position: absolute;
    inset:    0;
    pointer-events: none;
    z-index:  0;
}

.wybe-burger-panel > * {
    position: relative;
    z-index:  1;
}

/* Côté gauche (défaut) */
.wybe-panel-left {
    left:      0;
    transform: translateX(-100%);
}

/* Côté droit */
.wybe-panel-right {
    right:     0;
    left:      auto;
    transform: translateX(100%);
}

.wybe-burger-panel.is-open {
    transform: translateX(0);
}

/* ── Contenu panneau ─────────────────────────────────────────────────────── */

.wybe-burger-close {
    align-self:  flex-end;
    background:  none;
    border:      none;
    outline:     none;
    color:       #fff;
    font-size:   28px;
    cursor:      pointer;
    padding:     0;
    line-height: 1;
    margin-bottom: 32px;
    transition:  opacity 200ms ease;
}

.wybe-burger-close:hover,
.wybe-burger-close:focus,
.wybe-burger-close:focus-visible,
.wybe-burger-close:active {
    opacity:    0.7;
    outline:    none;
    box-shadow: none;
    background: none;
}

.wybe-burger-logo {
    margin-bottom: 48px;
    text-align:    center;
    width:         100%;
}

.wybe-burger-logo img {
    max-height: 56px;
    width:      auto;
    margin:     0 auto;
    display:    block;
}

/* Navigation burger */
.wybe-burger-nav {
    width: 100%;
}

.wybe-burger-nav .wybe-nav-list {
    display:        flex;
    flex-direction: column;
    gap:            0;
    list-style:     none;
    padding:        0;
    margin:         0;
}

.wybe-burger-nav .wybe-nav-list li {
    list-style: none;
}

.wybe-burger-nav a {
    display:         inline-flex;
    align-items:     center;
    gap:             10px;
    padding:         18px 0;
    color:           #fff;
    text-decoration: none;
    font-size:       22px;
    letter-spacing:  0.08em;
    text-transform:  uppercase;
    border:          none;
    transition:      opacity 200ms ease;
}

/* Chevron collé après le texte */
.wybe-burger-nav > .wybe-nav-list > li > a::after {
    content:     '›';
    font-size:   20px;
    line-height: 1;
    opacity:     0.7;
    transition:  transform var(--wybe-transition, 350ms) ease;
    display:     inline-block;
}

/* Chevron tourné quand l'item est ouvert */
.wybe-burger-nav > .wybe-nav-list > li.is-open > a::after {
    transform: rotate(90deg);
}

.wybe-burger-nav a:hover {
    opacity: 0.65;
}

/* Sous-menus burger — cachés par défaut, accordion */
.wybe-burger-nav .sub-menu {
    padding-left: 16px;
    max-height:   0;
    overflow:     hidden;
    transition:   max-height var(--wybe-transition, 350ms) ease;
}

/* Ouvert */
.wybe-burger-nav li.is-open > .sub-menu {
    max-height: 800px;
}

.wybe-burger-nav .sub-menu a {
    font-size:      16px;
    padding:        10px 0;
    text-transform: none;
    letter-spacing: 0.04em;
    opacity:        0.75;
}

.wybe-burger-nav .sub-menu a::after {
    display: none;
}

.wybe-burger-nav .sub-menu a:hover {
    opacity: 1;
}

/* ── Accessibilité : focus ───────────────────────────────────────────────── */

.wybe-header a:focus-visible,
.wybe-burger-btn:focus-visible,
.wybe-burger-close:focus-visible,
.wybe-burger-nav a:focus-visible {
    outline:        2px solid currentColor;
    outline-offset: 3px;
    border-radius:  2px;
}

/* ── Responsive : Tablet ─────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .wybe-header-inner {
        padding: 0 24px;
    }

    /* On passe en burger sur tablette */
    .wybe-header .wybe-burger-btn {
        display:        flex;
        visibility:     visible;
        pointer-events: auto;
        opacity:        1;
        margin-left:    0;
    }
    .wybe-header .wybe-menu-left,
    .wybe-header .wybe-menu-right { display: none; }

    /* Logo centré en absolu, burger dans le flux (respecte le padding) */
    .wybe-layout-center,
    .wybe-layout-left {
        display:  flex;
        position: relative;
    }

    /* Logo : centré dans toute la largeur du header */
    .wybe-layout-center .wybe-logo,
    .wybe-layout-left .wybe-logo {
        position:  absolute;
        left:      50%;
        transform: translateX(-50%);
        padding:   0;
        margin:    0;
    }

    /* Layout center : header-right dans le flux, contient le burger */
    .wybe-layout-center .wybe-header-right {
        position:  static;
        transform: none;
    }

    /* Layout left : burger dans le flux, logo ne prend plus de place */
    .wybe-layout-left .wybe-logo      { flex: none; }
    .wybe-layout-left .wybe-burger-btn { margin-left: 0; }

    .wybe-burger-panel {
        width: 70%;
    }
}

/* ── Responsive : Mobile ─────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .wybe-header-inner {
        padding: 0 20px;
        height:  64px;
    }

    .wybe-header.wybe-header-scrolled .wybe-header-inner {
        height: 56px;
    }

    .wybe-burger-panel {
        width:   100%;
        max-width: none;
        padding: 32px 24px;
    }

    .wybe-burger-nav a {
        font-size: 20px;
    }
}