/* =========================================================
   DEMOGRAPHIE.CSS — VERSION CORRIGÉE ET PROPRE
   ========================================================= */

:root {
  /* Charte */
  --gh-deep:   #0A3B5C;
  --gh-orange: #F28C28;
  --gh-red:    #E03C31;
  --gh-sky:    #3DAEEF;
  --gh-yellow: #FFD166;
  --gh-green:  #7FB800;

  --bg: #ffffff;
  --surface: #ffffff;
  --text: #0b1f2a;
  --muted: rgba(11,31,42,.70);

  --shadow-soft: 0 6px 18px rgba(10,59,92,.06);
  --radius-lg: 0px;
  --radius-md: 0px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body.demo-page {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg) !important;
  
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ====== Topbar ====== */
.pd-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(10,59,92,.08);
}
.pd-topbar-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Logo */
.pd-brand {
  display: flex;
  gap: 16px;
  align-items: center;
}
.pd-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.pd-logo-link:hover .pd-logo {
  transform: scale(1.05);
  filter: brightness(1.05);
}
.pd-brand-text {
  display: flex;
  flex-direction: column;
}
.pd-brand-title {
  font-weight: 1000;
  font-size: 20px;
  color: var(--gh-deep);
}
.pd-brand-subtitle {
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}

/* Menu */
.pd-menu {
  display: flex;
  gap: 10px;
  align-items: center;
}
.pd-menu-link {
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 999px;
  color: var(--text);
  font-weight: 800;
  font-size: 13px;
  transition: all 0.2s ease;
}
.pd-menu-link:hover {
  background: rgba(242,140,40,.14);
  color: var(--gh-orange);
}
.pd-menu-link.is-active {
  background: rgba(242,140,40,.18);
  color: var(--text);
  border: 1px solid rgba(242,140,40,.25);
}

/* ====== Hero ====== */
.pd-hero {
  padding: 18px 0 8px;
}
.pd-hero-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 28px;
  text-align: center;
}
.pd-hero-title {
  margin: 6px 0 6px;
  font-size: 30px;
  font-weight: 950;
  color: var(--gh-deep);
}
.pd-hero-subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  font-weight: 650;
}
.pd-tabs {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.pd-tab {
  text-decoration: none;
  padding: 9px 18px;
  border-radius: 0px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(10,59,92,.10);
  color: var(--gh-deep);
  font-weight: 900;
  font-size: 13px;
  box-shadow: var(--shadow-soft);
}
.pd-tab.is-active {
  background: linear-gradient(135deg, var(--gh-orange), rgba(242,140,40,.78));
  border-color: rgba(242,140,40,.25);
  color: #fff;
}

/* ====== Main Surface ====== */
.demo-main {
  flex: 1;
  padding: 16px 0 30px;
}
.pd-surface {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 28px 24px;
  display: flex;
  flex-direction: column;
}

/* ====== Dashboard Structure ====== */
.dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

/* NIVEAU 1 : KPIs + Filtres */
.dash-summary {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}

/* Grille KPIs */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.kpi-grid .kpi {
  grid-column: span 1;
}
.kpi-grid .mini-kpi {
  grid-column: span 2;
}

/* KPIs */
.kpi {
  background: var(--surface);
  border: 1px solid rgba(10,59,92,.10);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 20px;
  display: flex;
  gap: 16px;
  align-items: center;
}
.kpi-icon {
  width: 56px;
  height: 56px;
  border-radius: 0px;
  position: relative;
}
.kpi-icon.total { background: rgba(61,174,239,.16); }
.kpi-icon.male { background: rgba(10,59,92,.16); }
.kpi-icon.female { background: rgba(224,60,49,.16); }
.kpi-icon.ratio { background: rgba(242,140,40,.18); }

.kpi-value {
  font-size: 28px;
  font-weight: 980;
  letter-spacing: .2px;
  line-height: 1.2;
}
.kpi-label {
  font-size: 13px;
  color: rgba(10,59,92,.70);
  font-weight: 750;
  margin-top: 4px;
}

/* Mini KPIs */
.mini-kpi {
  background: var(--surface);
  border: 1px solid rgba(10,59,92,.10);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 18px 20px;
  display: flex;
  gap: 16px;
  align-items: center;
}
.mini-ico {
  width: 52px;
  height: 52px;
  border-radius: 0px;
  position: relative;
}
.mini-ico--list { background: rgba(61,174,239,.16); }
.mini-ico--pin { background: rgba(242,140,40,.18); }

.mini-title {
  font-size: 13px;
  font-weight: 850;
  color: rgba(10,59,92,.78);
  margin-bottom: 4px;
}
.mini-value {
  font-size: 24px;
  font-weight: 980;
  color: rgba(10,59,92,.92);
  line-height: 1.2;
}

/* Filtres */
.filters-card {
  background: var(--surface);
  border: 1px solid rgba(10,59,92,.10);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 20px;
}
.fg {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  position: relative;
}
.fg label {
  font-size: 13px;
  font-weight: 850;
  color: rgba(10,59,92,.85);
}
.fg select {
  height: 44px;
  border-radius: 0px;
  border: 1px solid rgba(10,59,92,.14);
  padding: 0 16px;
  font-size: 14px;
  font-weight: 650;
  color: rgba(10,59,92,.92);
  background: #fff;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none !important;
  padding-right: 40px;
}

.fg::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 38px;
  width: 20px;
  height: 20px;
  pointer-events: none;
  opacity: .85;
  background: rgba(10,59,92,.85);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M5.5 7.5 10 12l4.5-4.5 1.2 1.2L10 14.4 4.3 8.7z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M5.5 7.5 10 12l4.5-4.5 1.2 1.2L10 14.4 4.3 8.7z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.filters-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 7px;
}
#resetBtn {
  height: 44px;
  border: 0;
  border-radius: 0px;
  background: linear-gradient(135deg, var(--gh-orange), rgba(242,140,40,.78));
  color: #fff;
  font-weight: 950;
  font-size: 14px;
  cursor: pointer;
  transition: filter 0.2s ease;
}
#resetBtn:hover { filter: brightness(0.98); }
#scopeHint {
  border-radius: 0px;
  padding: 12px;
  background: rgba(242,140,40,.12);
  border: 1px solid rgba(242,140,40,.20);
  font-size: 13px;
  color: rgba(10,59,92,.75);
}

/* NIVEAU 2 : Spatial - Triple Layout */
.dash-spatial--triple {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  gap: 20px;
  min-height: 400px;
}

/* Cartes générales */
.card {
  background: var(--surface);
  border: 1px solid rgba(10,59,92,.10);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card-h {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(10,59,92,.08);
  background: #f8f9fa;
}
.card-h h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 950;
  color: var(--gh-deep);
}
.sub {
  margin:4px 0 0;
  font-size: 13px;
  color: rgba(10,59,92,.65);
  font-weight: 650;
}
.card-b {
  padding: 25px;
  flex: 1;
  position: relative;
}

/* Hauteurs spécifiques pour les cartes graphiques */
.spatial-pop .card-b,
.spatial-hf .card-b {
  height: 280px;
}

/* Carte */
.spatial-map-center {
  display: flex;
  flex-direction: column;
}
.map-shell--plain {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  flex: 1;
}
#djibMap {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* NIVEAU 3 : RM + Tables */
.dash-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.detail-wide .card-b {
  height: 300px;
}

/* Tables */
.tables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.table-wrap {
  overflow: auto;
  border-radius: var(--radius-md);
}
.t {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.t thead th {
  text-align: left;
  padding: 14px 16px;
  font-weight: 950;
  color: var(--gh-deep);
  border-bottom: 1px solid rgba(10,59,92,.10);
  background: #f8f9fa;
}
.t tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(10,59,92,.06);
  color: rgba(10,59,92,.85);
  font-weight: 650;
}
.t .num { text-align: right; }

/* Canvas Charts */
canvas {
  width: 100% !important;
  height: 100% !important;
  max-height: 400px;
}

/* =========================================================
   ICONES — pictogrammes visibles
   ========================================================= */
.kpi-icon::after,
.mini-ico::after {
  content: "";
  position: absolute;
  inset: 16px;
  opacity: .95;
  background: rgba(10,59,92,.90);
}

.kpi-icon.total::after {
  background: var(--gh-sky);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 11c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3ZM8 11c1.66 0 3-1.34 3-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3Zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5C15 14.17 10.33 13 8 13Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h7v-2.5c0-2.33-4.67-3.5-7-3.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 11c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3ZM8 11c1.66 0 3-1.34 3-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3Zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5C15 14.17 10.33 13 8 13Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h7v-2.5c0-2.33-4.67-3.5-7-3.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.kpi-icon.male::after {
  background: var(--gh-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12c2.21 0 4-1.79 4-4S14.21 4 12 4 8 5.79 8 8s1.79 4 4 4Zm0 2c-3.33 0-8 1.67-8 5v1h16v-1c0-3.33-4.67-5-8-5Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12c2.21 0 4-1.79 4-4S14.21 4 12 4 8 5.79 8 8s1.79 4 4 4Zm0 2c-3.33 0-8 1.67-8 5v1h16v-1c0-3.33-4.67-5-8-5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.kpi-icon.female::after {
  background: var(--gh-red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12c2.21 0 4-1.79 4-4S14.21 4 12 4 8 5.79 8 8s1.79 4 4 4Zm0 2c-3.33 0-8 1.67-8 5v1h16v-1c0-3.33-4.67-5-8-5Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12c2.21 0 4-1.79 4-4S14.21 4 12 4 8 5.79 8 8s1.79 4 4 4Zm0 2c-3.33 0-8 1.67-8 5v1h16v-1c0-3.33-4.67-5-8-5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.kpi-icon.ratio::after {
  background: var(--gh-orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 17h2v-7H3v7Zm4 0h2V7H7v10Zm4 0h2v-4h-2v4Zm4 0h2V9h-2v8Zm4 0h2V5h-2v12Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 17h2v-7H3v7Zm4 0h2V7H7v10Zm4 0h2v-4h-2v4Zm4 0h2V9h-2v8Zm4 0h2V5h-2v12Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.mini-ico--list::after {
  background: var(--gh-sky);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6h2v2H4V6Zm4 0h12v2H8V6ZM4 11h2v2H4v-2Zm4 0h12v2H8v-2ZM4 16h2v2H4v-2Zm4 0h12v2H8v-2Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6h2v2H4V6Zm4 0h12v2H8V6ZM4 11h2v2H4v-2Zm4 0h12v2H8v-2ZM4 16h2v2H4v-2Zm4 0h12v2H8v-2Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.mini-ico--pin::after {
  background: var(--gh-orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2c-3.31 0-6 2.69-6 6 0 4.5 6 14 6 14s6-9.5 6-14c0-3.31-2.69-6-6-6Zm0 8.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 5.5 12 5.5s2.5 1.12 2.5 2.5S13.38 10.5 12 10.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2c-3.31 0-6 2.69-6 6 0 4.5 6 14 6 14s6-9.5 6-14c0-3.31-2.69-6-6-6Zm0 8.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 5.5 12 5.5s2.5 1.12 2.5 2.5S13.38 10.5 12 10.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* =========================================================
   Responsive Design
   ========================================================= */
@media (max-width: 1200px) {
  .dash-summary {
    grid-template-columns: 1fr;
  }
  
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .dash-spatial--triple {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  
  .spatial-map-center {
    order: 1;
  }
  
  .spatial-pop {
    order: 2;
  }
  
  .spatial-hf {
    order: 3;
  }
  
  #djibMap {
    min-height: 400px;
  }
  
  .tables {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .pd-topbar-inner,
  .pd-hero-inner,
  .pd-surface {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .pd-topbar-inner {
    flex-wrap: wrap;
  }
  
  .kpi-grid {
    grid-template-columns: 1fr;
  }
  
  .pd-hero-title {
    font-size: 24px;
  }
  
  .card-b {
    padding: 16px;
  }
  
  .spatial-pop .card-b,
  .spatial-hf .card-b {
    height: 250px;
  }
  
  .detail-wide .card-b {
    height: 280px;
  }
  
  #djibMap {
    min-height: 350px;
  }
}

/* =========================================================
   PATCH — réduire les vides + agrandir la carte
   ========================================================= */

/* 1) Le bloc Résumé (KPI + Filtres) : éviter la colonne filtre "trop courte" */
.dash-summary{
  align-items: stretch;              /* au lieu de start */
}

.filters{
  align-self: stretch;
}

.filters-card{
  height: 100%;
}

/* 2) Spatial : donner plus de place à la carte et forcer les hauteurs cohérentes */
.dash-spatial--triple{
  grid-template-columns: 1fr 2.2fr 1fr;  /* carte plus large (était 1.6fr) */
  align-items: stretch;
  min-height: 520px;                     /* augmente la zone globale */
}

/* 3) La carte (centre) doit se comporter comme une "card" */
.spatial-map-center{
  background: var(--surface);
  border: 1px solid rgba(10,59,92,.10);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 4) Le conteneur map doit prendre toute la hauteur restante */
.map-shell--plain{
  flex: 1;
  display: flex;
  padding: 16px;                 /* petit padding interne (plus propre visuellement) */
}

/* 5) La carte elle-même : plus grande, et vraie hauteur */
#djibMap{
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 480px;             /* augmente la carte (était 400px) */
  border-radius: var(--radius-md);
}

/* 6) Optionnel : éviter que les charts paraissent "écrasés" vs la carte */
.spatial-pop .card-b,
.spatial-hf .card-b{
  height: 320px;                 /* était 280px */
}

/* 7) Responsive : garder la carte grande sur mobile */
@media (max-width: 1200px){
  .dash-spatial--triple{
    min-height: auto;
  }
  #djibMap{
    min-height: 420px;
  }
}

@media (max-width: 768px){
  #djibMap{
    min-height: 380px;
  }
  .spatial-pop .card-b,
  .spatial-hf .card-b{
    height: 280px;
  }
}

/* =========================================================
   HEADER DEMOGRAPHIE — même style que la page Accueil
   (sans modifier le HTML existant)
   ========================================================= */

/* Variables proches de l'accueil */
:root{
  --home-bg: #F8FAFC;
  --home-border: #E2E8F0;
  --home-shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
  --home-shadow: 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -1px rgba(0,0,0,.06);
  --home-radius: 8px;
}

/* Fond global comme accueil (optionnel, mais cohérent) */
body.demo-page{
  background: var(--home-bg) !important;
}

/* Topbar = header accueil */
.pd-topbar{
  background: #fff;
  border-bottom: 1px solid var(--home-border);
  box-shadow: var(--home-shadow-sm);
  backdrop-filter: none;               /* comme accueil */
}

/* Container comme .container */
.pd-topbar-inner{
  max-width: 1200px;                   /* accueil = 1200 */
  height: 72px;                        /* accueil */
  padding: 0 20px;                     /* accueil */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Brand align */
.pd-brand{
  gap: 12px;                           /* accueil */
}

/* Logo SANS encadré (cliquable) */
.pd-logo-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  text-decoration: none;
}
.pd-logo{
  width: auto;
  height: 48px;                        /* accueil */
  object-fit: contain;
  display: block;
}
.pd-logo-link:hover .pd-logo{
  transform: none;                     /* pas d'effet "cadre" */
  filter: none;
  opacity: .9;                         /* hover discret */
}

/* Titres comme accueil */
.pd-brand-title{
  font-size: 20px;
  font-weight: 700;
  color: var(--gh-deep);
  line-height: 1.2;
}
.pd-brand-subtitle{
  font-size: 12px;                     /* proche accueil (0.75rem) */
  color: rgba(160,160,160,1);          /* gris moyen */
  font-weight: 500;
}

/* Menu = pills comme accueil */
.pd-menu{
  gap: 4px;
}

.pd-menu-link{
  display: inline-block;
  padding: 10px 20px;                  /* 0.625rem 1.25rem */
  border-radius: var(--home-radius);
  font-weight: 600;
  font-size: 15px;                     /* ~0.9375rem */
  color: var(--text);
  transition: all .2s ease;
}

.pd-menu-link:hover{
  background: rgba(242,140,40,.10);
  color: var(--gh-orange);
}

/* Active = gradient comme accueil */
.pd-menu-link.is-active{
  background: linear-gradient(135deg, var(--gh-orange), #FF9E40);
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(242,140,40,.30);
}

/* Bouton Explorer (si tu en as un) */
.pd-topbar .btn.primary,
.pd-topbar .pd-btn-explorer{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--home-radius);
  border: none;
  background: var(--gh-orange);
  color: #fff;
  box-shadow: 0 4px 12px rgba(242,140,40,.25);
  text-decoration: none;
  cursor: pointer;
  transition: all .2s ease;
}
.pd-topbar .btn.primary:hover,
.pd-topbar .pd-btn-explorer:hover{
  background: #E07C20;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(242,140,40,.30);
}

/* Responsive header (comme accueil) */
@media (max-width: 768px){
  .pd-topbar-inner{
    flex-wrap: wrap;
    height: auto;
    padding: 16px;
    gap: 12px;
  }
  .pd-menu{
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
}


/* =========================================================
   LÉGENDE CARTE LEAFLET — style premium
   ========================================================= */
.map-legend{
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 0px;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  padding: 12px 14px;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size: 13px;
  color: #334155;
}

.map-legend .legend-title{
  font-weight: 800;
  margin-bottom: 8px;
  font-size: 14px;
  color: #0f172a;
}

.legend-item{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.legend-item:last-child{
  margin-bottom: 0;
}

.legend-swatch{
  width: 14px;
  height: 14px;
  border-radius: 0px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
  flex-shrink: 0;
}

.legend-label{
  white-space: nowrap;
}

/* =========================================================
   RESPONSIVE DESIGN - SEULEMENT LES BREAKPOINTS
   ========================================================= */

/* ORDINATEUR (défaut) - Styles déjà présents dans votre CSS */

/* TABLETTE (768px à 1024px) */
@media (max-width: 1024px) {
  .pd-topbar-inner {
    flex-wrap: wrap;
    padding: 14px 20px;
  }
  
  .pd-hero-title {
    font-size: 26px;
  }
  
  .dash-summary {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .kpi-grid .mini-kpi {
    grid-column: span 1;
  }
  
  .dash-spatial--triple {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    min-height: auto;
  }
  
  .spatial-map-center {
    order: 1;
  }
  
  .spatial-pop {
    order: 2;
  }
  
  .spatial-hf {
    order: 3;
  }
  
  #djibMap {
    min-height: 400px;
  }
  
  .tables {
    grid-template-columns: 1fr;
  }
  
  .pd-surface,
  .pd-hero-inner {
    padding: 0 20px;
  }
}

/* TÉLÉPHONE (moins de 768px) */
@media (max-width: 767px) {
  .pd-topbar-inner {
    flex-direction: column;
    text-align: center;
    padding: 12px 16px;
    gap: 12px;
  }
  
  .pd-brand {
    flex-direction: column;
    gap: 8px;
  }
  
  .pd-menu {
    justify-content: center;
    width: 100%;
  }
  
  .pd-hero-title {
    font-size: 22px;
  }
  
  .pd-hero-subtitle {
    font-size: 13px;
  }
  
  .kpi-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .kpi {
    flex-direction: column;
    text-align: center;
    padding: 16px;
  }
  
  .mini-kpi {
    flex-direction: column;
    text-align: center;
    padding: 16px;
  }
  
  .card-h,
  .card-b {
    padding: 16px;
  }
  
  .spatial-pop .card-b,
  .spatial-hf .card-b {
    height: 250px;
  }
  
  .detail-wide .card-b {
    height: 250px;
  }
  
  #djibMap {
    min-height: 350px;
  }
  
  .pd-tab {
    padding: 8px 16px;
    font-size: 12px;
  }
  
  .t thead th,
  .t tbody td {
    padding: 10px 12px;
    font-size: 13px;
  }
  
  .pd-surface,
  .pd-hero-inner {
    padding: 0 16px;
  }
}

/* PETIT TÉLÉPHONE (moins de 480px) */
@media (max-width: 480px) {
  .pd-hero-title {
    font-size: 20px;
  }
  
  .pd-menu-link {
    padding: 6px 12px;
    font-size: 12px;
  }
  
  .kpi-value {
    font-size: 24px;
  }
  
  .mini-value {
    font-size: 20px;
  }
  
  .spatial-pop .card-b,
  .spatial-hf .card-b {
    height: 220px;
  }
  
  .detail-wide .card-b {
    height: 220px;
  }
  
  #djibMap {
    min-height: 300px;
  }
  
  .t {
    font-size: 12px;
  }
  
  .t thead th,
  .t tbody td {
    padding: 8px 10px;
  }
}

/* MODE PAYSAGE (mobile et tablette) */
@media (max-height: 600px) and (orientation: landscape) {
  .pd-topbar-inner {
    padding: 8px 16px;
  }
  
  .pd-hero-title {
    font-size: 20px;
  }
  
  .spatial-pop .card-b,
  .spatial-hf .card-b {
    height: 200px;
  }
  
  #djibMap {
    min-height: 280px;
  }
}
/* ===== PORTAIL 100% ANGLES DROITS ===== */
:root {
  --radius: 0;
  --radius-lg: 0;
}

/* Sécurité : écrasement explicite des cartes */
.hero-card,
.theme-card,
.map-card,
.source-box,
header,
.nav-toggle,
.btn {
  border-radius: 0 !important;
}

/* =========================================================
   FORCE ANGLES DROITS PARTOUT (override total)
   ========================================================= */

button,
a,
.pd-menu-link,
.pd-tab,
#resetBtn,
.btn,
.card,
.kpi,
.mini-kpi,
.filters-card,
.spatial-map-center,
.map-shell--plain,
#scopeHint {
  border-radius: 0 !important;
}

/* ====== Titre bloc filtres ====== */
.filters-title {
  margin: 0 0 18px 0;
  font-size: 16px;
  font-weight: 950;
  color: var(--gh-deep);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(10,59,92,.10);
}