/*
 * Correction de la superposition du menu Understrap
 * Pour séparer le lien cliquable du chevron d'ouverture du sous-menu.
 */

/* 1. Assurez-vous que le LI est le conteneur de positionnement */
.navbar-nav .dropdown.nav-item {
    position: relative; /* Clé pour le positionnement absolu du SPAN */
}

/* 2. Positionnement et style du Lien (A) */
.navbar-nav .dropdown.nav-item > a.nav-link {
    /* Le lien principal prend de la place mais laisse un peu de marge pour le chevron */
    padding-right: 35px !important; /* Augmenter le padding pour laisser de la place au toggle */
    display: inline-block;
    width: 100%; /* Le lien prend toute la largeur disponible (moins le padding) */
}

/* 3. Positionnement et style du SPAN (le Chevron de bascule) */
.navbar-nav .dropdown.nav-item > .dropdown-toggle-split {
    /* Rendre le SPAN absolu pour qu'il soit positionné par rapport au LI */
    position: absolute;
    top: 10px;
    bottom: 0;
    right: 0;
    padding: 8px 10px; /* Adaptez le padding pour le rendre cliquable */
    
    /* Centrer le contenu (le chevron) */
    display: flex;
   
    justify-content: center;
    
    cursor: pointer;
    z-index: 10; /* Assurez-vous qu'il est au-dessus du lien */
    
    /* Style du chevron lui-même (comme celui par défaut de Bootstrap) */
    width: auto; /* Laisser le contenu définir la largeur */
    height: 100%; /* Important pour la hauteur du clic */
}

/* Ajout du visuel du chevron (ou utilisez une icône FontAwesome si vous en avez) */
.navbar-nav .dropdown.nav-item > .dropdown-toggle-split::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    color:#fff;
}

/* 4. Correction des problèmes de survol/focus pour les liens parents */
.navbar-nav .dropdown.nav-item:hover > a.nav-link, 
.navbar-nav .dropdown.nav-item > a.nav-link:focus {
    /* Maintenir les styles de survol habituels */
    color: inherit; /* Ou la couleur de votre choix */
}

/* S'assurer que le sous-menu ne reste pas 'position: absolute' par rapport au LI */
.navbar-nav .dropdown.nav-item.show > .dropdown-menu {
    /* C'est géré par Bootstrap, mais on s'assure qu'il s'affiche correctement */
    display: block; 
}