/* ═══════════════════════════════════════════════════════════
   Reproduction de l'interface Power BI Service
   Utilisée uniquement par demo.html
   ═══════════════════════════════════════════════════════════ */

.pbi{
  --pbi-font:'Segoe UI','Segoe UI Web (West European)',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',Arial,sans-serif;
  --pbi-chrome:#F3F2F1;      /* barres d'application */
  --pbi-canvas:#F5F5F5;      /* fond du rapport */
  --pbi-viz:#FFFFFF;         /* fond d'un visuel */
  --pbi-line:#E1DFDD;        /* bordures */
  --pbi-ink:#252423;         /* texte principal */
  --pbi-ink2:#605E5C;        /* texte secondaire */
  --pbi-ink3:#A19F9D;        /* texte tertiaire */
  --pbi-blue:#0078D4;        /* sélection Microsoft */
  --pbi-yellow:#F2C811;      /* jaune Power BI */
  --pbi-hover:#EDEBE9;
  font-family:var(--pbi-font);
  color:var(--pbi-ink);
  border:1px solid #D2D0CE;
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 8px 34px rgba(0,0,0,.13);
  background:var(--pbi-chrome);
  max-width:1180px;
  margin:0 auto;
  -webkit-font-smoothing:antialiased;
}

/* ── Barre d'application ── */
.pbi-chrome{display:flex;align-items:center;gap:.9rem;padding:.5rem .85rem;
  background:var(--pbi-chrome);border-bottom:1px solid var(--pbi-line)}
.pbi-logo{width:19px;height:19px;flex-shrink:0;border-radius:2px;
  background:linear-gradient(135deg,var(--pbi-yellow),#E8B900);
  display:flex;align-items:center;justify-content:center}
.pbi-logo::before{content:'';width:9px;height:9px;
  background:repeating-linear-gradient(90deg,#3B3B3B 0 2px,transparent 2px 3px)}
.pbi-name{font-size:.83rem;font-weight:600;color:var(--pbi-ink);white-space:nowrap}
.pbi-sep{width:1px;height:16px;background:var(--pbi-line)}
.pbi-menu{display:flex;gap:.15rem;flex-wrap:wrap}
.pbi-menu span{font-size:.74rem;color:var(--pbi-ink2);padding:.28rem .5rem;border-radius:2px;cursor:default}
.pbi-menu span:hover{background:var(--pbi-hover)}
.pbi-refresh{margin-left:auto;font-size:.7rem;color:var(--pbi-ink2);display:flex;align-items:center;gap:.35rem;white-space:nowrap}
.pbi-refresh svg{width:12px;height:12px;stroke:var(--pbi-ink2);fill:none;stroke-width:1.6}

/* ── Corps : canvas + volet filtres ── */
.pbi-main{display:flex;align-items:stretch;background:var(--pbi-canvas)}
.pbi-canvas{flex:1;padding:10px;display:grid;gap:10px;
  grid-template-columns:190px 1fr 1fr;
  grid-template-rows:auto auto auto;min-width:0}

/* ── Conteneur de visuel ── */
.viz{background:var(--pbi-viz);border:1px solid var(--pbi-line);border-radius:2px;
  display:flex;flex-direction:column;min-width:0;position:relative;transition:box-shadow .15s}
.viz:hover{box-shadow:0 1px 6px rgba(0,0,0,.11)}
.viz-head{display:flex;align-items:center;justify-content:space-between;
  padding:.55rem .7rem .3rem;gap:.5rem}
.viz-title{font-size:.76rem;font-weight:600;color:var(--pbi-ink);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viz-icons{display:flex;gap:.15rem;opacity:0;transition:opacity .15s;flex-shrink:0}
.viz:hover .viz-icons{opacity:1}
.viz-icons button{background:none;border:none;padding:2px;cursor:pointer;border-radius:2px;
  display:flex;align-items:center;justify-content:center;color:var(--pbi-ink2)}
.viz-icons button:hover{background:var(--pbi-hover);color:var(--pbi-ink)}
.viz-icons svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.7}
.viz-body{flex:1;padding:0 .7rem .6rem;min-height:0;display:flex;flex-direction:column}

/* ── Slicers ── */
.slicer{grid-row:span 3}
.slicer-group{margin-bottom:1rem}
.slicer-label{font-size:.66rem;font-weight:600;color:var(--pbi-ink2);text-transform:uppercase;
  letter-spacing:.03em;margin-bottom:.35rem}
.slicer-item{display:flex;align-items:center;gap:.45rem;padding:.24rem .2rem;cursor:pointer;
  border-radius:2px;font-size:.76rem;color:var(--pbi-ink);user-select:none}
.slicer-item:hover{background:var(--pbi-hover)}
.slicer-box{width:13px;height:13px;border:1.5px solid #8A8886;border-radius:2px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;background:#fff;transition:all .12s}
.slicer-item.on .slicer-box{background:var(--pbi-blue);border-color:var(--pbi-blue)}
.slicer-item.on .slicer-box::after{content:'';width:6px;height:3px;border-left:1.6px solid #fff;
  border-bottom:1.6px solid #fff;transform:rotate(-45deg) translateY(-1px)}
.slicer-tiles{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.slicer-tile{border:1px solid var(--pbi-line);background:#fff;border-radius:2px;
  padding:.32rem;font-size:.74rem;color:var(--pbi-ink);cursor:pointer;text-align:center;
  font-family:var(--pbi-font);transition:all .12s}
.slicer-tile:hover{background:var(--pbi-hover)}
.slicer-tile.on{background:var(--pbi-blue);border-color:var(--pbi-blue);color:#fff;font-weight:600}

/* ── Cartes KPI ── */
.kpis{grid-column:2 / span 2;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kpi{background:var(--pbi-viz);border:1px solid var(--pbi-line);border-radius:2px;
  padding:.7rem .8rem;display:flex;flex-direction:column;justify-content:center;min-width:0}
.kpi-l{font-size:.68rem;color:var(--pbi-ink2);margin-bottom:.15rem;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.kpi-v{font-size:1.45rem;font-weight:600;color:var(--pbi-ink);line-height:1.15;letter-spacing:-.01em}
.kpi-d{font-size:.68rem;margin-top:.15rem;display:flex;align-items:center;gap:.2rem}
.kpi-d.up{color:#107C10}.kpi-d.dn{color:#A4262C}.kpi-d.nt{color:var(--pbi-ink2)}

/* ── Graphiques ── */
.viz-chart{grid-column:2}
.viz-donut{grid-column:3}
.chart-wrap{position:relative;flex:1;min-height:172px}
.viz-table{grid-column:2}
.viz-bars{grid-column:3}

/* ── Tableau avec mise en forme conditionnelle ── */
.pbi-tbl{width:100%;border-collapse:collapse;font-size:.74rem}
.pbi-tbl th{text-align:left;font-weight:600;color:var(--pbi-ink2);padding:.32rem .4rem;
  border-bottom:1px solid var(--pbi-line);font-size:.7rem;white-space:nowrap}
.pbi-tbl th:not(:first-child){text-align:right}
.pbi-tbl td{padding:.34rem .4rem;color:var(--pbi-ink);border-bottom:1px solid #F3F2F1;
  white-space:nowrap;position:relative}
.pbi-tbl td:not(:first-child){text-align:right}
.pbi-tbl tr:last-child td{border-bottom:none}
.pbi-tbl tr{cursor:pointer;transition:background .12s}
.pbi-tbl tr:hover td{background:#FAF9F8}
.pbi-tbl tr.sel td{background:#DEECF9}
.pbi-tbl tr.dim{opacity:.34}
.databar{position:absolute;left:.4rem;right:.4rem;bottom:3px;height:3px;background:#EDEBE9;border-radius:1px;overflow:hidden}
.databar i{display:block;height:100%;background:#118DFF;border-radius:1px}
.pos{color:#107C10;font-weight:600}.neg{color:#A4262C;font-weight:600}

/* ── Barres de progression ── */
.prog{margin-bottom:.6rem;cursor:pointer;padding:.15rem .2rem;border-radius:2px;transition:background .12s}
.prog:hover{background:#FAF9F8}
.prog.sel{background:#DEECF9}
.prog.dim{opacity:.34}
.prog-top{display:flex;justify-content:space-between;font-size:.74rem;margin-bottom:.2rem;color:var(--pbi-ink)}
.prog-top b{font-weight:600}
.prog-bar{height:9px;background:#EDEBE9;border-radius:1px;overflow:hidden}
.prog-bar i{display:block;height:100%;background:#118DFF;transition:width .5s ease}

/* ── Volet Filtres ── */
.pbi-filters{width:212px;flex-shrink:0;background:var(--pbi-chrome);
  border-left:1px solid var(--pbi-line);padding:.7rem .75rem;font-size:.74rem;overflow:hidden}
.pbi-filters h4{font-size:.78rem;font-weight:600;margin:0 0 .1rem;color:var(--pbi-ink)}
.pbi-filters .sub{font-size:.67rem;color:var(--pbi-ink3);margin-bottom:.75rem}
.filter-card{background:#fff;border:1px solid var(--pbi-line);border-radius:2px;
  padding:.5rem .6rem;margin-bottom:.5rem}
.filter-card .fk{font-size:.7rem;font-weight:600;color:var(--pbi-ink);margin-bottom:.15rem}
.filter-card .fv{font-size:.7rem;color:var(--pbi-ink2)}
.filter-clear{width:100%;margin-top:.35rem;background:#fff;border:1px solid var(--pbi-line);
  border-radius:2px;padding:.4rem;font-size:.72rem;color:var(--pbi-ink);cursor:pointer;
  font-family:var(--pbi-font);transition:background .12s}
.filter-clear:hover{background:var(--pbi-hover)}
.filter-empty{color:var(--pbi-ink3);font-size:.71rem;line-height:1.55;font-style:italic}

/* ── Onglets de pages (en bas — signature Power BI) ── */
.pbi-tabs{display:flex;align-items:stretch;background:var(--pbi-chrome);
  border-top:1px solid var(--pbi-line);padding:0 .5rem;gap:.1rem;overflow-x:auto}
.pbi-tab{border:none;background:none;font-family:var(--pbi-font);font-size:.75rem;
  color:var(--pbi-ink2);padding:.5rem .85rem;cursor:pointer;white-space:nowrap;
  border-bottom:2px solid transparent;transition:all .12s}
.pbi-tab:hover{background:var(--pbi-hover);color:var(--pbi-ink)}
.pbi-tab.on{color:var(--pbi-ink);font-weight:600;border-bottom-color:var(--pbi-yellow);background:#fff}

/* ── Légende sous le rapport ── */
.pbi-caption{max-width:1180px;margin:1.1rem auto 0;font-size:.8rem;color:var(--ink-3);
  text-align:center;line-height:1.7}
.pbi-caption strong{color:var(--ink-2)}

/* ── Responsive ── */
@media(max-width:1080px){
  .pbi-filters{display:none}
}
@media(max-width:900px){
  .pbi-canvas{grid-template-columns:1fr}
  .slicer{grid-row:auto}
  .slicer-tiles{grid-template-columns:repeat(4,1fr)}
  .kpis{grid-column:1;grid-template-columns:1fr 1fr}
  .viz-chart,.viz-donut,.viz-table,.viz-bars{grid-column:1}
  .pbi-menu{display:none}
}
@media(max-width:560px){
  .kpis{grid-template-columns:1fr}
  .pbi-name{font-size:.76rem}
  .chart-wrap{min-height:200px}
  .pbi-refresh{display:none}
  .pbi-sep{display:none}
  .slicer-tiles{grid-template-columns:repeat(4,1fr)}
}