/* Cowork Cépière — charte (dérivée de Grid 442) */
:root {
  --bg: #FFFFFF; --bg-soft: #F4F4F3; --surface: #FFFFFF; --ink: #0A0A0A; --muted: #575755; --line: #E0E0DD;
  --accent: #E10600; --accent-ink: #FFFFFF; --accent-text: #B00500;
  --ok: #1E7A43; --ok-bg: #E3F2E8; --warn: #8A5200; --warn-bg: #FBEFD9; --bad: #B00500; --bad-bg: #FBE4E2;
  --f: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  color-scheme: light;
}
* { box-sizing: border-box }
html, body { margin: 0 }
body { background: var(--bg); color: var(--ink); font-family: var(--f); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased }
a { color: var(--ink) }
img { max-width: 100% }
button, input, select, textarea { font: inherit; color: inherit }
[hidden] { display: none !important }
.num { font-variant-numeric: tabular-nums }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)) }

/* logo */
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink) }
.logo svg { flex: none; display: block }
.logo .wm { display: inline-flex; flex-direction: column; justify-content: space-between; line-height: .74 }
.logo .wm b { font-weight: 800; font-stretch: 112%; letter-spacing: -.035em }
.logo .wm span { display: flex; justify-content: space-between; font-weight: 300 }
.logo .wm span i { font-style: normal }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; white-space: nowrap }
.btn.primary { background: var(--ink); color: var(--bg) }
.btn.red { background: var(--accent); border-color: var(--accent); color: var(--accent-ink) }
.btn.ghost { border-color: var(--line) }
.btn.sm { min-height: 34px; padding: 4px 12px; font-size: 13px }
.btn:disabled { opacity: .45; cursor: not-allowed }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important } }