body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: url('background-new.jpg') no-repeat center center fixed;
    background-size: cover;
    color: #000;
    text-align:center;
}

header {
    text-align: center;
    padding: 1em;
    width:100%;
}

.menu{
    text-align: center;
    padding: 1em;
    width:100%;
}

.menu ul {
    display: flex;
    justify-content: center;
    list-style-type: none;
    padding: 0;
    margin: 0;
    
}

nav ul li {
    margin: 0 3 em;
}

nav ul li a {
    text-decoration: none;
    color: #000;
    
    transition: color 0.3s;
    font-size : 3em;
}

nav ul li a:hover {
    color: #000;
}

main {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60vh;
        
}

footer {
    text-align: center;
    padding: 1em;
    
    
}

.carousel-container {
    position: relative;
    width: 100%;
    max-width: 380px;
    overflow: hidden; /* Masque les objets dépassant du carrousel */
    border-radius: 8px; /* Ajout pour des coins arrondis, si souhaité */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optionnel : ajoute un effet visuel propre */
}

.carousel , .carousel-video, .carousel-music  {
    display: flex;
        transition: transform 0.5s ease-in-out;
}

.carousel-item, .carousel-item-video,.carousel-music {
    min-width: 100%;
    box-sizing: border-box;
    padding: 10px;
}

video {
    width: 100%;
    border-radius: 8px;
}


.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 1;
}

#prev-btn {
    left: 10px;
}

#next-btn {
    right: 10px;
}

#musique {
    display : none;
    width:320px;
    overflow:hidden;
}

#video {
    display : block;
    width:380px;
    height:650px; 
}




.carousel{
    margin : 10px;
}

.iconMenu{
    margin: 5px;
    float:left;

}

.bouton{
    float : left
}