:root{
  --bg1:#0b1220;
  --bg2:#070a12;
  --card: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.10);
  --text:#eaf2ff;
  --muted: rgba(234,242,255,.68);
  --primary: #01c0c8;
  --primary2: #2f80ed;
  --danger:#ff4d4d;
  --shadow: 0 20px 60px rgba(0,0,0,.55);
  --radius: 18px;
}

*{box-sizing:border-box}
body.bg{
  margin:0; color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto;
  background:
    radial-gradient(1100px 520px at 10% 10%, rgba(1,192,200,.25), transparent 60%),
    radial-gradient(900px 520px at 85% 30%, rgba(47,128,237,.25), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  min-height:100vh;
}

.page{max-width:1100px;margin:28px auto;padding:0 16px}
.hero{padding:14px 2px 18px}
.hero h1{margin:0;font-size:32px;letter-spacing:-.5px}
.hero p{margin:8px 0 0;color:var(--muted)}

.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--border);
  background: rgba(10,14,25,.65); backdrop-filter: blur(10px);
}
.brand{font-weight:800; letter-spacing:.2px}
.nav a{color:var(--muted); text-decoration:none; margin-left:12px; padding:8px 10px; border-radius:12px}
.nav a:hover{background:rgba(255,255,255,.06);color:var(--text)}
.nav a.active{background:rgba(1,192,200,.14); color:var(--text); border:1px solid rgba(1,192,200,.25)}

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:16px;
  margin-top:14px;
}
.card.soft{background: rgba(255,255,255,.04)}
.auth-card{max-width:460px;margin:10vh auto;padding:22px;border-radius:22px;border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow)}
.auth-card h1{margin:0 0 6px;font-size:28px}
.muted{color:var(--muted)}
.small{font-size:12px}

label{display:block;margin:12px 0 6px;font-weight:600}
input,select,textarea{
  width:100%; padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color:var(--text);
  outline:none;
  transition: .18s;
}
input:focus,select:focus,textarea:focus{
  border-color: rgba(1,192,200,.55);
  box-shadow: 0 0 0 4px rgba(1,192,200,.12);
}
textarea{resize:vertical}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px}
@media(max-width:860px){.grid2,.grid3{grid-template-columns:1fr}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 14px;border-radius:14px;border:none;
  background: linear-gradient(90deg, var(--primary), var(--primary2));
  color:#071019;font-weight:800; cursor:pointer;
  transition: transform .15s, filter .15s;
  text-decoration:none;
}
.btn:hover{transform: translateY(-1px); filter:brightness(1.05)}
.btn.big{width:100%; padding:14px 16px; font-size:15px}
.btn.small{padding:8px 10px;border-radius:12px;font-size:12px}
.btn.secondary{background: rgba(255,255,255,.08); color:var(--text); border:1px solid rgba(255,255,255,.12)}
.btn.danger{background: rgba(255,77,77,.18); color: #ffd1d1; border:1px solid rgba(255,77,77,.35)}

.alert{
  padding:12px 14px;border-radius:14px;
  background: rgba(255,77,77,.12);
  border:1px solid rgba(255,77,77,.25);
  margin:12px 0;
}

.row-between{display:flex;justify-content:space-between;align-items:center;gap:10px}
.filters{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr 1fr 1fr 1fr auto;gap:10px;margin-top:10px}
@media(max-width:980px){.filters{grid-template-columns:1fr 1fr;}}
.table-wrap{overflow:auto;border-radius:16px}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{padding:12px 10px;border-bottom:1px solid rgba(255,255,255,.08);vertical-align:top}
.table th{color:rgba(234,242,255,.75);font-weight:700;text-align:left}
tr:hover td{background: rgba(255,255,255,.03)}
.who{display:flex;gap:10px;align-items:center}
.avatar{width:42px;height:42px;border-radius:14px;object-fit:cover;border:1px solid rgba(255,255,255,.12)}
.avatar.sm{width:34px;height:34px;border-radius:12px}

.fade-in{animation: fadeIn .25s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

.toggle .active{border:1px solid rgba(1,192,200,.35); background:rgba(1,192,200,.10)}
.rating{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.star{font-size:18px;color:rgba(255,255,255,.25);cursor:pointer;transition:.12s}
.star.on{color:#ffd66e;text-shadow:0 6px 18px rgba(255,214,110,.25)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:var(--muted)}
/* TABLE: lignes full width */
.table{
  width:100%;
  border-collapse: collapse;
}
.table thead th{
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.table tbody td{
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.table tbody tr:last-child td{
  border-bottom: 0;
}

/* sécurité: évite que la cellule avatar “coupe” la ligne */
.table td.who,
.table td.who *{
  background: transparent !important;
  box-shadow: none !important;
}
/* LEAFLET POPUP readability */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip{
  background: rgba(255,255,255,.97) !important;
  color: #0b1f2a !important;
}
.leaflet-popup-content{
  color:#0b1f2a !important;
  font-weight: 600;
}
.leaflet-popup-content .muted,
.popup .muted{
  color: rgba(11,31,42,.75) !important;
  font-weight: 500;
}
.leaflet-control-zoom a{
  color:#0b1f2a !important;
}
/* Force buttons visibility inside leaflet popup */
.leaflet-popup-content .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:14px;
  font-weight:800;
  text-decoration:none !important;
}

.leaflet-popup-content .btn.secondary{
  background: rgba(11,31,42,.10) !important;
  border: 1px solid rgba(11,31,42,.18) !important;
  color: #0b1f2a !important;  
}

.leaflet-popup-content .btn:not(.secondary){
  background: rgb(1, 192, 200) !important;
  color: #06141b !important;
  border: 0 !important;
}
.leaflet-popup-content-wrapper{
  border-radius:18px !important;
  box-shadow: 0 25px 80px rgba(0,0,0,.25) !important;
}
.anchor{
  text-decoration: none; 
  font-size: 12px;
  color: inherit;
}
.anchor:hover{
  opacity: 0.7;
}