/* ============================================================================
   FRANCK MAIN BANNER RENAULT HOME
   Bannière hero (image / vidéo upload / YouTube) avec card de contact en overlay.
   Préfixes :
     - BEM : franck-main-banner-renault-home
     - Variables CSS : --fmbrh-*
     - Animation : fmbrh-anim
   Hérite des tokens : var(--fmbrh-x, var(--theme-x, fallback))
   ============================================================================ */

/* =====================  VARIABLES PAR DÉFAUT (fallbacks)  ===================== */
.franck-main-banner-renault-home {
    /* Layout bannière */
    --fmbrh-height: 600px;
    --fmbrh-height-mobile: 420px;
    --fmbrh-content-padding-x: 42px;
    --fmbrh-radius: 0px;                 /* charte Renault : angulaire (surchargeable) */

    /* 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: 10px;
    --fmbrh-card-padding: 28px;
    --fmbrh-card-gap: 10px;
    --fmbrh-card-justify: flex-start;    /* position horizontale (H) */
    --fmbrh-card-align: center;          /* position verticale (V)   */

    /* Card — couleurs pilotées par le modificateur de fond (--bg-white / --bg-black) */
    --fmbrh-card-bg: rgba(255, 255, 255, 0.7);
    --fmbrh-card-color: #000000;         /* texte + icônes */
    --fmbrh-card-muted: #1a1a1a;         /* horaires */

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

    /* CTA (auto-contrasté selon le fond de card) */
    --fmbrh-cta-bg: var(--theme-button-bg, #000000);
    --fmbrh-cta-color: var(--theme-button-text-color, #ffffff);
    --fmbrh-cta-bg-hover: var(--theme-button-bg-hover, #1a1a1a);
    --fmbrh-cta-color-hover: #ffffff;

    /* Typo */
    --fmbrh-font: var(--theme-text-font, 'NouvelR', 'Jost', 'Work Sans', sans-serif);
    --fmbrh-title-font: var(--theme-title-font, var(--fmbrh-font));

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

/* =====================  WRAPPER (full-bleed)  ===================== */
.franck-main-banner-renault-home-wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
/* Full width : sort du container parent (front live) */
.franck-main-banner-renault-home-wrapper--full {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* =====================  SECTION (bannière)  ===================== */
.franck-main-banner-renault-home {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    min-height: var(--fmbrh-height);
    border-radius: var(--fmbrh-radius);
    overflow: hidden;
    font-family: var(--fmbrh-font);
}

/* =====================  MÉDIA DE FOND  ===================== */
.franck-main-banner-renault-home__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.franck-main-banner-renault-home__media img,
.franck-main-banner-renault-home__media picture,
.franck-main-banner-renault-home__media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--fmbrh-image-object-fit);
    object-position: center;
    transform: translate(var(--fmbrh-media-offset-x), var(--fmbrh-media-offset-y)) scale(var(--fmbrh-media-zoom));
    transform-origin: center;
}
.franck-main-banner-renault-home__media picture img {
    position: static;
    transform: none;
}
/* YouTube : iframe en couverture (ratio 16:9 mis à l'échelle pour remplir) */
.franck-main-banner-renault-home__media iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    min-width: 177.78vh;   /* 16/9 de la hauteur viewport */
    min-height: 56.25vw;   /* 9/16 de la largeur viewport */
    transform: translate(-50%, -50%) scale(var(--fmbrh-media-zoom));
    border: 0;
}

/* =====================  OVERLAY  ===================== */
.franck-main-banner-renault-home__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--fmbrh-overlay);
    pointer-events: none;
}

/* =====================  INNER (place la card)  ===================== */
.franck-main-banner-renault-home__inner {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: var(--fmbrh-card-justify);
    align-items: var(--fmbrh-card-align);
    min-height: var(--fmbrh-height);
    padding: var(--fmbrh-content-padding-x);
    box-sizing: border-box;
}

/* =====================  CARD  ===================== */
.franck-main-banner-renault-home__card {
    width: 100%;
    max-width: var(--fmbrh-card-width);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--fmbrh-card-gap);
    background: var(--fmbrh-card-bg);
    color: var(--fmbrh-card-color);
    border-radius: var(--fmbrh-card-radius);
    padding: var(--fmbrh-card-padding);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* Fond blanc 70% (défaut) : texte noir, CTA noir */
.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;
    --fmbrh-cta-bg: var(--theme-button-bg, #000000);
    --fmbrh-cta-color: var(--theme-button-text-color, #ffffff);
    --fmbrh-cta-bg-hover: var(--theme-border-accent-color, #efdf00);   /* hover : jaune Renault */
    --fmbrh-cta-color-hover: #000000;                                  /* hover : texte noir */
}
/* Fond noir 80% : texte blanc, CTA jaune Renault */
.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;
    --fmbrh-cta-bg: var(--theme-border-accent-color, #efdf00);
    --fmbrh-cta-color: #000000;
    --fmbrh-cta-bg-hover: #e3d400;
    --fmbrh-cta-color-hover: #000000;
}

/* ----- Ligne 1 : titre bi-graisse ----- */
.franck-main-banner-renault-home__title {
    margin: 0;
    font-family: var(--fmbrh-title-font);
    font-size: var(--fmbrh-title-size);
    line-height: var(--fmbrh-title-lh);
    letter-spacing: 0;
    color: var(--fmbrh-card-color);
    text-transform: none;   /* défait l'uppercase de la charte Renault */
}
.franck-main-banner-renault-home__title-strong { font-weight: 700; }
.franck-main-banner-renault-home__title-regular { font-weight: 400; }

/* ----- Ligne 2 : adresse + téléphone sur 2 colonnes égales ----- */
.franck-main-banner-renault-home__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 16px;
}
.franck-main-banner-renault-home__info {
    display: inline-flex;
    align-items: flex-start;     /* icône alignée sur la 1re ligne si l'adresse passe à la ligne */
    gap: 8px;
    font-size: 16px;
    font-weight: 600;            /* semi-bold */
    line-height: 24px;
    letter-spacing: 0.3px;
    color: var(--fmbrh-card-color);
    text-decoration: none;
    min-width: 0;                /* autorise le retour à la ligne du texte dans la colonne */
}
.franck-main-banner-renault-home__info svg {
    width: 18px;
    height: 18px;
    margin-top: 3px;             /* centrage optique sur une ligne de 24px */
    flex-shrink: 0;
    stroke: currentColor;
}
a.franck-main-banner-renault-home__info {
    cursor: pointer;
    transition: opacity 0.15s ease, text-decoration 0.15s ease;
}
a.franck-main-banner-renault-home__info:hover,
a.franck-main-banner-renault-home__info:focus-visible {
    text-decoration: underline;
    opacity: 0.85;
}

/* ----- Ligne 3 : horaires (icône + zone de texte multi-lignes) ----- */
.franck-main-banner-renault-home__hours {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
    color: var(--fmbrh-card-muted);
}
.franck-main-banner-renault-home__hours svg {
    width: 16px;
    height: 16px;
    margin-top: 2px;             /* centrage optique sur une ligne de 20px */
    flex-shrink: 0;
    stroke: currentColor;
}
.franck-main-banner-renault-home__hours-text {
    white-space: pre-line;       /* conserve les retours à la ligne saisis */
}

/* ----- Ligne 4 : bouton « Nous contacter » ----- */
.franck-main-banner-renault-home__cta-wrap { margin-top: 4px; }
.franck-main-banner-renault-home__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--theme-button-font, var(--fmbrh-font));
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    padding: 14px 26px;
    border: 0;
    border-radius: var(--theme-button-radius, 0px);
    background: var(--fmbrh-cta-bg);
    color: var(--fmbrh-cta-color);
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
.franck-main-banner-renault-home__cta:hover,
.franck-main-banner-renault-home__cta:focus-visible {
    background: var(--fmbrh-cta-bg-hover);
    color: var(--fmbrh-cta-color-hover);
}

/* =====================  ANIMATION (card)  ===================== */
.fmbrh-anim {
    opacity: 0;
    transition: opacity var(--fmbrh-anim-duration) ease, transform var(--fmbrh-anim-duration) ease;
    transition-delay: var(--fmbrh-anim-delay);
    will-change: opacity, transform;
}
.fmbrh-anim--fade-up    { transform: translateY(28px); }
.fmbrh-anim--fade-down  { transform: translateY(-28px); }
.fmbrh-anim--fade-left  { transform: translateX(28px); }
.fmbrh-anim--fade-right { transform: translateX(-28px); }
.fmbrh-anim--zoom       { transform: scale(.94); }
.fmbrh-anim--none       { opacity: 1; transform: none; }
.fmbrh-anim--visible    { opacity: 1; transform: none; }

/* =====================  RESPONSIVE  ===================== */
@media (max-width: 1024px) {
    .franck-main-banner-renault-home__card { max-width: 100%; }
}
@media (max-width: 600px) {
    .franck-main-banner-renault-home {
        min-height: var(--fmbrh-height-mobile);
        --fmbrh-content-padding-x: 18px;
    }
    .franck-main-banner-renault-home__inner { min-height: var(--fmbrh-height-mobile); }
    .franck-main-banner-renault-home__title {
        font-size: 26px;
        line-height: 30px;
    }
    .franck-main-banner-renault-home__row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* =====================  BUILDER : preview à 75%  =====================
   Même mécanique que franck-menu-renault / franck-cards-static : neutraliser
   le 100vw du wrapper--full dans le preview pour qu'il remplisse la zone. */
.franck-main-banner-renault-home-preview-container {
    width: 100%;
    max-width: 1760px;     /* 1320 / 0.75 */
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}
.franck-main-banner-renault-home-scale-outer .franck-main-banner-renault-home-wrapper--full,
.is-builder-preview .franck-main-banner-renault-home-wrapper--full {
    width: 100%;
    margin-left: 0;
    max-width: 100%;
}
.franck-main-banner-renault-home-scale-inner { box-sizing: border-box; }
/* Dans le preview, l'iframe YouTube ne doit pas déborder en vh/vw du builder */
.is-builder-preview .franck-main-banner-renault-home__media iframe {
    min-width: 100%;
    min-height: 100%;
}