/*
  Charte « Le Cartographe » — miroir web de src/Radar.Mobile/Resources/Styles/RadarStyles.xaml.
  Bleu de Prusse pour la marque et les en-têtes, orange signal réservé à ce qui change et à l'action
  principale, papier teinté en fond, encre pour le texte, brume pour le secondaire.
  Polices servies depuis ce domaine : aucune requête vers un tiers, conformément à la page confidentialité.
*/

@font-face {
  font-family: "Archivo";
  src: url("/fonts/Archivo-Black.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/IBMPlexSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/IBMPlexSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --brand: #14324F;
  --signal: #F2762E;
  --signal-soft: #FDE7DA;
  --surface: #F3F1EC;
  --card: #FFFFFF;
  --ink: #1B2430;
  --mist: #5E6675;
  --outline: #E8E3D8;
  --header-ink: #14324F;
  --on-header: #F3F1EC;
  --on-header-muted: #9DB4C9;
  --level-low: #2E9E5B;
  --level-major: #B8382A;
  --display: "Archivo", system-ui, sans-serif;
  --text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #9DB4C9;
    --signal-soft: #3A2A22;
    --surface: #0F1A26;
    --card: #172536;
    --ink: #F3F1EC;
    --mist: #9DB4C9;
    --outline: #24384F;
    --header-ink: #0B1621;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); }

.wrap { max-width: 920px; margin: 0 auto; padding: 0 20px; }

/* Bandeau d'en-tête bleu de Prusse, coins bas arrondis comme HeaderBand */
.band {
  background: var(--header-ink);
  color: var(--on-header);
  border-radius: 0 0 18px 18px;
}
.band a { color: var(--on-header); }

.mark { display: block; width: 100%; height: 100%; }

/* Nom de marque : Archivo Black, « Scope » en orange signal */
.wordmark {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--on-header);
  text-decoration: none;
  line-height: 1;
}
.wordmark em { color: var(--signal); font-style: normal; }

.eyebrow {
  font-family: var(--text);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--mist);
  margin: 0;
}

h1, h2, h3 { font-family: var(--display); font-weight: 900; letter-spacing: -0.5px; line-height: 1.15; }

.card {
  background: var(--card);
  border: 1px solid var(--outline);
  border-radius: 12px;
  padding: 20px;
}

.chip {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: 999px;
  padding: 5px 12px;
  font-weight: 600;
  font-size: 12px;
  color: var(--ink);
}

/* Action principale : orange signal, une seule par écran (RadarStyles : SignalButton) */
.btn-signal {
  display: inline-block;
  background: var(--signal);
  color: #fff;
  font-family: var(--text);
  font-weight: 600;
  text-decoration: none;
  padding: 13px 24px;
  border-radius: 10px;
  border: 1px solid var(--signal);
}
.btn-signal:hover { filter: brightness(1.06); }
.btn-signal[aria-disabled="true"] { opacity: .6; pointer-events: none; }

/* Action secondaire : contour, encre de marque (RadarStyles : TabButton) */
.btn-ghost {
  display: inline-block;
  background: var(--card);
  color: var(--brand);
  font-family: var(--text);
  font-weight: 600;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid var(--outline);
}
.btn-ghost:hover { border-color: var(--brand); }

/* Pictogrammes : traits Lucide, jamais d'emoji */
.icon { width: 22px; height: 22px; stroke: var(--brand); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-signal { stroke: var(--signal); }