/* Essai public : charte SOCLE (encre, papier, signal), sans dépendance au reste de l'écran. */
:root { --paper: #FFFFFF; --soft: #F5F5F7; --ink: #1D1D1F; --mute: #6E6E73; --hair: #E5E5EA; --ok: #248444; --okt: #EAF7EF;
  --warn: #9D6A17; --warnt: #FEF6E9; --bad: #D63A31; --badt: #FFECEB; --focus: #3D7BFF; }
@media (prefers-color-scheme: dark) { :root { --paper: #07080D; --soft: #11131A; --ink: #F5F5F7; --mute: #A1A6B8; --hair: #262A36;
  --ok: #30B35C; --okt: #162E21; --warn: #F5A524; --warnt: #392C17; --bad: #FF453A; --badt: #3B1A1B; --focus: #19E3C3; color-scheme: dark; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.55 -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 760px; margin: 0 auto; padding: 48px 20px; display: grid; gap: 16px; }
.eyebrow { font: 400 11px/1.2 ui-monospace, Menlo, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); margin: 0; }
h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.05; letter-spacing: -.03em; margin: 0; }
.meta, .limites { color: var(--mute); margin: 0; }
label { font-weight: 600; display: block; margin-bottom: 6px; }
.ligne { display: flex; gap: 8px; flex-wrap: wrap; }
input { flex: 1 1 260px; min-height: 44px; font-size: 16px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 8px; background: var(--paper); color: var(--ink); }
.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 0; background: var(--ink); color: var(--paper); font: 600 15px/1 inherit; text-decoration: none; cursor: pointer; }
.btn:disabled { opacity: .5; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.verdict { display: grid; gap: 4px; padding: 16px; border-radius: 12px; background: var(--warnt); }
.verdict b { font-size: 24px; color: var(--warn); } .verdict.go { background: var(--okt); } .verdict.go b { color: var(--ok); }
.verdict.nogo { background: var(--badt); } .verdict.nogo b { color: var(--bad); }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kpis div { background: var(--soft); border-radius: 10px; padding: 10px; display: grid; }
.kpis strong { font-size: 24px; font-variant-numeric: tabular-nums; } .kpis span { font-size: 12px; color: var(--mute); }
.constats { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.constats li { display: flex; gap: 10px; align-items: baseline; }
.sev { font: 600 11px/1 ui-monospace, Menlo, monospace; padding: 4px 6px; border-radius: 6px; background: var(--soft); color: var(--mute); }
.sev.S1, .sev.S2 { background: var(--badt); color: var(--bad); } .sev.S3 { background: var(--warnt); color: var(--warn); }
@media (max-width: 520px) { .kpis { grid-template-columns: repeat(2, 1fr); } }