/**
 * Ecole du Bonheur - Popup/Modal Styles
 * Extracted from index.html second style block
 * Contains: overlay, popup card, animations
 */
        .popup-overlay {
            position: fixed; inset: 0;
            background: rgba(30, 58, 138, 0.45);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            z-index: 10000;
            display: flex; align-items: center; justify-content: center;
            animation: fadeIn 0.4s ease;
            padding: 20px;
        }
        .popup-card {
            background: var(--white, #fff);
            border-radius: var(--radius, 20px);
            max-width: 520px; width: 100%;
            padding: 48px 40px 40px;
            position: relative;
            box-shadow: 0 25px 60px rgba(30, 58, 138, 0.25), 0 0 0 1px rgba(65, 105, 225, 0.08);
            animation: popupIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            text-align: center;
            overflow: hidden;
        }
        .popup-card::before {
            content: '';
            position: absolute; top: 0; left: 0; right: 0;
            height: 5px;
            background: linear-gradient(90deg, #FF0000, #FF7F00, #FFFF00, #00CC00, #0000FF, #4B0082, #8B00FF);
        }
        .popup-icon {
            width: 64px; height: 64px;
            background: var(--gradient-primary, linear-gradient(135deg, #4169E1, #7B93E8));
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 24px;
            font-size: 28px; color: #fff;
            box-shadow: 0 8px 24px rgba(65, 105, 225, 0.3);
        }
        .popup-badge {
            display: inline-block;
            background: var(--primary-ultra-light, #E8EEFF);
            color: var(--primary, #4169E1);
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-weight: 700; font-size: 0.75rem;
            letter-spacing: 1.5px; text-transform: uppercase;
            padding: 6px 16px; border-radius: 50px;
            margin-bottom: 16px;
        }
        .popup-title {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 1.5rem; font-weight: 800;
            color: var(--text-dark, #1E293B);
            line-height: 1.3; margin-bottom: 16px;
        }
        .popup-text {
            font-family: 'Nunito', sans-serif;
            font-size: 1.05rem; line-height: 1.7;
            color: var(--text-medium, #475569);
            margin-bottom: 32px;
        }
        .popup-cta {
            display: inline-flex; align-items: center; gap: 10px;
            background: var(--gradient-primary-dark, linear-gradient(135deg, #2D4BA8, #4169E1));
            color: #fff; text-decoration: none;
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-weight: 700; font-size: 1rem;
            padding: 16px 36px; border-radius: var(--radius-full, 50px);
            box-shadow: var(--shadow-primary, 0 8px 30px rgba(65, 105, 225, 0.3));
            transition: var(--transition-bounce, all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1));
            border: none; cursor: pointer;
        }
        .popup-cta:hover {
            transform: translateY(-3px) scale(1.03);
            box-shadow: 0 12px 35px rgba(65, 105, 225, 0.4);
        }
        .popup-cta i { transition: transform 0.3s ease; }
        .popup-cta:hover i { transform: translateX(4px); }
        .popup-close {
            position: absolute; top: 16px; right: 16px;
            width: 36px; height: 36px; border-radius: 50%;
            border: none; background: var(--light-bg, #F0F5FF);
            color: var(--text-light, #64748B);
            font-size: 18px; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: var(--transition, all 0.3s ease);
        }
        .popup-close:hover {
            background: var(--primary-ultra-light, #E8EEFF);
            color: var(--primary, #4169E1);
            transform: rotate(90deg);
        }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
        @keyframes popupIn { from { opacity: 0; transform: scale(0.85) translateY(30px); } to { opacity: 1; transform: scale(1) translateY(0); } }
        @keyframes popupOut { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.85) translateY(30px); } }
        @media (max-width: 600px) {
            .popup-card { padding: 40px 24px 32px; }
            .popup-title { font-size: 1.25rem; }
            .popup-cta { padding: 14px 28px; font-size: 0.95rem; }
        }