/* BASE */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #333;
    background-color: #f8f8f8;
}

/* HEADER */
.header-container {
    display: flex;
    align-items: center; /* Aligne verticalement */
    justify-content: center; /* Centre le titre */
    background-color: #172937;
    color: #f0c690;
    padding: 20px;
    position: relative; /* Position relative pour placer le bouton */
}

/* TITRE */
.header-title {
    font-size: 28px;
    text-align: center; /* Centre le texte */
    flex-grow: 1; /* Permet au titre de prendre toute la largeur restante */
}

/* BOUTON RETOUR */
.return-button {
    position: absolute;
    right: 20px; /* Alignement à droite */
    padding: 10px 20px;
    background-color: #2b7bc2; /* Bleu */
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 14px;
}

.return-button:hover {
    background-color: #1e5687; /* Bleu plus foncé au survol */
}

/* SECTIONS */
.legal-section {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

h2 {
    font-size: 22px;
    color: #172937;
}

p, ul {
    margin-bottom: 15px;
}

a {
    color: #2b7bc2;
    text-decoration: none;
}

/* FOOTER */
footer {
    text-align: center;
    padding: 10px;
    font-size: 14px;
    background-color: #172937;
    color: #f0c690;
}

footer a {
    color: #f0c690;
    text-decoration: none;
}

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

/* RESPONSIVE DESIGN */

/* TABLETTE - ÉCRANS INFÉRIEURS À 992px */
@media screen and (max-width: 992px) {
    /* HEADER */
    .header-container {
        flex-direction: column; /* Passe en colonne */
        align-items: center; /* Centre verticalement */
        padding: 15px; /* Réduction de l'espacement */
    }

    .header-title {
        font-size: 24px; /* Taille ajustée */
        margin-bottom: 10px;
    }

    .return-button {
        position: static; /* Supprime la position absolue */
        margin-top: 10px; /* Ajoute un espace en haut */
        padding: 8px 16px;
        font-size: 14px;
    }

    /* SECTIONS */
    .legal-section {
        padding: 15px;
    }

    h2 {
        font-size: 20px; /* Taille ajustée */
    }

    p, ul {
        font-size: 14px; /* Texte légèrement réduit */
        line-height: 1.6;
    }

    footer {
        font-size: 12px; /* Ajustement du footer */
    }
}

/* MOBILE - ÉCRANS INFÉRIEURS À 576px */
@media screen and (max-width: 576px) {
    /* HEADER */
    .header-container {
        flex-direction: column; /* Passe en colonne */
        align-items: center; /* Centre verticalement */
        padding: 10px; /* Réduction de l'espacement */
    }

    .header-title {
        font-size: 20px; /* Taille réduite */
        margin-bottom: 10px; /* Ajout d'espace */
    }

    .return-button {
        width: 100%; /* Bouton pleine largeur */
        padding: 10px;
        font-size: 14px;
        text-align: center;
    }

    /* SECTIONS */
    .legal-section {
        padding: 10px;
    }

    h2 {
        font-size: 18px; /* Réduit encore légèrement la taille */
    }

    p, ul {
        font-size: 14px; /* Taille réduite */
        line-height: 1.5;
    }

    footer {
        font-size: 12px; /* Ajustement de la taille */
    }
}