/* ==========================================================================
   EcoMelio — Statistiques (full CSS)
   Fichier : /css/style_statistiques.css
   ========================================================================== */

/* ---------- Theme & tokens ---------- */
:root{
  /* brand */
  --em-primary:        #BAA883;
  --em-primary-600:    #a08e6e;
  --em-primary-700:    #8a7a5e;

  /* neutrals */
  --em-ink:            #0f172a;
  --em-ink-700:        #334155;
  --em-muted:          #6b7280;
  --em-border:         #e5e7eb;
  --em-bg:             #ffffff;
  --em-bg-soft:        #f8fafc;

  /* feedback */
  --em-success:        #16a34a;
  --em-warning:        #f59e0b;
  --em-danger:         #ef4444;

  /* effects */
  --em-shadow-sm:      0 4px 14px rgba(15,23,42,.08);
  --em-shadow-md:      0 10px 30px rgba(15,23,42,.10);

  /* typography */
  --em-radius:         16px;
  --em-radius-lg:      20px;
  --em-font:           ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
}

/* ---------- Base ---------- */
html, body{
  background: var(--em-bg);
  color: var(--em-ink);
  font-family: var(--em-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main.container-xxl{
  background: var(--em-bg);
  border: 1px solid var(--em-border);
  border-radius: calc(var(--em-radius-lg) + 4px);
  box-shadow: var(--em-shadow-sm);
}

/* utility */
.em-num { font-variant-numeric: tabular-nums; }

/* ---------- Hero ---------- */
.stats-hero{
  background: var(--em-bg);
  border-bottom: 1px solid var(--em-border);
}
.stats-hero h1{ color: var(--em-ink); }

/* ---------- KPIs ---------- */
.kpi{
  background: var(--em-bg);
  border: 1px solid var(--em-border);
  border-radius: var(--em-radius);
  padding: 16px 18px;
  height: 100%;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.kpi:hover{
  transform: translateY(-2px);
  border-color: rgba(186,168,131,.45);
  box-shadow: var(--em-shadow-sm);
}
.kpi .lbl{
  font-size: .85rem;
  color: var(--em-muted);
  letter-spacing: .02em;
  margin-bottom: 6px;
}
.kpi .val{
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  font-weight: 800;
  color: var(--em-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.kpi .val small{ font-weight: 600; color: var(--em-muted); }

/* ---------- Cards & ghost ---------- */
.card{
  border-radius: var(--em-radius-lg);
  border: 1px solid var(--em-border);
}
.card-ghost{
  background: linear-gradient(180deg, var(--em-bg), var(--em-bg)) padding-box,
              linear-gradient(120deg, rgba(186,168,131,.35), rgba(186,168,131,0)) border-box;
  border: 1px solid transparent;
  box-shadow: var(--em-shadow-sm);
}

/* ---------- Chart area (fix resize) ---------- */
.chart-wrap{
  position: relative;
  width: 100%;
  /* hauteur responsive : plus grand sur desktop, compact sur mobile */
  height: clamp(220px, 28vw, 380px);
  min-height: 200px;
}
#raisedChart{
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.chart-meta{
  display: flex; gap: 12px; align-items: center; justify-content: flex-end;
  font-size: .85rem; color: var(--em-muted);
}

/* ---------- Definitions list ---------- */
.stat-defs{
  display: grid;
  gap: 6px 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.stat-defs li{ list-style: none; padding-left: 0; }
.stat-defs strong{ color: var(--em-ink); }

/* ---------- Rotated quarterly table (metrics as rows) ---------- */
.table-wrap{
  border: 1px solid var(--em-border);
  border-radius: var(--em-radius);
  overflow: auto; /* scroll x si nécessaire */
  box-shadow: var(--em-shadow-sm);
  background: var(--em-bg);
}
.table-stats{
  margin: 0;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.table-stats thead th{
  position: sticky;
  top: 0;
  background: linear-gradient(0deg, var(--em-bg), var(--em-bg));
  color: var(--em-ink);
  border-bottom: 1px solid var(--em-border);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .02em;
  z-index: 2;
  white-space: nowrap;
}
.table-stats th, .table-stats td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--em-border);
  vertical-align: middle;
  white-space: nowrap;
}
.table-stats tbody tr:hover{ background: rgba(186,168,131,.05); }
.table-stats td.text-end{ text-align: right; }
.table-stats .money{ font-feature-settings: "tnum" 1, "lnum" 1; }

/* Sticky first column (metric names) */
.table-stats .sticky-col{
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--em-bg);
  border-right: 1px solid var(--em-border);
  font-weight: 700;
}

/* subtle column separators every 2 periods (optional) */
.table-stats thead th.period + th.period{
  border-left: 1px dashed rgba(186,168,131,.35);
}

/* badges (optionnel) */
.badge-soft{
  display:inline-block; border-radius:999px; padding:.25rem .55rem;
  font-weight:700; font-size:.75rem; line-height:1;
  background: rgba(186,168,131,.15);
  color: var(--em-primary-700);
  border: 1px solid rgba(186,168,131,.35);
}

/* ---------- Helpers ---------- */
.text-muted-ink{ color: var(--em-muted) !important; }
.hr-soft{ height:1px; background: var(--em-border); border:0; margin: 16px 0; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px){
  .kpi{ padding: 14px 14px; }
  .kpi .val{ font-size: 1.35rem; }
}
@media (max-width: 575.98px){
  .stats-hero{ padding-left: 1rem !important; padding-right: 1rem !important; }
  .table-stats th, .table-stats td{ padding: 10px 12px; }
  .table-stats thead th{ font-size: .78rem; }
}

/* ---------- Print ---------- */
@media print{
  body{ background: #fff; }
  main.container-xxl{ border: none; box-shadow: none; }
  .stats-hero{ border: none; background: #fff; }
  .card, .card-ghost, .table-wrap{ box-shadow: none; }
}

/* ---------- Focus a11y ---------- */
:focus-visible{
  outline: 3px solid rgba(186,168,131,.45);
  outline-offset: 2px;
  border-radius: 6px;
}