/* Block : fle2026/section */
.fle2026-section{
    margin-block-start: 0!important;
}

/* ── col-image ── */

.fle2026-section__col-image {
    display: flex;
    flex-direction: column;
}

.fle2026-section__col-image .wp-block-image {
    flex: 1;
    margin: 0;
}

/* Boutons FLE de la colonne image (variantes « image à droite / à gauche ») :
   le groupe n'a pas de classe dédiée et blockGap vaut 0 → on force le gap.
   Décalage réglable par bloc dans Gutenberg (panneau « Position des boutons »). */
.fle2026-section__col-image > .wp-block-group {
    gap: 5px;
    transform: translate(var(--img-btns-x, 0px), var(--img-btns-y, 0px));
}

@media (max-width: 781px) {
    /* décalage Gutenberg neutralisé en pile mobile */
    .fle2026-section__col-image > .wp-block-group {
        transform: none;
    }
}

.fle2026-section__col-image .wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Variante diagonale ── */

:is(.fle2026-section--diagonale, .fle2026-section--diagonale-inverse) {
    /* Chevauchement vertical titre/texte ↔ image : de combien la rangée
       titre/texte remonte DANS l'image. Surchargeable par page :
       body.page-id-XX .fle2026-section--diagonale { --diag-overlap: 22rem } */
    --diag-overlap: 35rem;

    max-width: var(--width-wide);
    margin-inline: auto;
    overflow: visible;
}

:is(.fle2026-section--diagonale, .fle2026-section--diagonale-inverse) .fle2026-diag__image {
    width: 66%;
    margin-bottom: 0 !important;
    /* Déborde au-dessus du bloc titre/texte */
    margin-top: -2.5rem;
    /* Décalage réglable par bloc dans Gutenberg (panneau « Position de
       l'image »). 0 par défaut → position inchangée. */
    transform: translate(var(--diag-img-x, 0px), var(--diag-img-y, 0px));
}

:is(.fle2026-section--diagonale, .fle2026-section--diagonale-inverse) .fle2026-diag__image img {
    width: 100%;
    display: block;
    /* Plus haute → le bas de l'image dépasse sous le bloc titre/texte */
    aspect-ratio: 4 / 3.6;
    object-fit: cover;
}

:is(.fle2026-section--diagonale, .fle2026-section--diagonale-inverse) .fle2026-diag__bottom {
    margin-top: calc(var(--diag-overlap) * -1);
    padding-bottom: var(--wp--preset--spacing--50);
}

:is(.fle2026-section--diagonale, .fle2026-section--diagonale-inverse) .fle2026-diag__text {
    flex: 0 0 60%;
    background: var(--wp--preset--color--blanc);
    padding: var(--wp--preset--spacing--50);
    padding-left: 0;
    position: relative;
    z-index: 1;
    transform: translate(var(--diag-text-x, 0px), var(--diag-text-y, 0px));
}

:is(.fle2026-section--diagonale, .fle2026-section--diagonale-inverse) .fle2026-diag__btns {
    flex-shrink: 0;
    margin-top: calc(var(--diag-overlap) + 15px);
    align-self: flex-start;
    gap: 5px;
    /* Décalage réglable par bloc dans Gutenberg (panneau « Position des boutons »). */
    transform: translate(var(--diag-btns-x, 0px), var(--diag-btns-y, 0px));
}

/* Reste calée au bord (auto), + déborde de 2.5rem vers l'extérieur */
.fle2026-section--diagonale .fle2026-diag__image          { margin-left: auto !important;  margin-right: -2.5rem !important; }
.fle2026-section--diagonale-inverse .fle2026-diag__image  { margin-right: auto !important; margin-left: -2.5rem !important; }
.fle2026-section--diagonale-inverse .fle2026-diag__bottom { flex-direction: row-reverse; }

/* Éditeur */
.editor-styles-wrapper .fle2026-section .wp-block-image,
.editor-styles-wrapper .fle2026-section .components-placeholder.block-editor-media-placeholder {
    min-height: 400px;
}

:is(.editor-styles-wrapper .fle2026-section--diagonale,
    .editor-styles-wrapper .fle2026-section--diagonale-inverse) .fle2026-diag__text {
    z-index: auto;
}

@media (max-width: 781px) {
    :is(.fle2026-section--diagonale, .fle2026-section--diagonale-inverse) .fle2026-diag__image {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    :is(.fle2026-section--diagonale, .fle2026-section--diagonale-inverse) .fle2026-diag__bottom {
        flex-direction: column !important;
        margin-top: 0;
    }

    :is(.fle2026-section--diagonale, .fle2026-section--diagonale-inverse) .fle2026-diag__text {
        flex: none;
    }

    /* Les décalages Gutenberg (pensés pour la mise en page diagonale desktop)
       sont neutralisés en pile mobile. */
    :is(.fle2026-section--diagonale, .fle2026-section--diagonale-inverse) .fle2026-diag__image,
    :is(.fle2026-section--diagonale, .fle2026-section--diagonale-inverse) .fle2026-diag__text,
    :is(.fle2026-section--diagonale, .fle2026-section--diagonale-inverse) .fle2026-diag__btns {
        transform: none;
    }
}

/* ── Variante superposée ──
   Mise en page d'origine conservée : image à 80 %, bloc texte superposé
   (margin-top négatif) et décalé à droite (left:10%). Seuls les BOUTONS
   changent : au lieu d'une colonne flex de 20 % (largeur serrée), la pile
   passe en largeur "contenu" et vient chevaucher la droite de l'image,
   près du bord droit du texte. Aucun changement de markup. */

.fle2026-section--superpose {
    max-width: var(--width-wide);
    margin-inline: auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: var(--wp--preset--spacing--40);
    overflow: visible;
}

.fle2026-superpose__main {
    flex: 0 0 80%;
    min-width: 0;
}

.fle2026-superpose__image {
    margin-bottom: 0 !important;
}

.fle2026-superpose__image img {
    width: 100%;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.fle2026-superpose__text {
    background: var(--wp--preset--color--blanc);
    padding: var(--wp--preset--spacing--50);
    margin-top: -20rem !important;
    position: relative;
    z-index: 1;
    width: 80%;
    left: 10%;
}

.fle2026-section--superpose .fle2026-superpose__btns {
    flex: 0 0 auto;                 /* largeur = contenu, plus les 20% serrés */
    align-self: flex-end;
    margin-left: -13%;              /* ramène la pile sur la droite de l'image, près du bord droit du texte */
    z-index: 2;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;                       /* espacement entre boutons, comme les autres piles */
    padding-bottom: var(--wp--preset--spacing--50);
    /* Réglage fin par bloc dans Gutenberg (panneau « Position des boutons »).
       Conteneur overflow:visible → la pile peut dépasser le bord droit de
       l'image (X positif) ou revenir sur le texte (X négatif). */
    transform: translate(var(--sup-btns-x, 0px), var(--sup-btns-y, 0px));
}

.editor-styles-wrapper .fle2026-section--superpose .fle2026-superpose__text {
    z-index: auto;
}

@media (max-width: 781px) {
    .fle2026-section--superpose {
        flex-direction: column;
        align-items: stretch;
    }

    .fle2026-superpose__main { flex: none; }
    .fle2026-superpose__text { margin-top: 0; width: auto; left: 0; }
    .fle2026-section--superpose .fle2026-superpose__btns {
        flex: none;
        margin-left: 0;
        align-self: stretch;
        padding-bottom: var(--wp--preset--spacing--40);
        transform: none; /* décalage Gutenberg neutralisé en pile mobile */
    }
}

/* ── Variante bannière ── */

.fle2026-banniere {
    /* De combien la rangée titre/texte + boutons remonte sur le bas de
       l'image (les deux valeurs plus bas sont synchronisées dessus). */
    --bann-overlap: 400px;
    overflow: visible;
}

.fle2026-banniere .wp-block-image {
    margin-bottom: 0 !important;
}

.fle2026-banniere .wp-block-image img {
    width: 100%;
    display: block;
    object-fit: cover;
    min-height: 700px;
}

.fle2026-banniere__row {
    display: flex;
    align-items: flex-end;
    gap: var(--wp--preset--spacing--40);
    max-width: var(--width-wide);
    margin-inline: auto;
    margin-block-start: calc(var(--bann-overlap) * -1) !important; /* chevauche le bas de l'image */
    padding-bottom: var(--wp--preset--spacing--50);
    padding-inline: var(--wp--preset--spacing--40);
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}

.fle2026-banniere__text {
    flex: 1;
    min-width: 500px;
    background: var(--wp--preset--color--blanc);
    color: var(--wp--preset--color--noir);
    padding: var(--wp--preset--spacing--50);
    /* Décalage réglable par bloc dans Gutenberg (panneau « Position du
       titre / texte »). 0 par défaut → position inchangée.
       Y négatif = remonte le bloc titre/texte. */
    transform: translate(var(--bann-text-x, 0px), var(--bann-text-y, 0px));
}

.fle2026-banniere .fle2026-banniere__btns {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-self: flex-start;
    margin-top: calc(var(--bann-overlap) + 20px) !important;
    /* Décalage réglable par bloc dans Gutenberg (panneau « Position des
       boutons »). 0 par défaut → position inchangée. */
    transform: translate(var(--bann-btns-x, 0px), var(--bann-btns-y, 0px));
}

.fle2026-section--text-right .fle2026-banniere__row {
    flex-direction: row-reverse;
}

@media (max-width: 781px) {
    .fle2026-banniere__row {
        flex-direction: column !important;
        align-items: stretch;
        gap: 0;
    }

    .fle2026-banniere .fle2026-banniere__btns {
        align-self: flex-start;
        padding: var(--wp--preset--spacing--50);
        margin-top: 0 !important;
        transform: none;
    }

    /* Décalage Gutenberg neutralisé en pile mobile */
    .fle2026-banniere__text {
        transform: none;
    }
}

/* ── Modificateur : forme décorative jaune derrière l'image ── */
/* ponytail: blob approximé en border-radius, à remplacer par le tracé exact si la maquette fournit un SVG */

.fle2026-section__col-image--blob {
    position: relative;
}

.fle2026-section__col-image--blob::before {
    content: "";
    position: absolute;
    inset: 12% -12% -12% 12%;
    background: var(--wp--preset--color--jaune);
    border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
    z-index: -1;
}