:root {
  --bleu: #0b4f8a; --bleu-fonce: #08365f; --bleu-clair: #e6f0f8; --vert: #1f7a4d; --vert-clair: #e3f3ea;
  --orange: #c2620b; --orange-clair: #fdeedd; --rouge: #b3261e; --rouge-clair: #fbe4e2; --gris: #5f6b76;
  --gris-clair: #f3f5f7; --bord: #d9dee3; --texte: #1c2733; --fond: #fbfcfd;
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; color: var(--texte); background: var(--fond); line-height: 1.45; }
a { color: var(--bleu); }
h1 { font-size: 1.5rem; margin: 0 0 .75rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; color: var(--bleu-fonce); }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
code, .mono { font-family: Consolas, "Cascadia Mono", monospace; font-size: .92em; }

/* -------- structure */
.entete { background: var(--bleu-fonce); color: #fff; display: flex; align-items: center; gap: 1rem; padding: .55rem 1.2rem; flex-wrap: wrap; }
.entete .marque { font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; color: #fff; text-decoration: none; }
.entete .marque small { font-weight: 400; opacity: .8; font-size: .8rem; margin-left: .5rem; }
.entete nav { display: flex; gap: .15rem; flex-wrap: wrap; flex: 1; }
.entete nav a { color: #dbe7f3; text-decoration: none; padding: .35rem .65rem; border-radius: 6px; font-size: .95rem; }
.entete nav a:hover, .entete nav a.actif { background: rgba(255,255,255,.14); color: #fff; }
.entete .qui { font-size: .9rem; opacity: .95; }
.entete .qui .role { background: rgba(255,255,255,.18); padding: .15rem .5rem; border-radius: 999px; margin-left: .4rem; font-size: .8rem; }
.entete .qui a { color: #fff; margin-left: .6rem; }
.bandeau-demo { background: var(--orange-clair); color: #6b3a05; font-size: .85rem; padding: .3rem 1.2rem; border-bottom: 1px solid #f1d3ad; }
main { max-width: 1240px; margin: 0 auto; padding: 1.2rem; }
main.etroit { max-width: 520px; }
.pied { text-align: center; color: var(--gris); font-size: .8rem; padding: 2rem 1rem; }

/* -------- composants */
.carte { background: #fff; border: 1px solid var(--bord); border-radius: 10px; padding: 1rem 1.2rem; margin-bottom: 1rem; }
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.tuile { background: #fff; border: 1px solid var(--bord); border-radius: 10px; padding: 1rem; text-decoration: none; color: inherit; display: block; }
.tuile:hover { border-color: var(--bleu); box-shadow: 0 2px 8px rgba(11,79,138,.12); }
.tuile .chiffre { font-size: 2rem; font-weight: 700; color: var(--bleu-fonce); line-height: 1.1; }
.tuile .libelle { color: var(--gris); font-size: .9rem; }
.tuile.alerte .chiffre { color: var(--rouge); }
.tuile.attention .chiffre { color: var(--orange); }
.tuile.ok .chiffre { color: var(--vert); }
.message { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid transparent; }
.message.erreur { background: var(--rouge-clair); color: #6f1710; border-color: #efb9b4; }
.message.succes { background: var(--vert-clair); color: #134d31; border-color: #b6dfc7; }
.message.info { background: var(--bleu-clair); color: var(--bleu-fonce); border-color: #bcd4ea; }
.message.attention { background: var(--orange-clair); color: #6b3a05; border-color: #f1d3ad; }
.badge { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; background: var(--gris-clair); color: var(--gris); }
.badge.EN_STOCK, .badge.DISPONIBLE_CONTROLE, .badge.OK, .badge.SYNCHRONISE, .badge.SIGNE { background: var(--vert-clair); color: var(--vert); }
.badge.CHEZ_CLIENT, .badge.RESERVE, .badge.EN_PREPARATION { background: var(--bleu-clair); color: var(--bleu); }
.badge.REPRIS_A_CONTROLER, .badge.EN_DESINFECTION, .badge.EN_TRANSIT, .badge.CHEZ_GAZIER, .badge.EN_REPARATION, .badge.BROUILLON { background: var(--orange-clair); color: var(--orange); }
.badge.QUARANTAINE, .badge.PRESUME_PERDU, .badge.PERDU, .badge.REFORME, .badge.REJET, .badge.ANNULE { background: var(--rouge-clair); color: var(--rouge); }
.badge.PLEIN { background: var(--vert-clair); color: var(--vert); }
.badge.VIDE { background: var(--gris-clair); color: var(--gris); }
.badge.admin { background: #efe3fb; color: #5b2a86; }
.badge.adv { background: var(--bleu-clair); color: var(--bleu); }
.badge.technicien { background: var(--vert-clair); color: var(--vert); }
.badge.direction { background: var(--orange-clair); color: var(--orange); }
.badge.synthetique { background: #f1f1f1; color: #777; font-weight: 500; }

table { border-collapse: collapse; width: 100%; font-size: .92rem; background: #fff; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--bord); vertical-align: top; }
th { background: var(--gris-clair); font-weight: 600; color: #34404b; white-space: nowrap; }
tr:hover td { background: #f7fafc; }
td.num, th.num { text-align: right; white-space: nowrap; }
.defilant { overflow-x: auto; }
.petit { font-size: .82rem; color: var(--gris); }
.droite { text-align: right; }

form .champ { margin-bottom: .8rem; }
label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .25rem; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=month], select, textarea {
  width: 100%; padding: .55rem .65rem; border: 1px solid var(--bord); border-radius: 7px; font-size: 1rem; font-family: inherit; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid #9cc0e4; border-color: var(--bleu); }
input.code { font-size: 1.6rem; letter-spacing: .35em; text-align: center; font-family: Consolas, monospace; }
.ligne { display: flex; gap: .8rem; flex-wrap: wrap; align-items: flex-end; }
.ligne > * { flex: 1 1 160px; }
.ligne > .fixe { flex: 0 0 auto; }
.bouton, button { display: inline-block; background: var(--bleu); color: #fff; border: 0; border-radius: 7px; padding: .55rem 1rem; font-size: .95rem; cursor: pointer; text-decoration: none; font-family: inherit; }
.bouton:hover, button:hover { background: var(--bleu-fonce); }
.bouton.secondaire, button.secondaire { background: #fff; color: var(--bleu); border: 1px solid var(--bleu); }
.bouton.danger, button.danger { background: var(--rouge); }
.bouton.vert, button.vert { background: var(--vert); }
.bouton.petit, button.petit { padding: .3rem .6rem; font-size: .85rem; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.inline { display: inline; }
details summary { cursor: pointer; color: var(--bleu); }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 800px) { .grille-2 { grid-template-columns: 1fr; } }
dl.fiche { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0; }
dl.fiche dt { color: var(--gris); font-size: .88rem; }
dl.fiche dd { margin: 0; }
.qr { text-align: center; }
.qr img { width: 220px; height: 220px; image-rendering: pixelated; border: 1px solid var(--bord); border-radius: 8px; padding: 6px; background: #fff; }
.secret { font-family: Consolas, monospace; background: var(--gris-clair); padding: .4rem .6rem; border-radius: 6px; display: inline-block; letter-spacing: .08em; word-break: break-all; }
.journal .evt { padding: .5rem 0; border-bottom: 1px dashed var(--bord); display: grid; grid-template-columns: 150px 1fr; gap: .5rem; }
.journal .evt .quand { color: var(--gris); font-size: .85rem; }
.journal .evt .type { font-weight: 600; }
.accueil-role { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.accueil-role .tuile h3 { margin: 0 0 .4rem; color: var(--bleu-fonce); }
.accueil-role .tuile p { margin: 0; color: var(--gris); font-size: .92rem; }

/* -------- terrain (mobile) */
.terrain { max-width: 720px; }
.terrain h1 { font-size: 1.3rem; }
.terrain .scan { display: flex; gap: .5rem; }
.terrain .scan input { font-size: 1.15rem; }
.terrain .lignes-bd li { display: flex; gap: .6rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--bord); }
.terrain .lignes-bd .sens { font-weight: 700; width: 70px; }
.terrain .lignes-bd .sens.DEPOT { color: var(--vert); }
.terrain .lignes-bd .sens.REPRISE { color: var(--orange); }
.terrain .lignes-bd .echange { background: var(--bleu-clair); color: var(--bleu); font-size: .75rem; padding: .05rem .4rem; border-radius: 4px; }
.terrain .lignes-bd button { background: transparent; color: var(--rouge); border: 1px solid var(--bord); padding: .2rem .5rem; }
canvas.signature { width: 100%; height: 160px; border: 1px dashed var(--gris); border-radius: 8px; background: #fff; touch-action: none; }
.grand-bouton { width: 100%; padding: .9rem; font-size: 1.1rem; }
.hors-ligne { background: var(--rouge-clair); color: var(--rouge); text-align: center; padding: .3rem; font-size: .85rem; }
.parc-attendu li { display: flex; justify-content: space-between; gap: .5rem; padding: .3rem 0; border-bottom: 1px solid var(--bord); font-size: .95rem; }
.imprimable { display: none; }
@media print {
  .entete, .bandeau-demo, .pied, .non-imprimable { display: none !important; }
  main { max-width: none; padding: 0; }
  .carte { border: 0; }
  .imprimable { display: block; }
}
.bd-papier { border: 2px solid #222; padding: 1rem; font-size: .9rem; }
.bd-papier .bloc { border: 1px solid #222; padding: .5rem; margin-bottom: .6rem; }
.bd-papier .bloc h3 { margin: 0 0 .3rem; text-transform: uppercase; font-size: .85rem; letter-spacing: .05em; }
.bd-papier .deux { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.bd-papier .signature-img { max-height: 90px; }
.bd-papier .case { display: inline-block; width: 12px; height: 12px; border: 1px solid #222; margin-right: 4px; vertical-align: middle; }
.bd-papier .case.coche { background: #222; }
.facture-papier { font-size: .92rem; }
.facture-papier .entete-facture { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.facture-papier .sous { color: var(--gris); font-size: .82rem; white-space: pre-line; }
.facture-papier tfoot td { font-weight: 600; }