/* Reset simple */
* { box-sizing: border-box; }
html, body, #app { height: 100%; width: 100%; margin: 0; padding: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

/* Topbar */
.maha-topbar{
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 64px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px;
    z-index: 1300; /* tout en haut */
}
.maha-logo img{ height: 40px; display: block; }

/* Carte */
#map{
    position: absolute;
    top: 64px; left: 0; right: 0; bottom: 0;
}
.leaflet-container{ z-index: 0; }

/* Dock boutons */
.action-dock{
    position: absolute;
    top: 88px;   /* sous la topbar */
    right: 16px;
    display: flex; flex-direction: column; gap: 8px;
    z-index: 1200;               /* > panneaux (1100) et > carte (0) */
    pointer-events: auto;
}
.dock-btn{
    width: 44px; height: 44px; border-radius: 10px;
    background: #fff; border: 1px solid #e5e7eb;
    display: grid; place-items: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.dock-btn[aria-expanded="true"]{
    outline: 2px solid #2563eb33;
}

/* Panneaux latéraux */
.side-panel{
    position: absolute;
    top: 80px; right: 80px; /* légèrement décalé du dock */
    width: 360px; max-width: calc(100% - 120px);
    max-height: calc(100% - 120px);
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,.12);
    display: flex; flex-direction: column;
    transition: transform .2s ease, opacity .2s ease;
    z-index: 1100;
}
.side-panel[aria-hidden="true"]{
    pointer-events: none;
    transform: translateX(12px);
    opacity: 0;
}
.side-panel[aria-hidden="false"]{
    pointer-events: auto;
    transform: translateX(0);
    opacity: 1;
}
.side-panel header{
    padding: 10px 12px; border-bottom: 1px solid #e5e7eb;
    display: flex; justify-content: space-between; align-items: center;
}
.side-panel .close-panel{
    background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer;
}
.side-panel .panel-body{
    padding: 12px; overflow: auto;
}
.group{ margin-bottom: 14px; }
.group h4{ margin: 6px 0 8px; font-size: 14px; color: #111827; }
.row{ display: flex; gap: 8px; }
.small{ font-size: 12px; color: #6b7280; }

button{ cursor: pointer; background:#2563eb; color:#fff; border:1px solid #1e40af; border-radius:8px; padding:6px 10px; }
button.secondary{ background:#fff; color:#111827; border-color:#e5e7eb; }

/* Popup centre */
.center-popup .title{ font-weight: 700; margin-bottom: 4px; }
.center-popup .addr{ color:#374151; margin-bottom: 4px; }
.center-popup .contact{ color:#4b5563; font-size: 13px; }
.center-popup .icons svg{ width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; }

/* Bannière info */
#diag-banner{
    background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:6px 10px;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
    pointer-events: none; /* ne bloque pas les clics */
}

/* Inputs & selects */
input[type="text"], input[type="number"], input[type="password"], select{
    border:1px solid #e5e7eb; border-radius:8px; padding:6px 8px; min-height: 34px;
}
progress{ height: 8px; }