{"id":7101,"date":"2025-01-04T10:00:00","date_gmt":"2025-01-04T10:00:00","guid":{"rendered":"https:\/\/www.animcloud.fr\/jeux\/"},"modified":"2026-03-24T20:26:50","modified_gmt":"2026-03-24T20:26:50","slug":"jeux","status":"publish","type":"page","link":"https:\/\/www.animcloud.fr\/en\/jeux\/","title":{"rendered":"Jeux"},"content":{"rendered":"<style>\n\/* Variables et protection ultra-renforc\u00e9e contre le th\u00e8me WP *\/\n.anim-jeux-wrapper {\n  --orange: #FF5C2E;\n  --yellow: #FFD84D;\n  --dark: #0E0E0E;\n  --dark-2: #161616;\n  --cream: #F8F9FA;\n  --white: #ffffff;\n  --radius-card: 16px;\n  \n  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;\n  background: var(--dark);\n  color: var(--white);\n  width: 100%;\n  overflow-x: hidden;\n}\n\n.anim-jeux-wrapper *, .anim-jeux-wrapper *::before, .anim-jeux-wrapper *::after { \n    box-sizing: border-box; \n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   1. HERO (L'ACCROCHE VISUELLE)\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.anim-jeux-wrapper .hero {\n  position: relative;\n  padding: 120px 20px 80px 20px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  min-height: 65vh;\n  overflow: hidden;\n}\n\n\/* Image de fond avec un meilleur traitement *\/\n.anim-jeux-wrapper .hero-bg {\n  position: absolute; inset: 0;\n  background-image: url('https:\/\/www.animcloud.fr\/wp-content\/uploads\/2025\/10\/ChatGPT-Image-Oct-10-2025-05_26_23-PM.png');\n  background-size: cover;\n  background-position: center;\n  opacity: 0.5; \n  transform: scale(1.05); \/* \u00c9vite les bords blancs *\/\n}\n\n\/* D\u00e9grad\u00e9 pour faire ressortir le texte \u00e0 100% *\/\n.anim-jeux-wrapper .hero-overlay {\n  position: absolute; inset: 0;\n  background: radial-gradient(circle at center, rgba(14,14,14,0.3) 0%, rgba(14,14,14,0.95) 100%);\n}\n\n.anim-jeux-wrapper .hero-inner {\n  position: relative; z-index: 2;\n  max-width: 900px;\n  width: 100%;\n}\n\n.anim-jeux-wrapper .hero-tag {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: var(--orange);\n  color: var(--white) !important;\n  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;\n  padding: 8px 18px; border-radius: 100px;\n  margin-bottom: 25px;\n  box-shadow: 0 4px 15px rgba(255, 92, 46, 0.4);\n}\n\n\/* On force la couleur blanche et on ajoute une ombre pour le pop *\/\n.anim-jeux-wrapper .hero h1 {\n  font-size: clamp(45px, 8vw, 85px);\n  font-weight: 900;\n  line-height: 1.1;\n  margin-bottom: 25px;\n  color: var(--white) !important;\n  text-shadow: 0 10px 30px rgba(0,0,0,0.8);\n}\n\n.anim-jeux-wrapper .hero h1 em {\n  font-style: normal;\n  color: var(--orange) !important;\n}\n\n.anim-jeux-wrapper .hero-desc {\n  font-size: 18px; line-height: 1.6;\n  color: #e2e8f0 !important;\n  max-width: 600px;\n  margin: 0 auto 30px auto;\n  text-shadow: 0 2px 10px rgba(0,0,0,0.5);\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   2. BANDEAU STATS PREMIUM\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.anim-jeux-wrapper .stats-band { \n    background: var(--dark-2); \n    padding: 60px 20px; \n    border-top: 1px solid rgba(255,255,255,0.05);\n}\n.anim-jeux-wrapper .stats-inner {\n  max-width: 1100px; margin: 0 auto;\n  display: grid; \n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); \n  gap: 25px; \n}\n\n\/* Nouvelles cartes pour les stats *\/\n.anim-jeux-wrapper .stat-item {\n  background: linear-gradient(145deg, #1f1f1f, #121212);\n  padding: 35px 25px;\n  border-radius: 20px;\n  text-align: center;\n  border: 1px solid rgba(255,255,255,0.03);\n  box-shadow: 0 15px 35px rgba(0,0,0,0.4);\n  transition: all 0.3s ease;\n}\n\n.anim-jeux-wrapper .stat-item:hover {\n  transform: translateY(-8px);\n  border-color: rgba(255, 216, 77, 0.3); \/* Liser\u00e9 jaune au survol *\/\n  box-shadow: 0 20px 40px rgba(0,0,0,0.6);\n}\n\n.anim-jeux-wrapper .stat-num {\n  font-size: 48px; font-weight: 900; color: var(--yellow); margin-bottom: 10px;\n  line-height: 1;\n}\n.anim-jeux-wrapper .stat-label { \n    font-size: 15px; font-weight: 500; color: #a1a1aa; \n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   3. CATALOGUE ET GRILLE\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.anim-jeux-wrapper .catalogue { \n    background: var(--cream); \n    padding: 80px 20px; \n}\n.anim-jeux-wrapper .cat-header {\n  max-width: 1200px; margin: 0 auto 40px auto; text-align: center;\n}\n.anim-jeux-wrapper .cat-title {\n  font-size: clamp(32px, 5vw, 48px);\n  font-weight: 900; color: var(--dark) !important; margin:0;\n}\n.anim-jeux-wrapper .cat-title span { color: var(--orange) !important; }\n\n\/* Filtres *\/\n.anim-jeux-wrapper .filter-bar {\n  max-width: 1200px; margin: 0 auto 50px auto;\n  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;\n}\n.anim-jeux-wrapper .chip {\n  padding: 12px 24px; border-radius: 100px; background: var(--white);\n  border: 2px solid transparent; cursor: pointer; font-weight: 700; color: #64748b; \n  box-shadow: 0 4px 10px rgba(0,0,0,0.03);\n  transition: all 0.2s;\n}\n.anim-jeux-wrapper .chip:hover { color: var(--dark); transform: scale(1.05); }\n.anim-jeux-wrapper .chip.is-active { \n    background: var(--orange); color: var(--white) !important; border-color: var(--orange); \n    box-shadow: 0 8px 20px rgba(255,92,46,0.3);\n}\n\n\/* GRILLE FLUIDE *\/\n.anim-jeux-wrapper .kits-grid {\n  max-width: 1200px; margin: 0 auto;\n  display: grid; \n  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n  gap: 35px;\n}\n\n\/* Style des Cartes (Plus haut de gamme) *\/\n.anim-jeux-wrapper .kit-card {\n  background: var(--white); border-radius: var(--radius-card);\n  overflow: hidden; display: flex; flex-direction: column;\n  box-shadow: 0 10px 30px rgba(0,0,0,0.06);\n  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n  border: 1px solid rgba(0,0,0,0.02);\n}\n.anim-jeux-wrapper .kit-card:hover { \n    transform: translateY(-10px); \n    box-shadow: 0 20px 40px rgba(0,0,0,0.12); \n}\n\n.anim-jeux-wrapper .kit-media { position: relative; height: 240px; overflow: hidden; }\n.anim-jeux-wrapper .kit-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }\n.anim-jeux-wrapper .kit-card:hover .kit-media img { transform: scale(1.08); }\n\n.anim-jeux-wrapper .cat-stamp {\n  position: absolute; top: 18px; left: 18px;\n  color: var(--white); font-weight: 800; font-size: 12px; letter-spacing: 0.5px;\n  text-transform: uppercase; padding: 8px 14px; border-radius: 8px;\n  box-shadow: 0 4px 10px rgba(0,0,0,0.2);\n}\n.anim-jeux-wrapper .cat-stamp.soiree { background: #3A1AFF; }\n.anim-jeux-wrapper .cat-stamp.aperitif { background: var(--orange); }\n\n.anim-jeux-wrapper .kit-body { padding: 30px; display: flex; flex-direction: column; gap: 15px; flex: 1; }\n.anim-jeux-wrapper .kit-body h3 { font-size: 24px; font-weight: 800; color: var(--dark) !important; margin: 0; }\n.anim-jeux-wrapper .kit-body p { font-size: 15px; color: #64748b !important; line-height: 1.6; margin: 0; }\n\n.anim-jeux-wrapper .kit-tags { display: flex; gap: 8px; flex-wrap: wrap; }\n.anim-jeux-wrapper .kit-tag { font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 8px; background: #f1f5f9; color: #475569; }\n\n.anim-jeux-wrapper .kit-footer { padding: 0 30px 30px; display: flex; }\n.anim-jeux-wrapper .btn-dl {\n  width: 100%; display: inline-flex; align-items: center; justify-content: center;\n  padding: 16px 20px; border-radius: 12px; background: var(--dark); color: var(--white) !important;\n  font-weight: 800; font-size: 15px; text-decoration: none; transition: all 0.2s;\n}\n.anim-jeux-wrapper .btn-dl:hover { background: var(--orange); transform: scale(1.02); }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   4. APPEL \u00c0 L'ACTION (CTA)\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.anim-jeux-wrapper .cta-section { background: var(--orange); padding: 80px 20px; text-align: center; }\n.anim-jeux-wrapper .cta-inner { max-width: 800px; margin: 0 auto; }\n.anim-jeux-wrapper .cta-text h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 900; color: var(--white) !important; margin-bottom: 30px; }\n.anim-jeux-wrapper .btn-cta-white {\n  display: inline-block; padding: 18px 40px; border-radius: 100px;\n  background: var(--white); color: var(--orange) !important; font-weight: 800; font-size: 16px; text-decoration: none;\n  box-shadow: 0 10px 30px rgba(0,0,0,0.15); transition: transform 0.2s;\n}\n.anim-jeux-wrapper .btn-cta-white:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(0,0,0,0.25); }\n<\/style>\n\n<div class=\"anim-jeux-wrapper\">\n\n  <header class=\"hero\">\n    <div class=\"hero-bg\"><\/div>\n    <div class=\"hero-overlay\"><\/div>\n    <div class=\"hero-inner\">\n      <div class=\"hero-tag\">\u26a1 Pr\u00eats \u00e0 animer<\/div>\n      <h1>Jeux <em>Cl\u00e9 en main<\/em><\/h1>\n      <p class=\"hero-desc\">Tu t\u00e9l\u00e9charges, tu lances, \u00e7a marche. Des Jeux Ap\u00e9ritif pour chauffer la salle aux Soir\u00e9es compl\u00e8tes en \u00e9quipes.<\/p>\n    <\/div>\n  <\/header>\n\n  <div class=\"stats-band\">\n    <div class=\"stats-inner\">\n      <div class=\"stat-item\">\n        <div class=\"stat-num\">50+<\/div>\n        <div class=\"stat-label\">Jeux disponibles<\/div>\n      <\/div>\n      <div class=\"stat-item\">\n        <div class=\"stat-num\">5 min<\/div>\n        <div class=\"stat-label\">Pr\u00e9paration requise<\/div>\n      <\/div>\n      <div class=\"stat-item\">\n        <div class=\"stat-num\">100%<\/div>\n        <div class=\"stat-label\">Droits inclus<\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <section class=\"catalogue\" id=\"catalogue\">\n    <div class=\"cat-header\">\n      <h2 class=\"cat-title\">Tous les <span>jeux<\/span><\/h2>\n    <\/div>\n\n    <div class=\"filter-bar\" id=\"filterChips\">\n      <button class=\"chip is-active\" data-type=\"all\">Tous<\/button>\n      <button class=\"chip\" data-type=\"aperitif\">\ud83c\udf79 Ap\u00e9ritif<\/button>\n      <button class=\"chip\" data-type=\"soiree\">\ud83c\udf19 Soir\u00e9e<\/button>\n    <\/div>\n\n    <div class=\"kits-grid\" id=\"kitsGrid\">\n      \n      <article class=\"kit-card\" data-type=\"soiree\">\n        <div class=\"kit-media\">\n          <img decoding=\"async\" src=\"https:\/\/www.animcloud.fr\/wp-content\/uploads\/2025\/10\/ChatGPT-Image-Oct-10-2025-05_32_35-PM.png\" alt=\"Jeux Soir\u00e9e\" loading=\"lazy\">\n          <span class=\"cat-stamp soiree\">Soir\u00e9e<\/span>\n        <\/div>\n        <div class=\"kit-body\">\n          <h3>Jeux Soir\u00e9e<\/h3>\n          <p>L&rsquo;animation compl\u00e8te pour vos soir\u00e9es vacanciers ou \u00e9v\u00e9nements internes. \u00c9preuves en \u00e9quipes et bonne humeur garantie.<\/p>\n          <div class=\"kit-tags\">\n            <span class=\"kit-tag\">\ud83d\udc65 \u00c9quipes<\/span>\n            <span class=\"kit-tag\">\ud83c\udfc6 D\u00e9fis<\/span>\n          <\/div>\n        <\/div>\n        <div class=\"kit-footer\">\n          <a class=\"btn-dl\" href=\"https:\/\/1drv.ms\/f\/c\/6241ecd70c0d2ab8\/Ekge4WZSf-tFpbZ4T843xiYBRuZZrf37QOJbAZfC97mvZQ?e=cDD7TN\" target=\"_blank\">T\u00e9l\u00e9charger le pack \u2b07<\/a>\n        <\/div>\n      <\/article>\n\n      <article class=\"kit-card\" data-type=\"aperitif\">\n        <div class=\"kit-media\">\n          <img decoding=\"async\" src=\"https:\/\/www.animcloud.fr\/wp-content\/uploads\/2025\/10\/ChatGPT-Image-Oct-10-2025-05_26_23-PM.png\" alt=\"Jeux Ap\u00e9ritif\" loading=\"lazy\">\n          <span class=\"cat-stamp aperitif\">Ap\u00e9ritif<\/span>\n        <\/div>\n        <div class=\"kit-body\">\n          <h3>Jeux Ap\u00e9ritif<\/h3>\n          <p>D\u00e9fis rapides et jeux conviviaux. Parfait \u00e0 l&rsquo;accueil du camping ou entre deux activit\u00e9s pour lancer la dynamique.<\/p>\n          <div class=\"kit-tags\">\n            <span class=\"kit-tag\">\u26a1 Rapide<\/span>\n          <\/div>\n        <\/div>\n        <div class=\"kit-footer\">\n          <a class=\"btn-dl\" href=\"https:\/\/1drv.ms\/f\/c\/6241ecd70c0d2ab8\/EkWsFrH01PlBq8dKqQWa8jEBEK2P8D6A98BqouNA9W4OiA?e=p2MSMj\" target=\"_blank\">T\u00e9l\u00e9charger \u2b07<\/a>\n        <\/div>\n      <\/article>\n\n    <\/div>\n  <\/section>\n\n  <section class=\"cta-section\">\n    <div class=\"cta-inner\">\n      <div class=\"cta-text\">\n        <h2>Besoin d&rsquo;une animation sur-mesure ?<\/h2>\n      <\/div>\n      <a class=\"btn-cta-white\" href=\"\/en\/spectacles\/\">D\u00e9couvrir les spectacles \u2192<\/a>\n    <\/div>\n  <\/section>\n\n<\/div>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n  const chips = document.querySelectorAll('.anim-jeux-wrapper #filterChips .chip');\n  const cards = Array.from(document.querySelectorAll('.anim-jeux-wrapper .kit-card'));\n\n  chips.forEach(chip => {\n    chip.addEventListener('click', () => {\n      chips.forEach(c => c.classList.remove('is-active'));\n      chip.classList.add('is-active');\n      \n      const activeType = chip.dataset.type;\n\n      cards.forEach(card => {\n        const type = card.dataset.type || '';\n        if (activeType === 'all' || type.includes(activeType)) {\n          card.style.display = 'flex';\n        } else {\n          card.style.display = 'none';\n        }\n      });\n    });\n  });\n});\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>","protected":false},"excerpt":{"rendered":"<p>\u26a1 Pr\u00eats \u00e0 animer Jeux Cl\u00e9 en main Tu t\u00e9l\u00e9charges, tu lances, \u00e7a marche. Des Jeux Ap\u00e9ritif pour chauffer la salle aux Soir\u00e9es compl\u00e8tes en \u00e9quipes. 50+ Jeux disponibles 5 min Pr\u00e9paration requise 100% Droits inclus Tous les jeux Tous \ud83c\udf79 Ap\u00e9ritif \ud83c\udf19 Soir\u00e9e Soir\u00e9e Jeux Soir\u00e9e L&rsquo;animation compl\u00e8te pour vos soir\u00e9es vacanciers ou \u00e9v\u00e9nements [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7101","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/pages\/7101","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=7101"}],"version-history":[{"count":34,"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/pages\/7101\/revisions"}],"predecessor-version":[{"id":10038,"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/pages\/7101\/revisions\/10038"}],"wp:attachment":[{"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/media?parent=7101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}