@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root{
  --bg:#f1f3f4;
  --ink:#202124;
  --ink-soft:#5f6368;
  --blue:#1a73e8;
  --blue-dark:#174ea6;
  --green:#0b8043;
  --grey:#757575;
  --red:#ea4335;
  --card:#ffffff;
  --border:#e8eaed;
  --radius:12px;
  --shadow: 0 2px 10px rgba(60,64,67,0.25), 0 1px 2px rgba(60,64,67,0.3);
  --shadow-sm: 0 1px 4px rgba(60,64,67,0.3);
}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  font-family:'Roboto',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  overflow:hidden;
}
#app{position:fixed;inset:0;}
#map{position:absolute;inset:0;background:#f5f5f3;}
.leaflet-control-attribution{font-size:9px;}
.leaflet-control-zoom{border:none !important;box-shadow:var(--shadow) !important;}
.leaflet-control-zoom a{color:var(--ink-soft) !important;}

/* ---- Top bar ---- */
#topbar{
  position:absolute;top:0;left:0;right:0;z-index:1000;
  padding:12px;
  display:flex;flex-direction:column;gap:8px;
  pointer-events:none;
}
@media (min-width:760px){
  #topbar{left:16px;right:auto;width:380px;}
}
.search-pill{
  pointer-events:auto;
  background:var(--card);
  border-radius:8px;
  box-shadow:var(--shadow);
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
}
.search-pill i.fa-magnifying-glass{color:var(--ink-soft);font-size:16px;}
.search-pill input{
  border:none;outline:none;flex:1;font-size:16px;color:var(--ink);background:transparent;font-family:inherit;
}
.search-pill input::placeholder{color:var(--ink-soft);}
#count-badge{
  font-size:12px;font-weight:500;color:var(--blue);background:#e8f0fe;
  border-radius:999px;padding:4px 10px;white-space:nowrap;
}
.filter-row{
  pointer-events:auto;
  display:flex;gap:8px;align-items:center;overflow-x:auto;
  scrollbar-width:none;
}
.filter-row::-webkit-scrollbar{display:none;}
.chip{
  flex:0 0 auto;
  background:var(--card);color:var(--ink-soft);
  border:1px solid var(--border);
  border-radius:8px;padding:8px 14px;font-size:13px;font-weight:500;
  cursor:pointer;box-shadow:var(--shadow-sm);
  display:flex;align-items:center;gap:6px;
  transition:background .15s,color .15s,border-color .15s;
  user-select:none;
}
.chip.on-garde{color:var(--green);}
.chip.active{background:var(--blue);border-color:var(--blue);color:#fff;}
.chip.active.chip-non{background:var(--grey);border-color:var(--grey);}
select#groupe-select{
  flex:0 0 auto;
  -webkit-appearance:none;appearance:none;
  background:var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 10px center / 14px;
  border:1px solid var(--border);
  border-radius:8px;padding:8px 30px 8px 14px;font-size:13px;font-weight:500;color:var(--ink);
  box-shadow:var(--shadow-sm);font-family:inherit;
}

/* ---- Floating action buttons ---- */
.fab{
  position:absolute;z-index:1000;
  width:48px;height:48px;border-radius:50%;
  background:var(--card);box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--blue);font-size:18px;
  border:none;
}
#locate-btn{right:14px;bottom:30px;}
#install-btn{right:14px;bottom:88px;color:var(--green);}
#compass-btn{right:14px;bottom:146px;display:none;}
#compass-btn i{transition:transform .15s linear;}
#locate-btn.working i{animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---- Marqueurs façon Maps ---- */
.poi{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,0.35);
  border:2px solid #fff;
  position:relative;
}
.poi i{font-size:13px;color:#fff;}
.poi-garde{background:var(--green);}
.poi-garde::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  box-shadow:0 0 0 2px rgba(11,128,67,0.35);
  pointer-events:none;
}
.poi-off{background:var(--grey);}

.pin-dest{
  width:30px;height:30px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  background:var(--red);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 8px rgba(0,0,0,0.4);
  border:2px solid #fff;
}
.pin-dest i{transform:rotate(45deg);font-size:14px;color:#fff;}

.user-wrap{width:22px;height:22px;position:relative;}
.user-pulse{
  position:absolute;inset:-14px;border-radius:50%;
  background:rgba(26,115,232,0.25);
  animation:pulse 1.8s ease-out infinite;
}
.user-dot{
  position:absolute;inset:0;margin:auto;width:16px;height:16px;border-radius:50%;
  background:var(--blue);border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35);
}
@keyframes pulse{
  0%{transform:scale(0.4);opacity:.8;}
  100%{transform:scale(1.6);opacity:0;}
}

/* ---- Panneau de détail (bottom sheet mobile / sidebar desktop) ---- */
#sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:1100;
  background:var(--card);
  border-radius:16px 16px 0 0;
  box-shadow:0 -4px 20px rgba(60,64,67,0.3);
  padding:10px 20px 22px;
  transform:translateY(110%);
  transition:transform .28s cubic-bezier(.32,.72,0,1);
  max-height:54vh;overflow-y:auto;
}
#sheet.open{transform:translateY(0);}
@media (min-width:760px){
  #sheet{
    left:0;right:auto;bottom:0;top:0;width:380px;max-height:none;
    border-radius:0;box-shadow:2px 0 10px rgba(60,64,67,0.3);
    transform:translateX(-100%);padding:20px 24px;
  }
  #sheet.open{transform:translateX(0);}
}
.sheet-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:2px auto 14px;}
@media (min-width:760px){ .sheet-handle{display:none;} }
.sheet-close{
  position:absolute;top:14px;right:16px;background:none;border:none;color:var(--ink-soft);
  font-size:18px;cursor:pointer;
}
.sheet-title{font-size:20px;font-weight:500;margin:8px 0 6px;padding-right:26px;}
.badge-row{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.badge{font-size:12px;font-weight:600;padding:4px 10px;border-radius:6px;}
.badge-garde{background:#e6f4ea;color:var(--green);}
.badge-off{background:#f1f3f4;color:var(--ink-soft);}
.info-line{display:flex;align-items:center;gap:12px;color:var(--ink-soft);font-size:14px;margin-bottom:10px;}
.info-line i{width:16px;color:var(--ink-soft);}
.sheet-actions{display:flex;gap:10px;margin-top:16px;}
.btn{
  flex:1;border:none;border-radius:8px;padding:12px 14px;font-size:14px;font-weight:500;
  display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  text-decoration:none;font-family:inherit;
}
.btn-primary{background:var(--blue);color:#fff;}
.btn-primary:active{background:var(--blue-dark);}
.btn-ghost{background:#e8f0fe;color:var(--blue);}

/* ---- Nav panel (guidage) ---- */
#navpanel{
  position:absolute;left:12px;right:12px;top:12px;z-index:1200;
  background:var(--blue);color:#fff;border-radius:12px;box-shadow:var(--shadow);
  padding:16px 18px;
  transform:translateY(-140%);transition:transform .28s cubic-bezier(.32,.72,0,1);
}
@media (min-width:760px){ #navpanel{left:16px;right:auto;width:380px;} }
#navpanel.open{transform:translateY(0);}
.nav-instruction{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:500;margin-bottom:10px;}
.nav-instruction i{font-size:22px;}
.nav-meta{display:flex;justify-content:space-between;align-items:center;font-size:13px;opacity:.92;}
.nav-meta .approx{font-weight:400;opacity:.85;}
#stop-nav{
  background:rgba(255,255,255,0.2);border:none;color:#fff;border-radius:8px;
  padding:8px 14px;font-size:13px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px;font-family:inherit;
}

/* ---- Toast ---- */
#toast{
  position:absolute;left:50%;bottom:100px;transform:translateX(-50%) translateY(20px);
  background:#323232;color:#fff;padding:10px 18px;border-radius:6px;
  font-size:13.5px;font-weight:500;box-shadow:var(--shadow);
  z-index:1300;opacity:0;transition:opacity .2s, transform .2s;pointer-events:none;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#toast.error{background:var(--red);}

/* ---- État de chargement ---- */
#loading{
  position:absolute;inset:0;z-index:2000;background:var(--bg);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;
  color:var(--ink-soft);font-size:14px;transition:opacity .25s;
}
#loading.hidden{opacity:0;pointer-events:none;}
.spinner{
  width:28px;height:28px;border-radius:50%;
  border:3px solid var(--border);border-top-color:var(--blue);
  animation:spin 0.8s linear infinite;
}

@media (max-width:420px){
  .sheet-title{font-size:18px;}
}