/* Conteneur du slider */
.slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: calc(100vh - 160px); /* Ajuster la hauteur du slider */
}

/* Conteneur des diapositives */
.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
    height: 100%; /* Assurer que les diapositives remplissent le conteneur */
}

/* Diapositive individuelle */
.slide {
    flex: 1 0 100%; /* Prend 100% de la largeur du conteneur */
    height: 100%; /* Assure que chaque diapositive remplit le conteneur */
    display: flex;
    align-items: center; /* Centrer l'image verticalement */
    justify-content: center; /* Centrer l'image horizontalement */
}

/* Image dans chaque diapositive */
.slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; /* Remplir le conteneur sans déformation */
}



/* Points de navigation */
.dots {
    text-align: center;
    position: absolute;
    bottom: 10px;
    width: 100%;
}

.dot {
    display: inline-block;
    width: 12px; /* Augmenter la taille pour mieux voir */
    height: 12px; /* Augmenter la taille pour mieux voir */
    margin: 0 5px; /* Espacement entre les dots */
    background-color: #bbb;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.6s ease;
}

.dot.active {
    background-color: #717171;
}