/* F2LIT_CSS_VARS_TO_FCS */
/* ============================================================================
   FRANCK TWO LINES IMG TEXT
   2 lignes : [Média | Texte]  +  [Texte | Média]
   Préfixes :
     - BEM : franck-two-lines-img-text
     - Variables CSS : --fk-*
     - Animation : f2lit-anim
   ============================================================================ */

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

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

    /* Entête */
    --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, var(--maurin-accent, #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);

    /* Gap entre les 2 cards d'une ligne */
    --fk-row-gap: 30px;

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

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

/* Full width : sort du container parent */
.franck-two-lines-img-text-wrapper--full {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
}

/* Arrondi de section : uniquement en mode container (full = pas d'arrondi).
   overflow:hidden déjà appliqué inconditionnellement sur la base (voir plus bas). */
.franck-two-lines-img-text-wrapper--container .franck-two-lines-img-text {
    border-radius: var(--fk-section-radius, var(--theme-section-container-radius, 18px));
}

/* =====================  SECTION  ===================== */
.franck-two-lines-img-text {
    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);
}

/* Densités : largeur inner + plafond max-width par classe */
.franck-two-lines-img-text--compact { --fk-density-width: 72%; }
.franck-two-lines-img-text--normal  { --fk-density-width: 86%; }
.franck-two-lines-img-text--large   { --fk-density-width: calc(100% - 48px); }
.franck-two-lines-img-text--xxl     { --fk-density-width: 100%; }
.franck-two-lines-img-text--compact .franck-two-lines-img-text__inner { max-width: 1140px; }
.franck-two-lines-img-text--normal  .franck-two-lines-img-text__inner { max-width: 1320px; }
.franck-two-lines-img-text--large   .franck-two-lines-img-text__inner { max-width: none; }
.franck-two-lines-img-text--xxl     .franck-two-lines-img-text__inner { max-width: none; width: 100%; }

/* =====================  SECTION MEDIA (background)  ===================== */
.franck-two-lines-img-text__section-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.franck-two-lines-img-text__section-media picture,
.franck-two-lines-img-text__section-media img,
.franck-two-lines-img-text__section-media video,
.franck-two-lines-img-text__section-media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.franck-two-lines-img-text__section-media img,
.franck-two-lines-img-text__section-media video {
    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;
}

.franck-two-lines-img-text__section-media picture img {
    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;
}

.franck-two-lines-img-text__section-media iframe {
    border: 0;
    pointer-events: none;
    /* iframe YouTube : agrandi pour couvrir la zone sans bandes noires */
    top: 50%;
    left: 50%;
    width: 240%;
    height: 240%;
    transform: translate(-50%, -50%) scale(1.08);
    filter: brightness(.78);
}

/* Overlay (avant le contenu) */
.franck-two-lines-img-text::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--fk-overlay, transparent);
    pointer-events: none;
}

/* =====================  INNER (largeur via density)  ===================== */
.franck-two-lines-img-text__inner {
    position: relative;
    z-index: 2;
    width: var(--fk-density-width, 86%);
    max-width: 1680px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--fk-content-padding-x, 42px);
    padding-right: var(--fk-content-padding-x, 42px);
    box-sizing: border-box;
}

/* =====================  HEADER  ===================== */
/* F2LIT_HEADER_FLEX_COLUMN : flex column pour que align-self fonctionne sur les enfants */
.franck-two-lines-img-text__header {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--fk-header-gap, 30px);
}

/* F2LIT_BADGE_PILULE_CSS : badge pilule (copie de franck-cards-static) */
.franck-two-lines-img-text__eyebrow {
    display: table;
    color: var(--fk-eyebrow-color, #7c7c7c);
    font-size: var(--fk-eyebrow-size, 13px);
    font-weight: var(--theme-eyebrow-weight, 700);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: var(--fk-eyebrow-align, left);
    margin: 0 0 8px 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); /* F2LIT_EYEBROW_ALIGN_SELF */
    font-family: var(--theme-text-font, inherit);
}

.franck-two-lines-img-text__title {
    color: var(--fk-title-color, #2c2c2c);
    font-size: var(--fk-title-size, 42px);
    text-align: var(--fk-title-align, left);
    font-weight: var(--theme-title-weight, 600);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    font-family: var(--theme-title-font, inherit);
}

.franck-two-lines-img-text__subtitle {
    color: var(--fk-subtitle-color, #2c2c2c);
    font-size: var(--fk-subtitle-size, 18px);
    text-align: var(--fk-subtitle-align, left);
    font-weight: var(--theme-subtitle-weight, 500);
    line-height: 1.45;
    margin: 0 0 12px 0;
}

.franck-two-lines-img-text__section-text {
    color: var(--fk-section-text-color, #2c2c2c);
    font-size: var(--fk-section-text-size, 16px);
    text-align: var(--fk-text-align, left);
    line-height: 1.55;
    font-family: var(--theme-text-font, inherit);
}

/* =====================  FOOTER  ===================== */
.franck-two-lines-img-text__footer {
    margin-top: var(--fk-row-gap, 30px);
}

/* =====================  ROW (2 cards par ligne)  ===================== */
.franck-two-lines-img-text__row {
    /* Variables propres à la ligne, settées inline par le renderer/Twig */
    --fk-row-image-bg: #eef2f7;
    --fk-row-text-bg: var(--theme-card-background, #f3f3f3);
    --fk-row-card-height: 300px;
    --fk-row-card-radius: var(--theme-card-radius, 24px);
    --fk-row-card-shadow: none;
    --fk-row-image-object-fit: cover;
    --fk-row-image-offset-x: 50%;
    --fk-row-image-offset-y: 50%;
    --fk-row-image-padding: 0px;
    --fk-row-block-title-color: var(--theme-block-title-color, #2c2c2c);
    --fk-row-block-title-size: 28px;
    --fk-row-block-text-color: var(--theme-block-text-color, #2c2c2c);
    --fk-row-block-text-size: 14px;
    --fk-row-button-bg: var(--theme-button-bg, #2a6d47);
    --fk-row-button-color: var(--theme-button-text-color, #ffffff);
    --fk-row-button-bg-hover: var(--theme-button-bg-hover, #3c9a65);
    --fk-row-button-size: 14px;

    display: grid;
    gap: var(--fk-row-gap, 30px);
    margin-bottom: var(--fk-row-gap, 30px);
    align-items: stretch;
}

.franck-two-lines-img-text__row:last-child {
    margin-bottom: 0;
}

.franck-two-lines-img-text__row--image-left,
.franck-two-lines-img-text__row--image-right {
    /* Default 1fr 1fr ; le vrai ratio est écrasé par grid-template-columns inline
       (settée par le renderer/Twig depuis row*ImageRatio). */
    grid-template-columns: 1fr 1fr;
}

/* =====================  CARDS (image + texte)  ===================== */
.franck-two-lines-img-text__card {
    position: relative;
    height: var(--fk-row-card-height, 300px);
    max-height: var(--fk-row-card-height, 300px);
    min-height: 0;
    border-radius: var(--fk-row-card-radius, 24px);
    overflow: hidden;
    box-shadow: var(--fk-row-card-shadow, none);
    box-sizing: border-box;
}

.franck-two-lines-img-text__card--image {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fk-row-image-bg, #eef2f7);
}

.franck-two-lines-img-text__card--text {
    display: flex;
    align-items: center;
    background: var(--fk-row-text-bg, #f3f3f3);
    padding: 42px;
}

/* =====================  IMAGE WRAP  ===================== */
.franck-two-lines-img-text__image-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--fk-row-image-padding, 0px);
    box-sizing: border-box;
    overflow: hidden;
}

/* Support du nouveau format <picture> ET de l'ancien <img> simple */
.franck-two-lines-img-text__image-wrap picture,
.franck-two-lines-img-text__image-wrap img,
.franck-two-lines-img-text__image-wrap video,
.franck-two-lines-img-text__image-wrap iframe {
    width: 100%;
    height: 100%;
    display: block;
}

.franck-two-lines-img-text__image-wrap picture {
    position: relative;
}

.franck-two-lines-img-text__image-wrap img,
.franck-two-lines-img-text__image-wrap video {
    object-fit: var(--fk-row-image-object-fit, cover);
    object-position: var(--fk-row-image-offset-x, 50%) var(--fk-row-image-offset-y, 50%);
    border-radius: max(0px, calc(var(--fk-row-card-radius, 24px) - var(--fk-row-image-padding, 0px)));
    transform: scale(var(--fk-row-image-zoom, 1));
    transform-origin: center center;
}

.franck-two-lines-img-text__image-wrap picture img {
    object-fit: var(--fk-row-image-object-fit, cover);
    object-position: var(--fk-row-image-offset-x, 50%) var(--fk-row-image-offset-y, 50%);
    transform: scale(var(--fk-row-image-zoom, 1));
    transform-origin: center center;
}

.franck-two-lines-img-text__image-wrap iframe {
    border: 0;
    pointer-events: none;
    /* iframe YouTube : agrandi pour couvrir la card sans bandes noires */
    position: absolute !important;
    top: 50%;
    left: 50%;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    min-width: calc(var(--fk-row-card-height, 300px) * 1.7778) !important;
    min-height: 100% !important;
    transform: translate(-50%, -50%) scale(1.80);
    filter: brightness(.9);
}

.franck-two-lines-img-text__placeholder {
    width: 48%;
    height: 70%;
    border-radius: var(--fk-row-card-radius, 24px);
    background: rgba(255, 255, 255, 0.24);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* =====================  CONTENU CARD TEXTE  ===================== */
.franck-two-lines-img-text__content {
    width: 100%;
}

.franck-two-lines-img-text__block-title {
    color: var(--fk-row-block-title-color, #2c2c2c);
    font-size: var(--fk-row-block-title-size, 28px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 600;
    margin: 0 0 24px;
    font-family: var(--theme-title-font, inherit);
}

.franck-two-lines-img-text__block-text {
    color: var(--fk-row-block-text-color, #2c2c2c);
    font-size: var(--fk-row-block-text-size, 14px);
    line-height: 1.45;
    font-weight: 500;
    margin: 0;
    font-family: var(--theme-text-font, inherit);
}

/* =====================  BOUTONS  ===================== */
.franck-two-lines-img-text__button-wrap {
    display: flex;
    margin-top: 24px;
    justify-content: var(--fk-button-align, flex-start);
}

.franck-two-lines-img-text__button-wrap--left   { justify-content: flex-start; }
.franck-two-lines-img-text__button-wrap--center { justify-content: center; }
.franck-two-lines-img-text__button-wrap--right  { justify-content: flex-end; }

/* Bouton SECTION (entête / footer) */
.franck-two-lines-img-text__button {
    display: inline-flex;
    min-height: var(--theme-button-height, 48px);
    align-items: center;
    justify-content: center;
    padding: 0 var(--theme-button-padding-x, 22px);
    border-radius: var(--theme-button-radius, 999px);
    background: var(--fk-button-bg, #2a6d47);
    color: var(--fk-button-color, #ffffff);
    font-size: var(--fk-button-size, 15px);
    font-weight: var(--theme-button-font-weight, 900);
    font-family: var(--theme-button-font, inherit);
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.franck-two-lines-img-text__button:hover {
    background: var(--fk-button-bg-hover, #3c9a65);
    color: var(--fk-button-color-hover, #ffffff);
    transform: translateY(-1px);
    text-decoration: none;
}

/* Bouton CARD (dans une ligne) */
.franck-two-lines-img-text__row-button {
    display: inline-flex;
    min-height: var(--theme-button-height, 48px);
    align-items: center;
    justify-content: center;
    padding: 0 var(--theme-button-padding-x, 22px);
    border-radius: var(--theme-button-radius, 999px);
    background: var(--fk-row-button-bg, #2a6d47);
    color: var(--fk-row-button-color, #ffffff);
    font-size: var(--fk-row-button-size, 14px);
    font-weight: var(--theme-button-font-weight, 900);
    font-family: var(--theme-button-font, inherit);
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease;
}

.franck-two-lines-img-text__row-button:hover {
    background: var(--fk-row-button-bg-hover, #3c9a65);
    color: var(--fk-row-button-color, #ffffff);
    transform: translateY(-1px);
    text-decoration: none;
}

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

    .franck-two-lines-img-text__inner {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    .franck-two-lines-img-text__title {
        font-size: min(var(--fk-title-size, 42px), 32px) !important;
    }

    /* Sur mobile/tablette : empile verticalement en 1 seule colonne */
    .franck-two-lines-img-text__row,
    .franck-two-lines-img-text__row--image-left,
    .franck-two-lines-img-text__row--image-right {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-bottom: 24px !important;
        width: 100% !important;
    }

    .franck-two-lines-img-text__row:last-child {
        margin-bottom: 0 !important;
    }

    /* Ligne 2 : L'image passe au-dessus du texte (ordre : Image puis Texte en dessous) */
    .franck-two-lines-img-text__row--image-right .franck-two-lines-img-text__card--image {
        order: -1 !important;
    }

    .franck-two-lines-img-text__row--image-right .franck-two-lines-img-text__card--text {
        order: 1 !important;
    }

    /* Cards pleine largeur */
    .franck-two-lines-img-text__card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Image sur toute la longueur (largeur 100%), hauteur fixe proportionnelle */
    .franck-two-lines-img-text__card--image {
        height: 240px !important;
        max-height: none !important;
        min-height: 200px !important;
        border-radius: var(--fk-row-card-radius, 20px) !important;
    }

    /* Texte en dessous avec hauteur automatique */
    .franck-two-lines-img-text__card--text {
        height: auto !important;
        max-height: none !important;
        min-height: auto !important;
        padding: 28px 24px !important;
        border-radius: var(--fk-row-card-radius, 20px) !important;
    }

    .franck-two-lines-img-text__block-title {
        font-size: 22px !important;
        margin-bottom: 12px !important;
    }

    .franck-two-lines-img-text__block-text {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .franck-two-lines-img-text__button-wrap {
        margin-top: 18px !important;
    }
}

@media (max-width: 576px) {
    .franck-two-lines-img-text__inner {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .franck-two-lines-img-text__card--image {
        height: 210px !important;
    }

    .franck-two-lines-img-text__card--text {
        padding: 22px 18px !important;
    }
}

/* =====================  CONTAINER (preview builder)  ===================== */
.franck-two-lines-img-text-preview-container {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
}

/* =====================  ANIMATIONS (f2lit-anim)  ===================== */
.f2lit-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;
}

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

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

.f2lit-anim--fade       { animation-name: f2litFade; }
.f2lit-anim--fade-up    { animation-name: f2litFadeUp; }
.f2lit-anim--fade-down  { animation-name: f2litFadeDown; }
.f2lit-anim--fade-left  { animation-name: f2litFadeLeft; }
.f2lit-anim--fade-right { animation-name: f2litFadeRight; }
.f2lit-anim--zoom       { animation-name: f2litZoom; }

@keyframes f2litFade      { from { opacity: 0; } to { opacity: 1; } }
@keyframes f2litFadeUp    { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes f2litFadeDown  { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: none; } }
@keyframes f2litFadeLeft  { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes f2litFadeRight { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
@keyframes f2litZoom      { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }

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

/* =====================  BUILDER PREVIEW (neutralise full width)  ===================== */
/* Dans le builder, on ne veut PAS que .--wrapper--full sorte du parent
   (qui est .scale-inner) — on neutralise width: 100vw + margin négatif. */
.is-builder-preview .franck-two-lines-img-text-wrapper--full {
    width: 100% !important;
    margin-left: 0 !important;
}