/* ==========================================================================
   TERRAÏNE — back-office
   Blanc dominant, olive de marque. Mode clair et sombre.

   Palette de données validée avec le validateur dataviz (bande de clarté,
   plancher de chroma, séparation CVD, vision normale, contraste) dans les
   DEUX modes, en paires adjacentes. Olive ↔ terracotta échouant en
   « toutes paires » (couple classique de la deutéranopie), aucun graphique
   circulaire n'est utilisé : les répartitions sont en barres.
   ========================================================================== */

/* ------------------------------------------------------------- tokens --- */
:root {
  color-scheme: light;

  /* surfaces — reprises du site : beige de page, cartes crème */
  --plane:        #f0e3d1;   /* fond de page, un ton sous le beige du site */
  --surface:      #fbf6ee;   /* cartes, surface des graphiques */
  --surface-2:    #f4ebdb;   /* lignes alternées, zones creuses */

  /* la barre latérale reste sombre dans les deux modes : c'est la signature
     de la maquette, et elle ancre l'olive de la marque */
  --sidebar:      #2b2d14;
  --sidebar-2:    #363819;
  --sidebar-ink:  #f4f1e4;
  --sidebar-ink2: #a5a68c;
  --sidebar-line: #3d3f1e;

  /* cartes de mise en avant */
  --vedette:      #43461b;   /* tuile olive foncé, l'olive du pied du site */
  --vedette-ink:  #f6f3e6;
  --accent-soft:  #e3e4cf;   /* tuile olive pâle, celle du site */
  --accent-ink:   #33361a;

  /* encres — celles du site */
  --ink:          #3a3226;
  --ink-2:        #6b6153;
  --ink-muted:    #97907f;

  /* traits */
  --line:         #e7d5bc;
  --line-strong:  #d8c3a6;

  /* glissière d'interrupteur au repos : doit rester lisible sous le curseur
     blanc, donc plus claire que la surface en clair, plus claire aussi en
     sombre — sinon seul le curseur se voit et il semble flotter seul. */
  --switch-off:   #cbb99e;

  /* olive de marque — exactement celui du site */
  --olive:        #585b26;
  --olive-deep:   #43461b;
  --olive-soft:   #e3e4cf;
  --olive-ring:   rgba(88, 91, 38, .30);
  --on-olive:     #fbf6ee;

  /* Séries de données — slots validés, l'ordre est le mécanisme CVD.
     Seul le premier a bougé, pour tenir l'olive du site ; les trois autres
     sont inchangés, et la séparation avec eux reste plus large qu'avant
     puisque l'olive s'est assombri. */
  --s1: #585b26;   /* olive, marque */
  --s2: #2563eb;   /* bleu */
  --s3: #d1490b;   /* terracotta */
  --s4: #8b5cf6;   /* violet */

  /* états (jamais réutilisés comme série ; toujours icône + libellé) */
  --good:     #0ca30c;
  --warning:  #b3760a;
  --serious:  #c25a2f;
  --critical: #d03b3b;
  --good-bg:     #e9f6e9;
  --warning-bg:  #fbf1de;
  --serious-bg:  #fbeae2;
  --critical-bg: #fae9e9;

  /* chrome des graphiques */
  --grid:     #ecdfca;
  --axis:     #d8c3a6;

  --shadow-sm: 0 1px 2px rgba(26, 29, 23, .05);
  --shadow:    0 4px 16px rgba(26, 29, 23, .07);
  --shadow-lg: 0 18px 48px rgba(26, 29, 23, .16);

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;

  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* Sombre : on garde la famille olive/sable du site en inversant les rôles.
     Les fonds tirent vers l'olive très foncé plutôt que vers le gris neutre. */
  --plane:        #14150a;
  --surface:      #1e2011;
  --surface-2:    #262818;

  --sidebar:      #14150a;
  --sidebar-2:    #1f2110;
  --sidebar-ink:  #f4f1e4;
  --sidebar-ink2: #9a9b81;
  --sidebar-line: #2a2c16;

  --vedette:      #1a1c0d;
  --vedette-ink:  #f6f3e6;
  --accent-soft:  #2f321a;
  --accent-ink:   #dfe1c4;

  --ink:          #f4f1e4;
  --ink-2:        #c3bfa9;
  --ink-muted:    #8f8b76;

  --line:         #2f311c;
  --line-strong:  #43461b;
  --switch-off:   #5f6234;

  --olive:        #9aa34d;
  --olive-deep:   #8a9040;
  --olive-soft:   #262818;
  --olive-ring:   rgba(154, 163, 77, .32);
  --on-olive:     #14150a;

  --s1: #9aa34d;
  --s2: #4b8cf5;
  --s3: #e2703a;
  --s4: #9575f0;

  --good:     #4ec24e;
  --warning:  #e0a63a;
  --serious:  #ec835a;
  --critical: #e56b6b;
  --good-bg:     #1b2a1b;
  --warning-bg:  #2c2517;
  --serious-bg:  #2e2019;
  --critical-bg: #2e1c1c;

  --grid:     #2a2c19;
  --axis:     #43461b;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow:    0 4px 16px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .6);
}

/* -------------------------------------------------------------- reset --- */
*, *::before, *::after { box-sizing: border-box; }

/* `hidden` n'est qu'un style par défaut du navigateur : toute règle auteur
   déclarant un `display` le neutralise. Sans ce garde, .login et .shell
   restaient tous deux dans le flux et l'on atteignait le tableau de bord
   vide en scrollant sous l'écran de connexion. */
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--plane);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea {
  font: inherit; color: inherit;
  text-transform: inherit; letter-spacing: inherit;
}
button { background: none; border: 0; cursor: pointer; }
h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 600; }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; border-radius: 4px; }

.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;
}
.num { font-variant-numeric: tabular-nums; }

/* ======================================================== CONNEXION ===== */
.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(80% 60% at 50% 0%, var(--olive-soft) 0%, transparent 60%),
    var(--plane);
}
.login__card {
  width: min(400px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 40px 36px 34px;
  box-shadow: var(--shadow);
}
.login__brand {
  font-family: var(--serif);
  font-size: 30px;
  letter-spacing: .18em;
  text-indent: .18em;
  text-align: center;
  color: var(--olive-deep);
  margin-bottom: 4px;
}
.login__sub {
  text-align: center; color: var(--ink-muted);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 30px;
}

/* =========================================================== SHELL ====== */
.shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100dvh; }

.side {
  background: var(--sidebar);
  color: var(--sidebar-ink);
  display: flex; flex-direction: column;
  padding: 20px 12px 14px;
  position: sticky; top: 0; height: 100dvh;
}
.side__brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px 18px;
}
.side__mark {
  width: 22px; height: 22px; border-radius: 6px; flex: none;
  background: var(--olive);
  display: grid; place-items: center;
}
.side__mark svg { width: 13px; height: 13px; color: #0f120d; }
.side__wordmark {
  font-family: var(--serif);
  font-size: 21px; font-weight: 600;
  letter-spacing: .15em; text-indent: .15em;
  color: var(--sidebar-ink);
}

/* carte « boutique » — reprend le sélecteur d'espace de travail du modèle */
.side__shop {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; margin: 0 2px 10px;
  background: var(--sidebar-2); border: 1px solid var(--sidebar-line);
  border-radius: 10px;
}
.side__shop-icon {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: var(--olive); display: grid; place-items: center;
}
.side__shop-icon svg { width: 14px; height: 14px; color: #0f120d; }
.side__shop-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--sidebar-ink2); }
.side__shop-name { font-size: 13px; font-weight: 600; }

.side__search {
  display: flex; align-items: center; gap: 8px;
  margin: 0 2px 20px; padding: 8px 11px;
  background: var(--sidebar-2); border: 1px solid var(--sidebar-line);
  border-radius: 10px; color: var(--sidebar-ink2);
}
.side__search svg { width: 15px; height: 15px; flex: none; }
.side__search input {
  flex: 1; min-width: 0; border: 0; background: none;
  color: var(--sidebar-ink); font-size: 13px;
}
.side__search input::placeholder { color: var(--sidebar-ink2); }
.side__search input:focus { outline: none; }
.side__kbd {
  font-size: 10.5px; padding: 2px 6px; border-radius: 5px;
  background: rgba(255, 255, 255, .07); color: var(--sidebar-ink2);
}

.side__label {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sidebar-ink2); padding: 0 12px 8px;
}
.side__nav { display: flex; flex-direction: column; gap: 2px; }
.side__link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--sidebar-ink2); font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.side__link svg { width: 18px; height: 18px; flex: none; }
.side__link:hover { background: var(--sidebar-2); color: var(--sidebar-ink); }
.side__link.is-active { background: var(--sidebar-2); color: var(--sidebar-ink); }
.side__link.is-active::before {
  content: ''; position: absolute; left: 12px;
  width: 3px; height: 17px; border-radius: 2px; background: var(--olive);
}
.side__link { position: relative; }
.side__link.is-active { padding-left: 22px; }

.side__badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  display: grid; place-items: center; border-radius: 99px;
  background: var(--olive); color: #0f120d; font-size: 11px; font-weight: 700;
}
.side__foot { margin-top: auto; padding-top: 12px; }
.side__user {
  display: flex; align-items: center; gap: 10px; padding: 10px;
  background: var(--sidebar-2); border: 1px solid var(--sidebar-line);
  border-radius: 12px;
}
.side__avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--olive); color: #0f120d;
  display: grid; place-items: center; font-weight: 700; font-size: 12px;
}
.side__email {
  font-size: 12px; color: var(--sidebar-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side__logout { font-size: 11.5px; color: var(--sidebar-ink2); padding: 0; }
.side__logout:hover { color: var(--olive); }

.main { min-width: 0; display: flex; flex-direction: column; background: var(--plane); }
.topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 26px 14px;
  background: var(--plane);
  position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 26px; font-weight: 600; letter-spacing: -.015em; }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.content { padding: 6px 26px 56px; }

/* ======================================================== COMPOSANTS ==== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink);
  font-weight: 500; font-size: 13.5px;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-muted); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn--primary { background: var(--olive); border-color: var(--olive); color: var(--on-olive); }
.btn--primary:hover { background: var(--olive-deep); border-color: var(--olive-deep); }
.btn--danger { color: var(--critical); border-color: var(--line-strong); }
.btn--danger:hover { background: var(--critical-bg); border-color: var(--critical); }
.btn--ghost { border-color: transparent; background: none; }
.btn--ghost:hover { background: var(--surface-2); }
.btn--block { width: 100%; }
.btn--icon { padding: 8px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.card__head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px 12px;
}
.card__head h2 { font-size: 15.5px; font-weight: 600; }
.card__head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.card__body { padding: 0 20px 20px; }

/* bouton d'action principal de la barre de titre — pilule sombre */
.btn--pill {
  border-radius: 99px; padding: 10px 18px;
  background: var(--vedette); border-color: var(--vedette); color: var(--vedette-ink);
}
.btn--pill:hover { background: #000; border-color: #000; }
.btn--round { border-radius: 99px; }

/* ----- tuiles de statistiques : chiffre en héros + micro-barres ----- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tile {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 17px 19px 16px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.tile__label {
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 10px;
}
.tile__value { font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.05; }
.tile__value small { font-size: .5em; font-weight: 500; color: var(--ink-muted); margin-left: 4px; }
.tile__delta { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; font-size: 12.5px; }
.tile__delta svg { width: 13px; height: 13px; }
.tile__delta--up   { color: var(--good); }
.tile__delta--down { color: var(--critical); }
.tile__delta--flat { color: var(--ink-muted); }

/* tuile vedette, sombre — la première de la rangée */
.tile--dark {
  background: var(--vedette); border-color: var(--vedette); color: var(--vedette-ink);
}
.tile--dark .tile__label { color: #97a189; }
.tile--dark .tile__delta--flat { color: #97a189; }

/* tuile d'accent, vert pâle — le grand total */
.tile--accent {
  background: var(--accent-soft); border-color: transparent; color: var(--accent-ink);
}
.tile--accent .tile__label { color: color-mix(in oklab, var(--accent-ink) 62%, transparent); }
.tile--accent .tile__delta--flat { color: color-mix(in oklab, var(--accent-ink) 62%, transparent); }

/* micro-barres : la tendance en un coup d'œil, sans axes ni étiquettes.
   Décoratives, donc masquées aux lecteurs d'écran — le chiffre et le delta
   portent déjà l'information. */
.spark { display: flex; align-items: flex-end; gap: 2px; height: 30px; margin-top: 12px; }
.spark i {
  flex: 1; min-width: 2px; border-radius: 2px 2px 0 0;
  background: var(--olive); opacity: .32;
}
.spark i.is-peak { opacity: 1; }
/* sur la tuile olive foncé, l'olive de marque se noierait : on éclaircit */
.tile--dark .spark i { background: #b3bb6a; opacity: .45; }
.tile--dark .spark i.is-peak { opacity: 1; }

/* ----------------------------------------------------------- badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 99px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--nouvelle  { background: var(--warning-bg);  color: var(--warning); }
.badge--confirmee { background: var(--olive-soft);  color: var(--olive-deep); }
.badge--expediee  { background: var(--serious-bg);  color: var(--serious); }
.badge--livree    { background: var(--good-bg);     color: var(--good); }
.badge--annulee   { background: var(--critical-bg); color: var(--critical); }
/* badge nu, sans statut : sert à typer les messages */
.badge:not([class*="badge--"]) { background: var(--surface-2); color: var(--ink-2); }

/* pastille « non lu » devant le nom de l'expéditeur */
.point {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--olive); margin-right: 9px; vertical-align: 1px;
}
/* aperçu du message : une seule ligne, quelle que soit sa longueur */
.tronque {
  max-width: 34ch; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--ink-2);
}

/* ---------------------------------------------------------- tableaux --- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th {
  text-align: left; font-weight: 500; font-size: 11.5px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-muted);
  padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.data td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tbody tr { transition: background .12s ease; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tbody tr.is-clickable { cursor: pointer; }
table.data td.right, table.data th.right { text-align: right; }

/* ----------------------------------------------------------- champs ---- */
.field { margin-bottom: 16px; }
.field > label {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 500; color: var(--ink-2);
}
.field .hint { font-size: 12px; color: var(--ink-muted); margin-top: 5px; }
.input, .select, .textarea {
  width: 100%; padding: 10px 12px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--olive); box-shadow: 0 0 0 3px var(--olive-ring);
}
.textarea { min-height: 96px; resize: vertical; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
/* `.field > label { display: block }` l'emportait en spécificité : la glissière
   redevenait un span en ligne, sans dimensions ni fond, et il ne restait que le
   curseur blanc, qui semblait flotter seul par-dessus le texte. */
.field > label.switch { display: inline-flex; margin-bottom: 0; font-size: inherit; color: inherit; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch__track {
  flex: none; width: 40px; height: 23px; border-radius: 99px;
  background: var(--switch-off); position: relative;
  transition: background .18s ease;
}
.switch__track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 17px; height: 17px; border-radius: 50%; background: #fff;
  transition: transform .18s ease; box-shadow: var(--shadow-sm);
}
.switch input:checked + .switch__track { background: var(--olive); }
.switch input:checked + .switch__track::after { transform: translateX(17px); }
.switch input:focus-visible + .switch__track { box-shadow: 0 0 0 3px var(--olive-ring); }

/* ------------------------------------------------------ segmentation --- */
.segmented {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 99px;
}
.segmented button {
  padding: 6px 14px; border-radius: 99px;
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  transition: background .15s ease, color .15s ease;
}
.segmented button:hover { color: var(--ink); }
.segmented button.is-active { background: var(--olive); color: var(--on-olive); }
/* choix d'état dans le tiroir produit : c'est une décision, pas un filtre */
.segmented--large { display: flex; width: 100%; }
.segmented--large button { flex: 1; padding: 9px 12px; font-size: 13.5px; }

/* -------------------------------------------------------- graphiques --- */
.chart { width: 100%; display: block; overflow: visible; }
.chart .grid-line { stroke: var(--grid); stroke-width: 1; }
.chart .axis-line  { stroke: var(--axis); stroke-width: 1; }
.chart .tick {
  fill: var(--ink-muted); font-size: 11px;
  font-variant-numeric: tabular-nums; font-family: var(--sans);
}
.chart .series-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart .series-area { opacity: .12; }
.chart .dot { r: 4; stroke: var(--surface); stroke-width: 2; }
.chart .crosshair { stroke: var(--axis); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .bar { rx: 4; }
.chart .bar-track { fill: var(--surface-2); rx: 4; }

/* infobulle sombre, comme dans la maquette : elle tranche sur la carte
   blanche et ne se confond jamais avec le graphique */
.chart-tip {
  position: absolute; z-index: 40; pointer-events: none;
  background: var(--vedette); border: 1px solid var(--vedette);
  color: var(--vedette-ink);
  border-radius: 10px; box-shadow: var(--shadow);
  padding: 9px 12px; font-size: 12.5px; min-width: 132px;
  opacity: 0; transform: translateY(3px); transition: opacity .12s ease, transform .12s ease;
}
.chart-tip.is-on { opacity: 1; transform: none; }
.chart-tip__date { color: #97a189; font-size: 11.5px; margin-bottom: 4px; }
.chart-tip__row { display: flex; align-items: center; gap: 8px; }
.chart-tip__swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.chart-tip__val { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: block; }

.chart-holder { position: relative; }

/* ------------------------------------------------------------ listes --- */
.rank { display: flex; flex-direction: column; gap: 11px; }
.rank__row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; }
.rank__name { font-size: 13.5px; }
.rank__val { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rank__bar { grid-column: 1 / -1; height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.rank__fill { height: 100%; border-radius: 4px; }

/* ----------------------------------------------------------- produits -- */
/* barre de catégories + tri : le catalogue reste lisible passé la centaine */
.catbar {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; margin-bottom: 16px;
}
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid transparent;
  color: var(--ink-2); font-size: 13px; line-height: 1.2;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { border-color: var(--line-strong); color: var(--ink); }
.chip span { font-size: 11.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.chip.is-active { background: var(--olive); border-color: var(--olive); color: var(--on-olive); }
.chip.is-active span { color: inherit; opacity: .72; }

.catbar__tri { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.catbar__tri > span { font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.catbar__tri .select { width: auto; padding: 7px 10px; font-size: 13px; }

/* ------------------------------------------------------------ pager ---- */
.pager {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 20px; border-top: 1px solid var(--line);
}
.pager__compte { font-size: 12.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.pager__nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.pager__btn {
  min-width: 32px; height: 32px; padding: 0 9px;
  border-radius: var(--r-sm); border: 1px solid transparent;
  background: none; color: var(--ink-2);
  font-size: 13px; font-variant-numeric: tabular-nums;
  display: inline-grid; place-items: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pager__btn:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.pager__btn:disabled { opacity: .35; cursor: default; }
.pager__btn.is-active {
  background: var(--olive); border-color: var(--olive); color: var(--on-olive); font-weight: 500;
}
.pager__gap { color: var(--ink-muted); padding: 0 2px; }
.pager__btn svg { width: 15px; height: 15px; }

.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.prod-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; text-align: left;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.prod-card:hover { border-color: var(--olive); transform: translateY(-2px); box-shadow: var(--shadow); }
.prod-card__media {
  aspect-ratio: 4 / 3; background: var(--surface-2);
  display: grid; place-items: center; overflow: hidden;
  position: relative;
}
/* état posé sur le visuel : on voit d'un coup d'œil ce qui n'est pas en ligne */
.prod-card__statut { position: absolute; top: 9px; left: 9px; }
.prod-card--retire .prod-card__media img { opacity: .55; filter: saturate(.5); }
.prod-card__media img { width: 100%; height: 100%; object-fit: cover; }
.prod-card__media .ph { color: var(--ink-muted); }
.prod-card__body { padding: 13px 15px 15px; }
.prod-card__name { font-weight: 600; font-size: 14px; }
.prod-card__meta { color: var(--ink-muted); font-size: 12.5px; margin-top: 2px; }
.prod-card__foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.prod-card__price { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------- dépôt d'images --- */
.drop {
  border: 2px dashed var(--line-strong); border-radius: var(--r);
  background: var(--surface-2);
  padding: 26px 20px; text-align: center;
  transition: border-color .15s ease, background .15s ease;
  cursor: pointer;
}
.drop:hover { border-color: var(--olive); }
.drop.is-over { border-color: var(--olive); background: var(--olive-soft); }
.drop svg { width: 28px; height: 28px; color: var(--ink-muted); margin: 0 auto 8px; }
.drop__title { font-weight: 500; }
.drop__hint { color: var(--ink-muted); font-size: 12.5px; margin-top: 3px; }

.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-top: 12px; }
.thumb {
  position: relative; aspect-ratio: 1; border-radius: var(--r-sm);
  overflow: hidden; border: 1px solid var(--line); background: var(--surface-2);
  cursor: grab;
}
.thumb.is-dragging { opacity: .4; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb__del {
  position: absolute; top: 5px; right: 5px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0, 0, 0, .62); color: #fff;
  display: grid; place-items: center;
  opacity: 0; transition: opacity .15s ease;
}
.thumb:hover .thumb__del, .thumb:focus-within .thumb__del { opacity: 1; }
.thumb__del svg { width: 13px; height: 13px; }
.thumb__main {
  position: absolute; left: 5px; bottom: 5px;
  background: var(--olive); color: var(--on-olive);
  font-size: 10px; font-weight: 600; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 99px; text-transform: uppercase;
}
.thumb__bar {
  position: absolute; inset: auto 0 0 0; height: 3px;
  background: var(--olive); transform-origin: left; transition: transform .2s ease;
}

/* --------------------------------------------------------- variantes --- */
.variants { display: flex; flex-direction: column; gap: 10px; }
.variant {
  display: grid; grid-template-columns: 1.4fr .9fr .9fr .8fr auto;
  gap: 8px; align-items: center;
  padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2);
}
.variant .input { padding: 7px 10px; font-size: 13px; background: var(--surface); }
.variant__head {
  display: grid; grid-template-columns: 1.4fr .9fr .9fr .8fr auto;
  gap: 8px; padding: 0 10px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted);
}

/* ---------------------------------------------------------- panneaux --- */
.overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(16, 18, 8, .45); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.overlay.is-on { opacity: 1; pointer-events: auto; }
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(680px, 100%); background: var(--surface);
  border-left: 1px solid var(--line); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .26s cubic-bezier(.22,.61,.36,1);
}
.panel.is-on { transform: none; }
.panel__head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--line);
}
.panel__head h2 { font-size: 16px; }
.panel__body { padding: 20px 22px; overflow-y: auto; flex: 1; }
.panel__foot {
  padding: 14px 22px; border-top: 1px solid var(--line);
  display: flex; gap: 10px; justify-content: flex-end;
  background: var(--surface);
}

/* ------------------------------------------------------------- divers -- */
.empty { text-align: center; padding: 46px 20px; color: var(--ink-muted); }
.empty svg { width: 34px; height: 34px; margin: 0 auto 12px; opacity: .55; }
.empty h3 { font-size: 15px; color: var(--ink); margin-bottom: 5px; }

.toast {
  position: fixed; left: 50%; bottom: 26px; translate: -50% 0; z-index: 80;
  background: var(--ink); color: var(--plane);
  padding: 11px 18px; border-radius: 99px; font-size: 13.5px;
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.is-on { opacity: 1; transform: none; }
.toast--error { background: var(--critical); color: #fff; }

.grid-2 { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; }
.grid-2--even { grid-template-columns: 1fr 1fr; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.mt { margin-top: 14px; }
.muted { color: var(--ink-muted); }

.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: sweep 1.3s ease infinite;
  border-radius: var(--r-sm);
}
@keyframes sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ------------------------------------------------------- responsive ---- */
@media (max-width: 1120px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-2--even { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side {
    position: fixed; inset: 0 auto 0 0; z-index: 70; width: 248px;
    transform: translateX(-100%); transition: transform .24s ease;
  }
  .side.is-on { transform: none; }
  .content { padding: 18px 16px 48px; }
  .topbar { padding: 14px 16px; }
  .variant, .variant__head { grid-template-columns: 1fr 1fr; }
  .variant__head { display: none; }
}
@media (max-width: 560px) {
  .tiles { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}


/* ==================================================== MODALE CRITIQUE ==== */
/* Réservée aux actions sans retour. Le bouton de validation naît inerte et
   gris : il ne prend le rouge qu'une fois la case cochée, pour qu'un clic
   réflexe sur un bouton déjà rouge ne puisse pas effacer une commande. */
.modale {
  width: min(480px, calc(100vw - 32px));
  padding: 0; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 24px 60px rgba(16, 18, 8, .28);
}
.modale::backdrop { background: rgba(16, 18, 8, .5); backdrop-filter: blur(2px); }
.modale__corps { padding: 24px 24px 20px; }
.modale__pictogramme {
  width: 40px; height: 40px; margin-bottom: 14px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--critical-bg); color: var(--critical);
}
.modale__pictogramme svg { width: 22px; height: 22px; }
.modale h2 { font-size: 17px; margin: 0 0 10px; }
.modale p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.modale__cible {
  font-weight: 600; color: var(--ink) !important; font-size: 15px !important;
}
.modale__liste {
  margin: 0 0 12px; padding-left: 18px;
  font-size: 14px; line-height: 1.6; color: var(--muted);
}
.modale__liste li { margin-bottom: 4px; }
.modale__conseil {
  padding: 11px 13px; border-radius: 9px;
  background: var(--surface-2); font-size: 13.5px !important;
}
.modale__coche {
  display: flex; gap: 11px; align-items: flex-start; margin-top: 18px;
  padding: 13px; border: 1px solid var(--line); border-radius: 9px;
  font-size: 14px; line-height: 1.5; cursor: pointer;
}
.modale__coche:hover { border-color: var(--line-strong); }
.modale__coche input { margin-top: 2px; width: 17px; height: 17px; flex: 0 0 17px; }
.modale__pied {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 24px; border-top: 1px solid var(--line);
  background: var(--surface-2); border-radius: 0 0 13px 13px;
}
.btn--suppr[disabled] {
  background: var(--surface); color: var(--muted);
  border-color: var(--line); cursor: not-allowed; opacity: .75;
}
.btn--suppr:not([disabled]) {
  background: var(--critical); color: #fff; border-color: var(--critical);
}
.btn--suppr:not([disabled]):hover { filter: brightness(1.08); }

/* Zone sensible du panneau de commande : détachée du reste par un filet et
   posée en bas, pour qu'on n'y arrive jamais par accident. */
.cmd__zone-critique {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line);
}
.cmd__zone-critique p { margin: 6px 0 12px; font-size: 13.5px; line-height: 1.55; }

/* Lien discret sous un bouton de formulaire : c'est un bouton pour rester
   atteignable au clavier, mais il ne doit pas concurrencer l'action
   principale juste au-dessus. */
.lien-discret {
  display: block; width: 100%; margin-top: 14px; padding: 6px;
  background: none; border: 0; color: var(--ink-muted);
  font-size: 13px; text-align: center; cursor: pointer;
}
.lien-discret:hover { color: var(--olive-deep); text-decoration: underline; }
.hint--ok { color: var(--olive-deep); }
.hint--ko { color: var(--critical); }