/* ============================================================================
   FRANCK BANNER TWO BUTTONS
   Bannière étroite en hauteur avec 2 boutons : 1 plein + 1 ghost (transparent).
   Préfixes :
     - BEM : franck-banner-two-buttons
     - Variables CSS : --fk-*
     - Animation : fbtb-anim
   ============================================================================ */

/* =====================  VARIABLES PAR DÉFAUT (fallbacks câblés tokens)  ===================== */
.franck-banner-two-buttons {
    /* Layout */
    --fk-density-width: 86%;
    --fk-header-gap: 24px;
    --fk-content-padding-x: 0px;

    /* Médias background */
    --fk-image-object-fit: cover;
    /* CORRECTIF 3 (2026-08) : décalage en % (object-position), plus en px
       (translate). Défaut 50% = centre. Voir mécanisme dans la règle
       __section-media ci-dessous. */
    --fk-media-offset-x: 50%;
    --fk-media-offset-y: 50%;
    --fk-media-zoom: 1;
    --fk-overlay: transparent;

    /* Entête (optionnelle) — CORRECTIF 2 (2026-08) : alignés sur
       franck-cards-static (left), le defaultConfig du renderer valant déjà
       'left' pour les 4 positions d'entête. */
    --fk-eyebrow-align: left;
    --fk-title-align: left;
    --fk-subtitle-align: left;
    --fk-text-align: left;

    --fk-eyebrow-color: var(--theme-eyebrow-color, #7c7c7c);
    --fk-eyebrow-size: var(--theme-eyebrow-size, 13px);
    /* FBTB_BADGE_VARS : badge pilule (point 4 de la passe B) */
    --fk-eyebrow-border-width: 1px;
    --fk-eyebrow-border-color: var(--theme-button-bg, var(--maurin-primary, #1cb359));
    --fk-eyebrow-radius: 999px;
    --fk-eyebrow-bg: transparent;
    --fk-eyebrow-align-self: flex-start;
    --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, #2c2c2c);
    --fk-subtitle-size: var(--theme-subtitle-size, 20px);
    --fk-section-text-color: var(--theme-section-text-color, #2c2c2c);
    --fk-section-text-size: var(--theme-text-size, 16px);

    /* Boutons : groupe */
    --fk-buttons-align: center;
    --fk-buttons-gap: 16px;
    --fk-button-radius: var(--theme-button-radius, 999px);

    /* Bouton 1 (plein) */
    --fk-btn1-bg: var(--theme-button-bg, #2a6d47);
    --fk-btn1-color: var(--theme-button-text-color, #ffffff);
    --fk-btn1-bg-hover: var(--theme-button-bg-hover, #3c9a65);
    --fk-btn1-color-hover: #ffffff;
    --fk-btn1-size: var(--theme-button-font-size, 15px);

    /* Bouton 2 (ghost) — repos transparent, bordure+texte = couleur texte */
    --fk-btn2-border: var(--theme-text-color, #212221);
    --fk-btn2-color: var(--theme-text-color, #212221);
    --fk-btn2-bg-hover: var(--theme-button-bg, #2a6d47);
    --fk-btn2-color-hover: var(--theme-button-text-color, #ffffff);
    --fk-btn2-size: var(--theme-button-font-size, 15px);

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

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

/* Full width : sort du container parent */
.franck-banner-two-buttons-wrapper--full {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* Arrondi conditionné au mode de largeur : pas d'arrondi en full width,
   arrondi du thème en mode container (CONTEXT.md — règle établie 2026-07-29,
   généralisée 2026-07-30 ; appliquée ici en passe C, point 4).
   overflow:hidden reste inconditionnel sur la règle de base ci-dessous : il
   contient le média de fond en position:absolute. */
.franck-banner-two-buttons-wrapper--container .franck-banner-two-buttons {
    border-radius: var(--fk-section-radius, var(--theme-section-container-radius, 18px));
    overflow: hidden;
}

/* =====================  SECTION  ===================== */
.franck-banner-two-buttons {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    /* Centrage vertical du contenu quand une hauteur de section est définie */
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    font-family: var(--theme-text-font, sans-serif);
    color: var(--theme-text-color, #212221);
}

/* =====================  SECTION MEDIA (background)  ===================== */
.franck-banner-two-buttons__section-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.franck-banner-two-buttons__section-media img,
.franck-banner-two-buttons__section-media video,
.franck-banner-two-buttons__section-media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--fk-image-object-fit, cover);
    /* CORRECTIF 3 (2026-08) : object-position recadre sans couper l'image ;
       translate() la déplaçait hors de son cadre. Voir
       franck-two-lines-img-text.css l.313-320 (mécanisme équivalent au
       niveau des cards, ici porté au média de fond de section). */
    object-position: var(--fk-media-offset-x, 50%) var(--fk-media-offset-y, 50%);
    transform: scale(var(--fk-media-zoom, 1));
    transform-origin: center center;
}
/* Image nouveau format : enveloppée dans <picture> */
.franck-banner-two-buttons__section-media picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.franck-banner-two-buttons__section-media picture > img {
    width: 100%;
    height: 100%;
    object-fit: var(--fk-image-object-fit, cover);
    /* CORRECTIF 3 (2026-08) : object-position recadre sans couper l'image ;
       translate() la déplaçait hors de son cadre. Voir
       franck-two-lines-img-text.css l.313-320 (mécanisme équivalent au
       niveau des cards, ici porté au média de fond de section). */
    object-position: var(--fk-media-offset-x, 50%) var(--fk-media-offset-y, 50%);
    transform: scale(var(--fk-media-zoom, 1));
    transform-origin: center center;
}
.franck-banner-two-buttons__section-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--fk-overlay, transparent);
    pointer-events: none;
}

/* =====================  INNER (densité)  ===================== */
.franck-banner-two-buttons__inner {
    position: relative;
    z-index: 1;
    width: var(--fk-density-width, 86%);
    max-width: 1680px;
    margin: 0 auto;
    padding-left: var(--fk-content-padding-x, 0);
    padding-right: var(--fk-content-padding-x, 0);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--fk-header-gap, 24px);
}
.franck-banner-two-buttons--compact .franck-banner-two-buttons__inner { max-width: 1140px; }
.franck-banner-two-buttons--normal  .franck-banner-two-buttons__inner { max-width: 1320px; }
.franck-banner-two-buttons--large   .franck-banner-two-buttons__inner { max-width: none; }
.franck-banner-two-buttons--xxl     .franck-banner-two-buttons__inner { max-width: none; width: 100%; }

/* =====================  HEADER (présentation, optionnel)  ===================== */
.franck-banner-two-buttons__header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* FBTB_BADGE_PILL_CSS : badge en forme de pilule (point 4 de la passe B, porté
   depuis franck-two-lines-img-text). Le header parent est display:flex en
   colonne (voir __header ci-dessus) : align-self pilote la position du badge,
   pas une marge calculée (--fk-eyebrow-margin n'est pas utilisé ici). */
.franck-banner-two-buttons__eyebrow {
    display: table;
    margin: 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: var(--fk-eyebrow-align-self, flex-start);
    text-align: var(--fk-eyebrow-align, center);
    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));
    font-weight: var(--theme-eyebrow-weight, 600);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.franck-banner-two-buttons__title {
    margin: 0;
    text-align: var(--fk-title-align, center);
    font-family: var(--theme-title-font, 'Jost', sans-serif);
    color: var(--fk-title-color, var(--theme-section-title-color, #2c2c2c));
    font-size: var(--fk-title-size, var(--theme-title-size, 48px));
    font-weight: var(--fk-title-weight, var(--theme-title-weight, 600));
    line-height: 1.15;
}
.franck-banner-two-buttons__subtitle {
    margin: 0;
    text-align: var(--fk-subtitle-align, center);
    color: var(--fk-subtitle-color, var(--theme-section-subtitle-color, #2c2c2c));
    font-size: var(--fk-subtitle-size, var(--theme-subtitle-size, 20px));
    line-height: 1.45;
    font-weight: var(--fk-subtitle-weight, var(--theme-subtitle-weight, 500));
}
.franck-banner-two-buttons__section-text {
    text-align: var(--fk-text-align, center);
    color: var(--fk-section-text-color);
    font-size: var(--fk-section-text-size, 16px);
    line-height: 1.55;
}
.franck-banner-two-buttons__section-text > *:first-child { margin-top: 0; }
.franck-banner-two-buttons__section-text > *:last-child  { margin-bottom: 0; }

/* =====================  GROUPE DE BOUTONS  ===================== */
.franck-banner-two-buttons__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: var(--fk-buttons-align, center);
    gap: var(--fk-buttons-gap, 16px);
}

/* Base commune des 2 boutons */
.franck-banner-two-buttons__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(--fk-button-radius, 999px);
    font-family: var(--theme-button-font, sans-serif);
    font-weight: var(--theme-button-font-weight, 600);
    text-decoration: none;
    border: 2px solid transparent;
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
    cursor: pointer;
    box-sizing: border-box;
}
.franck-banner-two-buttons__button:hover { transform: translateY(-1px); }

/* Bouton 1 : plein */
.franck-banner-two-buttons__button--primary {
    background: var(--fk-btn1-bg);
    color: var(--fk-btn1-color);
    border-color: var(--fk-btn1-bg);
    font-size: var(--fk-btn1-size, 15px);
}
.franck-banner-two-buttons__button--primary:hover {
    background: var(--fk-btn1-bg-hover);
    color: var(--fk-btn1-color-hover);
    border-color: var(--fk-btn1-bg-hover);
}

/* Bouton 2 : ghost (transparent + bordure). Au survol : se remplit. */
.franck-banner-two-buttons__button--ghost {
    background: transparent;
    color: var(--fk-btn2-color);
    border-color: var(--fk-btn2-border);
    font-size: var(--fk-btn2-size, 15px);
}
.franck-banner-two-buttons__button--ghost:hover {
    background: var(--fk-btn2-bg-hover);
    color: var(--fk-btn2-color-hover);
    border-color: var(--fk-btn2-bg-hover);
}

/* =====================  RESPONSIVE (auto)  ===================== */
@media (max-width: 1024px) {
    .franck-banner-two-buttons__title { font-size: calc(var(--fk-title-size, var(--theme-title-size, 48px)) * 0.82); }
}
@media (max-width: 640px) {
    .franck-banner-two-buttons__title    { font-size: calc(var(--fk-title-size, var(--theme-title-size, 48px)) * 0.7); }
    .franck-banner-two-buttons__subtitle { font-size: calc(var(--fk-subtitle-size, var(--theme-subtitle-size, 20px)) * 0.92); }
    /* Boutons en colonne pleine largeur sur très petit écran */
    .franck-banner-two-buttons__buttons { flex-direction: column; align-items: stretch; }
    .franck-banner-two-buttons__button  { width: 100%; }
}

/* =====================  ANIMATIONS  ===================== */
.fbtb-anim {
    opacity: 0;
    transition: opacity var(--fk-animation-duration, 600ms) ease,
                transform var(--fk-animation-duration, 600ms) ease;
    transition-delay: var(--fk-animation-delay, 0ms);
    will-change: opacity, transform;
}
.fbtb-anim--none      { opacity: 1; }
.fbtb-anim--fade      { opacity: 0; }
.fbtb-anim--fade-up   { opacity: 0; transform: translateY(30px); }
.fbtb-anim--fade-down { opacity: 0; transform: translateY(-30px); }
.fbtb-anim--fade-left { opacity: 0; transform: translateX(-30px); }
.fbtb-anim--fade-right{ opacity: 0; transform: translateX(30px); }
.fbtb-anim--zoom      { opacity: 0; transform: scale(0.95); }
.fbtb-anim--visible   { opacity: 1; transform: translate(0,0) scale(1); }

/* =====================  BUILDER : preview à 75%  =====================
   Le renderer enveloppe la section dans :
     .franck-banner-two-buttons-scale-outer
       └─ .franck-banner-two-buttons-scale-inner (transform:scale(.75); width:133.33%)
            └─ [.franck-banner-two-buttons-preview-container si container]
                └─ .franck-banner-two-buttons-wrapper(--full|--container)
                    └─ section…  */
.franck-banner-two-buttons-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-banner-two-buttons-preview-container { max-width: 1520px; } }
@media (max-width: 1199.98px) { .franck-banner-two-buttons-preview-container { max-width: 1280px; } }
@media (max-width: 991.98px)  { .franck-banner-two-buttons-preview-container { max-width: 960px;  } }
@media (max-width: 767.98px)  { .franck-banner-two-buttons-preview-container { max-width: 720px;  } }
@media (max-width: 575.98px)  { .franck-banner-two-buttons-preview-container { max-width: 100%;   } }

/* Neutralisation du 100vw du wrapper--full dans le preview :
   il doit remplir la zone preview, pas la viewport réelle. */
.franck-banner-two-buttons-scale-outer .franck-banner-two-buttons-wrapper--full,
.is-builder-preview .franck-banner-two-buttons-wrapper--full {
    width: 100%;
    margin-left: 0;
    max-width: 100%;
}
.franck-banner-two-buttons-scale-inner { box-sizing: border-box; }