/* ============================================
   12 - EFFETS PEINTURE GLOBAUX
   Décorations splash, drips, brush, transitions
   ============================================ */

/* Drip décoratif entre sections */
.jm-drip-deco {
    position: absolute;
    top: 0; left: 0; right: 0;
    line-height: 0;
    z-index: 2;
    pointer-events: none;
}
.jm-drip-deco svg { width: 100%; height: 80px; display: block; }

/* Splash de section */
.jm-section-splat {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    fill: var(--jm-red);
    opacity: 0.05;
    animation: jmSpin 50s linear infinite;
}
.jm-section-splat--bottom-right {
    width: 360px; height: 360px;
    bottom: -100px; right: -100px;
}
.jm-section-splat--top-left {
    width: 280px; height: 280px;
    top: -80px; left: -80px;
    animation-direction: reverse;
}

@keyframes jmSpin { to { transform: rotate(360deg); } }

/* ---- Services - background paint ---- */
.jm-services {
    background:
        radial-gradient(circle at 90% 10%, rgba(212, 32, 42, 0.07) 0%, transparent 35%),
        radial-gradient(circle at 10% 90%, rgba(10, 42, 124, 0.07) 0%, transparent 40%),
        var(--jm-grey-100);
}
.jm-services::before {
    content: none;
}

/* ---- Galerie - splash décoratif ---- */
.jm-galerie {
    background:
        radial-gradient(circle at 10% 20%, rgba(255, 209, 102, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(10, 42, 124, 0.06) 0%, transparent 40%),
        linear-gradient(180deg, var(--jm-grey-100) 0%, #fff 100%);
    position: relative;
}
.jm-galerie__splash {
    position: absolute;
    top: 60px; right: -60px;
    width: 240px; height: 240px;
    fill: var(--jm-yellow);
    opacity: 0.18;
    pointer-events: none;
    animation: jmSpin 60s linear infinite;
    z-index: 0;
}

/* ---- À propos splats ---- */
.jm-apropos {
    background:
        radial-gradient(circle at 90% 10%, rgba(255, 209, 102, 0.08) 0%, transparent 35%),
        #fff;
}
.jm-apropos__splat {
    position: absolute;
    width: 280px; height: 280px;
    fill: var(--jm-red);
    opacity: 0.08;
    z-index: 0;
    top: -40px; right: -40px;
    animation: jmSpin 60s linear infinite;
}
.jm-apropos__splat--2 {
    fill: var(--jm-blue);
    bottom: -60px; left: -40px;
    top: auto; right: auto;
    width: 220px; height: 220px;
    opacity: 0.1;
    animation-direction: reverse;
}

/* ---- FAQ background paint ---- */
.jm-faq {
    background:
        radial-gradient(circle at 20% 30%, rgba(212, 32, 42, 0.06) 0%, transparent 35%),
        radial-gradient(circle at 80% 70%, rgba(255, 209, 102, 0.08) 0%, transparent 35%),
        #fff;
    position: relative;
}

/* ---- Contact background paint ---- */
.jm-contact {
    background:
        radial-gradient(circle at 10% 20%, rgba(10, 42, 124, 0.06) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(212, 32, 42, 0.06) 0%, transparent 35%),
        var(--jm-grey-100);
    position: relative;
}

/* ---- Footer drip top ---- */
.jm-footer {
    position: relative;
}
.jm-footer::before {
    content: '';
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 30px;
    background: var(--jm-black);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 30' preserveAspectRatio='none'><path d='M0 30 L 1440 30 L 1440 12 C 1240 -8 1100 25 920 8 S 580 -8 380 12 S 120 -2 0 12 Z' fill='black'/></svg>") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 30' preserveAspectRatio='none'><path d='M0 30 L 1440 30 L 1440 12 C 1240 -8 1100 25 920 8 S 580 -8 380 12 S 120 -2 0 12 Z' fill='black'/></svg>") center / 100% 100% no-repeat;
    transform: translateY(-29px);
}