/* Tokyo Cards · proposition de refonte (Orylis) */
:root{
  --bg:#08070f; --bg2:#0e0d19; --surf:#15142a; --surf2:#1c1b33;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --tx:#f6f4ff; --mut:#aeabc6; --mut2:#8a87a6;
  --gold:#ffb21a; --gold2:#ffd36b; --red:#ff4130;
  --holo:linear-gradient(100deg,#ff8ad8 0%,#ffd36b 22%,#8dffcf 44%,#7cc8ff 66%,#c59bff 84%,#ff8ad8 100%);
  --r:22px; --r-s:14px;
  --f-d:'Dela Gothic One',system-ui,sans-serif;
  --f-u:'Space Grotesk',system-ui,sans-serif;
  --f-b:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --pad:clamp(20px,4vw,56px);
  --sec:clamp(80px,9vw,128px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.vid,html.statique{scroll-behavior:auto}
body{margin:0;background:var(--bg);color:var(--tx);font:400 17px/1.6 var(--f-b);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}
ul,ol{list-style:none;margin:0;padding:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--gold);color:#120c00;padding:10px 16px;border-radius:10px;font-weight:600}
.skip:focus{top:12px}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
.jp{font-family:'Noto Sans JP',var(--f-b);font-weight:700;font-size:.9em;letter-spacing:.08em;color:var(--mut2);white-space:nowrap}
.holo-txt{font-style:normal;background:var(--holo);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:holoTxt 7s linear infinite}
@keyframes holoTxt{to{background-position:200% 0}}
.stars{color:var(--gold);letter-spacing:.08em}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 26px;border-radius:999px;font:600 16px/1 var(--f-u);letter-spacing:.01em;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s}
.btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.btn-gold{background:linear-gradient(180deg,#ffc94a,var(--gold));color:#1a1000;box-shadow:0 10px 30px -8px rgba(255,178,26,.6),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 40px -8px rgba(255,178,26,.75),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-gold:hover svg{transform:translateX(4px)}
.btn-ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-sm{height:46px;padding:0 20px;font-size:15px}

/* ---------- en-tête ---------- */
.top{position:fixed;inset:0 0 auto;z-index:50;transition:background .4s,border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
.top.on{background:rgba(8,7,15,.72);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-color:var(--line)}
.top-in{max-width:1440px;margin:0 auto;padding:14px var(--pad);display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(255,178,26,.35))}
.brand-txt{font:400 15px/.92 var(--f-d);letter-spacing:.02em}
.nav{display:flex;gap:4px;margin-left:12px}
.nav a{font:500 15px/1 var(--f-u);padding:10px 14px;border-radius:999px;color:#e6e3f7;transition:background .25s}
.nav a:hover{background:rgba(255,255,255,.08)}
.top-act{margin-left:auto;display:flex;align-items:center;gap:6px}
.ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;transition:background .25s}
.ico:hover{background:rgba(255,255,255,.08)}
.ico svg,.cart svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cart{display:flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 14px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);font:600 15px/1 var(--f-u)}
.cart span{min-width:20px;height:20px;border-radius:10px;background:var(--gold);color:#1a1000;font-size:12px;display:grid;place-items:center}
.burger{display:none}

/* ---------- HERO ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:820px;max-height:1100px;overflow:hidden;isolation:isolate;background:#0b0a14}
.hero-bg{position:absolute;inset:-6%;z-index:0;will-change:transform}
.hero-pan{position:absolute;inset:0}
.hero-pan img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:saturate(1.15) contrast(1.05)}
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(120% 70% at 50% 34%,rgba(8,7,15,.18) 0%,rgba(8,7,15,.62) 58%,rgba(8,7,15,.9) 100%),
  linear-gradient(180deg,rgba(8,7,15,.72) 0%,rgba(8,7,15,.35) 26%,rgba(8,7,15,.25) 48%,rgba(8,7,15,.82) 80%,var(--bg) 100%)}
.hero-veil::after{content:"";position:absolute;inset:0;opacity:.18;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-fx{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
.vert{position:absolute;z-index:3;left:calc(var(--pad) - 4px);top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font:500 13px/1 'Noto Sans JP',sans-serif;letter-spacing:.32em;color:rgba(255,255,255,.4)}
.hero-txt{position:relative;z-index:6;max-width:1240px;margin:0 auto;padding:clamp(118px,15vh,150px) var(--pad) 0;text-align:center}
.kicker{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:999px;background:rgba(8,7,15,.5);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:500 14px/1 var(--f-u);letter-spacing:.02em}
.kicker .jp{color:var(--gold2)}
.dot{width:8px;height:8px;border-radius:50%;background:#3dff9a;box-shadow:0 0 0 4px rgba(61,255,154,.18);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(61,255,154,0)}}
h1{margin:20px auto 0;font:400 clamp(40px,5.3vw,78px)/1.04 var(--f-d);letter-spacing:-.01em;text-shadow:0 6px 40px rgba(0,0,0,.55)}
h1 .l{display:block}
h1 .l>span,h1 em{display:inline-block}
h1 em{filter:drop-shadow(0 0 22px rgba(255,211,107,.35))}
.lead{max-width:620px;margin:22px auto 0;color:#e9e6f7;font-size:clamp(16px,1.35vw,19px);text-shadow:0 2px 18px rgba(0,0,0,.7)}
.ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* rubans */
.ribbons{position:absolute;z-index:3;left:0;width:100%;bottom:2%;height:46%;pointer-events:none;overflow:visible}
.rb{fill:none}
.rb1{stroke:url(#rg);stroke-width:46;filter:drop-shadow(0 10px 24px rgba(255,65,48,.45))}
.rb2{stroke:rgba(255,255,255,.07);stroke-width:40}
.rt{font:400 22px var(--f-d);letter-spacing:.06em;dominant-baseline:central}
.rt1{fill:#1a0d00}
.rt2{fill:rgba(255,255,255,.55);font-size:20px}

/* éventail */
.fan{--cw:clamp(150px,15.2vw,226px);--sx:1;position:absolute;z-index:5;left:50%;bottom:calc(var(--cw) * .14);width:0;height:calc(var(--cw) * 1.4);perspective:1400px}
.slot{position:absolute;left:0;bottom:0;width:var(--cw);z-index:var(--z);
  transform:translateX(-50%) translateX(calc(var(--x) * var(--cw) * var(--sx))) translateY(calc(var(--y) * var(--cw) / 226)) rotate(calc(var(--a) * var(--sx) * 1deg));
  transform-origin:50% 100%}
.flt{will-change:transform;transform-style:preserve-3d}
.fan .slot:nth-child(3){--lift:1}

/* carte holo */
.tc{--mx:50%;--my:50%;--rx:0deg;--ry:0deg;--ho:.55;--gl:.6;position:relative;border-radius:4.6%/3.3%;overflow:hidden;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;
  box-shadow:0 30px 60px -18px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.12),0 0 40px -10px rgba(255,190,90,.25);background:#111}
.tc img{width:100%;height:auto;aspect-ratio:720/1005;object-fit:cover}
.tc-holo,.tc-glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.tc-holo{opacity:var(--ho);mix-blend-mode:color-dodge;
  background:
    repeating-linear-gradient(115deg,#ff6ad5 0%,#ffd36b 7%,#7dffcf 14%,#71b7ff 21%,#c27bff 28%,#ff6ad5 35%),
    radial-gradient(farthest-corner circle at var(--mx) var(--my),rgba(255,255,255,.5) 0%,rgba(0,0,0,.6) 70%);
  background-size:280% 280%,100% 100%;background-position:var(--mx) var(--my),center;background-blend-mode:multiply;
  filter:brightness(.62) contrast(1.6) saturate(1.3)}
.tc-glare{opacity:var(--gl);mix-blend-mode:overlay;background:radial-gradient(farthest-corner circle at var(--mx) var(--my),rgba(255,255,255,.95) 0%,rgba(255,255,255,.35) 18%,rgba(0,0,0,.45) 85%)}

.hero-floor{position:absolute;z-index:4;left:50%;bottom:-10%;width:min(1100px,120vw);height:38%;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(255,150,40,.35),rgba(255,65,48,.12) 45%,transparent 70%);filter:blur(10px);pointer-events:none}

/* intro (avant JS : visible) */
.js .rise{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .hero.go .rise{opacity:1;transform:none}
.js .hero.go .rise:nth-child(2){transition-delay:.08s}
.js .hero.go .rise:nth-child(3){transition-delay:.18s}
.js .hero.go .rise:nth-child(4){transition-delay:.28s}

/* ---------- confiance ---------- */
.trust{position:relative;z-index:6;padding:20px var(--pad) 0;margin-top:-6px}
.trust-in{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));backdrop-filter:blur(12px)}
.trust-in li{padding:26px 28px;display:flex;flex-direction:column;gap:6px}
.trust-in li+li{border-left:1px solid var(--line)}
.t-big{font:600 20px/1.2 var(--f-u);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.trust-in span:not(.stars):not(.seal){color:var(--mut);font-size:15px}
.seal{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:7px;background:var(--red);color:#fff;font:400 11px/1 var(--f-d);letter-spacing:.02em;transform:rotate(-6deg)}

/* ---------- sections ---------- */
.sec{padding:var(--sec) 0;position:relative}
.sec-alt{background:var(--bg2)}
.sec-h{max-width:720px;margin-bottom:clamp(36px,4vw,56px)}
.sec-h-row{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.sec-h-c{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{display:flex;align-items:center;gap:12px;font:600 14px/1 var(--f-u);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.sec-h-c .eyebrow{justify-content:center}
.eyebrow .num{display:inline-grid;place-items:center;height:26px;padding:0 9px;border-radius:7px;border:1px solid rgba(255,178,26,.45);letter-spacing:.04em}
.eyebrow .jp{text-transform:none;letter-spacing:.1em}
h2{margin-top:18px;font:400 clamp(32px,4.2vw,58px)/1.06 var(--f-d);letter-spacing:-.005em}
.sec-lead{margin-top:18px;color:var(--mut);font-size:18px;max-width:600px}
.sec-h-c .sec-lead{margin-left:auto;margin-right:auto}

/* reveal */
.js .rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ---------- univers ---------- */
.uni-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.uni{--c1:#ffcb05;--c2:#ff9d00;position:relative;display:flex;min-height:340px;padding:34px;border-radius:var(--r);overflow:hidden;isolation:isolate;border:1px solid var(--line);
  background:#0f0e1c;transition:transform .5s var(--ease),border-color .4s}
.uni::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--im) var(--bp,60%) 30%/cover no-repeat;opacity:.5;transition:opacity .6s,transform 1.2s var(--ease)}
.uni::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0f0e1c 0%,rgba(15,14,28,.9) 34%,rgba(15,14,28,.35) 70%,rgba(15,14,28,.15) 100%),radial-gradient(70% 90% at 90% 100%,color-mix(in srgb,var(--c1) 50%,transparent),transparent 70%)}
.uni:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c1) 60%,transparent)}
.uni:hover::before{opacity:.75;transform:scale(1.04)}
.uni-poke{--c1:#ffcb05;--c2:#ffe066;--im:url(../img/hero/uni-poke.webp);--bp:45%}
.uni-op{--c1:#ff2d2d;--c2:#ff6a3d;--im:url(../img/hero/uni-op.webp)}
.uni-db{--c1:#ff7a00;--c2:#ffb000;--im:url(../img/hero/uni-db.webp);--bp:0%}
.uni-ygo{--c1:#2e6bff;--c2:#7a5cff;--im:url(../img/hero/uni-ygo.webp);--bp:100%}
.uni-kanji{position:absolute;left:28px;bottom:-14px;z-index:0;font:400 74px/1 var(--f-d);color:rgba(255,255,255,.06);white-space:nowrap;letter-spacing:.02em}
.uni-txt{position:relative;z-index:3;max-width:52%;display:flex;flex-direction:column}
.uni h3{font:400 clamp(30px,3vw,42px)/1 var(--f-d);white-space:nowrap}
.uni p{margin-top:12px;color:#d4d1e6;font-size:15.5px}
.uni-price{margin-top:auto;padding-top:24px;font:500 15px/1 var(--f-u);color:#e9e6f7}
.uni-price b{display:block;margin-top:6px;font:700 30px/1 var(--f-u);color:var(--c1)}
.uni-ygo .uni-price b{color:#8fb2ff}
.uni-fan{position:absolute;z-index:1;right:20px;bottom:-40px;width:46%;height:110%;pointer-events:none}
.uni-fan img{position:absolute;bottom:0;left:50%;width:min(150px,58%);border-radius:5%/3.6%;box-shadow:0 20px 40px -12px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.12);transform-origin:50% 120%;transition:transform .7s var(--ease)}
.uni-fan img:nth-child(1){transform:translateX(-50%) translateX(-34%) rotate(-14deg)}
.uni-fan img:nth-child(2){transform:translateX(-50%) translateX(34%) rotate(14deg)}
.uni-fan img:nth-child(3){transform:translateX(-50%) translateY(-6%)}
.uni:hover .uni-fan img:nth-child(1){transform:translateX(-50%) translateX(-62%) rotate(-22deg)}
.uni:hover .uni-fan img:nth-child(2){transform:translateX(-50%) translateX(62%) rotate(22deg)}
.uni:hover .uni-fan img:nth-child(3){transform:translateX(-50%) translateY(-14%) scale(1.04)}
.uni-go{position:absolute;z-index:3;left:34px;top:34px;display:none}

/* ---------- carrousel ---------- */
.car-nav{display:flex;gap:10px}
.car-btn{width:52px;height:52px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;transition:background .25s,border-color .25s}
.car-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}
.car-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.car{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 0 30px;scroll-padding-left:max(var(--pad),calc((100vw - 1280px)/2 + var(--pad)))}
.car::-webkit-scrollbar{display:none}
.car-track{display:flex;gap:24px;padding:0 max(var(--pad),calc((100vw - 1280px)/2 + var(--pad)));width:max-content}
.prod{position:relative;width:300px;scroll-snap-align:start;padding:14px 14px 18px;border-radius:var(--r);background:var(--surf);border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .45s var(--ease),border-color .4s}
.prod:hover{transform:translateY(-6px);border-color:rgba(255,211,107,.35)}
.prod-img{--mx:50%;--my:50%;position:relative;border-radius:var(--r-s);overflow:hidden;aspect-ratio:1;background:#eceae6}
.prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.prod:hover .prod-img img{transform:scale(1.05)}
.sheen{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;mix-blend-mode:color-dodge;
  background:linear-gradient(115deg,transparent 20%,rgba(255,106,213,.55) 36%,rgba(255,211,107,.6) 44%,rgba(125,255,207,.55) 52%,rgba(113,183,255,.55) 60%,transparent 76%);background-size:250% 250%;background-position:var(--mx) var(--my)}
.prod:hover .sheen{opacity:.75}
.badges{position:absolute;left:24px;top:24px;right:24px;display:flex;flex-wrap:wrap;gap:6px}
.b{font:600 12px/1 var(--f-u);padding:7px 10px;border-radius:999px;letter-spacing:.01em}
.b-pre{background:#121022;color:var(--gold2);border:1px solid rgba(255,211,107,.4)}
.b-promo{background:var(--red);color:#fff}
.b-new{background:#121022;color:#9cffd6;border:1px solid rgba(156,255,214,.35)}
.b-out{background:rgba(18,16,34,.9);color:#fff}
.prod-cat{margin-top:16px;font:500 13px/1 var(--f-u);color:var(--mut2);letter-spacing:.06em;text-transform:uppercase}
.prod h3{margin-top:8px;font:600 18px/1.3 var(--f-u);min-height:2.6em}
.prod .add{margin-top:auto}
.prod .price{margin-bottom:16px}
.price{margin-top:10px;display:flex;align-items:baseline;gap:10px;height:26px}
.price b{font:700 22px/1 var(--f-u)}
.price s{color:var(--mut2);font-size:15px}
.add{margin-top:16px;height:46px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line2);font:600 15px/1 var(--f-u);transition:background .25s,color .25s}
.add:not(:disabled):hover{background:var(--gold);color:#1a1000;border-color:var(--gold)}
.add:disabled{opacity:.5;cursor:not-allowed}
.is-out .prod-img img{filter:grayscale(.85) brightness(.75)}

/* ---------- prix : l'étagère ---------- */
.prix{overflow:hidden}
.prix::before{content:"";position:absolute;left:50%;top:24%;width:min(1300px,120vw);height:62%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,178,26,.13),rgba(255,65,48,.05) 55%,transparent);pointer-events:none}
.prix .sec-h{margin-bottom:clamp(18px,2.4vw,34px)}
.shelf-wrap{position:relative;max-width:1400px;margin:0 auto;padding:0 var(--pad)}
.shelf{--h:clamp(290px,29vw,430px);--top:34px;position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.6vw,40px)}
.shelf::before{content:"";position:absolute;left:-4%;right:-4%;top:calc(var(--top) + var(--h) + 2px);height:1px;background:linear-gradient(90deg,transparent,rgba(255,211,107,.5) 20%,rgba(255,255,255,.55) 50%,rgba(255,211,107,.5) 80%,transparent)}
.shelf::after{content:"";position:absolute;left:0;right:0;top:calc(var(--top) + var(--h) - 30px);height:90px;background:radial-gradient(50% 50% at 50% 50%,rgba(255,190,90,.16),transparent 70%);pointer-events:none}
.pk{--d:0s;--bob:-12px;--ph:0s;position:relative;z-index:1}
.pk:nth-child(2){--d:.12s;--ph:-1.6s}
.pk:nth-child(3){--d:.24s;--ph:-3.1s}
.pk:nth-child(4){--d:.36s;--ph:-4.4s}
.pk-stage{position:relative;padding-top:var(--top);height:calc(var(--top) + var(--h) * 1.3)}
.pk-flt{position:relative;z-index:2;height:var(--h);perspective:900px;animation:bob 5.6s ease-in-out var(--ph) infinite}
.pk-art{--rx:0deg;--ry:0deg;--mx:50%;--my:30%;position:relative;width:max-content;height:100%;margin:0 auto;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .6s var(--ease)}
.pk-art img{height:100%;width:auto;filter:drop-shadow(0 18px 18px rgba(0,0,0,.45)) drop-shadow(0 0 1px rgba(255,255,255,.25))}
.pk-holo{position:absolute;inset:0;pointer-events:none;-webkit-mask-size:100% 100%;mask-size:100% 100%;mix-blend-mode:color-dodge;opacity:.5;
  background:linear-gradient(115deg,transparent 32%,rgba(255,106,213,.55) 42%,rgba(255,211,107,.6) 48%,rgba(125,255,207,.55) 54%,rgba(113,183,255,.55) 60%,transparent 70%);background-size:300% 300%;background-position:100% 50%;
  animation:pkSheen 6.5s ease-in-out var(--ph) infinite;transition:opacity .4s}
@keyframes pkSheen{0%,30%{background-position:100% 50%}70%,100%{background-position:0% 50%}}
@keyframes bob{50%{transform:translateY(var(--bob))}}
.pk-shadow{position:absolute;z-index:1;left:50%;top:calc(var(--top) + var(--h) - 14px);width:calc(var(--h) * .5);height:26px;margin-left:calc(var(--h) * -.25);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent);animation:shd 5.6s ease-in-out var(--ph) infinite}
@keyframes shd{50%{transform:scale(.8);opacity:.6}}
.pk-refl{position:absolute;left:0;right:0;top:calc(var(--top) + var(--h) + 4px);height:calc(var(--h) * .3);overflow:hidden;pointer-events:none}
.pk-refl img{height:var(--h);width:auto;margin:0 auto;opacity:.22;transform:scaleY(-1);-webkit-mask-image:linear-gradient(180deg,transparent 62%,#000);mask-image:linear-gradient(180deg,transparent 62%,#000);animation:bobR 5.6s ease-in-out var(--ph) infinite}
@keyframes bobR{0%,100%{transform:scaleY(-1)}50%{transform:scaleY(-1) translateY(var(--bob))}}
/* étiquette de prix */
.tag{position:absolute;z-index:3;left:calc(50% + var(--h) * .06);top:calc(var(--top) + var(--h) * .66);margin:0;padding:0 13px 10px;min-width:0;border-radius:10px;background:linear-gradient(170deg,#ffe24a,#ffcf0d);color:#1a0f00;transform:rotate(-6deg);transform-origin:20% 0;
  box-shadow:0 20px 30px -10px rgba(0,0,0,.75),0 2px 0 rgba(255,255,255,.5) inset}
.tag-jp{position:relative;display:block;margin:0 -13px 6px;padding:5px 13px 4px;border-radius:10px 10px 0 0;background:var(--red);color:#fff;font:700 13px/1.2 'Noto Sans JP',var(--f-b);letter-spacing:.32em}
.tag-jp::after{content:"";position:absolute;right:12px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#2a0905;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.tag b{display:flex;align-items:flex-start;font:400 clamp(34px,2.9vw,44px)/.95 var(--f-d);letter-spacing:-.02em;white-space:nowrap}
.tag small{font-size:.44em;margin:.16em 0 0 3px}
.tag s{display:block;margin-top:5px;font:600 13px/1 var(--f-u);color:rgba(26,15,0,.6)}
.tag-off{position:absolute;z-index:2;right:-16px;top:-34px;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--red);font:700 12.5px/1 var(--f-u);white-space:nowrap;letter-spacing:-.01em;transform:rotate(14deg);box-shadow:0 8px 16px -6px rgba(255,65,48,.8)}
.pk-name{margin-top:6px;text-align:center;font:600 17px/1.3 var(--f-u)}
.pk-name span{display:block;margin-bottom:4px;font:500 12.5px/1 var(--f-u);letter-spacing:.12em;text-transform:uppercase;color:var(--mut2)}
/* apparition en cascade */
.js .pk.rv{transform:translateY(80px) scale(.94);transition:opacity 1s var(--ease) var(--d),transform 1.1s var(--ease) var(--d)}
.js .pk.rv.in{transform:none}
.js .pk .tag{opacity:0;transform:rotate(-24deg) scale(.4);transition:opacity .35s var(--ease) calc(var(--d) + .55s),transform .7s cubic-bezier(.34,1.6,.5,1) calc(var(--d) + .55s)}
.js .pk.in .tag{opacity:1;transform:rotate(-6deg)}
@media (hover:hover) and (pointer:fine){
  .pk:hover .pk-holo{opacity:.85;animation-play-state:paused;background-position:var(--mx) var(--my)}
  .pk:hover .pk-art{transition:transform .15s linear}
}
/* avis unique */
.pq{margin:clamp(30px,3.6vw,52px) auto 0;max-width:860px;text-align:center}
.pq .stars{font-size:20px;letter-spacing:.18em}
.pq blockquote{margin:14px 0 0;font:400 clamp(26px,3.1vw,42px)/1.18 var(--f-d);text-wrap:balance}
.pq figcaption{margin-top:18px;display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;color:var(--mut);font:500 15.5px/1.2 var(--f-u)}
.pq figcaption b{color:var(--tx);font-weight:600}
.pq-sep{width:5px;height:5px;border-radius:50%;background:var(--gold)}
.pq-fine{text-align:center;margin-top:26px}
.fine{font-size:13px;color:var(--mut2)}
.statique .pk .tag{opacity:1!important;transform:rotate(-6deg)!important;transition:none!important}
.statique .pk-flt,.statique .pk-refl img,.statique .pk-shadow,.statique .pk-holo{animation:none!important}

/* ---------- et aussi ---------- */
.aussi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.aus{display:flex;flex-direction:column;padding:14px 14px 26px;border-radius:var(--r);background:var(--surf);border:1px solid var(--line);transition:transform .45s var(--ease),border-color .4s}
.aus:hover{transform:translateY(-6px);border-color:var(--line2)}
.aus-img{position:relative;aspect-ratio:4/3;border-radius:var(--r-s);overflow:hidden;background:#eceae6}
.aus-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.aus:hover .aus-img img{transform:scale(1.05)}
.aus-oripa{display:grid;grid-template-columns:repeat(3,1fr);background:#efedea}
.aus-oripa img{object-fit:cover;object-position:50% 45%;transform:scale(1.5)}
.aus:hover .aus-oripa img{transform:scale(1.6)}
.aus h3{margin:22px 12px 0;font:400 26px/1.1 var(--f-d)}
.aus p{margin:10px 12px 0;color:var(--mut);font-size:16px}
.aus-price{margin:18px 12px 0;font:700 20px/1 var(--f-u);color:var(--gold2)}

/* ---------- japon ---------- */
.japon-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.japon-pics{position:relative;height:640px}
.japon-pics img{position:absolute;border-radius:var(--r);object-fit:cover;box-shadow:0 40px 80px -30px rgba(0,0,0,.9)}
.jp1{left:0;top:0;width:68%;height:82%}
.jp2{right:0;bottom:0;width:52%;height:58%;border:6px solid var(--bg)}
.hanko{position:absolute;left:58%;top:6%;width:84px;height:84px;display:grid;place-items:center;border-radius:14px;background:var(--red);color:#fff;font:400 26px/1 var(--f-d);transform:rotate(8deg);box-shadow:0 14px 30px -8px rgba(255,65,48,.6);letter-spacing:.04em}
.steps{display:flex;flex-direction:column;gap:14px}
.steps li{display:flex;gap:20px;padding:22px 24px;border-radius:var(--r);background:var(--surf);border:1px solid var(--line)}
.st-n{font:400 26px/1 var(--f-d);color:var(--gold);min-width:42px}
.steps h3{font:600 19px/1.25 var(--f-u)}
.steps p{margin-top:6px;color:var(--mut);font-size:16px}
.sig{margin-top:24px;color:#d8d5ea}
.sig b{color:var(--gold2)}

/* ---------- lire ---------- */
.lire-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,96px);align-items:center}
.tips{display:flex;flex-direction:column;gap:12px}
.tips li{display:flex;gap:18px;padding:22px 24px;border-radius:var(--r);border:1px solid var(--line);background:rgba(255,255,255,.02);transition:background .35s,border-color .35s}
.tips li.act{background:var(--surf);border-color:rgba(255,211,107,.4)}
.tip-n{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);font:700 16px/1 var(--f-u);transition:background .35s,color .35s}
.tips li.act .tip-n{background:var(--gold);color:#1a1000}
.tips h3{font:600 19px/1.25 var(--f-u);margin-top:5px}
.tips p{margin-top:6px;color:var(--mut);font-size:16px}
.mini-q{margin:12px 0 0;padding:14px 16px;border-left:3px solid var(--gold);background:rgba(255,178,26,.07);border-radius:0 12px 12px 0;font:500 16px/1.45 var(--f-u);color:#efeaf9}
.mini-q cite{display:block;margin-top:6px;font:400 14px/1 var(--f-b);color:var(--mut)}
.lire-card{position:relative;width:min(420px,100%);margin:0 auto;perspective:1200px}
.tc-big{border-radius:4.6%/3.3%}
.hot{position:absolute;border:2px solid transparent;border-radius:8px;transition:border-color .35s,box-shadow .35s,background .35s;z-index:3}
.hot.act{border-color:var(--gold);box-shadow:0 0 0 4px rgba(255,178,26,.25),0 0 30px rgba(255,178,26,.45);background:rgba(255,178,26,.08)}
.lbl{position:absolute;z-index:4;padding:9px 14px;border-radius:999px;background:#121022;border:1px solid rgba(255,211,107,.5);font:600 14px/1 var(--f-u);white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s;color:var(--gold2)}
.lbl.act{opacity:1;transform:none}
.lbl.l1{left:50%;top:-22px;transform:translateX(-50%) translateY(6px)}
.lbl.l1.act{transform:translateX(-50%)}
.lbl.l2{left:0;bottom:-48px}
.lbl.l3{right:-18px;top:46%}

/* ---------- avis ---------- */
.avis{overflow:hidden}
.wall{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1280px;margin:0 auto;padding:0 var(--pad);height:720px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.wcol{display:flex;flex-direction:column;gap:20px}
.wcol.loop{animation:wall var(--d) linear infinite}
.wcol-r.loop{animation-direction:reverse}
.wall:hover .wcol{animation-play-state:paused}
@keyframes wall{to{transform:translateY(calc(-50% - 10px))}}
.rev{margin:0;padding:26px;border-radius:var(--r);background:var(--surf);border:1px solid var(--line)}
.rev h3{margin-top:10px;font:600 18px/1.3 var(--f-u)}
.rev blockquote{margin:10px 0 0;color:#dedbee;font-size:16px;line-height:1.55}
.rev figcaption{margin-top:16px;color:var(--mut);font-size:14px}
.rev figcaption b{color:var(--tx);font-weight:600}

/* ---------- final ---------- */
.final{position:relative;overflow:hidden;padding:clamp(110px,12vw,170px) 0;text-align:center;background:radial-gradient(70% 90% at 50% 100%,rgba(255,65,48,.28),transparent 70%),var(--bg)}
.final-kanji{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:400 clamp(200px,30vw,440px)/1 var(--f-d);color:rgba(255,255,255,.028);white-space:nowrap;pointer-events:none}
.final-cards{position:absolute;inset:0;max-width:1440px;margin:0 auto;pointer-events:none}
.fc{position:absolute;top:50%;width:clamp(110px,11vw,170px)}
.fc-l{left:3%;transform:translateY(-50%) rotate(-12deg)}
.fc-r{right:3%;transform:translateY(-44%) rotate(10deg)}
.fc .tc{animation:floatC 6s ease-in-out infinite}
.fc-r .tc{animation-delay:-3s}
@keyframes floatC{50%{transform:translateY(-14px) rotate(1.5deg)}}
.final-in{position:relative}
.final h2{margin:0 0 34px;font-size:clamp(36px,5.4vw,76px)}

/* ---------- pied ---------- */
.foot{border-top:1px solid var(--line);padding:72px 0 28px;background:#060510}
.foot-grid{display:grid;grid-template-columns:1.2fr .8fr 1fr 1.4fr;gap:40px}
.foot-brand p{margin-top:16px;color:var(--mut);font-size:15.5px;max-width:280px}
.socials{display:flex;gap:10px;margin-top:20px}
.socials a{width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center}
.socials svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.foot h3{font:600 14px/1 var(--f-u);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.foot-col{display:flex;flex-direction:column;gap:10px}
.foot-col a{color:#d8d5ea;font-size:15.5px}
.foot-col a:hover{color:#fff}
.news p{color:var(--mut);font-size:15.5px}
.news-f{display:flex;gap:8px;margin-top:16px}
.news input{flex:1;min-width:0;height:46px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.05);color:var(--tx);padding:0 18px;font:400 16px var(--f-b)}
.foot-bot{margin-top:56px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--mut2);font-size:14px}
.maquette{margin:18px auto 0;padding:0 var(--pad);max-width:1280px;color:#5f5c7a;font-size:13px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .nav{display:none}
  .burger{display:grid}
  .trust-in{grid-template-columns:repeat(2,1fr)}
  .trust-in li:nth-child(3){border-left:0}
  .trust-in li:nth-child(n+3){border-top:1px solid var(--line)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .uni-grid,.japon-grid,.lire-grid,.aussi-grid{grid-template-columns:1fr}
  .japon-pics{height:520px}
  .lire-card{width:min(360px,86%)}
  .wall{grid-template-columns:1fr 1fr;height:640px}
  .wall .wcol:nth-child(3){display:none}
}
@media (max-width:900px){
  .shelf{grid-template-columns:repeat(2,1fr);row-gap:28px;--h:clamp(260px,40vw,340px)}
}
@media (max-width:640px){
  .shelf-wrap{padding:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-padding:0 20px}
  .shelf-wrap::-webkit-scrollbar{display:none}
  .shelf{--h:280px;display:flex;gap:6px;width:max-content;padding:0 20px 6px}
  .shelf::before,.shelf::after{left:0;right:0}
  .pk{flex:none;width:min(66vw,270px);scroll-snap-align:center}
  .tag{left:calc(50% - 6px);padding:0 12px 10px;min-width:112px}
  .tag-jp{margin:0 -12px 6px;font-size:12px}
  .tag b{font-size:36px}
  .pq blockquote{font-size:26px}
  body{font-size:16px}
  .hide-m{display:none}
  .top-in{padding:10px 16px;gap:10px}
  .brand img{width:34px;height:34px}
  .brand-txt{font-size:13px}
  .cart{padding:0 12px;height:40px}
  .cart svg{width:20px;height:20px}
  .ico{width:40px;height:40px}
  .hero{min-height:700px;max-height:none;height:100svh}
  .hero-bg{inset:0}
  .hero-pan{inset:0 auto 0 0;width:calc(100svh * 2);min-width:1400px}
  .hero-pan img{object-position:0 50%}
  .vert{display:none}
  .hero-txt{padding-top:96px}
  .kicker{font-size:13px;padding:7px 12px 7px 10px}
  h1{margin-top:18px;font-size:clamp(34px,10.4vw,46px);line-height:1.04}
  .lead{margin-top:14px;font-size:15.5px;line-height:1.5}
  .ctas{margin-top:20px;gap:10px}
  .btn{height:50px;padding:0 20px;font-size:15px}
  .ctas .btn-ghost{display:none}
  .fan{--cw:clamp(120px,39vw,170px);--sx:.6;bottom:calc(var(--cw) * .5)}
  .ribbons{height:34%;bottom:9%;width:200%;left:-50%}
  .rt{font-size:26px}.rt2{font-size:24px}
  .rb1{stroke-width:52}
  .trust{padding:16px 16px 0}
  .trust-in{grid-template-columns:1fr 1fr}
  .trust-in li{padding:18px 16px}
  .t-big{font-size:16.5px}
  .trust-in span:not(.stars):not(.seal){font-size:13.5px}
  .sec-h-row{flex-direction:column;align-items:flex-start}
  .car-nav{display:none}
  .sec-lead{font-size:16.5px}
  .uni{min-height:300px;padding:26px}
  .uni-txt{max-width:56%}
  .uni-fan{right:4px;width:48%}
  .uni-fan img{width:min(118px,64%)}
  .uni-kanji{font-size:54px;left:20px}
  .uni p{font-size:14.5px}
  .prod{width:262px}
  .car-track{gap:16px;padding:0 20px}
  .car{scroll-padding-left:20px}
  .japon-pics{height:420px}
  .hanko{width:64px;height:64px;font-size:20px}
  .lbl.l3{right:-6px}
  .wall{grid-template-columns:1fr;height:600px}
  .wall .wcol:nth-child(2){display:none}
  .foot-grid{grid-template-columns:minmax(0,1fr);gap:34px}
  .uni h3{white-space:nowrap;font-size:clamp(28px,8.4vw,34px)}
  .uni-txt{max-width:100%}
  .uni p{max-width:58%}
  .eyebrow{font-size:12.5px;letter-spacing:.1em;gap:10px;flex-wrap:wrap}
  .final{padding-bottom:250px}
  .fc{width:96px;top:auto;bottom:22px}
  .fc-l{left:14%}.fc-r{right:14%}
  .final-kanji{font-size:170px}
}

/* ---------- mouvement réduit / capture ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
.statique .rv,.statique .rise{opacity:1!important;transform:none!important;transition:none!important}

/* éventails des univers : se déploient à l'apparition */
.uni-fan img{transition:transform .9s var(--ease) .25s}
.uni-fan img:nth-child(2){transition-delay:.33s}
.uni-fan img:nth-child(3){transition-delay:.41s}
.js .uni:not(.in) .uni-fan img{transform:translateX(-50%) translateY(40%) rotate(0deg)}

/* mobiles courts (ex. 390x693, navigateur intégré Instagram) */
@media (max-width:640px) and (max-height:760px){
  .hero{min-height:640px}
  .hero-txt{padding-top:84px}
  h1{font-size:clamp(32px,9.6vw,40px);margin-top:14px}
  .lead{font-size:14.5px;margin-top:12px}
  .ctas{margin-top:16px}
  .fan{--cw:clamp(110px,35vw,150px);bottom:calc(var(--cw) * .12)}
  .ribbons{bottom:4%}
}