{"id":5882,"date":"2025-10-23T22:27:45","date_gmt":"2025-10-23T20:27:45","guid":{"rendered":"https:\/\/xpandai.one\/?post_type=mpcs-lesson&#038;p=5882"},"modified":"2025-10-23T22:27:46","modified_gmt":"2025-10-23T20:27:46","slug":"felicitations","status":"publish","type":"mpcs-lesson","link":"https:\/\/xpandai.one\/en\/courses\/xpandai-academy-fr\/lessons\/felicitations\/","title":{"rendered":"F\u00e9licitations"},"content":{"rendered":"\n<style>\n\/* Variables de couleur de base (comme d'habitude) *\/\n:root {\n    --primary: #52898b;      \/* Turquoise *\/\n    --secondary: #19404e;    \/* Bleu fonc\u00e9 *\/\n    --light-bg: #f5f9fa;     \/* Arri\u00e8re-plan *\/\n    --border: #e0e8e9;       \/* Bordure *\/\n    --accent: #e67e22;       \/* Accentuation\/Orange *\/\n    --text: #333333;         \/* Texte *\/\n    --white: #ffffff;\n    \/* Couleurs de niveau *\/\n    --explorer-color: #4573d5; \/* Bleu *\/\n    --navigator-color: #e6b035; \/* Jaune *\/\n    --ambassador-color: #49a75c; \/* Vert *\/\n    --architect-color: #d95555;  \/* Rouge *\/\n}\n\/* Style de base pour l'ensemble du module (largeur 800px) *\/\n.xpand-module-wrapper {\n    width: 100%;\n    max-width: 800px;\n    margin: 0 auto;\n    padding: 20px;\n    box-sizing: border-box;\n    font-family: 'Arial', sans-serif;\n    color: var(--text);\n    background-color: var(--white);\n}\n\/* --- Style pour le conteneur du feu d'artifice et le canvas --- *\/\n.fireworks-container {\n    height: 300px; \/* Un peu plus de hauteur *\/\n    position: relative; \/* IMPORTANT pour le positionnement absolu du texte *\/\n    margin-bottom: 20px;\n    background: radial-gradient(ellipse at bottom, #3a7c8a, var(--secondary) 75%);\n    border-radius: 8px;\n    overflow: hidden;\n}\n#fireworks-canvas {\n    display: block;\n    width: 100%;\n    height: 100%;\n    background-color: transparent;\n    cursor: pointer;\n    position: absolute; \/* S'assurer qu'il remplit le conteneur *\/\n    top: 0;\n    left: 0;\n    z-index: 1; \/* Derri\u00e8re le texte *\/\n}\n\/* --- Style pour le texte de f\u00e9licitations AU-DESSUS du feu d'artifice --- *\/\n#congrats-title {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%); \/* Centre le texte *\/\n    width: 90%; \/* Emp\u00eache le retour \u00e0 la ligne dans les conteneurs \u00e9troits *\/\n    margin: 0;\n    font-size: 28px;\n    font-weight: bold;\n    color: var(--white);\n    text-align: center;\n    text-shadow: 0 0 8px rgba(0, 0, 0, 0.7); \/* Ombre pour une meilleure lisibilit\u00e9 *\/\n    z-index: 2; \/* Au-dessus du canvas *\/\n    opacity: 0; \/* Commence invisible *\/\n    transition: opacity 1.5s ease-in; \/* Apparition en douceur *\/\n    pointer-events: none; \/* Les clics traversent vers le canvas *\/\n}\n#congrats-title.visible {\n    opacity: 1; \/* Rend le texte visible *\/\n}\n\/* --- Styles Xpand standard (le reste comme d'habitude) --- *\/\n\/* Bo\u00eete pour Q\/R *\/\n.qa-box {\n    background-color: var(--light-bg);\n    padding: 20px 24px;\n    border-radius: 8px;\n    margin-bottom: 24px;\n    border-left: 4px solid var(--explorer-color);\n}\n\/* Carte de contenu standard *\/\n.content-card {\n    background-color: var(--white);\n    border-radius: 8px;\n    box-shadow: 0 4px 10px rgba(0,0,0,0.05);\n    padding: 20px;\n    margin-bottom: 24px;\n    border-top: 4px solid var(--ambassador-color);\n}\n\/* Titre de section *\/\n.section-header { display: flex; align-items: center; margin-bottom: 16px; }\n.section-header svg { margin-right: 12px; color: var(--secondary); width: 22px; height: 22px; flex-shrink: 0; }\n.section-header h3 { margin: 0; font-size: 20px; color: var(--secondary); }\n\/* Bo\u00eete d'appel \u00e0 l'action *\/\n.cta-box {\n    background-color: #fff8e1;\n    padding: 20px 24px;\n    border-radius: 8px;\n    margin-bottom: 24px;\n    border-left: 4px solid var(--navigator-color);\n}\n\/* Style pour l'avis LinkedIn *\/\n.linkedin-hint {\n    display: flex;\n    align-items: center;\n    background-color: #e7f3f8;\n    color: #004182;\n    padding: 12px 15px;\n    border-radius: 6px;\n    margin-top: 15px;\n    font-size: 0.9em;\n    border: 1px solid #bce0ee;\n}\n.linkedin-hint svg { width: 20px; height: 20px; margin-right: 10px; fill: currentColor; flex-shrink: 0; }\n\/* Salutations de fin *\/\n.closing { text-align: center; margin-top: 30px; padding: 20px; background-color: var(--light-bg); border-radius: 8px; }\n.signature { font-style: italic; margin-bottom: 15px; }\n\/* Mise en forme g\u00e9n\u00e9rale du texte *\/\np { line-height: 1.6; margin-bottom: 15px; color: var(--text); }\nstrong { font-weight: bold; color: var(--secondary); }\nul { padding-left: 25px; margin-bottom: 15px; list-style-type: disc; }\nli { margin-bottom: 10px; line-height: 1.6; color: var(--text); }\n\/* Ajustements responsives *\/\n@media (max-width: 768px) {\n    #congrats-title { font-size: 24px; } \/* Texte plus petit sur mobile *\/\n    .section-header h3 { font-size: 18px; }\n    .xpand-module-wrapper { padding: 15px; }\n    .fireworks-container { height: 250px; } \/* Ajuster la hauteur *\/\n    .linkedin-hint { font-size: 0.85em; padding: 10px 12px; }\n}\n<\/style>\n<div class=\"xpand-module-wrapper\">\n    <div class=\"fireworks-container\">\n        <canvas id=\"fireworks-canvas\"><\/canvas>\n        <h2 id=\"congrats-title\">F\u00e9licitations \u2013 vous avez r\u00e9ussi&nbsp;!<\/h2>\n    <\/div>\n    <p>Vous avez termin\u00e9 le cours avec succ\u00e8s, faisant preuve \u00e0 la fois d&#8217;engagement et de curiosit\u00e9. D\u00e9sormais, avec vos nouvelles connaissances dans le domaine de l&#8217;IA, vous \u00eates parfaitement \u00e9quip\u00e9(e) pour les mettre en pratique et cr\u00e9er de r\u00e9els avantages pour vous et votre entreprise.<\/p>\n    <p>Vous pouvez maintenant r\u00e9cup\u00e9rer votre certificat.<\/p>\n    <div class=\"closing\">\n        <p>Nous vous souhaitons beaucoup de succ\u00e8s pour la suite de votre parcours&nbsp;!<\/p>\n    <\/div>\n<\/div><script>\n\/\/ --- Animation de feu d'artifice en JavaScript ---\ndocument.addEventListener('DOMContentLoaded', () => {\n    const canvas = document.getElementById('fireworks-canvas');\n    const congratsTitle = document.getElementById('congrats-title'); \/\/ *** R\u00e9cup\u00e9rer l'\u00e9l\u00e9ment du titre\n    if (!canvas || !congratsTitle) { \/\/ *** V\u00e9rifier si les deux \u00e9l\u00e9ments sont pr\u00e9sents\n        console.error(\"Le canvas du feu d'artifice ou le titre de f\u00e9licitations est introuvable !\");\n        return;\n    }\n    const ctx = canvas.getContext('2d');\n    let canvasWidth = canvas.offsetWidth;\n    let canvasHeight = canvas.offsetHeight;\n    canvas.width = canvasWidth;\n    canvas.height = canvasHeight;\n    const fireworks = [];\n    const particles = [];\n    const gravity = 0.04; \/\/ Un peu moins de gravit\u00e9 pour un temps de vol plus long\n    const particleCount = 90; \/\/ Plus de particules\n    const colors = ['#ffdd57', '#ff6b6b', '#48dbfb', '#f8f8f8', '#feca57', '#ff9f43', '#1dd1a1'];\n    function random(min, max) { return Math.random() * (max - min) + min; }\n    class Firework {\n        constructor(x, y, targetX, targetY) {\n            this.x = x; this.y = y;\n            this.startX = x; this.startY = y;\n            this.targetX = targetX; this.targetY = targetY;\n            this.distanceToTarget = Math.sqrt(Math.pow(targetX - x, 2) + Math.pow(targetY - y, 2));\n            this.distanceTraveled = 0;\n            this.angle = Math.atan2(targetY - y, targetX - x);\n            this.speed = 2;\n            this.acceleration = 1.03; \/\/ Conserv\u00e9\n            this.brightness = random(50, 70);\n            this.targetRadius = 1;\n        }\n        update(index) {\n            this.speed *= this.acceleration;\n            const vx = Math.cos(this.angle) * this.speed;\n            const vy = Math.sin(this.angle) * this.speed;\n            this.distanceTraveled = Math.sqrt(Math.pow(this.x - this.startX, 2) + Math.pow(this.y - this.startY, 2));\n            if (this.distanceTraveled >= this.distanceToTarget) {\n                createParticles(this.targetX, this.targetY);\n                fireworks.splice(index, 1);\n            } else {\n                this.x += vx;\n                this.y += vy;\n            }\n        }\n        draw() {\n            ctx.beginPath();\n            ctx.moveTo(this.x + Math.cos(this.angle) * this.speed * 1.5, this.y + Math.sin(this.angle) * this.speed * 1.5);\n            ctx.lineTo(this.x, this.y);\n            ctx.strokeStyle = `hsl(${random(0,360)}, 100%, ${this.brightness}%)`;\n            ctx.lineWidth = 2.5; \/\/ Un peu plus \u00e9pais\n            ctx.stroke();\n        }\n    }\n    class Particle {\n        constructor(x, y) {\n            this.x = x;\n            this.y = y;\n            this.angle = random(0, Math.PI * 2);\n            this.speed = random(1, 6); \/\/ Vitesse max. un peu plus \u00e9lev\u00e9e\n            this.friction = 0.97;\n            this.gravity = gravity;\n            this.hue = random(0, 360);\n            this.brightness = random(50, 85); \/\/ Plus clair\n            this.alpha = 1;\n            this.decay = random(0.008, 0.018); \/\/ *** Fondu plus lent pour une visibilit\u00e9 plus longue\n        }\n        update(index) {\n            this.speed *= this.friction;\n            this.x += Math.cos(this.angle) * this.speed;\n            this.y += Math.sin(this.angle) * this.speed + this.gravity;\n            this.alpha -= this.decay;\n            if (this.alpha <= this.decay) {\n                particles.splice(index, 1);\n            }\n        }\n        draw() {\n            ctx.beginPath();\n            ctx.arc(this.x, this.y, 2.5, 0, Math.PI * 2, false); \/\/ Particules un peu plus grandes\n            ctx.fillStyle = `hsla(${this.hue}, 100%, ${this.brightness}%, ${this.alpha})`;\n            ctx.fill();\n        }\n    }\n    function createParticles(x, y) {\n        const explosionColor = colors[Math.floor(random(0, colors.length))]; \/\/ Optionnel : Couleur fixe par explosion\n        for (let i = 0; i < particleCount; i++) {\n            particles.push(new Particle(x, y));\n            \/\/ Optionnel : D\u00e9finir la couleur ici si une couleur fixe est souhait\u00e9e\n        }\n    }\n    let animationFrameId = null;\n    function loop() {\n        animationFrameId = requestAnimationFrame(loop);\n        ctx.globalCompositeOperation = 'destination-out';\n        ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';\n        ctx.fillRect(0, 0, canvasWidth, canvasHeight);\n        ctx.globalCompositeOperation = 'lighter';\n        let i = fireworks.length;\n        while (i--) {\n            fireworks[i].draw();\n            fireworks[i].update(i);\n        }\n        let j = particles.length;\n        while (j--) {\n            particles[j].draw();\n            particles[j].update(j);\n        }\n    }\n    function launchInitialFireworks() {\n        const numToLaunch = 4; \/\/ *** Plus de fus\u00e9es au d\u00e9part\n        const centerX = canvasWidth \/ 2;\n        const launchAreaWidth = canvasWidth * 0.7;\n        for(let i = 0; i < numToLaunch; i++) {\n            setTimeout(() => {\n                fireworks.push(new Firework(\n                    random(centerX - launchAreaWidth \/ 2, centerX + launchAreaWidth \/ 2),\n                    canvasHeight,\n                    random(canvasWidth * 0.15, canvasWidth * 0.85),\n                    random(canvasHeight * 0.1, canvasHeight * 0.45) \/\/ Un peu plus haut\n                ));\n            }, i * 600); \/\/ ** D\u00e9lai plus long -> plus \u00e9tir\u00e9\n        }\n        \/\/ *** Timeout pour l'apparition du texte ***\n        const textFadeInDelay = 4000; \/\/ D\u00e9lai de 4 secondes (\u00e0 ajuster au feeling)\n        setTimeout(() => {\n            congratsTitle.classList.add('visible');\n        }, textFadeInDelay);\n    }\n    canvas.addEventListener('click', (e) => {\n        const rect = canvas.getBoundingClientRect();\n        const mouseX = e.clientX - rect.left;\n        const mouseY = e.clientY - rect.top;\n         fireworks.push(new Firework(canvasWidth \/ 2, canvasHeight, mouseX, mouseY));\n         \/\/ Optionnel : Masquer \u00e0 nouveau le texte au clic ?\n         \/\/ congratsTitle.classList.remove('visible');\n    });\n    window.addEventListener('resize', () => {\n        canvasWidth = canvas.offsetWidth;\n        canvasHeight = canvas.offsetHeight;\n        canvas.width = canvasWidth;\n        canvas.height = canvasHeight;\n    });\n    launchInitialFireworks();\n    loop();\n}); \/\/ Fin DOMContentLoaded\n<\/script>\n","protected":false},"featured_media":0,"template":"","mpcs-curriculum-categories":[],"mpcs-curriculum-tags":[],"class_list":["post-5882","mpcs-lesson","type-mpcs-lesson","status-publish","hentry","no-post-thumbnail"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>F\u00e9licitations | xpandAI<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/xpandai.one\/en\/courses\/xpandai-academy-fr\/lessons\/felicitations\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"F\u00e9licitations | xpandAI\" \/>\n<meta property=\"og:description\" content=\"F\u00e9licitations \u2013 vous avez r\u00e9ussi&nbsp;! Vous avez termin\u00e9 le cours avec succ\u00e8s, faisant preuve \u00e0 la fois d&#8217;engagement et de curiosit\u00e9. D\u00e9sormais, avec vos nouvelles connaissances dans le domaine de l&#8217;IA, vous \u00eates parfaitement \u00e9quip\u00e9(e) pour les mettre en pratique et cr\u00e9er de r\u00e9els avantages pour vous et votre entreprise. Vous pouvez maintenant r\u00e9cup\u00e9rer votre certificat. Nous vous souhaitons beaucoup&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/xpandai.one\/en\/courses\/xpandai-academy-fr\/lessons\/felicitations\/\" \/>\n<meta property=\"og:site_name\" content=\"xpandAI\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-23T20:27:46+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/xpandai.one\\\/en\\\/courses\\\/xpandai-academy-fr\\\/lessons\\\/felicitations\\\/\",\"url\":\"https:\\\/\\\/xpandai.one\\\/en\\\/courses\\\/xpandai-academy-fr\\\/lessons\\\/felicitations\\\/\",\"name\":\"F\u00e9licitations | xpandAI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/xpandai.one\\\/en\\\/#website\"},\"datePublished\":\"2025-10-23T20:27:45+00:00\",\"dateModified\":\"2025-10-23T20:27:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/xpandai.one\\\/en\\\/courses\\\/xpandai-academy-fr\\\/lessons\\\/felicitations\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/xpandai.one\\\/en\\\/courses\\\/xpandai-academy-fr\\\/lessons\\\/felicitations\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/xpandai.one\\\/en\\\/courses\\\/xpandai-academy-fr\\\/lessons\\\/felicitations\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/xpandai.one\\\/en\\\/start\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"F\u00e9licitations\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/xpandai.one\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/xpandai.one\\\/en\\\/\",\"name\":\"xpandAI\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/xpandai.one\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"F\u00e9licitations | xpandAI","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/xpandai.one\/en\/courses\/xpandai-academy-fr\/lessons\/felicitations\/","og_locale":"en_US","og_type":"article","og_title":"F\u00e9licitations | xpandAI","og_description":"F\u00e9licitations \u2013 vous avez r\u00e9ussi&nbsp;! Vous avez termin\u00e9 le cours avec succ\u00e8s, faisant preuve \u00e0 la fois d&#8217;engagement et de curiosit\u00e9. D\u00e9sormais, avec vos nouvelles connaissances dans le domaine de l&#8217;IA, vous \u00eates parfaitement \u00e9quip\u00e9(e) pour les mettre en pratique et cr\u00e9er de r\u00e9els avantages pour vous et votre entreprise. Vous pouvez maintenant r\u00e9cup\u00e9rer votre certificat. Nous vous souhaitons beaucoup&hellip;","og_url":"https:\/\/xpandai.one\/en\/courses\/xpandai-academy-fr\/lessons\/felicitations\/","og_site_name":"xpandAI","article_modified_time":"2025-10-23T20:27:46+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/xpandai.one\/en\/courses\/xpandai-academy-fr\/lessons\/felicitations\/","url":"https:\/\/xpandai.one\/en\/courses\/xpandai-academy-fr\/lessons\/felicitations\/","name":"F\u00e9licitations | xpandAI","isPartOf":{"@id":"https:\/\/xpandai.one\/en\/#website"},"datePublished":"2025-10-23T20:27:45+00:00","dateModified":"2025-10-23T20:27:46+00:00","breadcrumb":{"@id":"https:\/\/xpandai.one\/en\/courses\/xpandai-academy-fr\/lessons\/felicitations\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/xpandai.one\/en\/courses\/xpandai-academy-fr\/lessons\/felicitations\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/xpandai.one\/en\/courses\/xpandai-academy-fr\/lessons\/felicitations\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/xpandai.one\/en\/start\/"},{"@type":"ListItem","position":2,"name":"F\u00e9licitations"}]},{"@type":"WebSite","@id":"https:\/\/xpandai.one\/en\/#website","url":"https:\/\/xpandai.one\/en\/","name":"xpandAI","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/xpandai.one\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/xpandai.one\/en\/wp-json\/wp\/v2\/mpcs-lesson\/5882","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xpandai.one\/en\/wp-json\/wp\/v2\/mpcs-lesson"}],"about":[{"href":"https:\/\/xpandai.one\/en\/wp-json\/wp\/v2\/types\/mpcs-lesson"}],"wp:attachment":[{"href":"https:\/\/xpandai.one\/en\/wp-json\/wp\/v2\/media?parent=5882"}],"wp:term":[{"taxonomy":"mpcs-curriculum-categories","embeddable":true,"href":"https:\/\/xpandai.one\/en\/wp-json\/wp\/v2\/mpcs-curriculum-categories?post=5882"},{"taxonomy":"mpcs-curriculum-tags","embeddable":true,"href":"https:\/\/xpandai.one\/en\/wp-json\/wp\/v2\/mpcs-curriculum-tags?post=5882"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}