/* Composants du système de design (design/DESIGN.md, vitrine : design/systeme.html).
   Uniquement des var(--…) de tokens.css : aucune couleur, taille ni durée écrite ici ; toute taille de texte passe par
   l'échelle par rôle (--t-…). Un composant n'est défini qu'une fois ; style.css place les écrans et y ajoute les
   composants propres à un écran (carte de tournée, ligne de rue…).
   États : survol (PC), :focus-visible (clavier), :active (appuyé), [disabled]/[aria-disabled], [aria-busy]
   (chargement), .is-invalid (erreur), [aria-selected]/[aria-pressed]/[aria-current] (choisi). */

/* ── Base ─────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
.ds {
  font-family: var(--font-ui);
  font-size: var(--t-texte);
  line-height: var(--lh-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
/* Mise en avant dans un texte : toujours 600 (le navigateur ferait 700 ou 900) ; petit texte : jamais sous 13 px */
:where(.ds) :where(b, strong) { font-weight: var(--fw-semibold); }
:where(.ds) small { font-size: var(--t-legende); }
.ds :focus { outline: none; }
.ds :focus-visible {
  outline: var(--bw-strong) solid var(--focus);
  outline-offset: var(--bw-strong);
  box-shadow: 0 0 0 calc(var(--bw-strong) * 2) var(--surface);
}
.mono, .num { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); }
.muted { color: var(--ink-2); } .faint { color: var(--ink-3); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: var(--bw); height: var(--bw); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Textes par rôle (échelle de tokens.css) ──────────────────────────────────── */
.t-page, .t-section, .t-sous-section { margin: 0; font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.t-page { font-size: var(--t-page); }                /* titre de page (h1) */
.t-section { font-size: var(--t-section); }          /* titre de section, de fenêtre (h2) */
.t-sous-section { font-size: var(--t-sous-section); }/* titre de sous-section, d'élément (h3) */
.t-sous-titre { margin: 0; font-size: var(--t-sous-titre); color: var(--ink-3); }
.t-secondaire { margin: 0; font-size: var(--t-secondaire); color: var(--ink-2); }
.t-legende { margin: 0; font-size: var(--t-legende); color: var(--ink-3); }
.t-chiffre-cle, .t-chiffre { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold);
  line-height: var(--lh-tight); }
.t-chiffre-cle { font-size: var(--t-chiffre-cle); }
.t-chiffre { font-size: var(--t-chiffre); }
/* Intitulé de groupe, au-dessus d'une liste (« Ou affecter à », « Côté impair ») ; un nombre facultatif en <small> */
.intitule {
  display: flex; align-items: baseline; gap: var(--sp-2);
  font-family: var(--font-data); font-size: var(--t-groupe); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3);
}
.intitule small { font-size: var(--t-groupe); font-weight: var(--fw-regular); }

/* Icône Lucide : <svg class="ico"><use href="lib/icones-lucide-….svg#nom"/></svg> */
.ico {
  width: var(--icon); height: var(--icon); flex: none;
  fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round;
}
.ico--sm { width: var(--icon-sm); height: var(--icon-sm); }
.ico--lg { width: var(--icon-lg); height: var(--icon-lg); }

/* ── Mise en page commune : en-tête, section, sous-section, bloc, encadré, chiffres ── */
/* En-tête (de page, de fenêtre, de la carte) : retour facultatif, titre (rôle selon la place : .t-page, .t-section,
   .t-sous-section) ou titres empilés (titre, sous-titre, méta), actions à droite. 44 px de haut au moins. */
.entete { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; min-height: var(--touch); }
.entete--haut { align-items: flex-start; }      /* titre sur plusieurs lignes : actions en haut */
.entete > .t-page, .entete > .t-section, .entete > .t-sous-section { flex: 1; min-width: 0; }
.entete__titres { flex: 1; min-width: 0; display: grid; gap: var(--bw-strong); }
.entete__titres > :first-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.entete__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1);
  font-size: var(--t-legende); color: var(--ink-3); }
.entete__meta:empty { display: none; }
.entete__actions { flex: none; display: flex; gap: var(--sp-2); }

/* Section d'une page : titre de section (et nombre en <small>, picto facultatif), puis son contenu */
.section { display: grid; gap: var(--sp-3); min-width: 0; }
.section__tete, .section__titre { min-width: 0; padding: 0 var(--sp-1); }
.section__tete { display: flex; align-items: center; gap: var(--sp-3); }
.section__titre { display: flex; align-items: baseline; gap: var(--sp-2); }
.section__titre small { font-size: var(--t-legende); font-weight: var(--fw-regular); color: var(--ink-3); }
/* Sous-section (rubrique d'une fenêtre) : séparée d'un trait, titre de sous-section */
.sous-section { display: grid; gap: var(--sp-3); padding-top: var(--sp-4); border-top: var(--bw) solid var(--border); }
.sous-section__titre { display: flex; align-items: baseline; gap: var(--sp-2); }
.sous-section__titre small { font-size: var(--t-legende); font-weight: var(--fw-regular); color: var(--ink-3); }

/* Bloc (carte) posé sur la page : fond, contour, coins 16, marge 16 ; cliquable (survol, appui), mis en avant
   (contour marqué, ombre), compact (marge 12) ou liste intégrée (lignes jusqu'au bord) */
.bloc { padding: var(--sp-4); color: var(--ink); background: var(--surface); border: var(--bw) solid var(--border);
  border-radius: var(--radius-lg); }
.bloc--cliquable { width: 100%; margin: 0; font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
@media (hover: hover) { .bloc--cliquable:hover { border-color: var(--border-strong); box-shadow: var(--shadow-1); } }
.bloc--cliquable:active { transform: scale(.99); background: var(--surface-pressed); }
.bloc--avant { border-color: var(--border-strong); box-shadow: var(--shadow-1); }
.bloc--compact { padding: var(--sp-3); }
.bloc--liste { padding: 0; overflow: hidden; }

/* Encadré : information, alerte (avertissement doux), danger, neutre (aide, bulle) ; picto 16 px, texte, action */
.encadre { display: flex; gap: var(--sp-2); margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md);
  font-size: var(--t-secondaire); line-height: var(--lh-body); color: var(--ink-2); background: var(--surface-2); }
.encadre > .ico { flex: none; width: var(--icon-sm); height: var(--icon-sm); margin-top: var(--bw-strong); }
.encadre--info, .encadre--alerte, .encadre--danger { font-weight: var(--fw-medium); }
.encadre--info { background: var(--info-bg); color: var(--info); }
.encadre--alerte { background: var(--warn-bg); color: var(--warn); }
.encadre--danger { background: var(--danger-bg); color: var(--danger); }
/* Bandeau avec action (3/11) : le texte se centre sur la hauteur du bouton, petit bouton à droite, une seule ligne
   quand la place le permet (jamais une grande bulle avec une ligne perdue en haut) */
.encadre--action { align-items: center; padding-block: var(--sp-1); padding-right: var(--sp-1); }
.encadre--action > .ico { margin-top: 0; }
.encadre--action > span { flex: 1 1 auto; min-width: 0; }
.encadre--action > .btn, .encadre--action > .tag { flex: none; margin-left: auto; }

/* Dépliant : détail replié par défaut (sources…), titre en intitulé de groupe et chevron */
.depliant > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: var(--touch);
  list-style: none; cursor: pointer; }
.depliant > summary::-webkit-details-marker { display: none; }
.depliant__chevron { width: var(--icon-sm); height: var(--icon-sm); color: var(--ink-3); transition: transform var(--dur-2) var(--ease); }
.depliant[open] .depliant__chevron { transform: rotate(180deg); }

/* Chiffres : cases valeur (chiffre de compteur) + libellé (légende), 3 par ligne */
.chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.chiffres__case { display: grid; align-content: start; gap: var(--bw-strong); min-width: 0; padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2); border-radius: var(--radius-md); }
.chiffres__valeur { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: var(--t-chiffre);
  font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.chiffres__libelle { font-size: var(--t-legende); color: var(--ink-2); line-height: var(--lh-tight); }
.chiffres__libelle small { display: block; color: var(--ink-3); }
/* ── Tuile KPI (4/11, design v2 : direction A en clair, C en sombre, seules les valeurs des jetons changent) ──────
   Picto teinté de sa donnée (palette --donnee-*), à sa droite trois lignes : libellé, chiffre (JetBrains Mono),
   détail (sur une même rangée, toutes les tuiles ont leur détail) ; variation facultative en petit tag en haut à
   droite (+ hausse, − baisse, = stable : flèche ou signe, jamais la couleur seule ; verte si favorable, rouge si
   défavorable, neutre sinon) ; place réservée à une mini-courbe (.kpi__courbe, plus tard). Tuile neutre : jamais la
   couleur de la société. Textes courts et percutants (libellé d'un ou deux mots, détail « chiffre + mot » :
   « 2 facturées », « 5 depuis J+7 »). Autant de tuiles par ligne que la place le permet, jamais plus étroites que
   --kpi-min : deux par ligne sur téléphone, une rangée sur PC. Tuile étroite (requête de conteneur) : le tag passe à
   droite du chiffre, le libellé garde toute la largeur. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--kpi-min)), 1fr)); gap: var(--sp-3); }
.kpi { container-type: inline-size; min-width: 0; padding: var(--sp-4); color: var(--ink); background: var(--surface);
  border: var(--bw) solid var(--border); border-radius: var(--radius-lg); }
.kpi__grille { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--sp-3); row-gap: var(--bw-strong);
  align-items: center; }
.kpi__picto { grid-column: 1; grid-row: 1 / span 3; align-self: start; display: grid; place-items: center; width: var(--ctl);
  height: var(--ctl); border-radius: var(--radius-md); color: var(--kpi-teinte, var(--ink-2)); background: var(--kpi-fond, var(--surface-2)); }
.kpi__libelle { grid-column: 2; grid-row: 1; min-width: 0; font-size: var(--t-secondaire); color: var(--ink-2); line-height: var(--lh-tight); }
.kpi__chiffre { grid-column: 2 / 4; grid-row: 2; font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-size: var(--t-chiffre-cle); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.kpi__detail { grid-column: 2 / 4; grid-row: 3; min-width: 0; font-size: var(--t-legende); color: var(--ink-3); }
.kpi__variation { grid-column: 3; grid-row: 1; justify-self: end; display: inline-flex; align-items: center; gap: var(--bw-strong);
  padding: var(--bw-strong) var(--sp-2); border-radius: var(--radius-full); font-family: var(--font-data); font-size: var(--t-legende);
  font-weight: var(--fw-semibold); white-space: nowrap; color: var(--ink-2); background: var(--surface-2); }
.kpi__variation .ico { width: var(--icon-sm); height: var(--icon-sm); }
.kpi__variation--favorable { color: var(--ok); background: var(--ok-bg); }
.kpi__variation--defavorable { color: var(--danger); background: var(--danger-bg); }
.kpi__courbe { margin-top: var(--sp-3); }
.kpi__courbe:empty { display: none; }
.kpi[data-donnee="tournees"] { --kpi-teinte: var(--donnee-1); --kpi-fond: var(--donnee-1-bg); }
.kpi[data-donnee="utilisateurs"] { --kpi-teinte: var(--donnee-2); --kpi-fond: var(--donnee-2-bg); }
.kpi[data-donnee="communes"] { --kpi-teinte: var(--donnee-3); --kpi-fond: var(--donnee-3-bg); }
.kpi[data-donnee="societes"] { --kpi-teinte: var(--donnee-4); --kpi-fond: var(--donnee-4-bg); }
.kpi[data-donnee="signalements"] { --kpi-teinte: var(--donnee-5); --kpi-fond: var(--donnee-5-bg); }
@media (max-width: 767px) {
  .kpis > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }  /* deux par ligne : une tuile seule en fin prend la ligne */
  .kpi { padding: var(--sp-3); }
  .kpi__grille { column-gap: var(--sp-2); }
  .kpi__picto { width: var(--avatar); height: var(--avatar); }
  .kpi__chiffre { font-size: var(--t-chiffre); }
}
/* Tuile étroite (deux par ligne sur téléphone) : le libellé prend toute la largeur, le tag se range à droite du chiffre */
@container (max-width: 240px) {
  .kpi__libelle { grid-column: 2 / 4; }
  .kpi__chiffre { grid-column: 2; }
  .kpi__variation { grid-row: 2; }
}

/* ── Boutons ──────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--ctl); min-width: var(--touch); padding: var(--sp-2) var(--sp-4); text-align: center;
  font: inherit; font-size: var(--t-bouton); font-weight: var(--fw-semibold); color: var(--ink);
  background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--radius-md);
  cursor: pointer; user-select: none; text-decoration: none; position: relative;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.btn:active:not([disabled]):not([aria-disabled="true"]) { transform: scale(.98); background: var(--surface-pressed); }
.btn--primary {
  min-height: var(--ctl-lg); padding: var(--sp-2) var(--sp-6); font-size: var(--t-bouton-principal);
  background: var(--brand); color: var(--on-brand); border-color: var(--brand); border-radius: var(--radius-btn);
}
.btn--primary:active:not([disabled]) { background: var(--brand); filter: brightness(.94); }
.btn--block { display: flex; width: 100%; }
.btn--split { justify-content: space-between; }
.btn--quiet { background: var(--surface-2); border-color: transparent; }
.btn--danger { color: var(--danger); }
/* Avertissement : action possible mais déconseillée (« Créer quand même »), aux couleurs de .encadre--alerte */
.btn--alerte { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
.btn--alerte:active:not([disabled]):not([aria-disabled="true"]) { background: var(--warn-bg); filter: brightness(.94); }
.btn--icon { padding: 0; width: var(--ctl); }
.btn--map { width: var(--ctl); height: var(--ctl); padding: 0; border-radius: var(--radius-btn); box-shadow: var(--shadow-2); }
.btn--sm { min-height: var(--touch); padding: var(--sp-2) var(--sp-3); font-size: var(--t-bouton-petit); }
/* Bouton principal à la hauteur d'un champ (44 px, 15 px) : sur la ligne de la recherche (tablette, PC) */
.btn--primary.btn--compact { min-height: var(--ctl); padding: var(--sp-2) var(--sp-5); font-size: var(--t-bouton); }
/* Bouton d'outil : icône, petit libellé dessous (barre d'outils d'une fenêtre) */
.btn--outil { flex-direction: column; gap: var(--sp-1); min-height: var(--ctl-lg); padding: var(--sp-1) var(--sp-2);
  font-size: var(--t-legende); font-weight: var(--fw-medium); line-height: var(--lh-tight); text-align: center; }
/* Bouton qui se lit comme un lien (« Mot de passe oublié ? ») */
.btn--lien { border-color: transparent; background: none; color: var(--ink-2); font-weight: var(--fw-medium); }
@media (hover: hover) {
  .btn:hover:not([disabled]):not([aria-disabled="true"]) { background: var(--surface-hover); }
  /* Même force que la règle du survol des boutons secondaires (sinon le bouton principal passait au gris, 3/11) */
  .btn--primary:hover:not([disabled]):not([aria-disabled="true"]) { background: var(--brand); filter: brightness(.96); }
  .btn--alerte:hover:not([disabled]):not([aria-disabled="true"]) { background: var(--warn-bg); filter: brightness(.97); }
}
.btn[disabled], .btn[aria-disabled="true"] {
  cursor: not-allowed; color: var(--ink-disabled); background: var(--surface-2); border-color: var(--surface-2);
  filter: none;
}
/* Chargement : le libellé reste, trois points remplacent l'icône (jamais une roue seule) */
.btn[aria-busy="true"] { cursor: progress; }
/* Action annoncée, pas encore disponible (source d'une intégration…) : aspect d'un bouton secondaire, sans effet au
   toucher, étiquette « bientôt » dedans ; balise non interactive (span) */
.btn--bientot, .btn--bientot:hover:not([disabled]):not([aria-disabled="true"]),
.btn--bientot:active:not([disabled]):not([aria-disabled="true"]) { cursor: default; color: var(--ink-2); background: var(--surface); transform: none; }
.btn[aria-busy="true"] > .ico { display: none; }
.dots { display: inline-flex; gap: var(--sp-1); }
.dots i { width: var(--sp-2); height: var(--sp-2); border-radius: var(--radius-full); background: currentColor; opacity: .3;
          animation: dots calc(var(--dur-3) * 4) var(--ease) infinite; }
.dots i:nth-child(2) { animation-delay: var(--dur-1); } .dots i:nth-child(3) { animation-delay: calc(var(--dur-1) * 2); }
@keyframes dots { 0%, 100% { opacity: .3; } 40% { opacity: 1; } }
.btn .detail { font-family: var(--font-data); font-weight: var(--fw-semibold); font-size: var(--t-chiffre); }
.btn kbd, kbd.kbd {
  font-family: var(--font-data); font-size: var(--t-legende); padding: 0 var(--sp-1);
  border: var(--bw) solid currentColor; border-radius: var(--radius-sm); opacity: .8;
}
/* Lien discret d'une action rare ou réservée (« Masquer cette adresse (admin) ») */
.lien-discret { justify-self: start; min-height: var(--touch); padding: 0; font: inherit; font-size: var(--t-bouton-petit);
  font-weight: var(--fw-semibold); color: var(--danger); background: none; border: 0; cursor: pointer; }

/* ── Champs ───────────────────────────────────────────────────────────────────── */
.field { display: grid; gap: var(--sp-2); }
.field__label { font-size: var(--t-champ); font-weight: var(--fw-semibold); color: var(--ink-2); }
.field__help { font-size: var(--t-legende); color: var(--ink-3); }
.field__error { display: none; align-items: center; gap: var(--sp-2); font-size: var(--t-secondaire); color: var(--danger); font-weight: var(--fw-medium); }
.input {
  width: 100%; min-height: var(--ctl); padding: 0 var(--sp-4);
  font: inherit; font-size: var(--t-texte); color: var(--ink);
  background: var(--surface); border: var(--bw) solid var(--border-strong); border-radius: var(--radius-md);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.input::placeholder { color: var(--ink-3); }
@media (hover: hover) { .input:hover:not(:disabled) { border-color: var(--ink-3); } }
.input:focus-visible, .input:focus { outline: none; border-color: var(--focus);
  box-shadow: 0 0 0 var(--bw) var(--focus); }
.input:disabled { color: var(--ink-disabled); background: var(--surface-2); border-color: var(--border); cursor: not-allowed; }
.field.is-invalid .input { border-color: var(--danger); box-shadow: 0 0 0 var(--bw) var(--danger); }
.field.is-invalid .field__error { display: flex; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > .ico { position: absolute; left: var(--sp-4); color: var(--ink-3); pointer-events: none; }
.input-wrap > .input { padding-left: calc(var(--sp-4) * 2 + var(--icon-sm)); }
.input-wrap > .btn--icon { position: absolute; right: 0; border: 0; background: transparent; }
/* Largeur des champs (règle du 3/11) : sur tablette et PC, un champ posé sur une page prend la largeur de ce qu'on y
   tape (court : SIREN, couleur, code ; moyen : nom, libellé), jamais toute la page ; sur téléphone et dans une fenêtre
   ou un formulaire étroit, toute la largeur */
@media (min-width: 768px) {
  .input--court { max-width: var(--champ-court); }
  .input--moyen { max-width: var(--champ-moyen); }
}
/* Logo d'une marque (intégration, 5/11) devant son nom : logo officiel en couleurs, rangé en base (console ›
   Intégrations) ; en sombre, sa version sombre s'il en a une (paire --clair / --sombre), sinon le même logo */
.logo-marque { flex: none; width: var(--logo-marque); height: var(--logo-marque); object-fit: contain; }
.logo-marque--sombre { display: none; }
[data-theme="dark"] .logo-marque--clair, .t-dark .logo-marque--clair { display: none; }
[data-theme="dark"] .logo-marque--sombre, .t-dark .logo-marque--sombre { display: inline-block; }

/* Case à cocher et interrupteur : ligne entière cliquable (44 px) */
.check { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--touch); cursor: pointer; }
.check input { appearance: none; margin: 0; flex: none; width: var(--icon-lg); height: var(--icon-lg);
  border: var(--bw-strong) solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface);
  display: grid; place-content: center; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.check input::after { content: ""; width: var(--check-mark); height: calc(var(--check-mark) / 2); border: solid var(--on-inverse); border-width: 0 0 var(--bw-strong) var(--bw-strong);
  transform: translateY(calc(var(--bw) * -2)) rotate(-45deg) scale(0); transition: transform var(--dur-1) var(--ease); }
.check input:checked { background: var(--inverse); border-color: var(--inverse); }
.check input:checked::after { transform: translateY(calc(var(--bw) * -2)) rotate(-45deg) scale(1); }
.check input:disabled { border-color: var(--border); background: var(--surface-2); cursor: not-allowed; }
.switch input { width: calc(var(--icon-lg) * 2); border-radius: var(--radius-full); place-content: center start; padding: 0 var(--bw-strong); }
.switch input::after { width: var(--knob); height: var(--knob); border: 0; border-radius: var(--radius-full); background: var(--border-strong);
  transform: none; transition: transform var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease); }
.switch input:checked::after { background: var(--on-inverse); transform: translateX(calc(var(--icon-lg) - var(--bw-strong))); }

/* Choix segmenté (Thème) */
.segmented { display: inline-flex; padding: var(--sp-1); gap: var(--sp-1); background: var(--surface-2); border-radius: var(--radius-md); }
.segmented button {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: calc(var(--touch) - var(--sp-2));
  padding: 0 var(--sp-3); font: inherit; font-size: var(--t-bouton-petit); font-weight: var(--fw-semibold); color: var(--ink-2);
  background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.segmented button:disabled:not([aria-pressed="true"]) { color: var(--ink-disabled); cursor: not-allowed; }

/* ── Pastilles vendeur ────────────────────────────────────────────────────────── */
/* --vc : couleur d'affichage du vendeur ; --vc-on : noir ou blanc (calculés par l'appli, voir DESIGN.md) */
.avatar {
  display: inline-grid; place-items: center; flex: none;
  width: var(--avatar); height: var(--avatar); border-radius: var(--radius-full);
  background: var(--vc); color: var(--vc-on);
  font-family: var(--font-data); font-size: var(--t-legende); font-weight: var(--fw-semibold); letter-spacing: 0;
}
/* Initiales centrées sur leur hauteur réelle (majuscules), pas sur la boîte de la police, qui réserve de la place
   sous la ligne : sans cela elles remontent de 0,75 à 1,5 px (mesuré le 3/11 ; écart restant ≤ 0,5 px, arrondi) */
.avatar__ini { display: block; text-box: trim-both cap alphabetic; }
.avatar--sm { width: var(--avatar-sm); height: var(--avatar-sm); font-size: var(--t-legende); }
.avatar--lg { width: var(--avatar-lg); height: var(--avatar-lg); font-size: var(--t-texte); }
/* Photo de profil en grand (Mon compte, photo à valider) */
.avatar--xl { width: var(--avatar-xl); height: var(--avatar-xl); font-size: var(--t-section); }
.avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
/* Photo à la place des initiales (quand elle existe), dans un liseré à la couleur du vendeur : la couleur reste le
   repère partout (carte, listes, pastilles) */
.avatar--photo { padding: var(--bw-strong); }
/* Étiquette posée sur une rue (carte, dessinée par l'appli) : pastille de couleur + initiales, ou portes utiles */
.vtag {
  display: inline-flex; align-items: center; gap: var(--sp-1); height: var(--sp-6); padding: 0 var(--sp-2);
  background: var(--tag-bg); color: var(--tag-fg); border-radius: var(--radius-sm);
  font-family: var(--font-data); font-size: var(--t-legende); font-weight: var(--fw-semibold);
}
.vtag i { width: var(--dot); height: var(--dot); border-radius: var(--radius-full); background: var(--vc); box-shadow: 0 0 0 var(--bw-strong) var(--tag-fg); }
.vtag--choisie { background: var(--brand); color: var(--on-brand); }

/* ── Statuts de rue : motif + symbole + libellé (jamais la couleur seule) ─────── */
.status {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--chip-h); padding: 0 var(--sp-3);
  border: var(--bw) solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface);
  font-size: var(--t-legende); font-weight: var(--fw-semibold); color: var(--ink);
}
.status .ico { width: var(--icon-sm); height: var(--icon-sm); }
.swatch { width: var(--sp-8); height: var(--sp-3); flex: none; }
.swatch line { stroke-linecap: round; }
.badge { display: inline-grid; place-items: center; min-width: var(--icon); height: var(--icon); padding: 0 var(--sp-1); border-radius: var(--radius-full);
  background: var(--danger); color: var(--surface); font-family: var(--font-data); font-size: var(--t-legende); font-weight: var(--fw-semibold); }

/* Paires libellé / valeur (identité d'une société, fiche de réglage) : deux colonnes sur tablette et PC, le libellé
   au-dessus de sa valeur sur téléphone */
.paires { display: grid; gap: var(--sp-1) var(--sp-4); margin: 0; }
.paires dt { color: var(--ink-3); font-size: var(--t-secondaire); }
.paires dd { margin: 0 0 var(--sp-2); color: var(--ink); font-size: var(--t-texte); overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .paires { grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; }
  .paires dd { margin: 0; }
}
/* Étiquette (3/11) : UN seul style pour un état court posé à côté d'un libellé (« bientôt », « bêta », « à vérifier »,
   « active »…), partout ; jamais pour un nombre (pastille .badge). Neutre par défaut, couleurs d'état sinon. */
.tag { display: inline-flex; align-items: center; flex: none; padding: var(--bw-strong) var(--sp-2); border-radius: var(--radius-full);
  background: var(--surface-2); color: var(--ink-3); font-size: var(--t-legende); font-weight: var(--fw-medium);
  line-height: var(--lh-tight); white-space: nowrap; }
.tag--info { background: var(--info-bg); color: var(--info); }
.tag--ok { background: var(--ok-bg); color: var(--ok); }
.tag--alerte { background: var(--warn-bg); color: var(--warn); }

/* ── Tuiles ───────────────────────────────────────────────────────────────────── */
.tile {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--ctl-lg); padding: var(--sp-3) var(--sp-4);
  font: inherit; text-align: left; color: var(--ink); background: var(--surface);
  border: var(--bw) solid var(--border); border-radius: var(--radius-md); cursor: pointer; position: relative;
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
@media (hover: hover) { .tile:hover:not([aria-disabled="true"]) { border-color: var(--border-strong); } }
.tile[aria-pressed="true"], .tile[aria-selected="true"] { border: var(--bw-strong) solid var(--ink);
  padding: calc(var(--sp-3) - var(--bw)) calc(var(--sp-4) - var(--bw)); }
.tile[aria-disabled="true"] { color: var(--ink-disabled); background: var(--surface-2); cursor: not-allowed; }
.tile__check { margin-left: auto; display: grid; place-items: center; width: var(--icon-lg); height: var(--icon-lg);
  border-radius: var(--radius-full); background: var(--brand); color: var(--on-brand); }
.tile__texte { flex: 1; display: grid; gap: var(--bw-strong); }
.tile__texte small { font-size: var(--t-secondaire); color: var(--ink-3); }
.tile--action > .ico:first-child { color: var(--ink-2); }
.tile--action > .ico:last-child { margin-left: auto; color: var(--ink-3); }

/* ── Compteurs (bandeau de la tournée) ────────────────────────────────────────── */
.counters { display: grid; gap: var(--sp-3); }
.progress { display: flex; align-items: center; gap: var(--sp-3); }
.progress__bar { flex: 1; display: flex; height: var(--bar-h); border-radius: var(--radius-full); background: var(--surface-2); overflow: hidden; }
.progress__bar i { display: block; height: 100%; }
.counters__cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.counters__cell { display: grid; align-content: start; gap: var(--sp-1); min-width: 0; padding: 0 var(--sp-2); border-left: var(--bw) solid var(--border); }
.counters__cell:first-child { padding-left: 0; border-left: 0; }
.counters__label { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--t-legende); color: var(--ink-2); }
.counters__value { font-family: var(--font-data); font-size: var(--t-chiffre); font-weight: var(--fw-semibold); }
.counters__sub { font-family: var(--font-data); font-size: var(--t-legende); color: var(--ink-3); white-space: nowrap; }

/* ── Panneau flottant (sur la carte) : opaque ─────────────────────────────────── */
.panel { background: var(--surface-raised); border: var(--bw) solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: var(--sp-4); }
@keyframes monter { from { transform: translateY(var(--sp-6)); opacity: 0; } }

/* ── Menus, info-bulles ───────────────────────────────────────────────────────── */
.menu {
  min-width: var(--menu-w); padding: var(--sp-2); font-size: var(--t-sous-menu); background: var(--surface-raised);
  border: var(--bw) solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
  animation: apparaitre var(--dur-2) var(--ease-out);
}
.menu__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.menu__item {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--touch); padding: 0 var(--sp-3);
  font: inherit; color: var(--ink); text-align: left; background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer;
  transition: background-color var(--dur-1) var(--ease);
}
.menu__item .ico { color: var(--ink-2); }
.menu__item:active, .menu__item[aria-current="true"] { background: var(--surface-pressed); }
@media (hover: hover) { .menu__item:hover { background: var(--surface-hover); } }
.menu__item--danger, .menu__item--danger .ico { color: var(--danger); }
.menu__item[aria-disabled="true"] { color: var(--ink-disabled); cursor: not-allowed; }
.menu__sep { height: var(--bw); margin: var(--sp-2) 0; background: var(--border); }
/* Intertitre d'un groupe de choix (liste à groupes : polices par style) */
.menu__groupe { padding: var(--sp-2) var(--sp-3) var(--sp-1); font-size: var(--t-legende); font-weight: var(--fw-semibold); color: var(--ink-3); }
.menu__item + .menu__groupe { margin-top: var(--sp-1); border-top: var(--bw) solid var(--border); }
@keyframes apparaitre { from { opacity: 0; transform: translateY(calc(var(--sp-1) * -1)) scale(.98); } }

.tooltip {
  display: inline-grid; gap: var(--sp-1); max-width: var(--tooltip-w); padding: var(--sp-2) var(--sp-3);
  background: var(--inverse); color: var(--on-inverse); border-radius: var(--radius-sm);
  font-size: var(--t-secondaire); box-shadow: var(--shadow-2); animation: apparaitre var(--dur-1) var(--ease-out);
}
.tooltip small { color: var(--on-inverse-2); font-size: var(--t-secondaire); }

/* ── Navigation ───────────────────────────────────────────────────────────────── */
/* Barre d'onglets (téléphone) : 64 px, onglet actif = texte 600 + trait 3 px en haut */
.tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: var(--tabbar-h);
  background: var(--surface); border-top: var(--bw) solid var(--border); }
.tabbar a, .tabbar button {
  display: grid; place-items: center; align-content: center; gap: var(--bw-strong); position: relative;
  font: inherit; font-size: var(--t-legende); color: var(--ink-2); background: none; border: 0; text-decoration: none; cursor: pointer;
}
.tabbar [aria-current="page"] { color: var(--ink); font-weight: var(--fw-semibold); }
.tabbar [aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: var(--gauge-h);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--brand); }
.tabbar .badge { position: absolute; top: var(--sp-2); left: calc(50% + var(--sp-2)); }

/* Menu latéral (tablette et PC) : déplié 288 px, replié 72 px (logo + icônes, info-bulle au survol) */
.sidenav { display: flex; flex-direction: column; gap: var(--sp-1); width: var(--sidebar-w); padding: var(--sp-3);
  background: var(--surface); border-right: var(--bw) solid var(--border); transition: width var(--dur-3) var(--ease); }
.sidenav__item {
  display: flex; align-items: center; gap: var(--sp-3); min-height: var(--touch); padding: 0 var(--sp-3);
  font-size: var(--t-menu); color: var(--ink-2); font-weight: var(--fw-medium); text-decoration: none; border-radius: var(--radius-sm);
  white-space: nowrap; overflow: hidden; position: relative;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
@media (hover: hover) { .sidenav__item:hover { background: var(--surface-hover); color: var(--ink); } }
.sidenav__item[aria-current="page"] { background: var(--surface-2); color: var(--ink); font-weight: var(--fw-semibold); }
.sidenav__item[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: var(--sp-2); bottom: var(--sp-2); width: var(--gauge-h);
  border-radius: var(--radius-full); background: var(--brand); }
.sidenav__sub { display: grid; gap: var(--bw-strong); padding-left: calc(var(--icon) + var(--sp-3)); }
.sidenav__sub .sidenav__item { min-height: var(--touch); font-size: var(--t-sous-menu); }
/* Numéro de version, discret, tout en bas du menu du profil (pour savoir quelle version on essaie) */
.menu__version { margin: 0; padding: var(--sp-2) var(--sp-3) var(--sp-1); font-family: var(--font-data); font-size: var(--t-legende);
  color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* « Propulsé par … » (offre Standard, 3/11) : au-dessus de la version, dans la police du texte */
.menu__propulse { display: block; font-family: var(--font-ui); overflow: hidden; text-overflow: ellipsis; }
.sidenav--mini { width: var(--sidebar-w-mini); }
.sidenav--mini .sidenav__label, .sidenav--mini .sidenav__sub { display: none; }
.sidenav--mini .sidenav__item { justify-content: center; padding: 0; }

/* Palette de commandes Ctrl+K (PC) */
.cmdk { width: min(var(--cmdk-w), 100%); background: var(--surface-raised); border: var(--bw) solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-3); overflow: hidden; animation: apparaitre var(--dur-2) var(--ease-out); }
.cmdk__search { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); border-bottom: var(--bw) solid var(--border); }
.cmdk__search input { flex: 1; min-height: var(--ctl-lg); font: inherit; font-size: var(--t-recherche); color: var(--ink); background: none; border: 0; outline: none; }
.cmdk__list { padding: var(--sp-2); display: grid; gap: var(--bw-strong); }
.cmdk__group { padding: var(--sp-2) var(--sp-3) var(--sp-1); }
.cmdk__item { position: relative; display: flex; align-items: center; gap: var(--sp-3); min-height: var(--touch); padding: 0 var(--sp-3);
  border-radius: var(--radius-sm); font-size: var(--t-sous-menu); color: var(--ink); }
.cmdk__item .faint { margin-left: auto; font-size: var(--t-legende); }
/* Ligne choisie : fond en retrait et trait droit à la couleur de la société, comme la page ouverte du menu latéral */
.cmdk__item[aria-selected="true"] { background: var(--surface-2); }
.cmdk__item[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: var(--sp-2); bottom: var(--sp-2);
  width: var(--gauge-h); border-radius: var(--radius-full); background: var(--brand); }
.cmdk__foot { display: flex; gap: var(--sp-4); padding: var(--sp-2) var(--sp-4); border-top: var(--bw) solid var(--border); font-size: var(--t-legende); color: var(--ink-3); }

/* ── Squelettes (chargement), états vides / erreur / hors connexion ───────────── */
.skeleton { display: block; border-radius: var(--radius-sm); min-height: var(--sp-3);
  background: linear-gradient(90deg, var(--skeleton) 0%, var(--skeleton-shine) 50%, var(--skeleton) 100%) 0 0 / 200% 100%;
  animation: luire calc(var(--dur-3) * 6) linear infinite; }
@keyframes luire { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton, .dots i { animation: none; } }

.empty { display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-8) var(--sp-6); text-align: center; }
.empty__icon { display: grid; place-items: center; width: var(--empty-icon); height: var(--empty-icon); border-radius: var(--radius-lg);
  background: var(--surface-2); color: var(--ink-2); }
.empty__icon .ico { width: var(--sp-8); height: var(--sp-8); }
.empty--error .empty__icon { background: var(--danger-bg); color: var(--danger); }
.empty--offline .empty__icon { background: var(--offline-bg); color: var(--offline); }
.empty__titre { font-size: var(--t-sous-section); font-weight: var(--fw-semibold); line-height: var(--lh-tight); margin: 0; }
.empty__texte { color: var(--ink-2); margin: 0; max-width: 34ch; }

/* ── Liste et lignes (tournées, rues, vendeurs) ───────────────────────────────── */
.list { background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.row { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--ctl-lg); padding: var(--sp-2) var(--sp-4); }
.row + .row { border-top: var(--bw) solid var(--border); }
.row__main { flex: 1; min-width: 0; display: grid; }
.row__titre { font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__sub { font-size: var(--t-secondaire); color: var(--ink-3); }
.row__num { font-family: var(--font-data); font-weight: var(--fw-semibold); }
/* Ligne touchable (bouton) : toute la ligne ouvre l'élément, chevron à droite (utilisateurs…) */
.list button.row { width: 100%; font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
.list button.row + .row, .list .row + button.row { border-top: var(--bw) solid var(--border); }
.list button.row > .ico { flex: none; color: var(--ink-3); }
@media (hover: hover) { .list button.row:hover { background: var(--surface-hover); } }
.list button.row:active { background: var(--surface-pressed); }
/* Trait de statut en début de ligne, comme le trait du menu : décollé du bord (12 px), 75 % de la hauteur de la
   pastille, centré sur la ligne ; la pastille s'écarte d'autant. Vert actif, rouge désactivé, gris supprimé ; le
   statut est aussi écrit dans la ligne (jamais la couleur seule) */
.row--statut { position: relative; padding-left: calc(var(--sp-6) + var(--sp-1)); }
.row--statut::before { content: ""; position: absolute; left: var(--sp-3); top: calc(50% - var(--avatar) * .375);
  height: calc(var(--avatar) * .75); width: var(--gauge-h);
  border-radius: var(--radius-full); background: var(--statut, var(--ink-3)); }
/* Tableau de gestion (4/11, PC) : la liste en colonnes avec leurs titres, pour que la largeur porte de l'information ;
   colonnes propres à chaque liste (--colonnes), la dernière pour le chevron ; tablette et téléphone : lignes habituelles */
.tableau__tete, .list .tableau__ligne { display: grid; grid-template-columns: var(--colonnes) var(--icon); align-items: center;
  column-gap: var(--sp-4); }
.tableau__tete { padding: var(--sp-2) var(--sp-4); font-size: var(--t-legende); font-weight: var(--fw-semibold); color: var(--ink-3);
  background: var(--surface-2); border-bottom: var(--bw) solid var(--border); }
.tableau__cellule { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-secondaire);
  color: var(--ink-2); }
.tableau__cellule--titre { display: flex; align-items: center; gap: var(--sp-3); font-size: inherit; font-weight: var(--fw-semibold);
  color: var(--ink); }
.tableau__cellule--titre > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tableau__cellule .tag { max-width: 100%; }
.tableau--statut .tableau__tete { padding-left: calc(var(--sp-6) + var(--sp-1)); }  /* aligné sur les lignes à trait de statut */
.row--actif { --statut: var(--ok); }
.row--desactive { --statut: var(--danger); }
.row--supprime { --statut: var(--ink-3); }

/* Code QR à scanner (double authentification, 3/11) : toujours noir sur blanc, quel que soit le thème (lu par l'appareil
   photo), cadré d'un filet ; la clé à saisir à la main est en dessous, en chasse fixe, coupable n'importe où */
.qr { display: block; width: var(--qr); height: var(--qr); margin: 0 auto; padding: var(--sp-2); border-radius: var(--radius-md);
  color: var(--qr-encre); background: var(--qr-fond); border: var(--bw) solid var(--border); }
.cle-secrete { display: block; margin-top: var(--sp-1); color: var(--ink); overflow-wrap: anywhere; user-select: all; }