/* ==========================================================================
   1. DÉFINITION DE L'ANIMATION DES COULEURS (Keyframes)
   ========================================================================== */
@keyframes logoColorShift {
    0% { border-color: #1e3df2; }       /* Bleu Roi */
    33% { border-color: #ff2a75; }      /* Rose Attrayant */
    66% { border-color: #708090; }      /* Gris Métallique */
    100% { border-color: #1e3df2; }     /* Retour au Bleu */
}

@keyframes gradientBgAction {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ==========================================================================
   2. LOGO & HEADER
   ========================================================================== */
#_desktop_logo img, .logo {
    max-height: 90px !important;
    width: auto !important;
    transition: all 0.3s ease;
}

/* ==========================================================================
   3. NAVBAR & ANIMATION DU CADRE (Border Frame)
   ========================================================================== */
.menu, .top-menu, #top-menu {
    background-color: #fff !important;
    /* Un filigrane animé sous le menu qui change de couleur en continu */
    border-bottom: 4px solid #1e3df2 !important;
    animation: logoColorShift 8s infinite ease-in-out;
}

/* Liens principaux du menu */
.top-menu a, .top-menu .dropdown-item {
    color: #333 !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    transition: all 0.2s ease;
    position: relative;
}

/* Effet de survol (Hover) avec couleur Rose Attrayante pour capter l'attention */
.top-menu a:hover {
    color: #ff2a75 !important; 
    padding-bottom: 2px;
}

/* ==========================================================================
   4. SOUS-NAVBAR (Menu Déroulant)
   ========================================================================== */
.top-menu .sub-menu {
    max-width: 100% !important;
    box-shadow: 0px 8px 24px rgba(0,0,0,0.12) !important;
    border-top: 3px solid #ff2a75 !important; /* Ligne rose pour flasher au survol */
    padding: 20px !important;
    background-color: #ffffff !important;
}

.top-menu .sub-menu ul li {
    padding: 6px 12px !important;
}

.top-menu .sub-menu a {
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: #708090 !important; /* Gris métallique d'origine */
}

/* Animation douce au survol des sous-catégories */
.top-menu .sub-menu a:hover {
    color: #1e3df2 !important; /* Change en Bleu Roi */
    text-decoration: none !important;
    padding-left: 5px; /* Petit effet de glissement dynamique */
}

/* ==========================================================================
   5. SCROLLER / CAROUSEL (Slider Pleine Largeur)
   ========================================================================== */
.carousel, .carousel-inner, .carousel-item img {
    width: 100% !important;
    max-height: 480px !important;
    object-fit: cover !important;
}

/* BONUS ATTRAYANT : Ajout d'une fine ligne animée dégradée sous le slider */
.carousel::after {
    content: "";
    display: block;
    height: 4px;
    width: 100%;
    background: linear-gradient(270deg, #1e3df2, #ff2a75, #708090);
    background-size: 600% 600%;
    animation: gradientBgAction 6s infinite ease-in-out;
}

/* ==========================================================================
   6. RESPONSIVE (Smartphones & Tablettes)
   ========================================================================== */
@media (max-width: 767px) {
    #_desktop_logo img, .logo, #_mobile_logo img {
        max-height: 55px !important;
        width: auto !important;
    }
    
    .carousel, .carousel-inner, .carousel-item img {
        max-height: 220px !important;
    }
    
    .top-menu .sub-menu {
        border-left: 4px solid #ff2a75 !important; /* Bordure rose sur mobile */
        padding-left: 15px !important;
    }
}
🌟