/* ============================================================================
   CONCESSION MAIN BANNER HOME
   Bannière hero (image / vidéo upload / YouTube) avec card de contact en overlay.
   Compatible Toyota, multi-marques.
   ============================================================================ */

.concession-main-banner-home,
.franck-main-banner-renault-home {
    /* Layout bannière */
    --fmbrh-height: 600px;
    --fmbrh-height-mobile: 420px;
    --fmbrh-content-padding-x: 42px;
    --fmbrh-radius: 0px;

    /* Média de fond */
    --fmbrh-image-object-fit: cover;
    --fmbrh-media-offset-x: 0px;
    --fmbrh-media-offset-y: 0px;
    --fmbrh-media-zoom: 1;
    --fmbrh-overlay: transparent;

    /* Card */
    --fmbrh-card-width: 639px;
    --fmbrh-card-radius: 12px;
    --fmbrh-card-padding: 28px;
    --fmbrh-card-gap: 10px;
    --fmbrh-card-justify: flex-start;
    --fmbrh-card-align: center;

    /* Card — couleurs */
    --fmbrh-card-bg: rgba(255, 255, 255, 0.7);
    --fmbrh-card-color: #000000;
    --fmbrh-card-muted: #1a1a1a;

    /* Titre */
    --fmbrh-title-size: 35px;
    --fmbrh-title-lh: 40px;

    /* CTA aux couleurs de la marque / template */
    --fmbrh-cta-bg: var(--theme-locator-accent, var(--theme-button-bg, #eb0a1e));
    --fmbrh-cta-color: var(--theme-button-text-color, #ffffff);
    --fmbrh-cta-bg-hover: var(--theme-button-bg-hover, #c80818);
    --fmbrh-cta-color-hover: #ffffff;

    /* Typo */
    --fmbrh-font: var(--theme-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
    --fmbrh-title-font: var(--theme-title-font, var(--fmbrh-font));

    /* Animation */
    --fmbrh-anim-delay: 0ms;
    --fmbrh-anim-duration: 600ms;
}

/* =====================  WRAPPER  ===================== */
.concession-main-banner-home-wrapper,
.franck-main-banner-renault-home-wrapper {
    position: relative;
    width: 100%;
}
.concession-main-banner-home-wrapper--full,
.franck-main-banner-renault-home-wrapper--full {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* =====================  SECTION  ===================== */
.concession-main-banner-home,
.franck-main-banner-renault-home {
    position: relative;
    min-height: var(--fmbrh-height);
    border-radius: var(--fmbrh-radius);
    overflow: hidden;
    display: flex;
    align-items: stretch;
    font-family: var(--fmbrh-font);
    box-sizing: border-box;
}

/* =====================  MÉDIA DE FOND  ===================== */
.concession-main-banner-home__media,
.franck-main-banner-renault-home__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}
.concession-main-banner-home__media img,
.concession-main-banner-home__media picture,
.concession-main-banner-home__media video,
.franck-main-banner-renault-home__media img,
.franck-main-banner-renault-home__media picture,
.franck-main-banner-renault-home__media video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: var(--fmbrh-image-object-fit);
    transform: translate(-50%, -50%) translate(var(--fmbrh-media-offset-x), var(--fmbrh-media-offset-y)) scale(var(--fmbrh-media-zoom));
    transform-origin: center center;
    border: 0;
}
.concession-main-banner-home__media iframe,
.franck-main-banner-renault-home__media iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-height: 100%;
    min-width: 177.77vh;
    transform: translate(-50%, -50%) scale(var(--fmbrh-media-zoom, 1));
    transform-origin: center center;
    border: 0;
    pointer-events: none;
}

/* =====================  OVERLAY  ===================== */
.concession-main-banner-home__overlay,
.franck-main-banner-renault-home__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--fmbrh-overlay);
    z-index: 2;
    pointer-events: none;
}

/* =====================  INNER (grille)  ===================== */
.concession-main-banner-home__inner,
.franck-main-banner-renault-home__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px var(--fmbrh-content-padding-x);
    display: flex;
    justify-content: var(--fmbrh-card-justify);
    align-items: var(--fmbrh-card-align);
    box-sizing: border-box;
}

/* =====================  CARD  ===================== */
.concession-main-banner-home__card,
.franck-main-banner-renault-home__card {
    width: 100%;
    max-width: var(--fmbrh-card-width);
    border-radius: var(--fmbrh-card-radius);
    padding: var(--fmbrh-card-padding);
    background: var(--fmbrh-card-bg);
    color: var(--fmbrh-card-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    gap: var(--fmbrh-card-gap);
    box-sizing: border-box;
}
.concession-main-banner-home__card--bg-white,
.franck-main-banner-renault-home__card--bg-white {
    --fmbrh-card-bg: rgba(255, 255, 255, 0.7);
    --fmbrh-card-color: #000000;
    --fmbrh-card-muted: #1a1a1a;
}
.concession-main-banner-home__card--bg-black,
.franck-main-banner-renault-home__card--bg-black {
    --fmbrh-card-bg: rgba(0, 0, 0, 0.8);
    --fmbrh-card-color: #ffffff;
    --fmbrh-card-muted: #e5e5e5;
}

/* =====================  LIGNE 1 : TITRE  ===================== */
.concession-main-banner-home__title,
.franck-main-banner-renault-home__title {
    margin: 0 0 4px 0;
    font-family: var(--fmbrh-title-font);
    font-size: var(--fmbrh-title-size);
    line-height: var(--fmbrh-title-lh);
    color: inherit;
    font-weight: 800;
    letter-spacing: -0.5px;
}
.concession-main-banner-home__title strong,
.franck-main-banner-renault-home__title strong {
    color: var(--fmbrh-cta-bg, #eb0a1e);
}
.concession-main-banner-home .cmbh-title-prefix {
    display: block !important;
    font-size: var(--fmbrh-title-size, 35px);
    line-height: var(--fmbrh-title-lh, 40px);
    text-transform: none !important;
}
.concession-main-banner-home .cmbh-title-brand {
    display: inline !important;
    font-family: var(--theme-title-font, var(--theme-font-primary, sans-serif));
    font-weight: 800;
    font-size: var(--fmbrh-title-size, 35px);
    line-height: var(--fmbrh-title-lh, 40px);
    text-transform: uppercase;
}
.concession-main-banner-home .cmbh-title-city {
    display: inline !important;
    font-family: var(--theme-font-primary, sans-serif);
    font-weight: 500;
    font-size: var(--fmbrh-title-size, 35px);
    line-height: var(--fmbrh-title-lh, 40px);
    text-transform: uppercase;
}

/* =====================  LIGNE 2 : INFOS (adresse + tél empilés)  ===================== */
.concession-main-banner-home__row,
.franck-main-banner-renault-home__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 15px;
    line-height: 1.4;
}
.concession-main-banner-home .concession-main-banner-home__row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    grid-template-columns: none !important;
}
.concession-main-banner-home__info,
.franck-main-banner-renault-home__info {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.concession-main-banner-home__info:hover,
.franck-main-banner-renault-home__info:hover {
    opacity: 0.8;
}
.concession-main-banner-home__info svg,
.franck-main-banner-renault-home__info svg {
    flex-shrink: 0;
    color: var(--fmbrh-cta-bg, #eb0a1e);
}

/* =====================  LIGNE 3 : HORAIRES  ===================== */
.concession-main-banner-home__hours,
.franck-main-banner-renault-home__hours {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: var(--fmbrh-card-muted);
}
.concession-main-banner-home .concession-main-banner-home__hours-text {
    white-space: normal !important;
    line-height: 1.5;
}
.concession-main-banner-home__hours svg,
.franck-main-banner-renault-home__hours svg {
    flex-shrink: 0;
    color: var(--fmbrh-cta-bg, #eb0a1e);
}

/* =====================  LIGNE 4 : CTA CENTRÉ EN BAS  ===================== */
.concession-main-banner-home__cta-wrap,
.franck-main-banner-renault-home__cta-wrap {
    margin-top: 10px;
}
.concession-main-banner-home .concession-main-banner-home__cta-wrap {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 12px !important;
}
.concession-main-banner-home__cta,
.franck-main-banner-renault-home__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: var(--theme-btn-radius, var(--theme-button-radius, var(--maurin-button-radius, 0px))) !important;
    background: var(--fmbrh-cta-bg);
    color: var(--fmbrh-cta-color) !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.2s ease;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.concession-main-banner-home__cta:hover,
.franck-main-banner-renault-home__cta:hover {
    background: var(--fmbrh-cta-bg-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* =====================  ANIMATIONS  ===================== */
.fmbrh-anim {
    opacity: 0;
    transition: opacity var(--fmbrh-anim-duration) ease var(--fmbrh-anim-delay),
                transform var(--fmbrh-anim-duration) ease var(--fmbrh-anim-delay);
}
.fmbrh-anim--fade-up { transform: translateY(30px); }
.fmbrh-anim--fade-down { transform: translateY(-30px); }
.fmbrh-anim--fade-left { transform: translateX(30px); }
.fmbrh-anim--fade-right { transform: translateX(-30px); }
.fmbrh-anim--zoom-in { transform: scale(0.92); }
.fmbrh-anim--none { opacity: 1; transform: none; }
.fmbrh-anim--visible {
    opacity: 1 !important;
    transform: none !important;
}

/* =====================  RESPONSIVE  ===================== */
@media (max-width: 768px) {
    .concession-main-banner-home,
    .franck-main-banner-renault-home {
        min-height: var(--fmbrh-height-mobile);
    }
    .concession-main-banner-home__inner,
    .franck-main-banner-renault-home__inner {
        padding: 20px 16px;
    }
    .concession-main-banner-home__title,
    .franck-main-banner-renault-home__title {
        font-size: 24px;
        line-height: 28px;
    }
    .concession-main-banner-home__row,
    .franck-main-banner-renault-home__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}