/* =====================================================================
   FOOTER CUSTOM — Valiseofilms Child Theme
   v1.0.0
===================================================================== */

/* ── Variables locales ── */
.vs-footer {
    --vs-footer-bg:         #0d0d0d;
    --vs-footer-text:       #f0f0f0;
    --vs-footer-accent:     #fb8500;
    --vs-footer-muted:      #888;
    --vs-footer-border:     rgba(255, 255, 255, 0.08);
    --vs-footer-social-bg:  rgba(255, 255, 255, 0.06);
}

/* ── Wrapper global ── */
.vs-footer {
    background: var(--vs-footer-bg);
    color:      var(--vs-footer-text);
    font-size:  0.9rem;
    line-height: 1.6;
}

/* ── Conteneur centré ── */
.vs-footer__container {
    max-width: 1200px;
    margin:    0 auto;
    padding:   0 32px;
}

/* =====================================================================
   GRILLE PRINCIPALE
===================================================================== */

.vs-footer__main {
    padding:       64px 0 48px;
    border-bottom: 1px solid var(--vs-footer-border);
}

.vs-footer__main .vs-footer__container {
    display:               grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap:                   48px 40px;
    align-items:           start;
}

/* =====================================================================
   COL 1 — BRAND
===================================================================== */

.vs-footer__logo {
    display:         inline-block;
    font-family:     'Oswald', sans-serif;
    font-size:       1.45rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.05em;
    color:           var(--vs-footer-text);
    text-decoration: none;
    margin-bottom:   12px;
    line-height:     1;
    transition:      opacity 0.2s ease;
}

.vs-footer__logo span {
    color: var(--vs-footer-accent);
}

.vs-footer__logo:hover {
    opacity: 0.85;
    color:   var(--vs-footer-text);
    text-decoration: none;
}

.vs-footer__tagline {
    font-size:   0.92rem;
    color:       var(--vs-footer-text);
    margin:      0 0 4px;
    font-weight: 500;
}

.vs-footer__subtagline {
    font-size:   0.82rem;
    color:       var(--vs-footer-muted);
    margin:      0 0 28px;
}

/* ── Icônes réseaux sociaux ── */
.vs-footer__socials {
    display:  flex;
    gap:      12px;
    flex-wrap: wrap;
}

.vs-footer__social {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    border-radius:   50%;
    background:      var(--vs-footer-social-bg);
    color:           var(--vs-footer-text);
    text-decoration: none;
    transition:      background 0.22s ease, color 0.22s ease, transform 0.18s ease;
    flex-shrink:     0;
}

.vs-footer__social:hover {
    background: var(--vs-footer-accent);
    color:      #fff;
    transform:  translateY(-2px);
}

.vs-footer__social svg {
    display: block;
}

/* =====================================================================
   COLS 2-4 — NAVIGATION
===================================================================== */

.vs-footer__col-title {
    font-family:    'Oswald', sans-serif;
    font-size:      0.72rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color:          var(--vs-footer-accent);
    margin:         0 0 16px;
    padding-bottom: 10px;
    border-bottom:  1px solid var(--vs-footer-border);
}

.vs-footer__links {
    list-style: none;
    margin:     0;
    padding:    0;
}

.vs-footer__links li {
    margin-bottom: 9px;
}

.vs-footer__links a {
    color:           var(--vs-footer-text);
    text-decoration: none;
    font-size:       0.87rem;
    display:         inline-block;
    transition:      color 0.18s ease, padding-left 0.18s ease;
}

.vs-footer__links a:hover {
    color:        var(--vs-footer-accent);
    padding-left: 6px;
}

/* =====================================================================
   BARRE INFÉRIEURE
===================================================================== */

.vs-footer__bottom {
    padding: 18px 0;
}

.vs-footer__bottom-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    flex-wrap:       wrap;
}

/* Liens géographiques */
.vs-footer__geo {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-wrap:   wrap;
}

.vs-footer__geo a {
    color:           var(--vs-footer-muted);
    text-decoration: none;
    font-size:       0.78rem;
    transition:      color 0.18s ease;
}

.vs-footer__geo a:hover {
    color: var(--vs-footer-accent);
}

.vs-footer__sep {
    color:     var(--vs-footer-border);
    font-size: 0.8rem;
    user-select: none;
}

/* Copyright */
.vs-footer__copyright {
    color:       var(--vs-footer-muted);
    font-size:   0.78rem;
    margin:      0;
    white-space: nowrap;
}

/* =====================================================================
   RESPONSIVE
===================================================================== */

/* Tablette : 2 colonnes */
@media (max-width: 900px) {
    .vs-footer__main .vs-footer__container {
        grid-template-columns: 1fr 1fr;
        gap: 40px 32px;
    }

    .vs-footer__col--brand {
        grid-column: 1 / -1; /* pleine largeur */
    }
}

/* Mobile : tout empilé */
@media (max-width: 580px) {
    .vs-footer__container {
        padding: 0 20px;
    }

    .vs-footer__main {
        padding: 40px 0 32px;
    }

    .vs-footer__main .vs-footer__container {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .vs-footer__col--brand {
        grid-column: auto;
    }

    .vs-footer__bottom-inner {
        flex-direction: column;
        align-items:    flex-start;
        gap:            10px;
    }

    .vs-footer__geo {
        gap: 8px;
    }
}