/* Classic SNCF look: cream paper, black ink, orange accents */
:root{
  /* Palette */
  --paper-1: #fffdf7;
  --paper-2: #f8f3ea;
  --ink: #111111;
  --muted: #3c3c3c;
  --brand: #ff7900;      /* SNCF orange */
  --ui: #e8e1d6;         /* light UI chrome */
  --ui-border: #c9c0b1;  /* subtle chrome border */
  --border: #333333;

  /* Typography + radius */
  --mono: "Courier New", Courier, "Liberation Mono", ui-monospace, monospace;
  --round: 14px;

  /* Shadow */
  --shadow: 0 8px 24px rgba(0,0,0,0.18);
}

/* Page */
*{ box-sizing:border-box }
html, body{
  margin:0; padding:0;
  background: linear-gradient(180deg, #f2eee6, #ece6da 40%, #e7e0d3);
  color: var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Header */
.site-header{ text-align:center; padding:18px 12px 6px }
.site-header__title{
  margin:0; letter-spacing:.02em;
  font-size: clamp(18px, 2.6vw, 26px);
  color: var(--ink);
}
.site-header__banner{
  margin:.35rem 0 0;
  font-weight:700;
  color: var(--brand);
  font-size: clamp(14px, 2.2vw, 18px);
}

/* App wrapper */
.app{ max-width:1200px; margin:0 auto; padding: 12px }

/* Controls (light, unobtrusive) */
.controls{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center;
  background: var(--ui);
  border:1px solid var(--ui-border);
  border-radius: var(--round);
  padding:10px;
  box-shadow: var(--shadow);
}
.toggle{ display:flex; align-items:center; gap:.5rem; color:var(--muted); font-size:14px }

.btn{
  appearance:none; cursor:pointer; font-weight:700;
  border-radius:10px; padding:10px 16px;
  border:1px solid #999; background:#555; color:#fff;
}
.btn:hover{ filter:brightness(1.05) }
.btn:active{ transform: translateY(1px) }

.btn--primary{
  background: var(--brand); color:#111; border-color: #d46a00;
}

/* Status line */
.message{
  min-height:1.25rem; text-align:center; margin:10px 0;
  font-family: var(--mono);
}
.message--ok{ color:#197a2c }
.message--warn{ color:#9a6b00 }
.message--err{ color:#a11212 }

/* Grid for tickets */
.ticket-grid{
  display:grid; gap:20px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 520px));
  justify-content:center; margin-top:10px;
}

/* THE TICKET — classic print */
.ticket{
  position:relative;
  color: var(--ink);
  font-family: var(--mono);
  text-transform: uppercase;

  /* Cream paper with subtle stripes */
  background:
    repeating-linear-gradient(45deg, var(--paper-1), var(--paper-1) 5px, var(--paper-2) 5px, var(--paper-2) 10px);
  border: 2px solid var(--border);
  border-radius: 10px;

  /* Small perforation shadow */
  box-shadow: var(--shadow);
  padding:20px;
}

/* Header strip */
.ticket__header{
  text-align:center; font-weight:800; letter-spacing:.05em;
  border-bottom: 1px solid #000;
  padding-bottom:6px; margin-bottom:10px; color: var(--ink);
}

/* Validity row */
.ticket__use{
  display:flex; gap:10px; justify-content:space-between; flex-wrap:wrap;
  font-size: 12px; color:#111;
  margin-bottom:8px;
}
.ticket__use strong{ color:#000 }

/* Info row (DEPART/ARRIVEE/CLASSE) */
.ticket__row{
  display:flex; gap:12px; justify-content:space-between; flex-wrap:wrap;
  border: 1px solid #333; border-radius:8px;
  padding:10px; margin-bottom:10px;
  background: rgba(0,0,0,0.03);
}
.ticket__cell{ min-width: 0 }
.ticket__cell strong{
  display:block; font-size:12px; color:#000; letter-spacing:.08em;
}
.ticket__cell span{ display:block; margin-top:4px; color:#111; word-break:break-word }

/* Plain lines (JOUR…) */
.ticket__line{
  margin-bottom:8px; font-size:13px; color:#111;
}
.ticket__line label strong{ margin-right:6px; color:#000 }

/* Inputs styled like typewritten form fields */
.input{
  width: 260px; max-width:100%;
  font-family: var(--mono);
  background: #fff; color:#111;
  border:1px solid #000;
  border-radius: 4px; padding:6px 8px;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.06);
}
.input::placeholder{ color:#666 }

/* Small hint text */
.ticket__hint{ font-size:12px; color:#444; margin-top:4px }

/* Orange verification code, bottom-right, bold */
.ticket__code{
  position:absolute; right:12px; bottom:10px; text-align:right;
  font-weight:900; letter-spacing:.08em;
  color: var(--brand);
}

/* Separator line */
hr.sep{
  border:0; border-top:1px dashed #000; margin: 12px 0;
}

/* Footer */
.site-footer{
  text-align:center; color:#4a4a4a; padding:20px 0 26px; font-size:12px;
}

/* Print preserves the classic look */
@media print{
  body{ background:#fff; color:#000 }
  .controls, .site-header__banner, .site-footer{ display:none !important }
  .ticket{
    color:#000; background:#fff; border-color:#000; box-shadow:none;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .ticket__row{ border-color:#000 }
  .ticket__header{ border-color:#000 }
  .ticket__code{ color:#000 } /* ensure legibility on B/W printers */
}