/* ============================================================
   style2.css — Plan interactif MAE · Vue "Plan HD"
   ============================================================ */

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

:root {
  --clr-orange:   #e84c2b;
  --clr-bg:       #f4f5f7;
  --clr-sidebar:  #1a1d24;
  --clr-surface:  #ffffff;
  --clr-border:   #e0e2e8;
  --clr-text:     #1a2033;
  --clr-muted:    #6b7280;
  --hdr-h:        56px;
  --sidebar-w:    260px;
  --panel-w:      320px;
  --toolbar-h:    48px;
  --radius:       8px;
  --shadow:       0 2px 10px rgba(0,0,0,.12);
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--clr-bg);
  color: var(--clr-text);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── HEADER ── */
#site-header {
  height: var(--hdr-h);
  background: var(--clr-sidebar);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 100;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.header-brand { display: flex; align-items: center; gap: 12px; }
.brand-icon {
  width: 36px; height: 36px;
  background: var(--clr-orange);
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: 16px;
}
.brand-text strong { display: block; font-size: 14px; font-weight: 700; }
.brand-text span   { font-size: 11px; color: #adb5bd; }
.header-nav { display: flex; gap: 8px; }
.nav-btn {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.15);
  background: transparent;
  color: #ccc;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: flex; align-items: center; gap: 6px;
  transition: all .2s;
}
.nav-btn:hover   { background: rgba(255,255,255,.1); color: #fff; }
.nav-btn.active  { background: var(--clr-orange); color: #fff; border-color: transparent; }

/* ── LAYOUT ── */
#app-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── SIDEBAR ── */
#sidebar {
  width: var(--sidebar-w);
  background: var(--clr-sidebar);
  color: #e0e2e8;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,.05);
}
#sidebar::-webkit-scrollbar { width: 4px; }
#sidebar::-webkit-scrollbar-track { background: transparent; }
#sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

.sidebar-section {
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.sidebar-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6b7280;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.badge-count {
  background: rgba(255,255,255,.1);
  color: #adb5bd;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 600;
}

/* Filtres */
.filter-btns { display: flex; flex-direction: column; gap: 4px; }
.filter-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border: none;
  background: transparent;
  color: #9ca3af;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all .15s;
}
.filter-btn:hover { background: rgba(255,255,255,.07); color: #fff; }
.filter-btn.active { background: rgba(232,76,43,.2); color: var(--clr-orange); }
.filter-btn i { width: 14px; text-align: center; font-size: 11px; }

/* Liste halls */
.halls-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.hall-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  color: #9ca3af;
  transition: all .15s;
  position: relative;
}
.hall-item:hover { background: rgba(255,255,255,.07); color: #e0e2e8; }
.hall-item.active { background: rgba(232,76,43,.15); color: #fff; }
.hall-item .hi-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hall-item .hi-name { flex: 1; line-height: 1.3; }
.hall-item .hi-num {
  font-size: 10px;
  font-weight: 700;
  background: rgba(232,76,43,.3);
  color: var(--clr-orange);
  padding: 1px 5px;
  border-radius: 4px;
  flex-shrink: 0;
}
.hall-item.hidden-item { display: none; }

/* Légende */
.legend-items { display: flex; flex-direction: column; gap: 6px; }
.legend-item  { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #9ca3af; }
.leg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ── MAIN MAP ── */
#map-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* TOOLBAR */
#map-toolbar {
  height: var(--toolbar-h);
  background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  flex-shrink: 0;
  z-index: 10;
}
.toolbar-group { display: flex; align-items: center; gap: 6px; }
.tool-btn {
  width: 32px; height: 32px;
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  color: var(--clr-text);
  display: grid; place-items: center;
  transition: all .15s;
}
.tool-btn:hover { background: var(--clr-bg); border-color: #c0c4cc; }
.zoom-label { font-size: 12px; font-weight: 600; color: var(--clr-muted); min-width: 40px; text-align: center; }

.search-wrap {
  display: flex; align-items: center; gap: 6px;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--clr-muted);
}
.search-wrap input {
  border: none; background: transparent;
  font-size: 12px; font-family: inherit; color: var(--clr-text);
  outline: none; width: 180px;
}
.search-clear-btn { border: none; background: transparent; color: var(--clr-muted); cursor: pointer; font-size: 11px; }

/* ── MAP VIEWPORT ── */
#map-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: #e8eaed;
  cursor: grab;
}
#map-viewport.panning { cursor: grabbing; }

/* ── MAP CANVAS : unique conteneur transformé par pan/zoom ── */
#map-canvas {
  position: relative;
  transform-origin: 0 0;
  user-select: none;
  display: block;
  line-height: 0;
  /* Pas de transition ici pour éviter les saccades au drag */
}

/* ── SVG UNIQUE : plan + overlay dans un seul espace vectoriel ── */
#main-svg {
  display: block;
  /* La largeur est définie dynamiquement par JS (= largeur du viewport) */
  /* width et height sont setés via setAttribute depuis app2b.js */
  background: #fff;
  cursor: inherit;
}

/* ── OVERLAY ZONES ── */
.ov-zone {
  fill: transparent;
  stroke: transparent;
  stroke-width: 3;
  cursor: pointer;
  transition: fill .2s, stroke .2s;
}
.ov-zone:hover,
.ov-zone.zone-active {
  fill: rgba(232, 76, 43, 0.13);
  stroke: rgba(232, 76, 43, 0.7);
  stroke-width: 2.5;
}
/* Couleurs par catégorie au hover */
.ov-zone.cat-aviation:hover { fill: rgba(52, 152, 219, 0.13); stroke: rgba(52, 152, 219, 0.7); }
.ov-zone.cat-guerre:hover   { fill: rgba(142, 68, 173, 0.13); stroke: rgba(142, 68, 173, 0.7); }
.ov-zone.cat-espace:hover   { fill: rgba(39, 174, 96, 0.13);  stroke: rgba(39, 174, 96, 0.7);  }
.ov-zone.cat-aviation.zone-active { fill: rgba(52, 152, 219, 0.18); stroke: rgba(52, 152, 219, 0.9); }
.ov-zone.cat-guerre.zone-active   { fill: rgba(142, 68, 173, 0.18); stroke: rgba(142, 68, 173, 0.9); }
.ov-zone.cat-espace.zone-active   { fill: rgba(39, 174, 96, 0.18);  stroke: rgba(39, 174, 96, 0.9);  }

/* ── BADGES INCONTOURNABLES ── */
.badge-group { cursor: pointer; }
.badge-pulse {
  animation: pulse-badge 2.5s ease-in-out infinite;
  transform-origin: center;
}
@keyframes pulse-badge {
  0%,100% { opacity: .35; r: 18; }
  50%      { opacity: .7;  r: 22; }
}
.badge-inner { transition: r .2s; }
.badge-group:hover .badge-inner { r: 14; }
.badge-num { pointer-events: none; font-family: 'Inter', sans-serif; }

/* ── TOOLTIP ── */
.map-tooltip {
  position: fixed;
  background: rgba(20,23,30,.92);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
  z-index: 9000;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(4px);
  transition: opacity .15s;
}
.map-tooltip::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(20,23,30,.92);
}

/* ── DETAIL PANEL ── */
.detail-panel {
  width: var(--panel-w);
  background: var(--clr-surface);
  border-left: 1px solid var(--clr-border);
  overflow-y: auto;
  flex-shrink: 0;
  position: relative;
  transition: transform .25s ease;
}
.detail-panel.hidden {
  transform: translateX(100%);
  width: 0;
  border: none;
  overflow: hidden;
}
.detail-close {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px;
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  color: var(--clr-muted);
  display: grid; place-items: center;
  z-index: 10;
}
.detail-close:hover { background: var(--clr-bg); }

/* Content inside panel */
.dp-header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--clr-border);
}
.dp-cat-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 3px 8px; border-radius: 20px;
  margin-bottom: 10px;
}
.dp-name { font-size: 17px; font-weight: 700; line-height: 1.3; margin-bottom: 8px; }
.dp-num-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(232,76,43,.1); color: var(--clr-orange);
  font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 20px;
}
.dp-body { padding: 16px 20px; }
.dp-desc { font-size: 13px; line-height: 1.65; color: #4b5563; margin-bottom: 16px; }
.dp-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--clr-muted);
  margin-bottom: 8px; margin-top: 16px;
  display: flex; align-items: center; gap: 6px;
}
.dp-highlights { list-style: none; }
.dp-highlights li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; line-height: 1.5; color: #374151;
  padding: 5px 0;
  border-bottom: 1px solid var(--clr-border);
}
.dp-highlights li:last-child { border: none; }
.dp-highlights li::before { content: '★'; color: var(--clr-orange); font-size: 10px; margin-top: 2px; flex-shrink: 0; }
.dp-meta-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-top: 4px;
}
.dp-meta-cell {
  background: var(--clr-bg);
  border-radius: 6px;
  padding: 8px 10px;
}
.dp-meta-cell .mk { font-size: 10px; color: var(--clr-muted); text-transform: uppercase; font-weight: 600; margin-bottom: 2px; }
.dp-meta-cell .mv { font-size: 12px; font-weight: 600; }
.dp-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.dp-tag {
  font-size: 10px; font-weight: 600;
  padding: 3px 8px; border-radius: 12px;
  background: var(--clr-bg); color: var(--clr-muted);
  border: 1px solid var(--clr-border);
}
.dp-btn-locate {
  display: flex; align-items: center; gap: 6px; justify-content: center;
  width: 100%; margin-top: 16px;
  padding: 9px; border-radius: 7px;
  background: var(--clr-orange); color: #fff;
  border: none; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.dp-btn-locate:hover { background: #d03e1f; }
.dp-icons { display: flex; gap: 8px; margin-top: 10px; }
.dp-icon-badge {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; padding: 4px 9px; border-radius: 20px;
  background: var(--clr-bg); color: var(--clr-muted);
}
.dp-icon-badge i { font-size: 11px; }

/* ── TOAST ── */
#toast-container {
  position: fixed; bottom: 20px; right: 20px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 9999; pointer-events: none;
}
.toast {
  background: rgba(20,23,30,.92); color: #fff;
  padding: 10px 16px; border-radius: 8px;
  font-size: 12px; font-weight: 500;
  box-shadow: var(--shadow);
  animation: toastIn .3s ease forwards;
  pointer-events: none;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  :root { --sidebar-w: 200px; --panel-w: 280px; }
}
@media (max-width: 680px) {
  #sidebar { display: none; }
  :root { --panel-w: 100vw; }
  .detail-panel { width: 100vw; position: fixed; top: 0; right: 0; height: 100vh; z-index: 1000; }
}