/* live_map_guadeloupe.css */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:system-ui,sans-serif;
  background:#0f1117; color:#fff;
  height:100vh;     /* fallback navigateurs anciens */
  height:100dvh;    /* zone visible réelle (exclut barre adresse + nav mobile) */
  display:flex; flex-direction:column; overflow:hidden;
}

/* ── HEADER ── */
header {
  display:flex; align-items:center; gap:10px;
  padding:0 14px; height:52px; flex-shrink:0;
  background:#161922; border-bottom:1px solid #2a2d3a; z-index:10;
  white-space:nowrap; overflow:hidden;
}
.dot-live {
  width:9px; height:9px; flex-shrink:0; border-radius:50%;
  background:#22c55e; animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { box-shadow:0 0 0 0 #22c55e88; }
  50%      { box-shadow:0 0 0 5px #22c55e00; }
}
.header-brand {
  display:flex; flex-direction:column; gap:1px; overflow:hidden;
}
.header-brand h1 {
  font-size:14px; font-weight:700; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.header-brand .hb-sub {
  font-size:10px; color:#6b7280; white-space:nowrap;
}
.header-right       { margin-left:auto; display:flex; align-items:center; gap:10px; flex-shrink:0; }
.header-right span  { font-size:12px; color:#6b7280; }
.badge-online {
  display:flex; align-items:center; gap:5px;
  font-size:11px; background:#22c55e22; color:#22c55e;
  border:1px solid #22c55e44; padding:4px 10px; border-radius:20px; font-weight:600;
  white-space:nowrap;
}
.badge-dot { width:6px; height:6px; border-radius:50%; background:#22c55e; flex-shrink:0; animation:pulse 1.4s ease-in-out infinite; }

/* ── LAYOUT PRINCIPAL ── */
.main { display:flex; flex:1; overflow:hidden; }

/* ── PANEL FIXE GAUCHE ── */
#panel {
  width:0; flex-shrink:0;
  background:#161922; border-right:1px solid transparent;
  display:flex; flex-direction:column;
  overflow:hidden; transition:width .3s ease, border-color .3s ease;
  z-index:5;
}
#panel.open { width:320px; border-right-color:#2a2d3a; }

.panel-header { padding:14px 16px 10px; border-bottom:1px solid #2a2d3a; flex-shrink:0; }
.panel-header .ph-top {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
}
.panel-header h2 { font-size:12px; text-transform:uppercase; letter-spacing:.8px; color:#6b7280; }
.panel-close {
  background:none; border:none; color:#6b7280;
  cursor:pointer; font-size:16px; padding:2px 6px; border-radius:6px;
}
.panel-close:hover { background:#ffffff11; color:#fff; }

/* Tabs */
.tabs { display:flex; gap:4px; }
.tab {
  flex:1; padding:6px; border-radius:8px; border:none;
  background:#ffffff08; color:#6b7280; font-size:12px; font-weight:600;
  cursor:pointer; transition:all .2s;
}
.tab.active { background:#22c55e22; color:#22c55e; }

/* Panel content */
.panel-content { flex:1; overflow-y:auto; padding:12px; }
.panel-content::-webkit-scrollbar       { width:3px; }
.panel-content::-webkit-scrollbar-thumb { background:#2a2d3a; border-radius:3px; }

/* ── ÉTAT VIDE ── */
.empty-state {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; height:100%; gap:12px; color:#374151;
}
.empty-state .icon { font-size:40px; }
.empty-state p     { font-size:13px; text-align:center; line-height:1.6; }

/* ── CARTE ── */
#map-wrapper { position:relative; flex:1; overflow:hidden; }
#map         { position:absolute; inset:0; }

/* Toggle panel btn */
#toggle-panel {
  position:absolute; left:12px; top:12px; z-index:10;
  width:36px; height:36px; border-radius:10px;
  background:#161922ee; border:1px solid #2a2d3a;
  color:#fff; font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px); transition:background .2s;
}
#toggle-panel:hover { background:#22c55e22; }

/* Hint */
.hint {
  position:absolute; bottom:56px; left:50%; transform:translateX(-50%); z-index:5;
  background:#161922cc; border:1px solid #2a2d3a; border-radius:20px;
  padding:6px 14px; font-size:11px; color:#94a3b8;
  backdrop-filter:blur(6px); pointer-events:none;
  transition:opacity .6s; white-space:nowrap;
}

/* ── BANNIÈRE PUB MAP ── */
.ad-strip {
  position:absolute; bottom:0; left:0; right:0; z-index:6;
  height:48px; background:#fff; color:#111;
  display:flex; align-items:center; gap:10px;
  padding:0 12px; border-top:1px solid #e5e7eb;
  font-size:12px;
}
.ad-tag {
  font-size:9px; font-weight:700; color:#1a73e8;
  background:#e8f0fe; border:1px solid #c5d5f5;
  padding:2px 5px; border-radius:3px; flex-shrink:0;
}
.ad-copy { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#202124; }
.ad-copy strong { color:#1a0dab; }
.ad-x {
  background:none; border:none; color:#5f6368;
  font-size:14px; cursor:pointer; flex-shrink:0; line-height:1; padding:4px;
}
.ad-x:hover { color:#202124; }

/* ── PUB PANEL (tuile) ── */
.panel-ad {
  flex-shrink:0; border-top:1px solid #2a2d3a;
  padding:10px 12px; background:#161922;
}
.panel-ad .ad-tag { display:inline-block; margin-bottom:8px; }
.pad-row {
  display:flex; align-items:center; gap:10px;
}
.pad-logo {
  width:38px; height:38px; border-radius:8px; flex-shrink:0;
  background:linear-gradient(135deg,#1a73e8,#0d47a1);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:#fff;
}
.pad-info { flex:1; }
.pad-info strong { display:block; font-size:12px; font-weight:700; color:#e2e8f0; }
.pad-info span   { font-size:11px; color:#6b7280; }
.pad-cta {
  padding:6px 12px; border-radius:6px; border:none;
  background:#1a73e8; color:#fff; font-size:11px; font-weight:700; cursor:pointer;
  flex-shrink:0; white-space:nowrap;
}

/* Iframe YouTube dans panel */
.hz-video {
  width:100%; height:175px; border-radius:10px;
  margin-bottom:12px; border:none; display:block;
}

/* Vignette vidéo YouTube (thumbnail + play overlay) */
.hz-video-wrap { margin-bottom:12px; }
.hz-video-thumb {
  position:relative; width:100%; height:160px;
  border-radius:10px; overflow:hidden;
  cursor:pointer; display:block;
  background:#000;
}
.hz-video-thumb img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .3s;
}
.hz-video-thumb:hover img { transform:scale(1.04); }
.hz-play-overlay {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.35);
  transition:background .2s;
}
.hz-video-thumb:hover .hz-play-overlay { background:rgba(0,0,0,0.5); }
.hz-play-btn {
  width:56px; height:40px; border-radius:10px;
  background:#ff0000; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 16px #0008; transition:transform .2s, background .2s;
}
.hz-play-btn svg { display:block; }
.hz-video-thumb:hover .hz-play-btn { transform:scale(1.08); background:#cc0000; }
.hz-live-badge {
  position:absolute; top:8px; left:8px;
  background:#ef4444; color:#fff;
  font-size:10px; font-weight:800; padding:3px 8px;
  border-radius:4px; letter-spacing:.5px;
}

/* ── DRAG HANDLE (caché desktop) ── */
#drag-handle { display:none; }

/* ── BOUTON MENU HEADER (caché desktop) ── */
.header-menu-btn { display:none; }

/* ── OVERLAY (caché par défaut) ── */
#panel-overlay {
  display:none;
  position:absolute; inset:0; z-index:15;
  background:rgba(0,0,0,0);
  transition:background .3s;
  pointer-events:none;
}
#panel-overlay.active {
  display:block;
  background:rgba(0,0,0,0.45);
  pointer-events:auto;
}

/* ════════════════════════════════════════
   MOBILE — bottom sheet (≤ 768 px)
════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Le panel sort du flux et se colle en bas */
  #panel {
    position:fixed;
    left:0; right:0; bottom:0;
    width:100% !important;
    max-height:78vh;
    border-right:none !important;
    border-top:1px solid #2a2d3a;
    border-radius:20px 20px 0 0;
    transform:translateY(100%);
    transition:transform .32s cubic-bezier(.4,0,.2,1) !important;
    z-index:20;
    box-shadow:0 -8px 40px #0007;
  }
  #panel.open {
    transform:translateY(0);
  }

  /* Poignée visible sur mobile */
  #drag-handle {
    display:flex; justify-content:center;
    padding:10px 0 6px; cursor:grab; flex-shrink:0;
    touch-action:none;
  }
  .drag-bar {
    width:40px; height:4px;
    background:#374151; border-radius:2px;
  }

  /* Overlay actif côté map-wrapper */
  #panel-overlay { display:block; } /* toujours présent, invisible jusqu'à .active */

  /* Floating toggle caché sur mobile (remplacé par le bouton header) */
  #toggle-panel { display:none; }

  /* Horloge cachée sur mobile */
  #clock { display:none; }

  /* Bouton menu dans le header — visible mobile */
  .header-menu-btn {
    display:flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:10px; flex-shrink:0;
    background:#ffffff12; border:1px solid #2a2d3a;
    color:#fff; font-size:18px; cursor:pointer;
    margin-left:4px;
    transition:background .2s;
  }
  .header-menu-btn:hover { background:#22c55e22; }

  /* Hint au-dessus de la pub map */
  .hint { bottom:60px; }
}

/* ══════════════════════════════════
   CONTENU DU PANEL
══════════════════════════════════ */

/* Card admin */
.ac-hero    { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.ac-avatar  { width:52px; height:52px; border-radius:50%; object-fit:cover; border:3px solid; flex-shrink:0; }
.ac-name    { font-size:16px; font-weight:800; }
.ac-role    { font-size:12px; color:#6b7280; margin-top:2px; }
.ac-chip    { display:inline-flex; align-items:center; gap:4px; font-size:10px; padding:3px 10px; border-radius:20px; font-weight:700; margin-top:6px; }
.ac-route   { font-size:12px; color:#94a3b8; background:#ffffff08; border-radius:8px; padding:8px 10px; margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.ac-grid    { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.ac-cell    { background:#ffffff08; border-radius:9px; padding:10px; text-align:center; }
.ac-cell .v { font-size:18px; font-weight:800; }
.ac-cell .l { font-size:10px; color:#6b7280; margin-top:3px; }
.ac-coords  { font-family:monospace; font-size:11px; color:#6b7280; background:#ffffff06; border-radius:7px; padding:8px 10px; margin-bottom:14px; }
.ac-actions { display:flex; gap:8px; }
.ac-btn     { flex:1; padding:9px; border-radius:9px; border:none; font-size:12px; font-weight:700; cursor:pointer; transition:opacity .2s; }
.ac-btn:hover { opacity:.85; }

/* Card zone chaude */
.hz-img    { width:100%; height:130px; object-fit:cover; border-radius:10px; margin-bottom:12px; display:block; }
.hz-badge  { display:inline-flex; align-items:center; gap:5px; font-size:11px; padding:4px 12px; border-radius:20px; font-weight:700; margin-bottom:10px; }
.hz-title  { font-size:16px; font-weight:800; margin-bottom:6px; }
.hz-desc   { font-size:12px; color:#94a3b8; line-height:1.6; margin-bottom:14px; }
.hz-grid   { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.hz-cell   { background:#ffffff08; border-radius:9px; padding:10px; text-align:center; }
.hz-cell .v { font-size:17px; font-weight:800; }
.hz-cell .l { font-size:10px; color:#6b7280; margin-top:3px; }
.hz-tl      { margin-bottom:14px; }
.hz-tl h3   { font-size:10px; text-transform:uppercase; letter-spacing:.8px; color:#6b7280; margin-bottom:10px; }
.tli        { display:flex; gap:10px; margin-bottom:8px; }
.tld        { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:4px; }
.tlm        { font-size:12px; color:#cbd5e1; }
.tlt        { font-size:10px; color:#6b7280; margin-bottom:1px; }
.hz-avrow   { display:flex; align-items:center; margin-bottom:14px; }
.hz-avrow img           { width:26px; height:26px; border-radius:50%; border:2px solid #161922; object-fit:cover; margin-left:-6px; }
.hz-avrow img:first-child { margin-left:0; }
.hz-avrow span          { font-size:11px; color:#6b7280; margin-left:8px; }
.hz-actions { display:flex; gap:8px; }
.hz-btn     { flex:1; padding:9px; border-radius:9px; border:none; font-size:12px; font-weight:700; cursor:pointer; transition:opacity .2s; }
.hz-btn:hover { opacity:.85; }
.hz-btn.sec { background:#ffffff0f; color:#cbd5e1; }

/* ── LIGHTBOX MÉDIA ── */
/* ── LIGHTBOX — bottom sheet (map visible in top portion) ── */
.lightbox {
  position:fixed; bottom:0; left:0; right:0; z-index:200;
  pointer-events:none;
  transform:translateY(100%);
  transition:transform .30s cubic-bezier(.4,0,.2,1);
}
.lightbox.open { transform:translateY(0); pointer-events:auto; }
.lightbox-card {
  background:#161922; border-radius:22px 22px 0 0;
  border:1px solid #2a2d3a; border-bottom:none;
  box-shadow:0 -10px 48px #000d;
  overflow:hidden; position:relative;
  max-height:65vh; overflow-y:auto;
}
.lightbox-close {
  position:absolute; top:10px; right:12px; z-index:2;
  width:28px; height:28px; border-radius:50%;
  background:#1e2130; border:1px solid #2a2d3a;
  color:#94a3b8; font-size:13px; cursor:pointer; line-height:1;
}
#lightbox-media img {
  width:100%; max-height:220px; object-fit:cover; display:block; background:#0a0c12;
}
#lightbox-media .lb-vid-placeholder {
  width:100%; height:160px; background:#0a0c12;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:#6b7280; font-size:13px;
}
#lightbox-media .lb-iframe {
  width:100%; aspect-ratio:16/9; max-height:210px;
  border:none; display:block; background:#000;
}
.lb-no-live {
  text-align:center; padding:32px 20px;
  color:#6b7280; font-size:13px; line-height:1.8;
}
.lb-no-live-icon { font-size:36px; display:block; margin-bottom:8px; }
.lightbox-info  { padding:12px 16px 16px; }
.li-caption     { font-size:14px; font-weight:700; color:#e2e8f0; margin-bottom:4px; }
.li-meta        { font-size:11px; color:#6b7280; font-family:monospace; margin-bottom:12px; }
.li-actions     { display:flex; gap:8px; }
.li-btn-map {
  flex:1; padding:9px; border-radius:9px; border:none;
  background:#22c55e; color:#000; font-size:12px; font-weight:700; cursor:pointer;
}
.li-btn-close {
  flex:1; padding:9px; border-radius:9px; border:none;
  background:#ffffff0f; color:#94a3b8; font-size:12px; font-weight:700; cursor:pointer;
}
/* Desktop : carte flottante en bas à droite */
@media (min-width:769px) {
  .lightbox { left:auto; right:24px; bottom:24px; width:420px; border-radius:16px; }
  .lightbox-card { border-radius:16px; max-height:none; }
  #lightbox-media img { max-height:240px; object-fit:contain; background:#0a0c12; }
  #lightbox-media .lb-iframe { max-height:220px; }
}

/* ── HISTORIQUE MÉDIAS ── */
.mh-section  { margin-bottom:14px; }
.mh-title    { font-size:10px; text-transform:uppercase; letter-spacing:.8px; color:#6b7280; margin-bottom:8px; }
.mh-strip    { display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; }
.mh-strip::-webkit-scrollbar       { height:2px; }
.mh-strip::-webkit-scrollbar-thumb { background:#2a2d3a; border-radius:2px; }
.mh-item {
  flex-shrink:0; width:148px; border-radius:10px; overflow:hidden;
  cursor:pointer; background:#0f1117; border:1px solid #2a2d3a;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.mh-item:hover { border-color:#22c55e55; transform:translateY(-3px); box-shadow:0 6px 20px #000a; }
.mh-img      { width:148px; height:100px; object-fit:cover; display:block; }
.mh-vid-thumb {
  width:148px; height:100px; background:#1a1d27;
  display:flex; align-items:center; justify-content:center;
}
.mh-overlay  {
  position:relative; display:flex; justify-content:space-between; align-items:center;
  padding:3px 6px; background:#0f0f0fcc; margin-top:-22px;
}
.mh-time     { font-size:9px; color:#94a3b8; font-family:monospace; }
.mh-type-dot { font-size:11px; }
.mh-caption  { font-size:10px; color:#6b7280; padding:4px 6px 6px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Liste admins (tab) */
.admin-list-item {
  display:flex; align-items:center; gap:10px;
  padding:10px; border-radius:10px; margin-bottom:8px;
  background:#ffffff06; border:1px solid #2a2d3a;
  cursor:pointer; transition:background .2s;
}
.admin-list-item:hover { background:#ffffff0f; }
.ali-dot    { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.ali-info   { flex:1; }
.ali-name   { font-size:13px; font-weight:600; }
.ali-sub    { font-size:11px; color:#6b7280; margin-top:2px; }
.ali-coords { font-size:10px; font-family:monospace; color:#4b5563; margin-top:2px; }

/* ── TOAST ── */
.toast {
  position:fixed; bottom:100px; left:50%;
  transform:translateX(-50%) translateY(12px);
  background:#22c55e; color:#052e16;
  font-size:13px; font-weight:700;
  padding:9px 22px; border-radius:999px;
  z-index:4000; opacity:0;
  transition:opacity .2s, transform .2s;
  pointer-events:none; white-space:nowrap;
  box-shadow:0 4px 14px #0004;
}
.toast.toast-show { opacity:1; transform:translateX(-50%) translateY(0); }