/* Plein écran carte */
html, body { height: 100%; }
body { margin: 0; overflow: hidden; }
.map-page main.container { padding:0 !important; max-width:100% !important; }
#map { position:fixed; inset:0; width:100vw; height:100vh; background:#e9ecef; z-index:1; }

/* Panneau haut rétractable (largeur % viewport) */
.top-panel{ --panel-w:25vw; --panel-header-h:46px; --panel-open-h:min(40vh,360px);
  position:fixed; left:12px; top:60px; width:var(--panel-w);
  min-width:240px; max-width:640px; background:rgba(255,255,255,.96); backdrop-filter:blur(6px);
  border:1px solid rgba(0,0,0,.12); border-radius:.75rem; box-shadow:0 8px 24px rgba(0,0,0,.12);
  z-index:1002; overflow:hidden; max-height:var(--panel-open-h);
  transition:max-height .25s ease, padding .25s ease; padding:10px 12px;
}
.panel-20 .top-panel{ --panel-w:20vw; } .panel-25 .top-panel{ --panel-w:25vw; } .panel-30 .top-panel{ --panel-w:30vw; }

.panel-header{ display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.actions{ display:flex; gap:.4rem; align-items:center; }
.btn.btn-sm{ padding:.25rem .5rem; border:1px solid rgba(0,0,0,.15); border-radius:.375rem; background:#f8f9fa; cursor:pointer; }
.btn.btn-sm:active{ transform:translateY(1px); }

.panel-body{ margin-top:.5rem; max-height:calc(var(--panel-open-h) - var(--panel-header-h) - 12px); overflow:auto; }
.chevron{ display:inline-block; transition:transform .2s ease; }
.top-panel.is-collapsed{ max-height:calc(var(--panel-header-h) + 12px); padding:8px 12px; }
.top-panel.is-collapsed .panel-body{ opacity:0; pointer-events:none; }

/* Indicateur "Ajout actif" */
.addmode-badge{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:16px; z-index:1003; background:#0d6efd; color:#fff;
  padding:.5rem .8rem; border-radius:.5rem; box-shadow:0 6px 18px rgba(0,0,0,.2);
  font-size:.95rem;
}

/* Leaflet: contrôle Recentrer */
.leaflet-control.custom-control{
  background:#fff; border:1px solid rgba(0,0,0,.12); border-radius:.5rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08); padding:.4rem .5rem; font-size:.9rem;
}
.leaflet-control.custom-control .btn{
  display:inline-block; padding:.35rem .6rem; border:1px solid rgba(0,0,0,.15);
  border-radius:.375rem; background:#f8f9fa; cursor:pointer;
}

/* Mobile */
@media (max-width:768px){
  .top-panel{ width:min(90vw, 360px); left:8px; top:60px; }
}