/* Shape Photo Masker v2 — style.css */

.spm-wrap { display: flex; width: 100%; }

.spm-container {
    position: relative;
    width: 300px;
    height: 350px;
    display: inline-block;
    --spm-stroke: 0px;
    --spm-stroke-color: #ffffff;
    --spm-ox: 50%;
    --spm-oy: 50%;
    --spm-mask-rotate: 0deg;
    overflow: visible; /* le clip est géré par JS sur .spm-clip-wrap */
}

/* Wrapper interne sur lequel le clip-path SVG est appliqué */
.spm-clip-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.spm-container .spm-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--spm-ox, 50%) var(--spm-oy, 50%);
    display: block;
    transition: transform 0.4s ease, filter 0.3s ease;
}

/* SVG hidden — sert juste à définir le clipPath */
.spm-clip-svg {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Outline SVG visible (contour) */
.spm-outline {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

/* FILTRES */
.spm-filter-bw       .spm-img { filter: grayscale(100%); }
.spm-filter-sepia    .spm-img { filter: sepia(80%); }
.spm-filter-saturate .spm-img { filter: saturate(200%) contrast(1.1); }
.spm-filter-vintage  .spm-img { filter: sepia(40%) saturate(130%) hue-rotate(-10deg) brightness(0.95); }
.spm-filter-cool     .spm-img { filter: saturate(90%) hue-rotate(30deg) brightness(1.05); }
.spm-filter-warm     .spm-img { filter: saturate(110%) hue-rotate(-20deg) brightness(1.05) contrast(1.05); }

/* SURVOL */
.spm-hover-zoom:hover .spm-img     { transform: scale(1.08); }
.spm-hover-brighten:hover .spm-img { filter: brightness(1.25); }
.spm-hover-glow:hover              { filter: drop-shadow(0 0 16px rgba(255,255,255,0.75)); }
.spm-hover-tilt                    { perspective: 700px; }
.spm-hover-tilt:hover              { transform: rotateY(6deg) rotateX(-3deg); }

/* OMBRES */
.spm-shadow-soft   { filter: drop-shadow(0 6px 16px rgba(0,0,0,0.18)); }
.spm-shadow-medium { filter: drop-shadow(0 10px 28px rgba(0,0,0,0.30)); }
.spm-shadow-hard   { filter: drop-shadow(4px 8px 0px rgba(0,0,0,0.55)); }
.spm-shadow-color  { filter: drop-shadow(0 8px 22px var(--spm-shadow-color, rgba(0,0,0,0.35))); }

/* Légende */
.spm-caption {
    position: absolute;
    bottom: 8px; left: 0; right: 0;
    text-align: center;
    font-size: 0.82rem;
    font-style: italic;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
    pointer-events: none;
    z-index: 4;
    margin: 0;
    padding: 0 8px;
}