/* Supprime les marges par défaut du body et html */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Empêche les débordements */
}

/* Style pour le conteneur principal */
.main-container {
    display: flex;
    width: 100%;
    height: 100%; /* Ajuste la hauteur du conteneur principal */
    background-color: #c8a287;
}

/* Conteneur gauche */
.left-container {
    position: relative;
    flex: 2; /* 2/3 de la largeur totale */
    overflow: hidden; /* Masque les débordements de l'image */
    margin: 0; /* Supprime les marges */
}

.background-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Assure que l'image couvre tout le conteneur sans déformer */
}

.bottom-right-text {
    position: absolute;
    bottom: 0px; /* Espace depuis le bas du conteneur */
    right: 0px; /* Espace depuis la droite du conteneur */
    padding: 0px; /* Espace autour du texte */
    margin: 0; /* Supprime les marges par défaut des éléments h4 */
    padding-right: 5px; /* Ajoute un peu d'espace vertical entre les éléments */
}
h3 {
    font-size: 1em; /* Taille du texte en petit */
    color: #FFFFFF; /* Couleur du texte */
    font-family: 'Lexend Mega', sans-serif;
}

/* Conteneur droit (1/3 de la page) */
.right-container {
    flex: 1; /* 1/3 de la largeur */
    margin: 0; /* Supprime les marges */
    background-color: #4d3f28;

    /* Utilise flexbox pour organiser le contenu */
    display: flex;
    flex-direction: column;
}

/* Conteneur pour l'image en haut à droite */
.header-content {
    display: flex;
    justify-content: flex-end; /* Aligne l'image à droite */
    padding: 20px;
}

/* Conteneur pour le texte centré */
.text-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre le texte horizontalement */
    justify-content: center; /* Centre le texte verticalement */
    flex-grow: 1; /* Prend tout l'espace restant */
    text-align: center; /* Centre le texte à l'intérieur du conteneur */
    padding: 20px;
}

/* Style pour l'image */
.header-image {
    height: 40px; /* Ajustez la taille selon votre image */
    padding-top: 0px;
}

/* Style pour l'image */
.logo-image {
    height: 40px; /* Ajustez la taille selon votre image */
    padding-top: 40px;
    padding-left: 10px;
    padding-right: 10px;
}

/* Style pour le conteneur "En savoir plus" */
.more-info a{
    text-decoration: none; /* Enlève le soulignement */
    background-color: #4d3f28;
    color: white;
    padding: 15px;
    border-radius: 15px;
    margin-top: 5px; /* Espace au-dessus du conteneur "En savoir plus" */
    cursor: pointer;
    border: 2px solid white; /* Ajoute un contour blanc */
}

.text-contact{
padding: 15px;
}

/* Style pour le conteneur "En savoir plus" */
p{
    color: white;
    font-size: 0.8em;
    padding: 0px;
    line-height: 2;

}

.more-info a:hover {
    background-color: #6a5940; /* Change la couleur au survol */
}

h1 {
    font-size: 3em;
    margin: 0;
    font-family: "Abril Fatface", serif;
    font-weight: bold; /* Applique le style en gras */
    color: white;
    padding-bottom: 40px;
    z-index: 1; /* Assure que le texte est au-dessus de tout autre contenu */
}

h2 {
    font-size: 1.4em;
    margin: 10px 0 0 0;
    font-family: 'Lexend Mega', sans-serif;
    color: #FFFFFF; /* Couleur du texte du lien */
    padding-left : 0px;
    padding-right : 0px;
    padding-top: 0px;
    padding-bottom: 40px;
}

.logo-reseaux {
    display: flex;
    height: 40px; /* Ajustez la taille selon votre image */
    padding-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
}

/* Media queries pour les écrans de 600px de large ou moins */
@media (max-width: 600px) {

    /* Le conteneur gauche occupe plus d'espace vertical */
    .left-container {
        flex: 2; /* Prend une partie plus égale de la hauteur */
        height: 100vh; /* Définit une hauteur relative à la vue */
    }

    /* Le conteneur droit occupe moins d'espace vertical */
    .right-container {
        flex: 1;
        height: 100vh; /* Définit une hauteur relative à la vue */
    }

    /* Ajuste les tailles de texte pour les petits écrans */
    h1 {
        font-size: 2.2em;
        padding-bottom: 20px;
    }

    h2 {
        font-size: 0.9em;
        padding-bottom: 20px;
    }

    h3 {
        font-size: 0.9em;
    }

    /* Réduit la taille des boutons pour les petits écrans */
    .more-info a {
        padding: 10px;
        font-size: 0.9em;
    }

    .text-contact p {
        font-size: 1em;
    }

    .logo-reseaux {
        margin-top: -5px;
    }
}