/* ================================================
   SLIDER MODERNE ZAHRA TV - Design amélioré
   ================================================ */

/* Container principal du slider */
#sliderModerne {
    width: 100%;
    max-width: 100%;
    height: 650px;
    position: relative;
    overflow: hidden;
    background: #000;
    margin: 0;
    padding: 0;
}

/* Pour desktop : slider pleine largeur */
@media (min-width: 769px) {
    #sliderModerne {
        width: 100vw;
        height: 56.25vw;  /* Ratio 16:9 */
        max-height: 700px;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Slides */
.slider-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 2s cubic-bezier(0.25, 0.1, 0.25, 1);
    z-index: 1;
    will-change: opacity;
}

.slide.active {
    opacity: 1;
    z-index: 2;
}

/* Transition croisée ultra douce entre les slides */
.slide.fade-out {
    opacity: 0;
    transition: opacity 2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.slide.fade-in {
    opacity: 1;
    transition: opacity 2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Images */
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Navigation (flèches) */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.slider-nav:hover {
    background: rgba(44, 95, 45, 0.95);
    transform: translateY(-50%) scale(1.15);
    box-shadow: 0 5px 20px rgba(44, 95, 45, 0.4);
}

.slider-prev {
    left: 20px;
}

.slider-next {
    right: 20px;
}

/* Indicateurs (points) */
.slider-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 12px;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 30px;
    backdrop-filter: blur(10px);
}

.slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid white;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.slider-dot.active {
    background: white;
    width: 40px;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.slider-dot:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.2);
}

/* Pas de zoom - Images fixes et stables */
.slide.active img {
    transform: scale(1);
    /* Animation désactivée pour garder les images fixes */
}

/* Responsive - Navigation et indicateurs */
@media (max-width: 768px) {
    /* Adapter la hauteur du slider au ratio 16:9 */
    #sliderModerne {
        width: 100vw;
        height: 56.25vw; /* Ratio 16:9 */
        max-height: 450px;
    }
    
    /* Images - même adaptation */
    .slide-image {
        width: 100%;
        height: 100%;
    }
    
    .slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .slider-nav {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .slider-prev {
        left: 10px;
    }
    
    .slider-next {
        right: 10px;
    }
    
    .slider-dots {
        bottom: 20px;
        gap: 8px;
    }
    
    .slider-dot {
        width: 10px;
        height: 10px;
    }
    
    .slider-dot.active {
        width: 30px;
    }
}

@media (max-width: 480px) {
    /* Adapter la hauteur du slider au ratio 16:9 */
    #sliderModerne {
        width: 100vw;
        height: 56.25vw; /* Ratio 16:9 */
        max-height: 300px;
    }
    
    .slider-nav {
        display: none; /* Masquer les flèches sur mobile */
    }
}

/* Masquer l'ancien slider */
#homeSliderAlt {
    display: none !important;
}

/* ================================================
   VIDÉOS YOUTUBE DANS LE SLIDER
   ================================================ */

/* Slide vidéo */
.slide-video {
    width: 100%;
    height: 100%;
    position: relative;
    background: #000;
}

/* Conteneur de la vidéo YouTube */
.youtube-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}

/* iframe YouTube - DESKTOP - remplissage complet avec mode cover */
.youtube-iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Technique classique de remplissage cover pour iframe */
    /* La vidéo doit être plus grande que le conteneur pour le remplir */
    width: 100vw;              /* Largeur = largeur viewport */
    height: 56.25vw;           /* Hauteur = ratio 16:9 */
    
    /* S'assurer que ça remplit aussi en hauteur si le slider est grand */
    min-width: calc(650px * 16 / 9);   /* Si hauteur slider = 650px, largeur min */
    min-height: 650px;                  /* Hauteur min = hauteur slider */
    
    border: none;
}

/* S'assurer que la vidéo couvre tout l'espace */
.slide-video .youtube-video-container iframe {
    object-fit: cover;
}

/* Masquer les contrôles et éléments YouTube */
.youtube-video-container {
    pointer-events: none; /* Empêcher les clics sur les contrôles */
}

.youtube-iframe {
    pointer-events: auto; /* Permettre la lecture */
}

/* Overlay pour masquer complètement les contrôles YouTube */
.youtube-video-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px; /* Masquer la barre de contrôle du bas */
    background: transparent;
    pointer-events: none;
    z-index: 10;
}

/* Responsive pour les vidéos - ADAPTER LE CONTENEUR AU RATIO 16:9 */
@media (max-width: 768px) {
    /* Container du slider mobile - HAUTEUR AUTOMATIQUE (ratio 16:9) */
    #sliderModerne {
        width: 100vw;
        height: 56.25vw; /* Ratio 16:9 : (9/16) * 100 = 56.25% de la largeur */
        max-height: 450px; /* Limiter pour les tablettes */
    }
    
    /* Slide vidéo - même taille que le conteneur */
    .slide-video {
        width: 100%;
        height: 100%;
        position: relative;
    }
    
    /* Container vidéo */
    .youtube-video-container {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
    }
    
    /* iframe YouTube - remplissage parfait du conteneur */
    .youtube-iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }
    
    .youtube-video-container::after {
        height: 50px;
    }
}

@media (max-width: 480px) {
    /* Container du slider petit mobile - HAUTEUR AUTOMATIQUE (ratio 16:9) */
    #sliderModerne {
        width: 100vw;
        height: 56.25vw; /* Ratio 16:9 parfait */
        max-height: 300px; /* Limiter la hauteur max */
    }
    
    /* Slide vidéo - même taille que le conteneur */
    .slide-video {
        width: 100%;
        height: 100%;
    }
    
    /* iframe YouTube - remplissage parfait */
    .youtube-iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }
}