:root {
    --bg:        #0f1117;
    --bg-card:   #181b24;
    --bg-elev:   #20242f;
    --border:    #2a2f3a;
    --text:      #e6e8ec;
    --text-dim:  #9aa0ac;
    --accent:    #4f8cff;
    --green:     #2ecc71;
    --yellow:    #f1c40f;
    --red:       #e74c3c;
    --radius:    12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 72px;
}

a { color: var(--accent); text-decoration: none; }

/* L'attribut hidden doit TOUJOURS masquer, même face à un display: flex/block plus loin. */
[hidden] { display: none !important; }

/* ---- En-tête ---- */
header.topbar {
    position: sticky; top: 0; z-index: 10;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 14px 16px;
    /* Réserve la zone de sécurité iPhone (horloge / batterie / encoche) */
    padding-top: calc(14px + env(safe-area-inset-top));
    display: flex; align-items: center; justify-content: space-between;
}
header.topbar h1 { font-size: 18px; font-weight: 600; }
header.topbar .meta { font-size: 12px; color: var(--text-dim); }

main { padding: 16px; max-width: 760px; margin: 0 auto; }

/* ---- Cartes ---- */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 12px;
}
.card .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card .nom { font-weight: 600; }
.card .ticker { color: var(--text-dim); font-size: 12px; }

/* ---- Chiffres / variations ---- */
.big { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
.pos { color: var(--green); }
.neg { color: var(--red); }
.var-line { display: flex; gap: 14px; font-size: 13px; color: var(--text-dim); margin-top: 4px; }

/* ---- Badges signaux ---- */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
}
.badge.ACHETER, .badge.RENFORCER, .badge.CONSERVER { background: rgba(46,204,113,.15); color: var(--green); }
.badge.SURVEILLER                                  { background: rgba(79,140,255,.15);  color: var(--accent); }
.badge.ATTENDRE, .badge.ALLEGER                    { background: rgba(241,196,15,.15);  color: var(--yellow); }
.badge.EVITER,  .badge.VENDRE                      { background: rgba(231,76,60,.15);   color: var(--red); }
.badge.none { background: var(--bg-elev); color: var(--text-dim); }

/* ---- Boutons ---- */
button, .btn {
    font: inherit; cursor: pointer;
    background: var(--bg-elev); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px;
    padding: 8px 14px;
}
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.small { padding: 5px 10px; font-size: 13px; }
button:disabled { opacity: .55; cursor: default; }
.actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* ---- Formulaires ---- */
label { display: block; font-size: 13px; color: var(--text-dim); margin: 10px 0 4px; }
input, select, textarea {
    width: 100%; font: inherit;
    background: var(--bg-elev); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px;
}
textarea { min-height: 64px; resize: vertical; }

/* ---- Navigation basse ---- */
nav.tabbar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
    display: flex; background: var(--bg-card); border-top: 1px solid var(--border);
}
nav.tabbar a {
    flex: 1; text-align: center; padding: 11px 4px 14px;
    color: var(--text-dim); font-size: 11px;
}
nav.tabbar a .ico { display: block; font-size: 20px; line-height: 1.2; }
nav.tabbar a.active { color: var(--accent); }

/* ---- Divers ---- */
.muted { color: var(--text-dim); }
.center { text-align: center; }
.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-dim); margin: 18px 0 8px; }
.detail-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; }
.detail-grid dt { color: var(--text-dim); }
.spinner { text-align: center; color: var(--text-dim); padding: 30px 0; }

/* Petit indicateur d'analyse en cours (sous la valeur d'un titre) */
.analyse-encours { display: flex; align-items: center; justify-content: flex-end; gap: 6px;
    font-size: 12px; color: var(--accent); margin-top: 6px; }
.mini-spin { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--border);
    border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Écran de connexion ---- */
.login-wrap { max-width: 320px; margin: 18vh auto 0; text-align: center; }
.login-wrap h1 { margin-bottom: 18px; }
.login-wrap input { margin-bottom: 12px; }
.login-error { color: var(--red); font-size: 13px; min-height: 18px; }