Chasse aux \u0152ufs – AnimCloud<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fredoka+One&family=Nunito:wght@700;900&display=swap\" rel=\"stylesheet\">\n <style>\n * { margin: 0; padding: 0; box-sizing: border-box; }\n #footer, .site-footer, footer, .footer { display: none !important; }\n\n html, body {\n width: 100%; height: 100vh;\n background: #0d0d0d;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: 'Nunito', sans-serif;\n overflow: hidden;\n }\n\n .scene {\n position: relative;\n width: min(100vw, 177.78vh);\n height: min(100vh, 56.25vw);\n overflow: hidden;\n }\n\n .fond {\n position: absolute;\n inset: 0; width: 100%; height: 100%;\n object-fit: fill;\n user-select: none;\n pointer-events: none;\n }\n\n .top-left {\n position: absolute;\n top: 2.5%; left: 2%;\n z-index: 20;\n }\n\n .icon-btn {\n width: clamp(32px, 3.5vw, 50px);\n height: clamp(32px, 3.5vw, 50px);\n border-radius: 50%;\n border: 2px solid rgba(255,255,255,0.2);\n background: rgba(0,0,0,0.55);\n backdrop-filter: blur(10px);\n cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n font-size: clamp(1rem, 1.8vw, 1.5rem);\n color: white;\n transition: all 0.25s;\n }\n\n .icon-btn:hover {\n transform: rotate(90deg);\n background: rgba(99,102,241,0.75);\n }\n\n .live {\n position: absolute;\n top: 2.5%; right: 2%;\n display: flex; align-items: center; gap: 6px;\n background: rgba(220,38,38,0.9);\n border-radius: 30px;\n padding: 4px 14px 4px 10px;\n color: white;\n font-size: clamp(0.55rem, 1.1vw, 0.85rem);\n font-weight: 900;\n letter-spacing: 2px;\n z-index: 20;\n }\n\n .live-dot {\n width: 10px; height: 10px;\n background: white;\n border-radius: 50%;\n animation: blink 1.2s infinite;\n }\n\n @keyframes blink {\n 0%,100% { opacity: 1; }\n 50% { opacity: 0; }\n }\n\n .compteur {\n position: absolute;\n transform: translateX(-50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 5px;\n z-index: 10;\n }\n\n .c-normal { left: 12%; top: 42%; }\n .c-or { left: 90%; top: 41%; }\n\n .chiffre {\n font-family: 'Fredoka One', cursive;\n font-size: clamp(2.5rem, 6vw, 5.5rem);\n line-height: 1;\n filter: drop-shadow(0 3px 10px rgba(0,0,0,0.7));\n }\n\n .c-normal .chiffre { color: #60a5fa; }\n .c-or .chiffre { color: #fbbf24; }\n\n .chiffre.pulse { animation: pop 0.35s ease; }\n\n @keyframes pop {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.4); }\n 100% { transform: scale(1); }\n }\n\n .label {\n font-size: clamp(0.5rem, 1vw, 0.8rem);\n color: white;\n background: rgba(0,0,0,0.55);\n border-radius: 20px;\n padding: 3px 12px;\n text-align: center;\n backdrop-filter: blur(4px);\n white-space: nowrap;\n }\n\n .barre-wrap {\n width: clamp(80px, 10vw, 140px);\n height: 7px;\n background: rgba(255,255,255,0.2);\n border-radius: 10px;\n overflow: hidden;\n }\n\n .barre {\n height: 100%;\n border-radius: 10px;\n transition: width 0.6s ease;\n width: 0%;\n }\n\n .c-normal .barre { background: linear-gradient(90deg, #3b82f6, #60a5fa); }\n .c-or .barre { background: linear-gradient(90deg, #d97706, #fbbf24); }\n\n .sync-dot {\n position: absolute;\n bottom: 3%; right: 2%;\n display: flex; align-items: center; gap: 6px;\n font-size: clamp(0.5rem, 0.9vw, 0.75rem);\n color: white;\n background: rgba(0,0,0,0.45);\n border-radius: 20px;\n padding: 4px 12px;\n z-index: 20;\n }\n\n .dot {\n width: 8px; height: 8px;\n border-radius: 50%;\n background: #6b7280;\n }\n\n .dot.ok { background: #22c55e; animation: blink 2s infinite; }\n .dot.err { background: #ef4444; }\n\n .admin-overlay {\n display: none;\n position: fixed; inset: 0;\n background: rgba(0,0,0,0.7);\n backdrop-filter: blur(6px);\n z-index: 100;\n align-items: center;\n justify-content: center;\n }\n\n .admin-overlay.visible { display: flex; }\n\n .admin-box {\n background: #1e1e2e;\n border: 1px solid rgba(255,255,255,0.1);\n border-radius: 20px;\n padding: 30px;\n width: min(90vw, 440px);\n color: white;\n position: relative;\n }\n\n .admin-box h2 {\n font-family: 'Fredoka One', cursive;\n font-size: 1.6rem;\n margin-bottom: 20px;\n text-align: center;\n }\n\n .admin-section {\n background: rgba(255,255,255,0.05);\n border-radius: 14px;\n padding: 16px;\n margin-bottom: 14px;\n }\n\n .admin-section h3 {\n font-size: 0.8rem;\n letter-spacing: 2px;\n opacity: 0.6;\n margin-bottom: 12px;\n text-transform: uppercase;\n }\n\n .row {\n display: flex; align-items: center; gap: 10px; margin-bottom: 10px;\n }\n\n .row label {\n font-size: 0.85rem;\n min-width: 100px;\n opacity: 0.85;\n }\n\n input[type=\"number\"], input[type=\"text\"] {\n flex: 1;\n background: rgba(255,255,255,0.08);\n border: 1px solid rgba(255,255,255,0.15);\n border-radius: 10px;\n padding: 8px 12px;\n color: white;\n font-size: 0.9rem;\n outline: none;\n }\n\n input:focus { border-color: rgba(99,102,241,0.6); }\n\n .btn {\n padding: 9px 18px;\n border: none;\n border-radius: 10px;\n font-family: 'Nunito', sans-serif;\n font-weight: 900;\n font-size: 0.85rem;\n cursor: pointer;\n transition: all 0.2s;\n }\n\n .btn:hover { transform: translateY(-2px); }\n .btn-blue { background: #3b82f6; color: white; }\n .btn-gold { background: #d97706; color: white; }\n .btn-red { background: #ef4444; color: white; }\n .btn-purple { background: #6366f1; color: white; }\n .btn-gray { background: rgba(255,255,255,0.1); color: white; }\n\n .btn-close {\n position: absolute;\n top: 14px; right: 14px;\n background: rgba(255,255,255,0.1);\n border: none;\n color: white;\n width: 32px; height: 32px;\n border-radius: 50%;\n font-size: 1rem;\n cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n }\n\n .btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }\n\n .mini-prog {\n height: 5px;\n background: rgba(255,255,255,0.1);\n border-radius: 10px;\n overflow: hidden;\n margin-top: 6px;\n }\n\n .mini-prog-bar { height: 100%; border-radius: 10px; transition: width 0.5s; width: 0%; }\n .mpN { background: #3b82f6; }\n .mpO { background: #d97706; }\n .stat { font-size: 0.8rem; opacity: 0.7; margin-top: 4px; }\n\n .toast {\n position: fixed;\n bottom: 30px; left: 50%;\n transform: translateX(-50%) translateY(80px);\n background: #1e1e2e;\n border: 1px solid rgba(255,255,255,0.15);\n color: white;\n padding: 10px 24px;\n border-radius: 30px;\n font-weight: 700;\n font-size: 0.9rem;\n opacity: 0;\n transition: all 0.4s;\n z-index: 999;\n }\n\n .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }\n .toast.err { border-color: #ef4444; }\n\n .confetti {\n position: fixed;\n top: -50px;\n font-size: 1.8rem;\n animation: tombee linear forwards;\n z-index: 999;\n pointer-events: none;\n }\n\n @keyframes tombee {\n to { transform: translateY(110vh) rotate(720deg); opacity: 0; }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"scene\">\n <img decoding=\"async\" id=\"fondImg\" class=\"fond\" src=\"https:\/\/www.animcloud.fr\/wp-content\/uploads\/2026\/04\/Chasse-au-oeuf1.png\" alt=\"Fond\">\n\n <div class=\"top-left\">\n <button class=\"icon-btn\" onclick=\"ouvrirAdmin()\">\u2699\ufe0f<\/button>\n <\/div>\n\n <div class=\"live\">\n <span class=\"live-dot\"><\/span> LIVE\n <\/div>\n\n \n <div class=\"compteur c-normal\">\n <div class=\"chiffre\" id=\"chifN\">0<\/div>\n <div class=\"label\" id=\"lblN\">0 \/ 100 \u0153ufs trouv\u00e9s<\/div>\n <div class=\"barre-wrap\"><div class=\"barre\" id=\"barN\"><\/div><\/div>\n <\/div>\n\n \n <div class=\"compteur c-or\">\n <div class=\"chiffre\" id=\"chifO\">0<\/div>\n <div class=\"label\" id=\"lblO\">0 \/ 10 \u0153ufs d’or trouv\u00e9s<\/div>\n <div class=\"barre-wrap\"><div class=\"barre\" id=\"barO\"><\/div><\/div>\n <\/div>\n\n <div class=\"sync-dot\">\n <div class=\"dot\" id=\"syncDot\"><\/div>\n <span id=\"syncTxt\">Connexion…<\/span>\n <\/div>\n<\/div>\n\n\n<div class=\"admin-overlay\" id=\"adminOverlay\">\n <div class=\"admin-box\">\n <button class=\"btn-close\" onclick=\"fermerAdmin()\">\u2715<\/button>\n <h2>\u2699\ufe0f Panneau Admin<\/h2>\n\n <div class=\"admin-section\">\n <h3>\ud83e\udd5a \u0152uf Normal<\/h3>\n <div class=\"row\">\n <label>Trouv\u00e9s<\/label>\n <input type=\"number\" id=\"inN\" min=\"0\" value=\"0\">\n <button class=\"btn btn-blue\" onclick=\"maj('n')\">OK<\/button>\n <\/div>\n <div class=\"row\">\n <label>Maximum<\/label>\n <input type=\"number\" id=\"maxN\" min=\"1\" value=\"100\">\n <\/div>\n <div class=\"mini-prog\"><div class=\"mini-prog-bar mpN\" id=\"mpN\"><\/div><\/div>\n <div class=\"stat\">Actuel : <b id=\"aN\">0<\/b><\/div>\n <\/div>\n\n <div class=\"admin-section\">\n <h3>\ud83e\udd47 \u0152uf d’Or<\/h3>\n <div class=\"row\">\n <label>Trouv\u00e9s<\/label>\n <input type=\"number\" id=\"inO\" min=\"0\" value=\"0\">\n <button class=\"btn btn-gold\" onclick=\"maj('o')\">OK<\/button>\n <\/div>\n <div class=\"row\">\n <label>Maximum<\/label>\n <input type=\"number\" id=\"maxO\" min=\"1\" value=\"10\">\n <\/div>\n <div class=\"mini-prog\"><div class=\"mini-prog-bar mpO\" id=\"mpO\"><\/div><\/div>\n <div class=\"stat\">Actuel : <b id=\"aO\">0<\/b><\/div>\n <\/div>\n\n <div class=\"admin-section\">\n <h3>\ud83d\uddbc\ufe0f Image de fond<\/h3>\n <div class=\"row\">\n <input type=\"text\" id=\"imgUrl\" placeholder=\"https:\/\/... URL image\">\n <button class=\"btn btn-purple\" onclick=\"changerImage()\">Changer<\/button>\n <\/div>\n <\/div>\n\n <div class=\"btn-row\">\n <button class=\"btn btn-red\" onclick=\"reset()\">\ud83d\udd04 Reset<\/button>\n <button class=\"btn btn-gray\" onclick=\"confettis()\">\ud83c\udf89 Confettis<\/button>\n <button class=\"btn btn-gray\" onclick=\"fermerAdmin()\">Fermer<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n<div class=\"toast\" id=\"toast\"><\/div>\n\n\n<script type=\"module\">\n import { initializeApp } from 'https:\/\/www.gstatic.com\/firebasejs\/10.12.0\/firebase-app.js';\n import { getDatabase, ref, onValue, set } from 'https:\/\/www.gstatic.com\/firebasejs\/10.12.0\/firebase-database.js';\n\n const firebaseConfig = {\n apiKey: \"AIzaSyBd_jE-VXsbJGdycIGXPVQzgb_BdqCyJHA\",\n authDomain: \"paques-467a1.firebaseapp.com\",\n databaseURL: \"https:\/\/paques-467a1-default-rtdb.europe-west1.firebasedatabase.app\",\n projectId: \"paques-467a1\",\n storageBucket: \"paques-467a1.firebasestorage.app\",\n messagingSenderId: \"320696515084\",\n appId: \"1:320696515084:web:f2cac62878da2bcf9e0c29\",\n measurementId: \"G-PB0YSEL77W\"\n };\n\n const app = initializeApp(firebaseConfig);\n const db = getDatabase(app);\n const dbRef = ref(db, 'chasse');\n\n onValue(dbRef, (snapshot) => {\n const data = snapshot.val();\n if (!data) {\n set(dbRef, { n: 0, o: 0, maxN: 100, maxO: 10 });\n return;\n }\n\n afficher('n', data.n || 0, data.maxN || 100);\n afficher('o', data.o || 0, data.maxO || 10);\n\n document.getElementById('inN').value = data.n || 0;\n document.getElementById('inO').value = data.o || 0;\n document.getElementById('maxN').value = data.maxN || 100;\n document.getElementById('maxO').value = data.maxO || 10;\n\n document.getElementById('syncDot').className = 'dot ok';\n document.getElementById('syncTxt').textContent = 'Sync en direct \u2713';\n\n }, (error) => {\n document.getElementById('syncDot').className = 'dot err';\n document.getElementById('syncTxt').textContent = 'Erreur connexion';\n });\n\n function afficher(type, v, max) {\n const isN = type === 'n';\n const pct = Math.min(100, Math.round(v \/ max * 100));\n\n if (isN) {\n document.getElementById('chifN').textContent = v;\n document.getElementById('lblN').textContent = v + ' \/ ' + max + ' \u0153ufs trouv\u00e9s';\n document.getElementById('barN').style.width = pct + '%';\n document.getElementById('aN').textContent = v;\n document.getElementById('mpN').style.width = pct + '%';\n } else {\n document.getElementById('chifO').textContent = v;\n document.getElementById('lblO').textContent = v + ' \/ ' + max + ' \u0153ufs d\\'or trouv\u00e9s';\n document.getElementById('barO').style.width = pct + '%';\n document.getElementById('aO').textContent = v;\n document.getElementById('mpO').style.width = pct + '%';\n }\n }\n\n function sauvegarder() {\n const data = {\n n: parseInt(document.getElementById('inN').value) || 0,\n o: parseInt(document.getElementById('inO').value) || 0,\n maxN: parseInt(document.getElementById('maxN').value) || 100,\n maxO: parseInt(document.getElementById('maxO').value) || 10,\n };\n set(dbRef, data);\n }\n\n window.maj = (type) => {\n const isN = type === 'n';\n const v = parseInt(document.getElementById(isN ? 'inN' : 'inO').value) || 0;\n const m = parseInt(document.getElementById(isN ? 'maxN' : 'maxO').value) || (isN ? 100 : 10);\n document.getElementById(isN ? 'inN' : 'inO').value = Math.min(v, m);\n sauvegarder();\n toast(isN ? '\ud83e\udd5a Mis \u00e0 jour !' : '\ud83e\udd47 Mis \u00e0 jour !');\n if (v >= m) { confettis(); toast('\ud83c\udf89 Tous trouv\u00e9s !'); }\n };\n\n window.reset = () => {\n document.getElementById('inN').value = 0;\n document.getElementById('inO').value = 0;\n sauvegarder();\n toast('\ud83d\udd04 Remis \u00e0 z\u00e9ro');\n };\n\n window.changerImage = () => {\n const url = document.getElementById('imgUrl').value.trim();\n if (!url) { toast('URL vide', true); return; }\n document.getElementById('fondImg').src = url;\n toast('\ud83d\uddbc\ufe0f Image chang\u00e9e');\n };\n\n window.ouvrirAdmin = () => document.getElementById('adminOverlay').classList.add('visible');\n window.fermerAdmin = () => document.getElementById('adminOverlay').classList.remove('visible');\n\n document.getElementById('adminOverlay').addEventListener('click', e => {\n if (e.target === document.getElementById('adminOverlay')) fermerAdmin();\n });\n\n window.confettis = () => {\n const e = ['\ud83e\udd47','\u2728','\u2b50','\ud83c\udf1f','\ud83d\udc9b','\ud83c\udf89','\ud83c\udf8a','\ud83c\udfc6'];\n for (let i = 0; i < 25; i++) {\n setTimeout(() => {\n const el = document.createElement('div');\n el.className = 'confetti';\n el.textContent = e[Math.floor(Math.random() * e.length)];\n el.style.left = Math.random() * 100 + 'vw';\n el.style.animationDuration = (2.5 + Math.random() * 3) + 's';\n document.body.appendChild(el);\n setTimeout(() => el.remove(), 6000);\n }, i * 120);\n }\n };\n\n window.toast = (msg, err = false) => {\n const t = document.getElementById('toast');\n t.textContent = msg;\n t.className = 'toast' + (err ? ' err' : '') + ' show';\n setTimeout(() => t.className = 'toast', 2800);\n };\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Chasse aux \u0152ufs – AnimCloud \u2699\ufe0f LIVE 0 0 \/ 100 \u0153ufs trouv\u00e9s 0 0 \/ 10 \u0153ufs d’or trouv\u00e9s Connexion… \u2715 \u2699\ufe0f Panneau Admin \ud83e\udd5a \u0152uf Normal Trouv\u00e9s OK Maximum Actuel : 0 \ud83e\udd47 \u0152uf d’Or Trouv\u00e9s OK Maximum Actuel : 0 \ud83d\uddbc\ufe0f Image de fond Changer \ud83d\udd04 Reset \ud83c\udf89 Confettis Fermer<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10065","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/pages\/10065","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/comments?post=10065"}],"version-history":[{"count":16,"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/pages\/10065\/revisions"}],"predecessor-version":[{"id":10093,"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/pages\/10065\/revisions\/10093"}],"wp:attachment":[{"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/media?parent=10065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":10065,"date":"2026-04-04T12:35:57","date_gmt":"2026-04-04T12:35:57","guid":{"rendered":"https:\/\/www.animcloud.fr\/?page_id=10065"},"modified":"2026-04-04T15:30:15","modified_gmt":"2026-04-04T15:30:15","slug":"chasse-oeufs","status":"publish","type":"page","link":"https:\/\/www.animcloud.fr\/en\/chasse-oeufs\/","title":{"rendered":"Paques"},"content":{"rendered":"\n\n\n\n \n \n Chasse aux \u0152ufs – AnimCloud<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fredoka+One&family=Nunito:wght@700;900&display=swap\" rel=\"stylesheet\">\n <style>\n * { margin: 0; padding: 0; box-sizing: border-box; }\n #footer, .site-footer, footer, .footer { display: none !important; }\n\n html, body {\n width: 100%; height: 100vh;\n background: #0d0d0d;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: 'Nunito', sans-serif;\n overflow: hidden;\n }\n\n .scene {\n position: relative;\n width: min(100vw, 177.78vh);\n height: min(100vh, 56.25vw);\n overflow: hidden;\n }\n\n .fond {\n position: absolute;\n inset: 0; width: 100%; height: 100%;\n object-fit: fill;\n user-select: none;\n pointer-events: none;\n }\n\n .top-left {\n position: absolute;\n top: 2.5%; left: 2%;\n z-index: 20;\n }\n\n .icon-btn {\n width: clamp(32px, 3.5vw, 50px);\n height: clamp(32px, 3.5vw, 50px);\n border-radius: 50%;\n border: 2px solid rgba(255,255,255,0.2);\n background: rgba(0,0,0,0.55);\n backdrop-filter: blur(10px);\n cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n font-size: clamp(1rem, 1.8vw, 1.5rem);\n color: white;\n transition: all 0.25s;\n }\n\n .icon-btn:hover {\n transform: rotate(90deg);\n background: rgba(99,102,241,0.75);\n }\n\n .live {\n position: absolute;\n top: 2.5%; right: 2%;\n display: flex; align-items: center; gap: 6px;\n background: rgba(220,38,38,0.9);\n border-radius: 30px;\n padding: 4px 14px 4px 10px;\n color: white;\n font-size: clamp(0.55rem, 1.1vw, 0.85rem);\n font-weight: 900;\n letter-spacing: 2px;\n z-index: 20;\n }\n\n .live-dot {\n width: 10px; height: 10px;\n background: white;\n border-radius: 50%;\n animation: blink 1.2s infinite;\n }\n\n @keyframes blink {\n 0%,100% { opacity: 1; }\n 50% { opacity: 0; }\n }\n\n .compteur {\n position: absolute;\n transform: translateX(-50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 5px;\n z-index: 10;\n }\n\n .c-normal { left: 12%; top: 42%; }\n .c-or { left: 90%; top: 41%; }\n\n .chiffre {\n font-family: 'Fredoka One', cursive;\n font-size: clamp(2.5rem, 6vw, 5.5rem);\n line-height: 1;\n filter: drop-shadow(0 3px 10px rgba(0,0,0,0.7));\n }\n\n .c-normal .chiffre { color: #60a5fa; }\n .c-or .chiffre { color: #fbbf24; }\n\n .chiffre.pulse { animation: pop 0.35s ease; }\n\n @keyframes pop {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.4); }\n 100% { transform: scale(1); }\n }\n\n .label {\n font-size: clamp(0.5rem, 1vw, 0.8rem);\n color: white;\n background: rgba(0,0,0,0.55);\n border-radius: 20px;\n padding: 3px 12px;\n text-align: center;\n backdrop-filter: blur(4px);\n white-space: nowrap;\n }\n\n .barre-wrap {\n width: clamp(80px, 10vw, 140px);\n height: 7px;\n background: rgba(255,255,255,0.2);\n border-radius: 10px;\n overflow: hidden;\n }\n\n .barre {\n height: 100%;\n border-radius: 10px;\n transition: width 0.6s ease;\n width: 0%;\n }\n\n .c-normal .barre { background: linear-gradient(90deg, #3b82f6, #60a5fa); }\n .c-or .barre { background: linear-gradient(90deg, #d97706, #fbbf24); }\n\n .sync-dot {\n position: absolute;\n bottom: 3%; right: 2%;\n display: flex; align-items: center; gap: 6px;\n font-size: clamp(0.5rem, 0.9vw, 0.75rem);\n color: white;\n background: rgba(0,0,0,0.45);\n border-radius: 20px;\n padding: 4px 12px;\n z-index: 20;\n }\n\n .dot {\n width: 8px; height: 8px;\n border-radius: 50%;\n background: #6b7280;\n }\n\n .dot.ok { background: #22c55e; animation: blink 2s infinite; }\n .dot.err { background: #ef4444; }\n\n .admin-overlay {\n display: none;\n position: fixed; inset: 0;\n background: rgba(0,0,0,0.7);\n backdrop-filter: blur(6px);\n z-index: 100;\n align-items: center;\n justify-content: center;\n }\n\n .admin-overlay.visible { display: flex; }\n\n .admin-box {\n background: #1e1e2e;\n border: 1px solid rgba(255,255,255,0.1);\n border-radius: 20px;\n padding: 30px;\n width: min(90vw, 440px);\n color: white;\n position: relative;\n }\n\n .admin-box h2 {\n font-family: 'Fredoka One', cursive;\n font-size: 1.6rem;\n margin-bottom: 20px;\n text-align: center;\n }\n\n .admin-section {\n background: rgba(255,255,255,0.05);\n border-radius: 14px;\n padding: 16px;\n margin-bottom: 14px;\n }\n\n .admin-section h3 {\n font-size: 0.8rem;\n letter-spacing: 2px;\n opacity: 0.6;\n margin-bottom: 12px;\n text-transform: uppercase;\n }\n\n .row {\n display: flex; align-items: center; gap: 10px; margin-bottom: 10px;\n }\n\n .row label {\n font-size: 0.85rem;\n min-width: 100px;\n opacity: 0.85;\n }\n\n input[type=\"number\"], input[type=\"text\"] {\n flex: 1;\n background: rgba(255,255,255,0.08);\n border: 1px solid rgba(255,255,255,0.15);\n border-radius: 10px;\n padding: 8px 12px;\n color: white;\n font-size: 0.9rem;\n outline: none;\n }\n\n input:focus { border-color: rgba(99,102,241,0.6); }\n\n .btn {\n padding: 9px 18px;\n border: none;\n border-radius: 10px;\n font-family: 'Nunito', sans-serif;\n font-weight: 900;\n font-size: 0.85rem;\n cursor: pointer;\n transition: all 0.2s;\n }\n\n .btn:hover { transform: translateY(-2px); }\n .btn-blue { background: #3b82f6; color: white; }\n .btn-gold { background: #d97706; color: white; }\n .btn-red { background: #ef4444; color: white; }\n .btn-purple { background: #6366f1; color: white; }\n .btn-gray { background: rgba(255,255,255,0.1); color: white; }\n\n .btn-close {\n position: absolute;\n top: 14px; right: 14px;\n background: rgba(255,255,255,0.1);\n border: none;\n color: white;\n width: 32px; height: 32px;\n border-radius: 50%;\n font-size: 1rem;\n cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n }\n\n .btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }\n\n .mini-prog {\n height: 5px;\n background: rgba(255,255,255,0.1);\n border-radius: 10px;\n overflow: hidden;\n margin-top: 6px;\n }\n\n .mini-prog-bar { height: 100%; border-radius: 10px; transition: width 0.5s; width: 0%; }\n .mpN { background: #3b82f6; }\n .mpO { background: #d97706; }\n .stat { font-size: 0.8rem; opacity: 0.7; margin-top: 4px; }\n\n .toast {\n position: fixed;\n bottom: 30px; left: 50%;\n transform: translateX(-50%) translateY(80px);\n background: #1e1e2e;\n border: 1px solid rgba(255,255,255,0.15);\n color: white;\n padding: 10px 24px;\n border-radius: 30px;\n font-weight: 700;\n font-size: 0.9rem;\n opacity: 0;\n transition: all 0.4s;\n z-index: 999;\n }\n\n .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }\n .toast.err { border-color: #ef4444; }\n\n .confetti {\n position: fixed;\n top: -50px;\n font-size: 1.8rem;\n animation: tombee linear forwards;\n z-index: 999;\n pointer-events: none;\n }\n\n @keyframes tombee {\n to { transform: translateY(110vh) rotate(720deg); opacity: 0; }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"scene\">\n <img decoding=\"async\" id=\"fondImg\" class=\"fond\" src=\"https:\/\/www.animcloud.fr\/wp-content\/uploads\/2026\/04\/Chasse-au-oeuf1.png\" alt=\"Fond\">\n\n <div class=\"top-left\">\n <button class=\"icon-btn\" onclick=\"ouvrirAdmin()\">\u2699\ufe0f<\/button>\n <\/div>\n\n <div class=\"live\">\n <span class=\"live-dot\"><\/span> LIVE\n <\/div>\n\n \n <div class=\"compteur c-normal\">\n <div class=\"chiffre\" id=\"chifN\">0<\/div>\n <div class=\"label\" id=\"lblN\">0 \/ 100 \u0153ufs trouv\u00e9s<\/div>\n <div class=\"barre-wrap\"><div class=\"barre\" id=\"barN\"><\/div><\/div>\n <\/div>\n\n \n <div class=\"compteur c-or\">\n <div class=\"chiffre\" id=\"chifO\">0<\/div>\n <div class=\"label\" id=\"lblO\">0 \/ 10 \u0153ufs d’or trouv\u00e9s<\/div>\n <div class=\"barre-wrap\"><div class=\"barre\" id=\"barO\"><\/div><\/div>\n <\/div>\n\n <div class=\"sync-dot\">\n <div class=\"dot\" id=\"syncDot\"><\/div>\n <span id=\"syncTxt\">Connexion…<\/span>\n <\/div>\n<\/div>\n\n\n<div class=\"admin-overlay\" id=\"adminOverlay\">\n <div class=\"admin-box\">\n <button class=\"btn-close\" onclick=\"fermerAdmin()\">\u2715<\/button>\n <h2>\u2699\ufe0f Panneau Admin<\/h2>\n\n <div class=\"admin-section\">\n <h3>\ud83e\udd5a \u0152uf Normal<\/h3>\n <div class=\"row\">\n <label>Trouv\u00e9s<\/label>\n <input type=\"number\" id=\"inN\" min=\"0\" value=\"0\">\n <button class=\"btn btn-blue\" onclick=\"maj('n')\">OK<\/button>\n <\/div>\n <div class=\"row\">\n <label>Maximum<\/label>\n <input type=\"number\" id=\"maxN\" min=\"1\" value=\"100\">\n <\/div>\n <div class=\"mini-prog\"><div class=\"mini-prog-bar mpN\" id=\"mpN\"><\/div><\/div>\n <div class=\"stat\">Actuel : <b id=\"aN\">0<\/b><\/div>\n <\/div>\n\n <div class=\"admin-section\">\n <h3>\ud83e\udd47 \u0152uf d’Or<\/h3>\n <div class=\"row\">\n <label>Trouv\u00e9s<\/label>\n <input type=\"number\" id=\"inO\" min=\"0\" value=\"0\">\n <button class=\"btn btn-gold\" onclick=\"maj('o')\">OK<\/button>\n <\/div>\n <div class=\"row\">\n <label>Maximum<\/label>\n <input type=\"number\" id=\"maxO\" min=\"1\" value=\"10\">\n <\/div>\n <div class=\"mini-prog\"><div class=\"mini-prog-bar mpO\" id=\"mpO\"><\/div><\/div>\n <div class=\"stat\">Actuel : <b id=\"aO\">0<\/b><\/div>\n <\/div>\n\n <div class=\"admin-section\">\n <h3>\ud83d\uddbc\ufe0f Image de fond<\/h3>\n <div class=\"row\">\n <input type=\"text\" id=\"imgUrl\" placeholder=\"https:\/\/... URL image\">\n <button class=\"btn btn-purple\" onclick=\"changerImage()\">Changer<\/button>\n <\/div>\n <\/div>\n\n <div class=\"btn-row\">\n <button class=\"btn btn-red\" onclick=\"reset()\">\ud83d\udd04 Reset<\/button>\n <button class=\"btn btn-gray\" onclick=\"confettis()\">\ud83c\udf89 Confettis<\/button>\n <button class=\"btn btn-gray\" onclick=\"fermerAdmin()\">Fermer<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n<div class=\"toast\" id=\"toast\"><\/div>\n\n\n<script type=\"module\">\n import { initializeApp } from 'https:\/\/www.gstatic.com\/firebasejs\/10.12.0\/firebase-app.js';\n import { getDatabase, ref, onValue, set } from 'https:\/\/www.gstatic.com\/firebasejs\/10.12.0\/firebase-database.js';\n\n const firebaseConfig = {\n apiKey: \"AIzaSyBd_jE-VXsbJGdycIGXPVQzgb_BdqCyJHA\",\n authDomain: \"paques-467a1.firebaseapp.com\",\n databaseURL: \"https:\/\/paques-467a1-default-rtdb.europe-west1.firebasedatabase.app\",\n projectId: \"paques-467a1\",\n storageBucket: \"paques-467a1.firebasestorage.app\",\n messagingSenderId: \"320696515084\",\n appId: \"1:320696515084:web:f2cac62878da2bcf9e0c29\",\n measurementId: \"G-PB0YSEL77W\"\n };\n\n const app = initializeApp(firebaseConfig);\n const db = getDatabase(app);\n const dbRef = ref(db, 'chasse');\n\n onValue(dbRef, (snapshot) => {\n const data = snapshot.val();\n if (!data) {\n set(dbRef, { n: 0, o: 0, maxN: 100, maxO: 10 });\n return;\n }\n\n afficher('n', data.n || 0, data.maxN || 100);\n afficher('o', data.o || 0, data.maxO || 10);\n\n document.getElementById('inN').value = data.n || 0;\n document.getElementById('inO').value = data.o || 0;\n document.getElementById('maxN').value = data.maxN || 100;\n document.getElementById('maxO').value = data.maxO || 10;\n\n document.getElementById('syncDot').className = 'dot ok';\n document.getElementById('syncTxt').textContent = 'Sync en direct \u2713';\n\n }, (error) => {\n document.getElementById('syncDot').className = 'dot err';\n document.getElementById('syncTxt').textContent = 'Erreur connexion';\n });\n\n function afficher(type, v, max) {\n const isN = type === 'n';\n const pct = Math.min(100, Math.round(v \/ max * 100));\n\n if (isN) {\n document.getElementById('chifN').textContent = v;\n document.getElementById('lblN').textContent = v + ' \/ ' + max + ' \u0153ufs trouv\u00e9s';\n document.getElementById('barN').style.width = pct + '%';\n document.getElementById('aN').textContent = v;\n document.getElementById('mpN').style.width = pct + '%';\n } else {\n document.getElementById('chifO').textContent = v;\n document.getElementById('lblO').textContent = v + ' \/ ' + max + ' \u0153ufs d\\'or trouv\u00e9s';\n document.getElementById('barO').style.width = pct + '%';\n document.getElementById('aO').textContent = v;\n document.getElementById('mpO').style.width = pct + '%';\n }\n }\n\n function sauvegarder() {\n const data = {\n n: parseInt(document.getElementById('inN').value) || 0,\n o: parseInt(document.getElementById('inO').value) || 0,\n maxN: parseInt(document.getElementById('maxN').value) || 100,\n maxO: parseInt(document.getElementById('maxO').value) || 10,\n };\n set(dbRef, data);\n }\n\n window.maj = (type) => {\n const isN = type === 'n';\n const v = parseInt(document.getElementById(isN ? 'inN' : 'inO').value) || 0;\n const m = parseInt(document.getElementById(isN ? 'maxN' : 'maxO').value) || (isN ? 100 : 10);\n document.getElementById(isN ? 'inN' : 'inO').value = Math.min(v, m);\n sauvegarder();\n toast(isN ? '\ud83e\udd5a Mis \u00e0 jour !' : '\ud83e\udd47 Mis \u00e0 jour !');\n if (v >= m) { confettis(); toast('\ud83c\udf89 Tous trouv\u00e9s !'); }\n };\n\n window.reset = () => {\n document.getElementById('inN').value = 0;\n document.getElementById('inO').value = 0;\n sauvegarder();\n toast('\ud83d\udd04 Remis \u00e0 z\u00e9ro');\n };\n\n window.changerImage = () => {\n const url = document.getElementById('imgUrl').value.trim();\n if (!url) { toast('URL vide', true); return; }\n document.getElementById('fondImg').src = url;\n toast('\ud83d\uddbc\ufe0f Image chang\u00e9e');\n };\n\n window.ouvrirAdmin = () => document.getElementById('adminOverlay').classList.add('visible');\n window.fermerAdmin = () => document.getElementById('adminOverlay').classList.remove('visible');\n\n document.getElementById('adminOverlay').addEventListener('click', e => {\n if (e.target === document.getElementById('adminOverlay')) fermerAdmin();\n });\n\n window.confettis = () => {\n const e = ['\ud83e\udd47','\u2728','\u2b50','\ud83c\udf1f','\ud83d\udc9b','\ud83c\udf89','\ud83c\udf8a','\ud83c\udfc6'];\n for (let i = 0; i < 25; i++) {\n setTimeout(() => {\n const el = document.createElement('div');\n el.className = 'confetti';\n el.textContent = e[Math.floor(Math.random() * e.length)];\n el.style.left = Math.random() * 100 + 'vw';\n el.style.animationDuration = (2.5 + Math.random() * 3) + 's';\n document.body.appendChild(el);\n setTimeout(() => el.remove(), 6000);\n }, i * 120);\n }\n };\n\n window.toast = (msg, err = false) => {\n const t = document.getElementById('toast');\n t.textContent = msg;\n t.className = 'toast' + (err ? ' err' : '') + ' show';\n setTimeout(() => t.className = 'toast', 2800);\n };\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Chasse aux \u0152ufs – AnimCloud \u2699\ufe0f LIVE 0 0 \/ 100 \u0153ufs trouv\u00e9s 0 0 \/ 10 \u0153ufs d’or trouv\u00e9s Connexion… \u2715 \u2699\ufe0f Panneau Admin \ud83e\udd5a \u0152uf Normal Trouv\u00e9s OK Maximum Actuel : 0 \ud83e\udd47 \u0152uf d’Or Trouv\u00e9s OK Maximum Actuel : 0 \ud83d\uddbc\ufe0f Image de fond Changer \ud83d\udd04 Reset \ud83c\udf89 Confettis Fermer<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10065","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/pages\/10065","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/comments?post=10065"}],"version-history":[{"count":16,"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/pages\/10065\/revisions"}],"predecessor-version":[{"id":10093,"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/pages\/10065\/revisions\/10093"}],"wp:attachment":[{"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/media?parent=10065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}