/* Centrale — analytique : section « Analyse » du tableau de bord. Couleurs par les variables de styles.css. */

.analyse { display: grid; gap: 18px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--trait); }
.analyse-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.analyse-entete h2 { font-size: 18px; font-weight: 650; letter-spacing: -0.01em; }
.analyse-entete p { color: var(--encre-2); margin-top: 3px; max-width: 70ch; }
.analyse-corps { display: grid; gap: 18px; }
.analyse .tuiles { margin-bottom: 0; }
.analyse .bord-colonne > .carte { min-width: 0; }  /* les tableaux larges défilent dans la carte au lieu de l'élargir */

/* Comparaison avec la période précédente */
.comparaison { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.comparaison .etiquette { font-weight: 500; gap: 6px; padding: 3px 10px; }
.comparaison .etiquette strong { font-weight: 650; color: var(--encre); }
.ecart { font-size: 12px; font-weight: 650; }
.ecart.bon { color: var(--bon); }
.ecart.mauvais { color: var(--critique); }
.ecart.neutre { color: var(--encre-3); font-weight: 500; }

/* Grille de chaleur des heures de pointe */
.chaleur { position: relative; padding: 18px 20px 10px; }
.chaleur svg { display: block; width: 100%; height: auto; overflow: visible; }
.chaleur text { fill: var(--encre-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.chaleur .case { fill: var(--serie); stroke: var(--surface); stroke-width: 1; }
.chaleur .case.vide { fill: var(--surface-2); }
.chaleur .case:hover { stroke: var(--encre); stroke-width: 1.5; }
.chaleur-legende { display: flex; align-items: center; gap: 8px; padding: 6px 20px 0; font-size: 12px; color: var(--encre-3); }
.chaleur-legende i { width: 120px; height: 8px; border-radius: 4px; background: linear-gradient(to right, var(--surface-2), var(--serie)); }
.chaleur-resume { display: flex; gap: 6px 18px; flex-wrap: wrap; padding: 12px 20px 16px; font-size: 13px; color: var(--encre-2); }
.chaleur-resume strong { color: var(--encre); font-weight: 600; }

/* Tendance (lignes) */
.graphe.tendance .aire { fill: var(--serie); fill-opacity: 0.12; }
.graphe.tendance .ligne { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.graphe.tendance .ligne.appels { stroke: var(--serie); }
.graphe.tendance .ligne.resolus { stroke: var(--bon); }
.graphe.tendance .ligne.escalades { stroke: var(--critique); stroke-dasharray: 4 3; }
.graphe.tendance .repere { fill: var(--serie); opacity: 0; }
.graphe.tendance .repere.actif { opacity: 1; }
.legende { display: flex; gap: 16px; flex-wrap: wrap; padding: 0 20px 14px; font-size: 12.5px; color: var(--encre-2); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 14px; height: 3px; border-radius: 2px; background: var(--serie); }
.legende i.resolus { background: var(--bon); }
.legende i.escalades { background: var(--critique); }

/* Tableaux accessibles (version tableau de la grille et de la tendance) */
.tableau.compact th, .tableau.compact td { padding: 6px 8px; font-size: 12px; }
.tableau.compact th:first-child, .tableau.compact td:first-child { padding-left: 20px; }
.tableau.compact tbody th { text-align: left; font-weight: 600; color: var(--encre-2); white-space: nowrap; }
.tableau.compact td.muet { color: var(--encre-3); }

/* Taux de résolution par motif */
.taux { display: inline-flex; align-items: center; gap: 8px; }
.taux .piste { width: 72px; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.taux .piste i { display: block; height: 100%; border-radius: 3px; background: var(--bon); }
.taux.alerte .piste i { background: var(--alerte); }
.taux.critique .piste i { background: var(--critique); }

/* Questions sans réponse fréquentes */
.lacune-texte { min-width: 0; }
.lacune-texte strong { display: block; overflow-wrap: anywhere; }

/* Coût de l'IA */
.cout-resume { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 12px; padding: 16px 20px 12px; }
.cout-resume > div { display: grid; gap: 2px; }
.cout-resume .libelle { color: var(--encre-3); font-size: 12px; }
.cout-resume strong { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* Rapport rédigé */
.rapport-contenu { display: grid; gap: 14px; padding: 16px 20px 0; }
.rapport-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 14px 20px 18px; }
.rapport-actions .muet { flex: 1; }
.rapport-entete { display: grid; gap: 3px; }
.rapport h3 { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.rapport .titre-section { font-size: 11.5px; font-weight: 650; color: var(--encre-3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 5px; }
.rapport ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; color: var(--encre-2); font-size: 13.5px; }
.rapport .bonne {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 8px;
  background: var(--bon-fond); color: var(--bon); font-size: 13.5px; font-weight: 500;
}
.rapport .bonne svg { flex: none; margin-top: 2px; }

@media (max-width: 820px) {
  .chaleur-resume { padding-bottom: 14px; }
  .cout-resume { grid-template-columns: 1fr 1fr; }
}