/* registre.css — feuille unique de la charte A2 (docs/CHARTE.md) : jetons, composants,
   retaillage de Bootstrap. Un écran lit ces jetons, il ne recopie jamais une valeur.
   Chargée après Bootstrap et Tabulator : elle les retaille par l'ordre, pas par !important. */

/* Fontes auto-hébergées, jamais de CDN : le comptoir s'affiche hors ligne.
   Sous-ensemble latin (œ compris). Chiffres de Plex Sans tous à 600 unités. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-v530-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-v530-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-v530-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-v530-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Encres, du plus lu au moins lu. */
  --ink:   #1B1F24;
  --ink-2: #4B5563;
  --ink-3: #7B8592;

  /* Fond de page, panneau, lavis en retrait. */
  --paper: #F4F5F7;
  --panel: #FFFFFF;
  --wash:  #ECEFF2;

  --rule:   #E3E7EC;
  --rule-2: #C9D0D8;

  /* L'accent : l'action et la sélection. */
  --acc:   #1F5FBF;
  --acc-w: #E8F0FC;
  --acc-h: #184C99;

  /* Le rouge : ce qui coûte du temps ou de l'argent (urgent, retard, erreur). */
  --red:   #C0261C;
  --red-w: #FCE9E7;

  /* La marque Honda : logo et compteurs du menu, jamais un état. */
  --marque: #C8102E;

  /* Échelles d'information, nommées par leur sens. Le manque reprend --red. */
  --ecart-plus:    #1E7B4B;
  --ecart-plus-w:  #E3F3E9;

  --etat-neutre:     #8A94A1;
  --etat-neutre-w:   #EEF0F3;
  --etat-ok:         var(--ecart-plus);
  --etat-ok-w:       var(--ecart-plus-w);
  --etat-attention:  #9A6400;
  --etat-attention-w:#FFF6E0;
  --etat-ecart:      var(--red);
  --etat-ecart-w:    var(--red-w);

  --actif:   var(--acc);
  --actif-w: var(--acc-w);

  /* Repères de calendrier : un fond que l'œil trouve et ne lit pas. */
  --repere-ferie-w:      #EEF2F8;
  --repere-aujourdhui-w: #FFF8E1;

  /* Années des statistiques (Okabe-Ito, lisible par les daltoniens) : N, N-1, N-2, N-3. */
  --wb-stats-c1: #0072B2;
  --wb-stats-c2: #E69F00;
  --wb-stats-c3: #009E73;
  --wb-stats-c4: #CC79A7;

  /* Indisponibilité : une hachure, pas une teinte. */
  --trame-indispo: repeating-linear-gradient(
      135deg, transparent 0 6px, var(--rule-2) 6px 7px);

  /* Coins : rendez-vous, bouton ou champ, feuille et menu. Pas d'ombre portée. */
  --coin-s: 3px;
  /* Deux tailles de bouton : 32 px (`.btn`, petit ou non) et celle d'une ligne de grille. */
  --bouton-ligne: 26px;
  --coin:   5px;
  --coin-l: 8px;

  /* Espacements : une échelle de 4 px, rien entre deux crans. */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 20px;
  --e6: 24px;
  --e8: 32px;

  /* Hauteurs : tout contrôle 32 px, un geste de colonne 36 px. */
  --h-champ: 32px;
  --h-geste: 36px;

  /* Corps : titre d'écran, total, texte second, rubrique (le courant est 14 px). */
  --t-titre:    20px;
  --t-total:    17px;
  --t-second:   12.5px;
  --t-rubrique: 12px;

  /* La barre de pied, à hauteur fixe. */
  --h-pied:      28px;

  /* Une seule famille ; --fonte-mono reste pour les écrans qui la nomment. */
  --fonte:      'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-mono: var(--fonte);
}

/* ── Retaillage Bootstrap : ses variables de composant remontent vers ces
   jetons racine ; les régler ici règle les composants sans !important. */

:root {
  --bs-border-radius: var(--coin);
  --bs-border-radius-sm: var(--coin);
  --bs-border-radius-lg: 6px;
  --bs-border-radius-xl: var(--coin-l);
  --bs-border-radius-xxl: var(--coin-l);
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow: none;
  --bs-box-shadow-sm: none;
  --bs-box-shadow-lg: none;
  --bs-box-shadow-inset: none;

  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink);
  --bs-secondary-color: var(--ink-2);
  --bs-tertiary-color: var(--ink-3);
  --bs-border-color: var(--rule);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-bg: var(--wash);
  --bs-tertiary-bg: var(--wash);

  --bs-body-font-family: var(--fonte);
  --bs-font-sans-serif: var(--fonte);
  --bs-font-monospace: var(--fonte);
  --bs-body-font-size: 0.875rem;
  --bs-body-line-height: 1.4;

  --bs-primary: var(--acc);
  --bs-primary-rgb: 31, 95, 191;
  --bs-danger: var(--red);
  --bs-danger-rgb: 192, 38, 28;
  /* Les jumeaux d'état : cadres, fonds -subtle et liens suivent sans retouche par composant.
     text-warning et text-success restent interdits (HarmonieBootstrapTest) : le texte a .wb-encre-ok/.wb-encre-att.
     Les triplets rgb sont ceux des jetons : .border-success et .border-warning les lisent. */
  --bs-warning: var(--etat-attention);
  --bs-warning-rgb: 154, 100, 0;
  --bs-success: var(--etat-ok);
  --bs-success-rgb: 30, 123, 75;
  --bs-warning-border-subtle: var(--etat-attention);
  --bs-success-border-subtle: var(--etat-ok);
  --bs-success-bg-subtle: var(--etat-ok-w);
  --bs-warning-bg-subtle: var(--etat-attention-w);
  --bs-danger-bg-subtle: var(--red-w);
  --bs-secondary-bg-subtle: var(--wash);
  --bs-primary-bg-subtle: var(--wash);
  --bs-info-bg-subtle: var(--wash);
  /* .text-body lit --bs-body-color-rgb, pas --bs-body-color : ses composantes sont celles de --ink. */
  --bs-body-color-rgb: 27, 31, 36;

  --bs-link-color: var(--acc);
  --bs-link-color-rgb: 31, 95, 191;
  --bs-link-hover-color: var(--acc-h);
  --bs-link-hover-color-rgb: 24, 76, 153;
  --bs-link-decoration: none;
}

body {
  font-family: var(--fonte);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--paper);
}
/* Un lien est d'accent et ne se souligne qu'au survol, même dans une phrase. */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.btn-link { --bs-btn-color: var(--acc); text-decoration: none; }
/* Un numéro ne se coupe jamais : on le lit et on le compose d'un bloc. */
a[href^="tel:"] { white-space: nowrap; }

/* ── Socle des écrans ──────────────────────────────────────────────────── */

th { text-align: left; }
/* Hauteur plancher et corps des contrôles nus (cellules de document, boutons de ligne). */
input:not([type=radio]):not([type=checkbox]), select, button, textarea { min-height: 26px; }
select, button, textarea { font-size: 14px; }

/* Barre de page : titre et actions, puis les onglets de sous-section. */
.wb-onglets {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem;
  margin-top: .25rem;
  border-bottom: 1px solid var(--rule);
}
.wb-onglet {
  padding: .4rem .75rem .5rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: .87rem;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.wb-onglet:hover { color: var(--ink); }
.wb-onglet.actif { color: var(--ink); font-weight: 600; border-bottom-color: var(--acc); }

/* Bulle de première visite de la recherche (js/palette.js), montrée une fois. */
.wb-search-coach {
  position: absolute;
  z-index: 1080;
  max-width: 17rem;
  padding: .6rem .75rem;
  border-radius: var(--bs-border-radius-lg);
  background: var(--ink);
  color: var(--paper);
  font-size: .8125rem;
  line-height: 1.35;
}
.wb-search-coach::before {
  content: "";
  position: absolute;
  top: .9rem;
  left: -.35rem;
  width: .7rem;
  height: .7rem;
  background: inherit;
  transform: rotate(45deg);
}
.wb-search-coach button {
  margin-top: .4rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: 600;
  font-size: .8125rem;
  text-decoration: underline;
  cursor: pointer;
}
.wb-palette-exemples {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--rule);
  font-size: .75rem;
  color: var(--ink-2);
}
.wb-palette-exemples code { padding: .05rem .3rem; background: var(--wash); color: var(--ink); }

/* Badge de touche (js/badges-raccourcis.js) : plus pâle hors survol. */
.wb-hint { flex-shrink: 0; opacity: .72; transition: opacity .12s ease; }
*:hover > .wb-hint,
*:focus-visible > .wb-hint { opacity: 1; }

/* Carte de réglage : remplit sa cellule pour aligner les bas d'une rangée. */
.wb-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--rule-2);
  border-radius: var(--bs-border-radius-lg);
}
.wb-card-text { margin: 0; line-height: 1.45; color: var(--ink-2); }
.wb-card-text code { padding: 1px 5px; background: var(--wash); color: var(--ink); font-size: .85em; }
@media (max-width: 768px) {
  .wb-card { height: auto; }
}

/* ── Grilles Tabulator ── */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row,
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-row-even {
  min-height: 0;
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
}
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover { background: var(--paper); }
.tabulator .tabulator-row.wb-dt-ligne-ouvrable { cursor: pointer; }
/* Dans une cellule éditable, le clic ouvre l'éditeur, pas la fiche. */
.tabulator .tabulator-row.wb-dt-ligne-ouvrable .tabulator-cell.tabulator-editable { cursor: text; }
.tabulator .tabulator-row.wb-dt-ligne-active,
.tabulator .tabulator-row.wb-dt-ligne-active .tabulator-cell { background: var(--acc-w); }
.tabulator .tabulator-row.wb-dt-ligne-active .tabulator-cell:first-child { box-shadow: inset 3px 0 0 var(--acc); }
/* Le focus de ligne est un calque : en `outline`, les colonnes figées le recouvraient. */
.tabulator .tabulator-row:focus-visible { outline: none; }
.tabulator .tabulator-row:focus-visible::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 12;
  border: 2px solid var(--actif);
  pointer-events: none;
}
.tabulator .tabulator-row.wb-dt-ligne-active:focus-visible::after { border: 0; box-shadow: inset 3px 0 0 var(--acc); }

/* Boutons de ligne : discrets, pleins au survol. `inline-flex` garde la cellule dans le flux de la ligne. */
.tabulator .tabulator-row .wb-dt-actions-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: .45;
  transition: opacity .1s ease;
}
.tabulator .tabulator-row:hover .wb-dt-actions-cell { opacity: 1; }
.tabulator .tabulator-row .wb-dt-actions-cell .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bouton-ligne);
  height: var(--bouton-ligne);
  padding: 0;
  border-radius: var(--coin);
}

/* Critères actifs au-dessus de la grille : un critère sur une colonne masquée reste lisible. */
.wb-dt-criteres {
  margin-bottom: 8px;
  padding: 8px 10px;
  background: var(--wash);
  border: 1px solid var(--rule);
  border-radius: var(--coin-s);
}
.wb-dt-criteres-puces,
.wb-dt-criteres-ajout { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wb-dt-criteres-puces { margin-bottom: 8px; }
.wb-dt-criteres-ajout { padding-top: 8px; border-top: 1px solid var(--rule); }
.wb-dt-critere {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 10px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--coin-s);
  font-size: .8rem;
  line-height: 1.4;
  color: var(--ink);
}
.wb-dt-critere strong { font-weight: 600; }
.wb-dt-critere-x {
  appearance: none;
  padding: 2px 4px;
  border: 0;
  border-radius: var(--coin-s);
  background: transparent;
  color: var(--ink-3);
  font-size: .85rem;
  line-height: 1;
  cursor: pointer;
}
.wb-dt-critere-x:hover { background: var(--red-w); color: var(--red); }

/* Onglets de portée d'une grille : la forme de `.wb-onglet`, avec leur compte. */
.wb-dt-scope-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}
.wb-dt-scope-tabs button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .4rem .75rem .5rem;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-3);
  font-size: .87rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.wb-dt-scope-tabs button.wb-dt-scope-active { color: var(--ink); border-bottom-color: var(--acc); }
.wb-dt-scope-tabs .wb-dt-scope-count { font-weight: 500; opacity: .7; font-variant-numeric: tabular-nums; }
/* Ce qui reste à faire (« 8 à encaisser ») : le travail se voit avant le clic. */
.wb-dt-scope-tabs .wb-dt-scope-count.wb-dt-scope-afaire { color: var(--etat-attention); opacity: 1; font-weight: 600; }
/* Un onglet à zéro s'estompe, sauf ouvert. */
.wb-dt-scope-tabs button.wb-dt-scope-vide { opacity: .5; }
.wb-dt-scope-tabs button.wb-dt-scope-vide.wb-dt-scope-active { opacity: 1; }

/* Cellule « Véhicule » des contrats : modèle, puis plaque et catégorie de permis. */
.wb-vehicule-cell { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.wb-vehicule-titre a { font-weight: 500; }
.wb-vehicule-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wb-vehicule-plaque { font-size: .8rem; color: var(--ink-3); }
/* Plaque reconstituée (contrat sans plaque gelée) : elle ne se cite pas comme une trace. */
.wb-plaque-non-gelee { border-bottom: 1px dotted currentColor; color: var(--ink-3); cursor: help; }
.wb-plaque-changee,
.wb-plaque-non-gelee-icone { color: var(--etat-attention); cursor: help; }
/* Catégorie de permis : la couleur est la donnée ; la hachure dit « puissance inconnue ». */
.wb-permis-badge { border-color: transparent; }
.wb-permis-a1      { background-color: var(--etat-ok-w); color: var(--etat-ok); }
.wb-permis-alimite { background-color: var(--etat-attention-w); color: var(--etat-attention); }
.wb-permis-a       { background-color: var(--red-w); color: var(--red); }
.wb-permis-inconnu {
  background-image: repeating-linear-gradient(45deg, var(--wash) 0 4px, var(--rule) 4px 8px);
  color: var(--ink-2);
}

/* Pastille de teinte : le filet garde visible un blanc sur le papier. On n'invente pas de pastille. */
.wb-pastille {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
  vertical-align: -1px;
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  border-radius: var(--coin-s);
}
.wb-pastille + .wb-pastille { margin-left: -4px; }
.wb-couleur-nom { vertical-align: middle; }
/* Teinte déduite du code : filet esquissé, teinte inchangée. */
.wb-pastille-deduite { border-style: dashed; border-color: color-mix(in srgb, var(--ink) 45%, transparent); }
.wb-couleur-deduite { color: var(--ink-3); }
.wb-couleur-code-cell { font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; }

/* ── Dialogues (comportement : js/dialog.js) ── */
.offcanvas-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  flex: 0 0 auto;
  margin-top: auto;
  background: var(--paper);
}
.offcanvas-body { flex: 1 1 auto; min-height: 0; }
/* La variable, pas `width` : Bootstrap pose la largeur sur deux classes. */
.offcanvas.offcanvas-end,
.offcanvas.offcanvas-start { --bs-offcanvas-width: min(28rem, 100vw); }
@media (max-width: 575.98px) {
  .offcanvas.offcanvas-end,
  .offcanvas.offcanvas-start { --bs-offcanvas-width: 100vw; }
}
/* Modale haute : le corps défile, l'en-tête et le pied restent visibles. */
.modal-dialog { max-height: calc(100vh - 3.5rem); }
.modal-content { max-height: inherit; }
.modal-body { overflow-y: auto; }
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog,
  .offcanvas { transition: none !important; }
}
.form-label.wb-requis::after { content: "*"; margin-left: .2rem; color: var(--red); font-weight: 700; }
.modal fieldset,
.offcanvas fieldset { margin-bottom: 1.1rem; border: 0; }
.modal .form-text,
.offcanvas .form-text { font-size: .75rem; }
/* Le destructif à gauche, loin du bouton principal. */
.modal-footer .wb-destructif,
.offcanvas-footer .wb-destructif { margin-right: auto; }
@media (max-width: 400px) {
  .modal-footer,
  .offcanvas-footer { flex-direction: column-reverse; align-items: stretch; }
  .modal-footer .wb-destructif,
  .offcanvas-footer .wb-destructif { margin-right: 0; margin-top: .25rem; }
}
.modal-title > i.bi,
.offcanvas-title > i.bi { margin-right: .5rem; color: var(--acc); }

/* ── Calendriers (js/calendrier-passe.js) : passé sur le numéro, dimanche hachuré, aujourd'hui gagne. ── */
.ec .wb-cal-passe .ec-day-head time { color: var(--ink-3); }
.ec .ec-day.wb-cal-ferme { background-image: repeating-linear-gradient(135deg, transparent 0 6px, var(--wash) 6px 7px); }
.ec-day.ec-today { background-color: var(--repere-aujourdhui-w); }
.ec .ec-day.ec-today.wb-cal-passe .ec-day-head time { color: var(--ink); }
.ec .ec-day.ec-today.wb-cal-ferme { background-image: none; }

/* Profil d'écran du poste (Réglages › Poste). */
html.wb-screen-grande .wb-main { font-size: .95rem; }
html.wb-screen-petite .wb-main { padding: .5rem; font-size: .875rem; }

/* Pièces rattachées à une facture : le retrait dit « se rattache à la ligne du dessus », la couleur dit « relance ». */
.wb-ged-attache,
.wb-ged-relance {
  position: relative;
  margin-left: 1.75rem;
  margin-top: -.25rem;
  border-left: 3px solid var(--rule-2) !important;
}
.wb-ged-relance { border-left-color: var(--etat-attention) !important; }
.wb-ged-attache::before,
.wb-ged-relance::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 1.1rem;
  width: 1rem;
  height: 3px;
  background: var(--rule-2);
  opacity: .55;
}
.wb-ged-relance::before { background: var(--etat-attention); }

/* Dans une cellule, Bootstrap repeint le texte (`.table > * > * > *`) : le rouge doit l'emporter. */
.wb-jr-rd, .table > :not(caption) > * > .wb-jr-rd { color: var(--red); }

@media print {
  .wb-journal .wb-page-header .btn { display: none !important; }
}

/* Le focus clavier se voit toujours (tout au clavier). */
:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 1px;
}
.btn { --bs-btn-focus-box-shadow: none; }
/* Un contrôle fait 32 px, petit ou non ; un bouton à libellé ne porte pas d'icône. */
.btn,
.btn-sm,
.btn-group-sm > .btn {
  --bs-btn-padding-y: 5px;
  --bs-btn-padding-x: 12px;
  --bs-btn-line-height: 20px;
  --bs-btn-font-weight: 400;
  --bs-btn-border-radius: var(--coin);
}
.input-group > .btn { --bs-btn-padding-x: 9px; }
/* Un champ est un panneau blanc sous un filet marqué, 32 px, petit ou non. La hauteur
   passe par :where() pour qu'un champ nommé (scan, coupures) la redemande sans forcer. */
.form-control,
.form-select,
.form-control-sm,
.form-select-sm {
  min-height: var(--h-champ);
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: var(--coin);
  background-color: var(--panel);
  border-color: var(--rule-2);
}
.form-select,
.form-select-sm { padding-right: 2rem; }
:where(input).form-control,
:where(select).form-select { height: var(--h-champ); }
/* L'aide d'un champ ne s'affiche qu'au champ qui a la main ; un avertissement, une
   touche ou un lien restent visibles. Le retrait attend un instant : sinon le clic qui
   quitte le champ décale la page sous le pointeur et manque sa cible. */
:not(:focus-within) > .form-text:not(.wb-sms-compteur, .wb-nature-propose, [class*="wb-encre"], :has(.k, kbd, a, button)),
:not(:focus-within) > .wb-email-verif.text-body-secondary {
  display: none;
  transition: display 0s .3s allow-discrete;
}
.form-control:disabled,
.form-select:disabled { background-color: var(--wash); }
.input-group-text { background-color: var(--wash); border-color: var(--rule-2); }
/* Bootstrap peint le champ actif de --bs-body-bg, ici le gris de page : il paraissait désactivé. */
.form-control:focus,
.form-select:focus {
  background-color: var(--panel);
  border-color: var(--acc);
  outline: 1px solid var(--acc);
  outline-offset: -1px;
  box-shadow: none;
}

/* Boutons : accent plein pour l'action principale, filet pour le reste ; le rouge
   ne sert qu'au bouton de confirmation de wbConfirm. Pas de vert, jaune ni cyan. */
.btn-primary {
  --bs-btn-bg: var(--acc);
  --bs-btn-border-color: var(--acc);
  --bs-btn-color: #fff;
  --bs-btn-font-weight: 600;
  --bs-btn-hover-bg: var(--acc-h);
  --bs-btn-hover-border-color: var(--acc-h);
  --bs-btn-active-bg: var(--acc-h);
  --bs-btn-active-border-color: var(--acc-h);
  --bs-btn-disabled-bg: var(--ink-3);
  --bs-btn-disabled-border-color: var(--ink-3);
}
/* Bootstrap déclare la couleur désactivée variante par variante : la régler ici. */
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary {
  --bs-btn-bg: var(--panel);
  --bs-btn-border-color: var(--rule-2);
  --bs-btn-color: var(--ink);
  --bs-btn-hover-bg: var(--wash);
  --bs-btn-hover-border-color: var(--ink-3);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-active-bg: var(--wash);
  --bs-btn-active-border-color: var(--ink-2);
  --bs-btn-active-color: var(--ink);
  --bs-btn-disabled-color: var(--ink-3);
  --bs-btn-disabled-border-color: var(--rule-2);
}
/* Choix exclusif : un seul dessin, le lavis d'accent, qu'il passe par une case
   cachée, par `.active` posé en JS ou par `aria-pressed` (comme `.wb-seg`). */
.btn-check:checked + .btn,
.btn-check:active + .btn,
.btn-group > .btn.active,
.btn-group > .btn[aria-pressed="true"],
.btn-outline-secondary.active,
.btn-outline-primary.active {
  --bs-btn-active-bg: var(--acc-w);
  --bs-btn-active-border-color: var(--acc);
  --bs-btn-active-color: var(--acc);
  background: var(--acc-w);
  border-color: var(--acc);
  color: var(--acc);
  font-weight: 600;
  z-index: 2;
}

.btn-danger {
  --bs-btn-bg: var(--red);
  --bs-btn-border-color: var(--red);
  --bs-btn-hover-bg: #A11F17;
  --bs-btn-hover-border-color: #A11F17;
  --bs-btn-active-bg: #A11F17;
  --bs-btn-active-border-color: #A11F17;
  --bs-btn-disabled-bg: var(--red);
  --bs-btn-disabled-border-color: var(--red);
}

/* Feuilles posées : un filet, jamais une ombre. */
.card,
.modal-content,
.dropdown-menu,
.popover {
  border: 1px solid var(--rule-2);
  box-shadow: none;
}
/* Une carte est une feuille : coin 8, marge 16 × 20, titre en rubrique sans bandeau. */
.card {
  --bs-card-bg: var(--panel);
  --bs-card-cap-bg: transparent;
  --bs-card-spacer-x: var(--e5);
  --bs-card-spacer-y: var(--e4);
  --bs-card-border-color: var(--rule);
  --bs-card-border-radius: var(--coin-l);
  border-color: var(--rule);
}
.card > .card-header { border-bottom: 0; padding: var(--e4) var(--e5) 0; background: none; }
.card > .card-header + .card-body { padding-top: var(--e3); }
.modal-content { --bs-modal-bg: var(--panel); }

/* ── Liste flottante de suggestions ── */
/* Ce qui survole se distingue par un filet, pas par une ombre. La ligne atteinte au clavier
   prend le dessin de `.wb-registre-ligne--choisie` ; son filet, transparent sur toutes les
   lignes, évite que le texte se décale quand ↓ l'atteint. */
.wb-suggestions {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--rule-2);
  max-height: 15rem;
  overflow-y: auto;
  /* Au-dessus d'un dialogue, où la liste s'ouvre parfois. */
  z-index: 1080;
}
.wb-suggestions-item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 4px 8px;
  background: none;
  border: 0;
  border-top: 1px solid var(--rule);
  border-left: 3px solid transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
}
.wb-suggestions-item:first-child { border-top: 0; }
button.wb-suggestions-item, .wb-suggestions-item[role="option"] { cursor: pointer; }
.wb-suggestions-item--active,
button.wb-suggestions-item:hover {
  background: var(--wash);
  border-left-color: var(--acc);
}

/* La palette (js/palette.js) est la même feuille ; ses lignes respirent un peu plus,
   car elle se parcourt à la flèche au milieu de l'écran. */
.wb-palette-boite {
  background: var(--panel);
  border: 1px solid var(--rule-2);
}
.wb-palette-liste .wb-suggestions-item { padding: .35rem .75rem; }
.wb-palette-liste .lbl { padding-top: .6rem; }

/* ── Échelle typographique : la hiérarchie vient d'elle, pas d'un fond ni d'une ombre ── */

/* Le libellé réglé, en capitales interlettrées : en-tête de colonne, clé d'un .kv, légende de bloc. */
.lbl {
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink-3);
}

/* Le titre de bloc : 17 px. */
.ttl {
  font-size: 17px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--ink);
}

/* Le titre d'écran. */
.dsp {
  font-size: var(--t-titre);
  line-height: 1.2;
  font-weight: 600;
  color: var(--ink);
}

/* Les chiffres qui commandent l'écran : mono, tabulaires, trois corps. */
.fig,
.fig-2,
.fig-3 {
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
}
.fig   { font-size: 52px; }
.fig-2 { font-size: 30px; }
.fig-3 { font-size: 20px; }

/* Le chiffre courant, sans changer de corps : tout ce qui se compare d'une ligne
   à l'autre s'aligne sur la même chasse. */
.mono {
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
}

/* Châssis en trois parties (constructeur, modèle, série) : une espace fine dessinée, pas écrite, pour que la
   copie reste à 17 caractères (`wb_fmt_chassis_html()`). */
.wb-vin { white-space: nowrap; }
.wb-vin > span + span { margin-left: .25em; }

/* Toute colonne numérique : chiffres tabulaires, alignés à droite. */
.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ── Composants de la planche ── */

/* L'état : une pastille teintée, sans filet. --ok ce qui est fini, --att ce qui manque,
   --non ce qui est sorti du jour, --rouge ce qui coûte. */
.et {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border: 0;
  border-radius: 11px;
  font-size: var(--t-second);
  line-height: 1;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--wash);
  white-space: nowrap;
  vertical-align: middle;
}
.et--ok    { color: var(--etat-ok); background: var(--etat-ok-w); }
.et--att   { color: var(--etat-attention); background: var(--etat-attention-w); }
.et--rouge { color: var(--red); background: var(--red-w); }
.et--plein { color: var(--panel); background: var(--ink); }
.et--non   { color: var(--ink-3); background: none; border: 1px solid var(--rule); }

/* ── Légende : une suite d'états, pas une rangée de pastilles ── */
/* Le carré porte la teinte, le mot reste du texte courant. La teinte se transmet (`--teinte`
   ou la classe d'état de la grille), jamais recopiée ; un repère qui n'est pas une couleur
   (icône, trame, numéro) prend la place du carré. */
.wb-legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem 1rem;
  color: var(--ink-2);
}
.wb-legende-item {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  color: var(--ink-2);
}
/* `position: relative` : la trame se pose en `::after` et se calerait sinon sur la page. */
.wb-legende-teinte {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  inline-size: 10px;
  block-size: 10px;
  border: 1px solid rgb(0 0 0 / .18);
  border-radius: var(--coin-s);
  background: var(--teinte, transparent);
}
/* Le chiffre d'un item : ce que la teinte pèse dans la vue ; en retrait d'encre, il accompagne le mot. */
.wb-legende-n {
  font-size: 12px;
  color: var(--ink-3);
}
/* Ce qui se superpose à une teinte, et n'en est donc pas une de plus. */
.wb-legende-sep {
  inline-size: 1px;
  block-size: 1em;
  background: var(--rule-2);
}

/* La paire clé-valeur : l'étiquette au-dessus, la valeur en courant. */
.kv { margin: 0; }
.kv > dt { font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
.kv > dd { margin: 0 0 8px; color: var(--ink); }

/* Une touche : un seul dessin partout (boutons, aide, pied de liste, badges de js/badges-raccourcis.js). */
kbd,
.k,
.wb-hint {
  display: inline-block;
  font: 11.5px/16px var(--fonte);
  padding: 0 4px;
  border: 1px solid var(--rule-2);
  border-radius: var(--coin-s);
  color: var(--ink-3);
  background: transparent;
  box-shadow: none;
}
.btn-primary kbd,
.wb-geste--principal kbd {
  color: inherit;
  border-color: color-mix(in srgb, currentColor 55%, transparent);
}

/* La jauge : une barre de 5 px, remplie en gris, en rouge au-delà. */
.jauge {
  position: relative;
  height: 5px;
  border-radius: var(--coin-s);
  overflow: hidden;
  background: var(--rule);
}
.jauge > i {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--ink-3);
}
.jauge > i.rouge { background: var(--red); }

/* Le tableau : tête sur le fond de page, lignes sous un filet clair, pas de filet
   vertical, l'alerte en lavis rouge. Tabulator suit le même dessin (plus bas). */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ink);
  --bs-table-border-color: var(--rule);
  --bs-table-striped-bg: var(--wash);
  --bs-table-hover-bg: var(--paper);
  margin-bottom: 0;
}
.table > thead th {
  --bs-table-bg: var(--paper);
  padding: 7px 10px;
  font-size: var(--t-second);
  font-weight: 600;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
}
.table > tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--rule);
}
.table tr.alerte > td,
.table > tbody .table-danger > td {
  background: var(--red-w);
}

/* Le libellé de champ : texte second, au-dessus du champ. */
.form-label {
  font-size: var(--t-second);
  font-weight: 400;
  color: var(--ink-2);
  margin-bottom: 4px;
}

/* Une case dans une rangée de champs se centre sur leur ligne de saisie ;
   seule sur sa ligne (volet d'un dossier, écran étroit), elle n'a rien à aligner. */
.wb-case-alignee { margin-top: 32px; }
.dossier-gauche .wb-case-alignee { margin-top: 0; }
@media (max-width: 767.98px) { .row > [class*="col-md-"]:not([class*="col-sm-"]) > .wb-case-alignee { margin-top: 0; } }
@media (max-width: 575.98px) { .wb-case-alignee { margin-top: 0; } }

/* ── Dossier en deux volets (maître-détail), à la place du tiroir ── */
/* Le détail ne masque pas la liste, ne piège pas le focus, ne pose pas de fond assombri.
   Le volet a une largeur fixe, la liste prend le reste ; sous 992 px, les volets s'empilent. */
.wb-maitre-detail {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.wb-maitre-detail > .wb-maitre {
  flex: 1 1 auto;
  min-width: 0;   /* sans lui, une grille large pousse le volet hors de l'écran */
}
/* Le volet est un panneau blanc collé à droite, de la bande au bas de l'écran ;
   il suit la liste au défilement sans la recouvrir. `.wb-panneau` : le même, toujours ouvert (ni Échap ni fermeture). */
.wb-maitre-detail > :is(.wb-detail, .wb-panneau) {
  flex: 0 0 380px;
  max-width: 380px;
  border-left: 1px solid var(--rule);
  background: var(--panel);
  margin: -1rem -1rem 0 1rem;
  padding: var(--e4) var(--e5);
  position: sticky;
  top: 0;
  min-height: calc(100vh - 60px);
  max-height: calc(100vh - var(--h-pied));
  overflow-y: auto;
}

/* Volet de saisie : 380 px pour lire, 40 rem pour saisir, 44 rem pour comparer (les colonnes
   Bootstrap se mesurent sur la fenêtre, pas sur le volet). Classe de gabarit, jamais posée par script.
   Reste avant le repli de 992 px : à spécificité égale, l'ordre fait gagner l'empilement. */
.wb-maitre-detail > .wb-detail--saisie {
  flex: 0 0 40rem;
  max-width: 40rem;
}
/* Un volet de saisie s'empile dès 1 200 px ; `:has()` passe le conteneur en `wrap` sans script. */
@media (max-width: 1199.98px) {
  .wb-maitre-detail:has(> .wb-detail--saisie) { flex-wrap: wrap; }
  .wb-maitre-detail > .wb-detail--saisie {
    flex: 1 1 100%;
    max-width: none;
    border-left: 0;
    border-top: 1px solid var(--rule);
    margin: 0;
    padding: 1rem 0 0;
    position: static;
    min-height: 0;
    max-height: none;
  }
}

/* Ligne de contexte d'un volet : chez qui l'on saisit. Masquée (`hidden`) sans contexte :
   une ligne vide se lirait comme une donnée manquante. */
.wb-detail-contexte {
  margin: -.5rem 0 .75rem;
  font-size: 12px;
  color: var(--ink-2);
}

/* `hidden` doit toujours gagner : c'est l'unique pilote de l'ouverture d'un volet. */
.wb-detail[hidden] { display: none !important; }

.wb-detail-titre {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
  font-size: var(--t-total);
  font-weight: 600;
  color: var(--ink);
}
/* Le titre d'un volet n'est pas une rubrique : il garde le corps du titre. */
.wb-detail-titre :is(.wb-card-title, h2) {
  font-size: var(--t-total);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0;
}
.wb-detail-pied {
  border-top: 1px solid var(--rule);
  padding: .75rem 0;
  margin-top: .75rem;
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
}

@media (max-width: 991.98px) {
  .wb-maitre-detail { flex-wrap: wrap; }
  .wb-maitre-detail > :is(.wb-detail, .wb-panneau) {
    flex: 1 1 100%;
    max-width: none;
    border-left: 0;
    border-top: 1px solid var(--rule);
    margin: 0;
    padding: 1rem 0 0;
    position: static;
    min-height: 0;
    max-height: none;
  }
}

/* Volet de comparaison : deux colonnes de lecture de 20 rem. Il s'empile dès 1 400 px, au-dessus
   de la liste, pour qu'on voie la paire ouverte sans faire défiler le registre. */
.wb-maitre-detail--comparaison > .wb-detail {
  flex: 0 0 44rem;
  max-width: 44rem;
}
@media (max-width: 1399.98px) {
  .wb-maitre-detail--comparaison { flex-wrap: wrap; }
  .wb-maitre-detail--comparaison > .wb-detail {
    order: -1;
    flex: 1 1 100%;
    max-width: none;
    /* Le voisin est en dessous : le filet descend. */
    border-left: 0;
    border-bottom: 1px solid var(--rule);
    margin: 0 0 1rem;
    padding: 0 0 1rem;
    position: static;
    min-height: 0;
    max-height: none;
  }
}

/* ── Comparaison : clé, A, B ── */
/* La clé passe au rouge quand les valeurs diffèrent, les valeurs égales pâlissent :
   l'œil ne lit que ce qui reste noir. */
.wb-comparaison {
  display: grid;
  grid-template-columns: 7rem 1fr 1fr;
  column-gap: 1rem;
  row-gap: .35rem;
  align-items: baseline;
}
/* L'en-tête d'une colonne : le nom de la fiche, sa référence en mono dessous. */
.wb-comparaison-tete { align-self: end; }
/* La référence et le lien sortent des capitales de `.lbl`, illisibles pour un numéro. */
.wb-comparaison-tete > .mono,
.wb-comparaison-tete > a {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.wb-comparaison-tete > .mono { color: var(--ink-3); }
.wb-comparaison-tete > a { font-size: 12px; }
/* La clé du différent est la seule chose rouge de la grille. */
.wb-comparaison-cle--differe { color: var(--red); }
/* Deux valeurs égales n'ont plus rien à apprendre : elles s'effacent. */
.wb-comparaison-egal { color: var(--ink-3); }
/* Une valeur absente : un tiret, de la même encre pâle qu'un vide ailleurs. */
.wb-comparaison-absent { color: var(--ink-3); }

/* ── Ligne choisie d'un registre ── */
/* Un filet d'encre dans la marge, transparent sur toutes les lignes pour que le choix ne décale pas le texte. */
.wb-registre-ligne > td:first-child { border-left: 3px solid transparent; }
.wb-registre-ligne--choisie > td { background: var(--wash); }
.wb-registre-ligne--choisie > td:first-child { border-left-color: var(--acc); }

/* Le compteur d'un titre : mono, pâle — il chiffre, il ne titre pas. */
.wb-compte {
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  color: var(--ink-3);
}

/* ── Barre d'outils de page ── */
/* Les critères (période, seuil, caisse, recherche) vivent ici, pas dans l'en-tête qui porte les gestes.
   Quand la barre est le formulaire, le `<form>` porte la classe lui-même. */
.wb-outils {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--rule);
}
.wb-outils .form-label,
.wb-outils label { margin-bottom: 0; }

/* Le compte de la séance d'un poste à la douchette (réception, inventaire) :
   un seul composant, dans la barre d'outils, chiffre mono sur son libellé. */
.wb-poste-compteur {
  padding: .2rem .75rem;
  border: 1px solid var(--rule);
  text-align: center;
  line-height: 1.1;
}
.wb-poste-compteur-val {
  display: block;
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  font-size: 28px;   /* lu debout, douchette en main : plus grand que .fig-3 */
  font-weight: 700;
  color: var(--ink);
}
.wb-poste-compteur-lbl {
  font-size: 12px;
  font-weight: 600;


  color: var(--ink-3);
}

/* ── La fiche ── patron commun (client, véhicule, article) : manchette, alertes
   pleine largeur juste dessous (elles arrêtent, donc avant tout), puis champs à
   gauche et index à droite. */
.wb-fiche-manchette {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.wb-fiche-identite { flex: 1 1 auto; min-width: 0; }
.wb-fiche-surtitre {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .15rem;
}
/* Le numéro se lit comme une référence : mono, tabulaire, en encre pâle. */
.wb-fiche-reference {
  font-size: 12px;
  color: var(--ink-3);
}
.wb-fiche-titre { margin: 0; overflow-wrap: anywhere; }
/* Nature (personne ou entreprise) devant le nom : encre pâle, jamais une couleur
   seule — l'icône porte son `aria-label` (`js/nature-personne.js`). */
.wb-nature-icone { color: var(--ink-3); margin-right: .3rem; }

/* `hidden` est le seul pilote de la proposition : l'`!important` la protège d'un
   futur `display:` posé sur la classe. Couleurs héritées de `.form-text` et `.btn-link`. */
.wb-nature-propose[hidden] { display: none !important; }
.wb-fiche-titre-nature { font-size: .8em; }
/* Les classifieurs : ce qui classe la fiche, sur une ligne sous son titre. */
.wb-fiche-classifieurs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2) 14px;
  margin-top: .5rem;
}
.wb-fiche-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-left: auto;
}

/* Les alertes prolongent la bande blanche de la manchette ; sans alerte, seul le champ
   d'ajout reste, en pointillé, et son bouton n'apparaît qu'à la frappe. */
.wb-fiche-alertes {
  position: relative;
  isolation: isolate;
  margin: 0 -1rem;
  padding: 0 1rem 12px;
}
.wb-fiche-alertes::before {
  content: "";
  position: absolute;
  inset: 0 -100vw 0 0;
  z-index: -1;
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
}
.wb-al-ajout { display: flex; align-items: center; gap: var(--e2); }
.wb-al-new { height: var(--h-champ); max-width: 24rem; resize: none; overflow: hidden; border-style: dashed; }
.wb-al-new:focus { border-style: solid; overflow: auto; }
.wb-al-new:placeholder-shown:not(:focus) ~ .wb-al-add { display: none; }

.wb-fiche-corps {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.wb-fiche-principal { flex: 1 1 auto; min-width: 0; }
/* Un formulaire se borne à 52 rem (plus l'index de 340 px quand il en a un) : un champ
   ne grandit pas avec l'écran, et « Enregistrer » reste sous la dernière colonne. Sur une
   fiche, la borne se pose sur la colonne maître, pas sur le corps. */
.wb-fiche-bornee { max-width: calc(52rem + 1.75rem + 340px); }
.wb-fiche-bornee--sans-index { max-width: 52rem; }
/* Largeur fixe : un index en pourcentage rétrécirait quand on élargit la fenêtre. */
.wb-fiche-index {
  flex: 0 0 340px;
  max-width: 340px;
  border-left: 1px solid var(--rule);
  margin-left: 1.75rem;
  padding-left: 1.75rem;
}
@media (max-width: 1199.98px) {
  .wb-fiche-corps { flex-wrap: wrap; }
  .wb-fiche-index {
    flex: 1 1 100%;
    max-width: none;
    border-left: 0;
    border-top: 1px solid var(--rule);
    margin-left: 0;
    padding-left: 0;
    padding-top: 1rem;
  }
}
/* Un panneau vide tient sur sa ligne de titre : son libellé flotte et la ligne
   `.wb-vide` coule à côté. */
.wb-fiche-index > .wb-bloc { clear: both; }
.wb-fiche-index > .wb-bloc:has(+ :has(> .wb-vide)) > .lbl {
  float: left;
  margin-right: .6rem;
  padding-top: .2em;
}
.wb-fiche-index :is([data-pec-form], [data-fin-form]):empty { display: none; }

/* ── Le compteur : kilométrage et distance au prochain service ──
   La jauge va du dernier service fait au service proposé (trait rouge) ; seule la
   largeur du remplissage est posée en ligne (`lib/vehicule_compteur.inc.php`). */
.wb-compteur {
  flex: 0 0 15rem;
  display: grid;
  gap: .25rem;
  align-content: start;
}
.wb-compteur-valeur { display: flex; align-items: baseline; gap: .4rem; }
.wb-compteur-unite { color: var(--ink-3); }
.wb-jauge {
  position: relative;
  height: 10px;
  background: var(--wash);
  border-bottom: 1px solid var(--rule-2);
}
.wb-jauge > i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: var(--ink-3);
  opacity: .55;
}
.wb-jauge::after {
  content: '';
  position: absolute;
  top: -3px;
  bottom: -3px;
  right: 0;
  width: 2px;
  background: var(--red);
}
.wb-jauge-legende {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  font-family: var(--fonte-mono);
  font-size: 12px;
  color: var(--ink-3);
}
.wb-jauge-legende .rouge { color: var(--red); }
@media (max-width: 1199.98px) {
  .wb-compteur { flex: 1 1 100%; }
}

/* ── Le pli : sections repliées des dossiers (`App\Datatable::renderModalFieldsGrid()`) ── */
details.wb-pli > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}
details.wb-pli > summary::-webkit-details-marker { display: none; }
details.wb-pli > summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg);
}
details.wb-pli[open] > summary::after { transform: rotate(225deg); }
details.wb-pli > summary > span { display: block; }

/* Réception postérieure à la 1re immatriculation : en retrait. La couleur va sur les
   cellules, car Bootstrap colore chaque cellule et celle du `<tr>` n'y descend pas. */
.wb-posterieure,
.table > tbody > tr.wb-posterieure > * { color: var(--ink-3); }

/* Le bloc : la légende de section (`App\Datatable::legendeSection()`), une rubrique
   sans filet ; la feuille sépare. */
.wb-bloc { margin-top: var(--e2); }
.wb-bloc > .lbl { display: block; }

/* La rubrique : un seul titre de section, petites capitales grises. */
.dossier-h2,
.apercu-bloc > h3,
.wb-bloc > .lbl,
.wb-card-title,
.card-title,
.wb-rubrique,
.document-colonne h2 {
  font-size: var(--t-rubrique);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--e2);
}
:is(.dossier-h2, .wb-card-title, .wb-bloc > .lbl) :is(.et, a, small, button, span:not(.lbl)) {
  text-transform: none;
  letter-spacing: 0;
}

/* ── L'aperçu : le document tel qu'il s'imprimera ──
   Le fond blanc y figure le papier ; rempli à la frappe par `js/garage-apercu.js`. */
.wb-apercu {
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: .9rem 1rem;
  margin-top: .6rem;
}
.wb-apercu-logo { max-width: 100%; max-height: 44px; object-fit: contain; }
/* L'expéditeur : le corps du document, pas un libellé. */
.wb-apercu-expediteur { color: var(--ink); }
/* Ce que le document imprime en second rang — contact, IDE, compte. */
.wb-apercu-ligne { font-size: 12px; color: var(--ink-2); }
.wb-apercu-note {
  border-top: 1px solid var(--rule);
  padding-top: .5rem;
  margin-top: .9rem;
}

/* ── La barre d'action d'un écran de réglages ──
   Collante au pied de la fenêtre tant que le formulaire dépasse, puis posée en fin de page :
   « Enregistrer » est toujours sous la main. Rien ne s'ouvre sous elle ; hors du `<form>`,
   le bouton désigne son formulaire par `form=`. */
.wb-barre-action {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: .75rem 0;
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Un champ qui prend le focus ne se glisse pas sous la barre. */
:root:has(.wb-barre-action) { scroll-padding-bottom: 4.5rem; }

/* ══ La note : du texte tenu par un filet à gauche, sans boîte ══
   Deux tons : l'encre pour ce qu'il faut savoir, le rouge pour ce qui refuse ou bloque.
   Un succès est un retour (`js/retour.js`), un « rien à montrer » une phrase (`js/zone-etat.js`). */
.wb-note {
  border-left: 2px solid var(--rule-2);
  border-radius: 0 var(--coin) var(--coin) 0;
  background: var(--panel);
  padding: 6px 10px;
  margin: .75rem 0;
  color: var(--ink-2);
}
.wb-note--rouge { border-left-color: var(--red); background: var(--red-w); color: var(--ink); }
/* L'attention : ce qui prévient sans bloquer. */
.wb-note--attention { border-left-color: var(--etat-attention); background: var(--etat-attention-w); color: var(--ink); }
/* Le titre d'une note, quand elle en a un : le mot qui la classe. */
.wb-note > .lbl { display: block; }

/* ── L'état d'une zone (`js/zone-etat.js`) : une phrase, jamais une animation ── */
.wb-etat {
  color: var(--ink-3);
  margin: .5rem 0;
}

/* ── La lecture : 44rem, environ quatre-vingts caractères, pour le seul texte suivi ── */
.wb-lecture { max-width: 44rem; }
/* Le rouge dit que ce qui n'est pas encore enregistré peut se perdre. */
.wb-barre-action-etat { color: var(--red); }

/* ── Le retour d'un geste, à l'endroit du geste (`js/retour.js`) ──
   Rien de coloré hors le rouge du refus ; l'heure porte l'information. */
.wb-retour {
  color: var(--ink-2);
  margin: .35rem 0;
}
.wb-retour-heure {
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  margin-left: .4rem;
}
/* Un emplacement qui porte un retour cesse d'être le témoin rouge du non enregistré. */
.wb-barre-action-etat.wb-retour--pose {
  color: var(--ink-2);
  text-transform: none;
  letter-spacing: normal;
  font-size: inherit;
  font-weight: 400;
}
.wb-retour--rouge,
.wb-retour--rouge .wb-retour-texte { color: var(--red); }

/* La ligne d'état de la page garde le dernier événement et son heure jusqu'au
   suivant, sans clignoter ni se fermer seule. */
#wb-page-etat {
  margin: 0 0 .5rem;
  color: var(--ink-2);
}
#wb-page-etat > .lbl { margin-right: .5rem; }

/* ── Ce qu'un retour porte en plus de sa phrase : un lien ou une action, dans la note ── */
.wb-retour-lien {
  margin-left: .5rem;
  color: var(--ink);
}
.wb-retour-action {
  margin-left: .5rem;
  vertical-align: baseline;
}

/* La note de refus accrochée à une ligne, une carte ou une commande : c'est la
   `.wb-note--rouge` de la charte, resserrée pour tenir dans une carte. */
.wb-retour-note {
  margin: .35rem 0 0;
  padding-left: .4rem;
  white-space: normal;
}
.wb-barre-action-droite {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* « Le dossier » : ce qui se rattache à la fiche, et combien. Une ligne, un
   filet, le chiffre à droite en mono tabulaire — la colonne de chiffres se lit
   d'un coup d'œil parce qu'ils sont alignés. */
.wb-dossier { list-style: none; margin: 0; padding: 0; }
.wb-dossier > li { border-bottom: 1px solid var(--rule); }
/* Une rubrique à zéro est du texte, pas un lien : il n'y a rien à ouvrir. */
.wb-dossier > li > a,
.wb-dossier > li > .wb-dossier-nul {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .5rem 0;
  color: var(--ink);
  text-decoration: none;
}
.wb-dossier > li > .wb-dossier-nul { color: var(--ink-3); }
.wb-dossier > li > a:hover { color: var(--ink-2); text-decoration: underline; }
.wb-dossier > li > a > :first-child,
.wb-dossier > li > .wb-dossier-nul > :first-child { flex: 1 1 auto; }
.wb-dossier .mono { font-size: 12px; color: var(--ink-3); }
/* La liste d'une carte se tient à la marge de son en-tête ; le cadre ferme la dernière ligne. */
.card > .wb-dossier { padding: 0 1rem; }
.card > .wb-dossier > li:last-child { border-bottom: 0; }

/* ══ Personnes rattachées : une ligne par personne sous un filet, ni tableau ni cartes ══ */
.wb-rattaches { list-style: none; margin: 0 0 .75rem; padding: 0; }
.wb-rattaches > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--rule);
}
/* Le lien de ligne des panneaux, partagé au-delà de cette liste. */
.wb-rattache-nom { color: var(--ink); text-decoration: none; font-weight: 600; }
.wb-rattache-nom:hover { color: var(--ink-2); text-decoration: underline; }
.wb-rattache-role { font-size: 12px; color: var(--ink-2); }
.wb-rattache-coord { font-size: 12px; color: var(--ink-3); }
/* La colonne des gestes est poussée à droite : l'œil descend la liste des noms
   sans que la longueur des rôles ne la fasse serpenter. */
.wb-rattache-actions { margin-left: auto; display: flex; gap: .35rem; }
.wb-rattache-ajout > .lbl { display: block; margin-bottom: .25rem; }

/* ══ Passages atelier : même grammaire que « Le dossier » ══
   La date et le montant sont des liens ; le kilométrage et le mécanicien n'ont pas de source propre. */
.wb-passages { list-style: none; margin: 0 0 .5rem; padding: 0; }
.wb-passages > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--rule);
}
.wb-passage-date { color: var(--ink); text-decoration: none; font-weight: 600; }
.wb-passage-date:hover { color: var(--ink-2); text-decoration: underline; }
/* Le libellé du service prend la place qui reste : c'est la seule longueur
   variable de la ligne, et la pousser à gauche garde le montant aligné. */
.wb-passage-quoi   { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--ink-2); }
.wb-passage-repere { font-size: 12px; color: var(--ink-3); }
.wb-passage-montant {
  margin-left: auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-decoration: none;
}
a.wb-passage-montant:hover { color: var(--ink-2); text-decoration: underline; }
.wb-passages-tout { display: inline-block; margin-top: .25rem; }

/* La trace au pied du dossier : d'où vient cette fiche, et de quand. */
.wb-fiche-provenance {
  border-top: 1px solid var(--rule);
  padding-top: .35rem;
  margin-top: 1.25rem;
  font-size: 12px;
  color: var(--ink-3);
}

/* ══ Le menu latéral (A2) : rail de 52 px, 272 px déplié ══
   Clair, l'item actif porte le trait marque à gauche. Replié, les écrans d'une
   section s'ouvrent en volant au survol ou au focus ; déplié, sous la section. */
.wb-shell {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  min-height: 100vh;
}
.wb-shell.wb-menu-deplie { grid-template-columns: 272px minmax(0, 1fr); }

.wb-rail {
  position: sticky;
  top: 0;
  z-index: 1030;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 6px;
  background: var(--wash);
  border-right: 1px solid var(--rule);
}
.wb-rail-espace { flex: 1 1 auto; }
.wb-rail-lib { display: none; }
.wb-menu-deplie .wb-rail-lib { display: inline; }

.wb-rail-marque {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 5px 10px;
  color: var(--ink);
  text-decoration: none;
  --wb-logo-accent: var(--marque);
}
.wb-rail-marque:hover { text-decoration: none; }
.wb-rail-logo {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--marque);
  color: #fff;
  font-weight: 700;
  font-size: 15.5px;
}
.wb-rail-marque .wb-rail-lib { min-width: 0; line-height: 1.1; }
.wb-rail-marque svg,
.wb-rail-marque img { display: block; height: 16px; width: auto; }
.wb-rail-marque small { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wb-rail-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
  border: 0;
  border-radius: var(--coin-l);
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 14.5px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.wb-rail-item .bi { font-size: 18px; line-height: 1; }
.wb-rail-item:hover { background: var(--rule); color: var(--ink); text-decoration: none; }
.wb-rail-item.wb-actif {
  background: var(--panel);
  color: var(--ink);
  box-shadow: inset 3px 0 0 var(--marque);
}
.wb-menu-deplie .wb-rail-item {
  width: auto;
  height: 34px;
  justify-content: flex-start;
  padding: 0 10px;
  color: var(--ink-2);
}
.wb-menu-deplie .wb-rail-item.wb-actif { color: var(--ink); font-weight: 600; }
.wb-rail-item .wb-hint { display: none; }
.wb-menu-deplie .wb-rail-item .wb-hint { display: inline-block; margin-left: auto; }

/* Le compteur : la pastille marque, sur l'angle replié, en bout de ligne déplié. */
.wb-rail-n {
  position: absolute;
  top: 3px;
  right: 2px;
  min-width: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--marque);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  text-align: center;
}
.wb-menu-deplie .wb-rail-n { position: static; margin-left: auto; font-size: 12px; line-height: 16px; padding: 0 6px; border-radius: 8px; }

.wb-rail-groupe { position: relative; }
.wb-rail-sous {
  display: none;
  position: absolute;
  top: -6px;
  left: calc(100% + 7px);
  z-index: 1031;
  min-width: 220px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--rule-2);
  border-radius: var(--coin-l);
  flex-direction: column;
  gap: 1px;
}
.wb-rail-sous::before { content: ""; position: absolute; top: 0; bottom: 0; left: -9px; width: 9px; }
.wb-rail-groupe:hover > .wb-rail-sous,
.wb-rail-groupe:focus-within > .wb-rail-sous { display: flex; }
/* Sous l'espace (Réglages), le volant s'ouvre vers le haut : vers le bas, il passait sous l'écran,
   la page gagnait un ascenseur, le survol se perdait et le volant clignotait. */
.wb-rail-espace ~ .wb-rail-groupe > .wb-rail-sous { top: auto; bottom: -6px; }
.wb-rail-sous-titre { padding: 4px 10px 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.wb-rail-sous-item {
  padding: 5px 10px;
  border-radius: 6px;
  color: var(--ink-2);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.wb-rail-sous-item:hover { background: var(--wash); color: var(--ink); text-decoration: none; }
.wb-rail-sous-item.wb-actif { background: var(--acc-w); color: var(--ink); font-weight: 600; }
.wb-rail-sous-item.wb-a-venir { color: var(--ink-3); cursor: default; }
.wb-rail-sous-item.wb-a-venir:hover { background: none; }

/* Déplié : les écrans de la section active sous elle, les autres en volant. */
.wb-menu-deplie .wb-rail-groupe.wb-actif > .wb-rail-sous {
  display: flex;
  position: static;
  min-width: 0;
  padding: 2px 0 6px;
  background: none;
  border: 0;
}
.wb-menu-deplie .wb-rail-groupe.wb-actif .wb-rail-sous-titre { display: none; }
.wb-menu-deplie .wb-rail-groupe.wb-actif .wb-rail-sous-item { padding: 4px 10px 4px 38px; }
/* La touche se cale à droite ; si le libellé ne lui laisse pas la place, elle passe à la ligne,
   masquée : le volet garde sa largeur et le raccourci reste dans l'infobulle. */
.wb-menu-deplie .wb-rail-groupe.wb-actif .wb-rail-sous-item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 6px;
  height: 29px; overflow: hidden; }
.wb-menu-deplie .wb-rail-groupe.wb-actif .wb-rail-sous-item .wb-hint { margin-left: auto; }
.wb-menu-deplie .wb-rail-groupe.wb-actif .wb-rail-sous-item.wb-actif { background: var(--panel); }

.wb-rail-recherche { cursor: text; }
.wb-menu-deplie .wb-rail-recherche { border: 1px solid var(--rule-2); background: var(--panel); color: var(--ink-3); margin-bottom: 6px; }
.wb-rail-plier .bi { transition: transform .18s; }
.wb-menu-deplie .wb-rail-plier .bi { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .wb-rail-plier .bi { transition: none; } }

.wb-rail .dropdown-menu { margin-left: 6px !important; }
.wb-notif-count {
  min-width: 20px;
  padding: 0 .3rem;
  border: 1px solid var(--rule-2);
  border-radius: 8px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.wb-notif-count-actif { border-color: var(--marque); background: var(--marque); color: #fff; }
.wb-main { min-width: 0; overflow-x: clip; }

/* La barre de page (A2 « outils ») : un panneau blanc sous un filet, de bord à
   bord ; le fond déborde à droite d'une page plafonnée. */
.wb-pagebar {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  position: relative;
  isolation: isolate;
  margin: 0 -1rem .9rem;
  padding: 14px 1rem 8px;
}
.wb-pagebar::before {
  content: "";
  position: absolute;
  inset: 0 -100vw 0 0;
  z-index: -1;
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
}
.wb-pagebar:has(> .wb-onglets) { padding-bottom: 0; }
.wb-pagebar > .wb-onglets { border-bottom: 0; margin-top: 0; }
.wb-page-header h1 { font-size: var(--t-titre); font-weight: 600; letter-spacing: -.005em; }
/* Un écran qui porte sa propre manchette (tableau de bord, fiche) n'a pas de bande. */
.wb-pagebar:not(:has(h1, .wb-onglets)) { padding-block: 0; margin-bottom: 0; }
.wb-pagebar:not(:has(h1, .wb-onglets))::before { content: none; }

/* ══ Le plafond du contenu ══
   Largeur fixe, densité variable, aligné à gauche. Manchette et navigation sont
   hors de `.wb-page` et restent pleine largeur. */
.wb-page { max-width: 110rem; }

/* Un volet ouvert s'ajoute au plafond au lieu de le rogner ; `hidden` reste le seul pilote.
   `.wb-page--pleine` est exclue (`:has()` pèse plus qu'elle) ; entre ces trois règles
   de même poids, la plus précise s'écrit en dernier. */
.wb-page:not(.wb-page--pleine):has(.wb-maitre-detail > .wb-detail:not([hidden])) {
  max-width: calc(110rem + 380px + 1rem);
}
.wb-page:not(.wb-page--pleine):has(.wb-maitre-detail > .wb-detail--saisie:not([hidden])) {
  max-width: calc(110rem + 40rem + 1rem);
}
.wb-page:not(.wb-page--pleine):has(.wb-maitre-detail--comparaison > .wb-detail:not([hidden])) {
  max-width: calc(110rem + 44rem + 1rem);
}

/* Pleine largeur seulement sur déclaration de la route (`pleineLargeur: true`),
   pour un écran à axe comme le planning ; un formulaire, jamais. */
.wb-page--pleine { max-width: none; }

/* ── La poignée de rangement d'une liste ordonnée ──
   `touch-action: none` est indispensable : sans lui, le glisser tactile fait défiler la page. */
.wb-clc-poignee {
  cursor: grab;
  touch-action: none;
  display: inline-block;
  padding: 0 .25rem;
}
.wb-clc-poignee:active { cursor: grabbing; }

/* ── Impression : chrome masqué, papier blanc, encre noire ──
   Chaque écran ajoute son propre @media print par-dessus. */
@media print {
  nav,
  .btn,
  .dropdown-menu,
  .modal-backdrop {
    display: none !important;
  }
  /* Sans chrome, le contenu prend toute la feuille : le rail masqué laisserait sa colonne à la page. */
  .wb-shell { display: block; }
  .wb-main { padding-top: 0 !important; }
  body {
    background: #fff;
    color: #000;
    font-size: 12px;
  }
  .table > thead th { border-bottom-color: #000; }
}

/* ══ L'harmonie du balisage : un composant par rôle, nommé par ce qu'il fait ══ */

/* Le bloc de code : lavis et filet, ni coin ni ombre ; sert les réglages et l'aide. */
.wb-code {
  font-family: var(--fonte-mono);
  font-size: 12px;
  background: var(--wash);
  border: 1px solid var(--rule);
  padding: .5rem .75rem;
  margin: 0;
  overflow-x: auto;
}

/* La zone de dépôt : filet `--rule-2`, car un pointillé du filet clair ne se voit
   pas sur le papier. Elle ne s'encre que quand un fichier la survole. */
.wb-depot {
  display: block;
  border: 1px dashed var(--rule-2);
  background: var(--paper);
  padding: 1.25rem 1rem;
  text-align: center;
  cursor: pointer;
}
.wb-depot--actif {
  border-color: var(--acc);
  background: var(--wash);
}
/* Un `.visually-hidden` est absolu : sans ancêtre positionné, il échappe au défilement d'un tableau et élargit la page. */
.table-responsive { position: relative; }
/* Le champ de fichier est `visually-hidden`, dans la zone : le focus clavier se dessine sur elle. */
.wb-depot:has(.visually-hidden:focus-visible) {
  outline: 2px solid var(--acc);
  outline-offset: 1px;
}

/* Sélection en cours dans une rangée de cartes (pendant de `.wb-registre-ligne--choisie`) :
   encre de l'actif, jamais d'accent. */
.wb-choisi {
  border-color: var(--actif);
  background: var(--actif-w);
}

/* ══ Survol de ligne : pour toute `.table`, par `--bs-table-bg-state` ══
   Un `background` passerait devant la rayure et l'alerte ; une ligne d'alerte garde
   son lavis sous le pointeur. Ni la tête ni le pied ne se survolent. */
.table > tbody > tr:hover > * {
  --bs-table-bg-state: var(--bs-table-hover-bg);
}
.table > tbody > tr.alerte:hover > td,
.table > tbody > tr.table-danger:hover > td {
  --bs-table-bg-state: var(--red-w);
}

/* Le compte que porte un bouton choisi prend la couleur du bouton. */
.btn-check:checked + .btn .wb-compte,
.btn.active .wb-compte,
.btn[aria-pressed="true"] .wb-compte,
.btn-primary .wb-compte {
  color: inherit;
}

/* ── L'annonce des touches d'une file (`js/file-fiches.js`) : encre et espacement au socle ──
   `baseline` : la touche dessinée et son mot posent sur la même ligne de base.
   La marge basse reste à l'hôte. */
.wb-file-touches {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem 1rem;
  color: var(--ink-2);
}

/* ── Une classe de charte par rôle d'encre, à la place des `text-*` de Bootstrap ──
   Dans une cellule, la couleur passe par `--bs-table-color-state` : la règle de
   cellule de Bootstrap (0,1,1) bat une classe simple. Le secondaire reste `text-body-secondary`. */
.wb-encre-rouge {
  color: var(--red);
  --bs-table-color-state: var(--red);
}
.wb-encre-ok {
  color: var(--etat-ok);
  --bs-table-color-state: var(--etat-ok);
}
.wb-encre-att {
  color: var(--etat-attention);
  --bs-table-color-state: var(--etat-attention);
}
/* Sur un bouton-lien, l'encre tient au survol (`.btn:hover` pèse 0,2,0) : un geste
   destructif ne perd pas sa couleur juste avant le clic. */
.btn.wb-encre-rouge {
  --bs-btn-color: var(--red);
  --bs-btn-hover-color: var(--red);
  --bs-btn-active-color: var(--red);
}

/* Un champ fait 14 px ; une autre taille se demande par `--taille-champ`, jamais par `form-control-lg`. */
.form-control-sm { --taille-champ: .875rem; }
input:not([type=radio]):not([type=checkbox]) {
  font-size: var(--taille-champ, 14px);
}

/* Les colonnes s'étirent pour que le filet de l'index coure sur toute la hauteur du dossier. */
.wb-fiche-corps { align-items: stretch; }

/* Bootstrap éteint l'outline de `.form-control:focus` (0,2,0) : même poids ici, l'ordre
   rend le trait de focus. La bordure d'encre reste ; un `<style>` d'écran rendu après reste maître. */
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 1px;
}

/* Réglages (gabarit E) : les pages en liste à gauche, groupées par famille
   (`App\PageBar::onglets()`), le formulaire en haut à droite. La barre de page se
   fond dans la grille ; son titre garde la bande blanche. */
.wb-page:has(> .wb-pagebar > .wb-onglets--familles) {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  column-gap: var(--e6);
  align-items: start;
}
.wb-page:has(> .wb-pagebar > .wb-onglets--familles) > .wb-pagebar { display: contents; }
.wb-page:has(> .wb-pagebar > .wb-onglets--familles) > .wb-pagebar::before { content: none; }
.wb-page:has(> .wb-pagebar > .wb-onglets--familles) > .wb-pagebar > .wb-page-header {
  grid-column: 1 / -1;
  position: relative;
  isolation: isolate;
  margin: 0 -1rem var(--e4) !important;
  padding: 14px 1rem 12px;
}
.wb-page:has(> .wb-pagebar > .wb-onglets--familles) > .wb-pagebar > .wb-page-header::before {
  content: "";
  position: absolute;
  inset: 0 -100vw 0 0;
  z-index: -1;
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
}
.wb-page:has(> .wb-pagebar > .wb-onglets--familles) > :not(.wb-pagebar),
.wb-page:has(> .wb-pagebar > .wb-onglets--familles) > .wb-pagebar > .wb-retour { grid-column: 2; min-width: 0; }
.wb-onglets.wb-onglets--familles {
  grid-column: 1;
  grid-row: 2 / span 20;
  position: sticky;
  top: var(--e4);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  display: grid;
  gap: var(--e4);
  align-content: start;
  border: 0;
  margin: 0;
}
.wb-onglets-ligne { display: grid; gap: 1px; }
.wb-onglets-famille {
  padding: 0 10px 4px;
  font-size: var(--t-rubrique);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.wb-onglets--familles .wb-onglet {
  padding: 5px 10px;
  border: 0;
  border-radius: var(--coin);
  margin: 0;
  font-size: 14px;
  color: var(--ink);
  white-space: normal;
}
.wb-onglets--familles .wb-onglet:hover { background: var(--wash); text-decoration: none; }
.wb-onglets--familles .wb-onglet.actif { background: var(--acc-w); color: var(--acc); font-weight: 600; }
/* Un formulaire de réglages sans carte est lui-même la feuille. */
.wb-page:has(> .wb-pagebar > .wb-onglets--familles) .wb-fiche-bornee:not(:has(.card)) {
  padding: var(--e4) var(--e5);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--coin-l);
}
@media (max-width: 767.98px) {
  .wb-page:has(> .wb-pagebar > .wb-onglets--familles) { grid-template-columns: minmax(0, 1fr); }
  .wb-page:has(> .wb-pagebar > .wb-onglets--familles) > :not(.wb-pagebar),
  .wb-page:has(> .wb-pagebar > .wb-onglets--familles) > .wb-pagebar > .wb-retour { grid-column: 1; }
  .wb-onglets.wb-onglets--familles { grid-row: auto; position: static; max-height: none; margin-bottom: var(--e4); }
}

/* ══ Contrôles ══ */

/* Bootstrap éteint l'outline du bouton et de la case à 0,2,0 : le trait de focus se rétablit à ce poids.
   `.btn-check` cache son input : c'est le `.btn` suivant (son label) qui porte le trait. */
.btn:focus-visible,
.btn-check:focus-visible + .btn,
.form-check-input:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 1px;
}

/* Bootstrap écrit en dur le bleu de la case cochée : elle passe à l'encre (« ceci vaut »), le rouge reste à ce qui refuse.
   Au focus, pas de halo : le trait de :focus-visible suffit. */
.form-check-input:checked {
  background-color: var(--acc);
  border-color: var(--acc);
}
.form-check-input:focus {
  border-color: var(--ink-2);
  box-shadow: none;
}

/* Bouton, liste, aide et zone de texte à la taille du champ (--taille-champ, repli .875rem, celle de .btn-sm).
   Le bouton passe par --bs-btn-font-size, que .btn-sm redéclare. */
.btn { --bs-btn-font-size: var(--taille-champ, .875rem); }
.form-select,
.input-group-text,
textarea.form-control {
  font-size: var(--taille-champ, .875rem);
}

/* Dans une barre flex, width: 100% réclamerait toute la page : un critère prend la largeur de ce qu'il montre.
   Une largeur en ligne posée par l'écran reste maîtresse. */
.wb-outils .form-control,
.wb-outils .form-select { width: auto; }

/* Les onglets .nav-tabs soulignent comme les autres barres : filet du bas, 2 px rouges sous l'onglet ouvert.
   Tout passe par les jetons de Bootstrap, seule façon de n'allumer que le bas sans alourdir le sélecteur. */
.nav-tabs {
  --bs-nav-tabs-border-color: var(--rule);
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-color: var(--ink);
  --bs-nav-tabs-link-active-border-color: transparent transparent var(--acc);
  --bs-nav-tabs-link-hover-border-color: transparent;
  --bs-nav-link-color: var(--ink-3);
  --bs-nav-link-hover-color: var(--ink);
}
.nav-tabs .nav-link { border-width: 0 0 2px; }
.nav-tabs .nav-link.active { font-weight: 600; }

/* ══ Grilles (Tabulator) ══
   Le thème Bootstrap de Tabulator vient du CDN : chaque règle reprend le poids de celle qu'elle corrige. */

/* La grille suit la taille de sa page (le thème impose 16 px) ; chiffres tabulaires pour comparer une colonne. */
.tabulator {
  font-size: inherit;
  font-variant-numeric: tabular-nums;
}

/* La grille est une feuille : filet, coin 8, fond blanc ; ni filet vertical ni rayure. */
.tabulator.tabulator {
  border: 1px solid var(--rule);
  border-radius: var(--coin-l);
  background: var(--panel);
  color: var(--ink);
  overflow: hidden;
}

/* Le titre de colonne a la forme du libellé réglé des tableaux (0,5,0 bat le thème Tabulator). */
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
  font-size: var(--t-second);
  font-weight: 600;
  color: var(--ink-3);
}

/* La tête est sur le fond de page, comme celle d'un `.table`. */
.tabulator .tabulator-header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.tabulator .tabulator-header .tabulator-col {
  background: var(--paper);
  border-right: 0;
  box-shadow: none;
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
  padding: 8px 10px;
}
/* Le tri ne se montre que sur la colonne triée. */
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter { opacity: .45; }
.tabulator .tabulator-header .tabulator-col[aria-sort="none"] .tabulator-col-sorter { display: none; }
/* Les filtres de colonne restent fermés jusqu'à Filtres (F) : `js/grille.js` retire la classe. */
.wb-dt-filtres-fermes .tabulator-header-filter { display: none; }

/* Le filtre d'en-tête prend la fonte de la grille, sans l'habit .form-control du thème ni son bleu au focus. */
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input,
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter select {
  font-size: inherit;
  line-height: 1.3;
  padding: 2px 4px;
  border: 1px solid var(--rule-2);
  border-radius: var(--bs-border-radius-sm);
  color: var(--ink);
  background-color: var(--paper);
}
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input:focus,
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter select:focus {
  border-color: var(--ink-2);
  box-shadow: none;
}
/* Bootstrap et le thème éteignent l'outline du filtre à 0,4,0 : le trait de focus se rétablit à ce poids. */
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input:focus-visible,
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter select:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 1px;
}

/* Dans une grille, un lien se reconnaît à sa colonne et à son curseur : ni couleur ni soulignement. */
.tabulator .tabulator-row .wb-dt-lien-page,
.tabulator .tabulator-row .wb-entity-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* Le pied : les pages, sans « première » ni « dernière » ; la page ouverte en lavis
   d'accent, comme tout choix exclusif. */
.tabulator .tabulator-footer {
  background: var(--panel);
  border-top: 1px solid var(--rule);
  color: var(--ink);
  font-weight: 400;
  font-size: inherit;
}
/* Le retrait va au bandeau de pagination, pas au pied : la ligne des totaux reste alignée sur ses colonnes. */
.tabulator .tabulator-footer .tabulator-footer-contents { padding: 6px 10px; }
.tabulator .tabulator-footer .tabulator-page[data-page=first],
.tabulator .tabulator-footer .tabulator-page[data-page=last] { display: none; }
.tabulator .tabulator-footer label,
.tabulator .tabulator-footer .tabulator-page-counter {
  font-size: inherit;
  font-weight: 400;
}
.tabulator .tabulator-footer .tabulator-page-size {
  border: 1px solid var(--rule-2);
  border-radius: var(--coin);
  background: var(--panel);
  color: var(--ink);
  font-size: inherit;
  padding: 2px 8px;
}
.tabulator .tabulator-footer .tabulator-page {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  margin: 0 1px;
  border: 1px solid transparent;
  border-radius: var(--coin);
  background: none;
  color: var(--ink-2);
  font-size: inherit;
}
.tabulator .tabulator-footer .tabulator-page:not(disabled):hover {
  background: var(--wash);
  color: var(--ink);
}
.tabulator .tabulator-footer .tabulator-page.active,
.tabulator .tabulator-footer .tabulator-page.active:not(disabled):hover {
  background: var(--acc-w);
  border-color: var(--acc);
  color: var(--acc);
  font-weight: 600;
}
.tabulator .tabulator-footer .tabulator-page:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 1px;
}

/* La recherche cède sa largeur avant que la barre ne passe à la ligne (volet ouvert). */
.wb-dt-recherche {
  flex: 1 1 12rem;
  max-width: 22rem;
}

/* L'état vide est une phrase (wbEtat.vide) : texte courant, encre secondaire. */
.tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents {
  color: var(--ink-3);
  font-size: inherit;
  font-weight: 400;
}

/* L'attente est une phrase sur le papier (wbEtat.chargement), pas une boîte sur un voile sombre. */
.tabulator .tabulator-alert {
  background: var(--paper);
}
.tabulator .tabulator-alert .tabulator-alert-msg,
.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-msg {
  background: transparent;
  border: 0;
  border-radius: var(--coin);
  font-size: inherit;
  font-weight: 400;
  color: var(--ink-3);
}
/* L'échec prend le rouge de la charte. */
.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-error {
  border: 0;
  color: var(--red);
}

/* La grille s'arrête où s'arrêtent ses colonnes, sans descendre sous 1400 px (une grille de quelques colonnes reste lisible sur iMac) ; max-width garde le défilement horizontal des grilles larges. */
.tabulator.tabulator {
  width: fit-content;
  min-width: min(100%, 1400px);
  max-width: 100%;
}

/* Sauf en fitColumns, où les colonnes se partagent la largeur du cadre (sinon elles tombent à leur minimum). */
.tabulator.tabulator[tabulator-layout="fitColumns"] {
  width: auto;
  max-width: min(100%, 2400px);
}

/* Sur l'encre, un filet clair sépare Filtres de son ✕. */
.wb-dt-filtres > .btn-primary + .btn-primary {
  border-left-color: color-mix(in srgb, var(--paper) 45%, transparent);
}
/* Filtres garde ses coins tant que son ✕ est masqué. */
.wb-dt-filtres > .btn:has(+ .btn.d-none) {
  border-top-right-radius: var(--bs-btn-border-radius);
  border-bottom-right-radius: var(--bs-btn-border-radius);
}

/* Cellules centrées sur la hauteur de la ligne ; align-content garde l'ellipse que display: flex perdrait.
   Une ligne de véhicule (cellule sur deux lignes) reste alignée en haut. */
.tabulator .tabulator-row:not(.tabulator-group) {
  display: flex;
}
/* Titre de groupe (`groupe` du registre) : la fiche, son libellé, le compte, le montant à droite. */
.tabulator .tabulator-row.tabulator-group {
  background: var(--wash);
  border-bottom: 1px solid var(--rule-2);
  font-weight: 500;
  padding: 6px 10px;
}
/* Le thème grave en dur le trait gris, la flèche et le pied : ils prennent les jetons. */
.tabulator .tabulator-row.tabulator-group {
  border-top: 0;
  border-right: 0;
}
.tabulator-row.tabulator-group .tabulator-arrow { border-left-color: var(--ink-3); }
.tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow {
  border-left-color: transparent;
  border-top-color: var(--ink-3);
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow { border-bottom-color: var(--ink-3); }
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow { border-top-color: var(--ink-3); }
.tabulator .tabulator-footer .tabulator-calcs-holder,
.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row {
  background: var(--paper) !important;
  border-color: var(--rule);
}
.wb-dt-groupe-n { color: var(--ink-2); font-weight: 400; }
.wb-dt-groupe-montant { float: right; font-variant-numeric: tabular-nums; }
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell {
  flex: none;
  height: auto !important;
  align-content: center;
  padding: 8px 10px;
  border-right: 0;
}
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row:has(.wb-vehicule-cell) .tabulator-cell {
  align-content: start;
}
/* L'en-tête figé couvre les titres qui défilent dessous (transparent, il les montrait). */
.tabulator .tabulator-header .tabulator-col.tabulator-frozen {
  background: var(--wash);
}

/* Chromium rend focalisable le corps défilant (parcours aux flèches, à garder) : il lui faut un trait.
   Trait rentrant (-1px), sinon il doublerait le filet du cadre. */
.tabulator .tabulator-tableholder:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: -1px;
}

/* ══ Calendriers (event-calendar) ══
   Le moteur vendorisé s'habille par ses propres variables ; coin, ombre et fonte sont repris nommément. */

/* Jetons sur .ec, où le bundle les pose ; doublé (.ec.ec) car sa feuille, chargée par la page, vient après celle-ci.
   Les feuilles d'écran, chargées ensuite, restent maîtresses de leurs teintes. */
.ec.ec {
  --ec-bg-color: var(--panel);
  --ec-text-color: var(--ink);
  --ec-border-color: var(--rule);

  /* Aujourd'hui et le jour férié reprennent les repères de la charte (--repere-*). */
  --ec-today-bg-color: var(--repere-aujourdhui-w);
  --ec-highlight-color: var(--repere-ferie-w);

  /* L'événement sans couleur est un bloc de registre (lavis, encre), comme une barre de location. */
  --ec-event-bg-color: var(--wash);
  --ec-event-text-color: var(--ink);
  --ec-bg-event-color: var(--rule-2);

  /* La ligne « maintenant » est le rouge, comme tout ce qui alerte. */
  --ec-now-indicator-color: var(--red);

  --ec-button-bg-color: var(--panel);
  --ec-button-border-color: var(--rule-2);
  --ec-button-text-color: var(--ink);
  --ec-button-active-bg-color: var(--ink);
  --ec-button-active-border-color: var(--ink);
  --ec-button-active-text-color: var(--paper);
  --ec-popup-bg-color: var(--panel);
}

/* Ni coin ni ombre sur une pastille ; la taille suit la page (le bundle écrit .85em et 1rem). */
.ec .ec-event,
.ec .ec-event.ec-start-clipped,
.ec .ec-event.ec-end-clipped,
.ec .ec-event-tag,
.ec .ec-button {
  border-radius: var(--coin);
}
.ec .ec-event {
  box-shadow: none;
  font-size: inherit;
  font-family: var(--fonte);
}
.ec .ec-event-title,
.ec .ec-event-time {
  font-size: inherit;
}

/* La grille du mois : en-tête, quantième, mois voisin.
   Vaut pour les trois calendriers du moteur : livraisons, absences, locations. */
.ec .ec-col-head,
.ec .ec-col-head > * {
  font-family: var(--fonte-mono);
  font-size: 12px;
  font-weight: 600;


  text-align: left;
  color: var(--ink-2);
}
.ec.ec.ec-day-grid.ec-month-view { --ec-bg-color: var(--paper); }

/* Le quantième est une donnée : monospacé, encre pleine, en haut à gauche (le moteur le pose à droite). */
.ec .ec-day-head,
.ec .ec-day-head time {
  font-family: var(--fonte-mono);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ec.ec-day-grid.ec-month-view .ec-day-head {
  flex-direction: row;
  padding: .3rem .4rem 0;
}
.ec .ec-day.ec-other-month { --ec-day-bg-color: var(--wash); }
.ec .ec-day.ec-other-month .ec-day-head time {
  opacity: 1;
  color: var(--ink-3);
}

/* « + N livraisons » (`moreLinkContent`) se lit comme un compte d'heures ; son volet n'a ni coin ni ombre. */
.ec .ec-day-foot {
  font-family: var(--fonte-mono);
  font-size: 12px;
  text-align: right;
  padding: .2rem .4rem;
}
.ec .ec-day-foot,
.ec .ec-day-foot a { color: var(--ink-3); }
.ec.ec .ec-popup {
  border-radius: var(--bs-border-radius-lg);
  box-shadow: none;
  border-color: var(--rule-2);
}

/* ── Les deux lignes d'une livraison ─────────────────────────────────────
   Client et heure, puis véhicule et collaborateur (`.lc-ev`, `js/livraisons.js`). */
.wb-fj-l1 { display: flex; justify-content: space-between; gap: .4rem;
  align-items: baseline; min-width: 0; }
.wb-fj-cli { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-fj-h { font-family: var(--fonte-mono); font-size: 12px; color: var(--ink-2);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.wb-fj-l2 { display: flex; justify-content: space-between; gap: .4rem; min-width: 0;
  font-family: var(--fonte-mono); font-size: 12px; color: var(--ink-2); }
.wb-fj-veh { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-fj-quand { color: var(--ink-3); white-space: nowrap; }

/* L'heure de la marge est monospacée : une colonne d'heures doit s'aligner. */
.ec .ec-sidebar .ec-slot,
.ec .ec-slots .ec-slot,
.ec .ec-time {
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

/* Une touche qui suit le libellé d'un lien ou d'un bouton : un écart fixe, ici seulement.
   L'espace du balisage ne compte pas (il se perd en flex et s'ajoutait aux marges). */
:is(a, button) > :is(kbd, .wb-hint) { margin-left: 6px; }

/* .form-text est relative (.875em) et se composerait avec .small : elle hérite, ce qui rend la même taille. */
.small .form-text,
small .form-text {
  font-size: inherit;
}

/* Au focus, Bootstrap peint en bleu le bouton de l'interrupteur dans une URL de données, hors de portée des jetons.
   La couleur est --ink-2 recopiée en dur (%234E555B), url() ne lisant pas var().
   :not(:checked) est indispensable : sinon le bouton blanc d'un interrupteur allumé deviendrait invisible. */
.form-switch .form-check-input:focus:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%234E555B'/%3e%3c/svg%3e");
}

/* Bootstrap écrit le coin de .btn-close en dur, hors de --bs-border-radius. */
.btn-close { border-radius: var(--coin); }

/* Bootstrap éteint l'outline de .form-control-plaintext à 0,2,0 : le trait se rétablit.
   Un champ en lecture seule reste un arrêt de tabulation (lire, copier). */
.form-control-plaintext:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 1px;
}

/* ══ Chiffres et impression ══ */

/* Le pied d'un tableau : le total, en gras sous un filet. */
.table > tfoot > tr > * {
  padding: 7px 10px;
  font-weight: 600;
  border-top: 1px solid var(--rule-2);
  border-bottom: 0;
}

/* Bootstrap grave en dur le fond de .table-warning : la ligne prend le lavis d'attention de la charte. */
.table > tbody .table-warning > td {
  background: var(--etat-attention-w);
}

/* Le fond d'une tête collée passe par --bs-table-bg, la variable que lit Bootstrap : ni poids ni ordre à gagner.
   En border-collapse, la bordure reste avec le tableau : le filet est un dégradé d'un pixel sur la cellule.
   `to top` et non `to bottom` : la première bande part du bord nommé. */
.table > thead.sticky-top > tr > th {
  --bs-table-bg: var(--paper);
  border-bottom: 0;
  background-image: linear-gradient(to top, var(--rule) 1px, transparent 1px);
}

/* sticky-top pose z-index 1020, au-dessus des menus déroulants : 2 suffit pour couvrir les cellules. */
.table > thead.sticky-top {
  z-index: 2;
}

/* À l'impression, la bordure revient : les fonds, donc le dégradé, ne s'impriment pas. */
@media print {
  .table > thead.sticky-top > tr > th {
    border-bottom: 1px solid #000;
    background-image: none;
  }
}

/* À l'impression : papier blanc, encre noire. */
@media print {
  body.wb-modern {
    background-color: #fff;
    color: #000;
  }

  /* Une ligne ne se coupe pas entre deux pages (la ligne, pas le tableau, qui ne tiendrait sur aucune feuille).
     Le pied de total se range à la fin plutôt qu'au bas de chaque page. */
  .table > tbody > tr { break-inside: avoid; }
  .table > tfoot { display: table-footer-group; }

  /* La feuille d'impression de Bootstrap souligne a:not(.btn) : pas de soulignement dans une grille. */
  .table a:not(.btn) { text-decoration: none; }

  /* Les critères s'impriment comme valeurs, pas comme contrôles : la période reste, le widget part. */
  .wb-outils { border-bottom: 0; }
  .wb-outils .form-control,
  .wb-outils .form-select {
    border: 0;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
    appearance: none;
  }
  .wb-outils select,
  .wb-outils input[type="date"]::-webkit-calendar-picker-indicator {
    background-image: none;
  }
}

/* .table-light, -secondary et -warning gravent fond et texte en dur et battent le --bs-table-bg de .table :
   les variantes employées sont reprises sur les jetons de la charte. */
.table-light,
.table-secondary {
  --bs-table-bg: var(--wash);
  --bs-table-color: var(--ink);
  --bs-table-border-color: var(--rule);
  --bs-table-striped-bg: var(--wash);
  --bs-table-hover-bg: var(--wash);
  color: var(--ink);
  border-color: var(--rule);
}
.table-warning {
  --bs-table-bg: var(--etat-attention-w);
  --bs-table-color: var(--ink);
  --bs-table-border-color: var(--rule);
  --bs-table-striped-bg: var(--etat-attention-w);
  --bs-table-hover-bg: var(--etat-attention-w);
  color: var(--ink);
  border-color: var(--rule);
}
.table {
  --bs-table-active-bg: var(--wash);
  --bs-table-active-color: var(--ink);
}

/* Une cellule text-end est un nombre : chiffres tabulaires. La règle suit la déclaration de l'écran, pas le contenu. */
.table > thead th.text-end,
.table > tbody td.text-end,
.table > tfoot td.text-end { font-variant-numeric: tabular-nums; }

/* .form-check-input fait 1em et rétrécirait avec son bloc (en-tête, .small) : la case garde la taille du corps. */
.form-check-input { font-size: var(--bs-body-font-size); }

/* Bootstrap remplace l'outline par un halo bleu sur .nav-link, .accordion-button et .btn-close : trait de la charte. */
.nav-link:focus-visible,
.accordion-button:focus-visible,
.btn-close:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 1px;
  box-shadow: none;
}

/* Le filet du haut de l'en-tête de grille au filet de la charte. */
.tabulator .tabulator-header { border-top-color: var(--rule); }

/* Une progression n'est pas un succès : elle avance à l'encre, sur le lavis. */
.progress,
.progress-stacked {
  --bs-progress-bg: var(--wash);
  --bs-progress-bar-bg: var(--ink);
  --bs-progress-border-radius: var(--coin-s);
  --bs-progress-box-shadow: none;
  --bs-progress-bar-color: var(--paper);
}

/* L'accordéon prend les jetons de la charte au lieu du décor bleu de Bootstrap. */
.accordion {
  --bs-accordion-border-color: var(--rule);
  --bs-accordion-border-radius: var(--bs-border-radius-lg);
  --bs-accordion-inner-border-radius: calc(var(--bs-border-radius-lg) - 1px);
  --bs-accordion-bg: var(--panel);
  --bs-accordion-color: var(--ink);
  --bs-accordion-btn-color: var(--ink);
  --bs-accordion-btn-bg: var(--wash);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-bg: var(--wash);
  --bs-accordion-active-color: var(--ink);
}
/* Son en-tête est un <h2> sans classe : il ne prend pas l'échelle de titre. */
.accordion-header { font-size: inherit; margin-bottom: 0; }
.accordion-button { font-size: var(--bs-body-font-size); box-shadow: none; }

/* ── Tableau écrit à la main dont la ligne ouvre ──────────────────────────
   Marque sur le conteneur (wbFile.tableau()), car le corps se refabrique à chaque recherche.
   Ni fond ni pastille : la main au survol, le trait au clavier, comme les grilles. */
.wb-dt-lignes-ouvrables tbody tr { cursor: pointer; }
.wb-dt-lignes-ouvrables tbody tr:focus-visible {
  outline: 2px solid var(--actif, currentColor);
  outline-offset: -2px;
}

/* Le carré de couleur d'une fiche porte la teinte elle-même : ni ombre ni fond, un filet pour les teintes claires.
   La palette vient de WB_COULEURS_PASTILLES (lib/couleur_normalisation.inc.php). */
.wb-couleur-carre {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
  min-height: 1rem;
}
.wb-couleur-carre .wb-pastille {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  border-radius: var(--coin-s);
  box-shadow: none;
  border: 1px solid var(--rule);
  vertical-align: middle;
}
/* Une teinte DÉDUITE du code ne se lit pas comme une teinte SAISIE : filet
   esquissé, teinte inchangée — c'est son statut qui change, pas sa couleur. */
.wb-couleur-carre .wb-pastille-deduite { border-style: dashed; }

/* ── Prise en charge par un tiers (`js/prise-en-charge.js`) ──
   Sans dossier, le bloc n'est qu'un bouton-lien : filet de gauche, ni fond, ni coin, ni ombre. */
.wb-pec-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem;
  border-left: 2px solid var(--rule);
  padding-left: .5rem;
}
.wb-pec-ligne:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}
.wb-pec-form {
  border-top: 1px solid var(--rule);
  padding-top: .5rem;
}

/* ── Aide en ligne ── */

/* Le sujet ouvert porte le filet d'encre de la ligne choisie, jamais un fond.
   Filet transparent sur toutes les lignes : ouvrir un sujet ne décale pas les autres. */
.wb-aide-autres > li > a { border-left: 3px solid transparent; padding-left: .5rem; }
.wb-aide-autres > li > a.wb-aide-ouvert { border-left-color: var(--acc); font-weight: 600; }

/* Rendu du texte d'aide ; la largeur de lecture reste celle de `.wb-lecture`, ne pas la redéclarer. */
.wb-aide-corps h2.wb-aide-titre { font-size: 1.05rem; font-weight: 600; margin: 1.75rem 0 .6rem; }
.wb-aide-corps h3.wb-aide-titre { font-size: .95rem; font-weight: 600; margin: 1.25rem 0 .5rem; }
.wb-aide-corps h2.wb-aide-titre:first-child,
.wb-aide-corps h3.wb-aide-titre:first-child { margin-top: 0; }
.wb-aide-corps p, .wb-aide-corps li { font-size: .9rem; line-height: 1.6; }
/* Fenêtre « ? » : les sujets de l'écran et toute l'aide, sur une ligne. */
.wb-aide-liens { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); margin: 0 0 var(--e4); }
/* L'explication d'un écran ne s'affiche pas : la fenêtre « ? » la reprend sous « À savoir ». */
.wb-explication { display: none; }
/* Bootstrap ne dégage la légende flottante que pour son voisin direct : masquée, l'explication le laissait au
   suivant, et un bloc `overflow` (`.table-responsive`) se calait à côté de la légende, large de zéro. */
legend + .wb-explication + *,
legend + .form-text + * { clear: left; }  /* même piège : l'aide masquée hors focus (`reglage-dev`, Essai) */
.wb-aide-savoir p { margin: 0 0 var(--e2); }
.wb-aide-corps ul, .wb-aide-corps ol { padding-left: 1.25rem; }
.wb-aide-corps code { font-size: .85em; }
.wb-aide-corps .wb-aide-table { font-size: .85rem; }

/* ── Trois intentions, trois filets ──
   Refus en rouge, attention en ambre, conseil à l'accent, comme `.wb-note` ; le mot (`.lbl`)
   porte la distinction. Pas de fond : une note est du texte tenu par un filet, pas une boîte. */
.wb-aide-corps .wb-aide-encadre {
  border-left: 3px solid var(--rule);
  padding: 0 0 0 .75rem;
  margin: 1rem 0;
  font-size: .88rem;
  color: var(--ink-2);
}
.wb-aide-corps .wb-aide-encadre > .lbl { display: block; }
.wb-aide-corps .wb-aide-encadre--refus { border-left-color: var(--red); }
.wb-aide-corps .wb-aide-encadre--refus > .lbl { color: var(--red); }
.wb-aide-corps .wb-aide-encadre--attention { border-left-color: var(--etat-attention); }
.wb-aide-corps .wb-aide-encadre--conseil { border-left-color: var(--acc); }

/* ── Filtre de l'index ──
   `.card` porte `display: flex` (Bootstrap), qui bat `[hidden]` : sans cette ligne,
   les groupes filtrés laisseraient des cadres vides. */
[data-wb-aide-groupe][hidden] { display: none !important; }
/* Le champ ne prend pas la largeur de l'écran : on y tape trois lettres. */
.wb-aide-filtre > .form-control { max-width: 28rem; }

/* ── « Dans ce sujet » : le sommaire suit le défilement ──
   Comme `.wb-detail` : collé sous la manchette, borné à la hauteur restante, défilant seul. */
.wb-aide-marge {
  position: sticky;
  top: 0.5rem;
  max-height: calc(100vh - var(--h-pied) - 1rem);
  overflow-y: auto;
}
@media (max-width: 991.98px) {
  /* Sous le point de rupture, la colonne passe sous le texte : ni collée ni bornée. */
  .wb-aide-marge { position: static; max-height: none; overflow-y: visible; }
}
/* Le titre en cours de lecture porte le filet d'encre de la ligne choisie, rien d'autre. */
.wb-aide-sommaire > ul > li > a { border-left: 3px solid transparent; padding-left: .5rem; }
.wb-aide-sommaire .wb-aide-t3 > a { padding-left: 1.25rem; }
.wb-aide-sommaire > ul > li > a.wb-aide-encours {
  border-left-color: var(--acc);
  font-weight: 600;
}

/* Quittance annulée du journal de caisse : listée, barrée, hors des totaux.
   Sa trace est en `inline-block` pour que le barré de la ligne ne la traverse pas. */
.wb-quittance-annulee td { text-decoration: line-through; color: var(--ink-2); }
.wb-quittance-annulee .wb-annulee-trace { display: inline-block; text-decoration: none; }

/* ── Connexion : une carte posée sur le fond, le bouton d'entrée à l'accent. */
body.login-page {
  background: var(--paper);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.login-card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--coin-l);
  width: 100%;
  max-width: 380px;
  padding: 2rem 2rem 1.5rem;
}
.login-logo {
  display: block;
  margin: 0 auto 1.75rem;
  max-height: 34px;
  max-width: 180px;
  object-fit: contain;
}
.login-title { text-align: center; margin-bottom: 1.5rem; }
.login-surtitre {
  display: block;
  font-size: 12.5px;
  color: var(--ink-3);
  margin-bottom: .15rem;
}
.login-title strong {
  display: block;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
  font-weight: 700;
}
/* Le bouton d'entrée et la tuile d'un compte enrôlé se visent au doigt. */
.btn-login,
.pin-tile { --bs-btn-font-size: 1.125rem; }
.btn-login {
  --bs-btn-bg: var(--acc);
  --bs-btn-border-color: var(--acc);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--acc-h);
  --bs-btn-hover-border-color: var(--acc-h);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--acc-h);
  --bs-btn-active-border-color: var(--acc-h);
  --bs-btn-active-color: #fff;
  font-weight: 600;
  padding: .55rem;
}
.login-lien {
  display: block;
  text-align: center;
  margin-top: .9rem;
  font-size: 12.5px;
  color: var(--ink-2);
}
.login-version {
  text-align: center;
  font-size: 12px;
  color: var(--ink-3);
  border-top: 1px solid var(--rule);
  padding-top: .75rem;
  margin-top: 1.5rem;
}

/* ══ Planning A2 : jours en lignes, une rangée par mécanicien ══
   Maquette `docs/charte/planning-a2.html`. Le type donne le fond (`--ty-*`,
   nommé par la teinte de `atelier_types_rdv`), l'avancement remplit la pastille. */

:root {
  --ty-gris-f: #FFFFFF;   --ty-gris-b: #CDD3DB;   --ty-gris-a: #6B7480;
  --ty-orange-f: #FFE7CF; --ty-orange-b: #F2B57A; --ty-orange-a: #C2620A;
  --ty-rouge-f: #FCDDE0;  --ty-rouge-b: #EE9BA4;  --ty-rouge-a: #B4232F;
  --ty-violet-f: #ECE3FA; --ty-violet-b: #BFA8EA; --ty-violet-a: #6B46B5;
  --ty-bleu-f: #DDEBFB;   --ty-bleu-b: #9DC0EE;   --ty-bleu-a: #1F5FBF;
  --ty-vert-f: #DDF2E3;   --ty-vert-b: #9ED3AE;   --ty-vert-a: #1E7B4B;

  --av-nonrecu: #8A94A1; --av-recu: #C98A00; --av-cours: #1F5FBF;
  --av-fini: #1E7B4B; --av-paye: #9AA3AE;
  /* La barre de l'avancée du jour distingue les trois verts. */
  --av-barre-nonrecu: #D5DAE0; --av-barre-fini: #6DBB8A; --av-barre-facture: #145A36;

  --pl-chip-h: 36px; --pl-chip-w: 200px; --pl-pad: 3px; --pl-fs: 14px; --pl-fs-2: 12.5px;
}
.wb-pl.wb-pl-confort { --pl-chip-h: 58px; --pl-chip-w: 236px; --pl-pad: 5px; --pl-fs: 15px; --pl-fs-2: 13.5px; }

.wb-pl { display: flex; flex-direction: column; min-height: 0; font-variant-numeric: tabular-nums; }
.wb-pl-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--panel); border: 1px solid var(--rule); border-bottom: 0; }
.wb-pl-outils .wb-pl-droite { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.wb-pl-recherche { width: 20rem; max-width: 100%; }
.wb-pl-filtres { display: flex; flex-wrap: wrap; gap: 4px; }
.wb-pl-ftype { height: 28px; padding: 0 8px 0 6px; border-radius: 12px; border: 1px solid var(--b);
  background: var(--f); font: inherit; font-size: 13.5px; display: inline-flex; align-items: center;
  gap: 5px; cursor: pointer; color: var(--ink); }
.wb-pl-ftype i { width: 10px; height: 10px; border-radius: var(--coin-s); background: var(--a); }
.wb-pl-ftype[aria-pressed="false"] { opacity: .35; }

/* L'avancée du jour : tous les ordres d'aujourd'hui, par étape. */
.wb-pl-avancee { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 7px 12px;
  background: var(--panel); border: 1px solid var(--rule); border-bottom: 0; font-size: 13px; color: var(--ink-2); }
.wb-pl-avancee b { color: var(--ink); }
.wb-pl-av-barre { flex: 1 1 300px; display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--rule); }
.wb-pl-av-barre span { display: block; height: 100%; }
.wb-pl-av-cpt { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.wb-pl-av-cpt span { display: inline-flex; align-items: center; gap: 5px; }
.wb-pl-av-cpt i { width: 10px; height: 10px; border-radius: var(--coin-s); }
.wb-pl-av-cpt .zero { opacity: .4; }
.wb-pl-t-nonrecu { background: var(--av-barre-nonrecu); }
.wb-pl-t-recu { background: var(--av-recu); }
.wb-pl-t-cours { background: var(--av-cours); }
.wb-pl-t-fini { background: var(--av-barre-fini); }
.wb-pl-t-recupere { background: var(--av-fini); }
.wb-pl-t-facture { background: var(--av-barre-facture); }
.wb-pl-t-paye { background: var(--av-paye); }

/* La grille et le volet (`.wb-maitre-detail`) : la charte A2 donne 360 px au volet. */
.wb-pl-corps { border: 1px solid var(--rule); background: var(--panel); }
.wb-pl-defile { --pl-cols: 104px 108px minmax(0, 1fr) 86px 250px;
  overflow-y: auto; max-height: calc(100vh - 220px); position: relative; }
.wb-pl-entete, .wb-pl-jour { display: grid; grid-template-columns: var(--pl-cols); }
.wb-pl-entete { position: sticky; top: 0; z-index: 5; background: var(--paper);
  border-bottom: 1px solid var(--rule-2); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.wb-pl-entete > div { padding: 5px 8px; }
.wb-pl-jour { border-bottom: 1px solid var(--rule-2); background: var(--panel); }
.wb-pl-jour.lundi { border-top: 2px solid var(--ink); }
.wb-pl-jour.passe { background: var(--paper); }
.wb-pl-jour.auj { background: var(--repere-aujourdhui-w); }
.wb-pl-jour.ferme { background: var(--trame-indispo); }
.wb-pl-dl { grid-column: 1; padding: 6px 8px; border-right: 1px solid var(--rule);
  position: sticky; top: 27px; align-self: start; z-index: 2; }
.wb-pl-dl .j { font-weight: 700; font-size: 14.5px; }
.wb-pl-dl { cursor: pointer; }
.wb-pl-jour.sel .wb-pl-dl { box-shadow: inset 3px 0 0 var(--acc); background: var(--acc-w); }
.wb-pl-plus { display: block; margin-top: 6px; min-width: 22px; height: 22px; padding: 0 5px; line-height: 1;
  border: 1px solid var(--rule); border-radius: 4px; background: var(--panel); color: var(--acc); opacity: 0; }
.wb-pl-jour:hover .wb-pl-plus, .wb-pl-jour.sel .wb-pl-plus, .wb-pl-plus:focus-visible { opacity: 1; }
.wb-pl-plus kbd { display: none; margin-left: 4px; }
.wb-pl-jour.sel .wb-pl-plus kbd { display: inline; }
.wb-pl-plus:hover { background: var(--acc-w); }
.wb-pl-dl small { display: block; font-weight: 500; color: var(--ink-3); font-size: 12.5px; }
.wb-pl-dl .cap { margin-top: 5px; font-size: 12.5px; color: var(--ink-2); }
.wb-pl-barre { height: 5px; background: var(--rule); border-radius: 3px; overflow: hidden; margin-top: 3px; }
.wb-pl-barre span { display: block; height: 100%; background: var(--ink-3); }
.wb-pl-barre.plein span { background: var(--etat-attention); }
.wb-pl-barre.trop span { background: var(--red); }
.wb-pl-lignes { grid-column: 2 / span 3; display: grid; min-width: 0; }
.wb-pl-ligne { display: grid; grid-template-columns: 108px minmax(0, 1fr) 86px;
  border-bottom: 1px solid var(--rule); min-height: calc(var(--pl-chip-h) + 2 * var(--pl-pad)); }
.wb-pl-ligne:last-child { border-bottom: 0; }
.wb-pl-ligne.absent { background: var(--trame-indispo); }
.wb-pl-nom { padding: var(--pl-pad) 8px; font-weight: 600; font-size: 13.5px; display: flex;
  flex-direction: column; justify-content: center; border-right: 1px solid var(--rule); min-width: 0; }
.wb-pl-nom em { font-style: normal; font-weight: 400; color: var(--ink-3); font-size: 12.5px; }
.wb-pl-nom.placer { color: var(--red); }
.wb-pl-rdvs { display: flex; flex-wrap: wrap; gap: 3px; padding: var(--pl-pad) 6px; align-content: flex-start; min-width: 0; }
.wb-pl-rdvs.cible { outline: 2px dashed var(--acc); outline-offset: -3px; background: var(--acc-w); }
.wb-pl-lc { padding: var(--pl-pad) 8px; font-size: 12.5px; color: var(--ink-2);
  border-left: 1px solid var(--rule); display: flex; flex-direction: column; justify-content: center; }
.wb-pl-lc.trop { color: var(--red); font-weight: 600; }
.wb-pl-note { grid-column: 5; border-left: 1px solid var(--rule); padding: 5px 8px; min-width: 0; }

/* Les tâches du jour (`js/taches-jour.js`) : planning et Aujourd'hui. */
.wb-tj { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--ink); }
.wb-tj-tete { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.wb-tj-t { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 16px; gap: 5px; align-items: start;
  padding: 2px 3px; border-radius: 3px; line-height: 1.35; }
.wb-tj-t input[type="checkbox"] { margin: 2px 0 0; accent-color: var(--ecart-plus); }
.wb-tj-x { min-width: 0; overflow-wrap: anywhere; cursor: text; }
.wb-tj-x em { font-style: normal; font-size: 12px; color: var(--etat-attention); white-space: nowrap; }
.wb-tj-t small { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.wb-tj-t.fait .wb-tj-x { color: var(--ink-3); text-decoration: line-through; cursor: default; }
.wb-tj-t.imp { background: var(--red-w); box-shadow: inset 3px 0 0 var(--red); }
.wb-tj-t.imp .wb-tj-x { color: var(--red); font-weight: 600; }
.wb-tj-t.imp.fait { background: none; box-shadow: none; }
.wb-tj-t.imp.fait .wb-tj-x { color: var(--ink-3); font-weight: 400; }
.wb-tj-t:focus-within { outline: 2px solid var(--acc); outline-offset: -1px; }
.wb-tj-i { color: var(--acc); font-size: 13px; line-height: 1.35; text-align: center; outline: 0; }
.wb-tj-t.note .wb-tj-x { font-style: italic; color: var(--ink-2); }
.wb-tj-rec { border: 0; background: none; padding: 0 2px; min-height: 0; font: inherit; font-size: 12px; color: var(--ink-3);
  white-space: nowrap; cursor: pointer; text-decoration: none; display: inline; }
.wb-tj-rec:hover:not(:disabled) { color: var(--acc); }
.wb-tj-sup { border: 0; background: none; padding: 0; min-height: 0; width: 16px; line-height: 16px; border-radius: 3px; color: var(--ink-3);
  cursor: pointer; visibility: hidden; }
.wb-tj-t:hover .wb-tj-sup, .wb-tj-t:focus-within .wb-tj-sup { visibility: visible; }
.wb-tj-sup:hover { background: var(--red-w); color: var(--red); }
.wb-tj-edit, .wb-tj-saisie { width: 100%; min-width: 0; font: inherit; font-size: 13px; color: var(--ink); background: var(--panel);
  border: 1px solid var(--rule-2); border-radius: 4px; padding: 2px 6px; }
.wb-tj-saisie { border-style: dashed; margin-top: 2px; }
.wb-tj-saisie:focus, .wb-tj-edit:focus { border-style: solid; border-color: var(--acc); outline: 2px solid var(--acc-w); }
.wb-tj-lu { display: flex; flex-wrap: wrap; gap: 4px; font-size: 11.5px; }
.wb-tj-lu:empty { display: none; }
.wb-tj-lu span { padding: 0 7px; border-radius: 9px; background: var(--acc-w); color: var(--acc); font-weight: 600; }
.wb-tj-lu span.imp { background: var(--red-w); color: var(--red); }
.wb-tj-lu span.gris { background: none; color: var(--ink-3); font-weight: 400; padding: 0; }
.auj-taches .wb-tj { padding: 6px 12px 10px; }

/* Le rendez-vous : largeur fixe, deux lignes en Dense, trois en Confort. */
.wb-pl-rdv { --f: var(--ty-gris-f); --b: var(--ty-gris-b); --a: var(--ty-gris-a);
  height: var(--pl-chip-h); width: var(--pl-chip-w); display: inline-flex; flex-direction: column;
  justify-content: center; gap: 1px; padding: 0 24px 0 5px; border-radius: 4px; background: var(--f);
  border: 1px solid var(--b); color: var(--ink); cursor: pointer; white-space: nowrap; position: relative;
  font-size: var(--pl-fs); line-height: 1.2; text-align: left; font-family: inherit; }
.wb-pl-rdv[draggable="true"] { cursor: grab; }
.wb-pl-rdv:focus-visible, .wb-pl-rdv.choisi { outline: 2px solid var(--acc); outline-offset: 1px; }
.wb-pl-rdv .l1, .wb-pl-rdv .l2, .wb-pl-rdv .l3 { display: flex; gap: 5px; align-items: center; min-width: 0; overflow: hidden; }
.wb-pl-rdv .l2, .wb-pl-rdv .l3 { font-size: var(--pl-fs-2); color: var(--ink-2); }
.wb-pl-rdv .l3 { display: none; }
.wb-pl-confort .wb-pl-rdv .l3 { display: flex; }
.wb-pl-rdv .cl, .wb-pl-rdv .mo, .wb-pl-rdv .det { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wb-pl-rdv .n { font-weight: 600; color: var(--ink-2); flex: none; }
.wb-pl-rdv .cl { font-weight: 600; }
.wb-pl-rdv .h, .wb-pl-rdv .ic { color: var(--ink-2); flex: none; display: inline-flex; gap: 3px; align-items: center; }
.wb-pl-hf { font-weight: 700; font-size: 12px; line-height: 15px; padding: 0 3px; border-radius: var(--coin-s);
  border: 1px solid var(--ink); background: var(--panel); color: var(--ink); flex: none; }
.wb-pl-tag { font-weight: 600; font-size: 12px; line-height: 15px; padding: 0 3px; border-radius: var(--coin-s);
  background: var(--a); color: var(--panel); flex: none; }
.wb-pl-att { display: inline-grid; place-items: center; width: 17px; height: 15px; border-radius: var(--coin-s);
  background: var(--red); color: var(--panel); flex: none; font-size: 11px; }
.wb-pl-arb { color: var(--etat-attention); flex: none; }
.wb-pl-rdv.urg .n { color: var(--panel); background: var(--red); border-radius: var(--coin-s); padding: 0 3px; }
.wb-pl-rdv.paye { opacity: .5; }
/* Non réceptionné après sa date : le client n'est pas venu, l'ordre attend une décision. */
.wb-pl-rdv.oublie { border: 1.5px solid var(--red); background: linear-gradient(90deg, var(--red-w), var(--f)); }
.wb-pl-rdv .ic .pret-ko { color: var(--red); }

/* La pastille d'avancement se remplit d'un cinquième par étape. */
.wb-pl-av { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--c);
  background: conic-gradient(var(--c) var(--p), var(--panel) 0); flex: none; vertical-align: -2px; }
.wb-pl-rdv .wb-pl-av { position: absolute; right: 5px; top: 50%; margin-top: -7px; }
.wb-pl-av.nonrecu { --c: var(--av-nonrecu); --p: 0%; }
.wb-pl-av.recu { --c: var(--av-recu); --p: 20%; }
.wb-pl-av.cours { --c: var(--av-cours); --p: 40%; }
.wb-pl-av.fini { --c: var(--av-fini); --p: 60%; }
.wb-pl-av.recupere { --c: var(--av-fini); --p: 80%; }
.wb-pl-av.facture { --c: var(--av-fini); --p: 100%; }
.wb-pl-av.paye { --c: var(--av-paye); --p: 100%; }
.wb-pl-av.oublie { --c: var(--red); }

/* La vue « Jour » : la colonne des rendez-vous devient une frise de 7 h 30 à 18 h. */
.wb-pl-heures { position: relative; }
.wb-pl-vue-jour .wb-pl-heures span { position: absolute; top: 5px; transform: translateX(-50%); font-weight: 500; font-size: 12px; }
.wb-pl-frise { position: relative; display: block; padding: 0; min-height: calc(var(--pl-chip-h) + 2 * var(--pl-pad));
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 21 - 1px), var(--rule) calc(100% / 21 - 1px) calc(100% / 21)); }
.wb-pl-frise .wb-pl-rdv { position: absolute; top: var(--pl-pad); min-width: 0; padding-right: 20px; z-index: 1; }
.wb-pl-frise .pause { position: absolute; top: 0; bottom: 0; background: var(--trame-indispo); }
.wb-pl-frise .maint { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); z-index: 3; pointer-events: none; }
.wb-pl-ligne:first-child .wb-pl-frise .maint::before { content: attr(data-h); position: absolute; top: 1px; left: 3px;
  font: 600 12px var(--fonte-mono); color: var(--panel); background: var(--red); padding: 0 4px; border-radius: var(--coin-s); white-space: nowrap; }
.wb-pl-dl small.sem { font-family: var(--fonte-mono); }


/* La vue « Mois » : une semaine par ligne, dimanche replié ; la case ouvre son jour. */
.wb-pl-vue-mois .wb-pl-entete, .wb-pl-sem { grid-template-columns: 56px repeat(6, minmax(0, 1fr)) 90px; }
/* Sous 576 px la colonne des rendez-vous garde une largeur lisible, la grille défile de côté dans son cadre :
   à zéro, l'en-tête se chevauchait et l'axe des heures était coupé. */
@media (max-width: 575.98px) {
  .wb-pl-defile { --pl-cols: 92px 96px minmax(240px, 1fr) 72px 200px; }
  .wb-pl-vue-jour .wb-pl-defile { --pl-cols: 92px 96px minmax(560px, 1fr) 72px 200px; }
  .wb-pl-vue-mois .wb-pl-entete, .wb-pl-sem { grid-template-columns: 48px repeat(6, minmax(84px, 1fr)) 72px; }
}
.wb-pl-sem { display: grid; border-bottom: 1px solid var(--rule-2); background: var(--panel); }
.wb-pl-sem > .sn { font-family: var(--fonte-mono); font-size: 12.5px; color: var(--ink-3);
  padding: 6px 8px; border-right: 1px solid var(--rule); }
.wb-pl-mtitre { position: sticky; top: 27px; z-index: 4; background: var(--paper); padding: 6px 10px;
  font-weight: 700; font-size: 14.5px; border-bottom: 1px solid var(--rule-2); }
.wb-pl-jm { border-right: 1px solid var(--rule); padding: 5px 7px; min-height: 118px; min-width: 0;
  display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.wb-pl-jm:hover { background: var(--acc-w); }
.wb-pl-jm:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.wb-pl-jm.auj { background: var(--repere-aujourdhui-w); }
.wb-pl-jm.passe { background: var(--paper); color: var(--ink-3); }
.wb-pl-jm.ferme { background: var(--trame-indispo); cursor: default; }
.wb-pl-jm .dt { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; font-weight: 700; }
.wb-pl-jm .dt small { font-weight: 400; color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wb-pl-pile { display: flex; height: 9px; border-radius: 3px; overflow: hidden; background: var(--rule); }
.wb-pl-pile span { display: block; height: 100%; background: var(--b); }
.wb-pl-jm .cpt { display: flex; flex-wrap: wrap; gap: 3px 8px; font-size: 12.5px; color: var(--ink-2); }
.wb-pl-jm .cpt b { color: var(--red); }
.wb-pl-jm .mecs { display: grid; gap: 2px; font-size: 12px; color: var(--ink-2); }
.wb-pl-jm .mecs > div { display: grid; grid-template-columns: minmax(0, 76px) 1fr 44px; gap: 5px; align-items: center; }
.wb-pl-jm .mecs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-pl-jm .mecs em { font-style: normal; color: var(--ink-3); }
.wb-pl-jm .mecs .wb-pl-barre { margin: 0; }
.wb-pl-jm .mecs i { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.wb-pl-sem > .wb-pl-jm:last-child .mecs { display: none; }
.wb-pl-ty-gris { --f: var(--ty-gris-f); --b: var(--ty-gris-b); --a: var(--ty-gris-a); }
.wb-pl-ty-orange { --f: var(--ty-orange-f); --b: var(--ty-orange-b); --a: var(--ty-orange-a); }
.wb-pl-ty-rouge { --f: var(--ty-rouge-f); --b: var(--ty-rouge-b); --a: var(--ty-rouge-a); }
.wb-pl-ty-violet { --f: var(--ty-violet-f); --b: var(--ty-violet-b); --a: var(--ty-violet-a); }
.wb-pl-ty-bleu { --f: var(--ty-bleu-f); --b: var(--ty-bleu-b); --a: var(--ty-bleu-a); }
.wb-pl-ty-vert { --f: var(--ty-vert-f); --b: var(--ty-vert-b); --a: var(--ty-vert-a); }

.wb-maitre-detail > .wb-detail.wb-pl-volet { flex-basis: 360px; max-width: 360px; margin-left: 0;
  margin-top: 0; padding: 12px 14px; font-size: 13.5px; }  /* margin-top : le -1rem du volet recouvrait « à jour » de l'avancée. */
.wb-pl-volet h2 { font-size: 15px; font-weight: 700; margin: 0; }
.wb-pl-volet .sous { color: var(--ink-2); margin-bottom: 8px; }
.wb-pl-volet .fermer { float: right; border: 0; background: none; color: var(--ink-2); font-size: 18px; line-height: 1; }
.wb-pl-etapes { list-style: none; margin: 10px 0; padding: 0; }
.wb-pl-etapes li { display: flex; align-items: center; gap: 8px; padding: 2px 0; color: var(--ink-3); }
.wb-pl-etapes li.faite { color: var(--ink-2); }
.wb-pl-etapes li.courante { color: var(--ink); font-weight: 600; }
.wb-pl-volet dl { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 3px 8px; margin: 10px 0; }
.wb-pl-volet dt { font-weight: 400; color: var(--ink-3); }
.wb-pl-volet dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.wb-pl-volet .actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.wb-pl-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.wb-pl-badges .wb-pl-ftype { cursor: default; height: 24px; }
.wb-pl-badge-rouge, .wb-pl-promis { display: inline-flex; align-items: center; height: 24px; padding: 0 8px;
  border-radius: 12px; font-size: 13px; font-weight: 600; }
.wb-pl-badge-rouge { background: var(--red); color: var(--panel); }
.wb-pl-promis { border: 1px solid var(--ink); color: var(--ink); }
.wb-pl-oubli { margin: 0 0 8px; padding: 6px 8px; border-left: 3px solid var(--red); background: var(--red-w); color: var(--red); font-weight: 600; }
.wb-pl-etapes small { margin-left: auto; color: var(--ink-3); font-weight: 400; font-size: 12.5px; text-align: right; }
.wb-pl-volet dd.att { color: var(--red); font-weight: 600; }
.wb-pl-travaux { border-top: 1px solid var(--rule); padding-top: 8px; display: grid; gap: 4px; }
.wb-pl-travaux > div { display: flex; justify-content: space-between; gap: 8px; }
.wb-pl-travaux > div > span:last-child { color: var(--ink-2); flex: none; }
.wb-pl-travaux .att { color: var(--red); }
.wb-pl-travaux .ok { color: var(--av-fini); }
.wb-pl-deplace { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding: 8px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--coin-s); }
.wb-pl-deplace .form-control, .wb-pl-deplace .form-select { width: auto; flex: 1 1 8rem; }
.wb-pl-rdv.bouge { animation: wb-pl-bouge 1.2s ease-out; }
@keyframes wb-pl-bouge { from { box-shadow: 0 0 0 4px var(--acc); } to { box-shadow: 0 0 0 0 transparent; } }
.wb-pl-avancee .pc { font-family: var(--fonte-mono); font-weight: 600; color: var(--ink); }
.wb-pl-avancee .maj { margin-left: auto; color: var(--ink-3); font-family: var(--fonte-mono); }
.wb-pl-annonce { position: fixed; left: 50%; bottom: 48px; transform: translateX(-50%); z-index: 1080; max-width: min(90vw, 44rem);
  background: var(--ink); color: var(--panel); padding: 7px 14px; border-radius: var(--coin); font-size: 14px; }
.wb-pl-annonce.alerte { background: var(--red); }

/* ══ Ordre d'atelier A2 : trois colonnes dans l'ordre de la saisie ══
   Maquette `docs/charte/planning-a2.html`, écran « Nouvel ordre ». */
.wb-fiche-bornee.wb-fiche-bornee--trois { max-width: 112rem; }
.wb-no-cols { --c1: minmax(18rem, 26rem); --c2: minmax(20rem, 1fr); --c3: minmax(30rem, 44rem);
  display: grid; grid-template-columns: var(--c1) var(--c2) var(--c3);
  border: 1px solid var(--rule); background: var(--panel); transition: grid-template-columns .2s ease; }
/* Une colonne repliée devient un bandeau ; la place va aux autres. */
.wb-no-cols.r1 { --c1: 3.25rem; }
.wb-no-cols.r3 { --c3: 3.25rem; }
.wb-no-cols.r2 { --c2: 3.25rem; --c1: minmax(18rem, 1fr); --c3: minmax(30rem, 2fr); }
@media (prefers-reduced-motion: reduce) { .wb-no-cols { transition: none; } }
.wb-no-plier { all: unset; cursor: pointer; display: flex; flex: 1; gap: 8px; align-items: center; }
.wb-no-plier > i { margin-left: auto; color: var(--ink-3); font-size: 13px; }
.wb-no-plier:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: var(--coin); }
.wb-no-res { display: none; }
.wb-no-col.replie { padding: 14px 6px; align-items: center; cursor: pointer; }
.wb-no-col.replie > :not(.wb-no-titre):not(.wb-no-res) { display: none !important; }
.wb-no-col.replie .wb-no-plier { flex-direction: column; font-size: 0; }
.wb-no-col.replie .wb-no-plier > i { margin: 0; transform: rotate(180deg); }
.wb-no-col.replie .wb-no-res { display: block; writing-mode: vertical-rl; margin: 6px 0 0; font-size: 13px; color: var(--ink-2);
  white-space: nowrap; max-height: 32rem; overflow: hidden; text-overflow: ellipsis; }
/* Le réceptionnaire, mention de la manchette. */
.wb-no-recu { font-size: 13.5px; color: var(--ink-2); }
.wb-no-col { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
  border-right: 1px solid var(--rule); }
.wb-no-col:last-child { border-right: 0; background: var(--paper); }
.wb-no-col > fieldset { margin-bottom: 0 !important; }
.wb-no-titre { font-size: 15px; font-weight: 700; margin: 0; display: flex; gap: 8px; align-items: center; }
.wb-no-titre span { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--panel);
  font-size: 12.5px; display: grid; place-items: center; }
.wb-no-coord { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 4px 8px; align-items: center; margin: 0 0 10px; font-size: 13.5px; }
.wb-no-coord dt { font-weight: 400; color: var(--ink-3); }
.wb-no-coord dd { margin: 0; min-width: 0; display: flex; align-items: center; gap: 6px; }
.wb-no-coord .vide { border-color: var(--etat-attention); background: var(--paper); }
.wb-no-coord .mod { color: var(--etat-ok); font-size: 12.5px; white-space: nowrap; }
.wb-no-npa input:first-child { flex: 0 0 5rem; }
.wb-no-coord .wb-sg { flex: 1 1 auto; min-width: 0; }
.wb-no-vhcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 6px; margin-bottom: 6px; }
.wb-no-vhc { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 8px; text-align: left;
  border: 1px solid var(--rule-2); border-radius: var(--coin); background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; }
.wb-no-vhc span { color: var(--ink-2); }
.wb-no-vhc small { color: var(--ink-3); font-size: 12px; }
.wb-no-vhc.on { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); background: var(--acc-w); }
.wb-no-vhc:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.wb-no-trav { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 6px; }
.wb-no-trav th { font-weight: 600; font-size: 12.5px; color: var(--ink-3); border-bottom: 1px solid var(--rule-2); padding: 3px 4px; text-align: left; }
.wb-no-trav td { border-bottom: 1px solid var(--rule); padding: 4px; vertical-align: top; }
.wb-no-trav td:last-child { width: 1.5rem; }
.wb-no-trav .t { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wb-no-trav small { color: var(--ink-3); }
.wb-no-trav .vide { color: var(--ink-3); }
.wb-no-trav .suppr { border: 0; background: none; color: var(--ink-3); line-height: 1; padding: 0 4px; }
.wb-no-trav .suppr:hover { color: var(--red); }
.wb-no-trav tr.act td { border-bottom: 0; padding: 1px 4px 1px 16px; font-size: 12.5px; color: var(--ink-2); }
.wb-no-trav tr.act td:last-child { padding-left: 4px; }
/* La liste des services et les cases d'options restent dans le formulaire, sous le tableau. */
.wb-no-source { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* La bande « Pièces et main-d'œuvre » sous les colonnes (`js/atelier-lignes.js`). */
.wb-ol { margin-top: 12px; border: 1px solid var(--rule); background: var(--panel); }
.wb-ol > header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; border-bottom: 1px solid var(--rule); }
.wb-ol > header h2 { margin: 0; font-size: 15px; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.wb-ol-champ { flex: 0 1 26rem; margin: 0; }
.wb-ol-usure { margin-left: auto; display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--ink-2); }
.wb-ol-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.wb-ol-table th { font-size: 12.5px; font-weight: 600; color: var(--ink-3); background: var(--paper); text-align: left;
  padding: 6px 10px; border-bottom: 1px solid var(--rule); }
.wb-ol-table td { padding: 5px 10px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.wb-ol-table .t { text-align: right; white-space: nowrap; }
.wb-ol-table .poig { width: 1.75rem; color: var(--ink-3); text-align: center; cursor: grab; user-select: none; }
.wb-ol-table td.t input { width: 5.5rem; margin-left: auto; text-align: right; }
.wb-ol-table small, .wb-ol-table .vide { color: var(--ink-3); }
.wb-ol-table tr.mo td { color: var(--ink-2); background: var(--paper); }
.wb-ol-table tr.texte input { font-style: italic; }
.wb-ol-table .suppr { border: 0; background: none; color: var(--ink-3); line-height: 1; padding: 0 4px; }
.wb-ol-table .suppr:hover { color: var(--red); }
.wb-ol-commander { cursor: pointer; }
.wb-ol-commander:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.wb-ol > .form-text { padding: 6px 16px 0; margin: 0; }
.wb-ol > footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 16px; }
.wb-ol-total { margin: 0 0 0 auto; display: grid; grid-template-columns: auto auto; gap: 2px 18px; font-size: 13.5px; color: var(--ink-2); }
.wb-ol-total dt { font-weight: 400; }
.wb-ol-total dd { margin: 0; text-align: right; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.wb-ol-total .g { font-size: 15px; color: var(--ink); }
.wb-no-recap { margin-right: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13.5px; color: var(--ink-2); min-width: 0; }
.wb-no-recap b { color: var(--ink); }
.wb-no-recap .quand { color: var(--ink); font-weight: 600; }
.wb-no-recap .opt { color: var(--red); font-weight: 600; }
.wb-no-types { display: flex; flex-wrap: wrap; gap: 5px; }
.wb-no-types .wb-pl-ftype { height: 30px; }
.wb-no-types .btn-check:checked + .wb-pl-ftype { box-shadow: 0 0 0 2px var(--ink); }
.wb-no-types .btn-check:focus-visible + .wb-pl-ftype { outline: 2px solid var(--acc); outline-offset: 2px; }
.wb-no-rang { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13.5px; }
.wb-no-lib { color: var(--ink-3); }
.wb-no-mecano { width: auto; max-width: 16rem; }
.wb-no-nav { margin-left: auto; display: inline-flex; gap: 4px; }
.wb-no-semaine { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; min-height: 8rem;
  font-variant-numeric: tabular-nums; }
.wb-no-semaine[aria-busy="true"] { opacity: .5; }
.wb-no-semaine > .rien { grid-column: 1 / -1; margin: 0; color: var(--ink-3); }
.wb-no-jour { background: var(--panel); border: 1px solid var(--rule-2); border-radius: 6px; display: flex;
  flex-direction: column; min-width: 0; }
.wb-no-jour > header { padding: 5px 7px; border-bottom: 1px solid var(--rule); }
.wb-no-jour > header b { font-size: 13.5px; display: block; }
.wb-no-jour > header small { color: var(--ink-3); font-size: 11.5px; display: block; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.wb-no-jour.auj > header { background: var(--repere-aujourdhui-w); }
.wb-no-jour .demi { padding: 5px; display: grid; gap: 3px; }
.wb-no-jour .demi .wb-no-cr[data-heure] { flex-wrap: nowrap; padding: 1px 6px; }
.wb-no-jour .demi > span { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.wb-no-cr { font: inherit; font-size: 13px; border: 1px solid var(--rule-2); background: var(--panel); color: var(--ink);
  border-radius: 5px; padding: 3px 6px; text-align: left; cursor: pointer; display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: baseline; gap: 0 6px; line-height: 1.25; min-width: 0; }
.wb-no-cr small { color: var(--ink-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-no-cr strong { font-weight: 600; }
.wb-no-cr.on { background: var(--acc); border-color: var(--acc); color: var(--panel); }
.wb-no-cr.on small { color: var(--panel); }
.wb-no-cr:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.wb-no-cr.sur { border-color: var(--etat-attention); border-style: dashed; }
.wb-no-cr.sur.on { background: var(--etat-attention); border-style: solid; }
.wb-no-jour .rien { font-size: 12.5px; color: var(--ink-3); }
.wb-no-detail { background: var(--panel); border: 1px solid var(--rule-2); border-radius: 6px; padding: 8px 10px;
  display: grid; gap: 4px; font-size: 13px; }
.wb-no-detail > header { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.wb-no-detail > header .fl { color: var(--etat-attention); font-weight: 600; }
.wb-no-jl { display: grid; grid-template-columns: 84px minmax(0, 1fr) 72px; gap: 6px; align-items: center; }
.wb-no-jl .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-no-jl .nm em { font-style: normal; font-weight: 400; color: var(--ink-3); }
.wb-no-jl .nm.placer { color: var(--red); }
.wb-no-jl .ch { text-align: right; color: var(--ink-2); font-size: 12px; }
.wb-no-jl .ch.trop { color: var(--red); font-weight: 600; }
.wb-no-jl .wb-pl-frise { min-height: 26px; border-radius: 3px; }
.wb-no-jl.heures .wb-pl-heures { height: 16px; font-size: 11.5px; color: var(--ink-3); }
.wb-no-jl.heures .wb-pl-heures span { position: absolute; top: 0; transform: translateX(-50%); }
.wb-no-jl .ap { display: flex; flex-wrap: wrap; gap: 4px; }
.wb-no-jb { font-size: 11.5px; line-height: 20px; padding: 0 4px; border-radius: 3px;
  border: 1px solid var(--b, var(--ty-gris-b)); background: var(--f, var(--ty-gris-f)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wb-pl-frise .wb-no-jb { position: absolute; top: 2px; bottom: 2px; z-index: 1; }
.wb-no-detail > footer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }
.wb-no-detail > footer .wb-no-jb { width: 26px; height: 14px; line-height: 10px; padding: 0; }
.wb-no-jb.pause { background: var(--trame-indispo); border: 1px solid var(--rule); }
.wb-no-jb.nouveau { background: var(--acc-w); border: 2px dashed var(--acc); color: var(--acc); font-weight: 600; z-index: 2; }
@media (max-width: 1400px) {
  .wb-no-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wb-no-creneau { grid-column: 1 / -1; border-top: 1px solid var(--rule); }
}
@media (max-width: 900px) {
  .wb-no-cols { grid-template-columns: minmax(0, 1fr); }
  .wb-no-col { border-right: 0; border-bottom: 1px solid var(--rule); }
  .wb-no-semaine { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.wb-trdv .rang { white-space: nowrap; }
.wb-trdv .wb-pl-ftype { cursor: default; max-width: 100%; }
.wb-trdv .wb-pl-ftype span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Aperçu de ligne (gabarit A, `App\Apercu`) : lire avant d'ouvrir ───── */
#wb-entity-qv-body.wb-qv-attente { opacity: .55; transition: opacity .1s .1s; }
.apercu { display: grid; gap: 14px; font-size: 14px; }
.apercu p { margin: 0; }
.apercu-sous { color: var(--ink-2); font-size: 13px; margin-top: -8px !important; }
.apercu-savoir { color: var(--etat-attention); background: var(--etat-attention-w); border-left: 3px solid var(--etat-attention);
  padding: 6px 9px; font-size: 13.5px; }
.apercu-kv { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 5px 10px; margin: 0; }
.apercu-kv dt { color: var(--ink-3); font-weight: 400; }
.apercu-kv dd { margin: 0; overflow-wrap: anywhere; }
.apercu-manque { color: var(--etat-attention); }
.apercu-vide { color: var(--ink-3); }
.apercu-liste, .apercu-motos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.apercu-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; align-items: baseline; }
.apercu-liste li a, .apercu-motos li a { color: var(--ink); font-weight: 600; }
.apercu-liste small { grid-column: 1 / -1; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apercu-etat { text-align: right; white-space: nowrap; }
/* Les premières lignes d'un document, dans son aperçu. */
.apercu-lignes { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rule); border-radius: var(--coin); }
.apercu-lignes li { padding: 5px 9px; border-bottom: 1px solid var(--rule); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apercu-lignes li:last-child { border-bottom: 0; }
.apercu-motos li { display: flex; justify-content: space-between; gap: 8px; border: 1px solid var(--rule);
  border-radius: var(--coin); padding: 6px 9px; }
.apercu-motos small { color: var(--ink-3); white-space: nowrap; }
.apercu-motos .apercu-reste { border: 0; padding: 0 9px; color: var(--ink-3); }
.apercu-actions { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--rule); padding-top: 12px; }
.wb-dt-touches { margin: 8px 0 0; font-size: 12px; color: var(--ink-3); }
.wb-dt-touches kbd:not(:first-child) { margin-left: 12px; }
.wb-dt-touches kbd:first-child + kbd { margin-left: 2px; }

/* Dossier (gabarit B) : la manchette est la bande blanche, puis trois feuilles — joindre
   le client, ce qui est en cours, ce qui s'est passé. */
.dossier-manchette { position: relative; isolation: isolate; display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: flex-start; gap: 12px 24px; margin: 0 -1rem; padding: 16px 1rem 14px; }
.dossier-manchette::before { content: ""; position: absolute; inset: 0 -100vw 0 0; z-index: -1; background: var(--panel);
  border-bottom: 1px solid var(--rule); }
.dossier-manchette:has(~ .wb-fiche-alertes)::before { border-bottom: 0; }
.dossier-titre { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 4px; font-size: var(--t-titre); font-weight: 600; }
.dossier-titre .apercu-du { margin: 0; font-size: 13px; font-weight: 400; }
.dossier-titre .wb-fiche-titre-nature { color: var(--ink-3); font-size: var(--t-total); }
.dossier-fait { font-size: 13px; color: var(--ink-2); }
.dossier-fait a { color: var(--acc); }
/* La rangée d'étiquettes du dossier véhicule : libellé au-dessus de sa valeur, une colonne par donnée, jamais coupée. */
.dossier-rangee { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 32px; margin: 6px 0 0; }
.dossier-rangee dt { font-size: 11.5px; font-weight: 400; color: var(--ink-3); white-space: nowrap; }
.dossier-rangee dd { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; white-space: nowrap; }
.dossier-rangee dd.fort a { font-weight: 600; }
.dossier-rangee a { text-decoration: none; }
.dossier-rangee .code { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.dossier-rangee .vide, .dossier-rangee .teinte { color: var(--ink-3); }
.dossier-rangee .btn-link { font-size: 14px; line-height: inherit; border: 0; }
.dossier-rangee .rouge { color: var(--red); }
.dossier-rangee .wb-pastille { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--rule-2); }
.dossier-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dossier-corps { display: grid; grid-template-columns: minmax(290px, 360px) minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--e4);
  align-items: start; margin-top: var(--e4); }
.dossier-gauche, .dossier-centre, .dossier-droite { min-width: 0; padding: var(--e4) var(--e5); background: var(--panel);
  border: 1px solid var(--rule); border-radius: var(--coin-l); }
@media (max-width: 1280px) { .dossier-corps { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); } .dossier-droite { grid-column: 1 / -1; } }
@media (max-width: 760px) { .dossier-corps { grid-template-columns: minmax(0, 1fr); } }
/* Fiche article : le centre ne porte que des tuiles, les mouvements ont besoin de leur origine entière. */
@media (min-width: 1281px) { .wb-article-page .dossier-corps { grid-template-columns: minmax(290px, 360px) minmax(0, .75fr) minmax(0, 1.4fr); } }
.dossier-centre { display: grid; gap: var(--e5); }
.dossier-centre > :empty { display: none; }
.dossier-ajout { justify-self: start; padding: 4px 0; border: 0; background: none; color: var(--acc); font-size: 13px; }
.apercu-bloc + .dossier-ajout { margin-top: calc(-1 * var(--e4)); }
.dossier-section { margin-top: 0; border-top: 1px solid var(--rule); }
.dossier-gauche .wb-bloc:first-child { margin-top: 0; }
.dossier-section > summary .lbl { margin: 0; }
/* La section porte déjà le filet : le bloc de sa légende n'en ajoute pas un second. */
.dossier-section > summary > .wb-bloc { margin-top: 0; padding-top: 0; border-top: 0; }
/* La carte comptoir : le libellé à gauche, le champ à droite, « ✓ enregistré » dessous. */
.dossier-gauche .wb-fiche-champs .row { --bs-gutter-y: 6px; }
.dossier-gauche .wb-fiche-champs .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
.dossier-gauche .wb-fiche-champs .row > div:has(> .form-label) { display: grid; grid-template-columns: 96px minmax(0, 1fr);
  column-gap: 10px; align-items: center; }
.dossier-gauche .wb-fiche-champs .row > div:has(> .form-label) > * { grid-column: 2; }
.dossier-gauche .wb-fiche-champs .row > div:has(> .form-label) > .form-label { grid-column: 1; grid-row: 1; margin: 0;
  font-size: 12.5px; color: var(--ink-3); }
.dossier-gauche .form-text { display: none; }
.dossier-gauche .mod { color: var(--etat-ok); font-size: 12px; }
.dossier-gauche [data-f].vide { border-style: dashed; background: transparent; }
.dossier-detenteur { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 14px; font-size: 13.5px; }
.dossier-detenteur > a { flex: 1 1 100%; font-size: 15px; font-weight: 600; }
.dossier-detenteur .apercu-du { margin: 0; }
.dossier-centre .wb-compteur { flex: none; }
.dossier-centre .wb-compteur .fig { font-size: 28px; font-weight: 600; }
/* Une zone de panneau qui n'a rien à dire part avec son titre (`pertinence()`). */
.dossier-centre > div:has(> .wb-bloc[hidden]):not(:has(.dossier-ajout)) { display: none; }
/* Une zone vide réduite à son geste « ＋ » se range sous la précédente, sans blanc. */
.dossier-centre :is([data-pec-form], [data-fin-form]):empty { display: none; }
.dossier-centre > div:has(> .wb-bloc[hidden], > .dossier-ajout:first-child) + div:has(> .wb-bloc[hidden], > .dossier-ajout:first-child) { margin-top: calc(-1 * var(--e5)); }
/* La frise : une ligne par évènement, filtrable par nature (cases radio, sans script). */
/* Les filtres de la frise sont un choix exclusif accolé, comme `.wb-seg`, en 28 px. */
.frise-filtres { display: flex; flex-wrap: wrap; margin-bottom: 10px; }
.frise-filtre { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; margin-left: -1px; border: 1px solid var(--rule-2);
  background: var(--panel); font-size: 13px; color: var(--ink); cursor: pointer; }
.frise-filtres > label:first-of-type { margin-left: 0; border-radius: var(--coin) 0 0 var(--coin); }
.frise-filtres > label:last-of-type { border-radius: 0 var(--coin) var(--coin) 0; }
.btn-check:checked + .frise-filtre { position: relative; background: var(--acc-w); border-color: var(--acc); color: var(--acc); font-weight: 600; }
.btn-check:focus-visible + .frise-filtre { outline: 2px solid var(--acc); outline-offset: 1px; }
.frise-liste { list-style: none; margin: 0; padding: 0; }
.frise-liste li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 0 12px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; }
.frise-liste li.frise-annee { display: block; padding: 12px 0 4px; border: 0; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.frise-liste time { color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.frise-liste a, .frise-liste b { color: var(--ink); font-weight: 600; }
.frise-liste small { display: block; color: var(--ink-2); overflow-wrap: anywhere; }
.frise-etat { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dossier-h2-ligne { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.dossier-h2-ligne .dossier-h2 { margin: 0; }
.frise-appel-form { display: grid; gap: 4px; margin-bottom: 12px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--coin); }
.frise-appel-form[hidden] { display: none; }
.frise-appel-titre { margin: 0; font-size: 13.5px; font-weight: 600; }
/* Chaque ligne s'ouvre toute entière : le lien ou le bouton couvre la ligne. */
.frise-liste li { position: relative; }
.frise-liste li > div > a::after, .frise-appel::after { content: ""; position: absolute; inset: 0; }
.frise-liste li:has(> div > a, .frise-appel):hover, .frise-pli summary:hover { background: var(--paper); }
.frise-appel { all: unset; color: var(--ink); font-weight: 600; cursor: pointer; }
.frise-appel:focus-visible, .frise-pli summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.frise-liste li.frise-pli { display: block; padding: 0; }
.frise-pli summary { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 0 12px; align-items: baseline; padding: 7px 0; cursor: pointer; list-style: none; }
.frise-pli summary::-webkit-details-marker { display: none; }
.frise-pli p { margin: 0 0 8px 76px; color: var(--ink-2); overflow-wrap: anywhere; }
/* Pli « Archives » : pièces déposées (`js/ged-pieces.js`), puis documents émis. Les lignes reprennent la frise ;
   la ligne entière ouvre le PDF, les boutons passent au-dessus de son lien. */
.wb-ged-pli > summary .wb-bloc > .lbl { display: inline; }
.wb-ged-compte { margin-left: 8px; font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
.wb-ged-titre { margin: 14px 0 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.wb-ged-pli section:first-child > .wb-ged-titre { margin-top: 6px; }
.wb-ged-meta { font-size: 12px; color: var(--ink-3); }
.wb-depot.wb-ged-depot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 8px;
  padding: 12px 16px; border-radius: var(--coin); font-size: 13.5px; color: var(--ink-2); }
.wb-ged-depot .bi { font-size: 18px; color: var(--ink-3); }
.wb-ged-depot .wb-ged-meta { flex-basis: 100%; }
.wb-ged-pli--survol .wb-ged-depot, .wb-ged-pli--survol:not([open]) > summary { border-color: var(--acc); background: var(--acc-w); }
.frise-liste.wb-ged-liste li { grid-template-columns: 76px minmax(0, 1fr) auto; }
.wb-ged-actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 4px; }
.wb-ged-actions .wb-ged-icone { padding: 0 6px; border-color: transparent; color: var(--ink-3); }
.wb-ged-actions .wb-ged-icone:hover, .wb-ged-actions .wb-ged-icone:focus-visible { border-color: var(--rule-2); color: var(--ink); }
.wb-ged-voir-retirees.btn-link { margin-top: 4px; color: var(--ink-3); font-size: 12.5px; text-decoration: none; }
.wb-ged-voir-retirees.btn-link:hover { color: var(--ink); }
.frise-liste .wb-ged-piece--retiree > time, .frise-liste .wb-ged-piece--retiree a, .wb-ged-piece--retiree small { color: var(--ink-3); }
.frise-liste .wb-ged-piece--neuve { background: var(--acc-w); }
.frise-liste li.wb-ged-piece--saisie { display: block; padding: 6px 0; }
.wb-ged-form .form-label { margin-bottom: 2px; font-size: 12px; }
.wb-ged-fichier { display: flex; align-items: baseline; gap: 6px; margin: 0 0 4px; font-size: 13.5px; }
.wb-ged-fichier-nom { font-weight: 600; overflow-wrap: anywhere; }
.frise:has(input[value="atelier"]:checked) li[data-famille]:not([data-famille="atelier"]),
.frise:has(input[value="ventes"]:checked) li[data-famille]:not([data-famille="ventes"]),
.frise:has(input[value="messages"]:checked) li[data-famille]:not([data-famille="messages"]),
.frise:has(input[value="atelier"]:checked) .frise-annee:not([data-familles~="atelier"]),
.frise:has(input[value="ventes"]:checked) .frise-annee:not([data-familles~="ventes"]),
.frise:has(input[value="messages"]:checked) .frise-annee:not([data-familles~="messages"]) { display: none; }

/* Document (gabarit C) : lignes en pleine largeur, colonne droite fixe (totaux, encaissement, suite).
   Largeurs mesurées sur la colonne (conteneur), pas la fenêtre, car un volet ouvert la réduit :
   colonne droite sous les lignes sous 640 px, en-tête empilé sous 600 px. */
.document-corps { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; margin-top: 14px; }
.document-lignes { flex: 999 1 640px; min-width: 0; container: document-lignes / inline-size; }
.document-corps > .document-colonne { flex: 1 1 400px; min-width: 0; }
@container document-lignes (max-width: 600px) {
  .document-lignes [class*="col-md-"]:not(.col-6) { width: 100%; }
  .document-lignes .col-6[class*="col-md-"] { width: 50%; }
}
.document-colonne { position: sticky; top: 8px; max-height: calc(100vh - 16px); overflow: auto; padding-left: 20px; border-left: 1px solid var(--rule); }
.document-colonne > .card { border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; margin-bottom: 0 !important; }
.document-colonne > .card:first-child { border-top: 0; }
.document-colonne > .card > .card-header { padding: 10px 0 4px; background: none; border: 0; }
.document-colonne > .card > .card-body { padding: 4px 0 12px; }
.document-tva { width: 100%; margin: 4px 0; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.document-tva th { font-weight: 600; text-align: right; border-bottom: 1px solid var(--rule); }
.document-tva td { text-align: right; }
.document-tva :is(th, td):first-child { text-align: left; }
.document-types { display: grid; gap: 8px; margin: 12px 0 4px; }
.document-types-groupe { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.document-types-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.document-type { padding: 4px 12px; border: 1px solid var(--rule-2); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 13.5px; }
.document-type small { margin-left: 4px; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.document-type[aria-pressed="true"] { background: var(--acc-w); border-color: var(--acc); color: var(--acc); font-weight: 600; }
.document-type[aria-pressed="true"] small { color: inherit; }
.document-type:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.dossier-actions .dropdown-item { font-size: 13.5px; }
.wb-cmd-desc { display: flex; align-items: center; gap: 8px; }
.wb-cmd-stock { flex: none; font-size: 12px; color: var(--etat-ok); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wb-cmd-forfait { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: 2px 0 0; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.wb-cmd-stock--bas { color: var(--etat-attention); }
.wb-cmd-stock--zero { color: var(--red); }
.wb-cmd-commander { display: block; font-size: 12px; white-space: nowrap; }

/* Aujourd'hui : colonnes d'action à gauche, le geste de la ligne choisie à droite. */
.auj-chiffres { display: flex; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--coin); margin-bottom: 14px; }
.auj-chiffres a { display: grid; gap: 2px; padding: 10px 22px; border-right: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.auj-chiffres a:last-child { border-right: 0; }
.auj-chiffres a:hover b, .auj-chiffres a:focus-visible b { text-decoration: underline; }
.auj-chiffres b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.auj-chiffres b.amb { color: var(--etat-attention); }
.auj-chiffres b.rge { color: var(--red); }
.auj-chiffres span { font-size: 12.5px; color: var(--ink-3); }
.auj-corps { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.auj-colonnes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; container-type: inline-size; }
.auj-gauche { min-width: 0; }
.auj-col, .auj-rub { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--coin); min-width: 0; }
.auj-plus { display: block; }
.auj-col h2, .auj-rub h2 { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 9px 12px 7px; font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--rule); }
.auj-col h2 b, .auj-rub h2 b { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.auj-col h2 a, .auj-rub h2 a { margin-left: auto; font-size: 12.5px; font-weight: 400; color: var(--ink-3); text-decoration: none; }
.auj-col--soir { border-color: var(--ink-3); }
.auj-col--soir h2 { background: var(--ink); color: var(--panel); border-radius: var(--coin) var(--coin) 0 0; }
.auj-col--soir h2 b, .auj-col--soir h2 a { color: var(--rule-2); }
/* Pistes portées par la liste (subgrid) : la colonne heure prend la largeur de son plus long contenu (date comprise) sur toutes les lignes. */
.auj-col ul { list-style: none; margin: 0; padding: 4px 0; display: grid; grid-template-columns: minmax(50px, max-content) minmax(0, 1fr) auto; column-gap: 10px; }
.auj-col li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 2px; align-items: center; padding: 6px 12px; cursor: pointer; border-left: 3px solid transparent; }
.auj-col--sans-h ul { grid-template-columns: minmax(0, 1fr) auto; }
.auj-col--sans-m ul { grid-template-columns: minmax(50px, max-content) minmax(0, 1fr); }
.auj-col--sans-h.auj-col--sans-m ul { grid-template-columns: minmax(0, 1fr); }
.auj-col--sans-h li .h, .auj-col--sans-m li .m { display: none; }
.auj-col li:hover { background: var(--paper); }
.auj-col li.sel { background: var(--acc-w); border-left-color: var(--acc); }
.auj-col li:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.auj-col li.attend { box-shadow: inset 3px 0 0 var(--red); }
.auj-col li.attend .h { color: var(--red); }
.auj-col li.du .m { color: var(--etat-attention); }
.auj-col li.fait { opacity: .35; transition: opacity .3s; }
.auj-col li .h { font-size: 12.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.auj-col--soir li .h { font-size: 15px; color: var(--ink); }
.auj-col li .q { min-width: 0; }
.auj-col li .q b, .auj-col li .q small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auj-col li .q b { font-weight: 600; font-size: 13.5px; }
.auj-col li .q small { font-size: 12px; color: var(--ink-3); }
.auj-col li .m { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.auj-plus { padding: 8px 12px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--acc); text-decoration: none; }
.auj-plus:hover, .auj-plus:focus-visible { text-decoration: underline; }
.auj-vide { margin: 0; padding: 10px 12px; color: var(--ink-3); font-size: 13px; }
.auj-volet { position: sticky; top: 12px; display: grid; gap: 12px; background: var(--panel); border: 1px solid var(--rule-2); border-radius: var(--coin); padding: 14px; }
.auj-volet h2 { margin: 0; font-size: 17px; font-weight: 600; }
.auj-sous { margin: 2px 0 0; color: var(--ink-2); font-size: 13px; }
.auj-kv { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 4px 10px; margin: 0; font-size: 13.5px; }
.auj-kv dt { color: var(--ink-3); font-weight: 400; }
.auj-kv dd { margin: 0; }
.auj-gestes { display: grid; gap: 8px; border-top: 1px solid var(--rule); padding-top: 12px; }
.auj-fait { margin: 0; color: var(--etat-ok); font-weight: 600; }
/* Une carte large prend deux pistes, et une seule quand la grille n'en a qu'une. */
@container (min-width: 614px) { .auj--large { grid-column: span 2; } }
/* Large, une carte montre plus : le détail du volet sur la ligne, les listes et les tâches sur deux colonnes. */
.auj-col.auj--large li .q { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; }
.auj-col.auj--large li .q > b, .auj-col.auj--large li .q > small { grid-column: 1; }
.auj-col li .q .d { grid-column: 2; grid-row: 1 / span 2; min-width: 0; align-self: center; }
.auj-col li .q .d small { font-size: 12px; color: var(--ink-2); }
.auj-col li .q .d i { font-style: normal; color: var(--ink-3); }
.auj-rub.auj--large .auj-rub-corps ul { columns: 2; column-gap: 24px; }
.auj-rub.auj--large .auj-rub-corps li { break-inside: avoid; }
.auj-taches.auj--large .wb-tj { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
.auj-taches.auj--large .wb-tj > :not(.wb-tj-t) { grid-column: 1 / -1; }
.auj-aide-disposer { margin: 14px 0 0; font-size: 13px; color: var(--ink-3); }
.auj-aide-disposer a { margin-left: 8px; }
.auj-calme ~ .auj-colonnes, .auj-aide-disposer ~ .auj-colonnes { margin-top: 14px; }
.auj-gauche > :first-child { margin-top: 0; }
.auj--disposer [data-widget-key] { cursor: grab; }
.auj--disposer [data-widget-key]:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.auj--disposer [data-widget-key] > :not(h2) { pointer-events: none; }
.auj--masquee { opacity: .55; border-style: dashed; }
.auj--glissee { opacity: .4; }
.auj-reglage { margin-left: auto; display: flex; gap: 2px; }
.auj-reglage .btn { padding: 0 6px; font-size: 12.5px; font-weight: 400; color: var(--ink-3); text-decoration: none; }
.auj-reglage .btn[aria-pressed="true"] { color: var(--acc); font-weight: 600; }
.auj-calme { display: inline-flex; flex-wrap: wrap; vertical-align: top; max-width: 100%; gap: 4px 18px; margin: 14px 14px 0 0; padding: 9px 12px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--coin); font-size: 13px; color: var(--ink-3); }
.auj-calme b { color: var(--ink-2); font-weight: 600; }
.auj-rub-corps { padding: 10px 12px 12px; font-size: 13.5px; }
.auj-rub-corps > :last-child { margin-bottom: 0; }
@media (max-width: 991.98px) { .auj-corps { grid-template-columns: 1fr; } .auj-volet { position: static; } }

/* ── Clôture de caisse : poste de travail (comptage, résultat, mouvements) ── */
.cl-corps { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr) minmax(0, 480px); background: var(--panel); border: 1px solid var(--rule); border-radius: var(--coin); }
.cl-corps > section { display: grid; gap: 14px; align-content: start; padding: 18px 22px; min-width: 0; }
.cl-corps > section + section { border-left: 1px solid var(--rule); }
.cl-corps h2 { margin: 0; }
.cl-corps h2 small { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-3); }
.cl-coupures { display: grid; grid-template-columns: 70px 110px minmax(0, 1fr); gap: 6px 14px; align-items: center; }
.cl-coupures .v { text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cl-coupures .form-control { height: 34px; font-size: 16px; text-align: right; font-variant-numeric: tabular-nums; }
.cl-coupures .s { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.cl-coupures .cl-aide { font-weight: 400; color: var(--ink-3); font-size: 12.5px; }
.cl-sep { grid-column: 1 / -1; border-top: 1px solid var(--rule); margin: 2px 0; }
.cl-grand { display: grid; gap: 4px; padding: 14px 18px; border: 1px solid var(--rule); border-radius: var(--coin-l); }
.cl-grand span { font-size: 13px; color: var(--ink-2); }
.cl-grand b { font-size: 40px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cl-ecart { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 18px; border-radius: var(--coin-l); background: var(--wash); color: var(--ink-2); }
.cl-ecart span { font-size: 15px; font-weight: 600; }
.cl-ecart b { font-size: 28px; font-variant-numeric: tabular-nums; }
.cl-ecart.juste { background: var(--etat-ok-w); color: var(--etat-ok); }
.cl-ecart.manque { background: var(--etat-ecart-w); color: var(--etat-ecart); }
.cl-ecart.exc { background: var(--etat-attention-w); color: var(--etat-attention); }
.cl-motif { display: grid; gap: 4px; }
.cl-motif .form-label { margin: 0; font-size: 13px; color: var(--ink-2); }
.cl-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cl-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-3); padding: 5px 8px; border-bottom: 1px solid var(--rule-2); }
.cl-table td { padding: 6px 8px; border-bottom: 1px solid var(--rule); }
.cl-table .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cl-table tfoot td { font-weight: 700; border-bottom: 0; }
.cl-table .cl-vide { color: var(--ink-3); border-bottom: 0; }
.cl-detail summary { cursor: pointer; font-size: 13px; color: var(--ink-2); }
@media (max-width: 1200px) {
  .cl-corps { grid-template-columns: minmax(0, 1fr); }
  .cl-corps > section + section { border-left: 0; border-top: 1px solid var(--rule); }
}

/* L'ordre en dossier : étapes en ligne sous le titre, alerte d'accord, carte comptoir, tables des travaux et pièces. */
.ordre-etapes { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; margin: 8px 0 0; padding: 0; font-size: 12.5px; color: var(--ink-3); }
.ordre-etapes li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ordre-etapes li:not(:last-child)::after { content: ""; width: 24px; height: 2px; margin: 0 8px; background: var(--rule); }
.ordre-etapes li.faite { color: var(--ink-2); }
.ordre-etapes li.faite::after { background: var(--etat-ok); }
.ordre-etapes li.courante { color: var(--ink); font-weight: 600; }
.ordre-etapes small { color: var(--ink-3); font-weight: 400; }
.ordre-etapes .wb-loc-retard { color: var(--red); font-weight: 600; }
.ordre-alerte { margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--rule); background: var(--etat-attention-w); color: var(--ink); font-size: 13.5px; }
.ordre-alerte b { color: var(--etat-attention); }
/* Contrat de location en dossier : deux colonnes (qui, quoi, quand | montant, départ, retour, garantie). */
.loc-corps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.loc-corps fieldset { min-width: 0; }
/* Selon la largeur laissée au contrat, pas celle de l'écran : le volet « Nouveau client » ouvert, une colonne. */
.wb-location-page > .wb-maitre-detail > .wb-maitre { container: loc-maitre / inline-size; }
@container loc-maitre (max-width: 1000px) { .loc-corps { grid-template-columns: minmax(0, 1fr); } }
.ordre-carte dl, .ordre-solde { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 10px; align-items: baseline; margin: 0 0 18px; font-size: 13.5px; }
.ordre-carte dt, .ordre-solde dt { font-weight: 400; color: var(--ink-3); }
.ordre-carte dd, .ordre-solde dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ordre-carte .mod { color: var(--etat-ok); font-size: 12px; }
.ordre-carte [data-f].vide { border-style: dashed; }
.ordre-du { color: var(--etat-attention); }
.ordre-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; background: var(--panel);
  border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.ordre-table th { padding: 7px 10px; border-bottom: 1px solid var(--rule); background: var(--paper); font-size: var(--t-second);
  font-weight: 600; color: var(--ink-3); text-align: left; }
.ordre-table td { padding: 7px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ordre-table tbody tr:last-child td { border-bottom: 0; }
.ordre-table td small { display: block; color: var(--ink-3); font-size: 12px; }
.ordre-table .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ordre-accord { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--etat-attention); border-radius: var(--coin); background: var(--panel); }
.ordre-accord h3 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 0; font-size: 15px; font-weight: 600; }
.ordre-accord h3 span { font-size: 12.5px; color: var(--etat-attention); }
.ordre-accord-travaux { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 6px 0; border-block: 1px solid var(--rule); }
.ordre-accord-travaux b { font-variant-numeric: tabular-nums; }
.ordre-accord-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ordre-accord-ligne .lbl { width: 72px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.ordre-accord .form-label { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.ordre-montant { max-width: 12rem; }
.ordre-histo li { grid-template-columns: 84px minmax(0, 1fr); }
.ordre-histo time small { display: block; }

/* Article en dossier : le stock en chiffres, les ventes en barres sur douze mois. */
.art-lieux { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.art-lieu { display: grid; gap: 2px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--coin); }
.art-lieu b { font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.art-lieu span { font-size: 12.5px; color: var(--ink-3); }
.art-motos { overflow-x: auto; }
.art-lieu.zero b { color: var(--red); }
.art-lieu a { color: var(--acc); }
.art-lieu.moins { background: var(--etat-ecart-w); border-color: transparent; }
.art-lieu.moins b { color: var(--etat-ecart); }
.art-lieu.plus { background: var(--etat-ok-w); border-color: transparent; }
.art-lieu.plus b { color: var(--etat-ok); }
.art-lieu-act { justify-self: start; margin-top: 4px; font: inherit; font-size: 12.5px; color: var(--acc); background: none; border: 1px solid var(--rule-2); border-radius: 4px; padding: 1px 8px; }
.art-corrige { grid-column: 1 / -1; display: grid; gap: 10px; padding: 12px; background: var(--acc-w); border: 1px solid var(--acc); border-radius: var(--coin); }
.art-corrige-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.art-corrige input { width: 90px; font-size: 18px; font-variant-numeric: tabular-nums; }
.art-corrige-ecart { font-weight: 600; font-variant-numeric: tabular-nums; }
#wb-art-mvt .art-mvt-stock { background: var(--etat-attention-w); }
#wb-art-mvt .art-mvt-neutre { color: var(--ink-3); }
.art-barres { display: flex; align-items: flex-end; gap: 4px; height: 72px; padding: 8px 10px 0; background: var(--panel); border: 1px solid var(--rule); border-bottom: 0; border-radius: var(--coin) var(--coin) 0 0; }
.art-barres i { flex: 1; min-height: 1px; background: var(--acc); border-radius: 2px 2px 0 0; }
.art-barres i:last-child { opacity: .55; }
.art-barres-leg { display: flex; justify-content: space-between; padding: 4px 10px; font-size: 12px; color: var(--ink-3); background: var(--panel); border: 1px solid var(--rule); border-top: 0; border-radius: 0 0 var(--coin) var(--coin); }

/* Postes à la douchette (réception, inventaire) : le scan et sa carte à gauche, les listes à droite. */
.rc-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); background: var(--panel); border: 1px solid var(--rule); border-radius: var(--coin); }
.rc-scan { display: grid; gap: 14px; align-content: start; padding: 18px 22px; min-width: 0; }
.rc-cote { display: grid; align-content: start; border-left: 1px solid var(--rule); min-width: 0; }
.rc-douchette { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.rc-douchette > .form-control { flex: 1 1 0; min-width: 0; }
/* Le retour d'un scan passe sous le champ : posé à côté, il écrasait le champ de scan. */
.rc-douchette > .wb-retour { order: 3; flex-basis: 100%; }
.rc-qte { display: flex; gap: 4px; align-items: center; }
.rc-qte .form-control { width: 5.5rem; }
.rc-bloc + .rc-bloc { border-top: 1px solid var(--rule); }
.rc-bloc > header { display: flex; align-items: center; gap: 8px; padding: 10px 16px; }
.rc-bloc > header h2 { margin: 0 auto 0 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.rc-bloc > header .form-control { width: 8rem; }
.rc-defile { max-height: 19rem; overflow-y: auto; }
.rc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rc-table th { padding: 5px 16px; font-size: 12px; font-weight: 600; color: var(--ink-3); text-align: left; border-bottom: 1px solid var(--rule-2); }
.rc-table td { padding: 6px 16px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.wb-rec-scaninput { --taille-champ: 1.6rem; height: 56px; font-weight: 600; }
.wb-inv-scaninput { --taille-champ: 1.6rem; height: 56px; font-weight: 600; }
.wb-rec-card, .wb-inv-card { display: grid; gap: 6px; padding: 20px 22px; min-height: 15rem; border: 2px solid var(--rule); border-radius: var(--coin-l); background: var(--etat-neutre-w); transition: background .15s, border-color .15s; }
.wb-rec-card--ok, .wb-inv-card--ok { background: var(--etat-ok-w);        border-color: var(--etat-ok); }
.wb-rec-card--warn, .wb-inv-card--warn { background: var(--etat-attention-w); border-color: var(--etat-attention); }
.wb-rec-card--err, .wb-inv-card--err { background: var(--etat-ecart-w);     border-color: var(--etat-ecart); }
.wb-rec-card-state, .wb-inv-card-state { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.wb-rec-card-desc, .wb-inv-card-desc { font-size: 2rem; font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; }
.wb-rec-card-ref, .wb-inv-card-ref { font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.wb-rec-card-figs, .wb-inv-card-figs { display: flex; gap: 10px; flex-wrap: wrap; }
.wb-rec-card > .btn { justify-self: start; }
.wb-rec-fig, .wb-inv-fig { flex: 1 1 6rem; padding: 8px 14px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--coin); }
.wb-rec-fig-lbl, .wb-inv-fig-lbl { font-size: 12.5px; color: var(--ink-3); }
.wb-rec-fig-val, .wb-inv-fig-val { font-size: 2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wb-rec-dest       { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--rule); }
.wb-rec-ordre      { color: var(--acc); }
.wb-rec-ordre .small { color: var(--ink-2); }
.wb-inv-sector { padding: 10px 16px; border: 1px solid var(--rule); border-radius: var(--coin); font-size: 1.8rem; font-weight: 700; text-align: center; }
.wb-inv-sector--none { background: var(--etat-neutre-w); color: var(--etat-neutre); font-size: 1.2rem; font-weight: 600; }
.wb-inv-sector--active { background: var(--acc); color: var(--paper); border-color: var(--acc); }
.wb-inv-lines { max-height: 26rem; overflow-y: auto; }
.wb-inv-ligne-qte { --taille-champ: 1.25rem; }
@media (prefers-reduced-motion: reduce) { .wb-rec-card, .wb-inv-card { transition: none; } }
@media (max-width: 1200px) {
  .rc-corps { grid-template-columns: minmax(0, 1fr); }
  .rc-cote { border-left: 0; border-top: 1px solid var(--rule); }
}

/* Écran SMS : les modèles en lignes à filet, le choisi en lavis (charte A2). */
.wb-sms-modeles { border: 1px solid var(--rule); border-radius: var(--coin); overflow: hidden; background: var(--panel); }
.wb-sms-modele { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 8px;
  width: 100%; padding: 7px 10px; cursor: pointer; border-top: 1px solid var(--rule); }
.wb-sms-modele:first-child { border-top: 0; }
.wb-sms-modele:hover { background: var(--paper); }
.wb-sms-modele[aria-checked="true"] { background: var(--acc-w); }
.wb-sms-modele:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.wb-sms-modele kbd { grid-row: 1 / 3; margin: 0; align-self: start; height: 20px; display: grid; place-items: center; padding: 0;
  font-weight: 600; }
.wb-sms-modele[aria-checked="true"] kbd { color: var(--acc); border-color: var(--acc); }
.wb-sms-modele b { font-weight: 600; font-size: 13.5px; }
.wb-sms-modele span { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Choix exclusif en liste à filet (radios `.btn-check` + `.wb-choix`) : une ligne par choix, jamais de rangs inégaux. */
.wb-choix-liste { border: 1px solid var(--rule); border-radius: var(--coin); overflow: hidden; background: var(--panel); }
.wb-choix { display: block; margin: 0; padding: 7px 10px; font-size: 13.5px; cursor: pointer; border-top: 1px solid var(--rule); }
.wb-choix-liste > .btn-check:first-child + .wb-choix { border-top: 0; }
.wb-choix:hover { background: var(--paper); }
.btn-check:checked + .wb-choix { background: var(--acc-w); color: var(--acc); font-weight: 600; }
.btn-check:focus-visible + .wb-choix { outline: 2px solid var(--acc); outline-offset: -2px; }
.btn-check:disabled + .wb-choix { color: var(--ink-3); cursor: not-allowed; }
/* Puces d'un choix court (taux de TVA de la fiche article) : le `<select>` reste la valeur, masqué derrière. */
.wb-puces { display: inline-flex; border: 1px solid var(--rule-2); border-radius: var(--coin); overflow: hidden; }
.wb-puces button { font: inherit; font-size: 13px; border: 0; background: var(--panel); color: var(--ink-2); padding: 4px 10px; cursor: pointer; font-variant-numeric: tabular-nums; }
.wb-puces button + button { border-left: 1px solid var(--rule-2); }
.wb-puces button[aria-checked="true"] { background: var(--acc); color: var(--panel); }
.wb-puces button:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.wb-puces button:disabled { cursor: not-allowed; opacity: .55; }
.wb-puces button:disabled[aria-checked="true"] { opacity: 1; background: var(--wash); color: var(--ink); }

/* Compteur des champs SMS (`js/sms-texte.js`) : les caractères hors du jeu GSM. */
.wb-sms-compteur mark {
  padding: 0 .2em;
  border: 1px solid var(--etat-attention);
  border-radius: 2px;
  background: var(--etat-attention-w);
  color: var(--ink);
}

/* Ligne « À compléter » d'une fiche client (`js/client-manques.js`) : discrète, filet d'attention, champ sur place. */
.wb-manques { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 5px 10px; margin: 0 0 .75rem;
  border-left: 3px solid var(--etat-attention); border-radius: 0 var(--coin) var(--coin) 0; background: var(--panel); font-size: 13px; }
.wb-manques-titre { font-weight: 600; color: var(--ink-2); }
.wb-manque { display: inline-flex; align-items: center; gap: 6px; }
.wb-manque .lbl { margin: 0; }
.wb-manque .form-control, .wb-manque .form-select { width: auto; min-width: 11rem; }
.wb-manque .mod { color: var(--etat-ok); font-size: 12px; }
.wb-manque.fait > .lbl, .wb-manque.fait > .btn-link { color: var(--ink-3); }
.wb-manque.fait [data-sans] { display: none; }
.wb-manque-note { color: var(--ink-3); font-size: 12px; }
.wb-cliq-decision .wb-manques { margin: 0; padding: 0; border: 0; background: none; }
.wb-manques-pastille { cursor: pointer; }
/* Les pastilles de la manchette qui mènent à un champ ou à une fiche ; le volet du rabais, sous la manchette. */
.wb-fiche-classifieurs :is(a, button).et, .apercu-du a.et { cursor: pointer; text-decoration: none; }
.wb-cli-rabais, .wb-vhc-resa { width: fit-content; max-width: 100%; padding: 6px 10px; margin: 0 0 .75rem; border-left: 3px solid var(--rule-2);
  border-radius: 0 var(--coin) var(--coin) 0; background: var(--panel); font-size: 13px; }
.wb-cli-rabais-liste { list-style: none; margin: 0; padding: 0; }
.wb-cli-rabais-liste li { padding: 2px 0; }
.wb-cli-rabais-liste b { display: inline-block; min-width: 3.5em; font-variant-numeric: tabular-nums; }
.wb-cli-rabais-sans { color: var(--ink-3); }
.wb-cli-rabais-gestes { display: flex; gap: 16px; margin: 4px 0 0; }
.wb-vhc-resa dl { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; }
.wb-vhc-resa dt { font-size: 12px; font-weight: 400; color: var(--ink-3); }
.wb-vhc-resa dd { margin: 0; }
.wb-vhc-resa-gestes { display: flex; gap: 8px; margin: 6px 0 0; }

/* Période (`App\Periode`) : un bouton, puis raccourcis et « Du … au » dans son menu. */
.wb-periode { display: inline-block; }
.wb-periode-menu { padding: 4px; min-width: 18rem; }
.wb-periode-menu .dropdown-item { border-radius: 4px; }
.wb-periode-menu .dropdown-item.active { background: var(--acc-w); color: var(--acc); font-weight: 600; }
.wb-periode-dates { display: flex; align-items: center; gap: .4rem; padding: 4px 8px; }
.wb-periode-dates input[type="date"] { width: 9.5rem; }

/* Raccourcis d'un onglet de liste (Non soldées, À recevoir…) : sous le bandeau de portée. */
.wb-dt-raccourcis { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .5rem; }

/* Total des colonnes de montant sur tout le filtre, dans le pied de grille. */
.wb-table-somme { margin-left: 1.25rem; color: var(--ink); white-space: nowrap; }
.wb-table-somme b { font-weight: 600; }

/* Échéance passée d'une facture ouverte. */
.wb-echue { color: var(--red); font-weight: 600; }

/* Tableau écrit par `js/tableau.js` dans un cadre qui défile : la tête reste collée. */
/* `js/tableau.js` étire la zone jusqu'au bas de l'écran et pose le pied de pages dessous. */
.wb-tableau-defile { max-height: calc(100vh - 12rem); overflow-y: auto; }
.wb-tableau-pages { display: flex; align-items: center; gap: var(--e4, 16px); padding: 6px 10px; border-top: 1px solid var(--rule); background: var(--panel); color: var(--ink-2); font-size: 13px; }
.wb-tableau-pages select { border: 1px solid var(--rule-2); border-radius: var(--coin); background: var(--panel); color: var(--ink); padding: 2px 8px; margin-left: 4px; }
.wb-tableau-pages button { min-width: 28px; height: 28px; padding: 0 6px; margin: 0 1px; border: 1px solid transparent; border-radius: var(--coin); background: none; color: var(--ink-2); }
.wb-tableau-pages button:not(:disabled):hover { background: var(--wash); color: var(--ink); }
.wb-tableau-pages button.active { background: var(--acc-w); border-color: var(--acc); color: var(--acc); font-weight: 600; }
.wb-tableau-pages button:disabled { opacity: .4; }
.wb-tableau > tbody, .wb-tableau > tfoot { font-size: 13px; }
.wb-tableau > tfoot td { font-weight: 600; }
/* Ordre : l'étape et l'accord sur les pièces d'usure restent sur la ligne du titre ; le titre se coupe. */
.wb-ordre-page .dossier-titre { flex-wrap: nowrap; }
.wb-ordre-page .dossier-titre > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Activité atelier : chiffre non cliquable (sans le droit), signes, graphique et part des heures. */
.auj-chiffres .wb-aa-cle { display: grid; gap: 2px; padding: 10px 22px; border-right: 1px solid var(--rule); }
.wb-aa-plus, .table > tbody > tr > td.wb-aa-plus { color: var(--ecart-plus); }
.wb-aa-moins, .table > tbody > tr > td.wb-aa-moins { color: var(--red); }
.table > tbody > tr > td.wb-aa-attention { color: var(--etat-attention); }
.wb-aa-filtre { font: inherit; padding: 0; border: 0; background: none; color: var(--acc); text-align: left; }
.wb-aa-filtre:hover { text-decoration: underline; }
.wb-aa-graphe { display: block; width: 100%; height: auto; margin-top: .5rem; }
.wb-aa-graphe text { fill: var(--ink-3); font-size: 11px; }
.wb-aa-grille { stroke: var(--rule); stroke-width: 1; }
.wb-aa-barre { fill: var(--acc); }
.wb-aa-barre-n1 { fill: var(--rule-2); }
.wb-aa-graphe a:hover .wb-aa-barre { fill: var(--acc-h); }
.wb-aa-legende { display: flex; gap: 1rem; color: var(--ink-2); }
.wb-aa-legende span::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 5px;
  border-radius: 2px; vertical-align: -1px; background: var(--acc); }
.wb-aa-legende .wb-aa-cle-n1::before { background: var(--rule-2); }
.wb-aa-deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); gap: 0 var(--e4); }
/* Chaque bloc est une feuille ; 16 px entre deux feuilles (charte). */
.wb-aa-page .wb-bloc.card { margin-top: var(--e4); }
.wb-aa-part { display: inline-block; width: 4rem; height: 6px; margin-right: .5rem; background: var(--wash);
  border-radius: 3px; vertical-align: middle; overflow: hidden; }
.wb-aa-part i { display: block; height: 100%; background: var(--acc); }

/* ══ Kit A2 : les composants des maquettes charte-a2/ (docs/CHARTE.md § Composants) ══
   Un écran neuf les assemble ; ses propres classes ne portent que ce qui n'est qu'à lui. */

/* La barre d'outils qui ouvre la page prolonge la bande blanche du titre ; sous des onglets, le filet
   de la bande reste. `!important` : l'en-tête porte l'utilitaire `mb-3`. */
.wb-pagebar:not(:has(> .wb-onglets)):has(+ .wb-outils, + * > .wb-outils:first-child)::before { border-bottom: 0; }
.wb-pagebar:not(:has(> .wb-onglets)):has(+ .wb-outils, + * > .wb-outils:first-child) > .wb-page-header { margin-bottom: 4px !important; }
:is(.wb-pagebar + .wb-outils, .wb-pagebar + * > .wb-outils:first-child) {
  position: relative; isolation: isolate; margin: -.9rem -1rem 1rem; padding: 4px 1rem 12px; border-bottom: 0; gap: 10px 16px;
}
.wb-pagebar:has(> .wb-onglets) + .wb-outils, .wb-pagebar:has(> .wb-onglets) + * > .wb-outils:first-child { padding-top: 12px; }
:is(.wb-pagebar + .wb-outils, .wb-pagebar + * > .wb-outils:first-child)::before {
  content: ""; position: absolute; inset: 0 -100vw 0 0; z-index: -1; background: var(--panel); border-bottom: 1px solid var(--rule);
}
@media print { .wb-outils::before { content: none !important; } }
/* Isolée, une bande passe sous les feuilles qui la suivent : son menu ouvert ou son champ actif la remonte. */
:is(.wb-pagebar, .wb-pagebar > .wb-page-header, .wb-pagebar + .wb-outils, .wb-pagebar + * > .wb-outils:first-child,
  .dossier-manchette, .wb-fiche-alertes):is(:focus-within, :has(.dropdown-menu.show)) { z-index: 3; }
/* Le bandeau d'annonce d'un écran tient sa propre ligne dans la barre. */
.wb-outils > .wb-note { flex: 1 1 100%; margin: 0; }

/* Choix exclusif (caisse, vue) : boutons accolés, l'élu en `aria-pressed="true"`. */
.wb-seg { display: inline-flex; }
.wb-seg > :is(button, a) { font: inherit; height: 32px; padding: 0 12px; margin-left: -1px; display: inline-flex; align-items: center;
  border: 1px solid var(--rule-2); background: var(--panel); color: var(--ink); cursor: pointer; text-decoration: none; white-space: nowrap; }
.wb-seg > :first-child { margin-left: 0; border-radius: var(--coin) 0 0 var(--coin); }
.wb-seg > :last-child { border-radius: 0 var(--coin) var(--coin) 0; }
.wb-seg > :only-child { border-radius: var(--coin); }
.wb-seg > :is(button, a):hover { background: var(--wash); }
.wb-seg > :is(button, a):disabled { color: var(--ink-3); background: var(--panel); cursor: default; }
.wb-seg > [aria-pressed="true"], .wb-seg > [aria-pressed="true"]:hover { position: relative; background: var(--acc-w); border-color: var(--acc); color: var(--acc); font-weight: 600; }

/* Le jour affiché, en toutes lettres et à largeur fixe, entre ses deux flèches. */
.wb-jour { display: inline-flex; align-items: center; gap: 4px; position: relative; }
.wb-jour > button { font: inherit; width: 32px; height: 32px; padding: 0; border: 1px solid var(--rule-2); border-radius: var(--coin);
  background: var(--panel); color: var(--ink-2); cursor: pointer; }
.wb-jour > button:hover { background: var(--wash); }
.wb-jour > button:disabled { color: var(--rule-2); background: var(--panel); cursor: default; }
.wb-jour > .wb-jour-date { width: 13.5rem; border-color: transparent; color: var(--ink); font-weight: 600; text-align: center; }
/* Le sélecteur natif reste sous la date : il ne sert qu'à `showPicker()`. */
.wb-jour > input[type="date"] { position: absolute; left: 50%; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Les colonnes d'un poste de travail, collées sous la barre d'outils : panneaux blancs et colonne
   courante sur fond de page, séparés par un filet. L'écran donne `grid-template-columns`. */
.wb-colonnes { display: grid; align-items: stretch; margin: -1rem 0 0 -1rem; border-bottom: 1px solid var(--rule); }
.wb-colonnes > * { min-width: 0; padding: 16px 20px; }
.wb-colonnes > * + * { border-left: 1px solid var(--rule); }
.wb-colonnes > .wb-panneau { background: var(--panel); }
.wb-panneau { display: grid; align-content: start; gap: 18px; }

/* Titre de rubrique : petites capitales grises. */

/* Un calcul ligne à ligne ; la ligne `.fin` le conclut sous un filet, en encre, jamais en bleu. */
.wb-montants { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; margin: 0; font-variant-numeric: tabular-nums; }
.wb-montants dt { font-weight: 400; color: var(--ink-2); }
.wb-montants dd { margin: 0; text-align: right; }
.wb-montants .fin { border-top: 1px solid var(--rule-2); padding-top: 6px; font-weight: 600; color: var(--ink); }
.wb-montants dd.fin { font-size: 17px; }
.wb-montants .fin a { color: inherit; }
.wb-montants .note { grid-column: 1 / -1; text-align: left; color: var(--ink-2); }

/* Tableau en panneau : en-tête sur fond de page, montants à droite (`.text-end`). */
.wb-table { overflow-x: auto; background: var(--panel); border: 1px solid var(--rule); border-radius: 6px; }
.wb-table > table { width: 100%; border-collapse: collapse; margin: 0; font-variant-numeric: tabular-nums; }
.wb-table :is(th, td) { padding: 7px 10px; border-bottom: 1px solid var(--rule); text-align: left; white-space: nowrap; }
.wb-table :is(th, td).text-end { text-align: right; }
.wb-table th { font-size: 12.5px; font-weight: 600; color: var(--ink-3); background: var(--paper); }
.wb-table tbody tr:last-child td { border-bottom: 0; }
.wb-table tbody tr:hover, .wb-table tbody tr:focus-within { background: var(--paper); }

/* Un geste de la colonne : toute la largeur, libellé à gauche, touche à droite. */
.wb-geste { font: inherit; width: 100%; height: 36px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid var(--rule-2); border-radius: var(--coin); background: var(--panel); color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; }
.wb-geste:hover { background: var(--wash); color: var(--ink); }
.wb-geste:disabled { opacity: .45; cursor: default; background: var(--panel); }
.wb-geste--principal, .wb-geste--principal:hover { background: var(--acc); border-color: var(--acc); color: var(--panel); font-weight: 600; }
.wb-geste--principal:hover { background: var(--acc-h); border-color: var(--acc-h); }

/* Un état discret (la clôture, le dernier passage) : un encadré sur fond de page. */
.wb-encart { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); }
.wb-encart > b { font-size: 15px; font-weight: 600; }
.wb-encart > span { color: var(--ink-2); font-size: 13px; }

/* Caisse du jour : chiffres | mouvements | gestes ; sans le droit du journal, deux colonnes. */
.wb-cj { grid-template-columns: minmax(0, 340px) minmax(0, 1fr) minmax(0, 300px); }
.wb-cj:not(:has(.wb-cj-mvts)) { grid-template-columns: minmax(0, 400px) minmax(0, 300px); }
.wb-cj-mvts { display: grid; align-content: start; gap: 8px; }
.wb-cj-mvts .wb-rubrique { margin: 0; }
.wb-cj-modes { display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.wb-cj-mode { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: baseline; width: calc(100% + 16px);
  margin: 0 -8px; padding: 6px 8px; font: inherit; color: inherit; text-align: left; background: none; border: 1px solid transparent; border-radius: var(--coin); }
.wb-cj-mode:not(:disabled):hover { background: var(--paper); }
.wb-cj-mode[aria-pressed="true"] { background: var(--acc-w); border-color: var(--acc); }
.wb-cj-mode:disabled { opacity: 1; cursor: default; }
.wb-cj-mode b { font-size: 15px; font-weight: 600; }
.wb-cj-mode small, .wb-cj-total small { grid-column: 1 / -1; color: var(--ink-3); font-size: 12.5px; }
.wb-cj-carte { padding-left: 22px; }
.wb-cj-sous { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin-left: 6px; padding: 4px 0 6px 16px; border-left: 2px solid var(--rule-2); color: var(--ink-2); font-size: 13px; }
.wb-cj-total { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--rule-2); }
.wb-cj-total > :nth-child(2) { font-size: 17px; font-weight: 600; color: var(--ink); }
.wb-cj-annule td { color: var(--ink-3); text-decoration: line-through; }
.wb-cj-annule .wb-cj-etiquette { display: inline-block; margin-left: 6px; text-decoration: none; font-size: 12px; }
.wb-cj-geste td { color: var(--ink-2); white-space: normal; } /* le motif libre se replie au lieu d'élargir la colonne */
.wb-cj-gestes { display: grid; gap: 8px; }
.wb-cj-aide { font-size: 12.5px; color: var(--ink-3); margin: 0; }
/* Volet ouvert ou fenêtre moyenne : les mouvements passent sous les deux panneaux. */
.wb-maitre-detail:has(> .wb-detail:not([hidden])) > .wb-cj { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wb-maitre-detail:has(> .wb-detail:not([hidden])) > .wb-cj > .wb-cj-mvts { grid-column: 1 / -1; grid-row: 2; border-left: 0; border-top: 1px solid var(--rule); }
@media (max-width: 1199.98px) {
  .wb-cj, .wb-cj:not(:has(.wb-cj-mvts)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wb-cj-mvts { grid-column: 1 / -1; grid-row: 2; border-left: 0; border-top: 1px solid var(--rule); }
}
@media (max-width: 767.98px) {
  .wb-cj, .wb-cj:not(:has(.wb-cj-mvts)) { grid-template-columns: minmax(0, 1fr); }
  .wb-cj-mvts { grid-row: auto; }
  .wb-cj > * + * { border-left: 0; border-top: 1px solid var(--rule); }
}

/* ── Collaborateurs et absences (?page=collaborateurs, collaborateur) ── */
@media screen {
  .wb-collaborateurs-page {
    padding-bottom: 2rem;
  }

  /* ── Fiche `?page=collaborateur`, en dossier (gabarit B, `css/registre.css`) ──
     Manchette : les moyens de joindre ; sécurité en lignes libellé · fait · geste ; activité : compteurs non nuls. */
  .wb-collab-joindre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; font-size: 13.5px; }
  /* Flex qui passe à la ligne : en grille, un geste large (« Envoyer un lien… ») écrasait le fait en une colonne de mots. */
  .wb-collab-secu > div { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: center;
    padding: 8px 0; border-bottom: 1px solid var(--rule); }
  .wb-collab-secu dt { flex: 0 0 140px; }
  .wb-collab-secu dd:not(.wb-collab-secu-geste) { flex: 1 1 12rem; }
  .wb-collab-secu .wb-collab-secu-geste { margin-left: auto; }
  #wb-ch-nouvelle { white-space: nowrap; flex: none; }
  #wb-collab-fs-horaires .dossier-h2 .dossier-fait { white-space: nowrap; }
  .wb-collab-secu > div:first-child { padding-top: 0; }
  .wb-collab-secu dt { font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
  .wb-collab-secu dd { margin: 0; min-width: 0; font-size: 13.5px; }
  .wb-collab-secu dd small { display: block; font-size: 12.5px; color: var(--ink-3); }
  .wb-collab-secu .wb-collab-secu-geste { text-align: right; white-space: nowrap; }
  .wb-collab-dossier-ligne > .wb-dossier { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; }
  .wb-collab-dossier-ligne > .wb-dossier > li { border: 0; padding: 0; }
  .wb-collab-dossier-ligne > .wb-dossier > li:has(> .wb-dossier-nul) { display: none; }
  .wb-collab-dossier-ligne > .wb-dossier > li > a { display: inline-flex; flex-direction: row-reverse; align-items: baseline; gap: 6px; }
  .wb-collab-dossier-ligne .mono { font-size: 17px; font-weight: 600; color: var(--ink); }
  /* Tout à zéro (un externe) : la section part avec son titre. */
  #wb-collab-dossier-bloc:has(> .wb-collab-dossier-ligne > .wb-dossier):not(:has(.wb-dossier a)) { display: none; }
  /* Collaborateur sans compte ni activité : la colonne du centre garde sa place, sans cadre vide. */
  .dossier-centre:has(> #wb-collab-securite[hidden]):has(> #wb-collab-histo-bloc[hidden]):not(:has(#wb-collab-dossier-bloc:not([hidden]) .wb-dossier a)) {
    background: none; border-color: transparent; }
  /* Pas un `.wb-dossier` : ses lignes portent un geste, que `.wb-dossier > li > a` étirerait en ligne entière. */
  .wb-collab-absences { list-style: none; margin: 0; padding: 0; }
  .wb-collab-absences > li { border-bottom: 1px solid var(--rule); }
  .wb-collab-cal-container {
    min-height: 400px;
  }

  /* Teinte d'un type : un jeton, lu par la même classe pour la légende, la barre (`classesBarre()`)
     et la liste d'absences de la fiche, d'où cette feuille aussi servie par `app/pages/collaborateur.php`. */
  .wb-abs-type-0, .wb-abs-bord-0 { --abs-teinte: var(--etat-attention); }
  .wb-abs-type-1, .wb-abs-bord-1 { --abs-teinte: var(--etat-ecart); }
  .wb-abs-type-2, .wb-abs-bord-2 { --abs-teinte: var(--etat-neutre); }
  .wb-abs-type-3, .wb-abs-bord-3 { --abs-teinte: var(--etat-ok); }

  .wb-abs-type-0,
  .wb-abs-type-1,
  .wb-abs-type-2,
  .wb-abs-type-3 { background: var(--abs-teinte); }

  /* Par le jeton du moteur, pas par `background` : `event-calendar.min.css` se charge après cette feuille
     et gagnerait à spécificité égale. */
  .ec-event.wb-abs-type-0,
  .ec-event.wb-abs-type-1,
  .ec-event.wb-abs-type-2,
  .ec-event.wb-abs-type-3 {
    --ec-event-bg-color: var(--abs-teinte);
    /* Mot de papier : les teintes sont pleines. */
    --ec-event-text-color: var(--paper);
  }

  /* Fermeture sans type : `--rule`, le retrait, distinct de la récupération (`--etat-neutre`), comme sa légende.
     Sert le repli de `classesBarre()` pour un événement sans type ; sur le planning, une fermeture est un fond. */
  .ec-event.wb-abs-fermeture {
    --ec-event-bg-color: var(--rule);
    --ec-event-text-color: var(--ink);
    --abs-teinte: var(--rule);
  }

  /* Calendrier ressources (vkurko/event-calendar) — ajustements UX ------------ */

  /* Largeur des créneaux : option JS `slotWidth`, jamais `--ec-slot-width` en CSS (les barres ne se réaligneraient pas). */

  /* Vue Mois : `--ec-col-width` est posée en ligne par `ajusteLargeurCreneaux()` (deux créneaux par jour) ;
     pas de largeur fixe en CSS. */

  /* Étiquettes « 00 h / 12 h » des créneaux illisibles une fois rétrécies : masquées,
     la séparation matin/après-midi reste visible via le traitillé ci-dessous. */
  .wb-collab-cal-container .ec-slots .ec-slot time {
    visibility: hidden;
  }
  /* L'en-tête tient sur une ligne : la rangée des créneaux part, le traitillé de mi-journée reste dans le corps. */
  .wb-collab-cal-container .ec-header .ec-slots { display: none; }
  /* La case des jours : lavis, mono, la date puis la note du jour (`dayHeaderFormat()`) ;
     filet d'encre dessous, comme un tableau de la charte. */
  .wb-collab-cal-container .ec-header .ec-col-head,
  .wb-collab-cal-container .ec-header .ec-sidebar {
    background-color: var(--wash);
    border-block-end: 1px solid var(--ink);
    font-family: var(--fonte-mono);
    font-size: 12px;
    color: var(--ink);
    padding: .35rem .4rem;
    min-block-size: 2.6rem;
  }
  .wb-collab-cal-container .ec-header .ec-col-head > time {
    position: static;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    block-size: 100%;
    line-height: 1.25;
    min-inline-size: 0;
  }
  .wb-collab-cal-container .wb-collab-jour { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wb-collab-cal-container .wb-collab-jour-note {
    font-size: 12px;
    letter-spacing: 0;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wb-collab-cal-container .ec-header .ec-sidebar {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    padding-inline: .75rem;
  }
  .wb-collab-cal-container .ec-header .ec-sidebar .wb-collab-periode { color: var(--ink); font-size: 12px; }
  .wb-collab-cal-container .wb-collab-titre-nom { text-align: start; }
  .wb-collab-cal-container .ec-header .ec-col-head.ec-sun { color: var(--ink-3); }

  /* Traitillé à mi-jour (matin / après-midi) : un jour vaut deux créneaux ; exclu de la vue Année. */
  .wb-collab-cal-container .ec-timeline:not(.ec-year-view) .ec-day {
    position: relative;
  }
  .wb-collab-cal-container .ec-timeline:not(.ec-year-view) .ec-day::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    border-inline-start: 1px dashed var(--ec-border-color, #dee2e6);
    pointer-events: none;
  }

  /* Pleine largeur : event-calendar retire `--ec-event-col-gap` de chaque pastille, même seule ;
     le contenu porte `data-wb-ouvre`, ce qu'il ne couvre pas est du clic perdu. */
  .wb-collab-cal-container .ec-events { column-gap: var(--ec-event-col-gap, 2px); }
  /* Barres et cases partagent les mêmes colonnes, sans écart ; deux barres se séparent par leur filet de papier. */
  .wb-collab-cal-container .ec-body .ec-events { column-gap: 0; }
  .wb-collab-cal-container .ec-event { inline-size: 100%; }
  .wb-collab-cal-container .ec-timeline .ec-event {
    border-radius: 0;               /* la charte : ni coin arrondi, ni ombre */
    border-inline-end: 1px solid var(--paper);
  }

  /* La barre remplit sa ligne (le plugin pose `block-size: max-content`) et porte son mot (JS) : les deux vont ensemble.
     `--wb-collab-barre`, posée sur `.ec-main` avec `--ec-grid-rows`, vaut une barre : deux absences à l'heure s'empilent.
     Pas de marge basse : une absence n'en chevauche pas une autre. */
  .wb-collab-cal-container .ec-timeline .ec-event {
    block-size: var(--wb-collab-barre, 100%);
    margin-block-end: 0;
    align-items: stretch;
    padding: 0;
    /* Bornée à son aire de grille : le plugin suppose des jours égaux, le dimanche est à demi. */
    max-inline-size: 100%;
    /* Le mot long ou le mot court se choisit d'après la largeur réelle de la barre. */
    container-type: inline-size;
  }
  /* Les fonds (`.ec-bg-event`) aussi : même largeur écrite en pixels par le plugin. */
  .wb-collab-cal-container .ec-timeline .ec-bg-event { max-inline-size: 100%; }
  .wb-collab-cal-container .ec-timeline .ec-event-body { align-items: stretch; }
  .wb-collab-cal-container .wb-collab-ev,
  .wb-collab-cal-container .wb-collab-pied-mot,
  .wb-collab-cal-container .wb-collab-selection {
    flex: 1 1 auto;
    min-inline-size: 0;
    block-size: 100%;
    display: flex;
    align-items: center;
    padding-inline: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    line-height: 1;
  }

  /* Le mot sur fond plein se lit en papier. */
  .wb-collab-cal-container .wb-collab-ev {
    color: var(--paper);
    font-family: var(--fonte-mono);
    font-weight: 500;
    letter-spacing: .01em;
  }
  /* Le mot suit la place : titre entier, mot court, puis rien.
     La barre elle-même est le conteneur (`container-type`), pas la fenêtre. */
  .wb-collab-cal-container .wb-collab-ev-court { display: none; }
  @container (max-width: 190px) {
    .wb-collab-cal-container .wb-collab-ev-long { display: none; }
    .wb-collab-cal-container .wb-collab-ev-court { display: inline; }
  }
  @container (max-width: 34px) {
    .wb-collab-cal-container .wb-collab-ev-court { display: none; }
  }

  /* ══ Une absence à l'heure : une trame (`--trame-indispo`), pas un aplat ═════
     La personne est là, sauf une heure ; même hachure que le planning d'atelier. Le mot repasse en encre. */
  .wb-collab-cal-container .ec-event.wb-abs-heures {
    background-color: var(--paper);
    background-image: var(--trame-indispo);
    border-inline-start: 3px solid var(--abs-teinte, var(--ink-2));
  }
  .wb-collab-cal-container .ec-event.wb-abs-heures .wb-collab-ev { color: var(--ink); }

  /* Même trame pour le carré de la liste d'absences de la fiche ; le filet porte la teinte,
     que la hachure seule ne dirait plus à cette taille. */
  .wb-legende-teinte.wb-abs-heures {
    background-color: var(--paper);
    background-image: var(--trame-indispo);
    border-color: var(--abs-teinte, var(--rule-2));
  }

  /* Deux absences à l'heure dans une demi-journée s'empilent à pleine largeur ;
     `js/collaborateurs-calendrier.js` compte les pistes et double la hauteur de la ligne. */

  /* La sélection en cours dit sa durée : encre sur papier, comme un aperçu. */
  .wb-collab-cal-container .ec-event.ec-preview {
    background-color: var(--actif) !important;
  }
  .wb-collab-cal-container .wb-collab-selection {
    color: var(--paper);
    font-family: var(--fonte-mono);
    justify-content: flex-end;
  }

  /* ── La ligne « absents » : une ressource, pas une ligne de pied ─────────────
     La bibliothèque ne rend pas de ligne de pied, et une ligne hors grille se décalerait au défilement. */
  .wb-collab-cal-container .ec-event.wb-collab-pied-ev {
    background-color: transparent !important;
    color: var(--ink-2);
    /* Le lavis est sur la case (`.wb-collab-pied-case`) ; la pastille n'est pas saisissable. */
    pointer-events: none;
  }
  /* Ligne « absents » : filet d'encre dessus, lavis sur toute la ligne, mot en mono. `:has()` car la bibliothèque
     n'offre pas de classe par ressource (marque posée par `resourceLabelContent()`). */
  .wb-collab-cal-container .ec-row-head:has(.wb-collab-pied-tete),
  .wb-collab-cal-container .ec-day.wb-collab-pied-case {
    --ec-day-bg-color: var(--wash);   /* sinon le plugin raye le lavis de blanc, tous les deux pixels */
    background-color: var(--wash);
    border-block-start: 1px solid var(--ink);
  }
  .wb-collab-cal-container .ec-row-head:has(.wb-collab-pied-tete) .wb-collab-nom {
    font-family: var(--fonte-mono);
    font-size: 12px;
    font-weight: 400;
    color: var(--ink-2);
  }
  .wb-collab-cal-container .wb-collab-pied-mot {
    color: var(--ink-2);
    font-family: var(--fonte-mono);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    line-height: 1.1;
  }
  .wb-collab-cal-container .wb-collab-pied-n,
  .wb-collab-cal-container .wb-collab-pied-tension {
    max-inline-size: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wb-collab-cal-container .wb-collab-pied-tension { color: var(--red); font-weight: 600; font-size: 12px; }

  /* ── La colonne de titre porte le total de la période ──────────────────────
     Nom et total partagent `.ec-row-head` (`resourceLabelContent()`), total à largeur fixe aligné à droite.
     `display: flex` redit pour ne pas dépendre de la feuille du plugin ; colonne bornée pour laisser la place au temps. */
  .wb-collab-cal-container .ec-row-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-align: start;
    max-inline-size: 19.5rem;
  }
  /* La bibliothèque enveloppe le contenu dans un `<span>` sans classe : `display: contents` rend
     nom et total enfants directs de la boîte flexible. */
  .wb-collab-cal-container .ec-row-head > span { display: contents; }
  .wb-collab-cal-container .wb-collab-nom {
    flex: 1 1 auto;
    min-inline-size: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wb-collab-cal-container .wb-collab-role {
    flex: 0 0 auto;
    max-inline-size: 6rem;
    font-family: var(--fonte-mono);
    font-size: 12px;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Le rôle n'a sa place que sur un écran large : sur un portable, il coûterait
     la largeur d'une demi-journée. */
  @media (max-width: 1599.98px) {
    .wb-collab-cal-container .wb-collab-role { display: none; }
  }
  @media (min-width: 1600px) {
    .wb-collab-cal-container .ec-row-head,
    .wb-collab-cal-container .ec-header .ec-sidebar { max-inline-size: 22rem; }
  }
  .wb-collab-cal-container .wb-collab-periode {
    flex: 0 0 5.5rem;
    text-align: end;
    font-family: var(--fonte-mono);
    font-size: 12px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── Les fonds de repère : aujourd'hui, férié, dimanche ──────────────────────
     À spécificité égale, l'ordre tranche : dimanche, férié, aujourd'hui. Le samedi n'est pas peint (ouvert le matin). */
  /* Fond plein et variable du plugin : son dégradé de 2 px raye la couleur ; la variable garde `.ec-no-ieb` d'accord. */
  .wb-collab-cal-container .ec-day.ec-sun { --ec-day-bg-color: var(--wash); background-color: var(--wash); }
  .wb-collab-cal-container .ec-day.ec-highlight { --ec-day-bg-color: var(--repere-ferie-w); background-color: var(--repere-ferie-w); }
  .wb-collab-cal-container .ec-day.ec-today { --ec-day-bg-color: var(--repere-aujourdhui-w); background-color: var(--repere-aujourdhui-w); }

  .wb-collab-cal-container .ec-col-head.ec-sun,
  .wb-collab-cal-container .ec-slots.ec-sun { background-color: var(--wash); }
  .wb-collab-cal-container .ec-col-head.ec-highlight,
  .wb-collab-cal-container .ec-slots.ec-highlight { background-color: var(--repere-ferie-w); }
  .wb-collab-cal-container .ec-col-head.ec-today,
  .wb-collab-cal-container .ec-slots.ec-today { background-color: var(--repere-aujourdhui-w); }

  /* ── La case visée au clavier ────────────────────────────────────────────────
     Les `.ec-day` du plugin deviennent focusables ; un demi-filet dit si l'on vise le matin ou l'après-midi. */
  .wb-collab-cal-container .ec-day.wb-case-visee {
    outline: 2px solid var(--actif);
    outline-offset: -2px;
  }
  .wb-collab-cal-container .ec-day.wb-case-visee--matin,
  .wb-collab-cal-container .ec-day.wb-case-visee--aprem { outline: none; }
  .wb-collab-cal-container .ec-day.wb-case-visee--matin::before,
  .wb-collab-cal-container .ec-day.wb-case-visee--aprem::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inline-size: 50%;
    border: 2px solid var(--actif);
    pointer-events: none;
  }
  .wb-collab-cal-container .ec-day.wb-case-visee--matin::before { inset-inline-start: 0; }
  .wb-collab-cal-container .ec-day.wb-case-visee--aprem::before { inset-inline-start: 50%; }
  .wb-collab-cal-container .ec-day:focus { outline: none; }
  .wb-collab-cal-container .ec-day:focus-visible {
    outline: 2px solid var(--actif);
    outline-offset: -2px;
  }

  /* Teinte d'un type en filet sur un segment du volet : un segment choisi est déjà plein d'encre. */
  .wb-abs-bord-0,
  .wb-abs-bord-1,
  .wb-abs-bord-2,
  .wb-abs-bord-3 { border-inline-start: 4px solid var(--abs-teinte); }

  /* Événements non allDay : l'heure que le plugin affiche (« 0:00 ») est masquée. */
  .wb-collab-cal-container .ec-event-time {
    display: none !important;
  }

  /* ══ Vue « Horaires » : la grille équipe × semaine ═══════════════════════════
     La colonne des noms reste collée au défilement horizontal. */
  .wb-ch-grille {
    table-layout: fixed;
  }

  .wb-ch-grille th,
  .wb-ch-grille td {
    vertical-align: middle;
  }

  .wb-ch-col-nom {
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    background: var(--bs-body-bg);
    min-width: 12rem;
  }

  .wb-ch-grille thead .wb-ch-col-nom,
  .wb-ch-grille tfoot .wb-ch-col-nom {
    background: var(--bs-secondary-bg, #e9ecef);
  }

  /* Une plage = une pastille. Les lire empilées vaut mieux qu'une phrase :
     « 08:00–12:00 13:30–18:00 » se compte d'un regard. */
  .wb-ch-plage {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    margin: 0.05rem 0;
    border-radius: 0.25rem;
    background: var(--bs-primary-bg-subtle, #cfe2ff);
    color: var(--bs-primary-text-emphasis, #052c65);
    font-family: var(--bs-font-monospace);
    font-size: 0.78rem;
    white-space: nowrap;
  }

  /* Un jour non travaillé se grise ; en rouge, un temps partiel ressemblerait à une anomalie. */
  .wb-ch-grille .wb-ch-vide {
    opacity: 0.45;
  }

  /* Le champ d'un jour illisible, dans le tiroir. */
  #wb-ch-jours .form-control.is-invalid {
    border-color: var(--bs-danger, #dc3545);
  }

  /* Fond « hors contrat » (jour non travaillé, garage fermé) : retire du relief, sans ressembler à une absence. */
  .wb-collab-cal-container .wb-collab-cal-horscontrat {
    background-color: var(--wash) !important;
    opacity: 1;
  }
  /* Fermeture du garage : un fond plus sombre que le « hors horaire », pas une absence. */
  .wb-collab-cal-container .wb-collab-cal-ferme {
    background-color: var(--rule) !important;
    opacity: 1;
  }

  /* La liste partage la largeur entre ses colonnes (`fitColumns`) : plafonnée à 2 400 px,
     sans quoi un écran ultra-large écarte les colonnes au point de perdre la ligne. */
  #wbCollabPaneListe {
    max-width: 2400px;
  }
}

/* ── Calendrier des locations (?page=locations) ── */
@media screen {
  /* ── Conteneur principal ────────────────────────────────────────────────────── */

  .wb-locations-page {
    padding-bottom: 2rem;
  }

  /* Défilement horizontal si la grille dépasse l'écran. */
  .wb-cal-scroll-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Tableau ──────────────────────────────────────────────────────────────────── */

  .wb-cal-table {
    table-layout: fixed;
    border-collapse: collapse;
  }

  /* Colonne véhicule collée à gauche pendant le défilement horizontal. */
  .wb-cal-th-vhc,
  .wb-cal-td-vhc {
    position: sticky;
    left: 0;
    z-index: 4;
    width: 175px;
  }

  /* Les cellules collées doivent masquer ce qui défile dessous : Bootstrap peint `--bs-table-bg`
     (transparent) en (0,1,1), quel que soit l'ordre des feuilles ; on pose donc le fond par ce jeton. */
  .wb-cal-td-vhc { --bs-table-bg: var(--panel); }
  .wb-cal-th-vhc,
  .wb-cal-th-jour,
  .wb-cal-th-slot,
  .wb-cal-section-row td { --bs-table-bg: var(--wash); }
  .wb-cal-th-jour.wb-cal-today,
  .wb-cal-th-slot.wb-cal-today,
  .wb-cal-td-slot.wb-cal-today { --bs-table-bg: var(--repere-aujourdhui-w); }
  .wb-cal-th-jour.wb-cal-weekend,
  .wb-cal-th-slot.wb-cal-weekend,
  .wb-cal-td-slot.wb-cal-weekend { --bs-table-bg: var(--wash); }

  .wb-cal-th-vhc {
    background: var(--wash);
    font-size: .8rem;
    vertical-align: middle;
    white-space: nowrap;
  }

  .wb-cal-th-jour {
    font-size: .78rem;
    white-space: nowrap;
    background: var(--wash);
    padding: 4px 2px;
  }

  .wb-cal-th-slot {
    font-size: 12px;
    color: var(--ink-3);
    background: var(--wash);
    padding: 2px 0;
    font-weight: 400;
    font-family: var(--fonte-mono);
    font-variant-numeric: tabular-nums;
  }

  /* L'en-tête de jour est un libellé : plus discret que la donnée qu'il annonce. */
  .wb-cal-jour-nom {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
  }

  .wb-cal-jour-date {
    font-size: 12px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }

  /* Séparation nette entre les jours (frontière = 1re tranche du jour). */
  .wb-cal-jour-debut {
    border-left: 2px solid var(--rule-2);
  }

  /* Jour courant : même repère que les autres calendriers (`--repere-aujourdhui-w`). */
  .wb-cal-th-jour.wb-cal-today,
  .wb-cal-th-slot.wb-cal-today,
  .wb-cal-td-slot.wb-cal-today {
    background: var(--repere-aujourdhui-w) !important;
  }

  /* Samedi et dimanche. */
  .wb-cal-th-jour.wb-cal-weekend,
  .wb-cal-th-slot.wb-cal-weekend,
  .wb-cal-td-slot.wb-cal-weekend {
    background: var(--wash);
    color: var(--ink-3);
  }

  /* ── Sections par type de véhicule ─────────────────────────────────────────────── */

  /* La cellule couvre toute la largeur : c'est le libellé qui se colle, sinon il part avec le défilement. */
  .wb-cal-section-lbl {
    position: sticky;
    left: 8px;
  }
  .wb-cal-section-row td {
    background: var(--wash);
    font-weight: 600;
    font-size: 12px;
    padding: 4px 8px;
    color: var(--ink-3);
  }

  /* ── Repère de période collé (mis à jour au défilement, non cliquable) ──────── */

  /* Repère de lecture, pas une alerte : à l'encre, dans un filet. */
  .wb-cal-periode-sticky {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 5;
    display: inline-block;
    background: var(--panel);
    border: 1px solid var(--rule-2);
    color: var(--ink);
    font-family: var(--fonte-mono);
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    pointer-events: none;
  }

  /* ── Cellules corps ─────────────────────────────────────────────────────────── */

  .wb-cal-td-vhc {
    font-size: .78rem;
    padding: 4px 6px;
    overflow: hidden;
    background: var(--panel);
    border-right: 2px solid var(--rule-2);
    line-height: 1.15;
  }

  .wb-cal-vhc-marque {
    font-weight: 600;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wb-cal-vhc-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
  }

  .wb-cal-vhc-plaque {
    font-size: 12px;
    color: var(--ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Badge puissance/permis compact (base `.wb-permis-badge` dans `css/registre.css`) :
     la colonne véhicule est plus étroite ici que dans la vue liste. */
  /* La plaque distingue deux motos du même modèle : c'est le badge qui se resserre. */
  .wb-cal-vhc-sub .wb-cal-vhc-plaque { flex-shrink: 0; }
  .wb-cal-vhc-sub .wb-permis-badge {
    font-size: 12px;
    padding: 1px 6px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wb-cal-td-slot {
    padding: 1px;
    vertical-align: top;
    position: relative;
    min-height: 32px;
    height: 32px;
    cursor: pointer;
    transition: background .1s;
  }

  .wb-cal-td-slot:hover {
    background: var(--wash);
  }

  /* Case masquée derrière un segment multi-colonnes. */
  .wb-cal-td-covered {
    cursor: default;
  }

  .wb-cal-td-covered:hover {
    background: inherit;
  }

  /* La case libre entre dans le parcours clavier (`Entrée` ouvre un contrat pré-rempli) :
     même trait de focus que la barre. */
  .wb-cal-td-slot:focus-visible {
    outline: 2px solid var(--actif);
    outline-offset: -2px;
    position: relative;
    z-index: 3;
  }

  /* ── Segments de location ───────────────────────────────────────────────────── */

  /* Ni coin ni ombre : c'est l'objet le plus répété de la page. */
  .wb-cal-segment {
    position: absolute;
    top: 3px;
    left: 2px;
    height: calc(100% - 6px);
    min-height: 26px;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    transition: filter .15s;
  }

  /* Trait de focus de la charte : la barre s'atteint à Tab comme tout contrôle. */
  .wb-cal-segment:hover {
    filter: brightness(.96);
    z-index: 3;
  }
  .wb-cal-segment:focus-visible {
    outline: 2px solid var(--actif);
    outline-offset: -2px;
    z-index: 3;
  }

  /* ── Couleurs par étape ──────────────────────────────────────────────────────── */

  /* Un lavis, un filet, une encre ; le nom du client reste d'encre ordinaire, pour se lire. */

  /* Réservé — rien à faire encore. */
  .wb-etape-reserve {
    background: var(--etat-neutre-w);
    color: var(--ink);
    border-left: 3px solid var(--etat-neutre);
  }

  /* En cours — le véhicule est dehors. */
  .wb-etape-en-cours {
    background: var(--actif-w);
    color: var(--ink);
    border-left: 3px solid var(--actif);
  }

  /* Parti et en retard — la barre court jusqu'à maintenant ; cadre entier pour la distinguer de « Rentré ». */
  .wb-etape-en-retard {
    background: var(--red-w);
    color: var(--ink);
    border: 1px solid var(--red);
    border-left-width: 3px;
  }

  /* Retour facturé — impayé : à vérifier. */
  .wb-etape-retour-facture {
    background: var(--etat-attention-w);
    color: var(--ink);
    border-left: 3px solid var(--etat-attention);
  }

  /* Retour facturé — payé : conforme, l'affaire est close. */
  .wb-etape-retour-facture-paye {
    background: var(--etat-ok-w);
    color: var(--ink);
    border-left: 3px solid var(--etat-ok);
  }

  /* Retour non facturé — un véhicule rendu que personne n'a facturé. */
  .wb-etape-retour-non-facture {
    background: var(--etat-ecart-w);
    color: var(--ink);
    border-left: 3px solid var(--etat-ecart);
  }

  /* ── Prêt : une location gratuite ───────────────────────────────────────────── */

  /* Texture et bord tireté, pas une sixième couleur : le prêt garde la teinte de son étape.
     Reste après les `.wb-etape-*` : leur raccourci `background` remet `background-image` à `none`. */
  .wb-cal-segment-pret {
    background-image: var(--trame-indispo);
    border-left-style: dashed;
  }

  /* `flex: 0 0 auto` : sur une barre étroite, l'icône ne s'écrase pas avant le nom. */
  .wb-cal-segment-icone {
    flex: 0 0 auto;
    margin-right: 4px;
    font-size: .82em;
    opacity: .85;
  }

  /* ── Légende ────────────────────────────────────────────────────────────────── */

  .wb-cal-legende {
    flex-wrap: wrap;
  }

  /* Légende de la charte (`.wb-legende-*`, `css/registre.css`) avec les classes `.wb-etape-*` ;
     sans le filet de 3 px, qui mangerait le tiers d'un carré de `.7em`. */
  .wb-cal-legende .wb-legende-teinte {
    border-left-width: 1px;
    border-left-color: var(--rule-2);
  }

  /* Le repère de prêt dans la légende : même texture que sur la grille. */
  .wb-cal-teinte-pret {
    background-color: var(--wash);
    border-left-style: dashed;
    background-image: var(--trame-indispo);
  }
}

/* ── Calendrier des livraisons (?page=livraisons) ── */
@media screen {
  /* La livraison : panneau sur le papier de la grille, filet dessous ; ses lignes sont dans `css/registre.css`.
     Pleine largeur : event-calendar retire `--ec-event-col-gap` de chaque pastille, même seule ;
     la séparation revient à la gouttière. */
  #lcEventCalendar .ec-events { column-gap: var(--ec-event-col-gap, 2px); }
  #lcEventCalendar .ec-event {
    inline-size: 100%;
    padding: .25rem .45rem;
    background-color: var(--panel);
    border-bottom: 1px solid var(--rule);
    font-size: .8rem;
    line-height: 1.3;
  }
  /* Le survol est un lavis, pas un soulèvement. */
  #lcEventCalendar .ec-event:hover { background-color: var(--wash); }
  /* Le mois est une feuille blanche (rien à nu sur le gris) ; la carte s'en détache par son filet. */
  #lcEventCalendar .ec.ec-month-view { --ec-bg-color: var(--panel); }
  #lcEventCalendar .ec-month-view .ec-event { border: 1px solid var(--rule); }

  /* Le contenu porte `data-wb-ouvre` : ce qu'il ne couvre pas est du clic perdu, d'où le `flex: 1`. */
  #lcEventCalendar .lc-ev {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  /* `wb-fj-quand` porte « Luca F. », tronqué par l'ellipse. */
  #lcEventCalendar .wb-fj-quand { overflow: hidden; text-overflow: ellipsis; }

  #lcEventCalendar .ec-time-grid .ec-line {
    height: 3em !important;
  }

  #lcEventCalendar .ec-row-head {
    color: var(--ink-3);
  }
}

/* ── ?page=absences-releve ── */
/* Le relevé s'imprime pour la fiduciaire : sans critères ni volet, et la grille rend toutes ses lignes. */
@media print {
  .wb-absr-page .wb-outils,
  .wb-absr-page .wb-detail,
  .wb-absr-page .tabulator-footer { display: none !important; }
  /* La hauteur fixe de la grille coupe la liste à la première feuille. */
  .wb-absr-page .tabulator,
  .wb-absr-page .tabulator .tabulator-tableholder {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .wb-absr-page .tabulator-row { break-inside: avoid; }
  .wb-absr-page .wb-absr-periode { border-bottom: 1px solid var(--rule); }
}

/* ── ?page=banque ── */
.wb-banque-ebics { font-size: .85rem; color: var(--ink-2); margin: 0 0 .75rem; }

/* ── ?page=banque-ebics ── */
.wb-ebics-intro { font-size: .9rem; max-width: 46rem; }
.wb-ebics-etat { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; font-size: .9rem; margin: 0 0 1rem; }
.wb-ebics-etat dt { font-weight: 600; }
.wb-ebics-etat dd { margin: 0; }
/* La lettre est une feuille A4 : elle se lit à l'écran comme elle s'imprime. */
.wb-ebics-lettre { max-width: 46rem; background: var(--paper); border: 1px solid var(--rule); padding: 2rem 2.5rem; margin-bottom: 1rem; }
.wb-ebics-lettre h2 { font-size: 1.15rem; font-weight: 600; margin: 1.5rem 0 1rem; }
.wb-ebics-lettre h3 { font-size: .95rem; font-weight: 600; margin: 1.25rem 0 .25rem; }
.wb-ebics-lettre p { margin: 0 0 .5rem; }
.wb-ebics-ids th { font-weight: 400; color: var(--ink-2); padding: .1rem 1.5rem .1rem 0; }
.wb-ebics-ids td { font-weight: 600; }
.wb-ebics-lettre pre { font-family: var(--fonte); font-variant-numeric: tabular-nums; font-size: .95rem; letter-spacing: .03em; margin: 0; }
.wb-ebics-cle { break-inside: avoid; }
.wb-ebics-lettre .wb-ebics-confirme { margin-top: 1.5rem; }
.wb-ebics-signature { display: grid; grid-template-columns: 1fr 1.5fr 1.5fr; gap: 1.5rem; margin-top: 3.5rem; }
.wb-ebics-signature > div { border-top: 1px solid var(--ink); padding-top: .25rem; font-size: .8rem; color: var(--ink-2); }

@media print {
  body:has(.wb-ebics-lettre) .wb-pagebar,
  .wb-ebics-intro,
  .wb-ebics-etat { display: none !important; }
  .wb-ebics-lettre { border: 0; padding: 0; max-width: none; }
}

/* ── ?page=commande ── */
/* La carte des gestes (Dupliquer, Supprimer) ne paraît pas vide sur un document neuf. */
.cmd-gestes:not(:has(.btn:not(.d-none))) { display: none; }
/* Poignée de glisser-déposer : API HTML5 native. */
.wb-cmd-table .wb-cmd-poignee { cursor: grab; color: var(--bs-secondary-color); }
.wb-cmd-table tr.wb-cmd-drag   { opacity: .4; }
/* Repère de dépôt et focus en `--ink` : `--bs-primary` n'est pas retaillé par la charte. */
.wb-cmd-table tr.wb-cmd-cible  { border-top: 2px solid var(--ink); }
/* Spécificité de `.table > tbody td` : sans elle, la marge de 10 px des grilles l'emporte et la table déborde à 1440 px. */
.wb-cmd-table > thead th,
.wb-cmd-table > tbody td,
.wb-cmd-table > tfoot td       { padding-left: .4rem; padding-right: .4rem; }
.wb-cmd-table .wb-cmd-ref input { min-width: 0; }
/* Les cases (« gras », « Forfait ») gardent leur dessin : sans bord ni fond, une case vide disparaît. */
.wb-cmd-table input:not([type=checkbox]),
.wb-cmd-table textarea         { border: 0; background: transparent; width: 100%; padding: .1rem .2rem; }
/* Le texte s'agrandit avec ses lignes : pas de poignée. */
.wb-cmd-table textarea         { resize: none; }
/* Sans largeur propre, un champ ne gonfle pas sa colonne : la place en trop va à la désignation. */
.wb-cmd-table input:not([type=checkbox]) { contain: inline-size; }
.wb-cmd-table input.wb-cmd-majoration { color: var(--etat-attention); }
.wb-cmd-table input.wb-cmd-rabais-main { background: var(--etat-attention-w); border-color: var(--etat-attention); }
.wb-cmd-table input.wb-cmd-rabais-hors { background: var(--red-w); border-color: var(--red); color: var(--red); font-weight: 600; }
/* Sous la désignation d'une ligne au-delà de la grille : la marque, et la marge pour qui peut l'accorder. */
.wb-cmd-hors-grille { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .15rem; font-size: .75rem; color: var(--ink-2); }
.wb-cmd-perte { color: var(--red); font-weight: 600; }
.wb-cmd-table input:not([type=checkbox]):focus,
.wb-cmd-table textarea:focus   { background: var(--panel); outline: 2px solid var(--ink); }
.wb-cmd-table tr[data-type="inter"],
.wb-cmd-table tr[data-type="partiel"],
.wb-cmd-table tr[data-type="partiel2"] { background: var(--bs-tertiary-bg); font-weight: 600; }
.wb-cmd-gras textarea          { font-weight: 700; }
/* Commande pièces (colonnes de réception) : les lignes gardent leur largeur, la colonne droite passe dessous plutôt que de les faire défiler. */
.document-corps:has(.wb-cmd-table th[data-col="recu"]:not(.d-none)) > .document-lignes { flex-basis: 80rem; }

/* ── ?page=compta-complet ── */
/* Aucune couleur en dur : jetons de la charte uniquement. */
.wb-cpx-toc { top: 1rem; }
.wb-cpx-toc a {
  display: block; padding: .25rem .5rem;
  font-size: .8125rem; text-decoration: none; color: inherit;
  border-left: 2px solid transparent;
}
.wb-cpx-toc a:hover { background: var(--wash); }
/* Repère en `--ink` : `--bs-primary` n'est pas retaillé par la charte. */
.wb-cpx-toc a.actif { border-left-color: var(--ink); font-weight: 600; }
.wb-cpx-bloc { scroll-margin-top: 1rem; }

/* À l'impression, la colonne du sommaire (masqué par la charte) disparaît aussi. */
@media print {
  .wb-cpx .col-lg-3 { display: none; }
  .wb-cpx .col-lg-9 { flex: 0 0 100%; max-width: 100%; }
}

/* ── ?page=reglage-groupes ── */
.wb-cg-vise { border-left: 2px solid var(--ink); border-right: 2px solid var(--ink); }
.wb-rbac-matrix td:has(.wb-cap:focus-visible) { outline: 2px solid var(--ink); outline-offset: -2px; }

/* ── ?page=reglage-service ── */
/* ── Éditeur matrice (scopé à la page) ─────────────────────────────────────── */
/* Les noms `--svc-*` disent le rôle que lisent les règles ci-dessous. */
.wb-service-page {
  --svc-km:       var(--ink);
  --svc-ok:       var(--ink);
  --svc-ok-soft:  var(--wash);
  --svc-accent:   var(--red);
  --svc-accent-w: var(--red-w);
}
.wb-service-page .wb-svc-identity .form-control-plaintext,
.wb-service-page .wb-svc-identity .form-control { font-size:.9rem; }

/* ── Décodeur VIN par préfixe ─────────────────────────────────────────────── */
.wb-svc-vindec[hidden] { display:none; }
.wb-svc-vindec-suggest {
  border:1.5px solid var(--svc-accent); background:var(--svc-accent-w);
  padding:.75rem 1rem; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:.75rem;
}
.wb-svc-vindec-suggest .bi-lightbulb-fill { color:var(--svc-accent); font-size:1.1rem; }
.wb-svc-vindec-suggest .prefix-old { font-family:var(--fonte-mono); text-decoration:line-through; color:var(--ink-3); }
.wb-svc-vindec-suggest .prefix-new { font-family:var(--fonte-mono); font-weight:700; color:var(--svc-accent); }
.wb-svc-vindec-candidate {
  border:1px solid var(--rule); border-radius:0; padding:.6rem .8rem; margin-bottom:.5rem;
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
}
.wb-svc-vindec-candidate:hover { background:var(--wash); }
.wb-svc-vindec-candidate .meta { font-size:.78rem; color:var(--ink-3); }
.wb-svc-vindec-candidate .title { font-weight:650; }
.wb-svc-vindec-impact table { font-size:.82rem; }
.wb-svc-vindec-impact .stat-total { font-family:var(--fonte-mono); font-size:1.4rem; font-weight:700; color:var(--svc-km); }

/* scroller matrice : la seule zone qui scrolle horizontalement */
.wb-svc-matrix-scroll { overflow:auto; max-height:100%; }
.wb-svc-content { overflow:hidden; display:flex; flex-direction:column; }

table.wb-svc-matrix { border-collapse:separate; border-spacing:0; width:100%; font-size:.85rem; }
table.wb-svc-matrix th, table.wb-svc-matrix td { padding:0; }

/* en-têtes d'intervalles figés en haut */
table.wb-svc-matrix thead th {
  position:sticky; top:0; z-index:4; background:var(--paper);
  border-bottom:1.5px solid var(--rule); vertical-align:bottom;
}
.wb-svc-corner {
  position:sticky; left:0; z-index:6; background:var(--paper);
  text-align:left; padding:.6rem .8rem !important; min-width:250px; width:250px;
  border-right:1.5px solid var(--rule);
  font-size: .75rem; color:var(--ink-3); font-weight:700;
}
.wb-svc-col { padding:.5rem .25rem !important; text-align:center; min-width:60px; }
.wb-svc-col .km { font-family:var(--fonte-mono); font-size:.82rem; font-weight:650; color:var(--svc-km); display:block; line-height:1.1; }
.wb-svc-col.first .km { color:var(--svc-accent); }
.wb-svc-col .unit { font-size: .75rem; color:var(--ink-3); }

/* en-tête de rubrique repliable */
tr.wb-svc-rub td { background:var(--wash); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
tr.wb-svc-rub .wb-svc-corner { background:var(--wash); }
.wb-svc-rub-btn { display:flex; align-items:center; gap:.5rem; width:100%; border:0; background:transparent; cursor:pointer;
  padding:.5rem .8rem; font-size: .75rem; font-weight:700; color:var(--ink); }
.wb-svc-rub-btn .chev { transition:transform .18s ease; font-size: .75rem; color:var(--ink-3); }
tr.wb-svc-rub.collapsed .chev { transform:rotate(-90deg); }
.wb-svc-rub-count { font-family:var(--fonte-mono); font-size: .75rem; color:var(--ink-3);
  background:var(--paper); border:1px solid var(--rule); border-radius:0; padding:0 .5rem; }

/* lignes actions */
tr.wb-svc-act td { border-bottom:1px solid var(--rule); }
tr.wb-svc-act:hover td, tr.wb-svc-act:hover .wb-svc-name { background:var(--wash); }
.wb-svc-name { position:sticky; left:0; z-index:2; background:var(--paper);
  border-right:1.5px solid var(--rule); padding:0 .8rem; height:40px; display:flex; align-items:center; gap:.5rem; }
.wb-svc-name .lbl { flex:1; }
.wb-svc-chip { font-family:var(--fonte-mono); font-size: .75rem; display:inline-flex; align-items:center; gap:.25rem;
  background:var(--paper); color:var(--ink); border:1px solid var(--rule); padding:0 .4rem; cursor:pointer; white-space:nowrap; }
.wb-svc-chip:hover { background:var(--wash); }
.wb-svc-chip.empty { background:transparent; color:var(--ink-3); border:1px dashed var(--rule); opacity:0; }
tr.wb-svc-act:hover .wb-svc-chip.empty, .wb-svc-chip.empty:focus-visible { opacity:1; }
.wb-svc-chip:focus-visible { outline:2px solid var(--ink); outline-offset:1px; }
.wb-svc-art-lien { color:var(--ink-3); font-size:.8rem; }

/* cellules toggle */
td.wb-svc-cell { text-align:center; height:40px; border-left:1px solid var(--rule); cursor:pointer; }
td.wb-svc-cell .dot { width:20px; height:20px; border-radius:0; border:1.5px solid var(--rule); margin:0 auto; display:block; transition:background .12s,border-color .12s,transform .08s; }
td.wb-svc-cell:hover .dot { border-color:var(--svc-km); }
td.wb-svc-cell.on { background:var(--svc-ok-soft); }
td.wb-svc-cell.on .dot { background:var(--svc-ok); border-color:var(--svc-ok); }
td.wb-svc-cell.on .dot::after { content:"✓"; color:var(--panel); font-size: .75rem; font-weight:700; display:block; line-height:17px; }
td.wb-svc-cell.first.on { background:var(--svc-accent-w); }
td.wb-svc-cell.first.on .dot { background:var(--svc-accent); border-color:var(--svc-accent); }
td.wb-svc-cell:active .dot { transform:scale(.85); }
/* Repère de la case atteinte au clavier ; `:focus-visible` pour ne rien laisser au clic. */
td.wb-svc-cell:focus-visible { outline:2px solid var(--ink); outline-offset:-2px; }
/* cellule avec sélecteur de type (action multi-types) */
td.wb-svc-cell select.wb-svc-type-sel { font-size: .75rem; max-width:54px; margin:.15rem auto 0; padding:0 .1rem; }

/* ligne durée figée en bas */
table.wb-svc-matrix tfoot td { position:sticky; bottom:0; z-index:3; background:var(--wash); border-top:1.5px solid var(--rule); height:46px; }
table.wb-svc-matrix tfoot .wb-svc-corner { z-index:7; background:var(--wash); text-transform:none; letter-spacing:0; font-size:.8rem; font-weight:650; color:var(--ink); }
.wb-svc-dur { text-align:center; }
.wb-svc-dur input { width:48px; text-align:center; font-family:var(--fonte-mono); font-size:.82rem; font-weight:600; color:var(--svc-km);
  border:1px solid var(--rule); border-radius:0; padding:.25rem .1rem; background:var(--paper); }

/* légende */
.wb-svc-legend[hidden] { display:none !important; }
.wb-svc-sw { width:14px; height:14px; border-radius:0; border:1.5px solid var(--rule); display:inline-block; vertical-align:-2px; margin-right:.35rem; }
.wb-svc-sw.on { background:var(--svc-ok); border-color:var(--svc-ok); }
.wb-svc-sw.first { background:var(--svc-accent); border-color:var(--svc-accent); }

@media (prefers-reduced-motion: reduce) { .wb-service-page * { transition:none !important; } }

/* ── ?page=reglage-taches-planifiees ── */
.wb-tache-visee { border: 2px solid var(--ink); }

/* ── ?page=controle-adresses ── */
/* Jetons de charte seulement : ni couleur en dur, ni ombre, ni arrondi. */
.wb-cadr-page .wb-cadr-chiffre { border-left: 1px solid var(--rule); padding-left: 10px; }
.wb-cadr-page .wb-cadr-vide { color: var(--ink-3); }
.wb-cadr-page .wb-cadr-suggestion { color: var(--ink-2); }
.wb-cadr-page .wb-cadr-erreur { color: var(--red); }

/* ── ?page=controle-factures ── */
.wb-controle-factures .cf-alerte { border-color: var(--red); }

/* ── ?page=import-vehicules-gabarit ── */
/* Jetons de la charte, pas de couleurs en dur. */
.wb-gab-scene { border: 1px solid var(--rule); background: var(--panel); }
.wb-gab-fond  { position: absolute; inset: 0; width: 100%; height: 100%; }
.wb-gab-zone {
  position: absolute;
  border: 2px solid var(--red);
  background: color-mix(in srgb, var(--red) 12%, transparent);
  cursor: move;
  touch-action: none;   /* sans ça, le doigt fait défiler la page au lieu de glisser */
}
.wb-gab-zone:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.wb-gab-etiquette {
  position: absolute; bottom: 100%; left: 0; white-space: nowrap;
  font: 600 10px/1.4 var(--fonte-mono); color: var(--red); background: var(--panel);
  padding: 0 2px; pointer-events: none;
}
.wb-gab-poignee {
  position: absolute; right: -5px; bottom: -5px; width: 10px; height: 10px;
  background: var(--red); cursor: nwse-resize;
}

/* ── ?page=messages ── */
/* Charte Registre : filets, pas de carte ; la ligne choisie porte un filet
   d'encre dans la marge, jamais un fond plein. */
/* La liste prend la place, le détail reste à une largeur de lecture. */
.wb-msg-page { display: grid; grid-template-columns: minmax(30rem, 1fr) minmax(26rem, 40rem);
  min-height: 70vh; }
.wb-msg-colonne { display: flex; flex-direction: column; overflow: hidden;
  border-right: 1px solid var(--rule); }
.wb-msg-tete { padding: .75rem .875rem; border-bottom: 1px solid var(--rule);
  display: flex; gap: .5rem; align-items: center; }
/* Les quatre filtres : un rang d'onglets plats, le compte en chiffres mono. */
.wb-msg-filtres { display: flex; list-style: none; margin: 0; padding: 0;
  border-bottom: 1px solid var(--rule); }
.wb-msg-filtres > li { flex: 0 0 auto; }
.wb-msg-filtres a { display: block; text-align: center; padding: .375rem .875rem; white-space: nowrap;
  color: var(--ink-3); text-decoration: none; border-bottom: 2px solid transparent; }
.wb-msg-filtres a.wb-msg-actif { color: var(--ink); font-weight: 600;
  border-bottom-color: var(--ink); }
.wb-msg-filtres .n { margin-left: .25rem; }
.wb-msg-filtres > li.wb-msg-filtre-archives { margin-left: auto; border-left: 1px solid var(--rule); }
.wb-msg-filtres > li.wb-msg-filtre-archives a { padding-left: .625rem; padding-right: .625rem; }
.wb-msg-liste { list-style: none; margin: 0; padding: 0; }
.wb-msg-liste > li { border-bottom: 1px solid var(--rule); }
.wb-msg-liste > li.wb-msg-groupe { border-bottom: 0; padding: .5rem .875rem .125rem; }
/* Filet posé sur toutes les lignes, transparent : choisir ne décale rien. */
.wb-msg-ligne { display: grid; grid-template-columns: 7rem 1fr auto;
  gap: .125rem .625rem; padding: .5rem .875rem; text-decoration: none;
  color: var(--ink); border-left: 3px solid transparent; }
/* La sélection vit sur le `<li>` : le `<a>` est repeint par le serveur à chaque geste. */
.wb-msg-liste > li.wb-msg-choisi > .wb-msg-ligne { border-left-color: var(--ink);
  background: var(--wash); }
/* Filet d'encre : message affiché ; filet pâle : ligne visée par les flèches. */
.wb-msg-liste > li.wb-msg-vise > .wb-msg-ligne { border-left-color: var(--rule-2); }
.wb-msg-liste > li:focus { outline: none; }
.wb-msg-qui { color: var(--ink-2); font-weight: 600; font-size: .75rem; padding-top: .125rem; min-width: 0; overflow-wrap: anywhere; }
.wb-msg-qui small { display: block; font-weight: 400; color: var(--ink-3); font-size: .75rem; }
.wb-msg-txt { min-width: 0; }
/* Deux lignes avant la coupe : le début d'un message suffit rarement. */
.wb-msg-t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.wb-msg-nonlu { font-weight: 600; }
.wb-msg-sous { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  margin-top: .125rem; }
.wb-msg-quand { color: var(--ink-3); font-size: .75rem; text-align: right; white-space: nowrap; }
.wb-msg-detail-col { display: flex; flex-direction: column; overflow: hidden; }
.wb-msg-tache { border: 1px solid var(--rule); background: var(--wash);
  padding: .625rem .75rem; max-width: 34rem; }
@media (max-width: 767.98px) {
  .wb-msg-page { grid-template-columns: 1fr; }
  .wb-msg-colonne { border-right: 0; border-bottom: 1px solid var(--rule); }
}

/* ── ?page=rapport-occasion ── */
.wb-ro-liste-item { padding: 2px 0; white-space: nowrap; }
.wb-ro-liste-item + .wb-ro-liste-item { border-top: 1px dashed var(--bs-border-color); }
/* Pas de soulignement dans une grille, même au survol : le lien se reconnaît à sa colonne. */
#wb-rapport-occasion-grid .wb-ro-link { text-decoration: none; }
.wb-ro-loading {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(var(--bs-body-bg-rgb), 0.75);
  cursor: progress;
}

/* ── ?page=statistiques ── */
/* Palette des années : `--wb-stats-c1..c4`, en tête de feuille. */
#wb-stats-graphe { width: 100%; height: auto; }
.wb-stats-spark  { width: 100%; height: 28px; }

/* ── ?page=telephones-corriger ── */
/* Un numéro ne grandit pas avec l'écran : largeur du contenu (« +41 22 344 55 66 »
   en chasse fixe) plus les deux boutons. */
.wb-telcor-saisie { max-width: 26rem; }

/* ── Rapport d'import (?page=import-articles-rapport) : la désignation ne se plie pas en colonne de mots ── */
.wb-import-rapport-page .wb-import-designation { min-width: 14rem; }

/* ── Commandes fournisseur (?page=commandes-fournisseur, commande-fournisseur) ── */
.wb-cf-page .wb-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: var(--e3); }
.wb-cf-n { color: var(--ink-3); font-weight: 400; margin-left: 6px; }
.wb-seg > [aria-pressed="true"] .wb-cf-n { color: var(--acc); }
.wb-cf-cherche { flex: 0 1 300px; min-width: 0; }
.wb-cf-liste { display: grid; gap: 10px; align-content: start; }
.wb-cf-liste .wb-table :is(th, td) { vertical-align: top; }
.wb-cf-liste .wb-table tbody tr { cursor: pointer; }
.wb-cf-liste .wb-table tbody tr[aria-selected="true"] { background: var(--acc-w); box-shadow: inset 3px 0 0 var(--acc); }
.wb-cf-liste .wb-table tbody tr:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.wb-cf-pieces { display: grid; gap: 2px; white-space: normal; }
.wb-cf-recu { display: inline-grid; grid-template-columns: 64px auto; gap: 8px; align-items: center; }
.wb-cf-barre { height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.wb-cf-barre i { display: block; height: 100%; background: var(--etat-ok); }
.wb-cf-pli { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border-style: dashed; border-color: var(--rule-2); background: var(--panel); }
.wb-cf-pli > button { margin-left: auto; }
.wb-cf-volet, .wb-maitre-detail > .wb-cp-volet { display: grid; gap: var(--e4); align-content: start; }
:is(.wb-cf-volet, .wb-cp-volet) .wb-detail-titre { margin: 0; }
:is(.wb-cf-volet, .wb-cp-volet) .wb-rubrique { margin: 0; }
:is(.wb-cf-volet, .wb-cp-volet) p { margin: 0; }
.wb-cf-tel { font-size: var(--t-total); font-weight: 600; }
.wb-cf-infos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.wb-cf-infos dt { font-weight: 400; color: var(--ink-3); }
.wb-cf-infos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.wb-cf-infos small { color: var(--ink-3); }
.wb-cf-lignes { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rule); border-radius: 6px; max-height: 50vh; overflow-y: auto; }
.wb-cf-lignes li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 10px; border-bottom: 1px solid var(--rule); }
.wb-cf-lignes li:last-child { border-bottom: 0; }
.wb-cf-lignes .des { grid-column: 1; color: var(--ink-2); }
.wb-cf-lignes .q { grid-column: 2; grid-row: 1 / 3; text-align: right; align-self: center; font-variant-numeric: tabular-nums; }
.wb-cf-lignes small { grid-column: 1 / -1; font-size: var(--t-second); color: var(--ink-3); }
.wb-cf-lignes small:empty { display: none; }
.wb-cf-lignes li.ok .q { color: var(--etat-ok); font-weight: 600; }
.wb-cf-gestes { display: grid; gap: 8px; }
.wb-cf-liste .wb-table :is(th, td).wb-cf-libre { white-space: normal; min-width: 180px; }
.wb-cp-corps { display: grid; gap: 12px; align-content: start; }
.wb-cp-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; color: var(--ink-2); }
.wb-cp-tete b { color: var(--ink); font-weight: 600; }
.wb-cp-four { display: grid; gap: 4px; min-width: min(100%, 420px); font-size: 13px; color: var(--ink-2); }
.wb-cp-ajout { display: grid; grid-template-columns: minmax(0, 1fr) 90px minmax(0, 240px) auto; gap: 8px; align-items: end;
  padding: 12px; border: 1px solid var(--rule); border-radius: 6px; background: var(--panel); }
.wb-cp-ajout label { display: grid; gap: 4px; min-width: 0; position: relative; font-size: 13px; color: var(--ink-2); }
.wb-cp-ajout label kbd { margin-left: 6px; }
@media (max-width: 767.98px) { .wb-cp-ajout { grid-template-columns: minmax(0, 1fr) 90px; } }
/* Un refus sous la pièce ne décale pas Quantité ni Pour : il descend dans la marge, que le formulaire réserve. */
.wb-cp-ajout label .wb-retour-note { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; }
.wb-cp-ajout:has(label .wb-retour-note) { padding-bottom: calc(12px + 2.5em); }
.wb-cp-titre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.wb-cp-titre .wb-rubrique { margin: 0; }
.wb-cp-titre > span:last-child { color: var(--ink-3); font-size: 13px; }
.wb-cp-cherche { flex: 0 1 260px; }
.wb-cp-corps .wb-table :is(th, td) { vertical-align: top; }
.wb-cp-corps .wb-table :is(th, td).wb-cp-libre { white-space: normal; min-width: 160px; }
.wb-cp-corps .wb-table small { color: var(--ink-3); font-size: var(--t-second); }
.wb-cp-corps .wb-table input.wb-cp-qte { width: 72px; margin-left: auto; text-align: right; }
.wb-cp-corps .wb-table input.wb-cp-pour { min-width: 180px; }
.wb-cp-corps .wb-table tfoot td { font-weight: 600; background: var(--paper); border-top: 1px solid var(--rule-2); border-bottom: 0; }
.wb-cp-retire { border: 0; background: none; color: var(--ink-3); padding: 0 4px; }
.wb-cp-retire:hover { color: var(--ink); }
.wb-cp-long { max-height: calc(100vh - 16rem); overflow: auto; }
.wb-cp-long thead th { position: sticky; top: 0; z-index: 1; }
.wb-cp-long tfoot td { position: sticky; bottom: 0; }
.wb-cp-copie { margin: 0; padding: 8px 10px; font-size: 12.5px; line-height: 1.5; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--coin);
  color: var(--ink-2); white-space: pre; overflow-x: auto; tab-size: 16; }
.wb-cp-aide { margin: 0; color: var(--ink-3); font-size: 13px; }
.wb-cp-envoi, .wb-cp-comm { display: grid; gap: 6px; }
.wb-cp-envoi > label { font-size: 13px; color: var(--ink-2); }
.wb-dest { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--coin-l); background: var(--panel); }
.wb-dest-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.wb-dest-nom { font-weight: 600; }
.wb-dest-tete > span { margin-left: auto; font-size: var(--t-second); color: var(--ink-3); }
.wb-dest-ordre { font-size: var(--t-second); }
.wb-dest-coord { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; margin: 0; }
.wb-dest-coord dt { font-weight: 400; font-size: var(--t-second); color: var(--ink-3); align-self: center; }
.wb-dest-coord dd { margin: 0; min-width: 0; display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.wb-dest-coord dd > .et { margin-left: auto; }
.wb-dest-manque { color: var(--ink-3); font-style: italic; }
.wb-dest-lien { border: 0; padding: 0; background: none; color: var(--acc); text-align: left; overflow-wrap: anywhere; }
.wb-dest-lien:hover { text-decoration: underline; }
.wb-dest-pieces { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: var(--t-second); color: var(--ink-2); }
.wb-dest-pieces .ok, .wb-dest-trace { color: var(--etat-ok); }
.wb-dest-trace { font-size: var(--t-second); }
.wb-dest-gestes { display: flex; flex-wrap: wrap; gap: 6px; }
.wb-cf-volet .wb-dest { margin-bottom: var(--e3); }
.wb-cp-rang { display: flex; gap: 8px; }
.wb-cp-colle { width: 100%; min-height: 76px; padding: 8px 10px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); background: var(--paper);
  border: 1px dashed var(--rule-2); border-radius: 6px; resize: vertical; }
.wb-cp-colle:focus { outline: 0; border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc-w); }
.wb-cp-colle-l { font-size: 13px; color: var(--ink-2); margin-bottom: -6px; }
.wb-cp-corps .wb-table .wb-cp-ecart, .wb-cp-ecart { color: var(--etat-attention); font-weight: 600; }
.wb-cp-corps .wb-table tr.wb-cp-zero td { color: var(--ink-3); }
.wb-cp-avis { background: var(--acc-w); border-color: transparent; }
.wb-cp-avis--att { background: var(--etat-attention-w); }
.wb-cp-avis > span { color: var(--ink); }

/* Comptes comptables : saisie en place dans les tableaux, la case ne montre son cadre qu'au survol et au focus. */
.wb-cc-saisie .form-control, .wb-cc-saisie .form-select { border-color: transparent; background-color: transparent; }
.wb-cc-saisie .form-control:hover, .wb-cc-saisie .form-select:hover { border-color: var(--rule-2); }
.wb-cc-saisie .form-control:focus, .wb-cc-saisie .form-select:focus { border-color: var(--acc); background-color: var(--panel); }
.wb-cc-route { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wb-cc-no { width: 7rem; flex: 0 0 7rem; font-variant-numeric: tabular-nums; }
.wb-cc-lib { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wb-cc-saisie [data-f="libelle"] { min-width: 12rem; }
.wb-cc-a-lib { width: 20rem; max-width: 100%; }
.wb-cc-recherche { width: 16rem; max-width: 100%; }
.wb-cc .mod { color: var(--etat-ok); font-size: 12px; white-space: nowrap; }

/* ── ?page=reglage-rabais ── */
.wb-rab { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.wb-rab:has(.wb-rab-volet:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
.wb-rab .wb-table :is(th, td) { vertical-align: middle; }
.wb-rab .wb-table thead th { vertical-align: bottom; }
/* En-têtes de colonne et colonnes N° et Groupe fixes : la grille défile dessous. */
.wb-rab .wb-table { max-height: calc(100vh - 200px); overflow: auto; }
.wb-rab .wb-table thead th { position: sticky; top: 0; z-index: 2; background: var(--panel); }
.wb-rab .wb-table :is(th, td):is(:nth-child(1), :nth-child(2)) { position: sticky; z-index: 1; background: var(--panel); }
.wb-rab .wb-table :is(th, td):nth-child(1) { left: 0; }
.wb-rab .wb-table :is(th, td):nth-child(2) { left: var(--wb-rab-col1, 3.5rem); box-shadow: inset -1px 0 0 var(--rule); }
.wb-rab .wb-table thead th:is(:nth-child(1), :nth-child(2)) { z-index: 3; }
.wb-rab .wb-table tr.wb-rab-actif > td, .wb-rab .wb-table th.wb-rab-actif { background: var(--acc-w); }
.wb-rab-lib { white-space: normal; min-width: 12rem; color: var(--ink-2); }
.wb-rab-type-btn { display: grid; justify-items: end; gap: 1px; margin-left: auto; padding: 2px 6px; font: inherit; background: none; border: 1px solid transparent; border-radius: var(--coin); color: var(--ink-3); cursor: pointer; }
.wb-rab-type-btn b { color: var(--ink); font-weight: 600; font-size: 13px; }
.wb-rab-type-btn small { font-weight: 400; }
.wb-rab-type-btn:hover { background: var(--wash); }
.wb-rab-type-btn[aria-pressed="true"] { background: var(--acc-w); border-color: var(--acc); }
.wb-rab-type-btn[aria-pressed="true"] b { color: var(--acc); }
.wb-rab-case { display: grid; justify-items: end; gap: 1px; }
.wb-rab-taux { width: 4.5rem; text-align: right; }
.wb-rab-marge { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.wb-rab-marge:empty { display: none; }
.wb-rab-marge.perte { color: var(--red); font-weight: 600; }
.wb-rab-taux.wb-rab-perte { border-color: var(--red); background: var(--red-w); }
#wbRabPerte .wb-rab-perte-lien { color: var(--red); }
#wbRabVoletOrdre, #wbRabVoletGeste { display: flex; flex-wrap: wrap; gap: 8px; }
#wbRabVoletOrdre[hidden], #wbRabVoletGeste[hidden] { display: none; }
.wb-rab-volet { position: sticky; top: 16px; padding: 16px 20px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--coin-l); }
.wb-rab-eteints { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 52rem; }
.wb-rab-eteints li { display: flex; align-items: center; gap: 16px; }
.wb-rab-eteints li > span { flex: 1; }
@media (max-width: 575.98px) { #wb-rap-vues { flex-wrap: wrap; width: 100%; } #wb-rap-vues > .btn { flex: 1 1 auto; } }

/* ── ?page=reglage-requetes-lentes ── */
.wb-rl-ligne { display: grid; gap: var(--e2); padding-block: var(--e3); border-top: 1px solid var(--rule); }
.wb-rl-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e3); font-variant-numeric: tabular-nums; }
.wb-rl-sql {
  margin: 0;
  padding: var(--e2) var(--e3);
  background: var(--wash);
  border-radius: var(--coin);
  font: 12px/1.5 var(--fonte-mono);
  color: var(--ink-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}