{"id":672,"date":"2026-03-01T10:41:11","date_gmt":"2026-03-01T10:41:11","guid":{"rendered":"https:\/\/tirage-oracle.com\/?page_id=672"},"modified":"2026-03-28T00:59:12","modified_gmt":"2026-03-28T00:59:12","slug":"loracle-des-anges","status":"publish","type":"page","link":"https:\/\/tirage-oracle.com\/en\/loracle-des-anges\/","title":{"rendered":"L\u2019Oracle des Anges"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"672\" class=\"elementor elementor-672\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e2286c2 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"e2286c2\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-57d03ef0 elementor-widget elementor-widget-html\" data-id=\"57d03ef0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"belline-tirage-block\">\n  <style>\n    #belline-tirage-block{\n      --bg-dark:#071a1f;\n      --bg-mid:#0b2b33;\n      --gold:#d4af37;\n      --gold-soft:#f2df9c;\n      --teal:#37d4c6;\n      --white:#f3f7f6;\n      --shadow:0 12px 34px rgba(0,0,0,0.38);\n      --shadow-hover:0 18px 44px rgba(55,212,198,0.22);\n      --glow:0 0 28px rgba(55,212,198,0.18);\n      --safe-b: env(safe-area-inset-bottom, 0px);\n      --safe-r: env(safe-area-inset-right, 0px);\n      --safe-t: env(safe-area-inset-top, 0px);\n      --safe-l: env(safe-area-inset-left, 0px);\n      font-family:Arial,sans-serif;\n      color:var(--white);\n      line-height:1.6;\n      overflow-x:clip;\n      background:transparent !important;\n    }\n\n    #belline-tirage-block *{margin:0;padding:0;box-sizing:border-box;}\n    #belline-tirage-block a{color:inherit;text-decoration:none;}\n    #belline-tirage-block img{max-width:100%;height:auto;display:block;}\n    #belline-tirage-block button,\n    #belline-tirage-block input{font-family:inherit;}\n\n    #belline-tirage-block .btn-gold{\n      background:linear-gradient(45deg,var(--gold),#ffe58a);\n      color:var(--bg-dark);\n      padding:1rem 2.2rem;\n      border:none;\n      border-radius:999px;\n      font-size:1.05rem;\n      font-weight:800;\n      cursor:pointer;\n      transition:all .28s ease;\n      box-shadow:var(--shadow);\n      display:inline-flex;\n      align-items:center;\n      justify-content:center;\n      gap:.45rem;\n      min-height:48px;\n      line-height:1.15;\n      max-width:100%;\n      white-space:normal;\n      text-align:center;\n    }\n\n    #belline-tirage-block .btn-gold:hover{\n      transform:translateY(-2px);\n      box-shadow:0 18px 44px rgba(212,175,55,0.22);\n    }\n\n    #belline-tirage-block .btn-gold:disabled{\n      opacity:.7;\n      cursor:not-allowed;\n      transform:none;\n    }\n\n    #belline-tirage-block .tarot-section{\n      padding:4rem 2rem;\n      max-width:1200px;\n      margin:0 auto;\n    }\n\n    #belline-tirage-block .section-title{\n      text-align:center;\n      font-size:2.2rem;\n      margin-bottom:1.1rem;\n      color:var(--gold);\n    }\n\n    #belline-tirage-block .hint{\n      text-align:center;\n      max-width:780px;\n      margin:0 auto 1.6rem;\n      opacity:.94;\n    }\n\n    #belline-tirage-block .namebox{\n      max-width:650px;\n      margin:1.2rem auto 2rem;\n      text-align:center;\n      padding:1.6rem;\n      background:rgba(255,255,255,0.08);\n      border-radius:20px;\n      backdrop-filter:blur(10px);\n      box-shadow:var(--shadow);\n      border:1px solid rgba(55,212,198,0.14);\n    }\n\n    #belline-tirage-block .namebox label{\n      display:block;\n      font-weight:800;\n      margin-bottom:.7rem;\n      color:var(--white);\n      opacity:.95;\n    }\n\n    #belline-tirage-block .namebox input{\n      width:100%;\n      max-width:420px;\n      padding:1rem 1.2rem;\n      border:none;\n      border-radius:999px;\n      font-size:1.05rem;\n      outline:none;\n    }\n\n    #belline-tirage-block .namebox .micro{\n      margin-top:.7rem;\n      font-size:1rem;\n      opacity:.85;\n    }\n\n    #belline-tirage-block .deck-wrap{\n      display:flex;\n      justify-content:center;\n      align-items:flex-end;\n      padding:1rem 0 1.6rem;\n    }\n\n    #belline-tirage-block .deck-shell{\n      width:min(1040px, 96vw);\n      position:relative;\n    }\n\n    #belline-tirage-block .deck-shell::before{\n      content:\"\";\n      position:absolute;\n      inset:auto 4% 10px;\n      height:28px;\n      border-radius:999px;\n      background:radial-gradient(closest-side, rgba(0,0,0,0.38), transparent 72%);\n      filter:blur(8px);\n      pointer-events:none;\n      z-index:0;\n    }\n\n    #belline-tirage-block .deck-table{\n      position:relative;\n      width:100%;\n      height:310px;\n      border-radius:24px;\n      overflow:hidden;\n      user-select:none;\n      touch-action:pan-x;\n      transition:opacity .25s ease, filter .25s ease;\n      background:\n        radial-gradient(900px 320px at 50% 28%, rgba(255,255,255,0.16), rgba(255,255,255,0.04) 44%, rgba(0,0,0,0) 72%),\n        radial-gradient(640px 260px at 50% 100%, rgba(212,175,55,0.10), transparent 70%),\n        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00)),\n        linear-gradient(135deg, rgba(0,0,0,0.94), rgba(7,26,31,0.96));\n      border:1px solid rgba(255,255,255,0.18);\n      box-shadow:\n        inset 0 1px 0 rgba(255,255,255,0.08),\n        0 18px 44px rgba(0,0,0,0.46);\n      filter:drop-shadow(var(--glow));\n      z-index:1;\n    }\n\n    #belline-tirage-block .deck-table::before{\n      content:\"\";\n      position:absolute;\n      inset:14px;\n      border-radius:16px;\n      border:1px solid rgba(255,255,255,0.14);\n      background:\n        radial-gradient(700px 240px at 50% 25%, rgba(55,212,198,0.12), transparent 60%),\n        radial-gradient(520px 220px at 50% 80%, rgba(212,175,55,0.10), transparent 60%);\n      pointer-events:none;\n    }\n\n    #belline-tirage-block .deck-table.disabled{\n      opacity:.38;\n      pointer-events:none;\n      filter:grayscale(12%) drop-shadow(var(--glow));\n    }\n\n    #belline-tirage-block .deck-scroll-hint{\n      display:none;\n      text-align:center;\n      margin-top:.8rem;\n      font-size:.95rem;\n      opacity:.88;\n      color:var(--gold-soft);\n    }\n\n    #belline-tirage-block .deck-scroll-hint strong{\n      color:var(--white);\n      font-weight:800;\n    }\n\n    #belline-tirage-block .tarot-card{\n      --x:0;\n      --y:0;\n      --rot:0;\n      --flip:0;\n      --hover-lift:0;\n      position:absolute;\n      left:0;\n      bottom:14px;\n      width:118px;\n      aspect-ratio:2.5\/4;\n      border-radius:16px;\n      transform-style:preserve-3d;\n      transition:\n        transform .32s ease,\n        filter .25s ease,\n        box-shadow .25s ease,\n        opacity .22s ease,\n        border-color .22s ease;\n      box-shadow:var(--shadow);\n      border:2px solid transparent;\n      overflow:hidden;\n      cursor:pointer;\n      will-change:transform;\n      transform:\n        translate3d(\n          calc(var(--x) * 1px),\n          calc((var(--y) * -1px) - (var(--hover-lift) * 1px)),\n          0\n        )\n        rotate(calc(var(--rot) * 1deg))\n        rotateY(calc(var(--flip) * 1deg));\n      z-index:var(--z);\n      background:linear-gradient(145deg,#0b2b33,#071a1f);\n    }\n\n    @media (hover:hover){\n      #belline-tirage-block .tarot-card:not(.selected):not(.locked):not(.picked):hover{\n        --hover-lift:14;\n        box-shadow:var(--shadow-hover);\n        border-color:rgba(55,212,198,0.65);\n        filter:saturate(1.06);\n      }\n    }\n\n    #belline-tirage-block .tarot-card.selected{\n      border-color:rgba(212,175,55,0.88);\n      box-shadow:0 18px 44px rgba(212,175,55,0.22);\n      filter:saturate(1.05);\n    }\n\n    #belline-tirage-block .tarot-card.locked{\n      opacity:.32;\n      filter:grayscale(55%);\n      cursor:not-allowed;\n      border-color:transparent;\n      box-shadow:var(--shadow);\n    }\n\n    #belline-tirage-block .tarot-card.picked{\n      pointer-events:none !important;\n      opacity:0 !important;\n      visibility:hidden !important;\n      transform:translate(-9999px, -9999px) !important;\n      transition:none !important;\n    }\n\n    #belline-tirage-block .card-face,\n    #belline-tirage-block .card-back{\n      position:absolute;\n      width:100%;\n      height:100%;\n      backface-visibility:hidden;\n      border-radius:14px;\n      display:flex;\n      align-items:center;\n      justify-content:center;\n    }\n\n    #belline-tirage-block .card-back{\n      background:\n        radial-gradient(circle at 30% 22%, rgba(195,226,255,0.18), transparent 40%),\n        radial-gradient(circle at 70% 75%, rgba(212,175,55,0.12), transparent 52%),\n        linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00)),\n        repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 8px, transparent 8px 16px),\n        linear-gradient(145deg, #062a33, #031317);\n      border:1px solid rgba(255,255,255,0.12);\n    }\n\n    #belline-tirage-block .card-back::before{\n      content:\"\";\n      position:absolute;\n      inset:10px;\n      border-radius:12px;\n      border:1px solid rgba(212,175,55,0.28);\n      box-shadow:inset 0 0 0 1px rgba(0,0,0,0.18);\n    }\n\n    #belline-tirage-block .card-back::after{\n      content:\"\u2726\";\n      color:rgba(212,175,55,0.75);\n      font-size:1.45rem;\n      text-shadow:0 0 14px rgba(212,175,55,0.22);\n    }\n\n    #belline-tirage-block .card-face{\n      background:linear-gradient(145deg,#f5f5f5,#e7e7e7);\n      transform:rotateY(180deg);\n    }\n\n    #belline-tirage-block .card-face img{\n      width:100%;\n      height:100%;\n      object-fit:cover;\n      display:block;\n    }\n\n    #belline-tirage-block .counter{\n      position:fixed;\n      top:calc(1rem + var(--safe-t));\n      right:calc(1rem + var(--safe-r));\n      background:rgba(0,0,0,0.78);\n      color:var(--gold);\n      padding:.75rem 1rem;\n      border-radius:999px;\n      font-weight:800;\n      z-index:1000;\n      border:1px solid rgba(212,175,55,0.18);\n      font-size:.95rem;\n      pointer-events:none;\n      backdrop-filter:blur(8px);\n    }\n\n    #belline-tirage-block .btn-row{\n      display:flex;\n      gap:12px;\n      justify-content:center;\n      align-items:center;\n      flex-wrap:wrap;\n      margin-top:.25rem;\n    }\n\n    @media (max-width: 767px){\n      #belline-tirage-block .tarot-section{\n        padding:2.2rem 1rem;\n      }\n\n      #belline-tirage-block .section-title{\n        font-size:1.85rem;\n      }\n\n      #belline-tirage-block .namebox{\n        padding:1.2rem;\n        margin:1rem auto 1.2rem;\n      }\n\n      #belline-tirage-block .deck-wrap{\n        padding:.65rem 0 1rem;\n      }\n\n      #belline-tirage-block .deck-shell{\n        width:100%;\n      }\n\n      #belline-tirage-block .deck-shell::before{\n        inset:auto 7% 8px;\n      }\n\n      #belline-tirage-block .deck-table{\n        height:auto;\n        min-height:232px;\n        padding:18px 16px 20px;\n        overflow-x:auto;\n        overflow-y:hidden;\n        display:flex;\n        align-items:flex-end;\n        gap:0;\n        scroll-snap-type:x proximity;\n        -webkit-overflow-scrolling:touch;\n        touch-action:pan-x;\n      }\n\n      #belline-tirage-block .deck-table::before{\n        inset:10px;\n      }\n\n      #belline-tirage-block .deck-table::-webkit-scrollbar{\n        display:none;\n      }\n\n      #belline-tirage-block .deck-table{\n        scrollbar-width:none;\n      }\n\n      #belline-tirage-block .deck-scroll-hint{\n        display:block;\n      }\n\n      #belline-tirage-block .tarot-card{\n        position:relative;\n        left:auto;\n        bottom:auto;\n        width:108px;\n        min-width:108px;\n        flex:0 0 108px;\n        border-radius:14px;\n        margin-right:-24px;\n        transform:none !important;\n        scroll-snap-align:center;\n      }\n\n      #belline-tirage-block .tarot-card:last-child{\n        margin-right:0;\n      }\n\n      #belline-tirage-block .tarot-card:not(.locked):not(.picked):active{\n        transform:translateY(-8px) scale(1.01) !important;\n      }\n\n      #belline-tirage-block #nextBtn{\n        width:100%;\n        max-width:100%;\n        margin:.65rem 0 0 !important;\n      }\n    }\n  <\/style>\n\n  <section id=\"tarot\" class=\"tarot-section\">\n    <h2 class=\"section-title\">Tirage oracle des Anges gratuit en ligne<\/h2>\n    <p class=\"hint\" id=\"hintText\">Entre ton pr\u00e9nom (obligatoire), puis choisis 5 cartes dans le paquet.<\/p>\n\n    <div class=\"namebox\" id=\"namebox\">\n      <label for=\"nameInput2\">Ton pr\u00e9nom (obligatoire)<\/label>\n      <input id=\"nameInput2\" type=\"text\" value=\"\" placeholder=\"Ex : Marie\" \/>\n      <div class=\"micro\">Ton pr\u00e9nom sera utilis\u00e9 uniquement dans ton interpr\u00e9tation.<\/div>\n      <div style=\"margin-top:1rem;\">\n        <button id=\"confirmNameBtn\" type=\"button\" class=\"btn-gold\">Valider mon pr\u00e9nom<\/button>\n      <\/div>\n    <\/div>\n\n    <h2 class=\"section-title\" id=\"cardsTitle\" style=\"margin-top:1.6rem;\">Choisis tes 5 cartes intuitivement<\/h2>\n\n    <div class=\"counter\" id=\"counter\">Cartes : 0\/5<\/div>\n\n    <div class=\"deck-wrap\">\n      <div class=\"deck-shell\">\n        <div class=\"deck-table disabled\" id=\"tarot-deck\" aria-label=\"Paquet de cartes Oracle des Anges\"><\/div>\n        <div class=\"deck-scroll-hint\" id=\"deckScrollHint\">\n          <strong>Mobile :<\/strong> fais glisser le jeu avec ton doigt, puis touche une carte pour la choisir.\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"btn-row\">\n      <button id=\"nextBtn\" class=\"btn-gold\" style=\"display:none;\">Valider mes cartes<\/button>\n    <\/div>\n  <\/section>\n\n  <script>\n    (function () {\n      function initTirageBlock() {\n        const Core = window.BellineModularCore;\n        if (!Core) return;\n\n        const deck = document.getElementById('tarot-deck');\n        if (!deck || deck.dataset.initDone === '1') return;\n        deck.dataset.initDone = '1';\n\n        const state = Core.state;\n        const maxCards = Core.maxCards;\n        const anges = Core.anges;\n\n        const counter = document.getElementById('counter');\n        const nextBtn = document.getElementById('nextBtn');\n        const hintText = document.getElementById('hintText');\n        const nameInput2 = document.getElementById('nameInput2');\n        const confirmNameBtn = document.getElementById('confirmNameBtn');\n        const cardsTitle = document.getElementById('cardsTitle');\n\n        function isSwipeMode() {\n          return window.matchMedia('(max-width: 767px)').matches;\n        }\n\n        function syncHint() {\n          if (!state.userName) {\n            hintText.textContent = \"Entre ton pr\u00e9nom (obligatoire), puis choisis 5 cartes dans le paquet.\";\n            return;\n          }\n\n          if (isSwipeMode()) {\n            hintText.textContent = `${state.userName}, respire\u2026 fais glisser le jeu avec ton doigt puis touche 5 cartes. Laisse ton intuition te guider.`;\n          } else {\n            hintText.textContent = `${state.userName}, respire\u2026 puis choisis 5 cartes. Laisse ton intuition te guider.`;\n          }\n        }\n\n        function layoutTable() {\n          const cards = [...deck.querySelectorAll('.tarot-card:not(.picked)')];\n          const total = cards.length;\n          if (!total) return;\n\n          if (isSwipeMode()) {\n            cards.forEach((el, i) => {\n              el.style.position = 'relative';\n              el.style.setProperty('--x', '0');\n              el.style.setProperty('--y', '0');\n              el.style.setProperty('--rot', '0');\n              el.style.setProperty('--z', String(i + 1));\n            });\n            return;\n          }\n\n          const W = deck.getBoundingClientRect().width || window.innerWidth;\n          const cardW = 118;\n          const pad = 34;\n          const usable = Math.max(220, W - pad * 2);\n          const step = Math.max(13, Math.min(22, (usable - cardW) \/ Math.max(1, total - 1)));\n          const spreadW = cardW + step * (total - 1);\n          const startX = Math.round((W - spreadW) \/ 2);\n          const mid = (total - 1) \/ 2;\n\n          cards.forEach((el, i) => {\n            const offset = i - mid;\n            const x = startX + i * step;\n            const y = Math.abs(offset) * 5.5;\n            const rot = offset * 1.5;\n\n            el.style.position = 'absolute';\n            el.style.setProperty('--x', String(Math.round(x)));\n            el.style.setProperty('--y', String(y.toFixed(2)));\n            el.style.setProperty('--rot', String(rot.toFixed(2)));\n            el.style.setProperty('--z', String(i + 1));\n          });\n        }\n\n        function initDeck() {\n          deck.innerHTML = '';\n\n          anges.forEach((cardData, index) => {\n            const card = document.createElement('div');\n            card.className = 'tarot-card';\n            card.dataset.index = index;\n            card.setAttribute('role', 'button');\n            card.setAttribute('tabindex', '0');\n            card.setAttribute('aria-label', `Choisir la carte ${cardData.name}`);\n            card.style.setProperty('--flip', '0');\n\n            card.innerHTML = `\n              <div class=\"card-back\"><\/div>\n              <div class=\"card-face\">\n                <img decoding=\"async\"\n                  loading=\"lazy\"\n                  src=\"${cardData.img}\"\n                  alt=\"${Core.helpers.esc(cardData.name)}\"\n                  onerror=\"this.onerror=null; this.src=''; this.alt='Image introuvable'; this.style.opacity='0';\"\n                >\n              <\/div>\n            `;\n\n            card.addEventListener('click', selectCard);\n            card.addEventListener('keydown', (e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                selectCard({ currentTarget: card });\n              }\n            });\n\n            deck.appendChild(card);\n          });\n\n          layoutTable();\n        }\n\n        function updateCounter() {\n          counter.textContent = `Cartes : ${state.selectedCards.length}\/${maxCards}`;\n        }\n\n        function lockUnselectedCardsIfNeeded() {\n          const cards = deck.querySelectorAll('.tarot-card');\n          if (state.selectedCards.length >= maxCards) {\n            cards.forEach(el => {\n              const idx = parseInt(el.dataset.index, 10);\n              if (!state.selectedCards.includes(idx)) el.classList.add('locked');\n            });\n          } else {\n            cards.forEach(el => el.classList.remove('locked'));\n          }\n        }\n\n        function toggleButtons() {\n          nextBtn.style.display = state.selectedCards.length === maxCards ? 'inline-flex' : 'none';\n\n          lockUnselectedCardsIfNeeded();\n\n          if (state.selectedCards.length === maxCards) {\n            setTimeout(() => Core.helpers.scrollToEl(nextBtn, 22), 80);\n          }\n        }\n\n        function resetDrawOnly() {\n          state.selectedCards = [];\n          state.selectedGender = null;\n\n          document.querySelectorAll('#belline-tirage-block .tarot-card').forEach(c => {\n            c.classList.remove('selected', 'locked', 'picked');\n            c.style.pointerEvents = '';\n            c.style.setProperty('--flip', '0');\n          });\n\n          deck.scrollLeft = 0;\n          updateCounter();\n          toggleButtons();\n          syncHint();\n          layoutTable();\n\n          document.dispatchEvent(new CustomEvent('belline:draw-reset-only'));\n        }\n\n        function resetAll() {\n          resetDrawOnly();\n          state.userName = \"\";\n          nameInput2.value = \"\";\n          deck.classList.add('disabled');\n          syncHint();\n        }\n\n        function removeCardWithFeedback(card) {\n          card.classList.add('selected');\n          card.style.pointerEvents = 'none';\n          card.style.setProperty('--flip', '180');\n\n          setTimeout(() => {\n            card.classList.add('picked');\n            layoutTable();\n          }, 140);\n        }\n\n        function selectCard(e) {\n          if (!state.userName) return;\n          if (state.selectedCards.length >= maxCards) return;\n\n          const card = e.currentTarget;\n          if (!card || card.classList.contains('locked') || card.classList.contains('picked')) return;\n\n          const index = parseInt(card.dataset.index, 10);\n          if (state.selectedCards.includes(index)) return;\n\n          state.selectedCards.push(index);\n\n          updateCounter();\n          toggleButtons();\n          removeCardWithFeedback(card);\n\n          if (state.selectedCards.length < maxCards && isSwipeMode()) {\n            setTimeout(() => {\n              const remaining = deck.querySelector('.tarot-card:not(.picked)');\n              if (remaining && typeof remaining.scrollIntoView === 'function') {\n                remaining.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });\n              }\n            }, 180);\n          }\n        }\n\n        confirmNameBtn.addEventListener('click', (e) => {\n          e.preventDefault();\n          e.stopPropagation();\n\n          const v = (nameInput2.value || \"\").trim();\n          if (!v) {\n            nameInput2.focus();\n            nameInput2.style.outline = \"3px solid rgba(212,175,55,0.75)\";\n            return;\n          }\n\n          nameInput2.style.outline = \"none\";\n          state.userName = v.charAt(0).toUpperCase() + v.slice(1);\n          nameInput2.value = state.userName;\n\n          deck.classList.remove('disabled');\n          resetDrawOnly();\n          syncHint();\n\n          setTimeout(() => {\n            Core.helpers.scrollToEl(cardsTitle, 22);\n          }, 80);\n        });\n\n        nextBtn.addEventListener('click', () => {\n          document.dispatchEvent(new CustomEvent('belline:selection-complete'));\n        });\n\n        document.addEventListener('belline:reset-all', () => {\n          resetAll();\n        });\n\n        window.addEventListener('resize', () => {\n          syncHint();\n          layoutTable();\n        });\n\n        initDeck();\n        updateCounter();\n        toggleButtons();\n        syncHint();\n        deck.classList.add('disabled');\n      }\n\n      if (window.BellineModularCore) {\n        initTirageBlock();\n      } else {\n        document.addEventListener('belline:core-ready', initTirageBlock, { once:true });\n      }\n    })();\n  <\/script>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-793fcb4f elementor-widget elementor-widget-html\" data-id=\"793fcb4f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"belline-gender-block\">\n  <style>\n    #belline-gender-block{\n      --gold:#d4af37;\n      --gold-soft:#f2df9c;\n      --teal:#37d4c6;\n      --white:#f3f7f6;\n      --shadow:0 10px 30px rgba(0,0,0,0.32);\n      font-family:Arial,sans-serif;\n      color:var(--white);\n      line-height:1.6;\n    }\n\n    #belline-gender-block *,\n    #belline-gender-block *::before,\n    #belline-gender-block *::after{box-sizing:border-box;}\n\n    #belline-gender-block .gender-section{\n      display:none;\n      max-width:560px;\n      margin:3rem auto;\n      text-align:center;\n      padding:2rem;\n      background:rgba(255,255,255,0.08);\n      border-radius:20px;\n      backdrop-filter:blur(10px);\n      box-shadow:var(--shadow);\n      border:1px solid rgba(212,175,55,0.14);\n    }\n\n    #belline-gender-block .gender-title{\n      margin:0 0 .5rem;\n      color:var(--gold);\n      font-size:clamp(1.5rem, 3vw, 2rem);\n    }\n\n    #belline-gender-block .gender-lead{\n      margin:0 auto 1.25rem;\n      max-width:420px;\n      opacity:.9;\n    }\n\n    #belline-gender-block .gender-option{\n      display:block;\n      margin:1.1rem 0;\n      padding:1.2rem;\n      background:rgba(255,255,255,0.08);\n      border:2px solid transparent;\n      border-radius:15px;\n      cursor:pointer;\n      transition:all .25s ease;\n      user-select:none;\n      font-size:1rem;\n      font-weight:700;\n      color:var(--white);\n    }\n\n    #belline-gender-block .gender-option:hover,\n    #belline-gender-block .gender-option.selected{\n      border-color:rgba(212,175,55,0.72);\n      background:rgba(212,175,55,0.14);\n    }\n\n    #belline-gender-block .btn-interpret{\n      border:none;\n      border-radius:999px;\n      padding:1rem 2.15rem;\n      font-size:1.04rem;\n      font-weight:800;\n      cursor:pointer;\n      transition:all .28s ease;\n      box-shadow:var(--shadow);\n      display:inline-flex;\n      align-items:center;\n      justify-content:center;\n      gap:.45rem;\n      min-height:50px;\n      line-height:1.15;\n      max-width:100%;\n      white-space:normal;\n      text-align:center;\n      background:linear-gradient(45deg,var(--gold),var(--gold-soft));\n      color:#1a1a1a;\n      margin-top:1.2rem;\n    }\n\n    #belline-gender-block .btn-interpret:hover{transform:translateY(-2px);}\n\n    @media (max-width:520px){\n      #belline-gender-block .gender-section{\n        margin:1.5rem auto;\n        padding:1.4rem;\n      }\n      #belline-gender-block .btn-interpret{\n        width:100%;\n        max-width:100%;\n        display:flex;\n      }\n    }\n  <\/style>\n\n  <div id=\"gender-section\" class=\"gender-section\">\n    <h2 class=\"gender-title\">Pour une interpr\u00e9tation personnalis\u00e9e\u2026<\/h2>\n    <p class=\"gender-lead\">Quelle \u00e9nergie pr\u00e9domine dans ta situation ?<\/p>\n\n    <div class=\"gender-option\" data-gender=\"femme\">\u2728 Je me reconnais dans une \u00e9nergie f\u00e9minine<\/div>\n    <div class=\"gender-option\" data-gender=\"homme\">\u26a1 Je me reconnais dans une \u00e9nergie masculine<\/div>\n\n    <button id=\"interpretBtn\" class=\"btn-interpret\" style=\"display:none;\">Recevoir mon interpr\u00e9tation<\/button>\n  <\/div>\n\n  <script>\n    (function () {\n      function initGenderBlock() {\n        const Core = window.BellineModularCore;\n        if (!Core) return;\n\n        const genderSection = document.getElementById('gender-section');\n        const interpretBtn  = document.getElementById('interpretBtn');\n        if (!genderSection || !interpretBtn) return;\n        if (genderSection.dataset.initDone === '1') return;\n        genderSection.dataset.initDone = '1';\n\n        \/\/ Appara\u00eet quand les cartes sont valid\u00e9es\n        document.addEventListener('belline:selection-complete', () => {\n          genderSection.style.display = 'block';\n          \/\/ Reset choix pr\u00e9c\u00e9dent\n          document.querySelectorAll('#belline-gender-block .gender-option')\n            .forEach(o => o.classList.remove('selected'));\n          Core.state.selectedGender = null;\n          interpretBtn.style.display = 'none';\n\n          setTimeout(() => {\n            Core.helpers.scrollToEl(genderSection, 22);\n          }, 80);\n        });\n\n        \/\/ Se cache si l'utilisateur recommence\n        document.addEventListener('belline:draw-reset-only', () => {\n          genderSection.style.display = 'none';\n          interpretBtn.style.display = 'none';\n          document.querySelectorAll('#belline-gender-block .gender-option')\n            .forEach(o => o.classList.remove('selected'));\n          Core.state.selectedGender = null;\n        });\n\n        \/\/ S\u00e9lection genre\n        document.querySelectorAll('#belline-gender-block .gender-option').forEach(option => {\n          option.addEventListener('click', () => {\n            document.querySelectorAll('#belline-gender-block .gender-option')\n              .forEach(o => o.classList.remove('selected'));\n            option.classList.add('selected');\n            Core.state.selectedGender = option.dataset.gender;\n\n            interpretBtn.style.display = 'inline-flex';\n            setTimeout(() => Core.helpers.scrollToEl(interpretBtn, 22), 80);\n          });\n        });\n\n        \/\/ Lancer l'interpr\u00e9tation\n        interpretBtn.addEventListener('click', async () => {\n          if (!Core.state.selectedGender) return;\n          genderSection.style.display = 'none';\n          await Core.actions.generateInterpretation();\n        });\n      }\n\n      if (window.BellineModularCore) {\n        initGenderBlock();\n      } else {\n        document.addEventListener('belline:core-ready', initGenderBlock, { once: true });\n      }\n    })();\n  <\/script>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-11a1e776 elementor-widget elementor-widget-html\" data-id=\"11a1e776\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"result-section\" style=\"display:none;\">\n  <style>\n    #result-section{\n      --bg-dark:#071a1f;\n      --gold:#d4af37;\n      --gold-soft:#f2df9c;\n      --teal:#37d4c6;\n      --teal-soft:#b8f5ef;\n      --white:#f3f7f6;\n      --shadow:0 10px 30px rgba(0,0,0,0.32);\n      max-width:1040px;\n      margin:3rem auto;\n      padding:2.4rem;\n      background:rgba(255,255,255,0.08);\n      border-radius:24px;\n      text-align:center;\n      box-shadow:var(--shadow);\n      border:1px solid rgba(212,175,55,0.14);\n      color:var(--white);\n      font-family:Arial,sans-serif;\n      line-height:1.6;\n    }\n\n    #result-section *,\n    #result-section *::before,\n    #result-section *::after{box-sizing:border-box;}\n\n    #result-section img{max-width:100%;height:auto;display:block;}\n    #result-section button,\n    #result-section input{font-family:inherit;}\n\n    #result-section .result-shell{\n      display:grid;\n      gap:1.5rem;\n    }\n\n    \/* ===== Spirit Hero (horloge) ===== *\/\n    #result-section .spirit-hero{\n      position:relative;\n      overflow:hidden;\n      display:grid;\n      grid-template-columns:160px minmax(0,1fr);\n      gap:1.35rem;\n      align-items:center;\n      padding:1.5rem;\n      border-radius:22px;\n      background:\n        radial-gradient(520px 180px at 15% 15%, rgba(212,175,55,0.12), transparent 60%),\n        radial-gradient(520px 220px at 85% 85%, rgba(55,212,198,0.12), transparent 60%),\n        linear-gradient(145deg, rgba(255,255,255,0.08), rgba(0,0,0,0.16));\n      border:1px solid rgba(255,255,255,0.12);\n      box-shadow:0 18px 40px rgba(0,0,0,0.30);\n      text-align:left;\n    }\n\n    #result-section .spirit-hero::after{\n      content:\"\";\n      position:absolute;\n      inset:10px;\n      border-radius:16px;\n      border:1px solid rgba(255,255,255,0.08);\n      pointer-events:none;\n    }\n\n    #result-section .spirit-hero__eyebrow{\n      display:inline-flex;\n      align-items:center;\n      gap:.5rem;\n      font-size:.78rem;\n      letter-spacing:.12em;\n      text-transform:uppercase;\n      color:var(--gold-soft);\n      opacity:.92;\n      margin-bottom:.5rem;\n      font-weight:800;\n    }\n\n    #result-section .spirit-hero__eyebrow::before{\n      content:\"\";\n      width:26px;\n      height:1px;\n      background:rgba(242,220,140,0.55);\n    }\n\n    #result-section .spirit-hero__title{\n      margin:0 0 .55rem 0;\n      color:var(--gold);\n      font-size:clamp(1.25rem, 2.5vw, 1.8rem);\n      line-height:1.15;\n    }\n\n    #result-section .spirit-hero__text{\n      margin:0;\n      color:rgba(248,244,230,.92);\n    }\n\n    \/* ===== Spirit Clock ===== *\/\n    #result-section .spirit-clock{\n      position:relative;\n      width:140px;\n      height:140px;\n      margin:0 auto;\n      border-radius:50%;\n      background:\n        radial-gradient(circle at center, rgba(255,255,255,0.16), rgba(255,255,255,0.03) 42%, rgba(0,0,0,0.18) 72%, rgba(0,0,0,0.35) 100%);\n      box-shadow:\n        inset 0 0 22px rgba(255,255,255,0.08),\n        0 0 34px rgba(212,175,55,0.15);\n    }\n\n    #result-section .spirit-clock__ring{\n      position:absolute;\n      inset:0;\n      border-radius:50%;\n      border:1px solid rgba(212,175,55,0.34);\n    }\n\n    #result-section .spirit-clock__ring--1{animation:angesSpin 7s linear infinite;}\n    #result-section .spirit-clock__ring--2{\n      inset:10px;\n      border-color:rgba(55,212,198,0.30);\n      animation:angesSpinReverse 9s linear infinite;\n    }\n    #result-section .spirit-clock__ring--3{\n      inset:24px;\n      border-color:rgba(255,255,255,0.16);\n    }\n\n    #result-section .spirit-clock__center{\n      position:absolute;\n      inset:50%;\n      width:30px;\n      height:30px;\n      margin:-15px 0 0 -15px;\n      display:flex;\n      align-items:center;\n      justify-content:center;\n      border-radius:50%;\n      background:linear-gradient(145deg,var(--gold),var(--gold-soft));\n      color:#35182a;\n      font-size:1rem;\n      font-weight:900;\n      box-shadow:0 0 20px rgba(212,175,55,0.32);\n      z-index:3;\n    }\n\n    #result-section .spirit-clock__hand{\n      position:absolute;\n      left:50%;\n      top:50%;\n      transform-origin:0 50%;\n      height:2px;\n      border-radius:999px;\n      z-index:2;\n    }\n\n    #result-section .spirit-clock__hand--long{\n      width:46px;\n      background:linear-gradient(90deg,var(--gold),transparent);\n      animation:angesTick 2.8s linear infinite;\n    }\n\n    #result-section .spirit-clock__hand--short{\n      width:32px;\n      background:linear-gradient(90deg,var(--teal),transparent);\n      animation:angesTick 6s linear infinite reverse;\n    }\n\n    #result-section .spirit-clock__dot{\n      position:absolute;\n      width:7px;\n      height:7px;\n      border-radius:50%;\n      background:var(--gold-soft);\n      box-shadow:0 0 10px rgba(242,220,140,0.46);\n    }\n\n    #result-section .spirit-clock__dot--1{ top:10px; left:50%; margin-left:-3.5px; }\n    #result-section .spirit-clock__dot--2{ right:14px; top:50%; margin-top:-3.5px; }\n    #result-section .spirit-clock__dot--3{ bottom:10px; left:50%; margin-left:-3.5px; }\n    #result-section .spirit-clock__dot--4{ left:14px; top:50%; margin-top:-3.5px; }\n\n    \/* ===== Cards display ===== *\/\n    #result-section #cards-display{\n      display:flex;\n      justify-content:center;\n      width:100%;\n    }\n\n    #result-section .spread32,\n    #result-section .resultSpread{\n      width:min(760px, 96vw);\n      margin:0 auto;\n      padding:16px;\n      border-radius:18px;\n      background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.22));\n      border:1px solid rgba(255,255,255,0.14);\n      box-shadow:0 18px 44px rgba(0,0,0,0.35);\n      display:flex;\n      flex-direction:column;\n      gap:14px;\n      align-items:center;\n    }\n\n    #result-section .spread32 .row,\n    #result-section .resultSpread .row{\n      width:100%;\n      display:flex;\n      justify-content:center;\n      align-items:center;\n      gap:12px;\n      flex-wrap:nowrap;\n    }\n\n    #result-section .spread32 .card,\n    #result-section .resultSpread .card{\n      width:120px;\n      aspect-ratio:2.5\/4;\n      border-radius:12px;\n      overflow:hidden;\n      border:2px solid rgba(212,175,55,0.55);\n      background:rgba(0,0,0,0.25);\n      box-shadow:0 12px 28px rgba(0,0,0,0.40);\n      flex:0 0 auto;\n    }\n\n    #result-section .spread32 .card img,\n    #result-section .resultSpread .card img{\n      width:100%;\n      height:100%;\n      object-fit:cover;\n      display:block;\n    }\n\n    \/* ===== Interpretation ===== *\/\n    #result-section .interpretation{\n      background:rgba(0,0,0,0.28);\n      padding:2rem;\n      border-radius:18px;\n      line-height:1.8;\n      text-align:left;\n      width:100%;\n      max-width:920px;\n      margin:0 auto;\n      border:1px solid rgba(255,255,255,0.08);\n    }\n\n    #result-section .interpretation p{margin:0 0 .9rem 0; opacity:.97;}\n\n    #result-section .interpretation .punch{\n      padding:.95rem 1rem;\n      border-radius:12px;\n      background:rgba(212,175,55,0.10);\n      border:1px solid rgba(212,175,55,0.18);\n    }\n\n    \/* ===== Consult Portal CTA ===== *\/\n#result-section .consult-portal{\n      position:relative;\n      overflow:hidden;\n      margin-top:1.35rem;\n      padding:1.3rem;\n      border-radius:26px;\n      color:var(--white);\n      background:\n        radial-gradient(680px 240px at 0% 0%, rgba(212,175,55,.18), transparent 58%),\n        radial-gradient(520px 260px at 100% 100%, rgba(123,92,255,.12), transparent 60%),\n        linear-gradient(145deg, rgba(34,21,57,.96), rgba(17,12,34,.98));\n      border:1px solid rgba(255,255,255,.08);\n      box-shadow:0 20px 45px rgba(0,0,0,.35);\n    }\n\n    #result-section .consult-portal::before{\n      content:\"\";\n      position:absolute;\n      inset:12px;\n      border-radius:18px;\n      border:1px solid rgba(255,255,255,.06);\n      pointer-events:none;\n    }\n\n    #result-section .consult-portal > *{position:relative;z-index:1;}\n\n    #result-section .consult-portal__top{\n      display:grid;\n      grid-template-columns:minmax(0,1.35fr) minmax(250px,.9fr);\n      gap:1rem;\n      align-items:start;\n    }\n\n    #result-section .consult-portal__eyebrow{\n      display:inline-flex;\n      align-items:center;\n      gap:.45rem;\n      margin-bottom:.7rem;\n      padding:.36rem .72rem;\n      border-radius:999px;\n      background:rgba(255,255,255,.06);\n      color:var(--gold-soft);\n      font-size:.78rem;\n      font-weight:800;\n      letter-spacing:.08em;\n      text-transform:uppercase;\n      border:1px solid rgba(255,255,255,.08);\n    }\n\n    #result-section .consult-portal__title{\n      margin:0 0 .65rem;\n      font-size:clamp(1.45rem, 2.4vw, 2rem);\n      line-height:1.12;\n      color:var(--white);\n    }\n\n    #result-section .consult-portal__lead{\n      margin:0 0 .85rem;\n      color:rgba(248,244,230,.88);\n      line-height:1.65;\n    }\n\n    #result-section .consult-portal__highlight{\n      color:var(--gold-soft);\n      font-weight:700;\n    }\n\n    #result-section .consult-portal__chips{\n      display:flex;\n      flex-wrap:wrap;\n      gap:.55rem;\n    }\n\n    #result-section .consult-portal__chip{\n      display:inline-flex;\n      align-items:center;\n      gap:.4rem;\n      padding:.45rem .75rem;\n      border-radius:999px;\n      background:rgba(255,255,255,.06);\n      border:1px solid rgba(255,255,255,.08);\n      color:rgba(248,244,230,.92);\n      font-size:.84rem;\n      font-weight:700;\n    }\n\n    #result-section .consult-portal__chip::before{\n      content:\"\u2726\";\n      color:var(--gold-soft);\n      font-size:.78rem;\n    }\n\n    #result-section .consult-portal__method{\n      border-radius:20px;\n      padding:.95rem 1rem;\n      background:linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.035));\n      border:1px solid rgba(255,255,255,.08);\n      backdrop-filter:blur(6px);\n    }\n\n    #result-section .consult-portal__methodLabel{\n      margin:0 0 .38rem;\n      color:var(--gold-soft);\n      font-size:.8rem;\n      font-weight:800;\n      letter-spacing:.03em;\n      text-transform:uppercase;\n    }\n\n    #result-section .consult-portal__methodText{\n      margin:0;\n      color:rgba(248,244,230,.87);\n      font-size:.92rem;\n      line-height:1.5;\n    }\n\n    #result-section .consult-portal__formBox{\n      margin-top:1rem;\n      border-radius:22px;\n      padding:1rem;\n      background:rgba(255,255,255,.05);\n      border:1px solid rgba(255,255,255,.08);\n      backdrop-filter:blur(7px);\n    }\n\n    #result-section .consult-portal__formHeader{\n      display:flex;\n      flex-direction:column;\n      gap:.28rem;\n      margin-bottom:.8rem;\n    }\n\n    #result-section .consult-portal__formTitle{\n      margin:0;\n      color:var(--white);\n      font-size:1rem;\n      font-weight:800;\n    }\n\n    #result-section .consult-portal__formIntro{\n      margin:0;\n      color:rgba(248,244,230,.82);\n      font-size:.9rem;\n      line-height:1.45;\n    }\n\n    #result-section .consult-portal__label{\n      display:block;\n      margin:0 0 .45rem;\n      color:var(--white);\n      font-weight:700;\n      font-size:.9rem;\n    }\n\n    #result-section .consult-portal__fieldRow{\n      display:grid;\n      grid-template-columns:minmax(0,1fr) auto;\n      gap:.7rem;\n      align-items:stretch;\n    }\n\n    #result-section .consult-portal__input{\n      width:100%;\n      min-height:56px;\n      border-radius:16px;\n      border:1px solid rgba(255,255,255,.12);\n      background:rgba(9,8,20,.34);\n      color:var(--white);\n      padding:0 1rem;\n      font-size:1rem;\n      outline:none;\n      box-shadow:inset 0 1px 0 rgba(255,255,255,.03);\n    }\n\n    #result-section .consult-portal__input::placeholder{color:rgba(248,244,230,.42);}\n\n    #result-section .consult-portal__input:focus{\n      border-color:rgba(242,220,140,.58);\n      box-shadow:0 0 0 4px rgba(212,175,55,.12);\n    }\n\n    #result-section .consult-portal__submit{\n      min-width:248px;\n      min-height:56px;\n      border:0;\n      border-radius:16px;\n      padding:0 1.2rem;\n      font-size:.98rem;\n      font-weight:900;\n      color:#241235;\n      cursor:pointer;\n      background:linear-gradient(135deg, #f8ebaf, #d4af37 62%, #bd8f1f);\n      box-shadow:0 16px 34px rgba(212,175,55,.24);\n      transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;\n    }\n\n    #result-section .consult-portal__submit:hover{\n      transform:translateY(-2px);\n      box-shadow:0 20px 42px rgba(212,175,55,.28);\n      filter:saturate(1.03);\n    }\n\n    #result-section .consult-portal__submit:disabled{\n      opacity:.72;\n      cursor:wait;\n      transform:none;\n    }\n\n    #result-section .consult-portal__micro{\n      margin:.68rem 0 0;\n      color:rgba(248,244,230,.72);\n      font-size:.82rem;\n      line-height:1.45;\n    }\n\n    #result-section .consult-portal__error{\n      margin-top:.55rem;\n      color:#ffd3d3;\n      font-size:.84rem;\n      display:none;\n    }\n\n    #result-section .consult-portal__error.is-visible{display:block;}\n\n    \/* ===== Keyframes ===== *\/\n    @keyframes angesSpin{\n      from{transform:rotate(0deg);}\n      to{transform:rotate(360deg);}\n    }\n\n    @keyframes angesSpinReverse{\n      from{transform:rotate(360deg);}\n      to{transform:rotate(0deg);}\n    }\n\n    @keyframes angesTick{\n      from{transform:rotate(0deg);}\n      to{transform:rotate(360deg);}\n    }\n\n    \/* ===== Responsive ===== *\/\n    @media (max-width:900px){\n      #result-section .spread32 .card,\n      #result-section .resultSpread .card{width:108px;}\n\n      #result-section .spirit-hero{\n        grid-template-columns:1fr;\n        text-align:center;\n        justify-items:center;\n      }\n\n      #result-section .consult-portal__top{\n        grid-template-columns:1fr;\n      }\n    }\n\n    @media (max-width:700px){\n      #result-section .spread32 .card,\n      #result-section .resultSpread .card{width:96px;}\n\n      #result-section .consult-portal__fieldRow{\n        grid-template-columns:1fr;\n      }\n\n      #result-section .consult-portal__submit{\n        width:100%;\n        min-width:0;\n      }\n    }\n\n    @media (max-width:520px){\n      #result-section{\n        width:100%;\n        max-width:100%;\n        margin:1.2rem auto 0;\n        padding:1.25rem;\n        border-radius:18px;\n      }\n\n      #result-section .spirit-hero{\n        grid-template-columns:1fr;\n        justify-items:center;\n        text-align:center;\n        gap:1rem;\n        padding:1.2rem;\n      }\n\n      #result-section .spirit-hero__eyebrow{\n        justify-content:center;\n      }\n\n      #result-section .spirit-clock{\n        width:124px;\n        height:124px;\n      }\n\n      #result-section .interpretation{\n        width:100%;\n        max-width:100%;\n        padding:1.45rem 1.1rem;\n        border-radius:18px;\n        line-height:1.85;\n      }\n\n      #result-section #cards-display{\n        display:flex;\n        justify-content:center;\n        width:100%;\n      }\n    }\n  <\/style>\n\n  <div class=\"result-shell\">\n    <div id=\"spiritHero\" class=\"spirit-hero\" style=\"display:none;\">\n      <div class=\"spirit-clock\" aria-hidden=\"true\">\n        <div class=\"spirit-clock__ring spirit-clock__ring--1\"><\/div>\n        <div class=\"spirit-clock__ring spirit-clock__ring--2\"><\/div>\n        <div class=\"spirit-clock__ring spirit-clock__ring--3\"><\/div>\n        <div class=\"spirit-clock__hand spirit-clock__hand--long\"><\/div>\n        <div class=\"spirit-clock__hand spirit-clock__hand--short\"><\/div>\n        <div class=\"spirit-clock__center\">\u2726<\/div>\n        <div class=\"spirit-clock__dot spirit-clock__dot--1\"><\/div>\n        <div class=\"spirit-clock__dot spirit-clock__dot--2\"><\/div>\n        <div class=\"spirit-clock__dot spirit-clock__dot--3\"><\/div>\n        <div class=\"spirit-clock__dot spirit-clock__dot--4\"><\/div>\n      <\/div>\n\n      <div class=\"spirit-hero__copy\">\n        <div class=\"spirit-hero__eyebrow\">Lecture en pr\u00e9paration<\/div>\n        <h3 id=\"resultTitle\" class=\"spirit-hero__title\">Je pr\u00e9pare ton tirage\u2026<\/h3>\n        <p class=\"spirit-hero__text\">Je rassemble le message des anges, la guidance concr\u00e8te et la zone d'attention la plus utile pour toi maintenant.<\/p>\n      <\/div>\n    <\/div>\n\n    <div id=\"cards-display\"><\/div>\n\n    <div id=\"interpretation\" class=\"interpretation\"><\/div>\n  <\/div>\n\n<\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-57354077 elementor-widget elementor-widget-html\" data-id=\"57354077\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"result-section\" style=\"display:none;\">\n  <style>\n    #result-section{\n      --bg-dark:#071a1f;\n      --gold:#d4af37;\n      --gold-soft:#f2df9c;\n      --teal:#37d4c6;\n      --teal-soft:#b8f5ef;\n      --white:#f3f7f6;\n      --shadow:0 10px 30px rgba(0,0,0,0.32);\n      max-width:1040px;\n      margin:3rem auto;\n      padding:2.4rem;\n      background:rgba(255,255,255,0.08);\n      border-radius:24px;\n      text-align:center;\n      box-shadow:var(--shadow);\n      border:1px solid rgba(212,175,55,0.14);\n      color:var(--white);\n      font-family:Arial,sans-serif;\n      line-height:1.6;\n    }\n\n    #result-section *,\n    #result-section *::before,\n    #result-section *::after{box-sizing:border-box;}\n\n    #result-section img{max-width:100%;height:auto;display:block;}\n    #result-section button,\n    #result-section input{font-family:inherit;}\n\n    #result-section .result-shell{\n      display:grid;\n      gap:1.5rem;\n    }\n\n    \/* ===== Spirit Hero (horloge) ===== *\/\n    #result-section .spirit-hero{\n      position:relative;\n      overflow:hidden;\n      display:grid;\n      grid-template-columns:160px minmax(0,1fr);\n      gap:1.35rem;\n      align-items:center;\n      padding:1.5rem;\n      border-radius:22px;\n      background:\n        radial-gradient(520px 180px at 15% 15%, rgba(212,175,55,0.12), transparent 60%),\n        radial-gradient(520px 220px at 85% 85%, rgba(55,212,198,0.12), transparent 60%),\n        linear-gradient(145deg, rgba(255,255,255,0.08), rgba(0,0,0,0.16));\n      border:1px solid rgba(255,255,255,0.12);\n      box-shadow:0 18px 40px rgba(0,0,0,0.30);\n      text-align:left;\n    }\n\n    #result-section .spirit-hero::after{\n      content:\"\";\n      position:absolute;\n      inset:10px;\n      border-radius:16px;\n      border:1px solid rgba(255,255,255,0.08);\n      pointer-events:none;\n    }\n\n    #result-section .spirit-hero__eyebrow{\n      display:inline-flex;\n      align-items:center;\n      gap:.5rem;\n      font-size:.78rem;\n      letter-spacing:.12em;\n      text-transform:uppercase;\n      color:var(--gold-soft);\n      opacity:.92;\n      margin-bottom:.5rem;\n      font-weight:800;\n    }\n\n    #result-section .spirit-hero__eyebrow::before{\n      content:\"\";\n      width:26px;\n      height:1px;\n      background:rgba(242,220,140,0.55);\n    }\n\n    #result-section .spirit-hero__title{\n      margin:0 0 .55rem 0;\n      color:var(--gold);\n      font-size:clamp(1.25rem, 2.5vw, 1.8rem);\n      line-height:1.15;\n    }\n\n    #result-section .spirit-hero__text{\n      margin:0;\n      color:rgba(248,244,230,.92);\n    }\n\n    \/* ===== Spirit Clock ===== *\/\n    #result-section .spirit-clock{\n      position:relative;\n      width:140px;\n      height:140px;\n      margin:0 auto;\n      border-radius:50%;\n      background:\n        radial-gradient(circle at center, rgba(255,255,255,0.16), rgba(255,255,255,0.03) 42%, rgba(0,0,0,0.18) 72%, rgba(0,0,0,0.35) 100%);\n      box-shadow:\n        inset 0 0 22px rgba(255,255,255,0.08),\n        0 0 34px rgba(212,175,55,0.15);\n    }\n\n    #result-section .spirit-clock__ring{\n      position:absolute;\n      inset:0;\n      border-radius:50%;\n      border:1px solid rgba(212,175,55,0.34);\n    }\n\n    #result-section .spirit-clock__ring--1{animation:angesSpin 7s linear infinite;}\n    #result-section .spirit-clock__ring--2{\n      inset:10px;\n      border-color:rgba(55,212,198,0.30);\n      animation:angesSpinReverse 9s linear infinite;\n    }\n    #result-section .spirit-clock__ring--3{\n      inset:24px;\n      border-color:rgba(255,255,255,0.16);\n    }\n\n    #result-section .spirit-clock__center{\n      position:absolute;\n      inset:50%;\n      width:30px;\n      height:30px;\n      margin:-15px 0 0 -15px;\n      display:flex;\n      align-items:center;\n      justify-content:center;\n      border-radius:50%;\n      background:linear-gradient(145deg,var(--gold),var(--gold-soft));\n      color:#35182a;\n      font-size:1rem;\n      font-weight:900;\n      box-shadow:0 0 20px rgba(212,175,55,0.32);\n      z-index:3;\n    }\n\n    #result-section .spirit-clock__hand{\n      position:absolute;\n      left:50%;\n      top:50%;\n      transform-origin:0 50%;\n      height:2px;\n      border-radius:999px;\n      z-index:2;\n    }\n\n    #result-section .spirit-clock__hand--long{\n      width:46px;\n      background:linear-gradient(90deg,var(--gold),transparent);\n      animation:angesTick 2.8s linear infinite;\n    }\n\n    #result-section .spirit-clock__hand--short{\n      width:32px;\n      background:linear-gradient(90deg,var(--teal),transparent);\n      animation:angesTick 6s linear infinite reverse;\n    }\n\n    #result-section .spirit-clock__dot{\n      position:absolute;\n      width:7px;\n      height:7px;\n      border-radius:50%;\n      background:var(--gold-soft);\n      box-shadow:0 0 10px rgba(242,220,140,0.46);\n    }\n\n    #result-section .spirit-clock__dot--1{ top:10px; left:50%; margin-left:-3.5px; }\n    #result-section .spirit-clock__dot--2{ right:14px; top:50%; margin-top:-3.5px; }\n    #result-section .spirit-clock__dot--3{ bottom:10px; left:50%; margin-left:-3.5px; }\n    #result-section .spirit-clock__dot--4{ left:14px; top:50%; margin-top:-3.5px; }\n\n    \/* ===== Cards display ===== *\/\n    #result-section #cards-display{\n      display:flex;\n      justify-content:center;\n      width:100%;\n    }\n\n    #result-section .spread32,\n    #result-section .resultSpread{\n      width:min(760px, 96vw);\n      margin:0 auto;\n      padding:16px;\n      border-radius:18px;\n      background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.22));\n      border:1px solid rgba(255,255,255,0.14);\n      box-shadow:0 18px 44px rgba(0,0,0,0.35);\n      display:flex;\n      flex-direction:column;\n      gap:14px;\n      align-items:center;\n    }\n\n    #result-section .spread32 .row,\n    #result-section .resultSpread .row{\n      width:100%;\n      display:flex;\n      justify-content:center;\n      align-items:center;\n      gap:12px;\n      flex-wrap:nowrap;\n    }\n\n    #result-section .spread32 .card,\n    #result-section .resultSpread .card{\n      width:120px;\n      aspect-ratio:2.5\/4;\n      border-radius:12px;\n      overflow:hidden;\n      border:2px solid rgba(212,175,55,0.55);\n      background:rgba(0,0,0,0.25);\n      box-shadow:0 12px 28px rgba(0,0,0,0.40);\n      flex:0 0 auto;\n    }\n\n    #result-section .spread32 .card img,\n    #result-section .resultSpread .card img{\n      width:100%;\n      height:100%;\n      object-fit:cover;\n      display:block;\n    }\n\n    \/* ===== Interpretation ===== *\/\n    #result-section .interpretation{\n      background:rgba(0,0,0,0.28);\n      padding:2rem;\n      border-radius:18px;\n      line-height:1.8;\n      text-align:left;\n      width:100%;\n      max-width:920px;\n      margin:0 auto;\n      border:1px solid rgba(255,255,255,0.08);\n    }\n\n    #result-section .interpretation p{margin:0 0 .9rem 0; opacity:.97;}\n\n    #result-section .interpretation .punch{\n      padding:.95rem 1rem;\n      border-radius:12px;\n      background:rgba(212,175,55,0.10);\n      border:1px solid rgba(212,175,55,0.18);\n    }\n\n    \/* ===== Consult Portal CTA ===== *\/\n#result-section .consult-portal{\n      position:relative;\n      overflow:hidden;\n      margin-top:1.35rem;\n      padding:1.3rem;\n      border-radius:26px;\n      color:var(--white);\n      background:\n        radial-gradient(680px 240px at 0% 0%, rgba(212,175,55,.18), transparent 58%),\n        radial-gradient(520px 260px at 100% 100%, rgba(123,92,255,.12), transparent 60%),\n        linear-gradient(145deg, rgba(34,21,57,.96), rgba(17,12,34,.98));\n      border:1px solid rgba(255,255,255,.08);\n      box-shadow:0 20px 45px rgba(0,0,0,.35);\n    }\n\n    #result-section .consult-portal::before{\n      content:\"\";\n      position:absolute;\n      inset:12px;\n      border-radius:18px;\n      border:1px solid rgba(255,255,255,.06);\n      pointer-events:none;\n    }\n\n    #result-section .consult-portal > *{position:relative;z-index:1;}\n\n    #result-section .consult-portal__top{\n      display:grid;\n      grid-template-columns:minmax(0,1.35fr) minmax(250px,.9fr);\n      gap:1rem;\n      align-items:start;\n    }\n\n    #result-section .consult-portal__eyebrow{\n      display:inline-flex;\n      align-items:center;\n      gap:.45rem;\n      margin-bottom:.7rem;\n      padding:.36rem .72rem;\n      border-radius:999px;\n      background:rgba(255,255,255,.06);\n      color:var(--gold-soft);\n      font-size:.78rem;\n      font-weight:800;\n      letter-spacing:.08em;\n      text-transform:uppercase;\n      border:1px solid rgba(255,255,255,.08);\n    }\n\n    #result-section .consult-portal__title{\n      margin:0 0 .65rem;\n      font-size:clamp(1.45rem, 2.4vw, 2rem);\n      line-height:1.12;\n      color:var(--white);\n    }\n\n    #result-section .consult-portal__lead{\n      margin:0 0 .85rem;\n      color:rgba(248,244,230,.88);\n      line-height:1.65;\n    }\n\n    #result-section .consult-portal__highlight{\n      color:var(--gold-soft);\n      font-weight:700;\n    }\n\n    #result-section .consult-portal__chips{\n      display:flex;\n      flex-wrap:wrap;\n      gap:.55rem;\n    }\n\n    #result-section .consult-portal__chip{\n      display:inline-flex;\n      align-items:center;\n      gap:.4rem;\n      padding:.45rem .75rem;\n      border-radius:999px;\n      background:rgba(255,255,255,.06);\n      border:1px solid rgba(255,255,255,.08);\n      color:rgba(248,244,230,.92);\n      font-size:.84rem;\n      font-weight:700;\n    }\n\n    #result-section .consult-portal__chip::before{\n      content:\"\u2726\";\n      color:var(--gold-soft);\n      font-size:.78rem;\n    }\n\n    #result-section .consult-portal__method{\n      border-radius:20px;\n      padding:.95rem 1rem;\n      background:linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.035));\n      border:1px solid rgba(255,255,255,.08);\n      backdrop-filter:blur(6px);\n    }\n\n    #result-section .consult-portal__methodLabel{\n      margin:0 0 .38rem;\n      color:var(--gold-soft);\n      font-size:.8rem;\n      font-weight:800;\n      letter-spacing:.03em;\n      text-transform:uppercase;\n    }\n\n    #result-section .consult-portal__methodText{\n      margin:0;\n      color:rgba(248,244,230,.87);\n      font-size:.92rem;\n      line-height:1.5;\n    }\n\n    #result-section .consult-portal__formBox{\n      margin-top:1rem;\n      border-radius:22px;\n      padding:1rem;\n      background:rgba(255,255,255,.05);\n      border:1px solid rgba(255,255,255,.08);\n      backdrop-filter:blur(7px);\n    }\n\n    #result-section .consult-portal__formHeader{\n      display:flex;\n      flex-direction:column;\n      gap:.28rem;\n      margin-bottom:.8rem;\n    }\n\n    #result-section .consult-portal__formTitle{\n      margin:0;\n      color:var(--white);\n      font-size:1rem;\n      font-weight:800;\n    }\n\n    #result-section .consult-portal__formIntro{\n      margin:0;\n      color:rgba(248,244,230,.82);\n      font-size:.9rem;\n      line-height:1.45;\n    }\n\n    #result-section .consult-portal__label{\n      display:block;\n      margin:0 0 .45rem;\n      color:var(--white);\n      font-weight:700;\n      font-size:.9rem;\n    }\n\n    #result-section .consult-portal__fieldRow{\n      display:grid;\n      grid-template-columns:minmax(0,1fr) auto;\n      gap:.7rem;\n      align-items:stretch;\n    }\n\n    #result-section .consult-portal__input{\n      width:100%;\n      min-height:56px;\n      border-radius:16px;\n      border:1px solid rgba(255,255,255,.12);\n      background:rgba(9,8,20,.34);\n      color:var(--white);\n      padding:0 1rem;\n      font-size:1rem;\n      outline:none;\n      box-shadow:inset 0 1px 0 rgba(255,255,255,.03);\n    }\n\n    #result-section .consult-portal__input::placeholder{color:rgba(248,244,230,.42);}\n\n    #result-section .consult-portal__input:focus{\n      border-color:rgba(242,220,140,.58);\n      box-shadow:0 0 0 4px rgba(212,175,55,.12);\n    }\n\n    #result-section .consult-portal__submit{\n      min-width:248px;\n      min-height:56px;\n      border:0;\n      border-radius:16px;\n      padding:0 1.2rem;\n      font-size:.98rem;\n      font-weight:900;\n      color:#241235;\n      cursor:pointer;\n      background:linear-gradient(135deg, #f8ebaf, #d4af37 62%, #bd8f1f);\n      box-shadow:0 16px 34px rgba(212,175,55,.24);\n      transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;\n    }\n\n    #result-section .consult-portal__submit:hover{\n      transform:translateY(-2px);\n      box-shadow:0 20px 42px rgba(212,175,55,.28);\n      filter:saturate(1.03);\n    }\n\n    #result-section .consult-portal__submit:disabled{\n      opacity:.72;\n      cursor:wait;\n      transform:none;\n    }\n\n    #result-section .consult-portal__micro{\n      margin:.68rem 0 0;\n      color:rgba(248,244,230,.72);\n      font-size:.82rem;\n      line-height:1.45;\n    }\n\n    #result-section .consult-portal__error{\n      margin-top:.55rem;\n      color:#ffd3d3;\n      font-size:.84rem;\n      display:none;\n    }\n\n    #result-section .consult-portal__error.is-visible{display:block;}\n\n    \/* ===== Keyframes ===== *\/\n    @keyframes angesSpin{\n      from{transform:rotate(0deg);}\n      to{transform:rotate(360deg);}\n    }\n\n    @keyframes angesSpinReverse{\n      from{transform:rotate(360deg);}\n      to{transform:rotate(0deg);}\n    }\n\n    @keyframes angesTick{\n      from{transform:rotate(0deg);}\n      to{transform:rotate(360deg);}\n    }\n\n    \/* ===== Responsive ===== *\/\n    @media (max-width:900px){\n      #result-section .spread32 .card,\n      #result-section .resultSpread .card{width:108px;}\n\n      #result-section .spirit-hero{\n        grid-template-columns:1fr;\n        text-align:center;\n        justify-items:center;\n      }\n\n      #result-section .consult-portal__top{\n        grid-template-columns:1fr;\n      }\n    }\n\n    @media (max-width:700px){\n      #result-section .spread32 .card,\n      #result-section .resultSpread .card{width:96px;}\n\n      #result-section .consult-portal__fieldRow{\n        grid-template-columns:1fr;\n      }\n\n      #result-section .consult-portal__submit{\n        width:100%;\n        min-width:0;\n      }\n    }\n\n    @media (max-width:520px){\n      #result-section{\n        width:100%;\n        max-width:100%;\n        margin:1.2rem auto 0;\n        padding:1.25rem;\n        border-radius:18px;\n      }\n\n      #result-section .spirit-hero{\n        grid-template-columns:1fr;\n        justify-items:center;\n        text-align:center;\n        gap:1rem;\n        padding:1.2rem;\n      }\n\n      #result-section .spirit-hero__eyebrow{\n        justify-content:center;\n      }\n\n      #result-section .spirit-clock{\n        width:124px;\n        height:124px;\n      }\n\n      #result-section .interpretation{\n        width:100%;\n        max-width:100%;\n        padding:1.45rem 1.1rem;\n        border-radius:18px;\n        line-height:1.85;\n      }\n\n      #result-section #cards-display{\n        display:flex;\n        justify-content:center;\n        width:100%;\n      }\n    }\n  <\/style>\n\n  <div class=\"result-shell\">\n    <div id=\"spiritHero\" class=\"spirit-hero\" style=\"display:none;\">\n      <div class=\"spirit-clock\" aria-hidden=\"true\">\n        <div class=\"spirit-clock__ring spirit-clock__ring--1\"><\/div>\n        <div class=\"spirit-clock__ring spirit-clock__ring--2\"><\/div>\n        <div class=\"spirit-clock__ring spirit-clock__ring--3\"><\/div>\n        <div class=\"spirit-clock__hand spirit-clock__hand--long\"><\/div>\n        <div class=\"spirit-clock__hand spirit-clock__hand--short\"><\/div>\n        <div class=\"spirit-clock__center\">\u2726<\/div>\n        <div class=\"spirit-clock__dot spirit-clock__dot--1\"><\/div>\n        <div class=\"spirit-clock__dot spirit-clock__dot--2\"><\/div>\n        <div class=\"spirit-clock__dot spirit-clock__dot--3\"><\/div>\n        <div class=\"spirit-clock__dot spirit-clock__dot--4\"><\/div>\n      <\/div>\n\n      <div class=\"spirit-hero__copy\">\n        <div class=\"spirit-hero__eyebrow\">Lecture en pr\u00e9paration<\/div>\n        <h3 id=\"resultTitle\" class=\"spirit-hero__title\">Je pr\u00e9pare ton tirage\u2026<\/h3>\n        <p class=\"spirit-hero__text\">Je rassemble le message des anges, la guidance concr\u00e8te et la zone d'attention la plus utile pour toi maintenant.<\/p>\n      <\/div>\n    <\/div>\n\n    <div id=\"cards-display\"><\/div>\n\n    <div id=\"interpretation\" class=\"interpretation\"><\/div>\n  <\/div>\n\n  <script>\n    (function () {\n      function initResultBlock() {\n        const Core = window.BellineModularCore;\n        if (!Core) return;\n\n        const resultSection  = document.getElementById('result-section');\n        const spiritHero     = document.getElementById('spiritHero');\n        const cardsDisplay   = document.getElementById('cards-display');\n        const interpretationEl = document.getElementById('interpretation');\n\n        if (!resultSection || !cardsDisplay || !interpretationEl) return;\n        if (resultSection.dataset.initDone === '1') return;\n        resultSection.dataset.initDone = '1';\n\n        const esc = Core.helpers.esc;\n\n        function buildConsultationCTA(name) {\n          const safeName = esc(name || '');\n          const title = safeName\n            ? `${safeName}, ouvre maintenant la partie la plus pr\u00e9cise de ton message ang\u00e9lique.`\n            : `Ouvre maintenant la partie la plus pr\u00e9cise de ton message ang\u00e9lique.`;\n\n          return `\n            <section class=\"consult-portal\" aria-label=\"Ouverture de la lecture priv\u00e9e\">\n              <div class=\"consult-portal__top\">\n                <div class=\"consult-portal__content\">\n                  <div class=\"consult-portal__eyebrow\">\u2726 \u00c9tape 2 \u00b7 Lecture priv\u00e9e<\/div>\n                  <h3 class=\"consult-portal__title\">${title}<\/h3>\n                  <p class=\"consult-portal__lead\">Tu as re\u00e7u un premier message des anges. La suite te donne une <span class=\"consult-portal__highlight\">guidance plus fine et plus personnelle<\/span>, avec les actions concr\u00e8tes adapt\u00e9es \u00e0 ta situation.<\/p>\n                  <div class=\"consult-portal__chips\">\n                    <span class=\"consult-portal__chip\">Message approfondi<\/span>\n                    <span class=\"consult-portal__chip\">Actions concr\u00e8tes<\/span>\n                    <span class=\"consult-portal__chip\">Acc\u00e8s imm\u00e9diat<\/span>\n                  <\/div>\n                <\/div>\n                <div class=\"consult-portal__method\">\n                  <div class=\"consult-portal__methodLabel\">Lecture pr\u00e9par\u00e9e \u00e0 partir de tes 5 cartes<\/div>\n                  <p class=\"consult-portal__methodText\">Une guidance plus cibl\u00e9e, d\u00e9j\u00e0 align\u00e9e sur ton tirage pour aller plus loin sans repartir de z\u00e9ro.<\/p>\n                <\/div>\n              <\/div>\n\n              <div class=\"consult-portal__formBox\">\n                <div class=\"consult-portal__formHeader\">\n                  <h4 class=\"consult-portal__formTitle\">Entre ton email pour ouvrir la suite<\/h4>\n                  <p class=\"consult-portal__formIntro\">Tu acc\u00e8des imm\u00e9diatement \u00e0 la lecture approfondie avec ton tirage d\u00e9j\u00e0 pr\u00e9par\u00e9.<\/p>\n                <\/div>\n                <form class=\"consult-portal__form\" id=\"consultationLeadForm\" novalidate>\n                  <label class=\"consult-portal__label\" for=\"consultation-email-input\">Ton email<\/label>\n                  <div class=\"consult-portal__fieldRow\">\n                    <input\n                      type=\"email\"\n                      id=\"consultation-email-input\"\n                      class=\"consult-portal__input\"\n                      placeholder=\"exemple@email.com\"\n                      autocomplete=\"email\"\n                      inputmode=\"email\"\n                      required\n                    >\n                    <button type=\"submit\" class=\"consult-portal__submit\" id=\"consultationLeadBtn\">\n                      Recevoir ma lecture priv\u00e9e\n                    <\/button>\n                  <\/div>\n                  <div class=\"consult-portal__error\" id=\"consultationLeadError\">Entre un email valide pour continuer.<\/div>\n                  <p class=\"consult-portal__micro\">Confidentiel \u2022 pas de spam \u2022 acc\u00e8s imm\u00e9diat<\/p>\n                <\/form>\n              <\/div>\n            <\/section>\n          `;\n        }\n\n        function showCards() {\n          const sel = Core.state.selectedCards;\n          const isMobile = Core.helpers.isMobile();\n          cardsDisplay.innerHTML = isMobile\n            ? Core.helpers.buildMobileResultSpread231(sel)\n            : Core.helpers.buildCross5Html(sel);\n        }\n\n        \/\/ \u00c9coute : interpr\u00e9tation pr\u00eate\n        document.addEventListener('belline:interpretation-ready', (e) => {\n          const ai   = e.detail?.ai || '';\n          const name = Core.state.userName || '';\n\n          showCards();\n          if (spiritHero) spiritHero.style.display = 'none';\n          interpretationEl.innerHTML = `\n            <h3 style=\"color:var(--gold); margin:0 0 .8rem 0;\">Message des anges pour ${esc(name)}<\/h3>\n            ${Core.helpers.textToHtml(ai)}\n            ${buildConsultationCTA(name)}\n          `;\n          Core.helpers.scrollToEl(resultSection, 22);\n        });\n\n        \/\/ \u00c9coute : erreur\n        document.addEventListener('belline:interpretation-error', (e) => {\n          const msg = e.detail?.message || 'Erreur inconnue';\n\n          showCards();\n          if (spiritHero) spiritHero.style.display = 'none';\n          interpretationEl.innerHTML = `\n            <div class=\"punch\" style=\"margin-bottom:1rem;\">\n              <div style=\"font-weight:800; color:var(--gold); margin-bottom:.45rem;\">Erreur de connexion<\/div>\n              <p style=\"margin-bottom:.55rem;\">L'interpr\u00e9tation n'a pas pu \u00eatre g\u00e9n\u00e9r\u00e9e.<\/p>\n              <p style=\"margin-bottom:0;\"><strong>D\u00e9tail :<\/strong> ${esc(msg)}<\/p>\n            <\/div>\n            ${buildConsultationCTA(Core.state.userName)}\n          `;\n          Core.helpers.scrollToEl(resultSection, 22);\n        });\n\n        \/\/ \u00c9coute : reset\n        document.addEventListener('belline:draw-reset-only', () => {\n          resultSection.style.display = 'none';\n          cardsDisplay.innerHTML = '';\n          interpretationEl.innerHTML = '';\n          if (spiritHero) spiritHero.style.display = 'none';\n        });\n\n        \/\/ Soumission email\n        document.addEventListener('submit', async (e) => {\n          const form = e.target.closest('#consultationLeadForm');\n          if (!form) return;\n          e.preventDefault();\n\n          const emailInput = form.querySelector('#consultation-email-input');\n          const btn        = form.querySelector('#consultationLeadBtn');\n          const error      = form.querySelector('#consultationLeadError');\n          const email      = (emailInput?.value || '').trim();\n\n          if (!email || !\/^\\S+@\\S+\\.\\S+$\/.test(email)) {\n            if (error) error.classList.add('is-visible');\n            if (emailInput) emailInput.focus();\n            return;\n          }\n          if (error) error.classList.remove('is-visible');\n\n          const originalLabel = btn.textContent;\n          btn.disabled = true;\n          btn.textContent = 'Acc\u00e8s \u00e0 ta lecture...';\n\n          try {\n            const restRoot = document.querySelector('link[rel=\"https:\/\/api.w.org\/\"]')?.href\n              || (window.location.origin + '\/wp-json\/');\n            const endpoint = restRoot.replace(\/\\\/?$\/, '\/') + 'belline\/v1\/newsletter';\n\n            await fetch(endpoint, {\n              method: 'POST',\n              headers: { 'Content-Type': 'application\/json' },\n              body: JSON.stringify({\n                email,\n                page:   window.location.href,\n                name:   Core.state.userName   || '',\n                gender: Core.state.selectedGender || '',\n                theme:  'anges',\n                cards:  Core.state.selectedCards.map(i => Core.anges[i]?.name).filter(Boolean)\n              })\n            }).catch(err => console.log('Newsletter error:', err));\n\n            fetch(\"https:\/\/hook.eu2.make.com\/f9ejb9phbzitbxrv4avr0v961wsyrqyb\", {\n              method: \"POST\",\n              headers: { \"Content-Type\": \"application\/json\" },\n              body: JSON.stringify({\n                email: email,\n                nom: Core.state.userName || \"\",\n                genre: Core.state.selectedGender || \"\",\n                theme: \"anges\",\n                cartes: Core.state.selectedCards.map(i => Core.anges[i]?.name).filter(Boolean).join(\" | \"),\n                page: window.location.href\n              })\n            }).catch(e => console.log(\"Erreur Make:\", e));\n\n            window.location.href = 'https:\/\/tirage-oracle.com\/consultation\/';\n          } finally {\n            btn.disabled = false;\n            btn.textContent = originalLabel;\n          }\n        });\n      }\n\n      if (window.BellineModularCore) {\n        initResultBlock();\n      } else {\n        document.addEventListener('belline:core-ready', initResultBlock, { once: true });\n      }\n    })();\n  <\/script>\n\n<\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5b052fd6 elementor-widget elementor-widget-html\" data-id=\"5b052fd6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"belline-core-block\" style=\"display:none;\"><\/div>\n\n<script>\n  (function () {\n    if (window.BellineModularCore) return;\n\n    const Core = {\n      PROXY_URL: \"\/openrouter-proxy.php\",\n      ANGES_BASE: \"https:\/\/tirage-oracle.com\/wp-content\/uploads\/2026\/03\/\",\n      maxCards: 5,\n      state: {\n        selectedCards: [],\n        selectedGender: null,\n        userName: \"\"\n      }\n    };\n\n    Core.anges = Array.from({ length: 44 }, (_, i) => {\n      const n = i + 1;\n      return {\n        n,\n        name: `Carte ${n}`,\n        subtitle: \"Message ang\u00e9lique\",\n        img: `${Core.ANGES_BASE}${n}-scaled.png`\n      };\n    });\n\n    Core.helpers = {\n      esc(str) {\n        return String(str)\n          .replaceAll(\"&\",\"&amp;\")\n          .replaceAll(\"<\",\"&lt;\")\n          .replaceAll(\">\",\"&gt;\")\n          .replaceAll('\"',\"&quot;\")\n          .replaceAll(\"'\",\"&#039;\");\n      },\n\n      scrollToEl(el, offsetPx = 18){\n        if(!el) return;\n        const rect = el.getBoundingClientRect();\n        const y = rect.top + window.pageYOffset - offsetPx;\n        window.scrollTo({ top: y, behavior: 'smooth' });\n      },\n\n      isMobile(){\n        return window.matchMedia && window.matchMedia(\"(max-width: 520px)\").matches;\n      },\n\n      buildPromptAngesGeneralFree({ name, gender, question, cards }) {\n        const genre = gender === \"f\" ? \"femme\" : \"homme\";\n        const system = `\nTu es un(e) praticien(ne) spirituel(le) sp\u00e9cialis\u00e9(e) dans l\u2019Oracle des Anges.\nTu proposes une guidance douce, concr\u00e8te, structur\u00e9e, sans sensationnalisme.\n\nSTYLE STRICT :\n- Fran\u00e7ais uniquement.\n- Tutoiement strict : jamais \"vous\", jamais \"votre\".\n- Ton calme, rassurant, utile.\n- Pas de langage marketing.\n- Pas de dramatisation.\n- Pas de promesses magiques.\n- Parle en tendances, dynamiques, ressentis, jamais en certitudes.\n- Pas de dates invent\u00e9es.\n- Pas de termes techniques.\n\nR\u00c8GLE MAJEURE :\n- Ne mentionne JAMAIS le nom des cartes.\n- N\u2019explique JAMAIS la m\u00e9canique du tirage.\n- Utilise uniquement le pr\u00e9nom de la personne.\n\nOBJECTIF :\nDonner un MESSAGE des anges + une GUIDANCE concr\u00e8te.\n\nFORMAT :\nA) MESSAGE DES ANGES (8 \u00e0 12 lignes)\nB) GUIDANCE CONCR\u00c8TE (48\u201372h) (3 \u00e0 5 actions simples)\nC) ATTENTION \/ PI\u00c8GE \u00c0 \u00c9VITER (2 \u00e0 4 lignes)\nD) QUESTION POUR ALLER PLUS LOIN (1 question)\n`;\n        const user = `\nPr\u00e9nom : ${name}\nGenre : ${genre}\nContexte (facultatif) : ${question ? question : \"aucun contexte, guidance g\u00e9n\u00e9rale\"}\n\nCartes tir\u00e9es (\u00e0 analyser en silence, sans les citer dans la r\u00e9ponse) :\n${cards.map((c) => `- ${c}`).join(\"\\n\")}\n`;\n        return system + \"\\n\\n\" + user;\n      },\n\n      async callOpenRouterViaProxy(prompt, model = \"openrouter\/auto\"){\n        const res = await fetch(Core.PROXY_URL, {\n          method: \"POST\",\n          headers: { \"Content-Type\": \"application\/json\" },\n          body: JSON.stringify({ model, prompt })\n        });\n        const text = await res.text();\n        let data = null;\n        try { data = JSON.parse(text); } catch(_) {}\n\n        if(!res.ok){\n          const msg =\n            (data && (data.error?.message || data.error)) ? (data.error?.message || data.error) :\n            (text ? text : (\"HTTP \" + res.status));\n          throw new Error(`Proxy HTTP ${res.status} \u2014 ${msg}`);\n        }\n\n        return String(\n          data?.choices?.[0]?.message?.content ||\n          data?.choices?.[0]?.text ||\n          \"\"\n        );\n      },\n\n      textToHtml(text){\n        const raw = String(text || \"\").trim();\n        if(!raw) return `<p>${Core.helpers.esc(\"Je n'ai pas re\u00e7u de contenu.\")}<\/p>`;\n        const blocks = raw.includes(\"\\n\\n\") ? raw.split(\/\\n{2,}\/) : raw.split(\/\\n+\/);\n        const clean = blocks.map(b => b.trim()).filter(Boolean).slice(0, 250);\n        return clean.map(b => `<p>${Core.helpers.esc(b)}<\/p>`).join(\"\");\n      },\n\n      buildCross5Html(selIdx){\n        const a = selIdx[0], b = selIdx[1], c = selIdx[2], d = selIdx[3], e = selIdx[4];\n        return `\n          <div class=\"spread32\" aria-label=\"Tes 5 cartes\">\n            <div class=\"row\">\n              <div class=\"card\"><img decoding=\"async\" loading=\"lazy\" src=\"${Core.anges[a].img}\" alt=\"${Core.helpers.esc(Core.anges[a].name)}\"><\/div>\n              <div class=\"card\"><img decoding=\"async\" loading=\"lazy\" src=\"${Core.anges[b].img}\" alt=\"${Core.helpers.esc(Core.anges[b].name)}\"><\/div>\n              <div class=\"card\"><img decoding=\"async\" loading=\"lazy\" src=\"${Core.anges[c].img}\" alt=\"${Core.helpers.esc(Core.anges[c].name)}\"><\/div>\n            <\/div>\n            <div class=\"row\">\n              <div class=\"card\"><img decoding=\"async\" loading=\"lazy\" src=\"${Core.anges[d].img}\" alt=\"${Core.helpers.esc(Core.anges[d].name)}\"><\/div>\n              <div class=\"card\"><img decoding=\"async\" loading=\"lazy\" src=\"${Core.anges[e].img}\" alt=\"${Core.helpers.esc(Core.anges[e].name)}\"><\/div>\n            <\/div>\n          <\/div>\n        `;\n      },\n\n      buildMobileResultSpread231(selIdx){\n        const a = selIdx[0], b = selIdx[1], c = selIdx[2], d = selIdx[3], e = selIdx[4];\n        return `\n          <div class=\"resultSpread\">\n            <div class=\"row\">\n              <div class=\"card\"><img decoding=\"async\" loading=\"lazy\" src=\"${Core.anges[a].img}\" alt=\"${Core.helpers.esc(Core.anges[a].name)}\"><\/div>\n              <div class=\"card\"><img decoding=\"async\" loading=\"lazy\" src=\"${Core.anges[b].img}\" alt=\"${Core.helpers.esc(Core.anges[b].name)}\"><\/div>\n            <\/div>\n            <div class=\"row\">\n              <div class=\"card\"><img decoding=\"async\" loading=\"lazy\" src=\"${Core.anges[c].img}\" alt=\"${Core.helpers.esc(Core.anges[c].name)}\"><\/div>\n              <div class=\"card\"><img decoding=\"async\" loading=\"lazy\" src=\"${Core.anges[d].img}\" alt=\"${Core.helpers.esc(Core.anges[d].name)}\"><\/div>\n              <div class=\"card\"><img decoding=\"async\" loading=\"lazy\" src=\"${Core.anges[e].img}\" alt=\"${Core.helpers.esc(Core.anges[e].name)}\"><\/div>\n            <\/div>\n          <\/div>\n        `;\n      }\n    };\n\n    Core.actions = {\n      async generateInterpretation() {\n        if (Core.state.selectedCards.length !== Core.maxCards || !Core.state.userName || !Core.state.selectedGender) return;\n\n        document.dispatchEvent(new CustomEvent('belline:interpretation-loading'));\n\n        \/\/ Affiche l'horloge en mode loading\n        const spiritHero = document.getElementById('spiritHero');\n        const resultSection = document.getElementById('result-section');\n        if (resultSection) resultSection.style.display = '';\n        if (spiritHero) {\n          spiritHero.style.display = '';\n          const heroTitle = spiritHero.querySelector('#resultTitle');\n          const heroText  = spiritHero.querySelector('.spirit-hero__text');\n          const heroEyebrow = spiritHero.querySelector('.spirit-hero__eyebrow');\n          if (heroTitle)   heroTitle.textContent   = `${Core.state.userName}, je pr\u00e9pare ton tirage\u2026`;\n          if (heroText)    heroText.textContent    = 'Je rassemble le message des anges, la guidance concr\u00e8te et la zone d\u2019attention la plus utile pour toi maintenant.';\n          if (heroEyebrow) heroEyebrow.textContent = 'Lecture en pr\u00e9paration';\n        }\n\n        const cards = Core.state.selectedCards.map(i => `${Core.anges[i].name} \u2014 ${Core.anges[i].subtitle}`);\n        const genderShort = (Core.state.selectedGender === \"femme\") ? \"f\" : \"m\";\n\n        try {\n          const prompt = Core.helpers.buildPromptAngesGeneralFree({\n            name: Core.state.userName,\n            gender: genderShort,\n            question: \"\",\n            cards\n          });\n\n          let ai = await Core.helpers.callOpenRouterViaProxy(prompt, \"openrouter\/auto\");\n          if(!ai || !ai.trim()) ai = await Core.helpers.callOpenRouterViaProxy(prompt, \"openrouter\/auto\");\n\n          \/\/ Interpr\u00e9tation pr\u00eate : cache l'horloge\n          if (spiritHero) spiritHero.style.display = 'none';\n          document.dispatchEvent(new CustomEvent('belline:interpretation-ready', {\n            detail: { ai }\n          }));\n        } catch (e) {\n          \/\/ Erreur : cache l'horloge\n          if (spiritHero) spiritHero.style.display = 'none';\n          document.dispatchEvent(new CustomEvent('belline:interpretation-error', {\n            detail: { message: e.message || \"Erreur\" }\n          }));\n        }\n      }\n    };\n\n    window.BellineModularCore = Core;\n    document.dispatchEvent(new CustomEvent('belline:core-ready'));\n  })();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Tirage oracle des Anges gratuit en ligne Entre ton pr\u00e9nom (obligatoire), puis choisis 5 cartes dans le paquet. Ton pr\u00e9nom (obligatoire) Ton pr\u00e9nom sera utilis\u00e9 uniquement dans ton interpr\u00e9tation. Valider mon pr\u00e9nom Choisis tes 5 cartes intuitivement Cartes : 0\/5 Mobile : fais glisser le jeu avec ton doigt, puis touche une carte pour la choisir. Valider mes cartes Pour une interpr\u00e9tation personnalis\u00e9e\u2026 Quelle \u00e9nergie pr\u00e9domine dans ta situation ? \u2728 Je me reconnais dans une \u00e9nergie f\u00e9minine \u26a1 Je me reconnais dans une \u00e9nergie masculine Recevoir mon interpr\u00e9tation \u2726 Lecture en pr\u00e9paration Je pr\u00e9pare ton tirage\u2026 Je rassemble le message des anges, la guidance concr\u00e8te et la zone d&rsquo;attention la plus utile pour toi maintenant. \u2726 Lecture en pr\u00e9paration Je pr\u00e9pare ton tirage\u2026 Je rassemble le message des anges, la guidance concr\u00e8te et la zone d&rsquo;attention la plus utile pour toi maintenant.<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-672","page","type-page","status-publish","hentry"],"acf":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/tirage-oracle.com\/en\/wp-json\/wp\/v2\/pages\/672","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tirage-oracle.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tirage-oracle.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tirage-oracle.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tirage-oracle.com\/en\/wp-json\/wp\/v2\/comments?post=672"}],"version-history":[{"count":142,"href":"https:\/\/tirage-oracle.com\/en\/wp-json\/wp\/v2\/pages\/672\/revisions"}],"predecessor-version":[{"id":3185,"href":"https:\/\/tirage-oracle.com\/en\/wp-json\/wp\/v2\/pages\/672\/revisions\/3185"}],"wp:attachment":[{"href":"https:\/\/tirage-oracle.com\/en\/wp-json\/wp\/v2\/media?parent=672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}