{"id":669,"date":"2026-06-23T18:21:36","date_gmt":"2026-06-23T16:21:36","guid":{"rendered":"https:\/\/app.vosol-france.com\/?page_id=669"},"modified":"2026-06-28T17:54:32","modified_gmt":"2026-06-28T15:54:32","slug":"remerciement","status":"publish","type":"page","link":"https:\/\/ocia-fr.com\/index.php\/remerciement\/","title":{"rendered":"Remerciement"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"669\" class=\"elementor elementor-669\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6b21bdf e-flex e-con-boxed e-con e-parent\" data-id=\"6b21bdf\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-42de230 elementor-widget elementor-widget-html\" data-id=\"42de230\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes\">\r\n    <meta name=\"theme-color\" content=\"#2563eb\">\r\n    <meta name=\"apple-mobile-web-app-capable\" content=\"yes\">\r\n    <meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black-translucent\">\r\n    <title>Merci - G\u00e9n\u00e9rateur de Justificatifs<\/title>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n    <style>\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n            -webkit-tap-highlight-color: transparent;\r\n        }\r\n\r\n        :root {\r\n            --primary: #2563eb;\r\n            --primary-dark: #1d4ed8;\r\n            --primary-light: #dbeafe;\r\n            --secondary: #059669;\r\n            --success: #10b981;\r\n            --text-dark: #0f172a;\r\n            --text-gray: #334155;\r\n            --text-light: #64748b;\r\n            --bg-light: #f8fafc;\r\n            --card-bg: #ffffff;\r\n            --shadow: 0 20px 60px rgba(0, 0, 0, 0.08);\r\n            --radius: 16px;\r\n            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n        }\r\n\r\n        body {\r\n            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n            background: var(--bg-light);\r\n            min-height: 100vh;\r\n            padding: 0;\r\n            margin: 0;\r\n            color: var(--text-dark);\r\n        }\r\n\r\n        \/* ========== HEADER \/ NAV ========== *\/\r\n        .navbar {\r\n            background: var(--card-bg);\r\n            padding: 12px 20px;\r\n            border-bottom: 1px solid #e2e8f0;\r\n            position: sticky;\r\n            top: 0;\r\n            z-index: 100;\r\n            backdrop-filter: blur(10px);\r\n            background: rgba(255, 255, 255, 0.95);\r\n        }\r\n\r\n        .nav-container {\r\n            max-width: 640px;\r\n            margin: 0 auto;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: space-between;\r\n        }\r\n\r\n        .nav-brand {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 10px;\r\n            text-decoration: none;\r\n        }\r\n\r\n        .nav-brand .logo-icon {\r\n            width: 36px;\r\n            height: 36px;\r\n            background: var(--primary);\r\n            border-radius: 10px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: white;\r\n            font-size: 18px;\r\n        }\r\n\r\n        .nav-brand .brand-text {\r\n            font-size: 18px;\r\n            font-weight: 700;\r\n            color: var(--text-dark);\r\n        }\r\n\r\n        .nav-brand .brand-text span {\r\n            font-weight: 400;\r\n            color: var(--text-light);\r\n        }\r\n\r\n        .nav-badge {\r\n            background: var(--success);\r\n            color: white;\r\n            padding: 4px 12px;\r\n            border-radius: 50px;\r\n            font-size: 11px;\r\n            font-weight: 600;\r\n        }\r\n\r\n        \/* ========== MAIN CONTAINER ========== *\/\r\n        .main-container {\r\n            max-width: 640px;\r\n            margin: 0 auto;\r\n            padding: 40px 16px 80px;\r\n            position: relative;\r\n            z-index: 2;\r\n        }\r\n\r\n        \/* ========== CARD ========== *\/\r\n        .card {\r\n            background: var(--card-bg);\r\n            border-radius: var(--radius);\r\n            box-shadow: var(--shadow);\r\n            padding: 40px 24px;\r\n            border: 1px solid rgba(255, 255, 255, 0.5);\r\n            text-align: center;\r\n        }\r\n\r\n        \/* ========== SUCCESS ICON ========== *\/\r\n        .success-icon {\r\n            width: 80px;\r\n            height: 80px;\r\n            background: linear-gradient(135deg, #d1fae5, #a7f3d0);\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            margin: 0 auto 20px;\r\n            position: relative;\r\n            animation: popIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n        }\r\n\r\n        .success-icon::before {\r\n            content: '';\r\n            position: absolute;\r\n            inset: -4px;\r\n            border-radius: 50%;\r\n            background: linear-gradient(135deg, var(--success), #059669);\r\n            opacity: 0.15;\r\n            animation: pulseRing 2s ease-in-out infinite;\r\n        }\r\n\r\n        @keyframes popIn {\r\n            0% { transform: scale(0); opacity: 0; }\r\n            50% { transform: scale(1.1); }\r\n            100% { transform: scale(1); opacity: 1; }\r\n        }\r\n\r\n        @keyframes pulseRing {\r\n            0%, 100% { transform: scale(1); opacity: 0.15; }\r\n            50% { transform: scale(1.2); opacity: 0.05; }\r\n        }\r\n\r\n        .success-icon i {\r\n            font-size: 36px;\r\n            color: var(--success);\r\n            position: relative;\r\n            z-index: 1;\r\n        }\r\n\r\n        \/* ========== TITLE ========== *\/\r\n        .card h1 {\r\n            font-size: 28px;\r\n            font-weight: 900;\r\n            color: var(--text-dark);\r\n            margin-bottom: 8px;\r\n        }\r\n\r\n        .card .subtitle {\r\n            font-size: 18px;\r\n            color: var(--text-gray);\r\n            font-weight: 400;\r\n            margin-bottom: 8px;\r\n        }\r\n\r\n        .card .description {\r\n            font-size: 16px;\r\n            color: var(--text-light);\r\n            line-height: 1.7;\r\n            max-width: 440px;\r\n            margin: 0 auto 24px;\r\n        }\r\n\r\n        \/* ========== ACTION BUTTONS ========== *\/\r\n        .action-buttons {\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            gap: 12px;\r\n            justify-content: center;\r\n            margin-top: 8px;\r\n        }\r\n\r\n        .btn-primary {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            padding: 14px 32px;\r\n            background: var(--primary);\r\n            color: white;\r\n            border: none;\r\n            border-radius: 50px;\r\n            font-size: 16px;\r\n            font-weight: 600;\r\n            cursor: pointer;\r\n            transition: var(--transition);\r\n            text-decoration: none;\r\n            font-family: inherit;\r\n            box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3);\r\n        }\r\n\r\n        .btn-primary:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 8px 24px rgba(37, 99, 235, 0.4);\r\n        }\r\n\r\n        .btn-primary:active {\r\n            transform: scale(0.97);\r\n        }\r\n\r\n        .btn-secondary {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            padding: 14px 32px;\r\n            background: var(--card-bg);\r\n            color: var(--text-dark);\r\n            border: 2px solid #e2e8f0;\r\n            border-radius: 50px;\r\n            font-size: 16px;\r\n            font-weight: 600;\r\n            cursor: pointer;\r\n            transition: var(--transition);\r\n            text-decoration: none;\r\n            font-family: inherit;\r\n        }\r\n\r\n        .btn-secondary:hover {\r\n            border-color: var(--primary);\r\n            color: var(--primary);\r\n        }\r\n\r\n        .btn-secondary:active {\r\n            transform: scale(0.97);\r\n        }\r\n\r\n        .btn-success {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            padding: 14px 32px;\r\n            background: var(--success);\r\n            color: white;\r\n            border: none;\r\n            border-radius: 50px;\r\n            font-size: 16px;\r\n            font-weight: 600;\r\n            cursor: pointer;\r\n            transition: var(--transition);\r\n            text-decoration: none;\r\n            font-family: inherit;\r\n            box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);\r\n        }\r\n\r\n        .btn-success:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);\r\n        }\r\n\r\n        .btn-success:active {\r\n            transform: scale(0.97);\r\n        }\r\n\r\n        \/* ========== INFO BOX ========== *\/\r\n        .info-box {\r\n            background: #f8fafc;\r\n            border-radius: 12px;\r\n            padding: 16px 20px;\r\n            margin: 20px 0 8px;\r\n            border: 1px solid #e2e8f0;\r\n            display: flex;\r\n            align-items: flex-start;\r\n            gap: 12px;\r\n            text-align: left;\r\n        }\r\n\r\n        .info-box i {\r\n            color: var(--primary);\r\n            font-size: 18px;\r\n            margin-top: 2px;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .info-box .content {\r\n            font-size: 14px;\r\n            color: var(--text-gray);\r\n            line-height: 1.6;\r\n        }\r\n\r\n        .info-box .content strong {\r\n            color: var(--text-dark);\r\n        }\r\n\r\n        \/* ========== FEATURES MINI ========== *\/\r\n        .features-mini {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: 12px;\r\n            margin-top: 24px;\r\n        }\r\n\r\n        .feature-mini {\r\n            text-align: center;\r\n            padding: 12px 8px;\r\n            background: #f8fafc;\r\n            border-radius: 12px;\r\n            border: 1px solid #e2e8f0;\r\n        }\r\n\r\n        .feature-mini i {\r\n            font-size: 20px;\r\n            color: var(--success);\r\n            display: block;\r\n            margin-bottom: 4px;\r\n        }\r\n\r\n        .feature-mini .label {\r\n            font-size: 11px;\r\n            font-weight: 600;\r\n            color: var(--text-light);\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.3px;\r\n        }\r\n\r\n        .feature-mini .value {\r\n            font-size: 14px;\r\n            font-weight: 700;\r\n            color: var(--text-dark);\r\n            display: block;\r\n        }\r\n\r\n        \/* ========== FOOTER ========== *\/\r\n        .footer {\r\n            text-align: center;\r\n            padding: 24px 0 8px;\r\n            margin-top: 8px;\r\n        }\r\n\r\n        .footer-links {\r\n            display: flex;\r\n            justify-content: center;\r\n            gap: 20px;\r\n            flex-wrap: wrap;\r\n            margin-bottom: 12px;\r\n        }\r\n\r\n        .footer-links a {\r\n            color: var(--text-light);\r\n            font-size: 13px;\r\n            text-decoration: none;\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .footer-links a:hover {\r\n            color: var(--primary);\r\n        }\r\n\r\n        .footer-divider {\r\n            width: 40px;\r\n            height: 2px;\r\n            background: var(--primary);\r\n            margin: 0 auto 12px;\r\n            border-radius: 2px;\r\n            opacity: 0.3;\r\n        }\r\n\r\n        .footer-copy {\r\n            font-size: 12px;\r\n            color: #94a3b8;\r\n        }\r\n\r\n        \/* ========== CONFETTI ANIMATION ========== *\/\r\n        .confetti-container {\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            pointer-events: none;\r\n            z-index: 0;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .confetti {\r\n            position: absolute;\r\n            width: 10px;\r\n            height: 10px;\r\n            opacity: 0;\r\n            animation: confettiFall linear forwards;\r\n        }\r\n\r\n        @keyframes confettiFall {\r\n            0% {\r\n                transform: translateY(-10vh) rotate(0deg);\r\n                opacity: 1;\r\n            }\r\n            100% {\r\n                transform: translateY(110vh) rotate(720deg);\r\n                opacity: 0;\r\n            }\r\n        }\r\n\r\n        \/* ========== DARK MODE ========== *\/\r\n        @media (prefers-color-scheme: dark) {\r\n            :root {\r\n                --bg-light: #0f172a;\r\n                --card-bg: #1e293b;\r\n                --text-dark: #f1f5f9;\r\n                --text-gray: #cbd5e1;\r\n                --text-light: #94a3b8;\r\n            }\r\n\r\n            .navbar {\r\n                background: rgba(15, 23, 42, 0.95);\r\n                border-color: #1e293b;\r\n            }\r\n\r\n            .nav-brand .brand-text {\r\n                color: #f1f5f9;\r\n            }\r\n\r\n            .card {\r\n                border-color: rgba(255, 255, 255, 0.05);\r\n            }\r\n\r\n            .btn-secondary {\r\n                background: #1e293b;\r\n                border-color: #334155;\r\n                color: #f1f5f9;\r\n            }\r\n\r\n            .btn-secondary:hover {\r\n                border-color: var(--primary);\r\n                color: var(--primary);\r\n            }\r\n\r\n            .info-box {\r\n                background: #1e293b;\r\n                border-color: #334155;\r\n            }\r\n\r\n            .info-box .content {\r\n                color: #cbd5e1;\r\n            }\r\n\r\n            .info-box .content strong {\r\n                color: #f1f5f9;\r\n            }\r\n\r\n            .feature-mini {\r\n                background: #1e293b;\r\n                border-color: #334155;\r\n            }\r\n\r\n            .feature-mini .value {\r\n                color: #f1f5f9;\r\n            }\r\n\r\n            .success-icon {\r\n                background: linear-gradient(135deg, #064e3b, #065f46);\r\n            }\r\n\r\n            .footer-links a {\r\n                color: #64748b;\r\n            }\r\n\r\n            .footer-copy {\r\n                color: #475569;\r\n            }\r\n        }\r\n\r\n        \/* ========== RESPONSIVE ========== *\/\r\n        @media (max-width: 420px) {\r\n            .main-container {\r\n                padding: 20px 12px 70px;\r\n            }\r\n\r\n            .card {\r\n                padding: 28px 16px;\r\n            }\r\n\r\n            .card h1 {\r\n                font-size: 24px;\r\n            }\r\n\r\n            .card .subtitle {\r\n                font-size: 16px;\r\n            }\r\n\r\n            .action-buttons .btn-primary,\r\n            .action-buttons .btn-secondary,\r\n            .action-buttons .btn-success {\r\n                width: 100%;\r\n                justify-content: center;\r\n            }\r\n\r\n            .success-icon {\r\n                width: 64px;\r\n                height: 64px;\r\n            }\r\n\r\n            .success-icon i {\r\n                font-size: 28px;\r\n            }\r\n\r\n            .features-mini {\r\n                grid-template-columns: 1fr 1fr;\r\n                gap: 8px;\r\n            }\r\n\r\n            .info-box {\r\n                padding: 14px 16px;\r\n            }\r\n        }\r\n\r\n        @media (min-width: 768px) {\r\n            .main-container {\r\n                padding: 60px 24px 80px;\r\n            }\r\n\r\n            .card {\r\n                padding: 48px 36px;\r\n            }\r\n\r\n            .card h1 {\r\n                font-size: 32px;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <!-- ========== CONFETTI ========== -->\r\n    <div class=\"confetti-container\" id=\"confettiContainer\"><\/div>\r\n\r\n    <!-- ========== NAVBAR ========== -->\r\n    <nav class=\"navbar\">\r\n        <div class=\"nav-container\">\r\n            <a href=\"index.html\" class=\"nav-brand\">\r\n                <div class=\"logo-icon\">\r\n                    <i class=\"fas fa-file-alt\"><\/i>\r\n                <\/div>\r\n                <span class=\"brand-text\">G\u00e9n\u00e9rateur <span>Justificatifs<\/span><\/span>\r\n            <\/a>\r\n            <span class=\"nav-badge\">\r\n                <i class=\"fas fa-check-circle\" style=\"margin-right: 4px;\"><\/i>\r\n                Succ\u00e8s\r\n            <\/span>\r\n        <\/div>\r\n    <\/nav>\r\n\r\n    <!-- ========== MAIN CONTAINER ========== -->\r\n    <div class=\"main-container\">\r\n\r\n        <!-- ========== CARD MERCI ========== -->\r\n        <div class=\"card\">\r\n            <!-- Icon -->\r\n            <div class=\"success-icon\">\r\n                <i class=\"fas fa-check-circle\"><\/i>\r\n            <\/div>\r\n\r\n            <!-- Titre -->\r\n            <h1>Merci !<\/h1>\r\n            <p class=\"subtitle\">Votre document a \u00e9t\u00e9 g\u00e9n\u00e9r\u00e9 avec succ\u00e8s<\/p>\r\n            <p class=\"description\">\r\n                Votre justificatif est pr\u00eat \u00e0 \u00eatre t\u00e9l\u00e9charg\u00e9. Vous recevrez \u00e9galement \r\n                un email de confirmation dans les prochaines minutes.\r\n            <\/p>\r\n\r\n            <!-- Actions -->\r\n            <div class=\"action-buttons\">\r\n             \r\n                <a href=\"index.html\" class=\"btn-secondary\">\r\n                    <i class=\"fas fa-home\"><\/i>\r\n                    Retour \u00e0 l'accueil\r\n                <\/a>\r\n            <\/div>\r\n\r\n            <!-- Info box -->\r\n            <div class=\"info-box\">\r\n                <i class=\"fas fa-info-circle\"><\/i>\r\n                <div class=\"content\">\r\n                    <strong>Un email de confirmation vous a \u00e9t\u00e9 envoy\u00e9.<\/strong><br>\r\n                    V\u00e9rifiez votre bo\u00eete de r\u00e9ception (et vos spams). \r\n                    Conservez pr\u00e9cieusement votre document PDF.\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Features mini -->\r\n            <div class=\"features-mini\">\r\n                <div class=\"feature-mini\">\r\n                    <i class=\"fas fa-file-pdf\"><\/i>\r\n                    <span class=\"label\">Document<\/span>\r\n                    <span class=\"value\">PDF pr\u00eat<\/span>\r\n                <\/div>\r\n                <div class=\"feature-mini\">\r\n                    <i class=\"fas fa-envelope\"><\/i>\r\n                    <span class=\"label\">Email<\/span>\r\n                    <span class=\"value\">Confirm\u00e9<\/span>\r\n                <\/div>\r\n                <div class=\"feature-mini\">\r\n                    <i class=\"fas fa-shield-alt\"><\/i>\r\n                    <span class=\"label\">S\u00e9curit\u00e9<\/span>\r\n                    <span class=\"value\">100%<\/span>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- ========== ACTIONS SUPPL\u00c9MENTAIRES ========== -->\r\n        <div style=\"text-align: center; margin-top: 16px;\">\r\n            <p style=\"font-size: 14px; color: var(--text-light);\">\r\n                <i class=\"fas fa-question-circle\" style=\"margin-right: 6px;\"><\/i>\r\n                Une question ? \r\n                <a href=\"#\" onclick=\"showToast('\ud83d\udcac Support disponible 7j\/7')\" style=\"color: var(--primary); text-decoration: none; font-weight: 600;\">\r\n                    Contactez-nous\r\n                <\/a>\r\n            <\/p>\r\n        <\/div>\r\n\r\n        <!-- ========== FOOTER ========== -->\r\n        <div class=\"footer\">\r\n            <div class=\"footer-links\">\r\n                <a href=\"index.html\">Accueil<\/a>\r\n                <a href=\"#\" onclick=\"showToast('\ud83d\udcde Support : 01 23 45 67 89')\">Aide<\/a>\r\n                <a href=\"#\" onclick=\"showToast('\ud83d\udd12 Document s\u00e9curis\u00e9 et conforme')\">S\u00e9curit\u00e9<\/a>\r\n                <a href=\"#\" onclick=\"showToast('\ud83d\udce7 contact@generateur-justificatifs.fr')\">Contact<\/a>\r\n            <\/div>\r\n            <div class=\"footer-divider\"><\/div>\r\n            <div class=\"footer-copy\">\r\n                &copy; Ocia France \u00b7 Tous droits r\u00e9serv\u00e9s\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- ========== TOAST ========== -->\r\n    <div class=\"toast\" id=\"toast\"><\/div>\r\n\r\n    <style>\r\n        \/* Toast styles *\/\r\n        .toast {\r\n            position: fixed;\r\n            bottom: 24px;\r\n            left: 50%;\r\n            transform: translateX(-50%) translateY(100px);\r\n            background: #0f172a;\r\n            color: white;\r\n            padding: 14px 24px;\r\n            border-radius: 14px;\r\n            font-size: 14px;\r\n            font-weight: 500;\r\n            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);\r\n            opacity: 0;\r\n            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n            z-index: 200;\r\n            pointer-events: none;\r\n            max-width: 90%;\r\n            text-align: center;\r\n        }\r\n\r\n        .toast.show {\r\n            opacity: 1;\r\n            transform: translateX(-50%) translateY(0);\r\n        }\r\n\r\n        @media (prefers-color-scheme: dark) {\r\n            .toast {\r\n                background: #1e293b;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <script>\r\n        \/\/ ========== CONFETTI ==========\r\n        function createConfetti() {\r\n            const container = document.getElementById('confettiContainer');\r\n            const colors = ['#2563eb', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#06b6d4'];\r\n            \r\n            for (let i = 0; i < 80; i++) {\r\n                const confetti = document.createElement('div');\r\n                confetti.className = 'confetti';\r\n                confetti.style.left = Math.random() * 100 + '%';\r\n                confetti.style.background = colors[Math.floor(Math.random() * colors.length)];\r\n                confetti.style.width = (Math.random() * 8 + 4) + 'px';\r\n                confetti.style.height = (Math.random() * 8 + 4) + 'px';\r\n                confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '2px';\r\n                confetti.style.animationDuration = (Math.random() * 2 + 2) + 's';\r\n                confetti.style.animationDelay = (Math.random() * 2) + 's';\r\n                container.appendChild(confetti);\r\n            }\r\n        }\r\n\r\n        \/\/ Lancer les confettis au chargement\r\n        document.addEventListener('DOMContentLoaded', createConfetti);\r\n\r\n        \/\/ ========== TOAST ==========\r\n        let toastTimeout;\r\n\r\n        function showToast(message) {\r\n            const toast = document.getElementById('toast');\r\n            toast.textContent = message;\r\n            toast.classList.add('show');\r\n            \r\n            clearTimeout(toastTimeout);\r\n            toastTimeout = setTimeout(() => {\r\n                toast.classList.remove('show');\r\n            }, 3000);\r\n        }\r\n\r\n        \/\/ ========== SMOOTH SCROLL ==========\r\n        document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\r\n            anchor.addEventListener('click', function(e) {\r\n                e.preventDefault();\r\n                const target = document.querySelector(this.getAttribute('href'));\r\n                if (target) {\r\n                    target.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n                }\r\n            });\r\n        });\r\n\r\n        \/\/ ========== DARK MODE ==========\r\n        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {\r\n            document.querySelector('meta[name=\"theme-color\"]').content = '#0f172a';\r\n        }\r\n\r\n        \/\/ ========== CONSOLE ==========\r\n        console.log('%c\ud83c\udf89 Merci ! Document g\u00e9n\u00e9r\u00e9 avec succ\u00e8s', 'font-size: 22px; font-weight: bold; color: #10b981;');\r\n        console.log('%c\ud83d\udcc4 Votre PDF est pr\u00eat \u00e0 \u00eatre t\u00e9l\u00e9charg\u00e9', 'font-size: 14px; color: #2563eb;');\r\n        console.log('%c\ud83d\udce7 Un email de confirmation vous a \u00e9t\u00e9 envoy\u00e9', 'font-size: 14px; color: #64748b;');\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Merci &#8211; G\u00e9n\u00e9rateur de Justificatifs G\u00e9n\u00e9rateur Justificatifs Succ\u00e8s Merci ! Votre document a \u00e9t\u00e9 g\u00e9n\u00e9r\u00e9 avec succ\u00e8s Votre justificatif est [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-669","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ocia-fr.com\/index.php\/wp-json\/wp\/v2\/pages\/669","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ocia-fr.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ocia-fr.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ocia-fr.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ocia-fr.com\/index.php\/wp-json\/wp\/v2\/comments?post=669"}],"version-history":[{"count":10,"href":"https:\/\/ocia-fr.com\/index.php\/wp-json\/wp\/v2\/pages\/669\/revisions"}],"predecessor-version":[{"id":690,"href":"https:\/\/ocia-fr.com\/index.php\/wp-json\/wp\/v2\/pages\/669\/revisions\/690"}],"wp:attachment":[{"href":"https:\/\/ocia-fr.com\/index.php\/wp-json\/wp\/v2\/media?parent=669"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}