/* TMS — pensé pour l'entrepôt : gros caractères, contraste fort, une info par œil. */
:root {
  --fg: #16181c; --fg-doux: #5f6670; --bg: #f3f4f6; --carte: #ffffff; --ligne: #dde1e6;
  --accent: #1f5f4f; --rouge: #c0392b; --orange: #c77700; --vert: #2f7d4f; --gris: #9aa0a6;
  --rouge-fond: #fdeeec; --orange-fond: #fdf6e8; --vert-fond: #eef7f1;
}
@media (prefers-color-scheme: dark) {
  :root { --fg: #e8eaed; --fg-doux: #a0a7b0; --bg: #141618; --carte: #1c1f23; --ligne: #2c3137;
    --accent: #4bbd9b; --rouge: #ef6b5c; --orange: #e0a13a; --vert: #5fbd85; --gris: #7a8189;
    --rouge-fond: #2c1e1c; --orange-fond: #2a2418; --vert-fond: #1a2a21; }
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--fg); background: var(--bg); font: 17px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--accent); }
header { display: flex; align-items: center; gap: 1.6rem; padding: .7rem 1.4rem; background: var(--carte); border-bottom: 1px solid var(--ligne); }
.marque { font-weight: 700; text-decoration: none; color: var(--fg); font-size: 1.1rem; }
header nav { display: flex; gap: 1.2rem; }
header nav a { text-decoration: none; color: var(--fg-doux); padding: .2rem 0; }
header nav a.actif { color: var(--fg); box-shadow: inset 0 -3px 0 var(--accent); }
.identite { margin-left: auto; color: var(--fg-doux); font-size: .9rem; display: flex; gap: 1rem; align-items: center; }
.etat { padding: .15rem .6rem; border-radius: 999px; background: var(--bg); }
.etat.ok { color: var(--vert); } .etat.erreur { color: #fff; background: var(--rouge); font-weight: 600; }

main { max-width: 64rem; margin: 0 auto; padding: 1.4rem 1.2rem 4rem; }
main.large { max-width: 110rem; }
h1 { font-size: 1.6rem; margin: 0 0 .3rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: 0 0 .6rem; }
.carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: 12px; padding: 1.1rem 1.3rem; margin-bottom: 1.1rem; }
.entete { margin-bottom: 1rem; }
.compteurs { margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.pastille { display: inline-block; padding: .2rem .7rem; border-radius: 999px; font-weight: 600; font-size: .9rem; color: #fff; }
.pastille em { font-style: normal; opacity: .85; font-weight: 400; }
.pastille.exclu { background: var(--gris); }
.inline { display: inline; margin-left: auto; }

.tableau { overflow-x: auto; background: var(--carte); border: 1px solid var(--ligne); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: .7rem .7rem; text-align: left; border-bottom: 1px solid var(--ligne); vertical-align: top; }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-doux); font-weight: 600; white-space: nowrap; }
td.num, th.num { text-align: right; white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
table.commandes tbody tr { cursor: pointer; }
table.commandes tbody tr:hover td { background: rgba(127,127,127,.08); }
tr.l-rouge td.depart { background: var(--rouge-fond); }
tr.l-orange td.depart { background: var(--orange-fond); }
tr.l-vert td.depart { background: var(--vert-fond); }
td.depart { white-space: nowrap; font-size: 1.15rem; }
.puce { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .5rem; vertical-align: middle; }
.puce.rouge { background: var(--rouge); } .puce.orange { background: var(--orange); } .puce.vert { background: var(--vert); } .puce.gris { background: var(--gris); }
.transporteur { font-weight: 700; } .transporteur.grand { font-size: 1.3rem; }
.discret { color: var(--fg-doux); }
.numero { white-space: nowrap; }
.badge { display: inline-block; padding: .05rem .5rem; border-radius: 6px; font-size: .8rem; font-weight: 700; color: #fff; vertical-align: middle; }
.badge.rouge { background: var(--rouge); } .badge.orange { background: var(--orange); }
td.produits { max-width: 28rem; }
.produit { display: block; }
.qte { color: var(--rouge); }
.zone { display: inline-block; padding: .1rem .55rem; border-radius: 6px; background: var(--bg); border: 1px solid var(--ligne); font-weight: 700; margin: 0 .3rem .3rem 0; font-size: 1.05rem; }
.zone.grande { font-size: 1.5rem; padding: .15rem .8rem; }
.vide { color: var(--fg-doux); text-align: center; padding: 2.5rem; }
.terminees { margin-top: 1.5rem; } .terminees summary { cursor: pointer; color: var(--fg-doux); margin-bottom: .6rem; }

/* Fiche commande */
.fiche h1 { display: flex; gap: .8rem; align-items: center; }
.statut-badge { font-size: .85rem; font-weight: 600; padding: .15rem .6rem; border-radius: 999px; background: var(--bg); color: var(--fg-doux); }
.sous-titre { margin: .2rem 0 0; font-size: 1.1rem; }
.alerte { color: #fff; background: var(--rouge); padding: .5rem .9rem; border-radius: 8px; font-weight: 600; }
.alerte.grande { font-size: 1.2rem; }
.info { color: var(--vert); font-weight: 600; }
.lignes { list-style: none; margin: 0; padding: 0; }
.ligne { display: flex; gap: 1.1rem; padding: .9rem 0; border-bottom: 1px solid var(--ligne); align-items: flex-start; }
.ligne:last-child { border-bottom: none; }
.ligne img, .sans-image { width: 96px; height: 96px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--ligne); flex: none; }
.ligne.pack { opacity: .75; } .ligne.pack .qte-grande { color: var(--fg-doux); }
.ligne.composant { padding-left: 2rem; }
.ligne-haut { display: flex; gap: 1rem; align-items: center; margin-bottom: .2rem; }
.qte-grande { font-size: 1.7rem; color: var(--rouge); }
.nom { font-size: 1.1rem; }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 700px) { .deux-colonnes { grid-template-columns: 1fr; } body { font-size: 16px; } }
.tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.tag { padding: .05rem .5rem; border-radius: 6px; background: var(--bg); border: 1px solid var(--ligne); font-size: .85rem; }
.note { white-space: pre-wrap; background: var(--orange-fond); padding: .5rem .8rem; border-radius: 8px; }

/* Formulaires */
label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; color: var(--fg-doux); margin-bottom: .9rem; }
input, select { font: inherit; padding: .5rem .6rem; border: 1px solid var(--ligne); border-radius: 8px; background: var(--bg); color: var(--fg); }
input.court, select.court { min-width: 0; width: auto; }
input[type=checkbox] { width: 1.3rem; height: 1.3rem; }
.bouton, .bouton-second { font: inherit; font-weight: 600; padding: .6rem 1.2rem; border-radius: 10px; border: 1px solid var(--accent); cursor: pointer; }
.bouton { background: var(--accent); color: #fff; }
.bouton-second { background: transparent; color: var(--accent); }
.bouton-second.petit { padding: .3rem .8rem; font-size: .9rem; }
.connexion { max-width: 24rem; margin: 4rem auto; }
.connexion input { font-size: 1.2rem; padding: .7rem; }
.connexion .bouton { width: 100%; font-size: 1.2rem; padding: .8rem; }
table.reglages th, table.reglages td { padding: .4rem .5rem; vertical-align: middle; }
table.reglages input, table.reglages select { padding: .35rem .5rem; }
table.reglages form, section form { margin-top: .6rem; }
tr.nouvelle td { background: var(--vert-fond); }