/* ============================================
   MENU MOBILE RESPONSIVE - Checkbox/Label
   Fonctionne sans JavaScript (RGAA 4.12)
   Avec JS : animations slide + overlay
   Pattern adapté d'AKEOSTORE
   ============================================ */

/* ============================================
   CHECKBOX TOGGLE (caché visuellement)
   ============================================ */
.navbar-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Focus visible sur le burger quand le checkbox a le focus */
.navbar-checkbox:focus-visible ~ .navbar-toggler {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 2px !important;
    transition: none !important;
}

/* Cacher le burger quand menu ouvert */
.navbar-checkbox:checked ~ .navbar-toggler {
    display: none;
}

/* Masquer sur desktop */
@media (min-width: 992px) {
    .navbar-checkbox,
    .navbar-toggler,
    .navbar-mobile-menu,
    .navbar-overlay {
        display: none !important;
    }
}

/* ============================================
   BOUTON BURGER (label)
   ============================================ */
.navbar-toggler {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: .25rem .75rem;
    cursor: pointer;
    background: transparent;
    border: none;
}

/* Icônes burger */
.navbar-toggler .navbar-toggler-icon {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-dark);
}

/* Burger visible par défaut */
.navbar-toggler .navbar-burger {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ============================================
   PANNEAU DE NAVIGATION
   ============================================ */
.navbar-mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    max-width: 500px;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15);
    z-index: 1080;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

/* Afficher le menu quand checkbox coché */
.navbar-checkbox:checked ~ .navbar-mobile-menu {
    display: flex;
    box-shadow: 0 0 0 2038px rgba(0, 0, 0, 0.5);
}

/* Mode JS-enhanced : animation slide */
.js-enhanced .navbar-mobile-menu {
    display: flex;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.3s ease-in-out, visibility 0s 0.3s;
}

.js-enhanced .navbar-checkbox:checked ~ .navbar-mobile-menu {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.3s ease-in-out, visibility 0s 0s;
    box-shadow: 0 0 0 2038px rgba(0, 0, 0, 0.5);
}

/* Overlay */
.navbar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1079;
    margin: 0;
    pointer-events: none;
    cursor: pointer;
}

.navbar-checkbox:checked ~ .navbar-overlay {
    pointer-events: auto;
}

.js-enhanced .navbar-overlay {
    pointer-events: none;
}

.js-enhanced .navbar-overlay.active {
    pointer-events: auto;
}

/* ============================================
   BOUTON CLOSE
   ============================================ */
.navbar-mobile-menu .close {
    opacity: 1;
    cursor: pointer;
}

/* ============================================
   LAYOUT DES SECTIONS
   ============================================ */
.navbar-mobile-body {
    flex: 1;
    overflow-y: auto;
}

/* ============================================
   SOUS-MENUS (Details imbriqués)
   ============================================ */
.navbar-submenu-details {
    width: 100%;
}

.navbar-submenu-details > summary {
    list-style: none;
    cursor: pointer;
}

.navbar-submenu-details > summary::-webkit-details-marker {
    display: none;
}

.navbar-submenu-details > summary::marker {
    display: none;
    content: '';
}

/* Mode sans JS : affichage inline (accordéon) */
.navbar-submenu-content {
    padding: 0.5rem 0;
    background-color: #ffffff;
}

/* Mode JS-enhanced : sous-menus en position fixed, cachés à droite */
.js-enhanced .navbar-submenu-content {
    position: fixed;
    top: 0;
    left: 500px;
    width: 100%;
    max-width: 500px;
    height: 100vh;
    background-color: #ffffff;
    z-index: 1060;
    overflow-y: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    transition: left 0.3s ease-in-out;
    pointer-events: none;
}

.js-enhanced .navbar-submenu-details .navbar-submenu-content {
    display: flex !important;
}

@media (max-width: 500px) {
    .js-enhanced .navbar-submenu-content {
        left: 100vw;
    }
}

.js-enhanced .navbar-submenu-content.is-sliding {
    left: 0;
    pointer-events: auto;
}

.navbar-submenu-body {
    flex: 1;
}

/* ============================================
   CHEVRONS - Visibles seulement sans JS
   ============================================ */
.navbar-chevron {
    font-size: 0.875rem;
    transition: transform 0.2s ease;
}

.navbar-submenu-details[open] > summary > .navbar-chevron {
    transform: rotate(90deg);
}

.js-enhanced .navbar-chevron {
    display: none !important;
}

/* ============================================
   ÉLÉMENTS JS-ONLY / NO-JS-ONLY
   ============================================ */
.js-only {
    display: none !important;
}

.js-enhanced .js-only {
    display: block !important;
}

.no-js-only {
    display: block;
}

.js-enhanced .no-js-only {
    display: none !important;
}