/* assets/styles.css — mobile-first + desktop responsive */
:root{
  --bg:#0f1220; --fg:#f7f7fb; --muted:#a9adc3; --accent:#6aa6ff;
  --danger:#ff6a6a; --ok:#42d392; --card:#161a2e; --border:#2a2f4a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.container{margin:0 auto;padding:20px;max-width:min(1200px,95vw)}
.card{background:var(--card);border-radius:16px;padding:16px;box-shadow:0 4px 20px rgba(0,0,0,.25)}

h1{margin:8px 0 12px;font-weight:800;font-size:clamp(22px,3.2vw,40px)}
h2{margin:6px 0 10px;font-weight:700;font-size:clamp(18px,2.4vw,28px)}
h3{margin:4px 0 8px;font-weight:700;font-size:clamp(16px,1.8vw,22px)}

.small{font-size:.9em;color:var(--muted)}
.kbd{background:#222846;border:1px solid var(--border);border-radius:6px;padding:2px 6px;font-size:.9em}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#222846}

/* Layout util */
.row{display:flex;gap:12px;flex-wrap:wrap}
.col{flex:1 1 300px}

@media (min-width: 992px){
  .row{gap:20px}
  .col{flex:1 1 0}
}

/* Inputs & buttons */
.input, select{
  width:100%;padding:12px;border-radius:10px;border:1px solid var(--border);
  background:#0b0f1d;color:var(--fg);outline:none
}
.input:focus, select:focus{border-color:#3a70ff;box-shadow:0 0 0 2px rgba(106,166,255,.25)}

.btn{
  display:inline-block;border:0;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer;
  background:#2a2f4a;color:var(--fg);transition:transform .06s ease,filter .2s ease
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6;pointer-events:none}
.btn-primary{background:var(--accent);color:#081223}
.btn-danger{background:var(--danger);color:#1e1010}
.btn-ok{background:var(--ok);color:#0d1b14}

@media (min-width: 992px){
  .btn{padding:14px 18px}
}

/* Tables (admin) */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.table th{color:var(--muted);font-weight:700}
@media (min-width: 992px){
  .table th,.table td{padding:12px}
}

/* Video / scanner */
video{
  width:100%;height:auto;border-radius:16px;background:#000;display:block;
  aspect-ratio:16/9;object-fit:contain; /* sur desktop, évite l'image trop haute */
}
@media (min-width: 992px){
  video{max-height:70vh}
}

/* Toast */
.toast{
  position:fixed;bottom:16px;left:50%;transform:translateX(-50%);
  background:#1c2138;padding:12px 16px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.35);
  display:none;z-index:9999
}
.toast.show{display:block}