@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=Figtree:wght@400;500;600&display=swap");

:root {
  color-scheme: light;
  --bg: #f6f7fb;
  --surface: #fff;
  --ink: #1a1f36;
  --muted: #5b6478;
  --line: #dde1ec;
  --bot: #eceff7;
  --accent: #d94e1a;
  --on-accent: #fff;
  --accent-soft: #ffe6da;
  --good: #1f7a4d;
  --hero: #1a1f36;
  --hero-ink: #fff;
  --hero-muted: #c3c9dc;
  --err: #b3261e;
  --display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #12162a;
    --surface: #1c2140;
    --ink: #f1f3fa;
    --muted: #a9b0c4;
    --line: #2e3560;
    --bot: #242a4e;
    --accent: #ff7a47;
    --on-accent: #1a1f36;
    --accent-soft: #3b2a2c;
    --good: #5fd39a;
    --hero: #1c2140;
    --hero-ink: #f1f3fa;
    --hero-muted: #a9b0c4;
    --err: #ff8a80;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #12162a;
  --surface: #1c2140;
  --ink: #f1f3fa;
  --muted: #a9b0c4;
  --line: #2e3560;
  --bot: #242a4e;
  --accent: #ff7a47;
  --on-accent: #1a1f36;
  --accent-soft: #3b2a2c;
  --good: #5fd39a;
  --hero: #1c2140;
  --hero-ink: #f1f3fa;
  --hero-muted: #a9b0c4;
  --err: #ff8a80;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--body); }
[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.wrap { width: min(100% - 32px, 1080px); margin-inline: auto; }
.top { min-height: 59px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 14px; flex-wrap: wrap; }
.top span { color: var(--muted); font-size: 13px; }
.wordmark { color: var(--ink); text-decoration: none; font: 700 20px/1 var(--display); }
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; align-items: start; padding: 28px; border-radius: 20px; background: var(--hero); color: var(--hero-ink); }
.hero-copy { min-width: 0; }
.eyebrow { color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.hero h1 { max-width: 14ch; margin: 12px 0 14px; font: 700 clamp(30px, 5vw, 48px)/1.05 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.sub { max-width: 34em; margin: 0 0 20px; color: var(--hero-muted); font-size: 18px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.facts div { min-width: 0; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--hero-ink) 22%, transparent); }
.facts dt { color: var(--hero-muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.facts dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 20px; border-radius: 16px; background: var(--surface); color: var(--ink); }
.card h2 { margin: 0; font: 700 22px/1.25 var(--display); }
.field { display: flex; flex-direction: column; min-width: 0; }
.field label, .mode-picker legend { margin-bottom: 6px; color: var(--muted); font-size: 13px; font-weight: 600; }
.field input, .field select { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; }
.field input:focus, .field select:focus { border-color: var(--accent); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mode-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.mode-picker legend { padding: 0; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 42px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer; font: 500 15px/1.3 var(--body); }
.chip:hover { border-color: var(--accent); }
.chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 18px; border: 0; border-radius: 12px; background: var(--accent); color: var(--on-accent); cursor: pointer; font: 600 16px/1.3 var(--body); text-decoration: none; text-align: center; }
.btn:hover { filter: brightness(1.05); }
.btn:disabled { opacity: .55; cursor: wait; }
.btn.ghost { border: 1px solid var(--line); background: transparent; color: var(--ink); }
.btn.small { min-height: 38px; padding: 8px 13px; font-size: 14px; }
.btn.wide { width: 100%; min-height: 48px; font-size: 17px; }
.legal { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.err, .loading-error { margin: 0; color: var(--err); font-size: 14px; }
.honeypot { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
.notice { margin-top: 16px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); }
.notice[data-kind="error"] { border-color: var(--err); }
.block { padding-top: 36px; }
.block > h2, .split h2 { margin: 0 0 6px; font: 700 28px/1.2 var(--display); text-wrap: balance; }
.lead { max-width: 60ch; margin: 0 0 18px; color: var(--muted); }
.timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; padding-block: 14px; border-top: 1px solid var(--line); }
.timeline time { color: var(--accent); font: 700 16px/1.5 var(--display); font-variant-numeric: tabular-nums; }
.timeline b { display: block; }
.timeline span:not(.skeleton-line) { color: var(--muted); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.body-copy { margin: 0 0 10px; color: var(--muted); }
.sample { padding: 18px; border: 1px dashed var(--line); border-radius: 16px; background: var(--surface); }
.sample .tag { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.sample p { margin: 8px 0 0; }
.sample strong { display: block; color: var(--accent); font: 700 44px/1.1 var(--display); }
.sample .muted-copy { margin: 0; color: var(--muted); }
.three { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 14px; }
.three article { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.three h3 { margin: 0 0 6px; font: 700 18px/1.3 var(--display); }
.three p { margin: 0; color: var(--muted); }
.faq details { padding-block: 14px; border-top: 1px solid var(--line); font-size: 16px; }
.faq summary { color: var(--ink); cursor: pointer; font-weight: 600; }
.faq p { max-width: 65ch; margin: 8px 0 0; color: var(--muted); }
.foot { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-block: 36px 40px; }
.foot small { color: var(--muted); }
.ticket { display: flex; flex-direction: column; gap: 16px; max-width: 640px; margin: 0 auto; padding-block: 28px 40px; }
.ticket h1 { margin: 0; font: 700 32px/1.1 var(--display); text-wrap: balance; }
.ticket p { margin: 0; }
.pass { display: grid; gap: 14px; padding: 22px; border-radius: 18px; background: var(--hero); color: var(--hero-ink); }
.pass .facts div { border-top-color: color-mix(in srgb, var(--hero-ink) 22%, transparent); }
.pass .facts dd { overflow-wrap: anywhere; }
.ticket-name { font: 700 22px/1.3 var(--display); overflow-wrap: anywhere; }
.next { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; border-radius: 16px; background: var(--accent-soft); color: var(--ink); }
.next h2 { margin: 0; font: 700 22px/1.25 var(--display); }
.ticket-result { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 640px; margin: 0 auto; padding-block: 28px 40px; }
.copy-fallback { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.copy-fallback label, .copy-help { color: var(--muted); font-size: 14px; }
.copy-fallback input { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; }
.ticket-loading { display: flex; flex-direction: column; gap: 12px; padding-block: 16px; }
.skeleton-line { display: inline-block; width: 120px; height: 1em; border-radius: 5px; background: var(--line); vertical-align: middle; }
.wide-line { width: min(100%, 390px); }
.skeleton-line::after { display: block; width: 100%; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--surface) 55%, transparent); content: ""; animation: shimmer 1.35s ease-in-out infinite alternate; }
@keyframes shimmer { from { opacity: .25; } to { opacity: .8; } }

@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 460px) {
  .two, .facts { grid-template-columns: minmax(0, 1fr); }
  .hero { padding: 18px; }
  .card { padding: 16px; }
  .timeline li { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* ----- Défi IA (page /defi/:token) ----- */
.defi-page .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.defi-page .defi-app { max-width: 640px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; padding-inline: 16px; display: flex; flex-direction: column; }
.defi-page .defi-head { padding-block: 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.defi-page .brand { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.defi-page .brand h1 { margin: 0; font: 700 22px/1.2 var(--display); letter-spacing: -.01em; }
.defi-page .brand span { color: var(--muted); font-size: 13px; }
.defi-page .steps { display: flex; gap: 4px; }
.defi-page .steps i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.defi-page .steps i.on { background: var(--accent); }
.defi-page .feed, .defi-page .dialogue { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.defi-page .feed { flex: 1; padding-block: 8px 16px; }
.defi-page .msg { max-width: 86%; padding: 10px 14px; border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.defi-page .msg.bot { align-self: flex-start; border-bottom-left-radius: 4px; background: var(--bot); }
.defi-page .msg.me { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--accent); color: var(--on-accent); font-weight: 500; }
.defi-page .msg.wait { color: var(--muted); font-style: italic; }
.defi-page .note { align-self: center; margin: 0; color: var(--muted); font-size: 13px; text-align: center; }
.defi-page .intro { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.defi-page .intro h2 { margin: 0; font: 700 26px/1.15 var(--display); text-wrap: balance; }
.defi-page .intro p { margin: 0; color: var(--muted); }
.defi-page .intro label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 13px; font-weight: 600; }
.defi-page .chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.defi-page .chip:disabled, .defi-page .composer input:disabled { opacity: .55; cursor: wait; }
.defi-page .example { padding: 12px 14px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 14px; }
.defi-page .example b { color: var(--ink); }
.defi-page .composer { position: sticky; bottom: 0; display: flex; flex-direction: column; gap: 10px; padding-block: 10px 16px; border-top: 1px solid var(--line); background: var(--bg); }
.defi-page .row { display: flex; gap: 8px; }
.defi-page .row input { flex: 1; min-width: 0; min-height: 44px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; }
.defi-page .defi-err { padding: 10px 14px; border: 1px solid var(--err); border-radius: 12px; background: var(--surface); }
.defi-page .defi-retry { padding-top: 8px; }
.defi-page .diag { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.defi-page .diag h2 { margin: 0; font: 700 20px/1.25 var(--display); text-wrap: balance; overflow-wrap: anywhere; }
.defi-page .diag p { margin: 0; overflow-wrap: anywhere; }
.defi-page .big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.defi-page .big strong { color: var(--accent); font: 700 56px/1 var(--display); font-variant-numeric: tabular-nums; }
.defi-page .big span { color: var(--muted); }
.defi-page .kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0; }
.defi-page .kv div { min-width: 0; padding: 12px 14px; border-radius: 12px; background: var(--bg); }
.defi-page .kv dt { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.defi-page .kv dd { margin: 4px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.defi-page .kv dd small { display: block; color: var(--muted); font-size: 13px; font-weight: 400; }
.defi-page .promise { padding: 14px 16px; border-radius: 12px; background: var(--accent-soft); font-weight: 600; }
.defi-page .fine { color: var(--muted); font-size: 13px; }
.defi-page .diag .next p { overflow-wrap: anywhere; }
@media (max-width: 460px) { .defi-page .big strong { font-size: 44px; } .defi-page .msg { max-width: 94%; } .defi-page .intro { padding: 16px; } }
@media (prefers-reduced-motion: no-preference) {
  .defi-page .msg, .defi-page .diag { animation: defi-rise .25s ease-out; }
  @keyframes defi-rise { from { transform: translateY(6px); opacity: .4; } to { transform: none; opacity: 1; } }
}