/* Réflexe — variables, typographie, boutons, formulaires
   Extrait de index.html sans aucune modification de règle.
   L'ordre de chargement reproduit exactement la cascade d'origine :
   base.css → layout.css → components.css → features.css */

  :root{
    --bg: #0B1F2A;
    --panel: #102631;
    --panel-light: #16303D;
    --panel-border: rgba(234,241,240,0.09);
    --accent: #57C9A5;
    --accent-dim: #2E5C50;
    --alert: #E8543E;
    --alert-dim: #4A2822;
    --text: #EAF1F0;
    --text-muted: #8FA8AF;
    --paper: #F4F1E8;
    --paper-ink: #14262E;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{ background:var(--bg); color:var(--text); font-family:'IBM Plex Sans', sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased; }
  h1,h2,h3{ font-family:'Archivo Expanded', sans-serif; letter-spacing:-0.01em; }
  .mono{ font-family:'IBM Plex Mono', monospace; }
  a{color:inherit;}
  :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  .wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }