/* ============================================================
   g6-components.css — Bibliothèque de composants
   Objectif : uniformiser l'INTÉRIEUR des pages.
   La navbar et la sidebar ne sont pas touchées.
   Les couleurs existantes sont conservées ; ce qui change, ce sont
   les surfaces (plates au lieu de dégradées), les rayons, l'espacement
   et la typographie — c'est ce qui fait la différence « pro ».
   À charger APRÈS styles.css / styles_2.css / refonte-legacy.css.
   ============================================================ */

/* ── 0. RESKIN GLOBAL ─────────────────────────────────────────
   Le thème existant applique ses dégradés, halos et grands rayons
   via des VARIABLES. En les redéfinissant ici (feuille chargée en
   dernier), tout l'intérieur des pages s'aplatit d'un coup :
   aucune règle à réécrire, aucune modification de HTML.
   C'est ce qui donne le rendu « pro » plutôt qu'« enfant ».
   ------------------------------------------------------------ */
:root {
  /* Surfaces plates au lieu des dégradés */
  --legacy-card-bg:       #1e293b;
  --legacy-card-bg-hover: #273549;

  /* Halos colorés remplacés par une bordure nette + ombre discrète */
  --legacy-glow-primary: 0 0 0 1px rgba(16, 185, 129, .45), 0 1px 3px rgba(0, 0, 0, .3);
  --legacy-glow-blue:    0 0 0 1px rgba(59, 130, 246, .45), 0 1px 3px rgba(0, 0, 0, .3);
  --legacy-glow-amber:   0 0 0 1px rgba(245, 158, 11, .45), 0 1px 3px rgba(0, 0, 0, .3);

  /* Rayons plus sobres (14/18px -> 8/4/10px) */
  --legacy-radius:    8px;
  --legacy-radius-sm: 4px;
  --legacy-radius-lg: 10px;
}
/* Tableaux existants : en-têtes en petites capitales, chiffres alignés */
.container table th,
table.hist-tbl th {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-mute, #94a3b8);
}
.container table td, table.hist-tbl td { font-size: 13px; }
.container table td.num, .container table th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Titres de cartes : un seul poids, une seule taille */
.card-title { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
/* Garde-fou anti-débordement (cause des cartes décalées) */
.card, .item-card, .stat-card { min-width: 0; overflow-wrap: anywhere; }
/* ============================================================ */

:root {
  /* Échelle d'espacement : tout se cale sur des multiples de 4 */
  --g6-1: 4px;  --g6-2: 8px;  --g6-3: 12px; --g6-4: 16px;
  --g6-5: 20px; --g6-6: 24px; --g6-8: 32px;

  /* Rayons : plus sobres que les 14–18px actuels */
  --g6-r-sm: 4px;
  --g6-r:    8px;
  --g6-r-lg: 10px;

  /* Surfaces : plates, sans dégradé ni halo */
  --g6-surface:       #1e293b;
  --g6-surface-alt:   #273549;
  --g6-surface-sunk:  #0f172a;
  --g6-border:        rgba(255, 255, 255, 0.07);
  --g6-border-strong: rgba(255, 255, 255, 0.13);

  /* Une seule ombre, discrète */
  --g6-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}
.g6-card--flush { padding: 0; overflow: hidden; }
.g6-card-head {
  display: flex; align-items: center; gap: var(--g6-3);
  flex-wrap: wrap; margin-bottom: var(--g6-4);
  padding-bottom: var(--g6-3);
  border-bottom: 1px solid var(--g6-border);
}
.g6-card--flush .g6-card-head { padding: var(--g6-4) var(--g6-5) var(--g6-3); margin-bottom: 0; }
.g6-card-sub { font-size: 12px; color: var(--text-mute, #94a3b8); margin-top: 2px; }
/* Grille de cartes : hauteurs égales, pas de décalage */
.g6-grid {
  display: grid; gap: var(--g6-4); align-items: stretch;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.g6-grid--wide { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.g6-grid > * { min-width: 0; }
/* ── 2. TUILES D'INDICATEURS ──────────────────────────────── */
.g6-kpis {
  display: grid; gap: var(--g6-3); margin-bottom: var(--g6-5);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.g6-kpi {
  background: var(--g6-surface);
  border: 1px solid var(--g6-border);
  border-left: 3px solid var(--k, var(--primary, #10b981));
  border-radius: var(--g6-r);
  padding: var(--g6-3) var(--g6-4);
  min-width: 0;
}
.g6-kpi-l {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-mute, #94a3b8);
  margin-bottom: var(--g6-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.g6-kpi-v {
  font-size: 22px; font-weight: 700; line-height: 1.1;
  color: var(--text, #f1f5f9);
  font-variant-numeric: tabular-nums;   /* chiffres alignés */
  overflow-wrap: anywhere;
}
.g6-kpi-s { font-size: 11px; color: var(--text-mute, #94a3b8); margin-top: 3px; }
.g6-kpi--blue   { --k: #3b82f6; } .g6-kpi--amber { --k: #f59e0b; }
.g6-kpi--red    { --k: #ef4444; } .g6-kpi--purple{ --k: #8b5cf6; }
.g6-kpi--cyan   { --k: #06b6d4; } .g6-kpi--mute  { --k: #64748b; }
/* ── 3. TABLEAUX ──────────────────────────────────────────── */
.g6-tablewrap { overflow-x: auto; border-radius: var(--g6-r); }
/* ── 4. FORMULAIRES ───────────────────────────────────────── */
.g6-form { display: grid; gap: var(--g6-3); }
.g6-row {
  display: flex; gap: var(--g6-3); flex-wrap: wrap; align-items: flex-end;
}
.g6-field--grow { flex: 1; min-width: 180px; }
.g6-hint { font-size: 11px; color: var(--text-mute, #94a3b8); }
/* ── 6. ÉTIQUETTES ────────────────────────────────────────── */
.g6-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px;
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  white-space: nowrap;
  background: rgba(148, 163, 184, .15); color: #94a3b8;
}
.g6-tag--ok    { background: rgba(16, 185, 129, .15); color: #34d399; }
.g6-tag--info  { background: rgba(59, 130, 246, .15); color: #60a5fa; }
.g6-tag--warn  { background: rgba(245, 158, 11, .15); color: #fbbf24; }
.g6-tag--dang  { background: rgba(239, 68, 68, .15);  color: #f87171; }
.g6-tag--purple{ background: rgba(139, 92, 246, .15); color: #a78bfa; }
.g6-empty-ic { font-size: 30px; opacity: .5; margin-bottom: var(--g6-2); }
.g6-empty-t { color: var(--text-soft, #cbd5e1); font-weight: 600; margin-bottom: var(--g6-1); }
.g6-empty-a { margin-top: var(--g6-4); }
.g6-loading { padding: var(--g6-6); text-align: center; color: var(--text-mute, #94a3b8); font-size: 13px; }
.g6-skel {
  height: 12px; border-radius: var(--g6-r-sm);
  background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04));
  background-size: 200% 100%;
  animation: g6-shine 1.2s ease-in-out infinite;
  margin-bottom: var(--g6-2);
}
@keyframes g6-shine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.g6-note {
  font-size: 12.5px; line-height: 1.55; color: var(--text-mute, #94a3b8);
  background: rgba(59, 130, 246, .07);
  border-left: 3px solid #3b82f6;
  border-radius: 0 var(--g6-r-sm) var(--g6-r-sm) 0;
  padding: var(--g6-3) var(--g6-4);
  margin-bottom: var(--g6-4);
}
.g6-note--warn { background: rgba(245, 158, 11, .07); border-left-color: #f59e0b; }
.g6-note--dang { background: rgba(239, 68, 68, .07);  border-left-color: #ef4444; }
.g6-note strong { color: var(--text-soft, #cbd5e1); }
/* ── 8. EN-TÊTE DE PAGE ───────────────────────────────────── */
.g6-page-head {
  display: flex; align-items: center; gap: var(--g6-3);
  flex-wrap: wrap; margin-bottom: var(--g6-5);
}
.g6-page-title {
  margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -0.015em;
  color: var(--text, #f1f5f9);
}
.g6-page-sub { font-size: 12.5px; color: var(--text-mute, #94a3b8); }
.g6-page-actions { display: flex; gap: var(--g6-2); flex-wrap: wrap; margin-left: auto; }
/* ── 10. DIVERS ───────────────────────────────────────────── */
.g6-stack > * + * { margin-top: var(--g6-3); }
.g6-sep { height: 1px; background: var(--g6-border); margin: var(--g6-5) 0; }
.g6-muted { color: var(--text-mute, #94a3b8); }
.g6-num { font-variant-numeric: tabular-nums; }
.g6-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Confort de lecture */
@media (max-width: 640px) {
  .g6-card { padding: var(--g6-4); }
  .g6-kpi-v { font-size: 19px; }
  .g6-page-actions { margin-left: 0; width: 100%; }
}
/* Accessibilité : animations réduites */
@media (prefers-reduced-motion: reduce) {
  .g6-skel { animation: none; }
  .g6-btn, }