/* ============================================================================
   FRANCK BANNER TEXT CTA
   Bannière unique avec image/vidéo/youtube de fond + bloc texte superposé.
   En option : entête de section au-dessus (titre/sous-titre + bouton optionnel).
   Préfixes :
     - BEM : franck-banner-text-cta
     - Variables CSS : --fk-*
     - Animation : fbtc-anim
   ============================================================================ */

/* =====================  VARIABLES PAR DÉFAUT (fallbacks)  ===================== */
.franck-banner-text-cta {
    /* Layout */
    --fk-density-width: 86%;
    --fk-header-gap: 30px;
    --fk-content-padding-x: 42px;

    /* Section media (background section) — séparés de la bannière */
    --fk-section-image-object-fit: cover;
    --fk-section-media-offset-x: 0px;
    --fk-section-media-offset-y: 0px;
    --fk-section-media-zoom: 1;
    --fk-overlay: transparent;

    /* Bannière : conteneur + média */
    /* FBTC_CARD_HEIGHT_2026-07-16 : 350px (pas 460px) — aligné sur le default
       réel du renderer JS (defaultConfig.cardMaxHeight). */
    --fk-card-height: 350px;
    --fk-card-radius: var(--theme-card-radius, 28px);
    --fk-card-bg: var(--theme-card-background, #f1f5ff);
    --fk-card-shadow: none;
    --fk-card-padding-left: 42px;
    --fk-text-vertical-offset: 0px;

    /* Object-fit + position média BANNIÈRE */
    --fk-image-object-fit: cover;
    --fk-media-position-y: 50%;
    --fk-media-position-x: 50%;
    /* FBTC_BANNER_MEDIA_ZOOM (section 1b) : zoom dedie au media BANNIERE,
       distinct de --fk-section-media-zoom (groupe media SECTION). */
    --fk-media-zoom: 1;
    --fk-banner-overlay: transparent;

    /* Placeholder bannière (aucun média configuré) — FBTC_PLACEHOLDER_TRANSPARENT
       2026-07-17 : variable --fk-banner-placeholder-bg retirée. Elle imposait
       un fond fixe et opaque (#f6f6f6) qui recouvrait entièrement
       .franck-banner-text-cta__banner (dont le fond est piloté par --fk-card-bg,
       cf. "Couleur bannière") tant qu'aucune image n'était uploadée, rendant cette
       couleur toujours invisible sur le front. Le placeholder est désormais
       transparent (voir la règle .franck-banner-text-cta__banner-placeholder plus
       bas) pour laisser transparaître le fond du parent. Le scope
       .is-builder-preview (indicateur pointillé + "IMAGE", inchangé) ne dépendait
       déjà pas de cette variable : il fixe son propre #fafafa en dur. */

    /* Entête section : alignements */
    /* FBTC_BADGE_PILL (section 1a) : la pilule est en display:table, l'alignement
       se pilote par une marge calculee (pas text-align), copie de FCS_BADGE_PILL. */
    --fk-eyebrow-margin: 0 0 12px 0;
    --fk-title-align: left;
    --fk-subtitle-align: left;
    --fk-text-align-header: left;
    --fk-button-align: flex-start;

    /* Entête section : couleurs/tailles */
    --fk-eyebrow-color: var(--theme-eyebrow-color, #7c7c7c);
    --fk-eyebrow-size: var(--theme-eyebrow-size, 13px);
    /* FBTC_BADGE_PILL (section 1a) : contour + fond du badge, copiés depuis
       franck-cards-static (FCS_BADGE_PILL / FCS_BADGE_RADIUS). */
    --fk-eyebrow-border-width: 1px;
    --fk-eyebrow-radius: 999px;
    --fk-eyebrow-border-color: var(--theme-button-bg, var(--maurin-primary, #1cb359));
    --fk-eyebrow-bg: transparent;
    --fk-title-color: var(--theme-section-title-color, #2c2c2c);
    --fk-title-size: var(--theme-title-size, 48px);
    --fk-subtitle-color: var(--theme-section-subtitle-color, var(--maurin-text, #2c2c2c));
    --fk-subtitle-size: var(--theme-subtitle-size, 20px);
    --fk-section-text-color: var(--theme-section-text-color, var(--maurin-text, #2c2c2c));
    --fk-section-text-size: var(--theme-text-size, 16px);

    /* Bouton SECTION */
    --fk-button-bg: var(--theme-button-bg, var(--maurin-primary, #2a6d47));
    --fk-button-color: var(--theme-button-text-color, #ffffff);
    --fk-button-bg-hover: var(--theme-button-bg-hover, var(--maurin-secondary, #3c9a65));
    --fk-button-color-hover: var(--theme-button-text-hover, #ffffff);
    --fk-button-size: var(--theme-button-font-size, 15px);

    /* Bannière : textes + prix */
    /* FBTC_REMOVE_BANNER_EYEBROW_2026-07-16 (section 5) : --fk-banner-eyebrow-color
       et --fk-banner-eyebrow-size supprimées (pré-titre bannière retiré). */
    --fk-text-align: left;
    --fk-block-title-color: var(--theme-block-title-color, #ffffff);
    --fk-block-title-size: 48px;
    --fk-block-subtitle-color: var(--theme-block-subtitle-color, #ffffff);
    --fk-block-subtitle-size: 21px;
    --fk-block-text-color: var(--theme-block-text-color, #ffffff);
    --fk-block-text-size: 18px;
    /* FBTC_PRICE_PRIMARY_GREEN (section 3) : herite du vert primary du theme
       (--theme-button-bg / --maurin-primary), plus fige en blanc. Meme chaine
       de fallback que --fk-button-bg plus bas dans ce fichier (coherence). */
    --fk-price-color: var(--theme-button-bg, var(--maurin-primary, #2a6d47));
    --fk-price-size: 38px;

    /* Bouton BANNIÈRE (NOUVEAU — distinct du bouton section) */
    --fk-banner-button-bg: var(--theme-button-bg, var(--maurin-primary, #2a6d47));
    --fk-banner-button-color: var(--theme-button-text-color, #ffffff);
    --fk-banner-button-bg-hover: var(--theme-button-bg-hover, var(--maurin-secondary, #3c9a65));
    --fk-banner-button-color-hover: var(--theme-button-text-hover, #ffffff);
    --fk-banner-button-size: 15px;

    /* Animation */
    --fk-animation-delay: 0ms;
    --fk-animation-duration: 700ms;
}

/* =====================  WRAPPER  ===================== */
.franck-banner-text-cta-wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.franck-banner-text-cta-wrapper,
.franck-banner-text-cta-wrapper * {
    box-sizing: border-box;
}

/* Full width : sort du container parent (aligné sur fcs) */
.franck-banner-text-cta-wrapper--full {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.franck-banner-text-cta-wrapper--container {
    padding-left: 42px;
    padding-right: 42px;
}

.franck-banner-text-cta-wrapper--container .container {
    padding-left: 0;
    padding-right: 0;
}

.franck-banner-text-cta-wrapper--container .franck-banner-text-cta {
    /* border-radius déplacé vers la règle de base .franck-banner-text-cta
       (non scopée) — voir FBTC_RADIUS_FIX ci-dessus. Ne pas le redéclarer ici
       pour éviter une double déclaration de la même valeur à deux endroits. */
    overflow: hidden;
}

/* Density XXL : pleine largeur, pas de padding latéral, bannière sans arrondi */
.franck-banner-text-cta-wrapper--xxl {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* =====================  SECTION  ===================== */
.franck-banner-text-cta {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* FBTC_RADIUS_FIX : appliqué ici (non scopé) au lieu de seulement dans
       .franck-banner-text-cta-wrapper--container .franck-banner-text-cta,
       pour que l'arrondi de section fonctionne aussi en mode "full" (le
       défaut). overflow:hidden ci-dessus est déjà inconditionnel, donc
       l'arrondi non scopé produit le même rendu visuel dans les deux modes. */
    border-radius: var(--fk-section-radius, var(--theme-section-container-radius, 18px));
    font-family: var(--maurin-font-primary, 'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
    color: var(--maurin-text, #2c2c2c);
}

.franck-banner-text-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--fk-overlay, transparent);
}

/* Section media (background section globale) */
.franck-banner-text-cta__section-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.franck-banner-text-cta__section-media picture,
.franck-banner-text-cta__section-media img,
.franck-banner-text-cta__section-media video,
.franck-banner-text-cta__section-media iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

.franck-banner-text-cta__section-media img,
.franck-banner-text-cta__section-media video {
    object-fit: var(--fk-section-image-object-fit, cover);
    object-position: center center;
    transform:
        translate(var(--fk-section-media-offset-x, 0px), var(--fk-section-media-offset-y, 0px))
        scale(var(--fk-section-media-zoom, 1));
    transform-origin: center center;
}

/* =====================  INNER (zone contenu)  ===================== */
.franck-banner-text-cta__inner {
    position: relative;
    z-index: 2;
    width: var(--fk-density-width, 86%);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--fk-content-padding-x, 42px);
    padding-right: var(--fk-content-padding-x, 42px);
}

/* Plafonds par palier de density (standard depuis 2026-07-15, aligné sur
   franck-cards-static) : compact/normal ont chacun leur propre plafond au
   lieu d'un max-width unique de 1680px partagé, qui les rendait presque
   identiques sur grand écran. large/xxl restent sans plafond. */
.franck-banner-text-cta--compact .franck-banner-text-cta__inner { max-width: 1140px; }
.franck-banner-text-cta--normal  .franck-banner-text-cta__inner { max-width: 1320px; }
.franck-banner-text-cta--large   .franck-banner-text-cta__inner { max-width: none; }

.franck-banner-text-cta--xxl .franck-banner-text-cta__inner {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.franck-banner-text-cta--xxl .franck-banner-text-cta__banner {
    border-radius: 0;
}

/* =====================  HEADER (présentation section)  ===================== */
.franck-banner-text-cta__header {
    max-width: 980px;
    margin-bottom: var(--fk-header-gap, 30px);
}

/* FBTC_BADGE_PILL_CSS (section 1a) : badge en forme de pilule, copie de
   FCS_BADGE_PILL_CSS (franck-cards-static). display:table (pas inline-block)
   pour que la marge calculee puisse aligner correctement un element qui se
   retrecit a son contenu. Le contour retombe sur le vert du theme si aucune
   couleur n'est choisie et qu'aucun mode 'Aucun' n'est actif ; le fond
   retombe sur transparent. */
.franck-banner-text-cta__eyebrow-section {
    display: table;
    margin: var(--fk-eyebrow-margin, 0 0 12px 0);
    padding: 4px 14px;
    border-radius: var(--fk-eyebrow-radius, 999px);
    border-width: var(--fk-eyebrow-border-width, 1px);
    border-style: solid;
    border-color: var(--fk-eyebrow-border-color, var(--theme-button-bg, var(--maurin-primary, #1cb359)));
    background: var(--fk-eyebrow-bg, transparent);
    /* FBTC_BADGE_PILL_ALIGNSELF : sans effet si le header n'est pas display:flex
       (cas actuel de .franck-banner-text-cta__header), mais inoffensif et
       coherent si ce header devait un jour passer en flex (cf. cards-static). */
    align-self: flex-start;
    font-family: var(--theme-text-font, 'Work Sans', sans-serif);
    color: var(--fk-eyebrow-color, var(--theme-eyebrow-color, #7c7c7c));
    font-size: var(--fk-eyebrow-size, var(--theme-eyebrow-size, 13px));
    line-height: 1.2;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: var(--theme-eyebrow-weight, 600);
}

.franck-banner-text-cta__title {
    margin: 0;
    color: var(--fk-title-color, var(--theme-section-title-color, #2c2c2c));
    font-size: var(--fk-title-size, var(--theme-title-size, 48px));
    line-height: 1.15;
    font-weight: var(--fk-title-weight, var(--theme-title-weight, 600));
    text-align: var(--fk-title-align, left);
    font-family: var(--theme-title-font, 'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
}

.franck-banner-text-cta__subtitle,
.franck-banner-text-cta__section-text {
    margin: 16px 0 0;
    line-height: 1.6;
    font-weight: var(--fk-subtitle-weight, var(--theme-subtitle-weight, 500));
    font-family: var(--theme-text-font, 'Work Sans', sans-serif);
}

.franck-banner-text-cta__subtitle {
    color: var(--fk-subtitle-color, var(--theme-section-subtitle-color, #2c2c2c));
    font-size: var(--fk-subtitle-size, var(--theme-subtitle-size, 20px));
    text-align: var(--fk-subtitle-align, left);
    line-height: 1.45;
}

.franck-banner-text-cta__section-text {
    color: var(--fk-section-text-color, var(--maurin-text, #2c2c2c));
    font-size: var(--fk-section-text-size, var(--theme-text-size, 16px));
    text-align: var(--fk-text-align-header, left);
}

/* =====================  BOUTON SECTION  ===================== */
.franck-banner-text-cta__section-button-wrap {
    display: flex;
    justify-content: var(--fk-button-align, flex-start);
    margin-top: 22px;
}

.franck-banner-text-cta__section-button {
    display: inline-flex;
    min-height: var(--theme-button-height, 48px);
    align-items: center;
    justify-content: center;
    border-radius: var(--theme-button-radius, 999px);
    padding: 0 var(--theme-button-padding-x, 22px);
    background: var(--fk-button-bg, var(--maurin-primary, #2a6d47));
    color: var(--fk-button-color, #ffffff);
    font-size: var(--fk-button-size, var(--theme-button-font-size, 15px));
    font-weight: var(--theme-button-font-weight, 900);
    text-decoration: none;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.franck-banner-text-cta__section-button:hover,
.franck-banner-text-cta__section-button:focus-visible {
    background: var(--fk-button-bg-hover, var(--maurin-secondary, #3c9a65));
    color: var(--fk-button-color-hover, #ffffff);
    transform: translateY(-1px);
    text-decoration: none;
}

/* =====================  FOOTER (bouton sous la bannière)  ===================== */
.franck-banner-text-cta__footer {
    margin-top: var(--fk-header-gap, 30px);
}

/* =====================  BANNIÈRE  ===================== */
.franck-banner-text-cta__banner {
    position: relative;
    min-height: var(--fk-card-height, 350px);
    border-radius: var(--fk-card-radius, var(--theme-card-radius, 28px));
    overflow: hidden;
    background: var(--fk-card-bg, #f1f5ff);
    box-shadow: var(--fk-card-shadow, none);
}

.franck-banner-text-cta__banner--transparent {
    background: transparent;
    box-shadow: none;
}

.franck-banner-text-cta__banner-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.franck-banner-text-cta__banner-media picture {
    display: block;
    width: 100%;
    height: 100%;
}

.franck-banner-text-cta__banner-media-desktop,
.franck-banner-text-cta__banner-media-mobile {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.franck-banner-text-cta__banner-media-desktop picture,
.franck-banner-text-cta__banner-media-mobile picture {
    display: block;
    width: 100%;
    height: 100%;
}

.franck-banner-text-cta__banner-media img,
.franck-banner-text-cta__banner-media video,
.franck-banner-text-cta__banner-placeholder,
.franck-banner-text-cta__banner-media-desktop img,
.franck-banner-text-cta__banner-media-mobile img {
    width: 100%;
    height: 100%;
    min-height: var(--fk-card-height, 350px);
    display: block;
    object-fit: var(--fk-image-object-fit, cover);
    object-position: var(--fk-media-position-x, 50%) var(--fk-media-position-y, 50%);
    border: 0;
    /* FBTC_BANNER_MEDIA_ZOOM (section 1b) : zoom média bannière. Le parent
       .franck-banner-text-cta__banner-media (overflow:hidden) et .franck-banner-text-cta__banner
       (overflow:hidden) clippent le débordement, même mécanisme que le zoom
       du média SECTION (--fk-section-media-zoom). */
    transform: scale(var(--fk-media-zoom, 1));
    transform-origin: center center;
}

.franck-banner-text-cta__banner-media-mobile {
    display: none;
}

@media (max-width: 767.98px) {
    .franck-banner-text-cta__banner-media-desktop {
        display: none !important;
    }
    .franck-banner-text-cta__banner-media-mobile {
        display: block !important;
    }
}

.franck-banner-text-cta__banner-media iframe {
    position: absolute !important;
    top: 50%;
    left: 50%;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    min-width: calc(var(--fk-card-height, 350px) * 1.7778) !important;
    min-height: 100% !important;
    transform: translate(-50%, -50%) scale(1.80);
    border: 0;
    pointer-events: none;
    filter: brightness(.9);
}

.franck-banner-text-cta__banner-placeholder {
    /* FBTC_PLACEHOLDER_TRANSPARENT 2026-07-17 : transparent (et non plus un
       fond fixe/opaque) pour laisser apparaître le fond réel de
       .franck-banner-text-cta__banner (--fk-card-bg, "Couleur bannière" —
       solid/gradient/none) tant qu'aucune image/vidéo n'est uploadée. Ce
       placeholder est absolute/inset:0 et recouvrait auparavant tout le
       parent, rendant la couleur configurée invisible sur le front. */
    background: transparent;
}
/* FBTC_BANNER_PLACEHOLDER : dans le builder uniquement (jamais sur le front,
   la classe .is-builder-preview n'existe que dans l'aperçu), le placeholder
   ignore la couleur enregistrée et affiche un indicateur neutre en
   pointillés — plus spécifique (2 classes) que la règle ci-dessus (1
   classe), donc l'emporte automatiquement sans y toucher. Réplique du
   pattern .is-builder-preview .franck-cards-static__card-placeholder (fcs),
   avec le préfixe fbtc à la place de fcs. */
.is-builder-preview .franck-banner-text-cta__banner-placeholder {
    background: #fafafa;
    border: 2px dashed #d1d5db;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.is-builder-preview .franck-banner-text-cta__banner-placeholder::after {
    content: 'IMAGE';
    color: #9ca3af;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
}

.franck-banner-text-cta__banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--fk-banner-overlay, transparent);
}

/* =====================  CONTENU BANNIÈRE  ===================== */
.franck-banner-text-cta__content {
    position: relative;
    z-index: 2;
    min-height: var(--fk-card-height, 350px);
    max-width: 760px;
    display: flex;
    align-items: center;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: var(--fk-card-padding-left, 42px);
    text-align: var(--fk-text-align, left);
    transform: translateY(var(--fk-text-vertical-offset, 0px));
}

.franck-banner-text-cta__content-inner {
    width: 100%;
}

/* FBTC_REMOVE_BANNER_EYEBROW_2026-07-16 (section 5) : règle
   .franck-banner-text-cta__eyebrow (pré-titre BANNIÈRE) supprimée — plus
   aucun markup ni config ne référence cette classe (vérifié). */

.franck-banner-text-cta__block-title {
    color: var(--fk-block-title-color, #ffffff);
    font-size: var(--fk-block-title-size, 48px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 700;
    margin: 0 0 20px;
}

.franck-banner-text-cta__block-subtitle {
    color: var(--fk-block-subtitle-color, #ffffff);
    font-size: var(--fk-block-subtitle-size, 21px);
    line-height: 1.35;
    font-weight: 600;
    margin: 0 0 20px;
}

.franck-banner-text-cta__block-text {
    color: var(--fk-block-text-color, #ffffff);
    font-size: var(--fk-block-text-size, 18px);
    line-height: 1.55;
    font-weight: 500;
    margin: 0;
}

.franck-banner-text-cta__price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 28px;
    color: var(--fk-price-color, #ffffff);
    font-size: var(--fk-price-size, 38px);
    line-height: 1;
    font-weight: 800;
}

.franck-banner-text-cta__price span {
    font-size: .45em;
    font-weight: 700;
    color: var(--fk-block-text-color, #ffffff);
}

/* =====================  BOUTON BANNIÈRE  ===================== */
.franck-banner-text-cta__button-wrap {
    display: flex;
    margin-top: 30px;
}

.franck-banner-text-cta__button-wrap--left { justify-content: flex-start; }
.franck-banner-text-cta__button-wrap--center { justify-content: center; }
.franck-banner-text-cta__button-wrap--right { justify-content: flex-end; }

.franck-banner-text-cta__button {
    display: inline-flex;
    min-height: var(--theme-button-height, 48px);
    align-items: center;
    justify-content: center;
    border-radius: var(--theme-button-radius, 999px);
    padding: 0 var(--theme-button-padding-x, 22px);
    background: var(--fk-banner-button-bg, var(--maurin-primary, #2a6d47));
    color: var(--fk-banner-button-color, #ffffff);
    font-size: var(--fk-banner-button-size, 15px);
    font-weight: var(--theme-button-font-weight, 900);
    text-decoration: none;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.franck-banner-text-cta__button:hover,
.franck-banner-text-cta__button:focus-visible {
    background: var(--fk-banner-button-bg-hover, var(--maurin-secondary, #3c9a65));
    color: var(--fk-banner-button-color-hover, #ffffff);
    transform: translateY(-1px);
    text-decoration: none;
}

/* ============================================================================
   ANIMATIONS D'ENTRÉE
   ============================================================================ */
.fbtc-anim {
    opacity: 0;
    animation-duration: var(--fk-animation-duration, 700ms);
    animation-delay: var(--fk-animation-delay, 0ms);
    animation-fill-mode: both;
    animation-play-state: paused;
}

.fbtc-anim.fbtc-anim--visible {
    animation-play-state: running;
}

.fbtc-anim--none {
    opacity: 1;
    animation: none;
}

.fbtc-anim--fade { animation-name: fbtcFade; }
.fbtc-anim--fade-up { animation-name: fbtcFadeUp; }
.fbtc-anim--fade-down { animation-name: fbtcFadeDown; }
.fbtc-anim--fade-left { animation-name: fbtcFadeLeft; }
.fbtc-anim--fade-right { animation-name: fbtcFadeRight; }
.fbtc-anim--zoom { animation-name: fbtcZoom; }

@keyframes fbtcFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fbtcFadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: none; }
}
@keyframes fbtcFadeDown {
    from { opacity: 0; transform: translateY(-28px); }
    to { opacity: 1; transform: none; }
}
@keyframes fbtcFadeLeft {
    from { opacity: 0; transform: translateX(-28px); }
    to { opacity: 1; transform: none; }
}
@keyframes fbtcFadeRight {
    from { opacity: 0; transform: translateX(28px); }
    to { opacity: 1; transform: none; }
}
@keyframes fbtcZoom {
    from { opacity: 0; transform: scale(.94); }
    to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .fbtc-anim {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 991.98px) {
    .franck-banner-text-cta-wrapper--full {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .franck-banner-text-cta__inner {
        width: 100%;
        padding-left: 22px;
        padding-right: 22px;
    }

    .franck-banner-text-cta--xxl .franck-banner-text-cta__inner {
        padding-left: 0;
        padding-right: 0;
    }

    .franck-banner-text-cta__content {
        max-width: none;
    }

    .franck-banner-text-cta__block-title {
        font-size: min(var(--fk-block-title-size, 48px), 34px);
    }
}

@media (max-width: 767.98px) {
    .franck-banner-text-cta-wrapper--container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .franck-banner-text-cta__inner {
        padding-left: 18px;
        padding-right: 18px;
    }

    .franck-banner-text-cta--xxl .franck-banner-text-cta__inner {
        padding-left: 0;
        padding-right: 0;
    }

    .franck-banner-text-cta__content {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* ============================================================================
   BUILDER : PREVIEW À 75% (aligné sur franck-cards-static)
   ----------------------------------------------------------------------------
   FBTC_ZOOM_REFACTOR : le renderer enveloppe la section dans :
     .franck-banner-text-cta-scale-outer
       └─ .franck-banner-text-cta-scale-inner (zoom:75%)
            └─ .franck-banner-text-cta-preview-container (simule .container Bootstrap)
                └─ .franck-banner-text-cta-wrapper(--full|--container)
                    └─ section…

   zoom fait calculer une vraie mise en page par le navigateur (marges,
   hauteurs, chevauchements se comportent nativement comme sur le front, à
   taille réduite) — contrairement à l'ancien transform:scale(.75) qui ne
   changeait que le rendu visuel. Voir CONTEXT.md « Aperçu builder ».

   Le problème du wrapper--full (100vw + margin négatif pour sortir d'un
   .container parent) reste entier même sous zoom : dans le builder, il n'y a
   pas forcément de vrai .container Bootstrap parent, donc 100vw ne
   correspond plus à la viewport perçue par l'utilisateur.

   Solution (inchangée, toujours nécessaire sous zoom) : on simule
   manuellement la largeur d'un .container Bootstrap avec des breakpoints
   équivalents. Le rendu preview correspond donc strictement au rendu front
   (qui est dans un .container Bootstrap réel).

   Largeurs internes multipliées par 1/0.75 = 1.3333 car le scale-inner est
   zoomé à 75 % visuellement (le navigateur calcule sa mise en page comme si
   l'élément faisait cette largeur, puis l'affiche réduite). Ex: 1320px
   interne × 0.75 = 990px à l'écran ; on veut donc 1760px en interne pour
   obtenir 1320px à l'écran.
   ============================================================================ */
.franck-banner-text-cta-preview-container {
    width: 100%;
    max-width: 1760px;        /* 1320 / 0.75 — Bootstrap container-xxl scalé */
    margin: 0 auto;
    padding: 0 16px;          /* 12 / 0.75 */
    box-sizing: border-box;
}

/* Breakpoints alignés sur Bootstrap 5 (largeurs ÷ 0.75) */
@media (max-width: 1399.98px) { .franck-banner-text-cta-preview-container { max-width: 1520px; } } /* 1140/.75 */
@media (max-width: 1199.98px) { .franck-banner-text-cta-preview-container { max-width: 1280px; } } /* 960/.75  */
@media (max-width: 991.98px)  { .franck-banner-text-cta-preview-container { max-width: 960px;  } } /* 720/.75  */
@media (max-width: 767.98px)  { .franck-banner-text-cta-preview-container { max-width: 720px;  } } /* 540/.75  */
@media (max-width: 575.98px)  { .franck-banner-text-cta-preview-container { max-width: 100%;   } }

/* Neutralisation du 100vw du wrapper--full quand il est dans le preview :
   le wrapper doit remplir le preview-container, pas la viewport réelle. */
.franck-banner-text-cta-scale-outer .franck-banner-text-cta-wrapper--full,
.is-builder-preview .franck-banner-text-cta-wrapper--full {
    width: 100%;
    margin-left: 0;
    max-width: 100%;
}

.franck-banner-text-cta-scale-inner {
    box-sizing: border-box;
}

/* ==========================================================================
   404 ANIMATION SCENE & HERO BANNER
   ========================================================================== */
.franck-banner-text-cta__banner--404 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 36px 20px 48px !important;
    min-height: 480px !important;
}

.franck-banner-text-cta__banner--404 .franck-banner-text-cta__banner-media {
    display: none !important;
}

.franck-banner-text-cta__banner--404 .franck-banner-text-cta__content {
    max-width: 680px !important;
    width: 100% !important;
    padding: 0 !important;
    text-align: center !important;
    margin: 0 auto !important;
    transform: none !important;
    min-height: auto !important;
    justify-content: center !important;
}

.franck-banner-text-cta__banner--404 .franck-banner-text-cta__content-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
}

.franck-banner-text-cta__banner--404 .anim-scene-wrap {
    position: relative !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto 20px auto !important;
    user-select: none !important;
}

.franck-banner-text-cta__banner--404 .anim-scene-wrap svg {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    overflow: visible !important;
}

.franck-banner-text-cta__banner--404 .anim-car-body {
    animation: carSuspension 2.4s ease-in-out infinite !important;
    transform-origin: 300px 180px !important;
}

@keyframes carSuspension {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.franck-banner-text-cta__banner--404 .wheel-rotate-front,
.franck-banner-text-cta__banner--404 .wheel-rotate-back {
    animation: rotateWheel 1.2s linear infinite !important;
}

.franck-banner-text-cta__banner--404 .wheel-rotate-front { transform-origin: 382px 208px !important; }
.franck-banner-text-cta__banner--404 .wheel-rotate-back { transform-origin: 228px 208px !important; }

@keyframes rotateWheel {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.franck-banner-text-cta__banner--404 .anim-road-dashes {
    stroke-dasharray: 18 14 !important;
    animation: moveRoad 0.6s linear infinite !important;
}

@keyframes moveRoad {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -32; }
}

.franck-banner-text-cta__banner--404 .anim-headlight-beam {
    animation: pulseBeam 2s ease-in-out infinite !important;
}

@keyframes pulseBeam {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 0.9; }
}

.franck-banner-text-cta__banner--404 .anim-float-pin {
    animation: floatPin 3s ease-in-out infinite !important;
    transform-origin: 310px 85px !important;
}

@keyframes floatPin {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(3deg); }
}

.franck-banner-text-cta__banner--404 .anim-cloud-1 {
    animation: driftCloud1 8s ease-in-out infinite alternate !important;
}

.franck-banner-text-cta__banner--404 .anim-cloud-2 {
    animation: driftCloud2 10s ease-in-out infinite alternate !important;
}

@keyframes driftCloud1 {
    0% { transform: translateX(0); }
    100% { transform: translateX(18px); }
}

@keyframes driftCloud2 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-16px); }
}

.franck-banner-text-cta__banner--404 .franck-banner-text-cta__block-title {
    text-align: center !important;
    margin: 0 0 12px 0 !important;
}

.franck-banner-text-cta__banner--404 .franck-banner-text-cta__block-subtitle {
    text-align: center !important;
    margin: 0 0 12px 0 !important;
}

.franck-banner-text-cta__banner--404 .franck-banner-text-cta__block-text {
    text-align: center !important;
    margin: 0 0 24px 0 !important;
}

.franck-banner-text-cta__banner--404 .franck-banner-text-cta__button-wrap {
    justify-content: center !important;
    display: flex !important;
    margin: 0 auto !important;
    width: 100% !important;
}