/* Fondu de fond natif Gutenberg pour core/group. */
.pl-group-background-fade[data-pl-background-fade="1"] {
    position: relative;
    isolation: isolate;
    background-image: none !important;
}

.pl-group-background-fade[data-pl-background-fade="1"] {
    background-color: transparent !important;
}

.pl-group-background-fade[data-pl-background-fade="1"]::before {
    content: '';
    position: absolute;
    z-index: 1;
    pointer-events: none;
    inset: 0;
    border-radius: inherit;
    background-color: var(--pl-group-background-color, transparent);
    background-image: var(--pl-group-background-image);
    background-position: var(--pl-group-background-position, 50% 50%);
    background-repeat: var(--pl-group-background-repeat, no-repeat);
    background-size: var(--pl-group-background-size, cover);
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
    -webkit-mask-image: var(--pl-group-background-mask);
    mask-image: var(--pl-group-background-mask);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.pl-group-background-fade[data-pl-background-fade="1"] > * {
    position: relative;
    z-index: 2;
}

.pl-group-background-fade[data-pl-background-fade="1"][data-pl-background-fade-edge="all"] {
    --pl-group-background-mask:
        linear-gradient(
            to right,
            transparent 0,
            rgb(0 0 0 / 0.08) calc(var(--pl-group-background-fade-depth) * 0.2),
            rgb(0 0 0 / 0.34) calc(var(--pl-group-background-fade-depth) * 0.55),
            #000 var(--pl-group-background-fade-depth),
            #000 calc(100% - var(--pl-group-background-fade-depth)),
            rgb(0 0 0 / 0.34) calc(100% - (var(--pl-group-background-fade-depth) * 0.55)),
            rgb(0 0 0 / 0.08) calc(100% - (var(--pl-group-background-fade-depth) * 0.2)),
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            transparent 0,
            rgb(0 0 0 / 0.08) calc(var(--pl-group-background-fade-depth) * 0.2),
            rgb(0 0 0 / 0.34) calc(var(--pl-group-background-fade-depth) * 0.55),
            #000 var(--pl-group-background-fade-depth),
            #000 calc(100% - var(--pl-group-background-fade-depth)),
            rgb(0 0 0 / 0.34) calc(100% - (var(--pl-group-background-fade-depth) * 0.55)),
            rgb(0 0 0 / 0.08) calc(100% - (var(--pl-group-background-fade-depth) * 0.2)),
            transparent 100%
        );
}

.pl-group-background-fade[data-pl-background-fade="1"][data-pl-background-fade-edge="all"]::before {
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.pl-group-background-fade[data-pl-background-fade="1"][data-pl-background-fade-edge="left"] {
    --pl-group-background-mask: linear-gradient(
        to right,
        transparent 0,
        rgb(0 0 0 / 0.08) calc(var(--pl-group-background-fade-depth) * 0.2),
        rgb(0 0 0 / 0.34) calc(var(--pl-group-background-fade-depth) * 0.55),
        #000 var(--pl-group-background-fade-depth),
        #000 100%
    );
}

.pl-group-background-fade[data-pl-background-fade="1"][data-pl-background-fade-edge="right"] {
    --pl-group-background-mask: linear-gradient(
        to left,
        transparent 0,
        rgb(0 0 0 / 0.08) calc(var(--pl-group-background-fade-depth) * 0.2),
        rgb(0 0 0 / 0.34) calc(var(--pl-group-background-fade-depth) * 0.55),
        #000 var(--pl-group-background-fade-depth),
        #000 100%
    );
}

.pl-group-background-fade[data-pl-background-fade="1"][data-pl-background-fade-edge="top"] {
    --pl-group-background-mask: linear-gradient(
        to bottom,
        transparent 0,
        rgb(0 0 0 / 0.08) calc(var(--pl-group-background-fade-depth) * 0.2),
        rgb(0 0 0 / 0.34) calc(var(--pl-group-background-fade-depth) * 0.55),
        #000 var(--pl-group-background-fade-depth),
        #000 100%
    );
}

.pl-group-background-fade[data-pl-background-fade="1"][data-pl-background-fade-edge="bottom"] {
    --pl-group-background-mask: linear-gradient(
        to top,
        transparent 0,
        rgb(0 0 0 / 0.08) calc(var(--pl-group-background-fade-depth) * 0.2),
        rgb(0 0 0 / 0.34) calc(var(--pl-group-background-fade-depth) * 0.55),
        #000 var(--pl-group-background-fade-depth),
        #000 100%
    );
}

/* Sélections de plusieurs bords. Les anciens sélecteurs unitaires restent compatibles. */
.pl-group-background-fade[data-pl-background-fade="1"] {
    --pl-group-background-mask-left: linear-gradient(
        to right,
        transparent 0,
        rgb(0 0 0 / 0.08) calc(var(--pl-group-background-fade-depth) * 0.2),
        rgb(0 0 0 / 0.34) calc(var(--pl-group-background-fade-depth) * 0.55),
        #000 var(--pl-group-background-fade-depth),
        #000 100%
    );
    --pl-group-background-mask-right: linear-gradient(
        to left,
        transparent 0,
        rgb(0 0 0 / 0.08) calc(var(--pl-group-background-fade-depth) * 0.2),
        rgb(0 0 0 / 0.34) calc(var(--pl-group-background-fade-depth) * 0.55),
        #000 var(--pl-group-background-fade-depth),
        #000 100%
    );
    --pl-group-background-mask-top: linear-gradient(
        to bottom,
        transparent 0,
        rgb(0 0 0 / 0.08) calc(var(--pl-group-background-fade-depth) * 0.2),
        rgb(0 0 0 / 0.34) calc(var(--pl-group-background-fade-depth) * 0.55),
        #000 var(--pl-group-background-fade-depth),
        #000 100%
    );
    --pl-group-background-mask-bottom: linear-gradient(
        to top,
        transparent 0,
        rgb(0 0 0 / 0.08) calc(var(--pl-group-background-fade-depth) * 0.2),
        rgb(0 0 0 / 0.34) calc(var(--pl-group-background-fade-depth) * 0.55),
        #000 var(--pl-group-background-fade-depth),
        #000 100%
    );
    --pl-group-background-mask-left-right: linear-gradient(
        to right,
        transparent 0,
        rgb(0 0 0 / 0.08) calc(var(--pl-group-background-fade-depth) * 0.2),
        rgb(0 0 0 / 0.34) calc(var(--pl-group-background-fade-depth) * 0.55),
        #000 var(--pl-group-background-fade-depth),
        #000 calc(100% - var(--pl-group-background-fade-depth)),
        rgb(0 0 0 / 0.34) calc(100% - (var(--pl-group-background-fade-depth) * 0.55)),
        rgb(0 0 0 / 0.08) calc(100% - (var(--pl-group-background-fade-depth) * 0.2)),
        transparent 100%
    );
    --pl-group-background-mask-top-bottom: linear-gradient(
        to bottom,
        transparent 0,
        rgb(0 0 0 / 0.08) calc(var(--pl-group-background-fade-depth) * 0.2),
        rgb(0 0 0 / 0.34) calc(var(--pl-group-background-fade-depth) * 0.55),
        #000 var(--pl-group-background-fade-depth),
        #000 calc(100% - var(--pl-group-background-fade-depth)),
        rgb(0 0 0 / 0.34) calc(100% - (var(--pl-group-background-fade-depth) * 0.55)),
        rgb(0 0 0 / 0.08) calc(100% - (var(--pl-group-background-fade-depth) * 0.2)),
        transparent 100%
    );
}

/* Forcer explicitement le masque actif pour chaque côté simple. */
.pl-group-background-fade[data-pl-background-fade-edge="left"][data-pl-background-fade="1"]::before {
    -webkit-mask-image: var(--pl-group-background-mask-left);
    mask-image: var(--pl-group-background-mask-left);
}

.pl-group-background-fade[data-pl-background-fade-edge="right"][data-pl-background-fade="1"]::before {
    -webkit-mask-image: var(--pl-group-background-mask-right);
    mask-image: var(--pl-group-background-mask-right);
}

.pl-group-background-fade[data-pl-background-fade-edge="top"][data-pl-background-fade="1"]::before {
    -webkit-mask-image: var(--pl-group-background-mask-top);
    mask-image: var(--pl-group-background-mask-top);
}

.pl-group-background-fade[data-pl-background-fade-edge="bottom"][data-pl-background-fade="1"]::before {
    -webkit-mask-image: var(--pl-group-background-mask-bottom);
    mask-image: var(--pl-group-background-mask-bottom);
}

:is(
    .pl-group-background-fade[data-pl-background-fade-edge="left-right"]
)[data-pl-background-fade="1"]::before {
    -webkit-mask-image: var(--pl-group-background-mask-left-right);
    mask-image: var(--pl-group-background-mask-left-right);
}

.pl-group-background-fade[data-pl-background-fade-edge="top-bottom"][data-pl-background-fade="1"]::before {
    -webkit-mask-image: var(--pl-group-background-mask-top-bottom);
    mask-image: var(--pl-group-background-mask-top-bottom);
}

.pl-group-background-fade[data-pl-background-fade-edge="left-top"][data-pl-background-fade="1"]::before {
    -webkit-mask-image: var(--pl-group-background-mask-left), var(--pl-group-background-mask-top);
    mask-image: var(--pl-group-background-mask-left), var(--pl-group-background-mask-top);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.pl-group-background-fade[data-pl-background-fade-edge="left-bottom"][data-pl-background-fade="1"]::before {
    -webkit-mask-image: var(--pl-group-background-mask-left), var(--pl-group-background-mask-bottom);
    mask-image: var(--pl-group-background-mask-left), var(--pl-group-background-mask-bottom);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.pl-group-background-fade[data-pl-background-fade-edge="right-top"][data-pl-background-fade="1"]::before {
    -webkit-mask-image: var(--pl-group-background-mask-right), var(--pl-group-background-mask-top);
    mask-image: var(--pl-group-background-mask-right), var(--pl-group-background-mask-top);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.pl-group-background-fade[data-pl-background-fade-edge="right-bottom"][data-pl-background-fade="1"]::before {
    -webkit-mask-image: var(--pl-group-background-mask-right), var(--pl-group-background-mask-bottom);
    mask-image: var(--pl-group-background-mask-right), var(--pl-group-background-mask-bottom);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.pl-group-background-fade[data-pl-background-fade-edge="left-right-top"][data-pl-background-fade="1"]::before {
    -webkit-mask-image: var(--pl-group-background-mask-left), var(--pl-group-background-mask-right), var(--pl-group-background-mask-top);
    mask-image: var(--pl-group-background-mask-left), var(--pl-group-background-mask-right), var(--pl-group-background-mask-top);
    -webkit-mask-composite: source-in, source-in;
    mask-composite: intersect, intersect;
}

.pl-group-background-fade[data-pl-background-fade-edge="left-right-bottom"][data-pl-background-fade="1"]::before {
    -webkit-mask-image: var(--pl-group-background-mask-left), var(--pl-group-background-mask-right), var(--pl-group-background-mask-bottom);
    mask-image: var(--pl-group-background-mask-left), var(--pl-group-background-mask-right), var(--pl-group-background-mask-bottom);
    -webkit-mask-composite: source-in, source-in;
    mask-composite: intersect, intersect;
}

.pl-group-background-fade[data-pl-background-fade-edge="left-top-bottom"][data-pl-background-fade="1"]::before {
    -webkit-mask-image: var(--pl-group-background-mask-left), var(--pl-group-background-mask-top), var(--pl-group-background-mask-bottom);
    mask-image: var(--pl-group-background-mask-left), var(--pl-group-background-mask-top), var(--pl-group-background-mask-bottom);
    -webkit-mask-composite: source-in, source-in;
    mask-composite: intersect, intersect;
}

.pl-group-background-fade[data-pl-background-fade-edge="right-top-bottom"][data-pl-background-fade="1"]::before {
    -webkit-mask-image: var(--pl-group-background-mask-right), var(--pl-group-background-mask-top), var(--pl-group-background-mask-bottom);
    mask-image: var(--pl-group-background-mask-right), var(--pl-group-background-mask-top), var(--pl-group-background-mask-bottom);
    -webkit-mask-composite: source-in, source-in;
    mask-composite: intersect, intersect;
}

.pl-group-background-fade[data-pl-background-fade-edge="left-right-top-bottom"][data-pl-background-fade="1"]::before {
    -webkit-mask-image: var(--pl-group-background-mask-left), var(--pl-group-background-mask-right), var(--pl-group-background-mask-top), var(--pl-group-background-mask-bottom);
    mask-image: var(--pl-group-background-mask-left), var(--pl-group-background-mask-right), var(--pl-group-background-mask-top), var(--pl-group-background-mask-bottom);
    -webkit-mask-composite: source-in, source-in, source-in;
    mask-composite: intersect, intersect, intersect;
}

.pl-group-background-fade[data-pl-background-fade="1"][data-pl-background-fade-depth="light"] {
    --pl-group-background-fade-depth: clamp(12px, 8%, 72px);
}

.pl-group-background-fade[data-pl-background-fade="1"][data-pl-background-fade-depth="medium"] {
    --pl-group-background-fade-depth: clamp(20px, 14%, 120px);
}

.pl-group-background-fade[data-pl-background-fade="1"][data-pl-background-fade-depth="strong"] {
    --pl-group-background-fade-depth: clamp(28px, 20%, 160px);
}

@media (max-width: 600px) {
    .pl-group-background-fade[data-pl-background-fade="1"][data-pl-background-fade-depth="strong"] {
        --pl-group-background-fade-depth: clamp(20px, 16%, 96px);
    }
}