body {
    font-family: 'Arial', sans-serif;
    background-color: var(--background-color);
    background-image: url('https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNjUyOXwwfDF8c2VhcmNofDEzfHxjaXR5fGVufDB8fHx8MTY3MDY2MDEwMQ&ixlib=rb-1.2.1&q=80&w=1080'); /* URL de l'image en ligne */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Garde l'image fixe lors du scroll */
    color: var(--text-color);
    margin: 0;
    padding: 20px;
    line-height: 1.6;
}

.container {
    background-color: rgba(255, 255, 255, 0.9); /* Couleur de fond blanche avec une légère transparence */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Ombre portée */
    transition: box-shadow 0.3s ease; /* Transition pour les ombres */
}

.container:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Ombre plus forte au survol */
}

h1, h2 {
    color: var(--header-color);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); /* Ombre portée légère pour le texte */
}

/* Applique l'image de fond au conteneur UL */
#day-details {
    background-image: url('https://images.unsplash.com/photo-1582158050076-52baeeb4a7a0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzNjUyOXwwfDF8c2VhcmNofDEzfHxjaXR5fGVufDB8fHx8MTY3MDY2MDEwMQ&ixlib=rb-1.2.1&q=80&w=1080');
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Style des éléments li */
#day-details li {
    position: relative;
    background-color: rgba(0, 0, 0, 0.5); /* Overlay sombre sur chaque li */
    margin-bottom: 5px;
    padding: 2px;
    border-radius: 10px;
    color: white;
    z-index: 2;
    list-style: none;
}

/* Supprimer toute image de fond individuelle sur chaque li */
#day-details li::before {
    content: none;
}

/* Style du texte des cartes */
li h2, li p, li a {
    position: relative;
    z-index: 2; /* Place le texte au-dessus de l'overlay */
    color: white;
}

li h2 {
    font-size: 1.5em;
}

li p {
    margin: 10px 0;
}

/* Style des liens dans les cartes */
li a {
    color: #ffdf00;
    font-weight: bold;
    text-decoration: none;
}

li a:hover {
    text-decoration: underline;
}

/* Boutons avec couleurs d'accent */
button {
    background-color: var(--secondary-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Transition pour la couleur de fond et la transformation */
}

button:hover {
    background-color: var(--link-hover-color);
    transform: translateY(-3px); /* Déplace légèrement le bouton vers le haut au survol */
}

.banner {
    background-image: url('../images/banner.JPG'); /* Chemin vers la nouvelle image */
    background-size: cover;
    background-position: center;
    height: 400px;
    border-radius: 10px;
    margin-bottom: 20px;
}


#days-list li{
    position: relative;
    background-size: cover;
    background-position: center;
    margin-bottom: 15px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombre portée */
    overflow: hidden; /* Pour s'assurer que rien ne dépasse */
    background-color: rgba(0, 0, 0, 0.2);
    height: 250px;
}