/* ============================================================
   Refonte v2 — le motif de ligne des fiches (lot 4)

   Construit sur PROSPECTS uniquement, à valider avant d'être reporté
   sur Clients et le carnet de contacts. Les traiter en parallèle les
   ferait diverger (consigne Claude Design du 07/08/2026).

   POURQUOI LA VUE LISTE RESTE UN <table>

   Le motif `.m-liste` du lot 2 est une grille CSS à colonnes fixées.
   Ici les colonnes sont choisies par l'utilisateur — « Gérer les
   champs » les ajoute, les retire et les réordonne. Un
   `grid-template-columns` devrait alors être recalculé en JavaScript à
   chaque rendu, pour reproduire ce qu'un tableau fait nativement.
   On garde donc le <table> et on lui donne l'APPARENCE du motif :
   même panneau de verre, même en-tête, même hauteur de ligne, même
   survol, même filet de statut. Motif identique, mécanique adaptée à
   la forme des données.

   LE FILET PORTE L'ÉTAT, PAS L'ÉTAPE

   Mesuré sur les 43 prospects réels : l'état se répartit en 40 %
   à rappeler, 37 % perdu, 19 % avancé, 5 % en attente — trois
   couleurs franches, la liste se balaye. L'ancienneté, elle, tasse
   96 % des fiches dans deux tranches contiguës : un filet dessus
   serait monochrome. L'étape (4 valeurs sur 7 utilisées) va donc à
   la pastille, qui peut en porter sept et qu'on lit.

   Portée : `[data-v2].list-view` et `[data-v2].kanban`, posés par
   renderListView() et renderKanban().
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   LA CORRESPONDANCE ÉTAT → COULEUR
   Une seule table, partagée par la liste et le kanban, pour que la
   même fiche ne change pas de couleur en changeant de vue.
   Les identifiants viennent des colonnes réelles du CRM.
   ══════════════════════════════════════════════════════════════ */
/* Le balisage émet la valeur de RAMPE (pos/neg/info/neutre), calculée par
   `ficheVersRampe()` dans app-core.js. Cette feuille n'a donc aucune
   connaissance des colonnes du CRM : si l'utilisateur en ajoute une, c'est
   la table JavaScript qui tranche, à un seul endroit. */
[data-v2] [data-statut="pos"]    { --m-rail: var(--pos-fg);   --m-fg: var(--pos-fg);   --m-bg: var(--pos); }
[data-v2] [data-statut="info"]   { --m-rail: var(--info-fg);  --m-fg: var(--info-fg);  --m-bg: var(--info-soft); }
[data-v2] [data-statut="neg"]    { --m-rail: var(--neg-fg);   --m-fg: var(--neg-fg);   --m-bg: var(--neg-soft); }
[data-v2] [data-statut="neutre"] { --m-rail: var(--v2-text-3); --m-fg: var(--v2-text-2); --m-bg: var(--inset); }

/* ══════════════════════════════════════════════════════════════
   LA VUE LISTE
   ══════════════════════════════════════════════════════════════ */
[data-v2].list-view {
  font-family: var(--font);
  color: var(--v2-text);
  -webkit-font-smoothing: antialiased;
}
[data-v2].list-view .list-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--panel);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  /* PAS d'overflow: hidden ici : un tableau en overflow non-visible
     CAPTURE le position:sticky de ses th — l'en-tête de colonnes ne
     collerait plus jamais au défilement de <main>. L'arrondi est
     porté par les cellules d'angle ci-dessous. */
}
[data-v2].list-view .list-table thead th:first-child { border-top-left-radius: var(--r-md); }
[data-v2].list-view .list-table thead th:last-child { border-top-right-radius: var(--r-md); }
[data-v2].list-view .list-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--r-md); }
[data-v2].list-view .list-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--r-md); }

/* En-tête : sur-titres 11 px capitales, comme le motif. */
[data-v2].list-view .list-table thead th {
  position: sticky;
  top: 0;

  background: var(--panel-2);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--stroke-2);

  height: 38px;
  text-align: left;
  white-space: nowrap;
  font-size: 11px;

  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--v2-text-3);
  cursor: pointer;
  user-select: none;
}
[data-v2].list-view .list-table thead th:hover { color: var(--v2-text-2); }
[data-v2].list-view .list-table thead th.sorted { color: var(--v2-text); }
[data-v2].list-view .sort-arrow svg { width: 11px; height: 11px; vertical-align: -1px; }

/* Ligne : 52 px comme le motif, séparée par --stroke-2, survol --inset. */
[data-v2].list-view .list-table tbody tr {
  cursor: pointer;
  transition: background .14s ease;
}
[data-v2].list-view .list-table tbody tr:hover { background: var(--inset); }
[data-v2].list-view .list-table tbody td {

  height: 52px;
  border-bottom: 1px solid var(--stroke-2);
  font-size: 13.5px;
  font-weight: 550;
  letter-spacing: -.01em;
  color: var(--v2-text-2);
  vertical-align: middle;
}
[data-v2].list-view .list-table tbody tr:last-child td { border-bottom: 0; }

/* LE FILET DE STATUT.
   Sur une ligne de tableau, un ::before en position absolue est
   fragile : les navigateurs traitent `position: relative` sur <tr> de
   façon inégale. Une ombre intérieure sur la première cellule donne le
   même filet de 4 px, sans sortir du flux et sans décaler la colonne. */
[data-v2].list-view .list-table tbody td:first-child {

}

/* Le nom : c'est la colonne qu'on lit, elle prend l'encre pleine. */
[data-v2].list-view .col-name { display: flex; align-items: center; min-width: 0; }
[data-v2].list-view .col-name-text {

  color: var(--v2-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-v2].list-view .col-logo {
  width: 30px; height: 30px;
  flex: 0 0 30px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--inset);
  color: var(--v2-text-3);
  font-size: 11px;
  font-weight: 680;
}
[data-v2].list-view .col-logo img { width: 100%; height: 100%; object-fit: cover; }

/* La pastille d'état, reprise du motif 3 — encre + fond de la paire. */
[data-v2].list-view .col-meta-pill {
  display: inline-flex;
  align-items: center;
  height: 23px;
  padding: 0 9px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 550;
  white-space: nowrap;
  color: var(--m-fg, var(--v2-text-2));
  background: var(--m-bg, var(--inset));
}
[data-v2].list-view .muted { color: var(--v2-text-3); }

/* Les étiquettes de champ (urgence, service, secteur…) : ce sont des
   catégories, pas des statuts. Contour et encre secondaire — elles ne
   doivent pas concurrencer la pastille d'état. */
[data-v2].list-view .tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 99px;
  border: 1px solid var(--stroke);
  background: none;
  font-size: 11.5px;
  font-weight: 550;
  color: var(--v2-text-2);
  white-space: nowrap;
}

[data-v2].list-view .badge-overdue,
[data-v2].list-view .badge-encours {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 550;
}
[data-v2].list-view .badge-overdue { color: var(--neg-fg); background: var(--neg-soft); }
[data-v2].list-view .badge-encours { color: var(--v2-text-2); background: var(--inset); }
[data-v2].list-view .badge-overdue svg,
[data-v2].list-view .badge-encours svg { width: 11px; height: 11px; }

/* L'état vide, dans le motif 7. */
[data-v2].list-view .list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 44px 20px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--v2-text);
}
[data-v2].list-view .list-empty span { font-size: 12.5px; font-weight: 550; color: var(--v2-text-3); }
[data-v2].list-view .list-empty-icon {
  width: 46px; height: 46px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  background: var(--inset);
  color: var(--v2-text-3);
  margin-bottom: 3px;
}
[data-v2].list-view .list-empty-icon svg { width: 20px; height: 20px; }

/* ══════════════════════════════════════════════════════════════
   LA CARTE KANBAN
   Même hiérarchie que la ligne de liste : filet à gauche, nom en
   encre pleine, état en pastille, le reste en secondaire.
   ══════════════════════════════════════════════════════════════ */
[data-v2].kanban { font-family: var(--font); -webkit-font-smoothing: antialiased; }

[data-v2].kanban .card {
  /* La colonne est un conteneur flex vertical : sans `flex: 0 0 auto`, les
     cartes se partagent la hauteur disponible et rétrécissent dès qu'elles
     sont nombreuses. Mesuré avant correction : 78 px affichés pour 232 px de
     contenu, dans la colonne « À rappeler » et ses 17 fiches — titre coupé,
     méta invisibles. L'ancienne feuille le posait ; en reprenant la règle,
     je ne l'avais pas repris. */
  flex: 0 0 auto;
  position: relative;
  background: var(--panel);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--stroke);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
  padding: 11px 13px 11px 15px;
  cursor: pointer;
  transition: border-color .14s ease, box-shadow .14s ease;
  overflow: hidden;
}
[data-v2].kanban .card:hover { border-color: var(--stroke-2); box-shadow: var(--shadow); }
[data-v2].kanban .card:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; }
/* Le filet de 4 px hérité de la liste est retiré du kanban (Joris,
   18/08/2026) : la colonne teintée porte déjà la couleur d'état, le
   rail sur chaque carte faisait doublon et salissait le bord. */
[data-v2].kanban .card::before { display: none; }
[data-v2].kanban .card.dragging { opacity: .5; }

[data-v2].kanban .card-logo {
  width: 30px; height: 30px;
  flex: 0 0 30px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--inset);
  color: var(--v2-text-3) !important;
  font-size: 11px;
  font-weight: 680;
}
[data-v2].kanban .card-title {
  font-size: 13.5px;
  font-weight: 550;
  letter-spacing: -.01em;
  color: var(--v2-text);
}
[data-v2].kanban .card-meta-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 550;
  color: var(--v2-text-3);
  margin-top: 3px;
}
[data-v2].kanban .card-meta-row svg,
[data-v2].kanban .card-meta-icon,
[data-v2].kanban .meta-icon { width: 12px; height: 12px; flex: 0 0 12px; }

[data-v2].kanban .tag {
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 0 8px;
  border-radius: 99px;
  border: 1px solid var(--stroke);
  background: none;
  font-size: 11px;
  font-weight: 550;
  color: var(--v2-text-2);
}

/* Les deux alertes gardent le rouge : ce sont de vraies anomalies,
   pas des statuts. « Sans contact depuis N jours » passe en neutre —
   ce n'est pas une faute, c'est une information. */
[data-v2].kanban .card-alert {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 550;
  color: var(--neg-fg);
  background: var(--neg-soft);
  margin-top: 7px;
}
[data-v2].kanban .card-alert-warm { color: var(--v2-text-2); background: var(--inset); }
[data-v2].kanban .card-alert svg { width: 12px; height: 12px; }

[data-v2].kanban .card-encours-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 550;
  color: var(--v2-text-2);
  background: var(--inset);
  margin-top: 7px;
}
[data-v2].kanban .card-encours-badge svg { width: 11px; height: 11px; }

[data-v2].kanban .card-resp {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--stroke-2);
  font-size: 11px;
  font-weight: 550;
  color: var(--v2-text-3);
}

@media (prefers-reduced-motion: reduce) {
  [data-v2].list-view .list-table tbody tr,
  [data-v2].kanban .card { transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   KANBAN CLIENTS — retour au calme (relecture Industry, 10/08/2026)
   Sept remarques, dont six tiennent en CSS. La règle qui les relie :
   un seul objet coloré par carte. Dès qu'une carte porte trois
   couleurs, on ne balaye plus, on lit — et une colonne se lit à la
   verticale, pas ligne à ligne.
   Chargée après styles.css, cette feuille l'emporte à spécificité
   égale ; les sélecteurs sont renforcés là où il le faut.
   ══════════════════════════════════════════════════════════════ */

/* ── 2. Un commentaire n'est pas une alerte ────────────────────
   « moins de production », « plus de besoin », « Mise en place d'un
   tech qui correspondait pas… » : ce sont des notes, écrites par
   Joris, qui expliquent une situation. Elles étaient rendues en
   rouge encadré — décision du 07/07/2026, révisée le 10/08. Le
   rouge redevient ce qu'il doit être : le signal d'un défaut. */
[data-v2].kanban .card .card-raison,
.kanban .card .card-raison {
  background: var(--inset);
  border-color: transparent;
  color: var(--v2-text-2);
  font-style: normal;
  font-weight: 550;
}
[data-v2].kanban .card .card-raison .card-raison-icon,
.kanban .card .card-raison .card-raison-icon { color: var(--v2-text-3); }
[data-v2].kanban .card .card-raison:hover,
.kanban .card .card-raison:hover { border-color: var(--stroke-2); background: var(--panel-2); }

/* Le manque, lui, reste rouge : « Raison à préciser… » désigne une
   information absente sur une fiche perdue, et c'est actionnable. */
[data-v2].kanban .card .card-raison.card-raison-missing,
.kanban .card .card-raison.card-raison-missing {
  background: var(--neg-soft);
  border-color: transparent;
  color: var(--neg-fg);
  font-weight: 620;
}
[data-v2].kanban .card .card-raison-missing .card-raison-icon,
.kanban .card .card-raison-missing .card-raison-icon { color: var(--neg-fg); }

/* ── 3. Le badge de réactivation s'aligne sur le même registre ──
   Il ne subsiste que sur une fiche ACTIVE sans mission (voir
   app-kanban.js) : là, il est la seule anomalie de la carte. */
[data-v2].kanban .card .card-reactiver,
.kanban .card .card-reactiver {
  background: var(--neg-soft);
  border-color: transparent;
  color: var(--neg-fg);
  font-weight: 620;
}

/* ── 5. La teinte est DANS l'en-tête, pas au-dessus ────────────
   Une bande de 3 px flottait au-dessus de chaque colonne, détachée
   de son en-tête : cinq traits de couleur qui n'appartenaient à
   rien. La maquette met la teinte dans l'en-tête — fond pâle et un
   filet de 2 px en dessous, qui la rattache à sa colonne. */
.kanban .column-header::before { display: none; }
/* L'EN-TÊTE EST LE HAUT DE LA COLONNE, PAS UNE ÉTIQUETTE POSÉE DESSUS.
   Il portait `border-radius: var(--r-lg)` (26 px) dans une colonne
   arrondie à 18 px : ses coins dépassaient de la courbe et laissaient
   voir le fond de la colonne en dessous — c'est ce liseré qui donnait
   l'impression d'une bande flottante détachée.
   `border-radius: inherit` sur les deux coins hauts fait épouser
   exactement la courbe du parent, quelle que soit sa valeur. */
/* LA CONSTRUCTION DE LA MAQUETTE (5-prospects-kanban.png), relevée au
   pixel le 18/08/2026 sur demande de Joris (« je veux ce que Claude
   Design a fait point barre ») :
   — en-tête : lavis franc de la teinte (~16 % sur blanc), coins hauts
     arrondis avec la colonne ;
   — sous l'en-tête : un trait PLEIN de la couleur de colonne ;
   — corps : quasi blanc, à peine teinté (~3 %), OPAQUE — pas de voile
     de verre translucide, c'est lui qui laissait voir du blanc au
     contour et désaccordait l'arrière de la colonne ;
   — autour : un filet gris discret, jamais blanc. */
.kanban .column-header {
  background: color-mix(in srgb,
    color-mix(in srgb, var(--col-color, var(--accent-bright, #f5d547)) 80%, #6E6553) 19%,
    var(--panel, rgba(255,255,255,.66)));
  border-bottom: 2px solid color-mix(in srgb, var(--col-color, var(--accent-bright, #f5d547)) 62%, var(--v2-text, #16171a));
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 12px 16px 11px;
  margin: 0;
}
.kanban .column {
  overflow: hidden;
  background: var(--panel, rgba(255,255,255,.66));
  border: 1px solid rgba(var(--k), calc(.09 * var(--ka)));
  border-radius: var(--r-sm, 12px);
}

/* ── 6. Les étoiles se lisent comme une note ───────────────────
   12 px en ambre plein, elles pesaient autant que le nom du client.
   Une satisfaction est une donnée de second plan : on la consulte,
   on ne la balaye pas. */
/* Qualifiées `[data-v2]` : la règle générique `[data-v2].kanban
   .card-meta-row svg { width: 12px }`, posée plus haut dans cette même
   feuille, pèse (0,3,1) et l'emportait sur un `.kanban .card
   .card-star-icon` à (0,3,0) — l'attribut SVG à 10 était bien écrit,
   mais le CSS le recouvrait. */
[data-v2].kanban .card .card-stars,
.kanban .card .card-stars { gap: 2px; }
[data-v2].kanban .card .card-star-icon,
.kanban .card .card-star-icon {
  /* `flex-basis` et non `width` : le parent est un conteneur flex, et la
     règle générique des icônes de méta pose `flex: 0 0 12px`. Sur l'axe
     principal, c'est la base flex qui fixe la largeur — `width: 10px`
     restait sans effet, même déclaré `!important` (mesuré : height
     passait à 10, width restait à 12). */
  flex: 0 0 10px;
  width: 10px; height: 10px;
  color: var(--v2-accent);
  /* trait-fin — une étoile de 10 px est un glyphe, pas une surface. C'est
     bien l'ENCRE olive qu'on veut ici : l'ambre d'aplat était le « ambre
     saturé » reproché, et sur le fond blanc de la carte il tombe à 1,45:1. */
  fill: var(--v2-accent); /* trait-fin */
  opacity: .85;
}

/* ── 7. Les ascenseurs de colonne s'effacent ───────────────────
   Cinq barres grises permanentes découpaient l'écran en tranches.
   Elles restent utilisables — simplement, elles ne se voient qu'au
   survol de la colonne. */
.kanban .column-body { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.kanban .column-body:hover { scrollbar-color: var(--stroke-2) transparent; }
.kanban .column-body::-webkit-scrollbar { width: 6px; }
.kanban .column-body::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.kanban .column-body:hover::-webkit-scrollbar-thumb { background: var(--stroke-2); }
.kanban .column-body:hover::-webkit-scrollbar-thumb:hover { background: var(--v2-text-3); }

/* ══════════════════════════════════════════════════════════════
   LA CARTE SE LIT EN TROIS ZONES (principe 3, Industry 10/08/2026)
   Elle était une pile plate de dix éléments à la même respiration :
   l'œil devait tout parcourir pour trouver un lieu. Trois zones, et
   on sait où regarder sans chercher.
       Identité — initiales, nom, ancienneté (.card-title-row)
       État     — pastille, note, étiquettes
       Pied     — lieu et contact, derrière un filet (.card-meta)
   ══════════════════════════════════════════════════════════════ */

/* Le PIED. Le filet est ce qui fait qu'on trouve le lieu sans le
   chercher : il dit « ici, on change de registre ». En 11 px encre
   tertiaire, ces lignes cessent de concurrencer le statut. */
[data-v2].kanban .card .card-meta,
.kanban .card .card-meta {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--stroke-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
[data-v2].kanban .card .card-meta .card-meta-row,
.kanban .card .card-meta .card-meta-row {
  font-size: 11px;
  color: var(--v2-text-3);
  gap: 6px;
}
[data-v2].kanban .card .card-meta .card-meta-icon,
.kanban .card .card-meta .card-meta-icon { color: var(--v2-text-3); opacity: .8; }
/* Le responsable ferme le pied : il est de même nature que le lieu et
   le contact, il n'a pas à être séparé d'eux par un second filet. */
[data-v2].kanban .card .card-resp,
.kanban .card .card-resp { margin-top: 4px; border-top: 0; padding-top: 0; }

/* L'ÉTAT. Les blocs de cette zone respirent moins entre eux qu'avec
   les zones voisines : ils forment un groupe, pas une énumération. */
[data-v2].kanban .card .card-tags,
.kanban .card .card-tags { margin-top: 7px; gap: 4px; }
[data-v2].kanban .card .card-raison,
.kanban .card .card-raison { margin: 7px 0 0; }
[data-v2].kanban .card .card-ca,
[data-v2].kanban .card .card-reactiver,
.kanban .card .card-ca,
.kanban .card .card-reactiver { margin: 7px 0 0; }

/* L'IDENTITÉ. Le nom porte la carte : il garde son poids, les boutons
   d'action restent en retrait tant qu'on ne survole pas la carte. */
[data-v2].kanban .card .card-title-row,
.kanban .card .card-title-row { align-items: flex-start; gap: 8px; }
[data-v2].kanban .card .card-comm,
.kanban .card .card-comm { opacity: 0; transition: opacity .14s ease; }
[data-v2].kanban .card:hover .card-comm,
[data-v2].kanban .card:focus-within .card-comm,
.kanban .card:hover .card-comm,
.kanban .card:focus-within .card-comm { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   VUE LISTE — les colonnes de la maquette (4-prospects-liste.png)
   Deux pseudo-colonnes calculées, ÉTAPE et SANS CONTACT, plus le
   chevron de fin de ligne. Les colonnes issues des champs restent
   pilotées par « Gérer les champs » : rien n'est figé ici.
   ══════════════════════════════════════════════════════════════ */

/* ── La cellule ENTREPRISE : nom, alerte, sous-ligne ───────────*/
[data-v2].list-view .col-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
[data-v2].list-view .col-name-bloc { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
[data-v2].list-view .col-name-text {
  display: flex; align-items: center; gap: 5px;
  font-size: 13.5px; font-weight: 620; color: var(--v2-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-v2].list-view .col-name-sous {
  font-size: 11px; color: var(--v2-text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Le triangle d'un dossier bloqué. Seul objet rouge de la ligne avec
   la pastille d'ancienneté — et les deux disent la même chose. */
[data-v2].list-view .col-alerte { display: inline-flex; color: var(--neg-fg); flex-shrink: 0; }
[data-v2].list-view .col-alerte svg { width: 13px; height: 13px; }

/* ── La cellule ÉTAPE : sept segments plats ────────────────────
   Aucun chevron, aucune flèche, aucun aplat ambre. Les segments
   validés prennent --m-rail, la teinte que le <tr> porte déjà pour
   son filet de statut : la ligne ne dit qu'une couleur. */
[data-v2].list-view .col-etape { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
[data-v2].list-view .col-etape-l1 { display: flex; align-items: center; gap: 8px; }
[data-v2].list-view .col-etape-n {
  font-size: 11px; font-weight: 680; color: var(--v2-text-2);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
[data-v2].list-view .col-etape-segs { display: flex; gap: 4px; flex: 1; min-width: 60px; }
[data-v2].list-view .col-etape-segs i {
  flex: 1; height: 5px; border-radius: 2px;
  background: var(--track);
}
[data-v2].list-view .col-etape-segs i.fait { }
[data-v2].list-view .col-etape-lbl {
  font-size: 11px; color: var(--v2-text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── La cellule SANS CONTACT ───────────────────────────────────*/
[data-v2].list-view .col-sc {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 8px; border-radius: 99px;
  font-size: 11px; font-weight: 620;
  font-variant-numeric: tabular-nums;
  background: var(--m-bg, var(--inset));
  color: var(--m-fg, var(--v2-text-3));
}
[data-v2].list-view .col-sc[data-statut="attention"] { background: var(--accent-soft); color: var(--v2-accent); }
[data-v2].list-view .col-sc-jamais { background: var(--neg-soft); color: var(--neg-fg); font-style: normal; }

/* ── Le chevron de fin de ligne ────────────────────────────────*/
[data-v2].list-view .col-go { color: var(--v2-text-3); opacity: .55; }
[data-v2].list-view tbody tr:hover .col-go { opacity: 1; color: var(--v2-text-2); }
[data-v2].list-view th:last-child, [data-v2].list-view td:last-child { width: 34px; text-align: right; }

/* ══════════════════════════════════════════════════════════════
   LA COULEUR DE COLONNE EST RÉGLABLE, ET ELLE FAIT AUTORITÉ
   Une seule source pour l'en-tête et pour le filet des cartes :
   `--col-color`, posé sur la colonne depuis `col.color`. Tant que
   les deux lisent la même variable, ils ne peuvent plus diverger —
   c'est ce qui produisait un en-tête jaune sur des cartes bleues.
   ══════════════════════════════════════════════════════════════ */
[data-v2].kanban .column .card { --m-rail: var(--col-color, var(--info-fg)); }

/* ── Le menu d'une colonne ─────────────────────────────────────*/
.col-menu-pop {
  position: fixed;
  z-index: calc(var(--z-alerte) + 5);
  min-width: 196px;
  padding: 10px;
  border-radius: var(--r-sm);
  background: var(--panel-solid);
  border: 1px solid var(--stroke);
  box-shadow: 0 12px 32px rgba(0,0,0,.16);
  font-family: var(--font);
}
.col-menu-pop .cmp-titre {
  font-size: 10.5px; font-weight: 640; letter-spacing: .07em;
  text-transform: uppercase; color: var(--v2-text-3);
  margin: 0 2px 8px;
}
.col-menu-pop .cmp-palette {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.col-menu-pop .cmp-pastille {
  all: unset;
  cursor: pointer;
  height: 26px;
  border-radius: var(--r-xs, 9px);
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  transition: transform .12s ease;
}
.col-menu-pop .cmp-pastille:hover { transform: scale(1.06); }
.col-menu-pop .cmp-pastille.actif { border-color: var(--v2-text); }
.col-menu-pop .cmp-pastille:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; }
.col-menu-pop .cmp-sep { height: 1px; background: var(--stroke-2); margin: 10px 0 6px; }
.col-menu-pop .cmp-item {
  all: unset;
  display: block; box-sizing: border-box;
  width: 100%; padding: 7px 8px;
  border-radius: var(--r-xs, 9px);
  cursor: pointer;
  font-size: 12.5px;
  color: var(--v2-text-2);
}
.col-menu-pop .cmp-item:hover { background: var(--inset); color: var(--v2-text); }
.col-menu-pop .cmp-danger { color: var(--neg-fg); }
.col-menu-pop .cmp-danger:hover { background: var(--neg-soft); color: var(--neg-fg); }

/* ══════════════════════════════════════════════════════════════
   VUE LISTE — la densité
   Une liste se BALAYE : l'œil descend une colonne sans que la ligne
   suivante se dérobe. Il lui faut donc un pas constant. Les hauteurs
   mesurées oscillaient entre 52 et 57 px selon qu'un nom passait ou
   non à la ligne — c'est ce qui obligeait à relire.
   ══════════════════════════════════════════════════════════════ */
[data-v2].list-view .list-table { table-layout: auto; width: 100%; }
[data-v2].list-view .list-table tbody tr { height: 54px; }
[data-v2].list-view .list-table tbody td {
  padding: 8px 12px;
  vertical-align: middle;
  /* Une cellule ne pousse plus la ligne : elle tronque. Le contenu
     complet reste accessible au survol (title) et dans la fiche. */
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Trois cellules dérogent : elles empilent deux lignes courtes par
   construction, et leur hauteur est bornée. */
[data-v2].list-view .list-table td:has(.col-name),
[data-v2].list-view .list-table td:has(.col-etape) { white-space: normal; }
[data-v2].list-view .list-table td:has(.col-name) { min-width: 220px; }
[data-v2].list-view .list-table td:has(.col-etape) { min-width: 150px; }

/* L'en-tête reste lisible et collant : sur 43 lignes, on perd sinon
   le nom des colonnes dès le premier défilement. */
[data-v2].list-view .list-table thead th {
  position: sticky; top: 0; z-index: 2;
  padding: 11px 12px;
  font-size: 11px; font-weight: 620; letter-spacing: .08em;
  text-transform: uppercase; color: var(--v2-text-3);
  white-space: nowrap;
  background: var(--panel-2);
}

/* ── Le pied ───────────────────────────────────────────────────*/
[data-v2].list-view .list-pied {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--stroke-2);
  font-size: 12px; color: var(--v2-text-3);
}
[data-v2].list-view .list-pied-n { font-weight: 620; color: var(--v2-text-2); }
[data-v2].list-view .list-pied-masq {
  margin-left: auto;
  padding: 3px 9px; border-radius: 99px;
  background: var(--inset);
  cursor: help;
}

/* ══════════════════════════════════════════════════════════════
   LA BARRE D'OUTILS — Prospects et Clients
   Le markup n'est PAS déplacé : `renderFilters()` remplace le contenu
   de #filters par innerHTML à chaque rendu, et le segment
   Liste/Kanban ou « Gérer les champs » déplacés là seraient détruits
   au premier changement de filtre. Tout se joue donc en CSS, sur les
   éléments là où ils sont.
   ══════════════════════════════════════════════════════════════ */

/* ── Le segment Liste / Kanban ─────────────────────────────────
   Une piste arrondie, deux pilules, l'active en ambre pâle. */
body.v2-coque main #view-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 99px;
  background: var(--inset);
  border: 1px solid var(--stroke-2);
  box-shadow: none;
}
body.v2-coque main #view-toggle button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 14px;
  border-radius: 99px;
  font-size: 12.5px; font-weight: 620;
  color: var(--v2-text-3);
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
body.v2-coque main #view-toggle button:hover { color: var(--v2-text-2); }
body.v2-coque main #view-toggle button svg { width: 14px; height: 14px; }
body.v2-coque main #view-toggle button.active {
  background: var(--accent-soft);
  color: var(--v2-accent);
  box-shadow: var(--shadow-sm);
}
body.v2-coque main #view-toggle button:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; }

/* ── La recherche : une pilule, avec son raccourci ─────────────*/
body.v2-coque main .search-box { position: relative; flex: 0 1 260px; }
body.v2-coque main .search-box input {
  box-sizing: border-box;
  width: 100%; height: 38px;
  padding: 0 46px 0 14px;
  border-radius: 99px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  font-family: var(--font); font-size: 13.5px;
  color: var(--v2-text);
  transition: border-color .14s ease;
}
body.v2-coque main .search-box input::placeholder { color: var(--v2-text-3); }
body.v2-coque main .search-box input:focus { outline: none; border-color: var(--stroke-2); }
/* Le raccourci, en pastille, à droite dans le champ. */
body.v2-coque main .search-box::after {
  content: "⌘K";
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  padding: 3px 7px; border-radius: var(--r-xs, 9px);
  background: var(--inset); border: 1px solid var(--stroke);
  font-size: 11px; font-weight: 620; color: var(--v2-text-3);
  pointer-events: none;
}

/* ── Les filtres : pilules blanches, filtres rapides en creux ──*/
body.v2-coque main .filters {
  display: flex; align-items: center; flex-wrap: wrap;

  background: transparent;
  border: 0;
}
body.v2-coque main .filters .filter-dropdown > *,
body.v2-coque main .filters .filter-select,
body.v2-coque main .filters select {
  height: 32px; padding: 0 12px;
  border-radius: 99px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  font-family: var(--font); font-size: 12.5px;
  color: var(--v2-text-2);
}
/* Les filtres rapides vivent dans un conteneur `.quick-filters` (au
   pluriel) : c'est sur ses ENFANTS qu'il faut agir, pas sur lui. */
body.v2-coque main .filters .quick-filters { display: flex; align-items: center; gap: 10px; }
body.v2-coque main .filters .quick-filters > * {
  box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border-radius: 99px;
  background: var(--inset);
  border: 1px solid var(--stroke-2);
  font-size: 12.5px; font-weight: 550;
  color: var(--v2-text-2);
}
body.v2-coque main .filters .quick-filters > *:hover { border-color: var(--stroke); color: var(--v2-text); }
body.v2-coque main .filters .quick-filters > * svg { width: 13px; height: 13px; }

/* ── La loupe ──────────────────────────────────────────────────
   Le champ ne contient qu'un <input> : aucune icône dans le markup.
   Elle est dessinée en fond, ce qui évite de toucher au gabarit et
   donc de risquer un doublon à chaque rendu. */
body.v2-coque main .search-box input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6f76' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.2-3.2'/></svg>");
  background-repeat: no-repeat;
  background-position: 13px center;
  background-size: 15px 15px;
  padding-left: 36px;
}

/* ── L'ordre du segment : Liste d'abord, comme la maquette ─────*/
body.v2-coque main #view-toggle button[data-mode="list"]   { order: 1; }
body.v2-coque main #view-toggle button[data-mode="kanban"] { order: 2; }

/* ── « Gérer les champs » : discret, poussé à droite ───────────
   C'est un réglage, pas une action courante : il ne doit pas peser
   autant que « Nouvelle fiche ». */
body.v2-coque main #manage-fields-btn {
  margin-left: auto;
  order: 9;
  height: 32px; padding: 0 12px;
  border-radius: 99px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--v2-text-3);
  font-size: 12.5px; font-weight: 550;
  box-shadow: none;
}
body.v2-coque main #manage-fields-btn:hover {
  background: var(--inset); border-color: var(--stroke-2); color: var(--v2-text-2);
}
body.v2-coque main #manage-fields-btn svg { width: 14px; height: 14px; }

/* ══════════════════════════════════════════════════════════════
   L'AVANCEMENT SUR LA CARTE — sept traits, pas sept chevrons
   Le dernier écart du LISEZ-MOI. Les chevrons ambre occupaient la
   moitié de la hauteur utile et posaient sept aplats ambre là où la
   règle le réserve à l'action. Même composant qu'en vue liste.
   ══════════════════════════════════════════════════════════════ */
[data-v2].kanban .card .card-pipeline { margin: 8px 0 0; }
[data-v2].kanban .card .card-pipeline-segs {
  display: flex;

  /* Les chevrons se chevauchaient (margin négative) pour former une
     flèche continue : sans remise à zéro, les traits se recouvrent. */
  margin: 0;
}
[data-v2].kanban .card .pipe-seg {
  all: unset;
  flex: 1;


  background: var(--track);
  cursor: pointer;
  transition: background .14s ease;
}
/* Validé : la teinte de la colonne, celle que porte déjà le filet de la
   carte. Une carte ne dit qu'une couleur. */
[data-v2].kanban .card .pipe-seg.done { }
/* La prochaine étape s'annonce en creux — un repère, pas une alerte. */
[data-v2].kanban .card .pipe-seg.next { }
[data-v2].kanban .card .pipe-seg:hover { background: var(--v2-text-3); }
[data-v2].kanban .card .pipe-seg.done:hover { filter: brightness(1.15); }

/* La ligne de légende : libellé en encre secondaire, compte en tertiaire. */
[data-v2].kanban .card .card-pipeline-label {
  display: flex; align-items: center; gap: 6px;

  font-size: 11px;
}
[data-v2].kanban .card .pipe-lbl-txt {
  color: var(--v2-text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
[data-v2].kanban .card .pipe-lbl-n {
  color: var(--v2-text-3);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
[data-v2].kanban .card .pipe-age {
  margin-left: auto; flex-shrink: 0;
  color: var(--v2-text-3);
  display: inline-flex; align-items: center; gap: 3px;
}
[data-v2].kanban .card .pipe-age.bloque { color: var(--neg-fg); }
[data-v2].kanban .card .pipe-age svg { width: 10px; height: 10px; }

/* ══════════════════════════════════════════════════════════════
   LA BARRE DE COMMANDES (ex-barre de filtres)
   Recherche · Liste/Kanban · Gérer les champs · Nouvelle fiche.
   `#filters` garde son identifiant — c'est le conteneur que
   renderFilters() pilote — mais il ne porte plus de filtres.
   ══════════════════════════════════════════════════════════════ */
body.v2-coque main .filters {
  display: flex;
  align-items: center;

  flex-wrap: wrap;
  padding: 0 30px 16px;
  background: transparent;
  border: 0;
}
/* TOUT À GAUCHE, DANS L'ORDRE OÙ ON S'EN SERT.
   La recherche s'étirait sur toute la largeur et poussait les trois
   boutons à l'autre bout : l'œil traversait l'écran pour passer de
   « chercher » à « changer de vue ». Les quatre commandes forment
   maintenant un groupe compact, aligné à gauche sous le titre.
   Ordre : chercher → changer de vue → créer → régler. */
body.v2-coque main .filters { justify-content: flex-start; gap: 8px; }
/* `margin-left: 0` explicite : une règle de styles.css pose
   `margin-left: auto` sur .search-box pour la coller à droite de
   l'ancien en-tête. Dans la barre du bas, cet `auto` valait 476 px et
   repoussait tout le groupe au milieu de l'écran. */
body.v2-coque main .filters .search-box { flex: 0 0 300px; order: 1; margin-left: 0; margin-right: 0; }
body.v2-coque main .filters #view-toggle       { order: 2; margin-left: 0; flex-shrink: 0; }
body.v2-coque main .filters #add-btn           { order: 3; margin-left: 6px; flex-shrink: 0; }
body.v2-coque main .filters #manage-fields-btn { order: 4; margin-left: 0; flex-shrink: 0; }

/* Un filet sépare ce qui CHERCHE de ce qui AGIT. Deux registres
   différents collés l'un à l'autre se lisent comme une seule rangée de
   boutons interchangeables. */
body.v2-coque main .filters #add-btn::before {
  content: '';
  width: 1px; height: 24px;
  margin-right: 12px;
  background: var(--stroke-2);
  flex-shrink: 0;
}

/* Une seule hauteur pour toute la rangée : c'est ce qui fait qu'elle se
   lit comme une barre et non comme quatre objets posés côte à côte. */
body.v2-coque main .filters .search-box input,
body.v2-coque main .filters #view-toggle,
body.v2-coque main .filters #add-btn,
body.v2-coque main .filters #manage-fields-btn { height: 38px; box-sizing: border-box; }
body.v2-coque main .filters #view-toggle { padding: 4px; }
body.v2-coque main .filters #view-toggle button { height: 30px; }
body.v2-coque main .filters #add-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 17px; border-radius: 99px;
}
body.v2-coque main .filters #manage-fields-btn { padding: 0 14px; border-radius: 99px; }

/* Sur un écran étroit, la recherche passe seule sur sa ligne plutôt que
   de comprimer les trois boutons — et le filet disparaît avec elle. */
@media (max-width: 900px) {
  body.v2-coque main .filters .search-box { flex: 1 1 100%; }
  body.v2-coque main .filters #add-btn::before { display: none; }
  body.v2-coque main .filters #add-btn { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════════
   RENDRE LE CONTRASTE — relecture Industry du 10/08/2026
   Le nettoyage avait retiré la couleur sans rendre l'écart ailleurs :
   tout s'était retrouvé à mi-chemin, donc rien ne ressortait. Une
   carte sobre n'est pas une carte fade — elle tient sur un écart
   FORT entre trois niveaux : le nom en encre pleine, les métadonnées
   en encre tertiaire, un seul objet coloré.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. L'avancement se voit ───────────────────────────────────
   Les validés prennent la teinte pleine de la colonne. La piste
   passe de 5 % à une valeur qui se distingue vraiment d'elle, et les
   segments gagnent 1 px : à 4 px sur 5 % d'opacité, les deux états
   se confondaient à distance de lecture. */
[data-v2].kanban .card .card-pipeline-segs { gap: 3px; }
[data-v2].kanban .card .pipe-seg {
  height: 5px;
  border-radius: 2.5px;
  /* `--track` et non `--stroke-2` : c'est le jeton des pistes de barre,
     celui qu'emploient déjà l'entonnoir et la vue liste. Un seul jeton
     pour un seul rôle. */
  background: var(--track);
}
[data-v2].kanban .card .pipe-seg.done {
  background: var(--col-color, var(--info-fg));
  opacity: 1;
}
[data-v2].kanban .card .pipe-seg.next {
  background: var(--col-color, var(--info-fg));
  opacity: .3;
}

/* ── 2. L'en-tête de colonne reprend son identité ──────────────
   Le libellé porte la teinte, en capitales de 11 px : c'est lui qui
   nomme la colonne, pas le point de 8 px à côté. Le compteur se
   remplit de la teinte, chiffre en --on-tone. */
[data-v2].kanban .column-title,
.kanban .column-title {
  font-size: 11px;
  font-weight: 680;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--col-color, var(--v2-text)) 58%, var(--v2-text, #16171a));
}
[data-v2].kanban .column-count,
.kanban .column-count {
  min-width: 22px; height: 22px;
  padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 99px;
  background: color-mix(in srgb, var(--col-color, var(--info-fg)) 62%, var(--v2-text, #16171a));
  color: var(--on-tone, #fff);
  font-size: 11px; font-weight: 680;
  font-variant-numeric: tabular-nums;
}

/* ── 3. Le nom porte la carte ──────────────────────────────────*/
[data-v2].kanban .card .card-title,
.kanban .card .card-title {
  font-size: 13.5px;
  font-weight: 620;
  color: var(--v2-text);
  letter-spacing: -.01em;
}

/* ── 4. Le groupe « avancement » se resserre ───────────────────
   Les segments et leur légende forment UN bloc : 5 px entre eux,
   8 px entre ce bloc et le nom. Ils flottaient dans du vide. */
[data-v2].kanban .card .card-pipeline { margin-top: 8px; }
[data-v2].kanban .card .card-pipeline-label { margin-top: 5px; }

/* ── 5. Le montant, seul chiffre coloré de la carte ────────────*/
[data-v2].kanban .card .card-chiffre {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px;
  font-size: 15px; font-weight: 680;
  color: var(--v2-accent);
  letter-spacing: -.02em;
}
[data-v2].kanban .card .card-chiffre strong { font-weight: 680; }
[data-v2].kanban .card .card-chiffre-icon { color: var(--v2-accent); opacity: .7; flex: 0 0 13px; }

/* ── 6. Le fond de page redevient uni ──────────────────────────
   Deux dégradés radiaux ambre se superposaient — un sur le corps,
   un sur la nappe .v2-lueurs. Ils lavaient tout l'écran d'un voile
   jaune pâle, contre lequel aucune carte blanche ne pouvait plus
   ressortir. */
/* UNIQUEMENT sur les écrans de fiches. La première version tuait le
   dégradé sur TOUTE l'application — le tableau de bord perdait la lueur
   ambre sous la salutation, que la maquette montre pourtant. Industry ne
   demandait le fond uni que là où les cartes doivent ressortir. */
/* Fond uni PARTOUT depuis le 11/08/2026 (« j'en peux plus de l'ambré ») :
   la décision globale vit dans v2-coque.css — nappe éteinte, base
   #eeedea. Plus aucune règle par écran ici. */

/* ── Le sélecteur de tri ───────────────────────────────────────
   À droite de la barre de commandes, aligné sur elles. Il affiche le
   tri courant — « Trier : urgence de relance » — au lieu d'un libellé
   générique : on sait dans quel ordre on lit sans avoir à l'ouvrir. */
body.v2-coque main .filters .tri-select {
  order: 5;
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 6px 0 13px;
  box-sizing: border-box;
  border-radius: 99px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  flex-shrink: 0;
}
body.v2-coque main .filters .tri-lbl {
  font-size: 12.5px; color: var(--v2-text-3); white-space: nowrap;
}
body.v2-coque main .filters .tri-champ {
  all: unset;
  cursor: pointer;
  padding-right: 6px;
  font-family: var(--font);
  font-size: 12.5px; font-weight: 620;
  color: var(--v2-text);
}
body.v2-coque main .filters .tri-champ:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 900px) {
  body.v2-coque main .filters .tri-select { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════════
   VUE LISTE — la même couleur qu'en kanban
   Le filet de ligne et la pastille de statut lisent `--col-color`,
   posé sur le <tr> depuis la colonne de la fiche. C'est la variable
   qu'emploie déjà le kanban : les deux vues ne peuvent plus diverger.
   ══════════════════════════════════════════════════════════════ */
[data-v2].list-view .list-table tbody td:first-child {
  box-shadow: inset 4px 0 0 var(--col-color, var(--m-rail, transparent));
}
/* Les segments d'étape suivent la même teinte que le filet de leur
   ligne — un seul repère de couleur par ligne, comme sur la carte. */
[data-v2].list-view .col-etape-segs i.fait { background: var(--col-color, var(--info-fg)); }

/* La pastille de statut : teintée, et surtout ENTIÈRE.
   « Prospect avancé » se faisait couper par la troncature générale des
   cellules — un statut à moitié lu ne vaut rien. */
[data-v2].list-view .col-statut {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 10px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--col-color, var(--info-fg)) 13%, transparent);
  color: var(--col-color, var(--info-fg));
  font-size: 11.5px; font-weight: 620;
  white-space: nowrap;
  max-width: none;
}
[data-v2].list-view .col-statut::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
/* La cellule du statut ne tronque pas : elle se dimensionne sur son
   contenu. Les colonnes voisines, elles, gardent leur troncature. */
[data-v2].list-view .list-table td:has(.col-statut) {
  max-width: none;
  white-space: nowrap;
  overflow: visible;
  width: 1%;
}

/* ── Simulateur : la carte de l'assistant s'élargit ────────────
   760 px chez nous, ≈ 840 dans la maquette du 11/08/2026 — sur un
   écran large, la carte flottait étroite au milieu d'un grand vide. */
body.v2-coque .sim-wiz { max-width: 840px; }

/* ══════════════════════════════════════════════════════════════
   SIMULATEUR — HISTORIQUE EN TABLEAUX GROUPÉS (spec 11/08/2026)
   Deux tableaux (Clients, Prospects — même grammaire que Missions),
   bandes de société, lignes indentées à 40 px, sept colonnes.
   La règle des bandes : une bande diffère d'une ligne de données par
   QUATRE choses à la fois — fond, filets, taille du nom, indentation
   des lignes. Trois sur quatre ne suffisent pas (erreur n° 1).
   ══════════════════════════════════════════════════════════════ */

[data-v2] .sim-ht-tete {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; margin: 18px 0 14px;
}
[data-v2] .sim-ht-titre { margin: 0; font-size: 15px; font-weight: 620; letter-spacing: -.01em; }

[data-v2] .sim-ht-wrap {
  background: var(--panel-solid);
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  border-top: 2px solid var(--stroke-2);
  overflow: hidden;
  overflow-x: auto;
}
[data-v2] .sim-mts-clients .sim-ht-wrap   { border-top-color: var(--pos-fg); }
/* Un liseré de 2 px est un trait, pas une encre de texte : la planche 11
   borde les tableaux Prospects d'ambre, comme les intertitres. */
[data-v2] .sim-mts-prospects .sim-ht-wrap { border-top-color: var(--accent-bright); }   /* trait-fin : liseré de 2px, pas une encre de texte */

[data-v2] .sim-ht { width: 100%; border-collapse: collapse; }
[data-v2] .sim-ht th {
  padding: 11px 18px;
  font-size: 11px; font-weight: 620; letter-spacing: .08em;
  text-transform: uppercase; color: var(--v2-text-3);
  text-align: left; background: var(--panel-2);
  white-space: nowrap;
}
[data-v2] .sim-ht th.sim-ht-indent { padding-left: 22px; }
[data-v2] .sim-ht th.r, [data-v2] .sim-ht td.r { text-align: right; }
[data-v2] .sim-ht td {
  padding: 11px 18px;
  font-size: 12.5px; color: var(--v2-text-2);
  border-bottom: 1px solid var(--stroke-2);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
[data-v2] .sim-ht tbody tr:last-child td { border-bottom: 0; }

/* ── La bande de société ───────────────────────────────────────*/
[data-v2] .sim-ht-bande td {
  padding: 14px 18px 12px;
  background: var(--inset);
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
}
[data-v2] .sim-ht-bande:first-child td { border-top: 0; }
[data-v2] .sim-ht-carre {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: var(--r-xs);
  background: var(--panel-solid);
  border: 1px solid var(--stroke);
  font-size: 10.5px; font-weight: 680; color: var(--v2-text-2);
  vertical-align: middle; margin-right: 10px;
}
[data-v2] .sim-ht-nom {
  font-size: 15px; font-weight: 680; letter-spacing: -.02em;
  color: var(--v2-text); vertical-align: middle;
}
[data-v2] .sim-ht-compte {
  display: inline-block; margin-left: 10px; padding: 2px 8px;
  border-radius: 99px; background: var(--panel-solid);
  border: 1px solid var(--stroke);
  font-size: 11px; font-weight: 620; color: var(--v2-text-3);
  vertical-align: middle;
}
[data-v2] .sim-ht-derniere { text-align: right; white-space: nowrap; }
[data-v2] .sim-ht-derniere-lbl {
  font-size: 11px; font-weight: 620; letter-spacing: .08em;
  text-transform: uppercase; color: var(--v2-text-3); margin-right: 8px;
}
[data-v2] .sim-ht-derniere-val { font-size: 12.5px; font-weight: 620; color: var(--v2-text-2); }

/* ── Les lignes — indentées à 40 px sous leur bande ────────────*/
[data-v2] .sim-ht-l td.sim-ht-indent { padding-left: 40px; }
[data-v2] .sim-ht-tech { font-size: 13.5px; font-weight: 620; color: var(--v2-text); }
[data-v2] .sim-ht-tech-absent { font-size: 12.5px; color: var(--v2-text-3); }
[data-v2] .sim-ht-poste { color: var(--v2-text-2); }
/* LE chiffre dominant de la ligne — et le seul (règle transversale). */
[data-v2] .sim-ht-tarif { font-size: 13.5px; font-weight: 680; letter-spacing: -.02em; color: var(--v2-text); }
[data-v2] .sim-ht-vide { color: var(--v2-text-3); }

/* L'action : une pastille, une icône, une teinte par nature. */
[data-v2] .sim-ht-action {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px;
  border-radius: 99px;
  font-size: 11px; font-weight: 620;
  white-space: nowrap;
}
[data-v2] .sim-ht-action svg { width: 11px; height: 11px; }
[data-v2] .sim-ht-add  { background: var(--pos);       color: var(--pos-fg); }
[data-v2] .sim-ht-del  { background: var(--neg-soft);  color: var(--neg-fg); }
[data-v2] .sim-ht-edit { background: var(--info-soft); color: var(--info-fg); }
[data-v2] .sim-ht-dup  { background: var(--inset);     color: var(--v2-text-2); }

/* Quand : l'heure puis la date, empilées. */
[data-v2] .sim-ht-quand span { display: block; font-size: 12.5px; color: var(--v2-text-2); }
[data-v2] .sim-ht-quand .sim-ht-date { font-size: 11px; color: var(--v2-text-3); }

/* Par : rond d'initiales + nom. */
[data-v2] .sim-ht-par { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
/* La pastille de marge : la paire de classes zone (.sim-marge-*) vient
   des Missions, mais sa forme de pastille n'était posée que là-bas —
   dans l'Historique la marge s'affichait en texte nu. */
[data-v2] .sim-ht .sim-mt-marge {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 9px;
  border-radius: 99px;
  font-size: 11.5px; font-weight: 620;
  font-variant-numeric: tabular-nums;
}

[data-v2] .sim-ht-par i {
  display: inline-grid; place-items: center; font-style: normal;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-soft); color: var(--v2-accent);
  font-size: 9.5px; font-weight: 680;
}

/* ══════════════════════════════════════════════════════════════
   SIMULATEUR — MISSIONS : l'alignement sur la maquette (9/9b)
   ══════════════════════════════════════════════════════════════ */

/* ── La bande de société : quatre différences, pas trois ───────
   Fond distinct, deux filets, nom en 15 px — et l'indentation des
   lignes ci-dessous. C'était le point raté signalé par la spec. */
[data-v2] .sim-mt .sim-mtg td {
  background: var(--inset);
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
  padding: 14px 18px 12px;
}
[data-v2] .sim-mt .sim-mtg-nom { font-size: 15px; font-weight: 680; letter-spacing: -.02em; }
/* Le TOTAL, poussé à droite. */
[data-v2] .sim-mtg-total { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
[data-v2] .sim-mtg-total-lbl {
  font-size: 11px; font-weight: 620; letter-spacing: .08em;
  text-transform: uppercase; color: var(--v2-text-3);
}
/* Les Δ vivent DANS le groupe TOTAL, plus en électron libre. */
[data-v2] .sim-mtg-total .sim-mtg-ecarts { margin: 0; }

/* ── L'indentation des lignes : 40 px sous la bande ────────────
   C'est elle qui rattache visuellement une mission à sa société. */
[data-v2] .sim-mt .sim-mt-row td:first-child { padding-left: 40px; }
[data-v2] .sim-mt thead th:first-child { padding-left: 22px; }
/* Le liseré ambre des groupes multi-missions disparaît : la maquette
   n'en montre pas, et l'indentation fait désormais ce travail. */
[data-v2] .sim-mt .sim-mt-multi td:first-child { box-shadow: none; }

/* ── La barre d'outils : deux familles, un séparateur ──────────
   Pilules de comptage (fond --panel) · séparateur 22 px · tris
   (fond --inset, bordure --stroke-2) · bouton auto en accent doux. */
[data-v2] .sim-missions-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
[data-v2] .sim-missions-toolbar .sim-filter { background: var(--panel-solid); border: 1px solid var(--stroke); border-radius: 99px; }
[data-v2] .sim-missions-toolbar .sim-missions-tri {
  display: inline-flex; gap: 6px; align-items: center;
  padding-left: 14px; margin-left: 6px;
  border-left: 1px solid var(--stroke-2);
  height: 22px;
}
[data-v2] .sim-missions-toolbar .sim-tri-btn { background: var(--inset); border: 1px solid var(--stroke-2); border-radius: 99px; }
[data-v2] #sim-migrate-horaires {
  margin-left: auto;
  background: var(--accent-soft);
  color: var(--v2-accent);
  border: 0; border-radius: 99px;
  font-weight: 620;
}
[data-v2] #sim-migrate-horaires:hover { filter: brightness(.97); }

/* ══════════════════════════════════════════════════════════════
   SIMULATEUR — SUPERVISION (planche 10)
   ══════════════════════════════════════════════════════════════ */

/* ── La barre : libellé + segments + trois listes, une ligne ───*/
[data-v2] .sim-sup-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
[data-v2] .sim-sup-lbl { font-size: 12.5px; color: var(--v2-text-3); white-space: nowrap; }
[data-v2] .sim-sup-segments {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px; border-radius: 99px;
  background: var(--inset);
  border: 1px solid var(--stroke-2);
}
[data-v2] .sim-sup-seg {
  all: unset; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px;
  border-radius: 99px;
  font-size: 12.5px; font-weight: 550; color: var(--v2-text-2);
  transition: background .14s ease;
}
[data-v2] .sim-sup-seg:hover { color: var(--v2-text); }
[data-v2] .sim-sup-seg.active { background: var(--accent-soft); color: var(--v2-text); box-shadow: var(--shadow-sm); }
[data-v2] .sim-sup-seg:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; }
[data-v2] .sim-sup-seg-n { font-size: 11px; font-weight: 680; opacity: .65; font-variant-numeric: tabular-nums; }
[data-v2] .sim-sup-seg-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
/* Un point par créneau — l'ambre du week-end est un POINT de 7 px,
   un repère, pas un état : même dérogation que la puce du jour. */
[data-v2] .sim-sup-dot-tous    { background: var(--v2-text-3); }
[data-v2] .sim-sup-dot-jour    { background: var(--pos-fg); }
[data-v2] .sim-sup-dot-nuit    { background: var(--info-fg); }
[data-v2] .sim-sup-dot-weekend { background: var(--accent-bright); }
[data-v2] .sim-sup-dot-autre   { background: var(--v2-text-3); }

/* ── Le bloc de créneau ────────────────────────────────────────*/
[data-v2] .sim-sup-block-header h3 {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 19px; font-weight: 680; letter-spacing: -.02em;
}
[data-v2] .sim-sup-block-header h3 .sim-sup-seg-dot { width: 10px; height: 10px; }
[data-v2] .sim-sup-block-count { background: var(--inset); border-radius: 99px; }

/* Les KPI du créneau : libellé 11 px, chiffre 24 px — scopés au bloc,
   .stat-card est partagée avec le reste du CRM. */
[data-v2] .sim-sup-kpis .stat-card { background: var(--panel-solid); border: 1px solid var(--stroke); border-radius: var(--r-md); padding: 13px 16px; }
[data-v2] .sim-sup-kpis .stat-label { font-size: 11px; letter-spacing: .04em; color: var(--v2-text-3); }
[data-v2] .sim-sup-kpis .stat-value { font-size: 24px; font-weight: 680; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }

/* ── La marge, seule couleur de la ligne : trois encres ────────*/
[data-v2] .sim-sup-marge { font-weight: 620; }
[data-v2] .sim-sup-marge-pos       { color: var(--pos-fg); }
[data-v2] .sim-sup-marge-attention { color: var(--v2-accent); }
[data-v2] .sim-sup-marge-neg       { color: var(--neg-fg); }

/* ══════════════════════════════════════════════════════════════
   SIMULATEUR — TECHNICIENS (planche 8)
   L'écran est partagé : il sert aussi la vue Techniciens du rail.
   Les règles sont donc scopées à .techniciens-page, qui vit dans les
   deux contextes.
   ══════════════════════════════════════════════════════════════ */

/* ── Le bandeau « sans mission » : UNE ligne, un seul compte ───*/
.techniciens-page .tk-sans-mission {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: var(--r-md, 14px);
  background: var(--neg-soft, rgba(193,75,64,.11));
  border: 1px solid var(--neg-fg, #a74137);
  margin-bottom: 12px;
}
.techniciens-page .tk-sans-mission > svg { width: 17px; height: 17px; color: var(--neg-fg, #a74137); flex-shrink: 0; }
.techniciens-page .tk-sm-titre { font-size: 13.5px; font-weight: 620; color: var(--neg-fg, #a74137); }
.techniciens-page .tk-sm-chip {
  all: unset; cursor: pointer;
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 10px;
  border-radius: 99px;
  background: var(--panel-solid, #fff);
  border: 1px solid var(--stroke, rgba(20,20,25,.075));
  font-size: 11px; font-weight: 680; letter-spacing: .04em;
  color: var(--neg-fg, #a74137);
}
.techniciens-page .tk-sm-chip:hover { border-color: var(--neg-fg, #a74137); }
.techniciens-page .tk-sm-placer {
  all: unset; cursor: pointer;
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 14px;
  border-radius: 99px;
  background: var(--panel-solid, #fff);
  border: 1px solid var(--neg-fg, #a74137);
  color: var(--neg-fg, #a74137);
  font-size: 12.5px; font-weight: 620;
}
.techniciens-page .tk-sm-placer:hover { background: var(--neg-soft, rgba(193,75,64,.11)); }
.techniciens-page .tk-sm-placer svg { width: 13px; height: 13px; }

/* ── Titre 19 px, bouton principal en dégradé ambre ────────────*/
.techniciens-page .caisses-header h2 { font-size: 19px; font-weight: 680; letter-spacing: -.02em; }
.techniciens-page #tech-add-btn {
  background: linear-gradient(170deg, #f5d547, #e4c033);
  color: var(--sur-accent, #1b1a12); border: 0; border-radius: 99px;
  font-weight: 620;
}

/* ── KPI : chiffre 24 px, bordure teintée seulement en alerte ──*/
.techniciens-page .tk-stats-slim .tk-stat { padding: 13px 16px; border-radius: var(--r-md, 14px); }
.techniciens-page .tk-stats-slim .tk-stat-val { font-size: 24px; font-weight: 680; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.techniciens-page .tk-stats-slim .tk-stat-lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

/* ── La ligne des filtres : pilules à gauche, recherche à droite */
.techniciens-page .tk-filtres { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.techniciens-page .tk-filtres-droite { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.techniciens-page .tk-filtres .tk-search { width: 260px; height: 32px; box-sizing: border-box; }

/* ── Le tableau : filet de 4 px + lavis, par ton de ligne ──────*/
.techniciens-page .tkt tbody tr { position: relative; }
.techniciens-page .tkt tbody td:first-child { box-shadow: inset 4px 0 0 transparent; }
.techniciens-page .tkt tr.tkt-ton-libre td:first-child { box-shadow: inset 4px 0 0 var(--neg-fg, #a74137); }
.techniciens-page .tkt tr.tkt-ton-libre td { background: var(--neg-soft, rgba(193,75,64,.08)); }
.techniciens-page .tkt tr.tkt-ton-ok td:first-child { box-shadow: inset 4px 0 0 var(--pos-fg, #136d45); }
.techniciens-page .tkt tr.tkt-ton-multi td:first-child { box-shadow: inset 4px 0 0 var(--info-fg, #3160b4); }

/* Les pastilles pointillées « à placer » / « à renseigner ». */
.techniciens-page .tkt-placer,
.techniciens-page .tkt-renseigner {
  all: unset; cursor: pointer;
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 10px;
  border-radius: 99px;
  border: 1px dashed currentColor;
  font-size: 11.5px; font-weight: 550;
}
.techniciens-page .tkt-placer { color: var(--neg-fg, #a74137); }
.techniciens-page .tkt-renseigner { color: var(--v2-text-3, #6b6f76); }
.techniciens-page .tkt-placer:hover,
.techniciens-page .tkt-renseigner:hover { border-style: solid; }

/* La marge en pastille, trois tons. */
.techniciens-page .tkt-marge {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 9px;
  border-radius: 99px;
  font-size: 11.5px; font-weight: 620;
  font-variant-numeric: tabular-nums;
}
.techniciens-page .tkt-marge-ok   { background: rgba(47, 158, 99, .12);  color: var(--pos-fg, #136d45); }
.techniciens-page .tkt-marge-soft { background: var(--accent-soft); color: var(--v2-accent); }
.techniciens-page .tkt-marge-crit { background: rgba(193, 75, 64, .12);  color: var(--neg-fg, #a74137); }


/* ══════════════════════════════════════════════════════════════════
   SUIVI FACTURATION — refonte Industry (11/08/2026)
   Gabarit : reference-maquette/12-suivi-facturation.png (+12b, 12c).
   Gouttières : 8 px dans un bloc, 12 px entre blocs. Aucune autre valeur.
   Les deux choix anti-instinct de la maquette :
     1. sélecteur de mois et zone de dépôt sur UNE seule ligne ;
     2. compteurs sans AUCUN fond coloré — la teinte va au chiffre, et
        seulement sur deux cartes (vert marge, ambre cumul).
   ══════════════════════════════════════════════════════════════════ */
[data-v2].fx-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 1180px;
  padding-bottom: 66px;   /* le conteneur porte 20 px — la maquette veut 86 */
  font-family: var(--font);
  color: var(--v2-text);
  -webkit-font-smoothing: antialiased;
}
[data-v2].fx-page * { font-variant-numeric: tabular-nums; }

/* ── 1. Sélecteur de mois + dépôt, une seule ligne de 60 px ───────── */
[data-v2].fx-page .fx-l1 { display: flex; align-items: stretch; gap: 12px; }

[data-v2].fx-page .fx-sel {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 5px;
  border-radius: var(--r-md);
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
}
[data-v2].fx-page .fx-fleche {
  all: unset;
  cursor: pointer;
  width: 30px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--v2-text-2);
}
[data-v2].fx-page .fx-fleche:hover { background: var(--panel-2); color: var(--v2-text); }
[data-v2].fx-page .fx-fleche:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 1px; }
[data-v2].fx-page .fx-sel-c { min-width: 116px; text-align: center; }
[data-v2].fx-page .fx-sel-mois { display: block; font-size: 15px; font-weight: 620; }
[data-v2].fx-page .fx-sel-nb { display: block; margin-top: -1px; font-size: 11px; color: var(--v2-text-3); }

/* Le tireté est ce qui dit « on peut déposer ici ». */
[data-v2].fx-page .fx-depot {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px dashed var(--stroke);
  border-radius: var(--r-md);
  cursor: pointer;
}
[data-v2].fx-page .fx-depot.survol { border-color: var(--accent-bright); background: var(--accent-soft); }
[data-v2].fx-page .fx-depot-ico {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--v2-accent);
}
[data-v2].fx-page .fx-depot-txt strong { display: block; font-size: 13.5px; font-weight: 620; }
[data-v2].fx-page .fx-depot-txt span { display: block; font-size: 11px; color: var(--v2-text-3); }
[data-v2].fx-page .fx-depot-btns { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; }
[data-v2].fx-page .fx-btn-clair,
[data-v2].fx-page .fx-btn-nu {
  all: unset;
  box-sizing: border-box;   /* all:unset ramène content-box : la bordure ferait 34 px */
  cursor: pointer;
  height: 32px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 620;
  color: var(--v2-text);
  border: 1px solid var(--stroke);
}
[data-v2].fx-page .fx-btn-clair { background: var(--panel-solid); }
[data-v2].fx-page .fx-btn-nu { background: transparent; }
[data-v2].fx-page .fx-btn-clair:hover,
[data-v2].fx-page .fx-btn-nu:hover { background: var(--panel-2); }
[data-v2].fx-page .fx-btn-clair:focus-visible,
[data-v2].fx-page .fx-btn-nu:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 1px; }

/* ── 2. Saisie manuelle — une bande discrète (--panel-2, --stroke-2),
   plus effacée que le dépôt : c'est la voie secondaire. ───────────── */
[data-v2].fx-page .fx-saisie {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: var(--r-md);
  background: var(--panel-2);
  border: 1px solid var(--stroke-2);
}
[data-v2].fx-page .fx-saisie-lbl {
  flex-shrink: 0;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--v2-text-3);
}
[data-v2].fx-page .fx-pilule {
  height: 34px;
  border-radius: 99px;
  background: var(--panel-solid);
  border: 1px solid var(--stroke);
  padding: 0 14px;
  font-size: 13px;
  font-family: var(--font);
  color: var(--v2-text);
  box-sizing: border-box;
}
[data-v2].fx-page input.fx-pilule:focus {
  outline: none;
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
[data-v2].fx-page .fx-f-client { flex: 1.4; min-width: 0; }
[data-v2].fx-page .fx-f-num { flex: 1; min-width: 0; }
[data-v2].fx-page .fx-f-mt { width: 140px; flex-shrink: 0; text-align: right; font-weight: 620; }
[data-v2].fx-page .fx-f-date {
  width: 132px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--v2-text-3);
}
[data-v2].fx-page .fx-f-date input {
  all: unset;
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-family: var(--font);
  color: var(--v2-text);
}
/* L'icône calendrier de la pilule suffit — l'indicateur natif ferait doublon. */
[data-v2].fx-page .fx-f-date input::-webkit-calendar-picker-indicator { display: none; }
[data-v2].fx-page .fx-btn-ajouter {
  all: unset;
  cursor: pointer;
  height: 34px;
  padding: 0 15px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 99px;
  background: linear-gradient(170deg, #f5d547, #e4c033);
  color: var(--sur-accent, #1b1a12);
  font-size: 13px;
  font-weight: 620;
}
[data-v2].fx-page .fx-btn-ajouter:hover { filter: brightness(1.04); }
[data-v2].fx-page .fx-btn-ajouter:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; }

/* ── 3. Quatre compteurs — aucun fond coloré. ─────────────────────── */
[data-v2].fx-page .fx-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
[data-v2].fx-page .fx-kpi {
  padding: 13px 16px 14px;
  border-radius: var(--r-md);
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
}
[data-v2].fx-page .fx-kpi-sur {
  display: block;
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--v2-text-3);
}
[data-v2].fx-page .fx-kpi-ligne { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
[data-v2].fx-page .fx-kpi-chiffre { font-size: 24px; font-weight: 680; letter-spacing: -.04em; }
[data-v2].fx-page .fx-kpi-unite { font-size: 12.5px; font-weight: 550; color: var(--v2-text-3); }
[data-v2].fx-page .fx-kpi-sous { display: block; margin-top: 4px; font-size: 11px; color: var(--v2-text-3); }
/* Les deux seules teintes : le chiffre, jamais la carte. */
[data-v2].fx-page .fx-kpi-marge .fx-kpi-chiffre { color: var(--pos-fg); }
[data-v2].fx-page .fx-kpi-cumul .fx-kpi-chiffre { color: var(--v2-accent); }
[data-v2].fx-page .fx-kpi-chiffre.fx-kpi-vide { color: var(--v2-text-3); }

/* ── 4. Deux graphiques ───────────────────────────────────────────── */
[data-v2].fx-page .fx-graphes { display: grid; grid-template-columns: 1.75fr 1fr; gap: 12px; }
[data-v2].fx-page .fx-g {
  border-radius: var(--r-md);
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
[data-v2].fx-page .fx-g-mois { padding: 14px 16px 12px; }
[data-v2].fx-page .fx-g-clients { padding: 14px 16px 13px; display: flex; flex-direction: column; gap: 12px; }
[data-v2].fx-page .fx-g-tete { display: flex; align-items: baseline; gap: 8px; }
[data-v2].fx-page .fx-g-tete h3 { margin: 0; font-size: 13.5px; font-weight: 620; }
[data-v2].fx-page .fx-g-note { font-size: 11px; color: var(--v2-text-3); }
[data-v2].fx-page .fx-g-note-droite { margin-left: auto; }
/* Légende du graphe (maquette 26/08) : barre ambre 15×3 (HT), tireté
   --v2-accent (TTC — une encre, pas un aplat). */
[data-v2].fx-page .fx-leg { display: inline-flex; align-items: center; gap: 5px; }
[data-v2].fx-page .fx-leg .fx-leg-ht { width: 15px; height: 3px; border-radius: 2px; background: var(--accent-bright); }
[data-v2].fx-page .fx-leg .fx-leg-tiret {
  width: 15px;
  height: 0;
  border-top: 2px dashed var(--v2-accent);
}

/* Lecture du mois sélectionné, poussée à droite de l'en-tête. */
[data-v2].fx-page .fx-lecture {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}
[data-v2].fx-page .fx-lecture-mois {
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--v2-text-3);
  margin-right: 2px;
}
[data-v2].fx-page .fx-lecture b { font-size: 13px; font-weight: 640; font-variant-numeric: tabular-nums; }
[data-v2].fx-page .fx-lecture-ttc { font-size: 12px; color: var(--v2-text-2); font-variant-numeric: tabular-nums; }
[data-v2].fx-page .fx-lecture small { font-size: 10px; font-weight: 620; color: var(--v2-text-3); }

/* ── La courbe (maquette 26/08) : graduations HTML à gauche, boîte de
   tracé de 152 px exactement (SVG + points seuls), mois en frère. ── */
[data-v2].fx-page .fx-courbe {
  display: grid;
  grid-template-columns: 34px 1fr;
  margin-top: 10px;
}
[data-v2].fx-page .fx-courbe-grads { position: relative; height: 152px; }
[data-v2].fx-page .fx-courbe-grads span {
  position: absolute;
  right: 8px;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--v2-text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
[data-v2].fx-page .fx-courbe-zone { min-width: 0; }
[data-v2].fx-page .fx-courbe-boite { position: relative; height: 152px; }
[data-v2].fx-page .fx-courbe-boite svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Les deux points du repère : jamais des <circle> — le SVG est en
   preserveAspectRatio:none, un cercle y devient une ellipse. */
[data-v2].fx-page .fx-pt {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}
[data-v2].fx-page .fx-pt-ht {
  width: 10px; height: 10px;
  background: var(--accent-bright);
  border: 2px solid var(--panel-solid);
}
[data-v2].fx-page .fx-pt-ttc {
  width: 8px; height: 8px;
  background: var(--panel-solid);
  border: 1.8px solid var(--v2-accent);
}
[data-v2].fx-page .fx-courbe-mois {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  margin-top: 3px;
}
[data-v2].fx-page .fx-mois-cell {
  border: none;
  background: none;
  padding: 3px 0 5px;
  font: inherit;
  font-size: 11px;
  color: var(--v2-text-3);
  cursor: pointer;
  text-align: center;
  border-radius: var(--r-xs, 9px);
}
[data-v2].fx-page .fx-mois-cell:hover { color: var(--v2-text); }
[data-v2].fx-page .fx-mois-cell.actif {
  color: var(--v2-text);
  font-weight: 640;
  background:
    linear-gradient(var(--accent-bright), var(--accent-bright)) bottom / 22px 2.5px no-repeat;
}
[data-v2].fx-page .fx-cl-liste { display: flex; flex-direction: column; gap: 12px; }
[data-v2].fx-page .fx-cl-l { display: flex; align-items: baseline; gap: 8px; }
[data-v2].fx-page .fx-cl-nom {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 550;
}
[data-v2].fx-page .fx-cl-mt { font-size: 12.5px; font-weight: 620; }
[data-v2].fx-page .fx-cl-piste {
  display: block;
  margin-top: 5px;
  height: 6px;
  border-radius: 99px;
  background: var(--track);
  overflow: hidden;
}
[data-v2].fx-page .fx-cl-fill { display: block; height: 100%; border-radius: 99px; background: var(--accent-soft); }
[data-v2].fx-page .fx-cl-fill.premier { background: var(--accent-bright); }
[data-v2].fx-page .fx-cl-vide { font-size: 12px; color: var(--v2-text-3); }

/* ── 5. Le tableau — sept colonnes, la ligne de total en bas. ─────── */
[data-v2].fx-page .fx-t {
  border-radius: var(--r-md);
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
  overflow: hidden;   /* aucun sticky à l'intérieur : le rognage est sans danger ici */
}
[data-v2].fx-page .fx-grille {
  display: grid;
  grid-template-columns: minmax(215px, 1.25fr) 155px 175px 132px 132px 178px 34px;
  align-items: center;
  column-gap: 8px;
}
[data-v2].fx-page .fx-grille .r,
[data-v2].fx-page .fx-c-ht,
[data-v2].fx-page .fx-c-ttc,
[data-v2].fx-page .fx-c-marge,
[data-v2].fx-page .fx-total-ht,
[data-v2].fx-page .fx-total-ttc,
[data-v2].fx-page .fx-total-marge { text-align: right; }
[data-v2].fx-page .fx-head {
  padding: 11px 18px;
  background: var(--panel-2);
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--v2-text-3);
}
[data-v2].fx-page .fx-row {
  padding: 10px 18px;
  border-bottom: 1px solid var(--stroke-2);
  position: relative;
}
[data-v2].fx-page .fx-row:hover { background: var(--panel-2); }
[data-v2].fx-page .fx-c-client { display: flex; align-items: center; gap: 10px; min-width: 0; }
[data-v2].fx-page .fx-init {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  background: var(--inset);
  font-size: 11px;
  font-weight: 620;
  color: var(--v2-text-2);
}
[data-v2].fx-page .fx-client {
  font-size: 12.5px;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-v2].fx-page .fx-c-num { font-size: 12.5px; color: var(--v2-text-2); }
[data-v2].fx-page .fx-c-par { display: flex; align-items: center; gap: 8px; min-width: 0; }
[data-v2].fx-page .fx-avatar {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--v2-accent);
  font-size: 10px;
  font-weight: 640;
}
[data-v2].fx-page .fx-par-txt { display: flex; flex-direction: column; min-width: 0; }
[data-v2].fx-page .fx-par-txt span {
  font-size: 12.5px;
  color: var(--v2-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-v2].fx-page .fx-par-txt small { font-size: 11px; color: var(--v2-text-3); }
[data-v2].fx-page .fx-par-inconnu { color: var(--v2-text-3); }
/* Le chiffre dominant de la ligne : le montant HT. */
[data-v2].fx-page .fx-c-ht { font-size: 13.5px; font-weight: 680; letter-spacing: -.02em; }
[data-v2].fx-page .fx-c-ttc { font-size: 12.5px; color: var(--v2-text-2); }
[data-v2].fx-page .fx-marge { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
[data-v2].fx-page .fx-marge-piste {
  width: 42px;
  height: 5px;
  flex-shrink: 0;
  border-radius: 99px;
  background: var(--track);
  overflow: hidden;
}
[data-v2].fx-page .fx-marge-fill { display: block; height: 100%; border-radius: 99px; }
[data-v2].fx-page .fx-marge-fill.pos { background: var(--pos-fg); }
[data-v2].fx-page .fx-marge-fill.acc { background: var(--v2-accent); }   /* trait-fin : 5 px, un trait porte l'encre */
[data-v2].fx-page .fx-marge-pastille {
  height: 23px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 680;
}
[data-v2].fx-page .fx-marge-pastille small { font-size: 12px; font-weight: 550; opacity: .68; }
[data-v2].fx-page .fx-marge-pastille.pos { background: var(--pos); color: var(--pos-fg); }
[data-v2].fx-page .fx-marge-pastille.acc { background: var(--accent-soft); color: var(--v2-accent); }
[data-v2].fx-page .fx-marge-passee { opacity: .72; }
[data-v2].fx-page .fx-marge-vide {
  all: unset;
  cursor: pointer;
  color: var(--v2-text-3);
  font-size: 12.5px;
  padding: 2px 8px;
  border-radius: var(--r-xs);
  border-bottom: 1px dashed var(--stroke);
}
[data-v2].fx-page .fx-marge-vide:hover { color: var(--v2-accent); border-bottom-color: var(--v2-accent); }

/* Au repos : un chevron. Au survol : les trois gestes, en barre flottante
   à droite de la ligne — la maquette reste calme, les actions restent là. */
[data-v2].fx-page .fx-act { display: grid; place-items: center; color: var(--v2-text-3); }
[data-v2].fx-page .fx-act-btns {
  display: none;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: var(--r-xs, 9px);
  background: var(--panel-solid);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
}
[data-v2].fx-page .fx-row:hover .fx-act-btns { display: inline-flex; }
[data-v2].fx-page .fx-row:hover .fx-act-chev { visibility: hidden; }
[data-v2].fx-page .fx-ico,
[data-v2].ent-page .fx-ico {
  all: unset;
  cursor: pointer;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs, 9px);
  color: var(--v2-text-2);
}
[data-v2].fx-page .fx-ico:hover, [data-v2].ent-page .fx-ico:hover { background: var(--panel-2); color: var(--v2-text); }
[data-v2].fx-page .fx-ico.danger:hover, [data-v2].ent-page .fx-ico.danger:hover { background: var(--neg-soft); color: var(--neg-fg); }
[data-v2].fx-page .fx-ico-off { opacity: .35; cursor: default; }

[data-v2].fx-page .fx-total {
  padding: 13px 18px;
  background: var(--panel-2);
}
[data-v2].fx-page .fx-total-l {
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .08em;
  text-transform: uppercase;
}
[data-v2].fx-page .fx-total-s { font-size: 12.5px; color: var(--v2-text-3); }
[data-v2].fx-page .fx-total-ht { font-size: 14.5px; font-weight: 640; }
[data-v2].fx-page .fx-total-ttc { font-size: 12.5px; color: var(--v2-text-2); }
[data-v2].fx-page .fx-total-marge { font-size: 13px; font-weight: 640; color: var(--pos-fg); }

[data-v2].fx-page .fx-vide {
  padding: 46px 20px;
  border-radius: var(--r-md);
  background: var(--panel);
  border: 1px solid var(--stroke);
  text-align: center;
  color: var(--v2-text-3);
}
[data-v2].fx-page .fx-vide-t { margin-top: 10px; font-size: 14px; font-weight: 620; color: var(--v2-text); }
[data-v2].fx-page .fx-vide-s { margin-top: 3px; font-size: 12px; }


/* ══════════════════════════════════════════════════════════════════
   CALENDRIER — intégration Industry (11/08/2026)
   L'écran était resté « collé » dans la coque : nappe blanche bord à
   bord, boutons à l'ancienne, chips hors système. On le reskinne SANS
   toucher à sa plomberie de hauteurs (height:100% → cadre borné,
   ascenseur interne de la vue semaine, auto-défilement 08:00) — elle
   vient d'être réparée, on ne la re-casse pas.
   Une couleur = un sens : bleu = RDV, gris = tâche, ambre = prochaine
   action (une action, pas un état), rouge = en retard, violet = Google.
   ══════════════════════════════════════════════════════════════════ */
[data-v2].cal-page {
  font-family: var(--font);
  color: var(--v2-text);
  -webkit-font-smoothing: antialiased;
  gap: 12px;
}

/* ── La barre d'outils ────────────────────────────────────────────── */
[data-v2].cal-page .cal-header { gap: 12px; }
[data-v2].cal-page .cal-toggle {
  background: var(--inset);
  border: none;
  border-radius: var(--r-xs, 9px);
  padding: 3px;
  gap: 2px;
}
[data-v2].cal-page .cal-toggle-btn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-xs, 9px);
  font-size: 12.5px;
  font-weight: 620;
  color: var(--v2-text-3);
}
[data-v2].cal-page .cal-toggle-btn:hover { color: var(--v2-text); }
[data-v2].cal-page .cal-toggle-btn.active {
  background: var(--panel-solid);
  color: var(--v2-text);
  box-shadow: var(--shadow-sm);
}
[data-v2].cal-page .cal-toggle-btn:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 1px; }
[data-v2].cal-page .cal-title {
  font-size: 16px;
  font-weight: 640;
  letter-spacing: -.01em;
  color: var(--v2-text);
}
[data-v2].cal-page .cal-week-num {
  font-size: 10.5px;
  font-weight: 620;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--v2-text-3);
  background: var(--inset);
  border: none;
  border-radius: 99px;
  padding: 3px 9px;
}
[data-v2].cal-page .cal-nav { gap: 6px; }
[data-v2].cal-page .cal-nav-btn {
  all: unset;
  cursor: pointer;
  height: 30px;
  min-width: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xs, 9px);
  background: var(--panel-solid);
  border: 1px solid var(--stroke);
  box-sizing: border-box;
  color: var(--v2-text-2);
  font-size: 12.5px;
  font-weight: 620;
}
[data-v2].cal-page .cal-nav-btn:hover { background: var(--panel-2); color: var(--v2-text); }
[data-v2].cal-page .cal-nav-btn:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 1px; }
[data-v2].cal-page .cal-nav-today { padding: 0 13px; }
/* L'action principale vit dans l'en-tête en verre (calPoserCommandes). */
[data-v2].cal-page .cal-add-btn { display: none; }

/* ── Vue MOIS : la grille devient une carte ───────────────────────── */
[data-v2].cal-page .cal-grid-month {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
[data-v2].cal-page .cal-month-head-row {
  background: var(--panel-2);
  border-bottom: 1px solid var(--stroke-2);
}
[data-v2].cal-page .cal-month-head {
  padding: 9px 10px;
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--v2-text-3);
  border: none;
}
[data-v2].cal-page .cal-cell {
  border-color: var(--stroke-2);
  background: var(--panel);
}
[data-v2].cal-page .cal-cell:hover { background: var(--panel-2); }
[data-v2].cal-page .cal-cell-other { background: var(--inset); }
[data-v2].cal-page .cal-cell-other .cal-cell-num { color: var(--v2-text-3); }
[data-v2].cal-page .cal-cell-num {
  font-size: 12.5px;
  font-weight: 620;
  color: var(--v2-text-2);
}
/* Aujourd'hui : le numéro en pastille ambre — l'aplat, pas l'encre. */
[data-v2].cal-page .cal-cell-today { box-shadow: inset 0 0 0 1.5px var(--accent-bright); }
[data-v2].cal-page .cal-cell-today .cal-cell-num {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-bright);
  color: var(--sur-accent, #1b1a12);
}

/* ── Les chips d'événements : lavis + filet source + encre ────────── */
[data-v2].cal-page .cal-event {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px 3px 6px;
  border-radius: var(--r-xs, 9px);
  border-left: 3px solid transparent;
  font-size: 11.5px;
  font-weight: 550;
  line-height: 1.25;
}
[data-v2].cal-page .cal-event-time {
  font-weight: 640;
  font-variant-numeric: tabular-nums;
  opacity: .8;
}
[data-v2].cal-page .cal-event-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-v2].cal-page .cal-event.pill-blue,
[data-v2].cal-page .cal-week-event.pill-blue { background: var(--info-soft); color: var(--info-fg); border-left-color: var(--info-fg); }
[data-v2].cal-page .cal-event.pill-green,
[data-v2].cal-page .cal-week-event.pill-green { background: var(--pos); color: var(--pos-fg); border-left-color: var(--pos-fg); }
[data-v2].cal-page .cal-event.pill-red,
[data-v2].cal-page .cal-week-event.pill-red { background: var(--neg-soft); color: var(--neg-fg); border-left-color: var(--neg-fg); }
[data-v2].cal-page .cal-event.pill-orange,
[data-v2].cal-page .cal-event.pill-yellow,
[data-v2].cal-page .cal-week-event.pill-orange,
[data-v2].cal-page .cal-week-event.pill-yellow { background: var(--accent-soft); color: var(--v2-accent); border-left-color: var(--accent-bright); }
[data-v2].cal-page .cal-event.pill-purple,
[data-v2].cal-page .cal-event.pill-google,
[data-v2].cal-page .cal-week-event.pill-purple,
[data-v2].cal-page .cal-week-event.pill-google { background: var(--alt-soft); color: var(--alt-fg); border-left-color: var(--alt-fg); }
[data-v2].cal-page .cal-event.pill-gray,
[data-v2].cal-page .cal-week-event.pill-gray { background: var(--inset); color: var(--v2-text-2); border-left-color: var(--v2-text-3); }
[data-v2].cal-page .cal-event-more {
  font-size: 11px;
  font-weight: 620;
  color: var(--v2-text-3);
  padding: 2px 6px;
  cursor: pointer;
}
[data-v2].cal-page .cal-event-more:hover { color: var(--v2-text); }

/* ── Vue SEMAINE ──────────────────────────────────────────────────── */
[data-v2].cal-page .cal-grid-week {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
[data-v2].cal-page .cal-week-head-row { background: var(--panel-2); border-bottom: 1px solid var(--stroke-2); }
[data-v2].cal-page .cal-week-day-name {
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--v2-text-3);
}
[data-v2].cal-page .cal-week-day-num { font-size: 15px; font-weight: 640; color: var(--v2-text); }
[data-v2].cal-page .cal-week-day-head.cal-cell-today { box-shadow: none; }
[data-v2].cal-page .cal-week-day-head.cal-cell-today .cal-week-day-num {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-bright);
  color: var(--sur-accent, #1b1a12);
}
[data-v2].cal-page .cal-week-allday-row { background: var(--panel-2); border-bottom: 1px solid var(--stroke-2); }
[data-v2].cal-page .cal-week-hour-label {
  font-size: 10px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  color: var(--v2-text-3);
}
[data-v2].cal-page .cal-week-hour-row { border-color: var(--stroke-2); }
[data-v2].cal-page .cal-week-slot { border-color: var(--stroke-2); }
[data-v2].cal-page .cal-week-day-col { border-color: var(--stroke-2); }
[data-v2].cal-page .cal-week-day-col-today { background: var(--accent-soft); }
[data-v2].cal-page .cal-week-event {
  border-radius: var(--r-xs, 9px);
  border-left: 3px solid transparent;
  box-shadow: var(--shadow-sm);
  padding: 4px 7px;
}
[data-v2].cal-page .cal-week-event-time { font-size: 10.5px; font-weight: 640; font-variant-numeric: tabular-nums; opacity: .8; }
[data-v2].cal-page .cal-week-event-title { font-size: 11.5px; font-weight: 620; }

/* ── Pied : légende et synchro Google ─────────────────────────────── */
[data-v2].cal-page .cal-legend {
  font-size: 11px;
  color: var(--v2-text-3);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
[data-v2].cal-page .cal-legend-sep { opacity: .5; }
[data-v2].cal-page .cal-gsync {
  font-size: 11px;
  color: var(--v2-text-3);
  display: flex;
  align-items: center;
  gap: 6px;
  /* l'ancien bandeau était peint aux couleurs Google (bleu #4285F4) —
     sous la coque il redevient un pied de page neutre */
  background: var(--panel-2);
  border: 1px solid var(--stroke-2);
  border-radius: var(--r-xs, 9px);
}
[data-v2].cal-page .cal-gsync .btn-icon { color: var(--v2-text-3); }
[data-v2].cal-page .cal-gsync-live .btn-icon { color: var(--pos-fg); }
[data-v2].cal-page .cal-gsync strong { font-weight: 620; color: var(--v2-text-2); }
[data-v2].cal-page .cal-gsync-btn {
  all: unset;
  cursor: pointer;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--panel-solid);
  border: 1px solid var(--stroke);
  box-sizing: border-box;
  font-size: 11px;
  font-weight: 620;
  color: var(--v2-text-2);
}
[data-v2].cal-page .cal-gsync-btn:hover { background: var(--panel-2); color: var(--v2-text); }


/* ══════════════════════════════════════════════════════════════════
   CARNET DE CONTACTS — refonte Industry (11/08/2026)
   L'écran gardait l'ancien langage : téléphones ambre, cartes
   flottantes, badges hors rampe. Une couleur = un sens : bleu = côté
   prospect (en conquête), vert = côté client (conclu) ; les liens
   tél/mail sont des ENCRES, pas des accents.
   ══════════════════════════════════════════════════════════════════ */
[data-v2].cb2 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font);
  color: var(--v2-text);
  -webkit-font-smoothing: antialiased;
}

/* ── Barre d'outils ───────────────────────────────────────────────── */
[data-v2].cb2 .cb2-barre {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 9px 11px;
  border-radius: var(--r-md);
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
}
/* La recherche : un seul champ, large — il a remplacé la rangée de
   filtres. L'icône s'allume à la frappe. */
[data-v2].cb2 .cb2-cherche {
  flex: 1;
  min-width: 260px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  background: var(--panel-solid);
  border: 1px solid var(--stroke);
  cursor: text;
}
[data-v2].cb2 .cb2-cherche .btn-icon { color: var(--v2-text-3); flex-shrink: 0; }
[data-v2].cb2 .cb2-cherche:focus-within {
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
[data-v2].cb2 .cb2-cherche:focus-within .btn-icon { color: var(--v2-accent); }
[data-v2].cb2 .cb2-cherche input {
  all: unset;
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--v2-text);
}
[data-v2].cb2 .cb2-cherche input::placeholder { color: var(--v2-text-3); }
[data-v2].cb2 .cb2-cherche-x {
  all: unset;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs, 9px);
  color: var(--v2-text-3);
}
[data-v2].cb2 .cb2-cherche-x:hover { background: var(--panel-2); color: var(--v2-text); }

[data-v2].cb2 .cb2-sel {
  height: 32px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  background: var(--panel-solid);
  border: 1px solid var(--stroke);
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--v2-text);
  max-width: 210px;
}
[data-v2].cb2 .cb2-sel:focus { outline: none; border-color: var(--accent-bright); box-shadow: 0 0 0 3px var(--accent-soft); }
[data-v2].cb2 .cb2-bascule {
  all: unset;
  cursor: pointer;
  height: 32px;
  padding: 0 12px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 99px;
  border: 1px solid var(--stroke);
  font-size: 12px;
  font-weight: 620;
  color: var(--v2-text-2);
  background: transparent;
}
[data-v2].cb2 .cb2-bascule:hover { background: var(--panel-2); }
[data-v2].cb2 .cb2-bascule[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-bright);
  color: var(--v2-accent);
}
[data-v2].cb2 .cb2-bascule:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 1px; }
[data-v2].cb2 .cb2-reset {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 620;
  color: var(--v2-text-3);
}
[data-v2].cb2 .cb2-reset:hover { color: var(--neg-fg); background: var(--neg-soft); }
[data-v2].cb2 .cb2-ressort { flex: 1; }
[data-v2].cb2 .cb2-btn-clair {
  all: unset;
  cursor: pointer;
  height: 32px;
  padding: 0 13px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--r-sm);
  background: var(--panel-solid);
  border: 1px solid var(--stroke);
  font-size: 12.5px;
  font-weight: 620;
  color: var(--v2-text);
}
[data-v2].cb2 .cb2-btn-clair:hover { background: var(--panel-2); }
[data-v2].cb2 .cb2-btn-clair:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 1px; }

/* ── Compteurs — aucun fond coloré, le creux se dit en encre ──────── */
[data-v2].cb2 .cb2-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
[data-v2].cb2 .cb2-kpi {
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
}
[data-v2].cb2 .cb2-kpi-v { display: block; font-size: 22px; font-weight: 680; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
[data-v2].cb2 .cb2-kpi-l { display: block; margin-top: 2px; font-size: 11px; color: var(--v2-text-3); }
[data-v2].cb2 .cb2-kpi-creux .cb2-kpi-v { color: var(--v2-text-2); }

/* ── Le tableau — une seule carte, lignes en filets ───────────────── */
[data-v2].cb2 .cb2-t {
  border-radius: var(--r-md);
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
  overflow: hidden;   /* aucun sticky à l'intérieur */
}
[data-v2].cb2 .cb2-grille {
  display: grid;
  grid-template-columns: minmax(230px, 1.3fr) minmax(170px, 1fr) 170px minmax(210px, 1.1fr) 96px 40px;
  align-items: center;
  column-gap: 10px;
}
[data-v2].cb2 .cb2-head {
  padding: 11px 18px;
  background: var(--panel-2);
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--v2-text-3);
}
[data-v2].cb2 .cb2-row {
  padding: 10px 18px;
  border-bottom: 1px solid var(--stroke-2);
  position: relative;
  cursor: pointer;
}
[data-v2].cb2 .cb2-row:hover { background: var(--panel-2); }
[data-v2].cb2 .cb2-c-contact { display: flex; align-items: center; gap: 10px; min-width: 0; }
[data-v2].cb2 .cb2-init {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  background: var(--inset);
  font-size: 11px;
  font-weight: 620;
  color: var(--v2-text-2);
  overflow: hidden;
}
[data-v2].cb2 .cb2-init img { width: 100%; height: 100%; object-fit: cover; }
[data-v2].cb2 .cb2-qui { display: flex; flex-direction: column; min-width: 0; }
[data-v2].cb2 .cb2-qui strong {
  font-size: 12.5px;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-v2].cb2 .cb2-qui strong:hover { text-decoration: underline; text-underline-offset: 2px; }
[data-v2].cb2 .cb2-qui small { font-size: 11px; color: var(--v2-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-v2].cb2 .cb2-principal { font-style: normal; font-size: 8px; color: var(--v2-accent); vertical-align: 2px; }
[data-v2].cb2 .cb2-c-poste { font-size: 12.5px; color: var(--v2-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-v2].cb2 .cb2-absent { color: var(--v2-text-3); }
/* Les liens d'échange : encre pleine, l'icône en tertiaire — l'ambre
   n'a rien à faire sur un numéro de téléphone. */
[data-v2].cb2 .cb2-lien {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--v2-text);
  text-decoration: none;
  min-width: 0;
}
[data-v2].cb2 .cb2-lien .btn-icon { color: var(--v2-text-3); flex-shrink: 0; }
[data-v2].cb2 .cb2-lien span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-v2].cb2 .cb2-lien:hover { text-decoration: underline; text-underline-offset: 2px; }
[data-v2].cb2 .cb2-lien:hover .btn-icon { color: var(--v2-accent); }

[data-v2].cb2 .cb2-act { display: grid; place-items: center; color: var(--v2-text-3); }
[data-v2].cb2 .cb2-act-btns {
  display: none;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: var(--r-xs, 9px);
  background: var(--panel-solid);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
}
[data-v2].cb2 .cb2-row:hover .cb2-act-btns { display: inline-flex; }
[data-v2].cb2 .cb2-row:hover .cb2-act-chev { visibility: hidden; }
[data-v2].cb2 .cb2-ico {
  all: unset;
  cursor: pointer;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs, 9px);
  color: var(--v2-text-2);
}
[data-v2].cb2 .cb2-ico:hover { background: var(--panel-2); color: var(--v2-text); }

[data-v2].cb2 .cb2-total {
  padding: 12px 18px;
  background: var(--panel-2);
}
[data-v2].cb2 .cb2-total-l {
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .08em;
  text-transform: uppercase;
}
[data-v2].cb2 .cb2-total-s { font-size: 12px; color: var(--v2-text-3); }

[data-v2].cb2 .cb2-vide {
  padding: 46px 20px;
  border-radius: var(--r-md);
  background: var(--panel);
  border: 1px solid var(--stroke);
  text-align: center;
  color: var(--v2-text-3);
}
[data-v2].cb2 .cb2-vide-t { margin-top: 10px; font-size: 14px; font-weight: 620; color: var(--v2-text); }
[data-v2].cb2 .cb2-vide-s { margin-top: 3px; font-size: 12px; }

/* FENÊTRE ÉTROITE : sous 1200 px les colonnes seraient rognées sans
   ascenseur — même filet que la vue liste. Aucun sticky dans .cb2-t,
   le défilement local est sans danger ici. */
@media (max-width: 1200px) {
  [data-v2].cb2 .cb2-t { overflow-x: auto; }
  [data-v2].cb2 .cb2-t .cb2-grille { min-width: 1080px; }
}


/* Import Apollo — pastilles de résolution dans la modale de relecture.
   La modale suit le thème de l'appli : chaque teinte a sa branche sombre. */
.ap-res { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 620; white-space: nowrap; }
.ap-res small { font-weight: 550; opacity: .7; }
.ap-res-nouveau { background: rgba(53,104,196,.11); color: #3160b4; }
.ap-res-fiche { background: rgba(23,128,81,.15); color: #136d45; }
.ap-res-deja { background: rgba(0,0,0,.06); color: #6b6f76; }
[data-app-theme="dark"] .ap-res-nouveau, [data-theme="dark"] .ap-res-nouveau { background: rgba(122,167,245,.14); color: #7aa7f5; }
[data-app-theme="dark"] .ap-res-fiche, [data-theme="dark"] .ap-res-fiche { background: rgba(52,199,132,.16); color: #46c98c; }
[data-app-theme="dark"] .ap-res-deja, [data-theme="dark"] .ap-res-deja { background: rgba(255,255,255,.08); color: #9aa0a8; }


/* Revue du carnet : un bandeau d'action — l'ambre, puisque c'est une
   action à mener, jamais un état. */
[data-v2].cb2 .cb2-revue {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  border: 1px solid var(--accent-bright);
  font-size: 12.5px;
  color: var(--v2-accent);
}
[data-v2].cb2 .cb2-revue .btn-icon { color: var(--v2-accent); }
[data-v2].cb2 .cb2-revue b { font-weight: 680; }
[data-v2].cb2 .cb2-revue-btn {
  all: unset;
  cursor: pointer;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 13px;
  box-sizing: border-box;
  border-radius: 99px;
  background: linear-gradient(170deg, #f5d547, #e4c033);
  color: var(--sur-accent, #1b1a12);
  font-size: 12.5px;
  font-weight: 640;
}
[data-v2].cb2 .cb2-revue-btn .btn-icon { color: var(--sur-accent, #1b1a12); }
[data-v2].cb2 .cb2-revue-btn:hover { filter: brightness(1.04); }
[data-v2].cb2 .cb2-revue-btn:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; }


/* ══════════════════════════════════════════════════════════════════
   CAISSES À OUTILS — refonte Industry (11/08/2026)
   Quatre onglets (Manquants + Commandes fusionnés en Approvisionnement),
   les treize caisses en LISTE — un objet répété plus de six fois avec
   les mêmes champs est une ligne de tableau, pas une carte.
   ══════════════════════════════════════════════════════════════════ */
[data-v2].caisses-page-wrap { font-family: var(--font); color: var(--v2-text); -webkit-font-smoothing: antialiased; }

/* ── La barre d'onglets : soulignement en box-shadow inset — PAS une
   bordure, qui décalerait le texte d'un pixel au changement. ──────── */
[data-v2].caisses-page-wrap .caisses-tabs {
  display: flex;
  gap: 4px;
  padding: 0 30px;
  margin: 0;
  border-bottom: 1px solid var(--stroke-2);
  background: var(--panel-2);
}
[data-v2].caisses-page-wrap .caisses-tab {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 13px 14px;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--v2-text-3);
  box-shadow: inset 0 -2px 0 0 transparent;
  transition: color .12s ease, box-shadow .12s ease;
}
[data-v2].caisses-page-wrap .caisses-tab:hover { color: var(--v2-text); }
[data-v2].caisses-page-wrap .caisses-tab.active {
  font-weight: 620;
  color: var(--v2-text);
  box-shadow: inset 0 -2px 0 0 var(--accent-bright);
}
[data-v2].caisses-page-wrap .caisses-tab:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: -2px; }
[data-v2].caisses-page-wrap .caisses-tab-count {
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  border-radius: 99px;
  background: var(--inset);
  font-size: 10.5px;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
  color: var(--v2-text-2);
}
[data-v2].caisses-page-wrap .caisses-tab-count-alert { background: var(--neg-soft); color: var(--neg-fg); }
[data-v2].caisses-page-wrap .caisses-page { padding: 18px 30px 86px; display: flex; flex-direction: column; gap: 12px; }
/* Les blocs gardent leur hauteur naturelle : enfants flex, ils se
   compriment par défaut — le tableau (overflow: hidden pour ses coins)
   se faisait écraser à la hauteur restante et COUPAIT les dernières
   caisses sans ascenseur (« je peux pas voir toutes les caisses »,
   Joris, 11/08/2026). Une fois incompressibles, le contenu dépasse et
   l'overflow-y: auto de la page prend le relais. */
[data-v2].caisses-page-wrap .caisses-page > * { flex-shrink: 0; }

/* ── Onglet Caisses : intro + recherche 250px à droite ────────────── */
[data-v2].caisses-page-wrap .cx-intro { display: flex; align-items: center; gap: 12px; }
[data-v2].caisses-page-wrap .cx-intro-txt { flex: 1; margin: 0; font-size: 12.5px; color: var(--v2-text-2); }
[data-v2].caisses-page-wrap .cx-intro-txt strong { font-weight: 620; color: var(--v2-text); }
[data-v2].caisses-page-wrap .cx-cherche {
  width: 250px;
  flex-shrink: 0;
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 99px;
  background: var(--panel-solid);
  border: 1px solid var(--stroke);
  cursor: text;
}
[data-v2].caisses-page-wrap .cx-cherche .btn-icon { color: var(--v2-text-3); }
[data-v2].caisses-page-wrap .cx-cherche:focus-within { border-color: var(--accent-bright); box-shadow: 0 0 0 3px var(--accent-soft); }
[data-v2].caisses-page-wrap .cx-cherche input { all: unset; flex: 1; min-width: 0; font-size: 12.5px; color: var(--v2-text); }
[data-v2].caisses-page-wrap .cx-cherche input::placeholder { color: var(--v2-text-3); }

/* Quatre compteurs — deux teintes seulement. */
[data-v2].caisses-page-wrap .cx-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
[data-v2].caisses-page-wrap .cx-kpi {
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
}
[data-v2].caisses-page-wrap .cx-kpi-v { display: block; font-size: 24px; font-weight: 680; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
[data-v2].caisses-page-wrap .cx-kpi-v small { font-size: 12.5px; font-weight: 550; color: var(--v2-text-3); margin-left: 2px; letter-spacing: 0; }
[data-v2].caisses-page-wrap .cx-kpi-l { display: block; margin-top: 3px; font-size: 11px; font-weight: 620; letter-spacing: .08em; text-transform: uppercase; color: var(--v2-text-3); }
[data-v2].caisses-page-wrap .cx-kpi-neg { color: var(--neg-fg); }
[data-v2].caisses-page-wrap .cx-kpi-pos { color: var(--pos-fg); }

/* ── Le tableau des caisses ───────────────────────────────────────── */
[data-v2].caisses-page-wrap .cx-t {
  border-radius: var(--r-md);
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
[data-v2].caisses-page-wrap .cx-grille {
  display: grid;
  grid-template-columns: 92px 148px minmax(180px, 1fr) 188px 128px 120px 118px;
  align-items: center;
  column-gap: 10px;
}
[data-v2].caisses-page-wrap .cx-head {
  padding: 11px 18px 11px 22px;
  background: var(--panel-2);
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--v2-text-3);
}
[data-v2].caisses-page-wrap .cx-row {
  position: relative;
  padding: 11px 18px 11px 22px;
  border-bottom: 1px solid var(--stroke-2);
  cursor: pointer;
}
[data-v2].caisses-page-wrap .cx-row:hover { background: var(--panel-2); }
/* Filet 4px + lavis très pâle sur les caisses à manquants — un lavis,
   pas un aplat. */
[data-v2].caisses-page-wrap .cx-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: transparent;
}
[data-v2].caisses-page-wrap .cx-ton-manq { background: color-mix(in srgb, var(--neg-soft) 45%, transparent); }
[data-v2].caisses-page-wrap .cx-ton-manq::before { background: var(--neg-fg); }
[data-v2].caisses-page-wrap .cx-ton-manq:hover { background: var(--neg-soft); }
[data-v2].caisses-page-wrap .cx-c-num { display: flex; align-items: baseline; gap: 4px; }
[data-v2].caisses-page-wrap .cx-c-num small { font-size: 11px; color: var(--v2-text-3); }
[data-v2].caisses-page-wrap .cx-c-num b { font-size: 19px; font-weight: 680; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
[data-v2].caisses-page-wrap .cx-c-type { font-size: 12.5px; color: var(--v2-text-2); }
[data-v2].caisses-page-wrap .cx-c-tech { display: flex; align-items: center; gap: 8px; min-width: 0; }
[data-v2].caisses-page-wrap .cx-tech-rond {
  width: 24px; height: 24px;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--inset);
  font-style: normal;
  font-size: 10px;
  font-weight: 640;
  color: var(--v2-text-2);
}
[data-v2].caisses-page-wrap .cx-c-tech b { font-size: 13.5px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-v2].caisses-page-wrap .cx-libre {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 99px;
  background: var(--pos); color: var(--pos-fg);
  font-size: 12px; font-weight: 620;
}
[data-v2].caisses-page-wrap .cx-c-contenu { display: flex; align-items: center; gap: 10px; }
[data-v2].caisses-page-wrap .cx-c-contenu b { font-size: 12.5px; font-weight: 620; font-variant-numeric: tabular-nums; min-width: 54px; }
[data-v2].caisses-page-wrap .cx-barre { flex: 1; height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; }
[data-v2].caisses-page-wrap .cx-barre-fill { display: block; height: 100%; border-radius: 99px; background: var(--accent-bright); }
[data-v2].caisses-page-wrap .cx-barre-fill.complet { background: var(--pos-fg); }
[data-v2].caisses-page-wrap .cx-past {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 99px;
  font-size: 12.5px; font-weight: 680; font-variant-numeric: tabular-nums;
}
[data-v2].caisses-page-wrap .cx-past-neg { background: var(--neg-soft); color: var(--neg-fg); }
[data-v2].caisses-page-wrap .cx-past-pos { background: var(--pos); color: var(--pos-fg); font-weight: 620; }
[data-v2].caisses-page-wrap .cx-c-check { font-size: 12.5px; color: var(--v2-text-3); font-variant-numeric: tabular-nums; }
[data-v2].caisses-page-wrap .cx-check-vieux { color: var(--neg-fg); }
[data-v2].caisses-page-wrap .cx-c-act { text-align: right; }
[data-v2].caisses-page-wrap .cx-btn-check {
  all: unset;
  cursor: pointer;
  height: 30px;
  padding: 0 12px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--r-sm);
  background: var(--panel-solid);
  border: 1px solid var(--stroke);
  font-size: 12px;
  font-weight: 620;
  color: var(--v2-text);
}
[data-v2].caisses-page-wrap .cx-btn-check:hover { background: var(--panel-2); }
[data-v2].caisses-page-wrap .cx-btn-check:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 1px; }

/* ── Approvisionnement : en-tête + trois segments ─────────────────── */
[data-v2].caisses-page-wrap .cx-appro-tete { display: flex; align-items: flex-start; gap: 12px; }
[data-v2].caisses-page-wrap .cx-appro-txt { flex: 1; min-width: 0; }
[data-v2].caisses-page-wrap .cx-appro-titre { font-size: 13px; font-weight: 620; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
[data-v2].caisses-page-wrap .cx-gros { font-size: 19px; font-weight: 680; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
[data-v2].caisses-page-wrap .cx-appro-sous { font-size: 12.5px; font-weight: 550; color: var(--v2-text-3); }
[data-v2].caisses-page-wrap .cx-appro-phrase { margin: 6px 0 0; font-size: 12.5px; color: var(--v2-text-2); }
[data-v2].caisses-page-wrap .cx-btn-ambre {
  all: unset;
  cursor: pointer;
  flex-shrink: 0;
  height: 34px;
  padding: 0 15px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 99px;
  background: linear-gradient(170deg, #f5d547, #e4c033);
  color: var(--sur-accent, #1b1a12);
  font-size: 13px;
  font-weight: 640;
}
[data-v2].caisses-page-wrap .cx-btn-ambre .btn-icon { color: var(--sur-accent, #1b1a12); }
[data-v2].caisses-page-wrap .cx-btn-ambre:hover { filter: brightness(1.04); }
[data-v2].caisses-page-wrap .cx-btn-ambre:disabled,
[data-v2].caisses-page-wrap .cx-btn-ambre[disabled] { opacity: .55; cursor: default; filter: none; }
[data-v2].caisses-page-wrap .cx-segs {
  display: inline-flex;
  align-self: flex-start;
  gap: 2px;
  padding: 4px;
  border-radius: 99px;
  background: var(--inset);
  border: 1px solid var(--stroke-2);
}
[data-v2].caisses-page-wrap .cx-seg {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 620;
  color: var(--v2-text-2);
}
[data-v2].caisses-page-wrap .cx-seg:hover { color: var(--v2-text); }
[data-v2].caisses-page-wrap .cx-seg.actif {
  background: var(--accent-soft);
  color: var(--v2-text);
  font-weight: 620;
  box-shadow: var(--shadow-sm);
}
[data-v2].caisses-page-wrap .cx-seg:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 1px; }
[data-v2].caisses-page-wrap .cx-seg-n { font-size: 11px; opacity: .65; font-variant-numeric: tabular-nums; }
[data-v2].caisses-page-wrap .cx-cmd-barre { display: flex; justify-content: flex-end; }

/* ── Stock : une liste d'ajustement, pas un tableau d'analyse ─────── */
[data-v2].caisses-page-wrap .caisses-page > .stock-wrap,
[data-v2].caisses-page-wrap .caisses-page .caisses-table { max-width: 100%; }


/* ── Approvisionnement / segment Manquants : cinq colonnes, vignettes ── */
[data-v2].caisses-page-wrap .cx-mq {
  border-radius: var(--r-md);
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
[data-v2].caisses-page-wrap .cx-mq-grille {
  display: grid;
  grid-template-columns: minmax(300px, 1.6fr) 78px minmax(190px, 1fr) 132px 156px;
  align-items: center;
  column-gap: 10px;
}
[data-v2].caisses-page-wrap .cx-mq-head {
  padding: 11px 18px;
  background: var(--panel-2);
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--v2-text-3);
}
[data-v2].caisses-page-wrap .cx-mq-head .c { text-align: center; }
[data-v2].caisses-page-wrap .cx-mq-row { padding: 10px 18px; border-bottom: 1px solid var(--stroke-2); }
[data-v2].caisses-page-wrap .cx-mq-row:hover { background: var(--panel-2); }
[data-v2].caisses-page-wrap .cx-mq-outil { display: flex; align-items: center; gap: 11px; min-width: 0; }
/* Vignette photo 32px — l'outil se reconnaît d'un regard ; icône de
   nature en repli quand la photo manque. */
[data-v2].caisses-page-wrap .cx-mq-vign {
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  background: var(--panel-solid);
  border: 1px solid var(--stroke-2);
  color: var(--v2-text-3);
  overflow: hidden;
}
[data-v2].caisses-page-wrap .cx-mq-vign img { width: 100%; height: 100%; object-fit: contain; }
[data-v2].caisses-page-wrap .cx-mq-noms { display: flex; flex-direction: column; min-width: 0; }
[data-v2].caisses-page-wrap .cx-mq-noms b { font-size: 13.5px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-v2].caisses-page-wrap .cx-mq-noms small { font-size: 11px; color: var(--v2-text-3); font-variant-numeric: tabular-nums; }
[data-v2].caisses-page-wrap .cx-mq-qte { font-size: 19px; font-weight: 680; font-variant-numeric: tabular-nums; text-align: center; }
[data-v2].caisses-page-wrap .cx-mq-caisses { display: flex; flex-wrap: wrap; gap: 5px; }
[data-v2].caisses-page-wrap .cx-mq-cnum {
  min-width: 24px; height: 24px;
  padding: 0 6px;
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-xs, 9px);
  background: var(--inset);
  font-size: 11.5px;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
  color: var(--v2-text-2);
}
[data-v2].caisses-page-wrap .cx-etat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 99px;
  font-size: 12px; font-weight: 620; white-space: nowrap;
}
[data-v2].caisses-page-wrap .cx-etat i { width: 5px; height: 5px; border-radius: 99px; background: currentColor; }
[data-v2].caisses-page-wrap .cx-etat-neg { background: var(--neg-soft); color: var(--neg-fg); }
[data-v2].caisses-page-wrap .cx-etat-acc { background: var(--accent-soft); color: var(--v2-accent); }
[data-v2].caisses-page-wrap .cx-etat-info { background: var(--info-soft); color: var(--info-fg); }
[data-v2].caisses-page-wrap .cx-mq-act { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
[data-v2].caisses-page-wrap .cx-mq-rond {
  width: 30px; height: 30px;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--panel-solid);
  border: 1px solid var(--stroke);
  color: var(--v2-text-2);
  cursor: pointer;
  text-decoration: none;
}
[data-v2].caisses-page-wrap .cx-mq-rond:hover { background: var(--panel-2); color: var(--v2-text); }
[data-v2].caisses-page-wrap .cx-mq-rond-off { opacity: .4; cursor: default; }
[data-v2].caisses-page-wrap .cx-mq-btn {
  all: unset;
  cursor: pointer;
  height: 30px;
  padding: 0 11px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--r-sm);
  background: var(--panel-solid);
  border: 1px solid var(--stroke);
  font-size: 12px;
  font-weight: 620;
  color: var(--v2-text);
  white-space: nowrap;
}
[data-v2].caisses-page-wrap .cx-mq-btn:hover { background: var(--panel-2); }
[data-v2].caisses-page-wrap .cx-mq-btn-neg { background: var(--neg-soft); border-color: transparent; color: var(--neg-fg); }
[data-v2].caisses-page-wrap .cx-mq-btn-neg:hover { background: var(--neg-soft); filter: brightness(.97); }
[data-v2].caisses-page-wrap .cx-mq-btn-pos { background: var(--pos); border-color: transparent; color: var(--pos-fg); }

/* ── Segment « Par caisse » : n° · titulaire · chips rouges ───────── */
[data-v2].caisses-page-wrap .cx-pc {
  border-radius: var(--r-md);
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
[data-v2].caisses-page-wrap .cx-pc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--stroke-2);
  cursor: pointer;
}
[data-v2].caisses-page-wrap .cx-pc-row:hover { background: var(--panel-2); }
[data-v2].caisses-page-wrap .cx-pc-num { width: 46px; flex-shrink: 0; font-size: 19px; font-weight: 680; font-variant-numeric: tabular-nums; }
[data-v2].caisses-page-wrap .cx-pc-tech { width: 130px; flex-shrink: 0; font-size: 13px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-v2].caisses-page-wrap .cx-pc-tech i { font-style: normal; color: var(--pos-fg); font-weight: 620; }
[data-v2].caisses-page-wrap .cx-pc-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; }
[data-v2].caisses-page-wrap .cx-pc-chip {
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--neg-soft);
  color: var(--neg-fg);
  font-size: 12px;
  font-weight: 620;
}


/* ── Stock : une liste d'ajustement, pas un tableau d'analyse ──────
   Bloc étroit (940 px) : l'étirer sur 1400 px éloignerait le nom du
   bouton +/−. Une seule note contextuelle par ligne, dans sa teinte. */
[data-v2].caisses-page-wrap .cx-stk { max-width: 940px; display: flex; flex-direction: column; gap: 12px; }
[data-v2].caisses-page-wrap .cx-kpis-3 { grid-template-columns: repeat(3, 1fr); }
[data-v2].caisses-page-wrap .cx-stk-liste {
  border-radius: var(--r-md);
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
[data-v2].caisses-page-wrap .cx-stk-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--stroke-2);
}
[data-v2].caisses-page-wrap .cx-stk-row:hover { background: var(--panel-2); }
[data-v2].caisses-page-wrap .cx-stk-vign {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--panel-solid);
  border: 1px solid var(--stroke-2);
  object-fit: contain;
}
[data-v2].caisses-page-wrap .cx-stk-vign-ph { display: grid; place-items: center; color: var(--v2-text-3); }
[data-v2].caisses-page-wrap .cx-stk-noms { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
[data-v2].caisses-page-wrap .cx-stk-noms > b { font-size: 12.5px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-v2].caisses-page-wrap .cx-stk-ref { font-size: 11px; color: var(--v2-text-3); font-variant-numeric: tabular-nums; }
[data-v2].caisses-page-wrap .cx-stk-note { font-size: 11px; color: var(--v2-text-3); }
[data-v2].caisses-page-wrap .cx-stk-pos { color: var(--pos-fg); }
[data-v2].caisses-page-wrap .cx-stk-neg { color: var(--neg-fg); }
[data-v2].caisses-page-wrap .cx-stk-pilule {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border-radius: 99px;
  background: var(--inset);
  border: 1px solid var(--stroke-2);
}
[data-v2].caisses-page-wrap .cx-stk-btn {
  all: unset;
  cursor: pointer;
  width: 28px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 99px;
  font-size: 15px;
  color: var(--v2-text-2);
}
[data-v2].caisses-page-wrap .cx-stk-btn:hover { background: var(--panel-solid); color: var(--v2-text); }
[data-v2].caisses-page-wrap .cx-stk-val {
  min-width: 30px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
}


/* ══════════════════════════════════════════════════════════════════
   PARC AUTOMOBILE — refonte Industry (11/08/2026)
   La règle centrale : un champ vide n'est JAMAIS un zéro. « — » dit
   « on ne sait pas », « + Affecter » et « Date » invitent à saisir.
   Bandeau AMBRE (du travail à faire, pas une panne) — le rouge reste
   aux échéances dépassées.
   ══════════════════════════════════════════════════════════════════ */
[data-v2] .vx-page { min-width: 1180px; }

[data-v2] .vx-bandeau {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  border: 1px solid var(--stroke);
  color: var(--v2-accent);
}
[data-v2] .vx-bandeau-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
[data-v2] .vx-bandeau-txt b { font-size: 12.5px; font-weight: 620; }
[data-v2] .vx-bandeau-txt small { font-size: 11px; color: var(--v2-text-2); }
[data-v2] .vx-btn-ambre {
  all: unset;
  cursor: pointer;
  flex-shrink: 0;
  height: 33px;
  padding: 0 14px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  border-radius: 99px;
  background: linear-gradient(170deg, #f5d547, #e4c033);
  color: var(--sur-accent, #1b1a12);
  font-size: 12.5px;
  font-weight: 640;
}
[data-v2] .vx-btn-ambre:hover { filter: brightness(1.04); }
[data-v2] .vx-btn-ambre:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; }

/* Cinq compteurs — deux teintes sur cinq. */
[data-v2] .vx-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
[data-v2] .vx-kpi {
  padding: 12px 15px;
  border-radius: var(--r-md);
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
}
[data-v2] .vx-kpi-v { display: block; font-size: 24px; font-weight: 680; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
[data-v2] .vx-kpi-l { display: block; margin-top: 3px; font-size: 11px; font-weight: 620; letter-spacing: .08em; text-transform: uppercase; color: var(--v2-text-3); }
[data-v2] .vx-kpi-pos { color: var(--pos-fg); }
[data-v2] .vx-kpi-neg { color: var(--neg-fg); }
[data-v2] .vx-kpi-mut { color: var(--v2-text-3); }

/* Filtres de complétude. */
[data-v2] .vx-filtres { display: flex; align-items: center; gap: 8px; }
[data-v2] .vx-filtre {
  all: unset;
  cursor: pointer;
  height: 30px;
  padding: 0 12px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 99px;
  border: 1px solid var(--stroke);
  font-size: 12.5px;
  font-weight: 620;
  color: var(--v2-text-2);
}
[data-v2] .vx-filtre:hover { background: var(--panel-2); }
[data-v2] .vx-filtre.actif { background: var(--accent-soft); border-color: transparent; color: var(--v2-accent); font-weight: 620; }
[data-v2] .vx-filtre:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 1px; }
[data-v2] .vx-filtre-n {
  min-width: 18px; height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  border-radius: 99px;
  background: var(--inset);
  font-size: 10.5px;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
}
[data-v2] .vx-filtre.actif .vx-filtre-n { background: rgba(255,255,255,.5); }
[data-v2] .vx-filtre-compte { margin-left: auto; font-size: 12.5px; color: var(--v2-text-3); }

/* Le tableau — dix colonnes. Pas de filet de statut : il n'y a pas
   d'état à signaler ici, seulement de la donnée manquante. */
[data-v2] .vx-t {
  border-radius: var(--r-md);
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
[data-v2] .vx-grille {
  display: grid;
  grid-template-columns: 250px minmax(150px, 1fr) 110px 92px 108px 108px 108px 78px 74px 34px;
  align-items: center;
  column-gap: 10px;
}
[data-v2] .vx-head {
  padding: 11px 18px;
  background: var(--panel-2);
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--v2-text-3);
}
[data-v2] .vx-head .r, [data-v2] .vx-c-mois, [data-v2] .vx-c-km, [data-v2] .vx-c-docs { text-align: right; }
[data-v2] .vx-head .c, [data-v2] .vx-c-fiche { text-align: center; }
[data-v2] .vx-row {
  padding: 11px 18px;
  border-bottom: 1px solid var(--stroke-2);
  position: relative;
  cursor: pointer;
}
[data-v2] .vx-row:hover { background: var(--panel-2); }

/* La plaque : bande bleue « F », interlettrage, tabulaire, cadre 5px. */
[data-v2] .vx-c-veh { display: flex; align-items: center; gap: 10px; min-width: 0; }
[data-v2] .vx-plaque {
  display: inline-flex;
  align-items: stretch;
  height: 26px;
  border-radius: var(--r-xs, 9px);
  overflow: hidden;
  border: 1px solid var(--stroke);
  background: var(--panel-solid);
  flex-shrink: 0;
}
[data-v2] .vx-plaque-eu {
  width: 15px;
  display: grid;
  place-items: center;
  background: #1b3b8f;
  color: #fff;
  font-size: 11px;
  font-weight: 680;
}
[data-v2] .vx-plaque > b {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  font-size: 12.5px;
  font-weight: 680;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--v2-text);
}
[data-v2] .vx-modele { font-size: 12.5px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

[data-v2] .vx-c-cond { display: flex; align-items: center; gap: 8px; min-width: 0; }
[data-v2] .vx-cond-rond {
  width: 24px; height: 24px;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--inset);
  font-style: normal;
  font-size: 10px;
  font-weight: 640;
  color: var(--v2-text-2);
}
[data-v2] .vx-c-cond b { font-size: 13px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* L'invitation à saisir : pointillés, encre tertiaire — le même
   vocabulaire partout où le CRM invite à remplir. */
[data-v2] .vx-affecter {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px dashed var(--stroke);
  font-size: 11.5px;
  font-weight: 620;
  color: var(--v2-text-3);
}
[data-v2] .vx-affecter:hover { color: var(--v2-accent); border-color: var(--accent-bright); background: var(--accent-soft); }
[data-v2] .vx-c-mois { font-size: 13px; font-weight: 640; font-variant-numeric: tabular-nums; }
[data-v2] .vx-c-km { font-size: 12.5px; color: var(--v2-text-2); font-variant-numeric: tabular-nums; }
[data-v2] .vx-absent { font-style: normal; color: var(--v2-text-3); font-weight: 550; }
[data-v2] .vx-date { font-size: 12.5px; font-variant-numeric: tabular-nums; }
[data-v2] .vx-date-neg { color: var(--neg-fg); font-weight: 640; }
[data-v2] .vx-date-acc { color: var(--v2-accent); font-weight: 620; }
[data-v2] .vx-date-vide {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--v2-text-3);
}
[data-v2] .vx-date-vide:hover { color: var(--v2-accent); }
[data-v2] .vx-date-vide .btn-icon { color: currentColor; }

/* Complétude : trois points — se lisent d'un coup d'œil. */
[data-v2] .vx-c-fiche { display: inline-flex; justify-content: center; gap: 4px; }
[data-v2] .vx-pt { width: 5px; height: 5px; border-radius: 99px; background: var(--track); }
[data-v2] .vx-pt.plein { background: var(--pos-fg); }
[data-v2] .vx-c-docs { font-size: 12.5px; color: var(--v2-text-2); font-variant-numeric: tabular-nums; }

[data-v2] .vx-act { display: grid; place-items: center; color: var(--v2-text-3); }
[data-v2] .vx-act-btns {
  display: none;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  padding: 2px;
  border-radius: var(--r-xs, 9px);
  background: var(--panel-solid);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
}
[data-v2] .vx-row:hover .vx-act-btns { display: inline-flex; }
[data-v2] .vx-row:hover .vx-act-chev { visibility: hidden; }
[data-v2] .vx-ico {
  all: unset;
  cursor: pointer;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs, 9px);
  color: var(--v2-text-2);
}
[data-v2] .vx-ico:hover { background: var(--panel-2); color: var(--v2-text); }
[data-v2] .vx-ico.danger:hover { background: var(--neg-soft); color: var(--neg-fg); }


/* ── Standards : cinq colonnes, vignettes photos ──────────────────── */
[data-v2].caisses-page-wrap .cx-std-barre { display: flex; align-items: center; gap: 12px; }
[data-v2].caisses-page-wrap .cx-std-barre .std-segments { flex: 1; }
[data-v2].caisses-page-wrap .cx-std-t {
  border-radius: var(--r-md);
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
[data-v2].caisses-page-wrap .cx-std-grille {
  display: grid;
  grid-template-columns: minmax(320px, 1.7fr) 148px 130px 150px 92px;
  align-items: center;
  column-gap: 10px;
}
[data-v2].caisses-page-wrap .cx-std-head {
  padding: 11px 18px;
  background: var(--panel-2);
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--v2-text-3);
}
[data-v2].caisses-page-wrap .cx-std-row {
  padding: 9px 18px;
  border-bottom: 1px solid var(--stroke-2);
  position: relative;
}
[data-v2].caisses-page-wrap .cx-std-row:hover { background: var(--panel-2); }
[data-v2].caisses-page-wrap .cx-std-outil { display: flex; align-items: center; gap: 11px; min-width: 0; }
[data-v2].caisses-page-wrap .cx-std-outil b { font-size: 13.5px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-v2].caisses-page-wrap .cx-std-ref { font-size: 12.5px; color: var(--v2-text-2); font-variant-numeric: tabular-nums; }
[data-v2].caisses-page-wrap .cx-std-nat {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 99px;
  font-size: 12px; font-weight: 620;
  background: var(--inset); color: var(--v2-text-2);
}
[data-v2].caisses-page-wrap .cx-std-nat-elec { background: var(--accent-soft); color: var(--v2-accent); }
[data-v2].caisses-page-wrap .cx-std-nat-portatif { background: var(--info-soft); color: var(--info-fg); }
[data-v2].caisses-page-wrap .cx-std-aussi {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--inset);
  font-size: 11.5px;
  font-weight: 620;
  color: var(--v2-text-2);
}
[data-v2].caisses-page-wrap .cx-std-lien { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
[data-v2].caisses-page-wrap .cx-std-act { display: none; align-items: center; gap: 2px; }
[data-v2].caisses-page-wrap .cx-std-row:hover .cx-std-act { display: inline-flex; }
[data-v2].caisses-page-wrap .cx-ico {
  all: unset;
  cursor: pointer;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs, 9px);
  color: var(--v2-text-2);
}
[data-v2].caisses-page-wrap .cx-ico:hover { background: var(--panel-2); color: var(--v2-text); }
[data-v2].caisses-page-wrap .cx-ico.danger:hover { background: var(--neg-soft); color: var(--neg-fg); }

/* ══════════════════════════════════════════════════════════════════
   ÉCRANS UA- (Sauvegardes, Utilisateurs) — intégration coque
   Les titres doublonnaient l'en-tête en verre : ils deviennent des
   intertitres de section ; les contenus rejoignent des panneaux.
   ══════════════════════════════════════════════════════════════════ */
body.v2-coque .ua-page { padding: 20px 30px 86px; display: flex; flex-direction: column; gap: 12px; max-width: 1080px; }
body.v2-coque .ua-head { display: flex; align-items: flex-start; gap: 12px; margin: 0 !important; }
body.v2-coque .ua-head h2 { margin: 0; font-size: 15px; font-weight: 640; letter-spacing: -.01em; color: var(--v2-text, #16171a); }
body.v2-coque .ua-sub { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--v2-text-3, #6b6f76); max-width: 70ch; }
body.v2-coque .ua-invite-btn {
  margin-left: auto;
  border: none;
  cursor: pointer;
  height: 34px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 99px;
  background: linear-gradient(170deg, #f5d547, #e4c033);
  color: var(--sur-accent, #1b1a12);
  font-size: 13px;
  font-weight: 640;
  font-family: inherit;
}
body.v2-coque .ua-invite-btn:hover { filter: brightness(1.04); }
body.v2-coque .ua-empty {
  padding: 26px 20px;
  border-radius: var(--r-sm, 12px);
  background: var(--panel, rgba(255,255,255,.66));
  border: 1px dashed var(--stroke, rgba(20,20,25,.075));
  text-align: center;
  font-size: 12.5px;
  color: var(--v2-text-3, #6b6f76);
}