@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;800;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --paper:#F2F4F7;
  --band:#E5EBF3;
  --ink:#16202E;
  --muted:#5C6B80;
  --rule:#C3CEDD;
  --red:#B3261E;
  --green:#1F6F4A;
  --amber:#8A5A00;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo',system-ui,sans-serif;
  line-height:1.45;
  padding:28px 20px 64px;
  /* trame de papier listing */
  background-image:repeating-linear-gradient(to bottom,transparent 0 27px,rgba(22,32,46,.022) 27px 54px);
}

.sheet{max-width:940px;margin:0 auto}

/* ---------------------------------------------------------- en-tete */
.masthead{
  display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  border-bottom:3px solid var(--ink);padding-bottom:12px;position:relative;
}
.masthead::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--ink)}
.wordmark{font-weight:900;font-size:clamp(1.5rem,4vw,2.1rem);letter-spacing:-.03em;text-transform:uppercase;line-height:1}
.wordmark span{color:var(--muted)}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-top:7px;
}

/* ---------------------------------------------------------- tampon (signature) */
.stamp{
  font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;
  border:3px double currentColor;border-radius:3px;
  padding:7px 14px 5px;text-align:center;transform:rotate(-5deg);
  flex-shrink:0;opacity:.92;
}
.stamp .verdict{font-size:1.05rem;letter-spacing:.04em;line-height:1;display:block}
.stamp .sub{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:.6rem;letter-spacing:.1em;display:block;margin-top:3px;opacity:.85}
.stamp.ok{color:var(--green)}
.stamp.late{color:var(--red)}
.stamp.unknown{color:var(--muted)}
.stamp.pressed{animation:press .5s cubic-bezier(.2,1.5,.4,1) both}
@keyframes press{
  0%{transform:rotate(-14deg) scale(1.5);opacity:0}
  60%{transform:rotate(-3deg) scale(.96);opacity:.95}
  100%{transform:rotate(-5deg) scale(1);opacity:.92}
}

/* ---------------------------------------------------------- sections */
.section{margin-top:34px}
.section-title{
  font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:12px;margin-bottom:10px;
}
.section-title::after{content:"";flex:1;height:1px;background:var(--rule)}

/* ---------------------------------------------------------- lignes de bulletin */
.row{
  display:flex;align-items:baseline;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--rule);
}
.row .label{font-size:.86rem;font-weight:500}
.row .leader{flex:1;border-bottom:1px dotted var(--rule);transform:translateY(-3px);min-width:16px}
.row .value{font-family:'IBM Plex Mono',monospace;font-size:.86rem;font-weight:500;text-align:right;white-space:nowrap}
.row .value.neg{color:var(--red)}
.row .value.pos{color:var(--green)}
.row .value.dim{color:var(--muted)}
.row.total{border-bottom:3px double var(--ink);border-top:1px solid var(--ink);margin-top:4px}
.row.total .label{font-weight:800;text-transform:uppercase;font-size:.8rem;letter-spacing:.04em}
.row.total .value{font-weight:600}

/* impression ligne par ligne */
.print-in{opacity:0;transform:translateY(-5px);animation:printline .34s ease-out forwards}
@keyframes printline{to{opacity:1;transform:none}}

/* ---------------------------------------------------------- actions */
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
button.act{
  font-family:'Archivo',sans-serif;font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.06em;
  background:var(--paper);color:var(--ink);border:2px solid var(--ink);
  padding:10px 16px;cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);transition:transform .08s,box-shadow .08s;
}
button.act:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}
button.act:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
button.act:disabled{opacity:.4;cursor:not-allowed;box-shadow:3px 3px 0 var(--rule);border-color:var(--rule)}
button.act.primary{background:var(--ink);color:var(--paper)}
button.act.ghost{border-width:1px;box-shadow:none;font-weight:500}
button.act:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

/* ---------------------------------------------------------- trafic */
.chart{display:flex;align-items:flex-end;gap:6px;height:112px;margin:16px 0 6px}
.bar-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;height:100%}
.bar{
  width:100%;background:var(--ink);min-height:2px;
  transform-origin:bottom;animation:grow .5s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.bar-col .n{font-family:'IBM Plex Mono',monospace;font-size:.7rem;font-weight:600}
.bar-col .d{font-family:'IBM Plex Mono',monospace;font-size:.6rem;color:var(--muted);letter-spacing:.02em}

/* ---------------------------------------------------------- journal */
.log{border-top:1px solid var(--ink);font-family:'IBM Plex Mono',monospace;font-size:.76rem}
.log-row{display:grid;grid-template-columns:132px 96px 1fr auto;gap:12px;padding:6px 8px;align-items:baseline}
.log-row:nth-child(odd){background:var(--band)}
.log-row .t{color:var(--muted)}
.log-row .a{font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:.7rem}
.log-row .d{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log-row .s{font-weight:600;font-size:.7rem;text-transform:uppercase}
.log-row .s.ok{color:var(--green)}
.log-row .s.echec{color:var(--red)}
.empty{padding:22px 8px;color:var(--muted);font-family:'IBM Plex Mono',monospace;font-size:.78rem}

/* ---------------------------------------------------------- sortie console */
.output{
  font-family:'IBM Plex Mono',monospace;font-size:.74rem;white-space:pre-wrap;
  background:var(--ink);color:#D8E2EF;padding:14px 16px;margin-top:14px;
  max-height:220px;overflow:auto;
}
.output:empty{display:none}

/* ---------------------------------------------------------- connexion */
.login-wrap{min-height:78vh;display:flex;align-items:center;justify-content:center}
.login{max-width:380px;width:100%;border:2px solid var(--ink);background:var(--paper);padding:26px 24px 24px;box-shadow:7px 7px 0 var(--ink)}
.login h1{font-size:1.35rem;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1.1}
.login .eyebrow{margin:6px 0 20px}
input[type=password]{
  width:100%;font-family:'IBM Plex Mono',monospace;font-size:.9rem;
  padding:11px 12px;border:2px solid var(--ink);background:#fff;color:var(--ink);
}
input[type=password]:focus{outline:3px solid var(--amber);outline-offset:1px}
label{display:block;font-family:'IBM Plex Mono',monospace;font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.field{margin-bottom:14px}
.msg{font-family:'IBM Plex Mono',monospace;font-size:.74rem;margin-top:12px;padding:9px 11px;border-left:3px solid var(--red);background:var(--band);color:var(--red)}
.msg.good{border-color:var(--green);color:var(--green)}
.msg:empty{display:none;padding:0}

/* ---------------------------------------------------------- pied */
.foot{margin-top:40px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace;font-size:.66rem;color:var(--muted);
  border-top:1px solid var(--rule);padding-top:12px;letter-spacing:.04em}

/* ---------------------------------------------------------- responsive */
@media(max-width:620px){
  body{padding:20px 14px 48px}
  .masthead{flex-direction:column;gap:14px}
  .stamp{align-self:flex-start}
  .log-row{grid-template-columns:1fr auto;gap:4px 10px}
  .log-row .d{grid-column:1/-1;white-space:normal}
  .bar-col .n{font-size:.6rem}
  .bar-col .d{font-size:.52rem}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .print-in{opacity:1;transform:none}
  .bar{transform:none}
}