/* NEXORA · rendu 3D du site vitrine (04/11 nuit). Chargé par site.html après son <style> et le thème actif.
   Va avec assets/site3d.js (module). Sans JavaScript, sans WebGL ou avec « réduire les animations » :
   la page reste exactement celle d'avant (médaillon en image fixe, cartes à plat, carrousel caché). */

/* ---------- héros : le médaillon fixe s'efface quand la scène WebGL plein écran (.s3d-plein) a dessiné ---------- */
.scene .gemme,.scene .runes,.scene .halo,.scene .orbite{transition:opacity .9s ease}
.scene.s3d-on .gemme,.scene.s3d-on .runes,.scene.s3d-on .halo,.scene.s3d-on .orbite{opacity:0}
.scene.s3d-on::before{opacity:.32}
.scene .carte{z-index:3;will-change:transform;transition:transform .35s cubic-bezier(.2,.7,.2,1)}

/* ---------- cartes en relief : inclinaison 3D au survol + reflet qui suit la souris ---------- */
.t3d{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--lift,0px),0)!important;
  transition:transform .6s cubic-bezier(.2,.7,.2,1),border-color .25s,box-shadow .3s,background .25s!important;will-change:transform}
.t3d.actif{--lift:-6px;transition:transform .12s linear,border-color .25s,box-shadow .3s,background .25s!important;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 40px 80px -34px rgba(0,0,0,.95),0 0 60px -26px rgba(255,45,75,.55)}
@media (min-width:1181px){.plan.star.t3d{--lift:-10px}.plan.star.t3d.actif{--lift:-14px}}
.reflet3d{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:0;transition:opacity .35s;mix-blend-mode:screen;
  background:radial-gradient(520px circle at var(--gx,50%) var(--gy,0%),rgba(255,214,222,.16),rgba(255,45,75,.06) 28%,transparent 55%)}
.t3d.actif>.reflet3d{opacity:1}
/* vitrine des cosmétiques : l'objet se détache et suit la souris, socle lumineux dessous */
.cos{overflow:hidden}
.cos .obj{position:relative;z-index:2;transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .3s}
.cos.t3d .obj{transform:translate3d(calc(var(--px,0) * 16px),calc(var(--py,0) * 12px - 4px),0) scale(1.1);
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.75)) drop-shadow(0 0 26px rgba(255,45,75,.45))}
.cos::after{content:"";position:absolute;left:12px;top:72px;width:72px;height:16px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(255,45,75,.55),rgba(214,31,105,.18) 60%,transparent);filter:blur(2px);opacity:.55;transition:opacity .3s,transform .5s}
.cos.t3d.actif::after{opacity:1;transform:scaleX(1.25)}

/* ---------- parallaxe au défilement (transform posé par le script) ---------- */
.final picture{display:block;will-change:transform}
.archi-mons img,.tile .art{will-change:transform}

/* ---------- carrousel 3D des zones et des donjons ---------- */
.c3d{position:relative;margin:4px auto 44px;text-align:center;outline:none}
.c3d:focus-visible{outline:2px solid var(--or);outline-offset:6px;border-radius:24px}
.c3d-scene{position:relative;height:380px;perspective:1300px;perspective-origin:50% 40%;transform-style:preserve-3d;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.c3d-scene::before{content:"";position:absolute;left:18%;right:18%;bottom:4px;height:60px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(224,25,58,.38),rgba(214,31,105,.12) 55%,transparent);filter:blur(8px)}
.c3d-carte{position:absolute;left:50%;top:14px;width:260px;margin-left:-130px;height:330px;padding:18px 18px 16px;border-radius:24px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;border:1px solid var(--line2);
  background:radial-gradient(240px 170px at 50% 22%,rgba(255,45,75,.22),transparent 70%),linear-gradient(180deg,rgba(32,16,22,.96),rgba(10,9,12,.97));
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 34px 70px -30px rgba(0,0,0,.95);
  transition:transform .75s cubic-bezier(.2,.75,.2,1),opacity .6s,filter .6s,border-color .3s;backface-visibility:hidden;will-change:transform}
.c3d-carte.donjon{background:radial-gradient(240px 170px at 50% 22%,rgba(255,61,139,.24),transparent 70%),linear-gradient(180deg,rgba(32,14,24,.96),rgba(10,9,12,.97))}
.c3d-carte.actif{border-color:rgba(255,120,140,.55);box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 40px 90px -30px rgba(0,0,0,.95),0 0 70px -20px rgba(255,45,75,.6)}
.c3d-carte.loin{opacity:0;pointer-events:none}
.c3d-carte>b,.c3d-carte>small,.c3d-carte>.c3d-type{transition:opacity .5s}
.c3d-carte:not(.actif)>b,.c3d-carte:not(.actif)>small,.c3d-carte:not(.actif)>.c3d-type{opacity:.28}
.c3d-art{position:relative;width:100%;height:150px;margin-bottom:8px}
.c3d-art img{position:absolute;object-fit:contain;filter:drop-shadow(0 14px 16px rgba(0,0,0,.75));animation:flotte 7s ease-in-out infinite}
.c3d-art img:nth-child(1){width:108px;height:108px;left:50%;margin-left:-54px;top:14px;z-index:2;filter:drop-shadow(0 16px 18px rgba(0,0,0,.8)) drop-shadow(0 0 22px rgba(255,45,75,.35))}
.c3d-art img:nth-child(2){width:64px;height:64px;left:14px;top:62px;opacity:.8;animation-delay:-2.4s}
.c3d-art img:nth-child(3){width:64px;height:64px;right:14px;top:54px;opacity:.8;animation-delay:-4.8s}
.c3d-type{font:700 10.5px var(--ui);letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:999px;color:var(--or2);border:1px solid rgba(255,45,75,.4);background:rgba(255,45,75,.08)}
.c3d-carte b{font:700 17px/1.25 var(--titre);color:var(--text);margin-top:8px}
.c3d-carte small{color:var(--muted);font-size:13px}
.c3d-ctrl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:6px}
.c3d-ctrl .btn{width:46px;padding:0}
.c3d-ctrl .prec .i{transform:scaleX(-1)}
.c3d-pos{font:500 13px var(--mono);color:var(--faint);min-width:76px}
@media (max-width:640px){
  .c3d-scene{height:340px;perspective:900px}
  .c3d-carte{width:220px;margin-left:-110px;height:300px}
  .c3d-art{height:130px}.c3d-art img:nth-child(1){width:96px;height:96px;margin-left:-48px}
}
@media (prefers-reduced-motion:reduce){
  .t3d,.t3d.actif{transform:none!important}
  .c3d-carte{transition:none}
}

/* ======================================================================================================
   Défilement en 3D (04/11 nuit, demande du propriétaire) : défilement doux, médaillon qui s'ouvre, rubriques
   qui s'agrandissent. Sans la classe html.s3d-ouv (pas de script, « réduire les animations ») : section statique.
   ====================================================================================================== */
/* « overflow-x:hidden » sur body cassait position:sticky (en-tête compris) : clip ne crée pas de conteneur de défilement */
body.vitrine{overflow-x:hidden;overflow-x:clip}
/* scène WebGL plein écran, derrière le contenu */
.s3d-plein{position:fixed;inset:0;width:100%;height:100%;z-index:-1;display:block;pointer-events:none;opacity:0;transition:opacity .9s ease}
html.s3d-gl .s3d-plein{opacity:var(--s3d-o,1)}

/* ---------- section « ouverture », version statique ---------- */
.ouverture{padding-top:110px}
.ouv-scene{max-width:1200px;margin:0 auto;padding:0 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:26px}
.ouv-txt h2{margin:12px auto 10px}
.ouv-txt p{color:var(--muted);margin:0 auto;max-width:620px;font-size:17px}
.ouv-txt{width:100%;text-align:center}
.ouv-txt .kicker{justify-content:center}
.ouv-cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%;max-width:1100px;margin:0 auto;text-align:center}
.ouv-c{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 24px;text-align:center}
.ouv-c>span:last-child{max-width:300px}
.ouv-c b{font:700 20px var(--titre)}
.ouv-c>span:last-child{color:var(--muted);font-size:15px}
.ouv-img{width:74px;height:74px;border-radius:20px;display:grid;place-items:center;margin-bottom:6px;
  background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.18),rgba(255,255,255,.02) 62%),linear-gradient(150deg,rgba(255,45,75,.4),rgba(20,12,16,.85));
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 16px 34px -14px rgba(224,25,58,.8)}
.ouv-img.e{background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.18),rgba(255,255,255,.02) 62%),linear-gradient(150deg,rgba(255,61,139,.42),rgba(20,12,16,.85))}
.ouv-img.o{background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.2),rgba(255,255,255,.02) 62%),linear-gradient(150deg,rgba(154,160,171,.45),rgba(20,12,16,.85))}
.ouv-img img{width:60px;height:60px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.ouv-fin .ctas{justify-content:center;margin-top:22px}
.ouv-barre{display:none}
@media (max-width:860px){.ouv-cartes{grid-template-columns:1fr;max-width:460px}}
@media (max-width:640px){.ouverture{padding-top:80px}.ouv-scene{padding:0 16px;gap:20px}.ouv-c{padding:22px 18px}}

/* ---------- version animée : section épinglée sur 4 écrans ---------- */
html.s3d-ouv .ouverture{height:430vh;padding:0}
html.s3d-ouv .ouv-scene{position:sticky;top:0;height:100vh;height:100svh;max-width:none;padding:0;display:block;overflow:hidden}
html.s3d-ouv .ouv-txt{position:absolute;left:50%;width:min(860px,92vw);margin-left:calc(min(860px,92vw) / -2);opacity:0;will-change:transform,opacity}
html.s3d-ouv .ouv-txt.t1{top:50%;margin-top:-90px}
html.s3d-ouv .ouv-txt.t2{top:calc(72px + 2vh);z-index:4}
html.s3d-ouv .ouv-txt.ouv-fin{bottom:8vh}
html.s3d-ouv .ouv-txt h2{font-size:clamp(30px,4.4vw,58px);text-shadow:0 10px 40px rgba(0,0,0,.8)}
html.s3d-ouv .ouv-txt p{text-shadow:0 4px 20px rgba(0,0,0,.9)}
html.s3d-ouv .ouv-ecran{position:absolute;left:50%;top:57%;width:min(1100px,94vw);z-index:2;opacity:0;visibility:hidden;transform-origin:50% 50%;will-change:transform,opacity}
html.s3d-ouv .ouv-ecran .win{transform:none!important;box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 60px 140px -40px rgba(0,0,0,.95),0 0 120px -30px rgba(255,45,75,.55)}
/* ---------- appel final : le médaillon qui se construit et brille (05/11) ----------
   Avec WebGL : la place du médaillon est gardée (invisible) et le logo de l'arrière-plan, reconstruit, vient s'y poser
   (assets/site3d.js). Sans WebGL : l'image, avec un halo rubis / émeraude, un liseré or qui tourne et un éclat qui
   passe ; elle « se construit » (flou -> net) quand l'appel final apparaît. Rien ne passe sous les textes. */
.final{isolation:isolate}
.final picture{position:relative;display:block;width:240px;height:240px;margin:0 auto 30px;isolation:isolate}
.final picture img{position:relative;display:block;width:100%;height:100%;margin:0;border-radius:50%;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.7)) drop-shadow(0 0 26px rgba(255,45,75,.45))}
.final picture::before{content:"";position:absolute;inset:-34%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,45,75,.55),rgba(224,25,58,.24) 42%,rgba(46,229,157,.12) 62%,transparent 74%);
  animation:nx-halo 4.6s ease-in-out infinite}
.final picture::after{content:"";position:absolute;inset:-7%;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 12%,rgba(245,196,81,.95) 18%,transparent 26% 58%,rgba(46,229,157,.85) 64%,transparent 72%);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 4px),#000 calc(100% - 3px),#000 calc(100% - 1px),transparent 100%);
  mask:radial-gradient(closest-side,transparent calc(100% - 4px),#000 calc(100% - 3px),#000 calc(100% - 1px),transparent 100%);
  animation:tour 10s linear infinite;opacity:.9}
@keyframes nx-halo{0%,100%{opacity:.75;transform:scale(.96)}50%{opacity:1;transform:scale(1.06)}}
@keyframes nx-construit{0%{opacity:0;transform:scale(.55) rotate(-24deg);filter:blur(14px) brightness(2.2)}
  60%{opacity:1;filter:blur(0) brightness(1.5) drop-shadow(0 0 40px rgba(245,196,81,.7))}
  100%{opacity:1;transform:none;filter:drop-shadow(0 18px 30px rgba(0,0,0,.7)) drop-shadow(0 0 26px rgba(255,45,75,.45))}}
.final.rv:not(.vu) picture img{opacity:0}
.final.vu picture img{animation:nx-construit 1.6s cubic-bezier(.2,.7,.2,1) both,flotte 7s 1.6s ease-in-out infinite}
@media (max-width:640px){.final picture{width:150px;height:150px;margin-bottom:24px}}
/* avec WebGL : place gardée pour le logo 3D, carte sans flou (le flou du verre brouillait le logo derrière) */
html.s3d-gl .final picture{visibility:hidden}
html.s3d-gl .final picture img{animation:none}
html.s3d-gl .final{backdrop-filter:none;-webkit-backdrop-filter:none;
  background:radial-gradient(700px 320px at 15% 0%,rgba(224,25,58,.16),transparent 65%),radial-gradient(700px 320px at 85% 100%,rgba(214,31,105,.14),transparent 65%),linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01))}
@media (prefers-reduced-motion:reduce){
  .final picture::before,.final picture::after,.final picture img,.final.vu picture img{animation:none}
  .final.rv:not(.vu) picture img{opacity:1}
}
html.s3d-ouv .ouv-cartes{position:absolute;left:50%;top:46%;width:0;height:0;display:block;perspective:1400px;transform-style:preserve-3d}
html.s3d-ouv .ouv-c{position:absolute;left:0;top:0;width:300px;height:240px;opacity:0;will-change:transform,opacity;
  background:linear-gradient(180deg,rgba(34,16,22,.9),rgba(11,9,12,.92));box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 50px 100px -40px rgba(0,0,0,.95),0 0 80px -30px rgba(255,45,75,.6)}
html.s3d-ouv .ouv-barre{display:block;position:absolute;right:22px;top:50%;width:3px;height:140px;margin-top:-70px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
html.s3d-ouv .ouv-barre i{display:block;width:100%;height:calc(var(--p,0) * 100%);background:linear-gradient(180deg,var(--rubis),var(--emer));border-radius:inherit}
@media (max-width:860px){
  html.s3d-ouv .ouverture{height:360vh}
  html.s3d-ouv .ouv-c{width:min(84vw,340px);height:auto;min-height:0;padding:16px 18px;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 14px;text-align:left}
  html.s3d-ouv .ouv-c .ouv-img{width:56px;height:56px;margin:0}
  html.s3d-ouv .ouv-c .ouv-img img{width:46px;height:46px}
  html.s3d-ouv .ouv-c b{font-size:17px}
  html.s3d-ouv .ouv-c>span:last-child{flex-basis:100%;font-size:14px}
  html.s3d-ouv .ouv-txt.t2{top:calc(72px + 1vh)}
  html.s3d-ouv .ouv-ecran{top:60%}
  html.s3d-ouv .ouv-barre{right:8px}
}
/* très grands écrans (4K, zoom 50 %) : la scène grandit avec la fenêtre au lieu de rester un timbre-poste au centre */
@media (min-width:2400px){html.s3d-ouv .ouv-scene{--k:1.3}}
@media (min-width:3000px){html.s3d-ouv .ouv-scene{--k:1.6}}
@media (min-width:3600px){html.s3d-ouv .ouv-scene{--k:1.9}}
@media (min-width:2400px){
  html.s3d-ouv .ouv-txt{width:min(calc(860px * var(--k)),92vw);margin-left:calc(min(calc(860px * var(--k)),92vw) / -2)}
  html.s3d-ouv .ouv-txt.t1{margin-top:calc(-90px * var(--k))}
  html.s3d-ouv .ouv-txt h2{font-size:calc(58px * var(--k))}
  html.s3d-ouv .ouv-txt p{font-size:calc(17px * var(--k));max-width:calc(620px * var(--k))}
  html.s3d-ouv .ouv-txt .kicker{font-size:calc(12.5px * var(--k))}
  html.s3d-ouv .ouv-c{width:calc(300px * var(--k));height:calc(240px * var(--k));padding:calc(28px * var(--k)) calc(24px * var(--k));gap:calc(8px * var(--k))}
  html.s3d-ouv .ouv-c b{font-size:calc(20px * var(--k))}
  html.s3d-ouv .ouv-c>span:last-child{font-size:calc(15px * var(--k));max-width:none}
  html.s3d-ouv .ouv-img{width:calc(74px * var(--k));height:calc(74px * var(--k));border-radius:calc(20px * var(--k))}
  html.s3d-ouv .ouv-img img{width:calc(60px * var(--k));height:calc(60px * var(--k))}
  html.s3d-ouv .ouv-fin .ctas{transform:scale(var(--k));transform-origin:50% 0;margin-top:calc(22px * var(--k))}
  html.s3d-ouv .ouv-barre{height:calc(140px * var(--k));margin-top:calc(-70px * var(--k))}
}
/* rubriques qui s'agrandissent en entrant (transform posé par le script, enlevé une fois arrivées) */
.s3d-zoom{transform-origin:50% 0;will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){
  html.s3d-ouv .ouverture{height:auto}
  .s3d-plein{display:none}
  .s3d-zoom{transform:none!important;opacity:1!important}
}