* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

.background {
    background-color: #DC9751; /* Changez cette couleur pour le fond uni */
    height: 100%;
    position: relative;
}

.fixed-image {
    background-image: url('../images/accueil.jpg'); /* Remplacez par le chemin de votre image */
    background-size: cover; /* Assure que l'image couvre toute la taille de l'écran */
    background-position: center; /* Centre l'image */
    position: fixed; /* Rendre l'image fixe */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Assure que l'image soit au-dessus du fond */
}

.background {
    z-index: 0; /* Assure que le fond uni soit derrière l'image */
}

/* Style pour la première div (80% largeur et 20% hauteur, positionnée à 10% du coin supérieur gauche) */
.top-left {
    width: 30%;
    height: 20%;
    position: absolute;
    top: 10%;
    left: 60%;
    z-index: 2; /* Au-dessus du fond et de l'image */
}

/* Style pour la seconde div (centrée verticalement) */
.middle-box {
    width: 30%;
    height: 15%;
    position: absolute;
    top: 80%; /* 80% du haut de la page */
    left: 50%; /* Centrée horizontalement */
    transform: translate(-50%, -50%); /* Centrer l'élément */
    z-index: 2; /* Au-dessus du fond et de l'image */
    display: flex; /* Pour utiliser flexbox */
    flex-direction: column; /* Disposition verticale */
    align-items: center; /* Centre horizontalement */
    justify-content: center; /* Centre verticalement */
    background-color: rgba(255, 255, 255, 0.8);
}

/* Style pour le contenu textuel dans la middle-box */
.text-content {
    margin-bottom: 5px; /* Espacement entre le texte et l'image */
    font-size: x-large;
}

/* Style pour l'image dans la middle-box */
.image-content img {
    max-width: 100%; /* Limiter la largeur de l'image */
    height: auto; /* Conserver le ratio */
}