/* =============================================================================
   webbike.css — feuille de style unique WebBike Honda Genève
   Fusion de : style1.css + style1/{style,atelier,commande,opportunite,location}.css
   Améliorations UX : tailles police, padding, boutons, polices, couleurs agressives
   ============================================================================= */


/* =============================================================================
   RESET ET GLOBALS (ex style1.css)
   ============================================================================= */

body {
  background-color: #ccccff;
}

frame {
  border: 1px solid Blue;
}

form {
  margin: 0;
}

/* Police sans-serif globale */
body, th, td, a {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
}

/* Les form elements n'héritent pas automatiquement du navigateur — forcer explicitement.
   On exclut radio/checkbox : le min-height déforme les puces Bootstrap (.form-check-input). */
input:not([type=radio]):not([type=checkbox]), select, button, textarea {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
  min-height: 26px;
}

th {
  text-align: left;
}

a { text-decoration: none }
a:hover { text-decoration: underline }

big {
  font-size: 16px;
}

.case1 {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}

.case2 {
  border: 2px solid black;
}

.case3 {
  background-color: White;
}

.case4 {
  background-color: #bfbfbf;
  color: Black;
  width: 200px;
}

.case5 {
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}


/* =============================================================================
   THÈME PRINCIPAL (ex style1/style.css)
   ============================================================================= */

body {
  color: #ffa331;
  background-color: #12123F;
  margin: 10px;
}


input.bt_av,
input.bt_ap {
  width: 22px;
  height: 19px;
}

.bt_av {
  background-image: url(style1/fleche_gauche.gif);
  background-repeat: no-repeat;
  background-position: center;
}

.bt_ap {
  background-image: url(style1/fleche_droite.gif);
  background-repeat: no-repeat;
  background-position: center;
}

.bt_function {
  background-color: white;
}

.table_etape_facture .bt_actif .button {
  background-color: yellow;
  color: #000;
}

.div_header {
  height: 29px;
  width: 100%;
}

.div_header .div_logo {
  background-image: url('../images/logo_top.png');
  background-repeat: no-repeat;
  background-position: left;
  height: 29px;
  width: 100%;
}

.div_titre_fonction {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 20px;
  font-weight: bold;
}

.div_calendrier a { color: black; }
table a:visited { color: #000 }

.tb-rapport a:link    { color: #ffa331 }
.tb-rapport a:visited { color: #ffa331 }
.tb-rapport a:hover   { color: #ffa331 }
.tb-rapport a:active  { color: #ffa331 }

/* Formulaire de recherche */
.tab_recherche {
  background-color: #0d2137;
  margin-top: 10px;
  margin-bottom: 10px;
  border: dotted 0 #000;
}

.span_err { color: #ff2000; padding-right: 1px; }

.select_resultat {
  font-size: 13px;
  font-family: "Courier New", Courier, Monaco, monospace;
  background-color: #e8e8e8;
  margin: 3px;
  padding: 2px;
  border-color: #ffa500;
  border-width: 1px;
}

/* Groupe C — padding formulaires : 1px → 4px */
.tab_formulaire {
  font-size: 13px;
  font-family: system-ui, -apple-system, sans-serif;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 4px;
  border: dotted 0 #000;
}

.tab_formulaire td {
  font-size: 13px;
  font-family: system-ui, -apple-system, sans-serif;
  padding: 4px;
  border: dotted 0 #000;
}

.tab_formulaire th {
  font-size: 13px;
  font-family: system-ui, -apple-system, sans-serif;
  padding: 4px;
  border: dotted 0 #000;
}

.td_lien_liste_existante { color: #e8e8e8; font-size: 13px; font-family: system-ui, -apple-system, sans-serif; }
.td_lien_liste_existante a { color: #e8e8e8; font-size: 13px; font-family: system-ui, -apple-system, sans-serif; }

.td_liste_champs_afficher select {
  font-family: system-ui, -apple-system, sans-serif;
  background-color: #e8e8e8;
  margin: 1px 3px 1px 6px;
  padding: 2px;
  border: solid 0 #000;
}

.tab_liste_champs_afficher { margin-top: 10px; margin-bottom: 10px; }

.tab_formulaire input {
  color: #000;
  font-size: 13px;
  font-family: system-ui, -apple-system, sans-serif;
  background-color: #e8e8e8;
  margin: 1px 3px;
  border: solid 1px #aaa;
}

.th_nom_champ { font-size: 13px; font-family: system-ui, -apple-system, sans-serif; padding-right: 4px; padding-left: 4px; border: dotted 0 #000; }

.td_saisie_champ {
  font-size: 13px;
  font-family: system-ui, -apple-system, sans-serif;
  padding: 4px;
  border: dotted 0 #000;
}

.th_formulaire_nom { font-size: 13px; font-family: system-ui, -apple-system, sans-serif; padding: 4px; border: dotted 0 #000; }

.td_saisie_champ input {
  font-size: 13px;
  font-family: system-ui, -apple-system, sans-serif;
  background-color: #e8e8e8;
  margin: 1px 3px 1px 6px;
  padding: 2px;
  border: 1px solid #aaa;
}

.td_saisie_champ select {
  font-family: system-ui, -apple-system, sans-serif;
  background-color: #e8e8e8;
  margin: 1px 3px 1px 6px;
  padding: 2px;
  border: 1px solid #aaa;
}

.td_saisie_champ a { color: #e8e8e8; font-size: 13px; font-family: system-ui, -apple-system, sans-serif; margin: 1px 3px; }

td.td_formulaire_valeur { color: #f2f2f2; font-size: 14px; font-family: system-ui, -apple-system, sans-serif; font-weight: bold; padding: 0 50px 0 30px; }

.td_label { color: #ffa500; font-weight: bold; }
.long_button, .long_button:hover { width: 200px; }
.formulaire_recherche { }
#menu { z-index: 100; }
.tab_listes_exitantes a:visited, .div_comptabilite a:visited, .td_formulaire_valeur a:visited, .div_vehicules a:visited, #notes a:visited, .tab_recherche a:visited, .vhc_loc a:visited { color: #808080 !important }


/* =============================================================================
   ATELIER — CALENDRIER (ex style1/atelier.css)
   ============================================================================= */

/* Groupe C — padding atelier : 1px → 4px */
.tab_atelier {
  padding: 4px;
}

.tab_atelier tr,
.tab_atelier th,
.tab_atelier td {
  padding: 4px;
  border-color: #535353;
  border-style: dotted;
  border-width: 0 1px 1px 0;
}

.div_rdv {
  padding: 4px;
}

/* Ligne Date */
.tr_jour {
  color: #000;
  font-size: 11px;
  font-family: system-ui, -apple-system, sans-serif;
}

.th_date {
  background-color: #59dce1;
  text-transform: capitalize;
}

.td_occupation { color: #000; }
.td_nouveau_rdv { }

.jour_ferie       { background-color: #808080; }
.jour_ouvert      { background-color: #FFFF8F; }
.occupation_faible  { background-color: #6c6; }
.occupation_moyenne { background-color: #ffb454; }
.occupation_elevee  { background-color: #ff5e59; }

/* Ligne RDV */
.tr_ligne_rdv { }
.rdv_communs { }
.rdv_mecano { }
.td_rdv { width: 250px; }

.rdv_passe              { background-color: #ff8282; }
.rdv_pris               { background-color: #f5f5f5; }
.rdv_vhc_recu           { background-color: #fff994; }
.rdv_vhc_recu.rdv_multiple {
  background-color: #fff994;
  background-image: url(style1/bande2.png);
  background-repeat: repeat;
}
.rdv_paye               { background-color: #3dc63d; }
.rdv_paye:hover         { background-color: #6fd56f; }
.rdv_non_fd {
  background-color: #3dc63d;
  background-image: url(style1/bande.png);
  background-repeat: repeat;
}
/* Groupe F — vert néon #00FF00 → vert doux */
.rdv_facture            { background-color: #a0ffa0; }
.rdv_pas_encore_facture { background-color: #7ed87e; }
.rdv_sans_facture       { background-color: #ffa331; }
.rdv_web                { background-color: #0099ff; }
.rdv_vide               { background-color: #808080; }

/* Ligne Employé */
.tr_mecano { background-color: #d5d5d5; }

/* Groupe F — 9px → 11px */
.th_mecano_nom {
  color: #000;
  font-size: 11px;
  font-family: system-ui, -apple-system, sans-serif;
  text-transform: uppercase;
}

/* Véhicules location */
/* Groupe F — writing-mode conservé mais largeur lisible */
.td_vhc_loc {
  writing-mode: tb-rl;
  width: 20px;
  vertical-align: text-top;
}

.tr_jour td.vhc_loc_occupe { background-color: #FFC080; }
.tr_jour td.vhc_loc_libre  { background-color: #C0FFC0; }

.tr_jour th,
.tr_jour td { background-color: #59dce1; }

.tr_mecano th,
.tr_mecano td { background-color: #ccc; }

.tr_jour .th_date .td_occup,
.tr_mecano .th_mecano_nom .td_occup { width: 9px; }

.tr_jour.occupation_faible .th_date .td_occup,
.tr_mecano.occupation_faible .th_mecano_nom .td_occup
{ background-image: url(style1/vert.gif); background-repeat: no-repeat; background-position: center; }

.tr_jour.occupation_moyenne .th_date .td_occup,
.tr_mecano.occupation_moyenne .th_mecano_nom .td_occup
{ background-image: url(style1/jaune.gif); background-repeat: no-repeat; background-position: center; }

.tr_jour.occupation_elevee .th_date .td_occup,
.tr_mecano.occupation_elevee .th_mecano_nom .td_occup
{ background-image: url(style1/rouge.gif); background-repeat: no-repeat; background-position: center; }

.tr_jour .th_date .td_info,
.tr_mecano .th_mecano_nom .td_info {
  background-color: transparent;
  color: black;
}

.tr_mecano .th_mecano_nom .table_occup tr,
.tr_mecano .th_mecano_nom .table_occup td,
.tr_mecano .th_mecano_nom .table_occup th,
.tr_jour .th_date .table_occup tr,
.tr_jour .th_date .table_occup td,
.tr_jour .th_date .table_occup th { border: 0px none; }

.tr_sep_jour tr,
.tr_sep_jour th,
.tr_sep_jour td { height: 10px; background-color: transparent; }

.table_date tr, .table_date th, .table_date td,
.table_av_ap tr, .table_av_ap th, .table_av_ap td { background-color: transparent; }

td.texte_libre {
  background-color: #ffffff;
  vertical-align: Top;
  font-size: 15px;
  font-weight: bold;
}

td.vhc_pret_libre {
  background-color: green;
  font-size: 20px;
  vertical-align: text-top;
  padding: 0px 10px;
}

td.vhc_pret_occupe {
  background-color: red;
  font-size: 20px;
  vertical-align: text-top;
  padding: 0px 10px;
}


/* =============================================================================
   COMMANDE (ex style1/commande.css)
   ============================================================================= */

.div_facture { }
.table_info td {
  font-size: 13px;
  padding: 4px 6px;
  border-style: solid;
  border-width: 0;
}
.table_info td input[type=text],
.table_articles td input[type=text] {
  border: none;
  outline: none;
  background: transparent;
}

.div_corps { }
.div_article       { margin-top: 10px; margin-bottom: 10px; }
.div_texte_libre   { margin-bottom: 10px; }
.div_vhc_vente { }
.div_vhc_achat { }
.div_bulletin_livraison { }
.div_presse_papier { margin-bottom: 10px; }
.div_valider { }
.police_prop { }
.input_titre_corps { }
.select_corps { }
.input_total_corps { }
.bt_modifier { }
.bt_up { }
.bt_down { }
.bt_supprimer { }
.bt_ajouter { }
.bt_effacer { }
.bt_rechercher { }
.bt_recept_article { }
.bt_recept_article_partiel { }
.bt_vendre { }
.bt_rechecher_creer { }
.bt_importer { }
.bt_copier { }
.bt_coller { }
.bt_inserer { }
.bt_valider { }
.bt_valider_encaisser { }
.titre_bloc { }

.table_article         { margin-bottom: 10px; border-width: 0; }
.table_article td      { border-width: 0; }
.tr_no_article_description { }
.tr_prix_rabais_tva { }
.tr_gm_quantite_dest { }

td.td_label {
  color: #ffa500;
  font-size: 13px;
  font-weight: bold;
  padding: 4px 4px 4px 10px;
}

.td_valeur { }
.td_valeur input {
  font-size: 13px;
  font-family: system-ui, -apple-system, sans-serif;
  margin: 1px 3px;
  border-style: solid;
  border-width: 1px;
  border-color: #aaa;
}

.no_article { }
.description { }
.prix { }
.rabais { }
.tva { }
.gm { }
.quantite { }
.dest { }

.ta_texte_libre { margin-bottom: 6px; }
.select_vhc_vente { }
.select_bulletin_livraison { }
.no_fourniseur { }

/* Groupe F — input_no_import : contraste médiocre, légèrement amélioré */
input.input_no_import {
  color: #ddd;
  font-size: 13px;
  background-color: #1a3a5c;
  text-align: center;
  border-style: solid;
  border-width: 0;
}

/* Nouveau corps commande */
/* Groupe C — padding table_articles : 0 → 3px 5px */
.table_articles {
  background-color: white;
  border: 1px solid black;
  border-collapse: collapse;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 13px;
  color: black;
}

.table_articles th, .table_articles td {
  border: 1px solid black;
  padding: 3px 5px;
}

.table_articles th.edit,
.table_articles th.no_article,
.table_articles th.description,
.table_articles th.prix_unit,
.table_articles th.rabais,
.table_articles th.tva,
.table_articles th.gm,
.table_articles th.quantite { text-align: center; }

.table_articles th.prix       { text-align: center; width: 70px; }
.table_articles th.stock      { width: 50px; }
.table_articles th.destinataire { width: 50px; }
.table_articles th.recu       { width: 50px; }
.table_articles th.date       { width: 60px; }
.table_articles th.total      { text-align: right; }

.table_articles td.stock input { width: 48px; text-align: right; }

.table_articles td.total_intermediaire_visu { background-color: grey; }
.table_articles td.total_intermediaire {
  background-color: grey;
  text-align: right;
  font-weight: bold;
}

/* Groupe B — monospace sur champs articles conservé pour alignement colonnes numériques */
.table_articles td.no_article input,
.table_articles td.description input { font-family: monospace; }

.table_articles td.prix_unit input,
.table_articles td.rabais input,
.table_articles td.tva input,
.table_articles td.gm input,
.table_articles td.quantite input,
.table_articles td.nb_recu input {
  text-align: right;
  font-family: monospace;
}

.table_articles td.prix,
.table_articles td.stock { text-align: right; }

.table_articles textarea {
  overflow: hidden;
  font-family: monospace;
  font-size: 13px;
}

.table_articles .tvamarges td,
.table_articles .tvamarges td input { background-color: #8080FF; }

.table_articles .ajouttva td,
.table_articles .ajouttva td input { background-color: #FFFF8F; }


/* =============================================================================
   OPPORTUNITÉS (ex style1/opportunite.css)
   ============================================================================= */

#tableOpportunites { width: 100%; }
#tableOpportunites td { vertical-align: top; }

#tableOpportunites .ligneType {
  background-color: #A0A0A0;
  color: black;
}

#tableOpportunites .ligneType td {
  font-size: 20px;
  font-weight: bold;
}

.tableFicheOpportunite { width: 100%; }

.ligneTitres {
  background-color: #DDD;
  color: black;
  font-weight: bold;
}

.ligneFiches td {
  border: 5px solid black;
  padding: 3px;
  margin: 0;
  vertical-align: text-top;
}

.ligneFiches td.info1 {
  width: 10%;
  background-color: #DDD;
  color: black;
  border-right: 1px solid grey;
}

.ligneFiches td.info2 {
  width: 10%;
  background-color: #FFF;
  color: black;
  border-left: 1px solid grey;
  border-right: 1px solid grey;
}

.ligneFiches td.info3 {
  width: 10%;
  background-color: #AAA;
  color: black;
  border-left: 1px solid grey;
}

.ligneFiches td.info3.suivi1 { background-color: #F80; }
.ligneFiches td.info3.suivi2 { background-color: #F00; }

.empty_cell { background-color: rgba(255,255,255,0.25); }

#dialog_edit { width: 800px; }


/* =============================================================================
   LOCATION — CALENDRIER (ex style1/location.css)
   ============================================================================= */

.tab_location { }
.tab_location td, .tab_location th, .tab_location tr { }
.tab_location td a { }

.td_label_vhc {
  border: 0.5pt solid black;
}

.td_jour { color: #000; border: solid 1px black; }

.jour_ferie         { color: #000; background-color: #ffd585; text-align: center; }
.jour_ferie:link    { color: #000; background-color: #ffd585; text-align: center; }
.jour_ferie:hover   { color: #000; background-color: #ffd585; text-align: center; }
.jour_ferie:visited { color: #000; background-color: #ffd585; text-align: center; }

.jour_ouvert         { color: #000; background-color: #ccc; text-align: center; }
.jour_ouvert:link    { color: #000; background-color: #ccc; text-align: center; }
.jour_ouvert:hover   { color: #000; background-color: #ccc; text-align: center; }
.jour_ouvert:visited { color: #000; background-color: #ccc; text-align: center; }

.tr_vhc { }
.td_vhc {
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

.td_loc {
  text-align: center;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

.loc_reserve              { color: #000; background-color: #f2f2f2; }
.loc_en_cours             { color: #000; background-color: #ffff8f; }
.loc_retour_facture       { color: #000; background-color: #a0ffa0; }
.loc_retour_facture_paye  { color: #000; background-color: #3dc63d; }
.loc_retour_non_facture   { color: #000; background-color: #ffa331; }
.loc_ferie                { color: #000; background-color: #ffd585; }
.loc_ouvert               { color: #000; background-color: #ccc; }

.td_jour,
.loc_pos_5 {
  border-right-width: 5px;
  border-right-color: #0d2137;
  border-right-style: solid;
}

.table_date tr, .table_date th, .table_date td,
.table_av_ap tr, .table_av_ap th, .table_av_ap td { background-color: transparent; }

.td_label_vhc {
  color: black;
  font-weight: bold;
}

.td_label_vhc,
.td_vhc { background-color: #f2f2f2; }

/* ── Drawer détail WB 2.0 (socle Tabulator) ──────────────────────────────── */
/* ⛔ LA LARGEUR EST DÉFINIE DANS `css/app.css`, SECTION « Dialogues », ET NULLE
   PART AILLEURS. Elle l'était ici AUSSI (720 px) et là-bas (min(38rem,100vw) =
   608 px) : deux valeurs, même spécificité, et `webbike.css` chargé APRÈS
   `app.css` (index.php) — c'est donc 720 qui gagnait, en silence, alors que la
   valeur lue et commentée par qui ouvrait le socle était 608. Retiré d'ici le
   15.08.2026.

   ⛔ ET CE RETRAIT A CASSÉ LA LARGEUR PENDANT TROIS JOURS, PARCE QUE LA RAISON
   POUR LAQUELLE 720 GAGNAIT N'AVAIT PAS ÉTÉ COMPRISE. Ce n'était pas d'être
   déclaré deux fois : c'était d'être déclaré dans la SEULE feuille chargée après
   Bootstrap. `app.css` vient AVANT lui, et Bootstrap écrit
   `.offcanvas.offcanvas-end { width: … }` à la même spécificité — donc la règle
   d'`app.css` perdait, et le tiroir est retombé à 400 px sans un mot. Corrigé le
   18.08.2026 : `app.css` règle désormais `--bs-offcanvas-width`, que Bootstrap
   pose sur une seule classe et qui se surcharge donc par spécificité.
   ⚠️ NE PAS REMETTRE DE LARGEUR ICI : ce serait masquer le problème une seconde
   fois, pas le résoudre. `tests/Unit/TiroirLargeurTest.php` le refuse. */

/* ── Cellule « Véhicule » (dataset location_contrats) ────────────────────── */
/* Ligne 1 : marque/modèle (lien d'aperçu) — Ligne 2 : plaque + badge puissance. */
.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: #6c757d; }

/* ⛔ UNE PLAQUE DE CONTRAT QUI N'EST PAS CELLE DU PAPIER DOIT SE VOIR SANS
   SURVOL. Les contrats antérieurs au 12.08.2026 n'ont pas de plaque gelée : la
   cellule montre alors l'état COURANT du véhicule. Le pointillé et le point
   d'interrogation disent « valeur reconstituée » ; l'infobulle dit pourquoi et
   ce qu'il ne faut pas en faire (la citer à la police). Sans ce repère, le repli
   se lirait comme une trace — c'est le « plausible et faux » que tout le
   chantier radar cherche à éviter. */
.wb-plaque-non-gelee {
  border-bottom: 1px dotted currentColor;
  cursor: help;
}
/* La plaque du contrat DIFFÈRE de celle d'aujourd'hui : le véhicule a été
   réimmatriculé depuis. Le repère est discret — c'est un contexte, pas une
   alerte — mais il est là, parce que c'est le cas où recopier la plaque
   courante désignerait la mauvaise moto. */
.wb-plaque-changee { color: #997404; cursor: help; }
/* Même mise en garde, portée par une icône seule : dans le tiroir de contrat, la
   plaque est noyée dans un libellé (« HONDA — NOIR — GE151889 ») qu'un soulignage
   marquerait en entier. */
.wb-plaque-non-gelee-icone { color: #997404; cursor: help; }
.wb-permis-badge {
  font-size: .7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.wb-permis-a1      { background-color: #d1e7dd; color: #0a3622; } /* A1 ≤ 11 kW */
.wb-permis-alimite { background-color: #fff3cd; color: #664d03; } /* A limité ]11-35] kW */
.wb-permis-a       { background-color: #f8d7da; color: #58151c; } /* A > 35 kW */
/* ⚠️ Puissance non renseignée. Volontairement HACHURÉ et non coloré : les trois
   couleurs ci-dessus disent « voici la catégorie », celle-ci doit dire « il n'y
   en a pas ». Un gris uni se lirait comme une quatrième catégorie, et 19 des 21
   véhicules prêtables sont dans ce cas — l'écran ne doit pas laisser croire
   qu'on connaît leur puissance. */
.wb-permis-inconnu {
  background-image: repeating-linear-gradient(
    45deg, #e9ecef, #e9ecef 4px, #dee2e6 4px, #dee2e6 8px
  );
  color: #495057;
  font-style: italic;
}

/* ── Pastilles de couleur (colonne « Couleur » du parc véhicules) ───────────
   La teinte du certificat d'homologation 13.20A, rendue visible.

   ⚠️ LA BORDURE N'EST PAS DÉCORATIVE. Sans elle, une pastille blanche ou crème
   disparaît sur le fond de la grille : la ligne se lirait « pas de couleur »
   alors qu'elle en porte une. Elle est semi-transparente pour rester discrète
   sur les teintes sombres, où elle ne sert à rien.

   ⚠️ ET ON N'INVENTE PAS DE PASTILLE. Une teinte absente de la palette
   (lib/couleur_normalisation.inc.php) n'obtient aucun carré : le libellé reste
   seul. Un gris de repli se lirait « c'est gris », ce que personne n'a dit. */
.wb-pastille {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: -1px;
  border: 1px solid rgba(0, 0, 0, .25);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
/* Un deux-tons porte deux pastilles accolées : elles se touchent pour se lire
   comme UNE information (« blanc et rouge »), pas comme deux colonnes. */
.wb-pastille + .wb-pastille { margin-left: -4px; }
.wb-couleur-nom { vertical-align: middle; }
/* Le code fabricant est une référence de commande de pièces, pas ce qu'on
   cherche des yeux : il reste lisible mais s'efface derrière le nom. */
.wb-couleur-code {
  margin-left: 6px;
  font-size: .72rem;
  color: #6c757d;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ⚠️ Une teinte DÉDUITE se distingue d'une teinte LUE. « Noir » parce que
   quelqu'un a écrit « noir » et « Noir » parce que le code NHA76 est noir
   ailleurs dans la base ne valent pas la même chose : la seconde est une
   inférence — juste 4 246 fois sur ce parc, fausse le jour où le code aura été
   mal recopié. Bordure esquissée plutôt que couleur atténuée : la teinte
   affichée doit rester la vraie, c'est son STATUT qui change. */
.wb-pastille-deduite {
  border-style: dashed;
  border-color: rgba(0, 0, 0, .45);
  box-shadow: none;
}
.wb-couleur-deduite { color: #6c757d; font-style: italic; }

/* Le code couleur dans SA colonne : une référence de commande de pièces, qu'on
   lit caractère par caractère (« NHB44H/BL »). Chiffres à chasse fixe pour que
   deux codes voisins s'alignent et se comparent d'un coup d'œil. */
.wb-couleur-code-cell {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  white-space: nowrap;
}