/* ============================================================================
   FRANCK SLIDER BANNER CTA
   Slider de bannières CTA — 1 média (image) par slide + contenu superposé.
   Préfixes :
     - BEM : franck-slider-banner-cta
     - Variables CSS : --fk-*
     - Animation : fbtc-anim
   ============================================================================ */

.franck-slider-banner-cta-wrapper {
    width: 100%;
}

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

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

.franck-slider-banner-cta-wrapper--container .franck-slider-banner-cta {
    border-radius: var(--fk-section-radius, var(--theme-section-container-radius, 18px));
    overflow: hidden;
}

.franck-slider-banner-cta {
    position: relative;
    width: 100%;
    overflow: hidden;
    min-height: var(--fk-section-height, auto);
    font-family: var(--theme-text-font, 'Work Sans', sans-serif);
}

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

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

.franck-slider-banner-cta__section-media img,
.franck-slider-banner-cta__section-media video,
.franck-slider-banner-cta__section-media iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
}

/* ====== BEGIN — Refactor images (WebP + multi-tailles) ======
   L'image background section peut être enveloppée dans <picture>.
   On force le <picture> en bloc plein cadre, son <img> hérite du comportement. */
.franck-slider-banner-cta__section-media picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.franck-slider-banner-cta__section-media picture > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* ====== END — Refactor images ====== */

.franck-slider-banner-cta__inner {
    position: relative;
    z-index: 2;
    width: var(--fk-density-width, 86%);
    /* PASSE C — plafond canonique par densité (1140/1320/none/none), remplace
       l'ancien plafond unique 1680px partagé par compact/normal/large (mesuré
       comme rendant ces trois densités quasi identiques sur grand écran). */
    max-width: var(--fk-density-max, 1320px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--fk-content-padding-x, 0);
    padding-right: var(--fk-content-padding-x, 0);
}

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

.franck-slider-banner-cta--xxl .franck-slider-banner-cta__slider {
    border-radius: var(--fk-card-radius, var(--theme-card-radius, 28px));
}

.franck-slider-banner-cta__header {
    max-width: 980px;
    margin-bottom: var(--fk-header-gap, 30px);
}

.franck-slider-banner-cta__title {
    margin: 0;
    /* ÉCART 1 (2026-08-07) — text-align déplacé du wrapper __header (variable unique
       --fk-title-position, retirée) vers chaque élément (calque franck-cards-static). */
    text-align: var(--fk-title-align, left);
    color: var(--fk-title-color, var(--theme-section-title-color, #2c2c2c));
    font-size: var(--fk-title-size, var(--theme-title-size, 32px));
    line-height: 1.15;
    font-weight: var(--theme-title-weight, 600);
    letter-spacing: -0.025em;
    font-family: var(--theme-title-font, 'Jost', sans-serif);
}

/* --- Badge / pré-titre (pilule) — SECTION (AJOUT 2026-08-06). Classe
   dédiée __eyebrow-section : .franck-slider-banner-cta__eyebrow est déjà
   utilisée par le sur-titre PAR SLIDE (contentEyebrow) plus bas dans ce
   fichier — même précédent que franck-banner-text-cta (__eyebrow-section).
   display:table (pas inline-block) pour que margin puisse centrer/aligner
   un élément qui se rétrécit à son contenu (cf. --fk-eyebrow-margin calculé
   par le renderer/Twig). Convention marge "bannière" (0 0 12px 0 / 0 auto
   12px auto / 0 0 12px auto) car .franck-slider-banner-cta__header n'est
   PAS display:flex + gap (contrairement à franck-cards-static). */
.franck-slider-banner-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);
    align-self: flex-start;
    color: var(--fk-eyebrow-color, var(--theme-eyebrow-color, #7c7c7c));
    font-size: var(--fk-eyebrow-size, var(--theme-eyebrow-size, 13px));
    font-weight: var(--theme-eyebrow-weight, 700);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Marge 16px : ÉCART assumé vs franck-cards-static (2026-08-12).
   La référence met margin:0 sur __subtitle et rien sur __section-text
   parce que son .__header est display:flex + gap:14px, qui assure
   l'espacement. Ici .__header (l.106-109) est un bloc simple SANS flex ni
   gap : ce sont les marges des enfants qui espacent l'entête. Passer à 0
   collerait badge, titre, sous-titre et texte. Même raison que la marge
   "bannière" du badge, cf. commentaire l.130-132. */
.franck-slider-banner-cta__subtitle {
    margin: 16px 0 0;
    text-align: var(--fk-subtitle-align, left);
    color: var(--fk-subtitle-color, var(--theme-section-subtitle-color, #2c2c2c));
    font-size: var(--fk-subtitle-size, var(--theme-subtitle-size, 18px));
    line-height: 1.45;
    font-weight: var(--theme-subtitle-weight, 500);
}

.franck-slider-banner-cta__section-text {
    margin: 16px 0 0;
    /* ÉCART 1 (2026-08-07) — --fk-section-text-align, PAS --fk-text-align : cette
       dernière est déjà prise par l'alignement du texte DANS chaque slide plus bas
       dans ce fichier (.franck-slider-banner-cta__content). */
    text-align: var(--fk-section-text-align, left);
    color: var(--fk-section-text-color, var(--theme-section-text-color, #2c2c2c));
    font-size: var(--fk-section-text-size, var(--theme-text-size, 16px));
    line-height: 1.55;
}

.franck-slider-banner-cta__section-text > *:first-child { margin-top: 0; }
.franck-slider-banner-cta__section-text > *:last-child  { margin-bottom: 0; }

.franck-slider-banner-cta__slider {
    position: relative;
    width: 100%;
    /* Ratio (et non hauteur fixe) -> la hauteur suit la largeur :
       même cadrage en preview et sur le front, et responsive à toutes les tailles.
       --fk-card-ratio est calculé depuis les dimensions de l'image. */
    aspect-ratio: var(--fk-card-ratio, 1000 / 320);
    border-radius: var(--fk-card-radius, var(--theme-card-radius, 28px));
    overflow: hidden;
    box-shadow: var(--fk-card-shadow, none);
}

.franck-slider-banner-cta__slides {
    position: relative;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
}

.franck-slider-banner-cta__slide {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
    background: var(--fk-slide-bg, #f1f5ff);
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s ease;
}

.franck-slider-banner-cta__slide.is-active {
    position: relative;
    height: 100%;
    z-index: 1;
    opacity: 1;
    pointer-events: auto;
}

.franck-slider-banner-cta__slide-link {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: block;
    text-decoration: none;
}

/* === Média du slide — 2 modes par slide (cf. franck-search-engine-banner) ===
   - Mode "cover"   : l'image remplit le slide, recadrage via déplacement + zoom.
   - Mode "original": l'image à sa taille naturelle, centrée, déplaçable + zoomable.
   Déplacement (--fk-media-pan-x/y) et zoom (--fk-media-zoom) sont appliqués
   via transform (translate + scale) — fiable dans les deux modes. */
.franck-slider-banner-cta__banner-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    height: 100%;
    /* Fond visible quand l'image (mode "taille originale") est plus petite que le slide */
    background: var(--fk-slide-bg, #ffffff);
    border-radius: inherit;
    overflow: hidden;
}

/* =====================  MODE COVER  =====================
   L'image remplit tout le slide (object-fit: cover). Le déplacement (translate)
   et le zoom (scale) servent à recadrer ; overflow:hidden coupe le débord. */
.franck-slider-banner-cta__slide--mode-cover .franck-slider-banner-cta__banner-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform:
        translate(var(--fk-media-pan-x, 0px), var(--fk-media-pan-y, 0px))
        scale(var(--fk-media-zoom, 1));
    transform-origin: center center;
    display: block;
    border: 0;
}

/* =====================  MODE TAILLE ORIGINALE  =====================
   L'image est posée à sa taille naturelle, centrée. Le zoom (scale) la
   réduit/agrandit, le déplacement (translate) la bouge dans le slide.
   Si elle est plus petite que le slide -> la couleur de fond du slide apparaît. */
.franck-slider-banner-cta__slide--mode-original .franck-slider-banner-cta__banner-media img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    object-fit: initial;
    transform:
        translate(-50%, -50%)
        translate(var(--fk-media-pan-x, 0px), var(--fk-media-pan-y, 0px))
        scale(var(--fk-media-zoom, 1));
    transform-origin: center center;
    display: block;
    border: 0;
}

.franck-slider-banner-cta__banner-placeholder {
    width: 100%;
    height: 100%;
    display: block;
    background: rgba(0, 120, 56, .14);
}

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

.franck-slider-banner-cta__content {
    position: relative;
    z-index: 3;
    height: 100%;
    max-width: 760px;
    display: flex;
    align-items: center;
    padding: var(--fk-card-padding, 42px);
    text-align: var(--fk-text-align, left);
    transform: translate(var(--fk-text-x, 0px), var(--fk-text-y, 0px));
}

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

.franck-slider-banner-cta__eyebrow {
    color: var(--fk-block-subtitle-color, var(--theme-block-subtitle-color, #ffffff));
    font-size: calc(var(--fk-block-text-size, 18px) * .72);
    line-height: 1.2;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: var(--theme-eyebrow-weight, 700);
    margin: 0 0 22px;
}

.franck-slider-banner-cta__block-title {
    color: var(--fk-block-title-color, var(--theme-block-title-color, #ffffff));
    font-size: var(--fk-block-title-size, 48px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: var(--theme-card-title-weight, 600);
    margin: 0 0 20px;
    font-family: var(--theme-title-font, 'Jost', sans-serif);
}

.franck-slider-banner-cta__block-subtitle {
    color: var(--fk-block-subtitle-color, var(--theme-block-subtitle-color, #ffffff));
    font-size: calc(var(--fk-block-text-size, 18px) * 1.15);
    line-height: 1.35;
    font-weight: var(--theme-card-subtitle-weight, 500);
    margin: 0 0 18px;
    font-family: var(--theme-title-font, 'Jost', sans-serif);
}

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

.franck-slider-banner-cta__block-text > *:first-child { margin-top: 0; }
.franck-slider-banner-cta__block-text > *:last-child  { margin-bottom: 0; }

.franck-slider-banner-cta__price {
    color: var(--fk-price-color, var(--theme-price-color, #ffffff));
    font-size: var(--fk-price-size, 38px);
    line-height: 1;
    font-weight: 800;
}

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

.franck-slider-banner-cta__button-wrap {
    display: flex;
    margin-top: 28px;
}

.franck-slider-banner-cta__button-wrap--center {
    justify-content: center;
}

.franck-slider-banner-cta__button-wrap--right {
    justify-content: flex-end;
}

.franck-slider-banner-cta__button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0 22px;
    background: var(--fk-button-bg, var(--maurin-primary, #2a6d47));
    color: var(--fk-button-color, #ffffff);
    font-weight: var(--theme-button-font-weight, 600);
    text-decoration: none;
    pointer-events: none;
    font-family: var(--theme-button-font, 'Work Sans', sans-serif);
}

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

/* --- Bouton d'entête de section (AJOUT 2026-08-06) — distinct de
   .__button (bouton PAR SLIDE, pointer-events:none car le clic est porté
   par le lien plein-cadre du slide, cf. plus haut). Réutilise
   --fk-button-bg / --fk-button-color / --fk-button-hover-bg : choix
   conservateur documenté au rapport, les deux boutons partagent donc
   la même apparence et les mêmes réglages de couleur. --- */
.franck-slider-banner-cta__header-button-wrap {
    display: flex;
    justify-content: var(--fk-button-align, flex-start);
    margin-top: 24px;
}

.franck-slider-banner-cta__header-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--theme-button-height, 48px);
    padding: 0 var(--theme-button-padding-x, 22px);
    border-radius: var(--theme-button-radius, 999px);
    background: var(--fk-button-bg, var(--maurin-primary, #2a6d47));
    color: var(--fk-button-color, #ffffff);
    font-family: var(--theme-button-font, 'Work Sans', sans-serif);
    font-size: var(--theme-button-font-size, 15px);
    font-weight: var(--theme-button-font-weight, 600);
    text-decoration: none;
    transition: background .25s ease, color .25s ease, transform .25s ease;
    cursor: pointer;
}

.franck-slider-banner-cta__header-button:hover {
    background: var(--fk-button-hover-bg, var(--maurin-secondary, #3c9a65));
    color: var(--fk-button-color, #ffffff);
    transform: translateY(-1px);
}

/* --- Footer (bouton d'entête placé sous le slider, si "Emplacement bouton"
   = footer, AJOUT 2026-08-06) --- */
.franck-slider-banner-cta__footer {
    margin-top: var(--fk-header-gap, 30px);
}

.franck-slider-banner-cta__indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
}

.franck-slider-banner-cta__indicator {
    appearance: none;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 999px;
    background: var(--fk-indicator-bg, rgba(255,255,255,.58)) !important;
    background-color: var(--fk-indicator-bg, rgba(255,255,255,.58)) !important;
    cursor: pointer;
    padding: 0;
    transition: width .25s ease, background .25s ease, box-shadow .25s ease;
}

.franck-slider-banner-cta__indicator.is-active {
    width: 50px;
    background: var(--fk-indicator-active-bg, #ffffff) !important;
    background-color: var(--fk-indicator-active-bg, #ffffff) !important;
}

.franck-slider-banner-cta__indicator:focus-visible {
    outline: 2px solid var(--maurin-primary, #2a6d47);
    outline-offset: 4px;
}

.franck-slider-banner-cta .fbtc-anim--fade,
.franck-slider-banner-cta .fbtc-anim--fade-up,
.franck-slider-banner-cta .fbtc-anim--zoom {
    animation-duration: var(--fk-animation-duration, 700ms);
    animation-delay: var(--fk-animation-delay, 0ms);
    animation-fill-mode: both;
}

.franck-slider-banner-cta .fbtc-anim--fade {
    animation-name: fsbtcFade;
}

.franck-slider-banner-cta .fbtc-anim--fade-up {
    animation-name: fsbtcFadeUp;
}

.franck-slider-banner-cta .fbtc-anim--zoom {
    animation-name: fsbtcZoom;
}

@keyframes fsbtcFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fsbtcFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fsbtcZoom {
    from { opacity: 0; transform: scale(.96); }
    to { opacity: 1; transform: scale(1); }
}

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

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

    .franck-slider-banner-cta__content {
        max-width: 100%;
        padding: 28px;
    }

    .franck-slider-banner-cta__block-title {
        font-size: clamp(28px, 7vw, var(--fk-block-title-size, 48px));
    }
}

@media (max-width: 767px) {
    .franck-slider-banner-cta-wrapper--full {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .franck-slider-banner-cta__inner {
        padding-left: 16px;
        padding-right: 16px;
    }

    .franck-slider-banner-cta__slider {
        aspect-ratio: auto !important;
        min-height: 280px;
    }

    .franck-slider-banner-cta__content {
        padding: 20px 16px;
    }

    .franck-slider-banner-cta__block-title {
        font-size: clamp(20px, 5.5vw, 28px);
    }

    .franck-slider-banner-cta__price {
        font-size: 26px;
    }

    .franck-slider-banner-cta__button {
        min-height: 44px;
        touch-action: manipulation;
    }

    .franck-slider-banner-cta__header-button {
        width: 100%;
        min-height: 48px;
        justify-content: center;
        touch-action: manipulation;
    }

    .franck-slider-banner-cta__indicator {
        width: 16px;
        height: 16px;
        touch-action: manipulation;
    }

    .franck-slider-banner-cta__indicator.is-active {
        width: 48px;
    }
}

@media (max-width: 575px) {
    .franck-slider-banner-cta__indicator {
        width: 14px;
        height: 14px;
    }

    .franck-slider-banner-cta__indicator.is-active {
        width: 42px;
    }
}


/* Container mode : on garde le .container Bootstrap par défaut
   (alignement avec les autres composants Maurin). La largeur du contenu
   est pilotee par l'inner selon la densite. */

.franck-slider-banner-cta__slider,
.franck-slider-banner-cta__slides,
.franck-slider-banner-cta__slide,
.franck-slider-banner-cta__banner-media {
    border-radius: var(--fk-card-radius, var(--theme-card-radius, 28px)) !important;
    overflow: hidden !important;
}

.franck-slider-banner-cta__banner-placeholder {
    border-radius: inherit !important;
}

/* === Largeur ===
   Full width : le wrapper occupe déjà toute la largeur disponible avec width:100%
   (mesuré à 2016px sur une fenêtre de 2016px, 2026-08-06). 100vw est donc inutile
   et introduirait une incompatibilité avec la preview builder, qui est scalée.
   La largeur du CONTENU est fixée par les plafonds de densité de __inner
   (--fk-density-width : 72%/86%/calc(100% - 48px)/100%, plafonnés par
   --fk-density-max : 1140/1320/none/none), pas par cette règle. */
.franck-slider-banner-cta-wrapper--full {
    width: 100%;
}

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

.franck-slider-banner-cta-wrapper--density-xxl .franck-slider-banner-cta__slider,
.franck-slider-banner-cta-wrapper--density-xxl .franck-slider-banner-cta__slides,
.franck-slider-banner-cta-wrapper--density-xxl .franck-slider-banner-cta__slide,
.franck-slider-banner-cta-wrapper--density-xxl .franck-slider-banner-cta__banner-media {
    width: 100% !important;
}

/* === Cadre du slider : arrondi + clipping (le cadre clippe l'image en cover/original) === */
.franck-slider-banner-cta__slider,
.franck-slider-banner-cta__slides,
.franck-slider-banner-cta__slide,
.franck-slider-banner-cta__banner-media {
    border-radius: var(--fk-card-radius, var(--theme-card-radius, 28px)) !important;
    overflow: hidden !important;
}

.franck-slider-banner-cta__indicator {
    background: var(--fk-indicator-bg, rgba(255,255,255,.58)) !important;
}

.franck-slider-banner-cta__indicator.is-active {
    background: var(--fk-indicator-active-bg, #ffffff) !important;
}

/* =====================  BUILDER : preview à 75%  =====================
   Le renderer enveloppe la section dans :
     .franck-slider-banner-cta-scale-outer
       └─ .franck-slider-banner-cta-scale-inner (transform:scale(.75); width:133.33%)
            └─ .franck-slider-banner-cta-preview-container (simule .container Bootstrap)
                └─ .franck-slider-banner-cta-wrapper(--full|--container)
                    └─ section…

   On simule manuellement la largeur d'un .container Bootstrap (largeurs ÷ 0.75)
   pour que le rendu preview corresponde strictement au rendu front. */
.franck-slider-banner-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;
}

@media (max-width: 1399.98px) { .franck-slider-banner-cta-preview-container { max-width: 1520px; } } /* 1140/.75 */
@media (max-width: 1199.98px) { .franck-slider-banner-cta-preview-container { max-width: 1280px; } } /* 960/.75  */
@media (max-width: 991.98px)  { .franck-slider-banner-cta-preview-container { max-width: 960px;  } } /* 720/.75  */
@media (max-width: 767.98px)  { .franck-slider-banner-cta-preview-container { max-width: 720px;  } } /* 540/.75  */
@media (max-width: 575.98px)  { .franck-slider-banner-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-slider-banner-cta-scale-outer .franck-slider-banner-cta-wrapper--full,
.is-builder-preview .franck-slider-banner-cta-wrapper--full {
    width: 100% !important;
    margin-left: 0 !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

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

/* En preview, l'inner suit la densité (comme le front) : largeur var(--fk-density-width)
   plafonnée par var(--fk-density-max) (1140/1320/none/none selon densité), centré.
   Aucune surcharge nécessaire ici. */