/* ============================================================================
   FRANCK FOOTER GEELY — CSS front (Organisation geelyauto.fr)
   BEM : franck-footer-geely | Variables : --ffg-* / --ffr-*
   Hérite : var(--ffg-x, var(--theme-footer-x, var(--theme-x, fallback)))
   ============================================================================ */

.franck-footer-geely,
.franck-footer-renault {
    /* Layout */
    --ffg-content-padding-x: var(--ffr-content-padding-x, 42px);
    --ffg-inner-max-width: 1680px;
    --ffg-column-gap: var(--ffr-column-gap, 60px);
    --ffg-column-min-width: var(--ffr-column-min-width, 180px);

    /* Couleurs */
    --ffg-topbar-bg: var(--ffr-topbar-bg, var(--theme-footer-topbar-bg, #ffffff));
    --ffg-topbar-text: var(--ffr-topbar-text, var(--theme-footer-topbar-text-color, #000000));
    --ffg-bg: var(--ffr-bg, var(--theme-footer-bg, #000000));
    --ffg-text: var(--ffr-text, var(--theme-footer-text-color, #ffffff));
    --ffg-title-color: var(--ffr-title-color, var(--theme-footer-title-color, #ffffff));
    --ffg-link-color: var(--ffr-link-color, var(--theme-footer-link-color, rgba(255, 255, 255, 0.72)));
    --ffg-link-hover: var(--ffr-link-hover, var(--theme-footer-link-hover-color, #ffffff));
    --ffg-accent: var(--ffr-accent, var(--theme-footer-accent, #3A7FF8));
    --ffg-secondary-link-color: var(--ffr-secondary-link-color, var(--theme-footer-link-color, #ffffff));
    --ffg-bottombar-bg: var(--ffr-bottombar-bg, var(--theme-footer-bottombar-bg, #000000));
    --ffg-bottombar-text: var(--ffr-bottombar-text, var(--theme-footer-bottombar-text-color, #ffffff));
    --ffg-legal-link-color: var(--ffr-legal-link-color, var(--theme-footer-bottombar-text-color, #ffffff));

    /* Typo */
    --ffg-font: var(--theme-footer-font, var(--theme-text-font, 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif));
    --ffg-title-size: var(--ffr-title-size, 13px);
    --ffg-link-size: var(--ffr-link-size, 14px);
    --ffg-secondary-size: var(--ffr-secondary-size, 13px);
    --ffg-legal-size: var(--ffr-legal-size, 12px);

    /* Logo */
    --ffg-right-logo-height: var(--ffr-right-logo-height, 40px);

    width: 100%;
    box-sizing: border-box;
    font-family: var(--ffg-font);
    color: var(--ffg-text);
    background: var(--ffg-bg);
}

.franck-footer-geely-wrapper,
.franck-footer-renault-wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.franck-footer-geely-wrapper--full,
.franck-footer-renault-wrapper--full {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
}

/* ----- Inner ----- */
.franck-footer-geely__inner,
.franck-footer-renault__inner {
    width: 100%;
    max-width: var(--ffg-inner-max-width);
    margin: 0 auto;
    padding-left: var(--ffg-content-padding-x);
    padding-right: var(--ffg-content-padding-x);
    box-sizing: border-box;
}

.franck-footer-geely--container .franck-footer-geely__inner,
.franck-footer-renault--container .franck-footer-renault__inner {
    max-width: 1320px;
}

/* ----- Alignements génériques ----- */
.franck-footer-geely__align-left,
.franck-footer-renault__align-left { justify-content: flex-start; text-align: left; }
.franck-footer-geely__align-center,
.franck-footer-renault__align-center { justify-content: center; text-align: center; }
.franck-footer-geely__align-right,
.franck-footer-renault__align-right { justify-content: flex-end; text-align: right; }
.franck-footer-geely__align-spread,
.franck-footer-renault__align-spread { justify-content: space-between; }

/* ===================== BARRE DU HAUT ===================== */
.franck-footer-geely__topbar,
.franck-footer-renault__topbar {
    background: var(--ffg-topbar-bg);
    color: var(--ffg-topbar-text);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.franck-footer-geely__topbar-inner,
.franck-footer-renault__topbar-inner {
    display: flex;
    align-items: center;
    min-height: 52px;
    gap: 10px;
}

.franck-footer-geely__backtotop,
.franck-footer-renault__backtotop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--ffg-topbar-text);
    font-size: var(--ffg-secondary-size);
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 0;
    transition: opacity .2s ease, transform .2s ease;
}

.franck-footer-geely__backtotop:hover,
.franck-footer-renault__backtotop:hover {
    opacity: .75;
    transform: translateY(-2px);
    color: var(--ffg-topbar-text);
}

.franck-footer-geely__backtotop svg,
.franck-footer-renault__backtotop svg {
    width: 16px;
    height: 16px;
    display: block;
    stroke-width: 2.5;
}

/* ===================== CORPS PRINCIPAL (DARK) ===================== */
.franck-footer-geely__main,
.franck-footer-renault__main {
    background: var(--ffg-bg);
    color: var(--ffg-text);
    padding-top: 56px;
    padding-bottom: 48px;
}

/* ===================== ORGANISATION DIRECTORY ===================== */
.franck-footer-geely__directory {
    display: flex;
    width: 100%;
    box-sizing: border-box;
}

/* --- SECTION DU HAUT : Logo à gauche, Colonnes à droite --- */
.franck-footer-geely__directory--top {
    display: flex;
    flex-direction: column;
    gap: 36px;
    margin-bottom: 48px;
}

@media (min-width: 992px) {
    .franck-footer-geely__directory--top {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 60px;
    }
}

.franck-footer-geely__directory-col--brand {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.franck-footer-geely__brand-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #ffffff;
    line-height: 1;
    transition: opacity .2s ease;
}

.franck-footer-geely__brand-logo:hover {
    opacity: .85;
}

.franck-footer-geely__logo-svg {
    display: block;
    width: 140px;
    height: auto;
    max-height: 28px;
    fill: currentColor;
}

.franck-footer-geely__brand-logo-img {
    height: var(--ffg-right-logo-height, 36px);
    width: auto;
    display: block;
    object-fit: contain;
}

.franck-footer-geely__brand-tagline {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.franck-footer-geely__directory-col--nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
}

.franck-footer-geely__columns {
    display: flex;
    flex-wrap: wrap;
    gap: 36px 72px;
    justify-content: flex-start;
}

@media (min-width: 992px) {
    .franck-footer-geely__columns {
        justify-content: flex-end;
        gap: 40px 96px;
    }
}

.franck-footer-geely__col {
    min-width: 180px;
}

.franck-footer-geely__col-title {
    font-size: var(--ffg-title-size, 13px);
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 20px;
    text-transform: uppercase;
    letter-spacing: .12em;
    position: relative;
    padding-bottom: 8px;
}

.franck-footer-geely__col-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 24px;
    height: 2px;
    background: rgba(255, 255, 255, 0.7);
}

.franck-footer-geely__col-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.franck-footer-geely__col-link {
    text-decoration: none;
    color: var(--ffg-link-color, rgba(255, 255, 255, 0.75));
    font-size: var(--ffg-link-size, 14px);
    font-weight: 400;
    letter-spacing: .01em;
    position: relative;
    display: inline-block;
    transition: color .2s ease, opacity .2s ease, transform .2s ease;
    line-height: 1.45;
    cursor: pointer;
}

.franck-footer-geely__col-link:hover {
    color: #ffffff;
    opacity: 1;
    transform: translateX(4px);
}

/* --- SECTION DU BAS : Réseaux sociaux + Copyright à gauche, Disclaimer à droite --- */
.franck-footer-geely__directory--bottom {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-top: 36px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 992px) {
    .franck-footer-geely__directory--bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 60px;
    }
}

.franck-footer-geely__directory-col--left {
    flex: 1 1 auto;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.franck-footer-geely__directory-col--right {
    flex: 1 1 50%;
    max-width: 640px;
}

/* Réseaux sociaux */
.franck-footer-geely__socials {
    display: flex;
    align-items: center;
}

.franck-footer-geely__socials-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.franck-footer-geely__social-item {
    display: inline-flex;
}

.franck-footer-geely__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    text-decoration: none;
    transition: background-color .2s ease, transform .2s ease, color .2s ease;
}

.franck-footer-geely__social-link:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    transform: translateY(-2px);
}

.franck-footer-geely__social-link svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: currentColor;
}

/* Copyright & liens légaux */
.franck-footer-geely__copyright-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.franck-footer-geely__copyright-text {
    font-size: 13px;
    color: var(--ffg-bottombar-text, rgba(255, 255, 255, 0.85));
    font-weight: 400;
}

.franck-footer-geely__legal-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    column-gap: 18px;
    row-gap: 6px;
}

.franck-footer-geely__legal-link {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    line-height: inherit;
    text-decoration: none;
    color: var(--ffg-legal-link-color, #ffffff) !important;
    font-size: var(--ffg-legal-size, 12px);
    font-weight: 500;
    opacity: 0.92;
    transition: color .15s ease, opacity .15s ease;
    cursor: pointer;
}

.franck-footer-geely__legal-link:hover {
    color: #ffffff !important;
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Disclaimer (Avertissement) */
.franck-footer-geely__disclaimer {
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.52);
    text-align: left;
}

@media (min-width: 992px) {
    .franck-footer-geely__disclaimer {
        text-align: right;
    }
}

/* ===================== BANDEAU ÉCO-MOBILITÉ ===================== */
.franck-footer-geely__extra-disclaimer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    padding: 22px 0 26px;
    text-align: center;
    letter-spacing: .02em;
}

/* ===================== RESPONSIVE ===================== */
@media (min-width: 576px) and (max-width: 991px) {
    .franck-footer-geely__columns {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 36px 32px !important;
    }
    .franck-footer-geely__directory-col--nav {
        justify-content: flex-start;
    }
    .franck-footer-geely__disclaimer {
        text-align: left;
    }
}

@media (max-width: 575px) {
    .franck-footer-geely__columns {
        display: flex !important;
        flex-direction: column !important;
        gap: 28px !important;
    }
    .franck-footer-geely__directory-col--nav {
        justify-content: flex-start;
    }
    .franck-footer-geely__disclaimer {
        text-align: left;
    }
}

@media (max-width: 768px) {
    .franck-footer-geely,
    .franck-footer-renault { --ffg-content-padding-x: 20px; }
    .franck-footer-geely__main,
    .franck-footer-renault__main { padding-top: 36px; padding-bottom: 32px; }
    .franck-footer-geely__col-links,
    .franck-footer-renault__col-links { gap: 6px; }
    .franck-footer-geely__col-link,
    .franck-footer-renault__col-link {
        display: flex;
        align-items: center;
        min-height: 36px;
        padding: 4px 0;
        font-size: 14px;
    }
    .franck-footer-geely__directory--top {
        margin-bottom: 36px;
    }
    .franck-footer-geely__directory--bottom {
        gap: 24px;
        padding-top: 28px;
    }
    .franck-footer-geely__socials-list {
        gap: 14px;
    }
    .franck-footer-geely__legal-list {
        column-gap: 14px;
    }
}

/* ===================== BUILDER (preview 75%) ===================== */
.franck-footer-geely-preview-container,
.franck-footer-renault-preview-container { width: 100%; max-width: 1760px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.franck-footer-geely-scale-outer .franck-footer-geely-wrapper--full,
.franck-footer-renault-scale-outer .franck-footer-renault-wrapper--full,
.is-builder-preview .franck-footer-geely-wrapper--full,
.is-builder-preview .franck-footer-renault-wrapper--full { width: 100%; margin-left: 0; max-width: 100%; }
.franck-footer-geely-scale-inner,
.franck-footer-renault-scale-inner { box-sizing: border-box; }

/* Builder Preview Desktop Layout Overrides */
.is-builder-preview .franck-footer-geely {
    background-color: var(--ffg-bg, #000000) !important;
    color: var(--ffg-text, #ffffff) !important;
}
.is-builder-preview .franck-footer-geely a {
    text-decoration: none !important;
}
.is-builder-preview .franck-footer-geely__brand-logo,
.is-builder-preview .franck-footer-geely__brand-logo:hover,
.is-builder-preview .franck-footer-geely__brand-logo:focus,
.is-builder-preview .franck-footer-geely__brand-logo:visited {
    color: #ffffff !important;
}
.is-builder-preview .franck-footer-geely__logo-svg,
.is-builder-preview .franck-footer-geely__logo-svg path {
    fill: #ffffff !important;
    color: #ffffff !important;
}
.is-builder-preview .franck-footer-geely__directory--top {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 48px !important;
    margin-bottom: 48px !important;
}
.is-builder-preview .franck-footer-geely__directory-col--brand {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
}
.is-builder-preview .franck-footer-geely__directory-col--nav {
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
}
.is-builder-preview .franck-footer-geely__columns {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 36px 64px !important;
}
.is-builder-preview .franck-footer-geely__col {
    min-width: 160px !important;
}
.is-builder-preview .franck-footer-geely__col-title {
    font-size: var(--ffg-title-size, 13px) !important;
    font-weight: 700 !important;
    color: var(--ffg-title-color, #ffffff) !important;
    margin: 0 0 20px !important;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
    position: relative !important;
    padding-bottom: 8px !important;
}
.is-builder-preview .franck-footer-geely__col-title::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 24px !important;
    height: 2px !important;
    background: rgba(255, 255, 255, 0.7) !important;
}
.is-builder-preview .franck-footer-geely__col-links {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}
.is-builder-preview .franck-footer-geely__col-link {
    color: var(--ffg-link-color, rgba(255, 255, 255, 0.75)) !important;
    font-size: var(--ffg-link-size, 14px) !important;
    text-decoration: none !important;
    display: inline-block !important;
    line-height: 1.45 !important;
}
.is-builder-preview .franck-footer-geely__col-link:hover {
    color: #ffffff !important;
}
.is-builder-preview .franck-footer-geely__directory--bottom {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 48px !important;
    padding-top: 36px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.is-builder-preview .franck-footer-geely__directory-col--left {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
    max-width: 60% !important;
}
.is-builder-preview .franck-footer-geely__directory-col--right {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    text-align: right !important;
    max-width: 40% !important;
}
.is-builder-preview .franck-footer-geely__socials {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}
.is-builder-preview .franck-footer-geely__socials-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 16px !important;
}
.is-builder-preview .franck-footer-geely__social-item {
    display: inline-flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.is-builder-preview .franck-footer-geely__social-link {
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    text-decoration: none !important;
}
.is-builder-preview .franck-footer-geely__social-link svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    fill: currentColor !important;
}
.is-builder-preview .franck-footer-geely__legal-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px 24px !important;
}
.is-builder-preview .franck-footer-geely__legal-link {
    color: var(--ffg-legal-link-color, rgba(255, 255, 255, 0.6)) !important;
    font-size: var(--ffg-legal-size, 12px) !important;
    text-decoration: none !important;
}
.is-builder-preview .franck-footer-geely__legal-link:hover {
    color: #ffffff !important;
}
.is-builder-preview .franck-footer-geely__copyright-text {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: var(--ffg-legal-size, 12px) !important;
}
.is-builder-preview .franck-footer-geely__disclaimer {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
}
.is-builder-preview .franck-footer-geely__backtotop {
    color: var(--ffg-topbar-text, #000000) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
}
