/* ─────────────────────────────────────────────────────────
   FOOTER BELLE ÉPOQUE
   Charte graphique : _references/charte-belle-epoque.html
───────────────────────────────────────────────────────── */

.site-footer,
#colophon,
.footer-wrap {
    background: var(--bg) !important;
    border-top: 1px solid var(--line-2);
    font-family: var(--ui);
}

/* Rangées footer — espacement */
.footer-wrap .footer-row {
    padding: 40px 24px;
}

/* Liens navigation footer */
.footer-navigation a,
.footer-nav a {
    font-family: var(--ui);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3) !important;
    text-decoration: none;
    transition: color 0.2s ease;
    padding: 0 12px;
}

.footer-navigation a:hover,
.footer-nav a:hover {
    color: var(--ice-2) !important;
}

/* Sur mobile, le menu (flex-wrap) casse au hasard selon la longueur de
   chaque libellé : certains liens seuls sur leur ligne, d'autres collés
   à un voisin ("Politique de confidentialité" + "Contact"), avec très
   peu d'espace vertical entre les lignes — illisible, effet "tassé".
   On passe donc en liste verticale, un lien par ligne, avec un vrai
   espacement entre chaque. */
@media (max-width: 640px) {
    .footer-navigation .menu,
    .footer-nav .menu {
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }
    .footer-navigation a,
    .footer-nav a {
        font-size: 9px;
        padding: 0;
    }
}

/* Copyright */
.site-footer .copyright,
.footer-copyright {
    font-family: var(--ui);
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: var(--ink-3) !important;
    padding: 20px 0;
}

/* Icônes sociales — élément natif Kadence (Header/Footer Builder), classes
   réelles .footer-social-item / .social-button (le sélecteur .footer-social
   ci-dessus visait un balisage qui n'existe pas — jamais appliqué). Rendu
   "verre" cohérent avec .glass (voir page-accueil.css) : fond translucide +
   flou, icône seule (le libellé texte de Kadence reste dans le DOM pour
   l'accessibilité mais masqué visuellement — un cercle épuré lit mieux
   qu'un bouton texte au milieu du footer). */
.footer-social-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    background: var(--glass) !important;
    -webkit-backdrop-filter: blur(11px) saturate(1.2);
    backdrop-filter: blur(11px) saturate(1.2);
    border: 1px solid var(--line-2) !important;
    border-radius: 50% !important;
    box-shadow: inset 0 1px 0 rgba(234, 237, 240, .035);
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.footer-social-item:hover {
    border-color: var(--ice) !important;
    transform: translateY(-2px);
}

.footer-social-item .social-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.footer-social-item svg {
    width: 17px;
    height: 17px;
    fill: var(--ink-3) !important;
    transition: fill 0.25s ease;
}

.footer-social-item:hover svg {
    fill: var(--ice-2) !important;
}