/* ══════════════════════════════════════
   NOXUS — module-installations.css
   Styles du module Installations
   ══════════════════════════════════════ */

/* ── CONTENEUR PRINCIPAL ── */
#module-installations {
  display: none;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

#module-installations.active {
  display: flex;
}

/* ── ZONE HAUTE : PAYSAGE ── */
.inst-top {
  position: relative;
  height: 220px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--stone-light);
}

.inst-paysage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.inst-paysage-placeholder {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 25% 55%, rgba(139,0,0,0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 35%, rgba(201,168,76,0.07) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 80%, rgba(80,60,20,0.1) 0%, transparent 40%),
    linear-gradient(180deg, #0A0E0C 0%, #141810 40%, #1C2018 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.inst-paysage-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.75) 0%, transparent 100%);
  padding: 10px 16px;
  z-index: 5;
}

.inst-paysage-title {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ── VOLET DE DÉTAIL ── */
.inst-volet {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 10;
  transform: translateY(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.inst-volet.open {
  transform: translateY(0);
  pointer-events: all;
}

.inst-volet-image {
  width: 220px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.inst-volet-infos {
  flex: 1;
  background: rgba(18, 14, 10, 0.97);
  border-left: 1px solid var(--border-gold);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.inst-volet-close {
  position: absolute;
  top: 8px; right: 8px;
  width: 28px; height: 28px;
  background: rgba(139,0,0,0.4);
  border: 1px solid var(--crimson-dark);
  border-radius: 3px;
  color: var(--text-dim);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: all 0.2s;
  z-index: 20;
}

.inst-volet-close:hover { background: var(--crimson); color: var(--text-main); }

/* ── BLOC EFFET ── */
.inst-effet-bloc {
  background: rgba(201,168,76,0.06);
  border: 1px solid rgba(201,168,76,0.15);
  border-left: 3px solid var(--gold-dim);
  border-radius: 2px;
  padding: 8px 10px;
}

.inst-effet-label {
  font-family: 'Crimson Text', serif;
  font-style: italic;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.inst-bonus-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
  font-size: 12px;
}

.inst-bonus-key {
  color: var(--text-dim);
  font-size: 11px;
  font-style: italic;
}

.inst-bonus-val {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.5px;
}

.inst-bonus-val.dim {
  color: var(--text-dim);
}

.inst-bonus-arrow {
  color: var(--crimson-light);
  font-size: 10px;
  padding: 0 6px;
}

/* ── ZONE BASSE : GRILLE ── */
.inst-bottom {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  background: var(--stone);
}

/* ── FILE DE CONSTRUCTION ── */
.inst-queue-card {
  margin: 0 12px 12px;
  flex-shrink: 0;
}

/* Scrollbar */
.inst-bottom::-webkit-scrollbar { width: 4px; }
.inst-bottom::-webkit-scrollbar-track { background: transparent; }
.inst-bottom::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.inst-volet-infos::-webkit-scrollbar { width: 3px; }
.inst-volet-infos::-webkit-scrollbar-track { background: transparent; }
.inst-volet-infos::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }