/* Tableau de bord RobotEURUSD — mêmes couleurs que le panneau MT5.
   Mise en page : en-tête + cartes ; barre d'onglets en bas sur téléphone. */
:root {
  --fond: #F3F5F8; --surface: #FFFFFF; --surface-2: #F7F8FA; --encre: #131722; --attenue: #5A6170;
  --trait: #D9DEE6; --accent: #2962FF; --gain: #0B8A7A; --perte: #D2373D; --alerte: #B26A00; --alerte-fond: #FFF3DD;
  --chiffres: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --texte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --fond: #0E121A; --surface: #161B26; --surface-2: #1C2230; --encre: #E3E6EC; --attenue: #8E96A6;
          --trait: #283042; --accent: #7B96FF; --gain: #26A69A; --perte: #EF5350; --alerte: #F0B04A; --alerte-fond: #2E2615;
          color-scheme: dark; }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fond); color: var(--encre); font: 15px/1.5 var(--texte);
       padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
a { color: var(--accent); }
h1 { font-size: 22px; margin: 4px 0 12px; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin: 0 0 10px; }
.attenue { color: var(--attenue); }
.petit { font-size: 13px; }
.gain { color: var(--gain); }
.perte { color: var(--perte); }
.nombre, dd, .indicateurs strong { font-family: var(--chiffres); font-variant-numeric: tabular-nums; }

.entete { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
          background: var(--surface); border-bottom: 1px solid var(--trait); padding: 10px 16px;
          padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
.marque { font-weight: 700; color: var(--encre); text-decoration: none; }
.marque span { font-weight: 400; color: var(--attenue); font-size: 13px; margin-left: 4px; }
.pastille { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--trait); }
.pastille.vert { color: var(--gain); border-color: var(--gain); }
.pastille.orange { color: var(--alerte); border-color: var(--alerte); }
.pastille.rouge { color: var(--perte); border-color: var(--perte); }
.navigation { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.navigation a, .onglets a { text-decoration: none; color: var(--attenue); padding: 6px 10px; border-radius: 8px; font-size: 14px; }
.navigation a[aria-current="page"], .onglets a[aria-current="page"] { color: var(--accent); background: var(--surface-2); font-weight: 600; }
.onglets { display: none; }
@media (max-width: 720px) {
  .navigation a:not(.quitter) { display: none; }
  .onglets { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 5; background: var(--surface);
             border-top: 1px solid var(--trait); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .onglets a { flex: 1; text-align: center; font-size: 11.5px; padding: 8px 2px; }
}

.contenu { max-width: 1100px; margin: 0 auto; padding-inline: 16px; padding-block: 16px; }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.carte { background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; padding: 16px; min-width: 0; }
.carte.large { grid-column: 1 / -1; }
.etat { font-size: 28px; font-weight: 800; margin: 0 0 6px; }
.etat.vert { color: var(--gain); } .etat.orange { color: var(--alerte); } .etat.rouge { color: var(--perte); }
.lignes { margin: 0; display: grid; gap: 6px; }
.lignes div { display: flex; justify-content: space-between; gap: 12px; }
.lignes dt { color: var(--attenue); }
.lignes dd { margin: 0; text-align: right; }
.message { border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; }
.message.alerte { background: var(--alerte-fond); border: 1px solid var(--alerte); }
.message.erreur { color: var(--perte); padding: 0; }

.position { border: 1px solid var(--trait); border-radius: 10px; padding: 12px 14px; background: var(--surface-2); }
.position + .position { margin-top: 10px; }
.position .titre { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; flex-wrap: wrap; }
.position .details { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px 14px; margin-top: 8px; font-size: 14px; }
.position .details span { color: var(--attenue); display: block; font-size: 12px; }

.indicateurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 14px; }
.indicateurs .carte { display: grid; gap: 4px; }
.indicateurs strong { font-size: 20px; }
.graphique { position: relative; height: 260px; }

.filtres { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 14px; }
.filtres > div { display: grid; gap: 4px; min-width: 140px; }
label { font-size: 13px; color: var(--attenue); }
input, select, button, .bouton-secondaire { font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--trait);
       background: var(--surface-2); color: var(--encre); }
button { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; cursor: pointer; }
.actions-filtres { display: flex !important; gap: 8px; align-items: center; }
.bouton-secondaire { text-decoration: none; display: inline-block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tableau-defilant { overflow-x: auto; border: 1px solid var(--trait); border-radius: 12px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--trait); white-space: nowrap; }
th { font-size: 12px; color: var(--attenue); text-transform: uppercase; letter-spacing: .04em; }
td.nombre { text-align: right; }

.journal { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.journal li { background: var(--surface); border: 1px solid var(--trait); border-left: 4px solid var(--trait); border-radius: 8px;
              padding: 8px 12px; display: grid; grid-template-columns: auto auto 1fr; gap: 4px 12px; font-size: 14px; }
.journal time { font-family: var(--chiffres); color: var(--attenue); }
.journal .niveau { font-weight: 700; font-size: 12px; }
.journal .texte { min-width: 0; overflow-wrap: anywhere; }
.journal .niveau-attention { border-left-color: var(--alerte); } .journal .niveau-attention .niveau { color: var(--alerte); }
.journal .niveau-erreur { border-left-color: var(--perte); } .journal .niveau-erreur .niveau { color: var(--perte); }
@media (max-width: 720px) { .journal li { grid-template-columns: auto 1fr; } .journal .texte { grid-column: 1 / -1; } }

.page-connexion { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.connexion { width: 100%; max-width: 360px; }
.connexion form { display: grid; gap: 10px; margin-top: 12px; }

/* Page Réglages */
.profils { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 14px 0; }
button.profil { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 14px 16px;
  background: var(--surface-2); color: var(--encre); border: 1px solid var(--trait); border-radius: 12px; font-weight: 400; }
button.profil strong { font-size: 16px; color: var(--encre); }
button.profil span { color: var(--attenue); font-size: 13px; line-height: 1.4; }
button.profil em { font-style: normal; font-size: 13px; color: var(--accent); font-weight: 600; margin-top: auto; }
button.profil:hover:not(:disabled) { border-color: var(--accent); }
button.profil:disabled { opacity: .5; cursor: not-allowed; }
.import { display: grid; gap: 6px; margin-top: 6px; }
.import input { max-width: 100%; }
#form-code { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 12px 0; }
#code { font-family: var(--chiffres); font-size: 20px; letter-spacing: .3em; width: 9em; }
section.carte + section.carte { margin-top: 14px; }