/**
 * Menu Dropdown Prestataires - Worldline Genesis
 * 
 * @description Système de navigation multi-niveaux avec animations et responsive design
 * @version 2.0
 * @author 
 * @date 2025
 * 
 * Fonctionnalités:
 * - Navigation hiérarchique à 3 niveaux
 * - Animations CSS avec transitions fluides
 * - Design responsive pour appareils mobiles
 * - Accessibilité clavier améliorée
 * - Optimisations de performance
 */

/* ========================================================================
   ARCHITECTURE ET RESET DE BASE
======================================================================== */

/**
 * Container principal du menu dropdown
 * Utilise flexbox pour un alignement moderne et supprime les floats obsolètes
 */
ul.dropdown {
    position: relative;
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--color-primary-03);
    /*background: linear-gradient(135deg, var(--color-primary-03) 0%, #005a8b 100%);*/
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15);
    border-radius: 0;
}

/* ========================================================================
   NIVEAU 1 - NAVIGATION PRINCIPALE
======================================================================== */

/**
 * Éléments de navigation de premier niveau
 * Suppression des floats au profit du flexbox parent
 */
ul.dropdown li {
    font-weight: 500;
    float: none;
    zoom: 1;
    background-color: transparent;
    position: relative;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    list-style: none;
}

/* Suppression de la bordure droite pour le dernier élément */
ul.dropdown li:last-child {
    border-right: none;
}

/**
 * Liens de navigation principaux
 * Reset complet des styles hérités et application du design moderne
 */
ul.dropdown li a {
    display: block;
    padding: 15px 25px;
    border-right: none;
    color: var(--color-primary-02);
    vertical-align: middle;
    text-align: left;
    font: 500 14px var(--stack);
    text-shadow: none;
    cursor: pointer;
    background-color: transparent;
    background-image: none;
    background-position: 0 0;
    border-width: 0;
    border-style: none;
    border-color: transparent;
    border-top: 4px solid var(--color-primary-03);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

/**
 * Reset spécifique pour le premier élément de navigation
 * Supprime les anciens styles de bordure
 */
ul.dropdown #topfirst {
    border-width: 0;
    border-top: 4px solid var(--color-primary-03);
}

/**
 * États d'interaction pour les liens principaux
 * Effet de survol avec transformation subtile
 */
ul.dropdown li a:hover {
    background: var(--color-primary-02);
    color: var(--color-primary-03);
    border-top: 4px solid var(--color-primary-05);
    transform: translateY(-1px);
}

ul.dropdown li a:active {
    color: var(--color-primary-05);
}

/**
 * État actif et sélectionné pour la navigation courante
 */
ul.dropdown li.active a,
ul.dropdown li.current a {
    background: var(--color-primary-02);
    color: var(--color-primary-03);
    border-top: 4px solid var(--color-primary-05);
}

/**
 * État de survol des conteneurs de navigation
 * Préparation pour l'affichage des sous-menus
 */
ul.dropdown li:hover,
ul.dropdown li.hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-primary-02);
    position: relative;
}

ul.dropdown li.hover ul a,
ul.dropdown li:hover ul a {
    color: var(--color-primary-01);
}

/* ========================================================================
   NIVEAU 2 - SOUS-MENUS
======================================================================== */

/**
 * Container des sous-menus de deuxième niveau
 * Positionnement absolu avec animations d'entrée et de sortie
 */
ul.dropdown ul {
    width: 280px;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: -1px;
    z-index: 99999;
    border-style: solid;
    top: calc(100% - 4px);
    -moz-box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.25);
    padding: 15px 0;
    background-color: #ffffff;
    border-width: 1px;
    border-radius: 0 0 8px 8px;
    -moz-border-radius: 0 0 8px 8px;
    -webkit-border-radius: 0 0 8px 8px;
    border-color: var(--color-shades-03);
    transform: translateY(-10px);
    transition: all 0.3s ease;
    list-style: none;
    margin: 0;
}

/**
 * Affichage des sous-menus au survol
 * Animation d'apparition avec transformation
 */
ul.dropdown li:hover > ul {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/**
 * Éléments de navigation de deuxième niveau
 * Reset complet des styles de liste et application du design
 */
ul.dropdown ul li {
    font-weight: normal;
    background: transparent;
    color: var(--color-primary-01);
    border-bottom: 1px solid var(--color-shades-04);
    float: none;
    margin: 0;
    padding: 0;
    width: 100%;
    border-right: none;
    transition: all 0.2s ease;
    list-style: none !important;
    list-style-type: none !important;
}

/**
 * Suppression forcée des pseudo-éléments qui pourraient créer des puces
 */
ul.dropdown ul li:before,
ul.dropdown ul li:after {
    content: none !important;
}

ul.dropdown ul li:last-child {
    border-bottom: none;
}

ul.dropdown ul li:hover {
    background: var(--color-shades-05);
}

/**
 * Liens de navigation de deuxième niveau
 * Design épuré avec indicateurs visuels de navigation
 */
ul.dropdown ul li a {
    border-right: none;
    width: 100%;
    display: block;
    text-align: left;
    padding: 12px 20px;
    background-color: transparent;
    background-image: none;
    border-width: 0;
    border-left: 3px solid transparent;
    border-top: none;
    font: 400 14px var(--stack);
    color: var(--color-primary-01);
    text-decoration: none;
    text-shadow: none;
    transition: all 0.3s ease;
}

/**
 * États d'interaction pour les liens de sous-menu
 * Effet de bordure gauche et translation horizontale
 */
/* ul.dropdown ul li a:hover {
    background-color: var(--color-shades-05);
    background-image: none;
    color: var(--color-primary-03);
    text-decoration: none;
    text-shadow: none;
    font-weight: 500;
    border-left: 3px solid var(--color-primary-05);
    padding-left: 25px;
    transform: translateX(2px);
} */

/**
 * États d'interaction pour les liens de sous-menu
 * Effet de bordure gauche (Correction du débordement)
 */
ul.dropdown ul li a:hover,
ul.dropdown ul li a:focus {
    background-color: var(--color-shades-05);
    background-image: none;
    color: var(--color-primary-03);
    text-decoration: none;
    text-shadow: none;
    font-weight: 500;
    padding-left: 25px;
    border-left: 3px solid var(--color-primary-05) !important;
    border-top: none !important; /* Empêche l'héritage de la barre du haut */
    
    /* On force la boîte à ne pas dépasser et on enlève le translateX */
    box-sizing: border-box !important;
    outline: none !important; 
    width: 100%;
}

/* ========================================================================
   NIVEAU 3 - SOUS-SOUS-MENUS
======================================================================== */

/**
 * Container des sous-menus de troisième niveau
 * Positionnement latéral pour éviter les chevauchements
 */
ul.dropdown ul ul {
    left: 100%;
    top: 0;
    border-radius: 8px;
    list-style: none;
    margin: 0;
    padding: 15px 0;
}

/* ========================================================================
   SYSTÈME DE SUPPRESSION DES PUCES DE LISTE
======================================================================== */

/**
 * Reset global pour éliminer toutes les puces de liste
 * Application forcée à tous les niveaux de la hiérarchie
 */
ul.dropdown,
ul.dropdown ul,
ul.dropdown ul ul,
ul.dropdown li,
ul.dropdown ul li,
ul.dropdown ul ul li {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    margin: 0;
    padding-left: 0 !important;
}

/**
 * Suppression des pseudo-éléments générateurs de puces
 */
ul.dropdown li:before,
ul.dropdown li:after,
ul.dropdown ul li:before,
ul.dropdown ul li:after,
ul.dropdown ul ul li:before,
ul.dropdown ul ul li:after {
    content: none !important;
    display: none !important;
}

/* ========================================================================
   ANIMATIONS ET MICRO-INTERACTIONS
======================================================================== */

/**
 * Animation en cascade pour l'apparition des éléments de sous-menu
 * Délais progressifs pour un effet de révélation séquentielle
 */
ul.dropdown ul li {
    animation: slideInLeft 0.3s ease forwards;
    opacity: 0;
}

ul.dropdown li:hover ul li:nth-child(1) { animation-delay: 0.1s; }
ul.dropdown li:hover ul li:nth-child(2) { animation-delay: 0.15s; }
ul.dropdown li:hover ul li:nth-child(3) { animation-delay: 0.2s; }
ul.dropdown li:hover ul li:nth-child(4) { animation-delay: 0.25s; }
ul.dropdown li:hover ul li:nth-child(5) { animation-delay: 0.3s; }

/**
 * Animation de glissement pour l'entrée des éléments
 */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ========================================================================
   RESPONSIVE DESIGN
======================================================================== */

/**
 * Adaptations pour appareils mobiles et tablettes
 * Transformation du menu horizontal en menu vertical empilé
 */
@media (max-width: 768px) {
    /* Configuration du menu principal en mode mobile */
    ul.dropdown {
        flex-direction: column;
        background: var(--color-primary-03);
        list-style: none;
    }
    
    ul.dropdown li {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        width: 100%;
        list-style: none;
    }
    
    ul.dropdown li a {
        border-top: none;
        border-left: 4px solid transparent;
        padding: 15px 20px;
    }
    
    ul.dropdown li a:hover,
    ul.dropdown li.active a {
        border-left: 4px solid var(--color-primary-05);
        border-top: none;
        transform: none;
    }
    
    /**
     * Sous-menus en mode mobile
     * Affichage statique avec masquage par défaut
     */
    ul.dropdown ul {
        position: static;
        visibility: visible;
        opacity: 1;
        transform: none;
        width: 100%;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
        border-radius: 0;
        border: 1px solid var(--color-shades-03);
        margin-top: 0;
        display: none;
        list-style: none;
        padding: 0;
    }
    
    ul.dropdown li:hover ul {
        display: block;
    }
    
    ul.dropdown ul li {
        list-style: none !important;
        margin: 0;
        padding: 0;
    }
    
    ul.dropdown ul li a {
        padding: 12px 30px;
        font-size: 13px;
    }
}

/**
 * Reset des anciens styles de bordure arrondies
 * Suppression des préfixes obsolètes
 */
ul.dropdown #topfirst {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

ul.dropdown #toplast {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

/* ========================================================================
   ACCESSIBILITÉ ET NAVIGATION CLAVIER
======================================================================== */

/**
 * États de focus pour la navigation clavier
 * Amélioration de l'accessibilité selon les standards WCAG
 */
ul.dropdown a:focus {
    outline: 2px solid var(--color-primary-05);
    outline-offset: 2px;
}

ul.dropdown li a:focus {
    background: var(--color-primary-02);
    color: var(--color-primary-03);
    border-top: 4px solid var(--color-primary-05);
}

ul.dropdown ul li a:focus {
    background: var(--color-shades-05);
    color: var(--color-primary-03);
    border-left: 3px solid var(--color-primary-05);
}

/* ========================================================================
   OPTIMISATIONS DE PERFORMANCE
======================================================================== */

/**
 * Accélération matérielle pour les transformations
 * Amélioration des performances d'animation
 */
ul.dropdown,
ul.dropdown li,
ul.dropdown li a,
ul.dropdown ul {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/**
 * Optimisation des propriétés qui changent fréquemment
 * Indication au navigateur des propriétés à optimiser
 */
ul.dropdown ul {
    will-change: opacity, transform, visibility;
}

/* ========================================================================
   RESET FINAL DE SÉCURITÉ
======================================================================== */

/**
 * Reset universel pour éliminer définitivement les puces de liste
 * Application à tous les descendants du menu dropdown
 */
ul.dropdown * {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
}

/**
 * Suppression de l'indentation par défaut des listes imbriquées
 */
ul.dropdown ul {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

ul.dropdown ul li {
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-indent: 0 !important;
}