/* ==========================================================================
   Dépôt-vente — feuille de style unique.

   Parti pris : un registre de comptage, pas un site.
   - Encre et papier, un seul accent : l'ambre de la signalétique de station,
     retenu pour l'action principale (noir sur ambre = le contraste le plus
     lisible en plein soleil, et la langue visuelle d'une piste).
   - Tout ce qui est un nombre est en chasse fixe : quantités, montants,
     dates, numéros de facture. C'est le contenu de l'outil, pas un détail.
   - Les valeurs calculées s'affichent en négatif sur fond encre, comme
     l'afficheur d'une pompe. C'est le seul geste appuyé de la page.
   - Mobile d'abord (comptage en station), rail latéral au-delà de 900 px.
   ========================================================================== */

:root {
  /* Encre */
  --encre:        #15241f;
  --encre-doux:   #5b6b64;
  --encre-faible: #93a099;

  /* Papier */
  --fond:      #e7eae4;
  --fond-doux: #f0f2ed;
  --surface:   #ffffff;
  --trait:     #cfd6ce;

  /* Signal unique */
  --signal:        #f5a524;
  --signal-fonce:  #a86a05;
  --signal-pale:   #fdf0d8;

  /* États (sémantiques, pas décoratifs) */
  --du:        #b3261e;
  --du-pale:   #fbe6e4;
  --paye:      #1b7a4b;
  --paye-pale: #e2f2e9;
  --lien:      #1f5c4c;

  --rayon:       10px;
  --rayon-petit: 6px;
  --ombre:       0 1px 2px rgba(21, 36, 31, .06), 0 1px 8px rgba(21, 36, 31, .04);
  --ombre-haute: 0 8px 28px rgba(21, 36, 31, .16);
  --nav-h:       64px;
  --topbar-h:    56px;
  --rail:        232px;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  color: var(--encre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}
body.connecte { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }

:where(a) { color: var(--lien); text-decoration: none; }
:where(a):hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--signal-fonce);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --------------------------------------------------------------- Typographie */

h1, h2, h3 { margin: 0 0 .6rem; font-weight: 650; letter-spacing: -.015em; line-height: 1.2; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; margin-top: 1.5rem; }
h3 { font-size: 1rem; margin-top: 1rem; }
p { margin: .4rem 0; }

small, .muted { color: var(--encre-doux); font-size: .875rem; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }

.big {
  font-family: var(--mono);
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: -.03em;
  margin: 0;
}

/* Tout nombre est en chasse fixe : c'est la matière de l'outil. */
.num, td.num, th.num, .val, .kpi .val, .url-box,
.recap .lignes, .liste .droite, .anciennete {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- Coque */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--topbar-h);
  padding: 0 1rem;
  background: var(--encre);
  color: var(--fond);
}
.topbar .brand {
  color: #fff;
  font-weight: 650;
  font-size: 1.02rem;
  letter-spacing: -.01em;
}
.topbar .brand:hover { text-decoration: none; }
.topbar-right {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-width: 0;
}
.topbar .who {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--encre-faible);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar a:not(.brand) { color: var(--signal); font-weight: 550; font-size: .9rem; }

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem;
}
.narrow { max-width: 400px; margin-left: auto; margin-right: auto; }

/* Connexion : le seul écran sans navigation, on centre la carte. */
.page-connexion .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--topbar-h) - 2rem);
}
.page-connexion .flashes { width: 100%; max-width: 400px; margin-left: auto; margin-right: auto; }
.page-connexion .card { margin-bottom: 0; }

/* --------------------------------------------------------------- Cartes */

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1rem;
  margin-bottom: .9rem;
}
.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}
.card-head h1, .card-head h2, .card-head h3 { margin: 0; }

/* Le liseré encode l'état, il ne décore pas. */
.card.warn   { border-left: 3px solid var(--signal); }
.card.danger { border-left: 3px solid var(--du); }
.card.ok     { border-left: 3px solid var(--paye); }

/* --------------------------------------------------------------- Messages */

.flashes { margin-bottom: 1rem; display: grid; gap: .5rem; }
.flash {
  padding: .7rem .9rem;
  border-radius: var(--rayon-petit);
  font-size: .95rem;
  font-weight: 500;
  border-left: 3px solid;
}
.flash-success { background: var(--paye-pale);   color: #14532d; border-color: var(--paye); }
.flash-error   { background: var(--du-pale);     color: #7f1d1d; border-color: var(--du); }
.flash-warning,
.flash-message { background: var(--signal-pale); color: #6b4300; border-color: var(--signal); }

/* --------------------------------------------------------------- Boutons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 44px;
  padding: .5rem 1rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
  background: var(--surface);
  color: var(--encre);
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none !important;
  transition: background-color .12s ease, border-color .12s ease, transform .06s ease;
}
.btn:hover { background: var(--fond-doux); border-color: var(--encre-faible); }
.btn:active { transform: translateY(1px); }

/* L'action principale : noir sur ambre, lisible en plein soleil. */
.btn-primary { background: var(--signal); border-color: var(--signal); color: var(--encre); }
.btn-primary:hover { background: #e2941a; border-color: #e2941a; }

.btn-success { background: var(--paye); border-color: var(--paye); color: #fff; }
.btn-success:hover { background: #166b41; border-color: #166b41; }
.btn-danger { background: var(--du); border-color: var(--du); color: #fff; }
.btn-danger:hover { background: #9b1f19; border-color: #9b1f19; }
/* Alerte de second niveau : l'ambre en dessous du rouge, texte noir. */
.btn-warning { background: var(--signal); border-color: var(--signal-fonce); color: var(--encre); }
.btn-warning:hover { background: #e2941a; border-color: var(--signal-fonce); }

.btn-sm { min-height: 34px; padding: .25rem .6rem; font-size: .85rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed; }

.linklike {
  background: none;
  border: 0;
  padding: 0;
  color: var(--lien);
  font: inherit;
  cursor: pointer;
}
.actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.actions > form { display: inline; }

/* --------------------------------------------------------------- Formulaires */

.form label { display: block; margin-bottom: .85rem; font-weight: 600; font-size: .9rem; }
.form label > input,
.form label > select,
.form label > textarea,
.form .input {
  display: block;
  width: 100%;
  margin-top: .3rem;
  min-height: 44px;
  padding: .5rem .7rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
  font: inherit;
  font-weight: 400;
  background: var(--surface);
  color: var(--encre);
}
.form label > input[type=number],
.form label > input[type=date],
.form label > input[inputmode=decimal] { font-family: var(--mono); }
.form textarea { min-height: 92px; resize: vertical; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.form .check { display: flex; align-items: center; gap: .55rem; font-weight: 600; }
.form .check input { width: 20px; height: 20px; margin: 0; accent-color: var(--encre); }
.form .aide {
  display: block;
  font-weight: 400;
  color: var(--encre-doux);
  font-size: .82rem;
  margin-top: .2rem;
}
input[type=number] { -moz-appearance: textfield; }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
::placeholder { color: var(--encre-faible); }

/* --------------------------------------------------------------- Tableaux */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -1rem;
  padding: 0 1rem;
}
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { padding: .6rem .55rem; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; }
td { padding-top: .7rem; }
th {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--encre-doux);
  border-bottom-color: var(--encre-faible);
  white-space: nowrap;
}
td.num, th.num { text-align: right; white-space: nowrap; font-family: var(--mono); }
tbody tr:last-child td { border-bottom: 0; }
tr.total td { font-weight: 700; border-top: 2px solid var(--encre); border-bottom: 0; }
tr.inactif td { color: var(--encre-faible); }

/* --------------------------------------------------------------- Listes */

.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.liste li {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.liste li > a,
.liste .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .8rem .95rem;
  color: inherit;
  border-radius: var(--rayon);
}
.liste li > a:hover { text-decoration: none; background: var(--fond-doux); }
.liste .titre { font-weight: 620; }
.liste .sous { color: var(--encre-doux); font-size: .85rem; }
.liste .droite { text-align: right; white-space: nowrap; font-family: var(--mono); font-size: .9rem; }
.liste .badges { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }

/* --------------------------------------------------------------- Badges */

.badge {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: var(--fond);
  color: var(--encre-doux);
  white-space: nowrap;
}
.badge-ok     { background: var(--paye-pale);   color: #14532d; }
.badge-warn   { background: var(--signal-pale); color: #6b4300; }
.badge-danger { background: var(--du-pale);     color: #7f1d1d; }
.badge-info   { background: #e2e9e6;            color: var(--lien); }

/* --------------------------------------------------------------- Chiffres clés */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .6rem;
  margin-bottom: 1.1rem;
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: .75rem .9rem;
}
.kpi .val {
  display: block;
  font-family: var(--mono);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.kpi .lib {
  display: block;
  margin-top: .15rem;
  color: var(--encre-doux);
  font-size: .8rem;
}
a.kpi { display: block; color: inherit; }
a.kpi:hover { text-decoration: none; background: var(--fond-doux); border-color: var(--encre-faible); }

/* --------------------------------------------------------------- Écran de comptage
   Chaque produit est une ligne de bon de livraison : libellés en chasse fixe,
   champs de saisie larges, valeurs calculées en afficheur. */

.ligne-produit {
  padding: .85rem 0;
  border-bottom: 1px solid var(--trait);
}
.ligne-produit:last-child { border-bottom: 0; }
.ligne-produit .nom { font-weight: 620; font-size: 1rem; }
.ligne-produit .prix { color: var(--encre-doux); font-weight: 400; font-family: var(--mono); font-size: .88rem; }

.ligne-produit .champs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .45rem;
  margin-top: .6rem;
}
.ligne-produit .champs label,
.ligne-produit .champs .calc .lib {
  display: block;
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 600;
  color: var(--encre-doux);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .2rem;
}
.ligne-produit .champs input {
  width: 100%;
  min-height: 52px;
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 600;
  text-align: center;
  color: var(--encre);
  background: var(--surface);
  border: 1.5px solid var(--trait);
  border-radius: var(--rayon-petit);
}
.ligne-produit .champs input:focus {
  border-color: var(--encre);
  outline: 2px solid var(--signal);
  outline-offset: 1px;
}

/* L'afficheur : négatif sur encre, comme la pompe. Le geste unique de l'interface. */
.ligne-produit .champs .calc { display: flex; flex-direction: column; }
.ligne-produit .champs .calc .val {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 .3rem;
  background: var(--encre);
  color: var(--fond);
  border-radius: var(--rayon-petit);
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.ligne-produit.negatif .champs .calc .val { color: var(--signal); }
.ligne-produit .champs .calc .val.apres-negatif { color: #ff8a80; }
.ligne-produit.non-saisie .champs .calc .val { background: var(--fond); color: var(--encre-faible); }

.ligne-produit .sous-total {
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--encre-doux);
  margin-top: .4rem;
  text-align: right;
}
/* Les phrases restent en texte courant : seule une valeur est en chasse fixe. */
.ligne-produit .aide { font-size: .8rem; color: var(--encre-doux); }
.ligne-produit .alerte-neg {
  display: block;
  font-size: .78rem;
  color: var(--du);
  font-weight: 600;
  margin-top: .25rem;
}
.ligne-produit input[readonly] {
  background: var(--fond);
  color: var(--encre-doux);
  border-style: dashed;
}
.ligne-produit.non-saisie .sous-total {
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--encre-faible);
  font-style: italic;
}
.ligne-produit.compte-manquant input[data-champ=compte] { border-color: var(--du); }

/* Le total : bandeau encre collé au bas de l'écran, comme le pied d'un bon. */
.recap {
  position: sticky;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  z-index: 20;
  background: var(--encre);
  border: 0;
  color: var(--fond);
  box-shadow: var(--ombre-haute);
}
.recap .lignes {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .25rem .9rem;
  font-family: var(--mono);
  font-size: .95rem;
}
.recap .lignes .grand { font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; }
.recap .muted { color: var(--encre-faible); }
.recap .btn-success { margin-top: .8rem; }

/* --------------------------------------------------------------- Zones */

.zone-titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin: 1.4rem 0 .55rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--encre-faible);
}
.zone-titre h2 {
  margin: 0;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--encre-doux);
}

/* --------------------------------------------------------------- Tournée */

.point-tournee .entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}
.point-tournee .badges { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .35rem; }
.point-tournee details { margin-top: .7rem; }
.point-tournee summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--lien);
  font-size: .9rem;
}
.point-tournee .infos { font-size: .88rem; color: var(--encre-doux); }

.alerte-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--trait);
  flex-wrap: wrap;
}
.alerte-item:last-child { border-bottom: 0; }
.alerte-item .btns { display: flex; gap: .4rem; }

/* --------------------------------------------------------------- Impayés */

.form-payer { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.form-payer select,
.form-payer input {
  min-height: 34px;
  padding: .2rem .45rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
  font: inherit;
  font-size: .85rem;
  background: var(--surface);
  color: var(--encre);
}
.form-payer input[type=date] { width: 9rem; font-family: var(--mono); }
.impaye-actions { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; justify-content: flex-end; }
.point-contact { color: var(--encre-doux); font-size: .88rem; }

.relance-infos { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin-bottom: 1rem; }
.relance-infos dt { color: var(--encre-doux); font-size: .85rem; }
.relance-infos dd { margin: 0; font-weight: 600; font-family: var(--mono); }
.relance-msg {
  width: 100%;
  min-height: 150px;
  padding: .7rem;
  font: inherit;
  font-size: .93rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
  background: var(--surface);
  color: var(--encre);
  resize: vertical;
}

/* --------------------------------------------------------------- Page publique
   Vue par le gérant de la station, une seule fois, sans formation. */

.public .produit-public {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--trait);
  flex-wrap: wrap;
}
.public .produit-public:last-child { border-bottom: 0; }
.public .produit-public .nom { font-weight: 620; font-size: 1.05rem; }
.public .produit-public .btns { display: flex; gap: .4rem; flex-wrap: wrap; }
.public .produit-public .btns form,
.public form.signal { display: inline; }
.public .btn { min-height: 48px; font-size: 1rem; }
.public .consigne { font-size: 1.05rem; }

/* --------------------------------------------------------------- QR */

.qr { display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.qr svg { width: min(70vw, 300px); height: auto; }
.url-box {
  font-family: var(--mono);
  font-size: .82rem;
  word-break: break-all;
  background: var(--fond);
  border: 1px solid var(--trait);
  padding: .6rem .7rem;
  border-radius: var(--rayon-petit);
}
.qr-page { max-width: 560px; margin: 0 auto; text-align: center; }
.qr-page h1 { font-size: 1.6rem; margin-bottom: .25rem; }
.qr-page .consigne { font-size: 1.1rem; font-weight: 600; margin: .8rem 0; }
.qr-page .url-box { text-align: left; }

/* --------------------------------------------------------------- Navigation */

.bottomnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  align-items: stretch;
  background: var(--encre);
  border-top: 1px solid #26382f;
}
.bottomnav > a,
.bottomnav .more > summary {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--encre-faible);
  cursor: pointer;
  list-style: none;
  user-select: none;
  border-top: 2px solid transparent;
}
.bottomnav > a:hover { text-decoration: none; color: var(--fond); }
.bottomnav > a.active { color: var(--signal); border-top-color: var(--signal); }
.bottomnav .ico { display: block; width: 22px; height: 22px; }
.bottomnav .ico svg { width: 100%; height: 100%; display: block; }

.bottomnav .more { flex: 1; display: flex; position: relative; }
.bottomnav .more > summary::-webkit-details-marker { display: none; }
.bottomnav .more[open] > summary { color: var(--fond); }
.bottomnav .more-menu {
  position: absolute;
  right: .5rem;
  bottom: calc(100% + 8px);
  min-width: 210px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-haute);
  padding: .3rem 0;
  overflow: hidden;
}
.bottomnav .more-menu a,
.bottomnav .more-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: .65rem 1rem;
  color: var(--encre);
  font-weight: 500;
  font-size: .93rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.bottomnav .more-menu a:hover,
.bottomnav .more-menu button:hover { background: var(--fond-doux); text-decoration: none; }

/* Dès qu'il y a la place, les six cellules tiennent sur une seule rangée. */
@media (min-width: 700px) {
  .ligne-produit .champs { grid-template-columns: repeat(6, 1fr); }
}

/* --------------------------------------------------------------- Grand écran
   Le rail remplace la barre du bas : une application de bureau, pas un
   téléphone étiré. */

@media (min-width: 900px) {
  body.connecte { padding-bottom: 0; }

  .topbar { padding: 0 1.25rem; }

  .bottomnav {
    top: var(--topbar-h);
    right: auto;
    bottom: 0;
    width: var(--rail);
    height: auto;
    flex-direction: column;
    align-items: stretch;
    padding: .7rem .55rem;
    gap: 2px;
    border-top: 0;
    border-right: 1px solid #26382f;
  }
  .bottomnav > a,
  .bottomnav .more > summary {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: .7rem;
    padding: .6rem .7rem;
    font-size: .93rem;
    font-weight: 550;
    border-top: 0;
    border-radius: var(--rayon-petit);
  }
  .bottomnav > a:hover,
  .bottomnav .more > summary:hover { background: #1e3029; }
  .bottomnav > a.active { background: #22352d; color: var(--signal); }
  .bottomnav .ico { width: 20px; height: 20px; flex: none; }

  .bottomnav .more { flex: 0 0 auto; display: block; position: static; margin-top: auto; }
  .bottomnav .more-menu {
    position: static;
    min-width: 0;
    margin-top: .3rem;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .bottomnav .more-menu a,
  .bottomnav .more-menu button {
    color: var(--encre-faible);
    padding: .5rem .7rem;
    border-radius: var(--rayon-petit);
    font-size: .88rem;
  }
  .bottomnav .more-menu a:hover,
  .bottomnav .more-menu button:hover { background: #1e3029; color: var(--fond); }

  body.connecte .container { margin-left: var(--rail); max-width: calc(900px + var(--rail)); padding: 1.5rem; }

  .recap { bottom: 1rem; }
  .ligne-produit {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 2.4fr;
    gap: 1.2rem;
    align-items: center;
  }
  .ligne-produit .champs { margin-top: 0; grid-template-columns: repeat(6, 1fr); }
  .table-wrap { margin: 0; padding: 0; }
}

/* --------------------------------------------------------------- Accessibilité */

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

/* --------------------------------------------------------------- Impression
   Seule la page QR est faite pour sortir sur papier. */

@media print {
  :root { --nav-h: 0px; }
  .topbar, .bottomnav, .flashes, .actions, .no-print { display: none !important; }
  body, body.connecte { background: #fff; padding: 0; }
  .container, body.connecte .container { margin: 0; max-width: none; padding: 0; }
  .card { box-shadow: none; border: 0; }
  .qr-page { max-width: none; }
  .qr-page h1 { font-size: 2.1rem; }
  .qr-page .consigne { font-size: 1.4rem; }
  .qr svg { width: 105mm; }
  .url-box { border: 1px solid #999; background: #fff; }
}