/* =========================
   VARIABLES & BASE
   Base design "track." (portée depuis entrepot_3d_app/app/src/brand.css) : indigo/encre,
   Space Grotesk + JetBrains Mono, rayons/ombres dédiés. Thème clair fixe, pas de dark mode auto.
========================= */
:root{
  /* Décalage à donner à tout élément `position:sticky; top:` pour qu'il se cale sous
     la navbar (fixe au-dessus de 900px, statique en dessous — cf. media query plus bas). */
  --sticky-top:56px;
  --bg:#F6F7F9;
  --card:#FFFFFF;
  --panel-2:#EEF0FE;
  --zone-bg:#FAFBFC;
  --text:#101215;
  --muted:#6A6F78;
  --text-discreet:#9AA0A8;
  --border:#E6E8EC;
  --divider-2:#F2F3F5;

  --primary:#4F5DF5;
  --primary-dark:#3F4CE0;
  --primary-border:#C6CBF8;
  --navbar:#101215;
  --row-hover:rgba(79, 93, 245, 0.06);

  --success:#2E9E63;
  --success-bg:#F1F9F4;
  --success-text:#1F7A4C;
  --danger:#C0392B;
  --danger-bg:#FDF2F2;
  --danger-border:#E8C4C0;
  --amber:#E0A83C;
  --amber-text:#B4741F;
  --amber-bg:#FEF3E7;

  --radius-btn:9px;
  --radius-card:13px;
  --radius-tile:14px;
  --radius-modal:16px;
  --shadow-card:0 1px 2px rgba(16,18,21,.04);
  --shadow-card-hover:0 8px 24px rgba(16,18,21,.09);
  --shadow-primary-btn:0 1px 2px rgba(79,93,245,.35);
  --shadow-modal:0 24px 60px rgba(12,14,18,.45);

  --font-display:'Space Grotesk', sans-serif;
  --font-mono-brand:'JetBrains Mono', monospace;
}

*{
  box-sizing:border-box;
}

html, body{
  margin:0;
  padding:0;
  max-width:100%;
  /* `hidden` sur html/body fait de la racine un conteneur de défilement, ce qui casse
     silencieusement tout `position:sticky` de la page (barre d'action d'Expédier, barre
     de sélection d'/admin/palettes : elles remontaient hors écran au lieu de rester
     collées). `clip` clippe pareil sans créer ce conteneur. La ligne `hidden` est
     conservée juste au-dessus comme repli pour un très vieux WebView qui ignorerait
     `clip`. */
  overflow-x:hidden;
  overflow-x:clip;
}

body{
  font-family:var(--font-display), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* =========================
   ICÔNES (sprite _icons.html)
========================= */
.icon{
  width:16px;
  height:16px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
  vertical-align:-3px;
}

.icon-sm{ width:13px; height:13px; }
.icon-lg{ width:20px; height:20px; }

/* =========================
   NAVBAR (fixe, façon app prévision)
========================= */
.app-navbar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  min-height:44px;
  background:var(--navbar);
  display:grid;
  /* minmax(0,1fr) et non 1fr : sur un PDA 360px, le groupe de gauche a une
     min-content plus large que la place disponible et faisait déborder la grille
     — « Déconnexion » se retrouvait coupé hors écran. */
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:8px;
  padding:6px 14px;
  z-index:999;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}

.nav-col-left{ justify-self:start; }
.nav-col-center{ justify-self:center; }
.nav-col-right{ justify-self:end; }

.app-nav-group{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  padding:4px;
}

.app-link{
  display:flex;
  align-items:center;
  color:#CBD5E1;
  padding:7px 14px;
  border-radius:7px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  text-decoration:none;
  transition:all .15s;
  cursor:pointer;
}

.app-link:hover{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.3);
  color:#F1F5F9;
}

.app-link.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  box-shadow:0 1px 4px rgba(79,93,245,.35);
}

.app-link.active:hover{
  background:var(--primary);
  color:#fff;
}

.app-link.danger{
  color:#FCA5A5;
}

.app-dropdown{
  position:relative;
}

.app-dropdown-panel{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  margin-top:6px;
  min-width:210px;
  background:var(--navbar);
  border:1px solid rgba(255,255,255,.15);
  border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  padding:6px;
  flex-direction:column;
  gap:2px;
  z-index:1000;
}

.app-dropdown.open .app-dropdown-panel{
  display:flex;
}

.app-dropdown-item{
  display:block;
  color:#CBD5E1;
  padding:8px 12px;
  border-radius:6px;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  transition:all .15s;
}

.app-dropdown-item:hover{
  background:rgba(255,255,255,.12);
  color:#F1F5F9;
}

.app-dropdown-item.active{
  background:var(--primary);
  color:#fff;
}

.site-badge{
  background:rgba(255,255,255,.1);
  color:#fff;
  border:1px solid rgba(255,255,255,.2);
  font-weight:600;
  white-space:nowrap;
}

@media (max-width: 900px){
  :root{
    --sticky-top:0px;
  }
  .app-navbar{
    position:static;
  }
  main.container{
    padding-top:20px;
  }
}

/* =========================
   LAYOUT
========================= */
.container{
  max-width:1400px;
  margin:0 auto;
  padding:64px 20px 40px;
}

h1{
  font-size:22px;
  margin:0 0 16px;
  font-weight:600;
  font-family:var(--font-display);
  letter-spacing:-0.01em;
}

h3{
  margin:14px 0 8px;
  font-size:14px;
  font-weight:600;
  font-family:var(--font-display);
}

/* =========================
   GRID / CARDS
========================= */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(0, 1fr));
  gap:16px;
}

.transporteur-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:16px;
  align-items:start;
}

.exemples-toggle summary{
  cursor:pointer;
  font-family:var(--font-display);
  font-weight:600;
  font-size:14px;
  color:var(--text);
  list-style:none;
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 0;
}

.exemples-toggle summary::-webkit-details-marker{
  display:none;
}

.exemples-toggle summary::before{
  content:"";
  width:8px;
  height:8px;
  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);
  transform:rotate(-45deg);
  transition:transform .15s;
  flex-shrink:0;
}

.exemples-toggle[open] summary::before{
  transform:rotate(45deg);
}

@media (max-width: 900px){
  .grid{
    grid-template-columns:1fr;
  }

  .container{
    padding:16px;
    padding-top:64px;
  }
}

.card{
  background:var(--card);
  border-radius:var(--radius-card);
  padding:18px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-card);
  max-width:100%;
  overflow:hidden;
}

/* =========================
   CARD HEADER
========================= */
.card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  gap:8px;
}

.card-title{
  font-weight:600;
  font-size:15px;
  font-family:var(--font-display);
}

/* =========================
   TEXT / META
========================= */
.meta{
  font-size:12px;
  color:var(--muted);
}

.error{
  color:var(--danger);
  font-weight:700;
}

/* Pendant de .error pour une confirmation d'action (chargement expédié, etc.). */
.success-box{
  background:var(--success-bg);
  color:var(--success-text);
  border:1px solid #CFE6D9;
  border-radius:10px;
  padding:10px 12px;
  font-weight:600;
}

.meta.status-ok{ color:var(--success-text); font-weight:600; }
.meta.status-err{ color:var(--danger); font-weight:600; }
.meta.status-block{ color:var(--amber-text); font-weight:600; }
.meta.status-info{ color:var(--primary); font-weight:600; }

/* =========================
   TOASTS (notifications flottantes, haut droite)
========================= */
.toast-container{
  position:fixed;
  top:100px;
  right:16px;
  z-index:2000;
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:calc(100vw - 32px);
}

.toast{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:var(--shadow-card-hover);
  font-size:13px;
  font-weight:600;
  font-family:var(--font-display);
  color:var(--text);
  max-width:320px;
  animation:toastIn .18s ease-out;
}

.toast.err{ background:var(--danger-bg); border-color:var(--danger-border); color:var(--danger); }
.toast.ok{ background:var(--success-bg); border-color:#CFE6D9; color:var(--success-text); }
.toast.block{ background:var(--amber-bg); border-color:#F0D5A8; color:var(--amber-text); }

@keyframes toastIn{
  from{ opacity:0; transform:translateX(14px); }
  to{ opacity:1; transform:translateX(0); }
}

/* =========================
   MODALE (alerte transporteur incorrect)
========================= */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(16,18,21,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3000;
  padding:20px;
  animation:modalFadeIn .15s ease-out;
}

.modal-card{
  background:#fff;
  border-radius:var(--radius-modal);
  box-shadow:var(--shadow-modal);
  padding:30px 26px;
  max-width:420px;
  width:100%;
  text-align:center;
}

.modal-card .icon-xl{
  width:52px;
  height:52px;
  color:var(--amber);
  margin-bottom:14px;
}

.modal-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:21px;
  color:var(--text);
  margin-bottom:10px;
}

.modal-text{
  font-size:14.5px;
  color:var(--muted);
  margin-bottom:24px;
  line-height:1.5;
}

.modal-text strong{
  color:var(--text);
}

.modal-actions{
  display:flex;
  gap:10px;
}

.modal-actions button{
  flex:1;
}

@keyframes modalFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

/* =========================
   SCAN KPI
========================= */
.scan-kpi{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:16px;
}

.kpi{
  display:flex;
  flex-direction:column;
}

.kpi .label{
  font-size:12px;
  color:var(--muted);
  font-weight:600;
}

.kpi .value{
  font-size:34px;
  font-weight:700;
  font-family:var(--font-display);
  letter-spacing:-0.02em;
}

/* =========================
   SCAN LOG
========================= */
.log{
  list-style:none;
  padding:0;
  margin:0;
}

.log li{
  padding:10px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  margin-bottom:6px;
  background:#fff;
  font-size:13px;
}

.log li.warning{
  background:var(--amber-bg);
  border-color:#F0D5A8;
}

/* =========================
   DETECTION TRANSPORTEUR AU SCAN
========================= */
.detect-panel{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--panel-2);
  margin-bottom:16px;
  min-height:60px;
}

.detect-panel .detect-logo{
  height:38px;
  max-width:110px;
  object-fit:contain;
  display:none;
}

.detect-panel .detect-text{
  font-size:14px;
  font-weight:600;
  color:var(--muted);
}

.detect-panel.detect-ok{
  background:var(--success-bg);
  border-color:#CFE6D9;
}

.detect-panel.detect-ok .detect-text{
  color:var(--success-text);
}

.detect-panel.detect-warn{
  background:var(--amber-bg);
  border-color:#F0D5A8;
}

.detect-panel.detect-warn .detect-text{
  color:var(--amber-text);
}

.detect-text{
  font-family:var(--font-display);
}

/* =========================
   BUTTONS
========================= */
button,
.btn{
  background:var(--primary);
  color:#fff;
  border:none;
  border-radius:var(--radius-btn);
  padding:10px 16px;
  font-weight:600;
  font-family:var(--font-display);
  font-size:14px;
  cursor:pointer;
  min-height:44px;
  box-shadow:var(--shadow-primary-btn);
}

button:hover,
.btn:hover{
  background:var(--primary-dark);
}

.btn-secondary{
  background:var(--navbar);
  color:#fff;
  box-shadow:none;
}

.btn-secondary:hover{
  background:#05070A;
}

.btn-danger{
  background:var(--danger);
  box-shadow:none;
}

.btn-danger:hover{
  background:#A6301F;
}

.btn-ghost{
  background:transparent;
  color:var(--text);
  border:1px solid var(--border);
  box-shadow:none;
}

.btn-ghost:hover{
  background:var(--panel-2);
  border-color:var(--primary);
  color:var(--primary);
}

.btn-sm{
  padding:6px 12px;
  font-size:12px;
  border-radius:7px;
  font-weight:600;
  white-space:nowrap;
  min-height:auto;
}

/* =========================
   BADGES
========================= */
.badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  font-family:var(--font-display);
  border:1px solid var(--border);
}

.badge-ok{
  background:var(--success-bg);
  color:var(--success-text);
  border-color:#CFE6D9;
}

.badge-err{
  background:var(--danger-bg);
  color:var(--danger);
  border-color:var(--danger-border);
}

.badge-warn{
  background:var(--amber-bg);
  color:var(--amber-text);
  border-color:#F0D5A8;
}

/* =========================
   LISTS
========================= */
.list{
  list-style:none;
  padding:0;
  margin:0;
}

.list-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  margin-bottom:8px;
  max-width:100%;
  overflow:hidden;
  flex-wrap:wrap;
  gap:8px;
  transition:background .12s;
}

.list-item:hover{
  background:var(--row-hover);
}

.list-item[data-href],
.list-item[data-reopen]{
  cursor:pointer;
}

.list-left{
  display:flex;
  flex-direction:column;
  min-width:0;
}

/* =========================
   FORMS
========================= */
input,
select,
textarea{
  width:100%;
  padding:8px 10px;
  border-radius:var(--radius-btn);
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  font-size:13px;
  font-family:var(--font-display);
  max-width:100%;
}

input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--primary);
}

label{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
}

.form-row{
  display:grid;
  gap:10px;
}

.form-row.two{
  grid-template-columns:repeat(2, 1fr);
}

@media (max-width: 600px){
  .form-row.two{
    grid-template-columns:1fr;
  }

  /* Doigt ganté sur TC22 : aucun contrôle de saisie sous 44px de haut. */
  select,
  input[type="text"],
  input[type="time"],
  input[type="password"]{
    min-height:44px;
  }
}

/* =========================
   TABLES (ADMIN)
========================= */
.table-wrap{
  overflow-x:auto;
  border-radius:10px;
  max-width:100%;
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
}

.table th,
.table td{
  padding:10px 12px;
  border-bottom:1px solid var(--divider-2);
  font-size:13px;
  vertical-align:middle;
}

.table th{
  background:var(--zone-bg);
  font-weight:500;
  color:var(--text-discreet);
  font-size:11px;
  font-family:var(--font-mono-brand);
  text-transform:uppercase;
  letter-spacing:.08em;
  border-bottom:1px solid var(--border);
}

.table tbody tr:hover{
  background:var(--zone-bg);
}

.table tr:last-child td{
  border-bottom:none;
}

.actions-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}

.actions-row .field{
  width:auto;
  min-width:110px;
}

.btn-group{
  display:flex;
  gap:6px;
}

/* =========================
   TABS (sous-onglets internes à une page)
========================= */
.tabs{
  display:flex;
  gap:4px;
  margin:0 0 18px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--border);
}

.tab{
  text-decoration:none;
  padding:9px 4px;
  margin-right:22px;
  font-size:13px;
  font-weight:600;
  font-family:var(--font-display);
  color:var(--muted);
  border-bottom:2px solid transparent;
}

.tab:hover{
  color:var(--text);
  text-decoration:none;
}

.tab.active{
  color:var(--primary);
  border-bottom-color:var(--primary);
}

/* =========================
   LINKS
========================= */
a{
  color:var(--primary);
  text-decoration:none;
  font-weight:600;
}

a:hover{
  text-decoration:underline;
}

/* =========================
   IMAGES
========================= */
img{
  max-width:100%;
  height:auto;
  display:block;
}

/* =========================
   PAGE HEADER (bouton retour + titre + actions)
========================= */
.page-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:16px;
}

.page-header h1{
  margin:0;
}

.back-link{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-bottom:8px;
  font-size:13px;
  color:var(--muted);
}

.back-link:hover{
  color:var(--primary);
}

/* ── Grilles du menu « Plan de transport » ─────────────────────────────────
   Tableaux de saisie type tableur : la case EST le champ, aucun bouton
   « Enregistrer ». L'éclair vert/rouge sur la ligne remplace la confirmation
   qu'un formulaire donnait par son rechargement de page. */

.table-grid td{
  padding:5px 8px;
}

.table-grid .col-jour{
  text-align:center;
  width:74px;
}

.table-grid th.col-jour{
  text-align:center;
}

.th-date{
  font-size:10px;
  letter-spacing:0;
  text-transform:none;
  opacity:.65;
}

.cell-num,
.cell-input,
.cell-select{
  padding:6px 8px;
  font-size:13px;
  border-color:transparent;
  background:transparent;
}

.cell-num{
  text-align:center;
  width:100%;
  /* Les flèches natives mangent la moitié d'une case de 74px et n'ont aucun
     intérêt pour une saisie au clavier. */
  -moz-appearance:textfield;
}

.cell-num::-webkit-outer-spin-button,
.cell-num::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

.cell-num:hover,
.cell-input:hover,
.cell-select:hover{
  border-color:var(--border);
  background:#fff;
}

.cell-num:focus,
.cell-input:focus,
.cell-select:focus{
  border-color:var(--primary);
  background:#fff;
}

/* Une case vide est un trou dans la saisie, pas un zéro : elle reste discrète
   pour que les jours réellement servis ressortent d'un coup d'œil. */
.cell-vide{
  color:var(--text-discreet);
}

.table-grid .cell-total{
  text-align:center;
  white-space:nowrap;
  background:var(--zone-bg);
}

.table-grid .add-row td{
  background:var(--zone-bg);
}

.table-grid .add-row .cell-input,
.table-grid .add-row .cell-select{
  border-color:var(--border);
  background:#fff;
}

tr.just-saved td{
  animation:flash-ok .9s ease-out;
}

tr.just-failed td{
  animation:flash-err .9s ease-out;
}

@keyframes flash-ok{
  0%   { background:var(--success-bg); }
  100% { background:transparent; }
}

@keyframes flash-err{
  0%   { background:var(--danger-bg); }
  100% { background:transparent; }
}

/* Le champ « camions » du tableau de couverture est le seul élément modifiable au
   milieu de cellules figées : sans bordure visible, personne ne devine qu'on peut
   y taper. Les grilles de saisie, elles, sont modifiables de part en part et gardent
   leurs bordures au survol seulement. */
#table-couverture .cell-num,
#table-couverture .cell-num:hover{
  border-color:var(--border);
  background:#fff;
  width:72px;
}

/* ── Code couleur par transporteur ────────────────────────────────────────
   La couleur est portée par la ligne via --accent (posée en style inline
   depuis le serveur ou le JS, c'est la seule donnée variable) ; tout le reste
   du dessin vit ici. Un transporteur garde la même couleur sur les quatre
   écrans du menu : c'est ce qui permet de suivre une ligne de l'un à l'autre. */

.chip-transporteur{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-weight:600;
  font-size:12.5px;
  white-space:nowrap;
}

.dot-transporteur{
  width:9px;
  height:9px;
  border-radius:50%;
  flex:0 0 9px;
  /* Les couleurs sombres de la palette se détachent mal du fond gris des
     en-têtes : un liseré blanc les décolle sans les éclaircir. */
  box-shadow:0 0 0 2px #fff;
}

.cell-transporteur{
  display:flex;
  align-items:center;
  gap:7px;
}

.cell-transporteur .cell-select{
  flex:1;
  min-width:130px;
}

/* Liseré de couleur en tête de ligne. Sur la première cellule plutôt qu'en
   border-left du <tr>, que border-collapse:separate rendrait irrégulier. */
.table tbody tr[style*="--accent"] > td:first-child{
  box-shadow:inset 3px 0 0 var(--accent, transparent);
}

/* Le tableau de couverture donne plus d'air à ses lignes : chacune porte
   deux niveaux d'information (chiffre + précision en petit). */
#table-couverture td{
  padding:12px;
}

#table-couverture tbody tr:hover{
  background:var(--zone-bg);
}

.table-grid tbody tr:hover{
  /* Le survol par défaut repeindrait les cases teintées par transporteur et
     ferait disparaître la lecture en couleur au passage de la souris. */
  background:transparent;
}

.table-grid .col-jour{
  transition:background .15s ease;
}

/* ── Camions réels du jour (plan de transport) ────────────────────────────
   Une carte par PLAQUE, pas par transporteur : un camion qui charge pour deux
   transporteurs à la suite (Chronopost puis 2Shop) reste un seul camion. */

.camions-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:10px;
}

.camion-carte{
  border:1px solid var(--border);
  border-left:4px solid var(--accent, var(--border));
  border-radius:var(--radius-tile, 10px);
  padding:10px 12px;
  background:#fff;
}

/* Un camion encore à quai est le seul sur lequel on peut agir : il doit sortir
   de la liste de ceux déjà partis. */
.camion-a-quai{
  background:var(--amber-bg, #fff8e6);
  border-color:var(--amber, #E0A83C);
}

.camion-entete{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}

.camion-plaque{
  font-family:var(--font-mono-brand, monospace);
  font-weight:700;
  font-size:15px;
  letter-spacing:.04em;
}

.camion-transporteurs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:8px;
}

.camion-chiffres{
  font-size:14px;
}

.camion-horaires{
  font-size:11.5px;
  margin-top:4px;
}

/* Plaques rappelées dans la colonne « Réel monté » du tableau par transporteur. */
.plaques-ligne{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:5px;
}

.plaque-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 6px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--zone-bg);
  font-family:var(--font-mono-brand, monospace);
  font-size:11px;
  letter-spacing:.03em;
  color:var(--text);
}

.plaque-a-quai{
  background:var(--amber-bg, #fff8e6);
  border-color:var(--amber, #E0A83C);
}

.plaque-pal{
  font-weight:700;
}

.plaque-partage{
  font-weight:700;
  opacity:.7;
}