/* ============================================================
   Vue « quai de réception » (core/types/quai.js) — 03/10/2026.
   D'après la maquette v8 (docs/briefs/picard/), dans la charte Prepalog :
   l'accent est celui de l'entreprise (--ardoise, posé par son THEME).
   Les deux seules couleurs propres à la vue — le froid et le chaud de la
   jauge — sont déclarées ici pour les trois cas, comme dans base.css :
   thème clair, thème sombre choisi, thème sombre du système.
   Les documents papier (ticket, étiquette, BL) gardent leur teinte de
   papier quel que soit le thème : ce sont des objets, pas l'interface.
   ============================================================ */

:root{ --quai-froid:#2a6fb0; --quai-chaud:#b8431b }
:root[data-theme="sombre"]{ --quai-froid:#7fb6ea; --quai-chaud:#ff8a65 }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="clair"]){ --quai-froid:#7fb6ea; --quai-chaud:#ff8a65 }
}
/* Une entreprise qui impose le papier (THEME.papier) repose ces deux valeurs sur <body>. */

.quai{ display:grid; gap:14px; max-width:1150px }
.quai h2{ margin:0 }
.quai-tete{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; justify-content:space-between }
.quai-avert{
  font-size:12.5px; color:var(--encre-douce); border-left:3px solid var(--terre);
  padding:6px 10px; background:rgba(156,98,10,.07); border-radius:0 var(--r) var(--r) 0;
}
.quai-cout{ color:var(--encre-douce); font-size:12px; font-weight:400 }
.quai-ligne{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }

/* --- les horloges ----------------------------------------------------- */
.quai-horloges{ display:flex; flex-wrap:wrap; gap:12px; align-items:stretch }
.quai-horloge{ background:var(--panneau); border:1px solid var(--filet); border-radius:var(--r); padding:10px 14px; min-width:200px }
.quai-lib{ font-size:12px; color:var(--encre-douce); text-transform:uppercase; letter-spacing:.04em }
.quai-val{ font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; font-family:var(--mono) }
.quai-h-froid{ flex:1; min-width:280px }
.quai-h-reel .quai-val{ color:var(--ardoise) }
.quai-jauge{ height:14px; border-radius:7px; background:var(--filet); overflow:hidden; margin:6px 0 2px }
.quai-jauge i{ display:block; height:100%; background:linear-gradient(90deg,var(--quai-froid),var(--terre) 70%,var(--quai-chaud)) }
.quai-depasse{ color:var(--quai-chaud); font-weight:600 }

/* --- les étapes ------------------------------------------------------- */
.quai-stepper{ display:flex; gap:6px; flex-wrap:wrap }
.quai-stepper button{
  font:inherit; font-size:14px; border:1px solid var(--filet); background:var(--panneau); color:var(--encre-douce);
  padding:8px 12px; border-radius:999px; cursor:pointer;
}
.quai-stepper button.on{ border-color:var(--ardoise); color:var(--ardoise); font-weight:600; box-shadow:inset 0 0 0 1px var(--ardoise) }
.quai-stepper button:disabled{ opacity:.45; cursor:not-allowed }
.quai-stepper button:focus-visible, .quai-onglets button:focus-visible{ outline:2px solid var(--ardoise); outline-offset:2px }

.quai-carte{ background:var(--panneau); border:1px solid var(--filet); border-radius:var(--r); padding:14px; display:grid; gap:12px }
.quai-carte > p{ margin:0 }
.quai-h2{ font-size:16px }
.quai-pastille-etape{
  display:inline-block; font-size:12px; color:var(--ardoise); border:1px solid var(--ardoise);
  border-radius:20px; padding:1px 8px; margin-right:6px; vertical-align:2px;
}
.quai-grille2{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
@media (max-width:820px){ .quai-grille2{ grid-template-columns:1fr } }

/* --- étape 1 : le camion arrive -------------------------------------- */
.quai-photo{ position:relative; border-radius:var(--r); overflow:hidden; background:linear-gradient(135deg,#5b6b78,#2f3a44); min-height:220px }
.quai-photo img{ display:block; width:100%; height:260px; object-fit:cover }
.quai-legende{ position:absolute; left:0; right:0; bottom:0; padding:8px 12px; background:rgba(20,24,30,.66); color:#f1ece3; font-size:14px }
.quai-chauffeur{ display:flex; gap:10px; align-items:flex-start; border:1px solid var(--filet); border-radius:var(--r); padding:8px 12px; background:var(--fond) }
.quai-chauffeur p{ margin:4px 0 }
.quai-doc{ border:1px solid var(--filet); border-radius:var(--r); padding:10px; background:var(--fond); min-width:0 }
.quai-doc-titre{ font-weight:600; margin-bottom:8px }
.quai-bl{ font-size:13px }
.quai-bl th, .quai-bl td{ padding:5px 6px }
.quai-reconst{ font-size:11px; color:var(--encre-douce); margin-top:6px; font-style:italic }
.quai-ticket{
  background:#f3efe6; color:#222; font:12px/1.35 var(--mono); padding:10px 14px; margin:10px 0; max-width:300px;
  border-left:1px dashed #aaa; border-right:1px dashed #aaa; box-shadow:0 1px 3px rgba(0,0,0,.15); white-space:pre; overflow:auto;
}
.quai-qcm label{ display:flex; gap:8px; align-items:baseline; padding:4px 0; cursor:pointer; font-size:14px; color:var(--encre); font-weight:400 }
.quai-qcm input{ width:auto }

/* --- étape 2 : le déchargement ---------------------------------------- */
.quai-scene2{ position:relative; border-radius:var(--r); overflow:hidden; background:linear-gradient(135deg,#5b6b78,#2f3a44) }
.quai-scene2 svg{ display:block; width:100%; height:auto }
@media (max-width:640px){ .quai-scene2 .quai-legende{ position:static; font-size:13px } }
.quai-barre2{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between }
.quai-compteur2{ font-size:15px }
.quai-compteur2 b{ font-size:20px; font-variant-numeric:tabular-nums }
.quai-pastilles2{ display:inline-flex; gap:4px; vertical-align:middle; margin-left:6px; flex-wrap:wrap }
.quai-pastilles2 i{
  width:26px; height:18px; border-radius:3px; border:1px solid var(--filet); font:600 10px/16px system-ui;
  font-style:normal; text-align:center; color:var(--encre-douce);
}
.quai-pastilles2 i.sur{ background:#d9b77e; border-color:#8a6634; color:#3b2a12 }

/* --- étape 3 : le contrôle -------------------------------------------- */
.quai-onglets{ display:flex; gap:6px; flex-wrap:wrap }
.quai-onglets button{
  font:inherit; font-size:13px; border:1px solid var(--filet); background:var(--fond); color:var(--encre);
  padding:5px 10px; border-radius:var(--r); cursor:pointer;
}
.quai-onglets button.on{ border-color:var(--ardoise); color:var(--ardoise); font-weight:600 }
.quai-etat{ font-size:11px; color:var(--encre-douce); margin-left:6px; font-weight:400 }
.quai-rappel-bl{ font-size:13px }
.quai-rappel-bl summary{ cursor:pointer; color:var(--ardoise) }
.quai-poste{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:16px }
@media (max-width:820px){ .quai-poste{ grid-template-columns:1fr } }
.quai-scene{ background:var(--fond); border:1px solid var(--filet); border-radius:var(--r); padding:8px; text-align:center }
.quai-scene svg{ width:100%; max-width:460px; height:auto }
.quai-etiq-clic{ cursor:zoom-in }
.quai-vue-lib{ font-size:13px; color:var(--encre-douce); margin:4px 0 8px }
.quai-outils{ display:grid; gap:10px; align-content:start }
.quai-constat{ font-size:13px; border-left:3px solid var(--ardoise); padding:4px 8px; background:var(--ardoise-clair) }
.quai-aide{ border:1px dashed var(--ardoise); border-radius:var(--r); padding:8px 10px; font-size:13px; color:var(--encre-douce); margin:0 }
.quai-zoom{ border:1px solid var(--filet); border-radius:var(--r); padding:10px; background:var(--fond) }
.quai-etiq{
  background:#f6f1e4; color:#222; border:1px solid #999; border-radius:4px; padding:10px 12px;
  font:13px/1.5 var(--mono); max-width:340px;
}
.quai-etiq b{ font-family:system-ui,sans-serif }
.quai-code{ letter-spacing:2px; font-size:11px; border-top:1px dashed #999; margin-top:6px; padding-top:4px }
.quai-detail{ display:grid; grid-template-columns:1fr auto; gap:4px 10px; align-items:center; font-size:13px }
.quai-detail label{ margin:0 }
.quai-detail input{ width:80px }
.quai-champ{ display:grid; gap:4px }
.quai-champ label{ margin:0 }
.quai .quai-court{ width:110px }
.quai-journal{ font-size:12px; color:var(--encre-douce); max-height:110px; overflow:auto; border-top:1px dashed var(--filet); padding-top:6px }
.quai-ok{ color:var(--vert); font-weight:600 }
.quai-ko{ color:var(--rouge); font-weight:600 }

/* --- étape 4 : chambre froide, réserves, signature -------------------- */
.quai-alerte{ border:1px solid var(--quai-chaud); border-radius:var(--r); padding:8px 10px; font-size:13px }
.quai-alerte p{ margin:0 0 6px }
.quai-cf{ width:100%; height:auto; background:#2a3238; border-radius:var(--r); display:block }
.quai-res-ligne{ border-top:1px dashed var(--filet); padding:8px 0; display:grid; gap:4px; font-size:13px; color:var(--encre); font-weight:400 }
.quai-res-lib{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0; font-size:13px }
.quai-case{ display:flex; gap:6px; align-items:center }
.quai-case input{ width:auto }
.quai-papier{ background:#f6f1e4; color:#222 }
.quai-papier th{ color:#555 }
.quai-papier th, .quai-papier td{ border-color:#cfc6b4 }
.quai-papier tbody tr:hover{ background:transparent }
.quai-papier .quai-reconst{ color:#666 }
.quai-zone-res{ border:1px solid #bbb; border-radius:4px; min-height:70px; margin-top:10px; padding:6px 10px }
.quai-lib-res{ font-size:12px; color:#555 }
.quai-manuscrit{ font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive; color:#1d3a7a; font-size:15px; line-height:1.6 }
.quai-signatures{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:10px }
.quai-sig{ height:54px; border-bottom:1px solid #999 }
.quai-sig svg{ height:54px; width:auto }
.btn.quai-arme{ background:var(--terre); border-color:var(--terre); color:#fff }
.quai-bilan-bloc h3{ margin:8px 0 }
.quai-bilan{ font-size:13px }
.quai-bilan td{ vertical-align:top }
.quai-note{ font-size:13px; margin-bottom:10px }