/************************
SOUS-MENUS (dropdown) — comportement calqué sur smps-ged.com :
- Desktop (≥1200px, breakpoint navbar-expand-xl) : ouverture au survol,
  fondu + léger glissement vers le bas.
- Burger (<1200px) : #navbarMain devient un overlay plein écran (fond
  sombre) contenant une carte blanche arrondie ; chaque sous-menu s'ouvre
  au clic sur une pastille chevron circulaire, en encart gris clair.
Le JS correspondant est dans templates/default/js/script.js.
*************************/

/* ── Desktop — ouverture au survol ─────────────────────────────────── */
@media (min-width: 1200px) {
    /* margin-top volontairement à 0 (pas de véritable espace vide entre le
       lien et le sous-menu) : avec un margin-top positif ici, la zone entre
       les deux n'appartient à aucun des deux éléments et un mouseleave se
       déclenche si la souris traverse cet espace trop lentement, fermant le
       menu avant même de l'atteindre. L'effet de "descente" reste visible
       via le transform (translateY) ci-dessous, sans créer ce trou mort. */
    .navbar-nav .dropdown-menu {
        display: block;
        margin-top: 0 !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(6px);
        transition: opacity .25s ease, transform .25s ease, visibility .25s;
    }

    .navbar-nav .dropdown-menu.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
}

/* ── Burger — overlay plein écran + carte flottante ────────────────── */
@media (max-width: 1199.98px) {

    /* Caché par défaut (classe Bootstrap .collapse de base) ; ouvert en
       ajoutant .show — géré par un simple classList.toggle() en JS, sans
       le plugin Collapse de Bootstrap (pensé pour un dépliage en ligne,
       pas pour un overlay plein écran). */
    #navbarMain.show {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1050;
        background: rgba(33, 37, 41, .8);
        padding: 90px 20px 20px;
        overflow-y: auto;
    }

    #navbarMain .navbar-nav {
        max-width: 480px;
        margin: 0 auto;
        background: #fff;
        border-radius: var(--radius-lg, 12px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
        padding: .5rem 0;
    }

    #navbarMain .nav-item {
        border-bottom: 1px solid var(--color-border-light, #e9ecef);
    }

    #navbarMain .nav-item:last-child {
        border-bottom: 0;
    }

    #navbarMain .nav-link {
        padding: .9rem 1.25rem;
        font-size: 16px;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Le soulignement animé du desktop (barre horizontale en bas de ligne)
       n'a pas de sens sur une ligne pleine largeur — on le désactive ici. */
    #navbarMain .nav-link::after {
        display: none;
    }

    #navbarMain .nav-link.active,
    #navbarMain .nav-link:hover,
    #navbarMain .nav-link.show {
        background: color-mix(in srgb, var(--color-accent), transparent 95%);
    }

    /* Barre d'accent verticale, à gauche, pour les items du menu principal
       qui ont un sous-menu (Activités, Agenda, Retour sur...) — au survol
       et quand ils sont ouverts/actifs. Réutilise le principe du
       soulignement desktop (::after) mais en barre verticale, adaptée à
       une ligne pleine largeur. */
    #navbarMain .nav-link.dropdown-toggle {
        position: relative;
    }

    #navbarMain .nav-link.dropdown-toggle::after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: .35rem;
        bottom: .35rem;
        width: 3px;
        border-radius: var(--radius-pill, 999px);
        background: var(--color-accent);
        opacity: 0;
        transition: opacity .2s ease;
    }

    #navbarMain .nav-link.dropdown-toggle:hover::after,
    #navbarMain .nav-link.dropdown-toggle.active::after,
    #navbarMain .nav-link.dropdown-toggle.show::after {
        opacity: 1;
    }

    /* Pastille chevron — claire au repos, pleine couleur + rotation à
       l'ouverture (même logique que smps-ged.com). */
    #navbarMain .dropdown-chevron {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        margin-left: .5rem;
        border-radius: 50%;
        font-size: .8rem;
        background: color-mix(in srgb, var(--color-accent), transparent 90%);
        transition: background-color .25s ease, color .25s ease, transform .25s ease;
    }

    #navbarMain .dropdown-toggle[aria-expanded="true"] .dropdown-chevron {
        background: var(--color-accent);
        color: #fff;
        transform: rotate(180deg);
    }

    /* Sous-menu — en flux normal (data-bs-display="static" dans
       FrontOffice::display_menu_bootstrap, pas de positionnement absolu à
       annuler). Fond bleu clair (même teinte que le survol d'un item),
       pas de gris : le groupe de 3e niveau (ex. "Fitness") fait partie du
       même sous-menu, pas d'un niveau visuellement différent. */
    #navbarMain .dropdown-menu {
        position: static;
        display: none;
        margin: 0 .75rem .5rem !important;
        padding: .35rem 0;
        background: color-mix(in srgb, var(--color-accent), transparent 95%);
        border: 0;
        border-radius: var(--radius-sm, 6px);
        box-shadow: none;
    }

    #navbarMain .dropdown-menu.show {
        display: block;
    }

    #navbarMain .dropdown-item {
        padding: .55rem 1rem;
        font-size: 15px;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Sous-groupe de 3e niveau (ex. "Fitness") en mode burger — mêmes
       principes qu'en desktop (voir styles.css) : un filet sépare le
       groupe, ses items sont en retrait avec une puce. Même taille/graisse
       de police que les autres items — seule la couleur atténuée (variante
       non cliquable) distingue le nom du groupe. */
    #navbarMain .dropdown-menu li.dropdown-group-title {
    }

    #navbarMain .dropdown-menu li.dropdown-group-title:first-child {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

    #navbarMain .dropdown-menu .dropdown-header {
        display: block;
        padding: .55rem 1rem;
        margin: 0;
        font-size: 15px;
        font-weight: 400;
        color: var(--color-text-muted, #8a97a3);
    }

    #navbarMain .dropdown-item--sub {
        padding: 0;
        padding-left: 2rem;
        position: relative;
    }

    #navbarMain .dropdown-item--sub::before {
        content: '';
        position: absolute;
        left: 1.15rem;
        top: 50%;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--color-accent);
        opacity: .5;
        transform: translateY(-50%);
    }

    /* Bouton de fermeture — le burger lui-même reste visible et se change
       en croix (voir styles.css, [aria-expanded="true"]) mais passe en
       blanc, fixe au-dessus de l'overlay sombre. */
    body.mobile-nav-active {
        overflow: hidden;
    }

    body.mobile-nav-active .header-actions .burger-btn {
        position: fixed;
        top: 28px;
        right: 24px;
        z-index: 1060;
    }

    body.mobile-nav-active .header-actions .burger-btn .burger-line {
        background-color: #fff;
    }

    body.mobile-nav-active .header-actions .btn-contact-header,
    body.mobile-nav-active .header-actions .search-trigger {
        visibility: hidden;
    }
}