/*
 * SlushTrack — couche applicative par-dessus le design system Modernist (ds.css).
 *
 * ds.css apporte les tokens (--color-*, --space-*, --font-*, --radius-* = 0, --shadow-*)
 * et les composants génériques (.btn, .input, .tag, .table…). Ce fichier ajoute :
 *   1. les tokens de marque Simplex absents du DS (le bleu) ;
 *   2. les composants propres aux trois écrans.
 *
 * Règle de couleur (voir README du handoff) :
 *   · bleu #1668c9  → marque, action primaire, statut « en route », tracking ;
 *   · rouge --color-accent → alertes uniquement (réparation, hors service, erreurs).
 */

:root {
  --sx-blue: #1668c9;
  --sx-blue-dark: #0f4e99;
  --sx-blue-light: #e4eefb;
  --sx-green: #2e7d32;
  --sx-jaune: #f2b705;
  --sx-header-h: 60px;

  /* Échelle d'attente (vert → jaune → rouge) d'un appel en attente de technicien.
     Le dashboard (`.sx-row--attente_*`) et la liste d'appels (`.sx-tr--attente_*`)
     enrobent tous deux leur ligne avec ces teintes : une seule définition, sinon les
     deux écrans dérivent l'un de l'autre. Dosage croissant et non uniforme, pour que
     la progression reste lisible au lieu de donner trois pastels presque blancs. */
  --sx-attente-vert-fond: color-mix(in srgb, var(--sx-green) 18%, white);
  --sx-attente-jaune-fond: color-mix(in srgb, var(--sx-jaune) 22%, white);
  --sx-attente-rouge-fond: color-mix(in srgb, var(--color-accent-600) 32%, white);
  --sx-attente-vert-survol: color-mix(in srgb, var(--sx-green) 28%, white);
  --sx-attente-jaune-survol: color-mix(in srgb, var(--sx-jaune) 35%, white);
  --sx-attente-rouge-survol: color-mix(in srgb, var(--color-accent-600) 45%, white);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

html, body { margin: 0; height: 100%; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
a { color: var(--sx-blue); }
:focus-visible { outline: 2px solid var(--sx-blue); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--sx-blue) 25%, transparent); }

.sx-shell { position: relative; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.sx-muted { color: var(--color-neutral-600); }
.sx-mono { font-variant-numeric: tabular-nums; }
.sx-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.sx-scroll::-webkit-scrollbar-thumb { background: var(--color-neutral-400); }
.sx-hidden { display: none !important; }

/* Boutons de marque : le DS n'a qu'un accent rouge, réservé aux alertes. */
.btn-sx { background: var(--sx-blue); color: #fff; border-color: var(--sx-blue); }
.btn-sx:hover { background: var(--sx-blue-dark); }
.btn-sx:active { background: #0c3f7d; }
.btn-noir { background: var(--color-text); color: var(--color-bg); }
.btn-noir:hover { background: #000; }
.btn-lg { padding: 14px; font-size: 15px; justify-content: center; }

/* ── En-tête ──────────────────────────────────────────────────────────────── */

.sx-header {
  position: relative;
  display: flex; align-items: center; gap: var(--space-4);
  padding: 0 20px; height: var(--sx-header-h); flex: none;
  border-bottom: 2px solid var(--color-divider); background: var(--color-bg);
}
/* Bouton ☰ — masqué sur grand écran, seule la règle mobile plus bas l'affiche.
   Pas de `margin-left: auto` ici : le bouton est le PREMIER enfant de l'en-tête, une
   marge auto le poussait donc vers la droite au lieu de le laisser au bord — et elle
   se disputait l'espace libre avec celle de `.sx-header-droite`. */
.sx-menu-toggle { display: none; }
/* Barres de 2px, comme les filets de l'interface (bordure de l'en-tête, séparateur de
   `.sx-brand-app`, cadre du calendrier) : l'icône appartient à la même grille. */
.sx-menu-icone { width: 20px; height: 20px; }
.sx-menu-toggle:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.sx-brand { display: flex; align-items: center; gap: 10px; }
.sx-brand-logo { height: 34px; width: auto; object-fit: contain; flex: none; }
.sx-brand-nom {
  font-family: var(--font-heading); font-weight: 800; font-size: 22px;
  letter-spacing: -0.02em; color: var(--sx-blue);
}
.sx-brand-app {
  font-family: var(--font-heading); font-weight: 700; font-size: 15px;
  letter-spacing: 0.14em; text-transform: uppercase;
  border-left: 2px solid var(--color-divider); padding-left: 10px;
}
.sx-header-meta { font-size: 12px; color: var(--color-neutral-600); letter-spacing: 0.04em; }
.sx-header-droite { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.sx-header-droite a { font-size: 12px; color: var(--color-neutral-700); text-decoration: none;
  border-bottom: 1px solid var(--color-divider); }
.sx-avatar {
  width: 30px; height: 30px; background: var(--color-text); color: var(--color-bg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 13px; flex: none;
}
.sx-user { display: flex; align-items: center; gap: 8px; }
.sx-user-nom { font-size: 13px; font-weight: 600; line-height: 1.1; }
.sx-user-role { font-size: 11px; color: var(--color-neutral-600); line-height: 1.1; }

/* ── Ruban de navigation ──────────────────────────────────────────────────── *
 * À gauche, sous l'en-tête — partagé par le dashboard et toutes les pages de
 * gestion (core/backoffice_base.html). Toujours visible sur grand écran ;
 * panneau déroulant sous l'en-tête sur petit écran (voir le @media plus bas
 * et core/ruban.js pour la bascule). */
.sx-corps { flex: 1; min-height: 0; display: flex; }
.sx-ruban {
  flex: none; width: 208px; display: flex; flex-direction: column; gap: 2px;
  padding: 12px 10px; overflow-y: auto;
  border-right: 2px solid var(--color-divider); background: var(--color-surface);
}
.sx-ruban-lien {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  font-family: var(--font-heading); font-weight: 600; font-size: 13px;
  color: var(--color-neutral-700); text-decoration: none; border-left: 3px solid transparent;
}
.sx-ruban-lien:hover { background: color-mix(in srgb, var(--sx-blue) 7%, transparent); color: var(--sx-blue-dark); }
.sx-ruban-lien[aria-current="page"] {
  background: var(--sx-blue-light); color: var(--sx-blue-dark);
  border-left-color: var(--sx-blue); font-weight: 700;
}
.sx-ruban-icone { font-size: 15px; flex: none; width: 18px; text-align: center; }

/* Politique de confidentialité / Admin : secondaires, poussées en bas du ruban
   et plus discrètes — pas au même niveau que la navigation courante. */
.sx-ruban-bas {
  margin-top: auto; padding-top: 8px; border-top: 1px solid var(--color-divider);
  display: flex; flex-direction: column; gap: 2px;
}
.sx-ruban-lien--secondaire { padding: 6px 10px; font-size: 11px; font-weight: 500; }
.sx-ruban-lien--secondaire .sx-ruban-icone { font-size: 12px; }

/* Zone de contenu, à droite du ruban. Par défaut : page qui défile normalement
   (pages de gestion). `.sx-contenu--dashboard` (dashboard uniquement) reprend
   le comportement plein écran/scroll interne de l'ancien `.sx-app`. */
.sx-contenu { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; }
.sx-contenu--dashboard { display: flex; flex-direction: column; overflow: hidden; }

/* ── Barre d'outils ───────────────────────────────────────────────────────── */

.sx-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; flex: none;
  padding: 12px 16px; border-bottom: 2px solid var(--color-divider); background: var(--color-bg);
}
#compteurs { flex-shrink: 0; }
.sx-chip {
  display: flex; flex-direction: column; gap: 1px; padding: 5px 9px;
  border: 2px solid var(--color-divider); background: var(--color-bg);
  color: var(--color-text); cursor: pointer; user-select: none; text-align: left;
  font-family: var(--font-body); flex-shrink: 0;
}
.sx-chip:hover { background: color-mix(in srgb, var(--sx-blue) 6%, transparent); }
.sx-chip[aria-pressed="true"] {
  border-color: var(--sx-blue); background: var(--sx-blue-light); color: var(--sx-blue-dark);
}
.sx-chip-n { font-family: var(--font-heading); font-weight: 800; font-size: 18px; line-height: 1; }
.sx-chip-l { font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; }
.sx-spacer { flex: 1 1 160px; }
.sx-seg-opt { padding: 7px 12px; font-size: 13px; cursor: pointer; user-select: none; white-space: nowrap; }
.seg { flex-shrink: 0; }
.sx-seg-opt[aria-pressed="true"] { background: var(--sx-blue); color: #fff; }
.sx-seg-opt:not([aria-pressed="true"]):hover {
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
}

/* ── Grille principale ────────────────────────────────────────────────────── */

/* Liste/dispatch en premier (DOM et grille) : la carte occupe la moitié
   de l'écran, l'autre moitié va à la liste/dispatch. */
.sx-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; }
.sx-main[data-vue="carte"] { grid-template-columns: 1fr; }
.sx-main[data-vue="liste"] { grid-template-columns: 1fr; }
.sx-carte-zone { position: relative; min-width: 0; }
.sx-carte { position: absolute; inset: 0; }

/* ── Carte Leaflet ────────────────────────────────────────────────────────── */

.leaflet-container { font-family: var(--font-body); background: #dfe6ea; }
.leaflet-popup-content-wrapper, .leaflet-control { border-radius: 0 !important; }
/* Crédit MapTiler/OpenStreetMap : exigé par leur licence d'utilisation des tuiles,
   on ne peut pas l'enlever — mais rien n'oblige à ce qu'il saute aux yeux. */
.leaflet-control-attribution {
  font-size: 8px; padding: 0 3px; background: color-mix(in srgb, var(--color-bg) 55%, transparent);
  opacity: 0.6;
}
.leaflet-control-attribution:hover { opacity: 1; }
.leaflet-control-attribution a { color: inherit; }
.leaflet-popup-content-wrapper { box-shadow: var(--shadow-md); }
.leaflet-popup-content { margin: 0; font-family: var(--font-body); }
.sx-pin {
  width: 34px; height: 34px; background: var(--sx-blue); color: #fff;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
/* Statut d'appel de service reflété sur le pin (service/views.py,
   statuts_clients_carte). En attente d'un technicien (nouveau/assigné) :
   dégradé vert → jaune → rouge selon le nombre de jours d'attente — un bris
   signalé il y a 10 minutes n'a pas la même urgence qu'un signalé il y a
   8 jours. Le pin « en route » reste bleu : c'est déjà la couleur « en route »
   partout ailleurs dans l'app (PWA, page publique, suivi live) — seule
   l'anneau pulsant le distingue d'un pin normal, statique. */
.sx-pin--attente_vert { background: var(--sx-green); animation: sx-pulse-vert 1.6s ease-out infinite; }
.sx-pin--attente_jaune { background: var(--sx-jaune); color: var(--color-text); animation: sx-pulse-jaune 1.6s ease-out infinite; }
.sx-pin--attente_rouge { background: var(--color-accent-600); animation: sx-pulse-rouge 1.6s ease-out infinite; }
.sx-pin--en_route { animation: sx-pulse 1.6s ease-out infinite; }
@keyframes sx-pulse-vert {
  0% { box-shadow: 0 0 0 4px rgba(46, 125, 50, 0.4); }
  70% { box-shadow: 0 0 0 16px rgba(46, 125, 50, 0); }
  100% { box-shadow: 0 0 0 4px rgba(46, 125, 50, 0); }
}
@keyframes sx-pulse-jaune {
  0% { box-shadow: 0 0 0 4px rgba(242, 183, 5, 0.4); }
  70% { box-shadow: 0 0 0 16px rgba(242, 183, 5, 0); }
  100% { box-shadow: 0 0 0 4px rgba(242, 183, 5, 0); }
}
@keyframes sx-pulse-rouge {
  0% { box-shadow: 0 0 0 4px rgba(236, 48, 19, 0.35); }
  70% { box-shadow: 0 0 0 16px rgba(236, 48, 19, 0); }
  100% { box-shadow: 0 0 0 4px rgba(236, 48, 19, 0); }
}
.sx-depot {
  width: 78px; height: 26px; background: var(--color-text); color: var(--color-bg);
  border: 2px solid #fff; font-family: var(--font-heading); font-weight: 700;
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
  display: flex; align-items: center; justify-content: center;
}
.sx-tech {
  width: 26px; height: 26px; border-radius: 50%; background: var(--sx-blue);
  border: 3px solid #fff; animation: sx-pulse 1.6s ease-out infinite;
}
@keyframes sx-pulse {
  0% { box-shadow: 0 0 0 4px rgba(22, 104, 201, 0.35); }
  70% { box-shadow: 0 0 0 16px rgba(22, 104, 201, 0); }
  100% { box-shadow: 0 0 0 4px rgba(22, 104, 201, 0); }
}
.sx-popup { min-width: 190px; padding: 10px 12px; }
.sx-popup-titre { font-family: var(--font-heading); font-weight: 800; font-size: 15px; }
.sx-popup-meta { font-size: 12px; color: var(--color-neutral-600); margin-bottom: 6px; }
.sx-popup-ligne {
  display: flex; justify-content: space-between; gap: 12px; padding: 3px 0;
  border-top: 1px solid #e0dede; font-size: 12px;
}
.sx-popup-ligne b { font-family: var(--font-heading); font-weight: 600; }
.sx-popup-alerte {
  display: inline-block; margin-bottom: 6px; padding: 2px 8px;
  font-family: var(--font-heading); font-weight: 700; font-size: 10px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.sx-popup-alerte--attente_vert { background: #e3f3ea; color: #1a7f4b; }
.sx-popup-alerte--attente_jaune { background: #fff6d8; color: #7a5b00; }
.sx-popup-alerte--attente_rouge { background: var(--color-accent-200); color: var(--color-accent-700); }
.sx-popup-alerte--en_route { background: var(--sx-blue-light); color: var(--sx-blue-dark); }
.sx-popup-lien {
  display: inline-block; margin-top: 8px; font-family: var(--font-heading);
  font-weight: 700; font-size: 12px; color: var(--sx-blue); text-decoration: none;
  border-bottom: 1px solid var(--sx-blue);
}
.sx-popup-lien:hover { color: var(--sx-blue-dark); border-color: var(--sx-blue-dark); }

/* ── Carte « suivi live » ─────────────────────────────────────────────────── */

.sx-live {
  position: absolute; left: 14px; bottom: 14px; z-index: 500; width: 300px;
  background: var(--color-bg); border: 2px solid var(--color-text); box-shadow: var(--shadow-lg);
}
.sx-live-tete {
  background: var(--sx-blue); color: #fff; padding: 8px 12px;
  display: flex; align-items: center; gap: 8px;
}
.sx-live-point { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.sx-live-point.sx-anime { animation: sx-clignote 1.4s ease-out infinite; }
@keyframes sx-clignote { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.sx-live-titre {
  font-family: var(--font-heading); font-weight: 700; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.sx-live-corps { padding: 12px; }
.sx-live-qui { font-size: 13px; color: var(--color-neutral-700); margin-bottom: 2px; }
.sx-live-dest {
  font-family: var(--font-heading); font-weight: 700; font-size: 16px;
  line-height: 1.15; margin-bottom: 10px;
}
.sx-live-ligne { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.sx-live-cap {
  font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-neutral-600);
}
.sx-live-eta {
  margin-left: auto; font-family: var(--font-heading); font-weight: 800;
  font-size: 20px; color: var(--sx-blue);
}
.sx-live-notes {
  font-size: 11px; color: var(--color-neutral-600); line-height: 1.35;
  border-top: 1px solid var(--color-divider); padding-top: 8px; margin-bottom: 10px;
}
.sx-live-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sx-jauge { height: 6px; background: var(--color-neutral-200); margin-bottom: 12px; }
.sx-jauge > div { height: 100%; background: var(--sx-blue); transition: width 0.6s linear; }
code.sx-code { background: var(--color-neutral-200); padding: 1px 5px; font-size: 11px; }

/* Légende des couleurs de pin « bris en attente » (voir sx-pin--attente_*).
   En bas à droite — le panneau « suivi live », lui, reste en bas à gauche : les
   deux ne se superposent plus, plus besoin de décaler l'un quand l'autre s'affiche. */
/* Panneau « Tournées / Trajet » en haut à droite de la carte (le zoom Leaflet est à gauche). */
.sx-outils-carte {
  position: absolute; top: 10px; right: 10px; z-index: 400; width: 232px;
  display: flex; flex-direction: column; gap: 6px; padding: 10px;
  background: var(--color-bg); border: 2px solid var(--color-text); box-shadow: var(--shadow-md);
}
.sx-outils-carte .input { font-size: 12px; padding: 5px 8px; }
.sx-outils-cap {
  font-family: var(--font-heading); font-weight: 700; font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-600);
}
.sx-outils-resume { font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
.sx-outils-resume:empty { display: none; }
.sx-outils-ligne b { font-family: var(--font-heading); }
.sx-outils-alerte { color: var(--color-accent-700); font-size: 11px; }
.sx-outils-trajet { border-top: 1px solid var(--color-divider); padding-top: 6px; font-size: 12px; }
.sx-outils-effacer {
  font: inherit; font-size: 11px; font-weight: 700; margin-top: 4px; padding: 3px 8px;
  border: 1px solid var(--color-divider); background: var(--color-bg); color: var(--color-neutral-700); cursor: pointer;
}
.sx-outils-effacer:hover { border-color: var(--sx-blue); color: var(--sx-blue-dark); }

/* Arrêt numéroté d'une tournée — bleu marque ; gris une fois la visite terminée. */
.sx-arret {
  min-width: 24px; height: 24px; padding: 0 5px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 11px; white-space: nowrap;
  background: var(--sx-blue); color: #fff; border: 2px solid #fff; box-shadow: var(--shadow-md);
}
.sx-arret--terminee { background: var(--color-neutral-500); }

/* Boutons de la bulle client : Itinéraire (Google Maps) + Voir le trajet. */
.sx-popup-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.sx-popup-bouton {
  font: inherit; font-size: 11px; font-weight: 700; padding: 4px 8px; cursor: pointer;
  border: 1px solid var(--sx-blue); background: var(--color-bg); color: var(--sx-blue-dark);
  text-decoration: none;
}
.sx-popup-bouton:hover { background: var(--sx-blue); color: #fff; }

.sx-legende {
  position: absolute; right: 10px; bottom: 10px; z-index: 400;
  background: var(--color-bg); border: 1px solid var(--color-text); box-shadow: var(--shadow-md);
  padding: 4px 6px; display: flex; flex-direction: column; gap: 1px; font-size: 8px;
}
.sx-legende-titre {
  font-family: var(--font-heading); font-weight: 700; font-size: 7px;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-neutral-600);
  margin-bottom: 1px;
}
.sx-legende-item { display: flex; align-items: center; gap: 4px; }
.sx-legende-point { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.sx-legende-point--vert { background: var(--sx-green); }
.sx-legende-point--jaune { background: var(--sx-jaune); }
.sx-legende-point--rouge { background: var(--color-accent-600); }

/* Pastille d'attente dans la liste des appels — même dégradé, hors carte/légende. */
.sx-attente-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; }
.sx-attente-badge .sx-legende-point { width: 9px; height: 9px; }

/* ── Liste d'inventaire ───────────────────────────────────────────────────── */

.sx-liste {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border-right: 2px solid var(--color-divider); background: var(--color-bg);
}
.sx-liste-tete {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 10px 14px; border-bottom: 2px solid var(--color-divider);
}
.sx-liste-titre {
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.sx-liste-corps { flex: 1; overflow: auto; }
.sx-row {
  /* Info client (gauche) — problème signalé (centré) — statut machine (droite) ;
     la bande de contrôles occupe toute la largeur en dessous (grid-column: 1/-1). */
  display: grid; grid-template-columns: minmax(140px, 1fr) minmax(160px, 1.3fr) auto;
  column-gap: 16px; row-gap: 4px;
  padding: 8px 14px; border-bottom: 1px solid var(--color-divider);
  cursor: pointer; width: 100%; text-align: left; background: none;
  border-left: 0; border-right: 0; border-top: 0; font: inherit; color: inherit;
}
.sx-row-info { display: block; min-width: 0; line-height: 1.3; }
.sx-row > .sx-statut { justify-self: end; align-self: start; }
.sx-row:hover { background: color-mix(in srgb, var(--sx-blue) 8%, transparent); }
/* Bris signalé en attente d'un technicien : la case au complet reprend la
   couleur de la légende de la carte (sx-legende-point--*), pas seulement le
   détail du problème — c'est plus facile à repérer d'un coup d'œil.
   Les 3 teintes viennent de la même formule (color-mix depuis la couleur
   pleine de la légende) avec un dosage croissant, pour que la progression
   vert → jaune → rouge reste lisible au lieu de 3 pastels presque blancs. */
.sx-row--attente_vert { background: var(--sx-attente-vert-fond); box-shadow: inset 3px 0 0 var(--sx-green); }
.sx-row--attente_jaune { background: var(--sx-attente-jaune-fond); box-shadow: inset 3px 0 0 var(--sx-jaune); }
.sx-row--attente_rouge { background: var(--sx-attente-rouge-fond); box-shadow: inset 3px 0 0 var(--color-accent-700); }
.sx-row--attente_vert:hover { background: var(--sx-attente-vert-survol); }
.sx-row--attente_jaune:hover { background: var(--sx-attente-jaune-survol); }
.sx-row--attente_rouge:hover { background: var(--sx-attente-rouge-survol); }
.sx-row-serie { font-family: var(--font-heading); font-weight: 400; font-size: 14px; }
.sx-row-modele {
  font-weight: 700; font-size: 12px; color: var(--color-neutral-600);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sx-row-lieu { font-family: var(--font-heading); font-weight: 600; font-size: 14px; }
.sx-row-tel {
  display: inline-block; margin-left: 8px; font-family: var(--font-body);
  font-weight: 700; font-size: 12px; color: var(--color-text);
  background: color-mix(in srgb, var(--sx-jaune) 35%, white); padding: 1px 5px;
}
.sx-lien-client {
  color: var(--sx-blue); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid transparent;
}
.sx-lien-client:hover { border-bottom-color: var(--sx-blue); }
.sx-row-entrepot { color: var(--sx-green); }
.sx-row-probleme {
  display: block; align-self: center; text-align: center;
  font-size: 12px; color: var(--color-neutral-700); line-height: 1.3;
}
/* Bande de contrôles (technicien, jour, statut d'appel, bouton d'assignation) :
   étale ces éléments sur toute la largeur de la ligne au lieu de les empiler dans
   une colonne étroite collée à droite — plus de place, plus facile à scanner. */
.sx-row-controles {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.sx-row-controles .sx-row-depuis { margin-left: auto; }
.sx-row-depuis { font-size: 11px; color: var(--color-neutral-500); white-space: nowrap; justify-self: end; }
.sx-vide { padding: 28px 14px; text-align: center; color: var(--color-neutral-600); font-size: 13px; }

/* ── Dispatch : pastilles techniciens à glisser sur une ligne ─────────────── */

.sx-dispatch {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 8px 14px; border-bottom: 2px solid var(--color-divider);
  background: var(--color-surface);
}
.sx-dispatch--occupe { pointer-events: none; opacity: 0.6; }
.sx-dispatch-cap {
  font-family: var(--font-heading); font-weight: 700; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-600);
  flex: none;
}
.sx-dispatch-pastilles { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.sx-dispatch-aide { font-size: 11px; color: var(--color-neutral-600); margin-left: auto; }

.sx-tech-pastille {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px;
  padding: 4px 9px; font: inherit; font-size: 12px; font-weight: 700;
  border: 2px solid var(--sx-blue); background: var(--sx-blue-light); color: var(--sx-blue-dark);
  cursor: grab; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.sx-tech-pastille:hover,
.sx-tech-pastille[aria-pressed="true"] { background: var(--sx-blue); color: #fff; }
.sx-tech-pastille--glissee { opacity: 0.35; cursor: grabbing; }
.sx-tech-initiales { font-family: var(--font-heading); font-weight: 800; }
.sx-tech-charge { font-variant-numeric: tabular-nums; opacity: 0.75; }

/* Pastille en lecture seule sur la ligne : indique qui s'en occupe, pas un contrôle. */
.sx-row-tech .sx-tech-pastille {
  cursor: default; touch-action: auto; min-height: 0; padding: 1px 6px; gap: 0;
}
.sx-row-tech .sx-tech-pastille--assignee { background: var(--sx-blue-light); color: var(--sx-blue-dark); }
.sx-row-tech-vide { font-size: 11px; color: var(--color-neutral-500); }

/* Fantôme qui suit le doigt / la souris pendant le glisser. */
.sx-fantome {
  position: fixed; left: 0; top: 0; z-index: 1200; pointer-events: none;
  box-shadow: var(--shadow-lg);
}
.sx-fantome--refus { border-color: var(--color-accent-600); background: var(--color-accent-200); color: var(--color-accent-700); }

/* Cible de dépôt — outline et non box-shadow : les .sx-row--attente_* portent déjà
   un box-shadow inset (ci-dessus), et deux règles de box-shadow ne se cumulent pas. */
body.sx-glisse-en-cours { cursor: grabbing; user-select: none; }
body.sx-glisse-en-cours .sx-row { cursor: grabbing; }
.sx-row--cible { outline: 2px solid var(--sx-blue); outline-offset: -2px; }
.sx-row--refus { outline: 2px solid var(--color-accent-600); outline-offset: -2px; opacity: 0.55; }
.sx-row--en-cours { opacity: 0.6; }

/* Chemin sans glisser (clavier / clic) : visible seulement en mode assignation. */
.sx-row-assigner {
  font: inherit; font-size: 11px; font-weight: 700; padding: 3px 8px;
  border: 2px solid var(--sx-blue); background: var(--color-bg); color: var(--sx-blue-dark);
  cursor: pointer; display: none;
}
.sx-row-assigner:hover { background: var(--sx-blue); color: #fff; }
#lignes[data-assignation="1"] .sx-row-assigner { display: inline-block; }

/* Toast — même grammaire que .sx-live : fond clair, règle 2px, radius 0. */
.sx-toast {
  position: fixed; right: 14px; bottom: 14px; z-index: 1300; max-width: 340px;
  padding: 10px 14px; font-size: 13px;
  background: var(--color-bg); border: 2px solid var(--color-text); box-shadow: var(--shadow-lg);
}
.sx-toast--erreur { border-color: var(--color-accent-600); color: var(--color-accent-700); }

/* ── Jour de dispatch : bouton par ligne + popover 14 jours + calendrier ───── */

.sx-row-jour {
  font: inherit; font-size: 11px; font-weight: 700; padding: 3px 8px;
  border: 1px solid var(--color-divider); background: var(--color-bg); color: var(--color-neutral-700);
  cursor: pointer; white-space: nowrap;
}
.sx-row-jour:hover { border-color: var(--sx-blue); color: var(--sx-blue-dark); }
.sx-row-jour--vide { color: var(--color-neutral-500); border-style: dashed; }

.sx-jour-popover {
  position: fixed; z-index: 1250; width: 268px;
  padding: 10px; background: var(--color-bg);
  border: 2px solid var(--color-text); box-shadow: var(--shadow-lg);
}
.sx-jour-cap {
  font-family: var(--font-heading); font-weight: 700; font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-600);
  margin-bottom: 8px;
}
.sx-jour-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 10px; }
.sx-jour-bouton {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 5px 0; font: inherit; border: 1px solid var(--color-divider);
  background: var(--color-bg); color: var(--color-text); cursor: pointer;
}
.sx-jour-bouton:hover { border-color: var(--sx-blue); }
.sx-jour-bouton--actif { background: var(--sx-blue); border-color: var(--sx-blue); color: #fff; }
.sx-jour-bouton-dow {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.75;
}
.sx-jour-bouton-num { font-family: var(--font-heading); font-weight: 700; font-size: 13px; }
.sx-jour-calendrier {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12px; color: var(--color-neutral-700); margin-bottom: 6px;
}
.sx-jour-calendrier input[type="date"] {
  font: inherit; font-size: 12px; padding: 3px 6px; border: 1px solid var(--color-divider);
  background: var(--color-bg); color: var(--color-text);
}
.sx-jour-retirer {
  width: 100%; font: inherit; font-size: 12px; padding: 5px 0; text-align: center;
  border: 1px solid var(--color-accent-600); background: var(--color-bg); color: var(--color-accent-700);
  cursor: pointer;
}
.sx-jour-retirer:hover { background: var(--color-accent-200); }

/* ── Pastilles de statut ──────────────────────────────────────────────────── */

.sx-statut {
  display: inline-block; padding: 2px 8px; white-space: nowrap;
  font-family: var(--font-heading); font-weight: 700; font-size: 11px;
  letter-spacing: 0.03em; text-transform: uppercase;
}
.sx-statut--chez_client { background: var(--sx-blue-light); color: var(--sx-blue-dark); border: 1px solid var(--sx-blue); }
.sx-statut--en_entrepot { background: var(--color-neutral-200); color: var(--color-neutral-800); border: 1px solid var(--color-neutral-400); }
.sx-statut--en_reparation { background: var(--color-accent-200); color: var(--color-accent-700); border: 1px solid var(--color-accent-600); }
.sx-statut--hors_service { background: var(--color-text); color: var(--color-bg); }

.sx-etat {
  display: inline-block; padding: 1px 8px;
  font-family: var(--font-heading); font-weight: 700; font-size: 10px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.sx-etat--planifiee { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.sx-etat--en_route { background: var(--sx-blue); color: #fff; }
.sx-etat--en_cours { background: var(--sx-blue-light); color: var(--sx-blue-dark); border: 1px solid var(--sx-blue); }
.sx-etat--terminee { background: var(--color-text); color: var(--color-bg); }
.sx-etat--annulee { background: var(--color-accent-200); color: var(--color-accent-700); }

.sx-type--maintenance { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.sx-type--reparation { background: var(--color-accent-200); color: var(--color-accent-700); }
.sx-type--installation { background: var(--sx-blue-light); color: var(--sx-blue-dark); border: 1px solid var(--sx-blue); }
.sx-type--retrait { background: var(--color-text); color: var(--color-bg); }

/* ── Fiche machine (panneau latéral) ──────────────────────────────────────── */

.sx-voile { position: fixed; inset: 0; background: rgba(32, 30, 29, 0.45); z-index: 1000; border: 0; }
.sx-fiche {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 92vw); z-index: 1001;
  background: var(--color-bg); border-left: 2px solid var(--color-text);
  box-shadow: var(--shadow-lg); overflow: auto;
}
.sx-fiche-tete {
  position: sticky; top: 0; background: var(--color-text); color: var(--color-bg);
  padding: 16px 20px; display: flex; align-items: flex-start; gap: 12px; z-index: 2;
}
.sx-fiche-kicker {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-neutral-400);
}
.sx-fiche-serie { font-family: var(--font-heading); font-weight: 800; font-size: 24px; line-height: 1.1; }
.sx-fiche-sous { font-size: 13px; color: var(--color-neutral-300); margin-top: 2px; }
.sx-fiche-fermer {
  margin-left: auto; color: var(--color-bg); border: 1px solid rgba(255, 255, 255, 0.3);
  background: none; width: 36px; height: 36px; cursor: pointer; font-size: 15px;
}
.sx-fiche-corps { padding: 18px 20px; }
.sx-specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--color-divider); border: 1px solid var(--color-divider); margin-bottom: 22px;
}
.sx-spec { background: var(--color-bg); padding: 10px 12px; }
.sx-spec-l {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-neutral-600);
}
.sx-spec-v { font-size: 14px; font-weight: 600; }
.sx-section-titre {
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2px;
}

/* ── Timeline ─────────────────────────────────────────────────────────────── */

.sx-timeline { position: relative; padding-left: 22px; }
.sx-timeline::before {
  content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px;
  width: 2px; background: var(--color-divider);
}
.sx-tl-item { position: relative; padding-bottom: 18px; }
.sx-tl-point { position: absolute; left: -22px; top: 3px; width: 12px; height: 12px; }
.sx-tl-point--placement { background: var(--color-text); }
.sx-tl-point--retrait { background: var(--color-neutral-400); }
.sx-tl-point--intervention { background: var(--sx-blue); }
.sx-tl-tete { display: flex; align-items: baseline; gap: 8px; }
.sx-tl-date { font-size: 12px; color: var(--color-neutral-500); }
.sx-tl-titre { font-family: var(--font-heading); font-weight: 600; font-size: 14px; margin-top: 4px; }
.sx-tl-detail { font-size: 13px; color: var(--color-neutral-700); margin-top: 2px; line-height: 1.4; }
.sx-tag {
  display: inline-block; padding: 1px 7px; background: var(--color-neutral-200);
  color: var(--color-neutral-800); font-family: var(--font-heading); font-weight: 700;
  font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
}

/* ── Connexion ────────────────────────────────────────────────────────────── */

.sx-connexion {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.sx-connexion-carte {
  width: min(380px, 100%); background: var(--color-bg);
  border: 2px solid var(--color-text); box-shadow: var(--shadow-lg);
}
.sx-connexion-tete {
  background: var(--sx-blue); color: #fff; padding: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.sx-connexion-logo { height: 44px; width: auto; object-fit: contain; flex: none; }
.sx-connexion-corps { padding: 22px 20px; display: flex; flex-direction: column; gap: 14px; }
.sx-erreur {
  background: var(--color-accent-200); color: var(--color-accent-700);
  border: 1px solid var(--color-accent-600); padding: 8px 10px; font-size: 13px;
}

/* ══════════════════════════════════════════════════════════════════════════
   PWA technicien — mobile d'abord, plein écran sur téléphone.
   ══════════════════════════════════════════════════════════════════════════ */

.pwa {
  display: flex; flex-direction: column; min-height: 100vh;
  min-height: 100dvh; background: var(--color-bg);
  max-width: 520px; margin: 0 auto;
  padding-bottom: env(safe-area-inset-bottom);
}
.pwa-scroll { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; }
.pwa-scroll::-webkit-scrollbar { display: none; }
.pwa-tete { background: var(--sx-blue); color: #fff; padding: 20px; flex: none; }
.pwa-tete-nom { font-family: var(--font-heading); font-weight: 800; font-size: 20px; letter-spacing: -0.01em; }
.pwa-tete-sous { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.pwa-barre {
  padding: 16px 20px 14px; border-bottom: 2px solid var(--color-divider); flex: none;
  display: flex; align-items: center; gap: 12px;
}
.pwa-barre h1 { font-family: var(--font-heading); font-weight: 800; font-size: 19px; line-height: 1; margin: 0; }
.pwa-barre-sous { font-size: 12px; color: var(--color-neutral-600); margin-top: 3px; }
.pwa-avatar {
  width: 38px; height: 38px; background: var(--sx-blue); color: #fff; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
}
.pwa-row {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit;
  padding: 16px 20px; border: 0; border-bottom: 1px solid var(--color-divider);
  background: none; cursor: pointer;
}
.pwa-row:active { background: color-mix(in srgb, var(--sx-blue) 10%, transparent); }
.pwa-row-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pwa-row-heure { font-family: var(--font-heading); font-weight: 800; font-size: 18px; }
.pwa-row-client { font-family: var(--font-heading); font-weight: 600; font-size: 15px; }
.pwa-row-addr { font-size: 13px; color: var(--color-neutral-600); margin-top: 2px; }
.pwa-note { padding: 16px 20px; font-size: 11px; color: var(--color-neutral-500); line-height: 1.5; }
.pwa-note-compte {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-divider);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
/* Bouton de déconnexion rendu comme les liens voisins : c'est une action rare,
   qui n'a pas à peser plus lourd qu'« Gérer le consentement ». Mais le padding
   vertical est là pour de bon — sans lui la cible fait 17 px de haut, ce qui
   n'est pas cliquable au pouce sur un chantier. */
.pwa-note-lien {
  background: none; border: none; margin: 0; padding: 12px 0;
  font: inherit; color: var(--sx-blue); text-decoration: underline;
  cursor: pointer; white-space: nowrap;
}

.pwa-consent-corps { padding: 24px 20px; flex: 1; }
.pwa-consent-titre {
  font-family: var(--font-heading); font-weight: 800; font-size: 24px;
  line-height: 1.1; margin-bottom: 6px;
}
.pwa-consent-intro { font-size: 13px; color: var(--color-neutral-700); margin-bottom: 18px; line-height: 1.5; }
.pwa-points { border: 2px solid var(--color-divider); }
.pwa-point { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--color-divider); }
.pwa-point:last-child { border-bottom: 0; }
.pwa-point-fleche { color: var(--sx-blue); font-family: var(--font-heading); font-weight: 800; }
.pwa-point span:last-child { font-size: 13px; line-height: 1.45; }
.pwa-pied {
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom));
  border-top: 2px solid var(--color-divider); background: var(--color-bg); flex: none;
}

.pwa-detail-barre {
  padding: 12px 16px; border-bottom: 2px solid var(--color-divider); flex: none;
  display: flex; align-items: center; gap: 6px;
}
.pwa-gps {
  background: var(--sx-blue); color: #fff; padding: 10px 16px;
  display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 1.3;
}
.pwa-gps-point {
  width: 10px; height: 10px; border-radius: 50%; background: #fff; flex: none;
  animation: sx-clignote 1.2s infinite;
}
.pwa-detail-corps { padding: 18px 20px; }
.pwa-detail-client {
  font-family: var(--font-heading); font-weight: 800; font-size: 22px;
  line-height: 1.1; margin: 8px 0 2px;
}
.pwa-cap {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-neutral-600); margin-bottom: 6px;
}
.pwa-sms {
  border: 1px solid var(--sx-blue); background: var(--sx-blue-light); padding: 10px 12px;
  font-size: 12px; color: var(--sx-blue-dark); line-height: 1.4; margin-top: 10px;
}
.pwa-hist { position: relative; padding-left: 20px; margin-bottom: 8px; }
.pwa-hist::before {
  content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px;
  width: 2px; background: var(--color-divider);
}
.pwa-hist-item { position: relative; padding-bottom: 14px; }
.pwa-hist-point { position: absolute; left: -20px; top: 2px; width: 10px; height: 10px; background: var(--sx-blue); }
.pwa-hist-label { font-family: var(--font-heading); font-weight: 600; font-size: 14px; }
.pwa-hist-heure { font-size: 12px; color: var(--color-neutral-500); }
.pwa-hr { height: 2px; background: var(--color-divider); margin: 16px 0; border: 0; }
.pwa-fini { text-align: center; padding: 6px 0; }
.pwa-fini-titre { font-family: var(--font-heading); font-weight: 800; font-size: 16px; color: var(--sx-blue); }
.pwa-hors-ligne {
  background: var(--color-accent-200); color: var(--color-accent-700);
  padding: 8px 16px; font-size: 12px; text-align: center;
}
.pwa-hors-ligne #compte-file { display: block; font-weight: 700; margin-top: 2px; }

/* ── Blocs de journée + backlog repliable (planification, glisser-déposer) ─── */

.pwa-jour-bloc { border-bottom: 2px solid var(--color-divider); }
.pwa-jour-titre {
  font-family: var(--font-heading); font-weight: 700; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-600);
  padding: 14px 20px 6px; margin: 0;
}
.pwa-cible-jour { min-height: 8px; } /* zone de dépôt même vide */
.pwa-jour-vide {
  padding: 18px 20px; font-size: 12px; color: var(--color-neutral-500);
  border: 1px dashed var(--color-divider); margin: 0 20px 14px;
}

/* La carte est à la fois poignée (glissable) et contenu — touch-action:none pour
   que le navigateur ne tente pas de faire défiler la page pendant le glisser. */
.pwa-row[data-id],
.pwa-row--pool[data-appel-id] { touch-action: none; user-select: none; -webkit-user-select: none; }

.pwa-backlog-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 14px 20px; border: 0; border-top: 2px solid var(--color-divider);
  border-bottom: 2px solid var(--color-divider);
  background: var(--color-surface); font: inherit; font-weight: 700; font-size: 13px;
  cursor: pointer; text-align: left;
}
.pwa-backlog-toggle::after { content: "▾"; margin-left: auto; }
.pwa-backlog-toggle[aria-expanded="true"]::after { content: "▴"; }
.pwa-backlog { background: var(--color-surface); }
.pwa-backlog-cap {
  font-family: var(--font-heading); font-weight: 700; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-600);
  padding: 12px 20px 4px;
}

.pwa-row--pool {
  padding: 16px 20px; border-bottom: 1px solid var(--color-divider);
  display: flex; flex-direction: column; gap: 2px;
}
.pwa-row-probleme { font-size: 12px; color: var(--color-neutral-700); margin-top: 4px; }
.pwa-reclamer { margin-top: 10px; align-self: flex-start; padding: 6px 16px; font-size: 12px; }

/* ══════════════════════════════════════════════════════════════════════════
   Page publique de suivi
   ══════════════════════════════════════════════════════════════════════════ */

.sp { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
  max-width: 520px; margin: 0 auto; background: var(--color-bg); }
.sp-tete {
  padding: 14px 20px; border-bottom: 2px solid var(--color-divider); flex: none;
  display: flex; align-items: center; gap: 10px;
}
.sp-marque { font-family: var(--font-heading); font-weight: 800; font-size: 18px; color: var(--sx-blue); line-height: 1; }
.sp-sous {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-neutral-600); margin-top: 2px;
}
.sp-token {
  margin-left: auto; font-family: var(--font-heading); font-weight: 700; font-size: 11px;
  color: var(--color-neutral-500); border: 1px solid var(--color-divider); padding: 3px 7px;
}
.sp-carte-zone { flex: 1; min-height: 240px; position: relative; }
.sp-carte { position: absolute; inset: 0; }
.sp-pin {
  width: 64px; height: 24px; background: var(--color-text); color: #fff; border: 2px solid #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: 10px; letter-spacing: 0.05em;
  text-transform: uppercase; display: flex; align-items: center; justify-content: center;
}
.sp-tech {
  width: 24px; height: 24px; border-radius: 50%; background: var(--sx-blue);
  border: 3px solid #fff; animation: sx-pulse 1.5s ease-out infinite;
}
.sp-info { flex: none; border-top: 2px solid var(--color-text); background: var(--color-bg); }
.sp-banniere {
  display: flex; align-items: center; gap: 9px; padding: 9px 20px;
  background: var(--sx-blue); color: #fff;
}
.sp-banniere[data-etat="sur_place"] { background: var(--color-text); color: var(--color-bg); }
.sp-banniere-point { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.sp-banniere[data-etat="en_route"] .sp-banniere-point { animation: sx-clignote 1.3s ease-out infinite; }
.sp-banniere-label {
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.sp-corps { padding: 16px 20px; }
.sp-ligne { display: flex; align-items: center; gap: 12px; }
.sp-avatar {
  width: 44px; height: 44px; background: var(--sx-blue); color: #fff; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 18px;
}
.sp-prenom { font-family: var(--font-heading); font-weight: 700; font-size: 16px; }
.sp-role { font-size: 12px; color: var(--color-neutral-600); }
.sp-eta-cap {
  font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-neutral-500);
}
.sp-eta { font-family: var(--font-heading); font-weight: 800; font-size: 24px; color: var(--sx-blue); line-height: 1; }
.sp-pied { font-size: 11px; color: var(--color-neutral-500); margin-top: 10px; line-height: 1.4; }
.sp-expire {
  position: absolute; inset: 0; background: var(--color-bg); z-index: 600;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px; text-align: center;
}
.sp-cadenas {
  width: 56px; height: 56px; background: var(--color-text); color: var(--color-bg);
  display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 16px;
}
.sp-expire-titre { font-family: var(--font-heading); font-weight: 800; font-size: 22px; line-height: 1.15; margin-bottom: 8px; }
.sp-expire-texte { font-size: 14px; color: var(--color-neutral-600); line-height: 1.5; }
.sp-feuille {
  position: fixed; inset: 0; z-index: 800; background: rgba(32, 30, 29, 0.5);
  display: flex; align-items: flex-end;
}
.sp-feuille-corps {
  background: var(--color-bg); border-top: 2px solid var(--color-text);
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); width: 100%;
  max-width: 520px; margin: 0 auto;
}

/* ── Politique de confidentialité (page autonome) ─────────────────────────── */

.sx-page { max-width: 720px; margin: 0 auto; padding: 32px 20px 64px; }
.sx-page h1 { font-size: 32px; margin-bottom: 4px; }
.sx-page h2 { font-size: 20px; margin-top: 28px; }
.sx-page li { margin-bottom: 8px; }

@media (max-width: 860px) {
  /* La liste (1er enfant) prend le haut en priorité ; la carte, réduite, le bas.
     Ce partage ne vaut que pour le mode « Carte + liste » (accessible seulement
     si la largeur change sans recharger la page — l'option est masquée sur
     mobile, voir plus bas) : en vue Carte ou Liste seule, l'unique zone visible
     doit prendre toute la hauteur, sinon la carte reste coincée dans les 32vh
     du bas pendant que la place de la liste masquée reste vide en haut. */
  .sx-main { grid-template-columns: 1fr; grid-template-rows: 1fr 32vh; }
  .sx-main[data-vue="carte"], .sx-main[data-vue="liste"] { grid-template-rows: 1fr; }
  .sx-liste { border-right: 0; }
  .sx-carte-zone { border-top: 2px solid var(--color-divider); }
  .sx-live { width: calc(100% - 28px); }
  .sx-legende { max-width: calc(100% - 28px); }

  /* En-tête : le nom de l'entrepôt (meta) cède sa place, peu utile sur un
     écran étroit, « SlushTrack » est redondant avec le logo + « Simplex » une
     fois la place comptée, et le nom/rôle de l'utilisateur ne reste pas ouvert
     — l'avatar seul + Quitter suffisent à garder l'en-tête compact. */
  .sx-header { padding: 0 12px; gap: 8px; }
  .sx-header-meta, .sx-brand-app { display: none; }
  .sx-user-nom, .sx-user-role { display: none; }
  /* 44px : la cible tactile recommandée. Le bouton n'existe qu'à ce palier, donc c'est
     ici qu'elle se dimensionne — sans toucher `.btn-icon`, qui est générique.
     La marge négative vaut exactement la moitié de l'écart entre la cible et l'icône,
     (44 − 20) / 2 : elle aligne les BARRES sur le bord du contenu de l'en-tête, au lieu
     de la boîte du bouton qui les ferait paraître en retrait de 12 px. La cible tactile
     déborde alors du padding, ce qui est voulu — c'est l'encre qui doit s'aligner. */
  .sx-menu-toggle {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 44px; height: 44px; margin-left: -12px;
  }
  .sx-brand { min-width: 0; }
  .sx-brand-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sx-header-droite { flex: none; }

  /* Ruban : toujours visible sur grand écran (voir la règle de base), ici un
     panneau qui se déroule sous l'en-tête au clic sur ☰ (core/ruban.js). */
  .sx-ruban {
    display: none;
    position: absolute; top: var(--sx-header-h); left: 0; right: 0; bottom: 0;
    z-index: 900; width: auto; border-right: 0; box-shadow: var(--shadow-lg);
  }
  .sx-ruban.sx-ouvert { display: flex; }
  .sx-ruban-lien {
    padding: 13px 16px; font-size: 14px; border-left: 0;
    border-bottom: 1px solid var(--color-divider);
  }
  .sx-ruban-lien--secondaire { padding: 9px 16px; font-size: 12px; }

  /* Barre d'outils : chaque groupe prend toute la largeur et s'empile,
     recherche/filtre/segmenté deviennent pleine largeur au lieu de se tasser. */
  .sx-toolbar { padding: 10px 14px; flex-wrap: wrap; }
  .sx-spacer { display: none; }
  #compteurs { flex: 1 1 100%; }
  #recherche, #filtre-modele { flex: 1 1 100%; max-width: none !important; min-width: 0 !important; }
  .seg { flex: 1 1 100%; display: flex; width: 100%; }
  .sx-seg-opt { flex: 1; text-align: center; }
  /* Carte + liste simultanées est cramé sur un téléphone : on ne garde que
     Carte / Liste, choisi seul (voir dashboard.js pour le défaut mobile). */
  .sx-seg-opt[data-vue="split"] { display: none; }

  /* Dispatch : les pastilles défilent horizontalement plutôt que de manger la
     hauteur, et la cible tactile grandit pour un pouce plutôt qu'un curseur. */
  .sx-dispatch { flex-wrap: nowrap; overflow-x: auto; }
  .sx-dispatch-pastilles { flex-wrap: nowrap; }
  .sx-dispatch-aide { display: none; }
  .sx-tech-pastille { min-height: 36px; }

  /* Ligne de la liste : les 3 colonnes (info — problème — statut) additionnent
     leurs largeurs minimales (140px + 160px + le badge en nowrap) à plus que la
     largeur d'un téléphone, ce qui forçait un défilement horizontal et coupait
     le badge de statut. Empilées, chacune prend toute la largeur disponible. */
  .sx-row { grid-template-columns: 1fr; }
  .sx-row > .sx-statut { justify-self: start; }
  .sx-row-probleme { text-align: left; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Pages de gestion (back-office admin) — CRUD clients & machines.
   ══════════════════════════════════════════════════════════════════════════ */

.sx-gestion { max-width: 1100px; margin: 0 auto; padding: 24px 20px 64px; }
.sx-gestion-tete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.sx-gestion-tete h1 { font-size: 30px; margin: 0; }
.sx-bouton-groupe { display: flex; gap: 8px; flex-wrap: wrap; }

/* Messages Django */
.sx-messages { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.sx-message {
  padding: 10px 14px; font-size: 14px; border: 1px solid var(--color-divider);
  border-left-width: 4px;
}
.sx-message--success { background: var(--sx-blue-light); border-left-color: var(--sx-blue); color: var(--sx-blue-dark); }
.sx-message--info { background: var(--color-neutral-100); border-left-color: var(--color-neutral-500); }
.sx-message--warning { background: #fff6e6; border-left-color: #d98a00; color: #8a5a00; }
.sx-message--error { background: var(--color-accent-200); border-left-color: var(--color-accent-600); color: var(--color-accent-700); }

/* Filtres */
.sx-filtres { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }

/* Tables cliquables */
/* Sur petit écran, le tableau garde sa largeur naturelle (colonnes lisibles,
   une seule ligne chacune) et déborde dans le scroll horizontal plutôt que de
   forcer chaque cellule à s'empiler sur plusieurs lignes. */
.sx-table-wrap { overflow-x: auto; border: 2px solid var(--color-divider); }
.sx-table-wrap .table { width: max-content; min-width: 100%; }
.sx-table-wrap .table td, .sx-table-wrap .table th { white-space: nowrap; }

/* Boîte modale (<dialog> natif) — même grammaire que .sx-jour-popover : règle 2px, radius 0. */
.sx-boite {
  width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  padding: 0; background: var(--color-bg); color: var(--color-text);
  border: 2px solid var(--color-text); box-shadow: var(--shadow-lg);
}
.sx-boite::backdrop { background: color-mix(in srgb, var(--color-text) 45%, transparent); }
.sx-boite-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 2px solid var(--color-divider);
}
.sx-boite-fermer {
  font: inherit; font-size: 16px; line-height: 1; padding: 6px 8px;
  border: 0; background: transparent; color: var(--color-neutral-700); cursor: pointer;
}
.sx-boite-fermer:hover { color: var(--color-text); background: var(--color-neutral-100); }
.sx-boite-corps { padding: 16px 18px; }
.sx-boite-corps > .sx-message { margin-bottom: 14px; }
.sx-boite-pied {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px; border-top: 2px solid var(--color-divider);
}
.sx-boite-champs { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.sx-boite-champs .sx-champ-large { grid-column: 1 / -1; }
@media (max-width: 560px) { .sx-boite-champs { grid-template-columns: 1fr; } }

/* Bulle « problème signalé » au survol d'une ligne de la liste d'appels. */
.sx-bulle-probleme {
  position: fixed; z-index: 1250; max-width: 360px; pointer-events: none;
  padding: 10px 12px; background: var(--color-bg);
  border: 2px solid var(--color-text); box-shadow: var(--shadow-lg);
}
.sx-bulle-probleme-cap {
  font-family: var(--font-heading); font-weight: 700; font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-600);
  margin-bottom: 4px;
}
.sx-bulle-probleme-texte { font-size: 13px; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; }
/* Tactile : pas de survol, la bulle s'ouvre par ce bouton (sans ouvrir l'appel). */
.sx-probleme-btn {
  display: inline-block; margin-left: 6px; padding: 2px 7px; vertical-align: 1px;
  font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--sx-blue); background: var(--color-bg); color: var(--sx-blue-dark);
}
.sx-probleme-btn[aria-expanded="true"] { background: var(--sx-blue); color: #fff; }
@media (hover: hover) and (pointer: fine) { .sx-probleme-btn { display: none; } }
.sx-bulle-probleme--tactile { max-width: calc(100vw - 16px); }
/* Tables à peu de colonnes (ex. clients) : tient sur une page, pas de scroll horizontal. */
.sx-table-wrap .table--fit { width: 100%; min-width: 0; }
.sx-table-wrap .table--fit td, .sx-table-wrap .table--fit th { white-space: normal; }
.sx-tr-lien { cursor: pointer; }
.sx-tr-lien:hover { background: color-mix(in srgb, var(--sx-blue) 8%, transparent); }
.sx-vide { padding: 28px 14px; text-align: center; color: var(--color-neutral-600); font-size: 13px; }

/* Calendrier des appels planifiés (page techniciens) */
.sx-calendrier-tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 32px 0 12px;
}
.sx-calendrier-tete h2 { font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; }
.sx-calendrier-nav { display: flex; align-items: center; gap: 12px; }
.sx-calendrier-nav strong { font-family: var(--font-heading); text-transform: capitalize; min-width: 130px; text-align: center; }
.sx-calendrier { border: 2px solid var(--color-divider); background: var(--color-divider); }
.sx-calendrier-entetes, .sx-calendrier-semaine {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
}
.sx-calendrier-entetes {
  background: var(--color-divider); border-bottom: 2px solid var(--color-divider);
}
.sx-calendrier-entetes span {
  background: var(--color-neutral-100); padding: 6px 8px;
  font-family: var(--font-heading); font-weight: 700; font-size: 11px;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-neutral-600);
}
.sx-calendrier-semaine + .sx-calendrier-semaine { margin-top: 1px; }
.sx-calendrier-jour {
  background: var(--color-bg); min-height: 74px; padding: 6px 7px;
  display: flex; flex-direction: column; gap: 4px;
}
.sx-calendrier-jour--hors { background: var(--color-neutral-100); }
.sx-calendrier-jour--hors .sx-calendrier-num { color: var(--color-neutral-400); }
.sx-calendrier-jour--aujourdhui { box-shadow: inset 0 0 0 2px var(--sx-blue); }
.sx-calendrier-jour--passe { background: var(--color-neutral-100); }
/* Lien étiré : la case entière mène à la création d'un appel à cette date. La case
   garde `z-index: auto` — un z-index numérique y créerait un contexte d'empilement,
   et la bulle de survol des pastilles passerait sous les cases voisines. */
.sx-calendrier-jour { position: relative; }
.sx-calendrier-creer { position: absolute; inset: 0; z-index: 0; }
.sx-calendrier-creer:focus-visible { outline: 2px solid var(--sx-blue); outline-offset: -2px; }
.sx-calendrier-creer::after {
  content: "+"; position: absolute; top: 3px; right: 6px; opacity: 0;
  font-family: var(--font-heading); font-weight: 700; color: var(--sx-blue);
}
.sx-calendrier-jour:hover .sx-calendrier-creer::after,
.sx-calendrier-creer:focus-visible::after { opacity: 1; }
.sx-calendrier-souhaits { font-size: 11px; font-weight: 700; color: var(--color-neutral-400); }
.sx-calendrier-num { font-family: var(--font-heading); font-weight: 700; font-size: 12px; }
.sx-calendrier-total { font-size: 11px; font-weight: 700; color: var(--sx-blue-dark); }
.sx-calendrier-techs { display: flex; flex-wrap: wrap; gap: 3px; }
.sx-calendrier-tech {
  position: relative; z-index: 1;  /* au-dessus du lien étiré de la case */
  display: inline-block; padding: 1px 5px; font-size: 10px;
  font-family: var(--font-heading); font-weight: 700;
  background: var(--sx-blue-light); color: var(--sx-blue-dark);
  text-decoration: none; cursor: pointer;
}
.sx-calendrier-tech:hover, .sx-calendrier-tech:focus-visible { background: var(--sx-blue); color: #fff; }

/* Bulle au survol : appels du technicien pour ce jour. */
.sx-calendrier-bulle {
  display: none;
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  z-index: 60; width: 240px; max-width: 70vw;
  background: var(--color-bg); border: 2px solid var(--color-text); box-shadow: var(--shadow-lg);
  padding: 8px 10px; text-align: left; white-space: normal;
  font-size: 11px; font-weight: 400; color: var(--color-text); cursor: default;
}
.sx-calendrier-tech:hover .sx-calendrier-bulle,
.sx-calendrier-tech:focus-visible .sx-calendrier-bulle { display: block; }
.sx-calendrier-bulle-titre {
  display: block; font-family: var(--font-heading); font-weight: 700; font-size: 11px;
  margin-bottom: 6px; color: var(--color-text);
}
.sx-calendrier-bulle ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.sx-calendrier-bulle li { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.sx-calendrier-bulle-num { font-weight: 700; }

@media (max-width: 780px) {
  .sx-calendrier-entetes span { font-size: 9px; padding: 4px; }
  .sx-calendrier-jour { min-height: 54px; padding: 4px 5px; }
}

/* Badges de réputation — vert (bon) → rouge (crosseur). Extension sémantique
   assumée du DS mono : la réputation gagne à être lisible d'un coup d'œil. */
.sx-rep {
  display: inline-block; padding: 2px 8px; white-space: nowrap;
  font-family: var(--font-heading); font-weight: 700; font-size: 11px;
  letter-spacing: 0.03em; text-transform: uppercase;
}
.sx-rep--bon { background: #e3f3ea; color: #1a7f4b; border: 1px solid #1a7f4b; }
.sx-rep--neutre { background: var(--color-neutral-200); color: var(--color-neutral-800); border: 1px solid var(--color-neutral-400); }
.sx-rep--a_surveiller { background: #fff2d6; color: #8a5a00; border: 1px solid #d98a00; }
.sx-rep--mauvais { background: var(--color-accent-200); color: var(--color-accent-700); border: 1px solid var(--color-accent-600); }

/* Fiche client */
.sx-grille-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; }
.sx-h2 { font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; }
.sx-fiche-grille {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--color-divider); border: 1px solid var(--color-divider);
}
.sx-fiche-grille > div { background: var(--color-bg); padding: 10px 12px; }

/* Fil de commentaires */
.sx-commenter { margin-bottom: 20px; }
.sx-fil { display: flex; flex-direction: column; gap: 2px; }
.sx-fil-item { border: 1px solid var(--color-divider); border-bottom: 0; padding: 12px 14px; }
.sx-fil-item:last-child { border-bottom: 1px solid var(--color-divider); }
.sx-fil-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.sx-fil-auteur { font-family: var(--font-heading); font-weight: 700; font-size: 13px; }
.sx-fil-date { font-size: 11px; color: var(--color-neutral-500); }
.sx-fil-texte { font-size: 14px; line-height: 1.45; }

/* Formulaires */
.sx-form .field { margin-bottom: 16px; }
.sx-form .field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.sx-field-inline { display: flex; align-items: center; gap: 10px; }
.sx-field-inline > label { margin-bottom: 0 !important; }
.sx-champ-erreur { color: var(--color-accent-700); font-size: 12px; margin-top: 4px; }
.sx-encadre { border: 2px solid var(--color-divider); padding: 14px 16px; background: var(--color-surface); }

@media (max-width: 780px) {
  .sx-grille-2 { grid-template-columns: 1fr; gap: 24px; }
  .sx-fiche-grille { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Appels de service — liste, fiche, création rapide, formulaire client public.
   ══════════════════════════════════════════════════════════════════════════ */

/* Statuts d'appel */
.sx-appel {
  display: inline-block; padding: 2px 8px; white-space: nowrap;
  font-family: var(--font-heading); font-weight: 700; font-size: 11px;
  letter-spacing: 0.03em; text-transform: uppercase;
}
.sx-appel--nouveau { background: var(--color-neutral-200); color: var(--color-neutral-800); border: 1px solid var(--color-neutral-400); }
.sx-appel--assigne { background: var(--color-neutral-100); color: var(--color-neutral-800); border: 1px solid var(--color-neutral-500); }
.sx-appel--en_route { background: var(--sx-blue); color: #fff; }
.sx-appel--sur_place { background: var(--sx-blue-light); color: var(--sx-blue-dark); border: 1px solid var(--sx-blue); }
.sx-appel--resolu { background: #e3f3ea; color: #1a7f4b; border: 1px solid #1a7f4b; }
.sx-appel--ferme { background: var(--color-text); color: var(--color-bg); }
.sx-appel--annule { background: var(--color-accent-200); color: var(--color-accent-700); }

/* Priorités */
.sx-prio {
  display: inline-block; padding: 2px 8px; white-space: nowrap;
  font-family: var(--font-heading); font-weight: 700; font-size: 11px;
  letter-spacing: 0.03em; text-transform: uppercase;
}
.sx-prio--urgente { background: var(--color-accent-200); color: var(--color-accent-700); border: 1px solid var(--color-accent-600); }
.sx-prio--normale { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.sx-prio--basse { background: var(--color-neutral-100); color: var(--color-neutral-600); }

/* Une urgence ouverte se repère sans lire : filet rouge en bord de ligne. */
/* Appel en attente d'un technicien : la ligne ENTIÈRE reprend la teinte d'attente,
   comme les lignes du dashboard (`.sx-row--attente_*`, mêmes tokens) — repérer un appel
   qui traîne ne doit pas demander de lire la colonne de droite. Seuls les appels
   `nouveau`/`assigne` portent une teinte (voir `service.views.appels_liste`) : une fois
   le technicien en route, le statut se suffit et la ligne redevient blanche.

   Le filet va sur la première cellule et non sur le `<tr>` : un `box-shadow: inset`
   n'est pas rendu sur une ligne de tableau. */
.sx-tr--attente_vert { background: var(--sx-attente-vert-fond); }
.sx-tr--attente_jaune { background: var(--sx-attente-jaune-fond); }
.sx-tr--attente_rouge { background: var(--sx-attente-rouge-fond); }
.sx-tr--attente_vert:hover { background: var(--sx-attente-vert-survol); }
.sx-tr--attente_jaune:hover { background: var(--sx-attente-jaune-survol); }
.sx-tr--attente_rouge:hover { background: var(--sx-attente-rouge-survol); }
.sx-tr--attente_vert td:first-child { box-shadow: inset 3px 0 0 var(--sx-green); }
.sx-tr--attente_jaune td:first-child { box-shadow: inset 3px 0 0 var(--sx-jaune); }
.sx-tr--attente_rouge td:first-child { box-shadow: inset 3px 0 0 var(--color-accent-700); }
/* Placé APRÈS les teintes d'attente, à dessein : sur un appel urgent ET en attente,
   c'est l'urgence que le filet doit annoncer. Le fond, lui, continue de dire l'attente. */
.sx-tr-urgent td:first-child { box-shadow: inset 3px 0 0 var(--color-accent-600); }

.sx-alerte { color: var(--color-accent-700); font-weight: 600; }

/* Fiche appel — actions principales (Partir/Arrivé/Fermer/Annuler), en haut à
   gauche de la fiche : c'est ce qu'un technicien ou dispatcheur vient chercher
   en premier en ouvrant l'appel, pas au fond de la colonne Actions. */
.sx-appel-actions-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.sx-appel-actions-tete form { display: inline-flex; }

/* Problème signalé : sorti de la colonne Détails, affiché en pleine largeur
   juste sous l'en-tête — c'est la première chose qu'un technicien doit lire. */
.sx-probleme-signale {
  border: 2px solid var(--color-divider); background: var(--color-surface);
  padding: 14px 16px; margin: 18px 0 24px;
}
.sx-probleme-signale .sx-cap { margin: 0 0 6px; }
.sx-probleme-signale .sx-probleme-signale-titre {
  font-size: 14px; font-weight: 800; letter-spacing: 0.04em; color: var(--color-text);
}
.sx-probleme-signale p { font-size: 15px; line-height: 1.45; margin: 0; }

/* Colonne droite de l'en-tête : Modifier/Historique, puis Actions juste en
   dessous — pas au fond de la page. Largeur bornée pour que le select
   d'assignation et le formulaire Résoudre restent compacts, en carte. */
.sx-appel-cote-droit { display: flex; flex-direction: column; gap: 10px; width: 280px; flex: none; }

/* Fiche appel — actions */
.sx-actions-appel { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; width: 100%; }
.sx-actions-appel form { width: 100%; }
.sx-actions-appel .sx-cap { margin: 0; }
.sx-action-bloc {
  border: 1px solid var(--color-divider); padding: 12px; background: var(--color-surface);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.sx-action-bloc .field { width: 100%; margin-bottom: 0; }
.sx-fil-item--systeme { background: var(--color-surface); }
.sx-cap {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-neutral-600); margin: 16px 0 4px;
}

/* Onglets de fiche */
.sx-onglets { display: flex; gap: 18px; border-bottom: 2px solid var(--color-divider); }
.sx-onglets a {
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  color: var(--color-neutral-600); padding: 8px 0;
}
.sx-onglets a:hover { color: var(--sx-blue); }
.sx-onglets a[aria-current="page"] {
  color: var(--sx-blue); border-bottom: 2px solid var(--sx-blue); margin-bottom: -2px;
}

/* Comptabilité : choix entre les deux outils (Relevés PDF / Cleaning des dépôts). */
.sx-choix-outil { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.sx-choix-outil-carte {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-decoration: none;
  background: var(--color-bg); color: var(--color-text); border: 2px solid var(--color-divider);
}
.sx-choix-outil-carte:hover { border-color: var(--sx-blue); }
.sx-choix-outil-carte[aria-current="page"] {
  border-color: var(--sx-blue); background: var(--sx-blue-light); box-shadow: inset 4px 0 0 var(--sx-blue);
}
.sx-choix-outil-icone { font-size: 26px; line-height: 1; }
.sx-choix-outil-titre {
  display: block; font-family: var(--font-heading); font-weight: 800; font-size: 16px;
}
.sx-choix-outil-carte[aria-current="page"] .sx-choix-outil-titre { color: var(--sx-blue-dark); }
.sx-choix-outil-sous { display: block; font-size: 12px; color: var(--color-neutral-600); margin-top: 2px; }
@media (max-width: 700px) { .sx-choix-outil { grid-template-columns: 1fr; } }

/* Création rapide — recherche client */
.sx-grille-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sx-autocomplete {
  border: 2px solid var(--color-text); border-top: 0; background: var(--color-bg);
  max-height: 280px; overflow: auto; box-shadow: var(--shadow-md);
}
.sx-auto-item {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  width: 100%; text-align: left; font: inherit; color: inherit;
  padding: 10px 12px; border: 0; border-bottom: 1px solid var(--color-divider);
  background: none; cursor: pointer;
}
.sx-auto-item:hover { background: color-mix(in srgb, var(--sx-blue) 10%, transparent); }
.sx-auto-nom { font-family: var(--font-heading); font-weight: 700; font-size: 14px; }
.sx-auto-meta { font-size: 12px; color: var(--color-neutral-600); }
.sx-auto-vide { padding: 12px; font-size: 13px; color: var(--color-neutral-600); }
.sx-choisi {
  display: flex; align-items: center; gap: 10px;
  border: 2px solid var(--sx-blue); background: var(--sx-blue-light);
  padding: 8px 12px; font-family: var(--font-heading); font-weight: 700;
}
.sx-choisi .btn { margin-left: auto; }

/* Formulaire client public */
.sx-form-public { padding: 24px 20px 64px; }
.sx-form-public h1 { font-size: 26px; margin-bottom: 6px; }
.sx-consentement { border: 2px solid var(--color-text); padding: 16px; background: var(--color-surface); }
.sx-consentement-texte {
  font-size: 13px; line-height: 1.5; margin: 0 0 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--color-divider);
}
.sx-case {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 10px 0; font-size: 14px;
}
.sx-case + .sx-case { border-top: 1px solid var(--color-divider); }
/* Cible de toucher confortable : ça se remplit au téléphone. */
.sx-case input[type="checkbox"] { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--sx-blue); }
.sx-case span { display: flex; flex-direction: column; gap: 2px; }
.sx-case .sx-muted { font-size: 12px; }

@media (max-width: 640px) {
  .sx-grille-champs { grid-template-columns: 1fr; gap: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Comptabilité — grille de classement, fiches de totaux, paramétrage
   ═══════════════════════════════════════════════════════════════════════ */

.sx-actions-tete { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sx-actions-tete form { margin: 0; }
.sx-actions-ligne { display: flex; gap: 4px; align-items: center; }
.sx-actions-ligne form { margin: 0; }
.sx-sous-titre {
  font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase;
  margin: 24px 0 12px;
}
.sx-num { text-align: right; font-variant-numeric: tabular-nums; }
.sx-centre { text-align: center; }
.sx-danger { color: var(--color-accent-700); }
.sx-motif { font-size: 12px; background: var(--color-bg); padding: 2px 6px; }
.sx-tr-edite { background: var(--sx-blue-light); }

/* Formulaires de paramétrage */
.sx-form-carte {
  border: 2px solid var(--color-text); background: var(--color-surface);
  padding: 20px; margin-bottom: 20px;
}
.sx-form-carte .sx-sous-titre:first-child { margin-top: 0; }
.sx-aide { font-size: 12px; color: var(--color-neutral-600); margin-top: 4px; }

/* Fiches de totaux */
.sx-bandeau-totaux {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--color-divider);
  border: 2px solid var(--color-text); margin-bottom: 20px;
}
/* Cartes de totaux. Surtout PAS `.sx-fiche` : ce nom appartient déjà au panneau
   latéral `position: fixed` du dashboard, et les six cartes s'empilaient dessus,
   collées au bord droit de l'écran. */
.sx-totaux-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 16px 0; }
.sx-totaux-grille .sx-totaux-carte, .sx-bandeau-totaux .sx-totaux-carte {
  background: var(--color-surface); padding: 12px 14px;
}
.sx-totaux-titre {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-neutral-600); margin-bottom: 4px;
}
.sx-totaux-valeur { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Le rouge reste réservé aux alertes : ici, un relevé qui ne balance pas. */
.sx-totaux-carte--alerte { border-left: 4px solid var(--color-accent-600); }
.sx-totaux-carte--alerte .sx-totaux-valeur { color: var(--color-accent-700); }

.sx-pastille { font-size: 12px; padding: 2px 8px; border: 1px solid var(--color-divider); }
.sx-pastille--attention {
  background: var(--color-accent-200); color: var(--color-accent-700);
  border-color: var(--color-accent-600);
}
.sx-statut--brouillon { color: #8a5a00; font-weight: 700; }
.sx-statut--valide { color: var(--sx-blue); font-weight: 700; }
.sx-statut--exporte { color: #15803d; font-weight: 700; }

.sx-liste-brute {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  background: var(--color-bg); border: 1px solid var(--color-divider);
  padding: 12px 12px 12px 28px; max-height: 220px; overflow: auto;
}

/* Grille de classement */
.sx-classement td { vertical-align: middle; }
.sx-classement .input { padding: 4px 6px; font-size: 13px; min-width: 0; }
.sx-classement-desc { font-weight: 600; }
.sx-classement-montant { width: 78px; text-align: right; font-variant-numeric: tabular-nums; }
.sx-classement-net { font-variant-numeric: tabular-nums; }
.sx-classement-ligne--a-classer { background: var(--color-accent-200); }
.sx-classement-ligne--revise { background: var(--sx-blue-light); }
.sx-classement-ligne--hors-depense { opacity: 0.6; }
.sx-classement-ligne--envoi { opacity: 0.5; transition: opacity 120ms; }

.sx-toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--color-text); color: #fff; padding: 12px 18px;
  font-size: 14px; max-width: 560px; z-index: 50;
}
.sx-toast--erreur { background: var(--color-accent-700); }

@media (max-width: 900px) {
  .sx-classement .input { font-size: 12px; }
  .sx-classement-montant { width: 64px; }
}
.sx-nowrap { white-space: nowrap; }
.sx-form-suppression { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--color-divider); }