/* Style B « Haute visibilité » : marine + jaune sécurité. Clair/sombre automatique. */
:root {
  color-scheme: light dark;
  --bg: #F4F6F9; --card: #FFFFFF; --bd: #D9DEE6; --tx: #0B2A4A; --mu: #5B6B80;
  --ac: #FFD400; --on: #0B2A4A; --navy: #0B2A4A;
  --ok: #1E9E5A; --ko: #D8352A; --hs: #C2570C; --wa: #9A6700;
  --bg-ok: #E3F5EB; --bg-ko: #FCE8E6; --bg-hs: #FDEBDD; --bg-wa: #FFF4D1;
  --r: 12px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1319; --card: #171F29; --bd: #2A3441; --tx: #E8EEF5; --mu: #93A1B3;
    --navy: #0A1A2E;
    --ok: #34C27A; --ko: #FF7468; --hs: #FF9A55; --wa: #F2B53D;
    --bg-ok: #12301F; --bg-ko: #3A1A18; --bg-hs: #3A2412; --bg-wa: #3A3012;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.45 var(--font); background: var(--bg); color: var(--tx); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
a { color: inherit; }
p { margin: 0 0 .8em; }
.mu { color: var(--mu); }
.small { font-size: .85rem; }

.card { background: var(--card); border: 1px solid var(--bd); border-radius: var(--r); padding: 16px; }

button, .btn {
  font: inherit; font-weight: 600; min-height: 44px; padding: 0 18px; border-radius: 10px;
  border: 1px solid var(--bd); background: var(--card); color: var(--tx); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
}
button:hover, .btn:hover { border-color: var(--mu); }
button:disabled { opacity: .5; cursor: default; }
.btn-p { background: var(--ac); border-color: var(--ac); color: var(--on); }
.btn-p:hover { filter: brightness(.95); border-color: var(--ac); }
.btn-d { color: var(--ko); border-color: var(--ko); background: transparent; }
.btn-s { min-height: 34px; padding: 0 12px; font-size: .9rem; }

input, select, textarea {
  font: inherit; width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--bd); background: var(--card); color: var(--tx);
}
textarea { min-height: 88px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--ac); outline-offset: 1px;
}
label { display: block; font-weight: 600; font-size: .9rem; margin: 0 0 4px; }
.champ { margin-bottom: 14px; }

.badge {
  display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 99px;
  font-size: .8rem; font-weight: 600; white-space: nowrap;
}
.b-ok { background: var(--bg-ok); color: var(--ok); }
.b-manque { background: var(--bg-ko); color: var(--ko); }
.b-hs { background: var(--bg-hs); color: var(--hs); }
.b-wa { background: var(--bg-wa); color: var(--wa); }
.b-nv { background: var(--bd); color: var(--mu); }

.msg { padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; font-weight: 500; }
.msg-ok { background: var(--bg-ok); color: var(--ok); }
.msg-ko { background: var(--bg-ko); color: var(--ko); }
.msg-wa { background: var(--bg-wa); color: var(--wa); }