/* ============================================================================
   FRANCK TWO COLUMNS RIGHT PICTURE TEXT CTA
   Bloc 2 colonnes (texte/CTA à gauche + media à droite), pleine largeur ou
   container, avec header section optionnel (eyebrow, titre, sous-titre,
   texte, bouton) au-dessus ou en-dessous du bloc.

   Préfixes :
     - BEM : franck-two-columns-right-picture-text-cta
     - Variables CSS : --fk-*
     - Animation : f2crptc-anim
   ============================================================================ */

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

    /* Médias background section */
    --fk-image-object-fit: cover;
    --fk-media-offset-x: 0px;
    --fk-media-offset-y: 0px;
    --fk-media-zoom: 1;
    --fk-overlay: transparent;

    /* Entête section */
    --fk-eyebrow-align: left;
    --fk-title-align: left;
    --fk-subtitle-align: left;
    --fk-text-align: left;
    --fk-button-align: flex-start;

    --fk-eyebrow-color: var(--theme-eyebrow-color, #7c7c7c);
    --fk-eyebrow-size: var(--theme-eyebrow-size, 13px);
    --fk-title-color: var(--theme-section-title-color, #2c2c2c);
    --fk-title-size: var(--theme-title-size, 42px);
    --fk-subtitle-color: var(--theme-section-subtitle-color, #2c2c2c);
    --fk-subtitle-size: var(--theme-subtitle-size, 18px);
    --fk-section-text-color: var(--theme-section-text-color, #2c2c2c);
    --fk-section-text-size: var(--theme-text-size, 16px);

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

    /* Bloc 2 colonnes (équivalent "card" mono-élément du cards-static) */
    --fk-card-radius: var(--theme-card-radius, 24px);
    --fk-card-bg: var(--theme-card-background, #f1f5ff);
    --fk-card-height: 520px;
    --fk-card-shadow: none;
    --fk-card-border-color: var(--theme-card-border-color, transparent);
    --fk-card-border-width: 0px;

    /* Ratio media / texte (slider 1..3, texte = 4 - media) */
    --fk-media-ratio: 2fr;
    --fk-text-ratio: 2fr;

    /* Media du bloc */
    --fk-image-fit: cover;
    --fk-image-radius: var(--theme-image-radius, var(--fk-card-radius, 24px));
    --fk-image-padding: 0px;
    --fk-image-bg: transparent;
    --fk-image-offset-x: 0px;
    --fk-image-offset-y: 0px;

    /* Padding intérieur de la text-card */
    --fk-card-padding: 42px;

    /* Textes du bloc */
    --fk-block-title-color: var(--theme-block-title-color, #2c2c2c);
    --fk-block-title-size: 38px;
    --fk-block-subtitle-color: var(--theme-block-subtitle-color, #2c2c2c);
    --fk-block-subtitle-size: 18px;
    --fk-block-text-color: var(--theme-block-text-color, #2c2c2c);
    --fk-block-text-size: 22px;

    /* Bouton du bloc */
    --fk-block-button-bg: var(--theme-button-bg, #2a6d47);
    --fk-block-button-color: var(--theme-button-text-color, #ffffff);
    --fk-block-button-bg-hover: var(--theme-button-bg-hover, #3c9a65);
    --fk-block-button-color-hover: var(--theme-button-text-hover, #ffffff);
    --fk-block-button-size: 15px;
    --fk-block-button-radius: var(--theme-button-radius, 999px);
    --fk-block-button-height: 48px;
    --fk-block-button-padding-x: 22px;

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

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

/* Full width : sort du container parent (live front) */
.franck-two-columns-right-picture-text-cta-wrapper--full {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
}

/* 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). overflow:hidden reste inconditionnel sur la
   règle de base ci-dessous : il contient le média de fond en position
   absolute. */
.franck-two-columns-right-picture-text-cta-wrapper--container .franck-two-columns-right-picture-text-cta {
    border-radius: var(--fk-section-radius, var(--theme-section-container-radius, 18px));
    overflow: hidden;
}

/* =====================  SECTION  ===================== */
.franck-two-columns-right-picture-text-cta {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    font-family: var(--theme-text-font, 'Work Sans', sans-serif);
    color: var(--theme-text-color, #2c2c2c);
}

/* =====================  MEDIA BACKGROUND SECTION  ===================== */
.franck-two-columns-right-picture-text-cta__section-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.franck-two-columns-right-picture-text-cta__section-media img,
.franck-two-columns-right-picture-text-cta__section-media video,
.franck-two-columns-right-picture-text-cta__section-media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--fk-image-object-fit, cover);
    transform: translate(var(--fk-media-offset-x, 0), var(--fk-media-offset-y, 0)) scale(var(--fk-media-zoom, 1));
    transform-origin: center center;
}
/* Picture wrappers du nouveau pipeline images */
.franck-two-columns-right-picture-text-cta__section-media picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.franck-two-columns-right-picture-text-cta__section-media picture > img {
    width: 100%;
    height: 100%;
    object-fit: var(--fk-image-object-fit, cover);
    transform: translate(var(--fk-media-offset-x, 0), var(--fk-media-offset-y, 0)) scale(var(--fk-media-zoom, 1));
    transform-origin: center center;
}
/* YouTube : couvrir entièrement la zone */
.franck-two-columns-right-picture-text-cta__section-media iframe {
    top: 50%;
    left: 50%;
    width: 240%;
    height: 240%;
    inset: auto;
    transform: translate(-50%, -50%) scale(1.08);
    border: 0;
    pointer-events: none;
    filter: brightness(.78);
}
.franck-two-columns-right-picture-text-cta__section-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--fk-overlay, transparent);
    pointer-events: none;
}

/* =====================  INNER (densité)  ===================== */
.franck-two-columns-right-picture-text-cta__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;
}

.franck-two-columns-right-picture-text-cta--compact .franck-two-columns-right-picture-text-cta__inner { max-width: 1140px; }
.franck-two-columns-right-picture-text-cta--normal  .franck-two-columns-right-picture-text-cta__inner { max-width: 1320px; }
.franck-two-columns-right-picture-text-cta--large   .franck-two-columns-right-picture-text-cta__inner { max-width: none; }
.franck-two-columns-right-picture-text-cta--xxl     .franck-two-columns-right-picture-text-cta__inner { max-width: none; width: 100%; }

/* =====================  HEADER (présentation section)  ===================== */
.franck-two-columns-right-picture-text-cta__header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: var(--fk-header-gap, 30px);
}

/* F2CRPTC_BADGE_PILL : badge en forme de pilule.
   display:table (pas inline-block) pour que la marge calculee (--fk-eyebrow-margin,
   voir renderer JS/Twig) puisse centrer/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. --fk-eyebrow-align/text-align conserve (piloté ailleurs). */
.franck-two-columns-right-picture-text-cta__eyebrow {
    display: table;
    margin: var(--fk-eyebrow-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, #2a6d47));
    background: var(--fk-eyebrow-bg, transparent);
    /* Le header parent est display:flex en colonne, qui etire ses enfants
       (align-self:stretch) par defaut -> sans ceci, la pilule prendrait toute
       la largeur malgre son display:table. */
    align-self: flex-start;
    color: var(--fk-eyebrow-color);
    font-size: var(--fk-eyebrow-size, var(--theme-eyebrow-size, 13px));
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: var(--theme-eyebrow-weight, 700);
    text-align: var(--fk-eyebrow-align);
    font-family: var(--theme-text-font, inherit);
}

.franck-two-columns-right-picture-text-cta__title {
    color: var(--fk-title-color);
    font-size: var(--fk-title-size, var(--theme-title-size, 40px));
    font-weight: var(--theme-title-weight, 600);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
    text-align: var(--fk-title-align);
    font-family: var(--theme-title-font, inherit);
}

.franck-two-columns-right-picture-text-cta__subtitle {
    color: var(--fk-subtitle-color);
    font-size: var(--fk-subtitle-size, var(--theme-subtitle-size, 18px));
    font-weight: var(--theme-subtitle-weight, 500);
    line-height: 1.45;
    margin: 0;
    text-align: var(--fk-subtitle-align);
}

.franck-two-columns-right-picture-text-cta__section-text {
    color: var(--fk-section-text-color);
    font-size: var(--fk-section-text-size, var(--theme-text-size, 16px));
    line-height: 1.6;
    margin: 0;
    text-align: var(--fk-text-align);
    font-family: var(--theme-text-font, inherit);
}

/* =====================  BOUTON SECTION  ===================== */
.franck-two-columns-right-picture-text-cta__button-wrap {
    display: flex;
    justify-content: var(--fk-button-align, flex-start);
    margin-top: 6px;
}
.franck-two-columns-right-picture-text-cta__button {
    display: inline-flex;
    min-height: var(--fk-block-button-height, 48px);
    align-items: center;
    justify-content: center;
    padding: 0 var(--fk-block-button-padding-x, 22px);
    border-radius: var(--fk-block-button-radius, 999px);
    background: var(--fk-button-bg);
    color: var(--fk-button-color);
    font-size: var(--fk-button-size, var(--theme-button-font-size, 15px));
    font-weight: 900;
    font-family: var(--theme-button-font, inherit);
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}
.franck-two-columns-right-picture-text-cta__button:hover {
    background: var(--fk-button-bg-hover);
    color: var(--fk-button-color-hover);
    transform: translateY(-1px);
    text-decoration: none;
}

/* =====================  FOOTER (bouton sous bloc)  ===================== */
.franck-two-columns-right-picture-text-cta__footer {
    margin-top: var(--fk-header-gap, 30px);
}

/* =====================  BLOC 2 COLONNES  =====================
   IMPORTANT : ordre INVERSÉ par rapport au "left".
   - Col 1 (gauche) = TEXT (ratio = --fk-text-ratio)
   - Col 2 (droite) = MEDIA (ratio = --fk-media-ratio)
   Dans le HTML, on garde l'ordre source: text-card EN PREMIER, media-card EN SECOND.
   ============================================================================ */
.franck-two-columns-right-picture-text-cta__block {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, var(--fk-text-ratio, 2fr)) minmax(0, var(--fk-media-ratio, 2fr));
    gap: 0;
    height: var(--fk-card-height, 520px);
    min-height: 0;
    border-radius: var(--fk-card-radius, 24px);
    overflow: hidden;
    box-shadow: var(--fk-card-shadow, none);
    background: var(--fk-card-bg, #f1f5ff);
    border: var(--fk-card-border-width, 0px) solid var(--fk-card-border-color, transparent);
}

/* MEDIA CARD (col droite) */
.franck-two-columns-right-picture-text-cta__media-card {
    position: relative;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: var(--fk-image-bg, transparent);
}
.franck-two-columns-right-picture-text-cta__media-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--fk-image-padding, 0px);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    /* Image à DROITE → coins gauches carrés, coins droits arrondis */
    border-radius: 0 var(--fk-image-radius, 24px) var(--fk-image-radius, 24px) 0;
}
.franck-two-columns-right-picture-text-cta__media-wrap img,
.franck-two-columns-right-picture-text-cta__media-wrap video {
    width: 100%;
    height: 100%;
    object-fit: var(--fk-image-fit, cover);
    object-position: calc(50% + var(--fk-image-offset-x, 0px)) calc(50% + var(--fk-image-offset-y, 0px));
    display: block;
    border-radius: 0 max(0px, calc(var(--fk-image-radius, 24px) - var(--fk-image-padding, 0px))) max(0px, calc(var(--fk-image-radius, 24px) - var(--fk-image-padding, 0px))) 0;
}
/* Picture wrappers (nouveau pipeline images) */
.franck-two-columns-right-picture-text-cta__media-wrap picture {
    display: block;
    width: 100%;
    height: 100%;
}
.franck-two-columns-right-picture-text-cta__media-wrap picture > img {
    width: 100%;
    height: 100%;
    object-fit: var(--fk-image-fit, cover);
    object-position: calc(50% + var(--fk-image-offset-x, 0px)) calc(50% + var(--fk-image-offset-y, 0px));
    display: block;
    border-radius: 0 max(0px, calc(var(--fk-image-radius, 24px) - var(--fk-image-padding, 0px))) max(0px, calc(var(--fk-image-radius, 24px) - var(--fk-image-padding, 0px))) 0;
}
/* YouTube embed dans la media-card */
.franck-two-columns-right-picture-text-cta__media-wrap iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    min-width: calc(var(--fk-card-height, 520px) * 1.7778);
    min-height: 100%;
    transform: translate(-50%, -50%) scale(1.70);
    border: 0;
    pointer-events: none;
    filter: brightness(.9);
}

.franck-two-columns-right-picture-text-cta__placeholder {
    width: 100%;
    height: 100%;
    background: rgba(0, 120, 56, .14);
}

/* TEXT CARD (col gauche) */
.franck-two-columns-right-picture-text-cta__text-card {
    display: flex;
    align-items: center;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: var(--fk-card-padding, 42px);
    text-align: var(--fk-text-align, left);
}

.franck-two-columns-right-picture-text-cta__content {
    width: 100%;
}

/* Eyebrow / titre / sous-titre / texte du bloc */
.franck-two-columns-right-picture-text-cta__block-eyebrow {
    color: var(--fk-eyebrow-color);
    font-size: var(--fk-eyebrow-size, var(--theme-eyebrow-size, 13px));
    line-height: 1.2;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 800;
    margin: 0 0 22px;
    font-family: var(--theme-text-font, inherit);
}
.franck-two-columns-right-picture-text-cta__block-title {
    color: var(--fk-block-title-color);
    font-size: var(--fk-block-title-size);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 700;
    margin: 0 0 22px;
    font-family: var(--theme-title-font, inherit);
}
.franck-two-columns-right-picture-text-cta__block-subtitle {
    color: var(--fk-block-subtitle-color);
    font-size: var(--fk-block-subtitle-size);
    line-height: 1.35;
    font-weight: 600;
    margin: 0 0 22px;
    font-family: var(--theme-text-font, inherit);
}
.franck-two-columns-right-picture-text-cta__block-text {
    color: var(--fk-block-text-color);
    font-size: var(--fk-block-text-size);
    line-height: 1.55;
    font-weight: 500;
    margin: 0;
    font-family: var(--theme-text-font, inherit);
}

/* Bouton du bloc */
.franck-two-columns-right-picture-text-cta__block-button-wrap {
    display: flex;
    margin-top: 28px;
}
.franck-two-columns-right-picture-text-cta__block-button-wrap--flex-start { justify-content: flex-start; }
.franck-two-columns-right-picture-text-cta__block-button-wrap--center     { justify-content: center; }
.franck-two-columns-right-picture-text-cta__block-button-wrap--flex-end   { justify-content: flex-end; }
.franck-two-columns-right-picture-text-cta__block-button-wrap--left       { justify-content: flex-start; }
.franck-two-columns-right-picture-text-cta__block-button-wrap--right      { justify-content: flex-end; }

.franck-two-columns-right-picture-text-cta__block-button {
    display: inline-flex;
    min-height: var(--fk-block-button-height, 48px);
    align-items: center;
    justify-content: center;
    padding: 0 var(--fk-block-button-padding-x, 22px);
    border-radius: var(--fk-block-button-radius, 999px);
    background: var(--fk-block-button-bg);
    color: var(--fk-block-button-color);
    font-size: var(--fk-block-button-size);
    font-weight: 900;
    font-family: var(--theme-button-font, inherit);
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}
.franck-two-columns-right-picture-text-cta__block-button:hover {
    background: var(--fk-block-button-bg-hover);
    color: var(--fk-block-button-color-hover);
    transform: translateY(-1px);
    text-decoration: none;
}

/* =====================  ANIMATIONS  ===================== */
.f2crptc-anim {
    opacity: 0;
    transition: opacity var(--fk-animation-duration, 700ms) ease var(--fk-animation-delay, 0ms),
                transform var(--fk-animation-duration, 700ms) ease var(--fk-animation-delay, 0ms);
    will-change: opacity, transform;
}
.f2crptc-anim--fade       { opacity: 0; }
.f2crptc-anim--fade-up    { opacity: 0; transform: translateY(28px); }
.f2crptc-anim--fade-down  { opacity: 0; transform: translateY(-28px); }
.f2crptc-anim--fade-left  { opacity: 0; transform: translateX(34px); }
.f2crptc-anim--fade-right { opacity: 0; transform: translateX(-34px); }
.f2crptc-anim--zoom       { opacity: 0; transform: scale(.94); }
.f2crptc-anim--none       { opacity: 1; }

.f2crptc-anim--visible    { opacity: 1; transform: translate(0,0) scale(1); }

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

/* =====================  RESPONSIVE  ===================== */
@media (max-width: 1024px) {
    .franck-two-columns-right-picture-text-cta__title { font-size: clamp(28px, 5vw, 46px); }
}

@media (max-width: 991px) {
    /* En mobile on passe en 1 colonne. On veut MEDIA EN HAUT, TEXTE EN DESSOUS
       (cohérent avec la version "left"). Comme le DOM est text-card puis
       media-card, on inverse l'ordre visuel via grid `order`. */
    .franck-two-columns-right-picture-text-cta__block {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
    }
    .franck-two-columns-right-picture-text-cta__media-card {
        order: 1;
        height: 320px !important;
        max-height: 320px !important;
    }
    .franck-two-columns-right-picture-text-cta__text-card {
        order: 2;
        min-height: 280px;
    }
    /* En mobile : media en haut, donc coins haut arrondis, bas droits */
    .franck-two-columns-right-picture-text-cta__media-wrap,
    .franck-two-columns-right-picture-text-cta__media-wrap img,
    .franck-two-columns-right-picture-text-cta__media-wrap picture > img {
        border-radius: var(--fk-image-radius, 24px) var(--fk-image-radius, 24px) 0 0;
    }
}

@media (max-width: 640px) {
    .franck-two-columns-right-picture-text-cta__title       { font-size: clamp(24px, 7vw, 36px); }
    .franck-two-columns-right-picture-text-cta__media-card  { height: 220px !important; max-height: 220px !important; min-height: 0; }
    .franck-two-columns-right-picture-text-cta__text-card   { padding: 22px 18px !important; }
    .franck-two-columns-right-picture-text-cta__block-title { font-size: clamp(20px, 6vw, 26px) !important; line-height: 1.25; }
    .franck-two-columns-right-picture-text-cta__block-text,
    .franck-two-columns-right-picture-text-cta__block-subtitle { font-size: clamp(14px, 4vw, 17px); }
}

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

.franck-two-columns-right-picture-text-cta-preview-container {
    width: 100%;
    max-width: 1760px;        /* 1320 / 0.75 — Bootstrap container-xxl scalé */
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

@media (max-width: 1399.98px) { .franck-two-columns-right-picture-text-cta-preview-container { max-width: 1520px; } }
@media (max-width: 1199.98px) { .franck-two-columns-right-picture-text-cta-preview-container { max-width: 1280px; } }
@media (max-width: 991.98px)  { .franck-two-columns-right-picture-text-cta-preview-container { max-width: 960px;  } }
@media (max-width: 767.98px)  { .franck-two-columns-right-picture-text-cta-preview-container { max-width: 720px;  } }
@media (max-width: 575.98px)  { .franck-two-columns-right-picture-text-cta-preview-container { max-width: 100%;   } }

/* Neutralisation du 100vw du wrapper--full dans le preview */
.franck-two-columns-right-picture-text-cta-scale-outer .franck-two-columns-right-picture-text-cta-wrapper--full,
.is-builder-preview .franck-two-columns-right-picture-text-cta-wrapper--full {
    width: 100%;
    margin-left: 0;
    max-width: 100%;
}

.franck-two-columns-right-picture-text-cta-scale-inner {
    box-sizing: border-box;
}