/* Jetons de couleur et de typographie, communs à toutes les pages de l'app.
   Palette : tons indigo de la charte Homeshell (« 6c ») — encre #1C2436,
   action #2F3E5C, secondaire #46566F, tertiaire #8C9BB4, aplat #E7EBF1,
   fond #F1F3F7, surface #FBFBFC ; vermillon #8F3020 (#C25A3E sur fond
   sombre) comme accent unique, ici pour le tracé moto sur la carte.
   Thème : automatique (système) par défaut ; data-theme="light" ou "dark"
   sur <html> le force (bouton de la barre de titre). */
:root {
  --bg: #F1F3F7;
  --surface: #FBFBFC;
  --fg: #1C2436;
  --muted: #46566F;
  --line: #D8DEE8;
  --accent: #2F3E5C;
  --accent-soft: #E7EBF1;
  --vermillon: #8F3020;
  --required: #8a5a12;
  --required-soft: #f6ecd9;
  --zero: #2f6b4f;
  --zero-soft: #e1efe7;
  --memo: #F7F8FA;
  --danger: #8F3020;
  --danger-soft: #F6E4DF;
  --on-accent: #ffffff;
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
/* Sombre : aplats de l'encre Homeshell (#1C2436), comme sa variante .dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161D2C; --surface: #1C2436; --fg: #F1F3F7; --muted: #8C9BB4; --line: #2F3E5C;
    --accent: #B4C0D4; --accent-soft: #2F3E5C; --vermillon: #C25A3E; --required: #e0b56b; --required-soft: #33291a;
    --zero: #7fc5a2; --zero-soft: #1b2e25; --memo: #222B3E; --danger: #E08A72; --danger-soft: #3A2420;
    --on-accent: #1C2436; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #161D2C; --surface: #1C2436; --fg: #F1F3F7; --muted: #8C9BB4; --line: #2F3E5C;
  --accent: #B4C0D4; --accent-soft: #2F3E5C; --vermillon: #C25A3E; --required: #e0b56b; --required-soft: #33291a;
  --zero: #7fc5a2; --zero-soft: #1b2e25; --memo: #222B3E; --danger: #E08A72; --danger-soft: #3A2420;
  --on-accent: #1C2436; color-scheme: dark;
}
:root { color-scheme: light; --topbar-h: 56px; --nav-w: 232px; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 15px; line-height: 1.5; }
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Contrôles de formulaire */
select, input[type="number"], input[type="text"], input[type="date"], input[type="email"], input[type="password"] {
  width: 100%; font: 400 14px var(--font-body); color: var(--fg); background: var(--bg);
  border: 1px solid var(--line); border-radius: 6px; padding: 7px 8px; min-width: 0;
}
.btn { font: 600 13.5px var(--font-body); border-radius: 6px; padding: 7px 12px; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); cursor: pointer; }
.btn.ghost { background: none; color: var(--accent); }
.btn.danger { background: none; border-color: var(--danger); color: var(--danger); }
.btn:disabled { opacity: .6; cursor: default; }
.form-msg { font-size: 13px; color: var(--muted); margin: 0; }
.form-msg.err { color: var(--danger); }
.form-msg.ok { color: var(--zero); }
.field { display: grid; gap: 4px; min-width: 0; }
.field > label, .flabel { font-size: 13px; color: var(--muted); font-weight: 600; }
.field .aide { font-size: 12.5px; color: var(--muted); }

/* Pages de connexion et de premier compte */
.auth-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 28px 24px; display: grid; gap: 16px; }
.auth-card h1 { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.15; margin: 0; }
.auth-card .eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.auth-card p { margin: 0; color: var(--muted); font-size: 14px; }
.auth-card form { display: grid; gap: 12px; }
.auth-card .btn { padding: 10px 12px; font-size: 15px; }
.auth-card input { font-size: 16px; padding: 9px 10px; }   /* 16 px : pas de zoom à la saisie sur iPhone */

/* Champs supplémentaires de l'app (texte long, téléphone, recherche) */
textarea, input[type="tel"], input[type="search"] {
  width: 100%; font: 400 14px var(--font-body); color: var(--fg); background: var(--bg);
  border: 1px solid var(--line); border-radius: 6px; padding: 7px 8px; min-width: 0;
}
textarea { resize: vertical; line-height: 1.45; }
.auth-card a.btn { display: block; text-align: center; text-decoration: none; }