/* Physis OMS — feuille de style partagée par les pages statiques de web/.
   Palette et typographie communes à index.html, walkthrough.html, desk.html.
   V2 : plus clair, plus vif — moins institutionnel/sombre que la V1.
   Toujours clair, volontairement : pas d'adaptation automatique au mode
   sombre système (prefers-color-scheme) — le thème sombre défini plus bas
   reste prêt à être activé plus tard via un bouton, mais rien ne le
   déclenche pour l'instant. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --paper: #f5f8fd;
  --surface: #ffffff;
  --surface-2: #eaf0fb;
  --border: #dde6f5;
  --ink: #1a2233;
  --ink-secondary: #4e5a73;
  --muted: #8592ab;

  --accent: #2e6ff2;
  --accent-strong: #1a4fd1;
  --accent-soft: #e5edff;

  --accent2: #ff6b4a;
  --accent2-soft: #ffe7e0;

  --good: #16a34a;
  --good-soft: #dcfce7;
  --warning: #d97706;
  --warning-soft: #fef3c7;
  --critical: #dc2626;
  --critical-soft: #fee2e2;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Thème sombre : opt-in uniquement (data-theme="dark"), jamais déclenché
   par le système — voir note en tête de fichier. */
:root[data-theme="dark"] {
  --paper: #10182b; --surface: #182140; --surface-2: #1e2a4d; --border: #2b3a60;
  --ink: #eef2fb; --ink-secondary: #b9c4dc; --muted: #8391b0;
  --accent: #7c9bff; --accent-strong: #aabeff; --accent-soft: #1f2c52;
  --accent2: #ff9578; --accent2-soft: #3a2618;
  --good: #4ade80; --good-soft: #113321;
  --warning: #fbbf24; --warning-soft: #3a2a09;
  --critical: #f87171; --critical-soft: #3a1414;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

::selection { background: var(--accent-soft); }
a { color: var(--accent); }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

img { max-width: 100%; }

/* --- site nav (shared header across pages) --- */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-nav-brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.site-nav-links {
  display: flex;
  gap: 22px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
}
.site-nav-links a {
  color: var(--ink-secondary);
  text-decoration: none;
}
.site-nav-links a:hover,
.site-nav-links a.current {
  color: var(--accent);
}

/* --- shared typography --- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent2);
  margin: 0 0 14px;
}
h1 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--ink);
  margin: 0 0 18px;
}
h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 6px;
  color: var(--ink);
}

/* --- shared components --- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  font-weight: 500;
  padding: 3px 9px 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex: none;
}
.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.pill-built, .pill-good { background: var(--good-soft); color: var(--good); }
.pill-partial, .pill-warning { background: var(--warning-soft); color: var(--warning); }
.pill-todo, .pill-muted, .pill-pending { background: var(--surface-2); color: var(--muted); }
.pill-critical { background: var(--critical-soft); color: var(--critical); }

.btn {
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink);
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.btn-ghost { background: transparent; }

.callout {
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent2);
  background: var(--surface);
  border-radius: 12px;
  padding: 18px 20px;
  font-size: 14.5px;
  color: var(--ink-secondary);
}
.callout strong { color: var(--ink); font-weight: 700; }
.callout-label {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent2);
  display: block;
  margin-bottom: 8px;
}

code.mono-inline {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
}

.site-footer {
  margin-top: 72px;
  padding: 24px 28px 40px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12.5px;
  font-family: var(--font-mono);
  text-align: center;
}

@media (max-width: 520px) {
  .site-nav { padding: 12px 16px; }
  .site-nav-links { gap: 14px; }
}