:root{
  --bg:#0b0c0f;
  --panel:#15171b;
  --panel2:#101116;
  --edge:#252832;
  --txt:#e9edf5;
  --muted:#a2a8b5;
  --gold:#d6c07a;
  --gold-strong:#d5c384;

  --radius:18px;
  --shadow:0 18px 45px rgba(0,0,0,.6);

  --side-w:340px;
  --pad:14px;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,
*::before,
*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:radial-gradient(circle at top,#15171b 0,#050509 60%);
  color:var(--txt);
  font-family:var(--font);
  font-size:15px;
}

/* ===== Layout global ===== */

#nexys360-root{
  height:100vh;
  display:flex;
  flex-direction:column;
}

.nx-header{
  height:56px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(90deg,#111215,#171920);
  border-bottom:1px solid var(--edge);
  box-shadow:0 12px 24px rgba(0,0,0,.6);
  z-index:30;
}

/* ===== Logo / titre / actions ===== */

.nx-logo{
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:18px;
}
.nx-logo span{
  color:var(--gold);
}

.nx-title span{
  font-size:17px;
  font-weight:500;
}

.nx-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

.nx-profile-select{
  height:32px;
  padding:0 10px;
  border:1px solid var(--edge);
  border-radius:999px;
  background:linear-gradient(135deg,var(--panel),var(--panel2));
  color:var(--txt);
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.nx-profile-select:hover{
  border-color:rgba(255,255,255,.15);
  background:linear-gradient(135deg,var(--panel2),var(--panel));
}
.nx-profile-select:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(213,195,132,.2);
}

/* Indicateur de progression */
.nx-progress-indicator{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-right:8px;
}
.nx-progress-label{
  font-size:11px;
  font-weight:500;
  color:var(--gold);
  text-align:center;
}
.nx-progress-bar{
  width:120px;
  height:6px;
  background:rgba(255,255,255,.08);
  border-radius:999px;
  overflow:hidden;
  border:1px solid var(--edge);
}
.nx-progress-fill{
  height:100%;
  background:linear-gradient(90deg,var(--gold),var(--gold-strong));
  transition:width .4s ease;
  box-shadow:0 0 8px rgba(213,195,132,.5);
}

/* Liste des chapitres */
.nx-chapter-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.nx-chapter-item{
  padding:10px 12px;
  border:1px solid var(--edge);
  border-radius:var(--radius);
  background:rgba(255,255,255,.02);
  display:flex;
  justify-content:space-between;
  align-items:center;
  transition:background .2s ease;
}
.nx-chapter-item:hover{
  background:rgba(255,255,255,.04);
}
.nx-chapter-item[data-completed="1"]{
  border-color:#4ade80;
  background:rgba(74,222,128,.05);
}
.nx-chapter-info{
  flex:1;
}
.nx-chapter-name{
  font-weight:600;
  font-size:13px;
  color:var(--txt);
  margin-bottom:2px;
}
.nx-chapter-item[data-completed="1"] .nx-chapter-name::before{
  content:'✓ ';
  color:#4ade80;
}
.nx-chapter-desc{
  font-size:11px;
  color:var(--txt-muted);
}
.nx-chapter-actions{
  display:flex;
  gap:6px;
}

/* Liste des versions */
.nx-version-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.nx-version-item{
  padding:8px 10px;
  border:1px solid var(--edge);
  border-radius:var(--radius);
  background:rgba(255,255,255,.02);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
}
.nx-version-item:hover{
  background:rgba(255,255,255,.04);
}

/* Timeline list (builder) */
.nx-timeline-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.nx-timeline-item{
  padding:8px 10px;
  border:1px solid var(--edge);
  border-radius:var(--radius);
  background:rgba(255,255,255,.02);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
}
.nx-timeline-item:hover{
  background:rgba(255,255,255,.04);
}
.nx-timeline-item em{
  color:var(--text-muted);
  font-style:italic;
  font-size:11px;
}

/* Quiz builder styles */
.nx-quiz-builder{
  border-top:1px solid var(--edge);
  padding-top:12px;
  margin-top:8px;
}
.nx-quiz-builder .nx-hint{
  font-size:11px;
  color:var(--text-muted);
  margin-top:2px;
}

/* Contrôles versions dans viewer */
.nx-version-controls{
  position:absolute;
  top:20px;
  right:20px;
  display:flex;
  align-items:center;
  gap:12px;
  background:rgba(11,14,20,.95);
  border:1px solid var(--edge);
  border-radius:999px;
  padding:8px 16px;
  box-shadow:0 8px 24px rgba(0,0,0,.7);
  z-index:15;
}
.nx-version-btn{
  width:32px;
  height:32px;
  border:none;
  border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-strong));
  color:#111015;
  font-size:14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.nx-version-btn:hover{
  transform:scale(1.05);
  box-shadow:0 4px 12px rgba(213,195,132,.5);
}
.nx-version-btn:disabled{
  opacity:0.3;
  cursor:not-allowed;
}
.nx-version-label{
  font-size:13px;
  font-weight:600;
  color:var(--gold);
  min-width:100px;
  text-align:center;
}

/* Bouton audio start */
.nx-audio-player{
  position:absolute;
  bottom:10px; /* Collé en bas si pas de timeline */
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:6px;
  background:rgba(11,14,20,.95);
  border:1px solid var(--edge);
  border-radius:999px;
  padding:6px 12px;
  box-shadow:0 8px 24px rgba(0,0,0,.7);
  z-index:14;
  transition:bottom 0.3s ease; /* Transition fluide lors du changement */
}
/* Classe ajoutée quand la timeline est visible */
.nx-audio-player.with-timeline{
  bottom:125px !important; /* Au-dessus de la timeline (timeline: 20px + hauteur ~90px + marge 15px) */
}
.nx-audio-play-btn,
.nx-audio-stop-btn{
  width:24px;
  height:24px;
  border:none;
  border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-strong));
  color:#111015;
  font-size:10px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s ease;
}
.nx-audio-play-btn:hover,
.nx-audio-stop-btn:hover{
  transform:scale(1.05);
}
.nx-audio-play-btn[data-playing="1"]{
  position:relative;
}
.nx-audio-play-btn[data-playing="1"]::before{
  content:'';
  position:absolute;
  width:3px;
  height:10px;
  background:#111015;
  left:7px;
}
.nx-audio-play-btn[data-playing="1"]::after{
  content:'';
  position:absolute;
  width:3px;
  height:10px;
  background:#111015;
  right:7px;
}
.nx-audio-progress{
  width:100px;
  height:4px;
  background:rgba(255,255,255,.08);
  border-radius:999px;
  position:relative;
  overflow:hidden;
}
.nx-audio-progress-bar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--gold),var(--gold-strong));
  border-radius:999px;
  transition:width .1s linear;
}
.nx-audio-time{
  font-size:10px;
  color:var(--gold);
  font-weight:600;
  min-width:70px;
  text-align:right;
}

/* Inventaire collectibles */
.nx-inventory{
  position:absolute;
  top:20px;
  left:20px;
  width:200px;
  background:rgba(11,14,20,.95);
  border:1px solid var(--edge);
  border-radius:var(--radius);
  padding:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.7);
  z-index:15;
}
.nx-inventory-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  font-size:13px;
  font-weight:600;
  color:var(--gold);
}
.nx-inventory-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:6px;
}
.nx-inventory-item{
  width:40px;
  height:40px;
  border:1px solid var(--edge);
  border-radius:var(--radius);
  background:rgba(255,255,255,.02);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}
.nx-inventory-item:hover{
  transform:scale(1.1);
  box-shadow:0 0 12px rgba(213,195,132,.5);
}
.nx-inventory-item[data-collected="0"]{
  opacity:0.2;
  filter:grayscale(1);
  cursor:default;
}
.nx-inventory-item[data-collected="0"]:hover{
  transform:none;
  box-shadow:none;
}

/* Quiz dans info panel */
.nx-quiz-container{
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid var(--edge);
}
.nx-quiz-question{
  font-size:15px;
  font-weight:600;
  margin-bottom:16px;
  color:var(--txt);
}
.nx-quiz-options{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.nx-quiz-option{
  padding:12px 16px;
  border:1px solid var(--edge);
  border-radius:var(--radius);
  background:rgba(255,255,255,.02);
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
  font-size:14px;
  color:#e9edf5; /* Texte blanc */
}
.nx-quiz-option:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.15);
}
.nx-quiz-option[data-correct="1"]{
  background:rgba(74,222,128,.1);
  border-color:#4ade80;
  cursor:default;
}
.nx-quiz-option[data-wrong="1"]{
  background:rgba(239,68,68,.1);
  border-color:#ef4444;
  cursor:default;
}
.nx-quiz-feedback{
  margin-top:16px;
  padding:12px;
  border-radius:var(--radius);
  font-size:13px;
  font-weight:500;
}
.nx-quiz-feedback[data-correct="1"]{
  background:rgba(74,222,128,.15);
  border:1px solid #4ade80;
  color:#4ade80;
}
.nx-quiz-feedback[data-correct="0"]{
  background:rgba(239,68,68,.15);
  border:1px solid #ef4444;
  color:#ef4444;
}

/* Effet de brûlure pour transition timeline */
#nxBurnOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.05s;
  overflow: hidden; /* Empêche la capture zoomée de déborder */
}

#nxBurnOverlay.active {
  opacity: 1;
}

#nxBurnOverlay canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Timeline navigation temporelle */
.nx-timeline{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  width:auto;
  min-width:400px;
  max-width:600px;
  background:rgba(11,14,20,.95);
  border:1px solid var(--edge);
  border-radius:var(--radius);
  padding:12px 20px;
  box-shadow:0 8px 24px rgba(0,0,0,.7);
  z-index:15;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.nx-timeline-header{
  display:flex;
  align-items:center;
  gap:16px;
}
.nx-timeline-nav-btn{
  width:24px;
  height:24px;
  border:none;
  border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-strong));
  color:#111015;
  font-size:10px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s ease, opacity .2s ease;
  flex-shrink:0;
}
.nx-timeline-nav-btn:hover:not(:disabled){
  transform:scale(1.1);
}
.nx-timeline-nav-btn:disabled{
  opacity:0.25;
  cursor:not-allowed;
}
.nx-timeline-main{
  flex:1;
  position:relative;
  height:24px;
  display:flex;
  align-items:center;
  min-width:300px;
}
.nx-timeline-bar{
  position:absolute;
  top:50%;
  left:0;
  right:0;
  height:2px;
  background:rgba(255,255,255,.1);
  border-radius:999px;
  transform:translateY(-50%);
  z-index:1;
}
.nx-timeline-progress{
  position:absolute;
  top:50%;
  left:0;
  height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-strong));
  border-radius:999px;
  transform:translateY(-50%);
  z-index:2;
  transition:width .5s cubic-bezier(0.4,0,0.2,1);
  box-shadow:0 0 8px rgba(213,195,132,.4);
}
.nx-timeline-points{
  position:absolute;
  top:50%;
  left:0;
  right:0;
  transform:translateY(-50%);
  z-index:3;
  display:flex;
  justify-content:space-between;
}
.nx-timeline-point{
  width:20px;
  height:20px;
  border-radius:3px;
  background:rgba(20,21,27,1);
  border:2px solid rgba(255,255,255,.15);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:700;
  color:var(--text-muted);
  cursor:pointer;
  transition:all .3s ease;
  position:relative;
  flex-shrink:0;
}
.nx-timeline-point:hover{
  transform:scale(1.1);
  border-color:var(--gold);
}
.nx-timeline-point[data-active="1"]{
  background:linear-gradient(135deg,var(--gold),var(--gold-strong));
  border-color:var(--gold);
  color:#111015;
  box-shadow:0 2px 8px rgba(213,195,132,.4);
  transform:scale(1.15);
}
.nx-timeline-point[data-passed="1"]:not([data-active="1"]){
  border-color:var(--gold);
  color:var(--gold);
}
.nx-timeline-labels{
  display:flex;
  justify-content:space-between;
}
.nx-timeline-label-item{
  min-width:60px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:2px;
  opacity:0.6;
  transition:opacity .3s ease;
  flex-shrink:0;
  margin-left:30px;
}
.nx-timeline-label-item:first-child{
  margin-left:20px;
}
.nx-timeline-label-item:last-child{
  margin-right:20px;
}
.nx-timeline-label-item[data-active="1"]{
  opacity:1;
}
.nx-timeline-year{
  font-size:11px;
  font-weight:700;
  color:var(--gold);
  letter-spacing:0.3px;
}
.nx-timeline-name{
  font-size:9px;
  color:var(--text-light);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:80px;
}

/* Responsive timeline */
@media (max-width:768px){
  .nx-timeline{
    min-width:300px;
    max-width:95%;
    padding:10px 12px;
  }
  .nx-timeline-main{
    min-width:200px;
  }
  .nx-timeline-point{
    width:18px;
    height:18px;
    font-size:9px;
  }
  .nx-timeline-year{
    font-size:10px;
  }
  .nx-timeline-name{
    font-size:8px;
  }
  .nx-timeline-nav-btn{
    width:22px;
    height:22px;
    font-size:9px;
  }
}

/* Anciens styles du slider - À supprimer si non utilisé ailleurs */
.nx-timeline-slider{
  width:100%;
  height:8px;
  background:rgba(255,255,255,.08);
  border-radius:999px;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
}
.nx-timeline-slider::-webkit-slider-thumb{
  appearance:none;
  -webkit-appearance:none;
  width:20px;
  height:20px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-strong));
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.6);
  transition:transform .2s ease;
}
.nx-timeline-slider::-webkit-slider-thumb:hover{
  transform:scale(1.15);
}
.nx-timeline-slider::-moz-range-thumb{
  width:20px;
  height:20px;
  border:none;
  border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-strong));
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.6);
  transition:transform .2s ease;
}
.nx-timeline-slider::-moz-range-thumb:hover{
  transform:scale(1.15);
}
.nx-timeline-markers{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:8px;
  pointer-events:none;
}
.nx-timeline-marker{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--gold);
  border:2px solid rgba(11,14,20,.9);
  top:50%;
  transform:translate(-50%, -50%);
  box-shadow:0 0 8px rgba(213,195,132,.6);
}
.nx-timeline-label{
  text-align:center;
  font-size:13px;
  font-weight:600;
  color:var(--gold);
  flex:1;
  min-width:0;
}

/* ===== Main ===== */

.nx-main{
  flex:1;
  display:flex;
  min-height:0;
}

/* ===== Sidepanel ===== */

.nx-sidepanel{
  width:var(--side-w);
  max-width:100%;
  padding:16px 14px 18px;
  border-right:1px solid var(--edge);
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow-y:auto;
}

/* Bloc repliable */
.nx-block{
  border:1px solid var(--edge);
  border-radius:var(--radius);
  background:radial-gradient(circle at top,var(--panel2),#0b0c10);
}

.nx-block-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px 6px;
}

.nx-block-head h2{
  margin:0;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--gold);
}

/* bouton + / − */
.nx-block-toggle{
  border:none;
  background:transparent;
  color:var(--gold);
  font-size:16px;
  cursor:pointer;
  width:22px;
  height:22px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  padding:0;
  transition:background .14s ease, color .14s ease, box-shadow .14s ease;
}

.nx-block-toggle:hover{
  background:rgba(214,192,122,.12);
  box-shadow:0 0 0 1px rgba(214,192,122,.25);
}

.nx-block[data-collapsed="1"] .nx-block-toggle{
  color:var(--gold-strong);
  opacity:.9;
}

.nx-block-body{
  padding:4px 12px 10px;
}

.nx-block[data-collapsed="1"] .nx-block-body{
  display:none;
}

/* ===== Champs ===== */

.nx-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:8px;
  font-size:13px;
}
.nx-field span{
  color:var(--muted);
}

.nx-field input,
.nx-field select,
.nx-field textarea{
  border-radius:10px;
  border:1px solid var(--edge);
  background:#101118;
  color:var(--txt);
  padding:7px 9px;
  font-size:13px;
  outline:none;
}
.nx-field input:focus,
.nx-field select:focus,
.nx-field textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(214,192,122,.25);
}

.nx-field textarea{
  resize:vertical;
}

.nx-inline-buttons{
  display:flex;
  gap:6px;
  margin-bottom:8px;
}

/* ===== Boutons ===== */

.nx-btn,
.nx-btn-small,
.nx-btn-full{
  border:none;
  border-radius:999px;
  background:linear-gradient(135deg,var(--gold),var(--gold-strong));
  color:#111015;
  font-weight:600;
  font-size:13px;
  padding:7px 14px;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.55);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.nx-btn:hover,
.nx-btn-small:hover,
.nx-btn-full:hover{
  filter:brightness(1.05);
  box-shadow:0 12px 30px rgba(0,0,0,.7);
  transform:translateY(-1px);
}
.nx-btn:active,
.nx-btn-small:active,
.nx-btn-full:active{
  transform:translateY(0);
  box-shadow:0 5px 14px rgba(0,0,0,.7);
}

.nx-btn{
  min-width:40px;
  height:32px;
}

.nx-btn-small{
  height:30px;
  padding-inline:12px;
  font-size:12px;
}

.nx-btn-full{
  width:100%;
  margin-top:4px;
}

.nx-btn-danger{
  background:linear-gradient(135deg,#ff6b6b,#f03e3e);
  color:#fff;
}

/* ===== Viewer ===== */

.nx-viewer{
  flex:1;
  padding:14px 16px 18px;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:0;
}

#nxCanvasContainer{
  position:relative;
  width:100%;
  flex:1;
  min-height:320px;
  border-radius:var(--radius);
  border:1px solid var(--edge);
  background:#05060a;
  overflow:hidden; /* Coupe le canvas Three.js s'il déborde */
  box-shadow:var(--shadow);
}

#nxCanvasContainer canvas{
  width:100%;
  height:100%;
  display:block;
}

#nxHotspotLayer{
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* ===== Hotspots ===== */

/* États des hotspots */
.nx-hotspot[data-locked="1"]{
  opacity:0.4;
  pointer-events:none;
  filter:grayscale(0.7);
}
.nx-hotspot[data-locked="1"]::after{
  content:'🔒';
  position:absolute;
  top:-8px;
  right:-8px;
  font-size:14px;
  background:rgba(20,21,27,.95);
  border:1px solid var(--edge);
  border-radius:50%;
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.6);
}

/* Badge de complétion désactivé */
.nx-hotspot[data-completed="1"]::before{
  display: none; /* Masquer la coche verte */
}

/* Garder les hotspots complétés lumineux */
.nx-hotspot[data-completed="1"] .nx-hotspot-icon{
  opacity:1 !important;
  filter:brightness(1.1); /* Légèrement plus lumineux */
}

.nx-hotspot[data-collectible="1"]{
  animation:collectiblePulse 2s ease-in-out infinite;
}
.nx-hotspot[data-collectible="1"]::after{
  content:'⭐';
  position:absolute;
  top:-10px;
  right:-10px;
  font-size:16px;
  filter:drop-shadow(0 0 6px rgba(255,215,0,.8));
  animation:collectibleRotate 3s linear infinite;
}

@keyframes collectiblePulse{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.08); }
}
@keyframes collectibleRotate{
  0%{ transform:rotate(0deg); }
  100%{ transform:rotate(360deg); }
}

.nx-hotspot{
  position:absolute;
  transform:translate(-50%,-50%);
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.7);
  background:var(--hs-bubble-bg, rgba(11,14,20,.92)); /* bulle = tout le pill */
  color:var(--hs-text-color, #e9edf5);
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  pointer-events:auto;
  cursor:pointer;
  opacity:0;
  transition:opacity .08s linear;
}
.nx-hotspot.nx-hotspot-no-bubble{
  background:transparent;
  border:none;
  padding:0;
}
.nx-hotspot.nx-hotspot-no-bubble .nx-hotspot-label{
  border-radius:999px;
  padding:2px 6px;
  background:transparent;
  color:var(--hs-text-color, #e9edf5);
}
.nx-hotspot[data-visible="1"]{
  opacity:1;
}
.nx-hotspot-icon{
  position:relative;
  width:18px;
  height:18px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--hs-color,var(--gold)),var(--hs-color,var(--gold-strong)));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  color:#111015;
}

/* Icône SVG personnalisée */
.nx-hotspot-icon-svg{
  background:transparent !important;
  padding:2px;
}
.nx-hotspot-icon-svg svg{
  width:100%;
  height:100%;
  display:block;
  color:var(--hs-color, #d6c07a);
  fill:currentColor;
}

.nx-hotspot-label{
  white-space:nowrap;
  color:var(--hs-text-color, #e9edf5);
}

/* Styles supplémentaires & animés */
.nx-hotspot.hs-move-pill{}
.nx-hotspot.hs-info-pill{}
.nx-hotspot.hs-imp-pill{ border-color:#ff6b6b; }

/* Animations génériques (appliquées par paramètre) */
.nx-hotspot.hs-anim-soft .nx-hotspot-icon{
  animation:nxPulseSoft 1.6s ease-in-out infinite;
}
.nx-hotspot.hs-anim-pulse .nx-hotspot-icon{
  animation:nxPulse 1.8s ease-in-out infinite;
}
.nx-hotspot.hs-anim-heart .nx-hotspot-icon{
  animation:nxPulse 1.6s ease-in-out infinite;
}
.nx-hotspot.hs-anim-alert .nx-hotspot-icon{
  animation:nxPulse 1.4s ease-in-out infinite;
}

/* Effets de halo / alerte */
.nx-hotspot.hs-info-glow,
.nx-hotspot.hs-anim-glow{
  box-shadow:0 0 14px var(--hs-color,var(--gold));
}
.nx-hotspot.hs-imp-pulse,
.nx-hotspot.hs-anim-alert{
  box-shadow:0 0 16px rgba(255,107,107,.7);
}

/* Anneaux de pulsation autour de l'icône — Water pulse */
/* Water pulse reprend son "ancienne" animation fluide (mini -> maxi) */
.nx-hotspot.hs-anim-pulse .nx-hotspot-icon::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:44px;
  height:44px;
  border-radius:999px;
  border:2px solid var(--hs-color,var(--gold));
  transform:translate(-50%,-50%) scale(0.1);
  opacity:1;
  pointer-events:none;
  box-sizing:border-box;
  animation:nxRingWaterMain 1.8s linear infinite;
  z-index:-1;
}

/* Deuxième anneau Water pulse, plus large et plus léger */
.nx-hotspot.hs-anim-pulse .nx-hotspot-icon::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:60px;
  height:60px;
  border-radius:999px;
  border:2px solid var(--hs-color,var(--gold));
  transform:translate(-50%,-50%) scale(0.1);
  opacity:.6;
  pointer-events:none;
  box-sizing:border-box;
  animation:nxRingWaterSoft 1.8s linear infinite;
  z-index:-1;
}

/* Anneaux Heart pulse : récupère l'animation actuelle de Water pulse */
.nx-hotspot.hs-anim-heart .nx-hotspot-icon::before,
.nx-hotspot.hs-anim-heart .nx-hotspot-icon::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:44px;
  height:44px;
  border-radius:999px;
  border:2px solid var(--hs-color,var(--gold));
  transform:translate(-50%,-50%) scale(0.4);
  opacity:0;
  pointer-events:none;
  box-sizing:border-box;
  animation:nxRingWater 1.6s linear infinite;
  z-index:-1;
}

/* Deuxième anneau Heart pulse */
.nx-hotspot.hs-anim-heart .nx-hotspot-icon::after{
  width:60px;
  height:60px;
  border-color:var(--hs-color,var(--gold));
  opacity:.65;
  animation-delay:.35s;
}

/* Plus besoin d'ajustement : les anneaux sont désormais sur l'icône */

.nx-hotspot.hs-anim-heart.nx-hotspot-no-bubble::before,
.nx-hotspot.hs-anim-heart.nx-hotspot-no-bubble::after{
  transform:translate(-50%,-50%) scale(0.4);
}

/* Plus besoin de règles spécifiques pour le preview : les anneaux sont sur l'icône */

@keyframes nxPulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.15); }
  100%{ transform:scale(1); }
}

@keyframes nxPulseSoft{
  0%{ transform:scale(0.94); }
  50%{ transform:scale(1.06); }
  100%{ transform:scale(0.94); }
}

/* Water pulse — croissance régulière mini -> maxi, opacité décroissante */
@keyframes nxRingWaterMain{
  0%{
    transform:translate(-50%,-50%) scale(0.1);
    opacity:1;
  }
  50%{
    transform:translate(-50%,-50%) scale(1.6);
    opacity:0;
  }
  100%{
    transform:translate(-50%,-50%) scale(1.6);
    opacity:0;
  }
}

@keyframes nxRingWaterSoft{
  0%{
    transform:translate(-50%,-50%) scale(0.1);
    opacity:.6;
  }
  50%{
    transform:translate(-50%,-50%) scale(1.6);
    opacity:0;
  }
  100%{
    transform:translate(-50%,-50%) scale(1.6);
    opacity:0;
  }
}

/* Heart pulse — récupère l'ancienne animation Water (mini -> maxi mais plus serré) */
@keyframes nxRingWater{
  0%{
    transform:translate(-50%,-50%) scale(0.4);
    opacity:.75;
  }
  50%{
    transform:translate(-50%,-50%) scale(1.25);
    opacity:0;
  }
  100%{
    transform:translate(-50%,-50%) scale(1.25);
    opacity:0;
  }
}

/* ===== Info panel ===== */
/* ===== Info panel ===== */

.nx-info{
  width:100%;
  max-width:420px;
  border-radius:var(--radius);
  border:1px solid var(--edge);
  background:radial-gradient(circle at top,var(--panel),#080910);
  box-shadow:var(--shadow);
  padding:10px 12px;
  font-size:13px;
  position:absolute;
  right:18px;
  bottom:22px;
  z-index:15;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease, transform .12s ease;
}

/* Positionnement horizontal */
.nx-info[data-pos-h="left"]{
  left:18px;
  right:auto;
}
.nx-info[data-pos-h="center"]{
  left:var(--center-offset-x, 50%);
  right:auto;
}
.nx-info[data-pos-h="right"]{
  right:18px;
  left:auto;
}

/* Positionnement vertical */
.nx-info[data-pos-v="top"]{
  top:18px;
  bottom:auto;
}
.nx-info[data-pos-v="center"]{
  top:var(--center-offset-y, 50%);
  bottom:auto;
}
.nx-info[data-pos-v="bottom"]{
  bottom:22px;
  top:auto;
}

/* État fermé/ouvert - doit être après les règles de positionnement */
.nx-info{
  transform:translateY(10px) scale(var(--info-scale,1));
}
.nx-info[data-open="1"]{
  opacity:1;
  transform:scale(var(--info-scale,1));
  pointer-events:auto;
}

/* Le transform est déjà géré par scale, pas besoin de translateX/Y */
.nx-info[data-open="1"]{
  transform:scale(var(--info-scale,1));
}
.nx-info[data-open="0"]{
  transform:translateY(10px) scale(var(--info-scale,1));
}

.nx-info-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}
.nx-info-header span{
  font-weight:600;
}
#nxInfoClose{
  border:none;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
}

.nx-info-body{
  color:var(--muted);
  font-size:13px;
}

/* ===== Loader ===== */

.nx-loader{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:radial-gradient(circle at center,rgba(0,0,0,.55),rgba(0,0,0,.8));
  z-index:10;
  pointer-events:none;
}
.nx-loader[data-hidden="1"]{
  opacity:0;
  visibility:hidden;
}

.nx-spinner{
  width:32px;
  height:32px;
  border-radius:50%;
  border:3px solid rgba(214,192,122,.18);
  border-top-color:var(--gold);
  animation:nxspin 0.9s linear infinite;
}
@keyframes nxspin{
  to{ transform:rotate(360deg); }
}
.nx-loader-text{
  font-size:13px;
  color:var(--muted);
}

/* ===== Hotspot list ===== */

.nx-hotspot-list{
  border-radius:10px;
  border:1px solid var(--edge);
  background:#0e1017;
  padding:6px 7px;
  max-height:130px;
  overflow-y:auto;
  font-size:12px;
}

.nx-hotspot-list-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:4px 6px;
  border-radius:8px;
}
.nx-hotspot-list-item:hover{
  background:rgba(255,255,255,.04);
}
.nx-hotspot-list-meta{
  display:flex;
  flex-direction:column;
  flex:1;
}
.nx-hotspot-list-meta span{
  font-size:12px;
}
.nx-hotspot-list-meta small{
  font-size:11px;
  color:var(--muted);
}

/* Actions hotspot (copier, éditer, supprimer) */
.nx-hotspot-actions{
  display:flex;
  align-items:center;
  gap:4px;
}
.nx-btn-icon{
  border:none;
  background:rgba(255,255,255,.05);
  color:var(--text);
  cursor:pointer;
  width:28px;
  height:28px;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  transition:background .2s ease, transform .1s ease;
}
.nx-btn-icon:hover{
  background:rgba(255,255,255,.1);
  transform:scale(1.05);
}
.nx-btn-icon.nx-btn-danger{
  color:#f03e3e;
}
.nx-btn-icon.nx-btn-danger:hover{
  background:rgba(240,62,62,.1);
}

.nx-hotspot-list-item button{
  border:none;
  background:transparent;
  color:#f03e3e;
  cursor:pointer;
}

/* ===== File picker custom ===== */

.nx-file-row{
  display:flex;
  align-items:center;
  gap:8px;
}

.nx-file-btn{
  border:none;
  border-radius:999px;
  background:linear-gradient(135deg,var(--gold),var(--gold-strong));
  color:#111015;
  font-weight:600;
  font-size:12px;
  padding:6px 14px;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.55);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
  white-space:nowrap;
  flex-shrink:0;
}

.nx-file-btn:hover{
  filter:brightness(1.05);
  box-shadow:0 12px 30px rgba(0,0,0,.7);
  transform:translateY(-1px);
}

.nx-file-btn:active{
  transform:translateY(0);
  box-shadow:0 5px 14px rgba(0,0,0,.7);
}

.nx-file-name{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}

/* cache l'input natif */
.nx-file-row input[type="file"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:0;
  height:0;
}

/* ===== Bibliothèque hotspots ===== */

.nx-lib-preview{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:6px;
  align-items: center;
}
.nx-lib-preview span{
  font-size:12px;
  color:var(--muted);
}
.nx-lib-preview-area{
  border-radius:10px;
  border:1px dashed var(--edge);
  background:#0e1017;
  padding:20px;
  min-height:80px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow: visible;
  width: fit-content;
}

/* Hotspot dans l'aperçu ne doit pas s'étirer */
.nx-lib-preview-area .nx-hotspot {
  position: static !important;
  transform: none !important;
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  display: inline-flex !important;
}

.nx-lib-preview-area .nx-hotspot-bubble {
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  white-space: nowrap !important;
  padding: 8px 16px !important;
}

.nx-lib-preview-area .nx-hotspot-label {
  white-space: nowrap !important;
}

.nx-lib-presets{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.nx-lib-preset-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:4px 6px;
  border-radius:8px;
  border:1px solid var(--edge);
  background:#0e1017;
  font-size:12px;
}
.nx-lib-preset-meta{
  display:flex;
  flex-direction:column;
}
.nx-lib-preset-meta span{
  font-weight:500;
}
.nx-lib-preset-meta small{
  color:var(--muted);
}
.nx-lib-preset-actions{
  display:flex;
  gap:4px;
}
.nx-lib-preset-actions button{
  border:none;
  border-radius:999px;
  padding:3px 8px;
  font-size:11px;
  cursor:pointer;
  background:#181b24;
  color:var(--txt);
}
.nx-lib-preset-actions button:hover{
  background:#222635;
}

/* ===== Divers ===== */

.nx-sep{
  border:none;
  border-top:1px solid rgba(255,255,255,.05);
  margin:6px 0 10px;
}

.nx-hint{
  font-size:11px;
  color:var(--muted);
  opacity:.85;
}

code{
  font-size:11px;
  background:rgba(0,0,0,.5);
  padding:1px 4px;
  border-radius:4px;
}

/* ===== Responsive ===== */

@media (max-width:900px){
  .nx-main{
    flex-direction:column;
  }
  .nx-sidepanel{
    width:100%;
    border-right:none;
    border-bottom:1px solid var(--edge);
  }
}

/* ===== Login screen ===== */

#nexys360-root[data-hidden="1"]{
  display:none;
}

.nx-login-wrapper{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at top,#15171b,#050509 70%);
  padding:24px 16px;
  box-sizing:border-box;
}

.nx-login-card{
  width:100%;
  max-width:420px;
  border-radius:18px;
  border:1px solid var(--edge);
  background:radial-gradient(circle at top,var(--panel),#080910);
  box-shadow:var(--shadow);
  padding:22px 20px 18px;
}

.nx-login-logo{
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:20px;
  margin-bottom:6px;
}
.nx-login-logo span{
  color:var(--gold);
}

.nx-login-card h1{
  margin:0 0 4px;
  font-size:18px;
}

.nx-login-sub{
  margin:0 0 14px;
  font-size:13px;
  color:var(--muted);
}

.nx-login-form{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:8px;
}

.nx-login-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:13px;
}
.nx-login-field span{
  color:var(--muted);
}

/* Champ email */
.nx-login-field input[type="email"]{
  border-radius:10px;
  border:1px solid var(--edge);
  background:#101118;
  color:#e9edf5;
  padding:7px 9px;
  font-size:13px;
  outline:none;
}
.nx-login-field input[type="email"]:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(214,192,122,.25);
}

/* Mot de passe */
.nx-login-passwrap{
  position:relative;
}
.nx-login-passwrap input{
  width:100%;
  border-radius:10px;
  border:1px solid var(--edge);
  background:#101118;
  color:#e9edf5;
  padding:7px 36px 7px 9px;
  font-size:13px;
  outline:none;
}
.nx-login-passwrap input:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(214,192,122,.25);
}
.nx-login-toggle{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:14px;
  color:var(--muted);
}

.nx-login-btn{
  margin-top:4px;
  width:100%;
}

.nx-login-error{
  min-height:16px;
  margin:2px 0 0;
  font-size:12px;
  color:#ff6b6b;
}

.nx-login-hint{
  margin:4px 0 0;
  font-size:11px;
  color:var(--muted);
  opacity:.85;
}

/* ===== Bibliothèque hotspots – galerie de styles & options ===== */

.nx-lib-designs{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:6px;
}
.nx-lib-designs span{
  font-size:12px;
  color:var(--muted);
}
.nx-lib-design-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
  gap:6px;
}

.nx-lib-design-item{
  border-radius:8px;
  border:1px solid var(--edge);
  padding:4px 6px;
  background:#0e1017;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.nx-lib-design-item.is-selected{
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(214,192,122,.4);
}
.nx-lib-design-item .nx-hotspot{
  position:static;
  transform:none;
}

/* Galerie d'icônes */
.nx-icon-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(48px, 1fr));
  gap:8px;
  margin-top:8px;
}

.nx-icon-item{
  aspect-ratio:1;
  border-radius:8px;
  border:2px solid var(--edge);
  padding:8px;
  background:#0e1017;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s ease;
  position:relative;
}

.nx-icon-item:hover{
  border-color:rgba(214,192,122,.5);
  background:#14151b;
}

.nx-icon-item.is-selected{
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(214,192,122,.4);
  background:#1a1c25;
}

.nx-icon-item svg{
  width:100%;
  height:100%;
  fill:currentColor;
  color:currentColor;
}

.nx-icon-item.is-default{
  border-style:dashed;
  font-size:11px;
  color:var(--muted);
  text-align:center;
  line-height:1.2;
}

.nx-lib-options{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-bottom:6px;
}
.nx-lib-options span{
  font-size:12px;
  color:var(--muted);
}
.nx-lib-options label{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  color:var(--muted);
}
.nx-lib-options input[type="checkbox"]{
  width:13px;
  height:13px;
}


/* Masque certains champs (ex: select de style) tout en les gardant dans le DOM */
.nx-field--hidden{
  display:none !important;
}


/* ===== Style hotspot : anneaux pulsés (multi-cercles) ===== */
.nx-hotspot.hs-info-rings{
  --hs-ring-size: 22px;
  --hs-ring-color: var(--hs-color, #4dabf7);
}

/* noyau central */
.nx-hotspot.hs-info-rings .nx-hotspot-icon{
  position:relative;
  width:var(--hs-ring-size);
  height:var(--hs-ring-size);
  border-radius:999px;
  background:var(--hs-ring-color);
  box-shadow:0 0 16px rgba(0,0,0,.45);
  overflow:visible;
}

/* anneaux externes (2 couches) */
.nx-hotspot.hs-info-rings .nx-hotspot-icon::before,
.nx-hotspot.hs-info-rings .nx-hotspot-icon::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  border:2px solid var(--hs-ring-color);
  opacity:.55;
  transform:scale(1);
  animation:nxHsRingsPulse 1.8s ease-out infinite;
}

/* deuxième anneau décalé pour donner l’effet multi-pulses */
.nx-hotspot.hs-info-rings .nx-hotspot-icon::after{
  opacity:.35;
  animation-delay:.5s;
}

/* on masque l’éventuel texte (i, !) du style de base */
.nx-hotspot.hs-info-rings .nx-hotspot-icon span,
.nx-hotspot.hs-info-rings .nx-hotspot-icon i{
  opacity:0;
}

/* animation des cercles */
@keyframes nxHsRingsPulse{
  0%{
    transform:scale(1);
    opacity:.6;
  }
  60%{
    transform:scale(1.9);
    opacity:0;
  }
  100%{
    transform:scale(2.1);
    opacity:0;
  }
}


/* ===== Nouveaux styles de hotspots (toilettes, portes, escaliers - SVG) ===== */
/* Icônes SVG via mask + background-color = var(--hs-color) */

/* Toilettes (info) */
.nx-hotspot.hs-info-toilet .nx-hotspot-icon{
  width:20px;
  height:20px;
  border-radius:0;
  background-color:var(--hs-color, #4dabf7);
  -webkit-mask: url("data:image/svg+xml,%0A%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%0A%20%20%3Crect%20x%3D%276%27%20y%3D%273%27%20width%3D%274.5%27%20height%3D%276.5%27%20rx%3D%271.1%27/%3E%0A%20%20%3Crect%20x%3D%279%27%20y%3D%277%27%20width%3D%279%27%20height%3D%274.5%27%20rx%3D%271.1%27/%3E%0A%20%20%3Cpath%20d%3D%27M9%2011.5h9v1a5%205%200%200%201-4%204.9V19H14v2H10v-2H9v-1.6A5%205%200%200%201%207%2012.5v-1z%27/%3E%0A%3C/svg%3E%0A") center/contain no-repeat;
          mask: url("data:image/svg+xml,%0A%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%0A%20%20%3Crect%20x%3D%276%27%20y%3D%273%27%20width%3D%274.5%27%20height%3D%276.5%27%20rx%3D%271.1%27/%3E%0A%20%20%3Crect%20x%3D%279%27%20y%3D%277%27%20width%3D%279%27%20height%3D%274.5%27%20rx%3D%271.1%27/%3E%0A%20%20%3Cpath%20d%3D%27M9%2011.5h9v1a5%205%200%200%201-4%204.9V19H14v2H10v-2H9v-1.6A5%205%200%200%201%207%2012.5v-1z%27/%3E%0A%3C/svg%3E%0A") center/contain no-repeat;
}

/* Porte (déplacement) */
.nx-hotspot.hs-move-door .nx-hotspot-icon{
  width:20px;
  height:20px;
  border-radius:3px;
  background-color:var(--hs-color, #d6c07a);
  -webkit-mask: url("data:image/svg+xml,%0A%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%0A%20%20%3Crect%20x%3D%278%27%20y%3D%273%27%20width%3D%278%27%20height%3D%2718%27%20rx%3D%271.4%27/%3E%0A%20%20%3Ccircle%20cx%3D%2714.3%27%20cy%3D%2712%27%20r%3D%270.9%27/%3E%0A%3C/svg%3E%0A") center/contain no-repeat;
          mask: url("data:image/svg+xml,%0A%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%0A%20%20%3Crect%20x%3D%278%27%20y%3D%273%27%20width%3D%278%27%20height%3D%2718%27%20rx%3D%271.4%27/%3E%0A%20%20%3Ccircle%20cx%3D%2714.3%27%20cy%3D%2712%27%20r%3D%270.9%27/%3E%0A%3C/svg%3E%0A") center/contain no-repeat;
}

/* Escalier (déplacement) */
.nx-hotspot.hs-move-stairs .nx-hotspot-icon{
  width:20px;
  height:20px;
  border-radius:4px;
  background-color:var(--hs-color, #d6c07a);
  -webkit-mask: url("data:image/svg+xml,%0A%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%0A%20%20%3Cpath%20d%3D%27M5%2019h4v-3h3v-3h3V10h4V8h-5v3h-3v3h-3v3H5z%27/%3E%0A%3C/svg%3E%0A") center/contain no-repeat;
          mask: url("data:image/svg+xml,%0A%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%0A%20%20%3Cpath%20d%3D%27M5%2019h4v-3h3v-3h3V10h4V8h-5v3h-3v3h-3v3H5z%27/%3E%0A%3C/svg%3E%0A") center/contain no-repeat;
}


/* Point basique (rond simple vide) */
.nx-hotspot.hs-basic-point .nx-hotspot-icon{
  width:12px;
  height:12px;
  border-radius:50%;
  background-color:transparent;
  border:2px solid var(--hs-color, #d6c07a);
  font-size:0;
  color:transparent;
}

/* Info i (icone SVG avec mask) */
.nx-hotspot.hs-info-i .nx-hotspot-icon{
  width:24px;
  height:24px;
  border-radius:50%;
  background-color:var(--hs-color, #d6c07a);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='20' r='12' fill='black'/%3E%3Crect x='38' y='38' width='24' height='50' rx='12' ry='12' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='20' r='12' fill='black'/%3E%3Crect x='38' y='38' width='24' height='50' rx='12' ry='12' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
  font-size:0;
  color:transparent;
}
/* On neutralise le texte par defaut pour ces styles (pas de symbole, i, !) */
.nx-hotspot.hs-info-toilet .nx-hotspot-icon,
.nx-hotspot.hs-move-door .nx-hotspot-icon,
.nx-hotspot.hs-move-stairs .nx-hotspot-icon,
.nx-hotspot.hs-basic-point .nx-hotspot-icon,
.nx-hotspot.hs-info-i .nx-hotspot-icon{
  font-size:0;
  color:transparent;
}



/* ===== Contenu des fenêtres d'information (components) ===== */

.nx-info-body .nx-info-comp-heading{
  margin:2px 0 4px;
  font-weight:600;
  color:var(--txt);
  white-space:pre-line;
}
.nx-info-body .nx-info-comp-paragraph{
  margin:2px 0 4px;
  color:var(--muted);
  white-space:pre-line;
}
.nx-info-body .nx-info-comp-button{
  margin:6px 0 4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 14px;
  border-radius:999px;
  border:1px solid var(--gold);
  background:rgba(214,192,122,.06);
  color:var(--gold-strong);
  font-size:12px;
  cursor:pointer;
}
.nx-info-body .nx-info-comp-separator{
  height:1px;
  margin:8px 0;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--edge),transparent);
}
.nx-info-body .nx-info-comp-list{
  margin:4px 0 4px 14px;
  padding:0;
  color:var(--muted);
  font-size:13px;
}
.nx-info-body .nx-info-comp-image{
  margin:6px 0 8px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
}
.nx-info-body .nx-info-comp-image img{
  display:block;
  width:100%;
  height:auto;
}
.nx-info-body .nx-info-comp-video{
  margin:6px 0 8px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
}
.nx-info-body .nx-info-comp-video video{
  display:block;
  width:100%;
  height:auto;
}

/* Carrousel dans la fenêtre */
.nx-info-carousel{
  margin:8px 0 2px;
  border-radius:18px;
  background:#111317;
  border:1px solid var(--edge);
  padding:10px 10px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.nx-info-carousel-main{
  border-radius:16px;
  background:#050608;
  position:relative;
  overflow:hidden;
  min-height:120px;
}
.nx-info-carousel-main-inner{
  position:relative;
  width:100%;
  height:100%;
}
.nx-info-carousel-image,
.nx-info-carousel-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.nx-info-carousel-empty{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:12px;
}
.nx-info-carousel-strip{
  display:grid;
  grid-template-columns:24px minmax(0,1fr) 24px;
  gap:8px;
  align-items:center;
}
.nx-info-carousel-nav{
  width:24px;
  height:24px;
  border-radius:999px;
  border:1px solid var(--edge);
  background:#0d0f15;
  color:var(--txt);
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.nx-info-carousel-thumbs{
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding:2px 0;
}
.nx-info-carousel-thumb{
  border-radius:10px;
  border:1px solid var(--edge);
  background:#050608;
  padding:0;
  cursor:pointer;
}
.nx-info-carousel-thumb-inner{
  position:relative;
  width:48px;
  height:34px;
  border-radius:9px;
  overflow:hidden;
}
.nx-info-carousel-thumb-inner img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.nx-info-carousel-thumb-label{
  position:absolute;
  inset:auto 2px 2px auto;
  border-radius:999px;
  padding:1px 6px;
  font-size:9px;
  background:rgba(0,0,0,.7);
  color:#fff;
}
.nx-info-carousel-thumb[data-active="1"]{
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(214,192,122,.35);
}

/* ================================================
   🖼️ UPLOAD MODAL & IMAGE LIBRARY
   ================================================ */

.nx-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.nx-modal[data-open="1"] {
  display: flex;
}

.nx-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
}

.nx-modal-content {
  position: relative;
  z-index: 1;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 90%;
  max-width: 1000px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--edge);
}

.nx-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--edge);
}

.nx-modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--txt);
}

.nx-modal-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 24px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 6px;
  transition: all 0.2s;
}

.nx-modal-close:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--txt);
}

.nx-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  max-height: calc(85vh - 80px); /* Hauteur modale - header */
}

/* Scrollbar personnalisée pour modal body */
.nx-modal-body::-webkit-scrollbar {
  width: 10px;
}

.nx-modal-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 5px;
}

.nx-modal-body::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 5px;
}

.nx-modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--gold-strong);
}

/* Statistiques */
.nx-image-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  padding: 16px;
  background: var(--panel2);
  border-radius: 12px;
  border: 1px solid var(--edge);
}

.nx-stat {
  flex: 1;
  text-align: center;
}

.nx-stat-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nx-stat-value {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
}

/* Section d'upload */
.nx-upload-section {
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--edge);
}

.nx-upload-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--txt);
}

.nx-upload-dropzone {
  border: 2px dashed var(--edge);
  border-radius: 12px;
  padding: 48px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  background: var(--panel2);
}

.nx-upload-dropzone:hover {
  border-color: var(--gold);
  background: rgba(214, 192, 122, 0.05);
}

.nx-upload-dragover {
  border-color: var(--gold) !important;
  background: rgba(214, 192, 122, 0.1) !important;
  transform: scale(1.02);
}

.nx-upload-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.nx-upload-text {
  font-size: 18px;
  font-weight: 600;
  color: var(--txt);
  margin-bottom: 8px;
}

.nx-upload-hint {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 12px;
}

.nx-upload-info {
  font-size: 12px;
  color: var(--muted);
  opacity: 0.7;
}

/* Preview des fichiers */
.nx-upload-preview {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  max-height: 300px;
  overflow-y: auto;
  padding: 4px;
}

/* Scrollbar personnalisée pour preview */
.nx-upload-preview::-webkit-scrollbar {
  width: 8px;
}

.nx-upload-preview::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}

.nx-upload-preview::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 4px;
}

.nx-upload-preview::-webkit-scrollbar-thumb:hover {
  background: var(--gold-strong);
}

.nx-upload-preview-item {
  position: relative;
  background: var(--panel2);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--edge);
}

.nx-upload-preview-item img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

.nx-upload-preview-info {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nx-upload-preview-name {
  font-size: 13px;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nx-upload-preview-size {
  font-size: 11px;
  color: var(--muted);
}

.nx-upload-preview-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.nx-upload-preview-remove:hover {
  background: #ff4444;
  transform: scale(1.1);
}

/* Barre de progression */
.nx-upload-progress {
  margin-top: 16px;
  height: 8px;
  background: var(--panel2);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--edge);
}

.nx-upload-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-strong));
  transition: width 0.3s ease;
  box-shadow: 0 0 12px rgba(214, 192, 122, 0.5);
}

/* Bibliothèque d'images */
.nx-library-section {
  margin-top: 24px;
}

.nx-library-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--txt);
}

.nx-image-library {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  max-height: 50vh;
  overflow-y: auto;
  padding: 4px;
}

/* Scrollbar personnalisée pour la bibliothèque */
.nx-image-library::-webkit-scrollbar {
  width: 8px;
}

.nx-image-library::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}

.nx-image-library::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 4px;
}

.nx-image-library::-webkit-scrollbar-thumb:hover {
  background: var(--gold-strong);
}

.nx-library-item {
  position: relative;
  background: var(--panel2);
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--edge);
  cursor: pointer;
  transition: all 0.3s;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}

.nx-library-item::before {
  content: '👆 Cliquer pour ajouter';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  background: linear-gradient(to top, rgba(214,192,122,0.95), rgba(214,192,122,0));
  color: #050609;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 2;
}

.nx-library-item:hover::before {
  opacity: 1;
}

.nx-library-item:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.nx-library-item img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.nx-library-item-info {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-height: 0;
}

.nx-library-item-name {
  font-size: 13px;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.nx-library-item-size {
  font-size: 11px;
  color: var(--muted);
}

.nx-library-item-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.2s;
}

.nx-library-item:hover .nx-library-item-actions {
  opacity: 1;
}

.nx-library-item-actions button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  backdrop-filter: blur(4px);
}

.nx-library-item-actions button:hover {
  background: var(--gold);
  transform: scale(1.1);
}

/* Filtres de bibliothèque */
.nx-filter-buttons {
  display: flex;
  gap: 8px;
}

.nx-filter-btn {
  padding: 8px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.nx-filter-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(214, 192, 122, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.nx-filter-btn:hover::before {
  opacity: 1;
}

.nx-filter-btn:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  color: var(--text-light);
  border-color: rgba(214, 192, 122, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(214, 192, 122, 0.1);
}

.nx-filter-btn.nx-filter-active {
  background: linear-gradient(135deg, var(--gold), #c9ab5f);
  color: #000;
  border-color: var(--gold);
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(214, 192, 122, 0.4), 0 0 30px rgba(214, 192, 122, 0.2);
  transform: translateY(-1px);
}

.nx-filter-btn.nx-filter-active::before {
  opacity: 0;
}

.nx-library-item-category {
  display: block;
  font-size: 11px;
  color: var(--gold);
  margin-top: 4px;
}

.nx-library-count {
  font-size: 14px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 8px;
}

/* Boutons de filtre principaux de la bibliothèque */
.nx-filter-btn-lib {
  padding: 10px 18px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(25, 26, 35, 0.9), rgba(16, 17, 24, 0.9));
  color: #b2b7c2;
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3), 
              inset 0 1px 0 rgba(255, 255, 255, 0.03);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  letter-spacing: 0.3px;
}

.nx-filter-btn-lib::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(214, 192, 122, 0.15), 
    transparent
  );
  transition: left 0.5s;
}

.nx-filter-btn-lib:hover::before {
  left: 100%;
}

.nx-filter-btn-lib:hover {
  background: linear-gradient(145deg, rgba(35, 36, 45, 0.95), rgba(26, 27, 34, 0.95));
  color: #e9edf5;
  border-color: rgba(214, 192, 122, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 
              0 0 30px rgba(214, 192, 122, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.nx-filter-btn-lib:active {
  transform: translateY(0);
}

.nx-filter-btn-lib.nx-filter-active {
  background: linear-gradient(145deg, #d6c07a, #c9ab5f);
  color: #0a0b0f;
  border-color: #d6c07a;
  font-weight: 600;
  box-shadow: 0 6px 24px rgba(214, 192, 122, 0.5), 
              0 0 40px rgba(214, 192, 122, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.2),
              inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  letter-spacing: 0.5px;
}

.nx-filter-btn-lib.nx-filter-active::before {
  display: none;
}

/* Bouton annuler nouvelle catégorie */
#nxCancelNewCategory {
  background: #101118;
  color: var(--muted);
  border: 1px solid var(--edge);
  border-radius: 10px;
  transition: all 0.2s;
}

#nxCancelNewCategory:hover {
  background: rgba(255, 0, 0, 0.1);
  color: #ff4444;
  border-color: #ff4444;
}

#nxNewCategoryInput {
  background: #101118;
  color: var(--txt);
  border: 1px solid var(--edge);
  border-radius: 10px;
  padding: 7px 9px;
  font-size: 13px;
  transition: all 0.2s;
}

#nxNewCategoryInput:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(214, 192, 122, 0.25);
}

#nxNewCategoryInput::placeholder {
  color: var(--muted);
  opacity: 0.6;
}

#nxUploadCategory {
  background: #101118;
  color: var(--txt);
  border: 1px solid var(--edge);
  border-radius: 10px;
  padding: 7px 9px;
  font-size: 13px;
  transition: all 0.2s;
}

#nxUploadCategory:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(214, 192, 122, 0.25);
}

#nxUploadCategory:hover {
  border-color: rgba(214, 192, 122, 0.5);
}

/* Lazy loading placeholder */
.nx-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, #1a1c22 25%, #14151b 25%, #14151b 50%, #1a1c22 50%, #1a1c22 75%, #14151b 75%, #14151b);
  background-size: 20px 20px;
  animation: shimmer 1s linear infinite;
}

@keyframes shimmer {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 20px 20px;
  }
}

.nx-library-preview {
  position: relative;
  overflow: hidden;
}

/* Loader small */
.nx-loader-small {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
  font-size: 14px;
}

/* Bouton primary */
.nx-btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-strong)) !important;
  color: #000 !important;
  font-weight: 600;
  width: 100%;
}

.nx-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(214, 192, 122, 0.4);
}

.nx-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* Filtres de catégorie */
.nx-category-filters {
  background: rgba(255, 255, 255, 0.02);
  padding: 16px;
  border-radius: 10px;
  border: 1px solid var(--edge);
}

.nx-category-filter-btn {
  padding: 6px 12px;
  background: #101118;
  color: var(--txt);
  border: 1px solid var(--edge);
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.nx-category-filter-btn:hover {
  background: rgba(214, 192, 122, 0.1);
  border-color: var(--gold);
  color: var(--gold);
}

.nx-category-filter-btn.active {
  background: var(--gold);
  color: #000;
  border-color: var(--gold);
  font-weight: 600;
}

.nx-category-filter-btn.active:hover {
  background: var(--gold-strong);
  border-color: var(--gold-strong);
}

/* Select filtre catégorie bibliothèque */
#nxLibraryCategoryFilter {
  background: #101118;
  color: var(--txt);
  border: 1px solid var(--edge);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  transition: all 0.2s;
  cursor: pointer;
}

#nxLibraryCategoryFilter:hover {
  border-color: var(--gold);
}

#nxLibraryCategoryFilter:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(214, 192, 122, 0.25);
}

/* Notifications */
@keyframes slideInRight {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(400px);
    opacity: 0;
  }
}

/* ========================================
   ✨ NOUVELLE SIDEBAR COMPACTE
   ======================================== */

.nx-compact-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

.nx-compact-section {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px;
}

.nx-compact-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nx-compact-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nx-compact-input,
.nx-compact-select {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--text-light);
  font-size: 14px;
  transition: all 0.3s;
}

.nx-compact-input:focus,
.nx-compact-select:focus {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(214, 192, 122, 0.4);
  outline: none;
  box-shadow: 0 0 0 3px rgba(214, 192, 122, 0.1);
}

.nx-compact-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.nx-compact-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(214, 192, 122, 0.15), rgba(214, 192, 122, 0.05));
  border: 1px solid rgba(214, 192, 122, 0.3);
  border-radius: 8px;
  color: #d6c07a;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nx-compact-btn:hover {
  background: linear-gradient(135deg, rgba(214, 192, 122, 0.25), rgba(214, 192, 122, 0.15));
  border-color: rgba(214, 192, 122, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(214, 192, 122, 0.2);
}

.nx-compact-btn-danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.nx-compact-btn-danger:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(239, 68, 68, 0.15));
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

.nx-compact-btn-icon {
  font-size: 16px;
}

.nx-compact-btn-label {
  white-space: nowrap;
}

/* Header de section */
.nx-compact-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.nx-compact-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nx-compact-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  background: linear-gradient(135deg, #d6c07a, #c9ab5f);
  border-radius: 12px;
  color: #000;
  font-size: 11px;
  font-weight: 700;
}

/* Liste des hotspots compacte */
.nx-compact-hotspot-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
}

.nx-compact-hotspot-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  transition: all 0.2s;
}

.nx-compact-hotspot-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(214, 192, 122, 0.2);
}

.nx-compact-hotspot-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.2s;
}

.nx-compact-hotspot-item:hover .nx-compact-hotspot-actions {
  opacity: 1;
}

.nx-compact-hs-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.nx-compact-hs-btn:hover {
  background: rgba(214, 192, 122, 0.15);
  border-color: rgba(214, 192, 122, 0.3);
  transform: scale(1.05);
}

.nx-compact-hs-delete:hover {
  background: rgba(255, 107, 107, 0.15);
  border-color: rgba(255, 107, 107, 0.3);
}

.nx-compact-hotspot-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(214, 192, 122, 0.1);
  border-radius: 4px;
  font-size: 14px;
}

.nx-compact-hotspot-info {
  flex: 1;
  min-width: 0;
}

.nx-compact-hotspot-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.nx-compact-hotspot-type {
  font-size: 10px;
  color: var(--muted);
  text-transform: capitalize;
  line-height: 1.2;
}

.nx-compact-empty {
  text-align: center;
  padding: 20px;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}

/* Liste des tours disponibles */
.nx-tours-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nx-tour-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.nx-tour-item:hover {
  background: rgba(214, 192, 122, 0.08);
  border-color: rgba(214, 192, 122, 0.3);
  transform: translateX(4px);
}

.nx-tour-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.nx-tour-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-light);
}

.nx-tour-item-path {
  font-size: 11px;
  color: var(--muted);
  font-family: 'Courier New', monospace;
}

.nx-tour-item-icon {
  font-size: 20px;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.nx-tour-item:hover .nx-tour-item-icon {
  opacity: 1;
}

/* Boutons d'action grille */
.nx-compact-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.nx-compact-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.nx-compact-action-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(214, 192, 122, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.nx-compact-action-btn:hover::before {
  opacity: 1;
}

.nx-compact-action-btn:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  border-color: rgba(214, 192, 122, 0.3);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 
              0 0 30px rgba(214, 192, 122, 0.15);
}

.nx-compact-action-icon {
  font-size: 28px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.nx-compact-action-label {
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  line-height: 1.3;
}

/* Masquer les anciens blocs */
.nx-legacy-blocks[data-hidden="1"] {
  display: none;
}

/* ========================================
   ✨ MODALS SYSTEM
   ======================================== */

/* ========================================
   PANNEAUX LATÉRAUX (comme sidebar)
   ======================================== */

.nx-panel {
  width: 0;
  overflow: hidden;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  background: linear-gradient(135deg, #14151b, #0a0b0f);
  border-right: 1px solid rgba(214, 192, 122, 0.2);
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.4),
              4px 0 40px rgba(214, 192, 122, 0.1);
}

.nx-panel[data-open="1"] {
  width: 420px;
}

/* Panneau plus large pour certains modals */
.nx-panel-lg[data-open="1"] {
  width: 520px;
}

/* Panneau très large */
.nx-panel-xl[data-open="1"] {
  width: 650px;
}

.nx-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  background: linear-gradient(135deg, rgba(214, 192, 122, 0.08), rgba(214, 192, 122, 0.03));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.nx-panel-title {
  font-size: 20px;
  font-weight: 700;
  color: #d6c07a;
  margin: 0;
  text-shadow: 0 2px 8px rgba(214, 192, 122, 0.3);
}

.nx-panel-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.3s;
}

.nx-panel-close:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
  transform: rotate(90deg);
}

.nx-panel-body {
  flex: 1;
  padding: 24px 28px;
  overflow-y: auto;
}

/* Scrollbar personnalisée pour panel-body */
.nx-panel-body::-webkit-scrollbar {
  width: 8px;
}

.nx-panel-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.nx-panel-body::-webkit-scrollbar-thumb {
  background: rgba(214, 192, 122, 0.3);
  border-radius: 4px;
  transition: background 0.3s;
}

.nx-panel-body::-webkit-scrollbar-thumb:hover {
  background: rgba(214, 192, 122, 0.5);
}

.nx-modal-section {
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nx-modal-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.nx-modal-section-title {
  font-size: 15px;
  font-weight: 600;
  color: #d6c07a;
  margin: 0 0 16px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nx-panel-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.nx-btn-primary {
  background: linear-gradient(135deg, #d6c07a, #c9ab5f);
  border-color: #d6c07a;
  color: #000;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(214, 192, 122, 0.4);
}

.nx-btn-primary:hover {
  background: linear-gradient(135deg, #e0ca84, #d6c07a);
  box-shadow: 0 6px 24px rgba(214, 192, 122, 0.6);
  transform: translateY(-2px);
}

@keyframes nxFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes nxPanelSlideIn {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Sections conditionnelles */
[data-hs-move],
[data-hs-info] {
  display: none;
}

/* Responsive - Panneaux latéraux */
@media (max-width: 1200px) {
  /* Sur petits écrans, réduire la largeur des panneaux */
  .nx-panel[data-open="1"] {
    width: 360px;
  }
  
  .nx-panel-lg[data-open="1"] {
    width: 420px;
  }
  
  .nx-panel-xl[data-open="1"] {
    width: 480px;
  }
}

@media (max-width: 768px) {
  /* Sur mobile, panneau en overlay fixe plein écran */
  .nx-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
  }
  
  .nx-panel[data-open="1"],
  .nx-panel-lg[data-open="1"],
  .nx-panel-xl[data-open="1"] {
    width: 100%;
  }
  
  /* Ajouter un backdrop sur mobile */
  .nx-panel[data-open="1"]::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    z-index: -1;
  }

  .nx-image-library {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    max-height: 40vh;
  }

  .nx-upload-preview {
    grid-template-columns: 1fr;
    max-height: 200px;
  }

  .nx-image-stats {
    flex-direction: column;
    gap: 12px;
  }
  
  .nx-filter-buttons {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .nx-filter-btn {
    font-size: 12px;
    padding: 7px 14px;
    border-radius: 10px;
  }

  .nx-filter-btn-lib {
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 12px;
    gap: 6px;
  }
}

/* ==========================
   Croix de visée pour alignement
   ========================== */

.nx-crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  z-index: 100;
  pointer-events: none;
}

.nx-crosshair-line {
  position: absolute;
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239,68,68,0.8), 0 0 2px rgba(0,0,0,0.8);
}

.nx-crosshair-h {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.nx-crosshair-v {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

.nx-crosshair::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border: 2px solid #ef4444;
  border-radius: 50%;
  background: rgba(239,68,68,0.3);
  box-shadow: 0 0 12px rgba(239,68,68,0.8);
}