/* Orion — charte de assets/charte.md.
   Police système plutôt qu'Inter chargée depuis Google Fonts : la politique de
   sécurité du contenu interdit toute ressource externe, et un appel réseau
   bloquant au premier rendu est exactement ce qu'on ne veut pas sur un écran
   de décision consulté en mobilité. */

:root {
  --fond: #0F1115;
  --surface: #1A1D24;
  --texte: #F2F2F2;
  --secondaire: #9AA0AA;
  --accent: #C084FC;          /* diffère du bleu #3B82F6 de l'app IBKR */
  --barre: #2A1E3D;           /* marqueur de différenciation */
  --vert: #1DB954;
  --orange: #F5A623;
  --rouge: #E02424;
  --noir: #1A1A1A;
  --bord: #2A2E38;
  --mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* --- Barre de titre --------------------------------------------------- */

.barre {
  background: var(--barre);
  padding: 0.9rem 1rem;
  padding-top: max(0.9rem, env(safe-area-inset-top));
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--bord);
}
.marque { font-weight: 700; letter-spacing: 0.04em; }
.barre nav { display: flex; gap: 1rem; margin-left: auto; }
.barre a { color: var(--accent); text-decoration: none; }
.barre a:hover, .barre a:focus { text-decoration: underline; }

/* --- Bandeau d'état ---------------------------------------------------- */

.etat {
  padding: 0.8rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border-left: 5px solid var(--secondaire);
  background: var(--surface);
}
.etat span { color: var(--secondaire); font-size: 0.92rem; }
.etat--vert   { border-left-color: var(--vert); }
.etat--orange { border-left-color: var(--orange); }
.etat--rouge  { border-left-color: var(--rouge); background: #2A1416; }
.etat--noir   { border-left-color: #6B7280; }

/* --- Structure --------------------------------------------------------- */

main { padding: 1rem; max-width: 900px; margin: 0 auto; }

.carte {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1rem;
}

h1 { font-size: 1.25rem; margin: 0 0 0.8rem; }
h2 { font-size: 1rem; margin: 0 0 0.7rem; color: var(--secondaire);
     text-transform: uppercase; letter-spacing: 0.06em; }

.discret { color: var(--secondaire); font-size: 0.9rem; }
.vide { color: var(--secondaire); font-style: italic; }
.chiffre { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* --- Tableaux ---------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--secondaire);
  padding: 0.4rem 0.5rem 0.4rem 0; font-weight: 600;
}
td { padding: 0.5rem 0.5rem 0.5rem 0; border-top: 1px solid var(--bord);
     vertical-align: top; }
tr.sensible td { background: rgba(245, 166, 35, 0.07); }

.paires { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; margin: 0; }
.paires dt { color: var(--secondaire); }
.paires dd { margin: 0; text-align: right; }

.pastille {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 0.35rem; vertical-align: middle;
}
.pastille--vert   { background: var(--vert); }
.pastille--orange { background: var(--orange); }
.pastille--rouge  { background: var(--rouge); }

/* --- Formulaires et boutons -------------------------------------------- */

label { display: block; margin: 0.9rem 0 0.3rem; color: var(--secondaire);
        font-size: 0.9rem; }

input[type="password"], input[type="text"] {
  width: 100%;
  padding: 0.85rem;
  font-size: 1.05rem;
  font-family: var(--mono);
  background: var(--fond);
  color: var(--texte);
  border: 1px solid var(--bord);
  border-radius: 8px;
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.bouton {
  /* Grande zone tactile : ces boutons se pressent d'une main, en mobilité. */
  display: block; width: 100%;
  margin-top: 1.2rem; padding: 0.95rem;
  font-size: 1rem; font-weight: 600;
  background: transparent; color: var(--texte);
  border: 1px solid var(--bord); border-radius: 8px;
  cursor: pointer;
}
.bouton--principal { background: var(--accent); color: #14101C; border-color: var(--accent); }
.bouton:active { transform: translateY(1px); }

.alerte { padding: 0.7rem 0.9rem; border-radius: 8px; border-left: 4px solid;
          background: var(--fond); font-size: 0.95rem; }
.alerte--rouge { border-left-color: var(--rouge); }
.alerte--noir  { border-left-color: #6B7280; }

code { font-family: var(--mono); font-size: 0.9em; color: var(--accent); }