/* AutoCryptoInvest — feuille de style de l'interface.
   Direction : un poste de pilotage, pas une bourse. Une famille (Barlow, deux largeurs), des
   règles plutôt que des boîtes, une seule zone mise en valeur par écran (le bandeau de pilotage),
   la couleur réservée au sens : cuivre = action, vert/rouge = argent gagné/perdu, sur des chiffres.
   Chargée après Bootstrap 5.3 (data-bs-theme). Deux thèmes par variables. Aucune valeur métier. */

/* ---------- 1. Jetons ---------- */
:root {
    --bg: #111823;
    --panel: #182130;
    --panel-2: #1f2a3b;
    --line: #26324a;
    --line-strong: #344360;
    --text: #eef1f6;
    --text-2: #a4afc2;
    --text-3: #7583a0;
    --accent: #e08a3c;
    --accent-ink: #ffb066;
    --on-accent: #1a1006;
    --up: #2bd48a;
    --down: #ff5c5c;
    --warn: #f0b429;
    --info: #7fa6ff;
    --accent-soft: rgba(224, 138, 60, 0.14);
    --up-soft: rgba(43, 212, 138, 0.12);
    --down-soft: rgba(255, 92, 92, 0.12);
    --warn-soft: rgba(240, 180, 41, 0.14);
    --info-soft: rgba(127, 166, 255, 0.14);
    --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    --radius: 6px;
    --font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
    --nav-h: 54px;

    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-body-font-family: var(--font);
    --bs-body-font-size: 0.9375rem;
    --bs-body-line-height: 1.45;
    --bs-secondary-color: var(--text-2);
    --bs-tertiary-color: var(--text-3);
    --bs-emphasis-color: var(--text);
    --bs-border-color: var(--line);
    --bs-link-color: var(--accent-ink);
    --bs-link-hover-color: var(--text);
    --bs-link-color-rgb: 255, 176, 102;
    --bs-link-hover-color-rgb: 238, 241, 246;
    --bs-primary: var(--accent);
    --bs-primary-rgb: 224, 138, 60;
    --bs-success-rgb: 43, 212, 138;
    --bs-danger-rgb: 255, 92, 92;
    --bs-warning-rgb: 240, 180, 41;
    --bs-info-rgb: 127, 166, 255;
    --bs-secondary-bg: var(--panel-2);
    --bs-tertiary-bg: var(--panel);
    --bs-heading-color: var(--text);
    --bs-code-color: var(--accent-ink);
    --bs-focus-ring-color: rgba(224, 138, 60, 0.4);
}

[data-theme="light"] {
    --bg: #f3f5f8;
    --panel: #ffffff;
    --panel-2: #eef1f5;
    --line: #dbe1ea;
    --line-strong: #c3ccda;
    --text: #131a26;
    --text-2: #4c5a6d;
    --text-3: #6b7890;
    --accent: #c9702a;
    --accent-ink: #a6541a;
    --on-accent: #ffffff;
    --up: #158f5f;
    --down: #d83a3a;
    --warn: #a86a00;
    --info: #2f5fd0;
    --accent-soft: rgba(201, 112, 42, 0.14);
    --up-soft: rgba(21, 143, 95, 0.12);
    --down-soft: rgba(216, 58, 58, 0.12);
    --warn-soft: rgba(168, 106, 0, 0.14);
    --info-soft: rgba(47, 95, 208, 0.12);
    --shadow: 0 12px 40px rgba(19, 26, 38, 0.14);
    --bs-link-color: var(--accent-ink);
    --bs-link-hover-color: var(--text);
    --bs-link-color-rgb: 166, 84, 26;
    --bs-link-hover-color-rgb: 19, 26, 38;
    --bs-success-rgb: 21, 143, 95;
    --bs-danger-rgb: 216, 58, 58;
    --bs-warning-rgb: 168, 106, 0;
    --bs-info-rgb: 47, 95, 208;
}

/* ---------- 2. Base ---------- */
html { scroll-padding-top: calc(var(--nav-h) + 12px); }
body { background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; letter-spacing: 0; line-height: 1.15; }
a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
.nav a, .navbar a, .btn, .page-link, .dropdown-item, a.sym, .no-underline { text-decoration: none; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85em; color: var(--accent-ink); background: var(--panel-2); padding: 0.1em 0.35em; border-radius: 4px; }
.num, .table-data td, .big, .fig { font-variant-numeric: tabular-nums; }
.small, small { font-size: 0.8125rem; }
.up { color: var(--up) !important; }
.down { color: var(--down) !important; }
.muted { color: var(--text-3) !important; }
.text-muted, .text-body-secondary { color: var(--text-2) !important; }
.text-body-tertiary { color: var(--text-3) !important; }
.text-success { color: var(--up) !important; }
.text-danger { color: var(--down) !important; }
.text-warning { color: var(--warn) !important; }
.text-info { color: var(--info) !important; }
.label { font-size: 0.8125rem; color: var(--text-3); }
.fig { font-family: var(--font-display); font-weight: 600; }
.big { font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; line-height: 1; letter-spacing: -0.01em; }
.big small, .big .unit { font-size: 0.45em; font-weight: 500; color: var(--text-3); margin-left: 0.15em; }
[aria-hidden="true"].fa, [aria-hidden="true"].fas { pointer-events: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Onglets rendus dans un formulaire (réglages) : Bootstrap ne masque que les enfants directs de .tab-content */
.tab-content > form > .tab-pane { display: none; }
.tab-content > form > .tab-pane.active { display: block; }

/* ---------- 3. Barre de navigation ---------- */
.app-header { position: sticky; top: 0; z-index: 1030; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.app-header .navbar { min-height: var(--nav-h); padding: 0.2rem 0; --bs-navbar-color: var(--text-2); --bs-navbar-hover-color: var(--text); --bs-navbar-active-color: var(--text); --bs-navbar-brand-color: var(--text); --bs-navbar-brand-hover-color: var(--text); }
.app-header .navbar-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; display: flex; align-items: center; gap: 0.5rem; }
.brand-mark { width: 26px; height: 26px; border-radius: 6px; background: var(--accent); display: inline-grid; place-items: center; color: var(--on-accent); font-family: var(--font-display); font-weight: 800; font-size: 0.85rem; }
.app-header .nav-link { padding: 0.4rem 0.65rem; font-weight: 500; border-bottom: 2px solid transparent; border-radius: 0; }
.app-header .nav-link.active { color: var(--text); border-bottom-color: var(--accent); }
.app-header .navbar-toggler { border: 1px solid var(--line); }
.app-header .navbar-toggler-icon { background-image: none; width: 1.25em; height: 1.25em; position: relative; }
.app-header .navbar-toggler-icon::before { content: "\2630"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--text); font-size: 1.1rem; }
.nav-tools { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ticker { display: flex; gap: 1.1rem; align-items: baseline; font-size: 0.8125rem; color: var(--text-2); padding-right: 0.5rem; border-right: 1px solid var(--line); }
.ticker-item { display: flex; gap: 0.35rem; align-items: baseline; white-space: nowrap; }
.ticker-symbol { color: var(--text-3); font-weight: 600; }
.ticker-price { color: var(--text); font-weight: 600; }
.ticker-change { font-size: 0.75rem; }
.mode-switch { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.mode-switch .btn { border: 0; border-radius: 0; padding: 0.3rem 0.7rem; font-size: 0.8125rem; font-weight: 600; color: var(--text-2); background: transparent; }
.mode-switch .btn-check:checked + .btn.mode-demo { background: var(--panel-2); color: var(--text); }
.mode-switch .btn-check:checked + .btn.mode-live { background: var(--down-soft); color: var(--down); }
.mode-switch .btn:hover { color: var(--text); }
.icon-btn { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: var(--radius); border: 1px solid var(--line); background: transparent; color: var(--text-2); }
.icon-btn:hover { color: var(--text); border-color: var(--line-strong); }
.dropdown-menu { --bs-dropdown-bg: var(--panel); --bs-dropdown-color: var(--text); --bs-dropdown-link-color: var(--text); --bs-dropdown-link-hover-bg: var(--panel-2); --bs-dropdown-link-hover-color: var(--text); --bs-dropdown-border-color: var(--line); --bs-dropdown-link-active-bg: var(--accent-soft); --bs-dropdown-link-active-color: var(--text); box-shadow: var(--shadow); }

/* ---------- 4. Page ---------- */
.app-main { padding: 1.25rem 0 3rem; max-width: 1520px; }
.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1.5rem; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line); }
.page-title { font-size: 1.6rem; margin: 0; display: flex; align-items: center; gap: 0.6rem; }
.page-title .fa, .page-title .fas { display: none; }
.page-sub { color: var(--text-2); margin: 0.2rem 0 0; font-size: 0.875rem; max-width: 72ch; }

/* Sections : un titre, une règle, un contenu ; pas de boîte */
.section { margin-top: 1.5rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem 1.25rem; flex-wrap: wrap; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); margin-bottom: 0.25rem; }
.section-head h2 { font-size: 1.15rem; margin: 0; display: flex; align-items: baseline; gap: 0.5rem; }
.section-head h2 .count { font-family: var(--font); font-size: 0.8125rem; font-weight: 500; color: var(--text-3); }
.section-head h2 .fas { display: none; }
.section-head .meta { color: var(--text-3); font-size: 0.8125rem; }
.section-actions { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; }
@media (max-width: 1399px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .grid-3 { grid-template-columns: 1fr; } }

/* ---------- 5. Bandeau de pilotage (la seule zone mise en valeur) ---------- */
.pilot { display: grid; grid-template-columns: 1.15fr 1fr 1fr; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow); }
.pilot-cell { padding: 1.1rem 1.35rem 1.15rem; min-width: 0; }
.pilot-cell + .pilot-cell { border-left: 1px solid var(--line); }
@media (max-width: 991px) { .pilot { grid-template-columns: 1fr; } .pilot-cell + .pilot-cell { border-left: 0; border-top: 1px solid var(--line); } }
.pilot .label { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.35rem; }
.pilot .big { margin: 0; }
.pilot .delta { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin-top: 0.3rem; }
.pilot .delta .pct { color: var(--text-3); font-weight: 500; margin-left: 0.35rem; }
.meta-list { display: grid; grid-template-columns: max-content 1fr; gap: 0.15rem 0.9rem; margin: 0.75rem 0 0; font-size: 0.875rem; }
.meta-list dt { color: var(--text-3); font-weight: 500; }
.meta-list dd { margin: 0; color: var(--text); }
.pilot .actions { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.9rem; }
.state { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1; }
.state .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; }
.state.on .dot { background: var(--up); box-shadow: 0 0 0 4px var(--up-soft); animation: pulse 2.2s ease-in-out infinite; }
.state.off { color: var(--text-2); }
.state.protection { color: var(--warn); }
.state.protection .dot { background: var(--warn); }
.state-note { font-size: 0.8125rem; color: var(--text-2); margin-top: 0.35rem; max-width: 42ch; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.health { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
.health .condition { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.health-track { position: relative; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 0.7rem 0 0.2rem; }
.health-track .fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 2px; background: var(--text-2); }
.health-track .fill.up { background: var(--up); }
.health-track .fill.down { background: var(--down); }
.health-track .fill.warn { background: var(--warn); }
.health-track .tick { position: absolute; top: -3px; width: 1px; height: 10px; background: var(--text-3); }
.factors { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.6rem; font-size: 0.8125rem; color: var(--text-2); }
.factors .f { display: inline-flex; gap: 0.35rem; align-items: baseline; }
.factors .f b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.factors .f.unknown b { color: var(--text-3); font-weight: 500; }
.factors .f.neg b { color: var(--down); }
details.more > summary { cursor: pointer; color: var(--text-3); font-size: 0.8125rem; list-style: none; margin-top: 0.6rem; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "▸ "; }
details.more[open] > summary::before { content: "▾ "; }
.factor-detail-list { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--text-2); display: grid; gap: 0.2rem; }
.factor-detail-list b { color: var(--text); font-weight: 600; }

.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem 2rem; margin-top: 0.75rem; }
@media (max-width: 991px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .kpis { grid-template-columns: 1fr; } }
.kpi { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); min-width: 0; }
.kpi .k { font-size: 0.8125rem; color: var(--text-3); }
.kpi .v { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; line-height: 1.1; }
.kpi .sub { font-size: 0.8125rem; color: var(--text-2); }

/* ---------- 6. Bandeaux d'alerte (protection, marché) ---------- */
.banner { display: flex; align-items: flex-start; gap: 0.9rem; padding: 0.8rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--line); border-left-width: 4px; background: var(--panel); margin-bottom: 1rem; }
.banner-icon { display: none; }
.banner-body { flex: 1; min-width: 0; }
.banner-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.banner-text { color: var(--text-2); font-size: 0.875rem; }
.banner-text ul { margin: 0.25rem 0 0; padding-left: 1.1rem; }
.banner-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.banner-demo { border-left-color: var(--info); }
.banner-live { border-left-color: var(--down); }
.banner-live .banner-title { color: var(--down); }
.banner-warn { border-left-color: var(--warn); }
.banner-warn .banner-title { color: var(--warn); }
.banner-danger { border-left-color: var(--down); background: color-mix(in srgb, var(--down-soft) 50%, var(--panel)); }
.banner-danger .banner-title { color: var(--down); }
.alert { --bs-alert-border-color: var(--line); border-radius: var(--radius); }
.alert-success { --bs-alert-bg: var(--up-soft); --bs-alert-color: var(--up); --bs-alert-border-color: color-mix(in srgb, var(--up) 30%, transparent); }
.alert-danger { --bs-alert-bg: var(--down-soft); --bs-alert-color: var(--down); --bs-alert-border-color: color-mix(in srgb, var(--down) 30%, transparent); }
.alert-warning { --bs-alert-bg: var(--warn-soft); --bs-alert-color: var(--warn); --bs-alert-border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.alert-info { --bs-alert-bg: var(--info-soft); --bs-alert-color: var(--info); --bs-alert-border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.alert a { color: inherit; }

/* ---------- 7. Badges : de l'information, jamais de la décoration ---------- */
.badge { font-weight: 600; letter-spacing: 0; padding: 0.25em 0.5em; border-radius: 4px; font-size: 0.75rem; vertical-align: middle; font-family: var(--font); }
.badge-up { background: var(--up-soft); color: var(--up); }
.badge-down { background: var(--down-soft); color: var(--down); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-accent { background: var(--accent-soft); color: var(--accent-ink); }
.badge-neutral { background: var(--panel-2); color: var(--text-2); border: 1px solid var(--line); }
.badge-demo { background: var(--panel-2); color: var(--text-2); border: 1px solid var(--line); }
.badge-live { background: var(--down-soft); color: var(--down); }
.badge.bg-success { background-color: var(--up) !important; color: #06281a; }
.badge.bg-danger { background-color: var(--down) !important; color: #fff; }
.badge.bg-warning { background-color: var(--warn) !important; color: #1a1000; }
.badge.bg-info { background-color: var(--info) !important; color: #fff; }
.badge.bg-secondary, .badge.bg-dark { background-color: var(--panel-2) !important; color: var(--text-2); }
.badge.bg-primary { background-color: var(--accent) !important; color: var(--on-accent); }

/* ---------- 8. Boutons ---------- */
.btn { --bs-btn-border-radius: var(--radius); font-weight: 600; font-family: var(--font); }
.btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-color: var(--on-accent); --bs-btn-hover-bg: #eb9b52; --bs-btn-hover-border-color: #eb9b52; --bs-btn-hover-color: var(--on-accent); --bs-btn-active-bg: #c97a30; --bs-btn-active-border-color: #c97a30; --bs-btn-active-color: var(--on-accent); --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent); --bs-btn-disabled-color: var(--on-accent); }
.btn-outline-primary { --bs-btn-color: var(--accent-ink); --bs-btn-border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); --bs-btn-hover-bg: var(--accent-soft); --bs-btn-hover-color: var(--accent-ink); --bs-btn-hover-border-color: var(--accent); --bs-btn-active-bg: var(--accent-soft); --bs-btn-active-color: var(--accent-ink); --bs-btn-active-border-color: var(--accent); }
.btn-secondary, .btn-outline-secondary { --bs-btn-color: var(--text-2); --bs-btn-bg: transparent; --bs-btn-border-color: var(--line-strong); --bs-btn-hover-bg: var(--panel-2); --bs-btn-hover-color: var(--text); --bs-btn-hover-border-color: var(--line-strong); --bs-btn-active-bg: var(--panel-2); --bs-btn-active-color: var(--text); --bs-btn-active-border-color: var(--line-strong); }
.btn-success { --bs-btn-bg: var(--up); --bs-btn-border-color: var(--up); --bs-btn-color: #06281a; --bs-btn-hover-bg: #24bd7a; --bs-btn-hover-border-color: #24bd7a; --bs-btn-hover-color: #06281a; --bs-btn-active-bg: #1ea86b; --bs-btn-active-color: #fff; }
.btn-danger { --bs-btn-bg: var(--down); --bs-btn-border-color: var(--down); --bs-btn-color: #fff; --bs-btn-hover-bg: #e64a4a; --bs-btn-hover-border-color: #e64a4a; --bs-btn-active-bg: #cf3b3b; }
.btn-outline-danger { --bs-btn-color: var(--down); --bs-btn-border-color: color-mix(in srgb, var(--down) 55%, var(--line)); --bs-btn-hover-bg: var(--down-soft); --bs-btn-hover-color: var(--down); --bs-btn-hover-border-color: var(--down); --bs-btn-active-bg: var(--down-soft); --bs-btn-active-color: var(--down); }
.btn-outline-success { --bs-btn-color: var(--up); --bs-btn-border-color: color-mix(in srgb, var(--up) 55%, var(--line)); --bs-btn-hover-bg: var(--up-soft); --bs-btn-hover-color: var(--up); --bs-btn-hover-border-color: var(--up); --bs-btn-active-bg: var(--up-soft); --bs-btn-active-color: var(--up); }
.btn-link { --bs-btn-color: var(--accent-ink); --bs-btn-hover-color: var(--text); }
.btn-sm { font-size: 0.8125rem; padding: 0.3rem 0.65rem; }
.btn-xs { font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 4px; }
.btn .fas { font-size: 0.9em; }
.btn-group .btn-outline-secondary.active { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }

/* ---------- 9. Formulaires ---------- */
.form-control, .form-select { background-color: var(--panel); color: var(--text); border-color: var(--line-strong); border-radius: var(--radius); }
.form-control:focus, .form-select:focus { background-color: var(--panel); color: var(--text); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-control::placeholder { color: var(--text-3); }
.form-control:disabled, .form-control[readonly] { background-color: var(--panel-2); color: var(--text-2); }
.input-group-text { background: var(--panel-2); color: var(--text-2); border-color: var(--line-strong); }
.form-label { font-weight: 600; font-size: 0.875rem; margin-bottom: 0.3rem; color: var(--text); }
.form-text, .field-help { color: var(--text-2); font-size: 0.8125rem; line-height: 1.4; max-width: 60ch; }
.field-help .range { color: var(--text-3); white-space: nowrap; }
.form-check-input { background-color: var(--panel-2); border-color: var(--line-strong); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }
.form-switch .form-check-input { width: 2.4em; }
.is-invalid, .form-control.is-invalid { border-color: var(--down) !important; }
.invalid-feedback { color: var(--down); font-size: 0.8125rem; }
.form-control-lg.code-input { font-family: var(--font-display); letter-spacing: 0.35em; font-size: 1.6rem; }

/* ---------- 10. Tableaux ---------- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--line); --bs-table-hover-bg: var(--panel); --bs-table-hover-color: var(--text); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: 0.55rem 0.6rem; background-color: transparent; }
.table thead th { font-size: 0.8125rem; font-weight: 500; color: var(--text-3); border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table-data { font-size: 0.9rem; }
.table-data td { vertical-align: middle; }
.table-data .sym { font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: 0; }
a.sym.js-chart { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--line-strong); cursor: pointer; }
a.sym.js-chart:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }
#chartModal .btn-group .btn.active { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.table-data .sub { display: block; font-size: 0.75rem; color: var(--text-3); }
.table-data th.num, .table-data td.num { text-align: right; }
.table-data tr.is-muted td { color: var(--text-3); }
.table-data tr.is-muted .sym { color: var(--text-2); font-weight: 500; }
.table-data tr.is-muted .up, .table-data tr.is-muted .down { color: var(--text-3) !important; }
.table-data tr.is-lead td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.table caption { caption-side: top; color: var(--text-3); font-size: 0.8125rem; padding: 0.5rem 0.6rem; }
.empty { text-align: center; color: var(--text-3); padding: 1.6rem 1rem; font-size: 0.9rem; }
.empty .fas { display: none; }
.empty a { color: var(--accent-ink); }
@media (max-width: 767px) { .hide-sm { display: none !important; } }
@media (max-width: 991px) { .hide-md { display: none !important; } }

/* ---------- 11. Cartes (modales, authentification, réglages) ---------- */
.card { --bs-card-bg: var(--panel); --bs-card-border-color: var(--line); --bs-card-cap-bg: transparent; --bs-card-color: var(--text); border-radius: var(--radius); }
.card-header { border-bottom: 1px solid var(--line); padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.card-header h2, .card-header h5 { font-size: 1.05rem; margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.card-header h2 .fas, .card-header h5 .fas { display: none; }
.card-body { padding: 1rem; }
.card-footer { background: transparent; border-top: 1px solid var(--line); color: var(--text-2); font-size: 0.8125rem; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; background: var(--panel-2); border-radius: var(--radius); padding: 0.75rem; }
.kv .k { font-size: 0.75rem; color: var(--text-3); }
.kv .v { font-weight: 600; font-family: var(--font-display); font-size: 1.05rem; }
dl.spec { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 0; font-size: 0.875rem; }
dl.spec dt { color: var(--text-3); font-weight: 500; }
dl.spec dd { margin: 0; }

/* ---------- 12. Jauge d'une position (stop → cible) ---------- */
.range { position: relative; padding: 0 0 1.1rem; min-width: 190px; }
.range-track { position: relative; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--down-soft), var(--line-strong) 50%, var(--up-soft)); }
.range-mark { position: absolute; top: -4px; width: 1px; height: 12px; background: var(--text-3); transform: translateX(-50%); }
.range-mark.be { background: var(--warn); }
.range-mark.ts { background: var(--info); }
.range-mark span { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); font-size: 0.62rem; color: var(--text-3); white-space: nowrap; }
.range-cursor { position: absolute; top: -5px; width: 14px; height: 14px; border-radius: 50%; transform: translateX(-50%); border: 2px solid var(--panel); background: var(--text-3); }
.range-cursor.up { background: var(--up); }
.range-cursor.down { background: var(--down); }
.range-cursor.warn { background: var(--warn); }
.range-cursor span { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); font-size: 0.72rem; font-weight: 600; white-space: nowrap; color: var(--text); font-family: var(--font-display); }
.range-ends { display: flex; justify-content: space-between; font-size: 0.68rem; font-weight: 600; margin-bottom: 0.9rem; }
.range-ends .sl { color: var(--down); }
.range-ends .tp { color: var(--up); }

/* ---------- 13. Réglages ---------- */
.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 991px) { .settings-layout { grid-template-columns: 1fr; } }
.settings-nav { position: sticky; top: calc(var(--nav-h) + 12px); }
@media (max-width: 991px) { .settings-nav { position: static; } .settings-nav .nav { flex-direction: row !important; flex-wrap: wrap; gap: 0.25rem; } }
.settings-nav .nav-link { color: var(--text-2); border-left: 2px solid var(--line); border-radius: 0; padding: 0.45rem 0.85rem; font-weight: 500; display: flex; align-items: center; gap: 0.6rem; text-align: left; width: 100%; }
@media (max-width: 991px) { .settings-nav .nav-link { width: auto; border-left: 0; border-bottom: 2px solid var(--line); } }
.settings-nav .nav-link .fas { display: none; }
.settings-nav .nav-link:hover { color: var(--text); }
.settings-nav .nav-link.active { color: var(--text); border-left-color: var(--accent); }
@media (max-width: 991px) { .settings-nav .nav-link.active { border-bottom-color: var(--accent); } }
.settings-nav .nav-link.has-error::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--down); margin-left: auto; }
.settings-save { margin-top: 1rem; padding-top: 1rem; }
.profile-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 1.1rem; height: 100%; display: flex; flex-direction: column; gap: 0.5rem; }
.profile-card.is-active { border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
.profile-card .profile-icon { display: none; }
.profile-card h3 { font-size: 1.3rem; }
.profile-card ul { margin: 0; padding-left: 1.1rem; font-size: 0.8125rem; color: var(--text-2); }
.profile-card .profile-actions { margin-top: auto; padding-top: 0.5rem; }
.field .field-current { display: none; }

/* ---------- 14. Modales et toasts ---------- */
.modal-content { --bs-modal-bg: var(--panel); --bs-modal-color: var(--text); --bs-modal-border-color: var(--line-strong); --bs-modal-header-border-color: var(--line); --bs-modal-footer-border-color: var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.modal-backdrop { --bs-backdrop-opacity: 0.65; }
.modal-title { font-size: 1.15rem; }
.toast-container { z-index: 1090; }
.toast { --bs-toast-bg: var(--panel); --bs-toast-color: var(--text); --bs-toast-border-color: var(--line-strong); --bs-toast-header-bg: transparent; --bs-toast-header-color: var(--text); --bs-toast-header-border-color: var(--line); box-shadow: var(--shadow); border-left: 4px solid var(--line-strong); }
.toast.toast-success { border-left-color: var(--up); }
.toast.toast-error { border-left-color: var(--down); }
.toast.toast-warning { border-left-color: var(--warn); }
.toast.toast-info { border-left-color: var(--info); }
:root:not([data-theme="light"]) .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* ---------- 15. Divers ---------- */
.services-line { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; align-items: center; margin-top: 2rem; padding-top: 0.75rem; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--text-3); }
.services-line .svc { display: inline-flex; gap: 0.35rem; align-items: center; }
.services-line .svc::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.services-line .svc.ok::before { background: var(--up); opacity: 0.7; }
.services-line .svc.warn { color: var(--warn); }
.services-line .svc.warn::before { background: var(--warn); }
.services-line .svc.error { color: var(--down); }
.services-line .svc.error::before { background: var(--down); }
.svc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.svc-dot.ok { background: var(--up); }
.svc-dot.warn { background: var(--warn); }
.svc-dot.fail { background: var(--down); }
.live-status { position: fixed; right: 12px; bottom: 12px; z-index: 1040; font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text-2); display: inline-flex; align-items: center; gap: 0.4rem; }
.live-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.live-status.ok .dot { background: var(--up); }
.live-status.warn .dot { background: var(--warn); }
.live-status.off .dot { background: var(--down); }
@media (max-width: 575px) { .live-status span:last-child { display: none; } }
.chart-box { position: relative; height: 320px; width: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.8125rem; color: var(--text-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 0.35rem; vertical-align: middle; }
.pagination { --bs-pagination-bg: transparent; --bs-pagination-color: var(--text-2); --bs-pagination-border-color: var(--line); --bs-pagination-hover-bg: var(--panel-2); --bs-pagination-hover-color: var(--text); --bs-pagination-hover-border-color: var(--line); --bs-pagination-active-bg: var(--accent); --bs-pagination-active-border-color: var(--accent); --bs-pagination-active-color: var(--on-accent); --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-color: var(--text-3); --bs-pagination-disabled-border-color: var(--line); --bs-pagination-focus-box-shadow: 0 0 0 3px var(--accent-soft); }
.tooltip { --bs-tooltip-bg: var(--panel-2); --bs-tooltip-color: var(--text); --bs-tooltip-opacity: 1; --bs-tooltip-max-width: 300px; font-size: 0.8rem; font-family: var(--font); }
.tooltip-inner { text-align: left; border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
.progress { --bs-progress-bg: var(--panel-2); --bs-progress-bar-bg: var(--accent); height: 6px; border-radius: 3px; }
hr { border-color: var(--line); opacity: 1; }
.nav-pills { --bs-nav-pills-link-active-bg: transparent; --bs-nav-pills-link-active-color: var(--text); --bs-nav-link-color: var(--text-2); --bs-nav-link-hover-color: var(--text); }
.doc h2 { font-size: 1.35rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.doc h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.doc h3 { font-size: 1.05rem; margin-top: 1.25rem; }
.doc p, .doc li { color: var(--text-2); max-width: 78ch; }
.doc strong { color: var(--text); }
.doc table { font-size: 0.875rem; }
.doc-nav { position: sticky; top: calc(var(--nav-h) + 12px); }
.doc-nav .nav-link { border-left: 2px solid var(--line); border-radius: 0; padding: 0.35rem 0.85rem; font-size: 0.875rem; }
.doc-nav .nav-link:hover { border-left-color: var(--accent); }

tr.js-sheet { cursor: pointer; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 0.75rem 0.9rem; font-size: 0.875rem; }
.timeline li::before { content: ""; position: absolute; left: calc(-1rem - 5px); top: 0.45em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.timeline .when { display: block; font-size: 0.75rem; color: var(--text-3); }
.timeline .sub { display: block; font-size: 0.75rem; color: var(--text-2); margin-top: 0.15rem; }
.calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.calendar .wd { font-size: 0.65rem; color: var(--text-3); text-align: center; }
.calendar .day { aspect-ratio: 1; border-radius: 4px; display: grid; place-items: center; font-size: 0.7rem; font-variant-numeric: tabular-nums; color: var(--text-2); background: var(--panel); border: 1px solid var(--line); }
.calendar .day.pad { background: transparent; border-color: transparent; }
.calendar .day.none { color: var(--text-3); }
.calendar .day.up { background: color-mix(in srgb, var(--up) calc(var(--a) * 100%), var(--panel)); color: var(--text); border-color: transparent; }
.calendar .day.down { background: color-mix(in srgb, var(--down) calc(var(--a) * 100%), var(--panel)); color: var(--text); border-color: transparent; }
.calendar .day.flat { border-color: var(--line-strong); }
.settings-nav .nav-link.has-diff::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); margin-left: auto; }

/* ---------- 16. Authentification et accueil ---------- */
.auth-page .app-main { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - var(--nav-h)); padding: 2rem 1rem; }
.auth-card { width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); }
.auth-card .brand-mark { width: 40px; height: 40px; font-size: 1.1rem; margin-bottom: 1rem; }
.auth-card h1 { font-size: 1.6rem; margin-bottom: 0.25rem; }
.auth-card .lead { font-size: 0.9rem; color: var(--text-2); margin-bottom: 1.5rem; }
.auth-card .form-control { padding: 0.6rem 0.8rem; }
.hero { max-width: 860px; margin: 0 auto; padding: 4rem 1rem 3rem; }
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); font-weight: 700; line-height: 0.98; letter-spacing: -0.02em; margin-bottom: 1rem; max-width: 16ch; }
.hero .lead { color: var(--text-2); font-size: 1.15rem; max-width: 52ch; }
.hero-facts { margin: 2.5rem 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.hero-facts .fact { display: grid; grid-template-columns: 220px 1fr; gap: 0.5rem 1.5rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
@media (max-width: 575px) { .hero-facts .fact { grid-template-columns: 1fr; } }
.hero-facts .fact strong { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }
.hero-facts .fact span { color: var(--text-2); }
.hero .disclaimer { color: var(--text-3); font-size: 0.8125rem; margin-top: 2rem; max-width: 60ch; }

/* ---------- 17. Impression ---------- */
@media print { .app-header, .live-status, .pilot .actions, .banner-actions, .section-actions { display: none !important; } body { background: #fff; color: #000; } }