/* base CSS */
body{
  margin:0; padding:0; height:100vh; display:flex; position:relative;
}
#map{ width:100%; height:100%; }

/* Slide Right — sidebar élargie */
#sidebar{
  width: 380px;                 /* ← élargie */
  height: 100%;
  background: #DFDCE3;          /* sidebar DROITE */
  padding: 20px;
  box-shadow: -2px 0 5px rgba(0,0,0,0.1);
  overflow-y: auto;
  position: fixed;
  top: 0;
  right: -400px;                 /* ← hors champ (20px marge) */
  transition: right 0.1s ease-in-out;
  z-index: 5;
}
#sidebar.active{ right: 0; }

#sidebar h2{
  color:#607476;
  font-family:'verdemoderna',sans-serif;
  font-size:1em;
  font-weight:normal;
  text-transform:uppercase;
  text-align:center;
}

/* Graphe un peu plus grand */
#chart-container{
  position:relative;
  width:100%;
  height:360px;                 /* ← + grand qu’avant */
}

.button{
  margin:5px 0; padding:10px;
  background-color:#235860; color:#fff;
  border:none; border-radius:5px; cursor:pointer; text-align:center;
}
.button:hover{ background-color:#718E90; }

#close-sidebar{ margin-top:10px; background-color:#d9534f; }
#close-sidebar:hover{ background-color:#b52b27; }

#toggle-sidebar{
  position:fixed; top:0; right:0;
  width:20px; height:100%;
  background:#235860; color:#fff;
  display:flex; justify-content:center; align-items:center;
  cursor:pointer; z-index:10;
  border-left:2px solid #0D2E31;
  transition:right 0.1s ease;
}
#toggle-sidebar:hover{ background:#718E90; }
#toggle-sidebar span{ transform:rotate(90deg); font-size:20px; user-select:none; }

/* Suit la nouvelle largeur de la sidebar */
#toggle-sidebar.active{ right: 400px; } /* ← même offset que #sidebar right négatif */

/* Lien histo */
.histo{ cursor:pointer; }

/* === KPIs empilés === */

#kpi-box{
  display: grid;
  grid-template-columns: 1fr; /* 1 KPI par ligne */
  gap: 10px;
  margin: 0 5px 12px 10px;   
}

.kpi-card{
  border: 1px solid #d8dee9;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.kpi-label{
  font-size: 12px;
  color: #6b7280;
  letter-spacing: .2px;
  text-align: center;
}

.kpi-value{
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  margin-top: 4px;
  text-align: center;
}

.kpi-big .kpi-value{
  font-size: 28px;
}

/* Bouton "Voir le dashboard" centré sous le logo */
.menu-cta-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 8px 10px 2px;
}
.menu-cta{
  background:#8427F5;        /* jaune doux qui ressort */
  color:#003040;
  border:0;
  border-radius:8px;
  padding:8px 14px;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.3px;
  cursor:pointer;
  box-shadow:0 1px 0 rgba(0,0,0,.1), inset 0 -1px 0 rgba(0,0,0,.08);
}
.menu-cta:hover{ background:#350570; }
.menu-cta:active{ transform:translateY(1px); }