/* Design System — Mobile-first */
:root{
  --appbar-h:56px;
  --bg:#0b1220; --bg-2:#101735; --panel:#0e1833cc; --line:#ffffff1a;
  --txt:#eaf1ff; --muted:#9fb2d1; --accent:#0c73ff; --accent-2:#7a4bff;
  --danger:#ff5c7a; --ok:#39d98a;
  --radius:14px; --shadow:0 12px 40px rgba(0,0,0,.28); --blur:14px;
  --touch:44px;
}
@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 */
*{ 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:15px/1.5 ui-sans-serif,-apple-system,system-ui,Segoe UI,Roboto,Arial; color:var(--txt);
  background:
    radial-gradient(1100px 700px at 80% -200px, #2e3d75 0%, transparent 60%),
    radial-gradient(1000px 700px 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(1100px 700px at 80% -200px, #d9e7ff 0%, transparent 60%),
    radial-gradient(1000px 700px 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 }
.small{ font-size:12px }

/* 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:12px }
@media (max-width:820px){ .grid.two{ grid-template-columns:1fr } }

/* Appbar */
.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:10px 12px; cursor:pointer; min-height:var(--touch);
  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 */
.page{ padding-top:var(--appbar-h) }
.wrap{ max-width:1200px; margin:18px auto; padding:0 14px }
.home.wrap{ max-width:1100px }

/* Cards */
.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 }
.hint{ color:var(--muted) }
.hint.error{ color:#ffb3bd }

/* Controls */
.input, .search, select{
  border:1px solid var(--line); background:var(--bg-2); color:var(--txt);
  border-radius:12px; padding:12px 12px; outline:none; min-height:var(--touch);
}
.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:12px 14px; cursor:pointer;
  background:var(--bg-2); color:inherit; border:1px solid var(--line); min-height:var(--touch);
}
.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 }

/* Search + 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:10px 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 }

/* Tables */
.tablewrap{ overflow:visible }
.tbl{ width:100%; border-collapse:collapse; table-layout:fixed }
.tbl th, .tbl td{
  padding: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 }
.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:10px 12px; white-space:nowrap; min-height:40px }
.actions form{ display:inline }

@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 */
.empty-state{ padding:28px 16px; text-align:center }
.empty-state .emoji{ font-size:42px; margin-bottom:8px }

/* 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) }
.mini-map{ height:300px; border-radius:12px; margin:10px 0; 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:160px; 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 }

/* Docs */
.docs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,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 }

/* Lightbox */
.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:44px; height:44px; 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%) }

/* Home */
.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 }

/* Map + sidepanel */
#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 }
.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 }
.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 */
.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 }

/* Accessibility & pulse */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.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 adresse sur mobile */
.tbl thead th { white-space: nowrap; }
@media (max-width:760px){
  .tbl .col-addr, .tbl td.col-addr { display:none; }
}

/* Toast */
.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)
}

/* Login */
.auth-card{ max-width:520px; margin:18vh auto 0; padding:0 14px }

/* ===========================
   Impression A4 — Export Point
   =========================== */

@page { size: A4; margin: 12mm; }

@media print {
  body, .card, .export-card { background:#fff !important; color:#000 !important; box-shadow:none !important; }
  * { text-shadow:none !important; }
  .appbar, .btn, .sidepanel, .toast, .lightbox, .lightbox-back, .swipe-handle { display:none !important; }
  a[href]:after { content:""; }

  .export-grid {
    display:grid !important;
    grid-template-columns: 2fr 1fr;
    gap:10mm;
  }

  .wrap { max-width:none !important; margin:0 !important; padding:0 !important; }

  .export-card, .export-meta, .export-photo, .export-map, .export-qr { break-inside: avoid; page-break-inside: avoid; } 

  .export-photo img{
    max-width:100%;
    height:auto;
    max-height:40mm;        /* Ajuste 70mm/60mm si besoin */
    object-fit:contain;
  }

  .export-map img{
    max-height:40mm;
    object-fit:contain;
  }

  .export-qr img{
    width:45mm; height:45mm;
    image-rendering: pixelated;
  }

  .export-title { font-size:16pt; line-height:1.2; }
  body { background:#fff !important; }
}