/* =========================================================================
   SOLIS Commerce — composants d'interface.

   RÈGLE NON NÉGOCIABLE (rappel de tokens.css) : aucune couleur, aucun rayon,
   aucune espace écrits à la main. Tout passe par un jeton.
   ========================================================================= */

/* Séance de recette : une information, pas une alerte. Le rouge plein reste
   réservé au bandeau « serveur ancien en mémoire » (cf. tokens.css). */
.solis-bandeau-recette {
  background: var(--solis-accent-doux);
  color: var(--solis-accent);
  border-bottom: 1px solid var(--solis-accent);
  padding: var(--solis-espace-2) var(--solis-espace-4);
  font-weight: var(--solis-graisse-moyenne);
  text-align: center;
}

/* ------------------------------------------------------------- ossature */

.solis-entete {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--solis-espace-4);
  padding: var(--solis-espace-3) var(--solis-espace-5);
  background: var(--solis-surface);
  border-bottom: 1px solid var(--solis-bordure);
}

.solis-marque {
  font-weight: var(--solis-graisse-forte);
  font-size: var(--solis-taille-l);
  letter-spacing: -0.01em;
}
.solis-marque span { color: var(--solis-accent); }

.solis-version {
  font-family: var(--solis-police-code);
  font-size: var(--solis-taille-xs);
  color: var(--solis-texte-tertiaire);
  border: 1px solid var(--solis-bordure);
  border-radius: var(--solis-rayon-rond);
  padding: 0 var(--solis-espace-2);
}

.solis-pousse { margin-left: auto; }

.solis-nav {
  display: flex;
  gap: var(--solis-espace-1);
  padding: 0 var(--solis-espace-5);
  background: var(--solis-surface);
  border-bottom: 1px solid var(--solis-bordure);
  position: sticky;
  top: 3.25rem;
  z-index: 9;
}

.solis-onglet {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--solis-texte-secondaire);
  font: inherit;
  font-weight: var(--solis-graisse-moyenne);
  padding: var(--solis-espace-3) var(--solis-espace-4);
  cursor: pointer;
  transition: color var(--solis-transition);
}
.solis-onglet:hover { color: var(--solis-texte); }
.solis-onglet[aria-selected="true"] {
  color: var(--solis-accent);
  border-bottom-color: var(--solis-accent);
}

main {
  max-width: var(--solis-largeur-contenu);
  margin: 0 auto;
  padding: var(--solis-espace-5);
}

.solis-titre {
  font-size: var(--solis-taille-xl);
  font-weight: var(--solis-graisse-forte);
  line-height: var(--solis-interligne-titre);
  margin: 0 0 var(--solis-espace-1);
}
.solis-sous-titre {
  color: var(--solis-texte-secondaire);
  margin: 0 0 var(--solis-espace-5);
}

/* -------------------------------------------------------------- champs */

.solis-barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--solis-espace-2);
  margin-bottom: var(--solis-espace-4);
}

.solis-bouton,
.solis-champ,
.solis-select {
  font: inherit;
  color: var(--solis-texte);
  background: var(--solis-surface);
  border: 1px solid var(--solis-bordure);
  border-radius: var(--solis-rayon-s);
  padding: var(--solis-espace-2) var(--solis-espace-3);
  transition: border-color var(--solis-transition), background var(--solis-transition);
}
.solis-champ { min-width: 16rem; }
.solis-bouton { cursor: pointer; }
.solis-bouton:hover { background: var(--solis-fond-survol); }
.solis-bouton[data-actif="oui"] {
  background: var(--solis-accent-doux);
  border-color: var(--solis-accent);
  color: var(--solis-accent);
  font-weight: var(--solis-graisse-moyenne);
}
.solis-bouton--accent {
  background: var(--solis-accent);
  border-color: var(--solis-accent);
  color: var(--solis-accent-contraste);
  font-weight: var(--solis-graisse-moyenne);
}
.solis-bouton--accent:hover { background: var(--solis-accent-actif); }

/* -------------------------------------------------------------- cartes */

.solis-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--solis-espace-3);
  margin-bottom: var(--solis-espace-5);
}

.solis-carte {
  background: var(--solis-surface);
  border: 1px solid var(--solis-bordure);
  border-radius: var(--solis-rayon-m);
  padding: var(--solis-espace-4);
}
.solis-carte dt {
  font-size: var(--solis-taille-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--solis-texte-tertiaire);
  margin-bottom: var(--solis-espace-2);
}
.solis-carte dd {
  margin: 0;
  font-size: var(--solis-taille-xl);
  font-weight: var(--solis-graisse-forte);
  font-variant-numeric: tabular-nums;
  line-height: var(--solis-interligne-titre);
}
.solis-carte dd small {
  display: block;
  font-size: var(--solis-taille-s);
  font-weight: var(--solis-graisse-normale);
  color: var(--solis-texte-secondaire);
  margin-top: var(--solis-espace-1);
}
.solis-carte[data-accent="oui"] dd { color: var(--solis-accent); }

/* ------------------------------------------------------------ tableaux */

.solis-cadre {
  background: var(--solis-surface);
  border: 1px solid var(--solis-bordure);
  border-radius: var(--solis-rayon-m);
  overflow: hidden;
  margin-bottom: var(--solis-espace-5);
}

.solis-cadre > h2 {
  font-size: var(--solis-taille-m);
  font-weight: var(--solis-graisse-forte);
  margin: 0;
  padding: var(--solis-espace-3) var(--solis-espace-4);
  border-bottom: 1px solid var(--solis-bordure);
}

.solis-tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--solis-taille-s);
}
.solis-tableau th {
  text-align: left;
  font-weight: var(--solis-graisse-moyenne);
  font-size: var(--solis-taille-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--solis-texte-tertiaire);
  padding: var(--solis-espace-2) var(--solis-espace-4);
  background: var(--solis-fond-secondaire);
  border-bottom: 1px solid var(--solis-bordure);
  white-space: nowrap;
}
.solis-tableau td {
  padding: var(--solis-espace-3) var(--solis-espace-4);
  border-bottom: 1px solid var(--solis-bordure);
  vertical-align: top;
}
.solis-tableau tr:last-child td { border-bottom: none; }
.solis-tableau tbody tr:hover { background: var(--solis-fond-survol); }
.solis-tableau .nombre { text-align: right; white-space: nowrap; }
.solis-tableau .discret { color: var(--solis-texte-secondaire); }

/* -------------------------------------------------------------- pilules */

.solis-pilule {
  display: inline-block;
  font-size: var(--solis-taille-xs);
  font-weight: var(--solis-graisse-moyenne);
  padding: 0 var(--solis-espace-2);
  border-radius: var(--solis-rayon-rond);
  white-space: nowrap;
}
.solis-pilule[data-ton="bloquant"] { background: var(--solis-refus-doux); color: var(--solis-refus); }
.solis-pilule[data-ton="important"] { background: var(--solis-attention-doux); color: var(--solis-attention); }
.solis-pilule[data-ton="mineur"] { background: var(--solis-fond-survol); color: var(--solis-texte-secondaire); }
.solis-pilule[data-ton="accent"] { background: var(--solis-accent-doux); color: var(--solis-accent); }
.solis-pilule[data-ton="succes"] { background: var(--solis-succes-doux); color: var(--solis-succes); }

/* --------------------------------------------------------- histogramme */

.solis-barre-valeur {
  display: block;
  height: var(--solis-espace-2);
  background: var(--solis-accent);
  border-radius: var(--solis-rayon-rond);
  min-width: 2px;
}
.solis-barre-fond {
  background: var(--solis-fond-survol);
  border-radius: var(--solis-rayon-rond);
  width: 100%;
}

/* ------------------------------------------------------------- divers */

.solis-vide {
  padding: var(--solis-espace-7) var(--solis-espace-4);
  text-align: center;
  color: var(--solis-texte-secondaire);
}

.solis-refus {
  background: var(--solis-refus-doux);
  border: 1px solid var(--solis-refus);
  color: var(--solis-refus);
  border-radius: var(--solis-rayon-m);
  padding: var(--solis-espace-3) var(--solis-espace-4);
  margin-bottom: var(--solis-espace-4);
}
.solis-refus strong { display: block; }
.solis-refus em { font-style: normal; color: var(--solis-texte-secondaire); }

.solis-detail {
  padding: var(--solis-espace-4);
  background: var(--solis-fond-secondaire);
}

/* --------------------------------------------------------- formulaires */

.solis-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--solis-espace-3);
  padding: var(--solis-espace-4);
}

.solis-groupe {
  display: flex;
  flex-direction: column;
  gap: var(--solis-espace-1);
}
.solis-groupe > label {
  font-size: var(--solis-taille-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--solis-texte-tertiaire);
}
.solis-groupe .solis-champ,
.solis-groupe .solis-select { min-width: 0; width: 100%; }

.solis-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--solis-espace-2);
  padding: 0 var(--solis-espace-4) var(--solis-espace-4);
}

.solis-lien {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--solis-accent);
  cursor: pointer;
  text-align: left;
}
.solis-lien:hover { text-decoration: underline; }

.solis-note {
  padding: 0 var(--solis-espace-4) var(--solis-espace-3);
  color: var(--solis-texte-secondaire);
  font-size: var(--solis-taille-s);
}

.solis-date { max-width: 9rem; }

[hidden] { display: none !important; }

/* ==========================================================================
   Bureau d'études — le plan de charge
   ==========================================================================
   Une case dit un taux d'occupation et rien d'autre. Sa couleur reprend
   exactement les tons de `solis-pilule` : un utilisateur qui a appris que
   rouge = bloquant sur l'écran des devoirs n'a rien à réapprendre ici.
   -------------------------------------------------------------------------- */

.solis-defilant {
  overflow-x: auto;
  padding: 0 var(--solis-espace-4);
}

.solis-plan th:first-child,
.solis-plan td:first-child { position: sticky; left: 0; background: var(--solis-surface); }
.solis-plan td:first-child .discret { display: block; font-size: var(--solis-taille-xs); }

.solis-case {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--solis-rayon-s);
  padding: var(--solis-espace-1) var(--solis-espace-2);
  min-width: 4rem;
  font: inherit;
  font-size: var(--solis-taille-s);
  font-weight: var(--solis-graisse-moyenne);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: box-shadow var(--solis-transition);
}
.solis-case:hover { box-shadow: var(--solis-ombre-1); border-color: var(--solis-bordure-forte); }
.solis-case:focus-visible { outline: none; box-shadow: var(--solis-focus); }
.solis-case[data-ton="bloquant"] { background: var(--solis-refus-doux); color: var(--solis-refus); }
.solis-case[data-ton="important"] { background: var(--solis-attention-doux); color: var(--solis-attention); }
.solis-case[data-ton="succes"] { background: var(--solis-succes-doux); color: var(--solis-succes); }
.solis-case[data-ton="mineur"] { background: var(--solis-fond-survol); color: var(--solis-texte-tertiaire); }

/* ==========================================================================
   Assistant — le fil de conversation
   ==========================================================================
   Deux bulles seulement, et sous la réponse, les faits qui la fondent. Les
   faits ne sont pas un ornement : ce sont eux qui rendent la réponse
   vérifiable, donc utilisable en réunion.
   -------------------------------------------------------------------------- */

.solis-fil {
  display: flex;
  flex-direction: column;
  gap: var(--solis-espace-3);
  padding: 0 var(--solis-espace-4) var(--solis-espace-3);
  max-height: 32rem;
  overflow-y: auto;
}

.solis-bulle {
  border-radius: var(--solis-rayon-l);
  padding: var(--solis-espace-3) var(--solis-espace-4);
  max-width: 52rem;
  line-height: var(--solis-interligne);
}
.solis-bulle[data-qui="moi"] {
  align-self: flex-end;
  background: var(--solis-accent-doux);
  color: var(--solis-accent);
  font-weight: var(--solis-graisse-moyenne);
}
.solis-bulle[data-qui="solis"] {
  align-self: flex-start;
  background: var(--solis-fond-secondaire);
  border: 1px solid var(--solis-bordure);
}

.solis-reponse strong { font-weight: var(--solis-graisse-forte); }

.solis-faits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--solis-espace-2);
  margin-top: var(--solis-espace-3);
  padding-top: var(--solis-espace-3);
  border-top: 1px solid var(--solis-bordure);
}

/* ------------------------------------------------ avis et boutons fins (B9) */
.solis-avis {
  display: flex;
  gap: var(--solis-espace-3);
  padding: var(--solis-espace-3) var(--solis-espace-4);
  border-radius: var(--solis-rayon-m);
  margin-bottom: var(--solis-espace-4);
  font-size: var(--solis-taille-s);
  line-height: 1.55;
  background: var(--solis-fond-survol);
  color: var(--solis-texte-secondaire);
}
.solis-avis[data-ton="important"] {
  background: var(--solis-attention-doux);
  color: var(--solis-attention);
}
.solis-avis[data-ton="bloquant"] {
  background: var(--solis-refus-doux);
  color: var(--solis-refus);
}
.solis-avis strong { color: inherit; }

.solis-bouton--fin {
  padding: 0.2rem 0.55rem;
  font-size: var(--solis-taille-xs);
}

/* Le fil chronologique d'une affaire : ce qui s'est dit, du plus récent. */
.solis-fil { display: flex; flex-direction: column; gap: 0; padding: var(--solis-espace-4); }
.solis-fil-l {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: var(--solis-espace-3);
  padding-bottom: var(--solis-espace-4);
  position: relative;
}
.solis-fil-l:last-child { padding-bottom: 0; }
.solis-fil-l::before {
  content: "";
  position: absolute;
  left: 0.62rem; top: 1rem; bottom: 0;
  width: 2px;
  background: var(--solis-bordure);
}
.solis-fil-l:last-child::before { display: none; }
.solis-fil-l .pt {
  width: 0.7rem; height: 0.7rem; border-radius: 50%;
  margin: 0.3rem 0 0 0.3rem;
  background: var(--solis-succes);
  box-shadow: 0 0 0 2px var(--solis-fond), 0 0 0 4px var(--solis-succes-doux);
}
.solis-fil-l[data-reponse="non"] .pt { background: var(--solis-refus); box-shadow: 0 0 0 2px var(--solis-fond), 0 0 0 4px var(--solis-refus-doux); }
.solis-fil-l[data-reponse="inconnu"] .pt { background: var(--solis-texte-tertiaire); box-shadow: 0 0 0 2px var(--solis-fond), 0 0 0 4px var(--solis-fond-survol); }
.solis-fil-l .tete {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--solis-espace-2);
  font-size: var(--solis-taille-s);
}
.solis-fil-l p { margin: 0.35rem 0 0; font-size: var(--solis-taille-s); line-height: 1.55; }
.solis-fil-l p.suite { color: var(--solis-texte-tertiaire); font-size: var(--solis-taille-xs); }

/* ------------------------------------------ consultations : la boîte (B10) */
.solis-boite {
  display: grid;
  grid-template-columns: minmax(20rem, 26rem) 1fr;
  gap: var(--solis-espace-4);
  align-items: start;
}
@media (max-width: 62rem) { .solis-boite { grid-template-columns: 1fr; } }

.solis-mail {
  border: 1px solid var(--solis-bordure);
  border-radius: var(--solis-rayon-m);
  padding: var(--solis-espace-3);
  margin: 0 var(--solis-espace-4) var(--solis-espace-3);
  cursor: pointer;
  transition: var(--solis-transition);
  background: var(--solis-fond);
}
.solis-mail:hover { border-color: var(--solis-bordure-forte); }
.solis-mail[data-choisi="oui"] {
  border-color: var(--solis-accent);
  background: var(--solis-accent-doux);
}
.solis-mail .de {
  display: flex; align-items: center; gap: var(--solis-espace-2);
  font-size: var(--solis-taille-s); font-weight: 600;
}
.solis-mail .de .qd {
  margin-left: auto; font-weight: 400;
  font-size: var(--solis-taille-xs); color: var(--solis-texte-tertiaire);
}
.solis-mail .obj {
  font-size: var(--solis-taille-s); color: var(--solis-texte-secondaire);
  margin-top: 0.2rem; line-height: 1.4;
}
.solis-mail .pj {
  font-size: var(--solis-taille-xs); color: var(--solis-texte-tertiaire);
  margin-top: 0.3rem;
}

/* La jauge de confiance : un score doit se voir avant de se lire. */
.solis-jauge {
  height: 0.3rem; border-radius: 999px;
  background: var(--solis-fond-survol);
  overflow: hidden; margin-top: 0.4rem;
}
.solis-jauge i { display: block; height: 100%; background: var(--solis-accent); }

/* Les indices : ce qui a joué pour, ce qui a joué contre. */
.solis-indice {
  display: flex; align-items: baseline; gap: var(--solis-espace-2);
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--solis-bordure);
  font-size: var(--solis-taille-s);
}
.solis-indice:last-child { border-bottom: none; }
.solis-indice .p {
  font-variant-numeric: tabular-nums; font-weight: 600;
  min-width: 2.6rem; text-align: right;
}
.solis-indice[data-sens="pour"] .p { color: var(--solis-succes); }
.solis-indice[data-sens="contre"] .p { color: var(--solis-refus); }
.solis-indice .ou {
  font-size: var(--solis-taille-xs); color: var(--solis-texte-tertiaire);
  min-width: 5.5rem;
}
.solis-indice .ex {
  color: var(--solis-texte-tertiaire); font-size: var(--solis-taille-xs);
  margin-left: auto; max-width: 22rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.solis-questions { margin: 0; padding: 0; list-style: none; }
.solis-questions li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.5rem;
  border-bottom: 1px solid var(--solis-bordure);
  font-size: var(--solis-taille-s); line-height: 1.5;
}
.solis-questions li:last-child { border-bottom: none; }
.solis-questions li::before {
  content: "?"; position: absolute; left: 0; top: 0.45rem;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--solis-accent-doux); color: var(--solis-accent);
  font-size: 0.7rem; font-weight: 700;
  display: grid; place-items: center;
}

.solis-paire {
  display: flex; justify-content: space-between; gap: var(--solis-espace-3);
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--solis-bordure);
  font-size: var(--solis-taille-s);
}
.solis-paire:last-child { border-bottom: none; }
.solis-paire b { font-variant-numeric: tabular-nums; text-align: right; }

/* ------------------------------------------------------------- passation
   B11. Deux besoins nouveaux : une note qui alerte sans crier, et un bloc
   de code lisible pour montrer ce qui partira chez Dolibarr avant que l'API
   existe — on ne demande pas de faire confiance à une charge utile qu'on ne
   peut pas lire. */

.solis-note[data-ton="bloquant"] {
  color: var(--solis-refus);
  font-weight: 600;
}

.solis-code {
  margin: 0 var(--solis-espace-4) var(--solis-espace-3);
  padding: var(--solis-espace-3);
  max-height: 22rem;
  overflow: auto;
  background: var(--solis-fond-secondaire);
  border: 1px solid var(--solis-bordure);
  border-radius: var(--solis-rayon-s);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: var(--solis-taille-xs);
  line-height: 1.45;
  white-space: pre;
}

/* --------------------------------------------------- bandeau d'import
   B12. Le début de semaine : SOLIS propose la reprise du classeur, il ne la
   fait pas tout seul. Le bandeau reste tant que personne n'a tranché — il
   n'est donc pas alarmant, il est présent. */

.solis-bandeau-import {
  display: flex;
  flex-wrap: wrap;
  gap: var(--solis-espace-2);
  align-items: center;
  padding: var(--solis-espace-3) var(--solis-espace-4);
  background: var(--solis-accent-doux);
  color: var(--solis-texte);
  border-bottom: 1px solid var(--solis-bordure);
  font-size: var(--solis-taille-s);
}
.solis-bandeau-import strong { color: var(--solis-accent); }
.solis-bandeau-import .solis-bouton { margin-left: auto; }
.solis-bandeau-import .solis-bouton + .solis-bouton { margin-left: 0; }

/* Une action qui aboutit se dit, elle aussi (R-v30.4). Même emplacement que
   les refus : c'est là que l'œil va après un clic. */
.solis-annonce {
  display: flex;
  gap: var(--solis-espace-2);
  align-items: center;
  margin: var(--solis-espace-3) var(--solis-espace-4) 0;
  padding: var(--solis-espace-3) var(--solis-espace-4);
  background: var(--solis-succes-doux);
  color: var(--solis-succes);
  border-radius: var(--solis-rayon-s);
  font-size: var(--solis-taille-s);
}

/* =========================================================================
   B13 — le tableur du pipeline
   -------------------------------------------------------------------------
   Une grille large, un filtre par colonne, et la bande d'indicateurs qui
   suit. Deux contraintes commandent tout ce qui suit :

   1. la grille doit tenir à l'écran **sans que l'en-tête ni les deux
      premières colonnes s'échappent** — sinon, à la vingtième colonne, on ne
      sait plus de quelle affaire on parle ;
   2. le panneau de filtre ne peut pas vivre dans une cellule : le conteneur
      défile, il serait coupé. Il est donc **hors du tableau**, ancré au
      bouton qui l'ouvre.
   ========================================================================= */

/* La page reste étroite ; ce seul écran prend la largeur qu'il lui faut. */
body[data-vue="tableur"] main { max-width: none; }

.solis-tableur-cadre {
  background: var(--solis-surface);
  border: 1px solid var(--solis-bordure);
  border-radius: var(--solis-rayon-m);
  overflow: auto;
  max-height: 62vh;
  margin-bottom: var(--solis-espace-3);
}

.solis-tableur {
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--solis-taille-s);
  white-space: nowrap;
  /* Largeurs imposées par le <colgroup>. En disposition automatique, la
     colonne « Affaire » se dimensionnait sur le nom le plus long du
     portefeuille et, une fois figée, recouvrait ses voisines. */
  table-layout: fixed;
  /* La largeur totale est posée par le script, en pixels : `max-content`
     laissait la disposition fixe redistribuer le surplus et les colonnes
     dépassaient leur largeur déclarée de moitié. */
}

.solis-tableur th,
.solis-tableur td {
  border-bottom: 1px solid var(--solis-bordure);
  border-right: 1px solid var(--solis-bordure);
  padding: var(--solis-espace-2) var(--solis-espace-3);
  background: var(--solis-surface);
  /* Ce qui dépasse se coupe proprement ; la valeur entière reste au survol. */
  overflow: hidden;
  text-overflow: ellipsis;
}

.solis-tableur thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--solis-fond-secondaire);
  text-align: left;
  font-weight: var(--solis-graisse-moyenne);
  font-size: var(--solis-taille-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--solis-texte-tertiaire);
}
.solis-tableur thead tr:nth-child(2) th {
  top: 2.15rem;
  z-index: 3;
  text-transform: none;
  letter-spacing: 0;
  padding: var(--solis-espace-1) var(--solis-espace-2);
}

/* Les deux premières colonnes ne défilent pas : on doit toujours savoir de
   quelle affaire parle la ligne qu'on lit. */
.solis-tableur [data-fige="1"] { position: sticky; left: 0; z-index: 2; }
/* Le décalage de la deuxième colonne figée est **mesuré** après le rendu :
   la première colonne n'a pas la même largeur selon les données, et une
   valeur en dur la ferait chevaucher la troisième. */
.solis-tableur [data-fige="2"] { position: sticky; left: var(--t-fige2, 7rem); z-index: 2; }
/* Les cellules figées de l'en-tête passent **au-dessus** de celles qui
   défilent — dans les deux lignes d'en-tête. Le sélecteur est volontairement
   plus spécifique que celui de la ligne de filtres : à égalité, c'est
   l'ordre du document qui tranche, et la colonne qui défile gagnait. */
.solis-tableur thead tr th[data-fige] { z-index: 5; }
.solis-tableur [data-fige="2"] { border-right: 1px solid var(--solis-bordure-forte); }

.solis-tableur tbody tr:hover td { background: var(--solis-fond-survol); }
.solis-tableur td.nombre { text-align: right; font-variant-numeric: tabular-nums; }
.solis-tableur td.vide { color: var(--solis-texte-tertiaire); font-style: italic; }

.solis-entete-tri {
  all: unset;
  cursor: pointer;
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.solis-entete-tri:focus-visible { box-shadow: var(--solis-focus); border-radius: var(--solis-rayon-s); }
.solis-entete-tri[data-trie] { color: var(--solis-accent); }

/* Le bouton de filtre d'une colonne. Il dit son état sans qu'on l'ouvre :
   « Tous » ne se remarque pas, un filtre posé se voit. */
.solis-filtre-bouton {
  font: inherit;
  font-size: var(--solis-taille-xs);
  width: 100%;
  text-align: left;
  padding: 2px var(--solis-espace-2);
  border: 1px solid var(--solis-bordure);
  border-radius: var(--solis-rayon-s);
  background: var(--solis-surface);
  color: var(--solis-texte-tertiaire);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}
.solis-filtre-bouton:hover { border-color: var(--solis-bordure-forte); }
.solis-filtre-bouton[data-pose="oui"] {
  background: var(--solis-accent-doux);
  border-color: var(--solis-accent);
  color: var(--solis-accent);
  font-weight: var(--solis-graisse-moyenne);
}

.solis-panneau {
  position: fixed;
  z-index: 40;
  min-width: 15rem;
  max-width: 22rem;
  background: var(--solis-surface);
  border: 1px solid var(--solis-bordure-forte);
  border-radius: var(--solis-rayon-m);
  box-shadow: var(--solis-ombre-2);
  padding: var(--solis-espace-3);
  font-size: var(--solis-taille-s);
}
.solis-panneau h3 {
  margin: 0 0 var(--solis-espace-2);
  font-size: var(--solis-taille-s);
  font-weight: var(--solis-graisse-forte);
}
.solis-panneau .solis-note { margin: 0 0 var(--solis-espace-2); }
.solis-panneau-liste {
  max-height: 15rem;
  overflow: auto;
  margin: var(--solis-espace-2) 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.solis-panneau-liste label {
  display: flex;
  gap: var(--solis-espace-2);
  align-items: center;
  padding: 2px var(--solis-espace-1);
  border-radius: var(--solis-rayon-s);
  cursor: pointer;
}
.solis-panneau-liste label:hover { background: var(--solis-fond-survol); }
.solis-panneau-liste span { margin-left: auto; color: var(--solis-texte-tertiaire); }
.solis-panneau-liste label[data-reste="0"] { color: var(--solis-texte-tertiaire); }
.solis-panneau-pied {
  display: flex;
  gap: var(--solis-espace-2);
  align-items: center;
  margin-top: var(--solis-espace-2);
}
.solis-panneau-pied .solis-pousse { flex: 1; }

/* La bande d'indicateurs. Serrée : dix chiffres doivent tenir sans faire
   défiler, sinon on ne les lit plus en filtrant. */
.solis-bande {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--solis-espace-2);
  margin-bottom: var(--solis-espace-3);
}
.solis-bande div {
  background: var(--solis-surface);
  border: 1px solid var(--solis-bordure);
  border-radius: var(--solis-rayon-m);
  padding: var(--solis-espace-3);
}
.solis-bande dt {
  font-size: var(--solis-taille-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--solis-texte-tertiaire);
  margin-bottom: var(--solis-espace-1);
}
.solis-bande dd {
  margin: 0;
  font-size: var(--solis-taille-l);
  font-weight: var(--solis-graisse-forte);
  font-variant-numeric: tabular-nums;
}
.solis-bande dd small {
  display: block;
  font-size: var(--solis-taille-xs);
  font-weight: var(--solis-graisse-normale);
  color: var(--solis-texte-secondaire);
}
.solis-bande div[data-filtre="oui"] { border-color: var(--solis-accent); }
.solis-bande div[data-filtre="oui"] dd { color: var(--solis-accent); }

/* La colonne qu'on vient d'afficher se signale le temps qu'on la trouve.
   Sans ce marquage, elle apparaissait hors champ à droite : on cochait, et
   rien ne semblait se produire. */
.solis-tableur [data-neuve] {
  background: var(--solis-accent-doux);
  transition: background 400ms ease;
}
.solis-tableur thead th[data-neuve] { color: var(--solis-accent); }

/* Trois boutons qui vont ensemble restent ensemble quand la barre passe à la
   ligne : « Totaux… » seul à droite et « Colonnes… » en dessous, on ne les
   trouve plus. */
.solis-groupe-boutons {
  display: inline-flex;
  gap: var(--solis-espace-2);
  align-items: center;
}

/* La poignée de redimensionnement : six pixels sur le bord droit de chaque
   en-tête. Discrète au repos, elle se teinte quand on la vise — une poignée
   qu'on ne devine pas n'est jamais employée. */
.solis-poignee {
  position: absolute;
  top: 0;
  right: -3px;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  z-index: 6;
  touch-action: none;
}
.solis-poignee:hover::after,
.solis-poignee[data-tire="oui"]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 3px;
  width: 1px;
  height: 100%;
  background: var(--solis-accent);
  box-shadow: 0 0 0 1px var(--solis-accent);
}
body[data-redim="oui"] { cursor: col-resize; user-select: none; }

/* L'écran de connexion. Il couvre tout : tant que l'identité n'est pas
   établie, une application à moitié chargée qui refusera toutes ses requêtes
   est plus déroutante qu'une porte fermée. */
.solis-connexion {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--solis-fond-secondaire);
}
.solis-connexion-boite {
  background: var(--solis-surface);
  border: 1px solid var(--solis-bordure);
  border-radius: var(--solis-rayon-l);
  box-shadow: var(--solis-ombre-2);
  padding: var(--solis-espace-6);
  max-width: 30rem;
  text-align: center;
}
.solis-connexion-boite h1 {
  font-size: var(--solis-taille-xl);
  margin: var(--solis-espace-4) 0 var(--solis-espace-2);
}
.solis-connexion-boite p { color: var(--solis-texte-secondaire); }
.solis-connexion-boite .solis-bouton { margin-top: var(--solis-espace-4); }

/* Le bandeau d'annonce posé par l'administrateur (v38). Trois tons, pas dix :
   un ton qu'on choisit parmi dix ne veut plus rien dire pour celui qui lit. */
.solis-bandeau-annonce {
  display: flex;
  gap: var(--solis-espace-2);
  align-items: center;
  padding: var(--solis-espace-3) var(--solis-espace-4);
  border-bottom: 1px solid var(--solis-bordure);
  font-size: var(--solis-taille-s);
  background: var(--solis-info-doux);
  color: var(--solis-texte);
}
.solis-bandeau-annonce strong { color: var(--solis-accent); }
.solis-bandeau-annonce[data-ton="maintenance"] {
  background: var(--solis-attention-doux);
}
.solis-bandeau-annonce[data-ton="maintenance"] strong { color: var(--solis-attention); }
.solis-bandeau-annonce[data-ton="important"] {
  background: var(--solis-refus-doux);
}
.solis-bandeau-annonce[data-ton="important"] strong { color: var(--solis-refus); }

/* Le panneau de signalement réutilise .solis-panneau ; il lui faut juste de
   la place pour respirer, et un espacement entre ses champs. */
#solis-panneau[data-signalement] { min-width: 26rem; }
#solis-panneau[data-signalement] .solis-champ { margin-bottom: var(--solis-espace-2); }

/* La progression d'une opération longue (v51). Une seule bande, sous
   l'en-tête, qui dit trois choses et pas une de plus : ce qui tourne, où on
   en est, et d'où vient l'estimation. L'estimation est la durée MESURÉE la
   dernière fois sur ce poste — jamais un chiffre inventé : la première fois,
   la barre le dit et ne promet rien (J5). */
.solis-progression {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  gap: var(--solis-espace-3);
  align-items: center;
  padding: var(--solis-espace-2) var(--solis-espace-4);
  border-bottom: 1px solid var(--solis-bordure);
  background: var(--solis-accent-doux);
  font-size: var(--solis-taille-s);
  color: var(--solis-texte);
}
.solis-progression[hidden] { display: none; }
.solis-progression .piste {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--solis-bordure);
  overflow: hidden;
}
.solis-progression .piste > div {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--solis-accent);
  transition: width 0.4s linear;
}
/* Durée inconnue : la barre balaie au lieu de promettre. */
.solis-progression[data-inconnue] .piste > div {
  width: 30% !important;
  animation: solis-balayage 1.4s ease-in-out infinite;
}
@keyframes solis-balayage {
  0%   { margin-left: 0; }
  50%  { margin-left: 70%; }
  100% { margin-left: 0; }
}

/* Les captures d'écran d'une observation (v54). Des vignettes, pas des
   images pleine taille : une liste d'observations doit rester une liste. Le
   clic ouvre la capture en grand, dans un onglet — c'est là qu'on lit un
   détail, et le navigateur sait déjà zoomer. */
.solis-captures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--solis-espace-2);
  margin-top: var(--solis-espace-2);
}
.solis-captures img {
  display: block;
  max-height: 7rem;
  max-width: 14rem;
  border: 1px solid var(--solis-bordure);
  border-radius: var(--solis-rayon, 4px);
  background: var(--solis-fond-secondaire);
}
.solis-capture-vignette:hover img { border-color: var(--solis-accent); }
.solis-capture figcaption {
  display: flex;
  gap: var(--solis-espace-2);
  align-items: center;
  margin-top: 0.25rem;
  font-size: var(--solis-taille-s);
}
.solis-captures-barre {
  display: flex;
  gap: var(--solis-espace-2);
  align-items: center;
  margin-top: var(--solis-espace-3);
  padding-top: var(--solis-espace-2);
  border-top: 1px solid var(--solis-bordure);
  font-size: var(--solis-taille-s);
}