:root{
  --bg:#f9f9fb; --bg2:#ffffff; --ink:#0e0e12; --mute:#6b6b77;
  --accent:#c1121f; --violet:#6f52ff; --blue:#1f3a93; --gold:#b08d57;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'Spectral',serif;line-height:1.65}
a{color:inherit;text-decoration:none} a:hover{opacity:.85}
.wrapper{max-width:980px;margin:0 auto;padding:28px}
.header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:8px 0 24px}
.brand{font-variant:small-caps;letter-spacing:2px} .brand a{font-weight:600}
.badge{font-size:12px;color:var(--mute)}
.nav{display:flex;gap:12px;flex-wrap:wrap}
.nav a,.toggle{padding:8px 10px;border-radius:999px;border:1px solid #e8e8ef;background:var(--bg2);font-size:14px}
.toggle{cursor:pointer}
.hero{padding:64px 0 22px;border-top:1px dashed #e6e6ee;border-bottom:1px dashed #e6e6ee;margin-bottom:26px}
h1{font-size:40px;line-height:1.2;margin:0 0 10px}
.subtitle{color:var(--mute)} .type{min-height:1.4em;white-space:nowrap;overflow:hidden;border-right:2px solid #bbb}
.quote{font-style:italic;color:var(--mute);margin-top:10px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:24px 0}
.card{background:var(--bg2);border:1px solid #ececf3;border-radius:18px;padding:18px}
.card h3{margin:0 0 6px;font-size:18px} .card .tag{font-size:12px;color:var(--mute)} .card .open{margin-top:10px}
.section{margin:26px 0} .section h2{margin:0 0 8px}
.pseudos{display:flex;flex-wrap:wrap;gap:8px}
.badge-pill{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid #ececf3;background:var(--bg2);font-size:13px;color:var(--mute)}
.timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.step{border-left:6px solid #ddd;background:var(--bg2);border:1px solid #ececf3;border-radius:14px;padding:12px}
.step.red{border-left-color:var(--accent)} .step.violet{border-left-color:var(--violet)}
.step.blue{border-left-color:var(--blue)} .step.gold{border-left-color:var(--gold)}
.footer{margin:40px 0 16px;color:var(--mute);font-size:14px}
hr{border:none;border-top:1px dashed #e6e6ee;margin:24px 0}
small.marginal{display:block;color:var(--mute)}
@media (prefers-reduced-motion:no-preference){
  .card{transition:transform .2s ease, box-shadow .2s ease}
  .card:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(0,0,0,.05)}
}
/* mode nuit */
.dark{--bg:#0b0b0e;--bg2:#121219;--ink:#ececf3;--mute:#b2b2c0;--accent:#ef233c}
.dark .nav a,.dark .toggle{border-color:#272737}
.dark .card{border-color:#272737}
.dark hr{border-top-color:#272737}