/* Design system Courant — voir CLAUDE.md. Les tokens sont repris tels quels.
   Ce qui est commun à la page de l'app et à la page de connexion vit ici ; le
   reste de l'app reste dans index.html. Chargé avant le <style> de chaque page,
   qui peut préciser. */

@font-face { font-family:"Bricolage Grotesque"; font-weight:600 700; font-display:swap;
             src:url(/fonts/bricolage-grotesque.woff2) format("woff2"); }
@font-face { font-family:"Instrument Sans"; font-weight:400 600; font-display:swap;
             src:url(/fonts/instrument-sans.woff2) format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-weight:500; font-display:swap;
             src:url(/fonts/jetbrains-mono.woff2) format("woff2"); }

/* Nuit est le thème principal ; jour le suit quand le téléphone est en clair. */
:root {
  color-scheme: dark;
  --ground:#0e0f0c; --surface:#171915; --surface-2:#23261f;
  --line:#33372f; --line-strong:#6e7266;
  --ink:#f2efe6; --ink-muted:#a3a096;
  --voltage:#d6ff3d; --on-voltage:#0e0f0c;
  --sodium:#ffb547; --braise:#ff5b38; --ciel:#9dc2ff; --on-fill:#0e0f0c;
  --alerte:#ff4f8b; --focus:#d6ff3d;
  --glow-sodium:0 0 56px 0 rgba(255,181,71,.32);

  --display:"Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --sans:"Instrument Sans", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --radius-s:12px; --radius-l:32px; --radius-full:999px;

  --ease:cubic-bezier(.2,.8,.2,1);
  --t-press:140ms; --t-state:320ms;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --ground:#efebe1; --surface:#f8f6f0; --surface-2:#e4dfd2;
    --line:#cfc8b6; --line-strong:#8a8474;
    --ink:#141511; --ink-muted:#5e5b52;
    --voltage:#cbf53a;
    --sodium:#f5a524; --braise:#ee4a26; --ciel:#7fa8f2;
    --alerte:#c8185a; --focus:#141511;
    --glow-sodium:none;
  }
}

* { box-sizing:border-box; }
body {
  /* Avec viewport-fit=cover, la page s'étend sous l'encoche en paysage et sous
     la barre d'accueil : les marges « safe-area » la repoussent d'autant. */
  margin:0; background:var(--ground); color:var(--ink);
  padding: env(safe-area-inset-top) max(var(--space-4), env(safe-area-inset-right))
           calc(var(--space-7) + env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));
  font:400 15px/22px var(--sans);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
header, main { max-width:60rem; margin:0 auto; }
header { padding:var(--space-6) 0 var(--space-5); }

.label {
  font:500 11px/14px var(--mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-muted);
}
.alerte { color:var(--alerte); }

/* ------------------------------------------------------------ Formulaire --- */
.champ { display:flex; flex-direction:column; gap:var(--space-2); }
.champ input {
  min-height:48px; padding:0 var(--space-4); border-radius:var(--radius-s);
  border:2px solid var(--line-strong); background:var(--surface); color:var(--ink);
  font:400 17px/22px var(--sans); /* 16px et plus : Safari ne zoome pas au focus */
}
.champ input:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.btn {
  min-height:48px; padding:0 var(--space-5); border-radius:var(--radius-full);
  border:0; background:var(--voltage); color:var(--on-voltage);
  font:600 15px/1 var(--sans); cursor:pointer; align-self:flex-start;
  transition:transform var(--t-press) var(--ease);
}
.btn:active { transform:scale(.97); }
.btn:disabled { opacity:.4; cursor:default; transform:none; }
.btn:focus-visible, .quiet:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.quiet {
  min-height:44px; padding:0; border:0; background:none; color:var(--ink); cursor:pointer;
  font:inherit; text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:var(--line-strong);
}

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