/* =========================================================================
   Contrôle Livraisons — feuille de style de l'application
   Organisation : tokens > base > coquille (sidebar/topbar) > composants
   ========================================================================= */

:root {
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #fafbff;
  --border: #e6e8f0;
  --border-fort: #d4d7e3;
  --text: #171a23;
  --text-2: #5b6270;
  --text-3: #8b909e;

  --accent: #4f46e5;
  --accent-fort: #4338ca;
  --accent-doux: #eef0fe;

  --ok: #15803d;
  --ok-doux: #edfcf2;
  --warn: #b45309;
  --warn-doux: #fffbeb;
  --err: #b91c1c;
  --err-doux: #fef2f2;

  /* Palette des graphiques. Trois états exclusifs de l'argent réclamé, plus
     une teinte de série unique pour les classements à une seule mesure.
     Validée (bande de clarté, plancher de chroma, séparation deutan/protan,
     vision normale, contraste sur fond blanc) : pire paire ΔE 27,9 en CVD et
     33,1 en vision normale, pour des seuils de 8 et 15. Ne pas y toucher sans
     revalider — deux états voisins doivent rester distincts pour un daltonien. */
  --viz-recu: #15803d;
  --viz-attente: #4f46e5;
  --viz-refuse: #b91c1c;
  --viz-serie: #4f46e5;

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

  --ombre-sm: 0 1px 2px rgba(23, 26, 35, .05);
  --ombre: 0 1px 3px rgba(23, 26, 35, .06), 0 8px 24px rgba(23, 26, 35, .06);
  --ombre-lg: 0 4px 12px rgba(23, 26, 35, .08), 0 24px 48px rgba(23, 26, 35, .10);

  --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", sans-serif;
  --sidebar-l: 244px;
  --topbar-h: 60px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); }
.ic { flex: none; vertical-align: middle; }

h1 { font-size: 1.4rem; font-weight: 650; letter-spacing: -.015em; margin: 0; }
h2 { font-size: 1.02rem; font-weight: 650; letter-spacing: -.01em; margin: 0; }
h3 { font-size: .92rem; font-weight: 650; margin: 0; }

/* ---------------------------------------------------------------- coquille */

.app { display: flex; min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-l);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 40;
}

.sidebar__marque {
  display: flex;
  align-items: center;
  gap: .6rem;
  height: var(--topbar-h);
  padding: 0 1.1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  font-weight: 680;
  letter-spacing: -.01em;
  flex: none;
}
.sidebar__marque .ic { color: var(--accent); }

.sidebar__nav { flex: 1; overflow-y: auto; padding: .9rem .7rem; }
.sidebar__groupe + .sidebar__groupe { margin-top: 1.3rem; }
.sidebar__titre {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0 .55rem;
  margin-bottom: .4rem;
}

.nav-lien {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .55rem;
  border-radius: var(--r-sm);
  color: var(--text-2);
  text-decoration: none;
  font-size: .89rem;
  font-weight: 550;
  transition: background-color .12s, color .12s;
}
.nav-lien:hover { background: var(--surface-2); color: var(--text); }
.nav-lien .ic { color: var(--text-3); transition: color .12s; }
.nav-lien:hover .ic { color: var(--text-2); }
.nav-lien.actif { background: var(--accent-doux); color: var(--accent-fort); font-weight: 620; }
.nav-lien.actif .ic { color: var(--accent); }

.sidebar__pied { flex: none; border-top: 1px solid var(--border); padding: .7rem; }
.compte { display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem .6rem; }
.compte__pastille {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-doux); color: var(--accent-fort);
  display: grid; place-items: center; font-weight: 700; font-size: .78rem;
}
.compte__nom { font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compte__role { font-size: .74rem; color: var(--text-3); }

/* zone principale */
.principal { flex: 1; min-width: 0; margin-left: var(--sidebar-l); display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: .8rem;
  padding: 0 1.4rem;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar__titre { font-size: .95rem; font-weight: 620; }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.burger {
  display: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); cursor: pointer;
}

.btn-retour {
  display: inline-flex; align-items: center; gap: .35rem;
  height: 34px; padding: 0 .7rem 0 .55rem;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-2);
  font-size: .84rem; font-weight: 550; text-decoration: none;
  transition: background-color .12s, color .12s, border-color .12s;
}
.btn-retour:hover { background: var(--accent-doux); color: var(--accent-fort); border-color: var(--accent); }
@media (max-width: 720px) { .btn-retour span { display: none; } .btn-retour { padding: 0 .5rem; } }

.contenu { padding: 1.6rem 1.4rem 4rem; }
.contenu > .conteneur { max-width: 940px; margin: 0 auto; }
.contenu > .conteneur.etroit { max-width: 620px; }

.entete-page { margin-bottom: 1.4rem; }
.entete-page p { color: var(--text-2); font-size: .9rem; margin: .3rem 0 0; }

.voile {
  display: none; position: fixed; inset: 0; z-index: 35;
  background: rgba(23,26,35,.4);
}

@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--ombre-lg); }
  body.menu-ouvert .sidebar { transform: none; }
  body.menu-ouvert .voile { display: block; }
  .principal { margin-left: 0; }
  .burger { display: inline-flex; }
  .contenu { padding: 1.2rem 1rem 4rem; }
}

/* -------------------------------------------------------------- composants */

.carte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-sm);
}
.carte__entete {
  padding: .95rem 1.1rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .6rem;
}
.carte__entete .ic { color: var(--text-3); }
.carte__corps { padding: 1.1rem; }
.carte + .carte { margin-top: 1rem; }

/* boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .62rem 1rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  font-family: inherit; font-size: .9rem; font-weight: 600;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .13s, border-color .13s, color .13s, box-shadow .13s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn--bloc { width: 100%; }
.btn--lg { padding: .8rem 1.2rem; font-size: .96rem; }

.btn--primaire { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(79,70,229,.3); }
.btn--primaire:hover { background: var(--accent-fort); }
.btn--succes { background: var(--ok); color: #fff; }
.btn--succes:hover { background: #126c34; }
.btn--neutre { background: var(--surface); color: var(--text); border-color: var(--border-fort); }
.btn--neutre:hover { background: var(--surface-2); }
.btn--danger-doux { background: var(--surface); color: var(--err); border-color: var(--border-fort); }
.btn--danger-doux:hover { background: var(--err-doux); border-color: #f3c9c9; }
.btn--icone { padding: .45rem; border-radius: var(--r-sm); }

/* formulaires */
.champ { margin-bottom: 1rem; }
.champ:last-child { margin-bottom: 0; }
.champ > label {
  display: block; font-size: .82rem; font-weight: 600;
  color: var(--text-2); margin-bottom: .35rem;
}
.champ__aide { font-size: .78rem; color: var(--text-3); margin-top: .3rem; }

.saisie {
  width: 100%;
  padding: .62rem .75rem;
  font-family: inherit; font-size: .92rem; color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-fort);
  border-radius: var(--r);
  transition: border-color .13s, box-shadow .13s;
}
.saisie:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-doux);
}
.saisie:disabled { background: var(--bg); color: var(--text-3); }
textarea.saisie { resize: vertical; line-height: 1.55; min-height: 120px; }
input[type="number"].saisie { width: 5rem; }

/* champ éditable directement dans une ligne de tableau : discret au repos,
   visible dès le survol ou la saisie */
.saisie--ligne {
  padding: .34rem .45rem;
  font-size: .87rem;
  border-color: transparent;
  background: transparent;
  border-radius: var(--r-sm);
  min-width: 8rem;
}
tr:hover .saisie--ligne { border-color: var(--border); background: var(--surface); }
.saisie--ligne:focus { border-color: var(--accent); background: var(--surface); }
.saisie--ligne.modifie { border-color: var(--warn); background: var(--warn-doux); }
td .saisie--ligne { width: 100%; }
td.col-prix .saisie--ligne { width: 6.2rem; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; }
.actions-ligne { display: flex; gap: .3rem; justify-content: flex-end; }
.btn--icone:disabled { opacity: .3; }

.coche { display: flex; align-items: flex-start; gap: .55rem; font-size: .87rem; }
.coche input[type="checkbox"] {
  flex: none; width: 1.05rem; height: 1.05rem; margin-top: .12rem;
  accent-color: var(--accent); cursor: pointer;
}
.coche label { cursor: pointer; color: var(--text-2); }

.ligne-champs { display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end; }
.ligne-champs > .champ { flex: 1 1 190px; margin-bottom: 0; }

/* messages */
.message {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .8rem .95rem;
  border-radius: var(--r);
  font-size: .87rem; line-height: 1.5;
  margin-bottom: 1rem;
}
.message .ic { margin-top: .1rem; }
.message--info { background: var(--accent-doux); color: #3730a3; }
.message--ok { background: var(--ok-doux); color: var(--ok); }
.message--attention { background: var(--warn-doux); color: var(--warn); }
.message--erreur { background: var(--err-doux); color: var(--err); }

/* étiquettes */
.etiquette {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .16rem .55rem;
  border-radius: 999px;
  font-size: .74rem; font-weight: 620;
  border: 1px solid transparent;
}
.etiquette--accent { background: var(--accent-doux); color: var(--accent-fort); }
.etiquette--ok { background: var(--ok-doux); color: var(--ok); }
.etiquette--attention { background: var(--warn-doux); color: var(--warn); }
.etiquette--neutre { background: var(--bg); color: var(--text-2); border-color: var(--border); }

/* statistiques */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: .95rem 1.05rem; box-shadow: var(--ombre-sm); }
.stat__libelle { font-size: .78rem; color: var(--text-3); font-weight: 600; display: flex; align-items: center; gap: .4rem; }
.stat__valeur { font-size: 1.55rem; font-weight: 680; letter-spacing: -.02em; margin-top: .25rem; }
.stat__valeur--ok { color: var(--ok); }
.stat__valeur--alerte { color: var(--err); }
.stat__note { font-size: .74rem; color: var(--text-3); margin-top: .25rem; }
.stat--alerte { border-color: #f3c9c9; background: var(--err-doux); }

/* suivi de la suite donnée par le fournisseur, dans le tableau de bord */
.etiquette--alerte { background: var(--err-doux); color: var(--err); border-color: #f3c9c9; }
.suite { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.suite__action { display: inline-flex; }
.btn--mini {
  padding: .18rem .45rem; font-size: .74rem; gap: .2rem;
  border-radius: var(--r-sm); font-weight: 600;
}
tr.a-relancer > td { background: var(--err-doux); }

/* filtres en pastilles */
.filtres { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .9rem; }
.filtre {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--border-fort);
  background: var(--surface);
  color: var(--text-2);
  font-size: .85rem; font-weight: 600;
  text-decoration: none;
  transition: background-color .13s, color .13s, border-color .13s;
}
.filtre:hover { background: var(--surface-2); color: var(--text); }
.filtre.actif { background: var(--accent); border-color: var(--accent); color: #fff; }
.filtre__compte {
  padding: 0 .38rem; border-radius: 999px;
  background: var(--bg); color: var(--text-2);
  font-size: .74rem; font-variant-numeric: tabular-nums;
}
.filtre.actif .filtre__compte { background: rgba(255,255,255,.22); color: #fff; }
.filtre--alerte:not(.actif) { border-color: #f3c9c9; color: var(--err); background: var(--err-doux); }
.filtre--alerte.actif { background: var(--err); border-color: var(--err); }
/* La pastille répond sous le doigt, avant même que les résultats reviennent. */
.filtre:active { transform: scale(.97); }
.filtre:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------- filtrage sans rechargement */
/* Les filtres s'appliquent d'eux-mêmes : le bouton ne ferait que répéter le
   geste. Il reste rendu, et n'est retiré que si le script a pu s'installer. */
.js-filtres #btn-filtrer { display: none; }
.js-filtres .barre-filtres .filtre-champ--large { margin-right: auto; }

/* Pendant l'aller-retour : les résultats s'estompent sans disparaître — la
   page ne doit pas sauter — et un fil progresse sous la barre de filtres. */
#zone-resultats { transition: opacity .16s ease; }
#zone-resultats.est-occupe { opacity: .5; }
.barre-filtres { position: relative; }
.barre-filtres::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  border-radius: 2px; background: var(--accent); transform-origin: left;
  transform: scaleX(0); opacity: 0;
}
.barre-filtres.est-occupe::after { opacity: 1; animation: fil-filtre 1.1s ease-in-out infinite; }
@keyframes fil-filtre {
  0%   { transform: scaleX(0);   transform-origin: left; }
  50%  { transform: scaleX(1);   transform-origin: left; }
  51%  { transform: scaleX(1);   transform-origin: right; }
  100% { transform: scaleX(0);   transform-origin: right; }
}
@media (prefers-reduced-motion: reduce) {
  .barre-filtres.est-occupe::after { animation: none; transform: scaleX(1); opacity: .5; }
  #zone-resultats { transition: none; }
  .filtre:active { transform: none; }
}

/* ---------------------------------------------- filtres de périmètre (barre) */
/* Une seule rangée au-dessus des graphiques : les filtres se combinent, ils ne
   se remplacent pas, et l'état complet tient dans l'URL. */
.barre-filtres {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: .7rem .8rem;
  box-shadow: var(--ombre-sm);
  margin-bottom: .7rem;
}
/* `.saisie` est en width:100% par défaut, ce qui mettrait chaque contrôle sur
   sa propre ligne : ici ils doivent tenir côte à côte. */
.barre-filtres .saisie { width: auto; height: 38px; padding: 0 .7rem; font-size: .86rem; }
.barre-filtres select.saisie { flex: 0 1 11rem; min-width: 8.5rem; cursor: pointer; }
.filtre-champ { position: relative; display: flex; align-items: center; }
.filtre-champ--large { flex: 1 1 15rem; min-width: 12rem; }
.filtre-champ__ic {
  position: absolute; left: .6rem; display: inline-flex;
  color: var(--text-3); pointer-events: none;
}
.barre-filtres .filtre-champ .saisie { width: 100%; padding-left: 2rem; }
.barre-filtres .btn { margin-left: auto; }

.filtres-actifs { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.jeton {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .5rem .22rem .6rem;
  border-radius: 999px;
  background: var(--accent-doux); color: var(--accent-fort);
  border: 1px solid transparent;
  font-size: .78rem; font-weight: 600; text-decoration: none;
}
.jeton:hover { border-color: var(--accent); }

/* ------------------------------------------------------------- graphiques */
/* `align-items: start` : chaque carte prend sa hauteur propre, sinon la jauge
   — bien plus courte que le classement — traîne un grand vide sous sa légende. */
.grille-viz { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; margin-bottom: 1.2rem; }
@media (min-width: 900px) { .grille-viz { grid-template-columns: 1fr 1fr; } }
.grille-viz--une { grid-template-columns: 1fr !important; }

/* état d'un bon : une pastille par ligne, toujours à la même place, et une
   couleur par état. Les actions, elles, restent neutres — un bouton coloré
   qui porte le nom d'un état se lit comme cet état, ce qui faisait passer un
   bon en attente pour un bon soldé. */
.cell-etat { white-space: nowrap; }
.etat {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .5rem; border-radius: 999px;
  font-size: .78rem; font-weight: 620; border: 1px solid transparent;
}
.etat--recu     { background: var(--ok-doux);     color: var(--ok); }
.etat--attente  { background: var(--accent-doux); color: var(--accent-fort); }
.etat--depose   { background: var(--accent-doux); color: var(--accent-fort); }
.etat--refuse   { background: var(--warn-doux);   color: var(--warn); }
.etat--relance  { background: var(--err-doux);    color: var(--err); border-color: #f3c9c9; }
.etat--conforme { background: var(--bg);          color: var(--text-2); border-color: var(--border); }
/* Le détail qui qualifie l'état — ancienneté, montants manquants — sans lui
   disputer la place. */
.etat__note { display: block; margin-top: .18rem; font-size: .72rem; color: var(--text-3); }

/* bilan : le chiffre que l'on vient chercher, et rien d'autre à sa hauteur.
   Quatre cartes de poids égal ne hiérarchisent rien — tout criait pareil,
   donc rien ne ressortait. */
.bilan {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1.3rem 1.4rem; box-shadow: var(--ombre-sm);
  margin-bottom: 1.2rem;
}
.bilan__tete { display: flex; align-items: flex-start; gap: 1rem; justify-content: space-between; margin-bottom: 1rem; }
.bilan__libelle { font-size: .8rem; color: var(--text-3); font-weight: 600; }
.bilan__chiffre {
  font-size: 2.6rem; font-weight: 700; letter-spacing: -.03em;
  color: var(--ok); line-height: 1.05; margin: .15rem 0 .2rem;
}
.bilan__sous { font-size: .86rem; color: var(--text-2); }
.bilan__part { text-align: right; flex: none; }
.bilan__part-valeur { font-size: 1.5rem; font-weight: 680; letter-spacing: -.02em; }
.bilan__part-note { font-size: .74rem; color: var(--text-3); }
/* La légende passe en ligne : sous la jauge, trois valeurs empilées
   rallongeaient le bandeau sans rien clarifier. */
.legende--ligne { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; margin-top: .7rem; }
.legende--ligne li { gap: .4rem; }
.bilan__pied {
  display: flex; flex-wrap: wrap; gap: .3rem 1.1rem;
  margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--border);
  font-size: .78rem; color: var(--text-3);
}
@media (max-width: 560px) {
  .bilan__chiffre { font-size: 2.1rem; }
  .bilan__tete { flex-direction: column; }
  .bilan__part { text-align: left; }
}

/* jauge part-à-tout : segments exclusifs, séparés d'un filet de surface pour
   que deux parts voisines ne se confondent jamais */
.jauge { display: flex; height: 30px; gap: 2px; border-radius: var(--r-sm); overflow: hidden; }
.jauge__part { min-width: 3px; transition: filter .12s; }
.jauge__part:hover { filter: brightness(1.12); }
.jauge__part:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.jauge__part:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.jauge__part--recu    { background: var(--viz-recu); }
.jauge__part--attente { background: var(--viz-attente); }
.jauge__part--refuse  { background: var(--viz-refuse); }

.legende { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .45rem; }
.legende li { display: flex; align-items: center; gap: .5rem; font-size: .84rem; }
.legende__puce { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.legende__puce--recu    { background: var(--viz-recu); }
.legende__puce--attente { background: var(--viz-attente); }
.legende__puce--refuse  { background: var(--viz-refuse); }
.legende__nom { color: var(--text-2); }
.legende__val { margin-left: auto; font-weight: 640; font-variant-numeric: tabular-nums; }
.legende__part { color: var(--text-3); font-size: .78rem; width: 3.2rem; text-align: right; font-variant-numeric: tabular-nums; }

/* barres horizontales : une seule mesure, donc une seule teinte — la longueur
   porte l'information, la couleur ne la redit pas */
.barres { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.barre { display: grid; grid-template-columns: 1fr; gap: .25rem; }
.barre__nom { font-size: .82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre__nom .muet { font-weight: 500; }
.barre__piste { height: 9px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.barre__valeur { height: 100%; background: var(--viz-serie); border-radius: 999px; min-width: 4px; }
.barre__chiffre {
  display: flex; align-items: baseline; gap: .45rem;
  font-size: .8rem; font-weight: 640; font-variant-numeric: tabular-nums;
}
.barre__chiffre .muet { font-weight: 500; }

.cell-titre { font-weight: 620; }

/* tableaux */
.tableau-boite { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; box-shadow: var(--ombre-sm); }
.tableau-defile { overflow-x: auto; }
table.tableau { width: 100%; border-collapse: collapse; font-size: .87rem; }
.tableau th, .tableau td { text-align: left; padding: .72rem .9rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tableau thead th { background: var(--surface-2); font-weight: 620; color: var(--text-2); font-size: .8rem; }
.tableau tbody tr:last-child td { border-bottom: none; }
.tableau tbody tr:hover { background: var(--surface-2); }
.tableau a.tri { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; }
.tableau a.tri:hover { color: var(--accent); }
.tableau a.tri.actif { color: var(--accent); }
.tableau td.num { font-variant-numeric: tabular-nums; font-weight: 620; }
.tableau td.actions { width: 1%; }

/* listes de lignes (résultats) */
.item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-fort);
  border-radius: var(--r);
  padding: .75rem .95rem;
}
.item + .item { margin-top: .5rem; }
.item--ok { border-left-color: var(--ok); }
.item--attention { border-left-color: var(--warn); }
/* La ligne qu'on vient de recalculer, le temps de la retrouver des yeux. */
.item--revient { box-shadow: 0 0 0 2px var(--accent); transition: box-shadow .4s; }
.item__titre { font-weight: 620; font-size: .9rem; }
.item__detail { color: var(--text-2); font-size: .84rem; margin-top: .2rem; }
.item__note { color: var(--warn); font-size: .81rem; margin-top: .28rem; }
.item__montant { flex: none; font-weight: 680; font-size: .95rem; color: var(--ok); font-variant-numeric: tabular-nums; }

/* pointage */
.pointage { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: .8rem .95rem; transition: border-color .13s, background-color .13s; }
.pointage + .pointage { margin-top: .5rem; }
.pointage.est-recu { border-color: #bbf7d0; background: var(--ok-doux); }
.pointage__ref { font-weight: 650; font-size: .89rem; }
.pointage__desc { color: var(--text-2); font-size: .83rem; margin-top: .12rem; }
.pointage__controles { display: flex; align-items: center; gap: .9rem; margin-top: .6rem; flex-wrap: wrap; }
.pointage__qte { display: flex; align-items: center; gap: .45rem; font-size: .81rem; color: var(--text-2); flex-wrap: wrap; }
.saisie--court { width: 5.2rem; }

/* détail colis par colis d'une ligne pesée : le site fait l'addition */
/* `.btn` impose display:inline-flex, qui l'emporte sur le `hidden` du
   navigateur : sans cette règle, le bouton resterait visible sur les lignes
   qui se comptent en colis, où il n'a rien à faire. */
.pesees__plus[hidden] { display: none; }
.pesees { margin-top: .55rem; padding-left: .1rem; }
.pesees__liste { display: flex; flex-direction: column; gap: .35rem; }
.pesee { display: flex; align-items: center; gap: .45rem; }
.pesee__no { font-size: .78rem; color: var(--text-3); min-width: 4.2rem; }
.pesee__retirer { line-height: 1; font-size: 1rem; }
.pesees__aide { font-size: .76rem; color: var(--text-3); margin: .4rem 0 0; }

/* ce que l'IA a lu sur le bon : présenté comme une donnée de référence, pas
   comme un champ de saisie — la quantité reçue reste le seul geste courant */
.correction--bon { margin-top: .3rem; }
.correction--bon > summary {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  width: 100%; padding: .2rem 0;
  border: 0; background: none; color: var(--text-2); font-weight: 500;
}
.correction--bon > summary:hover { background: none; }
.correction--bon > summary:hover .lien-corriger { color: var(--accent-fort); border-color: var(--accent); }
.lu-sur-bon { font-size: .83rem; }
.lu-sur-bon strong { color: var(--text); font-variant-numeric: tabular-nums; }
.lien-corriger {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .75rem; font-weight: 600; color: var(--text-3);
  border-bottom: 1px dashed var(--border-fort);
}
.correction--bon[open] .lien-corriger { color: var(--accent-fort); border-color: var(--accent); }

/* barre d'actions collante (pointage) */
.barre-actions {
  position: sticky; bottom: 0;
  margin-top: 1.2rem; padding: .85rem 0;
  background: linear-gradient(to top, var(--bg) 72%, transparent);
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
}
.barre-actions .compteur { font-size: .85rem; color: var(--text-2); margin-right: auto; }

/* actions de l'écran d'envoi : le bouton d'envoi reste le geste dominant,
   la mise en brouillon l'accompagne sans lui disputer la place */
.actions-envoi { display: flex; gap: .6rem; flex-wrap: wrap; }
.actions-envoi .btn--succes { flex: 1 1 16rem; }

/* correction d'une ligne, replié sous le détail de celle-ci. Le résumé doit
   se lire comme un bouton : sans cela il passe pour une simple légende et
   personne ne pense à cliquer dessus. */
.correction { margin-top: .55rem; }
.correction > summary {
  display: inline-flex; align-items: center; gap: .35rem;
  cursor: pointer; width: fit-content;
  font-size: .81rem; font-weight: 600; color: var(--accent-fort);
  padding: .3rem .65rem;
  border: 1px solid var(--border-fort);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.correction > summary::marker, .correction > summary::-webkit-details-marker { content: ""; display: none; }
.correction > summary:hover { background: var(--accent-doux); border-color: var(--accent); }
.correction[open] > summary { margin-bottom: .6rem; }
/* Colonnes de largeur fixe plutôt qu'un flux libre : d'une ligne de bon à
   l'autre, les champs tombent ainsi les uns sous les autres. En flex, un
   intitulé plus long ou un champ absent décalait toute la rangée, et l'œil
   ne pouvait plus comparer deux lignes d'un coup. */
.correction__champs {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(4, 8.5rem) max-content;
  align-items: end;
}
/* Deux rangées fixes : l'intitulé, quelle que soit sa longueur, puis le
   champ. Les champs partent donc tous de la même hauteur. */
.correction__champs label {
  display: grid; grid-template-rows: 2.1rem auto; gap: .22rem;
  align-content: end;
  font-size: .78rem; color: var(--text-2); font-weight: 550;
}
.correction__champs .saisie { width: 100%; }
/* Un champ masqué l'est vraiment : `display: grid` ci-dessus l'emporterait
   sinon sur l'attribut `hidden`, et le champ resterait visible. */
.correction__champs label[hidden] { display: none; }
.correction__champs .saisie[disabled] { background: var(--fond-2); color: var(--text-2); }
@media (max-width: 720px) {
  .correction__champs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .correction__champs button { grid-column: 1 / -1; }
}

.lien-photos {
  display: inline-flex; align-items: center; gap: .15rem;
  margin-left: .35rem; color: var(--accent); text-decoration: none;
  vertical-align: middle; font-size: .74rem; font-weight: 700;
}
.lien-photos:hover { color: var(--accent-fort); }

/* photos du bon, repliées : consultées ponctuellement, pas à chaque contrôle */
.carte--photos { padding: 0; }
.carte--photos > summary {
  display: flex; align-items: center; gap: .5rem;
  padding: .8rem 1rem; cursor: pointer;
  font-size: .9rem; font-weight: 620;
}
.carte--photos > summary::marker, .carte--photos > summary::-webkit-details-marker { content: ""; display: none; }
.carte--photos > summary .etiquette { margin-left: auto; }
.carte--photos > summary:hover { color: var(--accent-fort); }
.vignettes { display: flex; gap: .6rem; flex-wrap: wrap; padding: 0 1rem 1rem; }
.vignette {
  position: relative; display: block;
  width: 132px; height: 132px; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--bg);
}
.vignette:hover { border-color: var(--accent); }
.vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vignette__num {
  position: absolute; top: .3rem; left: .3rem;
  min-width: 1.2rem; padding: .05rem .35rem;
  border-radius: var(--r-sm);
  background: rgba(15,23,42,.72); color: #fff;
  font-size: .7rem; font-weight: 700; text-align: center;
}

/* Un bouton qui a l'air d'un lien : l'action est secondaire, elle ne doit
   pas rivaliser avec le grand bouton de prise de vue. */
.lien-bouton {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--accent); font-weight: 650;
  text-decoration: underline;
}
.lien-bouton:hover { color: var(--accent-fort); }

/* Retirer une page mal cadrée avant l'envoi : la croix se pose sur la
   vignette, à l'opposé de son numéro. */
.vignette__action {
  position: absolute; right: .3rem;
  width: 1.7rem; height: 1.7rem; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(15,23,42,.72); color: #fff;
  font-size: 1rem; line-height: 1; font-family: inherit;
}
.vignette__retirer { top: .3rem; }
.vignette__retirer:hover { background: var(--err); }
.vignette__reprendre { bottom: .3rem; font-size: .95rem; }
.vignette__reprendre:hover { background: var(--accent); }

/* Changer l'ordre des pages : les deux flèches occupent le bas de la
   vignette, là où le pouce arrive, et laissent l'image visible. */
.vignette__ordre {
  position: absolute; left: .3rem; bottom: .3rem;
  display: flex; gap: .2rem;
}
.vignette__deplacer {
  width: 1.7rem; height: 1.7rem; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(15,23,42,.72); color: #fff;
  font-size: .8rem; line-height: 1; font-family: inherit;
}
.vignette__deplacer:hover:not(:disabled) { background: var(--accent); }
.vignette__deplacer:disabled { opacity: .3; cursor: default; }

/* compteur de brouillons en attente, dans la navigation */
.pastille {
  margin-left: auto;
  min-width: 1.35rem;
  padding: .05rem .4rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* état vide */
.vide {
  text-align: center; padding: 2.6rem 1.2rem;
  color: var(--text-2);
}
.vide .ic { color: var(--text-3); margin-bottom: .6rem; }
.vide__titre { font-weight: 620; color: var(--text); margin-bottom: .25rem; }
.vide p { font-size: .88rem; margin: 0; }

/* dépôt des photos du bon (accueil) */
.depot {
  appearance: none; -webkit-appearance: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: .55rem;
  width: 100%; text-align: left; font-family: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1.2rem; cursor: pointer;
  box-shadow: var(--ombre-sm);
  transition: border-color .14s, box-shadow .14s, transform .12s;
}
.depot:hover:not(:disabled) { border-color: var(--accent); box-shadow: var(--ombre); transform: translateY(-2px); }
.depot:disabled { opacity: .5; cursor: not-allowed; }
.depot__pastille { width: 40px; height: 40px; border-radius: var(--r); display: grid; place-items: center; background: var(--accent-doux); color: var(--accent); }
.depot__titre { font-weight: 650; font-size: .98rem; }
.depot__desc { color: var(--text-2); font-size: .85rem; }

/* Les trois provenances d'un bon, présentées côte à côte : l'appareil
   photo, la photothèque, les fichiers. Une colonne sur téléphone — c'est
   là qu'on les lit — trois dès qu'il y a la place. */
.sources { display: grid; gap: .8rem; margin-top: .2rem; }
/* Un ordinateur n'a pas d'appareil photo à offrir : il ne voit qu'une
   entrée, et le téléphone ne voit pas celle qui lui est inutile. La classe
   est posée sur <html> avant le rendu des cartes, donc rien ne clignote. */
.bureau .sur-mobile, .tactile .sur-bureau { display: none !important; }
.depot--large { text-align: left; }
.depot--survole { border-color: var(--accent); background: var(--accent-doux); }
@media (min-width: 720px) {
  .sources { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
}
.depot--source { padding: 1rem; gap: .4rem; height: 100%; }
.depot--source .depot__titre { font-size: 1rem; }
/* Chaque provenance sa teinte, pour qu'on la retrouve d'un coup d'oeil sans
   lire : l'appareil photo garde l'accent de l'application, la photothèque
   tire vers le violet, les fichiers vers le bleu. */
.depot__pastille--photos { background: #f3e8ff; color: #7e22ce; }
.depot__pastille--fichiers { background: #dbeafe; color: #1d4ed8; }

/* Propositions de fournisseur (écran de pointage). Des pistes, pas des
   réponses : chacune porte son niveau de confiance et ce qui la fonde, et
   aucune n'est cochée d'avance. */
.pistes { display: grid; gap: .4rem; margin: .1rem 0 .7rem; }
.piste {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .55rem .7rem; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  font-size: .87rem;
}
.piste:hover { border-color: var(--accent); }
.piste input[type="radio"] { margin-top: .15rem; accent-color: var(--accent); flex: none; }
.piste > span { flex: 1; min-width: 0; }
.piste__nom { font-weight: 650; color: var(--text); margin-right: .4rem; }
.piste__raison { display: block; color: var(--text-2); margin-top: .15rem; }

/* Fenêtre de confirmation avant de quitter une analyse en cours. Trois
   issues montrées ensemble : reprendre, garder, abandonner. */
.modale { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 1rem; }
.modale[hidden] { display: none; }
.modale__voile { position: absolute; inset: 0; background: rgba(23,26,35,.55); }
.modale__boite {
  position: relative; width: min(30rem, 100%);
  background: var(--surface); border-radius: var(--r-lg);
  padding: 1.3rem; box-shadow: 0 18px 40px rgba(23,26,35,.28);
}
.modale__titre { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font-size: 1.08rem; color: var(--warn); }
.modale__texte { margin: 0 0 1.1rem; color: var(--text-2); font-size: .92rem; line-height: 1.45; }
.modale__actions { display: grid; gap: .5rem; }
.modale-ouverte { overflow: hidden; }

/* Scanner de bons (static/scanner.js). Plein écran, sur fond noir comme
   un appareil photo : la feuille doit être la seule chose claire à l'écran. */
.scanner-ouvert, .scanner-ouvert body { overflow: hidden; }
.scanner {
  position: fixed; inset: 0; z-index: 1000;
  background: #000; color: #fff;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}
.scanner__ecran { display: flex; flex-direction: column; height: 100%; }
.scanner__ecran[hidden] { display: none; }
.scanner__vue { position: relative; flex: 1; min-height: 0; }
.scanner__vue video,
.scanner__calque { position: absolute; inset: 0; width: 100%; height: 100%; }
.scanner__vue video { object-fit: contain; }
.scanner__aide {
  margin: 0; padding: .7rem 1rem; min-height: 2.9rem;
  text-align: center; font-size: .92rem; line-height: 1.35; color: #e5e7eb;
}
.scanner__barre {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: .6rem; padding: .4rem 1rem 1.1rem;
}
.scanner__barre > :last-child { justify-self: end; }
.scanner__texte {
  appearance: none; -webkit-appearance: none; background: none; border: 0;
  color: #fff; font: inherit; font-size: .95rem; font-weight: 600;
  padding: .6rem .3rem; cursor: pointer; justify-self: start;
}
.scanner__texte.actif { color: #facc15; }
.scanner__texte--vide { display: none; }
/* Le déclencheur d'un appareil photo : on le reconnaît sans le lire. */
.scanner__declencheur {
  width: 70px; height: 70px; border-radius: 50%;
  border: 4px solid #fff; background: #fff; background-clip: content-box;
  padding: 4px; cursor: pointer;
}
.scanner__declencheur:active { transform: scale(.94); }
.scanner__cadre { position: relative; flex: 1; min-height: 0; }
/* La photo et la couche des coins occupent la même boîte et s'y ajustent
   de la même façon (contain d'un côté, viewBox de l'autre) : un coin posé
   sur la couche tombe donc exactement sur le pixel qu'il désigne. */
.scanner__photo, .scanner__coins {
  position: absolute; top: 1.2rem; left: 1.2rem;
  width: calc(100% - 2.4rem); height: calc(100% - 2.4rem);
}
.scanner__photo { object-fit: contain; }
.scanner__coins { overflow: visible; touch-action: none; }
.scanner__coins polygon { fill: rgba(79,70,229,.18); stroke: #818cf8; }
.scanner__zone { fill: transparent; cursor: grab; }
.scanner__poignee { fill: #fff; stroke: #4f46e5; stroke-width: 6; vector-effect: non-scaling-stroke; pointer-events: none; }
.actif .scanner__poignee { fill: #c7d2fe; }
.scanner__barre--revue { display: flex; flex-wrap: wrap; justify-content: center; }
.scanner__barre--revue .btn--primaire { flex: 1 1 10rem; }
.scanner__ecran--erreur { justify-content: center; align-items: center; gap: .8rem; padding: 1.5rem; }
.scanner__ecran--erreur .scanner__aide { max-width: 26rem; }

/* barre de progression indéterminée */
.progression { height: 3px; border-radius: 999px; background: var(--accent-doux); overflow: hidden; margin-top: 1.2rem; }
.progression span { display: block; height: 100%; width: 35%; background: var(--accent); border-radius: 999px; animation: glisse 1.1s ease-in-out infinite; }
@keyframes glisse { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } }

/* ------------------------------------------------------------- page d'auth */

.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  padding: 2rem 1.1rem;
  background:
    radial-gradient(1100px 520px at 8% -8%, #e9ebfe 0%, transparent 62%),
    radial-gradient(900px 480px at 108% 108%, #e6f7f3 0%, transparent 58%),
    var(--bg);
}
.auth__boite { width: 100%; max-width: 396px; }
.auth__marque {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  font-weight: 700; font-size: 1.06rem; letter-spacing: -.015em;
  color: var(--text); text-decoration: none; margin-bottom: 1.4rem;
}
.auth__marque .ic { color: var(--accent); }
.auth__carte { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--ombre); padding: 1.6rem; }
.auth__titre { font-size: 1.16rem; font-weight: 660; letter-spacing: -.015em; }
.auth__sous { color: var(--text-2); font-size: .87rem; margin: .3rem 0 1.3rem; }
.auth__pied { text-align: center; color: var(--text-3); font-size: .78rem; margin-top: 1.1rem; }

/* utilitaires */
.muet { color: var(--text-2); }
.petit { font-size: .84rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; background: var(--bg); padding: .08rem .35rem; border-radius: 5px; }
.pile > * + * { margin-top: 1rem; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.titre-ic { display: inline-flex; align-items: center; gap: .45rem; }

/* ------------------------------------------------------------------ console
   Back-office Qolis. Le fond sombre de la barre latérale n'est pas décoratif :
   il signale d'un coup d'œil qu'on est côté éditeur, devant le parc de clients,
   et non dans l'espace de travail d'un magasin. La confusion entre les deux
   conduirait à agir sur les données d'un commerçant en croyant être chez soi. */
.console .sidebar { background: #14161f; border-right-color: #232735; }
.console .sidebar__marque { border-bottom-color: #232735; color: #f2f3f8; }
.console .sidebar__marque .ic,
.console .sidebar__marque .marque { color: #f2f3f8; }
.console .sidebar__titre { color: #7c8296; }
.console .nav-lien { color: #b9bed0; }
.console .nav-lien .ic { color: #7c8296; }
.console .nav-lien:hover { background: #1e2231; color: #f2f3f8; }
.console .nav-lien:hover .ic { color: #cfd3e0; }
.console .nav-lien.actif { background: #272c3d; color: #ffffff; }
.console .nav-lien.actif .ic { color: #a5b4fc; }
.console .sidebar__pied { border-top-color: #232735; }
.console .compte__nom { color: #f2f3f8; }
.console .compte__role { color: #7c8296; }
.console .compte__pastille { background: #272c3d; color: #a5b4fc; }
.console .sidebar__pied .btn--neutre {
  background: #1e2231;
  border-color: #2f3547;
  color: #cfd3e0;
}
.console .sidebar__pied .btn--neutre:hover { background: #272c3d; color: #ffffff; }

.console__etiquette {
  margin-left: .5rem;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #7c8296;
  font-weight: 700;
}
.console__badge { background: #eef0fe; color: #4338ca; border-color: #dcdffb; }

/* Bandeau de consultation : affiché dans l'espace d'un magasin quand c'est
   l'équipe Qolis qui le regarde. Il doit être impossible d'oublier qu'on n'est
   pas chez soi, d'où le rouge et la position collée en haut. */
.bandeau-consultation {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  padding: .6rem .9rem;
  background: #7f1d1d;
  color: #fff5f5;
  font-size: .85rem;
  font-weight: 550;
}
.bandeau-consultation a {
  margin-left: auto;
  color: #fff5f5;
  text-decoration: underline;
  font-weight: 620;
}

/* Bloc de remise d'un accès : le code n'existe en clair qu'ici, le temps de
   le copier. Police fixe pour qu'un caractère ambigu se lise sans hésiter. */
.bloc-remise {
  margin: 0;
  padding: 1rem 1.1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .84rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-x: auto;
  user-select: all;
}

/* Les courriers déjà partis pour un bon. Repliés : on les consulte avant de
   relancer, pas à chaque coup d'œil sur le tableau. */
.courriers { margin-top: .3rem; font-size: .72rem; }
.courriers > summary {
  cursor: pointer; color: var(--text-2); display: inline-flex;
  align-items: center; gap: .25rem; list-style: none;
}
.courriers > summary::-webkit-details-marker { display: none; }
.courriers > summary:hover { color: var(--accent); }
.courriers ul { margin: .3rem 0 0; padding-left: .9rem; color: var(--text-2); }
.courriers li { margin: .1rem 0; }

/* Un chiffre qui vient d'une lecture et non du catalogue : signalé sans
   crier, car la ligne reste chiffrable — c'est sa provenance qui appelle
   un coup d'œil, pas sa valeur. */
.alerte-douce { color: var(--warn); font-weight: 600; }

/* Propositions du catalogue sur une ligne à vérifier. Elles doivent se
   lire comme des pistes, pas comme un résultat : encadrées, cliquables,
   et visuellement en retrait des lignes déjà chiffrées. */
.propositions {
  margin: .55rem 0 0;
  padding: .5rem .6rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}
.propositions__titre {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  color: var(--text-3);
  margin-bottom: .4rem;
}
.proposition {
  display: flex;
  width: 100%;
  gap: .6rem;
  align-items: baseline;
  justify-content: space-between;
  padding: .35rem .5rem;
  margin-bottom: .25rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.proposition:hover { border-color: var(--accent); }
.proposition__nom { min-width: 0; overflow-wrap: anywhere; }
.proposition__prix { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Pourquoi ce produit est proposé. Sur sa propre ligne, sous le nom : la
   raison se lit après le nom, jamais à sa place. */
.proposition { flex-wrap: wrap; }
.proposition__raison { flex-basis: 100%; font-size: .78rem; color: var(--text-3); }
/* Le prix lu sur la photo du bon : proposé comme les autres, mais il sort
   d'une lecture, pas d'un catalogue vérifié. La bordure en pointillé le
   rappelle sans l'enterrer. */
.proposition--bon { border-style: dashed; border-color: var(--border-fort); background: var(--surface-2); }
.proposition--bon .proposition__nom { display: inline-flex; align-items: center; gap: .35rem; font-weight: 650; }
.proposition--retenue {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}