/**
 * ============================================================
 * Fichier : stats.css
 * Projet : OUTIL DE CALCUL DE TEMPS
 * Auteur : Émile Snyers — Date : 2026-07-21 — Version : 1.0.0
 * Description : Tableau de bord des statistiques (section bonus) :
 *               cartes d'indicateurs, anneau, barres, comparaison.
 *               Intégré aux variables de thème.
 * ============================================================ */

.st-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.2rem; }
.st-btn {
  padding: 0.45rem 0.9rem; border-radius: 9px; cursor: pointer; font-size: 0.86rem; font-weight: 600;
  border: 1px solid var(--couleur-bordure, #ccc); background: var(--couleur-fond-controle, #f2f2f2);
  color: var(--couleur-texte, #111); display: inline-flex; align-items: center; gap: 0.3rem;
}
.st-btn:hover { background: var(--couleur-accent, #2e86de); color: #fff; border-color: transparent; }
.st-btn-danger { border-color: rgba(220,53,69,0.5); color: #c62828; }
.st-btn-danger:hover { background: #c62828; }
.st-btn-import { position: relative; }

.st-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.8rem; }
.st-carte {
  text-align: center; padding: 0.9rem 0.6rem; border-radius: 12px;
  background: var(--couleur-fond-controle, #f6f7f9); border: 1px solid var(--couleur-bordure, #ddd);
}
.st-carte-icone { font-size: 1.5rem; }
.st-carte-val { font-size: 1.5rem; font-weight: 800; margin: 0.2rem 0; color: var(--couleur-accent, #2e86de); font-variant-numeric: tabular-nums; }
.st-carte-nom { font-size: 0.76rem; opacity: 0.75; }

.st-graphiques { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem; }
.st-carte-graph {
  padding: 1rem 1.1rem; border-radius: 14px;
  background: var(--couleur-fond-controle, #f6f7f9); border: 1px solid var(--couleur-bordure, #ddd);
}
.st-titre { margin: 0 0 0.8rem; font-size: 1rem; }

/* Anneau */
.st-donut-wrap { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.st-donut { width: 150px; height: 150px; flex: none; }
.st-donut-total { font-size: 17px; font-weight: 800; fill: var(--couleur-texte, #111); }
.st-donut-sous { font-size: 8px; fill: var(--couleur-texte, #111); opacity: 0.6; }
.st-legende { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.82rem; }
.st-leg { display: flex; align-items: center; gap: 0.4rem; }
.st-leg-pastille { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* Barres */
.st-barres { display: flex; flex-direction: column; gap: 0.55rem; }
.st-barre-ligne { display: grid; grid-template-columns: 108px 1fr auto; align-items: center; gap: 0.5rem; font-size: 0.82rem; }
.st-barre-piste { height: 12px; border-radius: 999px; background: var(--couleur-bordure, #e3e3e3); overflow: hidden; }
.st-barre-fill { display: block; height: 100%; border-radius: 999px; transition: width 0.6s ease; }
.st-barre-val { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Comparaison / défi */
.st-compare { display: flex; flex-direction: column; border: 1px solid var(--couleur-bordure, #ddd); border-radius: 12px; overflow: hidden; }
.st-compare-ligne { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 0.5rem; padding: 0.45rem 0.7rem; font-size: 0.84rem; align-items: center; }
.st-compare-ligne:nth-child(even) { background: var(--couleur-fond, #fff); }
.st-compare-entete { font-weight: 700; background: var(--couleur-accent, #2e86de); color: #fff; }
.st-plus { color: #2f9e44; font-weight: 700; }
.st-moins { color: #e03131; font-weight: 700; }

@media (max-width: 640px) {
  .st-graphiques { grid-template-columns: 1fr; }
  .st-compare-ligne { grid-template-columns: 1.6fr 1fr 1fr 1fr; font-size: 0.78rem; }
}