/*
 * Section Image + Texte (flexible-business-cases-image-texte). Namespacé,
 * dépend de flexible-business-cases-base.css (variables --bc-*).
 * Copie adaptée de style/landing-flexible/image-texte-flexible.css
 * (landing e-commerce, CRSW-226) : mêmes réglages de mise en page, tokens
 * remappés vers --bc-* (dont --bc-section-color-text pour l'inversion de
 * couleur sur fond sombre, absente côté e-commerce).
 */

.flexible-business-cases-image-texte__inner {
    display: flex;
    gap: 64px;
}

/* Position de l'image (desktop) : le DOM place toujours l'image avant le
   texte, la direction flex inverse l'ordre visuel selon le champ ACF
   "image_texte_position". */
.flexible-business-cases-image-texte--gauche .flexible-business-cases-image-texte__inner {
    flex-direction: row;
}

.flexible-business-cases-image-texte--droite .flexible-business-cases-image-texte__inner {
    flex-direction: row-reverse;
}

/* Colonne image */
.flexible-business-cases-image-texte__image-col {
    flex: 0 0 var(--imgtxt-image-width, 50%);
    max-width: var(--imgtxt-image-width, 50%);
}

.flexible-business-cases-image-texte--no-texte .flexible-business-cases-image-texte__image-col {
    flex: 1 1 100%;
    max-width: 100%;
}

/* Alignement vertical de la colonne image, indépendant du texte */
.flexible-business-cases-image-texte__image-col--align-haut {
    align-self: flex-start;
}

.flexible-business-cases-image-texte__image-col--align-milieu {
    align-self: center;
}

.flexible-business-cases-image-texte__image-col--align-bas {
    align-self: flex-end;
}

.flexible-business-cases-image-texte__image-frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flexible-business-cases-image-texte__image {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: var(--bc-radius-card);
    transform: scale(var(--imgtxt-image-scale, 1));
    transform-origin: center;
    transition: transform 200ms ease;
}

/* Colonne texte */
.flexible-business-cases-image-texte__texte-col {
    flex: 1 1 auto;
    min-width: 0;
}

/* Alignement vertical de la colonne texte, indépendant de l'image */
.flexible-business-cases-image-texte__texte-col--align-haut {
    align-self: flex-start;
}

.flexible-business-cases-image-texte__texte-col--align-milieu {
    align-self: center;
}

.flexible-business-cases-image-texte__texte-col--align-bas {
    align-self: flex-end;
}

/* Police/taille/couleur alignées sur les autres sections Business Cases
   (--bc-font-body, 18px) plutôt que reprises telles quelles de l'e-commerce
   (16px) : cohérence inter-sections sur ce catalogue. */
.flexible-business-cases-image-texte__texte {
    font-family: var(--bc-font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.6;
    color: var(--bc-section-color-text, var(--bc-color-text-muted));
}

.flexible-business-cases-image-texte__texte > *:first-child {
    margin-top: 0;
}

.flexible-business-cases-image-texte__texte > *:last-child {
    margin-bottom: 0;
}

.flexible-business-cases-image-texte__texte h1,
.flexible-business-cases-image-texte__texte h2,
.flexible-business-cases-image-texte__texte h3,
.flexible-business-cases-image-texte__texte h4 {
    font-family: var(--bc-font-heading);
    font-weight: 800;
    line-height: 1.15;
    color: var(--bc-section-color-text, var(--bc-color-text));
    margin: 0 0 16px;
}

.flexible-business-cases-image-texte__texte h2 {
    font-size: 32px;
    text-align: left;
}

.flexible-business-cases-image-texte__texte h3 {
    font-size: 24px;
}

.flexible-business-cases-image-texte__texte p {
    margin: 0 0 16px;
}

.flexible-business-cases-image-texte__texte ul,
.flexible-business-cases-image-texte__texte ol {
    margin: 0 0 16px;
    padding-left: 20px;
}

.flexible-business-cases-image-texte__texte a {
    color: var(--bc-color-accent);
    text-decoration: underline;
}

/* Médias insérés via l'éditeur enrichi */
.flexible-business-cases-image-texte__texte img {
    max-width: 100%;
    height: auto;
    border-radius: var(--bc-radius-card);
}

.flexible-business-cases-image-texte__texte .wp-caption {
    max-width: 100%;
}

.flexible-business-cases-image-texte__texte .wp-caption-text {
    font-size: 13px;
    color: var(--bc-color-text-muted);
    margin-top: 8px;
}

.flexible-business-cases-image-texte__texte .alignleft {
    float: left;
    margin: 0 20px 12px 0;
}

.flexible-business-cases-image-texte__texte .alignright {
    float: right;
    margin: 0 0 12px 20px;
}

.flexible-business-cases-image-texte__texte .aligncenter {
    display: block;
    margin: 0 auto 16px;
}

/* ── Tablette (~768-1199px) ───────────────────────────────────────────── */

@media (max-width: 1199px) {
    .flexible-business-cases-image-texte__inner {
        gap: 40px;
    }

    .flexible-business-cases-image-texte__texte h2 {
        font-size: 26px;
    }
}

/* ── Mobile (<768px) : l'image passe systématiquement au-dessus du texte,
   pleine largeur ─────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .flexible-business-cases-image-texte__inner {
        flex-direction: column !important;
        gap: 24px;
    }

    .flexible-business-cases-image-texte__image-col,
    .flexible-business-cases-image-texte__texte-col {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100%;
    }

    .flexible-business-cases-image-texte__texte h2 {
        font-size: 22px !important;
    }
}