.sp-megamenu-parent>li>a,.sp-megamenu-parent>li>span{display:inline-block;padding:0 15px;line-height:80px;font-size:18px;margin:0;font-weight:bold}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a,.sp-megamenu-parent .sp-dropdown li.sp-menu-item span:not(.sp-menu-badge){font-size:14px;line-height:1;display:inline-block;padding:8px 0;cursor:pointer;font-weight:bold}
.offcanvas-menu .offcanvas-inner ul.menu>li>a,.offcanvas-menu .offcanvas-inner ul.menu>li>span{display:block;font-size:18px;padding:10px 0px;position:relative;line-height:18px;opacity:.7;transition:.3s;font-weight:bold}
.offcanvas-menu .offcanvas-inner ul.menu>li>ul li a{font-size:15px;padding:5px 0px;line-height:18px;font-weight:400;display:inline-block;font-weight:bold}
/* ==========================================================================
   VERSION CORRIGÉE - MODERN SLIDER PARA DAG-TG.ORG
   Cible l'addon "JS Slideshow" de SP Page Builder
   ========================================================================== */

/* 1. CONTENEUR GLOBAL & EFFETS
   -------------------------------------------------------------------------- */
.addon-root-js-slideshow .sp-slider {
    overflow: hidden !important;
    border-radius: 20px !important; /* Bords arrondis premium */
    box-shadow: 0 15px 45px rgba(0,0,0,0.15) !important;
    margin-bottom: 30px !important;
}

/* Overlay pour améliorer le contraste */
.addon-root-js-slideshow .sp-item:after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0.3) 100%);
    z-index: 1;
    pointer-events: none;
}

/* 2. TYPOGRAPHIE & CONTENU (Si présent)
   -------------------------------------------------------------------------- */
.addon-root-js-slideshow .sp-slider-content-align-center,
.addon-root-js-slideshow .sp-slider-content-align-left,
.addon-root-js-slideshow .sp-slider-content-align-right {
    z-index: 5 !important;
}

/* Styles pour le titre (généralement h2 ou h3 dans SPPB) */
.addon-root-js-slideshow .sp-item h1, 
.addon-root-js-slideshow .sp-item h2, 
.addon-root-js-slideshow .sp-item h3 {
    font-weight: 800 !important;
    text-shadow: 2px 4px 10px rgba(0,0,0,0.3) !important;
    letter-spacing: -1px !important;
}

/* 3. NAVIGATION (POINTS ET FLÈCHES)
   -------------------------------------------------------------------------- */

/* Flèches de navigation */
.addon-root-js-slideshow .sp-slider .sp-nav-control .nav-control {
    background-color: rgba(255,255,255,0.2) !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    transition: all 0.3s ease !important;
}

.addon-root-js-slideshow .sp-slider .sp-nav-control .nav-control:hover {
    background-color: #2ba84a !important; /* Couleur verte de votre logo */
    color: #fff !important;
    transform: scale(1.1);
}

/* Points de navigation (Bullets) */
.addon-root-js-slideshow .sp-slider .sp-dots ul li {
    width: 10px !important;
    height: 10px !important;
    background-color: rgba(255,255,255,0.5) !important;
    border: none !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 50% !important;
}

.addon-root-js-slideshow .sp-slider .sp-dots ul li.active {
    width: 30px !important; /* Effet de pilule premium */
    background-color: #2ba84a !important;
    border-radius: 10px !important;
}

/* 4. BOUTONS
   -------------------------------------------------------------------------- */
.addon-root-js-slideshow .sppb-btn {
    border-radius: 50px !important;
    padding: 14px 30px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
    transition: all 0.3s ease !important;
}

.addon-root-js-slideshow .sppb-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(43, 168, 74, 0.4) !important;
}