/* Styles pour les petits écrans */
@media screen and (max-width: 600px) {
    .video-section {
        width: 100%;
        height: auto;
        border-radius: 0;
    }
    .video-section video {
        width: 100%;
        height: auto;
    }
}

/* Styles pour les grands écrans */
@media screen and (min-width: 601px) {
    .video-section {
        width: 50%;
        height: 50vh; /* 50% de la hauteur de la vue (viewport height) */
        border-radius: 10px;
    }
    .video-section video {
        width: 100%;
        height: 100%;
    }
}


.video-section {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border: 2px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 999;
}

.video-section video {
    width: 100%;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

.hidden {
    display: none;
}
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        /* Styles pour la section des catégories */
        .categories {
            max-width: 800px;
            margin: 20px auto;
            text-align: center;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between; /* Pour aligner les catégories sur les grands écrans */
        }
    
        .category {
            position: relative; /* Position relative pour les conteneurs des catégories */
            width: calc(50% - 20px); /* Affiche deux catégories par ligne sur les grands écrans */
            margin: 10px;
            box-sizing: border-box;
        }
    
        .category img {
            width: 100%;
            height: 100px; /* Taille fixe pour les images */
            object-fit: cover; /* Redimensionne les images pour remplir le conteneur sans déformation */
            border-radius: 5px;
            margin-bottom: 10px;
            display: none; /* Par défaut, cacher toutes les images */
        }
    
        .category img.active {
            display: block; /* Afficher uniquement l'image active */
        }
    
        .category h3 {
            margin-top: -15px; /* Ajustez selon votre préférence */
            margin-bottom: 0;
            color: black;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 5px 10px;
            border-radius: 5px;
            font-weight: bold;
        }


         /* Media query pour les petits écrans */
         @media screen and (max-width: 600px) {
                .categories {
                    justify-content: center; /* Centrer les catégories sur les petits écrans */
                }
    
                .category {
                    width: calc(50% - 20px);
                    margin: 10px;
                }
            }
    
            /* Media query pour les grands écrans */
            @media screen and (min-width: 601px) {
                .category {
                    width: calc(25% - 20px); /* Affiche quatre catégories par ligne sur les grands écrans */
                }
            }