/* ============================================================
   ŒUVRES — Pont du vaisseau · interface immersive 360°
   Design system
   ============================================================ */
:root{
  --space-0:#04060d;
  --space-1:#070b16;
  --space-2:#0d131f;
  --ink:#e9eef7;
  --ink-dim:#9fb0c8;
  --ink-faint:#5e6f8a;

  --gold:#d9ad5a;
  --gold-deep:#a87a2e;
  --gold-glow:rgba(217,173,90,.55);

  --holo:#6fd6ec;
  --holo-deep:#2c8fb0;
  --holo-glow:rgba(111,214,236,.5);

  --danger:#e06a45;
  --danger-glow:rgba(224,106,69,.5);
  --good:#6fe0a8;

  --crt:rgba(120,220,255,.9);
  --panel:rgba(10,16,28,.82);
  --panel-edge:rgba(120,180,220,.22);
  --hairline:rgba(150,190,230,.16);

  --f-hud:"Orbitron",sans-serif;
  --f-body:"Inter",system-ui,sans-serif;
  --f-serif:"Cormorant Garamond",serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%;overflow:hidden;background:#000}
body{
  font-family:var(--f-body);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  user-select:none;
  cursor:default;
}
#root{position:fixed;inset:0;overflow:hidden}

/* ---------- STAGE / PANORAMA ---------- */
.stage{position:absolute;inset:0;overflow:hidden;background:#000;cursor:grab}
.stage.dragging{cursor:grabbing}
.world{position:absolute;top:0;left:0;will-change:transform;transform-origin:0 0}
.pano-img{
  position:absolute;top:0;left:0;height:100%;
  image-rendering:auto;pointer-events:none;
  filter:saturate(1.06) contrast(1.04);
}
.pano-bloom{
  position:absolute;top:0;left:0;height:100%;pointer-events:none;
  filter:blur(12px) brightness(1.5) saturate(1.25);
  mix-blend-mode:screen;will-change:transform;
}
/* atmospheric treatment that masks the source pixelation */
.atmos{position:absolute;inset:0;pointer-events:none;z-index:5}
.atmos.vignette{
  background:radial-gradient(120% 90% at 50% 46%,transparent 46%,rgba(2,4,10,.34) 82%,rgba(2,4,10,.66) 100%);
  mix-blend-mode:multiply;
}
.atmos.fog{
  background:
    linear-gradient(180deg,rgba(8,14,26,.32) 0%,transparent 16%,transparent 78%,rgba(4,7,15,.42) 100%);
}
.atmos.tint{
  background:radial-gradient(80% 60% at 50% 40%,rgba(60,150,200,.10),transparent 60%);
  mix-blend-mode:screen;opacity:.7;
}
.atmos.grain{
  opacity:.06;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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.atmos.scan{
  opacity:.5;mix-blend-mode:overlay;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);
}
.atmos.aberr{
  opacity:.5;mix-blend-mode:screen;
  background:
    radial-gradient(100% 80% at 0% 50%,rgba(255,40,40,.05),transparent 40%),
    radial-gradient(100% 80% at 100% 50%,rgba(40,120,255,.05),transparent 40%);
}
.boot-flash{position:absolute;inset:0;background:#fff;z-index:200;pointer-events:none}

/* dust particles canvas */
.dust{position:absolute;inset:0;pointer-events:none;z-index:6;opacity:.6}

/* ---------- HOTSPOTS ---------- */
.hotspot{
  position:absolute;left:0;top:0;transform-origin:center;
  pointer-events:auto;cursor:pointer;z-index:20;
  width:0;height:0;
}
.hs-core{position:absolute;left:0;top:0;transform:translate(-50%,-50%)}
.hs-ring{
  width:26px;height:26px;border-radius:50%;
  border:1px solid var(--gold);
  box-shadow:0 0 9px var(--gold-glow),inset 0 0 6px rgba(217,173,90,.2);
  transition:transform .35s var(--ease),border-color .3s,box-shadow .3s;
  display:grid;place-items:center;
}
.hs-ring::before{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid var(--gold);opacity:.25;
  animation:hsPulse 2.8s ease-out infinite;
}
.hs-dot{width:4px;height:4px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px var(--gold)}
.hotspot.holo .hs-ring{border-color:var(--holo);box-shadow:0 0 14px var(--holo-glow),inset 0 0 10px rgba(111,214,236,.25)}
.hotspot.holo .hs-ring::before{border-color:var(--holo)}
.hotspot.holo .hs-dot{background:var(--holo);box-shadow:0 0 8px var(--holo)}
.hotspot.nav .hs-ring{border-style:solid}
.hotspot.nav .hs-icon{position:absolute;font-family:var(--f-hud);font-size:9px;color:var(--gold)}

@keyframes hsPulse{0%{transform:scale(.7);opacity:.5}70%{opacity:0}100%{transform:scale(1.7);opacity:0}}

/* ---------- ZONES SYMBOLES (jeu Mode Nuit) ---------- */
.symzone{position:absolute;left:0;top:0;width:64px;height:64px;border-radius:50%;
  z-index:22;cursor:pointer;display:grid;place-items:center;border:2px solid transparent}
.symzone.debug{border-style:dashed;background:rgba(255,255,255,.04);box-shadow:0 0 16px rgba(255,255,255,.15)}
.symdbg{font-size:24px;opacity:.85;text-shadow:0 0 10px currentColor}
.symcoord{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:3px;white-space:nowrap;
  font-family:var(--f-hud);font-size:8px;letter-spacing:.04em;color:#fff;background:rgba(0,0,0,.6);padding:1px 5px;pointer-events:none}
.symfound{font-size:30px;text-shadow:0 0 18px currentColor;animation:symPop .5s var(--ease)}
@keyframes symPop{0%{transform:scale(0) rotate(-40deg);opacity:0}60%{transform:scale(1.3) rotate(8deg)}100%{transform:scale(1) rotate(0);opacity:1}}

.hs-label{
  position:absolute;left:20px;top:-10px;white-space:nowrap;
  display:flex;align-items:center;gap:0;
  opacity:0;transform:translateX(-8px);
  transition:opacity .3s,transform .35s var(--ease);
  pointer-events:none;
}
.hs-tick{width:0;height:1px;background:linear-gradient(90deg,var(--gold),transparent);transition:width .35s var(--ease)}
.hotspot.holo .hs-tick{background:linear-gradient(90deg,var(--holo),transparent)}
.hs-chip{
  background:rgba(6,11,20,.9);border:1px solid var(--panel-edge);
  border-left:2px solid var(--gold);
  padding:5px 9px;backdrop-filter:blur(8px);
  transform:translateX(6px);
}
.hotspot.holo .hs-chip{border-left-color:var(--holo)}
.hs-kicker{font-family:var(--f-hud);font-size:7px;letter-spacing:.26em;color:var(--gold);text-transform:uppercase}
.hotspot.holo .hs-kicker{color:var(--holo)}
.hs-title{font-family:var(--f-hud);font-weight:600;font-size:10.5px;letter-spacing:.05em;color:var(--ink);margin-top:1px}
.hs-sub{font-size:8.5px;color:var(--ink-dim);margin-top:2px;letter-spacing:.02em;max-width:168px;white-space:normal;line-height:1.35}

.hotspot:hover .hs-ring,.hotspot.near .hs-ring{transform:scale(1.16)}
.hotspot:hover .hs-label{opacity:1;transform:translateX(0)}
.hotspot:hover .hs-tick{width:14px}

/* ---------- HUD FRAME ---------- */
.hud{position:absolute;inset:0;pointer-events:none;z-index:40}
.hud .corner{position:absolute;width:54px;height:54px;border:1px solid var(--hairline);opacity:.7}
.hud .corner.tl{top:18px;left:18px;border-right:0;border-bottom:0}
.hud .corner.tr{top:18px;right:18px;border-left:0;border-bottom:0}
.hud .corner.bl{bottom:18px;left:18px;border-right:0;border-top:0}
.hud .corner.br{bottom:18px;right:18px;border-left:0;border-top:0}

.topbar{
  position:absolute;top:20px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:22px;pointer-events:auto;
  background:linear-gradient(180deg,rgba(7,11,20,.9),rgba(7,11,20,.66));
  border:1px solid var(--panel-edge);border-radius:2px;
  padding:9px 20px;backdrop-filter:blur(12px);
  box-shadow:0 8px 30px rgba(0,0,0,.45);
}
.brand{display:flex;flex-direction:column;line-height:1}
.brand b{font-family:var(--f-hud);font-weight:700;font-size:13px;letter-spacing:.34em;color:var(--ink)}
.brand span{font-size:8.5px;letter-spacing:.34em;color:var(--gold);margin-top:3px}
.tb-div{width:1px;height:26px;background:var(--hairline)}
.tb-stat{display:flex;flex-direction:column;line-height:1;gap:3px}
.tb-stat .k{font-family:var(--f-hud);font-size:8px;letter-spacing:.2em;color:var(--ink-faint)}
.tb-stat .v{font-family:var(--f-hud);font-size:11px;letter-spacing:.08em;color:var(--holo)}
.tb-stat .v.gold{color:var(--gold)}
.tb-back-home{font-family:var(--f-hud);font-size:10px;letter-spacing:.18em;color:var(--gold);text-decoration:none;white-space:nowrap;opacity:.85;transition:opacity .2s;}
.tb-back-home:hover{opacity:1;}

/* compass */
.compass{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  pointer-events:none;width:min(560px,52vw);
}
.compass-strip{position:relative;height:30px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
}
.compass-marks{position:absolute;top:0;left:0;height:100%;display:flex;align-items:center}
.cmark{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;transform:translateX(-50%)}
.cmark .tick{width:1px;height:8px;background:var(--ink-faint)}
.cmark.major .tick{height:13px;background:var(--gold)}
.cmark .lbl{font-family:var(--f-hud);font-size:8.5px;letter-spacing:.12em;color:var(--ink-dim);margin-top:4px;white-space:nowrap}
.compass-center{position:absolute;left:50%;top:0;transform:translateX(-50%);width:1px;height:18px;background:var(--holo);box-shadow:0 0 8px var(--holo)}
.compass-center::after{content:"";position:absolute;top:-4px;left:50%;transform:translateX(-50%);
  border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--holo)}
.compass-heading{text-align:center;font-family:var(--f-hud);font-size:11px;letter-spacing:.2em;color:var(--holo);margin-top:5px;text-shadow:0 0 10px rgba(111,214,236,.5)}

/* dock of stations */
.dock{
  position:absolute;right:22px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:7px;pointer-events:auto;z-index:42;
}
.dock-item{
  position:relative;
  display:flex;align-items:center;justify-content:flex-end;
  width:30px;height:30px;margin-left:auto;
  cursor:pointer;background:none;border:0;color:inherit;font:inherit;
}
.dock-label{
  position:absolute;right:38px;top:50%;transform:translateY(-50%) translateX(8px);
  pointer-events:none;
  font-family:var(--f-hud);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-dim);background:rgba(7,11,20,.88);border:1px solid var(--panel-edge);
  padding:7px 11px;opacity:0;
  transition:opacity .25s,transform .25s var(--ease),color .25s;white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,.4);
}
.dock-pip{
  width:30px;height:30px;border:1px solid var(--panel-edge);
  display:grid;place-items:center;background:rgba(7,11,20,.72);
  transition:border-color .25s,background .25s;flex:0 0 auto;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.dock-pip svg{width:15px;height:15px;stroke:var(--ink-dim);fill:none;stroke-width:1.4;transition:stroke .25s}
.dock-item:hover .dock-label{opacity:1;transform:translateY(-50%) translateX(0);color:var(--gold)}
.dock-item:hover .dock-pip,.dock-item.active .dock-pip{border-color:var(--gold);background:rgba(217,173,90,.12)}
.dock-item:hover .dock-pip svg,.dock-item.active .dock-pip svg{stroke:var(--gold)}

.hint{
  position:absolute;bottom:26px;left:24px;pointer-events:none;
  font-family:var(--f-hud);font-size:9px;letter-spacing:.16em;color:var(--ink-faint);
  display:flex;flex-direction:column;gap:6px;
}
.hint kbd{display:inline-block;border:1px solid var(--hairline);padding:1px 6px;color:var(--ink-dim);margin-right:6px;font-family:var(--f-hud);font-size:9px}

/* ---------- WORLD-ANCHORED HOLO SCREEN (live shimmer over rendered screen) ---------- */
.holoscreen-live{
  position:absolute;left:0;top:0;transform-origin:center;
  pointer-events:none;z-index:16;overflow:hidden;
  clip-path:polygon(2% 0,100% 4%,98% 100%,0 96%);
}
.hl-glow{position:absolute;inset:0;
  background:radial-gradient(60% 70% at 50% 45%,rgba(120,220,255,.16),transparent 70%);
  animation:hlPulse 4.5s ease-in-out infinite;mix-blend-mode:screen}
.hl-scan{position:absolute;left:0;right:0;height:18%;
  background:linear-gradient(180deg,transparent,rgba(150,230,255,.22),transparent);
  animation:hlSweep 5s linear infinite;mix-blend-mode:screen}
.hl-flick{position:absolute;inset:0;mix-blend-mode:screen;
  background:repeating-linear-gradient(180deg,rgba(150,230,255,.05) 0 2px,transparent 2px 4px);
  animation:hlFlick 0.12s steps(2) infinite;opacity:.5}
@keyframes hlPulse{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes hlSweep{0%{top:-20%}100%{top:120%}}
@keyframes hlFlick{0%{opacity:.4}100%{opacity:.55}}

/* ---------- PANELS / MODULES ---------- */
.scrim{position:absolute;inset:0;z-index:120;background:radial-gradient(120% 100% at 50% 40%,rgba(4,8,16,.72),rgba(2,4,9,.92));
  backdrop-filter:blur(6px);opacity:0;animation:fade .35s var(--ease) forwards;pointer-events:auto}
@keyframes fade{to{opacity:1}}
.modal{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);
  width:min(1180px,92vw);max-height:88vh;z-index:121;
  background:linear-gradient(180deg,rgba(10,16,28,.96),rgba(7,11,20,.97));
  border:1px solid var(--panel-edge);
  box-shadow:0 40px 120px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.4),inset 0 0 0 1px rgba(120,180,220,.05);
  display:flex;flex-direction:column;overflow:hidden;opacity:0;
  animation:pop .4s var(--ease) forwards;
  clip-path:polygon(0 14px,14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
}
@keyframes pop{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.modal-head{display:flex;align-items:center;gap:16px;padding:18px 24px;border-bottom:1px solid var(--hairline);flex:0 0 auto}
.modal-tag{font-family:var(--f-hud);font-size:9px;letter-spacing:.3em;color:var(--gold);text-transform:uppercase}
.modal-title{font-family:var(--f-hud);font-weight:600;font-size:18px;letter-spacing:.05em}
.modal-sub{font-size:12px;color:var(--ink-dim);margin-top:2px}
.modal-x{margin-left:auto;width:34px;height:34px;border:1px solid var(--hairline);background:rgba(255,255,255,.02);
  color:var(--ink-dim);cursor:pointer;display:grid;place-items:center;transition:.2s;font-size:16px}
.modal-x:hover{border-color:var(--danger);color:var(--danger);background:rgba(224,106,69,.1)}
.modal-body{overflow:auto;padding:24px;flex:1 1 auto}
.modal-body::-webkit-scrollbar{width:8px}
.modal-body::-webkit-scrollbar-thumb{background:rgba(120,180,220,.2)}

/* Netflix-style film grid */
.film-hero{position:relative;height:340px;border:1px solid var(--hairline);overflow:hidden;display:flex;align-items:flex-end;
  background:linear-gradient(180deg,rgba(10,16,28,.1),rgba(7,11,20,.95)),var(--hero,#11202e);background-size:cover;background-position:center}
.film-hero .meta{padding:30px;max-width:560px}
.film-hero h2{font-family:var(--f-hud);font-size:30px;letter-spacing:.04em;text-shadow:0 2px 20px #000}
.film-hero p{color:var(--ink-dim);margin-top:10px;line-height:1.5;font-size:13px}
.film-tags{display:flex;gap:8px;margin:14px 0}
.tag{font-family:var(--f-hud);font-size:9px;letter-spacing:.16em;border:1px solid var(--hairline);padding:4px 9px;color:var(--ink-dim)}
.btn{font-family:var(--f-hud);font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  border:1px solid var(--gold);color:var(--gold);background:rgba(217,173,90,.08);padding:11px 22px;transition:.2s}
.btn:hover{background:var(--gold);color:#0a0d14}
.btn.ghost{border-color:var(--hairline);color:var(--ink-dim)}
.btn.ghost:hover{background:rgba(255,255,255,.06);color:var(--ink);border-color:var(--ink-dim)}
.rail-title{font-family:var(--f-hud);font-size:12px;letter-spacing:.2em;color:var(--ink-dim);text-transform:uppercase;margin:26px 0 12px}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:230px;gap:14px;overflow-x:auto;padding-bottom:10px}
.rail::-webkit-scrollbar{height:7px}.rail::-webkit-scrollbar-thumb{background:rgba(120,180,220,.2)}
.card{position:relative;aspect-ratio:16/10;border:1px solid var(--hairline);overflow:hidden;cursor:pointer;background:#0d1726;transition:.25s}
.card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 14px 36px rgba(0,0,0,.5)}
.card .ph{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.9}
.card .cap{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;background:linear-gradient(transparent,rgba(4,7,15,.95));
  font-family:var(--f-hud);font-size:11px;letter-spacing:.04em}
.card .dur{position:absolute;top:8px;right:8px;font-family:var(--f-hud);font-size:9px;background:rgba(0,0,0,.6);padding:2px 6px;color:var(--holo)}

/* photo viewer */
.photo-stage{display:grid;grid-template-columns:1fr 230px;gap:18px;height:62vh}
.photo-main{position:relative;border:1px solid var(--hairline);overflow:hidden;background:#06090f;display:grid;place-items:center}
.photo-main .img{position:absolute;inset:0;background-size:cover;background-position:center;transition:.5s var(--ease)}
.photo-exif{position:absolute;left:16px;bottom:16px;display:flex;gap:18px;background:rgba(4,8,14,.6);border:1px solid var(--hairline);padding:10px 16px;backdrop-filter:blur(8px)}
.photo-exif .e{display:flex;flex-direction:column;gap:3px}
.photo-exif .e .k{font-family:var(--f-hud);font-size:8px;letter-spacing:.16em;color:var(--ink-faint)}
.photo-exif .e .v{font-family:var(--f-hud);font-size:12px;color:var(--gold)}
.photo-strip{display:flex;flex-direction:column;gap:10px;overflow-y:auto;padding-right:6px}
.photo-strip::-webkit-scrollbar{width:6px}.photo-strip::-webkit-scrollbar-thumb{background:rgba(120,180,220,.2)}
.thumb{aspect-ratio:3/2;border:1px solid var(--hairline);cursor:pointer;background-size:cover;background-position:center;opacity:.55;transition:.2s}
.thumb:hover{opacity:.85}.thumb.on{opacity:1;border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}

/* web projects */
.web-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.web-card{border:1px solid var(--hairline);overflow:hidden;cursor:pointer;background:linear-gradient(180deg,rgba(14,22,36,.7),rgba(8,12,22,.7));transition:.25s}
.web-card:hover{border-color:var(--holo);transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.5)}
.web-shot{aspect-ratio:16/9;background-size:cover;background-position:top center;border-bottom:1px solid var(--hairline);position:relative}
.web-shot .browser{position:absolute;top:0;left:0;right:0;height:22px;background:rgba(6,10,18,.9);display:flex;align-items:center;gap:5px;padding:0 9px}
.web-shot .browser i{width:7px;height:7px;border-radius:50%;background:#33405a}
.web-meta{padding:16px 18px}
.web-meta h3{font-family:var(--f-hud);font-size:14px;letter-spacing:.04em}
.web-meta p{font-size:12px;color:var(--ink-dim);margin-top:6px;line-height:1.5}
.web-stack{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.chip{font-family:var(--f-hud);font-size:8.5px;letter-spacing:.1em;border:1px solid var(--hairline);padding:3px 8px;color:var(--holo)}

/* generic media embed */
.embed{position:relative;aspect-ratio:16/9;width:100%;border:1px solid var(--hairline);background:#05080e;overflow:hidden}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* wanted board */
.wanted-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.wanted{position:relative;border:2px solid var(--gold-deep);background:linear-gradient(180deg,#1a140a,#0f0b05);padding:14px;cursor:pointer;transition:.3s}
.wanted:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px var(--gold)}
.wanted .wtop{font-family:var(--f-hud);text-align:center;color:var(--gold);letter-spacing:.18em;font-size:13px;border-bottom:1px solid var(--gold-deep);padding-bottom:8px}
.wanted .wph{aspect-ratio:1;margin:12px 0;border:1px solid var(--gold-deep);background-size:cover;background-position:center;filter:sepia(.4) contrast(1.05)}
.wanted .wname{font-family:var(--f-hud);text-align:center;font-size:14px;letter-spacing:.08em;color:#e8d4a8}
.wanted .wrole{text-align:center;font-size:10px;color:var(--gold-deep);letter-spacing:.1em;margin-top:3px}
.wanted .wbounty{text-align:center;margin-top:10px;border-top:1px solid var(--gold-deep);padding-top:8px}
.wanted .wbounty .lbl{font-size:8px;letter-spacing:.2em;color:var(--gold-deep)}
.wanted .wbounty .amt{font-family:var(--f-hud);font-size:16px;color:var(--gold)}

/* library */
.lib-list{display:flex;flex-direction:column}
.lib-row{display:grid;grid-template-columns:54px 1fr auto;gap:18px;align-items:center;padding:16px 6px;border-bottom:1px solid var(--hairline);cursor:pointer;transition:.2s}
.lib-row:hover{background:rgba(217,173,90,.05);padding-left:14px}
.lib-spine{width:54px;height:74px;background:linear-gradient(90deg,#1c1409,#2a1d0c);border:1px solid var(--gold-deep);display:grid;place-items:center}
.lib-spine span{font-family:var(--f-serif);writing-mode:vertical-rl;font-size:11px;color:var(--gold);letter-spacing:.1em}
.lib-row h4{font-family:var(--f-serif);font-size:22px;color:var(--ink);font-weight:600}
.lib-row p{font-size:12px;color:var(--ink-dim);margin-top:3px}
.lib-year{font-family:var(--f-hud);font-size:11px;color:var(--gold)}

/* archives */
.arch-row{display:grid;grid-template-columns:96px 1fr auto;gap:18px;padding:14px 8px;border-bottom:1px solid var(--hairline);align-items:center}
.arch-id{font-family:var(--f-hud);font-size:11px;color:var(--holo);letter-spacing:.08em}
.arch-row h4{font-family:var(--f-hud);font-size:13px;letter-spacing:.03em}
.arch-row p{font-size:11px;color:var(--ink-dim);margin-top:3px}
.arch-status{font-family:var(--f-hud);font-size:9px;letter-spacing:.16em;padding:4px 9px;border:1px solid var(--hairline)}
.arch-status.ok{color:var(--good);border-color:rgba(111,224,168,.4)}
.arch-status.lock{color:var(--danger);border-color:var(--danger-glow)}

/* coming soon / placeholder body */
.soon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:50px 20px;text-align:center}
.soon .ring{width:90px;height:90px;border:2px solid var(--hairline);border-top-color:var(--holo);border-radius:50%;animation:spin 1.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ledScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.soon h3{font-family:var(--f-hud);font-size:16px;letter-spacing:.16em}
.soon p{color:var(--ink-dim);max-width:440px;line-height:1.6;font-size:13px}

/* tabletop painting frame in painting module */
.paint-stage{position:relative;height:64vh;display:grid;place-items:center;background:#06090f;border:1px solid var(--hairline);overflow:hidden}
.paint-frame{position:relative;max-height:90%;max-width:80%;border:10px solid #1b140a;box-shadow:0 30px 80px rgba(0,0,0,.7),inset 0 0 40px rgba(0,0,0,.6)}
.paint-frame .img{display:block;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center;aspect-ratio:3/2}
.paint-nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border:1px solid var(--hairline);
  background:rgba(6,10,18,.7);color:var(--ink);cursor:pointer;display:grid;place-items:center;font-size:20px;transition:.2s;backdrop-filter:blur(6px)}
.paint-nav:hover{border-color:var(--gold);color:var(--gold)}
.paint-nav.l{left:18px}.paint-nav.r{right:18px}
.paint-cap{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);text-align:center}
.paint-cap h4{font-family:var(--f-serif);font-size:22px}
.paint-cap p{font-size:11px;color:var(--ink-dim);letter-spacing:.1em;margin-top:2px}
.dots{display:flex;gap:7px;justify-content:center;margin-top:12px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--ink-faint);cursor:pointer;transition:.2s}
.dots i.on{background:var(--gold);transform:scale(1.2)}

/* ---------- INTRO / BOOT ---------- */
.intro{position:absolute;inset:0;z-index:300;background:radial-gradient(120% 100% at 50% 50%,#0a1322,#04060d);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;transition:opacity .9s var(--ease)}
.intro.gone{opacity:0;pointer-events:none}
.intro-logo{font-family:var(--f-hud);font-weight:700;font-size:clamp(28px,5vw,60px);letter-spacing:.32em;color:var(--ink);
  text-shadow:0 0 40px rgba(111,214,236,.4)}
.intro-sub{font-family:var(--f-hud);font-size:11px;letter-spacing:.42em;color:var(--gold);text-transform:uppercase}
.intro-bar{width:min(420px,70vw);height:2px;background:rgba(120,180,220,.18);overflow:hidden;position:relative}
.intro-bar i{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,var(--holo),var(--gold));box-shadow:0 0 12px var(--holo)}
.intro-log{font-family:var(--f-hud);font-size:10px;letter-spacing:.14em;color:var(--ink-faint);height:14px;text-align:center}
.intro-enter{margin-top:8px;font-family:var(--f-hud);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--gold);padding:14px 34px;cursor:pointer;background:rgba(217,173,90,.06);opacity:0;transition:.4s;pointer-events:none}
.intro-enter.show{opacity:1;pointer-events:auto;animation:enterPulse 2.4s ease-in-out infinite}
.intro-enter:hover{background:var(--gold);color:#0a0d14}
@keyframes enterPulse{0%,100%{box-shadow:0 0 0 0 rgba(217,173,90,.4)}50%{box-shadow:0 0 24px 4px rgba(217,173,90,.25)}}
.intro-portfolio{margin-top:2px;font-family:var(--f-hud);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);border:1px solid var(--hairline);padding:11px 28px;cursor:pointer;background:rgba(255,255,255,.02);
  text-decoration:none;opacity:0;transition:.4s;pointer-events:none}
.intro-portfolio.show{opacity:1;pointer-events:auto}
.intro-portfolio:hover{border-color:var(--holo);color:var(--holo);background:rgba(111,214,236,.08)}

/* ---------- COMPTEUR JEU MODE NUIT ---------- */
.night-counter{position:absolute;top:96px;right:22px;z-index:60;width:208px;
  background:linear-gradient(180deg,rgba(30,18,52,.86),rgba(16,10,28,.86));
  border:1px solid rgba(150,120,220,.35);backdrop-filter:blur(10px);padding:14px 16px;
  box-shadow:0 12px 40px rgba(60,20,120,.4);
  clip-path:polygon(0 8px,8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%)}
.nc-head{display:flex;align-items:center;gap:8px}
.nc-moon{font-size:14px}
.nc-title{font-family:var(--f-hud);font-size:11px;letter-spacing:.22em;color:#c79aff}
.nc-total{font-family:var(--f-hud);font-size:18px;color:#e8d4ff;margin:8px 0 12px;letter-spacing:.04em}
.nc-clubs{display:flex;flex-direction:column;gap:8px}
.nc-club{display:flex;align-items:center;gap:9px}
.nc-glyph{font-size:16px;text-shadow:0 0 10px currentColor;width:18px;text-align:center}
.nc-name{font-family:var(--f-hud);font-size:10px;letter-spacing:.06em;color:var(--ink);flex:1}
.nc-prog{font-family:var(--f-hud);font-size:11px;letter-spacing:.04em}
.nc-hint{font-size:9.5px;color:var(--ink-faint);margin-top:12px;line-height:1.4;font-family:var(--f-hud);letter-spacing:.06em}
@media (max-width:760px){.night-counter{top:auto;bottom:96px;right:12px;width:170px}}

/* panneau de placement des zones (debug) */
.zone-cfg{position:absolute;left:18px;bottom:18px;z-index:70;width:min(420px,46vw);
  background:rgba(8,12,20,.92);border:1px solid var(--panel-edge);backdrop-filter:blur(10px);padding:14px 16px;
  box-shadow:0 16px 50px rgba(0,0,0,.5)}
.zc-head{display:flex;align-items:center;justify-content:space-between;font-family:var(--f-hud);font-size:10px;letter-spacing:.16em;color:var(--holo)}
.zc-head button{font-family:var(--f-hud);font-size:9px;letter-spacing:.1em;color:var(--gold);border:1px solid var(--gold);
  background:rgba(217,173,90,.08);padding:5px 11px;cursor:pointer;transition:.2s}
.zc-head button:hover{background:var(--gold);color:#0a0d14}
.zc-tip{font-size:10.5px;color:var(--ink-dim);line-height:1.45;margin:9px 0}
.zc-tip b{color:var(--gold)}
.zc-code{font-family:ui-monospace,Menlo,monospace;font-size:10px;line-height:1.5;color:var(--ink-dim);
  background:rgba(0,0,0,.4);border:1px solid var(--hairline);padding:10px;max-height:160px;overflow:auto;white-space:pre}
@media (max-width:760px){.zone-cfg{display:none}}

/* ---------- JOYSTICK VIRTUEL (touch / tablette) ---------- */
/* masqué sur desktop souris, visible uniquement sur touch */
.pano-joy-wrap{
  display:none; /* affiché via @media hover:none */
  position:absolute;
  bottom:72px; /* au-dessus du dock mobile */
  left:0;right:0;
  padding:0 22px;
  align-items:flex-end;justify-content:space-between;
  pointer-events:none;
  z-index:50;
}
.pano-joy-base{
  position:relative;
  width:96px;height:96px;border-radius:50%;
  background:rgba(4,8,16,.55);
  border:1.5px solid rgba(111,214,236,.28);
  backdrop-filter:blur(6px);
  pointer-events:auto;
  touch-action:none;
  flex-shrink:0;
  box-shadow:0 0 24px rgba(111,214,236,.12),inset 0 0 18px rgba(0,0,0,.5);
}
.pano-joy-ring{
  position:absolute;inset:8px;border-radius:50%;
  border:1px solid rgba(111,214,236,.16);
  pointer-events:none;
}
.pano-joy-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  font-size:14px;color:rgba(111,214,236,.4);pointer-events:none;
  font-family:var(--f-hud);
}
.pano-joy-arrow-l{left:8px}
.pano-joy-arrow-r{right:8px}
.pano-joy-knob{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,rgba(111,214,236,.55),rgba(40,90,120,.8));
  border:1.5px solid rgba(111,214,236,.55);
  box-shadow:0 0 14px rgba(111,214,236,.35);
  pointer-events:none;
  transition:box-shadow .15s;
}
/* zoom buttons */
.pano-joy-zoom{
  display:flex;flex-direction:column;gap:8px;
  align-items:center;pointer-events:auto;
  padding-bottom:8px;
}
.pjz-btn{
  width:46px;height:46px;border-radius:50%;
  background:rgba(4,8,16,.58);
  border:1.5px solid rgba(217,173,90,.32);
  color:var(--gold);font-size:18px;
  display:grid;place-items:center;
  cursor:pointer;touch-action:none;
  backdrop-filter:blur(6px);
  transition:.15s;
  user-select:none;
  box-shadow:0 0 16px rgba(217,173,90,.1);
  /* override default button styles */
  font-family:system-ui;
  -webkit-tap-highlight-color:transparent;
}
.pjz-btn:active{
  background:rgba(217,173,90,.18);
  border-color:rgba(217,173,90,.7);
  box-shadow:0 0 20px rgba(217,173,90,.3);
}

/* affiché sur périphériques touch (tablette + mobile) */
@media (hover:none) and (pointer:coarse){
  .pano-joy-wrap{display:flex}
}
/* sur mobile < 480px, joystick un peu plus petit */
@media (hover:none) and (pointer:coarse) and (max-width:480px){
  .pano-joy-base{width:80px;height:80px}
  .pano-joy-knob{width:32px;height:32px}
  .pjz-btn{width:40px;height:40px;font-size:16px}
  .pano-joy-wrap{bottom:60px;padding:0 14px}
}

/* ---------- PLAYER AUDIO COMPACT (pont du vaisseau) ---------- */
.oeuvres-audio-bar{
  position:absolute;bottom:26px;right:22px;z-index:60;
  display:flex;align-items:center;gap:4px;
  background:linear-gradient(180deg,rgba(7,11,20,.88),rgba(7,11,20,.72));
  border:1px solid var(--panel-edge);
  padding:5px 8px;backdrop-filter:blur(10px);
  box-shadow:0 6px 20px rgba(0,0,0,.45);
  pointer-events:auto;
}
.oab-btn{
  width:28px;height:28px;border:1px solid var(--hairline);
  background:rgba(255,255,255,.03);color:var(--ink-dim);
  cursor:pointer;display:grid;place-items:center;font-size:12px;
  transition:.2s;flex:0 0 auto;
}
.oab-btn:hover{border-color:var(--gold);color:var(--gold)}
.oab-play{border-color:var(--panel-edge)}
.oab-play.mode-yellow,.oab-play.mode-green{color:#ffd700;border-color:rgba(255,215,0,.4)}
.oab-play.mode-purple{color:#c084fc;border-color:rgba(192,132,252,.4)}
.oab-play.mode-blue{color:#60a5fa;border-color:rgba(96,165,250,.4)}
.oab-play.mode-red{color:#ff6b6b;border-color:rgba(255,107,107,.4)}
.oab-mode{font-size:10px;border-color:var(--hairline)}
.oab-mode.mode-yellow{color:#ffd700}.oab-mode.mode-green{color:#7eff9a}
.oab-mode.mode-purple{color:#c084fc}.oab-mode.mode-blue{color:#60a5fa}
.oab-mode.mode-red{color:#ff6b6b}
@media (max-width:760px){
  .oeuvres-audio-bar{bottom:auto;top:96px;right:12px}
}

/* toast */
.toast{position:absolute;left:50%;top:84px;transform:translateX(-50%);z-index:90;
  font-family:var(--f-hud);font-size:10px;letter-spacing:.16em;color:var(--holo);
  background:rgba(8,14,24,.86);border:1px solid var(--panel-edge);padding:9px 18px;
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* night-mode tint over whole stage */
.nightmode{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;transition:opacity 1.1s var(--ease);
  background:radial-gradient(80% 70% at 18% 50%,rgba(90,30,160,.32),transparent 55%),linear-gradient(90deg,rgba(40,10,70,.5),transparent 40%);
  mix-blend-mode:screen}
.nightmode.on{opacity:1}

/* ============================================================
   RESPONSIVE — tablette et mobile
   ============================================================ */

/* ── Tablette (≤ 900 px) ── */
@media (max-width:900px){
  .topbar{gap:14px;padding:8px 14px}
  .tb-stat:nth-child(n+6){display:none}

  .modal{width:min(1180px,96vw);max-height:92vh}
  .modal-head{padding:14px 18px}
  .modal-body{padding:16px 18px}
  .modal-title{font-size:15px}

  .film-hero{height:260px}
  .film-hero h2{font-size:22px}

  .photo-stage{grid-template-columns:1fr 180px}

  .web-grid{grid-template-columns:1fr 1fr}

  .wanted-grid{grid-template-columns:repeat(2,1fr)}

  .rail{grid-auto-columns:180px;gap:10px}

  .hint{display:none}
}

/* dock-mobile masqué par défaut, affiché seulement ≤ 760px */
.dock-mobile{display:none}

/* ── Mobile (≤ 760 px) ── */
@media (max-width:760px){
  /* HUD */
  .dock{display:none}
  .topbar{gap:8px;padding:6px 10px;top:12px}
  .brand span{display:none}
  .tb-div{display:none}
  .tb-stat:nth-child(n+4){display:none}
  .tb-stat .k{font-size:7px}
  .tb-stat .v{font-size:9.5px}
  .compass{width:84vw;bottom:18px}
  .compass-heading{font-size:9.5px}
  .hint{display:none}
  .hud .corner{width:36px;height:36px;top:10px}
  .hud .corner.tl{left:10px;top:10px}
  .hud .corner.tr{right:10px;top:10px}
  .hud .corner.bl{bottom:10px;left:10px}
  .hud .corner.br{bottom:10px;right:10px}

  /* Modal — plein écran */
  .modal{
    width:100vw;max-height:100dvh;height:100dvh;
    top:0;left:0;transform:none;
    clip-path:none;border-radius:0;border-left:0;border-right:0;
    animation:popMobile .3s var(--ease) forwards;
  }
  @keyframes popMobile{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .modal-head{padding:12px 14px;gap:10px}
  .modal-title{font-size:14px}
  .modal-sub{font-size:11px}
  .modal-body{padding:14px}

  /* Films */
  .film-hero{height:180px}
  .film-hero h2{font-size:18px}
  .film-hero p{display:none}
  .film-tags{gap:5px}
  .tag{font-size:8px;padding:3px 6px}
  .rail{grid-auto-columns:150px;gap:8px}
  .card .cap{font-size:10px}

  /* Photos */
  .photo-stage{grid-template-columns:1fr;height:auto;gap:12px}
  .photo-main{height:52vw;min-height:180px}
  .photo-strip{flex-direction:row;overflow-x:auto;overflow-y:visible;padding:0 0 6px}
  .thumb{width:72px;flex:0 0 72px;aspect-ratio:3/2}
  .photo-exif{gap:10px;padding:7px 10px}
  .photo-exif .e .v{font-size:10px}

  /* Web */
  .web-grid{grid-template-columns:1fr}

  /* Console */
  .wanted-grid{grid-template-columns:1fr 1fr}

  /* Library — book cover grid already uses auto-fill */

  /* Dock mobile — barre basse */
  .dock-mobile{
    display:flex;
    position:absolute;bottom:0;left:0;right:0;z-index:42;
    overflow-x:auto;
    background:linear-gradient(0deg,rgba(4,6,13,.95),rgba(7,11,20,.8));
    border-top:1px solid var(--panel-edge);padding:6px 10px;gap:6px;
    -webkit-overflow-scrolling:touch;
  }
  .dock-mobile::-webkit-scrollbar{display:none}
  .dock-mobile .dm-btn{
    display:flex;flex-direction:column;align-items:center;gap:3px;flex:0 0 auto;
    padding:6px 8px;border:1px solid var(--hairline);background:rgba(255,255,255,.02);
    color:var(--ink-dim);cursor:pointer;transition:.2s;min-width:52px;
  }
  .dock-mobile .dm-btn.active,.dock-mobile .dm-btn:active{border-color:var(--gold);color:var(--gold)}
  .dock-mobile .dm-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.4}
  .dock-mobile .dm-label{font-family:var(--f-hud);font-size:7px;letter-spacing:.1em;white-space:nowrap}

  /* Toast — shifted for dock */
  .toast{top:72px}

  /* Night counter */
  .night-counter{top:auto;bottom:72px;right:10px;width:160px;font-size:.9em}

  /* Audio bar */
  .oeuvres-audio-bar{bottom:auto;top:86px;right:10px}

  /* Compass above dock */
  .compass{bottom:56px}
}

/* ── Très petit mobile (≤ 380 px) ── */
@media (max-width:380px){
  .topbar{gap:5px}
  .tb-stat:nth-child(n+3){display:none}
  .brand b{font-size:11px;letter-spacing:.2em}
  .film-hero{height:140px}
  .rail{grid-auto-columns:130px}
}