/**
 * Styles pour le header et la navigation
 * - Menu principal
 * - Sous-menus déroulants
 * - Menu mobile
 */

/* Variables */
:root {
    --dropdown-bg: white;
    --dropdown-hover: #f8f8f8;
    --dropdown-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    --dropdown-border: rgba(118, 153, 132, 0.2);
    --dropdown-text: #333;
    --dropdown-hover-text: #769984;
    --dropdown-animation: 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Styles pour les sous-menus déroulants */
.relative.group {
    position: relative;
}

/* Conteneur du dropdown */
.group .absolute {
    min-width: 220px;
    border-radius: 8px;
    background-color: var(--dropdown-bg);
    box-shadow: var(--dropdown-shadow);
    border: 1px solid var(--dropdown-border);
    transform-origin: top center;
    transition: all var(--dropdown-animation);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.98);
    overflow: hidden;
}

/* Animation à l'ouverture */
.group:hover .absolute {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Effet de décalage pour chaque élément du menu */
.group .absolute .py-1 a {
    display: block;
    padding: 12px 16px;
    color: var(--dropdown-text);
    font-weight: 500;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    transform: translateX(-10px);
    opacity: 0;
    transition-delay: 0s;
}

.group:hover .absolute .py-1 a {
    transform: translateX(0);
    opacity: 1;
}

/* Ajouter un délai progressif pour chaque élément */
.group:hover .absolute .py-1 a:nth-child(1) {
    transition-delay: 0.05s;
}

.group:hover .absolute .py-1 a:nth-child(2) {
    transition-delay: 0.1s;
}

.group:hover .absolute .py-1 a:nth-child(3) {
    transition-delay: 0.15s;
}

/* Style au survol des éléments */
.group .absolute .py-1 a:hover {
    background-color: var(--dropdown-hover);
    color: var(--dropdown-hover-text);
    border-left: 3px solid var(--dropdown-hover-text);
}

/* Icône de flèche avec animation */
.nav-link svg {
    transition: transform 0.3s ease;
}

.group:hover .nav-link svg {
    transform: rotate(180deg);
}

/* Effet de soulignement au survol des liens principaux */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--dropdown-hover-text);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* Styles pour le menu mobile */
.mobile-dropdown-toggle {
    position: relative;
}
a{
    color: white;   
}
.mobile-dropdown-icon {
    transition: transform 0.3s ease;
}

.mobile-dropdown-content {
    transition: all 0.3s ease;
}

/* Animation pour les sous-menus mobiles */
.mobile-dropdown-content.block {
    animation: slideDown 0.3s ease forwards;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}