/* ════════════════════════════════════════════════════════════════════
   Jumble Chess – accueil v2 et éléments interactifs
   ════════════════════════════════════════════════════════════════════ */
:root{
  --jx-l:#f0d9b5; --jx-d:#b58863;
  --jx-card:#ffffff; --jx-ink:#1a0e06;
  --jx-gold1:#e9c46a; --jx-gold2:#b07a1c;
  --jx-rainbow:linear-gradient(115deg,#ff5e9c,#ffaa44,#ffe83b,#6dd5ed,#b06ab3,#ff5e9c);
  /* variante lisible sur fond clair : part de jaune réduite, part de rouge ajoutée */
  --jx-rainbow-txt:linear-gradient(115deg,#d81f6a 0%,#d4241f 18%,#c07a0d 36%,#0f8fa6 56%,#7a3fc4 78%,#d81f6a 100%);
  --jx-ease:cubic-bezier(.22,.8,.26,1);
  --jx-stage:#e2d5ba;
}
[data-theme="dark"]{ --jx-l:#ebeced; --jx-d:#6b7a90; --jx-card:#201a10; --jx-ink:#f0e8d8; --jx-stage:#1b1509; }

/* V48 : la fin des titres reprend l'italique marron des autres pages */
.jx-home .section{max-width:1160px}
.jx-lead{color:var(--muted);max-width:60ch;line-height:1.7;margin:-.4rem 0 2rem;font-size:.98rem}

/* ── Hero ─────────────────────────────────────────────────────────── */
.jx-hero{min-height:calc(100vh - 60px);display:flex;align-items:center;justify-content:center;padding:3rem 2rem 4rem}
.jx-hero .chess-deco{transition:opacity 1.6s ease,filter 1.6s ease;will-change:transform}
.jx-hero-grid{position:relative;z-index:1;width:100%;max-width:1180px;display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:center}
.jx-hero-text{text-align:left}
.jx-hero .hero-title{margin-bottom:1.4rem}
.jx-hero .hero-title span{display:inline-block;transition:transform 1.1s var(--jx-ease),opacity 1.1s ease}
.jx-hero .hero-title .chess{display:block;transition-delay:.12s}
.jx-hero .hero-sub{margin:0 0 2rem;max-width:36ch;font-size:clamp(1rem,1.6vw,1.2rem)}
.jx-hero .hero-actions{justify-content:flex-start}
.jx-hero-text > *:not(.hero-title){transition:opacity .9s ease .45s,transform .9s var(--jx-ease) .45s}
html[lang="ar"] .jx-hero-text{text-align:right}
html[lang="ar"] .jx-hero .hero-actions{justify-content:flex-start}

.jx-hero-ks{margin-top:1.8rem;max-width:380px}
.jx-hero-ks-top{font-size:.88rem;color:var(--muted);margin-bottom:.5rem}
.jx-cells-sm .jx-cell{padding:.4rem .15rem;border-radius:6px}
.jx-cells-sm .jx-cell b{font-size:1.5rem}
.jx-hero-ks .jx-ks-link{display:inline-block;margin-top:.7rem}
.jx-ks-link{color:var(--gold);font-weight:600;font-size:.9rem;text-decoration:underline;text-underline-offset:3px}
.jx-hero-ks.live .jx-count-cells{font-weight:700;color:var(--gold)}
html[lang="ar"] .jx-hero-ks{margin-left:auto}
/* éventail de cartes */
.jx-fan{position:relative;height:clamp(360px,44vw,520px)}
.jx-fan-card{position:absolute;top:50%;left:50%;width:clamp(150px,19vw,230px);transform-origin:50% 120%;
  transform:translate(-50%,-50%) translateX(var(--x)) rotate(var(--r));transition:transform 1.1s var(--jx-ease),opacity .8s ease}
.jx-fan-card:nth-child(1){--x:-68%;--r:-13deg;z-index:1;transition-delay:.35s}
.jx-fan-card:nth-child(2){--x:0%;--r:-1deg;z-index:2;transition-delay:.5s;top:46%}
.jx-fan-card:nth-child(3){--x:68%;--r:12deg;z-index:3;transition-delay:.65s}
.jx-fan-card:hover{z-index:5;--lift:-16px}
.jx-fan .jx-fan-card > .jc-card{transform:translateY(var(--lift,0)) perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));box-shadow:0 30px 60px -22px rgba(60,30,8,.5)}
html:not(.jx-ready) .jx-home .chess-deco{opacity:0;filter:blur(8px)}
html:not(.jx-ready) .jx-hero .hero-title span{opacity:0;transform:translateY(45%)}
html:not(.jx-ready) .jx-hero-text > *:not(.hero-title){opacity:0;transform:translateY(14px)}
html:not(.jx-ready) .jx-fan-card{opacity:0;transform:translate(-50%,-10%) rotate(0deg)}

/* ── Carte (rendu « physique ») ───────────────────────────────────── */
.jx-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:.5rem;background:var(--jx-card);border-radius:14px;
  padding:1.1rem 1rem 1rem;aspect-ratio:63/88;overflow:hidden;border:1px solid rgba(110,63,20,.14);color:var(--jx-ink);text-align:center}
.jx-card img{width:70%;aspect-ratio:1;object-fit:contain;margin:.2rem 0;pointer-events:none;-webkit-user-drag:none}
[data-theme="dark"] .jx-card img{background:#fff;border-radius:10px;padding:6%}
.jx-card-name{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:clamp(.95rem,1.4vw,1.15rem);line-height:1.1;min-height:2.2em;display:flex;align-items:center}
.jx-card-desc{font-size:.72rem;line-height:1.45;color:var(--muted);text-align:left;overflow:hidden}
.jx-corner{position:absolute;width:26px;height:26px;border-color:currentColor;border-style:solid;opacity:.85}
.jx-corner.tl{top:9px;left:9px;border-width:2px 0 0 2px}
.jx-corner.br{bottom:9px;right:9px;border-width:0 2px 2px 0}
.jx-card.classic{color:var(--jx-ink)}
.jx-card.classic .jx-card-name{color:var(--jx-ink)}
.jx-card.dore{color:var(--jx-gold2)}
.jx-card.dore .jx-card-name{background:linear-gradient(90deg,var(--jx-gold2),#e0a82e,var(--jx-gold2));-webkit-background-clip:text;background-clip:text;color:transparent}
.jx-card.rayonnant .jx-corner{border-image:var(--jx-rainbow) 1}
.jx-card.rayonnant .jx-card-name{background:var(--jx-rainbow);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:jxSlide 6s linear infinite}
@keyframes jxSlide{to{background-position:200% 0}}
.jx-shine{position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .35s;
  background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.55),transparent 42%)}
.jx-hover .jx-shine,.jx-fan-card:hover .jx-shine{opacity:1}
.jx-card.dore .jx-shine{background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,236,170,.75),transparent 40%),
  linear-gradient(115deg,transparent 30%,rgba(233,196,106,.35) 45%,transparent 60%);mix-blend-mode:screen}
.jx-card.rayonnant .jx-shine{background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.6),transparent 38%),
  linear-gradient(calc(var(--ry,0deg) * 6 + 115deg),rgba(255,94,156,.28),rgba(255,232,59,.22),rgba(109,213,237,.28),rgba(176,106,179,.28));mix-blend-mode:soft-light}
.jx-card.rayonnant{box-shadow:0 0 0 1px rgba(176,106,179,.25)}

/* ── Comment jouer ───────────────────────────────────────────────── */
.jx-how-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;margin-top:1.5rem}
.jx-steps{list-style:none;position:relative;padding:0;margin:0}
.jx-steps::before{content:'';position:absolute;left:1.55rem;top:1.2rem;bottom:1.2rem;width:1px;background:repeating-linear-gradient(to bottom,var(--gold) 0 5px,transparent 5px 11px);opacity:.45}
.jx-step{position:relative;display:flex;gap:1.3rem;align-items:flex-start;padding:1rem 0}
.jx-step:nth-child(2){margin-left:2.2rem}
.jx-step:nth-child(3){margin-left:4.4rem}
.jx-step-n{flex:none;width:3.1rem;height:3.1rem;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:1px solid var(--border);
  font-family:'Cormorant Garamond',serif;font-size:1.7rem;font-weight:700;color:var(--gold);position:relative;z-index:1}
.jx-step h3{font-family:'Cormorant Garamond',serif;font-size:1.35rem;margin:.35rem 0 .35rem;line-height:1.2}
.jx-step p{color:var(--muted);line-height:1.7;font-size:.93rem;max-width:51ch}
html[lang="ar"] .jx-step:nth-child(2){margin-left:0;margin-right:2.2rem}
html[lang="ar"] .jx-step:nth-child(3){margin-left:0;margin-right:4.4rem}
html[lang="ar"] .jx-steps::before{left:auto;right:1.55rem}
.jx-photo{position:relative;margin:0;transform:rotate(2.2deg);transition:transform .6s var(--jx-ease)}
.jx-photo:hover{transform:rotate(0) scale(1.01)}
.jx-photo img{width:100%;display:block;border-radius:6px;aspect-ratio:4/3;object-fit:cover;border:8px solid #fffcf7;box-shadow:0 24px 50px -18px rgba(60,30,8,.4)}
[data-theme="dark"] .jx-photo img{border-color:#2a2116}
.jx-photo figcaption{position:absolute;left:-1.2rem;bottom:1.4rem;transform:rotate(-4deg);background:var(--gold);color:#fffcf7;font-family:'Cormorant Garamond',serif;font-weight:700;
  font-size:1.05rem;padding:.35rem .9rem;border-radius:3px;box-shadow:0 8px 20px -8px rgba(60,30,8,.5)}
[data-theme="dark"] .jx-photo figcaption{color:#100d08}

/* ── Échiquier ───────────────────────────────────────────────────── */
.jx-board{position:relative;aspect-ratio:1;container-type:inline-size;direction:ltr;border-radius:4px;overflow:hidden;
  box-shadow:0 0 0 6px #6b4424,0 0 0 7px rgba(0,0,0,.25),0 18px 40px -14px rgba(0,0,0,.5);user-select:none}
.jx-board-sm{box-shadow:0 0 0 3px #6b4424;border-radius:3px}
.jx-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr)}
.jx-sq{position:relative}
.jx-sq.l{background:var(--jx-l)}.jx-sq.d{background:var(--jx-d)}
.jx-sq::after{content:'';position:absolute;inset:0;pointer-events:none;transition:background .25s,box-shadow .25s}
.jx-sq.hl-last::after{background:rgba(243,224,138,.55)}
.jx-sq.hl-zone::after{background:rgba(176,122,28,.22)}
.jx-sq.hl-sel::after{background:rgba(212,175,55,.6)}
.jx-sq.hl-move::after{background:radial-gradient(circle,rgba(40,90,20,.42) 0 17%,transparent 19%)}
.jx-sq.hl-cap::after{background:radial-gradient(circle,transparent 58%,rgba(200,50,40,.55) 60%)}
.jx-sq.hl-swap::after{box-shadow:inset 0 0 0 3px #d4a017;background:rgba(212,160,23,.18);animation:jxPulse 1.2s ease-in-out infinite}
.jx-sq.hl-check::after{background:radial-gradient(circle,rgba(220,40,30,.85) 0,rgba(220,40,30,.35) 45%,transparent 72%)}
.jx-sq.hl-bad::after{background:rgba(200,50,40,.3)}
.jx-sq.jx-x::before{content:'\2715';position:absolute;inset:0;display:grid;place-items:center;color:#c0281e;font-size:9cqw;font-weight:900;z-index:5;animation:jxPop .35s var(--jx-ease)}
.jx-co{position:absolute;font-size:2.1cqw;font-weight:700;opacity:.75;pointer-events:none;line-height:1}
.jx-sq.l .jx-co{color:var(--jx-d)}.jx-sq.d .jx-co{color:var(--jx-l)}
.jx-co-r{top:3%;left:4%}.jx-co-f{bottom:3%;right:5%}
.jx-layer{position:absolute;inset:0;pointer-events:none}
.jx-pc{position:absolute;top:0;left:0;width:12.5%;height:12.5%;display:grid;place-items:center;z-index:2;
  transition:transform .42s var(--jx-ease),opacity .3s ease;font-family:'Apple Symbols','Segoe UI Symbol','DejaVu Sans',serif;font-variant-emoji:text}
.jx-pc span{font-size:9.6cqw;line-height:1;transition:transform .3s,opacity .3s,filter .3s;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.jx-pc.w span{color:#fff;text-shadow:0 0 1px rgba(0,0,0,.9),0 1px 2px rgba(0,0,0,.4)}
.jx-pc.b span{color:#1a1a1a}
.jx-pc.jx-still{transition:none}
.jx-pc.jx-moving{z-index:4}
.jx-pc.jx-moving span{transform:scale(1.12)}
.jx-pc.jx-under{z-index:3}
.jx-pc.jx-under span{transform:scale(.88)}
.jx-pc.jx-captured{opacity:0}
.jx-pc.jx-captured span{transform:scale(.4) rotate(25deg)}
.jx-pc.jx-ghost span{opacity:.4;filter:blur(1px) drop-shadow(0 0 6px rgba(160,190,255,.9))}
.jx-pc.jx-vanish span{opacity:0;transform:scale(.2) rotate(-90deg);filter:drop-shadow(0 0 10px #e9c46a)}
.jx-pc.jx-appear span{animation:jxAppear .38s var(--jx-ease)}
.jx-pc.jx-pop span{animation:jxPromo .45s var(--jx-ease)}
@keyframes jxAppear{from{opacity:0;transform:scale(1.8);filter:drop-shadow(0 0 14px #e9c46a)}}
@keyframes jxPromo{50%{transform:scale(1.5);filter:drop-shadow(0 0 12px #ffe083)}}
@keyframes jxPulse{50%{box-shadow:inset 0 0 0 5px #e9b21f}}
@keyframes jxPop{from{transform:scale(2);opacity:0}}
.jx-arrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.jx-arrow{fill:none;stroke-width:.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:6;stroke-dashoffset:6;animation:jxDraw .7s ease forwards}
.jx-arrow.chk{stroke:rgba(214,40,30,.85)}
.jx-arrow.swp{stroke:rgba(212,160,23,.95)}
.jx-arrow.line{stroke:rgba(40,110,220,.85)}
.jx-arrow.jump{stroke:rgba(170,70,230,.9);stroke-dasharray:.18 .16;animation:none}
.jx-sq.hl-line::after{background:rgba(40,110,220,.38)}
.jx-sq.hl-jump::after{background:rgba(170,70,230,.38)}
@keyframes jxDraw{to{stroke-dashoffset:0}}
.jx-badge{position:absolute;top:4%;right:4%;z-index:6;background:#3b1f4a;color:#fff;border-radius:4px;padding:.15rem .55rem;font-size:.72rem;opacity:0;transform:scale(.8);transition:all .3s var(--jx-ease)}
.jx-badge.on{opacity:1;transform:none}
.jx-badge b{font-size:.9rem}
.jx-badge.bump{transform:scale(1.25)}
.jx-badge.win{background:linear-gradient(90deg,#ff5e9c,#b06ab3);box-shadow:0 0 16px rgba(255,94,156,.7)}

/* ── Modificateurs : cartes retournables ─────────────────────────── */
.jx-tiers{display:flex;flex-direction:column;gap:2.8rem;margin-top:1.5rem}
.jx-tier{display:grid;grid-template-columns:minmax(170px,230px) 1fr;gap:2.2rem;align-items:start}
.jx-tier-head{margin-bottom:.5rem}
.jx-tier-head h3{font-family:'Cormorant Garamond',serif;font-size:1.9rem;line-height:1}
.jx-tier.classic h3{color:var(--white)}.jx-tier.dore h3{color:#b8901f}
.jx-tier.rayonnant h3{background:var(--jx-rainbow-txt);-webkit-background-clip:text;background-clip:text;color:transparent}
.jx-tier-info p{color:var(--muted);font-size:.9rem;line-height:1.6}
.jx-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3rem}
.jx-flip{position:relative;perspective:1400px;cursor:pointer;border-radius:4%;outline:none}
.jx-flip:focus-visible{box-shadow:0 0 0 3px var(--gold)}
.jx-flip-inner{position:relative;transition:transform .8s var(--jx-ease);transform-style:preserve-3d}
.jx-flip.flipped .jx-flip-inner{transform:rotateY(180deg)}
.jx-face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.jx-front{position:relative}
.jx-hint{position:absolute;left:7%;bottom:4.5%;z-index:5;font-size:.74rem;font-weight:700;color:#8a5c20;display:inline-flex;align-items:center;gap:.35rem;
  font-family:'Manrope',Arial,sans-serif;pointer-events:none}
.jx-back-face{position:absolute;inset:0;transform:rotateY(180deg);container-type:inline-size;border-radius:5.3% / 3.79%;overflow:hidden}
.jx-back-face.t-classic{background:linear-gradient(160deg,#34343d 0%,#141419 45%,#2c2c34 100%)}
.jx-back-face.t-dore{background:#d4ae44}
.jx-back-face.t-rayonnant{background:linear-gradient(140deg,#a445ff 0%,#6a7dff 18%,#27c3d6 36%,#43c98d 48%,#f2a33a 62%,#ff6f8e 78%,#d24dff 100%)}
.jx-back-in{position:absolute;inset:1.55cqw;background:#fff;border-radius:3.9cqw;padding:8cqw 7cqw 6cqw;display:flex;flex-direction:column;gap:6cqw}
.jx-mini{width:100%}
.jx-cap{font-family:'Manrope',Arial,sans-serif;font-size:4.4cqw;line-height:1.45;color:#50505c;text-align:center;margin:0}
.jx-cap b{display:block;font-weight:800;font-size:5.6cqw;color:#16161c;margin-bottom:1.5cqw}
.jx-more{text-align:center;margin-top:2rem}

/* ── Démo ────────────────────────────────────────────────────────── */
.jx-stage{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:
  radial-gradient(ellipse at 30% 40%,rgba(233,196,106,.22),transparent 60%),
  radial-gradient(ellipse at 80% 90%,rgba(176,106,179,.10),transparent 55%),var(--jx-stage);
  box-shadow:0 24px 60px -34px rgba(40,20,5,.45);border:1px solid var(--border);direction:ltr;color:var(--white)}
.jx-stage-board{position:absolute;left:4%;top:6%;height:80%;width:auto;aspect-ratio:1}
.jx-hand{position:absolute;left:51%;right:1%;top:4%;height:64%}
.jx-hand-card{position:absolute;top:4%;width:33%;transition:transform .9s var(--jx-ease),left .9s var(--jx-ease),opacity .6s,filter .6s}
.jx-hand-card:nth-child(1){left:2%;transform:rotate(-9deg) scale(.86)}
.jx-hand-card:nth-child(2){left:33.5%;transform:rotate(0) scale(.86)}
.jx-hand-card:nth-child(3){left:65%;transform:rotate(9deg) scale(.86)}
.jx-hand.gather .jx-hand-card:nth-child(1){left:6%;transform:rotate(-5deg) scale(1.04)}
.jx-hand.gather .jx-hand-card:nth-child(2){left:33.5%;transform:translateY(-3%) scale(1.04)}
.jx-hand.gather .jx-hand-card:nth-child(3){left:61%;transform:rotate(5deg) scale(1.04)}
.jx-hand-card.focus{z-index:3;filter:drop-shadow(0 0 16px rgba(233,196,106,.65))}
.jx-hand.gather .jx-hand-card.focus{transform:translateY(-4%) scale(1.14) !important}
.jx-hand-card.dim{opacity:.4;filter:grayscale(.3)}
.jx-caption{position:absolute;left:52%;right:2%;top:72%;min-height:3.2em;font-size:clamp(.72rem,1.2vw,1rem);line-height:1.4;
  opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s var(--jx-ease);text-align:left}
.jx-caption.in{opacity:1;transform:none}
.jx-caption b{color:var(--gold);font-family:'Cormorant Garamond',serif;font-size:1.15em}
.jx-mate{position:absolute;left:4%;top:6%;height:80%;aspect-ratio:1;display:grid;place-items:center;pointer-events:none;z-index:4;
  font-family:'Cormorant Garamond',serif;font-weight:900;font-size:clamp(1.6rem,4.4vw,3.6rem);color:#fffdf8;text-shadow:0 3px 18px rgba(40,20,5,.85);
  opacity:0;transform:scale(1.6) rotate(-6deg);transition:all .6s var(--jx-ease)}
.jx-stage.done .jx-mate{opacity:1;transform:rotate(-6deg)}
.jx-stage-ui{position:absolute;left:0;right:0;bottom:0;height:13%;display:flex;align-items:center;gap:.55rem;padding:0 3%;z-index:6}
.jx-play{width:34px;height:34px;border-radius:6px;cursor:pointer;position:relative;flex:none}
.jx-play::before{content:'';position:absolute;inset:0;margin:auto;width:10px;height:12px;clip-path:polygon(0 0,100% 50%,0 100%)}
.jx-stage.playing:not(.paused) .jx-play::before{clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0)}
.jx-progress{flex:1;height:3px;background:rgba(26,14,6,.15);border-radius:3px;overflow:hidden}
.jx-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#e9c46a,#ff5e9c);transition:width .6s ease}
.jx-start{position:absolute;inset:0;display:grid;place-items:center;background:rgba(246,240,228,.45);backdrop-filter:blur(2px);z-index:7;transition:opacity .4s}
.jx-stage.playing .jx-start{opacity:0;pointer-events:none}

/* ── Pioche ──────────────────────────────────────────────────────── */
.jx-draw-sec{position:relative}
.jx-decks{display:flex;justify-content:center;gap:clamp(1.2rem,5vw,4rem);flex-wrap:wrap;margin-top:1rem}
.jx-deck{position:relative;width:128px;height:179px;border:0;background:none;cursor:pointer;padding:0;transition:transform .4s var(--jx-ease)}
.jx-deck .jx-back{position:absolute;inset:0;transition:transform .4s var(--jx-ease)}
.jx-deck .jx-back:nth-child(1){transform:translate(-8px,6px) rotate(-5deg)}
.jx-deck .jx-back:nth-child(2){transform:translate(-3px,3px) rotate(-2deg)}
.jx-deck:hover{transform:translateY(-8px)}
.jx-deck:hover .jx-back:nth-child(1){transform:translate(-14px,6px) rotate(-9deg)}
.jx-deck:hover .jx-back:nth-child(3){transform:translate(8px,-4px) rotate(4deg)}
.jx-deck.active{transform:translateY(-6px)}
.jx-deck.active .jx-back:nth-child(3) img{filter:drop-shadow(0 0 10px rgba(233,196,106,.9))}
.jx-deck-name{position:absolute;left:-30px;right:-30px;white-space:nowrap;bottom:-2.4rem;font-family:'Cormorant Garamond',serif;font-weight:700;font-size:1.2rem;color:var(--white)}
.jx-deck.dore .jx-deck-name{color:var(--dore)}
.jx-deck.rayonnant .jx-deck-name{background:var(--jx-rainbow-txt);-webkit-background-clip:text;background-clip:text;color:transparent}
.jx-back{display:block}
.jx-back img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.3))}
.jx-draw-hint{text-align:center;color:var(--muted);margin:3.4rem 0 1.4rem;font-size:.92rem;min-height:1.5em}
.jx-link{background:none;border:0;padding:0;color:var(--gold);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.jx-tray{display:grid;grid-template-columns:repeat(3,minmax(0,230px));justify-content:center;gap:clamp(.8rem,2.5vw,2rem);min-height:40px}
.jx-drawn{border:0;background:none;padding:0;cursor:pointer;perspective:1000px;opacity:0;transform:translateY(-120px) scale(.6) rotate(calc((var(--k) - 1) * 12deg));
  transition:transform .7s var(--jx-ease),opacity .5s ease}
.jx-drawn.dealt{opacity:1;transform:none}
.jx-drawn-in{position:relative;display:block;transform-style:preserve-3d;transition:transform .75s var(--jx-ease);transform:rotateY(180deg)}
.jx-drawn.shown .jx-drawn-in{transform:none}
.jx-drawn-front{display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.jx-drawn-back{position:absolute;inset:0;transform:rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.jx-drawn-back img{width:100%;height:100%;object-fit:fill;display:block}
.jx-drawn.kept{transform:translateY(-12px) scale(1.04)}
.jx-drawn.kept .jc-card{box-shadow:0 0 0 3px #e9c46a,0 0 36px rgba(233,196,106,.6)}
.jx-drawn.returned{opacity:0;transform:translateY(-150px) scale(.5) rotate(calc((var(--k) - 1) * -10deg));transition-duration:.85s}

/* ── Puzzles ─────────────────────────────────────────────────────── */
.jx-tabs{display:inline-flex;gap:.3rem;padding:.3rem;border-radius:12px;background:var(--bg2);border:1px solid var(--border);margin-bottom:1.6rem;flex-wrap:wrap}
.jx-tab{border:0;background:none;border-radius:9px;padding:.5rem 1.1rem;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;color:var(--muted);font-family:inherit;transition:background .25s,color .25s}
.jx-tab span{font-weight:700;font-size:.92rem}
.jx-tab small{font-size:.7rem;opacity:.8}
.jx-tab.on{background:var(--bg3);color:var(--white);box-shadow:0 2px 8px -3px rgba(60,30,8,.3)}
.jx-puz-body{display:grid;grid-template-columns:minmax(0,470px) minmax(0,300px);gap:2.6rem;align-items:start}
.jx-puz-board .jx-sq{cursor:pointer}
.jx-puz-side{display:flex;flex-direction:column;gap:.9rem}
.jx-puz-card{width:min(210px,70%)}
.jx-puz-mod-label{font-size:.9rem;font-weight:600;color:var(--gold)}
.jx-card-wide{aspect-ratio:auto;flex-direction:row;flex-wrap:wrap;text-align:left;align-items:center;gap:.4rem .9rem}
.jx-card-wide img{width:72px;margin:0;order:-1}
.jx-card-wide .jx-card-name{flex:1;min-height:0;font-size:1.25rem}
.jx-card-wide .jx-card-desc{flex-basis:100%;font-size:.82rem}
.jx-puz-status{min-height:3em;font-size:.95rem;line-height:1.5;padding:.7rem .9rem;border-radius:8px;background:var(--bg2);border-left:3px solid var(--border);transition:background .3s,border-color .3s}
.jx-puz-status.bad{border-color:#c0281e;background:rgba(192,40,30,.08);animation:jxShake .4s}
.jx-puz-status.good{border-color:#3d8a2a;background:rgba(61,138,42,.1);font-weight:600}
@keyframes jxShake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.jx-puz-btns{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.jx-puz-btns .btn-secondary{padding:.6rem 1.2rem;font-size:.85rem}
.jx-puz.solved .jx-puz-board .jx-board{animation:jxWin 1.2s ease}
@keyframes jxWin{30%{box-shadow:0 0 0 6px #6b4424,0 0 0 10px rgba(233,196,106,.9),0 0 50px rgba(233,196,106,.7)}}

/* ── Deux façons de jouer ────────────────────────────────────────── */
.jx-ways{max-width:1160px;margin:0 auto;padding:4rem 2rem 5rem}
.jx-ways-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:2.5rem;align-items:start;margin-top:1rem}
.jx-way h3{font-family:'Cormorant Garamond',serif;font-size:1.9rem;margin:1.2rem 0 .4rem}
.jx-way p{color:var(--muted);line-height:1.7;margin-bottom:1.2rem;font-size:.93rem}
.jx-screen{perspective:1400px}
.jx-screen img{width:100%;display:block;border-radius:10px;transform:rotateY(-9deg) rotateX(3deg);transition:transform .8s var(--jx-ease);box-shadow:24px 30px 60px -28px rgba(20,10,0,.6)}
.jx-screen:hover img{transform:none}
.jx-way-phys{margin-top:3.5rem}
.jx-photos{position:relative;height:230px}
.jx-photos img{position:absolute;width:62%;aspect-ratio:4/3;object-fit:cover;border:6px solid #fffcf7;border-radius:4px;box-shadow:0 16px 34px -14px rgba(60,30,8,.5);transition:transform .6s var(--jx-ease)}
[data-theme="dark"] .jx-photos img{border-color:#2a2116}
.jx-photos img:nth-child(1){left:0;top:10px;transform:rotate(-5deg)}
.jx-photos img:nth-child(2){right:0;top:40px;transform:rotate(4deg)}
.jx-photos:hover img:nth-child(1){transform:rotate(-8deg) translateX(-8px)}
.jx-photos:hover img:nth-child(2){transform:rotate(7deg) translateX(8px)}
.jx-count-big{margin:.4rem 0 1.3rem}
.jx-count-big > div:first-child{font-size:.92rem;font-weight:600;color:var(--gold);margin-bottom:.5rem}
.jx-count-cells{display:flex;gap:.5rem}
.jx-cell{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:.5rem .2rem;text-align:center}
.jx-cell b{display:block;font-family:'Cormorant Garamond',serif;font-size:2rem;line-height:1;font-variant-numeric:tabular-nums}
.jx-cell b.flip{animation:jxFlip .45s var(--jx-ease)}
@keyframes jxFlip{from{transform:translateY(-.18em);opacity:.35}}
.jx-cell small{font-size:.68rem;color:var(--muted)}
.jx-ks-date{font-size:.8rem;color:var(--muted);margin-top:.45rem}
.jx-count-big.live .jx-count-cells{font-weight:700;color:var(--gold)}

/* ── Compteur de tours (Règles) ──────────────────────────────────── */
.jx-turns{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:center;margin:1.4rem 0 .6rem;padding:1.3rem;border:1px solid var(--border);border-radius:12px;background:var(--bg3)}
.jx-turns-board{display:flex;gap:6px;width:min(260px,58vw)}
.jx-turns-edge{position:relative;display:grid;grid-template-rows:repeat(8,1fr);width:30px;direction:ltr}
.jx-edge-n{display:grid;place-items:center;font-size:.8rem;font-weight:700;color:var(--muted);border-radius:4px;transition:background .3s,color .3s}
.jx-edge-n.key{color:var(--gold)}
.jx-edge-n.on{background:rgba(233,196,106,.35);color:var(--white)}
.jx-marker{position:absolute;left:50%;width:30px;height:12.5%;display:grid;place-items:center;transform:translate(-50%,0);transition:top .6s var(--jx-ease);
  font-size:1.35rem;color:#1a1a1a;font-family:'Apple Symbols','Segoe UI Symbol','DejaVu Sans',serif;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));pointer-events:none;top:87.5%}
.jx-marker.down{color:#6e3f14}
[data-theme="dark"] .jx-marker{color:#f0e8d8}
.jx-turns-grid{flex:1;aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);border-radius:3px;overflow:hidden;opacity:.55;box-shadow:0 0 0 3px #6b4424}
.jx-turns-grid i.l{background:var(--jx-l)}.jx-turns-grid i.d{background:var(--jx-d)}
.jx-turns-info{display:flex;flex-direction:column;gap:.9rem;min-width:0}
.jx-turn-count{display:flex;align-items:baseline;gap:.6rem}
.jx-turn-count small{font-size:1rem;font-weight:600;color:var(--gold)}
.jx-turn-count b{font-family:'Cormorant Garamond',serif;font-size:3.2rem;line-height:1;font-variant-numeric:tabular-nums;display:inline-block}
.jx-turn-count b.bump{animation:jxFlip .4s var(--jx-ease)}
.jx-turn-draw{display:flex;align-items:center;gap:.8rem;min-height:52px;opacity:0;transform:translateY(6px);transition:all .35s var(--jx-ease)}
.jx-turn-draw.on{opacity:1;transform:none}
.jx-turn-tag{font-weight:700;font-size:.8rem;padding:.25rem .6rem;border-radius:4px;background:var(--gold);color:#fffcf7}
[data-theme="dark"] .jx-turn-tag{color:#100d08}
.jx-turn-cards{display:flex}
.jx-turn-card{width:34px;height:41px;margin-right:-10px;transform-origin:50% 100%;animation:jxDeal .5s var(--jx-ease) both}
.jx-turn-card:nth-child(1){--r:-12deg}.jx-turn-card:nth-child(2){--r:0deg;animation-delay:.08s}.jx-turn-card:nth-child(3){--r:12deg;animation-delay:.16s}
.jx-turn-card{transform:rotate(var(--r))}
@keyframes jxDeal{from{transform:translateY(-20px) rotate(0);opacity:0}}
.jx-turn-tier{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:1.2rem;margin-left:.6rem}
.jx-turn-draw.dore .jx-turn-tier{color:var(--dore)}
.jx-turn-draw.rayonnant .jx-turn-tier{background:var(--jx-rainbow-txt);-webkit-background-clip:text;background-clip:text;color:transparent}
.jx-timeline{display:flex;gap:4px;align-items:center}
.jx-timeline i{flex:1;height:5px;border-radius:3px;background:var(--border);transition:background .3s}
.jx-timeline i.d{height:11px}
.jx-timeline i.past{background:rgba(110,63,20,.45)}
.jx-timeline i.now{background:var(--gold)}
.jx-timeline i.d.now.classic{background:#1a0e06}.jx-timeline i.d.now.dore{background:#d4a017}.jx-timeline i.d.now.rayonnant{background:var(--jx-rainbow)}
.jx-turns-cap{font-size:.84rem !important;line-height:1.6 !important}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width:900px){
  .jx-hero-grid,.jx-how-grid,.jx-ways-grid,.jx-puz-body{grid-template-columns:1fr}
  .jx-hero-text{text-align:center}
  .jx-hero .hero-sub{margin:0 auto 1.8rem}
  .jx-hero .hero-actions{justify-content:center}
  .jx-fan{height:clamp(300px,80vw,420px)}
  .jx-fan-card{width:clamp(130px,34vw,200px)}
  .jx-way-phys{margin-top:0}
  .jx-puz-body{justify-items:center}
  .jx-puz-board{width:100%;max-width:470px}
  .jx-step:nth-child(2){margin-left:1rem}.jx-step:nth-child(3){margin-left:2rem}
  .jx-photo{max-width:520px;margin:0 auto}
}
@media (max-width:640px){
  .jx-stage{aspect-ratio:3/5}
  .jx-stage-board{left:6%;top:2%;height:auto;width:88%}
  .jx-mate{left:6%;top:2%;width:88%;height:auto}
  .jx-hand{left:4%;right:4%;top:58%;height:20%}
  .jx-hand-card{width:29%;top:0}
  .jx-caption{left:4%;right:4%;top:80%;bottom:auto;min-height:0;text-align:center;z-index:8}
  .jx-stage-ui{height:9%}
  .jx-tier{grid-template-columns:1fr;gap:1rem}
  .jx-cards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:66%;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:-2rem;padding:0 2rem .6rem;scroll-padding-inline:2rem;scrollbar-width:none}
  .jx-cards::-webkit-scrollbar{display:none}
  .jx-flip{scroll-snap-align:start}
  .jx-tray{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
  .jx-deck{width:90px;height:126px}
  .jx-turns{grid-template-columns:1fr;justify-items:center;text-align:center}
  .jx-turn-count,.jx-turn-draw{justify-content:center}
  .jx-hero-ks{margin-left:auto;margin-right:auto}
  .jx-fan{height:clamp(260px,72vw,340px)}
  .jx-fan-card{width:29vw}
  .jx-fan-card:nth-child(1){--x:-62%}
  .jx-fan-card:nth-child(3){--x:62%}
  .jx-photo figcaption{left:.5rem}
}
@media (prefers-reduced-motion:reduce){
  .jx-home *,.jx-turns *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  html:not(.jx-ready) .jx-home .chess-deco,html:not(.jx-ready) .jx-hero .hero-title span,
  html:not(.jx-ready) .jx-hero-text > *,html:not(.jx-ready) .jx-fan-card{opacity:1;filter:none}
}

html[lang="ar"] .jx-caption{direction:rtl;text-align:right}
html[lang="ar"] .jx-card{direction:rtl}
html[lang="ar"] .jx-card-desc{text-align:right}

/* ════════════════ Cartes (rendu fidèle aux cartes physiques) ═══════════ */
.jc-card{position:relative;container-type:inline-size;aspect-ratio:1320/1845;border-radius:5.3% / 3.79%;width:100%;
  box-shadow:0 18px 36px -18px rgba(40,20,5,.45);direction:ltr;text-align:left;isolation:isolate;overflow:hidden}
.jc-card.t-classic{background:linear-gradient(160deg,#34343d 0%,#141419 45%,#2c2c34 100%)}
.jc-card.t-dore{background:#d4ae44}
.jc-card.t-rayonnant{background:linear-gradient(140deg,#a445ff 0%,#6a7dff 18%,#27c3d6 36%,#43c98d 48%,#f2a33a 62%,#ff6f8e 78%,#d24dff 100%)}
.jc-in{position:absolute;inset:1.55cqw;background:#fff;border-radius:3.9cqw;overflow:hidden}
.jc-tag{position:absolute;left:5.95cqw;top:4.1cqw;display:flex;align-items:center;gap:2.1cqw;font-family:'Archivo Black','Arial Black',sans-serif;
  font-size:2.7cqw;line-height:1;letter-spacing:.07em;text-transform:uppercase;color:#16161c;white-space:nowrap}
.jc-ico{display:block;width:2.75cqw;height:2.75cqw;border-radius:50%;background:#16161c;flex:none}
.t-dore .jc-tag{color:#d4ae44}
.t-dore .jc-ico{border-radius:.6cqw;background:#d4ae44}
.t-rayonnant .jc-tag span{background:linear-gradient(90deg,#4f7cff,#27c3a0 35%,#e8a93a 60%,#ff5fa2 85%);-webkit-background-clip:text;background-clip:text;color:transparent}
.t-rayonnant .jc-ico{border-radius:0;width:3cqw;height:3cqw;background:linear-gradient(135deg,#27c3d6,#4f7cff 45%,#f2a33a 70%,#ff5fa2);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.jc-art{position:absolute;left:18.15cqw;right:18.15cqw;top:6.8cqw;height:56.1cqw;display:grid;place-items:center}
.jc-art img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;-webkit-user-drag:none}
.jc-name{position:absolute;left:4cqw;right:4cqw;top:63.2cqw;height:9.5cqw;display:flex;align-items:center;justify-content:center;
  font-family:'Manrope','Helvetica Neue',Arial,sans-serif;font-weight:800;font-size:calc(6.75cqw * var(--ns,1));line-height:1.05;
  color:#16161c;text-align:center;white-space:nowrap;letter-spacing:-.01em}
.jc-bar{position:absolute;left:50%;top:75.9cqw;width:10.4cqw;height:.46cqw;border-radius:.3cqw;transform:translateX(-50%);background:#16161c}
.t-dore .jc-bar{background:#d4ae44}
.t-rayonnant .jc-bar{background:linear-gradient(90deg,#8a5cff,#27c3d6,#f2a33a,#ff5fa2)}
.jc-card .jc-in p.jc-desc{position:absolute;left:6.85cqw;right:6.85cqw;top:79.3cqw;bottom:4cqw;margin:0;overflow:hidden;
  font-family:'Manrope','Helvetica Neue',Arial,sans-serif;font-weight:500;font-size:calc(4.05cqw * var(--fs,1));line-height:1.52;
  color:#50505c;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
html[lang="ar"] .jc-card .jc-in p.jc-desc,html[lang="ar"] .jc-name{direction:rtl}
html[lang="ar"] .jc-card .jc-in p.jc-desc{text-align:right}

/* reflet : couche « foil » + reflet lumineux, pilotés par la souris */
.jx-holo > .jc-card{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .45s var(--jx-ease)}
.jx-holo.jx-hover > .jc-card{transition:transform .1s linear}
.jc-card .jx-shine{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .35s;
  background:linear-gradient(115deg,transparent 18%,rgba(190,200,215,.35) 38%,rgba(255,255,255,.1) 50%,rgba(170,185,205,.35) 62%,transparent 82%);
  background-size:260% 260%;background-position:var(--fx,50%) var(--fy,50%);mix-blend-mode:multiply}
.jc-card.t-dore .jx-shine{background-image:linear-gradient(115deg,transparent 15%,rgba(236,196,90,.45) 35%,rgba(255,244,200,.2) 50%,rgba(214,160,40,.45) 65%,transparent 85%)}
.jc-card.t-rayonnant .jx-shine{background-image:linear-gradient(115deg,transparent 10%,rgba(255,94,156,.38) 26%,rgba(255,214,70,.34) 38%,rgba(90,230,160,.34) 50%,rgba(90,190,255,.38) 62%,rgba(190,110,255,.38) 74%,transparent 90%)}
.jc-card .jx-shine::after{content:'';position:absolute;inset:0;border-radius:inherit;mix-blend-mode:screen;
  background:radial-gradient(circle at var(--mx,50%) var(--my,40%),rgba(255,255,255,.75),rgba(255,255,255,.18) 22%,transparent 46%)}
.jx-holo.jx-hover .jx-shine{opacity:1}
.jx-holo.jx-hover .jc-card.t-rayonnant .jx-shine{animation:jxFoil 5s linear infinite}
@keyframes jxFoil{50%{filter:hue-rotate(40deg)}}
.jx-front .jc-card .jc-in p.jc-desc{bottom:11cqw}

.jc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1rem}
@media(max-width:600px){.jc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.codex-filters .filter-btn{border-radius:6px}
.cards-grid .jc-wrap[hidden]{display:none}
.jx-deck-name{z-index:2}

/* Accueil : plateau aux tons clairs, même en thème sombre */
[data-theme="dark"] .jx-home{--jx-l:#f0d9b5;--jx-d:#b58863}

/* Fonds de sections très légèrement alternés */
.jx-home .jx-how,.jx-home .jx-draw-sec,.jx-home .jx-ways{background:var(--jx-alt);box-shadow:0 0 0 100vmax var(--jx-alt);clip-path:inset(0 -100vmax)}
:root{--jx-alt:#f2ebdb}
[data-theme="dark"]{--jx-alt:#151009}
.jx-home .section,.jx-home .jx-ways{position:relative}

/* Puzzles : texte et niveaux à gauche, plateau à droite */
.jx-puz-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,470px) minmax(0,270px);gap:2.4rem;align-items:start}
.jx-puz-right{order:0}
.jx-puz-aside{min-width:0}
.jx-tabs{flex-direction:column;align-items:stretch;gap:.35rem}
.jx-tab{align-items:flex-start}
.jx-puz-right{max-width:520px}
.jx-puz-left .section-title{margin-bottom:.8rem}
.jx-puz-left .jx-lead{margin-bottom:1.4rem}
.jx-puz-card{width:min(260px,100%)}
.jx-puz-btns .jx-sol{padding:.6rem 1.2rem;font-size:.85rem}
.jx-puz-right.solved .jx-board{animation:jxWin 1.2s ease}
@media(max-width:1200px){.jx-puz-grid{grid-template-columns:minmax(0,200px) minmax(0,1fr) minmax(0,240px);gap:1.6rem}}
@media(max-width:1000px){.jx-puz-grid{grid-template-columns:minmax(0,200px) minmax(0,1fr)}.jx-puz-aside{grid-column:1 / -1;display:flex;gap:1.5rem;align-items:flex-start}.jx-puz-aside .jx-puz-side{flex-direction:row;flex-wrap:wrap;align-items:center;gap:1rem}}
@media(max-width:900px){.jx-puz-grid{grid-template-columns:1fr}.jx-puz-right{width:100%;max-width:470px;margin:0;justify-self:center}.jx-tabs{flex-direction:row}.jx-puz-aside .jx-puz-side{flex-direction:column}}

/* Commandes de la présentation */
.jx-nav{width:30px;height:30px;border-radius:6px;border:1px solid rgba(26,14,6,.25);background:rgba(255,255,255,.5);cursor:pointer;position:relative;flex:none;transition:opacity .2s}
.jx-nav:disabled{opacity:.3;cursor:default}
.jx-play{border:1px solid rgba(26,14,6,.25);background:rgba(255,255,255,.5)}
.jx-play::before{background:var(--white)}

/* Indice « retourner » : le texte disparaît une fois la carte retournée */
.jx-hint{transition:opacity .25s}
.jx-flip.flipped .jx-hint{opacity:0}
.jx-hint-ico{width:15px;height:15px;display:block;overflow:visible}
.jx-hint-ico path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.jx-flip:hover .jx-hint-ico{transform:rotate(-40deg);transition:transform .5s}


.jx-nav .jx-curve{position:absolute;inset:0;margin:auto;width:16px;height:16px;overflow:visible}
.jx-nav .jx-curve path{fill:none;stroke:var(--white);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.jx-prev .jx-curve{transform:scaleX(-1)}
/* la flèche « retourner » disparaît avec le texte */
/* Codex : couleurs des filtres */
.codex-filters .filter-btn.classic{border-color:rgba(26,14,6,.45);color:var(--white)}
.codex-filters .filter-btn.classic.active{background:rgba(26,14,6,.1)}
[data-theme="dark"] .codex-filters .filter-btn.classic{border-color:rgba(240,232,216,.4);color:var(--white)}
.codex-filters .filter-btn.rayonnant{border-image:var(--jx-rainbow-txt) 1;border-radius:0}
.codex-filters .filter-btn.rayonnant span,.codex-filters .filter-btn.rayonnant{background:var(--jx-rainbow-txt);-webkit-background-clip:text;background-clip:text;color:transparent}
.codex-filters .filter-btn.rayonnant.active{background:var(--jx-rainbow-txt);-webkit-background-clip:text;background-clip:text;box-shadow:inset 0 0 0 999px rgba(122,32,106,.10)}
/* Compteur de tours : vrai échiquier */
.jx-turns-grid{opacity:1;box-shadow:none;display:block}
.jx-turns-grid .jx-board{box-shadow:0 0 0 3px #6b4424}

/* Puzzles : boutons côte à côte, niveaux centrés sous le titre */
.jx-puz-btns{flex-direction:row;gap:.7rem}
.jx-puz-btns .btn-secondary,.jx-puz-btns .jx-sol{padding:.55rem .9rem;font-size:.82rem;white-space:nowrap}
.jx-puz-left .jx-tabs{margin:2.2rem auto 0;align-self:center}
.jx-puz{display:flex;justify-content:center}
/* Barre de progression : vide au départ */
.jx-progress i{min-width:3px}

/* ── Codex : cartes retournables (même principe que l'accueil) ───── */
.cards-grid .jc-wrap{min-width:0}
.cards-grid .jx-flip{width:100%}
.jx-cap{overflow:hidden}
.jx-cap span{display:block}
/* pion transporté par une tour (carte « Tours de siège ») */
.jx-pc.jx-carry::after{content:'';position:absolute;right:3%;bottom:5%;width:34%;height:34%;border-radius:50%;
  background:#fff;box-shadow:0 0 0 1.4px #1a1a1a,0 1px 2px rgba(0,0,0,.4);z-index:3;animation:jxPop .35s var(--jx-ease)}
.jx-badge.win.green{background:linear-gradient(90deg,#43c98d,#1f9d55);box-shadow:0 0 16px rgba(67,201,141,.7)}

/* ── Codex : étiquettes de filtre ────────────────────────────────── */
.codex-filters .filter-btn.all{border-color:var(--gold);color:var(--gold)}
.codex-filters .filter-btn.all.active{background:rgba(110,63,20,.10)}
.codex-filters .filter-btn.dore{border-color:#9c6d06;color:#9c6d06}
.codex-filters .filter-btn.dore.active{background:rgba(156,109,6,.14)}
[data-theme="dark"] .codex-filters .filter-btn.all{border-color:var(--gold);color:var(--gold)}
[data-theme="dark"] .codex-filters .filter-btn.all.active{background:rgba(233,196,106,.12)}
[data-theme="dark"] .codex-filters .filter-btn.dore{border-color:#d7a323;color:#d7a323}
[data-theme="dark"] .codex-filters .filter-btn.dore.active{background:rgba(215,163,35,.14)}

/* ── Accueil : formulaire dans le héros ── */
form.jx-notify--hero{margin-bottom:1rem}
@media (max-width:900px){form.jx-notify--hero{margin-left:auto;margin-right:auto;text-align:center}}
/* ── Deux façons de jouer : tout visible d'un coup sur ordinateur ── */
@media (min-width:901px){
  .jx-ways{padding:3rem 2rem 3.5rem}
  .jx-ways .jx-lead{margin-bottom:.9rem;max-width:none}
  .jx-ways .section-title{margin-bottom:.6rem;font-size:clamp(2rem,4vw,2.7rem)}
  .jx-ways-grid{grid-template-columns:.78fr 1.22fr;gap:2.8rem;align-items:center;margin-top:0}
  .jx-ways .jx-way h3{font-size:1.85rem;margin:.8rem 0 .3rem}
  .jx-ways .jx-way:not(.jx-way-phys) p{font-size:1.05rem}
  /* carte version physique : photos, texte, inscription, bouton Kickstarter, puis compteur */
  .jx-ways .jx-way-phys{margin-top:0;padding:1rem 1.8rem 1.2rem;border:1px solid var(--border);border-radius:14px;background:rgba(255,252,247,.45)}
  [data-theme="dark"] .jx-ways .jx-way-phys{background:rgba(255,255,255,.03)}
  .jx-ways .jx-way-phys .jx-photos{height:190px;max-width:430px;margin:0 auto}
  .jx-ways .jx-way-phys .jx-photos img{width:50%}
  .jx-ways .jx-way-phys .jx-photos img:nth-child(1){top:4px}
  .jx-ways .jx-way-phys .jx-photos img:nth-child(2){top:30px}
  .jx-ways .jx-way-phys h3{margin-top:.2rem}
  .jx-ways .jx-way-phys > p{margin-bottom:.7rem}
  .jx-ways .jx-count-big{margin:.9rem 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1rem;align-items:center}
  .jx-ways .jx-count-big > div:first-child{grid-column:1;grid-row:1;margin-bottom:0;align-self:end}
  .jx-ways .jx-count-big .jx-count-cells{grid-column:2;grid-row:1 / span 2;max-width:330px}
  .jx-ways .jx-count-big .jx-ks-date{grid-column:1;grid-row:2;align-self:start;margin-top:.15rem;font-size:.78rem}
  .jx-ways .jx-count-big > div:first-child{font-size:.85rem;margin-bottom:.35rem}
  .jx-ways .jx-count-big .jx-cell{padding:.25rem .15rem}
  .jx-ways .jx-count-big .jx-cell b{font-size:1.3rem}
  .jx-ways .jx-ks-date{margin-top:.3rem}
  .jx-ways form.jx-notify{margin-bottom:.7rem}
  .jx-ways .jx-way-phys form.jx-notify p{margin-bottom:0}
}
.jx-way-phys .jx-ks-cta{margin-top:.2rem}
/* ── Page Jouer en ligne : sections déplacées depuis l'accueil ── */
.jx-play-more .section{max-width:1100px}

/* ── Héros : compte à rebours visible dès l'arrivée sur la page ── */
@media (min-width:901px){
  .jx-hero{padding:1.5rem 2rem 2rem}
  .jx-hero .hero-title{font-size:clamp(3.2rem,7.5vw,6.2rem);margin-bottom:1rem}
  .jx-hero .hero-sub{margin-bottom:1.3rem;font-size:clamp(1rem,1.4vw,1.1rem)}
  .jx-hero-ks{margin-top:1.1rem;max-width:470px}
  .jx-hero-ks-top{margin-bottom:.4rem}
  .jx-hero .jx-cells-sm .jx-cell{padding:.3rem .15rem}
  .jx-hero .jx-cells-sm .jx-cell b{font-size:1.35rem}
}

/* Compteur : animation isolée pour éviter les clignotements autour (Safari) */
.jx-count-cells{isolation:isolate}
.jx-cell b{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.jx-hero-ks .jx-ks-date{margin-top:.4rem}

/* ── Téléphone / tablette : les cartes juste après le titre ── */
@media (max-width:900px){
  .jx-hero{padding-top:1.5rem}
  .jx-hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:0;text-align:center}
  .jx-hero-text{display:contents}
  .jx-hero .hero-title{order:1;margin-bottom:.4rem}
  .jx-hero .jx-fan{order:2;margin-bottom:1.2rem}
  .jx-hero-text > *:not(.hero-title){order:3}
  .jx-hero form.jx-notify--hero,.jx-hero .jx-hero-ks{width:100%}
}
@media (max-width:640px){
  .jx-hero .jx-fan{height:clamp(180px,49vw,240px);margin-bottom:.6rem}
}

/* ── Téléphone : photo de la version physique avant les 3 étapes ── */
@media (max-width:900px){
  .jx-how-grid .jx-photo{order:-1}
}

/* ── Téléphone : espaces resserrés pour voir le bouton Kickstarter dès l'arrivée ── */
@media (max-width:640px){
  .jx-hero{padding-top:.75rem}
  .jx-hero .hero-sub{margin-bottom:1rem}
  .jx-hero form.jx-notify--hero{margin-bottom:.7rem}
  .jx-hero .jx-notify-input{padding-top:.7rem;padding-bottom:.7rem}
  .jx-hero .jx-notify-btn{padding-top:.72rem;padding-bottom:.72rem}
}

/* ── V37 : encart « Version physique » en haut à gauche ── */
.jx-photo figcaption{top:1.4rem;bottom:auto}
.jx-photo img,.jx-photos img{height:auto}

/* V38 : en bas de l'accueil, la photo de gauche passe devant celle de droite */
.jx-photos img:nth-child(1){z-index:2}

/* ═══════════════════ V43 ═══════════════════ */
/* « Les règles en 3 étapes » : plus de pointillés */
.jx-steps::before{display:none}
/* Codex : filtre Rayonnant arrondi comme les autres (contour dégradé par masque) */
.codex-filters .filter-btn.rayonnant{position:relative;border-image:none;border-color:transparent;border-radius:6px}
.codex-filters .filter-btn.rayonnant::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--jx-rainbow-txt);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}

/* ═══ V55 : page Jouer (héros lanceur, partie fantôme, puzzle du jour) ═══ */
.jx-play-hero{position:relative;overflow:hidden;padding:clamp(3rem,7vw,5.5rem) 2rem clamp(2.5rem,6vw,4.5rem)}
.jx-play-in{position:relative;z-index:1;max-width:1100px;margin:0 auto}
.jx-play-copy{max-width:540px}
.jx-play-hero h1{margin-bottom:1rem}
.jx-play-sub{color:var(--muted);line-height:1.7;font-size:1.05rem;margin-bottom:2rem;max-width:44ch}
.btn-primary.jx-play-btn{display:inline-flex;align-items:center;justify-content:center;gap:.75rem;font-size:1.3rem;padding:0 3.6rem;min-height:62px;border-radius:6px;letter-spacing:.06em;box-shadow:0 12px 30px -12px rgba(110,63,20,.6)}
.jx-play-btn::before{content:'';flex:none;width:0;height:0;border-style:solid;border-width:.45em 0 .45em .72em;border-color:transparent transparent transparent currentColor}
[dir=rtl] .jx-play-btn::before{border-width:.45em .72em .45em 0;border-color:transparent currentColor transparent transparent}
.btn-primary.jx-play-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(110,63,20,.7)}
.jx-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin-top:1.75rem;max-width:540px}
.jx-mode{display:flex;flex-direction:column;gap:.1rem;padding:.8rem .9rem;border:1px solid var(--border);border-radius:8px;background:color-mix(in srgb,var(--bg3) 88%,transparent);transition:border-color .2s,transform .2s,box-shadow .2s}
.jx-mode svg{width:22px;height:22px;color:var(--gold);margin-bottom:.4rem}
.jx-mode-t{font-weight:600;font-size:.92rem;color:var(--white)}
.jx-mode-s{font-size:.78rem;color:var(--muted)}
.jx-mode-soon{border-style:dashed;background:transparent}
.jx-mode-soon .jx-mode-s u{color:var(--gold);font-weight:700;text-underline-offset:2px;margin-inline-start:.35rem}
.jx-mode:hover,.jx-mode:focus-visible{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 8px 20px -12px rgba(110,63,20,.45)}
.jx-join{margin-top:1.1rem;max-width:540px;display:flex;align-items:center;gap:.5rem 1rem;flex-wrap:wrap}
.jx-join label{font-size:.88rem;color:var(--muted)}
.jx-join-row{display:flex;gap:.5rem}
.jx-join input{width:9.5rem;height:44px;padding:0 .8rem;border:1px solid var(--border);border-radius:3px;background:var(--bg3);color:var(--white);font:600 .95rem/1 'Inter',sans-serif;letter-spacing:.18em;text-transform:uppercase}
.jx-join input::placeholder{letter-spacing:.12em;color:var(--muted);opacity:.75}
.jx-join input:focus{outline:2px solid var(--gold);outline-offset:1px}
.jx-join .btn-secondary{height:44px;padding:0 1.2rem;font-size:.88rem}
.jx-join-err{flex-basis:100%;font-size:.8rem;color:#b3261e}
[data-theme="dark"] .jx-join-err{color:#f08a7e}
.jx-join-err:empty{display:none}

.jx-ghost{position:absolute;z-index:0;top:53%;inset-inline-end:max(1.5rem,calc((100% - 1100px) / 2));width:min(430px,36vw);aspect-ratio:1;transform:translateY(-50%) perspective(1400px) rotateX(22deg) rotateZ(-7deg);opacity:.2;pointer-events:none;transition:opacity 1.2s ease;-webkit-mask-image:radial-gradient(closest-side,#000 64%,transparent 100%);mask-image:radial-gradient(closest-side,#000 64%,transparent 100%)}
[dir=rtl] .jx-ghost{transform:translateY(-50%) perspective(1400px) rotateX(22deg) rotateZ(7deg)}
[data-theme="dark"] .jx-ghost{opacity:.17;-webkit-mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.85) 30%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.18) 78%,transparent 100%);mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.85) 30%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.18) 78%,transparent 100%)}
.jx-ghost.fade{opacity:0!important}
.jx-ghost-board{width:100%;height:100%}

@media(max-width:900px){
  .jx-ghost{top:auto;bottom:-14%;inset-inline-end:-22%;width:min(420px,90vw);opacity:.11;transform:perspective(1200px) rotateX(26deg) rotateZ(-8deg)}
  [data-theme="dark"] .jx-ghost{opacity:.1}
}
@media(max-width:600px){
  .jx-play-hero{padding-inline:1.25rem}
  .btn-primary.jx-play-btn{width:100%}
  .jx-modes{gap:.45rem}
  .jx-mode{padding:.7rem .6rem}
  .jx-mode-t{font-size:.86rem}
  .jx-mode-s{font-size:.72rem}
  .jx-join-row{flex:1}
  .jx-join input{flex:1;width:auto;min-width:0}
}


.jx-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.jx-noscroll,.jx-noscroll body{overflow:hidden}
.jx-pd-band{background:var(--bg2);border-block:1px solid var(--border)}
.jx-pd{padding-block:4rem}
.jx-pd-head{text-align:center;max-width:640px;margin:0 auto 2.2rem}
.jx-pd-head .section-title{margin-bottom:.7rem}
.jx-pd-head .jx-lead{margin:0 auto}
.jx-pd-grid{display:grid;grid-template-columns:minmax(0,400px) auto;gap:2.6rem;justify-content:center;align-items:start}
.jx-pd-board{width:100%}
.jx-pd-board .jx-sq{cursor:pointer}
.jx-pd-board .jx-sq:focus-visible{outline:3px solid #2f6fd6;outline-offset:-3px;z-index:6}
.jx-pd-board.bad{animation:jxShake .4s}
#jxDaily .jx-sq.hl-check::after{background:radial-gradient(circle,rgba(245,166,35,.9) 0,rgba(245,166,35,.4) 45%,transparent 72%)}
#jxDaily .jx-sq.hl-mate::after{background:radial-gradient(circle,rgba(220,40,30,.9) 0,rgba(220,40,30,.4) 45%,transparent 72%)}
#jxDaily.solved .jx-pd-board{animation:jxWin 1.2s ease}
.jx-pd-side{display:flex;flex-direction:column;gap:1rem;width:220px}
.jx-pd-side.two{width:350px}
.jx-pd-ml{font-size:.9rem;font-weight:600;color:var(--gold);margin-bottom:.7rem}
.jx-pd-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem}
.jx-pd-side.two .jx-pd-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.jx-pd-minis{display:none}
.jx-pd-side .jx-pd-sol{height:44px;padding:0 1.1rem;font-size:.88rem;align-self:flex-start}
.jx-pd-sol[hidden],.jx-pd-done[hidden],.jx-pd-modal[hidden]{display:none}
.jx-pd-done{margin:1.8rem auto 0;max-width:calc(400px + 2.6rem + 350px);display:flex;align-items:center;gap:1.2rem 1.6rem;flex-wrap:wrap;padding:1.1rem 1.3rem;border:1px solid var(--border);border-radius:8px;background:var(--bg3);animation:fadeUp .45s ease both}
.jx-pd-dhead{flex:1 1 200px}
.jx-pd-dt{font-weight:700;font-size:1.05rem;margin-bottom:.2rem}
.jx-pd-done.ok .jx-pd-dt{color:#3d8a2a}
[data-theme="dark"] .jx-pd-done.ok .jx-pd-dt{color:#8fd16f}
.jx-pd-next{font-size:.82rem;color:var(--muted)}
.jx-pd-cd{color:var(--white);font-variant-numeric:tabular-nums;letter-spacing:.03em}
.jx-pd-stats{display:flex;gap:.5rem}
.jx-pd-stat{padding:.55rem .8rem;border-radius:6px;background:var(--bg2);min-width:110px}
.jx-pd-stat b{display:block;font:700 1.8rem/1 'Cormorant Garamond',serif;color:var(--gold)}
.jx-pd-stat span{font-size:.74rem;color:var(--muted)}
.jx-pd-dbtns{display:flex;gap:.5rem;flex-wrap:wrap}
.jx-pd-dbtns .btn-primary,.jx-pd-dbtns .btn-secondary{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 1.1rem;font-size:.88rem;text-align:center}
.jx-pd-mini{flex:none;width:76px;aspect-ratio:4/5;padding:3px;border:0;border-radius:7px;cursor:pointer;font:inherit}
.jx-pd-mini.t-classic{background:linear-gradient(160deg,#34343d 0%,#141419 45%,#2c2c34 100%)}
.jx-pd-mini.t-dore{background:#d4ae44}
.jx-pd-mini.t-rayonnant{background:linear-gradient(140deg,#a445ff 0%,#6a7dff 18%,#27c3d6 36%,#43c98d 48%,#f2a33a 62%,#ff6f8e 78%,#d24dff 100%)}
.jx-pd-mini-in{display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:100%;height:100%;background:#fff;border-radius:5px;padding:5px 4px 4px}
.jx-pd-mini-in img{width:68%;flex:1;min-height:0;object-fit:contain}
.jx-pd-mini-n{font:600 10px/1.15 Inter,sans-serif;color:#1a0e06;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jx-pd-mini:focus-visible{outline:3px solid #2f6fd6;outline-offset:2px}
.jx-pd-modal{position:fixed;inset:0;z-index:2000;background:rgba(16,10,4,.72);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1.5rem}
.jx-pd-mcard{width:min(290px,78vw)}
.jx-pd-mclose{background:var(--bg3)!important;height:44px;padding:0 1.4rem}
@media(max-width:760px){
  .jx-pd{padding-block:3rem;padding-inline:1.25rem}
  .jx-pd-head{margin-bottom:1.4rem}
  .jx-pd-grid{grid-template-columns:minmax(0,1fr);gap:.9rem}
  .jx-pd-board{max-width:440px;margin:0 auto}
  .jx-pd-side,.jx-pd-side.two{width:100%;max-width:440px;margin:0 auto;gap:.7rem}
  .jx-pd-mods{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
  .jx-pd-ml{margin:0}
  .jx-pd-ml::after{content:'\00a0:'}
  html[lang="en"] .jx-pd-ml::after,html[lang="hi"] .jx-pd-ml::after,html[lang="ar"] .jx-pd-ml::after,html[lang="es"] .jx-pd-ml::after,html[lang="pt"] .jx-pd-ml::after,html[lang="ru"] .jx-pd-ml::after{content:':'}
  .jx-pd-cards{display:none}
  .jx-pd-minis{display:flex;gap:.5rem}
  .jx-pd-side .jx-pd-sol{align-self:stretch}
  .jx-pd-done{margin-top:1rem;flex-direction:column;align-items:stretch;gap:.8rem}
  .jx-pd-dhead{flex:none}
  .jx-pd-stat{flex:1}
  .jx-pd-dbtns{flex-direction:row}
  .jx-pd-dbtns .jx-pd-play{flex:1}
}
html[lang="ar"] .jx-pd-head .section-title,html[lang="ar"] .jx-pd-head .jx-lead{text-align:center}
@media(min-width:901px){.jx-modes{grid-template-columns:repeat(4,minmax(0,1fr));max-width:640px;gap:.5rem}.jx-mode{padding:.75rem .7rem}.jx-mode-t{font-size:.86rem;line-height:1.25}.jx-mode-s{font-size:.74rem}.jx-mode-soon .jx-mode-s u{display:block;margin:.1rem 0 0}}
@media(min-width:901px){.jx-play-copy{max-width:640px}}
@media(min-width:761px){.jx-pd-dbtns{order:1}.jx-pd-stats{order:2}}
@media(min-width:761px){.jx-pd-done{flex-wrap:nowrap;gap:1.1rem}.jx-pd-dhead{flex:1 1 0;min-width:0}.jx-pd-dbtns{flex-wrap:nowrap}.jx-pd-stat{min-width:0;padding:.5rem .7rem}.jx-pd-stat span{white-space:nowrap}}
@media(min-width:901px){.jx-play-copy{max-width:560px}.jx-modes{max-width:560px;gap:.45rem}.jx-mode{padding:.6rem .6rem}.jx-mode svg{width:18px;height:18px;margin-bottom:.3rem}.jx-mode-t{font-size:.8rem}.jx-mode-s{font-size:.7rem}}
.jx-ghost{width:min(520px,42vw)}
[data-theme="dark"] .jx-ghost{--jx-l:#e6d3b3;--jx-d:#5e4027}
@media(min-width:901px){.jx-ghost{top:56%}}
.jx-mode-soon{position:relative;border:1.5px dashed color-mix(in srgb,var(--gold) 65%,var(--border))}
.jx-mode-badge{position:absolute;top:.5rem;inset-inline-end:.5rem;padding:.18rem .45rem;border-radius:3px;background:var(--gold);color:var(--bg);font-size:.66rem;font-weight:700;letter-spacing:.02em;line-height:1.2;white-space:nowrap}
.jx-mode-soon:hover .jx-mode-badge{filter:brightness(1.1)}
.jx-ghost .jx-pc span{filter:none}
.jx-ghost{--jx-l:#dfc397}
[data-theme="dark"] .jx-ghost{--jx-l:#cdb088}
.jx-pd-done.ko .jx-pd-dt{color:#b3261e}
[data-theme="dark"] .jx-pd-done.ko .jx-pd-dt{color:#f08a7e}
.jx-ghost{-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0,#000 50%,transparent 74%);mask-image:radial-gradient(circle at 50% 50%,#000 0,#000 50%,transparent 74%)}
[data-theme="dark"] .jx-ghost{-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0,rgba(0,0,0,.85) 24%,rgba(0,0,0,.5) 44%,rgba(0,0,0,.18) 62%,transparent 76%);mask-image:radial-gradient(circle at 50% 50%,#000 0,rgba(0,0,0,.85) 24%,rgba(0,0,0,.5) 44%,rgba(0,0,0,.18) 62%,transparent 76%)}
@media(max-width:900px){.jx-ghost{top:2%;bottom:auto;inset-inline-end:-36%;width:min(400px,92vw)}}

/* V55 : carte(s) du puzzle alignées sur l'échiquier (tailles calculées en JS) */
@media(min-width:761px){
  .jx-pd-side,.jx-pd-side.two{width:auto}
  .jx-pd-ml{line-height:1.2}
  .jx-pd-cards{display:flex;gap:16px}
  .jx-pd-card{flex:none;width:220px}
  .jx-pd-side .jx-pd-sol{margin-top:auto}
}
.jx-pd-card .jx-flip,.jx-pd-card .jx-pd-flat{width:100%}
.jx-pd-mcard .jx-flip{width:100%}
/* miniatures (téléphone) */
.jx-pd-mini{position:relative;width:86px;aspect-ratio:4/5}
.jx-pd-mini-in{justify-content:flex-start;gap:3px;padding:4px 4px 5px}
.jx-pd-mini-in img{width:86%;flex:0 1 auto;height:62%;object-fit:contain}
.jx-pd-mini-n{font-size:10.5px}
.jx-pd-zoom{position:absolute;top:-7px;inset-inline-end:-7px;width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--bg);display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.jx-pd-zoom svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
@media(prefers-reduced-motion:no-preference){.jx-pd-zoom{animation:jxZoomHint 2.4s ease-in-out 1.2s 2}}
@keyframes jxZoomHint{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}
@media(max-width:760px){.jx-pd-mods{gap:1rem}.jx-pd-minis{gap:.75rem;padding-top:7px;padding-inline-end:7px}}

/* flèche « Voir l'effet » : revient à sa place aussi doucement qu'elle pivote */
.jx-hint-ico{transition:transform .5s}
/* bouton solution plus haut (×1,5) sur ordinateur ; panneau de fin */
@media(min-width:761px){
  .jx-pd-done{flex-wrap:nowrap;gap:.9rem .8rem;padding:1rem 1.15rem;margin-top:1.8rem;margin-right:auto}
  .jx-pd-dhead{flex:1 1 auto;min-width:8.5rem}
  .jx-pd-dbtns{flex:none}
  .jx-pd-stats{flex:0 1 auto;min-width:0}
  .jx-pd-stat{flex:0 1 auto;min-width:0}
  .jx-pd-done{justify-content:space-between}
  .jx-pd-dbtns{flex-wrap:nowrap;gap:.45rem}
  .jx-pd-dbtns .btn-primary,.jx-pd-dbtns .btn-secondary{min-height:44px;padding:0 .85rem;font-size:.84rem;white-space:nowrap}
  .jx-pd-stats{gap:.4rem}
  .jx-pd-stat{padding:.45rem .5rem}
  .jx-pd-stat > span{display:block;line-height:1.25;white-space:nowrap}
  .jx-pd-dhead{flex:1 1 auto}
}
.jx-pd-cd{display:block;margin-top:.1rem}
.jx-pd-side .jx-pd-sol{flex-shrink:0}
.jx-pd-dbtns .jx-pd-again{width:44px;min-width:44px;padding:0!important;display:flex;align-items:center;justify-content:center}
.jx-pd-again svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s}
.jx-pd-again:hover svg{transform:rotate(-40deg)}
.jx-play-hero{padding-top:clamp(2rem,4.2vw,3.4rem)}
.jx-ghost{opacity:.3}
[data-theme="dark"] .jx-ghost{opacity:.26}
@media(max-width:900px){.jx-ghost{opacity:.17}[data-theme="dark"] .jx-ghost{opacity:.15}}
.jx-ghost{opacity:.4}
[data-theme="dark"] .jx-ghost{opacity:.26}
@media(max-width:900px){.jx-ghost{opacity:.23}[data-theme="dark"] .jx-ghost{opacity:.15}}
.jx-ghost{opacity:.3}
[data-theme="dark"] .jx-ghost{opacity:.26}
@media(max-width:900px){.jx-ghost{opacity:.17}[data-theme="dark"] .jx-ghost{opacity:.15}}

/* ═══ V59 : vidéo « Comment jouer » — miniature cliquable, lecteur YouTube chargé au clic ═══ */
.jx-video{position:relative;margin:0}
/* V60 : box-sizing:content-box — le 16/9 s'applique à l'intérieur du cadre blanc. Avant, il s'appliquait
   cadre compris : l'intérieur était un peu trop large et le lecteur YouTube ajoutait des bandes noires sur les côtés. */
.jx-video-link,.jx-video-frame{display:block;position:relative;box-sizing:content-box;aspect-ratio:16/9;border:8px solid #fffcf7;border-radius:8px;overflow:hidden;background:#1a130a;box-shadow:0 24px 50px -18px rgba(60,30,8,.4)}
[data-theme="dark"] .jx-video-link,[data-theme="dark"] .jx-video-frame{border-color:#2a2116}
.jx-video-link{cursor:pointer}
.jx-video-link img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .6s var(--jx-ease)}
.jx-video-link:hover img,.jx-video-link:focus-visible img{transform:scale(1.03)}
.jx-video-link:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.jx-video-play{position:absolute;left:50%;top:50%;width:clamp(54px,14%,88px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:rgba(110,63,20,.94);color:#fffcf7;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 28px -8px rgba(40,20,5,.65),0 0 0 6px rgba(255,252,247,.6);transition:transform .25s var(--jx-ease),background .25s}
.jx-video-play svg{width:46%;height:46%;margin-left:5%;fill:currentColor}
.jx-video-link:hover .jx-video-play,.jx-video-link:focus-visible .jx-video-play{transform:translate(-50%,-50%) scale(1.09);background:#8a4f1a}
.jx-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* accueil : légèrement inclinée comme les photos, droite au survol et pendant la lecture */
.jx-video-home{transform:rotate(1.6deg);transition:transform .6s var(--jx-ease)}
.jx-video-home:hover,.jx-video-home:focus-within,.jx-video-home.is-playing{transform:none}
@media (max-width:900px){
  .jx-video-home{max-width:560px;width:100%;margin:0 auto;transform:none}
  .jx-how-grid .jx-video{order:-1}
}
/* page Règles : sous le titre, sur toute la largeur du texte */
.jx-video-rules{margin:0 0 2.4rem}
@media (max-width:640px){.jx-video-link,.jx-video-frame{border-width:5px}}
@media (prefers-reduced-motion:reduce){.jx-video-home,.jx-video-link img,.jx-video-play{transition:none}.jx-video-home{transform:none}}
/* ═══ fin du bloc V59 (vidéo) ═══ */

/* V61 : puzzle du jour — pion Amalgame, choix de promotion */
.jx-pc.jx-amal::after{content:'';position:absolute;inset:16%;border:2px solid #d4a830;border-radius:50%;box-shadow:0 0 6px rgba(212,168,48,.7);pointer-events:none}
.jx-pd-promo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8;display:flex;gap:6px;padding:8px;border-radius:12px;
  background:var(--card,#fbf5ea);border:1px solid rgba(139,69,19,.35);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.jx-pc-btn{width:min(13cqw,64px);height:min(13cqw,64px);display:grid;place-items:center;border-radius:9px;border:1px solid rgba(139,69,19,.3);
  background:rgba(255,255,255,.55);cursor:pointer;font-size:min(10cqw,48px);line-height:1;padding:0;font-family:inherit}
.jx-pc-btn.w{color:#fff;text-shadow:0 0 1px rgba(0,0,0,.9),0 1px 2px rgba(0,0,0,.4)}.jx-pc-btn.b{color:#1a1a1a}
.jx-pc-btn:hover,.jx-pc-btn:focus-visible{background:#e9c46a;outline:none}
[data-theme=dark] .jx-pd-promo{background:#1d1a16;border-color:#4a3c2c}