/* ==========================================================================
   FRANCK FOOTER RENAULT — Groupe Maurin (Template Renault)
   Design officiel Renault : Look géométrique carré, Noir & Jaune Renault #efdf00
   Inspiré de la charte officielle Renault & https://www.renault-melun.fr/
   ========================================================================== */

:root {
    --theme-footer-accent: #efdf00;
    --theme-footer-hover: #efdf00;
    --theme-footer-bg: #000000;
}

/* ==========================================================================
   0. RESET GÉOMÉTRIQUE & CONTENEUR GÉNÉRAL (Strict ZERO Radius - Style Carré)
   ========================================================================== */
.franck-footer-renault,
.franck-footer-renault *,
.franck-footer-renault *::before,
.franck-footer-renault *::after {
    border-radius: 0 !important;
    box-sizing: border-box;
}

.maurin-footer,
.franck-footer-renault {
    background-color: var(--mf-main-bg, #000000);
    color: #cbd5e1;
    font-family: 'NouvelR', 'NouvelR-Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    position: relative;
    border-top: 3px solid var(--theme-footer-accent, #efdf00);
    overflow: hidden;
    width: 100%;
}

.maurin-footer a,
.franck-footer-renault a {
    color: #cbd5e1;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, padding 0.2s ease;
}

.maurin-footer a:hover,
.maurin-footer a:focus,
.franck-footer-renault a:hover,
.franck-footer-renault a:focus {
    color: var(--theme-footer-hover, #efdf00);
    text-decoration: none;
}

/* ==========================================================================
   1. BARRE DU HAUT : RETOUR EN HAUT (RENAULT STYLE)
   ========================================================================== */
.franck-footer-renault__topbar {
    background: #080808;
    border-bottom: 1px solid #1c1c1c;
    padding: 11px 0;
}

.franck-footer-renault__backtotop {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffffff !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: color 0.2s ease, opacity 0.2s ease;
    padding: 4px 8px;
}

.franck-footer-renault__backtotop:hover {
    color: #efdf00 !important;
}

.franck-footer-renault__backtotop svg,
.franck-footer-renault__backtotop i {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    color: #efdf00;
    transition: transform 0.2s ease;
}

.franck-footer-renault__backtotop:hover svg,
.franck-footer-renault__backtotop:hover i {
    transform: translateY(-2px);
}

/* ==========================================================================
   2. BLOC RÉASSURANCE (4 CASES CARRÉES RENAULT)
   ========================================================================== */
.maurin-footer__reassurance {
    background: #0a0a0a;
    border-bottom: 1px solid #1c1c1c;
    padding: 30px 0;
}

.maurin-footer__reassurance-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.maurin-footer__reassurance-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: #111111;
    border: 1px solid #242424;
    transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.2s ease;
}

.maurin-footer__reassurance-item:hover {
    background: #161616;
    border-color: #efdf00;
    transform: translateY(-2px);
}

.maurin-footer__reassurance-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: #000000;
    border: 1px solid #efdf00;
    color: #efdf00;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.25s ease;
}

.maurin-footer__reassurance-item:hover .maurin-footer__reassurance-icon {
    background: #efdf00;
    color: #000000;
}

.maurin-footer__reassurance-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.maurin-footer__reassurance-title {
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    text-transform: none;
    letter-spacing: 0.01em;
}

.maurin-footer__reassurance-sub {
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.35;
    margin-top: 4px;
}

/* ==========================================================================
   3. CONTENU PRINCIPAL DU FOOTER (4 COLONNES & BLOC CARRÉ CONCESSION)
   ========================================================================== */
.maurin-footer__main {
    background-color: var(--mf-main-bg, #000000);
    padding: 52px 0 44px;
}

.maurin-footer__grid {
    display: grid;
    grid-template-columns: 1.3fr 1.1fr 1fr 1.3fr;
    gap: 36px;
    align-items: stretch;
}

.maurin-footer__grid--cols-4 {
    grid-template-columns: 1.3fr 1.1fr 1fr 1.3fr;
}

.maurin-footer__grid--cols-3 {
    grid-template-columns: 1.25fr 1fr 1.25fr;
}

.maurin-footer__grid--cols-2 {
    grid-template-columns: 1fr 1.25fr;
}

.maurin-footer__grid--cols-1 {
    grid-template-columns: 1fr;
}

/* Titres de colonnes */
.maurin-footer__title {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 20px;
    position: relative;
    padding-bottom: 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.maurin-footer__title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 2px;
    background: var(--theme-footer-accent, #efdf00);
}

.maurin-footer__toggle-icon {
    display: none;
}

/* Listes de liens (Colonnes 1, 2, 3) */
.maurin-footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.maurin-footer__list-item {
    font-size: 13.5px;
    line-height: 1.45;
}

.maurin-footer__list-item a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    color: #cbd5e1;
    text-decoration: none;
}

.maurin-footer__list-item a:hover {
    color: #efdf00;
    padding-left: 4px;
}

.maurin-footer__list-item a i {
    color: #efdf00 !important;
    font-size: 10px;
    opacity: 0.9;
    flex-shrink: 0;
}

/* Sous-grille 2 colonnes pour VN si >= 8 marques */
.maurin-footer__list--vn {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
    row-gap: 9px;
}

/* Badges de comptage VO (Carré Renault) */
.maurin-footer__count-badge {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    background: #141414;
    color: #efdf00;
    border: 1px solid #292929;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.maurin-footer__list-item a:hover .maurin-footer__count-badge {
    background: #efdf00;
    color: #000000;
    border-color: #efdf00;
}

/* Bouton « Toutes nos occasions » (Style Renault Yellow Carré) */
.maurin-footer__all-link {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

.maurin-footer__all-link a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000000 !important;
    background: #efdf00;
    border: 1px solid #efdf00;
    padding: 9px 16px;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.maurin-footer__all-link a:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #000000 !important;
}

.maurin-footer__all-link a i {
    font-size: 13px;
    transition: transform 0.2s ease;
}

.maurin-footer__all-link a:hover i {
    transform: translateX(3px);
}

/* ==========================================================================
   4. BLOC CARRÉ CONCESSION / GROUPE (COLONNE 4)
   ========================================================================== */
.maurin-footer__col-brand {
    display: flex;
    flex-direction: column;
}

.maurin-footer__brand-box {
    background: #0d0d0d;
    border: 1px solid #242424;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    transition: border-color 0.25s ease;
}

.maurin-footer__brand-box:hover {
    border-color: #383838;
}

.maurin-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.maurin-footer__logo-link {
    display: inline-block;
    max-width: 190px;
    transition: opacity 0.2s ease;
}

.maurin-footer__logo-link:hover {
    opacity: 0.85;
}

.maurin-footer__logo {
    width: 100%;
    height: auto;
    max-height: 48px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.maurin-footer__baseline {
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

/* Boutons Réseaux Sociaux : Carrés Renault avec Hover Jaune */
.main-footer__socials-links,
.maurin-footer__socials {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.main-footer__socials-links .btn-social,
.maurin-footer__social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: #181818;
    border: 1px solid #303030;
    color: #ffffff !important;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: none;
    position: relative;
    overflow: hidden;
}

.main-footer__socials-links .btn-social i,
.maurin-footer__social-btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    transition: transform 0.2s ease;
    color: inherit;
}

.main-footer__socials-links .btn-social:hover,
.maurin-footer__social-btn:hover {
    background: #efdf00 !important;
    border-color: #efdf00 !important;
    color: #000000 !important;
    transform: none;
    box-shadow: none;
}

.main-footer__socials-links .btn-social:hover i,
.maurin-footer__social-btn:hover i {
    transform: scale(1.1);
    color: #000000 !important;
}

/* Fallback glyphs pour les icônes sociales */
.icon-facebook:not([class*="bi-"])::before { font-family: "bootstrap-icons" !important; content: "\f344"; }
.icon-youtube:not([class*="bi-"])::before { font-family: "bootstrap-icons" !important; content: "\f62b"; }
.icon-linkedin:not([class*="bi-"])::before { font-family: "bootstrap-icons" !important; content: "\f472"; }
.icon-instagram:not([class*="bi-"])::before { font-family: "bootstrap-icons" !important; content: "\f437"; }

/* ==========================================================================
   5. BANDEAU ENVIRONNEMENTAL (#SeDéplacerMoinsPolluer)
   ========================================================================== */
.maurin-footer__env {
    background-color: var(--mf-env-bg, #111111);
    border-top: 1px solid #1c1c1c;
    border-bottom: 1px solid #1c1c1c;
    padding: 12px 0;
}

.maurin-footer__env-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a0a0a0;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    line-height: 1.5;
}

.maurin-footer__env-tag {
    color: #efdf00;
    font-weight: 700;
    margin-left: 4px;
}

/* ==========================================================================
   6. SOUS-FOOTER LÉGAL
   ========================================================================== */
.maurin-footer__bottom {
    background-color: var(--mf-bottom-bg, #000000);
    border-top: 1px solid #181818;
    padding: 20px 0 24px;
    font-size: 12px;
}

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

.maurin-footer__copyright {
    color: #71717a;
    margin: 0;
}

.maurin-footer__legal-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.maurin-footer__legal-links a,
.maurin-footer__legal-btn {
    color: #888888;
    text-decoration: none;
    transition: color 0.15s ease;
    font-size: 12px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.maurin-footer__legal-links a:hover,
.maurin-footer__legal-btn:hover {
    color: #efdf00;
    text-decoration: underline;
}

/* ==========================================================================
   7. RESPONSIVE MOBILE & TABLETTE
   ========================================================================== */
@media (max-width: 1024px) {
    .maurin-footer__reassurance-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .maurin-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

@media (max-width: 767px) {
    .maurin-footer__reassurance {
        padding: 20px 0;
    }
    .maurin-footer__reassurance-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .maurin-footer__reassurance-item {
        padding: 14px 16px;
    }
    .maurin-footer__main {
        padding: 30px 0 24px;
    }
    .maurin-footer__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .maurin-footer__title {
        cursor: pointer;
        padding-bottom: 10px;
        margin-bottom: 12px;
        border-bottom: 1px solid #202020;
    }
    .maurin-footer__title::after {
        display: none;
    }
    .maurin-footer__toggle-icon {
        display: inline-block;
        font-size: 13px;
        color: #efdf00;
        transition: transform 0.25s ease;
    }
    .maurin-footer__title.is-open .maurin-footer__toggle-icon {
        transform: rotate(180deg);
    }
    .maurin-footer__collapse {
        display: none;
        padding-bottom: 14px;
    }
    .maurin-footer__collapse.is-open {
        display: block;
    }
    .maurin-footer__list--vn {
        grid-template-columns: 1fr;
    }
    .maurin-footer__brand-box {
        padding: 18px;
    }
    .maurin-footer__bottom-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .maurin-footer__legal-links {
        gap: 12px;
    }
}