/* Site de Visuels nomades (aide, confidentialité) : direction artistique « instrument nocturne ». Aucune ressource
   externe : la police est servie à côté des pages. */
@font-face {
  font-family: 'Archivo';
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('archivo-latin.woff2') format('woff2');
}
:root {
  --bg: #05060a; --panel: #0e121c; --line: #262c3d; --text: #eef1f7; --muted: #a3abbe;
  --cyan: #19e3ff; --magenta: #ff2bd6; --orange: #ff8a1f;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 17px/1.6 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 720px; margin: 0 auto; padding: 56px 16px 96px; }
header { display: flex; align-items: center; gap: 16px; margin-bottom: 40px; }
header img { width: 56px; height: 56px; border-radius: 13px; }
header a { color: var(--text); text-decoration: none; font-size: 26px; font-weight: 300; font-stretch: 112%; letter-spacing: 0.04em; }
h1 { margin: 0 0 12px; font-size: clamp(34px, 7vw, 48px); line-height: 1.1; font-weight: 300; font-stretch: 112%; }
h2 {
  margin: 44px 0 10px; font-size: 14px; font-weight: 800; font-stretch: 75%; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
p, li { color: var(--text); }
.lead { font-size: 19px; color: var(--muted); }
ul { padding-left: 20px; }
li { margin: 6px 0; }
b { font-weight: 650; }
a { color: var(--cyan); }
a:hover { color: #8ff1ff; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 4px 20px; margin: 12px 0; }
.warn { color: var(--orange); }
nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }
nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text); text-decoration: none;
}
nav a:hover { border-color: var(--cyan); color: var(--cyan); }
footer { margin-top: 56px; font-size: 14px; color: var(--muted); }
