/* =============================================
   Image + Texte — Landing Sylius (CRSW-226)
   ============================================= */

.flexible-image-texte {
    position: relative;
    background: transparent;
    padding: 60px 16px;
}

.flexible-image-texte__inner {
    position: relative;
    z-index: 1;
    max-width: 1500px;
    margin: 0 auto;
    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-image-texte--gauche .flexible-image-texte__inner {
    flex-direction: row;
}

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

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

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

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

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

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

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

.flexible-image-texte__image {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    transform: scale(var(--imgtxt-image-scale, 1));
    transform-origin: center;
    transition: transform var(--transition-base);
}

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

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

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

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

.flexible-image-texte__texte {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-gray-medium);
}

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

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

.flexible-image-texte__texte h1,
.flexible-image-texte__texte h2,
.flexible-image-texte__texte h3,
.flexible-image-texte__texte h4 {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 800;
    line-height: 1.15;
    color: var(--color-navy);
    margin: 0 0 16px;
}

/* h1 aligné sur h2 : même gabarit de titre visuel, seul le tag change selon le
   format choisi dans l'éditeur (l'un ou l'autre n'a pas de sens sémantique
   particulier ici, ce sont des titres de section flexible). */
.flexible-image-texte__texte h1,
.flexible-image-texte__texte h2 {
    font-size: 38px;
}

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

/* La règle globale `div, p, a, input, h1-h6 { font-family; color }` (style/components.css)
   cible directement les <p> et écrase l'héritage de la couleur/police posées sur le
   conteneur .flexible-image-texte__texte : on les redéclare explicitement ici. */
.flexible-image-texte__texte p {
    margin: 0 0 16px;
    font-family: 'Manrope', sans-serif;
    color: var(--color-gray-medium);
}

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

.flexible-image-texte__texte a {
    color: var(--color-blue);
    text-decoration: underline;
}

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

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

.flexible-image-texte__texte .wp-caption-text {
    font-size: 13px;
    color: var(--color-gray-medium);
    margin-top: 8px;
}

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

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

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

/* Tailles WYSIWYG (menu "Tailles" du champ, cf inc/acf-flexible-landing.php) —
   alignées sur les tailles utilisées dans les autres blocs flexibles. Ces
   classes ne sont pas scoped à .flexible-image-texte__texte : elles sont aussi
   utilisées via mce_css pour prévisualiser dans l'iframe TinyMCE.
   !important nécessaire : appliquées sur un <p>, elles doivent l'emporter sur
   .flexible-image-texte__texte p (classe + élément, plus spécifique). */
.imgtxt-size-sm,
.imgtxt-size-md,
.imgtxt-size-lg {
    font-family: 'Manrope', sans-serif !important;
    color: var(--color-gray-medium, #6B7280) !important;
}

.imgtxt-size-sm {
    font-size: 14px;
}

.imgtxt-size-md {
    font-size: 16px;
}

.imgtxt-size-lg {
    font-size: 22px;
}

.imgtxt-title-md,
.imgtxt-title-lg {
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-weight: 800 !important;
    line-height: 1.15;
    color: var(--color-navy, #0A1628) !important;
}

.imgtxt-title-md {
    font-size: 38px;
}

.imgtxt-title-lg {
    font-size: 44px;
}

/* Tablette */
@media (max-width: 1024px) {
    .flexible-image-texte__inner {
        gap: 40px;
    }

    .flexible-image-texte__texte h1,
    .flexible-image-texte__texte h2 {
        font-size: 30px;
    }
}

/* Mobile : l'image passe systématiquement au-dessus du texte, pleine largeur */
@media (max-width: 768px) {
    .flexible-image-texte {
        padding: 48px 16px !important;
    }

    .flexible-image-texte__inner {
        flex-direction: column !important;
        gap: 24px;
    }

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

    .flexible-image-texte__texte h1,
    .flexible-image-texte__texte h2 {
        font-size: 20px !important;
    }
}