/**
 * ccbla/motif-pop — Front + éditeur
 *
 * Cascade responsive descendante complète :
 *   Desktop (base) → 2560 → 1440 → 1280 → Tablet → Mobile → Small
 *   Chaque breakpoint hérite du précédent si non défini.
 *
 * Ancrage horizontal : classes --right / --left / --full
 * Ancrage vertical   : classes --av-top / --av-center / --av-bottom
 */

/* ── Overlay principal ─────────────────────────────────────────────────────── */
.ccbla-motif-pop {
    position:       absolute;
    inset:          0;
    pointer-events: none;
    z-index:        var(--pop-z, 0);
    color:          var(--pop-color, var(--wp--preset--color--pop-pastel-lemon, #fff7b2));
    opacity:        var(--pop-opacity, 1);
}

/* ── Clip wrapper ──────────────────────────────────────────────────────────── */
/*
 * --pop-clip-left / --pop-clip-right : rétrécissent la zone de clip
 * indépendamment de l'overlay parent (qui reste inset:0).
 *
 * Usage typique (motif POP grand + partiellement rogné) :
 *   --pop-clip-left: 50%   → zone visible = 50% droite du banner
 *   --pop-size: 80vw       → SVG déborde de 30vw sur la gauche → rogné ici
 *
 * Équivalent pour variante --left :
 *   --pop-clip-right: 50%  → zone visible = 50% gauche du banner
 */
.ccbla-motif-pop__clip {
    position: absolute;
    top:      0;
    bottom:   0;
    left:     var(--pop-clip-left,  0px);
    right:    var(--pop-clip-right, 0px);
}
.ccbla-motif-pop--clip .ccbla-motif-pop__clip {
    overflow: hidden;
}

/* SVG — BASE (desktop ≥1025px) */
.ccbla-motif-pop__svg {
    position: absolute;
    width:    var(--pop-size, 50vw);
    max-width: var(--pop-size-max, none);
    height:   auto;
    display:  block;
}

/* MODE FILL-HEIGHT Dimensionne le SVG par sa hauteur (% du banner) au lieu de la largeur. → garantit l'overflow vertical quelque soit le viewport. → width: auto = calculé automatiquement par le ratio SVG (1016/660 ≈ 1.539) Recette pour le rendu "POP billboard" (image 1): size: 50vw (bord gauche toujours à 50%) anchorV: center (P haut/bas débordent équitablement) clip: ON (overflow hidden) offset-x: 0px (flush bord droit) Si le banner est trop haut et que rien ne déborde → activer fill-height: sizeH: 115%–130% (SVG = 115%+ de la hauteur du banner → overflow garanti) */
.ccbla-motif-pop--fill-height .ccbla-motif-pop__svg {
    height:       var(--pop-size-h, 115%);
    width:        auto;
    max-width:    none;
}

/* MODE ANCHOR-LEFT Positionne le BORD GAUCHE du SVG à position exacte dans la rangée. Contrairement à clip-left qui rétrécit la zone de clip (et rogne à gauche si SVG > zone), anchor-left place left:X sur le SVG lui-même → pas de rognage gauche involontaire. Usage "POP billboard" (image cible): anchorLeft: 50% → bord gauche SVG au centre exact de la rangée ✓ fill-height: 130% → SVG dépasse haut et bas → P rognés ✓ clip: ON → overflow droit rogné par overflow:hidden ✓ Résultat: SVG s'étend de 50% → droite, jamais rogné à gauche ✓ */
.ccbla-motif-pop--anchor-left .ccbla-motif-pop__svg {
    left:  calc(var(--pop-anchor-left, 50%) + var(--pop-offset-x, 0px)) !important;
    right: auto !important;
}

.ccbla-motif-pop--right .ccbla-motif-pop__svg {
    right: calc(-1 * var(--pop-offset-x, 0px));
    left:  auto;
}
.ccbla-motif-pop--left .ccbla-motif-pop__svg {
    left:  calc(-1 * var(--pop-offset-x, 0px));
    right: auto;
}

/* ── Ancrage VERTICAL desktop ──────────────────────────────────────────────── */

/* haut */
.ccbla-motif-pop--av-top .ccbla-motif-pop__svg {
    top:       var(--pop-offset-y, 0px);
    bottom:    auto;
    transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
}

/* centre (défaut) */
.ccbla-motif-pop--av-center .ccbla-motif-pop__svg {
    top:       calc(50% + var(--pop-offset-y, 0px));
    bottom:    auto;
    transform: translateX(var(--pop-full-shift-x, 0)) translateY(-50%) scaleX(var(--pop-flip-x, 1));
}
/* --av-top et --av-bottom écrasent le défaut centre ci-dessus */
.ccbla-motif-pop--av-top .ccbla-motif-pop__svg {
    top:       var(--pop-offset-y, 0px);
    transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
}
.ccbla-motif-pop--av-bottom .ccbla-motif-pop__svg {
    top:       auto;
    bottom:    calc(-1 * var(--pop-offset-y, 0px));
    transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
}

/* ── Visibilité ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ccbla-motif-pop--hide-mobile  { display: none !important; }

    /* ── Flip breakpoint : override --pop-flip-x via data-attr dans la media query ── */
    .ccbla-motif-pop[data-pop-flip-mobile="true"]  { --pop-flip-x: -1; }
    .ccbla-motif-pop[data-pop-flip-mobile="false"] { --pop-flip-x:  1; }

    /* ── Fill-height mobile ── */
    .ccbla-motif-pop--fill-height-mobile .ccbla-motif-pop__svg {
        height:       var(--pop-size-h-mobile, var(--pop-size-h-tablet, var(--pop-size-h-1280, var(--pop-size-h-1440, var(--pop-size-h-1920, var(--pop-size-h-2560, var(--pop-size-h, 115%)))))));
        width:        auto;
        max-width:    none;
    }

    /* ── Anchor-left mobile ── */
    .ccbla-motif-pop--anchor-left-mobile .ccbla-motif-pop__svg {
        left:  calc(var(--pop-anchor-left-mobile, var(--pop-anchor-left-tablet, var(--pop-anchor-left-1280, var(--pop-anchor-left-1440, var(--pop-anchor-left-1920, var(--pop-anchor-left-2560, 50%)))))) + var(--pop-offset-x-mobile, var(--pop-offset-x-tablet, var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px)))))))) !important;
        right: auto !important;
    }

}
@media (min-width: 768px) {
    .ccbla-motif-pop--hide-desktop { display: none !important; }
}



/* 2560px — max-width: 2560px Cascade: hérite desktop (base). Pour QHD / ultrawide / 4K zoomé. Suffixe CSS vars: -2560 / data-attrs: data-pop-side-2560 etc. */
@media (max-width: 2560px) {

    .ccbla-motif-pop__svg { width: var(--pop-size-2560, var(--pop-size, 50vw)); }

    .ccbla-motif-pop[data-pop-side-2560="right"] .ccbla-motif-pop__svg {
        right: calc(-1 * var(--pop-offset-x-2560, var(--pop-offset-x, 0px))); left: auto;
    }
    .ccbla-motif-pop[data-pop-side-2560="left"] .ccbla-motif-pop__svg {
        left: calc(-1 * var(--pop-offset-x-2560, var(--pop-offset-x, 0px))); right: auto;
    }
    .ccbla-motif-pop--right:not([data-pop-side-2560]) .ccbla-motif-pop__svg {
        right: calc(-1 * var(--pop-offset-x-2560, var(--pop-offset-x, 0px))); left: auto;
    }
    .ccbla-motif-pop--left:not([data-pop-side-2560]) .ccbla-motif-pop__svg {
        left: calc(-1 * var(--pop-offset-x-2560, var(--pop-offset-x, 0px))); right: auto;
    }
    .ccbla-motif-pop[data-pop-av-2560="top"] .ccbla-motif-pop__svg {
        top: var(--pop-offset-y-2560, var(--pop-offset-y, 0px)); bottom: auto;
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop[data-pop-av-2560="center"] .ccbla-motif-pop__svg,
    .ccbla-motif-pop--av-center:not([data-pop-av-2560]) .ccbla-motif-pop__svg {
        top: calc(50% + var(--pop-offset-y-2560, var(--pop-offset-y, 0px))); bottom: auto;
        transform: translateX(var(--pop-full-shift-x, 0)) translateY(-50%) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop[data-pop-av-2560="bottom"] .ccbla-motif-pop__svg {
        top: auto; bottom: calc(-1 * var(--pop-offset-y-2560, var(--pop-offset-y, 0px)));
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop--av-top:not([data-pop-av-2560]) .ccbla-motif-pop__svg {
        top: var(--pop-offset-y-2560, var(--pop-offset-y, 0px)); bottom: auto;
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop--av-bottom:not([data-pop-av-2560]) .ccbla-motif-pop__svg {
        top: auto; bottom: calc(-1 * var(--pop-offset-y-2560, var(--pop-offset-y, 0px)));
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop[data-pop-flip-2560="true"]  { --pop-flip-x: -1; }
    .ccbla-motif-pop[data-pop-flip-2560="false"] { --pop-flip-x:  1; }
    .ccbla-motif-pop--fh-2560 .ccbla-motif-pop__svg {
        height: var(--pop-size-h-2560, var(--pop-size-h, 115%)); width: auto; max-width: none;
    }
    .ccbla-motif-pop--al-2560 .ccbla-motif-pop__svg {
        left: calc(var(--pop-anchor-left-2560, 50%) + var(--pop-offset-x-2560, var(--pop-offset-x, 0px))) !important;
        right: auto !important;
    }
    /* Mode stacked 2560 — v12 in-flow */
    .ccbla-motif-pop[data-pop-layout-2560="stacked"] {
        position: relative; inset: unset; display: block; overflow: hidden;
    }
    .ccbla-motif-pop[data-pop-layout-2560="stacked"] .ccbla-motif-pop__clip {
        position: relative; top: auto; right: auto; bottom: auto; left: auto;
        display: flex; overflow: visible;
    }
    .ccbla-motif-pop[data-pop-layout-2560="stacked"] .ccbla-motif-pop__svg {
        position: relative; inset: unset; display: block;
        width: var(--pop-stacked-width-2560, var(--pop-stacked-width, 100%)); height: auto; max-width: none;
    }
    .ccbla-motif-pop[data-pop-layout-2560="stacked"][data-pop-stacked-flow-2560="top"]    { order: -999; }
    .ccbla-motif-pop[data-pop-layout-2560="stacked"][data-pop-stacked-flow-2560="bottom"] { order:  999; }
    .ccbla-motif-pop[data-pop-layout-2560="stacked"][data-pop-stacked-align-2560="left"] .ccbla-motif-pop__clip   { justify-content: flex-start; }
    .ccbla-motif-pop[data-pop-layout-2560="stacked"][data-pop-stacked-align-2560="center"] .ccbla-motif-pop__clip { justify-content: center; }
    .ccbla-motif-pop[data-pop-layout-2560="stacked"][data-pop-stacked-align-2560="right"] .ccbla-motif-pop__clip  { justify-content: flex-end; }
}

/* 1920px — max-width: 1920px Cascade: hérite de ≤2560px. Les règles ≤1440px écrasent ensuite. Suffixe CSS vars: -1920 / data-attrs: data-pop-side-1920 etc. */
@media (max-width: 1920px) {

    .ccbla-motif-pop__svg { width: var(--pop-size-1920, var(--pop-size-2560, var(--pop-size, 50vw))); }

    .ccbla-motif-pop[data-pop-side-1920="right"] .ccbla-motif-pop__svg {
        right: calc(-1 * var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px)))); left: auto;
    }
    .ccbla-motif-pop[data-pop-side-1920="left"] .ccbla-motif-pop__svg {
        left: calc(-1 * var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px)))); right: auto;
    }
    .ccbla-motif-pop--right:not([data-pop-side-1920]) .ccbla-motif-pop__svg {
        right: calc(-1 * var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px)))); left: auto;
    }
    .ccbla-motif-pop--left:not([data-pop-side-1920]) .ccbla-motif-pop__svg {
        left: calc(-1 * var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px)))); right: auto;
    }
    .ccbla-motif-pop[data-pop-av-1920="top"] .ccbla-motif-pop__svg {
        top: var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px))); bottom: auto;
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop[data-pop-av-1920="center"] .ccbla-motif-pop__svg,
    .ccbla-motif-pop--av-center:not([data-pop-av-1920]) .ccbla-motif-pop__svg {
        top: calc(50% + var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px)))); bottom: auto;
        transform: translateX(var(--pop-full-shift-x, 0)) translateY(-50%) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop[data-pop-av-1920="bottom"] .ccbla-motif-pop__svg {
        top: auto; bottom: calc(-1 * var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px))));
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop--av-top:not([data-pop-av-1920]) .ccbla-motif-pop__svg {
        top: var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px))); bottom: auto;
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop--av-bottom:not([data-pop-av-1920]) .ccbla-motif-pop__svg {
        top: auto; bottom: calc(-1 * var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px))));
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop[data-pop-flip-1920="true"]  { --pop-flip-x: -1; }
    .ccbla-motif-pop[data-pop-flip-1920="false"] { --pop-flip-x:  1; }
    .ccbla-motif-pop--fh-1920 .ccbla-motif-pop__svg {
        height: var(--pop-size-h-1920, var(--pop-size-h-2560, var(--pop-size-h, 115%))); width: auto; max-width: none;
    }
    .ccbla-motif-pop--al-1920 .ccbla-motif-pop__svg {
        left: calc(var(--pop-anchor-left-1920, var(--pop-anchor-left-2560, 50%)) + var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px)))) !important;
        right: auto !important;
    }
    /* Mode stacked 1920 — v12 in-flow */
    .ccbla-motif-pop[data-pop-layout-1920="stacked"] {
        position: relative; inset: unset; display: block; overflow: hidden;
    }
    .ccbla-motif-pop[data-pop-layout-1920="stacked"] .ccbla-motif-pop__clip {
        position: relative; top: auto; right: auto; bottom: auto; left: auto;
        display: flex; overflow: visible;
    }
    .ccbla-motif-pop[data-pop-layout-1920="stacked"] .ccbla-motif-pop__svg {
        position: relative; inset: unset; display: block;
        width: var(--pop-stacked-width-1920, var(--pop-stacked-width-2560, var(--pop-stacked-width, 100%))); height: auto; max-width: none;
    }
    .ccbla-motif-pop[data-pop-layout-1920="stacked"][data-pop-stacked-flow-1920="top"]    { order: -999; }
    .ccbla-motif-pop[data-pop-layout-1920="stacked"][data-pop-stacked-flow-1920="bottom"] { order:  999; }
    .ccbla-motif-pop[data-pop-layout-1920="stacked"][data-pop-stacked-align-1920="left"] .ccbla-motif-pop__clip   { justify-content: flex-start; }
    .ccbla-motif-pop[data-pop-layout-1920="stacked"][data-pop-stacked-align-1920="center"] .ccbla-motif-pop__clip { justify-content: center; }
    .ccbla-motif-pop[data-pop-layout-1920="stacked"][data-pop-stacked-align-1920="right"] .ccbla-motif-pop__clip  { justify-content: flex-end; }
}

/* 1440px — max-width: 1440px Cascade: hérite de ≤1920px. Les règles ≤1024px (tablette) écrasent ensuite. Suffixe CSS vars: -1440 / data-attrs: data-pop-side-1440 etc. */
@media (max-width: 1440px) {

    .ccbla-motif-pop__svg { width: var(--pop-size-1440, var(--pop-size-1920, var(--pop-size-2560, var(--pop-size, 50vw)))); }

    .ccbla-motif-pop[data-pop-side-1440="right"] .ccbla-motif-pop__svg {
        right: calc(-1 * var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px))))); left: auto;
    }
    .ccbla-motif-pop[data-pop-side-1440="left"] .ccbla-motif-pop__svg {
        left: calc(-1 * var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px))))); right: auto;
    }
    .ccbla-motif-pop--right:not([data-pop-side-1440]) .ccbla-motif-pop__svg {
        right: calc(-1 * var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px))))); left: auto;
    }
    .ccbla-motif-pop--left:not([data-pop-side-1440]) .ccbla-motif-pop__svg {
        left: calc(-1 * var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px))))); right: auto;
    }
    .ccbla-motif-pop[data-pop-av-1440="top"] .ccbla-motif-pop__svg {
        top: var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px)))); bottom: auto;
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop[data-pop-av-1440="center"] .ccbla-motif-pop__svg,
    .ccbla-motif-pop--av-center:not([data-pop-av-1440]) .ccbla-motif-pop__svg {
        top: calc(50% + var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px))))); bottom: auto;
        transform: translateX(var(--pop-full-shift-x, 0)) translateY(-50%) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop[data-pop-av-1440="bottom"] .ccbla-motif-pop__svg {
        top: auto; bottom: calc(-1 * var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px)))));
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop--av-top:not([data-pop-av-1440]) .ccbla-motif-pop__svg {
        top: var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px)))); bottom: auto;
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop--av-bottom:not([data-pop-av-1440]) .ccbla-motif-pop__svg {
        top: auto; bottom: calc(-1 * var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px)))));
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop[data-pop-flip-1440="true"]  { --pop-flip-x: -1; }
    .ccbla-motif-pop[data-pop-flip-1440="false"] { --pop-flip-x:  1; }
    .ccbla-motif-pop--fh-1440 .ccbla-motif-pop__svg {
        height: var(--pop-size-h-1440, var(--pop-size-h-1920, var(--pop-size-h-2560, var(--pop-size-h, 115%)))); width: auto; max-width: none;
    }
    .ccbla-motif-pop--al-1440 .ccbla-motif-pop__svg {
        left: calc(var(--pop-anchor-left-1440, var(--pop-anchor-left-1920, var(--pop-anchor-left-2560, 50%))) + var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px))))) !important;
        right: auto !important;
    }
    /* Mode stacked 1440 — v12 in-flow */
    .ccbla-motif-pop[data-pop-layout-1440="stacked"] {
        position: relative; inset: unset; display: block; overflow: hidden;
    }
    .ccbla-motif-pop[data-pop-layout-1440="stacked"] .ccbla-motif-pop__clip {
        position: relative; top: auto; right: auto; bottom: auto; left: auto;
        display: flex; overflow: visible;
    }
    .ccbla-motif-pop[data-pop-layout-1440="stacked"] .ccbla-motif-pop__svg {
        position: relative; inset: unset; display: block;
        width: var(--pop-stacked-width-1440, var(--pop-stacked-width-1920, var(--pop-stacked-width-2560, var(--pop-stacked-width, 100%)))); height: auto; max-width: none;
    }
    .ccbla-motif-pop[data-pop-layout-1440="stacked"][data-pop-stacked-flow-1440="top"]    { order: -999; }
    .ccbla-motif-pop[data-pop-layout-1440="stacked"][data-pop-stacked-flow-1440="bottom"] { order:  999; }
    .ccbla-motif-pop[data-pop-layout-1440="stacked"][data-pop-stacked-align-1440="left"] .ccbla-motif-pop__clip   { justify-content: flex-start; }
    .ccbla-motif-pop[data-pop-layout-1440="stacked"][data-pop-stacked-align-1440="center"] .ccbla-motif-pop__clip { justify-content: center; }
    .ccbla-motif-pop[data-pop-layout-1440="stacked"][data-pop-stacked-align-1440="right"] .ccbla-motif-pop__clip  { justify-content: flex-end; }
}

/* 1280px — max-width: 1280px */
@media (max-width: 1280px) {

    .ccbla-motif-pop__svg { width: var(--pop-size-1280, var(--pop-size-1440, var(--pop-size-1920, var(--pop-size-2560, var(--pop-size, 50vw))))); }

    .ccbla-motif-pop[data-pop-side-1280="right"] .ccbla-motif-pop__svg {
        right: calc(-1 * var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px)))))); left: auto;
    }
    .ccbla-motif-pop[data-pop-side-1280="left"] .ccbla-motif-pop__svg {
        left: calc(-1 * var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px)))))); right: auto;
    }
    .ccbla-motif-pop--right:not([data-pop-side-1280]) .ccbla-motif-pop__svg {
        right: calc(-1 * var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px)))))); left: auto;
    }
    .ccbla-motif-pop--left:not([data-pop-side-1280]) .ccbla-motif-pop__svg {
        left: calc(-1 * var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px)))))); right: auto;
    }
    .ccbla-motif-pop[data-pop-av-1280="top"] .ccbla-motif-pop__svg,
    .ccbla-motif-pop--av-top:not([data-pop-av-1280]) .ccbla-motif-pop__svg {
        top: var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px))))); bottom: auto;
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop[data-pop-av-1280="center"] .ccbla-motif-pop__svg,
    .ccbla-motif-pop--av-center:not([data-pop-av-1280]) .ccbla-motif-pop__svg {
        top: calc(50% + var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px)))))); bottom: auto;
        transform: translateX(var(--pop-full-shift-x, 0)) translateY(-50%) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop[data-pop-av-1280="bottom"] .ccbla-motif-pop__svg,
    .ccbla-motif-pop--av-bottom:not([data-pop-av-1280]) .ccbla-motif-pop__svg {
        top: auto; bottom: calc(-1 * var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px))))));
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop[data-pop-flip-1280="true"]  { --pop-flip-x: -1; }
    .ccbla-motif-pop[data-pop-flip-1280="false"] { --pop-flip-x:  1; }
    .ccbla-motif-pop--fh-1280 .ccbla-motif-pop__svg {
        height: var(--pop-size-h-1280, var(--pop-size-h-1440, var(--pop-size-h-1920, var(--pop-size-h-2560, var(--pop-size-h, 115%))))); width: auto; max-width: none;
    }
    .ccbla-motif-pop--al-1280 .ccbla-motif-pop__svg {
        left: calc(var(--pop-anchor-left-1280, var(--pop-anchor-left-1440, var(--pop-anchor-left-1920, var(--pop-anchor-left-2560, 50%)))) + var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px)))))) !important;
        right: auto !important;
    }
    /* Mode stacked 1280 — v12 in-flow */
    .ccbla-motif-pop[data-pop-layout-1280="stacked"] {
        position: relative; inset: unset; display: block; overflow: hidden;
    }
    .ccbla-motif-pop[data-pop-layout-1280="stacked"] .ccbla-motif-pop__clip {
        position: relative; top: auto; right: auto; bottom: auto; left: auto;
        display: flex; overflow: visible;
    }
    .ccbla-motif-pop[data-pop-layout-1280="stacked"] .ccbla-motif-pop__svg {
        position: relative; inset: unset; display: block;
        width: var(--pop-stacked-width-1280, var(--pop-stacked-width-1440, var(--pop-stacked-width-1920, var(--pop-stacked-width-2560, var(--pop-stacked-width, 100%))))); height: auto; max-width: none;
    }
    .ccbla-motif-pop[data-pop-layout-1280="stacked"][data-pop-stacked-flow-1280="top"]    { order: -999; }
    .ccbla-motif-pop[data-pop-layout-1280="stacked"][data-pop-stacked-flow-1280="bottom"] { order:  999; }
    .ccbla-motif-pop[data-pop-layout-1280="stacked"][data-pop-stacked-align-1280="left"] .ccbla-motif-pop__clip   { justify-content: flex-start; }
    .ccbla-motif-pop[data-pop-layout-1280="stacked"][data-pop-stacked-align-1280="center"] .ccbla-motif-pop__clip { justify-content: center; }
    .ccbla-motif-pop[data-pop-layout-1280="stacked"][data-pop-stacked-align-1280="right"] .ccbla-motif-pop__clip  { justify-content: flex-end; }
}

/* TABLETTE (768–1024px) data-pop-side-tablet → override côté data-pop-av-tablet → override ancrage vertical --pop-size-tablet, --pop-offset-x-tablet, --pop-offset-y-tablet */
@media (max-width: 1024px) {

    /* Taille tablette */
    .ccbla-motif-pop__svg {
        width: var(--pop-size-tablet, var(--pop-size-1280, var(--pop-size-1440, var(--pop-size-1920, var(--pop-size-2560, var(--pop-size, 50vw))))));
    }

    /* ── Côté tablette ── */
    .ccbla-motif-pop[data-pop-side-tablet="right"] .ccbla-motif-pop__svg {
        right: calc(-1 * var(--pop-offset-x-tablet, var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px)))))));
        left:  auto;
    }
    .ccbla-motif-pop[data-pop-side-tablet="left"] .ccbla-motif-pop__svg {
        left:  calc(-1 * var(--pop-offset-x-tablet, var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px)))))));
        right: auto;
    }
    /* Pas de data-pop-side-tablet → hérite classe desktop + offset tablette */
    .ccbla-motif-pop--right:not([data-pop-side-tablet]) .ccbla-motif-pop__svg {
        right: calc(-1 * var(--pop-offset-x-tablet, var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px)))))));
        left:  auto;
    }
    .ccbla-motif-pop--left:not([data-pop-side-tablet]) .ccbla-motif-pop__svg {
        left:  calc(-1 * var(--pop-offset-x-tablet, var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px)))))));
        right: auto;
    }

    /* ── Ancrage vertical tablette ── */
    .ccbla-motif-pop[data-pop-av-tablet="top"] .ccbla-motif-pop__svg {
        top:       var(--pop-offset-y-tablet, var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px))))));
        bottom:    auto;
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop[data-pop-av-tablet="center"] .ccbla-motif-pop__svg {
        top:       calc(50% + var(--pop-offset-y-tablet, var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px)))))));
        bottom:    auto;
        transform: translateX(var(--pop-full-shift-x, 0)) translateY(-50%) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop[data-pop-av-tablet="bottom"] .ccbla-motif-pop__svg {
        top:       auto;
        bottom:    calc(-1 * var(--pop-offset-y-tablet, var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px)))))));
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }
    /* Pas de data-pop-av-tablet → hérite classe desktop + offset tablette */
    .ccbla-motif-pop--av-top:not([data-pop-av-tablet]) .ccbla-motif-pop__svg {
        top:       var(--pop-offset-y-tablet, var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px))))));
        bottom:    auto;
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop--av-center:not([data-pop-av-tablet]) .ccbla-motif-pop__svg {
        top:       calc(50% + var(--pop-offset-y-tablet, var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px)))))));
        bottom:    auto;
        transform: translateX(var(--pop-full-shift-x, 0)) translateY(-50%) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop--av-bottom:not([data-pop-av-tablet]) .ccbla-motif-pop__svg {
        top:       auto;
        bottom:    calc(-1 * var(--pop-offset-y-tablet, var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px)))))));
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }

    /* ── Flip breakpoint : override --pop-flip-x via data-attr dans la media query ── */
    .ccbla-motif-pop[data-pop-flip-tablet="true"]  { --pop-flip-x: -1; }
    .ccbla-motif-pop[data-pop-flip-tablet="false"] { --pop-flip-x:  1; }

    /* ── Fill-height tablette ── */
    .ccbla-motif-pop--fill-height-tablet .ccbla-motif-pop__svg {
        height:       var(--pop-size-h-tablet, var(--pop-size-h-1280, var(--pop-size-h-1440, var(--pop-size-h-1920, var(--pop-size-h-2560, var(--pop-size-h, 115%))))));
        width:        auto;
        max-width:    none;
    }

    /* ── Anchor-left tablette ── */
    .ccbla-motif-pop--anchor-left-tablet .ccbla-motif-pop__svg {
        left:  calc(var(--pop-anchor-left-tablet, var(--pop-anchor-left-1280, var(--pop-anchor-left-1440, var(--pop-anchor-left-1920, var(--pop-anchor-left-2560, 50%))))) + var(--pop-offset-x-tablet, var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px))))))) !important;
        right: auto !important;
    }

}

/* MOBILE (≤768px) data-pop-side-mobile → override côté data-pop-av-mobile → override ancrage vertical --pop-size-mobile, --pop-offset-x-mobile, --pop-offset-y-mobile */
@media (max-width: 768px) {

    /* Taille mobile */
    .ccbla-motif-pop__svg {
        width: var(--pop-size-mobile, var(--pop-size-tablet, var(--pop-size-1280, var(--pop-size-1440, var(--pop-size-1920, var(--pop-size-2560, var(--pop-size, 50vw)))))));
    }

    /* ── Côté mobile ── */
    .ccbla-motif-pop[data-pop-side-mobile="right"] .ccbla-motif-pop__svg {
        right: calc(-1 * var(--pop-offset-x-mobile, var(--pop-offset-x-tablet, var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px))))))));
        left:  auto;
    }
    .ccbla-motif-pop[data-pop-side-mobile="left"] .ccbla-motif-pop__svg {
        left:  calc(-1 * var(--pop-offset-x-mobile, var(--pop-offset-x-tablet, var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px))))))));
        right: auto;
    }
    /* Pas de data-pop-side-mobile → hérite classe desktop */
    .ccbla-motif-pop--right:not([data-pop-side-mobile]) .ccbla-motif-pop__svg {
        right: calc(-1 * var(--pop-offset-x-mobile, var(--pop-offset-x-tablet, var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px))))))));
        left:  auto;
    }
    .ccbla-motif-pop--left:not([data-pop-side-mobile]) .ccbla-motif-pop__svg {
        left:  calc(-1 * var(--pop-offset-x-mobile, var(--pop-offset-x-tablet, var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px))))))));
        right: auto;
    }

    /* ── Ancrage vertical mobile ── */
    .ccbla-motif-pop[data-pop-av-mobile="top"] .ccbla-motif-pop__svg {
        top:       var(--pop-offset-y-mobile, var(--pop-offset-y-tablet, var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px)))))));
        bottom:    auto;
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop[data-pop-av-mobile="center"] .ccbla-motif-pop__svg {
        top:       calc(50% + var(--pop-offset-y-mobile, var(--pop-offset-y-tablet, var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px))))))));
        bottom:    auto;
        transform: translateX(var(--pop-full-shift-x, 0)) translateY(-50%) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop[data-pop-av-mobile="bottom"] .ccbla-motif-pop__svg {
        top:       auto;
        bottom:    calc(-1 * var(--pop-offset-y-mobile, var(--pop-offset-y-tablet, var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px))))))));
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }
    /* Pas de data-pop-av-mobile → hérite classe desktop */
    .ccbla-motif-pop--av-top:not([data-pop-av-mobile]) .ccbla-motif-pop__svg {
        top:       var(--pop-offset-y-mobile, var(--pop-offset-y-tablet, var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px)))))));
        bottom:    auto;
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop--av-center:not([data-pop-av-mobile]) .ccbla-motif-pop__svg {
        top:       calc(50% + var(--pop-offset-y-mobile, var(--pop-offset-y-tablet, var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px))))))));
        bottom:    auto;
        transform: translateX(var(--pop-full-shift-x, 0)) translateY(-50%) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop--av-bottom:not([data-pop-av-mobile]) .ccbla-motif-pop__svg {
        top:       auto;
        bottom:    calc(-1 * var(--pop-offset-y-mobile, var(--pop-offset-y-tablet, var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px))))))));
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }
}

/* PETIT MOBILE (≤600px) — WP breakpoint natif Vient APRÈS le bloc 768px → surcharge la cascade mobile si small est défini. Fallback chain: --pop-size-small → --pop-size-mobile → --pop-size-tablet → --pop-size-1280 → --pop-size-1440 → --pop-size-2560 → --pop-size data-pop-side-small / data-pop-av-small / data-pop-flip-small */
@media (max-width: 600px) {
    .ccbla-motif-pop--hide-small { display: none !important; }

    .ccbla-motif-pop[data-pop-flip-small="true"]  { --pop-flip-x: -1; }
    .ccbla-motif-pop[data-pop-flip-small="false"] { --pop-flip-x:  1; }

    /* ── Fill-height petit mobile ── */
    .ccbla-motif-pop--fill-height-small .ccbla-motif-pop__svg {
        height:    var(--pop-size-h-small, var(--pop-size-h-mobile, var(--pop-size-h-tablet, var(--pop-size-h-1280, var(--pop-size-h-1440, var(--pop-size-h-1920, var(--pop-size-h-2560, var(--pop-size-h, 115%))))))));
        width:     auto;
        max-width: none;
    }

    /* ── Anchor-left petit mobile ── */
    .ccbla-motif-pop--anchor-left-small .ccbla-motif-pop__svg {
        left:  calc(var(--pop-anchor-left-small, var(--pop-anchor-left-mobile, var(--pop-anchor-left-tablet, var(--pop-anchor-left-1280, var(--pop-anchor-left-1440, var(--pop-anchor-left-1920, var(--pop-anchor-left-2560, 50%))))))) + var(--pop-offset-x-small, var(--pop-offset-x-mobile, var(--pop-offset-x-tablet, var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px))))))))) !important;
        right: auto !important;
    }

    /* ── Taille petit mobile ── */
    .ccbla-motif-pop__svg {
        width: var(--pop-size-small, var(--pop-size-mobile, var(--pop-size-tablet, var(--pop-size-1280, var(--pop-size-1440, var(--pop-size-1920, var(--pop-size-2560, var(--pop-size, 50vw))))))));
    }

    /* ── Côté petit mobile ── */
    .ccbla-motif-pop[data-pop-side-small="right"] .ccbla-motif-pop__svg {
        right: calc(-1 * var(--pop-offset-x-small, var(--pop-offset-x-mobile, var(--pop-offset-x-tablet, var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px)))))))));
        left:  auto;
    }
    .ccbla-motif-pop[data-pop-side-small="left"] .ccbla-motif-pop__svg {
        left:  calc(-1 * var(--pop-offset-x-small, var(--pop-offset-x-mobile, var(--pop-offset-x-tablet, var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px)))))))));
        right: auto;
    }
    .ccbla-motif-pop--right:not([data-pop-side-small]) .ccbla-motif-pop__svg {
        right: calc(-1 * var(--pop-offset-x-small, var(--pop-offset-x-mobile, var(--pop-offset-x-tablet, var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px)))))))));
        left:  auto;
    }
    .ccbla-motif-pop--left:not([data-pop-side-small]) .ccbla-motif-pop__svg {
        left:  calc(-1 * var(--pop-offset-x-small, var(--pop-offset-x-mobile, var(--pop-offset-x-tablet, var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px)))))))));
        right: auto;
    }

    /* ── Ancrage vertical petit mobile ── */
    .ccbla-motif-pop[data-pop-av-small="top"] .ccbla-motif-pop__svg {
        top:       var(--pop-offset-y-small, var(--pop-offset-y-mobile, var(--pop-offset-y-tablet, var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px))))))));
        bottom:    auto;
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop[data-pop-av-small="center"] .ccbla-motif-pop__svg {
        top:       calc(50% + var(--pop-offset-y-small, var(--pop-offset-y-mobile, var(--pop-offset-y-tablet, var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px)))))))));
        bottom:    auto;
        transform: translateX(var(--pop-full-shift-x, 0)) translateY(-50%) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop[data-pop-av-small="bottom"] .ccbla-motif-pop__svg {
        top:       auto;
        bottom:    calc(-1 * var(--pop-offset-y-small, var(--pop-offset-y-mobile, var(--pop-offset-y-tablet, var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px)))))))));
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop--av-top:not([data-pop-av-small]) .ccbla-motif-pop__svg {
        top:       var(--pop-offset-y-small, var(--pop-offset-y-mobile, var(--pop-offset-y-tablet, var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px))))))));
        bottom:    auto;
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop--av-center:not([data-pop-av-small]) .ccbla-motif-pop__svg {
        top:       calc(50% + var(--pop-offset-y-small, var(--pop-offset-y-mobile, var(--pop-offset-y-tablet, var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px)))))))));
        bottom:    auto;
        transform: translateX(var(--pop-full-shift-x, 0)) translateY(-50%) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop--av-bottom:not([data-pop-av-small]) .ccbla-motif-pop__svg {
        top:       auto;
        bottom:    calc(-1 * var(--pop-offset-y-small, var(--pop-offset-y-mobile, var(--pop-offset-y-tablet, var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px)))))))));
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }
}

/* ÉDITEUR */
.ccbla-motif-pop-editor-wrap {
    display:    block;
    width:      100%;
    background: transparent; /* laisse voir la couleur réelle de la row */
    cursor:     default;
}
.ccbla-motif-pop-editor-wrap.is-selected .ccbla-motif-pop-preview-banner {
    outline:        2px solid #006BA1;
    outline-offset: 2px;
    border-radius:  6px;
}

/* SVG CUSTOM — upload media library Rendu via inline PHP (fill="currentColor" préservé). L'élément hérite du positionnement et des dimensions de.ccbla-motif-pop__svg. */
.ccbla-motif-pop__svg.ccbla-motif-pop__svg--custom {
    /* Hérite déjà de.ccbla-motif-pop__svg. Ne surtout pas réécrire width/height ici, sinon les tailles responsives (tablet/mobile/small) restent bloquées sur la valeur desktop. */
    max-width: none;
}
.ccbla-motif-pop--fill-height .ccbla-motif-pop__svg.ccbla-motif-pop__svg--custom {
    max-width: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   MODE EMPILÉ (stacked) — layout = 'stacked' — v12 IN-FLOW
   Le bloc sort du flux overlay (position:absolute) et prend sa place
   naturellement dans la colonne, sous le contenu.

   Architecture :
     .ccbla-motif-pop--stacked             : wrapper display:block (flux normal)
     .ccbla-motif-pop__clip--stacked       : conteneur flex pour l'alignement
     .ccbla-motif-pop--stacked .ccbla-motif-pop__svg : position:relative, width = var
     --pop-stacked-width : largeur du SVG (ex. '80%', '100%')
     --pop-flip-x        : 1 ou -1 (miroir)

   Alignements via classes modificatrices (justify-content ne se CSS-variable pas) :
     .ccbla-motif-pop--stacked-left   → justify-content: flex-start
     .ccbla-motif-pop--stacked-center → justify-content: center
     .ccbla-motif-pop--stacked-right  → justify-content: flex-end
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Wrapper ──────────────────────────────────────────────────────────── */
.ccbla-motif-pop--stacked {
    position:       relative;   /* sort de l'inset:0 overlay */
    inset:          unset;
    pointer-events: none;
    z-index:        var(--pop-z, 0);
    color:          var(--pop-color, var(--wp--preset--color--pop-pastel-lemon, #fff7b2));
    display:        block;
    overflow:       hidden;     /* rogner si SVG > conteneur */
}

/* Placement dans le flux quand le parent est flex ou grid */
.ccbla-motif-pop--stacked-flow-top    { order: -999; }
.ccbla-motif-pop--stacked-flow-bottom { order:  999; }

/* ─── Clip / conteneur flex (alignement) ─────────────────────────────── */
.ccbla-motif-pop__clip--stacked {
    position: relative;
    inset:    unset;
    overflow: visible;          /* pas de double clip */
    display:  flex;
}

/* Alignements */
.ccbla-motif-pop--stacked-left   .ccbla-motif-pop__clip--stacked { justify-content: flex-start; }
.ccbla-motif-pop--stacked-center .ccbla-motif-pop__clip--stacked { justify-content: center;     }
.ccbla-motif-pop--stacked-right  .ccbla-motif-pop__clip--stacked { justify-content: flex-end;   }

/* ─── SVG empilé ─────────────────────────────────────────────────────── */
.ccbla-motif-pop--stacked .ccbla-motif-pop__svg {
    position:   relative;
    inset:      unset;
    display:    block;
    width:      var(--pop-stacked-width, 100%);
    height:     auto;
    max-width:  none;
    transform:  scaleX(var(--pop-flip-x, 1));
    transform-origin: center top;
}

/* SVG custom en mode stacked */
.ccbla-motif-pop--stacked .ccbla-motif-pop__svg--custom {
    width:  var(--pop-stacked-width, 100%);
    height: auto;
}




/* MODE EMPILÉ RESPONSIVE (tablette / mobile / petit mobile) Le wrapper reste en overlay sur desktop, mais peut basculer en empilé breakpoint par breakpoint via data-pop-layout-*. */

@media (max-width: 1024px) {

    /* ── Restauration overlay explicite à la tablette Cas d'usage: layout1280="stacked" + layoutTablet="overlay" */
    .ccbla-motif-pop[data-pop-layout-tablet="overlay"] {
        position: absolute !important;
        inset: 0 !important;
        display: block;
        overflow: visible;
    }
    .ccbla-motif-pop[data-pop-layout-tablet="overlay"] .ccbla-motif-pop__clip {
        position: absolute !important;
        top: 0 !important;
        right: var(--pop-clip-right, 0px) !important;
        bottom: 0 !important;
        left: var(--pop-clip-left, 0px) !important;
        display: block;
        overflow: visible;
    }
    .ccbla-motif-pop[data-pop-layout-tablet="overlay"].ccbla-motif-pop--clip .ccbla-motif-pop__clip {
        overflow: hidden !important;
    }

    /* Mode stacked tablet — v12 in-flow */
    .ccbla-motif-pop[data-pop-layout-tablet="stacked"] {
        position: relative; inset: unset; display: block; overflow: hidden;
    }
    .ccbla-motif-pop[data-pop-layout-tablet="stacked"][data-pop-stacked-flow-tablet="top"]    { order: -999; }
    .ccbla-motif-pop[data-pop-layout-tablet="stacked"][data-pop-stacked-flow-tablet="bottom"] { order:  999; }
    .ccbla-motif-pop[data-pop-layout-tablet="stacked"] .ccbla-motif-pop__clip {
        position: relative; top: auto; right: auto; bottom: auto; left: auto;
        display: flex; overflow: visible;
    }
    .ccbla-motif-pop[data-pop-layout-tablet="stacked"][data-pop-stacked-align-tablet="left"] .ccbla-motif-pop__clip   { justify-content: flex-start; }
    .ccbla-motif-pop[data-pop-layout-tablet="stacked"][data-pop-stacked-align-tablet="center"] .ccbla-motif-pop__clip { justify-content: center; }
    .ccbla-motif-pop[data-pop-layout-tablet="stacked"][data-pop-stacked-align-tablet="right"] .ccbla-motif-pop__clip  { justify-content: flex-end; }
    .ccbla-motif-pop[data-pop-layout-tablet="stacked"] .ccbla-motif-pop__svg {
        position: relative; inset: unset;
        left: auto; right: auto; top: auto; bottom: auto;
        display: block;
        width: var(--pop-stacked-width-tablet, var(--pop-stacked-width-1280, var(--pop-stacked-width-1440, var(--pop-stacked-width-1920, var(--pop-stacked-width-2560, var(--pop-stacked-width, 100%))))));
        height: auto; max-width: none;
        transform-origin: center top;
    }
}

@media (max-width: 768px) {

    /* ── Restauration overlay explicite au mobile ─────────────────────── */
    .ccbla-motif-pop[data-pop-layout-mobile="overlay"] {
        position: absolute !important;
        inset: 0 !important;
        display: block;
        overflow: visible;
    }
    .ccbla-motif-pop[data-pop-layout-mobile="overlay"] .ccbla-motif-pop__clip {
        position: absolute !important;
        top: 0 !important;
        right: var(--pop-clip-right, 0px) !important;
        bottom: 0 !important;
        left: var(--pop-clip-left, 0px) !important;
        display: block;
        overflow: visible;
    }
    .ccbla-motif-pop[data-pop-layout-mobile="overlay"].ccbla-motif-pop--clip .ccbla-motif-pop__clip {
        overflow: hidden !important;
    }

    /* Mode stacked mobile — v12 in-flow */
    .ccbla-motif-pop[data-pop-layout-mobile="stacked"] {
        position: relative; inset: unset; display: block; overflow: hidden;
    }
    .ccbla-motif-pop[data-pop-layout-mobile="stacked"][data-pop-stacked-flow-mobile="top"]    { order: -999; }
    .ccbla-motif-pop[data-pop-layout-mobile="stacked"][data-pop-stacked-flow-mobile="bottom"] { order:  999; }
    .ccbla-motif-pop[data-pop-layout-mobile="stacked"] .ccbla-motif-pop__clip {
        position: relative; top: auto; right: auto; bottom: auto; left: auto;
        display: flex; overflow: visible;
    }
    .ccbla-motif-pop[data-pop-layout-mobile="stacked"][data-pop-stacked-align-mobile="left"] .ccbla-motif-pop__clip   { justify-content: flex-start; }
    .ccbla-motif-pop[data-pop-layout-mobile="stacked"][data-pop-stacked-align-mobile="center"] .ccbla-motif-pop__clip { justify-content: center; }
    .ccbla-motif-pop[data-pop-layout-mobile="stacked"][data-pop-stacked-align-mobile="right"] .ccbla-motif-pop__clip  { justify-content: flex-end; }
    .ccbla-motif-pop[data-pop-layout-mobile="stacked"] .ccbla-motif-pop__svg {
        position: relative; inset: unset;
        left: auto; right: auto; top: auto; bottom: auto;
        display: block;
        width: var(--pop-stacked-width-mobile, var(--pop-stacked-width-tablet, var(--pop-stacked-width-1280, var(--pop-stacked-width-1440, var(--pop-stacked-width-1920, var(--pop-stacked-width-2560, var(--pop-stacked-width, 100%)))))));
        height: auto; max-width: none;
        transform-origin: center top;
    }
}

@media (max-width: 600px) {

    /* ── Restauration overlay explicite au petit mobile ───────────────── */
    .ccbla-motif-pop[data-pop-layout-small="overlay"] {
        position: absolute !important;
        inset: 0 !important;
        display: block;
        overflow: visible;
    }
    .ccbla-motif-pop[data-pop-layout-small="overlay"] .ccbla-motif-pop__clip {
        position: absolute !important;
        top: 0 !important;
        right: var(--pop-clip-right, 0px) !important;
        bottom: 0 !important;
        left: var(--pop-clip-left, 0px) !important;
        display: block;
        overflow: visible;
    }
    .ccbla-motif-pop[data-pop-layout-small="overlay"].ccbla-motif-pop--clip .ccbla-motif-pop__clip {
        overflow: hidden !important;
    }

    /* Mode stacked small — v12 in-flow */
    .ccbla-motif-pop[data-pop-layout-small="stacked"] {
        position: relative; inset: unset; display: block; overflow: hidden;
    }
    .ccbla-motif-pop[data-pop-layout-small="stacked"][data-pop-stacked-flow-small="top"]    { order: -999; }
    .ccbla-motif-pop[data-pop-layout-small="stacked"][data-pop-stacked-flow-small="bottom"] { order:  999; }
    .ccbla-motif-pop[data-pop-layout-small="stacked"] .ccbla-motif-pop__clip {
        position: relative; top: auto; right: auto; bottom: auto; left: auto;
        display: flex; overflow: visible;
    }
    .ccbla-motif-pop[data-pop-layout-small="stacked"][data-pop-stacked-align-small="left"] .ccbla-motif-pop__clip   { justify-content: flex-start; }
    .ccbla-motif-pop[data-pop-layout-small="stacked"][data-pop-stacked-align-small="center"] .ccbla-motif-pop__clip { justify-content: center; }
    .ccbla-motif-pop[data-pop-layout-small="stacked"][data-pop-stacked-align-small="right"] .ccbla-motif-pop__clip  { justify-content: flex-end; }
    .ccbla-motif-pop[data-pop-layout-small="stacked"] .ccbla-motif-pop__svg {
        position: relative; inset: unset;
        left: auto; right: auto; top: auto; bottom: auto;
        display: block;
        width: var(--pop-stacked-width-small, var(--pop-stacked-width-mobile, var(--pop-stacked-width-tablet, var(--pop-stacked-width-1280, var(--pop-stacked-width-1440, var(--pop-stacked-width-1920, var(--pop-stacked-width-2560, var(--pop-stacked-width, 100%))))))));
        height: auto; max-width: none;
        transform-origin: center top;
    }
}


/* ≤ 375px — palier autonome Hérite de ≤600px puis surcharge uniquement si des valeurs 375 sont définies. Fallback chain: 375 → small → mobile → tablet → 1280 → 1440 → 1920 → 2560 → desktop */
@media (max-width: 375px) {
    .ccbla-motif-pop--hide-small { display: none !important; }

    .ccbla-motif-pop[data-pop-flip-375="true"]  { --pop-flip-x: -1; }
    .ccbla-motif-pop[data-pop-flip-375="false"] { --pop-flip-x:  1; }

    .ccbla-motif-pop--fill-height-375 .ccbla-motif-pop__svg {
        height:    var(--pop-size-h-375, var(--pop-size-h-small, var(--pop-size-h-mobile, var(--pop-size-h-tablet, var(--pop-size-h-1280, var(--pop-size-h-1440, var(--pop-size-h-1920, var(--pop-size-h-2560, var(--pop-size-h, 115%)))))))));
        width:     auto;
        max-width: none;
    }

    .ccbla-motif-pop--anchor-left-375 .ccbla-motif-pop__svg {
        left:  calc(var(--pop-anchor-left-375, var(--pop-anchor-left-small, var(--pop-anchor-left-mobile, var(--pop-anchor-left-tablet, var(--pop-anchor-left-1280, var(--pop-anchor-left-1440, var(--pop-anchor-left-1920, var(--pop-anchor-left-2560, 50%)))))))) + var(--pop-offset-x-375, var(--pop-offset-x-small, var(--pop-offset-x-mobile, var(--pop-offset-x-tablet, var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px)))))))))) !important;
        right: auto !important;
    }

    .ccbla-motif-pop__svg {
        width: var(--pop-size-375, var(--pop-size-small, var(--pop-size-mobile, var(--pop-size-tablet, var(--pop-size-1280, var(--pop-size-1440, var(--pop-size-1920, var(--pop-size-2560, var(--pop-size, 50vw)))))))));
    }

    .ccbla-motif-pop[data-pop-side-375="right"] .ccbla-motif-pop__svg {
        right: calc(-1 * var(--pop-offset-x-375, var(--pop-offset-x-small, var(--pop-offset-x-mobile, var(--pop-offset-x-tablet, var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px))))))))));
        left:  auto;
    }
    .ccbla-motif-pop[data-pop-side-375="left"] .ccbla-motif-pop__svg {
        left:  calc(-1 * var(--pop-offset-x-375, var(--pop-offset-x-small, var(--pop-offset-x-mobile, var(--pop-offset-x-tablet, var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px))))))))));
        right: auto;
    }
    .ccbla-motif-pop--right:not([data-pop-side-375]) .ccbla-motif-pop__svg {
        right: calc(-1 * var(--pop-offset-x-375, var(--pop-offset-x-small, var(--pop-offset-x-mobile, var(--pop-offset-x-tablet, var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px))))))))));
        left:  auto;
    }
    .ccbla-motif-pop--left:not([data-pop-side-375]) .ccbla-motif-pop__svg {
        left:  calc(-1 * var(--pop-offset-x-375, var(--pop-offset-x-small, var(--pop-offset-x-mobile, var(--pop-offset-x-tablet, var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px))))))))));
        right: auto;
    }

    .ccbla-motif-pop[data-pop-av-375="top"] .ccbla-motif-pop__svg {
        top:       var(--pop-offset-y-375, var(--pop-offset-y-small, var(--pop-offset-y-mobile, var(--pop-offset-y-tablet, var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px)))))))));
        bottom:    auto;
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop[data-pop-av-375="center"] .ccbla-motif-pop__svg {
        top:       calc(50% + var(--pop-offset-y-375, var(--pop-offset-y-small, var(--pop-offset-y-mobile, var(--pop-offset-y-tablet, var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px))))))))));
        bottom:    auto;
        transform: translateX(var(--pop-full-shift-x, 0)) translateY(-50%) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop[data-pop-av-375="bottom"] .ccbla-motif-pop__svg {
        top:       auto;
        bottom:    calc(-1 * var(--pop-offset-y-375, var(--pop-offset-y-small, var(--pop-offset-y-mobile, var(--pop-offset-y-tablet, var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px))))))))));
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop--av-top:not([data-pop-av-375]) .ccbla-motif-pop__svg {
        top:       var(--pop-offset-y-375, var(--pop-offset-y-small, var(--pop-offset-y-mobile, var(--pop-offset-y-tablet, var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px)))))))));
        bottom:    auto;
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop--av-center:not([data-pop-av-375]) .ccbla-motif-pop__svg {
        top:       calc(50% + var(--pop-offset-y-375, var(--pop-offset-y-small, var(--pop-offset-y-mobile, var(--pop-offset-y-tablet, var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px))))))))));
        bottom:    auto;
        transform: translateX(var(--pop-full-shift-x, 0)) translateY(-50%) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop--av-bottom:not([data-pop-av-375]) .ccbla-motif-pop__svg {
        top:       auto;
        bottom:    calc(-1 * var(--pop-offset-y-375, var(--pop-offset-y-small, var(--pop-offset-y-mobile, var(--pop-offset-y-tablet, var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px))))))))));
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1));
    }

    .ccbla-motif-pop[data-pop-layout-375="overlay"] {
        position: absolute !important;
        inset: 0 !important;
        display: block;
        overflow: visible;
    }
    .ccbla-motif-pop[data-pop-layout-375="overlay"] .ccbla-motif-pop__clip {
        position: absolute !important;
        top: 0 !important;
        right: var(--pop-clip-right, 0px) !important;
        bottom: 0 !important;
        left: var(--pop-clip-left, 0px) !important;
        display: block;
        overflow: visible;
    }
    .ccbla-motif-pop[data-pop-layout-375="overlay"].ccbla-motif-pop--clip .ccbla-motif-pop__clip {
        overflow: visible !important;
    }
    .ccbla-motif-pop[data-pop-layout-375="overlay"] .ccbla-motif-pop__svg {
        position: absolute !important;
        inset: unset !important;
        display: block;
        height: auto;
        max-width: none;
        width: var(--pop-size-375, var(--pop-size-small, var(--pop-size-mobile, var(--pop-size-tablet, var(--pop-size-1280, var(--pop-size-1440, var(--pop-size-1920, var(--pop-size-2560, var(--pop-size, 50vw)))))))));
    }
    .ccbla-motif-pop[data-pop-layout-375="overlay"][data-pop-side-375="right"] .ccbla-motif-pop__svg,
    .ccbla-motif-pop[data-pop-layout-375="overlay"].ccbla-motif-pop--right:not([data-pop-side-375]) .ccbla-motif-pop__svg {
        right: calc(-1 * var(--pop-offset-x-375, var(--pop-offset-x-small, var(--pop-offset-x-mobile, var(--pop-offset-x-tablet, var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0vw)))))))))) !important;
        left: auto !important;
    }
    .ccbla-motif-pop[data-pop-layout-375="overlay"][data-pop-side-375="left"] .ccbla-motif-pop__svg,
    .ccbla-motif-pop[data-pop-layout-375="overlay"].ccbla-motif-pop--left:not([data-pop-side-375]) .ccbla-motif-pop__svg {
        left: calc(-1 * var(--pop-offset-x-375, var(--pop-offset-x-small, var(--pop-offset-x-mobile, var(--pop-offset-x-tablet, var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0vw)))))))))) !important;
        right: auto !important;
    }
    .ccbla-motif-pop[data-pop-layout-375="overlay"].ccbla-motif-pop--anchor-left-375 .ccbla-motif-pop__svg {
        left: calc(var(--pop-anchor-left-375, var(--pop-anchor-left-small, var(--pop-anchor-left-mobile, var(--pop-anchor-left-tablet, var(--pop-anchor-left-1280, var(--pop-anchor-left-1440, var(--pop-anchor-left-1920, var(--pop-anchor-left-2560, 50%)))))))) + var(--pop-offset-x-375, var(--pop-offset-x-small, var(--pop-offset-x-mobile, var(--pop-offset-x-tablet, var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px)))))))))) !important;
        right: auto !important;
    }
    .ccbla-motif-pop[data-pop-layout-375="overlay"][data-pop-av-375="top"] .ccbla-motif-pop__svg,
    .ccbla-motif-pop[data-pop-layout-375="overlay"].ccbla-motif-pop--av-top:not([data-pop-av-375]) .ccbla-motif-pop__svg {
        top: var(--pop-offset-y-375, var(--pop-offset-y-small, var(--pop-offset-y-mobile, var(--pop-offset-y-tablet, var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px))))))))) !important;
        bottom: auto !important;
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1)) !important;
    }
    .ccbla-motif-pop[data-pop-layout-375="overlay"][data-pop-av-375="center"] .ccbla-motif-pop__svg,
    .ccbla-motif-pop[data-pop-layout-375="overlay"].ccbla-motif-pop--av-center:not([data-pop-av-375]) .ccbla-motif-pop__svg {
        top: calc(50% + var(--pop-offset-y-375, var(--pop-offset-y-small, var(--pop-offset-y-mobile, var(--pop-offset-y-tablet, var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px)))))))))) !important;
        bottom: auto !important;
        transform: translateX(var(--pop-full-shift-x, 0)) translateY(-50%) scaleX(var(--pop-flip-x, 1)) !important;
    }
    .ccbla-motif-pop[data-pop-layout-375="overlay"][data-pop-av-375="bottom"] .ccbla-motif-pop__svg,
    .ccbla-motif-pop[data-pop-layout-375="overlay"].ccbla-motif-pop--av-bottom:not([data-pop-av-375]) .ccbla-motif-pop__svg {
        top: auto !important;
        bottom: calc(-1 * var(--pop-offset-y-375, var(--pop-offset-y-small, var(--pop-offset-y-mobile, var(--pop-offset-y-tablet, var(--pop-offset-y-1280, var(--pop-offset-y-1440, var(--pop-offset-y-1920, var(--pop-offset-y-2560, var(--pop-offset-y, 0px)))))))))) !important;
        transform: translateX(var(--pop-full-shift-x, 0)) scaleX(var(--pop-flip-x, 1)) !important;
    }

    /* ── Restauration overlay explicite au 375 ──────────────────────────── */
    .ccbla-motif-pop[data-pop-layout-375="overlay"] {
        position: absolute !important;
        inset: 0 !important;
        display: block;
        overflow: visible;
    }
    .ccbla-motif-pop[data-pop-layout-375="overlay"] .ccbla-motif-pop__clip {
        position: absolute !important;
        top: 0 !important;
        right: var(--pop-clip-right, 0px) !important;
        bottom: 0 !important;
        left: var(--pop-clip-left, 0px) !important;
        display: block;
        overflow: visible;
    }
    .ccbla-motif-pop[data-pop-layout-375="overlay"].ccbla-motif-pop--clip .ccbla-motif-pop__clip {
        overflow: hidden !important;
    }

    /* Mode stacked 375 — v12 in-flow */
    .ccbla-motif-pop[data-pop-layout-375="stacked"] {
        position: relative; inset: unset; display: block; overflow: hidden;
    }
    .ccbla-motif-pop[data-pop-layout-375="stacked"][data-pop-stacked-flow-375="top"]    { order: -999; }
    .ccbla-motif-pop[data-pop-layout-375="stacked"][data-pop-stacked-flow-375="bottom"] { order:  999; }
    .ccbla-motif-pop[data-pop-layout-375="stacked"] .ccbla-motif-pop__clip {
        position: relative; top: auto; right: auto; bottom: auto; left: auto;
        display: flex; overflow: visible;
    }
    .ccbla-motif-pop[data-pop-layout-375="stacked"][data-pop-stacked-align-375="left"] .ccbla-motif-pop__clip   { justify-content: flex-start; }
    .ccbla-motif-pop[data-pop-layout-375="stacked"][data-pop-stacked-align-375="center"] .ccbla-motif-pop__clip { justify-content: center; }
    .ccbla-motif-pop[data-pop-layout-375="stacked"][data-pop-stacked-align-375="right"] .ccbla-motif-pop__clip  { justify-content: flex-end; }
    .ccbla-motif-pop[data-pop-layout-375="stacked"] .ccbla-motif-pop__svg {
        position: relative; inset: unset;
        left: auto; right: auto; top: auto; bottom: auto;
        display: block;
        width: var(--pop-stacked-width-375, var(--pop-stacked-width-small, var(--pop-stacked-width-mobile, var(--pop-stacked-width-tablet, var(--pop-stacked-width-1280, var(--pop-stacked-width-1440, var(--pop-stacked-width-1920, var(--pop-stacked-width-2560, var(--pop-stacked-width, 100%)))))))));
        height: auto; max-width: none;
        transform-origin: center top;
    }
}

@media (max-width: 375px) {
    .ccbla-motif-pop[data-pop-side-375="full"],
    .ccbla-motif-pop--full:not([data-pop-side-375]) {
        --pop-full-shift-x: -50%;
    }
    .ccbla-motif-pop[data-pop-side-375="full"] .ccbla-motif-pop__svg,
    .ccbla-motif-pop--full:not([data-pop-side-375]) .ccbla-motif-pop__svg {
        left: calc(50% + var(--pop-offset-x-375, var(--pop-offset-x-small, var(--pop-offset-x-mobile, var(--pop-offset-x-tablet, var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px)))))))))) !important;
        right: auto !important;
    }
}

/* FAILSAFE overflow — v9.7 CSS moderne (:has) pour navigateurs qui n'exécutent pas encore le JS, ou si front.js échoue à corriger l'overflow avant le premier paint. Cible: 1..kb-row-layout-wrap contenant directement un.ccbla-motif-pop (après portal) 2..kt-inside-inner-col contenant un.ccbla-motif-pop (avant portal) */
@supports selector(:has(*)) {
    .kb-row-layout-wrap:has(.ccbla-motif-pop),
    .kt-inside-inner-col:has(.ccbla-motif-pop),
    .wp-block-kadence-column:has(.ccbla-motif-pop) {
        overflow: visible !important;
    }
}


/* MODE TOUTE LA RANGÉE Le motif est centré sur la largeur de la rangée, puis ajusté avec offsetX. On garde l’axe vertical courant (haut / centre / bas). */
.ccbla-motif-pop--full {
    --pop-full-shift-x: -50%;
}
.ccbla-motif-pop--full .ccbla-motif-pop__svg {
    left: calc(50% + var(--pop-offset-x, 0px)) !important;
    right: auto !important;
}

@media (max-width: 2560px) {
    .ccbla-motif-pop[data-pop-side-2560="full"],
    .ccbla-motif-pop--full:not([data-pop-side-2560]) {
        --pop-full-shift-x: -50%;
    }
    .ccbla-motif-pop[data-pop-side-2560="full"] .ccbla-motif-pop__svg,
    .ccbla-motif-pop--full:not([data-pop-side-2560]) .ccbla-motif-pop__svg {
        left: calc(50% + var(--pop-offset-x-2560, var(--pop-offset-x, 0px))) !important;
        right: auto !important;
    }
}

@media (max-width: 1920px) {
    .ccbla-motif-pop[data-pop-side-1920="full"],
    .ccbla-motif-pop--full:not([data-pop-side-1920]) {
        --pop-full-shift-x: -50%;
    }
    .ccbla-motif-pop[data-pop-side-1920="full"] .ccbla-motif-pop__svg,
    .ccbla-motif-pop--full:not([data-pop-side-1920]) .ccbla-motif-pop__svg {
        left: calc(50% + var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px)))) !important;
        right: auto !important;
    }
}

@media (max-width: 1440px) {
    .ccbla-motif-pop[data-pop-side-1440="full"],
    .ccbla-motif-pop--full:not([data-pop-side-1440]) {
        --pop-full-shift-x: -50%;
    }
    .ccbla-motif-pop[data-pop-side-1440="full"] .ccbla-motif-pop__svg,
    .ccbla-motif-pop--full:not([data-pop-side-1440]) .ccbla-motif-pop__svg {
        left: calc(50% + var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px))))) !important;
        right: auto !important;
    }
}

@media (max-width: 1280px) {
    .ccbla-motif-pop[data-pop-side-1280="full"],
    .ccbla-motif-pop--full:not([data-pop-side-1280]) {
        --pop-full-shift-x: -50%;
    }
    .ccbla-motif-pop[data-pop-side-1280="full"] .ccbla-motif-pop__svg,
    .ccbla-motif-pop--full:not([data-pop-side-1280]) .ccbla-motif-pop__svg {
        left: calc(50% + var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px)))))) !important;
        right: auto !important;
    }
}

@media (max-width: 1024px) {
    .ccbla-motif-pop[data-pop-side-tablet="full"],
    .ccbla-motif-pop--full:not([data-pop-side-tablet]) {
        --pop-full-shift-x: -50%;
    }
    .ccbla-motif-pop[data-pop-side-tablet="full"] .ccbla-motif-pop__svg,
    .ccbla-motif-pop--full:not([data-pop-side-tablet]) .ccbla-motif-pop__svg {
        left: calc(50% + var(--pop-offset-x-tablet, var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px))))))) !important;
        right: auto !important;
    }
}

@media (max-width: 768px) {
    .ccbla-motif-pop[data-pop-side-mobile="full"],
    .ccbla-motif-pop--full:not([data-pop-side-mobile]) {
        --pop-full-shift-x: -50%;
    }
    .ccbla-motif-pop[data-pop-side-mobile="full"] .ccbla-motif-pop__svg,
    .ccbla-motif-pop--full:not([data-pop-side-mobile]) .ccbla-motif-pop__svg {
        left: calc(50% + var(--pop-offset-x-mobile, var(--pop-offset-x-tablet, var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px)))))))) !important;
        right: auto !important;
    }
}

@media (max-width: 600px) {
    .ccbla-motif-pop[data-pop-side-small="full"],
    .ccbla-motif-pop--full:not([data-pop-side-small]) {
        --pop-full-shift-x: -50%;
    }
    .ccbla-motif-pop[data-pop-side-small="full"] .ccbla-motif-pop__svg,
    .ccbla-motif-pop--full:not([data-pop-side-small]) .ccbla-motif-pop__svg {
        left: calc(50% + var(--pop-offset-x-small, var(--pop-offset-x-mobile, var(--pop-offset-x-tablet, var(--pop-offset-x-1280, var(--pop-offset-x-1440, var(--pop-offset-x-1920, var(--pop-offset-x-2560, var(--pop-offset-x, 0px))))))))) !important;
        right: auto !important;
    }
}


/* ── Group block compatibility ─────────────────────────────────────────────── */
.wp-block-group:has(> .ccbla-motif-pop) {
    position: relative;
}
/* Accent inserted as first child → behind content by DOM order. Inner container gets z-index:1 to guarantee it stays above. */
.wp-block-group > .wp-block-group__inner-container {
    position: relative;
    z-index: 1;
}
.wp-block-group > .ccbla-motif-pop {
    inset: 0;
    z-index: 0;
}