/* CSS pour améliorer la présentation */
/* <!-- # Generated by HDMConsulting - Henry MUKONKOLE PAMBA DISASHI ! --> */        
        :root{
          --primary:#1a2a6b;
          --accent:#5a67d8;
          --muted:#8a94a6;
          --band:#ebeff5;
          --band-border:#dfe6ef;
          --rule:#273b89;
          --table-head:#064ca7;
          --chart-h: clamp(120px, 20vh, 180px);
        }
        .wrap{padding-inline:.5rem;}
        .container-xl.wrap{margin-top:1rem!important;margin-bottom:1rem!important}
        .hero-title{font-weight:800;color:var(--primary);font-size:clamp(20px,2.6vw,28px);line-height:1.1;margin:0;}
        .title-band{background:var(--band);border:1px solid var(--band-border);border-radius:.5rem;padding:.5rem .75rem;}
        .title-band .filters-min label{font-size:11px;color:var(--muted);margin-bottom:.1rem}
        .title-band .filters-min .form-select{height:30px;padding:.2rem .45rem;font-size:12px}
        .title-redline{height:10px;width:2px;background:#c21f1f;display:inline-block;margin-right:.3rem;border-radius:2px}
        .filters .form-label{font-size:11px;margin-bottom:.15rem}
        .filters .form-select{height:34px;padding:.25rem .5rem;font-size:12px}
        .dropdown .btn{height:34px;padding:.25rem .5rem;font-size:12px}
        .filters .row{row-gap:.4rem}
        .kpi{padding:.6rem .75rem}
        .kpi .lbl{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:.05rem}
        .kpi .val{font-weight:800;color:#000;font-size:clamp(16px,2.2vw,22px)}
        .kpi.rule{border-left:4px solid var(--rule);}
        .kpi.alt .val{font-size:clamp(16px,2.1vw,20px)}
        .kpi .city{font-size:11px;color:var(--muted);}
        .cardish{border:1px solid #e5eaf1;border-radius:.6rem;box-shadow:0 .5px 1px rgba(0,0,0,.03);background:#fff}
        .chart-card{padding:.6rem!important}
        .chart-card canvas{width:100%!important;height:var(--chart-h)!important}
        .chart-toggle .btn{--bs-btn-padding-y:.2rem;--bs-btn-padding-x:.5rem;font-size:.8rem}
        .chart-toggle .btn.active{pointer-events:none}
        .table-wrap{overflow-x:auto}
        .table thead th{background:var(--table-head);color:#fff!important}
        .table td,.table th{vertical-align:middle;font-size:13px;padding:.45rem .5rem}
        .table.table-sm td,.table.table-sm th{font-size:12px;padding:.35rem .45rem}
        .box-table{max-height:280px;overflow:auto}
        .sites-card .fw-bold{font-size:.9rem}
        .sites-card .small{font-size:.75rem}
        .sites-card .box-table{max-height:200px; overflow:auto}
        .sites-card table.table-sm th, .sites-card table.table-sm td{font-size:11px; padding:.25rem .4rem}
        #sites-controls{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-top:.35rem}
        #sites-pagination .btn{--bs-btn-padding-y:.15rem;--bs-btn-padding-x:.4rem;font-size:.75rem}
        #bloc-zones .zone-item{display:flex;justify-content:space-between;align-items:center;padding:.3rem .45rem;border:1px solid #eef2f7;border-radius:.5rem;font-size:12px}
        #bloc-zones .zone-item .val{font-weight:700}
        @media (max-width:575.98px){
          #table-produits thead{display:none}
          #table-produits{border:0}
          #table-produits tbody tr{display:block;margin-bottom:.65rem;border:1px solid #e6ebf2;border-radius:.6rem;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04);background:#fff}
          #table-produits tbody td{display:grid;grid-template-columns:42% 1fr;gap:.35rem;align-items:start;padding:.55rem .7rem!important;border:0!important;border-bottom:1px solid #f1f3f5!important;font-size:12px}
          #table-produits tbody td:last-child{border-bottom:0!important}
          #table-produits tbody td::before{content:attr(data-label);font-weight:600;opacity:.8;font-size:11px}
        }
        .auto-compact{--chart-h: clamp(110px, 18vh, 170px)}
        .header-compact { column-gap: .5rem; row-gap: .25rem; }
        .btn.btn-xs{
          --bs-btn-padding-y:.15rem; --bs-btn-padding-x:.4rem;
          --bs-btn-font-size:.75rem; --bs-btn-border-radius:.2rem;
          line-height:1.1;
        }
        @media (max-width: 576px){
          .header-compact { flex-wrap: wrap; }
          .header-compact img { height:48px; }
        }
        #chart-chocs-semaine {
          width: 100% !important;
          height: 350px !important;   /* tu peux mettre 400px ou plus */
        }

        /* Bloc droite (tableau par site) */
        #page-chocs .table-wrap {
          max-height: none !important;
          height: 350px !important; /* même hauteur que le graphique */
          overflow-y: auto;
        }

        /* Bloc du haut : Evolution prix moyen VS Prix moyen par site */
        #chart-evol {
          width: 100% !important;
          height: 230px !important;   /* tu peux ajuster selon ton besoin */
        }

        #bloc-zones,
        #tbody-sites {
          height: 50px !important;   /* même hauteur que le graphique */
          overflow-y: auto;
        }

        /* Bloc du bas : Variation prix par semaine VS Variation prix moyen par site */
        #chart-chocs-semaine {
          width: 100% !important;
          height: 350px !important;   /* tu peux mettre 400px pour harmoniser */
        }

        #tbody-chocs-sites {
          height: 350px !important;   /* même hauteur que le graphique */
          overflow-y: auto;
        }

        #chart-evol {
          width: 100% !important;
          height: 315px !important;   /* ou plus selon tes besoins */
          display: block;
          margin: 0 auto;             /* centre horizontalement */
        }

        .chart-card {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;   /* aligne en bas */
          align-items: center;         /* centre horizontalement */
        }

        .chart-card {
            min-height: 360px;
          }

          #chart-evol {
            width: 100% !important;
            height: 100% !important;
          }


        .progress {
            display: block;
            width: 100%;
            height: 20px;
            border-radius: 12px;
            background: #f1f3f5;
            overflow: hidden;
          }

          .progress-bar {
            height: 100%;
            line-height: 20px;
            text-align: center;
            color: #fff;
            font-weight: bold;
            background: #f5b300;
            transition: width 0.6s ease;
          }

/* <!-- # Generated by HDMConsulting - Henry MUKONKOLE PAMBA DISASHI ! --> 
PAGE: GLOBALE 
*/   
#page-global .title-band { margin-bottom:.5rem !important; }
#page-global .title-band .hero-title { font-size:1.05rem; margin:0; }
#page-global .title-band .title-redline { width:.4rem; height:1.05rem; margin-right:.4rem; }

#page-global .filters-min .form-label,
#page-global .filters .form-label { margin-bottom:.15rem; font-size:.78rem; color:#6b7280; }

#page-global .form-select { padding:.25rem .5rem; font-size:.85rem; }
#page-global .filters-min .form-select,
#page-global .filters .form-select { height: calc(1.7rem + 2px); }

#page-global .filters-min { gap:.5rem; }
#page-global .filters .row { margin-top:.35rem; }
#page-global .filters .col-6, 
#page-global .filters .col-12, 
#page-global .filters .col-md-2 { padding-right:.35rem; padding-left:.35rem; }

#page-global .kpi.cardish { padding:.6rem .7rem; }
#page-global .kpi .lbl { font-size:.78rem; margin-bottom:.15rem; }
#page-global .kpi .val { font-size:1.05rem; line-height:1.1; }
#page-global .kpi .city { font-size:.78rem; margin-top:.15rem; }

#page-global .btn-responsive { padding:.28rem .55rem; font-size:.85rem; border-radius:.35rem; }
#page-global .tabs-row { margin-bottom:.5rem; }

#page-global .cardish { padding:.6rem .7rem; }
#page-global .chart-card { padding:.6rem .7rem; }
#page-global .chart-card .fw-bold { font-size:.92rem; }
#page-global .chart-toggle .btn { padding:.2rem .45rem; font-size:.8rem; }

#page-global .box-table table { font-size:.85rem; }
#page-global .sites-card .fw-bold { font-size:.9rem; }

#page-global .row.g-2 { --bs-gutter-x:.5rem; --bs-gutter-y:.5rem; }
#page-global .row.g-1 { --bs-gutter-x:.35rem; --bs-gutter-y:.35rem; }
#page-global .mb-2 { margin-bottom:.5rem !important; }
#page-global .mt-2 { margin-top:.5rem !important; }
#page-global .gap-2 { gap:.5rem !important; }
#page-global .gap-1 { gap:.35rem !important; }

#page-global #selection-banner-global { margin-bottom:.35rem !important; font-size:.9rem; }

#page-global #btn-unite { padding:.25rem .5rem; font-size:.85rem; }
#page-global #dd-unites { max-height:180px !important; }

/* PAGE: GLOBALE */ 
#page-chocs .title-band { margin-bottom:.5rem !important; }
#page-chocs .hero-title { font-size:1.05rem; margin:0; }
#page-chocs .title-redline { width:.4rem; height:1.05rem; margin-right:.4rem; }

#page-chocs .mb-2 { margin-bottom:.5rem !important; }
#page-chocs .mt-2 { margin-top:.45rem !important; }
#page-chocs .row.g-2 { --bs-gutter-x:.5rem; --bs-gutter-y:.5rem; }

#page-chocs .cardish { padding:.6rem .7rem; }
#page-chocs .chart-card { padding:.6rem .7rem; }
#page-chocs .chart-card .fw-bold { font-size:.92rem; }

#page-chocs #selection-banner-chocs { margin:.35rem 0 !important; font-size:.9rem; }

#page-chocs .progress { height:8px !important; }
#page-chocs #chocs-evol-val { font-size:clamp(14px,2vw,20px) !important; }

#page-chocs .lbl { font-size:.78rem; color:#6b7280; margin-bottom:.1rem; }
#page-chocs .val { font-size:1.05rem; line-height:1.1; }
#page-chocs #chocs-zone-1, 
#page-chocs #chocs-zone-2 { padding:.5rem .6rem !important; }

#page-chocs .table-wrap { max-height:300px; }
#page-chocs table { font-size:.85rem; }
#page-chocs thead th { padding:.35rem .5rem; }
#page-chocs tbody td { padding:.35rem .5rem; vertical-align:middle; }

/* SITUATION GENERALE Harmonisation des en-têtes */
.th-left, .th-center, .th-right {
  background:#064ca7;
  color:#fff;
  vertical-align:middle;
}
.th-left   { text-align:left   !important; }
.th-center { text-align:center !important; }
.th-right  { text-align:right  !important; }

/* Table alignée */
#tbody-sites td:first-child {
  text-align:left;
}
#tbody-sites td:last-child {
  text-align:right;
}

/* CHOCS Contrôles en bas bien alignés */
#sites-controls {
  border-top:1px solid #e5e7eb;
  padding-top:6px;
}

/* En-têtes tableaux */
.th-left, .th-right {
  background:#064ca7;
  color:#fff;
  vertical-align:middle;
}
.th-left  { text-align:left  !important; }
.th-right { text-align:right !important; }
.th-center { text-align:center !important; }

/* Corps du tableau variation prix */
#tbody-chocs-sites td:first-child {
  text-align:left;
}
#tbody-chocs-sites td:not(:first-child) {
  text-align:right;
}
#tbody-chocs-sites td:not(:first-child) {
  text-align:center;
}

/* ================================
   FIX GRAPHIQUE – Situation globale
   (sans impact ailleurs)
================================ */

/* Conteneur du graphique */
#page-global .chart-card {
  position: relative;
  height: 340px;          /* ✅ hauteur fixe et maîtrisée */
  min-height: 340px;
  display: block;         /* ❌ stop flex */
}

/* Canvas Chart.js */
#page-global #chart-evol {
  width: 100% !important;
  height: 100% !important; /* Chart.js remplit le conteneur */
  max-height: 340px;
  display: block;
}

/* ❌ Neutralisation des règles conflictuelles */
#page-global .chart-card {
  justify-content: unset !important;
  align-items: unset !important;
}

#page-global .chart-card canvas {
  height: 100% !important;
}

/* ================================
   DASHBOARD – CHOCS DE PRIX
   On supprime UNIQUEMENT :
   - Titre évolution (%)
   - Barre de progression
   - Valeur affichée
   ================================ */

/* Cache le bloc "Évolution de prix (%) KINSHASA" */
#page-chocs h3,
#page-chocs .fw-bold:has(+ .progress) {
  display: none !important;
}

/* Cache la barre de progression */
#page-chocs .progress {
  display: none !important;
}

/* Cache la valeur -0,02 % */
#page-chocs #chocs-evol-val {
  font-weight: 700;
  margin-top: 4px;
}

/* Supprime l’espace vide laissé par ces éléments */
#page-chocs .cardish:has(.progress) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: auto !important;
}

/* =========================================================
   DASHBOARD – Évolution de prix (%) (AJUSTEMENT GRAPHIQUE)
   ========================================================= */

/* Conteneur du bloc évolution */
#page-chocs .evolution-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Titre : on le remonte légèrement */
#page-chocs .evolution-card h5,
#page-chocs .evolution-card .fw-bold {
  margin-bottom: 4px !important;
  margin-top: 0 !important;
}

/* Barre de progression : juste sous le titre */
#page-chocs .evolution-card .progress {
  height: 8px !important;
  margin-top: 2px !important;
  margin-bottom: 6px !important;
}

/* ❌ Supprimer l’affichage du texte -0,02 % */
#page-chocs #chocs-evol-val {
  display: none !important;
}

/* Empêcher l’étirement vertical du bloc */
#page-chocs .evolution-card {
  min-height: auto !important;
  height: auto !important;
}

/* ================================
   FIX ÉVOLUTION DE PRIX (%) – DASHBOARD
   (ne touche qu’au graphique chocs)
================================ */

/* Conteneur du bloc évolution */
#page-chocs .chart-card.evolution-prix {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;                /* espace maîtrisé */
  padding-top: 8px;
}

/* Titre "Évolution de prix (%) KINSHASA" */
#page-chocs .chart-card.evolution-prix h5,
#page-chocs .chart-card.evolution-prix .fw-bold {
  margin-bottom: 4px !important;
  margin-top: 0 !important;
  line-height: 1.1;
  text-align: center;
}

/* Barre de progression JUSTE SOUS le titre */
#page-chocs .chart-card.evolution-prix .progress {
  margin-top: 2px !important;
  margin-bottom: 6px !important;
  height: 10px;
}

/* Valeur % (-0,02 %) */
#page-chocs .chart-card.evolution-prix #chocs-evol-val {
  margin-top: 0 !important;
  font-weight: 700;
  text-align: center;
}

/* Empêche l’étirement vertical inutile */
#page-chocs .chart-card.evolution-prix {
  min-height: unset !important;
  height: auto !important;
}

/* ===============================
   CHOCS – Évolution de prix (%)
   Correction layout graphique
   =============================== */

/* 1️⃣ Carte évolution : réduire l'espace vertical */
#page-chocs #chocs-evolution-card {
  padding-top: 12px;
  padding-bottom: 14px;
}

/* 2️⃣ Remonter légèrement le titre */
#page-chocs #chocs-evol-title {
  margin-bottom: 8px !important;
  margin-top: 0 !important;
  text-align: center;
}

/* 3️⃣ Supprimer l’affichage du -0,02 % */
#page-chocs #chocs-evol-val {
  display: none !important;
}

/* ✅ FIX barre de progression CHOCS */
#page-chocs .progress {
  display: flex !important;
  height: 22px;
  border-radius: 12px;
  background: #f1f3f5;
  overflow: hidden;
}

#page-chocs .progress-bar {
  height: 100%;
  display: block;
}

/* ===============================
   DASHBOARD – ÉVOLUTION DE PRIX
   (graphique + barre uniquement)
   =============================== */

/* Bloc global évolution */
.chocs-evol-block {
  display: flex;
  flex-direction: column;
  gap: 8px;                 /* espace titre → barre */
}

/* Titre : on le remonte légèrement */
.chocs-evol-title {
  margin: 0;
  padding: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a2a6b;
  line-height: 1.2;
}

/* Barre de progression */
.chocs-progress {
  height: 22px;
  border-radius: 12px;
  background: #f1f3f5;
  overflow: hidden;
}

/* Barre interne */
#chocs-gauge {
  height: 100%;
  border-radius: 12px;
  background: #1f6fb2;              /* bleu stable */
  transition: width 0.6s ease;
}

/* ❌ SUPPRESSION du texte flottant (-0,02 %) isolé */
#chocs-evol-val {
  display: none !important;
}


/* ===============================
   FIX BARRE DE PROGRESSION CHOCS
   =============================== */

/* 1️⃣ On libère l'espace vertical */
#page-chocs .chart-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* ✅ AU LIEU DE flex-end */
  align-items: stretch;
  gap: 10px;
}

/* 2️⃣ Le titre remonte légèrement */
#page-chocs .chart-card .fw-bold {
  margin-bottom: 4px;
}

/* 3️⃣ La barre est bien visible */
#page-chocs .progress {
  width: 100%;
  height: 22px;
  border-radius: 12px;
  background: #f1f3f5;
  overflow: hidden;
}

/* 4️⃣ La valeur % juste sous la barre */
#chocs-evol-val {
  margin-top: 6px;
  text-align: left;
}

/* 5️⃣ Le canvas ne vole plus l'espace */
#page-chocs canvas {
  flex: 1 1 auto;
  max-height: 260px;
}

/* ===============================
   FIX BARRE DE PROGRESSION CHOCS
   =============================== */

#page-chocs .progress {
  height: 18px !important;        /* visibilité */
  margin-top: 12px;
  margin-bottom: 10px;
  background-color: #e9ecef;
  border-radius: 10px;
}

#page-chocs .progress-bar {
  height: 100%;
  min-width: 2%;                  /* évite 0% invisible */
  transition: width 0.6s ease;
}

body {
  font-family: "Inter", "Roboto", "Segoe UI", Arial, sans-serif;
}

.section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2d3d;
}

.chart-card {
  height: 320px;
}

.chart-card canvas { height: 260px !important; width: 100% !important; }

.chart-card canvas {
  min-height: 320px;
}

.chart-card .fw-bold {
  text-align: center;
  color: #1f3c88;
  margin-bottom: 10px;
}

/* ===============================
   TITRES DE SECTIONS – UNIFIÉS
   =============================== */
#page-villes .title-redline { width:.4rem; height:1.05rem; margin-right:.4rem; }
.section-title {
  font-family: "Inter", "Roboto", "Segoe UI", Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a2a6b;          /* même bleu que Situation globale */
  line-height: 1.2;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .4rem;
}

#page-global .section-title,
#page-chocs .section-title,
#page-villes .section-title {
  font-family: "Inter", "Roboto", "Segoe UI", Arial, sans-serif !important;
}