/* ================================================================
   footer.css
   ================================================================ */
.site-footer {
    background: #1a3963;
    padding: clamp(36px, 5vw, 56px) 0 0;
}

.footer-inner {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
    gap: clamp(24px, 3vw, 48px);
    padding: 0 clamp(16px, 4vw, 72px) clamp(36px, 4vw, 52px);
    align-items: start;
}

/* ----------------------------------------------------------------
   Col 1 — Brand
   ---------------------------------------------------------------- */
.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.footer-logo-svg {
    width: 48px;
    flex-shrink: 0;
    color: #c9a87c;
}

.footer-logo-svg svg {
    display: block;
    width: 100%;
    height: auto;
}

.footer-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.footer-logo-name {
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: .12em;
}

.footer-logo-sub {
    font-size: .62rem;
    font-weight: 700;
    color: #c9a87c;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-top: 3px;
}

/* Réseaux sociaux */
.footer-social {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%;
    text-decoration: none;
    transition: border-color .2s, background .2s;
}

.footer-social-link:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.5);
}

.footer-social-link svg {
    width: 15px;
    height: 15px;
    fill: #ffffff;
    display: block;
}

.footer-copyright {
    font-size: .72rem;
    color: rgba(255,255,255,.45);
    margin: 0;
    line-height: 1.5;
}

/* ----------------------------------------------------------------
   Titres colonnes
   ---------------------------------------------------------------- */
.footer-col-title {
    font-size: .72rem;
    font-weight: 700;
    color: #c9a87c;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin: 0 0 16px;
}

.footer-col-title-sep { color: rgba(255,255,255,.3); }

/* ----------------------------------------------------------------
   Col 2 — Menu
   ---------------------------------------------------------------- */
.footer-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-nav a {
    font-size: .80rem;
    color: rgba(255,255,255,.75);
    text-decoration: none;
    transition: color .18s;
}

.footer-nav a:hover { color: #ffffff; }

/* ----------------------------------------------------------------
   Col 3 — Cabinets
   ---------------------------------------------------------------- */
.footer-cabinets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-cabinets a {
    font-size: .80rem;
    color: rgba(255,255,255,.75);
    text-decoration: none;
    transition: color .18s;
}

.footer-cabinets a:hover { color: #ffffff; }

/* ----------------------------------------------------------------
   Col 4 — Coordonnées
   ---------------------------------------------------------------- */
.footer-coords-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-coords-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.footer-coords-item svg {
    width: 16px;
    height: 16px;
    fill: #c9a87c;
    flex-shrink: 0;
    margin-top: 2px;
}

.footer-coords-item a,
.footer-coords-item span {
    font-size: .80rem;
    color: rgba(255,255,255,.8);
    text-decoration: none;
    line-height: 1.5;
    transition: color .18s;
}

.footer-coords-item a:hover { color: #ffffff; }

/* Bouton RDV */
.footer-rdv {
    display: inline-flex;
    padding: 12px 20px;
    font-size: .75rem;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    margin-top: 4px;
}

/* ----------------------------------------------------------------
   Accordion — mobile seulement (≤ 600px)
   ---------------------------------------------------------------- */

/* Base : flèche et collapsible invisibles par défaut */
.footer-toggle-arrow {
    display: none;
    width: 16px;
    height: 16px;
    fill: #c9a87c;
    flex-shrink: 0;
    transition: transform .25s ease;
}

.footer-collapsible {
    display: block;
    overflow: visible;
    max-height: none !important;
    margin-top: 14px;
}

/* Desktop explicite (≥ 601px) : menus toujours visibles, sans flèche */
@media (min-width: 601px) {
    .footer-toggle-arrow        { display: none !important; }
    .footer-collapsible         { display: block !important; max-height: none !important; overflow: visible !important; }
    .footer-col-title--toggle   { cursor: default; }
}

/* Mobile (≤ 600px) : accordion avec flèche + transition */
@media (max-width: 600px) {
    .footer-col-title--toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        margin-bottom: 0;
    }

    .footer-toggle-arrow {
        display: block;
    }

    .footer-col-title--toggle.open .footer-toggle-arrow {
        transform: rotate(180deg);
    }

    .footer-collapsible {
        overflow: hidden !important;
        max-height: 0 !important;
        margin-top: 0;
        transition: max-height .3s ease, margin-top .3s ease;
    }

    .footer-collapsible.open {
        max-height: 400px !important;
        margin-top: 14px;
    }
}

/* ----------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------- */
@media (max-width: 991px) {
    .footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 32px 24px;
    }
}

@media (max-width: 600px) {
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 0;
        padding-bottom: 0;
    }

    .footer-col {
        border-bottom: 1px solid rgba(255,255,255,.08);
        padding: 20px 0;
    }

    .footer-col--brand {
        border-bottom: 1px solid rgba(255,255,255,.08);
        padding-bottom: 24px;
    }

    .footer-col--coords {
        border-bottom: none;
        padding-bottom: 32px;
    }

    .footer-rdv {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }
}