.slider {
    position: relative;
    width: 99%;
    height: 99vh; /* Ajuster selon les besoins */
    overflow: hidden;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s;
}

.slide.active {
    opacity: 1;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Calibri', sans-serif;
}


.logo {
    position: absolute;
    right: 2%; /* Ajuster selon les besoins */
    bottom: 15%; /* Ajuster selon les besoins */
    height: 70%; /* Ajuster selon la taille du logo */
}

.barre-bleue {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 7%;
    background-color: #f0f0f2;
    z-index: 1000; /* Assure que la barre reste au-dessus des autres éléments */
    display: flex;
    align-items: center; /* Centre les titres verticalement */
    padding-left: 10px; /* Un peu d'espace à gauche */
    overflow-x: auto; /* Permet le défilement horizontal si nécessaire */
}

.liste-titres {
    text-align: center;
    display: flex;
    flex-direction: row; /* Aligner les éléments horizontalement */
    max-height: 100%;
}

.liste-titres div {
    margin-right: 20px; /* Espacement entre les titres */
}


.titre-actif {
    font-weight: bold;
    z-index: 2000;
}

#playPauseBtn {
    margin-right: 10px; /* Espace entre le bouton et l'espace suivant */
    cursor: pointer; /* Change le curseur pour indiquer une action cliquable */
}