/* Lot S (demande de Saleh, 23/09 11 h 45) · Vue d'ensemble du franchiseur : S-02, S-03, S-04.
   Écrivain unique de ce fichier : l'agent du lot S-A. Palette inchangée : var(--…) uniquement. */

/* ---- S-03 · Tendance du versement net : axes explicites, infobulle du point le plus proche ---- */
.sa-trend { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sa-ax { font-size: 11.5px; font-weight: 700; color: var(--ink-2); line-height: 1.3; }
.sa-ax-x { text-align: center; overflow-wrap: anywhere; }
.sa-plot { position: relative; width: 100%; min-width: 0; touch-action: pan-y; cursor: crosshair; border-radius: var(--r-xs); }
.sa-plot:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sa-svg, .sa-chart { display: block; max-width: 100%; }
.sa-chart .sa-grid { stroke: var(--line-2); stroke-width: 1; }
.sa-chart .sa-axe { stroke: var(--line); stroke-width: 1; }
.sa-chart .sa-tick { font-size: 11px; font-weight: 600; fill: var(--muted); font-variant-numeric: tabular-nums; }
.sa-chart .sa-aire { fill: url(#saTrendGrad); }
.sa-chart .sa-stop { stop-color: var(--blue); }
.sa-chart .sa-ligne { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.sa-chart .sa-pt { fill: var(--surface); stroke: var(--blue); stroke-width: 1.5; }
.sa-chart .sa-pt.discret { visibility: hidden; }
.sa-chart .sa-pt.dernier { fill: var(--blue); stroke: none; }
.sa-chart .sa-guide { stroke: var(--navy); stroke-width: 1; stroke-dasharray: 3 3; opacity: .45; }
.sa-chart .sa-focus { fill: var(--blue); stroke: var(--surface); stroke-width: 2; }
.sa-chart .sa-pill rect { fill: var(--navy); }
.sa-chart .sa-pill text { font-size: 11px; font-weight: 700; fill: var(--surface); }
.sa-tip { position: absolute; z-index: 3; pointer-events: none; display: flex; flex-direction: column; gap: 1px;
  padding: 6px 10px; border-radius: var(--r-xs); background: var(--navy); color: var(--surface);
  font-size: 12px; line-height: 1.35; white-space: nowrap; box-shadow: var(--shadow-2); }
.sa-tip[hidden] { display: none; }
.sa-tip b { font-weight: 700; }
.sa-trend-note { font-size: 12px; margin-top: 8px; line-height: 1.4; }

/* ---- S-04 · Classement : signaux écrits en clair, ligne visiblement cliquable ---- */
.bars.ranked.sa-rank .bar { grid-template-columns: 26px 150px minmax(0, 1fr) auto 16px; grid-template-areas: "rk lbl track val chev"; column-gap: 12px; row-gap: 3px; }
.bars.ranked.sa-rank .bar.has-sig { grid-template-areas: "rk lbl track val chev" ". sig sig sig chev"; }
.bars.ranked.sa-rank .rk { grid-area: rk; }
.bars.ranked.sa-rank .bl { grid-area: lbl; }
.bars.ranked.sa-rank .track { grid-area: track; }
.bars.ranked.sa-rank .bv { grid-area: val; }
.bars.ranked.sa-rank .sa-chev { grid-area: chev; display: flex; align-items: center; justify-content: center; color: var(--muted); transition: color .12s, transform .12s; }
.bars.ranked.sa-rank .sa-chev svg { width: 16px; height: 16px; }
.bars.ranked.sa-rank .bar.clickable:hover .sa-chev,
.bars.ranked.sa-rank .bar.clickable:focus-visible .sa-chev { color: var(--blue); transform: translateX(2px); }
.bars.ranked.sa-rank .bar.clickable:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; background: var(--surface-2); }
.bars.ranked.sa-rank .sa-sig { grid-area: sig; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 11.5px; font-weight: 600; line-height: 1.35; min-width: 0; }
.bars.ranked.sa-rank .sa-s { overflow-wrap: anywhere; }
.bars.ranked.sa-rank .sa-s.rouge { color: var(--rouge); }
.bars.ranked.sa-rank .sa-s.orange { color: var(--orange); }

/* Sous 640 px : le nom ENTIER sur sa ligne (UI-09), barre et montant dessous, signaux en dernier ;
   le chevron reste à droite, sur toute la hauteur de la ligne. */
@media (max-width: 640px) {
  .bars.ranked.sa-rank .bar { grid-template-columns: 26px minmax(0, 1fr) auto 16px; grid-template-areas: "rk lbl lbl chev" "rk track val chev"; column-gap: 10px; row-gap: 4px; }
  .bars.ranked.sa-rank .bar.has-sig { grid-template-areas: "rk lbl lbl chev" "rk track val chev" "rk sig sig chev"; }
}

/* ---- Lot T-A (Saleh, 23/09) · T-04 : les six indicateurs comparés à la période précédente,
   à la manière de Flynt : pastille arrondie ▲/▼ + pourcentage à côté de la valeur,
   « Période précédente : X » dessous. Palette existante uniquement (var(--…)). ---- */
.kpis.ta-kpis .kpi { min-width: 0; }
.kpis.ta-kpis .kpi .val { min-width: 0; }
.kpis.ta-kpis .ta-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.kpis.ta-kpis .ta-v { white-space: nowrap; }
.ta-pastille { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0; line-height: 1.4; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ta-pastille .ta-fl { font-size: 9px; line-height: 1; }
.ta-pastille.hausse { color: var(--vert); background: var(--vert-bg); }
.ta-pastille.baisse { color: var(--rouge); background: var(--rouge-bg); }
.ta-pastille.neutre { color: var(--muted); background: var(--surface-2); }
/* Le sous-titre suit la valeur (la ligne « Période précédente » reste à la même hauteur dans une
   rangée) ; les mentions propres à la tuile sont poussées en bas de la carte. */
.kpis.ta-kpis .kpi .sub { margin-top: 6px; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 0; }
.kpis.ta-kpis .ta-prev { font-size: 12.5px; color: var(--muted); }
.kpis.ta-kpis .ta-prev b { font-weight: 600; color: var(--ink-2); white-space: nowrap; }
/* Suite T-A : restaurants non mesurés (ou en partie) sur la période précédente — gris, petit. */
.kpis.ta-kpis .ta-couv-cour { display: flex; flex-direction: column; gap: 2px; margin-top: -2px; font-size: 11.5px; line-height: 1.35; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.kpis.ta-kpis .ta-pd { white-space: nowrap; }
.kpis.ta-kpis .ta-couv { display: flex; flex-direction: column; gap: 2px; margin-top: -2px; font-size: 11.5px; line-height: 1.35; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.kpis.ta-kpis .ta-extra { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
/* 641–900 px (tablette) : deux colonnes, trois rangées, même ordre de lecture ; la pastille tient
   à côté de la valeur au lieu de passer dessous. Sous 640 px, la règle commune empile les tuiles. */
@media (min-width: 641px) and (max-width: 900px) { .kpis.k3.ta-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Console (Saleh, 25/09) · rangées de quatre tuiles comparées (« k4 ta-kpis ») : sous 1440 px,
   quatre colonnes donnaient des tuiles de ≈ 200–270 px (≈ 315 px au Réseau, en k3) ; la pastille
   passait sous la valeur (mesuré jusqu'à 1438 px sur « Net réseau · TTC ») et « Période
   précédente : X » se coupait. Deux colonnes de 901 à 1439 px ; 1440 px et plus : inchangé.
   Le Réseau (k3) et l'app n'ont aucune rangée k4 : rien n'y change. */
@media (min-width: 901px) and (max-width: 1439px) { .kpis.k4.ta-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* D-V01 (lot T-A) · carte « Tendance du versement net » : le titre sur UNE ligne, la période sur
   sa propre ligne dessous (à 1280, titre et dates se partageaient la largeur et passaient chacun
   sur deux lignes). Sans couleur nouvelle. */
#saTrendCard .card-h { flex-direction: column; align-items: flex-start; gap: 3px; }
#saTrendCard .card-h h3 { max-width: 100%; }
#saTrendCard .card-h .card-sub { max-width: 100%; font-variant-numeric: tabular-nums; }

/* Suite T-A (23/09) · back-office, « Top PDV · versement net » : un PDV incomplet le dit en clair
   sous son nom (même règle que S-04). Nom entier conservé (UI-09) ; couleur existante uniquement. */
.bars.noms.ta-top .bl { grid-area: lbl; }
.bars.noms.ta-top .track { grid-area: track; }
.bars.noms.ta-top .bv { grid-area: val; }
.bars.noms.ta-top .bar { grid-template-areas: "lbl track val"; }
.bars.noms.ta-top .bar.has-sig { grid-template-areas: "lbl track val" "sig sig sig"; row-gap: 3px; }
.bars.noms.ta-top .ta-sig { grid-area: sig; font-size: 11.5px; font-weight: 600; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 640px) {
  .bars.noms.ta-top .bar { grid-template-areas: "lbl lbl" "track val"; }
  .bars.noms.ta-top .bar.has-sig { grid-template-areas: "lbl lbl" "sig sig" "track val"; }
}

/* W-03 (Saleh, 23/09) · Vue d'ensemble : Classement puis Tendance, chacun sur toute la largeur. */
.ta-pile { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ta-pile > * { min-width: 0; width: 100%; }