/* 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 */
        }

        .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;
}
/* Toujours caché le taux : */
/* .kpi.rule.cardish .lbl:contains("Taux de change"),
#kpi-taux {
  display: none !important;
} */