/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    bottom: 7rem;
    z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
    height: 32rem;
}


/* --- Styles globaux du carousel --- */
#myCarousel {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2);
    background-color: #e6ddda; /* Beige clair */
}

/* --- Images du carousel --- */
.carousel-img {
    border-radius: 15px;
    object-fit: cover;
}

/* --- Indicateurs (petits ronds en bas) --- */
.carousel-indicators button {
    background-color: #bdaaa5; /* Brun rosé */
    border-radius: 50%;
    width: 12px;
    height: 12px;
}

.carousel-indicators .active {
    background-color: #6e4d46; /* Brun foncé */
}

/* --- Texte et bouton du carousel --- */
.carousel-caption {
    background: rgba(255, 255, 255, 0.7); /* Effet rétro semi-transparent */
    border-radius: 10px;
    padding: 20px;
    color: #6e4d46; /* Brun foncé */
    text-shadow: none;
    font-family: 'Georgia', serif;
}

.carousel-caption h1 {
    font-size: 2rem;
    font-weight: bold;
}

.card-mainpage-btn:hover {
    background-color: #a28c86;
}

/* --- Boutons de navigation (précédent & suivant) --- */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(189, 170, 165, 0.8); /* Brun rosé transparent */
    border-radius: 50%;
    padding: 10px;
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
    background-color: #6e4d46; /* Brun foncé */
}