/* Le dépôt de Lyon — SPE.
   Pensé pour l'entrepôt : gros caractères, gros boutons, fort contraste.
   On l'utilise debout, une main prise par la douchette. */
:root{
  --bleu:#17527E; --bleu-2:#1B5C8A; --bleu-3:#3E8FC4; --clair:#7FC0E6;
  --nuit:#12293D; --creme:#F4F7FA; --papier:#FFFFFF; --encre:#16222C;
  --sourd:#5F6E7A; --trait:#D3DCE4;
  --vert:#1D9E75; --vert-f:#0F6E56; --vert-c:#E1F5EE;
  --rouge:#B3352F; --rouge-c:#FBEAE8; --ambre:#8A5B0B; --ambre-c:#FBF0DC;
  --sans:"Avenir Next",Avenir,-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:var(--sans);color:var(--encre);background:var(--creme);
  font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%}

header{background:var(--nuit);color:#EAF2F8;padding:14px 20px;
  display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:20}
header img{height:34px;flex:none}
header .lieu{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:#8FB0C8;margin-top:2px}
header h1{margin:0;font-size:17px;font-weight:600;letter-spacing:.01em}
nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
nav a{color:#CFE1EE;text-decoration:none;font-size:13px;font-weight:600;
  padding:8px 13px;border-radius:7px;letter-spacing:.03em}
nav a:hover{background:rgba(255,255,255,.10)}
nav a.ici{background:var(--bleu-3);color:#fff}

main{max-width:1100px;margin:0 auto;padding:22px 20px 60px}
h2{font-size:24px;font-weight:600;margin:0 0 4px}
h3{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--bleu-2);
  font-weight:700;margin:26px 0 10px}
p{margin:0 0 12px} p.sous{color:var(--sourd);margin:0 0 20px}
.petit{font-size:13px;color:var(--sourd)}

.carte{background:var(--papier);border:1px solid var(--trait);border-radius:12px;
  padding:18px 20px;margin-bottom:16px}
.grille{display:grid;gap:14px;margin-bottom:16px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.g3,.g2{grid-template-columns:1fr}}

.chiffre{background:var(--papier);border:1px solid var(--trait);border-radius:12px;
  padding:18px 20px}
.chiffre .v{font-size:34px;font-weight:700;color:var(--bleu);line-height:1;
  display:block;margin-bottom:6px;font-variant-numeric:tabular-nums}
.chiffre .l{font-size:13px;color:var(--sourd);display:block}

form.scan{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
input[type=text],input[type=number],input[type=date],select{
  font-family:var(--sans);font-size:19px;padding:14px 16px;border-radius:10px;
  border:2px solid var(--trait);background:var(--papier);color:var(--encre);
  min-width:0;width:100%}
input:focus,select:focus{outline:none;border-color:var(--bleu-3);
  box-shadow:0 0 0 4px rgba(62,143,196,.18)}
input.code{font-size:24px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--sourd);font-weight:700;margin:0 0 6px}
.champ{margin-bottom:16px}

button,.bouton{font-family:var(--sans);font-size:17px;font-weight:700;
  padding:14px 24px;border-radius:10px;border:0;cursor:pointer;
  background:var(--bleu-2);color:#fff;text-decoration:none;display:inline-block;
  text-align:center}
button:hover,.bouton:hover{background:var(--bleu)}
button.vert{background:var(--vert-f)} button.vert:hover{background:#0b5443}
.bouton.pale{background:var(--papier);color:var(--bleu-2);border:2px solid var(--trait)}
.bouton.pale:hover{background:var(--creme)}
button.large{width:100%;font-size:20px;padding:18px}

table{width:100%;border-collapse:collapse;font-size:15px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--sourd);font-weight:700;padding:0 12px 8px 0;
  border-bottom:2px solid var(--bleu-2)}
td{padding:11px 12px 11px 0;border-bottom:1px solid var(--trait);vertical-align:top}
td:last-child,th:last-child{padding-right:0}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.total td{border-bottom:0;border-top:2px solid var(--bleu-2);font-weight:700}
a{color:var(--bleu-2)}
code,.code{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:15px;
  background:var(--creme);padding:2px 7px;border-radius:5px;font-weight:700;
  letter-spacing:.03em;white-space:nowrap}

.pastille{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:4px 9px;border-radius:6px;white-space:nowrap}
.p-sol{background:var(--vert-c);color:var(--vert-f)}
.p-res{background:var(--creme);color:var(--sourd);border:1px solid var(--trait)}
.p-att{background:var(--ambre-c);color:var(--ambre)}
.p-ok{background:var(--vert-c);color:var(--vert-f)}
.p-non{background:var(--rouge-c);color:var(--rouge)}

.avis{border-radius:10px;padding:14px 18px;margin-bottom:16px;font-size:15px}
.avis.bon{background:var(--vert-c);border-left:4px solid var(--vert-f);color:var(--vert-f)}
.avis.mauvais{background:var(--rouge-c);border-left:4px solid var(--rouge);color:var(--rouge)}
.avis.info{background:var(--creme);border-left:4px solid var(--bleu-3)}
.avis b{display:block;margin-bottom:2px}

.propose{background:var(--vert-c);border:2px solid var(--vert-f);border-radius:12px;
  padding:22px;text-align:center;margin-bottom:16px}
.propose .adr{font-size:44px;font-weight:700;color:var(--vert-f);letter-spacing:.04em;
  line-height:1;margin-bottom:8px;font-variant-numeric:tabular-nums}
.propose .quoi{font-size:15px;color:var(--vert-f)}

.vide{text-align:center;padding:40px 20px;color:var(--sourd)}
.vide .gros{font-size:19px;font-weight:600;color:var(--encre);margin-bottom:6px}

/* ─────────────────────────────────────────────────────────── téléphone ───
   ⚠ C'est l'usage principal dans l'entrepôt : on scanne debout, une main
   prise. Le champ et le bouton passent l'un sous l'autre, et l'en-tête
   s'empile — sinon tout déborde à droite et le bouton devient inatteignable. */
@media (max-width: 700px) {
  header{flex-wrap:wrap;gap:10px;padding:12px 14px}
  header h1{font-size:16px}
  header .lieu{font-size:11px}
  nav{margin-left:0;width:100%;gap:4px}
  nav a{flex:1;text-align:center;padding:10px 6px;font-size:12px}
  main{padding:16px 14px 60px}
  h2{font-size:21px}
  form.scan{flex-direction:column}
  form.scan input, form.scan button{width:100%;flex:none}
  .carte{padding:14px 15px;border-radius:10px}
  table{font-size:14px}
  td, th{padding-right:8px}
  .propose .adr{font-size:34px}
  .chiffre .v{font-size:28px}
}
/* Un tableau large se fait glisser du doigt plutôt que de pousser la page. */
.carte > table{display:block;overflow-x:auto;white-space:nowrap}
.carte > table td, .carte > table th{white-space:normal}

/* ─────────────────────────────── terminaux de type MC3300 (480 px) ───
   L'écran d'un terminal d'entrepôt est étroit et haut. La barre de
   navigation y frôlait le bord : on la resserre plutôt que de la laisser
   rogner le dernier onglet. */
@media (max-width: 520px) {
  nav a{font-size:11px;padding:9px 3px;letter-spacing:0}
  header img{height:28px}
  header h1{font-size:15px}
}