/* Sperig design system — v0.5 (2026-11-02)
   Sobre, clair, base chaude Flexoki (papier → noir), un orange signal. Signature : le node (petit carré) et des lignes de 1 px.
   Usage : <link rel="stylesheet" href="https://sperig.fr/ds/sperig.css">  (+ Geist et Geist Mono via Google Fonts)
   Diagrammes génératifs : <script src="https://sperig.fr/ds/sperig.js"></script> puis data-diagram="graine" */

:root {
  color-scheme: light;
  /* Base Flexoki (kepano, MIT — https://stephango.com/flexoki) : monochrome chaud, du papier au noir */
  --paper: #fffcf0; --base-50: #f2f0e5; --base-100: #e6e4d9; --base-150: #dad8ce; --base-200: #cecdc3; --base-300: #b7b5ac;
  --base-400: #9f9d96; --base-500: #878580; --base-600: #6f6e69; --base-700: #575653; --base-800: #403e3c; --base-850: #343331;
  --base-900: #282726; --base-950: #1c1b1a; --black: #100f0f;
  /* Huit rôles (thème clair) : 2 fonds, 3 interfaces, 3 textes */
  --bg: #fcfbf7;               /* fond de page : papier Flexoki atténué (moins jaune que #fffcf0) */
  --bg-2: #f4f2ec;             /* surfaces : cartes, code, onglets (base-50 atténué) */
  --ui: var(--base-100);       /* bordures */
  --ui-2: var(--base-150);     /* bordures survolées */
  --ui-3: var(--base-200);     /* bordures actives, contours de focus doux */
  --tx: var(--black);          /* texte */
  --tx-2: var(--base-700);     /* texte secondaire, 6,5:1 sur papier */
  --tx-3: var(--base-500);     /* texte effacé : placeholders, index décoratifs (3,6:1, jamais pour une information) */
  /* Alias historiques (v0.1–v0.3) */
  --background: var(--bg); --foreground: var(--tx); --card: var(--bg); --paper-2: var(--base-100);
  --muted: var(--bg-2); --muted-foreground: var(--tx-2); --border: var(--ui); --input: var(--ui); --ring: var(--base-300);
  --primary: var(--black); --primary-hover: var(--base-900); --primary-foreground: var(--bg);
  /* Accents Flexoki : jamais obtenus par opacité, toujours pris dans la gamme */
  --signal: #da702c;           /* orange-400 : nodes, repères, traits. Jamais pour du texte (3,2:1). */
  --brand: #bc5215;            /* orange-600 : texte et boutons de marque, 4,7:1 sur papier */
  --brand-foreground: var(--bg);
  --live: #879a39;             /* green-400 : node « en ligne » uniquement */
  --success: #536907;  --success-soft: #edeecf;   /* green-700 sur green-50, 5,2:1 */
  --warning: #664d01;  --warning-soft: #faeec6;   /* yellow-800 sur yellow-50 */
  --destructive: #af3029; --destructive-soft: #ffe1d5; /* red-600 sur red-50, 5,2:1 */
  --radius: 0px;               /* surfaces : carrées */
  --radius-control: 4px;       /* boutons, champs, badges */
  --node: 7px;
  --shadow-sm: none;
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

/* ---- base ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.container { max-width: 960px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 40px 64px; display: grid; gap: 40px; }
.container-narrow { max-width: 720px; }
h1 { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; margin: 0; text-wrap: balance; }
h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; margin: 0; }
h3 { font-size: 15px; font-weight: 600; line-height: 1.3; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
.link { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ring); }
.link:hover { text-decoration-color: currentColor; }
.muted { color: var(--muted-foreground); }
.small { font-size: 13px; }
.tabular { font-variant-numeric: tabular-nums; }
code, .mono { font-family: var(--font-mono); font-size: 0.9em; }
code { background: var(--bg-2); padding: 1px 5px; border-radius: var(--radius-control); }
pre { margin: 0; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--border); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; overflow-x: auto; }
pre code { background: none; padding: 0; font-size: inherit; }
kbd { font-family: var(--font-mono); font-size: 12px; padding: 1px 6px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: var(--radius-control); background: var(--background); }
hr, .separator { height: 1px; background: var(--border); border: 0; margin: 0; }
@media (min-width: 900px) { h1 { font-size: 40px; } }

/* ---- micro-libellés mono (interface système) ---- */
.label-mono { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--muted-foreground); text-transform: uppercase; }
.label-mono b { font-weight: 500; color: var(--foreground); }

/* ---- node et lignes : la signature ---- */
.node { display: inline-block; width: var(--node); height: var(--node); background: var(--foreground); vertical-align: middle; flex: none; }
.node-signal { background: var(--signal); }
.node-live { background: var(--live); }
.node-empty { background: transparent; border: 1px solid var(--foreground); }
.node-muted { background: var(--border); }
.line { display: flex; align-items: center; gap: 10px; }
.line::before, .line::after { content: ""; height: 1px; background: var(--border); flex: 1; }
.line-end::before { display: none; }
.line-start::after { display: none; }
.stem { width: 1px; height: 40px; background: var(--border); margin: 0 auto; }
.motif { display: grid; justify-items: center; gap: 0; }

/* ---- navigation et pied ---- */
.nav { border-bottom: 1px solid var(--border); background: var(--background); }
.nav-inner { max-width: 960px; margin: 0 auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)); height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.01em; }
.brand .node { background: var(--signal); }
.nav-links { display: flex; gap: 4px; }
.nav-links a { display: inline-flex; align-items: center; height: 32px; padding: 0 10px; border-radius: var(--radius-control); color: var(--muted-foreground); font-size: 13px; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--foreground); background: var(--bg-2); }
.footer { border-top: 1px solid var(--border); }
.footer-inner { max-width: 960px; margin: 0 auto; padding: 20px max(16px, env(safe-area-inset-left, 0px)); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted-foreground); }

/* ---- mise en page ---- */
.page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.page-header p { margin-top: 8px; color: var(--muted-foreground); font-size: 15px; max-width: 48ch; }
.section { display: grid; gap: 16px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.stack { display: grid; gap: 8px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---- entrées : les lignes font la mise en page ---- */
.entries { display: grid; }
.entry { display: grid; grid-template-columns: 40px 1fr auto; column-gap: 16px; row-gap: 6px; padding: 20px 0 22px; border-top: 1px solid var(--border); color: inherit; align-items: start; }
.entry:last-child { border-bottom: 1px solid var(--border); }
.entry-index { font-family: var(--font-mono); font-size: 12px; color: var(--muted-foreground); padding-top: 3px; }
.entry-title { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.entry-desc { color: var(--muted-foreground); grid-column: 2; max-width: 56ch; }
.entry-meta { grid-column: 2; margin-top: 6px; }
.entry-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted-foreground); white-space: nowrap; padding-top: 4px; }
.entry-side { grid-column: 3; grid-row: 1 / span 3; display: grid; gap: 12px; justify-items: end; align-content: start; }
.entry-arrow { width: 16px; height: 16px; color: var(--muted-foreground); transition: transform .15s, color .15s; }
a.entry:hover .entry-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a.entry:hover .entry-arrow { color: var(--foreground); transform: translate(2px, -2px); }
.diagram { width: 128px; height: 56px; display: block; color: var(--foreground); }
.diagram line { stroke: var(--border); stroke-width: 1; }
.diagram rect { fill: currentColor; }
.diagram rect.signal { fill: var(--signal); }
@media (max-width: 600px) { .entry { grid-template-columns: 32px 1fr; } .entry-side { grid-column: 2; grid-row: auto; justify-items: start; grid-auto-flow: column; align-items: center; } }

/* ---- cartes (rares) et chiffres ---- */
.card { background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; }
.card-featured { background: var(--paper-2); border-color: transparent; }
.card-header { padding: 20px 20px 0; display: grid; gap: 4px; }
.card-title { font-size: 15px; font-weight: 600; }
.card-description { font-size: 13px; color: var(--muted-foreground); }
.card-content { padding: 16px 20px 20px; }
.stat-label { font-size: 13px; color: var(--muted-foreground); }
.stat-value { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ---- boutons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 36px; padding: 0 16px; border-radius: var(--radius-control); border: 1px solid transparent; font: 500 14px/1 var(--font-sans); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color .15s, border-color .15s; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-brand { background: var(--brand); color: var(--brand-foreground); }
.btn-brand:hover { filter: brightness(0.92); }
.btn-outline { background: var(--background); color: var(--foreground); border-color: var(--ui-3); }
.btn-outline:hover { border-color: var(--foreground); }
.btn-outline:hover { background: var(--bg-2); }
.btn-ghost { background: transparent; color: var(--foreground); }
.btn-ghost:hover { background: var(--bg-2); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn svg { width: 16px; height: 16px; }
.btn .node { width: 6px; height: 6px; background: currentColor; }

/* ---- badges et statuts ---- */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--radius-control); border: 1px solid var(--border); font-size: 12px; font-weight: 500; color: var(--foreground); white-space: nowrap; }
.badge-secondary { background: var(--bg-2); border-color: transparent; }
.badge-success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.badge-warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.badge-destructive { background: var(--destructive-soft); color: var(--destructive); border-color: transparent; }
.status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted-foreground); }
.status .node { width: 6px; height: 6px; }

/* ---- formulaires ---- */
.label { font-size: 13px; font-weight: 500; }
.input, .select, .textarea { width: 100%; padding: 0 12px; border: 1px solid var(--input); border-radius: var(--radius-control); background: var(--background); color: var(--foreground); font: 14px var(--font-sans); }
.input, .select { height: 36px; }
.textarea { padding: 8px 12px; min-height: 90px; resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--tx-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ui-2); }
.input:active, .select:active, .textarea:active { border-color: var(--ui-3); }
.checkbox, .radio { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.hint { font-size: 13px; color: var(--muted-foreground); }
.btn:focus-visible, .input:focus-visible, .select:focus-visible, .textarea:focus-visible, .checkbox:focus-visible, .radio:focus-visible, .tabs button:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--foreground); outline-offset: 2px; }

/* ---- table ---- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); }
.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th { text-align: left; font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted-foreground); padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--bg-2); }
.table td { padding: 12px; border-bottom: 1px solid var(--border); }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; }

/* ---- onglets, progression ---- */
.tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-2); border-radius: var(--radius-control); flex-wrap: wrap; }
.tabs button { height: 28px; padding: 0 12px; border: 0; border-radius: 3px; background: transparent; color: var(--muted-foreground); font: 500 13px var(--font-sans); cursor: pointer; }
.tabs button[aria-pressed="true"], .tabs button[aria-selected="true"] { background: var(--background); color: var(--foreground); box-shadow: 0 0 0 1px var(--border); }
.progress { display: flex; align-items: center; gap: 0; height: var(--node); }
.progress i { display: block; width: var(--node); height: var(--node); background: var(--foreground); }
.progress i.todo { background: transparent; border: 1px solid var(--foreground); }
.progress i.current { background: var(--signal); }
.progress b { display: block; flex: 1; height: 1px; background: var(--border); }

/* ---- listes (checklists) ---- */
.list { display: grid; border-top: 1px solid var(--border); }
.item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--border); color: inherit; }
.item-center { align-items: center; }
a.item:hover .item-title { text-decoration: underline; text-underline-offset: 3px; }
.item-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.item-title { font-weight: 500; }
.item-meta { font-size: 13px; color: var(--muted-foreground); }
.item .icon { width: 16px; height: 16px; flex: none; color: var(--muted-foreground); }

/* ---- accordéon, alerte, état vide ---- */
details.accordion > summary { list-style: none; cursor: pointer; font-size: 13px; color: var(--muted-foreground); display: inline-flex; align-items: center; gap: 8px; min-height: 32px; }
details.accordion > summary::-webkit-details-marker { display: none; }
details.accordion > summary::before { content: ""; width: 6px; height: 6px; background: currentColor; transition: transform .2s; }
details.accordion[open] > summary::before { transform: rotate(45deg); }
details.accordion > div { padding-top: 8px; font-size: 13px; color: var(--muted-foreground); display: grid; gap: 4px; }
.alert { display: grid; gap: 2px; padding: 12px 16px; border: 1px solid var(--border); border-left: 3px solid var(--foreground); }
.alert-title { font-weight: 500; }
.alert-description { font-size: 13px; color: var(--muted-foreground); }
.empty { padding: 32px 16px; text-align: center; border: 1px dashed var(--border); color: var(--muted-foreground); font-size: 13px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } html { scroll-behavior: auto; } }

/* ---- mouvement : discret, court, jamais décoratif ---- */
.entries .entry { animation: rise .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.entries .entry:nth-child(1) { --i: 0; } .entries .entry:nth-child(2) { --i: 1; } .entries .entry:nth-child(3) { --i: 2; }
.entries .entry:nth-child(4) { --i: 3; } .entries .entry:nth-child(5) { --i: 4; } .entries .entry:nth-child(6) { --i: 5; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.stem { transform-origin: top; animation: grow .5s ease-out both; }
.stem + .node + .stem { animation-delay: .35s; }
.motif .node, .hero .node-signal { animation: appear .3s ease-out both .3s; }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes appear { from { opacity: 0; transform: scale(.4); } }
.node-live { animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .45; } }
.entry-index { transition: color .15s; }
a.entry:hover .entry-index { color: var(--signal); }
.btn .node { transition: transform .15s; }
.btn:hover .node { transform: translateX(2px); }
.diagram rect { transition: fill .25s; }
.nav-links a, .link { transition: background-color .15s, color .15s, text-decoration-color .15s; }

/* ---- son : interrupteur ---- */
.sound-toggle { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border: 0; background: transparent; color: var(--muted-foreground); font: 500 11.5px var(--font-mono); letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; border-radius: var(--radius-control); }
.sound-toggle:hover { color: var(--foreground); background: var(--bg-2); }
.sound-toggle .node { width: 6px; height: 6px; background: currentColor; }
.sound-toggle[aria-pressed="true"] .node { background: var(--signal); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }