:root{
  --bg:#0b0b0c; --fg:#f7f7f7; --mut:#b7bcc7;
  --card:#131317; --line:#22242c; --accent:#7bd3ff;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:500 15px/1.45 system-ui,Segoe UI,Roboto,Arial;color:var(--fg);background:var(--bg)}
a{color:var(--accent);text-decoration:none}
a:hover{opacity:.9}

/* conteneur large */
.wrap{max-width:1500px;margin:0 auto;padding:22px}

/* Navbar simple */
.navbar{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;margin:18px auto 14px;max-width:1320px;
  border-radius:20px;border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  box-shadow:0 10px 34px rgba(0,0,0,.38);backdrop-filter:blur(8px);
  flex-wrap:wrap;               /* évite tout débordement */
}
.nav-left{display:flex;gap:10px}
.spacer{flex:1 1 auto}

.btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:12px;padding:10px 14px;cursor:pointer}
.btn.small{padding:7px 12px;font-size:13px}
.btn.muted{opacity:.85}

/* Search */
.search{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:8px 12px;
  flex:1 1 360px;               /* prend la place dispo sans déborder */
  min-width:0;                  /* permet la réduction correcte */
  max-width:100%;
}
.search svg{width:18px;height:18px;fill:none;stroke:#cfe3ff;stroke-width:2}
.search input{
  flex:1;background:transparent;border:0;outline:0;color:#fff;
  min-width:0;                  /* empêche l’overflow de l’input */
}

.input, select{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:10px;padding:9px 12px}

/* ===== Cartes XXL (plein format) ===== */
.grid{
  display:grid;
  gap:28px;
  grid-template-columns: minmax(320px, 1280px);
  place-items: center;
  width:100%;
}
@media (max-width:900px){ .grid{grid-template-columns:1fr} }

.card{
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 14px 40px rgba(0,0,0,.45);
  width:100%;max-width:1280px;
}
.cover{aspect-ratio:16/9;background:#000 center/cover no-repeat}
.cover.banner{aspect-ratio:16/7}
.cover.cover-muted{background:linear-gradient(180deg,#15171c,#101215)}
.card .body{padding:20px}
.title{font-weight:800;font-size:24px;letter-spacing:.2px}
.mut{color:var(--mut);font-size:15px}
.row{display:flex;align-items:center;gap:12px}

/* ===== Viewer HUD ===== */
#viewerWrap{position:fixed;inset:0;background:#000;display:none}
#viewer{position:absolute;inset:0}
.hud{position:absolute;left:12px;right:12px;top:12px;display:flex;gap:8px;flex-wrap:wrap;z-index:10}
.hud .box{
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.18);
  padding:8px 10px;border-radius:10px;
  display:flex;align-items:center;gap:8px;color:#fff;
}
.hud label{color:#fff}
.hud select{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;border-radius:8px;padding:6px 8px
}
.hud .btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff}
.hud .right{margin-left:auto}

/* ===== Hotspots "flèche" (type=scene + cssClass=hotspot-arrow) ===== */
/* Pannellum transforme le parent : on donne une vraie taille cliquable
   au parent et on dessine le visuel dans ::after. */
.pnlm-hotspot.hotspot-arrow,
.pnlm-hotspot-base.hotspot-arrow{
  position:absolute;
  width:40px;
  height:40px;
  margin-left:-20px;              /* centre la zone cliquable */
  margin-top:-20px;
  z-index:9999;                   /* au-dessus de tout */
  cursor:pointer;
  pointer-events:auto;            /* ré-active le clic si neutralisé */
}
.pnlm-hotspot.hotspot-arrow::after,
.pnlm-hotspot-base.hotspot-arrow::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:36px; height:36px;
  margin-left:-18px; margin-top:-18px;
  border:2px solid #fff; border-left:0; border-top:0;
  border-radius:4px;
  background:rgba(0,0,0,.30);
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  transform:rotate(-45deg);
  pointer-events:none;            /* laisse le clic au parent */
}
.pnlm-hotspot.hotspot-arrow:hover::after,
.pnlm-hotspot-base.hotspot-arrow:hover::after{
  background:rgba(255,255,255,.12);
}

/* Tooltip (texte du hotspot) */
.pnlm-hotspot.hotspot-arrow .pnlm-tooltip,
.pnlm-hotspot-base.hotspot-arrow .pnlm-tooltip{
  background:rgba(0,0,0,.75);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  padding:6px 8px;
  border-radius:6px;
  white-space:nowrap;
  transform:translateY(-6px);
  z-index:10000;
}

/* Vendor block */
.vendor{margin:10px 0 2px;display:grid;gap:4px}
.vendor-line{opacity:.95}
.vendor-note{opacity:.8}

/* ===== Responsive ===== */
@media (max-width:900px){
  .spacer{display:none}
  .search{order:2;width:100%;flex:1 1 100%}
  .nav-left{order:1}
}

/* (Optionnel) Thème clair
@media (prefers-color-scheme: light){
  :root{ --bg:#f6f7fb; --fg:#0c0d10; --mut:#5d6472; --card:#ffffff; --line:#e6e8ef; --accent:#006ad4; }
  .navbar{ box-shadow:0 10px 24px rgba(0,0,0,.08); }
}
*/