/* ═══════════════════════════════════════════════════════════════════════
   Views — socle des pages serveur (accueil public, connexion, erreurs)
   Jetons de design (repris par frontend/src/styles/jetons.css, vérifié par
   tests/unit/test_front_genere.py) et composants de templates/_ui.html ; le
   reste de ces pages est dans static/css/pages/accueil.css. Les écrans de
   l'application (React) ont leurs propres styles : frontend/src/styles/.
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* Surfaces */
  --paper: #f5f6f8;
  --surface: #ffffff;
  --surface-sunken: #f0f2f5;
  --surface-hover: #f7f8fa;
  --ink: #0f1e33;            /* menu latéral */
  --ink-2: #1b2c45;
  --ink-3: #2a3d5a;

  /* Texte */
  --text: #17212f;
  --text-2: #4a5568;
  --text-3: #6b7686;
  --text-on-ink: #e7ecf3;
  --text-on-ink-2: #9aa8bc;

  /* Filets */
  --line: #dce1e8;
  --line-soft: #e9ecf1;
  --line-strong: #c5ccd7;

  /* Accent marque (ocre) */
  --accent: #946200;
  --accent-strong: #7a5100;
  --accent-soft: #fbf4e4;
  --accent-line: #e6d3a6;
  --brand-gold: #c9971c;      /* uniquement sur fond encre */

  /* États */
  --ok: #1e7a46;   --ok-soft: #e8f4ed;   --ok-line: #b9dcc7;
  --warn: #a15c00; --warn-soft: #fdf3e2; --warn-line: #ecd0a3;
  --ko: #b42318;   --ko-soft: #fdeceb;   --ko-line: #f1bfba;
  --info: #24548f; --info-soft: #ebf1f9; --info-line: #c3d4ea;

  /* Rayons, ombres */
  --r-sm: 4px;
  --r: 6px;
  --r-lg: 8px;
  --shadow: 0 1px 2px rgba(15, 30, 51, .06);
  --shadow-pop: 0 8px 24px rgba(15, 30, 51, .14);

  /* Typographie */
  --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs: 13.5px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-kpi: 26px;

  /* Mise en page */
  --sidebar-w: 256px;
  --sidebar-w-reduit: 68px;
  --r-xl: 10px;
  --topbar-h: 56px;
  --gutter: 28px;
}

/* ═══ Base ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font);
  font-size: var(--fs);
  line-height: 1.5;
  color: var(--text);
  background: var(--paper);
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { color: var(--text); font-weight: 600; line-height: 1.25; }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); margin-bottom: 4px; }
h3 { font-size: var(--fs-md); }
code { font-family: var(--font-mono); font-size: .92em; }
.ico { display: inline-block; vertical-align: -0.15em; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ═══ En-tête de page (page d'erreur) ═══════════════════════════════════ */
.page-header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.page-heading { min-width: 0; }
.page-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-header h1 { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }

/* ═══ États ════════════════════════════════════════════════════════════ */
.status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 9px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.7;
  text-transform: none; letter-spacing: 0; white-space: nowrap;
  border: 1px solid var(--line); background: var(--surface-sunken); color: var(--text-2);
}
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); }
.status-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.status-ko { background: var(--ko-soft); color: var(--ko); border-color: var(--ko-line); }
.status-info { background: var(--info-soft); color: var(--info); border-color: var(--info-line); }

.notice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 14px; margin-bottom: 16px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); font-size: var(--fs-sm); color: var(--text);
}
.notice > .ico { margin-top: 2px; }
.notice-info { border-color: var(--info-line); background: var(--info-soft); }
.notice-info > .ico { color: var(--info); }
.notice-ok { border-color: var(--ok-line); background: var(--ok-soft); }
.notice-ok > .ico { color: var(--ok); }
.notice-warn { border-color: var(--warn-line); background: var(--warn-soft); }
.notice-warn > .ico { color: var(--warn); }
.notice-ko { border-color: var(--ko-line); background: var(--ko-soft); }
.notice-ko > .ico { color: var(--ko); }
.notice-title { font-weight: 600; }
.notice-info .notice-title { color: var(--info); } .notice-ok .notice-title { color: var(--ok); }
.notice-warn .notice-title { color: var(--warn); } .notice-ko .notice-title { color: var(--ko); }
.notice a { color: inherit; text-decoration: underline; font-weight: 600; }

/* ═══ Boutons ══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--surface); color: var(--text);
  font: 500 var(--fs-sm) var(--font); white-space: nowrap;
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--surface-sunken); color: var(--text); text-decoration: none; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--ink-2); color: #fff; }

/* ═══ Formulaires (connexion) ══════════════════════════════════════════ */
input {
  font: 400 var(--fs) var(--font); color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  padding: 0 10px; height: 34px; width: 100%;
}
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(148, 98, 0, .14); }
label { display: block; margin-bottom: 4px; font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); text-transform: none; letter-spacing: 0; }

/* ═══ Utilitaires ══════════════════════════════════════════════════════ */
.text-muted { color: var(--text-3); }
.mono { font-family: var(--font-mono); font-size: .92em; }
.mt-12 { margin-top: 12px; }