/* [Rapports de service] — public/js/rapports_service.js (20/10/2026). Jetons seuls, deux thèmes, espacements 4·8·12·16·24.
   Teintes des séries VALIDÉES (dataviz validate_palette) : sombre #d9733a + accent sur #0f1530, clair #c2410c + accent sur
   #ffffff (clarté, chroma, écart daltonisme ΔE ≥ 19, contraste ≥ 3:1). --ico-orange sombre (#f29657) sort de la bande.
   Chargée juste après style.css (public/index.php) : à poids égal, ces règles passent après celles du socle. */
:root { --rsv-ouverts: #d9733a; --rsv-resolus: var(--accent); --rsv-backlog: var(--text); }
:root[data-theme="light"] { --rsv-ouverts: #c2410c; }

/* 20/10/2026 — Les onglets touchent le bandeau : l'écart est celui de la pile de la page (16 px), pas sa marge propre. */
.rsv-page > .hx-onglets { margin-bottom: 0; }
.rsv-entete { flex: 1 1 24rem; min-width: 0; }

/* Les filtres : le libellé au-dessus de son champ. La règle générale des <label> (capitales, espacement, marges) est
   ramenée au texte ordinaire, pour que « Vision » (un div) et les autres filtres (des label) se ressemblent. */
.rsv-filtres { align-items: flex-end; }
.rsv-filtre { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; color: var(--dim); font-size: var(--fs-sm);
  font-weight: 500; letter-spacing: normal; text-transform: none; }

/* Les tuiles du bandeau : 4 colonnes, 2 sous 900 px. Un état (erreur) prend toute la largeur. */
.rsv-tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 900px) { .rsv-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rsv-tuiles > .hx-etat { grid-column: 1 / -1; }
/* position: relative garde dans la tuile le texte réservé au lecteur d'écran (« en amélioration », hx-lecteur-seul). */
.rsv-tuile { position: relative; display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; margin: 0; padding: var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-2); color: var(--text); font: inherit; text-align: left; }
button.rsv-tuile { cursor: pointer; }
button.rsv-tuile:hover { border-color: var(--border-strong); }
button.rsv-tuile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rsv-tuile__lib, .rsv-tuile__note { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rsv-tuile__lib { color: var(--dim); font-size: var(--fs-sm); }
.rsv-tuile__val { font-size: var(--fs-xl); font-weight: 700; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rsv-tuile__evol { display: block; min-width: 0; min-height: 16px; overflow: hidden; font-size: var(--fs-xs); white-space: nowrap;
  text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
/* 20/10/2026 — Retour de Jérôme sur le PDF : les tuiles montrent le dernier pas complet, comparé au pas précédent.
   La ligne de référence (« Indicateurs de septembre 2026, comparés à août 2026 ») couvre toute la largeur du bandeau.
   La flèche suit la valeur : ↗ hausse, ↘ baisse, → stable (arrow-right du sprite, tournée de 45°), verte si c'est
   mieux, rouge si c'est moins bien, grise sinon : les tons du socle (hx-texte-ok, hx-texte-crit, hx-attenue), qui
   gardent au moins 4,5:1 sur --bg-2 dans les deux thèmes. */
.rsv-tuiles > .rsv-reference { grid-column: 1 / -1; margin: 0; color: var(--text); font-size: var(--fs-sm); font-weight: 600; }
.rsv-reference > .ni { color: var(--dim); }
.rsv-tuile__ligne { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.rsv-fleche { display: inline-flex; flex: none; }
.rsv-fleche .ni { width: 24px; height: 24px; margin: 0; stroke-width: 2.4; opacity: 1; }
.rsv-fleche--hausse .ni { transform: rotate(-45deg); }
.rsv-fleche--baisse .ni { transform: rotate(45deg); }
.rsv-tuile__note { color: var(--dim); font-size: var(--fs-xs); }
.rsv-tuile__spark { display: block; height: 28px; }
.rsv-tuile__spark svg { display: block; width: 100%; height: 100%; }
.rsv-tuile__spark path.line { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.rsv-tuile__spark path.area { fill: var(--accent); opacity: .12; }
.rsv-tuile__spark .dot { display: none; }

/* Le graphique d'évolution (rsvGraphique) : barres ouverts / résolus, courbe du backlog, un seul axe en tickets.
   Le dessin suit sa viewBox (720 × 240) : sans plafond, ses textes grossissaient avec l'écran (18 px à 1 440 px). Au-delà de
   300 px de haut, il reste à cette taille, centré dans sa carte. */
.rsv-graphe { display: block; width: 100%; min-width: 560px; height: auto; max-height: 300px; }
.rsv-barre--ouverts { fill: var(--rsv-ouverts); } .rsv-barre--resolus { fill: var(--rsv-resolus); } .rsv-barre--en-cours { opacity: .55; }
.rsv-courbe { fill: none; stroke: var(--rsv-backlog); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rsv-courbe-point { fill: var(--rsv-backlog); }
.rsv-courbe-valeur { fill: var(--text); font-size: var(--fs-xs); font-weight: 700; }
.rsv-axe { fill: var(--dim); font-size: var(--fs-xs); } .rsv-grille { stroke: var(--border); }
.rsv-cible { fill: transparent; } .rsv-cible:hover { fill: color-mix(in srgb, var(--accent) 10%, transparent); }
.rsv-point--ouverts { --hx-ton: var(--rsv-ouverts); } .rsv-point--resolus { --hx-ton: var(--rsv-resolus); } .rsv-point--backlog { --hx-ton: var(--rsv-backlog); }

/* Les tableaux : une ligne par cellule, la première colonne collée au bord pendant le défilement (390 px). */
.rsv-tableau th, .rsv-tableau td, .rsv-clients th, .rsv-clients td, .rsv-sources th, .rsv-sources td { white-space: nowrap; }
.rsv-tableau tbody th { color: var(--text); font-weight: 500; }
.rsv-tableau th:first-child, .rsv-tableau td:first-child, .rsv-clients th:first-child, .rsv-clients td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--bg-2); }
.rsv-tableau thead th:first-child, .rsv-clients thead th:first-child { background: var(--bg-1); }
.rsv-tableau thead .hx-badge { margin-left: var(--space-1); text-transform: none; letter-spacing: normal; }
/* Par client : le badge « Courriels non attribués » passe sous le nom (la colonne collée reste étroite). */
.rsv-client { align-items: flex-start; }
/* Le détail d'une case : client, sujet et technicien passent à la ligne avec une largeur lisible, le reste tient sur une
   ligne ; le tableau défile dans son cadre. */
.rsv-detail td { white-space: nowrap; }
.rsv-detail td.rsv-detail__sujet { min-width: 12rem; white-space: normal; }
.rsv-detail td.rsv-detail__client { min-width: 9rem; white-space: normal; }
.rsv-detail td.rsv-detail__tech { min-width: 8rem; white-space: normal; }

@media print { .rsv-filtres, .rsv-actions, #rsv-onglets { display: none; } .rsv-page .hx-defile { overflow: visible; } .rsv-graphe { min-width: 0; } }