{"id":629,"date":"2026-02-28T17:45:25","date_gmt":"2026-02-28T17:45:25","guid":{"rendered":"https:\/\/tirage-oracle.com\/?page_id=629"},"modified":"2026-03-19T20:32:49","modified_gmt":"2026-03-19T20:32:49","slug":"tarot-8-cartes-2","status":"publish","type":"page","link":"https:\/\/tirage-oracle.com\/en\/tarot-8-cartes-2\/","title":{"rendered":"Tarot 8 cartes"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Tirage Tarot de Marseille Gratuit - Guidance Instantan\u00e9e<\/title>\r\n\r\n <style>\r\n :root{\r\n --bg-dark:#1a0b2e;\r\n --bg-mid:#2d1b69;\r\n --gold:#d4af37;\r\n --gold-soft:#f2dc8c;\r\n --teal:#3fcfbe;\r\n --teal-soft:#bff7ef;\r\n --violet:#7b5cff;\r\n --violet-soft:#ddd3ff;\r\n --wine:#8e365d;\r\n --wine-soft:#f2c7d8;\r\n --white:#f8f4e6;\r\n --shadow:0 10px 30px rgba(0,0,0,0.32);\r\n --shadow-hover:0 20px 40px rgba(212,175,55,0.28);\r\n --safe-b: env(safe-area-inset-bottom, 0px);\r\n --safe-r: env(safe-area-inset-right, 0px);\r\n --safe-t: env(safe-area-inset-top, 0px);\r\n --safe-l: env(safe-area-inset-left, 0px);\r\n }\r\n\r\n *{margin:0;padding:0;box-sizing:border-box;}\r\n html{scroll-behavior:smooth;}\r\n body{\r\n font-family:Arial,sans-serif;\r\n background:linear-gradient(135deg,var(--bg-dark) 0%,var(--bg-mid) 100%);\r\n color:var(--white);\r\n line-height:1.6;\r\n overflow-x:clip;\r\n }\r\n\r\n a{color:inherit;text-decoration:none;}\r\n img{max-width:100%;height:auto;display:block;}\r\n button,input{font-family:inherit;}\r\n\r\n .hero{\r\n min-height:80vh;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n text-align:center;\r\n padding:2rem;\r\n position:relative;\r\n }\r\n .hero::after{\r\n content:\"\";\r\n position:absolute; inset:0;\r\n background:\r\n radial-gradient(circle at 50% 20%, rgba(255,255,255,0.08), transparent 55%),\r\n radial-gradient(circle at 70% 80%, rgba(212,175,55,0.08), transparent 55%);\r\n pointer-events:none;\r\n }\r\n .hero-content{position:relative; z-index:1;}\r\n .hero-content h1{\r\n font-size:clamp(2.2rem,5vw,4rem);\r\n background:linear-gradient(45deg,var(--gold),#ffd700);\r\n -webkit-background-clip:text;\r\n -webkit-text-fill-color:transparent;\r\n margin-bottom:1.2rem;\r\n text-shadow:0 0 30px rgba(212,175,55,0.5);\r\n }\r\n .hero-content p{\r\n font-size:1.15rem;\r\n max-width:760px;\r\n margin:0 auto 1rem;\r\n opacity:.92;\r\n }\r\n\r\n .btn-gold{\r\n border:none;\r\n border-radius:999px;\r\n padding:1rem 2.15rem;\r\n font-size:1.04rem;\r\n font-weight:800;\r\n cursor:pointer;\r\n transition:all .28s ease;\r\n box-shadow:var(--shadow);\r\n display:inline-flex;\r\n align-items:center;\r\n justify-content:center;\r\n gap:.45rem;\r\n min-height:50px;\r\n line-height:1.15;\r\n max-width:100%;\r\n white-space:normal;\r\n text-align:center;\r\n }\r\n .btn-gold:hover{transform:translateY(-2px);}\r\n .btn-gold:disabled{opacity:.7;cursor:not-allowed;transform:none;}\r\n\r\n \/* Palette harmonis\u00e9e *\/\r\n #startBtn, #confirmNameBtn, #nextBtn, #interpretBtn{\r\n background:linear-gradient(45deg,var(--gold),var(--gold-soft));\r\n color:#221233;\r\n }\r\n #submitEmail{\r\n background:linear-gradient(45deg,var(--teal),var(--teal-soft));\r\n color:#06211e;\r\n }\r\n #restartBtn{\r\n background:linear-gradient(45deg,var(--violet),var(--violet-soft));\r\n color:#1b1041;\r\n }\r\n #resetBtn{\r\n background:linear-gradient(45deg,var(--wine),var(--wine-soft));\r\n color:#2d0d1b;\r\n }\r\n\r\n .tarot-section{\r\n padding:4rem 2rem;\r\n max-width:1200px;\r\n margin:0 auto;\r\n }\r\n .section-title{\r\n text-align:center;\r\n font-size:clamp(1.85rem,4vw,2.5rem);\r\n margin-bottom:1.15rem;\r\n color:var(--gold);\r\n }\r\n .hint{\r\n text-align:center;\r\n max-width:760px;\r\n margin:0 auto 1.6rem;\r\n opacity:.92;\r\n }\r\n\r\n .theme-grid{\r\n display:grid;\r\n grid-template-columns:repeat(4, minmax(170px, 1fr));\r\n gap:1.2rem;\r\n max-width:1100px;\r\n margin:0 auto 2rem;\r\n }\r\n .theme-btn{\r\n background:rgba(255,255,255,0.08);\r\n border:2px solid transparent;\r\n border-radius:18px;\r\n padding:1.35rem 1.1rem;\r\n cursor:pointer;\r\n transition:all .25s ease;\r\n box-shadow:var(--shadow);\r\n text-align:center;\r\n user-select:none;\r\n }\r\n .theme-btn:hover{\r\n transform:translateY(-2px);\r\n border-color:rgba(212,175,55,0.7);\r\n box-shadow:var(--shadow-hover);\r\n }\r\n .theme-btn.selected{\r\n border-color:var(--gold);\r\n background:rgba(212,175,55,0.18);\r\n }\r\n .theme-icon{\r\n font-size:1.8rem;\r\n display:block;\r\n margin-bottom:.35rem;\r\n }\r\n .theme-label{\r\n font-weight:bold;\r\n font-size:1.05rem;\r\n }\r\n\r\n .namebox{\r\n display:none;\r\n max-width:650px;\r\n margin:1.2rem auto 2rem;\r\n text-align:center;\r\n padding:1.6rem;\r\n background:rgba(255,255,255,0.09);\r\n border-radius:20px;\r\n backdrop-filter:blur(10px);\r\n box-shadow:var(--shadow);\r\n border:1px solid rgba(212,175,55,0.14);\r\n }\r\n .namebox label{\r\n display:block;\r\n font-weight:800;\r\n margin-bottom:.7rem;\r\n color:var(--white);\r\n opacity:.95;\r\n }\r\n .namebox input{\r\n width:100%;\r\n max-width:420px;\r\n padding:1rem 1.2rem;\r\n border:none;\r\n border-radius:999px;\r\n font-size:1.05rem;\r\n outline:none;\r\n }\r\n .namebox .micro{\r\n margin-top:.7rem;\r\n font-size:1rem;\r\n opacity:.85;\r\n }\r\n\r\n .counter{\r\n position:fixed;\r\n top:calc(1rem + var(--safe-t));\r\n right:calc(1rem + var(--safe-r));\r\n background:rgba(0,0,0,0.8);\r\n color:var(--gold);\r\n padding:.8rem 1.05rem;\r\n border-radius:999px;\r\n font-weight:800;\r\n z-index:1000;\r\n border:1px solid rgba(212,175,55,0.18);\r\n pointer-events:none;\r\n font-size:.95rem;\r\n }\r\n\r\n .deck-wrap{\r\n display:flex;\r\n justify-content:center;\r\n align-items:flex-end;\r\n padding:.9rem 0 1.6rem;\r\n }\r\n\r\n .deck-table{\r\n position:relative;\r\n width:min(1040px, 96vw);\r\n height:300px;\r\n border-radius:20px;\r\n overflow:hidden;\r\n user-select:none;\r\n touch-action:manipulation;\r\n transition:opacity .25s ease;\r\n background:\r\n radial-gradient(980px 340px at 50% 45%, rgba(255,255,255,0.18), rgba(255,255,255,0.05) 45%, rgba(0,0,0,0.0) 72%),\r\n linear-gradient(135deg, rgba(16,8,30,0.96), rgba(45,27,105,0.92));\r\n border:1px solid rgba(255,255,255,0.18);\r\n box-shadow:0 16px 44px rgba(0,0,0,0.48);\r\n }\r\n\r\n .deck-table::before{\r\n content:\"\";\r\n position:absolute;\r\n inset:14px;\r\n border-radius:14px;\r\n border:1px solid rgba(255,255,255,0.16);\r\n background:\r\n radial-gradient(760px 250px at 50% 20%, rgba(212,175,55,0.14), transparent 60%),\r\n radial-gradient(520px 220px at 50% 82%, rgba(139,90,43,0.14), transparent 60%);\r\n pointer-events:none;\r\n }\r\n\r\n .deck-table.disabled{\r\n opacity:.35;\r\n pointer-events:none;\r\n filter:grayscale(10%);\r\n }\r\n\r\n .tarot-card{\r\n position:absolute;\r\n left:0;\r\n bottom:12px;\r\n width:110px;\r\n aspect-ratio:2.5\/4;\r\n border-radius:12px;\r\n transform-style:preserve-3d;\r\n transition:transform .28s ease, filter .25s ease, box-shadow .25s ease, opacity .25s ease;\r\n box-shadow:var(--shadow);\r\n border:2px solid transparent;\r\n overflow:hidden;\r\n cursor:pointer;\r\n will-change:transform;\r\n transform: translateX(calc(var(--x) * 1px)) rotateY(calc(var(--flip) * 1deg));\r\n z-index:var(--z);\r\n background:linear-gradient(145deg,#2a1a3a,#1a0b2e);\r\n }\r\n\r\n @media (hover:hover){\r\n .tarot-card:not(.selected):not(.locked):not(.picked):hover{\r\n transform: translateX(calc(var(--x) * 1px)) translateY(-10px) rotateY(calc(var(--flip) * 1deg));\r\n box-shadow:var(--shadow-hover);\r\n border-color:rgba(212,175,55,0.65);\r\n filter:saturate(1.05);\r\n }\r\n }\r\n\r\n .tarot-card.selected{\r\n border-color:rgba(212,175,55,0.9);\r\n box-shadow:0 18px 44px rgba(212,175,55,0.20);\r\n }\r\n .tarot-card.locked{\r\n opacity:.35;\r\n filter:grayscale(55%);\r\n cursor:not-allowed;\r\n border-color:transparent;\r\n box-shadow:var(--shadow);\r\n }\r\n .tarot-card.picked{\r\n pointer-events:none !important;\r\n opacity:0 !important;\r\n visibility:hidden !important;\r\n transform: translate(-9999px, -9999px) !important;\r\n transition:none !important;\r\n }\r\n\r\n .card-face,.card-back{\r\n position:absolute;\r\n width:100%;\r\n height:100%;\r\n backface-visibility:hidden;\r\n border-radius:10px;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n }\r\n\r\n .card-back{\r\n background:\r\n radial-gradient(circle at 30% 20%, rgba(255,215,0,0.18), transparent 45%),\r\n radial-gradient(circle at 70% 80%, rgba(139,90,43,0.25), transparent 50%),\r\n repeating-linear-gradient(45deg, rgba(255,255,255,0.08) 0 8px, transparent 8px 16px),\r\n linear-gradient(145deg, #7b1b12, #b35a2a);\r\n border:1px solid rgba(255,255,255,0.12);\r\n }\r\n .card-back::after{\r\n content:\"\";\r\n width:72%;\r\n height:82%;\r\n border-radius:12px;\r\n border:1px solid rgba(212,175,55,0.35);\r\n box-shadow: inset 0 0 0 2px rgba(0,0,0,0.18);\r\n opacity:.95;\r\n display:block;\r\n }\r\n\r\n .card-face{\r\n background:linear-gradient(145deg,#f5f5f5,#e0e0e0);\r\n transform:rotateY(180deg);\r\n }\r\n .card-face img{\r\n width:100%;\r\n height:100%;\r\n object-fit:cover;\r\n display:block;\r\n }\r\n\r\n .btn-row{\r\n display:flex;\r\n gap:12px;\r\n justify-content:center;\r\n align-items:center;\r\n flex-wrap:wrap;\r\n margin-top:.25rem;\r\n }\r\n\r\n .gender-section{\r\n display:none;\r\n max-width:560px;\r\n margin:3rem auto;\r\n text-align:center;\r\n padding:2rem;\r\n background:rgba(255,255,255,0.08);\r\n border-radius:20px;\r\n backdrop-filter:blur(10px);\r\n box-shadow:var(--shadow);\r\n border:1px solid rgba(212,175,55,0.14);\r\n }\r\n .gender-option{\r\n display:block;\r\n margin:1.1rem 0;\r\n padding:1.2rem;\r\n background:rgba(255,255,255,0.08);\r\n border:2px solid transparent;\r\n border-radius:15px;\r\n cursor:pointer;\r\n transition:all .25s ease;\r\n user-select:none;\r\n }\r\n .gender-option:hover,.gender-option.selected{\r\n border-color:rgba(212,175,55,0.72);\r\n background:rgba(212,175,55,0.14);\r\n }\r\n\r\n .result-section{\r\n display:none;\r\n max-width:980px;\r\n margin:3rem auto;\r\n padding:2.4rem;\r\n background:rgba(255,255,255,0.08);\r\n border-radius:20px;\r\n text-align:center;\r\n box-shadow:var(--shadow);\r\n border:1px solid rgba(212,175,55,0.14);\r\n }\r\n\r\n #cards-display{\r\n display:flex;\r\n justify-content:center;\r\n margin-top:14px;\r\n }\r\n\r\n .spread-result{\r\n width:min(840px, 96vw);\r\n margin:0 auto;\r\n padding:16px;\r\n border-radius:18px;\r\n background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.22));\r\n border:1px solid rgba(255,255,255,0.14);\r\n box-shadow:0 18px 44px rgba(0,0,0,0.35);\r\n display:flex;\r\n flex-direction:column;\r\n gap:14px;\r\n align-items:center;\r\n }\r\n .spread-result .row{\r\n width:100%;\r\n display:flex;\r\n justify-content:center;\r\n align-items:center;\r\n gap:12px;\r\n flex-wrap:nowrap;\r\n }\r\n .spread-result .card{\r\n width:110px;\r\n aspect-ratio:2.5\/4;\r\n border-radius:12px;\r\n overflow:hidden;\r\n border:2px solid rgba(212,175,55,0.55);\r\n background:rgba(0,0,0,0.25);\r\n box-shadow:0 12px 28px rgba(0,0,0,0.40);\r\n flex:0 0 auto;\r\n }\r\n .spread-result .card img{\r\n width:100%;\r\n height:100%;\r\n object-fit:cover;\r\n display:block;\r\n }\r\n\r\n .interpretation{\r\n background:rgba(0,0,0,0.28);\r\n padding:2rem;\r\n border-radius:15px;\r\n margin:1.6rem auto 0;\r\n line-height:1.8;\r\n text-align:left;\r\n width:100%;\r\n max-width:920px;\r\n }\r\n .interpretation p{margin:0 0 .9rem 0; opacity:.97;}\r\n .interpretation .punch{\r\n padding:.95rem 1rem;\r\n border-radius:12px;\r\n background:rgba(212,175,55,0.10);\r\n border:1px solid rgba(212,175,55,0.18);\r\n }\r\n\r\n .email-capture{\r\n background:linear-gradient(135deg,var(--gold),#ffe58a);\r\n color:var(--bg-dark);\r\n padding:2rem;\r\n border-radius:20px;\r\n margin:1.6rem auto 0;\r\n box-shadow:var(--shadow);\r\n max-width:920px;\r\n }\r\n .email-input{\r\n width:100%;\r\n max-width:420px;\r\n padding:1rem;\r\n border:none;\r\n border-radius:999px;\r\n font-size:1.05rem;\r\n margin-bottom:1rem;\r\n }\r\n\r\n @media (max-width: 900px){\r\n .theme-grid{grid-template-columns:repeat(2, 1fr);}\r\n .spread-result .card{width:100px;}\r\n }\r\n\r\n @media (max-width: 700px){\r\n .spread-result .card{width:88px;}\r\n }\r\n\r\n @media (max-width: 520px){\r\n .hero{padding:1.2rem; min-height:72vh;}\r\n .tarot-section{padding:2.2rem 1rem;}\r\n .section-title{font-size:1.85rem;}\r\n .namebox{padding:1.2rem; margin:1rem auto 1.2rem;}\r\n\r\n .deck-table{\r\n height:240px;\r\n width:min(520px, 96vw);\r\n }\r\n .tarot-card{\r\n width:92px;\r\n bottom:10px;\r\n border-radius:10px;\r\n }\r\n\r\n .result-section{\r\n width:100%;\r\n max-width:100%;\r\n margin:1.2rem auto 0;\r\n padding:1.2rem 0;\r\n border-radius:18px;\r\n text-align:center;\r\n }\r\n\r\n #cards-display{display:none !important;}\r\n\r\n .interpretation{\r\n width:100vw;\r\n max-width:100vw;\r\n margin-left:calc(50% - 50vw);\r\n margin-right:calc(50% - 50vw);\r\n margin-top:1rem;\r\n padding:1.7rem 1.25rem;\r\n border-radius:0;\r\n line-height:1.9;\r\n text-align:left;\r\n }\r\n\r\n .interpretation .punch{\r\n width:100vw;\r\n max-width:100vw;\r\n margin-left:calc(50% - 50vw);\r\n margin-right:calc(50% - 50vw);\r\n margin-bottom:1rem;\r\n padding:1.2rem 1.25rem;\r\n border-radius:0;\r\n background:\r\n radial-gradient(900px 240px at 50% 10%, rgba(255,255,255,0.22), rgba(255,255,255,0.08) 55%, rgba(0,0,0,0.12) 100%),\r\n linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.20));\r\n border-top:1px solid rgba(255,255,255,0.18);\r\n border-bottom:1px solid rgba(255,255,255,0.18);\r\n }\r\n\r\n .resultSpread{\r\n width:100%;\r\n max-width:520px;\r\n margin:.75rem auto 0;\r\n display:flex;\r\n flex-direction:column;\r\n gap:12px;\r\n align-items:center;\r\n justify-content:center;\r\n padding:12px;\r\n border-radius:16px;\r\n background:rgba(255,255,255,0.10);\r\n border:1px solid rgba(255,255,255,0.20);\r\n box-shadow:0 10px 26px rgba(0,0,0,0.35);\r\n }\r\n .resultSpread .row{\r\n width:100%;\r\n display:flex;\r\n justify-content:center;\r\n align-items:center;\r\n gap:10px;\r\n }\r\n .resultSpread .card{\r\n width:72px;\r\n aspect-ratio:2.5\/4;\r\n border-radius:12px;\r\n overflow:hidden;\r\n position:relative;\r\n background:rgba(255,255,255,0.14);\r\n border:2px solid rgba(212,175,55,0.70);\r\n box-shadow:0 12px 26px rgba(0,0,0,0.55), 0 0 22px rgba(212,175,55,0.18);\r\n }\r\n .resultSpread .card img{\r\n width:100%;\r\n height:100%;\r\n object-fit:cover;\r\n display:block;\r\n filter:contrast(1.08) saturate(1.06) brightness(1.08);\r\n }\r\n\r\n .email-capture{\r\n padding:1.3rem;\r\n border-radius:18px;\r\n margin-left:1rem;\r\n margin-right:1rem;\r\n }\r\n .email-input{max-width:100%;}\r\n\r\n #submitEmail,#restartBtn,#resetBtn,#nextBtn,#confirmNameBtn,#interpretBtn{\r\n width:100% !important;\r\n max-width:100% !important;\r\n display:flex !important;\r\n }\r\n\r\n .btn-row{\r\n flex-direction:column;\r\n align-items:stretch;\r\n }\r\n\r\n .counter{\r\n top:auto;\r\n bottom:calc(1rem + var(--safe-b));\r\n right:calc(1rem + var(--safe-r));\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <section class=\"hero\" id=\"hero\">\r\n <div class=\"hero-content\">\r\n <h1>\u2728 Le Tarot peut t\u2019aider \u00e0 y voir clair<\/h1>\r\n <p>Pose ta question. Tire tes cartes. D\u00e9couvre un message clair et bienveillant pour avancer \u2014 amour, travail, d\u00e9cisions importantes.<\/p>\r\n <p style=\"font-size:1.05rem;opacity:.82;margin-bottom:2rem;\">Simple \u2022 Rapide \u2022 100% confidentiel<\/p>\r\n <a href=\"#tarot\" class=\"btn-gold\" id=\"startBtn\">Commencer mon tirage gratuit<\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"tarot\" class=\"tarot-section\">\r\n <h2 class=\"section-title\">Choisis le th\u00e8me de ta question<\/h2>\r\n\r\n <div class=\"theme-grid\" id=\"theme-grid\">\r\n <div class=\"theme-btn\" data-theme=\"amour\">\r\n <span class=\"theme-icon\">\ud83d\udc96<\/span>\r\n <div class=\"theme-label\">Amour & Relations<\/div>\r\n <\/div>\r\n <div class=\"theme-btn\" data-theme=\"travail\">\r\n <span class=\"theme-icon\">\ud83d\udcbc<\/span>\r\n <div class=\"theme-label\">Travail & Carri\u00e8re<\/div>\r\n <\/div>\r\n <div class=\"theme-btn\" data-theme=\"finances\">\r\n <span class=\"theme-icon\">\ud83d\udcb0<\/span>\r\n <div class=\"theme-label\">Argent & Finances<\/div>\r\n <\/div>\r\n <div class=\"theme-btn\" data-theme=\"general\">\r\n <span class=\"theme-icon\">\u2728<\/span>\r\n <div class=\"theme-label\">G\u00e9n\u00e9ral<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"namebox\" id=\"namebox\">\r\n <label for=\"nameInput2\">Ton pr\u00e9nom (obligatoire)<\/label>\r\n <input id=\"nameInput2\" type=\"text\" value=\"\" placeholder=\"Ex : Marie\" \/>\r\n <div class=\"micro\">Ton pr\u00e9nom sera utilis\u00e9 uniquement dans ton interpr\u00e9tation.<\/div>\r\n <div style=\"margin-top:1rem;\">\r\n <button id=\"confirmNameBtn\" type=\"button\" class=\"btn-gold\">Valider mon pr\u00e9nom<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <h2 class=\"section-title\" id=\"cardsTitle\" style=\"margin-top:1.6rem;\">Choisis tes 8 cartes intuitivement<\/h2>\r\n <p class=\"hint\" id=\"hintText\">\r\n D\u2019abord, s\u00e9lectionne un th\u00e8me ci-dessus. Ensuite, entre ton pr\u00e9nom, puis choisis 8 cartes dans le paquet.\r\n <\/p>\r\n\r\n <div class=\"counter\" id=\"counter\">Cartes : 0\/8<\/div>\r\n\r\n <div class=\"deck-wrap\">\r\n <div class=\"deck-table disabled\" id=\"tarot-deck\" aria-label=\"Paquet de cartes Tarot de Marseille\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"btn-row\">\r\n <button id=\"resetBtn\" class=\"btn-gold\" style=\"display:none;\">Tout effacer<\/button>\r\n <button id=\"nextBtn\" class=\"btn-gold\" style=\"display:none;\">Valider mes cartes<\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"gender-section\" class=\"gender-section\">\r\n <h2 style=\"color:var(--gold);margin-bottom:1.2rem;\">Pour une interpr\u00e9tation personnalis\u00e9e\u2026<\/h2>\r\n <p style=\"margin-bottom:1.5rem;opacity:.9;\">Quelle \u00e9nergie pr\u00e9domine dans ta situation ?<\/p>\r\n\r\n <label class=\"gender-option\" data-gender=\"femme\"><strong>\u2728 Femme<\/strong><\/label>\r\n <label class=\"gender-option\" data-gender=\"homme\"><strong>\u26a1 Homme<\/strong><\/label>\r\n\r\n <button id=\"interpretBtn\" class=\"btn-gold\" style=\"margin-top:1.2rem;display:none;\">Recevoir mon interpr\u00e9tation<\/button>\r\n <\/section>\r\n\r\n <section id=\"result-section\" class=\"result-section\">\r\n <h2 style=\"color:var(--gold);\" id=\"resultTitle\">Ton tirage est pr\u00eat \u2728<\/h2>\r\n <div id=\"cards-display\"><\/div>\r\n <div class=\"interpretation\" id=\"interpretation\"><\/div>\r\n\r\n <div class=\"email-capture\">\r\n <h3 style=\"color:var(--bg-dark);margin-bottom:.8rem;\">Pour un tirage approfondi complet<\/h3>\r\n <p style=\"color:var(--bg-dark);margin-bottom:1.2rem;font-weight:600;\">\r\n Recevoir par email ton rapport d\u00e9taill\u00e9 + audio guid\u00e9\r\n <\/p>\r\n <input type=\"email\" class=\"email-input\" placeholder=\"Ton email\" id=\"email-input\" \/>\r\n <br\/>\r\n <button id=\"submitEmail\" class=\"btn-gold\">Recevoir mon tirage gratuit<\/button>\r\n <\/div>\r\n\r\n <div style=\"margin-top:1rem;max-width:920px;margin-left:auto;margin-right:auto;padding:0 1rem;\">\r\n <button id=\"restartBtn\" class=\"btn-gold\">Refaire un tirage<\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function () {\r\n const CONSULTATION_URL = \"#checkout\";\r\n const PROXY_URL = \"\/openrouter-proxy.php\";\r\n\r\n const arcanes = [\r\n { name:'Le Mat', file:'LE MAT Nicolas Conver Tarot 1760.jpg' },\r\n { name:'Le Bateleur', file:'I LE BATELEUR Nicolas Conver Tarot 1760.jpg' },\r\n { name:'La Papesse', file:'II LA PAPESSE Nicolas Conver Tarot 1760.jpg' },\r\n { name:\"L'Imp\u00e9ratrice\", file:\"II L'IMP\u00c9RATRICE Nicolas Conver Tarot 1760.jpg\" },\r\n { name:\"L'Empereur\", file:\"IIII-L'EMPEREUR Nicolas Conver Tarot 1760.jpg\" },\r\n { name:'Le Pape', file:'V LE PAPE Nicolas Conver Tarot 1760.jpg' },\r\n { name:\"L'Amoureux\", file:\"VI L'AMOUREUX Nicolas Conver Tarot 1760.jpg\" },\r\n { name:'Le Chariot', file:'VII LE CHARIOT Nicolas Conver Tarot 1760.jpg' },\r\n { name:'La Justice', file:'VIII LA JUSTICE Nicolas Conver Tarot 1760.jpg' },\r\n { name:\"L'Hermite\", file:\"VIIII L'HERMITE Nicolas Conver Tarot 1760.jpg\" },\r\n { name:'La Roue de Fortune', file:'X LA ROUE DE FORTUNE Nicolas Conver Tarot 1760.jpg' },\r\n { name:'La Force', file:'XI LA FORCE Nicolas Conver Tarot 1760.jpg' },\r\n { name:'Le Pendu', file:'XII LE PENDU Nicolas Conver Tarot 1760.jpg' },\r\n { name:\"L'Arcane Sans Nom\", file:'13 XIII Nicolas Conver Tarot 1760.jpg' },\r\n { name:'La Temp\u00e9rance', file:'XIIII TEMPERANCE Nicolas Conver Tarot 1760.jpg' },\r\n { name:'Le Diable', file:'XV LE DIABLE Nicolas Conver Tarot 1760.jpg' },\r\n { name:'La Maison Dieu', file:'XVI LA MAISON DE DIEU Nicolas Conver Tarot 1760.jpg' },\r\n { name:\"L'\u00c9toile\", file:\"XVII L'ETOILE Nicolas Conver Tarot 1760.jpg\" },\r\n { name:'La Lune', file:'XVIII LA LUNE Nicolas Conver Tarot 1760.jpg' },\r\n { name:'Le Soleil', file:'XVIIII LE SOLEIL Nicolas Conver Tarot 1760.jpg' },\r\n { name:'Le Jugement', file:'XX LE JUGEMENT Nicolas Conver Tarot 1760.jpg' },\r\n { name:'Le Monde', file:'XXI LE MONDE Nicolas Conver Tarot 1760.jpg' }\r\n ].map(c => ({\r\n ...c,\r\n img: \"https:\/\/commons.wikimedia.org\/wiki\/Special:FilePath\/\" + encodeURIComponent(c.file)\r\n }));\r\n\r\n const maxCards = 8;\r\n let selectedCards = [];\r\n let selectedTheme = null;\r\n let selectedGender = null;\r\n let userName = \"\";\r\n\r\n const deck = document.getElementById('tarot-deck');\r\n const counter = document.getElementById('counter');\r\n const resetBtn = document.getElementById('resetBtn');\r\n const nextBtn = document.getElementById('nextBtn');\r\n const hintText = document.getElementById('hintText');\r\n\r\n const namebox = document.getElementById('namebox');\r\n const nameInput2 = document.getElementById('nameInput2');\r\n const confirmNameBtn = document.getElementById('confirmNameBtn');\r\n const cardsTitle = document.getElementById('cardsTitle');\r\n\r\n const genderSection = document.getElementById('gender-section');\r\n const interpretBtn = document.getElementById('interpretBtn');\r\n\r\n const resultSection = document.getElementById('result-section');\r\n const restartBtn = document.getElementById('restartBtn');\r\n const cardsDisplay = document.getElementById('cards-display');\r\n const interpretationEl = document.getElementById('interpretation');\r\n\r\n function esc(str){\r\n return String(str)\r\n .replaceAll(\"&\",\"&\")\r\n .replaceAll(\"<\",\"<\")\r\n .replaceAll(\">\",\">\")\r\n .replaceAll('\"',\""\")\r\n .replaceAll(\"'\",\"'\");\r\n }\r\n\r\n function scrollToEl(el, offsetPx = 18){\r\n if(!el) return;\r\n const rect = el.getBoundingClientRect();\r\n const y = rect.top + window.pageYOffset - offsetPx;\r\n window.scrollTo({ top: y, behavior: 'smooth' });\r\n }\r\n\r\n function isMobile(){\r\n return window.matchMedia && window.matchMedia(\"(max-width: 520px)\").matches;\r\n }\r\n\r\n function themeLabel(theme){\r\n switch(theme){\r\n case 'amour': return 'Amour & Relations';\r\n case 'travail': return 'Travail & Carri\u00e8re';\r\n case 'finances': return 'Argent & Finances';\r\n default: return 'G\u00e9n\u00e9ral';\r\n }\r\n }\r\n\r\n function layoutTable(){\r\n const cards = [...deck.querySelectorAll('.tarot-card:not(.picked)')];\r\n const total = cards.length;\r\n if(!total) return;\r\n\r\n const W = deck.getBoundingClientRect().width || window.innerWidth;\r\n const mobile = isMobile();\r\n const cardW = mobile ? 92 : 110;\r\n const pad = mobile ? 16 : 22;\r\n\r\n const usable = Math.max(140, W - pad * 2);\r\n const rawStep = (usable - cardW) \/ Math.max(1, total - 1);\r\n const step = Math.max(mobile ? 11 : 14, Math.min(mobile ? 22 : 34, rawStep));\r\n\r\n const spreadW = cardW + step * (total - 1);\r\n const startX = Math.round((W - spreadW) \/ 2);\r\n\r\n cards.forEach((el, i) => {\r\n const x = startX + i * step;\r\n el.style.setProperty('--x', String(x));\r\n el.style.setProperty('--z', String(i));\r\n });\r\n }\r\n\r\n function initDeck() {\r\n deck.innerHTML = '';\r\n arcanes.forEach((cardData, index) => {\r\n const card = document.createElement('div');\r\n card.className = 'tarot-card';\r\n card.dataset.index = index;\r\n card.style.setProperty('--flip', '0');\r\n\r\n card.innerHTML = `\r\n <div class=\"card-back\"><\/div>\r\n <div class=\"card-face\">\r\n <img decoding=\"async\" loading=\"lazy\" src=\"${cardData.img}\" alt=\"\">\r\n <\/div>\r\n `;\r\n\r\n card.addEventListener('click', selectCard);\r\n deck.appendChild(card);\r\n });\r\n\r\n layoutTable();\r\n }\r\n\r\n window.addEventListener('resize', layoutTable);\r\n\r\n function updateCounter() {\r\n counter.textContent = `Cartes : ${selectedCards.length}\/${maxCards}`;\r\n }\r\n\r\n function lockUnselectedCardsIfNeeded(){\r\n const cards = deck.querySelectorAll('.tarot-card');\r\n if(selectedCards.length >= maxCards){\r\n cards.forEach(el => {\r\n const idx = parseInt(el.dataset.index, 10);\r\n if(!selectedCards.includes(idx)) el.classList.add('locked');\r\n });\r\n } else {\r\n cards.forEach(el => el.classList.remove('locked'));\r\n }\r\n }\r\n\r\n function toggleButtons() {\r\n resetBtn.style.display = selectedCards.length > 0 ? 'inline-flex' : 'none';\r\n nextBtn.style.display = selectedCards.length === maxCards ? 'inline-flex' : 'none';\r\n lockUnselectedCardsIfNeeded();\r\n\r\n if(selectedCards.length === maxCards){\r\n setTimeout(() => scrollToEl(nextBtn, 22), 80);\r\n }\r\n }\r\n\r\n document.querySelectorAll('.theme-btn').forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n document.querySelectorAll('.theme-btn').forEach(b => b.classList.remove('selected'));\r\n btn.classList.add('selected');\r\n\r\n selectedTheme = btn.dataset.theme;\r\n resetDrawOnly();\r\n\r\n namebox.style.display = 'block';\r\n hintText.textContent = \"Parfait. Entre ton pr\u00e9nom (obligatoire), puis tu pourras tirer 8 cartes.\";\r\n deck.classList.add('disabled');\r\n\r\n genderSection.style.display = 'none';\r\n resultSection.style.display = 'none';\r\n\r\n setTimeout(() => {\r\n scrollToEl(namebox, 22);\r\n nameInput2.focus();\r\n }, 80);\r\n });\r\n });\r\n\r\n confirmNameBtn.addEventListener('click', (e)=>{\r\n e.preventDefault();\r\n e.stopPropagation();\r\n\r\n const v = (nameInput2.value || \"\").trim();\r\n if(!v){\r\n nameInput2.focus();\r\n nameInput2.style.outline = \"3px solid rgba(212,175,55,0.75)\";\r\n return;\r\n }\r\n\r\n nameInput2.style.outline = \"none\";\r\n userName = v.charAt(0).toUpperCase() + v.slice(1);\r\n nameInput2.value = userName;\r\n\r\n deck.classList.remove('disabled');\r\n hintText.textContent = `${userName}, respire\u2026 puis choisis 8 cartes. Laisse ton intuition te guider.`;\r\n\r\n resetDrawOnly();\r\n setTimeout(() => scrollToEl(cardsTitle, 22), 80);\r\n });\r\n\r\n function selectCard(e) {\r\n if (!selectedTheme) return;\r\n if (!userName) return;\r\n if (selectedCards.length >= maxCards) return;\r\n\r\n const card = e.currentTarget;\r\n if(card.classList.contains('locked')) return;\r\n\r\n const index = parseInt(card.dataset.index, 10);\r\n if (selectedCards.includes(index)) return;\r\n\r\n selectedCards.push(index);\r\n card.classList.add('selected');\r\n card.style.setProperty('--flip', '180');\r\n card.classList.add('picked');\r\n\r\n layoutTable();\r\n updateCounter();\r\n toggleButtons();\r\n }\r\n\r\n resetBtn.addEventListener('click', () => {\r\n resetDrawOnly();\r\n setTimeout(() => scrollToEl(cardsTitle, 22), 80);\r\n });\r\n\r\n nextBtn.addEventListener('click', () => {\r\n genderSection.style.display = 'block';\r\n resultSection.style.display = 'none';\r\n setTimeout(() => scrollToEl(genderSection, 22), 80);\r\n });\r\n\r\n document.querySelectorAll('.gender-option').forEach(option => {\r\n option.addEventListener('click', () => {\r\n document.querySelectorAll('.gender-option').forEach(opt => opt.classList.remove('selected'));\r\n option.classList.add('selected');\r\n selectedGender = option.dataset.gender;\r\n\r\n interpretBtn.style.display = 'inline-flex';\r\n setTimeout(() => scrollToEl(interpretBtn, 22), 80);\r\n });\r\n });\r\n\r\n function buildDesktopSpread8(selIdx){\r\n const [a,b,c,d,e,f,g,h] = selIdx;\r\n return `\r\n <div class=\"spread-result\" aria-label=\"Tes 8 cartes\">\r\n <div class=\"row\">\r\n <div class=\"card\"><img decoding=\"async\" loading=\"lazy\" src=\"${arcanes[a].img}\" alt=\"\"><\/div>\r\n <div class=\"card\"><img decoding=\"async\" loading=\"lazy\" src=\"${arcanes[b].img}\" alt=\"\"><\/div>\r\n <div class=\"card\"><img decoding=\"async\" loading=\"lazy\" src=\"${arcanes[c].img}\" alt=\"\"><\/div>\r\n <div class=\"card\"><img decoding=\"async\" loading=\"lazy\" src=\"${arcanes[d].img}\" alt=\"\"><\/div>\r\n <\/div>\r\n <div class=\"row\">\r\n <div class=\"card\"><img decoding=\"async\" loading=\"lazy\" src=\"${arcanes[e].img}\" alt=\"\"><\/div>\r\n <div class=\"card\"><img decoding=\"async\" loading=\"lazy\" src=\"${arcanes[f].img}\" alt=\"\"><\/div>\r\n <div class=\"card\"><img decoding=\"async\" loading=\"lazy\" src=\"${arcanes[g].img}\" alt=\"\"><\/div>\r\n <div class=\"card\"><img decoding=\"async\" loading=\"lazy\" src=\"${arcanes[h].img}\" alt=\"\"><\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n function buildMobileResultSpread8(selIdx){\r\n const [a,b,c,d,e,f,g,h] = selIdx;\r\n return `\r\n <div class=\"resultSpread\">\r\n <div class=\"row\">\r\n <div class=\"card\"><img decoding=\"async\" loading=\"lazy\" src=\"${arcanes[a].img}\" alt=\"\"><\/div>\r\n <div class=\"card\"><img decoding=\"async\" loading=\"lazy\" src=\"${arcanes[b].img}\" alt=\"\"><\/div>\r\n <div class=\"card\"><img decoding=\"async\" loading=\"lazy\" src=\"${arcanes[c].img}\" alt=\"\"><\/div>\r\n <\/div>\r\n <div class=\"row\">\r\n <div class=\"card\"><img decoding=\"async\" loading=\"lazy\" src=\"${arcanes[d].img}\" alt=\"\"><\/div>\r\n <div class=\"card\"><img decoding=\"async\" loading=\"lazy\" src=\"${arcanes[e].img}\" alt=\"\"><\/div>\r\n <\/div>\r\n <div class=\"row\">\r\n <div class=\"card\"><img decoding=\"async\" loading=\"lazy\" src=\"${arcanes[f].img}\" alt=\"\"><\/div>\r\n <div class=\"card\"><img decoding=\"async\" loading=\"lazy\" src=\"${arcanes[g].img}\" alt=\"\"><\/div>\r\n <div class=\"card\"><img decoding=\"async\" loading=\"lazy\" src=\"${arcanes[h].img}\" alt=\"\"><\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n interpretBtn.addEventListener('click', () => {\r\n if (!selectedGender) return;\r\n showResults(selectedGender);\r\n });\r\n\r\n async function showResults(gender) {\r\n resultSection.style.display = 'block';\r\n setTimeout(() => scrollToEl(resultSection, 22), 80);\r\n\r\n document.getElementById('resultTitle').textContent =\r\n `${userName}, ton tirage ${themeLabel(selectedTheme)} r\u00e9v\u00e8le\u2026`;\r\n\r\n cardsDisplay.innerHTML = buildDesktopSpread8(selectedCards);\r\n\r\n const mobileSpread = isMobile()\r\n ? `<div class=\"punch\" style=\"margin-bottom:1rem;\">\r\n <div style=\"font-weight:800; color: var(--gold); margin-bottom:.6rem;\">Tes 8 cartes<\/div>\r\n ${buildMobileResultSpread8(selectedCards)}\r\n <\/div>`\r\n : \"\";\r\n\r\n interpretationEl.innerHTML = `<p style=\"opacity:.9;\">\u23f3 Interpr\u00e9tation en cours\u2026<\/p>`;\r\n\r\n const interpretation = await generateInterpretationPremiumFree({\r\n theme: selectedTheme,\r\n gender,\r\n name: userName,\r\n cards: selectedCards.map(i => arcanes[i].name),\r\n consultationUrl: CONSULTATION_URL,\r\n mobileSpread\r\n });\r\n\r\n interpretationEl.innerHTML = interpretation;\r\n }\r\n\r\n restartBtn.addEventListener('click', () => {\r\n resetAll();\r\n setTimeout(() => scrollToEl(document.getElementById('tarot'), 22), 80);\r\n });\r\n\r\n function resetDrawOnly(){\r\n selectedCards = [];\r\n selectedGender = null;\r\n\r\n document.querySelectorAll('.tarot-card').forEach(c => {\r\n c.classList.remove('selected','locked','picked');\r\n c.style.setProperty('--flip','0');\r\n });\r\n\r\n document.querySelectorAll('.gender-option').forEach(opt => opt.classList.remove('selected'));\r\n interpretBtn.style.display = 'none';\r\n\r\n cardsDisplay.innerHTML = \"\";\r\n interpretationEl.innerHTML = \"\";\r\n\r\n updateCounter();\r\n toggleButtons();\r\n layoutTable();\r\n }\r\n\r\n function resetAll(){\r\n resetDrawOnly();\r\n selectedTheme = null;\r\n userName = \"\";\r\n nameInput2.value = \"\";\r\n\r\n document.querySelectorAll('.theme-btn').forEach(b => b.classList.remove('selected'));\r\n namebox.style.display = 'none';\r\n deck.classList.add('disabled');\r\n\r\n genderSection.style.display = 'none';\r\n resultSection.style.display = 'none';\r\n\r\n hintText.textContent = \"D\u2019abord, s\u00e9lectionne un th\u00e8me ci-dessus. Ensuite, entre ton pr\u00e9nom, puis choisis 8 cartes dans le paquet.\";\r\n }\r\n\r\n function buildPromptTarotMarseille({ name, gender, theme, cards }) {\r\n const genre = gender === \"femme\" ? \"femme\" : \"homme\";\r\n const label = themeLabel(theme);\r\n const count = cards.length;\r\n\r\n let formatBloc = \"\";\r\n if(count <= 3){\r\n formatBloc = `\r\nA) MESSAGE CENTRAL (6 \u00e0 10 lignes)\r\nB) LECTURE CARTE PAR CARTE (${count} mini-paragraphes)\r\nC) GUIDANCE CONCR\u00c8TE (48\u201372h) (3 actions simples)\r\nD) ATTENTION \/ PI\u00c8GE \u00c0 \u00c9VITER (2 \u00e0 4 lignes)\r\nE) PHRASE FINALE QUI RECENTRE\r\n`;\r\n } else if(count <= 5){\r\n formatBloc = `\r\nA) LECTURE GLOBALE DU TIRAGE (8 \u00e0 12 lignes)\r\nB) LECTURE CARTE PAR CARTE (${count} mini-paragraphes)\r\nC) GUIDANCE CONCR\u00c8TE (48\u201372h) (3 \u00e0 5 actions simples)\r\nD) ATTENTION \/ PI\u00c8GE \u00c0 \u00c9VITER (2 \u00e0 4 lignes)\r\nE) PHRASE FINALE QUI RECENTRE\r\n`;\r\n } else {\r\n formatBloc = `\r\nA) LECTURE GLOBALE DU TIRAGE (10 \u00e0 14 lignes)\r\nB) LECTURE CARTE PAR CARTE (${count} mini-paragraphes courts, 2 \u00e0 4 phrases chacun)\r\nC) 3 PI\u00c8GES \u00c0 \u00c9VITER\r\nD) 3 ACTIONS IMM\u00c9DIATES ET CONCR\u00c8TES\r\nE) PHRASE FINALE \"COUP DE GONG\" MOTIVANTE\r\n`;\r\n }\r\n\r\n const system = `\r\nTu es un(e) praticien(ne) spirituel(le) sp\u00e9cialis\u00e9(e) dans le Tarot de Marseille.\r\nTu proposes une interpr\u00e9tation claire, structur\u00e9e, concr\u00e8te, humaine, sans sensationnalisme.\r\n\r\nSTYLE STRICT :\r\n- Fran\u00e7ais uniquement.\r\n- Tutoiement strict : jamais \"vous\", jamais \"votre\".\r\n- Ton direct, bienveillant, pr\u00e9cis, incarn\u00e9.\r\n- Pas de blabla inutile.\r\n- Pas de langage marketing.\r\n- Pas de dramatisation.\r\n- Pas de promesses magiques.\r\n- Pas de certitudes absolues.\r\n- Parle en dynamiques, tendances, prises de conscience, leviers d\u2019action.\r\n- Pas de jargon technique.\r\n- Pas de dates invent\u00e9es.\r\n- Tu peux mentionner le nom des cartes si utile \u00e0 la lecture.\r\n\r\nR\u00c8GLE MAJEURE :\r\n- Tu interpr\u00e8tes uniquement \u00e0 partir du tirage donn\u00e9.\r\n- Tu relies les cartes entre elles.\r\n- Tu tiens compte du th\u00e8me du tirage.\r\n- Tu tiens compte du pr\u00e9nom de la personne.\r\n- Tu tiens compte de l\u2019\u00e9nergie dominante indiqu\u00e9e.\r\n\r\nOBJECTIF :\r\nDonner une interpr\u00e9tation du Tarot de Marseille qui aide la personne \u00e0 voir plus clair, \u00e0 comprendre ce qui se joue et \u00e0 savoir quoi faire ensuite.\r\n\r\nFORMAT :\r\n${formatBloc}\r\n`;\r\n\r\n const user = `\r\nPr\u00e9nom : ${name}\r\nGenre : ${genre}\r\nTh\u00e8me du tirage : ${label}\r\n\r\nCartes tir\u00e9es :\r\n${cards.map((c) => `- ${c}`).join(\"\\n\")}\r\n`;\r\n\r\n return system + \"\\n\\n\" + user;\r\n }\r\n\r\n async function callOpenRouterViaProxy(prompt, model = \"openrouter\/free\"){\r\n const res = await fetch(PROXY_URL, {\r\n method: \"POST\",\r\n headers: { \"Content-Type\": \"application\/json\" },\r\n body: JSON.stringify({ model, prompt })\r\n });\r\n\r\n const text = await res.text();\r\n let data = null;\r\n try { data = JSON.parse(text); } catch(_) {}\r\n\r\n if(!res.ok){\r\n const msg =\r\n (data && (data.error?.message || data.error)) ? (data.error?.message || data.error) :\r\n (text ? text : (\"HTTP \" + res.status));\r\n throw new Error(`Proxy HTTP ${res.status} \u2014 ${msg}`);\r\n }\r\n\r\n return String(\r\n data?.choices?.[0]?.message?.content ||\r\n data?.choices?.[0]?.text ||\r\n \"\"\r\n );\r\n }\r\n\r\n function aiTextToHtml(text){\r\n const raw = String(text || \"\").trim();\r\n if(!raw) return `<p>${esc(\"Je n'ai pas re\u00e7u de contenu IA.\")}<\/p>`;\r\n\r\n const blocks = raw.includes(\"\\n\\n\") ? raw.split(\/\\n{2,}\/) : raw.split(\/\\n+\/);\r\n const clean = blocks.map(b => b.trim()).filter(Boolean).slice(0, 220);\r\n return clean.map(b => `<p>${esc(b)}<\/p>`).join(\"\");\r\n }\r\n\r\n function buildConsultationCTA(theme, name, consultationUrl){\r\n const t = theme || \"general\";\r\n const n = name || \"Toi\";\r\n\r\n const byTheme = {\r\n amour: {\r\n title: \"\ud83d\udd12 Ce que ton tirage ne dit pas encore :\",\r\n text: \"Il reste une information cl\u00e9 \u00e0 \u00e9claircir dans ta vie sentimentale. En consultation compl\u00e8te, tu obtiens une lecture plus fine, plus pr\u00e9cise et plus personnelle.\"\r\n },\r\n travail: {\r\n title: \"\ud83d\udd12 Ce que ton tirage ne dit pas encore :\",\r\n text: \"Ton tirage montre une dynamique, mais la strat\u00e9gie concr\u00e8te reste \u00e0 pr\u00e9ciser. En consultation compl\u00e8te, tu obtiens une lecture plus cibl\u00e9e sur ton \u00e9volution.\"\r\n },\r\n finances: {\r\n title: \"\ud83d\udd12 Ce que ton tirage ne dit pas encore :\",\r\n text: \"Une zone demande \u00e0 \u00eatre clarifi\u00e9e pour mieux stabiliser ta situation. En consultation compl\u00e8te, tu obtiens une lecture plus d\u00e9taill\u00e9e et orient\u00e9e action.\"\r\n },\r\n general: {\r\n title: \"\ud83d\udd12 Ce que ton tirage ne dit pas encore :\",\r\n text: \"Ton tirage ouvre une direction, mais certains points m\u00e9ritent d\u2019\u00eatre approfondis. En consultation compl\u00e8te, tu obtiens une lecture plus claire, plus cibl\u00e9e et plus personnelle.\"\r\n }\r\n };\r\n\r\n const pack = byTheme[t] || byTheme.general;\r\n\r\n return `\r\n <div class=\"punch\" style=\"margin-top:1.2rem;\">\r\n <div style=\"font-weight:bold; color: var(--gold); margin-bottom:.35rem;\">${esc(pack.title)}<\/div>\r\n <div style=\"opacity:.95; margin-bottom:.9rem;\"><strong>${esc(n)}<\/strong> : ${esc(pack.text)}<\/div>\r\n\r\n <div style=\"text-align:center; margin-top:.85rem;\">\r\n <a href=\"${esc(consultationUrl)}\" class=\"btn-gold\" style=\"background:linear-gradient(45deg,var(--gold),var(--gold-soft));color:#221233;padding:0.95rem 2.2rem; display:inline-flex;\">\r\n D\u00e9bloquer ma consultation compl\u00e8te\r\n <\/a>\r\n <div style=\"font-size:.95rem; opacity:.85; margin-top:.7rem;\">\r\n Direction claire + lecture approfondie.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n async function generateInterpretationPremiumFree({ theme, gender, name, cards, consultationUrl, mobileSpread }) {\r\n try {\r\n const prompt = buildPromptTarotMarseille({ theme, gender, name, cards });\r\n const aiText = await callOpenRouterViaProxy(prompt, \"openrouter\/free\");\r\n\r\n return `\r\n ${mobileSpread || \"\"}\r\n <h3 style=\"color:var(--gold); margin:0 0 .8rem 0;\">Interpr\u00e9tation de ton tirage<\/h3>\r\n ${aiTextToHtml(aiText)}\r\n ${buildConsultationCTA(theme, name, consultationUrl)}\r\n `;\r\n } catch (e) {\r\n console.error(\"Erreur OpenRouter :\", e);\r\n\r\n return `\r\n ${mobileSpread || \"\"}\r\n <div class=\"punch\" style=\"margin-bottom:1rem;\">\r\n <div style=\"font-weight:800; color: var(--gold); margin-bottom:.45rem;\">Erreur de connexion IA<\/div>\r\n <p style=\"margin-bottom:.55rem;\">L\u2019interpr\u00e9tation n\u2019a pas pu \u00eatre g\u00e9n\u00e9r\u00e9e.<\/p>\r\n <p style=\"margin-bottom:0;\"><strong>D\u00e9tail :<\/strong> ${esc(e.message || \"Erreur inconnue\")}<\/p>\r\n <\/div>\r\n `;\r\n }\r\n}\r\n\r\n document.getElementById('submitEmail').addEventListener('click', async () => {\r\n const emailInput = document.getElementById('email-input');\r\n const btn = document.getElementById('submitEmail');\r\n const email = (emailInput.value || \"\").trim();\r\n\r\n if(!email || !\/^\\S+@\\S+\\.\\S+$\/.test(email)){\r\n alert(\"Entre un email valide \ud83d\ude42\");\r\n emailInput.focus();\r\n return;\r\n }\r\n\r\n const restRoot =\r\n document.querySelector('link[rel=\"https:\/\/api.w.org\/\"]')?.href || (window.location.origin + \"\/wp-json\/\");\r\n const endpoint = restRoot.replace(\/\\\/?$\/, \"\/\") + \"belline\/v1\/newsletter\";\r\n\r\n btn.disabled = true;\r\n\r\n try{\r\n const res = await fetch(endpoint, {\r\n method: \"POST\",\r\n headers: { \"Content-Type\": \"application\/json\" },\r\n body: JSON.stringify({\r\n email,\r\n page: window.location.href,\r\n name: userName || \"\",\r\n gender: selectedGender || \"\",\r\n theme: selectedTheme || \"\",\r\n cards: selectedCards.map(i => arcanes[i]?.name).filter(Boolean)\r\n })\r\n });\r\n\r\n const data = await res.json().catch(() => ({}));\r\n\r\n if(res.ok && data.ok){\r\n alert(\"\u2705 Merci ! Ton tirage approfondi arrive dans ta bo\u00eete mail.\\nV\u00e9rifie tes spams si besoin.\");\r\n emailInput.value = \"\";\r\n } else {\r\n console.log(\"Erreur API:\", res.status, data);\r\n alert(\"\u274c Erreur c\u00f4t\u00e9 serveur. Regarde la console (F12) pour le d\u00e9tail.\");\r\n }\r\n } catch(e){\r\n console.log(\"Erreur fetch:\", e);\r\n alert(\"\u274c Impossible de contacter le serveur.\");\r\n } finally {\r\n btn.disabled = false;\r\n }\r\n });\r\n\r\n document.getElementById('startBtn').addEventListener('click', (e) => {\r\n e.preventDefault();\r\n setTimeout(() => scrollToEl(document.getElementById('tarot'), 22), 80);\r\n });\r\n\r\n initDeck();\r\n updateCounter();\r\n toggleButtons();\r\n\r\n deck.classList.add('disabled');\r\n genderSection.style.display = 'none';\r\n resultSection.style.display = 'none';\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\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 Tarot de Marseille Gratuit – Guidance Instantan\u00e9e \u2728 Le Tarot peut t\u2019aider \u00e0 y voir clair Pose ta question. Tire tes cartes. D\u00e9couvre un message clair et bienveillant pour avancer \u2014 amour, travail, d\u00e9cisions importantes. Simple \u2022 Rapide \u2022 100% confidentiel Commencer mon tirage gratuit Choisis le th\u00e8me de ta question \ud83d\udc96 Amour & Relations \ud83d\udcbc Travail & Carri\u00e8re \ud83d\udcb0 Argent & Finances \u2728 G\u00e9n\u00e9ral Ton pr\u00e9nom (obligatoire) Ton pr\u00e9nom sera utilis\u00e9 uniquement dans ton interpr\u00e9tation. Valider mon pr\u00e9nom Choisis tes 8 cartes intuitivement D\u2019abord, s\u00e9lectionne un th\u00e8me ci-dessus. Ensuite, entre ton pr\u00e9nom, puis choisis 8 cartes dans le paquet. Cartes : 0\/8 Tout effacer Valider mes cartes Pour une interpr\u00e9tation personnalis\u00e9e\u2026 Quelle \u00e9nergie pr\u00e9domine dans ta situation ? \u2728 Femme \u26a1 Homme Recevoir mon interpr\u00e9tation Ton tirage est pr\u00eat \u2728 Pour un tirage approfondi complet Recevoir par email ton rapport d\u00e9taill\u00e9 + audio guid\u00e9 Recevoir mon tirage gratuit Refaire un tirage<\/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-629","page","type-page","status-publish","hentry"],"acf":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/tirage-oracle.com\/en\/wp-json\/wp\/v2\/pages\/629","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=629"}],"version-history":[{"count":110,"href":"https:\/\/tirage-oracle.com\/en\/wp-json\/wp\/v2\/pages\/629\/revisions"}],"predecessor-version":[{"id":1887,"href":"https:\/\/tirage-oracle.com\/en\/wp-json\/wp\/v2\/pages\/629\/revisions\/1887"}],"wp:attachment":[{"href":"https:\/\/tirage-oracle.com\/en\/wp-json\/wp\/v2\/media?parent=629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}