/* ============ ArgusMac — tokens ============ */
  :root{
    --ground:#eef1f6; --surface:#ffffff; --surface-2:#e7ecf3; --surface-3:#dfe5ee;
    --ink:#0c1220; --ink-soft:#38414f; --muted:#697487; --faint:#9aa4b3;
    --line:#d6dde8; --line-soft:#e4e9f1;
    --accent:#2563eb; --accent-strong:#1d4fd0; --accent-wash:rgba(37,99,235,.10);
    --up:#e0533b; --down:#12a06b; --down-wash:rgba(18,160,107,.12);
    --shadow:0 1px 2px rgba(12,18,32,.05), 0 12px 32px -12px rgba(12,18,32,.18);
    --shadow-lg:0 24px 60px -24px rgba(12,18,32,.34);
    --font:-apple-system,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif;
    --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
    --r:16px; --r-sm:11px; --r-lg:26px;
    --maxw:1080px;
  }
  @media (prefers-color-scheme:dark){
    :root{
      --ground:#080a0f; --surface:#12161f; --surface-2:#1a1f2a; --surface-3:#222836;
      --ink:#eaeef5; --ink-soft:#c1c9d6; --muted:#7c8593; --faint:#5a6472;
      --line:#242b38; --line-soft:#1b212c;
      --accent:#5b8cff; --accent-strong:#7aa1ff; --accent-wash:rgba(91,140,255,.14);
      --up:#ff6f57; --down:#2fca92; --down-wash:rgba(47,202,146,.14);
      --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -16px rgba(0,0,0,.6);
      --shadow-lg:0 30px 70px -28px rgba(0,0,0,.7);
    }
  }
  :root[data-theme="light"]{
    --ground:#eef1f6; --surface:#ffffff; --surface-2:#e7ecf3; --surface-3:#dfe5ee;
    --ink:#0c1220; --ink-soft:#38414f; --muted:#697487; --faint:#9aa4b3;
    --line:#d6dde8; --line-soft:#e4e9f1;
    --accent:#2563eb; --accent-strong:#1d4fd0; --accent-wash:rgba(37,99,235,.10);
    --up:#e0533b; --down:#12a06b; --down-wash:rgba(18,160,107,.12);
    --shadow:0 1px 2px rgba(12,18,32,.05), 0 12px 32px -12px rgba(12,18,32,.18);
  }
  :root[data-theme="dark"]{
    --ground:#080a0f; --surface:#12161f; --surface-2:#1a1f2a; --surface-3:#222836;
    --ink:#eaeef5; --ink-soft:#c1c9d6; --muted:#7c8593; --faint:#5a6472;
    --line:#242b38; --line-soft:#1b212c;
    --accent:#5b8cff; --accent-strong:#7aa1ff; --accent-wash:rgba(91,140,255,.14);
    --up:#ff6f57; --down:#2fca92; --down-wash:rgba(47,202,146,.14);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -16px rgba(0,0,0,.6);
    --shadow-lg:0 30px 70px -28px rgba(0,0,0,.7);
  }

  *{box-sizing:border-box}
  body{margin:0}
  html,body{background:var(--ground);min-height:100%}
  .am{
    font-family:var(--font); background:var(--ground); color:var(--ink);
    line-height:1.5; -webkit-font-smoothing:antialiased; letter-spacing:-.011em;
    min-height:100vh;
  }
  .am ::selection{background:var(--accent-wash)}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
  .eyebrow{
    font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; font-weight:600;
    color:var(--accent); margin:0;
  }
  .mono{font-family:var(--mono); font-feature-settings:"tnum"; letter-spacing:0}
  .tnum{font-variant-numeric:tabular-nums}

  /* ============ header ============ */
  .top{
    position:sticky; top:0; z-index:40;
    backdrop-filter:saturate(1.4) blur(14px);
    background:color-mix(in srgb, var(--ground) 82%, transparent);
    border-bottom:1px solid var(--line-soft);
  }
  .top .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
  .brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink)}
  .brand .mark{width:34px; height:34px; display:block; flex:none}
  .brand .word{font-size:1.16rem; font-weight:680; letter-spacing:-.02em}
  .brand .word b{font-weight:680}
  .brand .word .m{color:var(--accent)}
  .nav{display:flex; align-items:center; gap:6px}
  .nav a{
    color:var(--ink-soft); text-decoration:none; font-size:.9rem; font-weight:520;
    padding:8px 12px; border-radius:9px;
  }
  .nav a:hover{color:var(--ink); background:var(--surface-2)}
  .nav a.ghost{display:none}
  @media(min-width:720px){ .nav a.ghost{display:inline-flex} }
  .themebtn{
    width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
    background:var(--surface); color:var(--ink-soft); cursor:pointer; display:grid; place-items:center;
    margin-left:4px;
  }
  .themebtn:hover{color:var(--ink); border-color:var(--muted)}
  .themebtn svg{width:18px;height:18px}
  .themebtn .sun{display:none} .themebtn .moon{display:block}
  :root[data-theme="dark"] .themebtn .sun{display:block}
  :root[data-theme="dark"] .themebtn .moon{display:none}
  @media (prefers-color-scheme:dark){ .themebtn .sun{display:block} .themebtn .moon{display:none} }
  :root[data-theme="light"] .themebtn .sun{display:none} :root[data-theme="light"] .themebtn .moon{display:block}

  /* ============ hero ============ */
  .hero{padding:64px 0 24px; position:relative; overflow:hidden}
  .hero::before{
    content:""; position:absolute; inset:-40% 0 auto 0; height:520px; z-index:0;
    background:radial-gradient(60% 70% at 50% 0%, var(--accent-wash), transparent 70%);
    pointer-events:none;
  }
  .hero .wrap{position:relative; z-index:1}
  .hero h1{
    font-size:clamp(2.3rem,6vw,3.85rem); line-height:1.02; letter-spacing:-.035em;
    font-weight:720; margin:16px 0 0; text-wrap:balance; max-width:16ch;
  }
  .hero h1 .g{
    background:linear-gradient(100deg,var(--accent),var(--accent-strong));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .hero .lead{
    font-size:1.16rem; color:var(--muted); margin:18px 0 0; max-width:52ch; line-height:1.55;
  }

  /* ============ search instrument ============ */
  .search{
    margin-top:34px; background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:22px;
  }
  .search .field{
    display:flex; align-items:center; gap:12px; background:var(--surface-2);
    border:1.5px solid var(--line); border-radius:var(--r); padding:6px 6px 6px 16px;
    transition:border-color .18s, box-shadow .18s;
  }
  .search .field:focus-within{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-wash)}
  .search .field svg.mag{width:20px;height:20px;color:var(--muted); flex:none}
  .search input{
    flex:1; border:0; outline:0; background:transparent; color:var(--ink);
    font-family:var(--mono); font-size:1.02rem; padding:14px 0; min-width:0; letter-spacing:0;
  }
  .search input::placeholder{color:var(--faint); font-family:var(--font); letter-spacing:-.01em}
  .search .go{
    border:0; cursor:pointer; background:var(--accent); color:#fff; font-weight:600; font-size:.95rem;
    padding:0 22px; height:48px; border-radius:12px; font-family:var(--font); flex:none;
    display:inline-flex; align-items:center; gap:8px;
  }
  .search .go:hover{background:var(--accent-strong)}
  .search .go svg{width:16px;height:16px}
  .detect{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px}
  .detect .lbl{font-size:.74rem; color:var(--faint); margin-right:2px; font-weight:520}
  .pill{
    display:inline-flex; align-items:center; gap:7px; font-size:.8rem; font-weight:550;
    padding:6px 11px; border-radius:999px; border:1px solid var(--line);
    color:var(--muted); background:var(--surface); transition:.18s;
  }
  .pill .dot{width:6px;height:6px;border-radius:50%;background:var(--faint)}
  .pill code{font-family:var(--mono); font-size:.74rem; opacity:.8}
  .pill.is-active{
    color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%, var(--line));
    background:var(--accent-wash);
  }
  .pill.is-active .dot{background:var(--accent); box-shadow:0 0 0 3px var(--accent-wash)}
  .browse{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:18px;
    padding-top:16px; border-top:1px solid var(--line-soft)}
  .browse .lbl{font-size:.74rem; color:var(--faint); font-weight:520}
  .chip{
    cursor:pointer; font-family:var(--font); font-size:.84rem; font-weight:530;
    padding:7px 13px; border-radius:999px; border:1px solid var(--line);
    background:var(--surface-2); color:var(--ink-soft); transition:.16s;
  }
  .chip:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-wash)}
  .demo-note{
    margin:14px 2px 0; font-size:.76rem; color:var(--faint); display:flex; gap:7px; align-items:center;
  }
  .demo-note svg{width:14px;height:14px;flex:none}

  /* ============ result ============ */
  .result{padding:20px 0 8px}
  .rescount{font-size:.82rem; color:var(--muted); margin:0 2px 14px; font-weight:520}
  .card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    box-shadow:var(--shadow); overflow:hidden;
  }
  .card-main{display:grid; grid-template-columns:1fr; gap:0}
  @media(min-width:820px){ .card-main{grid-template-columns:1.05fr .95fr} }
  .card-info{padding:26px 26px 22px; border-bottom:1px solid var(--line-soft)}
  @media(min-width:820px){ .card-info{border-bottom:0; border-right:1px solid var(--line-soft)} }
  .machead{display:flex; gap:16px; align-items:flex-start}
  .thumb{
    width:74px;height:74px;border-radius:16px;flex:none; display:grid; place-items:center;
    background:linear-gradient(160deg,var(--surface-2),var(--surface-3)); border:1px solid var(--line-soft);
    color:var(--ink-soft);
  }
  .thumb svg{width:40px;height:40px}
  .machead h2{margin:2px 0 0; font-size:1.32rem; letter-spacing:-.025em; font-weight:660; line-height:1.12}
  .machead .sub{margin:6px 0 0; color:var(--muted); font-size:.9rem}
  .ids{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
  .idtag{
    display:inline-flex; flex-direction:column; gap:2px; padding:8px 12px; border-radius:10px;
    background:var(--surface-2); border:1px solid var(--line-soft); min-width:0;
  }
  .idtag .k{font-size:.64rem; text-transform:uppercase; letter-spacing:.09em; color:var(--faint); font-weight:600}
  .idtag .v{font-family:var(--mono); font-size:.9rem; color:var(--ink); letter-spacing:0}
  .card-cote{padding:24px 26px 26px; display:flex; flex-direction:column}
  .cote-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
  .cote-head .t{font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); font-weight:600}
  .delta{
    display:inline-flex; align-items:center; gap:5px; font-size:.82rem; font-weight:640;
    padding:4px 9px; border-radius:999px; font-variant-numeric:tabular-nums;
  }
  .delta.dn{color:var(--down); background:var(--down-wash)}
  .delta.up{color:var(--up); background:color-mix(in srgb,var(--up) 12%, transparent)}
  .delta svg{width:13px;height:13px}
  .grades{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px}
  .grade{padding:13px 12px; border-radius:14px; background:var(--surface-2); border:1px solid var(--line-soft); text-align:left}
  .grade .g{font-size:.7rem; color:var(--muted); font-weight:600; letter-spacing:.02em}
  .grade .p{font-size:1.24rem; font-weight:680; margin-top:5px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
  .grade.hi{background:var(--accent-wash); border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
  .grade.hi .g{color:var(--accent)}
  .chartbox{margin-top:20px; flex:1}
  .chartbox .cap{display:flex; justify-content:space-between; font-size:.72rem; color:var(--faint); margin-bottom:6px; font-weight:520}
  .chartbox svg{width:100%; height:auto; display:block}
  .cta-row{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none;
    font-weight:600; font-size:.9rem; padding:12px 18px; border-radius:12px; cursor:pointer; border:1px solid transparent;
    font-family:var(--font);
  }
  .btn.primary{background:var(--accent); color:#fff}
  .btn.primary:hover{background:var(--accent-strong)}
  .btn.ghost{background:var(--surface); border-color:var(--line); color:var(--ink)}
  .btn.ghost:hover{border-color:var(--muted)}
  .btn svg{width:15px;height:15px}
  .aff{font-size:.72rem; color:var(--faint); margin:10px 2px 0}

  /* grid results */
  .grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; margin-top:4px}
  .gcard{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px;
    cursor:pointer; transition:.16s; box-shadow:var(--shadow);
  }
  .gcard:hover{border-color:var(--accent); transform:translateY(-2px)}
  .gcard h3{margin:0; font-size:1rem; letter-spacing:-.02em; font-weight:620; line-height:1.2}
  .gcard .gsub{color:var(--muted); font-size:.8rem; margin-top:4px}
  .gcard .gspark{margin:12px 0 10px}
  .gcard .gspark svg{width:100%;height:38px;display:block}
  .gcard .gfoot{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
  .gcard .gp{font-size:1.12rem; font-weight:680; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
  .gcard .gp small{font-size:.68rem; color:var(--faint); font-weight:500; margin-left:3px}
  .gcard .gd{font-size:.78rem; font-weight:640; font-variant-numeric:tabular-nums}
  .gcard .gd.dn{color:var(--down)} .gcard .gd.up{color:var(--up)}

  .empty{
    background:var(--surface); border:1px dashed var(--line); border-radius:var(--r-lg);
    padding:34px 26px; text-align:center; color:var(--muted);
  }
  .empty h3{color:var(--ink); margin:0 0 6px; font-size:1.1rem; font-weight:620}
  .empty .serial-hint{
    display:inline-flex; align-items:center; gap:9px; margin-top:16px; padding:11px 15px;
    background:var(--accent-wash); border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
    border-radius:12px; color:var(--ink-soft); font-size:.86rem; text-align:left;
  }
  .empty .serial-hint svg{width:20px;height:20px;color:var(--accent);flex:none}

  /* ============ how ============ */
  .sec{padding:52px 0}
  .sec-head{max-width:56ch}
  .sec-head h2{font-size:clamp(1.6rem,3.4vw,2.15rem); letter-spacing:-.03em; font-weight:680; margin:10px 0 0; text-wrap:balance}
  .sec-head p{color:var(--muted); font-size:1.02rem; margin:12px 0 0}
  .steps{display:grid; grid-template-columns:1fr; gap:16px; margin-top:32px}
  @media(min-width:760px){ .steps{grid-template-columns:repeat(3,1fr)} }
  .step{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:var(--shadow)}
  .step .n{font-family:var(--mono); font-size:.8rem; color:var(--accent); font-weight:600}
  .step .ic{width:40px;height:40px;border-radius:11px;background:var(--accent-wash);color:var(--accent);display:grid;place-items:center;margin:12px 0 14px}
  .step .ic svg{width:21px;height:21px}
  .step h3{margin:0; font-size:1.06rem; font-weight:630; letter-spacing:-.02em}
  .step p{margin:8px 0 0; color:var(--muted); font-size:.92rem; line-height:1.55}

  /* families */
  .fam{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:30px}
  @media(min-width:680px){ .fam{grid-template-columns:repeat(3,1fr)} }
  @media(min-width:920px){ .fam{grid-template-columns:repeat(6,1fr)} }
  .famcard{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px 14px;
    text-align:center; cursor:pointer; transition:.16s; box-shadow:var(--shadow);
  }
  .famcard:hover{border-color:var(--accent); transform:translateY(-2px)}
  .famcard svg{width:34px;height:34px;color:var(--ink-soft);margin-bottom:10px}
  .famcard:hover svg{color:var(--accent)}
  .famcard .fn{font-size:.9rem;font-weight:600;letter-spacing:-.01em}
  .famcard .fc{font-size:.74rem;color:var(--faint);margin-top:3px}

  /* footer */
  .foot{border-top:1px solid var(--line-soft); margin-top:40px; padding:40px 0 48px; background:var(--surface)}
  .foot .wrap{display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:flex-start}
  .foot .brand .word{font-size:1.05rem}
  .foot p{color:var(--muted); font-size:.84rem; margin:12px 0 0; max-width:40ch; line-height:1.55}
  .foot .col h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--faint);margin:0 0 12px;font-weight:600}
  .foot .col a{display:block; color:var(--ink-soft); text-decoration:none; font-size:.88rem; padding:4px 0}
  .foot .col a:hover{color:var(--accent)}
  .legal{border-top:1px solid var(--line-soft); margin-top:28px; padding-top:20px; color:var(--faint); font-size:.78rem}
  .legal b{color:var(--muted); font-weight:600}

  @media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }
  :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}

/* ============ pages internes (site dynamique) ============ */
.page{padding:40px 0 8px}
.crumb{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--muted);margin:0 2px 20px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--accent)}
.crumb svg{width:14px;height:14px;opacity:.6}
.searchmini{margin:0 0 8px}
.searchmini .field{max-width:none}
.updated{font-size:.74rem;color:var(--faint);margin-top:14px;display:flex;align-items:center;gap:6px}
.updated svg{width:13px;height:13px}
.updated .live{display:inline-flex;align-items:center;gap:6px;color:var(--down);font-weight:600}
.updated .live .d{width:7px;height:7px;border-radius:50%;background:var(--down)}
.sim{margin-top:40px}
.sim h2{font-size:1.15rem;letter-spacing:-.02em;font-weight:640;margin:0 0 16px}
.badge-demo{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:600;letter-spacing:.02em;
  padding:4px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted)}
.badge-demo .d{width:6px;height:6px;border-radius:50%;background:var(--faint)}
.hist-range{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
.hist-range .hr{flex:1;min-width:90px;padding:10px 12px;border-radius:11px;background:var(--surface-2);border:1px solid var(--line-soft)}
.hist-range .hr .k{font-size:.64rem;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);font-weight:600}
.hist-range .hr .v{font-size:1.02rem;font-weight:660;margin-top:3px;font-variant-numeric:tabular-nums}
.noscript-hint{max-width:var(--maxw);margin:0 auto;padding:10px 24px}

/* ============ autocomplétion ============ */
.acwrap{position:relative}
.ac{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden;display:none}
.ac.open{display:block}
.ac a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 15px;
  text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line-soft)}
.ac a:last-child{border-bottom:0}
.ac a:hover,.ac a.sel{background:var(--accent-wash)}
.ac .nm{font-weight:560;font-size:.92rem}
.ac .nm small{display:block;color:var(--faint);font-family:var(--mono);font-size:.72rem;margin-top:2px}
.ac .pr{font-weight:660;font-variant-numeric:tabular-nums;font-size:.9rem;white-space:nowrap}