/* Wesh — Pavé, "fiche réflexe" direction. Night (asphalt) by default, Day (chalk) via prefers-color-scheme.
   Tokens: docs/plan/design/system/tokens.json. System fonts only, no third-party request. */
:root {
  --bg: #0a0a0a;
  --surface: #161616;
  --ink: #f5f5f0;
  --muted: #a3a3a3;
  --line: #3a3a3a;
  --line-strong: #8a8a85;
  --public: #e8ff3a;
  --on-public: #0a0a0a;
  --private: #f5f5f0;
  --on-private: #0a0a0a;
  --internet: #7fb2ff;
  --on-internet: #0a0a0a;
  --focus: #e8ff3a;
  --text: system-ui, -apple-system, "SF Pro Text", Roboto, "Segoe UI", sans-serif;
  /* Condensed 900 wordmark: SF Pro Condensed through system-ui on Apple, Roboto Condensed on Android, Bahnschrift on Windows. */
  --display: "sans-serif-condensed", "Bahnschrift", system-ui, "Helvetica Neue", "Arial Narrow", sans-serif;
  --mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f5f5f0;
    --surface: #ffffff;
    --ink: #0a0a0a;
    --muted: #55554f;
    --line: #cfcfc6;
    --line-strong: #6b6b64;
    --private: #0a0a0a;
    --on-private: #f5f5f0;
    --internet: #1d4ed8;
    --on-internet: #ffffff;
    --focus: #0a0a0a;
    color-scheme: light;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--text);
  overflow-wrap: break-word;
}
/* One left edge for everything; text keeps a readable measure. */
.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1rem; }
main > *, .site-footer .wrap > * { max-width: 44rem; }
a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
main:focus { outline: none; }

.skip {
  position: absolute; left: 1rem; top: -10rem; z-index: 10;
  background: var(--private); color: var(--on-private);
  padding: .75rem 1rem; border-radius: 12px; font-weight: 700;
}
.skip:focus { top: 1rem; }

/* Header */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .25rem 1rem; padding-block: .5rem;
}
.brand, .wordmark, h1 {
  font-family: var(--display); font-weight: 900; font-stretch: 75%;
}
.brand, .wordmark { text-transform: uppercase; letter-spacing: -.03em; }
.brand {
  display: inline-flex; align-items: center; min-height: 48px;
  font-size: 2rem; line-height: 1; text-decoration: none;
}
.site-header ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.site-header li + li { margin-top: 0; }
.site-header nav a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 .5rem;
  font-size: .9375rem; font-weight: 600; text-decoration: none;
}
.site-header nav a:hover, .site-header nav a[aria-current="page"] { text-decoration: underline; }

/* Text */
main.wrap { padding-block: 3rem 3.5rem; }
h1, h2, h3 { line-height: 1.2; margin: 2.75rem 0 .75rem; }
h1 { font-size: clamp(2.5rem, 8vw, 4rem); line-height: .95; letter-spacing: -.01em; margin: 0 0 1.25rem; }
h1.statement { font-size: clamp(2.75rem, 9vw, 5.5rem); max-width: 15ch; margin-bottom: 1.5rem; }
h2 { font-size: 1.5rem; font-weight: 800; }
h3 { font-size: 1.125rem; font-weight: 700; margin-top: 1.75rem; }
p, ul, ol, dl { margin: 0 0 1rem; }
ul, ol { padding-left: 1.25rem; }
li + li { margin-top: .375rem; }
.meta, .muted { color: var(--muted); }
.lead { font-size: 1.25rem; line-height: 1.45; }
.wordmark { font-size: clamp(5.5rem, 30vw, 12rem); line-height: .82; margin: 0 0 1rem; }

/* Steps: a real sequence (before, during, keep it open), framed like a printed safety leaflet */
.steps { list-style: none; padding: 0; margin: 0 0 1rem; border: 4px solid var(--ink); border-radius: 12px; counter-reset: step; }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1rem; padding: 1.25rem; margin: 0; }
.steps > li + li { border-top: 2px solid var(--ink); }
.steps > li::before { content: counter(step); font-family: var(--display); font-weight: 900; font-stretch: 75%; font-size: 3.5rem; line-height: .8; }
.steps h3 { margin: 0 0 .25rem; font-size: 1.25rem; }
.steps p { margin: 0; }

/* Modes: tag column + text, the three ways a message travels */
.modes { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.modes > li { display: grid; gap: .25rem 1.25rem; grid-template-columns: minmax(0, 1fr); padding: 1.25rem 0; border-top: 1px solid var(--line); margin: 0; }
.modes > li:last-child { border-bottom: 1px solid var(--line); }
.modes h3 { margin: 0 0 .375rem; }
.modes p { margin: 0; }
@media (min-width: 40rem) { .modes > li { grid-template-columns: 8.5rem minmax(0, 1fr); } }

/* Tags: public is the only yellow, always with a word */
.tag {
  display: inline-block; align-self: start; justify-self: start; margin: 0 0 .5rem; padding: .125rem .5rem; border-radius: 4px;
  font-size: .875rem; font-weight: 800; letter-spacing: .02em;
}
.tag-public { background: var(--public); color: var(--on-public); }
.tag-private { background: var(--private); color: var(--on-private); }
.tag-internet { background: var(--internet); color: var(--on-internet); }

/* Public band and limits */
.band-public { background: var(--public); color: var(--on-public); border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.band-public a { color: var(--on-public); }
.band-public :focus-visible { outline-color: var(--on-public); }
.band-public p:last-child { margin-bottom: 0; }
.limits { list-style: none; padding: 0; }
.limits > li { border-left: 4px solid var(--line-strong); padding-left: .875rem; margin-top: 1.25rem; }
.limits strong { display: block; font-size: 1.125rem; }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0; }
.btn {
  display: inline-flex; align-items: center;
  min-height: 56px; padding: .75rem 1.25rem; border-radius: 12px;
  background: var(--private); color: var(--on-private); font-weight: 700; text-decoration: none;
}
.btn:hover { text-decoration: underline; }

/* Technical */
code { font-family: var(--mono); font-size: .9em; }
dl.facts dt { font-weight: 700; margin-top: .75rem; }
dl.facts dd { margin: .25rem 0 0; }

/* FAQ */
.faq h3 { margin-top: 2rem; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding-block: 1.5rem 2.5rem; font-size: .9375rem; }
.site-footer ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1rem; }
.site-footer li + li { margin-top: 0; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 48px; }

@media print {
  .site-header nav, .skip, .site-footer nav { display: none; }
  body { background: #fff; color: #000; }
  .steps, .steps > li + li { border-color: #000; }
}