@font-face{font-family:Cinzel;src:url('../fonts/Cinzel.woff2') format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:Nunito;src:url('../fonts/Nunito.woff2') format('woff2');font-weight:200 1000;font-display:swap}
:root{
  --bg:#0d0a14; --bg2:#161022; --panel:rgba(30,22,44,.55); --line:rgba(226,191,108,.28);
  --gold:#e2bf6c; --gold2:#f6e2ae; --text:#ede4d3; --muted:#b5a9c6;
  --accent:#e2bf6c; --radius:14px;
  --card-w:min(150px,26vw);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Nunito,system-ui,sans-serif;font-size:17px;line-height:1.55;overflow-x:hidden}
.sky{position:fixed;inset:0;z-index:-1;background:
  radial-gradient(ellipse 80% 60% at 50% 0%,#2b1c45 0%,transparent 70%),
  radial-gradient(ellipse 60% 40% at 80% 100%,#1e1430 0%,transparent 70%),var(--bg)}
.sky::after{content:"";position:absolute;inset:0;background-image:
  radial-gradient(1px 1px at 12% 18%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 72% 12%,#fff6 50%,transparent 51%),
  radial-gradient(1.5px 1.5px at 33% 64%,#f6e2ae88 50%,transparent 51%),radial-gradient(1px 1px at 88% 48%,#fff5 50%,transparent 51%),
  radial-gradient(1px 1px at 52% 32%,#fff4 50%,transparent 51%),radial-gradient(1.5px 1.5px at 8% 82%,#f6e2ae66 50%,transparent 51%),
  radial-gradient(1px 1px at 62% 86%,#fff5 50%,transparent 51%),radial-gradient(1px 1px at 22% 42%,#fff3 50%,transparent 51%);
  background-size:600px 600px;opacity:.8}
a{color:var(--gold)}
h1,h2,h3{font-family:Cinzel,serif;color:var(--gold);font-weight:800;letter-spacing:.5px;line-height:1.2}
h1{font-size:clamp(30px,6vw,54px);margin:.2em 0 .4em}
h2{font-size:clamp(24px,4vw,34px);margin:0 0 .4em;text-align:center}
b{color:var(--gold2)}
.hidden{display:none!important}

.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(16px,4vw,40px);position:sticky;top:0;z-index:20;background:rgba(13,10,20,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{font-family:Cinzel;font-weight:800;color:var(--gold);text-decoration:none;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.star{display:inline-block;animation:tw 3s ease-in-out infinite}
@keyframes tw{50%{opacity:.4;transform:scale(.85)}}
.topnav{display:flex;gap:18px}
.topnav a{color:var(--text);text-decoration:none;font-size:15px;opacity:.85}
.topnav a:hover{color:var(--gold);opacity:1}
@media (max-width:720px){.topnav{display:none}}

.hero{text-align:center;padding:clamp(48px,10vw,110px) 16px clamp(30px,6vw,60px);max-width:820px;margin:0 auto}
.kicker,.stepnum{font-family:Cinzel;color:var(--muted);letter-spacing:2px;text-transform:uppercase;font-size:13px;margin:0}
.stepnum{text-align:center;margin-bottom:6px}
.lead{font-size:clamp(17px,2.2vw,20px);color:var(--text);max-width:640px;margin:0 auto 28px}
.lead.small{font-size:17px;text-align:center}
.sub{text-align:center;color:var(--muted);margin:-4px auto 22px;max-width:620px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:Cinzel;font-weight:700;font-size:15px;letter-spacing:.5px;border-radius:999px;padding:12px 22px;border:1px solid var(--gold);cursor:pointer;text-decoration:none;transition:transform .15s,background .2s,box-shadow .2s}
.btn.gold{background:linear-gradient(180deg,#f2d690,#c9a24c);color:#1a1206;border-color:#f2d690;box-shadow:0 0 24px rgba(226,191,108,.25)}
.btn.gold:hover{transform:translateY(-2px);box-shadow:0 0 36px rgba(226,191,108,.45)}
.btn.ghost{background:transparent;color:var(--gold)}
.btn.ghost:hover{background:rgba(226,191,108,.1)}
.btn.big{font-size:17px;padding:16px 30px}
.btn:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}

.panel{max-width:1120px;margin:0 auto 40px;padding:clamp(26px,4vw,46px) clamp(16px,4vw,40px);background:var(--panel);border:1px solid var(--line);border-radius:22px;scroll-margin-top:80px}
@media (max-width:600px){.panel{border-radius:0;border-left:0;border-right:0}}
.panel.narrow{max-width:760px}
.row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px}

/* étape 1 : jeux */
.decks{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media (max-width:860px){.decks{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.decks{grid-template-columns:repeat(2,1fr)}}
.deck{background:none;border:1px solid var(--line);border-radius:var(--radius);padding:12px 10px 14px;cursor:pointer;color:var(--text);text-align:center;transition:transform .2s,border-color .2s,box-shadow .2s;font:inherit}
.deck img{width:100%;aspect-ratio:9/15;object-fit:cover;border-radius:8px;display:block;margin-bottom:10px}
.deck .n{font-family:Cinzel;font-weight:800;color:var(--c);font-size:16px;display:block}
.deck .t{font-size:13.5px;color:var(--muted)}
.deck:hover,.deck:focus-visible{transform:translateY(-4px);border-color:var(--c);box-shadow:0 0 26px color-mix(in srgb,var(--c) 40%,transparent);outline:none}

/* étape 2 : types */
.types{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:760px;margin:0 auto 8px}
@media (max-width:560px){.types{grid-template-columns:1fr}}
.type{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;text-align:start;cursor:pointer;color:var(--text);font:inherit;transition:border-color .2s,background .2s,transform .2s}
.type:hover,.type:focus-visible{border-color:var(--accent);background:rgba(226,191,108,.07);transform:translateY(-2px);outline:none}
.type .n{font-family:Cinzel;font-weight:800;color:var(--accent);font-size:18px;display:block;margin-bottom:4px}
.type .t{color:var(--muted);font-size:15px}
.type .k{float:inline-end;font-family:Cinzel;color:var(--gold);font-size:13px;opacity:.8}
#step-type .btn.ghost{display:block;margin:18px auto 0}

/* étape 3 */
.question{max-width:560px;margin:0 auto 14px;text-align:center}
.question label{display:block;color:var(--muted);font-size:14px;margin-bottom:6px}
input[type=text],input[type=email]{width:100%;padding:13px 16px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.35);color:var(--text);font:inherit}
input:focus{outline:none;border-color:var(--gold)}
.slots{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:6px 0 24px;min-height:20px}
.slot{width:calc(var(--card-w)*.62);aspect-ratio:9/15;border:1px dashed var(--line);border-radius:8px;display:flex;align-items:flex-end;justify-content:center;font-size:11px;color:var(--muted);padding:4px;text-align:center;line-height:1.2;transition:border-color .3s}
.slot.full{border-style:solid;border-color:var(--accent);background-size:cover;background-position:center;color:transparent}
.fan{display:flex;flex-wrap:wrap;justify-content:center;gap:0;padding:10px 0 10px 28px;max-width:980px;margin:0 auto}
.fc{width:calc(var(--card-w)*.62);aspect-ratio:9/15;margin-left:-28px;border-radius:8px;border:1px solid rgba(226,191,108,.5);background-size:cover;background-position:center;cursor:pointer;box-shadow:-4px 4px 10px rgba(0,0,0,.5);transition:transform .25s,box-shadow .25s,opacity .3s;animation:deal .5s backwards}
.fc:hover,.fc:focus-visible{transform:translateY(-16px) rotate(-2deg);box-shadow:0 0 22px var(--accent);z-index:5;outline:none}
.fc.taken{opacity:0;pointer-events:none;transform:translateY(-40px)}
@keyframes deal{from{opacity:0;transform:translateY(30px) rotate(6deg)}}
@media (max-width:560px){.fan{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:0}.fc{width:auto;margin:0}.fc:hover{transform:translateY(-6px)}}

/* résultat */
.reading{display:grid;gap:22px;margin:10px auto 0}
.reading.cross{grid-template-columns:repeat(3,1fr);grid-template-areas:". c3 ." "c1 c5 c2" ". c4 ."}
.reading.cross .pos1{grid-area:c1}.reading.cross .pos2{grid-area:c2}.reading.cross .pos3{grid-area:c3}.reading.cross .pos4{grid-area:c4}.reading.cross .pos5{grid-area:c5}
.reading.three{grid-template-columns:repeat(3,1fr)}
.reading.one{max-width:760px}
@media (max-width:820px){.reading.cross,.reading.three{grid-template-columns:1fr;grid-template-areas:none}.reading.cross>*{grid-area:auto!important}}
.pos{background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:var(--radius);padding:16px;text-align:center}
.pos .lbl{font-family:Cinzel;font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.flip{perspective:1000px;width:min(210px,70%);margin:0 auto 12px;aspect-ratio:9/15;cursor:zoom-in}
.reading.one .flip{width:min(270px,70vw)}
.flip .inner{position:relative;width:100%;height:100%;transition:transform .9s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.flip.on .inner{transform:rotateY(180deg)}
.flip .face{position:absolute;inset:0;backface-visibility:hidden;border-radius:10px;background-size:cover;background-position:center;box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 0 1px rgba(226,191,108,.4)}
.flip .front{transform:rotateY(180deg)}
.pos h3{font-size:19px;margin:6px 0 10px}
.txt{text-align:start;font-size:15.5px;opacity:0;transform:translateY(8px);transition:opacity .6s .5s,transform .6s .5s}
.on~.txt,.pos.shown .txt{opacity:1;transform:none}
.txt p{margin:0 0 9px}
.txt .k{font-family:Cinzel;font-weight:800;color:var(--accent);font-size:13px;letter-spacing:1px;display:block}
.verdict{display:inline-block;font-family:Cinzel;font-weight:900;font-size:26px;padding:6px 22px;border-radius:999px;border:1px solid var(--accent);color:var(--accent);margin:6px 0 14px}
.special{font-style:italic;color:var(--gold2);line-height:1.65}
.disclaimer{font-size:13.5px;color:var(--muted);text-align:center;max-width:640px;margin:22px auto 0}
.cta-mail{margin:30px auto 0;text-align:center;border-top:1px solid var(--line);padding-top:24px}
.cta-mail p{margin:0 0 12px}
.dejatire{text-align:center;color:var(--gold2);margin:0 auto 16px}

/* newsletter */
#formMail{display:grid;gap:12px;max-width:520px;margin:0 auto}
.consent{font-size:13.5px;color:var(--muted);display:flex;gap:10px;align-items:flex-start;text-align:start}
.consent input{margin-top:4px;accent-color:var(--gold)}
.hp{position:absolute;left:-9999px}
.merci{color:var(--gold2);text-align:center}

/* jeux */
.jeuxlist{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media (max-width:860px){.jeuxlist{grid-template-columns:repeat(2,1fr)}}
.jx{text-align:center}
.jx img{width:100%;max-width:170px;aspect-ratio:9/15;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.jx .n{font-family:Cinzel;color:var(--c);font-weight:800;display:block;margin-top:8px}
.jx .t{font-size:14px;color:var(--muted)}

.faq details{border-bottom:1px solid var(--line);padding:12px 0}
.faq summary{cursor:pointer;font-weight:700;color:var(--gold2)}
.faq p{color:var(--text);margin:8px 0 0}

.foot{text-align:center;padding:30px 16px 50px;color:var(--muted);font-size:14px;max-width:760px;margin:0 auto}
.foot .sign{font-family:Cinzel;color:var(--gold)}
.social{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}

.zoom{position:fixed;inset:0;background:rgba(5,3,10,.92);z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px}
.zoom img{max-height:82vh;max-width:92vw;border-radius:12px;box-shadow:0 0 50px rgba(226,191,108,.3)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#2a1f3d;border:1px solid var(--gold);color:var(--gold2);padding:10px 18px;border-radius:999px;z-index:60}

/* pages légales */
.legal{max-width:820px;margin:30px auto 60px}
.legal h1{font-size:30px;text-align:center}
.legal h2{text-align:left;font-size:20px;margin-top:26px}
.legal .todo{background:rgba(163,65,58,.25);border:1px dashed #c76a5f;padding:0 6px;border-radius:4px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* langues */
.langbtn{background:transparent;border:1px solid var(--line);color:var(--text);border-radius:999px;padding:7px 14px;font:inherit;font-size:14px;cursor:pointer;white-space:nowrap}
.langbtn:hover{border-color:var(--gold);color:var(--gold)}
.top{gap:12px}.brand{flex:1;min-width:0}
.langs{position:fixed;inset:0;background:rgba(5,3,10,.94);z-index:55;overflow:auto;padding:20px}
.langs-in{max-width:960px;margin:0 auto}
.langs-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.langs-head h2{margin:0}
.langs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.langitem{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:12px;color:var(--text);text-decoration:none;background:rgba(255,255,255,.03)}
.langitem:hover,.langitem.cur{border-color:var(--gold);color:var(--gold2)}
.foot .small{font-size:13px}
[dir=rtl] .fan{direction:ltr}
[dir=rtl] .slots{direction:rtl}
:lang(hi) body,:lang(hi){line-height:1.7}