:root {
  --bg: #f1f4f7; --surface: #fff; --ink: #1b2430; --muted: #5e6b78; --line: #d8dee4;
  --accent: #2e5aac; --accent-ink: #fff;
  --ok: #1e7b4e; --ok-bg: #e6f3ec; --warn: #8f5b00; --warn-bg: #fdf1dc; --fail: #b3261e; --fail-bg: #fbe9e7;
  --info: #5e6b78; --radius: 6px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #141a21; --surface: #1c242d; --ink: #e6ebf0; --muted: #9aa7b4; --line: #2e3a46;
    --accent: #7ea2e6; --accent-ink: #0e1620;
    --ok: #5cc28f; --ok-bg: #173025; --warn: #e3b25a; --warn-bg: #33291a; --fail: #f08a80; --fail-bg: #3a1e1c; --info: #9aa7b4; }
}
* { box-sizing: border-box; }
html { font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--bg); }
body { margin: 0; }
main { max-width: 900px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
a { color: var(--accent); }
h1 { font-size: 1.75rem; line-height: 1.2; margin: .5rem 0 .75rem; font-weight: 650; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: 2rem 0 .75rem; }
.lead { color: var(--muted); max-width: 68ch; margin-top: 0; }
code { font-family: var(--mono); font-size: .92em; }
.sub { color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }
.error { color: var(--fail); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* En-tête */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; padding: .75rem 1.25rem;
  background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; color: var(--ink); text-decoration: none; }
.top nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin-left: auto; }
.top nav a { color: var(--muted); text-decoration: none; padding: .25rem 0; border-bottom: 2px solid transparent; }
.top nav a:hover, .top nav a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }

/* Formulaires */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; margin: 1rem 0; }
.narrow { max-width: 420px; }
.row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.grow { flex: 1 1 260px; min-width: 0; }
label { display: block; font-weight: 600; font-size: .9rem; margin: .75rem 0 .3rem; }
.row label { margin-top: 0; }
input, textarea { width: 100%; font: inherit; color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: .55rem .7rem; }
textarea { font-family: var(--mono); font-size: .85rem; resize: vertical; }
button { font: inherit; cursor: pointer; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: .55rem 1rem; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.card > button.primary, form > button.primary { margin-top: 1rem; }
.row > button.primary { margin-top: 0; }
button.link { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; }
form.inline { display: inline; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.search { margin-bottom: 1rem; }

/* Attente */
.waiting .address { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1.5rem 0; }
.waiting .address code { font-size: clamp(1.1rem, 3.6vw, 1.7rem); font-weight: 600; background: var(--surface);
  border: 1px dashed var(--accent); border-radius: var(--radius); padding: .6rem .9rem; overflow-wrap: anywhere; user-select: all; }
.status { color: var(--muted); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pulse { width: .6rem; height: .6rem; border-radius: 50%; background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }
.copyline { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem; }
.copyline code { overflow-wrap: anywhere; flex: 1 1 300px; }

/* Verdict : la note en timbre-poste */
.verdict { display: flex; gap: 1.75rem; align-items: flex-start; margin: 1rem 0 1.5rem; flex-wrap: wrap; }
.stamp { --c: var(--muted); flex: 0 0 auto; padding: 7px; transform: rotate(-2deg);
  background: radial-gradient(circle at 7px 7px, transparent 3.6px, var(--c) 4px) -7px -7px / 14px 14px; }
.stamp .face { width: 132px; height: 152px; background: var(--c); color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; outline: 2px solid rgba(255,255,255,.55); outline-offset: -8px; }
.stamp .num { font-size: 3.4rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.stamp .den { font-size: .85rem; opacity: .9; margin-top: .35rem; }
.stamp.good { --c: var(--ok); } .stamp.fair { --c: #3f7d5a; } .stamp.poor { --c: #b7791f; } .stamp.bad { --c: var(--fail); }
@media (prefers-color-scheme: dark) { .stamp .face { color: #10161c; } .stamp.fair { --c: #7cc39c; } .stamp.poor { --c: #e3b25a; } }
.verdict h1 { margin-top: 0; }
.meta { display: grid; grid-template-columns: max-content 1fr; gap: .2rem 1rem; margin: 0 0 .9rem; }
.meta dt { color: var(--muted); }
.meta dd { margin: 0; overflow-wrap: anywhere; }
.badges { list-style: none; padding: 0; margin: 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.badges li { font-size: .85rem; font-weight: 600; padding: .15rem .6rem; border-radius: 999px; }
.b-ok { background: var(--ok-bg); color: var(--ok); } .b-warn { background: var(--warn-bg); color: var(--warn); }
.b-fail { background: var(--fail-bg); color: var(--fail); } .b-skip { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.note { background: var(--warn-bg); color: var(--warn); padding: .6rem .9rem; border-radius: var(--radius); }

/* Sections du rapport */
.sections { border-top: 1px solid var(--line); }
.sec { border-bottom: 1px solid var(--line); }
.sec > summary { list-style: none; display: flex; align-items: center; gap: .75rem; padding: .85rem .25rem; cursor: pointer; }
.sec > summary::-webkit-details-marker { display: none; }
.sec > summary .title { font-weight: 600; flex: 1; }
.sec > summary .state { font-size: .85rem; color: var(--muted); }
.sec > summary .pen { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fail); min-width: 3ch; text-align: right; }
.dot { width: .75rem; height: .75rem; border-radius: 50%; background: var(--info); flex: 0 0 auto; }
.s-ok .dot { background: var(--ok); } .s-warn .dot { background: var(--warn); } .s-fail .dot { background: var(--fail); }
.s-skip .dot { background: transparent; border: 2px solid var(--line); }
.s-warn .pen { color: var(--warn); }
.items { list-style: none; margin: 0 0 1rem; padding: 0 0 0 1.5rem; }
.items li { position: relative; padding: .2rem 0 .2rem 1.1rem; overflow-wrap: anywhere; max-width: 80ch; }
.items li::before { content: ""; position: absolute; left: 0; top: .72rem; width: .45rem; height: .45rem; border-radius: 2px; background: var(--info); }
.items .i-ok::before { background: var(--ok); } .items .i-warn::before { background: var(--warn); } .items .i-fail::before { background: var(--fail); }
.items .i-info { color: var(--muted); }
.items .i-fail { color: var(--fail); }
.tech { margin: 0 0 1rem 1.5rem; }
.tech summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.tech pre { font-family: var(--mono); font-size: .8rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem; overflow-x: auto; }
.actions { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.5rem; }
.again { margin-top: 1.5rem; }
.danger { margin-top: 2.5rem; }

/* Tableaux */
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; background: var(--surface); }
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .85rem; color: var(--muted); font-weight: 600; }
.hops td { font-size: .85rem; }
.mini { display: inline-block; min-width: 3.2rem; text-align: center; font-weight: 700; font-size: .85rem; padding: .1rem .4rem; border-radius: var(--radius); color: #fff; background: var(--muted); font-variant-numeric: tabular-nums; }
.mini.good { background: var(--ok); } .mini.fair { background: #3f7d5a; } .mini.poor { background: #b7791f; } .mini.bad { background: var(--fail); }
.mini.none { background: var(--bg); color: var(--muted); border: 1px solid var(--line); font-weight: 600; }
.pager { display: flex; gap: 1.5rem; justify-content: center; margin: 1.25rem 0; color: var(--muted); }
ul.plain { padding-left: 1.2rem; }
ul.plain li { margin: .3rem 0; max-width: 75ch; }

@media (max-width: 560px) {
  h1 { font-size: 1.45rem; }
  .stamp .face { width: 104px; height: 120px; } .stamp .num { font-size: 2.6rem; }
  .meta { grid-template-columns: 1fr; } .meta dt { margin-top: .4rem; }
  .items { padding-left: .25rem; } .tech { margin-left: .25rem; }
}
.diag { padding-left: 0; }
.note.good { background: var(--ok-bg); color: var(--ok); }
select { font: inherit; color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: .55rem .7rem; }
.notify { margin-top: 1rem; align-items: center; }
label.check { display: flex; gap: .5rem; align-items: center; font-weight: 600; margin: 0; }
label.check input { width: auto; }
.copyline p { margin: 0; flex: 1 1 300px; max-width: 70ch; }
.share { margin-top: 2rem; }
.share form { margin-top: .75rem; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }