/* ============================================================
   LEV POPUP – lev-popup.css
   Plugin : LutryEnVie · https://lutryenvie.ch
   ============================================================ */

/* ── 1. Overlay ─────────────────────────────────────────────── */

.levp-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.levp-overlay--visible {
    opacity: 1;
}

/* ── 2. Boîte popup (base) ──────────────────────────────────── */

.levp-box {
    position: fixed;
    z-index: 99999;
    box-sizing: border-box;
    outline: none;
    /* Les couleurs, bordures, dimensions sont définies inline par JS */
}

/* ── 3. Positionnement ──────────────────────────────────────── */

.levp-pos-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
}
.levp-pos-top-left {
    top: 24px;
    left: 24px;
    transform: translateY(-20px);
}
.levp-pos-top-center {
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
}
.levp-pos-top-right {
    top: 24px;
    right: 24px;
    transform: translateY(-20px);
}
.levp-pos-center-left {
    top: 50%;
    left: 24px;
    transform: translateY(-50%) translateX(-20px);
}
.levp-pos-center-right {
    top: 50%;
    right: 24px;
    transform: translateY(-50%) translateX(20px);
}
.levp-pos-bottom-left {
    bottom: 24px;
    left: 24px;
    transform: translateY(20px);
}
.levp-pos-bottom-center {
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
}
.levp-pos-bottom-right {
    bottom: 24px;
    right: 24px;
    transform: translateY(20px);
}

/* ── 4. Animations d'entrée ─────────────────────────────────── */

/* Toutes les animations partagent une transition sur opacity + transform */

/* --- fade --- */
.levp-anim-fade {
    opacity: 0;
    transform: translate(-50%, -50%); /* Centre */
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.levp-pos-top-left.levp-anim-fade,
.levp-pos-top-right.levp-anim-fade,
.levp-pos-bottom-left.levp-anim-fade,
.levp-pos-bottom-right.levp-anim-fade {
    opacity: 0;
    transform: none;
    transition: opacity 0.35s ease;
}
.levp-pos-top-center.levp-anim-fade,
.levp-pos-bottom-center.levp-anim-fade {
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity 0.35s ease;
}
.levp-pos-center-left.levp-anim-fade {
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 0.35s ease;
}
.levp-pos-center-right.levp-anim-fade {
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 0.35s ease;
}

/* --- zoom --- */
.levp-anim-zoom {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
    transition: opacity 0.35s cubic-bezier(.34,1.56,.64,1), transform 0.35s cubic-bezier(.34,1.56,.64,1);
}
.levp-pos-top-left.levp-anim-zoom,
.levp-pos-top-right.levp-anim-zoom,
.levp-pos-bottom-left.levp-anim-zoom,
.levp-pos-bottom-right.levp-anim-zoom {
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.35s cubic-bezier(.34,1.56,.64,1), transform 0.35s cubic-bezier(.34,1.56,.64,1);
}

/* --- slide-top (entre depuis le haut) --- */
.levp-anim-slide-top {
    opacity: 0;
    transform: translate(-50%, -80px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.22,1,.36,1);
}
.levp-pos-top-left.levp-anim-slide-top,
.levp-pos-top-right.levp-anim-slide-top {
    opacity: 0;
    transform: translateY(-80px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.22,1,.36,1);
}
.levp-pos-top-center.levp-anim-slide-top {
    opacity: 0;
    transform: translateX(-50%) translateY(-80px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.22,1,.36,1);
}

/* --- slide-bottom (entre depuis le bas) --- */
.levp-anim-slide-bottom {
    opacity: 0;
    transform: translate(-50%, 80px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.22,1,.36,1);
}
.levp-pos-bottom-left.levp-anim-slide-bottom,
.levp-pos-bottom-right.levp-anim-slide-bottom {
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.22,1,.36,1);
}
.levp-pos-bottom-center.levp-anim-slide-bottom {
    opacity: 0;
    transform: translateX(-50%) translateY(80px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.22,1,.36,1);
}

/* --- slide-left (entre depuis la gauche) --- */
.levp-anim-slide-left {
    opacity: 0;
    transform: translate(calc(-50% - 80px), -50%);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.22,1,.36,1);
}

/* --- slide-right (entre depuis la droite) --- */
.levp-anim-slide-right {
    opacity: 0;
    transform: translate(calc(-50% + 80px), -50%);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.22,1,.36,1);
}

/* --- none --- */
.levp-anim-none {
    opacity: 1;
    transition: none;
}

/* ── 5. État visible (appliqué par JS) ──────────────────────── */

.levp-box.levp-visible {
    opacity: 1 !important;
}

/* Rétablir les positions finales selon position + animation */
.levp-pos-center.levp-visible { transform: translate(-50%, -50%) scale(1) !important; }

.levp-pos-top-left.levp-visible    { transform: none !important; }
.levp-pos-top-right.levp-visible   { transform: none !important; }
.levp-pos-bottom-left.levp-visible { transform: none !important; }
.levp-pos-bottom-right.levp-visible { transform: none !important; }

.levp-pos-top-center.levp-visible    { transform: translateX(-50%) !important; }
.levp-pos-bottom-center.levp-visible { transform: translateX(-50%) !important; }

.levp-pos-center-left.levp-visible  { transform: translateY(-50%) !important; }
.levp-pos-center-right.levp-visible { transform: translateY(-50%) !important; }

/* Zoom overrides */
.levp-anim-zoom.levp-pos-center.levp-visible          { transform: translate(-50%, -50%) scale(1) !important; }
.levp-anim-zoom.levp-pos-top-left.levp-visible,
.levp-anim-zoom.levp-pos-top-right.levp-visible,
.levp-anim-zoom.levp-pos-bottom-left.levp-visible,
.levp-anim-zoom.levp-pos-bottom-right.levp-visible    { transform: scale(1) !important; }

/* ── 6. Animation de sortie ─────────────────────────────────── */

.levp-box.levp-hiding {
    opacity: 0 !important;
    transition: opacity 0.25s ease !important;
}

/* ── 7. Structure interne du popup ──────────────────────────── */

.levp-close-x {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #6b7280;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
    z-index: 1;
}
.levp-close-x:hover {
    background: #f3f4f6;
    color: #111827;
}

.levp-content {
    padding: 28px 28px 20px;
}

.levp-content p:first-child { margin-top: 0; }
.levp-content p:last-child  { margin-bottom: 0; }

.levp-footer {
    padding: 0 28px 20px;
    display: flex;
    justify-content: center;
}

.levp-btn-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 24px;
    background: #1d4ed8;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}
.levp-btn-close:hover {
    background: #1e40af;
}

/* ── 8. Responsive ──────────────────────────────────────────── */

@media (max-width: 600px) {
    .levp-box {
        width: 94vw !important;
        max-width: 94vw !important;
    }
    .levp-pos-top-left,
    .levp-pos-top-right {
        left: 3vw !important;
        right: 3vw !important;
    }
    .levp-pos-bottom-left,
    .levp-pos-bottom-right {
        left: 3vw !important;
        right: 3vw !important;
    }
    .levp-content {
        padding: 20px 18px 14px;
    }
    .levp-footer {
        padding: 0 18px 16px;
    }
}