/* =====================================
   Design System (Dark/Light) — Mobile 1st
   ===================================== */
:root{
  --appbar-h:56px;

  --bg:#0b1220; --bg-2:#101735; --panel:#101a36cc; --line:#ffffff1a;
  --txt:#eaf1ff; --muted:#9fb2d1; --accent:#5fb1ff; --accent-2:#8f73ff;
  --danger:#ff5c7a; --ok:#39d98a;

  --radius:14px; --shadow:0 10px 35px rgba(0,0,0,.25); --blur:14px;
}
@media (min-width:768px){ :root{ --appbar-h:60px } }

html[data-theme="light"]{
  --bg:#f6f7fb; --bg-2:#ffffff; --panel:#ffffffcc; --line:#00000012;
  --txt:#0c1222; --muted:#5a6a86; --accent:#0c73ff; --accent-2:#7a4bff;
  --danger:#d83a56; --ok:#1f9d59;
}

/* ===== Resets & no horizontal scroll ===== */
*{ box-sizing:border-box; min-width:0 }
:where(h1,h2,h3,p){ margin:0 }
html,body{ height:100%; max-width:100%; overflow-x:hidden }
body{
  margin:0; font:14px/1.5 ui-sans-serif,-apple-system,system-ui,Segoe UI,Roboto,Arial; color:var(--txt);
  background:
    radial-gradient(1200px 800px at 80% -200px, #2e3d75 0%, transparent 60%),
    radial-gradient(1000px 800px at -200px 80%, #2a7065 0%, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%);
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
}
html[data-theme="light"] body{
  background:
    radial-gradient(1200px 800px at 80% -200px, #d9e7ff 0%, transparent 60%),
    radial-gradient(1000px 800px at -200px 80%, #e6ffe7 0%, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%);
}

a{ color:inherit; text-decoration:none }
img,video{ max-width:100%; height:auto; display:block }
button{ font:inherit }

/* Utils */
.hidden{ display:none!important }
.muted{ color:var(--muted) }
.spacer{ flex:1 }
.row{ display:flex; align-items:center }
.row.end{ justify-content:flex-end }
.row.wrap{ flex-wrap:wrap }
.row.gap{ gap:10px }
.col{ display:flex; flex-direction:column }
.col.gap>*+*{ margin-top:10px }
.grid.two{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
@media (max-width:900px){ .grid.two{ grid-template-columns:1fr } }

/* =========================
   App Bar
   ========================= */
.appbar{
  position:fixed; inset:0 0 auto 0; height:var(--appbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 12px; border-bottom:1px solid var(--line); z-index:1000;
}
.glass{ backdrop-filter:saturate(1.15) blur(var(--blur)); background:var(--panel) }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700 }
.logo{
  display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff
}
.appbar-actions{ display:flex; gap:8px }
.icon-btn{
  border:1px solid var(--line); background:transparent; color:inherit;
  border-radius:10px; padding:8px 10px; cursor:pointer; transition:transform .08s ease, background .15s;
}
.icon-btn:hover{ background-color:var(--bg-2) }
.icon-btn:active{ transform:scale(.98) }
.icon-btn.danger{ background:var(--danger); color:#fff; border:0 }

/* ==============
   Layout global
   ============== */
.page{ padding-top:var(--appbar-h) }
.wrap{ max-width:1200px; margin:18px auto; padding:0 14px }
.home.wrap{ max-width:1100px }

/* ==============
   Cards / Panels
   ============== */
.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px; box-shadow:var(--shadow)
}
.card + .card{ margin-top:12px }
.card-title{ font-weight:700 }
.card-sub, .hint{ color:var(--muted) }
.empty{ padding:18px; color:var(--muted) }
.panel{ border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); background:var(--bg-2) }
.panel-head{ padding:14px 14px 0 }

/* Key-Value list (detail) */
.kv{ list-style:none; padding:0; margin:6px 0 0; display:grid; grid-template-columns:1fr; gap:6px }
.kv li{ display:flex; justify-content:space-between; gap:10px; border-bottom:1px dashed var(--line); padding:6px 2px }
.kv li span{ color:var(--muted) }

/* ===========
   Controls UI
   =========== */
.input, .search, select{
  border:1px solid var(--line); background:var(--bg-2); color:var(--txt);
  border-radius:12px; padding:10px 12px; outline:none; min-height:40px;
}
.input.grow{ flex:1 }
.input:focus, .search:focus, select:focus{ outline:2px solid var(--accent); outline-offset:2px }

.btn{
  border:0; border-radius:12px; padding:10px 14px; cursor:pointer;
  background:var(--bg-2); color:inherit; border:1px solid var(--line);
}
.btn + .btn{ margin-left:6px }
.btn.primary{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; border:0 }
.btn.ghost{ background:transparent }
.btn.danger{ background:var(--danger); color:#fff; border:0 }
.btn.wide{ width:100%; text-align:left }

/* Recherche + chips */
.search-wrap{
  position:relative; display:flex; align-items:center; gap:6px;
  background:var(--bg-2); border:1px solid var(--line);
  border-radius:999px; padding:6px 10px; width:100%;
}
.search-wrap .icon{ opacity:.8 }
.search-wrap .search{ border:0; background:transparent; padding:0 6px; min-width:0; width:100% }
.search-wrap .icon-btn{ border:0; background:transparent; padding:6px }

.chips{ display:flex; gap:8px; overflow-x:auto; white-space:nowrap; padding:6px 0; scrollbar-width:none }
.chips::-webkit-scrollbar{ display:none }
.chip{
  border:1px solid var(--line); background:var(--bg-2); color:inherit;
  padding:8px 12px; border-radius:999px; cursor:pointer; transition:background .15s,border .15s
}
.chip:hover{ background-color:rgba(255,255,255,.04) }
.chip.active{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; border:0 }

/* =========
   Carto UI
   ========= */
#map{ position:fixed; inset:var(--appbar-h) 0 0 0 }
.pinWrap .pin{ filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); line-height:1 }

/* Sidebar droite */
.sidepanel{
  position:fixed; top:var(--appbar-h); bottom:0; right:0;
  width:min(420px,92vw); max-width:92vw;
  transform:translateX(100%); transition:transform .22s ease;
  background:var(--panel); border-left:1px solid var(--line); box-shadow:var(--shadow);
  z-index:960; display:flex; flex-direction:column;
}
.sidepanel.open{ transform:translateX(0) }
.sidepanel header{ padding:12px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center }
.sidepanel .side-content{ padding:12px; overflow:auto; display:flex; flex-direction:column; gap:16px }
.group{ border:1px solid var(--line); border-radius:12px; padding:12px; background:var(--bg-2) }
.group-title{ font-size:12px; color:var(--muted); text-transform:uppercase; margin-bottom:8px; letter-spacing:.04em }

.side-backdrop{ position:fixed; inset:0; background:#0006; z-index:950; display:none }
.side-backdrop.show{ display:block }

/* Poignée d’ouverture */
.swipe-handle{
  position:fixed; right:6px; top:50%; transform:translateY(-50%);
  z-index:940; border:1px solid var(--line); background:var(--bg-2);
  color:inherit; border-radius:20px 0 0 20px; padding:10px 12px; box-shadow:var(--shadow)
}

/* ===== Sheet (création de point) ===== */
.sheet{
  position:fixed; left:0; right:0; bottom:0;
  background:var(--panel); border-top:1px solid var(--line);
  border-radius:16px 16px 0 0; z-index:999; box-shadow:var(--shadow)
}
.sheet.hidden{ display:none }
.sheet-backdrop{ position:fixed; inset:0; background:#0006; z-index:998 }
.sheet-backdrop.hidden{ display:none }
.sheet-content{ padding:14px }
.sheet-title{ font-weight:700; margin-bottom:6px }
.sheet-handle{ width:54px; height:5px; background:var(--line); border-radius:999px; margin:8px auto }

/* ===============  Pages secondaires  =============== */
/* Accueil (cities.php) */
.home-head{ display:grid; grid-template-columns:1fr auto; gap:14px; margin-bottom:12px }
@media (max-width:760px){ .home-head{ grid-template-columns:1fr } }
.home-title h1{ font-size:20px }
.home-add{ width:100%; display:flex; gap:10px; flex-wrap:wrap }
.home-add .input{ min-width:220px; flex:1 }

/* Tables — sans scroll horizontal, pas de chevauchement */
.card-head{ padding:6px 0 12px; border-bottom:1px solid var(--line); display:flex; gap:10px; flex-wrap:wrap }
.tablewrap{ overflow:visible }
.tbl{ width:100%; border-collapse:collapse; table-layout:fixed }
.tbl th, .tbl td{
  padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle;
  word-break:break-word; overflow-wrap:anywhere; white-space:normal;
}
.tbl thead th{
  font-weight:700; color:var(--muted); position:sticky; top:0;
  background:var(--panel); backdrop-filter:saturate(1.1) blur(8px); z-index:1
}
.city-name{ font-weight:600 }

/* Colonne Actions — largeur mini + wrap propre */
.tbl .col-actions{ width:200px }
.actions, .cell-actions, .btnbar{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end;
}
.actions .btn, .cell-actions .btn, .btnbar .btn{
  padding:8px 12px; white-space:nowrap; min-height:36px;
}
.actions form{ display:inline } /* empêche le <form> de casser la ligne */

@media (max-width:780px){
  .tbl{ table-layout:auto }
  .tbl .col-actions{ width:170px }
  .actions, .cell-actions, .btnbar{ justify-content:flex-start }
}
@media (max-width:560px){
  .actions .btn, .cell-actions .btn, .btnbar .btn{ flex:1 1 calc(50% - 8px); text-align:center }
}
@media (max-width:380px){
  .actions .btn, .cell-actions .btn, .btnbar .btn{ flex-basis:100% }
}

/* Empty state */
.empty-state{ padding:28px 16px; text-align:center }
.empty-state .emoji{ font-size:42px; margin-bottom:8px }

/* Détail (detail.php) */
.mini-map{ height:280px; border-radius:12px; margin:10px 14px; border:1px solid var(--line); overflow:hidden }
.gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; padding:12px }
.gallery.gallery-lg{ grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; padding:12px }
.ph{ position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--bg-2) }
.ph img{ width:100%; height:120px; object-fit:cover; display:block; transition:transform .15s; cursor:zoom-in }
.gallery.gallery-lg .ph img{ height:180px }
.ph:hover img{ transform:scale(1.02) }
.ph figcaption{ position:absolute; right:6px; top:6px }
.qr{ border:1px solid var(--line); border-radius:10px; background:var(--bg-2); padding:6px }

/* Liste des documents (PDF/Excel/etc.) */
.docs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; padding:12px }
.doc{
  border:1px solid var(--line); background:var(--bg-2); border-radius:12px; padding:10px;
  display:flex; align-items:center; gap:10px;
}
.doc .icon{ font-size:22px }
.doc a{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 }

/* Lightbox (zoom photos) */
.lightbox-back{ position:fixed; inset:0; background:#000a; z-index:2000 }
.lightbox{ position:fixed; inset:0; display:grid; place-items:center; z-index:2001 }
.lightbox.hidden,.lightbox-back.hidden{ display:none }
.lightbox img{ max-width:92vw; max-height:86vh; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.5); background:#000 }
.lb-close,.lb-prev,.lb-next{
  position:fixed; border:0; cursor:pointer; background:#000c; color:#fff;
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; backdrop-filter:blur(6px)
}
.lb-close{ top:14px; right:14px }
.lb-prev{ left:14px; top:50%; transform:translateY(-50%) }
.lb-next{ right:14px; top:50%; transform:translateY(-50%) }
@media (max-width:600px){
  .gallery.gallery-lg{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) }
  .gallery.gallery-lg .ph img{ height:150px }
}

/* ===== Login page ===== */
.auth-card{ max-width:520px; margin:18vh auto 0; padding:18px }
.auth-card .logo{ width:32px; height:32px }

/* ===== Feedback ===== */
.toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:18px;
  background:#000d; color:#fff; padding:10px 14px; border-radius:12px; z-index:1200; box-shadow:var(--shadow)
}

/* ===== Accessibilité ===== */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* ===== Leaflet tweaks ===== */
.leaflet-control-zoom a{ border-radius:10px !important }

/* ===== Position dot pulse ===== */
.pulse{
  width:18px; height:18px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 rgba(95,177,255,.7); animation:pulse 1.8s infinite
}
@keyframes pulse{
  0%{   box-shadow:0 0 0 0 rgba(95,177,255,.7) }
  70%{  box-shadow:0 0 0 12px rgba(95,177,255,0) }
  100%{ box-shadow:0 0 0 0 rgba(95,177,255,0) }
}

/* Liste — cacher l'adresse sur mobile pour éviter les colonnes énormes */
.tbl thead th { white-space: nowrap; }                  /* stop en-têtes qui se cassent en lettres verticales */
@media (max-width: 760px){
  .tbl .col-addr,       /* <th class="col-addr"> */
  .tbl td.col-addr {    /* <td class="col-addr"> */
    display: none;
  }
}

/* Actions compactes et sans chevauchement */
.tbl .col-actions { width: 170px; }
.cell-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width: 560px){
  .tbl .col-actions { width: 1%; }
  .cell-actions { justify-content:flex-start; }
  .cell-actions .btn { flex: 1 1 calc(50% - 8px); text-align:center; }
}
@media (max-width: 380px){
  .cell-actions .btn { flex-basis:100%; }
}