/* ═══════════════════════════════════════════════════════════════════════
 * LZ Background Anime — Widget + Extension Container
 * ═══════════════════════════════════════════════════════════════════════ */

/* Forçage wrapper Elementor du widget */
.elementor-widget-lz_bg_anim,
.elementor-widget-lz_bg_anim > .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

/* ─── BASE ─────────────────────────────────────────────────────────────── */
.lz-bga {
    position: relative;
    width: 100%;
    height: 60vh;
    min-height: 300px;
    overflow: hidden;
    background-color: #152738;
    --lz-bga-c1: #1f3a5c;
    --lz-bga-c2: #2a5080;
    --lz-bga-c3: #3d6fa5;
    --lz-bga-c4: #5b8db8;
    --lz-bga-speed: 1;
    box-sizing: border-box;
    display: block;
}

.lz-bga *,
.lz-bga *::before,
.lz-bga *::after {
    box-sizing: border-box;
}

.lz-bga__layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.lz-bga__overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgba(21, 39, 56, 0.4);
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════
 * EXTENSION CONTAINER : fond animé injecté dans un container Elementor
 * ═══════════════════════════════════════════════════════════════════════ */

.lz-bga-host {
    position: relative !important;
    overflow: hidden !important;
    --lz-bga-c1: #1f3a5c;
    --lz-bga-c2: #2a5080;
    --lz-bga-c3: #3d6fa5;
    --lz-bga-c4: #5b8db8;
    --lz-bga-speed: 1;
}

/* La div .lz-bga-bg est injectée par le PHP au début du container */
.lz-bga-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    /* Les sous-éléments .lz-bga__layer, .lz-bga__waves, etc. fonctionnent normalement */
}

.lz-bga-bg-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    pointer-events: none;
    background: rgba(21, 39, 56, 0.4);
}

/* Le contenu du container doit être au-dessus du fond */
.lz-bga-host > *:not(.lz-bga-bg):not(.lz-bga-bg-overlay) {
    position: relative;
    z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 🌊 STYLE 1 : VAGUES SVG
 * ═══════════════════════════════════════════════════════════════════════ */
.lz-bga__waves {
    display: block;
}

.lz-bga__wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 200px;
    fill: var(--lz-bga-wave-color, var(--lz-bga-c1));
    animation: lz-bga-wave-slide linear infinite;
}

.lz-bga__waves--bottom .lz-bga__wave { bottom: 0; }
.lz-bga__waves--top .lz-bga__wave { top: 0; transform: scaleY(-1); }

.lz-bga__waves--both .lz-bga__wave--1,
.lz-bga__waves--both .lz-bga__wave--3 { top: 0; transform: scaleY(-1); }
.lz-bga__waves--both .lz-bga__wave--2,
.lz-bga__waves--both .lz-bga__wave--4,
.lz-bga__waves--both .lz-bga__wave--5 { bottom: 0; }

.lz-bga__wave--1 { height: 180px; }
.lz-bga__wave--2 { height: 220px; animation-direction: reverse; }
.lz-bga__wave--3 { height: 160px; }
.lz-bga__wave--4 { height: 200px; animation-direction: reverse; }
.lz-bga__wave--5 { height: 240px; }

@keyframes lz-bga-wave-slide {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.lz-bga__waves--top .lz-bga__wave {
    animation-name: lz-bga-wave-slide-top;
}

@keyframes lz-bga-wave-slide-top {
    from { transform: scaleY(-1) translateX(0); }
    to   { transform: scaleY(-1) translateX(-50%); }
}

/* ═══════════════════════════════════════════════════════════════════════
 * ✨ STYLE 2 : PARTICULES FLOTTANTES
 * ═══════════════════════════════════════════════════════════════════════ */
.lz-bga--particles {
    background: radial-gradient(ellipse at center, var(--lz-bga-c1) 0%, #152738 100%);
}

.lz-bga-host.lz-bga-host--particles {
    background: radial-gradient(ellipse at center, var(--lz-bga-c1) 0%, #152738 100%);
}

.lz-bga__particle {
    position: absolute;
    bottom: -20px;
    border-radius: 50%;
    animation: lz-bga-particle-rise linear infinite;
    will-change: transform, opacity;
}

@keyframes lz-bga-particle-rise {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(calc(-100vh - 40px)) translateX(20px); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 🌈 STYLE 3 : GRADIENT ANIMÉ
 * ═══════════════════════════════════════════════════════════════════════ */
.lz-bga__gradient {
    background: linear-gradient(
        135deg,
        var(--lz-bga-c1),
        var(--lz-bga-c2),
        var(--lz-bga-c3),
        var(--lz-bga-c4),
        var(--lz-bga-c3),
        var(--lz-bga-c2)
    );
    background-size: 300% 300%;
    animation: lz-bga-gradient-shift linear infinite;
    animation-duration: calc(20s / var(--lz-bga-speed, 1));
}

@keyframes lz-bga-gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 🎙️ STYLE 4 : MESH GRADIENT (BLOBS)
 * ═══════════════════════════════════════════════════════════════════════ */
.lz-bga--mesh,
.lz-bga-bg.lz-bga--mesh {
    background: var(--lz-bga-c1);
}

.lz-bga__mesh {
    position: absolute;
    inset: 0;
}

.lz-bga__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    animation: lz-bga-blob-move ease-in-out infinite alternate;
    will-change: transform;
    mix-blend-mode: screen;
}

@keyframes lz-bga-blob-move {
    0%   { transform: translate(0, 0) scale(1); }
    25%  { transform: translate(40px, -30px) scale(1.1); }
    50%  { transform: translate(-30px, 40px) scale(0.95); }
    75%  { transform: translate(-50px, -20px) scale(1.05); }
    100% { transform: translate(30px, 30px) scale(1); }
}

.lz-bga__blob--2 { animation-direction: alternate-reverse; }
.lz-bga__blob--3 { animation-delay: -4s; }
.lz-bga__blob--4 { animation-delay: -8s; animation-direction: alternate-reverse; }
.lz-bga__blob--5 { animation-delay: -12s; }
.lz-bga__blob--6 { animation-delay: -6s; animation-direction: alternate-reverse; }

/* ═══════════════════════════════════════════════════════════════════════
 * 🔷 STYLE 5 : GÉOMÉTRIQUE
 * ═══════════════════════════════════════════════════════════════════════ */
.lz-bga--geometric,
.lz-bga-bg.lz-bga--geometric {
    background: linear-gradient(135deg, var(--lz-bga-c1) 0%, #152738 100%);
}

.lz-bga__shape {
    position: absolute;
    border: 1.5px solid currentColor;
    background: transparent;
    animation: lz-bga-shape-drift linear infinite;
    will-change: transform;
}

.lz-bga__shape--circle { border-radius: 50%; }

.lz-bga__shape--triangle {
    border: none;
    width: 0 !important;
    height: 0 !important;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 50px solid currentColor;
    background: transparent;
    opacity: inherit;
}

.lz-bga__shape--square { border-radius: 4px; }

.lz-bga__shape--line {
    height: 2px !important;
    background: currentColor;
    border: none;
}

@keyframes lz-bga-shape-drift {
    0%   { transform: rotate(0deg) translateY(0) translateX(0); }
    50%  { transform: rotate(180deg) translateY(-30px) translateX(20px); }
    100% { transform: rotate(360deg) translateY(0) translateX(0); }
}

/* ═══════════════════════════════════════════════════════════════════════
 * ACCESSIBILITÉ : pas d'animation si l'utilisateur préfère
 * ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .lz-bga__wave,
    .lz-bga__particle,
    .lz-bga__gradient,
    .lz-bga__blob,
    .lz-bga__shape {
        animation: none !important;
    }
}