html, body {
    font-family: 'Raleway', sans-serif;

    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum" 1;
}

.liensfooter {
    color: white;
}

h3 {
    font-weight: 600;            /* Semibold */
    font-size: 1rem;
    text-transform: uppercase;   /* Tout en majuscules */
    letter-spacing: 1px;       /* espacement entre les lettres */
    padding:0;
    margin:0;
    line-height: 18px;
    margin-bottom: 5px;
}

footer li,
footer p,
footer span {
    font-size: clamp(0.75rem, 0.8vw, 1rem);
    line-height: 1.2;
}

footer {
    display: flex;             /* transforme le footer en flex container */
    justify-content: center;   /* centre horizontalement le wrapper */
    align-items: center;       /* centre verticalement le wrapper */
    width: 100%;
    /* Définissez ici la couleur de fond, le padding vertical, etc. */
    /* 🔑 DÉGRADÉ DE COULEUR (BLEU à ORANGE) */
    background: linear-gradient(to right, #0D47A1 25%, #FFA500 100%); /* Orange pur ou ajustez */
    color: white;
    min-height: 250px; /* minimum */
    padding: 40px 0; /* Padding vertical uniquement */
}

/* ==========================
   Wrapper du Footer (Alignement avec la grille)
========================== */
/* CORRECTION DU SÉLECTEUR ET DES PROPRIÉTÉS DE COLONNE */
/* Règle pour cibler UNIQUEMENT les blocs de contenu (Logo, Direction, Liens, etc.) */
.footer-wrapper > div:not(.barre) {
    display: flex;
    flex-direction: column;
    justify-content: center; /* centre verticalement le contenu de la colonne */
    align-items: center; /* texte aligné à gauche */
    flex: 1; /* permet à chaque colonne de prendre tout l'espace disponible entre les barres */
    min-width: 150px; /* empêche les colonnes de trop se rétrécir */
    padding: 0 10px; /* espace interne dans la colonne */
    box-sizing: border-box;
    gap: 8px
}

/* Pour les listes à puces à l’intérieur des colonnes */
.footer-wrapper > div:not(.barre) ul {
    padding-left: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px; /* espace entre les li */
}

/* Si vous voulez centrer le LOGO et les ICÔNES SOCIALES, vous pouvez les cibler spécifiquement : */
.footer-wrapper .logos-container,
.footer-wrapper .social-icons {
    align-items: center;
}

.footer-wrapper {
    /* 🔑 ALIGNEMENT HORIZONTAL SUR LA GRILLE */
    width: 100%;
    max-width: 1800px; /* CLÉ: Aligné avec le homepage-container */
    margin: 0 auto;    /* CLÉ: Centrage horizontal */
    padding: 0 20px;   /* Garde un padding latéral de 20px (ajustez si votre homepage-container n'en a pas) */
    box-sizing: border-box;

    /* DISPOSITION EN COLONNES */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

/* ==========================
   Ajustement des Séparateurs (barre)
========================== */
.barre {
    background-color: white !important;
    height: 220px !important;
    width: 2px !important;
    display: block !important;
}

.direction {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* L'adresse reste alignée à gauche du bloc */
}

.direction span {
    text-align: left;
    width: 100%; /* Important pour que le centrage du titre fonctionne */
}

/* On cible le premier span pour centrer le titre */
.direction span:first-child {
    text-align: center;
    margin-bottom: 5px;
}

.sites-footer {
    flex: 1.4;
    min-width: 220px;
}
.logos-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Aligne les logos à gauche */
    gap: 8px; /* (optionnel) espacement entre les logos */
}

.logos-container img {
    max-height: 40px;
    height: auto;         /* Empêche l'étirement vertical forcé */
    width: auto;          /* Empêche l'étirement horizontal forcé */
    object-fit: contain;  /* Garde le ratio sans rognage */
    display: block;       /* Supprime les petits espaces sous les images */
}

footer .footer-wrapper ul {
    list-style: none;   /* Plus de puces par défaut uniquement dans le footer */
    padding: 0;
    margin: 0;
}

footer .footer-wrapper ul li {
    margin: 0;
    padding: 0;
    text-align: left;
    /*white-space: nowrap;*/
    white-space: normal;
    overflow-wrap: anywhere;
}

footer .liensfooter ul li a,
footer .liensfooter ul li a:visited,
footer .direction h3 a,
footer .direction h3 a:visited {
    color: white;
    text-decoration: none;
    text-align: left;
}

.footer-wrapper > div:not(.barre) {
    min-width: 0;
    overflow-wrap: anywhere;
}

.footer-wrapper {
    gap: 0;
}

.liensfooter ul li a:hover, .direction h3 a:hover {
    text-decoration:none;
    color: rgba(255, 255, 255, 0.5);
    text-align: left;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    transition: background-color 0.3s, transform 0.3s;
}

.social-icons a img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.social-icons a:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

@media screen and (max-width: 768px) {

    footer {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;

        padding: 30px 15px;
        min-height: auto;
    }

    .footer-wrapper {
        display: flex;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px;
    }

    /* Barres horizontales */
    .barre {
        display: block !important;
        flex: 0 0 auto !important;
        align-self: center !important;

        width: 80% !important;
        max-width: 300px !important;
        height: 1px !important;
        min-height: 1px !important;

        background-color: rgba(255,255,255,0.6) !important;
        margin: 12px 0 !important;
        padding: 0 !important;
    }

    .footer-wrapper > .barre:first-of-type {
        display: none;
    }

    .footer-wrapper > div:not(.barre) {
        width: 100%;
        align-items: center;
        text-align: center;
        gap: 10px;
    }

    .footer-wrapper ul li {
        text-align: center;
        white-space: normal;
    }

    .direction {
        align-items: center;
    }

    .direction span {
        text-align: center;
    }

    .logos-container {
        flex-direction: row;
        justify-content: center;
        gap: 15px;
    }

    .social-icons {
        justify-content: center;
    }

    footer div:first-child,
    footer div:last-child {
        margin: 0;
    }
}