/* Styles généraux */
body {
    margin: 0;
    font-family: 'Arial', sans-serif;
    line-height: 1.5;
    color: #133340;
}

/* En-tête */
header {
    position: sticky;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(113, 225, 219, 0);
    color: white;
    padding: 10px 20px;
}

header .logo img {
    margin-top: 12px;
    margin-left: 5px;
    height: 70px; /* Taille ajustée pour le logo */
}

header .contact-button {
    margin-top: 20px;
    margin-right: 10px;
    background-color: #133340;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

header .contact-button:hover {
    background-color: #286f80;
}

/* Contenu principal */
main {
    background-image: url('background.png');
    background-size: cover;
    background-position: center;
    color: white;
}

.content {
    padding: 30px 30px 0;
    display: flex;
    gap: 40px; /* Plus d’espace entre les cadres */
    justify-content: center;
}

.why, .offer, .contact-info, .conditions {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    color: #133340;
    text-align: justify;
}

.conditions {
    width: 80%;
}

.pCG {
    margin: 0;
}

h1 {
    margin-top: 0;
    text-align: center;
}

h2 {
    margin-top: 0;
    text-align: center;
}

.h2CG {
    text-align: left;
    margin-top: revert;
}

.content > .why {
    flex: 72; /* Répartir l'espace également */
}

.content > .vertical {
    flex: 100; /* Répartir l'espace également */
}

/* Mise en évidence des mots avec strong */
.planitb, a {
    color: #286f80;
    text-decoration: none;
    font-weight: bold;
}

/* Section Nous joindre */
.contact-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: 15px;
    margin: 20px auto 0;
    color: #133340;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Effet d'ombre moderne */
}

.contact-info a:hover {
    text-decoration: underline;
}

.contact-info p {
    margin: 5px 0 5px 10px;
}

.contact-info-photo {
    display: flex;
    justify-content: center; /* Centrer horizontalement */
    align-items: center; /* Centrer verticalement */
    margin: 10px;
}

/* Pied de page */
footer {
    text-align: left; /* Alignement à gauche */
    padding: 10px 40px; /* Espacement pour ne pas être collé au bord */
    color: white;
    position: relative;
    bottom: 0;
    width: 100%;
    font-size: 0.9em;
}

footer a {
    color: white; /* Couleur du texte des liens */
    text-decoration: none; /* Supprimer le soulignement */
    font-weight: bold; /* Mettre en gras */
}

footer a:hover {
    text-decoration: underline; /* Souligner au survol */
}

.home-button {
    position: relative;
    top: 15px;
    margin-left: 30px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #133340; /* Couleur du texte */
    padding: 10px 20px; /* Espacement interne */
    border: none; /* Pas de bordure */
    border-radius: 5px; /* Coins arrondis */
    text-decoration: none; /* Supprimer le soulignement */
    font-weight: bold; /* Texte en gras */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Effet d'ombre */
}

.home-button:hover {
    background-color: rgba(210, 220, 237, 0.9); /* Couleur de fond au survol */
}

@media (max-width: 800px) {
    .content {
        flex-direction: column;
        gap: 20px;
    }

    header {
        flex-direction: column;
    }

    header .logo img {
        height: 60px; /* Taille ajustée pour le logo sur mobile */
        display: block;
        margin: 0 auto; /* Centrer horizontalement */
    }

    header .contact-button {
        text-align: center;
        display: block;
        margin: 10px auto;
    }

    .why, .offer, .contact-info {
        padding: 10px;
        border-radius: 5px;
    }

    .contact-info {
        flex-direction: column;
    }

    footer {
        text-align: center; /* Centrer le texte dans le pied de page */
        padding: 20px;
    }
}