/* ==========================================================================
   In Pulse - pages/analytique.css
   Page « Centres de profit » (app/analytique.html).
   Dépend de tokens.css, base.css, components.css, pages/app.css.
   Aucune couleur en dur : tout passe par les tokens.

   Les règles .tableau* sont recopiées de cercle.css pour rendre la page
   dirigeant indépendante de la feuille interne de l'Espace Cercle.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tableau numérique générique (repris de cercle.css)
   -------------------------------------------------------------------------- */
.tableau-defilement {
  overflow-x: auto;
  margin-top: var(--espace-md);
}

.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--taille-sm);
}

.tableau th,
.tableau td {
  padding: var(--espace-sm) var(--espace-md);
  text-align: left;
  border-bottom: 1px solid var(--couleur-filet);
  white-space: nowrap;
}

.tableau thead th {
  background-color: var(--couleur-surface-2);
  font-size: var(--taille-xs);
  font-weight: var(--graisse-demi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--couleur-texte-discret);
}

.tableau tbody th[scope="row"] {
  font-weight: var(--graisse-demi);
  color: var(--couleur-encre);
}

.tableau tbody tr:hover {
  background-color: var(--couleur-surface-2);
}

.tableau__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tableau__or {
  color: var(--couleur-accent-texte);
  font-weight: var(--graisse-demi);
}

/* Ligne de totaux */
.tableau tfoot th,
.tableau tfoot td {
  border-top: 2px solid var(--couleur-filet-fort);
  border-bottom: none;
  font-weight: var(--graisse-demi);
  background-color: var(--couleur-surface-2);
  color: var(--couleur-encre);
}

/* --------------------------------------------------------------------------
   1. Intro
   -------------------------------------------------------------------------- */
.analytique-intro {
  margin-top: var(--espace-xs);
}

.analytique-expert {
  margin-top: var(--espace-lg);
}

/* --------------------------------------------------------------------------
   2. Cartes par centre de profit
   -------------------------------------------------------------------------- */
.grille-centres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--espace-lg);
}

.analytique-centre__titre {
  font-size: var(--taille-lg);
}

.analytique-centre__jauge {
  margin-top: var(--espace-md);
}

.analytique-centre__part {
  margin-top: var(--espace-md);
  display: grid;
  gap: var(--espace-2xs);
}

/* --------------------------------------------------------------------------
   3. Matrice des clés de répartition (éditable)
   -------------------------------------------------------------------------- */
.matrice-cles__input {
  width: 4.25rem;
  padding: 0.35rem 0.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Masque les flèches natives des number pour un rendu plus sobre */
.matrice-cles__input::-webkit-outer-spin-button,
.matrice-cles__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.matrice-cles__total {
  font-weight: var(--graisse-demi);
  color: var(--couleur-accent-texte);
}

/* --------------------------------------------------------------------------
   4. Mission (récolte de data + feuille de route)
   -------------------------------------------------------------------------- */
.analytique-mission {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--rythme-bloc);
  align-items: start;
}

.analytique-recolte {
  list-style: none;
  padding: 0;
  margin-top: var(--espace-sm);
  display: grid;
  gap: var(--espace-sm);
}

.analytique-recolte__ligne {
  display: flex;
  align-items: center;
  gap: var(--espace-sm);
  font-size: var(--taille-sm);
}

.analytique-recolte__ligne .badge {
  flex-shrink: 0;
  min-width: 5.5rem;
  justify-content: center;
}

.analytique-etapes {
  margin-top: var(--espace-md);
  gap: var(--espace-lg);
}

.analytique-avancement {
  margin-top: var(--espace-lg);
}