@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

/* ==========================================================================
   1. CONFIGURATION GLOBALE & THÈMES
   ========================================================================== */
:root {
    --primary-color: #ffffff;      /* Fond du footer (Mode clair) */
    --secondary-color: #1A1A1A;    /* Couleur de texte principale (Noir du slogan) */
    --accent-color: #39B54A;       /* Vert principal du logo */
    --hover-color: #00AEEF;        /* Bleu cyan du toit pour les interactions */
    --text-muted: #7A7A7A;         /* Gris équilibré pour les textes secondaires */
}

.dark_mode {
    --primary-color: #1A1A1A;      /* Fond du footer (Mode sombre) */
    --secondary-color: #ffffff;    /* Texte en blanc */
    --accent-color: #39B54A;       /* Le vert reste identique */
    --hover-color: #00AEEF;        /* Le bleu reste identique */
    --text-muted: #A0A0A0;         /* Gris plus clair pour la lisibilité sur fond noir */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Rubik', sans-serif;
}

li { list-style: none; }
a { text-decoration: none; }

.show { display: inline; }
.hide { display: none; }

/* ==========================================================================
   2. STRUCTURE DU FOOTER
   ========================================================================== */
footer {
    width: 100%;
    z-index: 998;
    background-color: var(--primary-color);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 16px 70px -8px rgba(0, 0, 0, 0.15); /* Ombre adoucie */
    transition: background-color 0.3s ease;
}

.container_footer {
    max-width: 1240px;
    margin: auto;
    padding: 30px 40px;
}

footer .pied {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

/* ==========================================================================
   3. BLOC PROFIL & LOGO
   ========================================================================== */
.profil .logo {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.profil .logo span {
    margin-left: 10px;
    color: var(--accent-color); /* Nom de l'entreprise en Vert Logo */
    font-size: 1.1rem;
    font-weight: 700;
}

.profil .logo img {
    border: 2px solid var(--accent-color); /* Bordure de l'image en Vert */
    border-radius: 50%;
}

.logo button {
    margin-left: 10px;
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
}

.logo .sun {
    color: var(--secondary-color);
}

.profil .description {
    max-width: 320px;
    margin-bottom: 1.25rem;
}

.profil .description p {
    color: var(--secondary-color);
    font-weight: 400;
    line-height: 1.5;
}

/* Réseaux Sociaux */
.reseau_social {
    display: flex;
    justify-content: center;
}

.reseau_social a {
    margin-right: 20px;
    color: var(--secondary-color);
    font-size: 20px;
    transition: color 0.3s ease;
}

.reseau_social a:hover {
    color: var(--hover-color); /* Survol des icônes en Bleu cyan */
}

/* ==========================================================================
   4. SECTIONS SERVICES / LIENS
   ========================================================================== */
.services {
    display: flex;
}

.service_liste {
    margin-right: 40px;
}

.service_liste li {
    margin-bottom: 10px;
}

li.service_item {
    color: var(--accent-color); /* Titres des colonnes en Vert */
    font-weight: 600;
}

.service_liste li a {
    padding-bottom: 1px;
    color: var(--text-muted);
    font-weight: 400;
    transition: color 0.3s ease;
}

.service_liste li a:hover {
    color: var(--hover-color); /* Liens survolés en Bleu cyan */
}

/* Séparateur sémantique */
.footer_separator {
    width: 100%;
    height: 1px;
    margin-bottom: 1rem;
    background-color: var(--text-muted);
    opacity: 0.3; /* Ligne de séparation discrète */
}

/* ==========================================================================
   5. BAS DE PAGE (COPYRIGHT & CGU)
   ========================================================================== */
.pied_page {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
}

.copyright {
    display: flex;
    align-items: center;
    color: var(--text-muted);
}

.copyright span {
    margin-left: 8px;
    font-weight: 400;
    letter-spacing: 0.125rem;
}

.term_use a {
    margin-left: 1.5rem;
    color: var(--text-muted);
    transition: color 0.3s ease;
}

.term_use a:hover {
    color: var(--hover-color); /* Mentions légales survolées en Bleu cyan */
}

/* ==========================================================================
   6. DESIGN RESPONSIVE (MEDIA QUERIES)
   ========================================================================== */

/* Tablettes et écrans intermédiaires */
@media screen and (max-width: 835px) {
    .pied,
    .services {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .service_liste {
        margin-left: 0;
        margin-right: 40px;
    }

    .reseau_social {
        margin-bottom: 1rem;
    }

    .pied_page {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Smartphones et petits écrans */
@media screen and (max-width: 500px) {
    .service_liste {
        margin-bottom: 8px;
    }

    .reseau_social {
        justify-content: flex-start;
    }

    .copyright {
        margin-bottom: 8px;
    }

    .profil .description p {
        text-align: left;
    }

    .pied_page {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .term_use {
        display: flex;
        flex-direction: column;
    }

    .term_use a {
        margin-left: 0;
        margin-bottom: 5px;
    }
}