/**
 * SLIDER MOBILE HERO - Styles pour le slider photo mobile uniquement
 * S'affiche uniquement sur mobile (max-width: 768px)
 */

/* Desktop - Cacher complètement le slider mobile */
@media (min-width: 769px) {
    .mobile-slider-container,
    .mobile-slider,
    .mobile-slide,
    .mobile-slider-overlay,
    .mobile-slider-dots,
    .mobile-dot {
        display: none !important;
    }
}

/* Mobile uniquement */
@media (max-width: 768px) {
    /* Conteneur du slider mobile */
    .mobile-slider-container {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
    }
    
    /* Slider principal */
    .mobile-slider {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
    
    /* Chaque slide - MASQUÉ PAR DÉFAUT */
    .mobile-slide {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.8s ease-in-out, visibility 0s linear 0.8s;
    }
    
    /* Slide actif - VISIBLE ET PRIORITAIRE */
    .mobile-slide.active {
        opacity: 1 !important;
        visibility: visible !important;
        transition: opacity 0.8s ease-in-out, visibility 0s linear 0s !important;
        z-index: 1 !important;
    }
    
    /* Images du slider mobile - REMPLIR TOUT L'ESPACE */
    .mobile-slide img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }
    
    /* Overlay sombre pour améliorer la lisibilité du texte */
    .mobile-slider-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.4) 0%,
            rgba(0, 0, 0, 0.2) 50%,
            rgba(0, 0, 0, 0.4) 100%
        );
        z-index: 2;
        pointer-events: none;
    }
    
    /* Points de navigation du slider mobile */
    .mobile-slider-dots {
        position: absolute;
        bottom: 15px !important; /* Descendu encore plus bas */
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 10px;
        z-index: 20;
        padding: 8px 12px;
        border-radius: 20px;
        background: transparent; /* Pas de fond pour éviter l'overlay */
        backdrop-filter: none;
        align-items: center;
        opacity: 0.6; /* Opacité de 60% */
    }
    
    .mobile-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        transition: all 0.3s ease;
        border: 2px solid transparent;
    }
    
    .mobile-dot:hover {
        background: rgba(255, 255, 255, 0.7);
        transform: scale(1.2);
    }
    
    .mobile-dot.active {
        background: #F7B801;
        border-color: rgba(255, 255, 255, 0.8);
        transform: scale(1.3);
        box-shadow: 0 0 8px rgba(247, 184, 1, 0.6);
    }
    
    /* Flèches de navigation mobile - sans fond/overlay */
    .mobile-slider-arrow {
        background: none;
        border: none;
        border-radius: 0;
        width: auto;
        height: auto;
        cursor: pointer;
        transition: all 0.3s ease;
        color: white;
        padding: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.6; /* Opacité de 60% */
    }
    
    .mobile-slider-arrow:hover {
        color: #F7B801;
        transform: scale(1.2);
        opacity: 1; /* Opacité à 100% au survol */
    }
    
    .mobile-slider-arrow:active {
        transform: scale(1);
    }
    
    .mobile-slider-arrow svg {
        width: 24px;
        height: 24px;
        stroke-width: 3.5;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
    }
    
    /* S'assurer que le contenu du hero reste au-dessus */
    .hero-content {
        position: relative;
        z-index: 10;
        margin-top: 1rem !important; /* Réduit de 3rem à 1rem pour remonter le contenu */
        padding-top: 1rem !important;
    }
    
    /* Ajuster le hero pour contenir le slider */
    .hero {
        position: relative;
        overflow: hidden;
        min-height: auto;
        padding: 2rem 0 6rem 0 !important; /* Réduit le padding-top (2rem) mais augmente padding-bottom (6rem) pour plus de hauteur et espace pour les dots */
        /* Fond de secours au cas où les images ne chargent pas */
        background: linear-gradient(135deg, #004E89 0%, #1a1a1a 100%) !important;
    }
}

/* Très petits écrans */
@media (max-width: 480px) {
    .mobile-slider-dots {
        bottom: 15px;
        gap: 8px;
        padding: 8px 12px;
    }
    
    .mobile-dot {
        width: 8px;
        height: 8px;
    }
}