/* ===== Mise en page application ============================================= */
html, body { height: 100%; }
body { margin: 0; display: flex; flex-direction: column; min-height: 100vh; }
#content { flex: 1 1 auto; display: flex; min-height: 0; }

.app-shell {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  width: 100%;
}

/* Carte */
.map-pane { position: relative; flex: 1 1 auto; min-width: 0; min-height: 420px; }
#map { position: absolute; inset: 0; background: #eef1f5; }

/* Panneau de contrôle */
.ctrl-pane {
  flex: 0 0 360px;
  max-width: 360px;
  border-left: 1px solid var(--border-default-grey, #ddd);
  background: var(--background-default-grey, #fff);
  overflow: hidden;
  display: flex;
}
.ctrl-scroll { overflow-y: auto; padding: 1rem 1.25rem 2rem; width: 100%; }

#layer-switch { margin-bottom: .25rem; }
.layer-help { color: var(--text-mention-grey, #666); margin: .25rem 0 1rem; }
.cma-overlay-group { margin-bottom: 1rem; }

/* ===== Légende carte (superposée) ========================================== */
.map-legend {
  position: absolute; left: 12px; bottom: 12px; z-index: 5;
  background: rgba(255,255,255,.94);
  border: 1px solid var(--border-default-grey, #ddd);
  border-radius: 6px;
  padding: .6rem .75rem;
  font-size: .78rem; line-height: 1.25;
  max-width: 250px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.map-legend h3 { font-size: .8rem; margin: 0 0 .4rem; font-weight: 700; }
.legend-row { display: flex; align-items: center; gap: .4rem; margin: .15rem 0; }
.legend-swatch { width: 16px; height: 12px; border-radius: 2px; flex: 0 0 auto; border: 1px solid rgba(0,0,0,.15); }
.legend-grad { height: 12px; border-radius: 2px; margin: .2rem 0; }
.legend-scale-labels { display: flex; justify-content: space-between; color: #555; font-size: .7rem; }
.legend-note { color: #777; font-size: .68rem; margin-top: .35rem; }

/* ===== Infobulle ============================================================ */
.map-tooltip {
  position: absolute; z-index: 10; pointer-events: none;
  background: #fff; border: 1px solid var(--border-default-grey, #ccc);
  border-left: 4px solid var(--blue-france-sun-113-625, #000091);
  border-radius: 5px; padding: .5rem .65rem;
  font-size: .8rem; line-height: 1.3; max-width: 260px;
  box-shadow: 0 4px 14px rgba(0,0,0,.16);
}
.map-tooltip .tt-title { font-weight: 700; margin-bottom: .25rem; }
.map-tooltip .tt-row { display: flex; justify-content: space-between; gap: 1rem; }
.map-tooltip .tt-row span:last-child { font-weight: 600; }
.map-tooltip .tt-sub { color: #666; font-size: .72rem; margin-top: .25rem; }

/* ===== Panneau détail (drill) =============================================== */
.detail-panel {
  border: 1px solid var(--border-default-grey, #ddd);
  border-radius: 6px; padding: .85rem; margin-bottom: 1.25rem;
  background: var(--background-alt-grey, #f6f6f6);
}
.detail-panel h2 { font-size: 1.05rem; margin: 0 0 .15rem; }
.detail-panel .dp-sub { color: #666; font-size: .8rem; margin: 0 0 .6rem; }
.dp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .9rem; }
.dp-stat { }
.dp-stat .dp-num { font-size: 1.15rem; font-weight: 700; line-height: 1.1; }
.dp-stat .dp-lab { font-size: .7rem; color: #555; text-transform: uppercase; letter-spacing: .02em; }
.dp-badge { display: inline-block; padding: .1rem .45rem; border-radius: 10px; font-size: .7rem; font-weight: 600; color: #fff; }
.dp-close { float: right; }

/* ===== Légende / filtre SNA ================================================= */
.sna-block { margin-top: .5rem; }
.sna-head { display: flex; justify-content: space-between; align-items: baseline; }
.sna-hint { color: #777; margin: .1rem 0 .5rem; }
.sna-macro { margin-bottom: .55rem; }
.sna-macro-title { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #444; margin: 0 0 .2rem; display: flex; align-items: center; gap: .35rem; }
.sna-macro-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.sna-item {
  display: flex; align-items: center; gap: .45rem; width: 100%;
  border: none; background: none; text-align: left; cursor: pointer;
  padding: .15rem .2rem; border-radius: 4px; font-size: .76rem; color: #1e1e1e;
}
.sna-item:hover { background: rgba(0,0,145,.06); }
.sna-item .sna-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; border: 1px solid rgba(0,0,0,.15); }
.sna-item .sna-count { margin-left: auto; color: #888; font-size: .7rem; }
.sna-item.inactive { opacity: .32; }
.sna-item.active { background: rgba(0,0,145,.10); font-weight: 600; }

/* ===== Mode embed =========================================================== */
body.embed #app-header,
body.embed #app-footer { display: none !important; }
body.embed #embed-about-btn { display: inline-flex !important; }
.embed-about { position: absolute; right: 12px; top: 12px; z-index: 6; }

/* ===== Responsive =========================================================== */
@media (max-width: 920px) {
  #content { display: block; }
  .app-shell { flex-direction: column; }
  .map-pane { height: 62vh; min-height: 380px; }
  body.embed .map-pane { height: 68vh; min-height: 320px; }
  .ctrl-pane { flex-basis: auto; max-width: none; border-left: none; border-top: 1px solid var(--border-default-grey, #ddd); }
  .ctrl-scroll { max-height: none; }
}

/* Crédit maplibre discret */
.maplibregl-ctrl-attrib { font-size: 10px; }