{"id":25126,"date":"2026-01-23T09:40:36","date_gmt":"2026-01-23T08:40:36","guid":{"rendered":"https:\/\/defi4.fr\/?page_id=25126"},"modified":"2026-02-10T14:11:24","modified_gmt":"2026-02-10T13:11:24","slug":"croissantage","status":"publish","type":"page","link":"https:\/\/defi4.fr\/en\/croissantage\/","title":{"rendered":"Croissantage"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Croissant\u00e9 - Jeu de Sensibilisation Cybers\u00e9curit\u00e9<\/title>\n<\/head>\n<body>\n\n<!-- ======================== CONTENEUR PRINCIPAL ======================== -->\n<div id=\"croissantage-root\">\n\n <!-- ======================== \u00c9CRAN 1: FORMULAIRE ======================== -->\n <div class=\"c-main-screen\" id=\"c-screen-form\">\n <div class=\"c-card\">\n <h1 class=\"c-title\">Croissant\u00e9 ! \ud83e\udd50<\/h1>\n <p class=\"c-subtitle\">\n Pi\u00e9gez vos coll\u00e8gues qui laissent leur session ouverte\u2026 et gagnez des viennoiseries\ud83e\udd24\ud83e\udd50.\n <\/p>\n\n <form id=\"c-form\">\n <!-- Champ Nom\/Pr\u00e9nom -->\n <div class=\"c-field\">\n <label for=\"c-name\">Votre Nom \/ Pr\u00e9nom<\/label>\n <input\n type=\"text\"\n id=\"c-name\"\n name=\"name\"\n placeholder=\"Ex : Manuel Duarte Nogueira\"\n required\n \/>\n <\/div>\n\n <!-- Champ Viennoiserie -->\n <div class=\"c-field\">\n <label for=\"c-pastry\">Viennoiserie \u00e0 ramener<\/label>\n <select id=\"c-pastry\" name=\"pastry\" required>\n <option value=\"\" disabled selected>Choisissez une viennoiserie<\/option>\n <option value=\"Croissant\">Croissant<\/option>\n <option value=\"Pain au chocolat\">Pain au chocolat<\/option>\n <option value=\"Pain aux raisins\">Pain aux raisins<\/option>\n <option value=\"P\u00e9pito\">P\u00e9pito<\/option>\n <option value=\"\u00c9clair au chocolat\">\u00c9clair au chocolat<\/option>\n <option value=\"\u00c9clair au caf\u00e9\">\u00c9clair au caf\u00e9<\/option>\n <\/select>\n <\/div>\n\n <!-- Bouton Soumettre -->\n <button type=\"submit\" class=\"c-btn-primary\">\n Croissanter cette personne\n <\/button>\n <\/form>\n\n <p class=\"c-small\">\n Astuce : laissez discr\u00e8tement cette page affich\u00e9e sur l'ordinateur de votre coll\u00e8gue. \ud83d\ude09\n <\/p>\n <\/div>\n <\/div>\n\n <!-- ======================== \u00c9CRAN 2: R\u00c9SULTAT (BSOD) ======================== -->\n <div class=\"c-screen-result hidden\" id=\"c-screen-result\">\n <div class=\"c-bsod-content\">\n\n <!-- Visage triste ASCII (\u00e9motic\u00f4ne) -->\n <div class=\"c-sad-face\">\n <span class=\"c-sad-colon\">:<\/span><span class=\"c-sad-paren\">(<\/span>\n <\/div>\n\n <!-- Section gauche: message + QR code + texte -->\n <div class=\"c-bsod-left\">\n\n <!-- Message principal -->\n <p class=\"c-bsod-main-message\">\n Votre PC a rencontr\u00e9 un probl\u00e8me et vous devez red\u00e9marrer .... votre sensibilisation sur la cybers\u00e9curit\u00e9!<br>\n Flashez le QR code ci-dessous pour vous inscrire \u00e0 une prochaine session disponible sur DEFI4.fr\n <\/p>\n\n <!-- Progression anim\u00e9e -->\n <p class=\"c-bsod-progress\" id=\"c-bsod-progress\">0% complet\u00e9<\/p>\n\n <!-- Conteneur QR code + texte d'information -->\n <div class=\"c-bsod-info-block\">\n\n <!-- QR code -->\n <div class=\"c-qr-bsod\">\n <a href=\"https:\/\/defi4.fr\/catalogue-de-formation\/formation\/105\/cybersecurite-sensibilisation\/\" \n target=\"_blank\" rel=\"noopener noreferrer\" class=\"c-qr-link\">\n <img decoding=\"async\"\n src=\"https:\/\/defi4.fr\/wp-content\/uploads\/2026\/01\/qr-code.png\"\n alt=\"QR code formation cybers\u00e9curit\u00e9 DEFI4\"\n \/>\n <\/a>\n <\/div>\n\n <!-- Texte informatif \u00e0 c\u00f4t\u00e9 du QR -->\n <div class=\"c-bsod-text-block\">\n <p class=\"c-bsod-instruction\">\n Pour plus d'informations sur ce probl\u00e8me et les solutions possibles, visitez \n <a href=\"https:\/\/defi4.fr\/catalogue-de-formation\/formation\/105\/cybersecurite-sensibilisation\/\" \n target=\"_blank\" class=\"c-bsod-link\">https:\/\/defi4.fr\/cybersecurite<\/a>\n <\/p>\n <p class=\"c-bsod-croissant-info\">\n <span id=\"c-result-name-bsod\"><\/span> a d\u00e9cid\u00e9 de vous croissanter, car vous avez oubli\u00e9 de verrouiller votre PC lors de votre absence.<br>\n En plus de vous inscrire \u00e0 la formation sugg\u00e9r\u00e9e, vous devez ramener un \n <span id=\"c-result-pastry-bsod\"><\/span> demain \u00e0 <span id=\"c-result-name-bsod-bottom\"><\/span>.\n Apr\u00e8s votre scan du QR code, respirez \u00e0 fond, et appuyez sur \"echap\" pour sortir.\n <\/p>\n <\/div>\n <\/div>\n\n <\/div>\n\n <!-- Section droite: Logo DEFI4 -->\n <div class=\"c-bsod-right\">\n <div class=\"c-defi4-logo\">\n <img decoding=\"async\"\n src=\"https:\/\/defi4.fr\/wp-content\/uploads\/2023\/05\/logo-defi4-couleur.png\"\n alt=\"Logo DEFI4\"\n \/>\n <\/div>\n <\/div>\n\n <\/div>\n\n <!-- Bouton Reset en bas -->\n <button id=\"c-reset\" class=\"c-btn-secondary\">\n Croissanter quelqu'un d'autre\n <\/button>\n\n <\/div>\n\n<\/div>\n\n<!-- ======================== STYLES CSS ======================== -->\n<style>\n \/* ======================== VARIABLES COULEURS ======================== *\/\n :root {\n --color-primary: #18234E;\n --color-secondary: #FF3700;\n --color-background: #F5F7F8;\n --color-accent: #0094A8;\n --color-accent-light: #00B8D4;\n --color-bsod: #0078D7;\n --color-white: #ffffff;\n }\n\n \/* ======================== RESET GLOBAL ======================== *\/\n #croissantage-root * {\n box-sizing: border-box;\n }\n\n #croissantage-root {\n min-height: 100vh;\n margin: 0;\n padding: 0;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n position: relative;\n }\n\n body.no-scroll {\n overflow: hidden;\n }\n\n .hidden {\n display: none !important;\n }\n\n \/* ======================== \u00c9CRAN 1: FORMULAIRE ======================== *\/\n .c-main-screen {\n min-height: 100vh;\n width: 100%;\n padding: 24px 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--color-background);\n }\n\n .c-card {\n background: var(--color-white);\n border-radius: 18px;\n padding: 32px 28px;\n max-width: 520px;\n width: 100%;\n box-shadow: 0 20px 45px rgba(24, 35, 78, 0.12);\n border: 1px solid rgba(24, 35, 78, 0.08);\n }\n\n .c-title {\n font-size: 2.1rem;\n margin: 0 0 8px;\n color: var(--color-primary);\n font-weight: 700;\n }\n\n .c-subtitle {\n margin: 0 0 24px;\n color: #4b5563;\n font-size: 0.98rem;\n line-height: 1.6;\n }\n\n \/* Champs de formulaire *\/\n .c-field {\n margin-bottom: 16px;\n }\n\n .c-field label {\n display: block;\n margin-bottom: 6px;\n font-size: 0.9rem;\n font-weight: 500;\n color: var(--color-primary);\n }\n\n .c-field input[type=\"text\"],\n .c-field select {\n width: 100%;\n padding: 10px 14px;\n border-radius: 999px;\n border: 1px solid #d1d5db;\n font-size: 0.98rem;\n outline: none;\n background: var(--color-white);\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n }\n\n .c-field select {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n cursor: pointer;\n }\n\n .c-field input[type=\"text\"]:focus,\n .c-field select:focus {\n border-color: var(--color-accent);\n box-shadow: 0 0 0 2px rgba(0, 148, 168, 0.15);\n }\n\n \/* Bouton Principal *\/\n .c-btn-primary {\n margin-top: 8px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 10px 18px;\n border-radius: 999px;\n border: none;\n font-size: 0.98rem;\n font-weight: 600;\n background: var(--color-secondary);\n color: var(--color-white);\n cursor: pointer;\n transition: background 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;\n width: 100%;\n }\n\n .c-btn-primary:hover {\n background: #ff5c33;\n box-shadow: 0 10px 25px rgba(255, 55, 0, 0.4);\n transform: translateY(-1px);\n }\n\n .c-btn-primary:active {\n transform: translateY(0);\n box-shadow: none;\n }\n\n .c-small {\n margin-top: 16px;\n font-size: 0.8rem;\n color: #6b7280;\n }\n\n \/* Responsive Formulaire *\/\n @media (max-width: 575px) {\n .c-main-screen {\n padding: 20px 12px;\n }\n\n .c-card {\n padding: 24px 20px;\n }\n\n .c-title {\n font-size: 1.8rem;\n }\n\n .c-subtitle {\n font-size: 0.9rem;\n }\n\n .c-field label {\n font-size: 0.85rem;\n }\n\n .c-field input[type=\"text\"],\n .c-field select {\n font-size: 0.9rem;\n padding: 12px 14px;\n }\n\n .c-btn-primary {\n font-size: 0.9rem;\n padding: 12px 18px;\n }\n\n .c-small {\n font-size: 0.75rem;\n }\n }\n\n \/* ======================== \u00c9CRAN 2: BSOD ======================== *\/\n .c-screen-result {\n position: fixed;\n inset: 0;\n padding: 0;\n background: var(--color-bsod);\n z-index: 9999;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n overflow-y: auto;\n color: var(--color-white);\n font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;\n font-variant-emoji: none;\n -webkit-font-feature-settings: \"liga\" off;\n font-feature-settings: \"liga\" off;\n }\n\n \/* Emp\u00eacher conversion automatique emoji *\/\n .c-screen-result * {\n font-variant-emoji: none;\n -webkit-font-feature-settings: \"liga\" off;\n font-feature-settings: \"liga\" off;\n }\n\n \/* Conteneur principal BSOD *\/\n .c-bsod-content {\n position: relative;\n width: 100%;\n min-height: 100vh;\n height: auto;\n padding: 60px 80px 80px 80px;\n display: grid;\n grid-template-columns: 1.45fr 0.55fr;\n gap: 50px;\n align-items: flex-start;\n }\n\n \/* Visage triste ASCII *\/\n .c-sad-face {\n position: relative;\n font-size: 280px;\n font-weight: 300;\n line-height: 1;\n font-family: 'Courier New', 'Consolas', 'Monaco', monospace;\n letter-spacing: -10px;\n color: var(--color-white);\n font-variant-emoji: none;\n text-rendering: optimizeLegibility;\n -webkit-font-feature-settings: \"liga\" off;\n font-feature-settings: \"liga\" off;\n z-index: 1;\n pointer-events: none;\n white-space: nowrap;\n margin: 0 0 30px 0;\n }\n\n .c-sad-colon,\n .c-sad-paren {\n display: inline-block;\n font-variant-emoji: none;\n -webkit-font-feature-settings: \"liga\" off;\n font-feature-settings: \"liga\" off;\n }\n\n \/* Section gauche BSOD *\/\n .c-bsod-left {\n grid-column: 1;\n position: relative;\n z-index: 2;\n }\n\n .c-bsod-main-message {\n font-size: 1.5rem;\n line-height: 1.7;\n margin: 0 0 25px;\n font-weight: 400;\n }\n\n .c-bsod-progress {\n font-size: 1.3rem;\n margin: 0 0 35px;\n font-weight: 400;\n }\n\n \/* Conteneur QR + Texte (layout flex avec centrage vertical) *\/\n .c-bsod-info-block {\n display: flex;\n align-items: center;\n gap: 30px;\n margin-top: 30px;\n }\n\n \/* QR Code *\/\n .c-qr-bsod {\n flex-shrink: 0;\n }\n\n .c-qr-bsod img {\n width: 180px;\n height: 180px;\n display: block;\n background: var(--color-white);\n padding: 8px;\n border-radius: 4px;\n }\n\n \/* Texte d'information (flex pour remplir l'espace) *\/\n .c-bsod-text-block {\n flex: 1;\n width: 100%;\n }\n\n .c-bsod-instruction {\n font-size: 1rem;\n line-height: 1.7;\n margin: 0 0 12px;\n font-weight: 400;\n }\n\n .c-bsod-link {\n color: var(--color-accent);\n text-decoration: underline;\n cursor: pointer;\n transition: color 0.2s ease;\n }\n\n .c-bsod-link:hover {\n color: var(--color-accent-light);\n }\n\n .c-bsod-croissant-info {\n font-size: 1rem;\n line-height: 1.7;\n margin: 25px 0 0;\n font-weight: 400;\n padding-top: 18px;\n border-top: 1px solid rgba(255, 255, 255, 0.3);\n }\n\n \/* Texte en gras *\/\n #c-result-name-bsod,\n #c-result-name-bsod-bottom,\n #c-result-pastry-bsod {\n font-weight: 700;\n }\n\n \/* Section droite: Logo *\/\n .c-bsod-right {\n grid-column: 2;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n height: 100%;\n width: 100%;\n }\n\n .c-defi4-logo {\n width: 360px;\n max-width: 100%;\n height: auto;\n }\n\n .c-defi4-logo img {\n width: 100%;\n height: auto;\n display: block;\n filter: brightness(0) invert(1);\n }\n\n \/* Centrer logo sur grands \u00e9crans *\/\n @media (min-width: 992px) {\n .c-defi4-logo {\n \/* placer le logo en haut \u00e0 droite (fixe) ; sa largeur sera synchronis\u00e9e via JS *\/\n position: fixed;\n right: 40px;\n top: 60px;\n transform: none;\n z-index: 10001;\n }\n }\n\n \/* ======================== BOUTON RESET ======================== *\/\n .c-btn-secondary {\n position: absolute;\n bottom: 60px;\n left: 50%;\n transform: translateX(-50%);\n padding: 12px 24px;\n border-radius: 999px;\n border: 2px solid var(--color-white);\n background: var(--color-bsod);\n appearance: none;\n -webkit-appearance: none;\n box-shadow: none;\n font-size: 0.95rem;\n color: var(--color-white);\n cursor: pointer;\n backdrop-filter: blur(6px);\n transition: all 0.2s ease;\n font-weight: 600;\n z-index: 10;\n }\n\n \/* \u00c9tat hover: inversion des couleurs *\/\n .c-btn-secondary:hover {\n border-color: var(--color-white);\n background: var(--color-white);\n color: var(--color-bsod);\n }\n\n \/* Position sur \u00e9crans larges *\/\n @media (min-width: 992px) {\n .c-btn-secondary {\n position: fixed;\n right: 40px;\n bottom: 60px;\n left: auto;\n transform: none;\n z-index: 10000;\n min-width: 140px;\n width: auto;\n }\n }\n\n \/* ======================== RESPONSIVE ======================== *\/\n\n \/* Laptop (1200px - 1399px) *\/\n @media (max-width: 1399px) {\n .c-bsod-content {\n padding: 50px 60px 70px 60px;\n gap: 50px;\n }\n\n .c-sad-face {\n font-size: 240px;\n }\n\n .c-bsod-main-message {\n font-size: 1.4rem;\n }\n\n .c-defi4-logo {\n width: 320px;\n }\n }\n\n \/* Laptop Small (992px - 1199px) *\/\n @media (max-width: 1199px) {\n .c-bsod-content {\n padding: 40px 50px 60px 50px;\n gap: 40px;\n }\n\n .c-sad-face {\n font-size: 200px;\n }\n\n .c-bsod-main-message {\n font-size: 1.3rem;\n }\n\n .c-bsod-progress {\n font-size: 1.2rem;\n margin-bottom: 30px;\n }\n\n .c-bsod-instruction {\n font-size: 0.95rem;\n }\n\n .c-defi4-logo {\n width: 300px;\n }\n }\n\n \/* Tablet (768px - 991px) *\/\n @media (max-width: 991px) {\n .c-bsod-content {\n padding: 40px 40px 60px 40px;\n gap: 35px;\n }\n\n .c-sad-face {\n font-size: 160px;\n }\n\n .c-bsod-main-message {\n font-size: 1.2rem;\n line-height: 1.6;\n margin-bottom: 20px;\n }\n\n .c-bsod-progress {\n font-size: 1.1rem;\n margin-bottom: 30px;\n }\n\n .c-bsod-info-block {\n margin-top: 25px;\n }\n\n .c-bsod-instruction {\n font-size: 0.9rem;\n line-height: 1.6;\n }\n\n .c-bsod-croissant-info {\n font-size: 0.95rem;\n margin-top: 20px;\n padding-top: 15px;\n }\n\n .c-defi4-logo {\n width: 260px;\n }\n\n .c-qr-bsod img {\n width: 160px;\n height: 160px;\n }\n }\n\n \/* Mobile Large (576px - 767px) *\/\n @media (max-width: 767px) {\n .c-screen-result {\n justify-content: flex-start;\n padding-bottom: 20px;\n }\n\n .c-bsod-content {\n grid-template-columns: 1fr;\n padding: 25px 20px;\n gap: 20px;\n align-items: flex-start;\n min-height: auto;\n height: auto;\n }\n\n .c-sad-face {\n position: relative;\n font-size: 100px;\n margin-bottom: 25px;\n text-align: center;\n width: 100%;\n }\n\n .c-bsod-left {\n grid-column: 1;\n width: 100%;\n }\n\n .c-bsod-main-message {\n font-size: 1rem;\n line-height: 1.6;\n margin-bottom: 20px;\n word-wrap: break-word;\n }\n\n .c-bsod-progress {\n font-size: 0.95rem;\n margin-bottom: 25px;\n }\n\n .c-bsod-info-block {\n flex-direction: column;\n gap: 20px;\n margin-top: 20px;\n }\n\n .c-qr-bsod {\n text-align: center;\n width: 100%;\n }\n\n .c-qr-bsod img {\n width: 140px;\n height: 140px;\n margin: 0 auto;\n }\n\n .c-bsod-text-block {\n text-align: left;\n width: 100%;\n }\n\n .c-bsod-instruction {\n font-size: 0.85rem;\n line-height: 1.6;\n margin-bottom: 12px;\n word-wrap: break-word;\n }\n\n .c-bsod-croissant-info {\n font-size: 0.9rem;\n margin-top: 20px;\n padding-top: 15px;\n line-height: 1.6;\n word-wrap: break-word;\n }\n\n .c-bsod-right {\n grid-column: 1;\n justify-content: center;\n }\n\n .c-defi4-logo {\n width: 220px;\n margin: 0 auto;\n }\n\n .c-btn-secondary {\n position: relative;\n bottom: auto;\n left: auto;\n transform: none;\n margin-top: 25px;\n display: block;\n margin-left: auto;\n margin-right: auto;\n }\n }\n\n \/* Mobile Small (< 576px) *\/\n @media (max-width: 575px) {\n .c-screen-result {\n padding-bottom: 15px;\n }\n\n .c-bsod-content {\n padding: 20px 15px;\n gap: 18px;\n }\n\n .c-sad-face {\n font-size: 80px;\n margin-bottom: 20px;\n }\n\n .c-bsod-main-message {\n font-size: 0.95rem;\n line-height: 1.6;\n margin-bottom: 15px;\n word-wrap: break-word;\n }\n\n .c-bsod-progress {\n font-size: 0.9rem;\n margin-bottom: 20px;\n }\n\n .c-bsod-info-block {\n margin-top: 18px;\n gap: 15px;\n }\n\n .c-qr-bsod img {\n width: 120px;\n height: 120px;\n }\n\n .c-bsod-instruction {\n font-size: 0.8rem;\n line-height: 1.6;\n margin-bottom: 10px;\n word-wrap: break-word;\n }\n\n .c-bsod-croissant-info {\n font-size: 0.85rem;\n margin-top: 15px;\n padding-top: 12px;\n line-height: 1.6;\n word-wrap: break-word;\n }\n\n .c-defi4-logo {\n width: 180px;\n }\n\n .c-btn-secondary {\n padding: 10px 20px;\n font-size: 0.9rem;\n margin-top: 20px;\n }\n }\n\n \/* Tr\u00e8s petits \u00e9crans (< 400px) *\/\n @media (max-width: 399px) {\n .c-bsod-content {\n padding: 15px 12px;\n gap: 15px;\n }\n\n .c-sad-face {\n font-size: 70px;\n margin-bottom: 15px;\n }\n\n .c-bsod-main-message {\n font-size: 0.9rem;\n line-height: 1.6;\n word-wrap: break-word;\n }\n\n .c-bsod-progress {\n font-size: 0.85rem;\n }\n\n .c-bsod-instruction {\n font-size: 0.75rem;\n line-height: 1.6;\n }\n\n .c-bsod-croissant-info {\n font-size: 0.8rem;\n line-height: 1.6;\n }\n\n .c-qr-bsod img {\n width: 100px;\n height: 100px;\n }\n\n .c-defi4-logo {\n width: 160px;\n }\n }\n<\/style>\n\n<!-- ======================== JAVASCRIPT ======================== -->\n<script>\n document.addEventListener(\"DOMContentLoaded\", function () {\n \/\/ ======================== VARIABLES ========================\n const form = document.getElementById(\"c-form\");\n const screenResult = document.getElementById(\"c-screen-result\");\n const resultNameBsod = document.getElementById(\"c-result-name-bsod\");\n const resultNameBsodBottom = document.getElementById(\"c-result-name-bsod-bottom\");\n const resultPastryBsod = document.getElementById(\"c-result-pastry-bsod\");\n const bsodProgress = document.getElementById(\"c-bsod-progress\");\n const resetBtn = document.getElementById(\"c-reset\");\n let progressInterval = null;\n const logoEl = document.querySelector('.c-defi4-logo');\n\n \/\/ Petit debounce pour resize\n function debounce(fn, wait) {\n let t = null;\n return function () {\n clearTimeout(t);\n t = setTimeout(() => fn.apply(this, arguments), wait);\n };\n }\n\n \/**\n * Synchronise la largeur du logo avec la largeur du bouton reset\n * uniquement sur \u00e9crans larges (>= 992px). En dehors, on laisse\n * les r\u00e8gles CSS par d\u00e9faut.\n *\/\n function syncLogoWidth() {\n if (!logoEl || !resetBtn) return;\n if (window.innerWidth >= 992) {\n \/\/ si le bouton est visible et rendu, on applique sa largeur\n const btnRect = resetBtn.getBoundingClientRect();\n const btnWidth = Math.round(btnRect.width) || null;\n if (btnWidth && btnWidth > 0) {\n logoEl.style.width = btnWidth + 'px';\n logoEl.style.position = 'fixed';\n logoEl.style.top = '60px';\n logoEl.style.right = '40px';\n logoEl.style.transform = 'none';\n logoEl.style.zIndex = '10001';\n }\n } else {\n \/\/ r\u00e9initialiser pour petits \u00e9crans\n logoEl.style.width = '';\n logoEl.style.position = '';\n logoEl.style.top = '';\n logoEl.style.right = '';\n logoEl.style.transform = '';\n logoEl.style.zIndex = '';\n }\n }\n\n \/\/ \u00c9couteurs utiles\n window.addEventListener('resize', debounce(syncLogoWidth, 80));\n\n \/\/ ======================== FONCTIONS ========================\n\n \/**\n * Ouvre le navigateur en mode plein \u00e9cran\n *\/\n function openFullscreen() {\n const el = document.documentElement;\n if (el.requestFullscreen) {\n el.requestFullscreen().catch(() => {});\n } else if (el.webkitRequestFullscreen) {\n el.webkitRequestFullscreen();\n } else if (el.msRequestFullscreen) {\n el.msRequestFullscreen();\n }\n }\n\n \/**\n * Ferme le mode plein \u00e9cran\n *\/\n function closeFullscreen() {\n if (document.fullscreenElement || document.webkitFullscreenElement) {\n if (document.exitFullscreen) {\n document.exitFullscreen().catch(() => {});\n } else if (document.webkitExitFullscreen) {\n document.webkitExitFullscreen();\n }\n }\n }\n\n \/**\n * Anime la barre de progression de 0% \u00e0 200%\n *\/\n function showProgress() {\n let progress = 0;\n const duration = 8000; \/\/ Dur\u00e9e totale en ms\n const interval = 50; \/\/ Fr\u00e9quence de mise \u00e0 jour\n const increment = (200 \/ duration) * interval; \/\/ Incr\u00e9ment par \u00e9tape\n\n bsodProgress.textContent = \"0% complet\u00e9\";\n\n \/\/ Arr\u00eate un intervalle pr\u00e9c\u00e9dent s'il existe\n if (progressInterval) {\n clearInterval(progressInterval);\n progressInterval = null;\n }\n\n progressInterval = setInterval(() => {\n progress += increment;\n bsodProgress.textContent = Math.floor(progress) + \"% complet\u00e9\";\n }, interval);\n }\n\n \/\/ ======================== \u00c9V\u00c9NEMENTS ========================\n\n \/**\n * Soumission du formulaire\n *\/\n form.addEventListener(\"submit\", function (e) {\n e.preventDefault();\n\n const name = document.getElementById(\"c-name\").value.trim();\n const pastry = document.getElementById(\"c-pastry\").value.trim();\n\n \/\/ Validation\n if (!name || !pastry) {\n alert(\"Merci de remplir les deux champs \ud83d\ude42\");\n return;\n }\n\n \/\/ Mise \u00e0 jour du texte avec les donn\u00e9es du formulaire\n resultNameBsod.textContent = name;\n resultNameBsodBottom.textContent = name;\n resultPastryBsod.textContent = pastry.toLowerCase();\n\n \/\/ Affichage de l'\u00e9cran r\u00e9sultat\n screenResult.classList.remove(\"hidden\");\n document.body.classList.add(\"no-scroll\");\n openFullscreen();\n \/\/ synchroniser la largeur du logo avec le bouton reset\n syncLogoWidth();\n\n \/\/ D\u00e9marrage de l'animation\n showProgress();\n });\n\n \/**\n * Clic sur le bouton reset\n *\/\n resetBtn.addEventListener(\"click\", function () {\n \/\/ R\u00e9initialisation du formulaire\n form.reset();\n screenResult.classList.add(\"hidden\");\n document.body.classList.remove(\"no-scroll\");\n closeFullscreen();\n\n \/\/ Arr\u00eat de l'intervalle\n if (progressInterval) {\n clearInterval(progressInterval);\n progressInterval = null;\n }\n\n bsodProgress.textContent = \"0% complet\u00e9\";\n \/\/ r\u00e9initialiser styles appliqu\u00e9s au logo\n if (logoEl) {\n logoEl.style.width = '';\n logoEl.style.position = '';\n logoEl.style.top = '';\n logoEl.style.right = '';\n logoEl.style.transform = '';\n logoEl.style.zIndex = '';\n }\n window.scrollTo({ top: 0, behavior: \"instant\" });\n });\n });\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\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>Croissant\u00e9 – Jeu de Sensibilisation Cybers\u00e9curit\u00e9 Croissant\u00e9 ! \ud83e\udd50 Pi\u00e9gez vos coll\u00e8gues qui laissent leur session ouverte\u2026 et gagnez des viennoiseries\ud83e\udd24\ud83e\udd50. Votre Nom \/ Pr\u00e9nom Viennoiserie \u00e0 ramener Choisissez une viennoiserieCroissantPain au chocolatPain aux raisinsP\u00e9pito\u00c9clair au chocolat\u00c9clair au caf\u00e9 Croissanter … <\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"pmpro_default_level":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-25126","page","type-page","status-publish","hentry","pmpro-has-access"],"_links":{"self":[{"href":"https:\/\/defi4.fr\/en\/wp-json\/wp\/v2\/pages\/25126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/defi4.fr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/defi4.fr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/defi4.fr\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/defi4.fr\/en\/wp-json\/wp\/v2\/comments?post=25126"}],"version-history":[{"count":74,"href":"https:\/\/defi4.fr\/en\/wp-json\/wp\/v2\/pages\/25126\/revisions"}],"predecessor-version":[{"id":25216,"href":"https:\/\/defi4.fr\/en\/wp-json\/wp\/v2\/pages\/25126\/revisions\/25216"}],"wp:attachment":[{"href":"https:\/\/defi4.fr\/en\/wp-json\/wp\/v2\/media?parent=25126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}