/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:      #0a1408;
  --surface: #16240d;
  --accent:  #84cc16;
  --accent2: #a3e635;
  --text:    #eefbe0;
  --muted:   #9ab08a;
  --red:     #f87171;
}

html,body{height:100%;margin:0;background:var(--bg);color:var(--text);
  font-family:'Segoe UI',system-ui,sans-serif;-webkit-tap-highlight-color:transparent}

body{
  display:grid;
  grid-template-rows:50px auto 1fr auto auto;
  height:100dvh;overflow:hidden;
  padding-top:env(safe-area-inset-top);
}

/* ── Nav ────────────────────────────────────────────────── */
.topnav{
  display:flex;align-items:center;gap:1rem;padding:0 1rem;
  background:var(--surface);border-bottom:1px solid #84cc1633;
}
.nav-back{color:var(--accent2);text-decoration:none;font-size:.85rem;font-weight:700}
.nav-back:hover{color:#fff}
.nav-title{font-size:.95rem;font-weight:800;flex:1}
.count-chip{background:var(--accent);color:#0a1408;border-radius:2rem;
  padding:.2rem .7rem;font-size:.78rem;font-weight:800;white-space:nowrap}

/* ── Barre de recherche ─────────────────────────────────── */
.searchbar{
  display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;
  background:var(--surface);border-bottom:1px solid #84cc1622;
  overflow-x:auto;white-space:nowrap;
}
.search-form{display:flex;gap:.3rem;align-items:center}
.searchbar input[type="text"]{
  width:120px;padding:.4rem .6rem;border-radius:8px;border:1px solid #84cc1644;
  background:rgba(255,255,255,0.95);color:#0a1408;font-size:.95rem;font-weight:700;
  text-align:center;letter-spacing:1px;
}
.tool-btn{
  padding:.4rem .7rem;border:none;border-radius:8px;background:var(--accent);
  color:#0a1408;font-size:.85rem;font-weight:800;cursor:pointer;white-space:nowrap;
  touch-action:manipulation;
}
.tool-btn:hover{background:var(--accent2)}
.carb-legend{display:inline-flex;gap:.5rem;align-items:center}
.carb-legend .lg-hint{font-size:.68rem;color:var(--accent2);font-weight:700}
.carb-legend .lg{font-size:.68rem;color:var(--muted);display:inline-flex;align-items:center;gap:.25rem}
.carb-legend .lg::before{content:'';width:.6rem;height:.6rem;border-radius:50%;background:var(--c)}

/* ── Carte ──────────────────────────────────────────────── */
#map{width:100%;height:100%;background:#0c1a10}
.leaflet-container{background:#0c1a10}

/* ── Bandeau info ───────────────────────────────────────── */
.infobar{
  padding:.5rem 1rem;background:var(--surface);border-top:1px solid #84cc1622;
  font-size:.78rem;color:var(--muted);text-align:center;
}

/* ── Marqueurs stations (prix gazole affiché) ───────────── */
.station-marker{background:none;border:none}
.station-marker .pin{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);box-shadow:0 2px 6px rgba(0,0,0,.5);
  border:2px solid #fff;
}
.station-marker .pin-txt{
  transform:rotate(45deg);font-size:10px;font-weight:800;color:#0a1408;
}

/* ── Popups ─────────────────────────────────────────────── */
.pp{min-width:190px}
.pp-title{font-weight:800;font-size:.9rem;color:#0a1408}
.pp-sub{font-size:.78rem;color:#475569;margin-bottom:.4rem}
.pp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.3rem;margin-bottom:.5rem}
.pp-item{display:flex;flex-direction:column;background:#f1f5f9;border-radius:6px;padding:.25rem .4rem}
.pp-label{font-size:.62rem;font-weight:800;text-transform:uppercase}
.pp-val{font-size:.85rem;font-weight:800;color:#0f172a;font-variant-numeric:tabular-nums}
.pp-vide{font-size:.78rem;color:#64748b;font-style:italic;margin-bottom:.4rem}
.pp-histo{
  width:100%;padding:.45rem;background:#65a30d;color:#fff;border:none;border-radius:6px;
  font-size:.8rem;font-weight:800;cursor:pointer;
}
.pp-histo:hover{background:#4d7c0f}

/* ── Panneau historique ─────────────────────────────────── */
.histo-panel{
  background:var(--surface);border-top:2px solid var(--accent);
  padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  max-height:44vh;overflow-y:auto;
}
.histo-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.histo-title{font-size:.9rem;font-weight:700}
.histo-close{background:none;border:none;color:var(--muted);font-size:1rem;cursor:pointer}
.histo-close:hover{color:var(--red)}
.chk{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--muted);cursor:pointer;margin-bottom:.5rem}
.chk input{accent-color:var(--accent)}
.graphique-wrapper{position:relative;min-height:120px}
.graphique-loading{text-align:center;color:var(--accent2);font-size:.85rem;padding:1rem 0}
.source-note{margin-top:.5rem;font-size:.7rem;color:var(--muted)}