/* =====================================================================
   DZ EXPRESS — feuille de style unique.

   Direction : chaleureuse et lisible. Fond gris tres clair, cartes
   blanches arrondies posees dessus, ombres douces, rouge profond en
   signature. L'information respire, les zones cliquables sont franches.

   Bidirectionnel : les proprietes logiques (inline-start/end) portent le
   passage LTR <-> RTL sans feuille separee.
   ===================================================================== */

:root {
  /* Rouge de marque, du plus sombre au plus clair */
  --brand-900: #6d1113;
  --brand-800: #8c1a1c;
  --brand-700: #a81f22;
  --brand:     #c62828;
  --brand-600: #b02322;
  --brand-100: #fdecec;
  --brand-050: #fff6f6;

  --ink:      #1f2430;
  --ink-2:    #384152;
  --muted:    #6b7280;
  --muted-2:  #8a92a3;
  --line:     #e6e8ee;
  --line-2:   #f0f2f6;
  --bg:       #f4f6f9;
  --surface:  #ffffff;
  --ok:       #12805c;
  --ok-bg:    #e8f6f0;
  --warn:     #b7791f;
  --warn-bg:  #fdf6e3;

  --font:    "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ar: "Noto Kufi Arabic", "Poppins", system-ui, sans-serif;
  --mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s6: 24px; --s8: 32px; --s12: 48px;

  --r-sm:   8px;
  --r:      14px;
  --r-lg:   20px;
  --r-pill: 999px;

  --sh-sm: 0 1px 2px rgba(23, 28, 40, .06), 0 1px 3px rgba(23, 28, 40, .08);
  --sh:    0 2px 6px rgba(23, 28, 40, .05), 0 8px 24px rgba(23, 28, 40, .07);
  --sh-lg: 0 8px 20px rgba(23, 28, 40, .09), 0 24px 48px rgba(23, 28, 40, .10);

  --sidebar-w: 264px;
  --header-h:  68px;

  /* Alias de compatibilite : plusieurs vues posent encore ces variables
     dans un style en ligne. Les conserver evite des bordures invisibles
     et des couleurs manquantes apres la refonte. */
  --accent:   var(--brand);
  --rule:     1px solid var(--line);
  --thin:     1px solid var(--line-2);
  --divider:  var(--line);
  --hairline: var(--line-2);
  --n-200:    #f0f2f6;
  --n-300:    #e3e7ee;
  --n-400:    #cfd5e0;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Les navigateurs mobiles retardent le clic pour guetter un double-tap.
   touch-action le leur interdit : les boutons repondent immediatement. */
a, button, .btn, .chip, .nav-item, .seg-opt, select, summary, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
body[dir="rtl"] { font-family: var(--font-ar); }

h1, h2, h3, h4, h5 {
  font-weight: 700; line-height: 1.2; letter-spacing: -.015em;
  margin: 0 0 var(--s2); color: var(--ink);
}
h1 { font-size: 28px; }
h2 { font-size: 23px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-700); }

::selection { background: rgba(198, 40, 40, .18); }
:focus { outline: none; }
:focus-visible { outline: 3px solid rgba(198, 40, 40, .35); outline-offset: 2px; border-radius: var(--r-sm); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d3d8e2; border-radius: var(--r-pill); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #bcc3d0; }

/* ---------------------------------------------------------------- */
/* Utilitaires                                                       */
.kicker {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: var(--s1);
}
.mono { font-family: var(--mono); letter-spacing: .01em; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny  { font-size: 11.5px; }
.strong { font-weight: 600; }
.num { font-variant-numeric: tabular-nums; }
.hr { border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; }
.grayscale { filter: grayscale(1); }
.nowrap { white-space: nowrap; }
.right { text-align: end; }
.center { text-align: center; }
.flex { display: flex; align-items: center; gap: var(--s3); }
.flex-1 { flex: 1; min-width: 0; }
.wrap { flex-wrap: wrap; }
.stack > * + * { margin-top: var(--s4); }
.hide { display: none !important; }
.ar-sub {
  display: block; font-family: var(--font-ar); font-size: 11px;
  opacity: .6; direction: rtl; margin-top: 1px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- */
/* Grille de l'application                                           */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  display: flex; flex-direction: column;
  background: var(--brand-900); color: #fff;
  position: sticky; top: 0; height: 100vh;
}
.sidebar-head { padding: 22px 20px 18px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand-mark {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px;
  background: var(--brand); display: grid; place-items: center;
  box-shadow: inset 0 -2px 6px rgba(0, 0, 0, .18);
}
.brand-mark::after {
  content: ""; width: 15px; height: 15px; border-radius: 50%;
  border: 2.5px solid #fff; border-inline-end-color: transparent; transform: rotate(-35deg);
}
.brand-logo { height: 34px; width: auto; max-width: 170px; display: block; border-radius: 6px; }
.brand-name { font-weight: 700; font-size: 18px; letter-spacing: -.02em; line-height: 1; }
.sidebar .brand-name { color: #fff; }
.brand-sub {
  margin-top: 6px; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255, 255, 255, .55);
}

.nav { flex: 1; overflow-y: auto; padding: 12px 12px 18px; }
.nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-color: transparent; }
.nav-group {
  padding: 16px 10px 6px; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255, 255, 255, .45); font-weight: 600;
}
.nav-item {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: start;
  border: 0; background: none; color: rgba(255, 255, 255, .82); cursor: pointer;
  font: inherit; text-decoration: none; padding: 10px 12px;
  border-radius: var(--r-sm); margin-bottom: 2px;
  transition: background .15s, color .15s;
}
.nav-item:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.nav-item.is-active { background: var(--brand); color: #fff; box-shadow: var(--sh-sm); }
.nav-label { display: block; font-size: 14px; font-weight: 500; }
.nav-item.is-active .nav-label { font-weight: 600; }
.nav-count {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .14); font-variant-numeric: tabular-nums;
}
.nav-item.is-active .nav-count { background: rgba(0, 0, 0, .2); }

.sidebar-foot {
  border-top: 1px solid rgba(255, 255, 255, .12); padding: 14px 16px;
  display: flex; align-items: center; gap: 10px;
}
.avatar {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 600;
}
.sidebar-foot .flex-1 > div:first-child { color: #fff; }
.sidebar-foot .muted { color: rgba(255, 255, 255, .55); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  min-height: var(--header-h); padding: 14px 28px;
  display: flex; align-items: center; gap: var(--s4);
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.topbar h1 { margin: 0; font-size: 21px; }
.content { padding: 26px 28px 60px; }

/* ---------------------------------------------------------------- */
/* Boutons                                                           */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 11px 20px; border: 1px solid transparent; border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  text-decoration: none; box-shadow: var(--sh-sm);
  transition: background .15s, color .15s, box-shadow .15s, transform .08s;
}
.btn:hover { box-shadow: var(--sh); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }

.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-600); color: #fff; }

.btn-ghost { background: transparent; box-shadow: none; border-color: var(--line); color: var(--muted); }
.btn-ghost:hover { background: var(--line-2); box-shadow: none; color: var(--ink); }

.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: var(--r-sm); }
.btn-block { width: 100%; }
.btn-icon { padding: 9px; }
.btn-row { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ---------------------------------------------------------------- */
/* Pastilles de statut                                               */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; font-size: 12px; font-weight: 600;
  border-radius: var(--r-pill); white-space: nowrap; line-height: 1.5;
}
.tag-solid   { background: var(--brand); color: #fff; }
.tag-soft    { background: var(--brand-100); color: var(--brand-700); }
.tag-neutral { background: var(--line-2); color: var(--ink-2); }
.tag-outline { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.tag-ok      { background: var(--ok-bg); color: var(--ok); }
.tag-warn    { background: var(--warn-bg, #fdf3e0); color: var(--warn, #a05a00); }

/* ---------------------------------------------------------------- */
/* Cartes                                                            */
.grid { display: grid; gap: var(--s4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-side      { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }
.grid-side-wide { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }

.panel {
  background: var(--surface); border-radius: var(--r);
  box-shadow: var(--sh-sm); overflow: hidden;
}
.panel-head {
  padding: 16px 20px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: var(--s3);
}
.panel-head h3 { margin: 0; font-size: 16px; }
.panel-body { padding: 20px; }

.kpi {
  background: var(--surface); border-radius: var(--r); padding: 20px;
  box-shadow: var(--sh-sm); transition: box-shadow .18s, transform .18s;
}
@media (hover: hover) and (pointer: fine) {
  .kpi:hover  { box-shadow: var(--sh); transform: translateY(-2px); }
    .table tbody tr:hover { background: #fafbfd; }
  .bar:hover { background: #cfd5e0; }
}
.kpi-label {
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: var(--s2);
}
.kpi-value {
  font-size: 32px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.kpi-delta { margin-top: var(--s2); font-size: 12.5px; color: var(--muted); }
.kpi-delta.is-alert { color: var(--brand); font-weight: 600; }

/* ---------------------------------------------------------------- */
/* Tableaux                                                          */
.table-wrap {
  background: var(--surface); border-radius: var(--r);
  box-shadow: var(--sh-sm); overflow-x: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
table.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table thead th {
  text-align: start; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: 13px 18px;
  border-bottom: 1px solid var(--line); white-space: nowrap; background: #fbfcfd;
}
.table tbody td { padding: 14px 18px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .12s; }
.table .num { text-align: end; font-variant-numeric: tabular-nums; }
.table a { color: var(--ink); font-weight: 600; }
.table a:hover { color: var(--brand); }
.panel .table-wrap { box-shadow: none; border-radius: 0; }

.empty { padding: 54px 18px; text-align: center; color: var(--muted-2); }

/* ---------------------------------------------------------------- */
/* Formulaires                                                       */
.field { margin-bottom: var(--s4); }
.field > label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--ink-2); margin-bottom: 6px;
}
.field .hint { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.field.is-error .input, .field.is-error select, .field.is-error textarea { border-color: var(--brand); }
.field .error { font-size: 12.5px; color: var(--brand-700); margin-top: 5px; font-weight: 500; }

.input, select, textarea {
  width: 100%; padding: 11px 14px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 15px; appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder, textarea::placeholder { color: var(--muted-2); }
.input:hover, select:hover, textarea:hover { border-color: #d3d8e2; }
.input:focus, select:focus, textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(198, 40, 40, .12);
}
textarea { min-height: 100px; resize: vertical; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236b7280' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-inline-end: 38px; cursor: pointer;
}
body[dir="rtl"] select { background-position: left 14px center; }

.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.check input { width: 18px; height: 18px; accent-color: var(--brand); margin-top: 2px; border-radius: 4px; }

.seg {
  display: inline-flex; padding: 4px; gap: 2px;
  background: var(--line-2); border-radius: var(--r-sm);
}
.seg-opt {
  padding: 8px 15px; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 0; border-radius: 6px; background: none; color: var(--muted);
  font-family: inherit; transition: background .15s, color .15s;
}
.seg-opt:hover { color: var(--ink); }
.seg-opt.is-on { background: var(--surface); color: var(--brand); box-shadow: var(--sh-sm); }

.filters {
  display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center;
  margin-bottom: var(--s4);
}
.chip {
  padding: 8px 15px; font-size: 13.5px; font-weight: 600; text-decoration: none;
  border-radius: var(--r-pill); background: var(--surface); color: var(--muted);
  box-shadow: var(--sh-sm); transition: background .15s, color .15s;
}
.chip:hover { color: var(--ink); }
.chip.is-on { background: var(--brand); color: #fff; }
.chip .n { opacity: .7; margin-inline-start: 5px; font-variant-numeric: tabular-nums; }

/* Barre d'etapes du colis.
   Elle suit le parcours de gauche a droite. Sur mobile elle defile
   horizontalement plutot que de passer a la ligne : le parcours se lit
   dans un sens, l'empiler sur quatre lignes en casse la lecture. */
.stagebar {
  display: flex; gap: var(--s2); align-items: center;
  margin-bottom: var(--s3); padding-bottom: var(--s2);
  overflow-x: auto; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.stagebar .chip { flex: 0 0 auto; white-space: nowrap; }
/* Le compteur porte la couleur, pas la pastille entiere : douze pastilles
   colorees cote a cote deviennent illisibles. */
.stagebar .chip .n {
  opacity: 1; font-weight: 700; padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--line-2); color: var(--muted);
}
.stagebar .chip.st-move .n { background: var(--info-bg, #eaf1fb); color: var(--info, #2563a8); }
.stagebar .chip.st-ok   .n { background: var(--ok-bg);   color: var(--ok); }
.stagebar .chip.st-warn .n { background: var(--warn-bg); color: var(--warn); }
.stagebar .chip.is-on .n { background: rgba(255,255,255,.22); color: #fff; }
@media (max-width: 720px) {
  .stagebar { margin-inline: calc(var(--s4) * -1); padding-inline: var(--s4); }
}

/* Selecteur de langue */
.lang-select { display: inline-flex; align-items: center; flex: 0 0 auto; }
.lang-select select {
  width: auto; min-width: 112px; padding: 8px 34px 8px 12px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  border-radius: var(--r-pill); background-color: var(--surface);
}
.pub-nav .lang-select select {
  background-color: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .22);
  color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23ffffff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pub-nav .lang-select select option { color: var(--ink); }

/* ---------------------------------------------------------------- */
/* Chronologie de suivi                                              */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: grid; grid-template-columns: 64px 20px 1fr; gap: var(--s3);
  align-items: start; padding: 14px 0;
}
.tl-time { font-size: 12px; color: var(--muted); padding-top: 3px; font-variant-numeric: tabular-nums; }
.tl-rail { position: relative; height: 100%; }
.tl-dot {
  width: 11px; height: 11px; border-radius: 50%; background: #cfd5e0;
  margin-top: 5px; position: relative; z-index: 1;
  box-shadow: 0 0 0 3px var(--surface);
}
.tl-dot.is-now { background: var(--brand); box-shadow: 0 0 0 4px var(--brand-100); }
.tl-dot.is-future { background: #e3e7ee; }
.tl-rail::after {
  content: ""; position: absolute; inset-inline-start: 5px; top: 17px; bottom: -14px;
  width: 2px; background: var(--line);
}
.timeline li:last-child .tl-rail::after { display: none; }
.tl-title { font-weight: 600; font-size: 14.5px; }
.tl-place { font-size: 12.5px; color: var(--muted); display: block; }

/* ---------------------------------------------------------------- */
/* Barres et classements                                             */
.bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; }
.bar-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.bar { background: #e3e7ee; width: 100%; border-radius: 6px 6px 0 0; }
.bar.is-now { background: var(--brand); }
.bar-label { font-size: 11.5px; color: var(--muted); margin-top: 8px; text-align: center; }

.rank { list-style: none; margin: 0; padding: 0; }
.rank li { padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.rank li:last-child { border-bottom: 0; }
.rank-row { display: flex; align-items: baseline; gap: var(--s3); }
.rank-name { flex: 1; font-weight: 500; font-size: 14px; }
.rank-val { font-variant-numeric: tabular-nums; font-weight: 600; }
.rank-bar { height: 6px; background: var(--brand); margin-top: 7px; border-radius: var(--r-pill); min-width: 6px; }

/* ---------------------------------------------------------------- */
/* Messages                                                          */
.flash {
  border-radius: var(--r-sm); padding: 13px 17px; margin-bottom: var(--s4);
  font-size: 14px; box-shadow: var(--sh-sm); background: var(--surface);
  border-inline-start: 4px solid var(--line);
}
.flash-ok    { border-inline-start-color: var(--ok);    background: var(--ok-bg);    color: #0b5c43; }
.flash-error { border-inline-start-color: var(--brand); background: var(--brand-050); color: var(--brand-700); }
.flash-info  { border-inline-start-color: var(--muted-2); }

/* ---------------------------------------------------------------- */
/* Site public                                                       */
.pub-nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--s4); padding: 0 32px; min-height: var(--header-h);
  background: var(--brand-900); position: sticky; top: 0; z-index: 20;
}
.pub-nav > .brand { justify-self: start; min-width: 0; color: #fff; }
.pub-nav .brand-name { color: #fff; }
.pub-links { display: flex; gap: var(--s6); align-items: center; justify-self: center; }
.pub-links a {
  color: rgba(255, 255, 255, .85); font-size: 14.5px; font-weight: 500;
  white-space: nowrap; padding: 6px 0; position: relative;
}
.pub-links a:hover { color: #fff; }
.pub-links a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: #fff; border-radius: 2px; transform: scaleX(0); transition: transform .18s;
}
.pub-links a:hover::after { transform: scaleX(1); }
.pub-links a.is-on { color: #fff; font-weight: 600; }
.pub-links a.is-on::after { transform: scaleX(1); }
.pub-links .pub-cta { display: none; }
.pub-actions { display: flex; align-items: center; gap: var(--s2); justify-self: end; }
.pub-account { white-space: nowrap; background: var(--brand); color: #fff; box-shadow: none; }
.pub-account:hover { background: var(--brand-600); color: #fff; }

/* Bandeau d'accueil */
.hero {
  padding: 72px 32px 84px;
  background: linear-gradient(160deg, var(--brand-900) 0%, var(--brand-700) 62%, var(--brand) 100%);
  color: #fff; position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset-inline-end: -140px; top: -160px;
  width: 520px; height: 520px; border-radius: 50%;
  background: rgba(255, 255, 255, .05);
}
.hero-inner { width: 100%; margin: 0; position: relative; z-index: 1; }
.hero .kicker { color: rgba(255, 255, 255, .7); }
.hero h1 {
  color: #fff; font-size: clamp(32px, 5vw, 56px); line-height: 1.12;
  letter-spacing: -.03em; max-width: 20ch; margin-bottom: var(--s4);
}
.hero p {
  font-size: clamp(16px, 1.4vw, 19px); color: rgba(255, 255, 255, .82);
  max-width: 62ch; margin: 0 0 var(--s8);
}

/* Variantes de fond du bandeau : image, video, degrade anime */
.hero-media { background-repeat: no-repeat; }
.hero-video { position: relative; }
.hero-bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(120deg, #10141c 0%, rgba(16, 20, 28, .55) 100%);
}
.hero-animated {
  background-size: 220% 220%;
  animation: heroShift 18s ease-in-out infinite;
}
@keyframes heroShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
/* Une animation de fond n'a pas sa place quand l'utilisateur demande le
   calme, ni sur un mobile ou elle coute de la batterie pour rien. */
@media (max-width: 860px) { .hero-animated { animation: none; background-size: cover; } }

/* Champ de suivi : la carte blanche posee sur le bandeau */
.track-box {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); width: 100%; max-width: 720px; overflow: hidden;
}
.track-box .panel-body { display: flex; gap: var(--s2); padding: 10px; align-items: center; }
.track-box .input {
  border: 0; box-shadow: none; font-size: 16px; padding: 14px 16px;
}
.track-box .input:focus { box-shadow: none; }
.track-box .btn { padding: 14px 26px; font-size: 15px; flex: 0 0 auto; }

.section { padding: 60px 32px; }
.section-inner { width: 100%; margin: 0; }
.section h2 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.025em; margin-bottom: var(--s6); }

.cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: var(--s4); }
.cell {
  padding: 26px 24px; background: var(--surface);
  border-radius: var(--r); box-shadow: var(--sh-sm);
  transition: box-shadow .18s, transform .18s;
}
.cell h3 { font-size: 17px; margin-bottom: var(--s2); }
.cell p { font-size: 14px; color: var(--muted); margin: 0; }
.cell .kpi-value { color: var(--brand); }

.poster {
  margin: 0 32px 60px; padding: 56px 44px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--brand-800), var(--brand)); color: #fff;
  box-shadow: var(--sh-lg);
}
.poster h2 { color: #fff; font-size: clamp(26px, 3.4vw, 40px); max-width: 20ch; }
.poster p { font-size: 16.5px; color: rgba(255, 255, 255, .88); max-width: 56ch; }
.poster .btn { background: #fff; color: var(--brand-700); }
.poster .btn:hover { background: rgba(255, 255, 255, .9); color: var(--brand-800); }

.footer { padding: 52px 32px 40px; background: var(--surface); border-top: 1px solid var(--line); font-size: 14px; }
.footer-inner {
  width: 100%; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s8);
}
.footer h4 { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.footer a { display: block; color: var(--ink-2); padding: 4px 0; font-size: 14px; }
.footer a:hover { color: var(--brand); }
.footer .brand-name { color: var(--ink); }

/* ---------------------------------------------------------------- */
/* Cartographie                                                      */
/* Leaflet empile ses couches jusqu'a 800. Sans contexte dedie, elles */
/* passeraient devant le tiroir de navigation.                        */
.leaflet-container { z-index: 0; isolation: isolate; border-radius: var(--r); }
#map { position: relative; z-index: 0; }

/* ---------------------------------------------------------------- */
/* Menu mobile                                                       */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: 0 0 42px; padding: 0;
  border: 0; border-radius: var(--r-sm); background: rgba(255, 255, 255, .14);
  cursor: pointer;
}
.topbar .nav-toggle { background: var(--line-2); }
.nav-toggle span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; position: relative; }
.topbar .nav-toggle span, .topbar .nav-toggle span::before, .topbar .nav-toggle span::after { background: var(--ink-2); }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; inset-inline-start: 0; width: 18px; height: 2px;
  background: #fff; border-radius: 2px; transition: transform .18s, top .18s;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

.scrim {
  position: fixed; inset: 0; z-index: 1500; background: rgba(23, 28, 40, .5);
  opacity: 0; pointer-events: none; transition: opacity .18s linear;
  will-change: opacity;
}
.scrim.is-on { opacity: 1; pointer-events: auto; }

/* ---------------------------------------------------------------- */
/* Etiquette colis (impression)                                      */
.label-sheet { width: 100mm; border: 2px solid #000; padding: 6mm; background: #fff; color: #000; border-radius: 0; }
.label-head { display: flex; justify-content: space-between; align-items: flex-start;
              border-bottom: 2px solid #000; padding-bottom: 4mm; margin-bottom: 4mm; }
.label-block { margin-bottom: 4mm; }
.label-block .k { font-size: 8pt; letter-spacing: .08em; text-transform: uppercase; color: #555; }
.label-block .v { font-size: 12pt; font-weight: 700; }
.label-cod { border: 2px solid #000; padding: 3mm; text-align: center; margin-top: 3mm; }
.label-cod .v { font-size: 18pt; font-weight: 800; }

@media print {
  .no-print, .sidebar, .topbar, .pub-nav, .footer, .scrim { display: none !important; }
  body { background: #fff; }
  .content { padding: 0; }
  .panel, .table-wrap, .kpi { box-shadow: none; }
  .label-sheet { border: 0; page-break-after: always; }
}

/* ---------------------------------------------------------------- */
/* Adaptation aux ecrans                                             */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-side, .grid-side-wide { grid-template-columns: minmax(0, 1fr); }
  .pub-links { gap: var(--s4); }
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }

  /* Toute grille a colonnes fixes se replie, y compris celles posees en
     style direct dans une vue. */
  .grid[style*="grid-template-columns"],
  .grid-2, .grid-3, .grid-4, .grid-side, .grid-side-wide {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Tiroir de navigation. Trois zones : l'en-tete et le bloc compte
     gardent leur hauteur, seule la liste des modules defile. Le compte et
     la deconnexion restent donc toujours visibles. */
  .sidebar {
    position: fixed; top: 0; bottom: 0; inset-inline-start: 0;
    z-index: 1600;                       /* au-dessus de la carte et du voile */
    width: min(84vw, 300px); height: auto;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.32, .72, 0, 1);
    display: flex; flex-direction: column; overflow: hidden;
    /* La barre est repeinte a chaque image pendant l'ouverture : on
       previent le navigateur et on isole son rendu du reste de la page. */
    will-change: transform;
    contain: layout paint;
    box-shadow: 4px 0 24px rgba(23, 28, 40, .18);
  }
  body[dir="rtl"] .sidebar { transform: translateX(100%); }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-head { flex: 0 0 auto; }
  .sidebar .nav {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  .sidebar-foot { flex: 0 0 auto; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }

  /* Le titre du module fait doublon avec le menu et mange une ligne
     entiere sur un petit ecran. */
  .topbar h1, .topbar .kicker { display: none; }
  .topbar { padding: 12px 16px; min-height: 60px; }
  .topbar .lang-select { margin-inline-start: auto; }

  .content { padding: 18px 14px 40px; }

  /* En-tete public : marque a gauche, langue et menu a droite, liens
     deroulants en dessous. Le bouton de connexion descend dans le
     panneau : dans la barre, il debordait. */
  .pub-nav { display: flex; flex-wrap: wrap; padding: 10px 14px; gap: 10px; min-height: 0; }
  .pub-nav .brand-name { font-size: 16px; }
  .pub-nav .brand-logo, .pub-nav .brand-mark { height: 30px; width: 30px; flex-basis: 30px; }
  .pub-actions { margin-inline-start: auto; }
  .pub-account { display: none; }
  .pub-links {
    display: none; order: 9; width: 100%; flex-direction: column;
    gap: 0; justify-self: stretch;
    border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 4px; padding: 4px 0 8px;
  }
  .pub-nav.is-open .pub-links { display: flex; }
  .pub-links a { padding: 13px 4px; font-size: 15px; }
  .pub-links a::after { display: none; }
  .pub-links a.is-on {
    color: #fff; padding-inline-start: 12px;
    border-inline-start: 3px solid #fff; border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: rgba(255, 255, 255, .1);
  }
  .pub-links .pub-cta {
    display: block; margin-top: 10px; padding: 13px 16px; text-align: center;
    background: var(--brand); color: #fff; border-radius: var(--r-sm); font-weight: 600;
  }

  .hero { padding: 44px 16px 52px; }
  .hero h1 { font-size: clamp(27px, 7vw, 34px); }
  .section { padding: 36px 16px; }
  .poster { margin: 0 16px 40px; padding: 36px 22px; }
  .footer { padding: 36px 16px 28px; }
  .track-box .panel-body { flex-direction: column; align-items: stretch; }
  .track-box .btn { width: 100%; }

  /* Tableaux replies en fiches lisibles au pouce */
  .table thead { display: none; }
  .table tbody tr {
    display: block; padding: 12px 4px; border-bottom: 1px solid var(--line);
  }
  .table tbody tr:last-child { border-bottom: 0; }
  .table tbody td {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--s3); padding: 7px 14px; border-bottom: 0; text-align: end;
  }
  .table tbody td::before {
    content: attr(data-label); font-size: 12px; color: var(--muted);
    font-weight: 600; text-align: start; flex: 0 0 auto;
  }
  .table .num { text-align: end; }
}

/* Reglages propres au tactile : moins d'ombres a recalculer, defilement
   natif sans lissage force. */
@media (max-width: 860px) {
  html { scroll-behavior: auto; }
  .panel, .kpi, .cell, .table-wrap, .chip { box-shadow: 0 1px 3px rgba(23, 28, 40, .08); }
  .kpi, .cell, .panel { transition: none; }
  .track-box { box-shadow: 0 6px 20px rgba(23, 28, 40, .14); }
  .hero::after { display: none; }        /* grand cercle flou inutile ici */
}

@media (max-width: 520px) {
  .lang-select select { min-width: 92px; padding: 7px 28px 7px 10px; font-size: 12.5px; }
  .kpi-value { font-size: 27px; }
  .content { padding: 14px 12px 32px; }
  .panel-body { padding: 16px; }
  .section h2 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------------
   Bandeau d'installation de l'application livreur.

   Une bande fine sous l'en-tete, pas un panneau flottant : elle doit
   pouvoir rester affichee en permanence sans jamais couvrir un bouton ni
   masquer une ligne de la tournee.

   La premiere regle n'est pas decorative. Sans elle, .dv-install{display:flex}
   — regle du site — l'emporte sur le [hidden]{display:none} du navigateur,
   et l'attribut hidden ne masque plus rien.
   ------------------------------------------------------------------- */
.dv-install[hidden]{display:none !important}
.dv-install{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:#132433;color:#e8eef5;padding:7px 12px;
  font-size:12.5px;line-height:1.35}
.dv-install-txt{flex:1;min-width:150px}

.dv-install-btn{border:0;border-radius:7px;padding:5px 12px;font:inherit;font-weight:700;
  font-size:12.5px;background:#f0a500;color:#132433;cursor:pointer;white-space:nowrap}
.dv-install-btn:hover{background:#ffb81f}

/* Refus definitif : lisible, mais nettement moins appuye que le bouton —
   c'est une sortie, pas une action que l'on met en avant. */
.dv-install-off{background:none;border:0;padding:4px 2px;font:inherit;font-size:11.5px;
  color:#8fa3b8;text-decoration:underline;cursor:pointer;white-space:nowrap}
.dv-install-off:hover{color:#e8eef5}

.dv-install-ios{font-size:12px;opacity:.9}
.dv-install-x{background:none;border:0;color:#8fa3b8;font-size:19px;line-height:1;
  cursor:pointer;padding:0 2px}
.dv-install-x:hover{color:#fff}

/* Porte de retour. Discrete au point de ne pas se remarquer tant qu'on ne
   la cherche pas — mais elle est la, en bas de chaque page. */
.dv-install-back{display:block;margin:14px auto 4px;background:none;border:0;
  padding:6px 10px;font:inherit;font-size:11.5px;color:var(--muted-2,#8fa3b8);
  text-decoration:underline;cursor:pointer}
.dv-install-back:hover{color:var(--brand,#c62828)}
.dv-install-back[hidden]{display:none !important}
.da .dv-install-back,
.da-foot + .dv-install-back{color:rgba(255,255,255,.45)}

@media (max-width:360px){
  .dv-install{font-size:12px;padding:6px 10px}
  .dv-install-off{font-size:11px}
}

/* Lien d'inscription eteint : visible, mais clairement inactif. */
.is-off{opacity:.45;cursor:not-allowed;pointer-events:none;text-decoration:none}

/* ---------------------------------------------------------------------
   Selecteur d'agence de l'en-tete.

   Meme gabarit que le selecteur de langue, avec un etat « filtre » bien
   visible : tant qu'une agence est choisie, tous les chiffres de l'ecran
   sont partiels, et cela doit se voir au premier coup d'oeil.            */

.scope-select { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.scope-select select {
  width: auto; max-width: 230px; min-width: 150px;
  padding: 8px 34px 8px 12px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  border-radius: var(--r-pill); background-color: var(--surface);
  text-overflow: ellipsis;
}
.scope-select.is-on select {
  border-color: var(--brand); color: var(--brand);
  background-color: var(--surface);           /* repli navigateurs anciens */
  background-color: color-mix(in srgb, var(--brand) 8%, var(--surface));
  box-shadow: 0 0 0 1px var(--brand) inset;
}

.scope-fixed {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 8px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.scope-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px;
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(198, 40, 40, .18);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}

.scope-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; margin-bottom: var(--s4);
  border-radius: var(--r-sm);
  border: 1px solid var(--line);              /* repli navigateurs anciens */
  background: var(--surface);
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
  font-size: 13.5px; color: var(--ink-2);
}
.scope-banner strong { color: var(--brand); }

@media (max-width: 860px) {
  /* Sur mobile le titre disparait deja : la barre garde le menu, l'agence
     et la langue. L'agence prend la place restante, elle est le reglage
     que l'on change le plus souvent. */
  .topbar .scope-select { margin-inline-start: auto; flex: 1 1 auto; min-width: 0; }
  .topbar .scope-select select { width: 100%; max-width: none; min-width: 0; }
  .topbar .scope-select + .lang-select { margin-inline-start: 0; }
  .topbar .scope-fixed { margin-inline-start: auto; max-width: 46vw; }
}

@media (max-width: 520px) {
  .scope-select select { padding: 7px 26px 7px 10px; font-size: 12.5px; }
  .lang-select select  { min-width: 64px; }
  .scope-banner { padding: 9px 12px; font-size: 12.5px; }
}

/* Onglets en pilule (validations, securite).
   Ils vivaient dans un bloc <style> a l'interieur de securite.php : la vue
   des validations utilisait les memes classes sans ce bloc, et affichait
   donc deux boutons bruts, sans fond ni etat actif visible. Un style
   partage se declare une fois, ici. */
.sec-tabs{display:flex;gap:4px;background:rgba(0,0,0,.05);border-radius:11px;
  padding:4px;margin:0 0 18px;max-width:640px}
.sec-tab{flex:1;border:0;background:transparent;font:inherit;font-size:13.5px;
  font-weight:600;color:var(--muted,#6b7280);padding:9px 6px;border-radius:8px;cursor:pointer}
.sec-tab:hover{color:var(--ink,#111)}
.sec-tab.on{background:#fff;color:var(--ink,#111);box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* Onglets de navigation interne (module wilayas, ecran tarifs). */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line,#e6e9ee);margin:0 0 14px;flex-wrap:wrap}
.tabs .tab{padding:9px 16px;font-size:14px;font-weight:600;color:var(--muted,#6b7280);
  text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs .tab:hover{color:var(--ink,#201e1d)}
.tabs .tab.is-on{color:var(--accent,#ec3013);border-bottom-color:var(--accent,#ec3013)}

/* ------------------------------------------------------------------ */
/* Un secret montre une seule fois.
   Le libelle et la cle se touchaient, et la cle se coupait au milieu d'un
   mot. Elle a desormais son propre cadre, une respiration autour, et une
   coupure caractere par caractere : sur un ecran etroit, une cle de
   quarante-quatre signes doit rester lisible d'un bout a l'autre. */
.secret-box { border-color: var(--ok, #1a7f37); }
.secret-title { font-weight: 700; font-size: 15px; margin-bottom: 14px; color: var(--ink, #201e1d); }

.secret-row {
  display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap;
}
.secret-value {
  flex: 1 1 260px; min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px; line-height: 1.6; letter-spacing: .3px;
  background: var(--surface, #faf9f7);
  border: 1px solid var(--line, #e6e9ee); border-radius: 8px;
  padding: 11px 13px;
  word-break: break-all; overflow-wrap: anywhere;
  user-select: all;            /* un clic selectionne tout, sans la souris */
}
.secret-copy { flex: 0 0 auto; align-self: center; }
.secret-note { margin: 12px 0 0; font-size: 13px; color: var(--muted, #6b7280); }

@media (max-width: 560px) {
  .secret-copy { width: 100%; }
}

/* Saisie qui ne correspond a aucun client : on le signale sans bloquer —
   une expedition ponctuelle sans expediteur reste legitime. */
.input.is-unmatched { border-color: var(--warn, #b7791f); }

/* ------------------------------------------------------------------ */
/* Liste deroulante a cases.
   Un « select multiple » natif se manipule au Ctrl+clic — personne ne le
   devine, et sur mobile il est inutilisable. Ce panneau s'ouvre au clic,
   montre le nombre de colis par ligne, et se ferme quand on clique
   ailleurs ou qu'on appuie sur Echap. */
.dropdown { position: relative; display: inline-block; }

.dropdown-panel {
  position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 40;
  min-width: 280px; max-height: 340px; overflow-y: auto;
  background: #fff; border: 1px solid var(--line, #e6e9ee);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 6px;
}
.dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 7px; cursor: pointer;
  font-size: 14px; line-height: 1.3;
}
.dropdown-item:hover { background: var(--surface, #faf9f7); }
.dropdown-item input { margin: 0; flex: 0 0 auto; }

.dropdown-foot {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 10px 4px; margin-top: 4px;
  border-top: 1px solid var(--line, #e6e9ee);
  position: sticky; bottom: 0; background: #fff;
}

@media (max-width: 560px) {
  .dropdown-panel { min-width: 240px; }
}

/* Barre de scan du suivi. Le champ reste large : une douchette y jette
   quinze caracteres d'un coup, et l'operateur doit voir ce qui est entre. */
.scanbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.scanbar .input { min-width: 220px; max-width: 320px; }
.scanbar .input:focus { border-color: var(--accent); }

/* Le colis qui vient d'etre scanne : un rappel visuel d'une seconde, pour
   confirmer sans interrompre l'enchainement. */
@keyframes scanFlash { from { background: var(--ok-bg, #e6f4ea); } to { background: transparent; } }
.table tbody tr.just-scanned { animation: scanFlash 1.6s ease-out; }

/* ------------------------------------------------------------------ */
/* Barres d'outils : tout a la meme hauteur.
 *
 * Les champs se dessinent en 11px/15px et les petits boutons en 8px/13px :
 * six pixels d'ecart, invisibles a l'oeil nu dans le code, evidents a
 * l'ecran des qu'on les met cote a cote. Chaque element d'une barre partage
 * donc la meme hauteur et le meme axe, quel que soit son type.
 */
.filters .input,
.filters select,
.filters .btn,
.filters .chip,
.scanbar .input,
.scanbar select,
.scanbar .btn {
  height: 38px;
  min-height: 38px;
  padding-block: 0;
  font-size: 14px;
  line-height: 1.2;
  align-self: center;
}

/* Les listes deroulantes portent un chevron : sans reserve a droite, le
   texte long passe dessous. Le sens suit la langue — a droite en francais,
   a gauche en arabe. */
.filters select,
.scanbar select {
  padding-inline-end: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px;
  background-position: right 14px center, right 9px center;
  background-repeat: no-repeat;
}
[dir="rtl"] .filters select,
[dir="rtl"] .scanbar select {
  background-position: left 9px center, left 14px center;
}

/* Un champ ne s'etire plus a toute la largeur dans une barre : « width:100% »
   convient a un formulaire empile, pas a une ligne d'outils. */
.filters .input,
.filters select { width: auto; }

/* Bouton de copie d'un numero de suivi : discret dans la ligne, visible au
   survol, et qui confirme brievement au clic. */
.btn-copy {
  border: 0; background: transparent; cursor: pointer;
  padding: 2px 4px; margin-inline-start: 4px; border-radius: 4px;
  font-size: 13px; line-height: 1; opacity: .35;
  transition: opacity .15s, background .15s;
}
tr:hover .btn-copy { opacity: .75; }
.btn-copy:hover   { opacity: 1; background: var(--surface); }
.btn-copy.is-copied { opacity: 1; background: var(--ok-bg, #e6f4ea); }
.btn-copy.is-copied::after { content: " copie"; font-size: 11px; color: var(--ok, #1a7f37); }