body {
    background-color: #f8f9fa;
    margin: 0; /* Assure qu'il n'y a pas de marge par défaut autour du body */
}

p {
    color: rgba(32,55,78,0.8);
    text-align: justify;
}

h5 {
    margin-bottom: 20px !important;
}

.banner {
    height: 40vh; /* 40% de la hauteur de la fenêtre d'affichage */
    width: 100%;
    background-image: url('Images/city.png'); /* Utilise l'image comme arrière-plan */
    background-size: cover; /* S'assure que l'image couvre entièrement le header */
    background-position: center; /* Centre l'image */
    position: relative; /* Nécessaire pour positionner l'overlay et le texte correctement */
    text-align: center; /* Centre le titre et le sous-titre dans le header */
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.1); /* Overlay noir avec opacité de 10% */
    z-index: 5; /* S'assure que l'overlay est sous le texte mais au-dessus de l'image */
}

.banner-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: Roboto,Arial,sans-serif;
    color: white; /* Couleur du texte pour le contraste */
    font-size: 60px; /* Taille du titre */
    font-weight: 700;
    z-index: 10; /* S'assure que le texte est au-dessus de l'overlay */
}

.text-shadow {
    text-shadow: 0 1px 2px rgba(82,131,173,.25);
}

.banner-subtitle {
    position: absolute;
    left: 50%;
    top: calc(50% + 40px); /* Ajustez cette valeur pour l'espacement entre le titre et le sous-titre */
    transform: translate(-50%, -50%);
    z-index: 10; /* S'assure que le texte est au-dessus de l'overlay */
    color: white; /* Couleur du texte pour le contraste */
    font-size: 1.2rem; /* Taille du sous-titre */
}

#subtitle_quote {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: Roboto,Arial,sans-serif;
    color: white; /* Couleur du texte pour le contraste */
    font-size: 22px; /* Taille du titre */
    font-weight: 400;
    z-index: 10; /* S'assure que le texte est au-dessus de l'overlay */
}

.container {
    background-color: #fdfdfd;
    text-align: left;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    margin-top: -8vh; /* Déplace le conteneur vers le haut pour qu'il soit partiellement superposé sur l'image */
    position: relative;
    z-index: 20; /* S'assure que le container est au-dessus de la bannière et de l'overlay */
    /* width: calc(100% - 120px);  Ajuste la largeur pour tenir compte du padding */
    margin-left: auto; /* Centre le conteneur horizontalement */
    margin-right: auto; /* Centre le conteneur horizontalement */

}

.subcontainer {
    background-color: #fdfdfd;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    margin-top: 3vh; /* Déplace le conteneur vers le haut pour qu'il soit partiellement superposé sur l'image */
    position: relative;
    margin-left: auto; /* Centre le conteneur horizontalement */
    margin-right: auto; /* Centre le conteneur horizontalement */
}

.text-gray{
    color: rgba(32,55,78,.8);
}

.page-name{
    padding-left: 100px;
}

.text-shadow {
    text-shadow: 0 1px 2px rgba(82,131,173,.25);
}

.card-name{
    margin-bottom: 40px;
    text-align: center;
}

.card-description{
    margin-bottom: 40px;
}

.card-title {
    margin-top: 20px;
}

/* Styles pour la liste, boutons, et checkboxes */
.list-group-item {
    background-color: #fdfdfd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.list-group-item span {
    display: flex;
    align-items: center;
}

.btn-sm {
    margin-left: 10px; /* Espacement entre le bouton et la checkbox */
    color: rgba(32,55,78,.8);
}

.btn-secondary:hover {
    color: #fff;
    background-color: #1abc9c;
    border-color: #1abc9c;
}

.btn-group-sm.btn, .btn-sm {
    padding: 0.25rem 1rem;
    background-color: #f8f9fa;
    font-size: 17px;
    cursor: pointer;
    box-shadow: 0px 1px 2px rgba(82,131,173,.25);
    font-weight: 600;
    line-height: 1.5;
    border-radius: 5px;
    border-color: lightgrey;
}

.btn-green {
    background-color: #1abc9c !important; /* Couleur verte Bootstrap pour le bouton actif */
    border-color: #1abc9c !important;
}

.btn-active {
    background-color: #28a745; /* La couleur verte que vous voulez garder */
    border-color: #28a745;
}

.btn-keep-green {
    background-color: #1abc9c !important; /* force le vert même après le clic */
    border-color: #1abc9c !important;
    color: white !important; /* rend le texte blanc */
}

.btn-secondary:focus {
    outline: none; /* Supprime le contour lorsqu'un élément est focus */
    box-shadow: none; /* Supprime également l'ombre de la boîte si elle est appliquée par Bootstrap */
}

.imagewrapper {
    padding-left: 0px;
}

.img-fluid {
    width: 100%; /* assure que l'image couvre la largeur */
    height: 100%; /* définit la hauteur de l'image pour couvrir la hauteur de la box */
    object-fit: cover; /* assure que l'image couvre la zone sans perdre son ratio */
    border-top-left-radius: 10px; /* arrondit les coins supérieurs si ta card a des bords arrondis */
    border-bottom-left-radius: 10px; /* arrondit les coins inférieurs si ta card a des bords arrondis */
}

.imagewrapper .img-fluid {
    max-height: 300px; /* Réduit la hauteur maximale de l'image de moitié */
    object-fit: cover; /* Assure que l'image couvre bien l'espace sans être déformée */
}

.card-img-top {
    height: 240px; /* Définit la hauteur maximale pour l'image */
    border-radius: 10px;
    object-fit: cover; /* S'assure que l'image couvre la zone définie sans perdre son ratio */
    width: 100%; /* S'assure que l'image couvre la largeur de la carte */
}

.card-subtitle {
    margin-top: 40px; 
    margin-bottom: 40px;
}

.ctaUlysse {
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    margin-top: 4vh; /* Ajoute de la distance entre cette box et la précédente, similaire à l'écart entre container et subcontainer */
}

.ulyssecontainer{
    margin-left: -2px;
    margin-right: -2px;
    margin-bottom: 60px;
}

.ctaUlysse .card-body {
    padding: 20px 30px; /* Ajoute 20px de padding en haut et 30px sur les côtés gauche et droit */
}


.travelertips {
    background-color: #fdfdfd;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    margin-top: 4vh; /* Déplace le conteneur vers le haut pour qu'il soit partiellement superposé sur l'image */
    position: relative;
    margin-left: auto; /* Centre le conteneur horizontalement */
    margin-right: auto; /* Centre le conteneur horizontalement */

}

.tipscard {
    margin-right: -35px;
    margin-left: -35px;
}