* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  /* Design system « VaultX ». Thème NUIT par défaut (:root) ; thème CLAIR via
     [data-theme="light"] plus bas. Tout passe par variables → bascule instantanée.
     Alias legacy : --navy = couleur de titre, --blue = accent, pour que les
     sélecteurs existants basculent tout seuls. */
  --bg:#0b0712; --bg2:#0e0918;
  --card:#171125; --card2:#1e1636; --card3:#241b3f;
  --text:#ece9f5; --head:#f6f4fc; --muted:#9d92bd; --muted2:#7d7499;
  --accent:#a855f7; --accent2:#7c3aed; --accent-soft:rgba(139,92,246,.16);
  --green:#34d399; --red:#fb7185; --amber:#fbbf24; --cyan:#38bdf8;
  --border:rgba(255,255,255,.07); --border2:rgba(255,255,255,.13);
  --soft:rgba(255,255,255,.04); --hover:rgba(255,255,255,.08); --track:rgba(255,255,255,.09);
  --side-bg:linear-gradient(180deg,#130d20,#0a0610);
  --hero-bg:linear-gradient(140deg,rgba(124,58,237,.42),rgba(76,29,149,.20));
  --active-bg:linear-gradient(90deg,rgba(139,92,246,.32),rgba(139,92,246,.06));
  --glow:radial-gradient(120% 60% at 0% 0%,rgba(139,92,246,.14),transparent 55%);
  --overlay:rgba(11,7,18,.92); --scrim:rgba(5,3,10,.7);
  --navy:#f6f4fc; --navy2:#120c1e; --blue:#c4b5fd;
  --radius:14px;
  --shadow:0 2px 10px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35);
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
[data-theme="light"]{
  --bg:#f5f4fb; --bg2:#edeaf6;
  --card:#ffffff; --card2:#f5f3fc; --card3:#ece8f8;
  --text:#332c4a; --head:#1b1530; --muted:#6b6488; --muted2:#78748f;   /* muted2 remonté pour le contraste AA en clair */
  --accent:#7c3aed; --accent2:#6d28d9; --accent-soft:rgba(124,58,237,.11);
  --green:#059669; --red:#e11d48; --amber:#c2740a; --cyan:#0891b2;
  --border:rgba(30,20,60,.10); --border2:rgba(30,20,60,.17);
  --soft:rgba(30,20,60,.035); --hover:rgba(30,20,60,.06); --track:rgba(30,20,60,.10);
  --side-bg:linear-gradient(180deg,#ffffff,#f4f2fb);
  --hero-bg:linear-gradient(140deg,rgba(124,58,237,.15),rgba(168,85,247,.05));
  --active-bg:linear-gradient(90deg,rgba(124,58,237,.13),rgba(124,58,237,.03));
  --glow:radial-gradient(120% 60% at 0% 0%,rgba(124,58,237,.07),transparent 55%);
  --overlay:rgba(245,244,251,.92); --scrim:rgba(20,14,40,.35);
  --navy:#1b1530; --blue:#6d28d9;
  --shadow:0 1px 3px rgba(30,20,60,.09), 0 1px 2px rgba(30,20,60,.05);
}
body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--text);
  background-image:var(--glow); background-attachment:fixed;
  padding-left:216px; min-height:100vh; }
b, strong{ color:var(--head); font-weight:600; }
::selection{ background:rgba(168,85,247,.35); }
input, select, textarea{ background:var(--card2); color:var(--text); border:1px solid var(--border); }
input::placeholder{ color:var(--muted2); }

/* SIDEBAR (ex-topnav, convertie en barre latérale fixe — aucun wrap HTML par page) */
.sidebar{ position:fixed; top:0; left:0; width:216px; height:100vh; z-index:40; overflow-y:auto;
  background:var(--side-bg); border-right:1px solid var(--border);
  padding:18px 14px; display:flex; flex-direction:column; gap:4px; }
.brand{ display:flex; align-items:center; gap:10px; padding:4px 8px 14px; }
.brand .logo{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px;
  background:linear-gradient(140deg,var(--accent),var(--accent2)); color:#fff; font-size:17px; }
.brand-name{ font-weight:600; font-size:16px; color:var(--head); }
.menu{ display:flex; flex-direction:column; gap:2px; }
.menu a{ display:flex; align-items:center; gap:10px; color:var(--muted); text-decoration:none; font-weight:500;
  font-size:14px; cursor:pointer; padding:9px 12px; border-radius:10px; }
.menu a:hover{ color:var(--head); background:var(--soft); }
.menu a.active{ color:var(--head); background:var(--active-bg); }
.side-foot{ margin-top:auto; padding-top:12px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
.theme-toggle{ display:flex; align-items:center; gap:9px; width:100%; padding:9px 12px; border-radius:10px;
  background:var(--soft); border:1px solid var(--border); color:var(--text); font-size:13px; cursor:pointer; }
.theme-toggle:hover{ background:var(--hover); }

/* PAGE */
.page{ max-width:1240px; margin:0 auto; padding:28px 28px 64px; }
.page-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px; }
.page-head h1{ font-size:28px; font-weight:600; color:var(--head); }
.sub{ color:var(--muted); margin-top:4px; }
.head-actions{ display:flex; gap:12px; }

/* BUTTONS */
.btn{ border:1px solid var(--border2); background:var(--soft); color:var(--text); border-radius:10px;
  padding:10px 17px; font-weight:500; font-size:14px; cursor:pointer; }
.btn:hover{ background:var(--hover); }
.btn-primary{ background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; border:none; }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-light{ background:var(--soft); color:var(--text); border:1px solid var(--border); }
.btn-outline{ background:transparent; color:var(--accent); border:1px solid var(--accent); }
.btn.sm{ padding:8px 14px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* KPI */
.kpi-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:22px; }
.kpi-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; }
.kpi-card.hero{ background:var(--hero-bg); border-color:rgba(168,85,247,.35); }
.kpi-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.kpi-icon{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-size:16px; }
.kpi-icon.green{ background:rgba(52,211,153,.15); } .kpi-icon.purple{ background:var(--accent-soft); }
.kpi-icon.teal{ background:rgba(45,212,191,.15); } .kpi-icon.amber{ background:rgba(251,191,36,.15); } .kpi-icon.pink{ background:rgba(244,114,182,.15); }
.kpi-label{ color:var(--muted); font-size:13px; }
.kpi-value{ font-size:24px; font-weight:600; color:var(--head); font-family:var(--mono); font-variant-numeric:tabular-nums; }
.kpi-eur{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:14px; color:var(--muted); margin-top:3px; }
.kpi-pct{ font-size:11px; color:var(--muted); margin-top:3px; }

/* CARD */
.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; margin-bottom:22px; }
.card h2{ font-size:18px; font-weight:600; color:var(--head); margin-bottom:14px; }

/* TABS */
.tabs{ display:flex; gap:22px; border-bottom:1px solid var(--border); margin-bottom:16px; padding-bottom:8px; }
.tabs a{ font-size:14px; color:var(--muted); cursor:pointer; }
.tabs a.active{ color:var(--accent); font-weight:500; }
.tabs a:not(.disabled){ cursor:pointer; }
.tabs a.disabled{ opacity:.5; cursor:default; }
.chart-wrap{ height:320px; position:relative; }
.zoom-bar{ display:flex; gap:6px; margin:4px 0 8px; flex-wrap:wrap; }
.zoom-bar button{ font-size:12px; padding:3px 11px; border:1px solid var(--border); border-radius:7px; background:var(--soft); color:var(--text); cursor:pointer; }
.zoom-bar button:hover{ background:var(--hover); }
.zoom-bar::before{ content:'zoom :'; font-size:12px; color:var(--muted); align-self:center; margin-right:2px; }
.cashout-scroll{ max-height:340px; overflow-y:auto; border:1px solid var(--border); border-radius:10px; }
.cashout-table{ width:100%; border-collapse:collapse; font-size:14px; }
.cashout-table th{ text-align:left; padding:9px 14px; background:var(--card2); color:var(--muted); font-weight:500; position:sticky; top:0; }
.cashout-table td{ padding:8px 14px; border-top:1px solid var(--border); font-variant-numeric:tabular-nums; }
.cashout-table tbody tr:hover{ background:var(--soft); }

/* FILTERS */
.filters-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.filters-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.filters-row input[type=text], .filters-row select{ padding:10px 12px; border:1px solid var(--border); border-radius:9px; font-size:14px; background:var(--card2); color:var(--text); }
.filters-row input[type=text]{ flex:1; min-width:200px; }
.apr-range{ display:flex; align-items:center; gap:6px; }
.apr-range label{ font-size:12px; color:var(--muted); margin-right:4px; }
.apr-range input{ width:64px; padding:8px; border:1px solid var(--border); border-radius:8px; }

/* POOLS */
.pools-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.pools-head h2{ font-size:20px; color:var(--head); }
.count{ background:var(--accent-soft); color:var(--blue); padding:4px 12px; border-radius:20px; font-size:13px; font-weight:500; }
.pools-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

/* POOL CARD */
.pool-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; display:flex; flex-direction:column; gap:14px; }
.card-top{ display:flex; justify-content:space-between; align-items:center; }
.badge{ font-size:12px; font-weight:500; padding:4px 10px; border-radius:8px; }
.badge-ferme{ background:rgba(251,113,133,.15); color:var(--red); }
.badge-date{ background:rgba(251,113,133,.13); color:var(--red); font-weight:500; }
.badge-proto{ background:var(--accent-soft); color:var(--blue); }
.badge-chain{ background:rgba(251,191,36,.15); color:var(--amber); }
.card-pair{ display:flex; justify-content:space-between; align-items:flex-start; }
.pair-id{ display:flex; gap:10px; }
.coins{ font-size:26px; }
.pair-name{ font-weight:600; font-size:17px; color:var(--head); }
.pair-prices{ font-size:12px; color:var(--muted); margin-top:2px; line-height:1.5; }
.pair-badges{ display:flex; flex-direction:column; gap:6px; align-items:flex-end; }

.metrics-box{ background:var(--card2); border-radius:10px; padding:12px; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; text-align:center; }
.metrics-box > div{ display:flex; flex-direction:column; gap:3px; }
.m-label{ font-size:11px; color:var(--muted); }
.m-val{ font-weight:600; font-size:14px; font-variant-numeric:tabular-nums; }
.m-val.blue{ color:var(--blue); } .m-val.green{ color:var(--green); }
.m-delta{ font-size:11px; }

.position-box{ background:rgba(52,211,153,.07); border:1px solid rgba(52,211,153,.18); border-radius:10px; padding:12px; }
.pos-head{ display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--green); font-weight:500; margin-bottom:10px; }
.range.in{ color:var(--green); font-weight:600; }
.range.out{ color:var(--red); font-weight:600; }
.pos-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px 6px; }
.pos-grid > div{ display:flex; flex-direction:column; gap:2px; }
.pos-grid .m-label{ font-size:11px; }
.pos-grid span:not(.m-label){ font-weight:600; font-size:13px; font-variant-numeric:tabular-nums; }

.pos{ color:var(--green); } .neg{ color:var(--red); } .muted{ color:var(--muted); }
.warn{ color:var(--amber); cursor:help; font-size:11px; }

.card-actions{ display:flex; justify-content:space-between; gap:10px; margin-top:4px; }
.card-actions .btn{ flex:1; }
.card-foot{ text-align:center; font-size:12px; color:var(--amber); }

@media (max-width:1000px){ .kpi-row{ grid-template-columns:repeat(2,1fr); } .pools-grid{ grid-template-columns:1fr; } }

/* MODAL DÉTAIL */
.modal-overlay{ position:fixed; inset:0; background:var(--scrim); display:none; align-items:flex-start; justify-content:center; padding:30px; z-index:50; overflow:auto; }
.modal{ background:var(--card); border:1px solid var(--border); border-radius:18px; max-width:1100px; width:100%; padding:26px; position:relative; box-shadow:0 24px 70px rgba(0,0,0,.6); }
.modal-close{ position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:50%; border:1px solid var(--border); background:var(--card2); color:var(--text); cursor:pointer; font-size:15px; }
.modal-head{ display:grid; grid-template-columns:1fr auto auto; gap:16px; align-items:start; margin-bottom:20px; padding-right:40px; }
.modal-head h2{ font-size:22px; color:var(--head); }
.info-box{ background:var(--card2); border-radius:10px; padding:12px 14px; font-size:13px; color:var(--text); line-height:1.7; word-break:break-all; }
.modal-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
.mkpi{ border-radius:12px; padding:16px; text-align:center; }
.mkpi span{ display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
.mkpi b{ font-size:20px; color:var(--head); font-family:var(--mono); }
.mkpi.blue{ background:var(--accent-soft); } .mkpi.purple{ background:var(--accent-soft); } .mkpi.green{ background:rgba(52,211,153,.13); } .mkpi.amber{ background:rgba(251,191,36,.13); }
.mkpi.green b{ color:var(--green); }
.modal-compo{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.compo{ background:var(--card2); border-radius:12px; padding:14px; }
.compo-title{ text-align:center; font-size:13px; color:var(--muted); margin-bottom:10px; }
.compo-body{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.compo-col{ text-align:center; }
.ct-sym{ font-size:12px; color:var(--muted); }
.ct-amt{ font-weight:600; font-size:14px; color:var(--head); font-variant-numeric:tabular-nums; }
.ct-usd{ font-size:12px; color:var(--muted); }
.modal-chart h3{ font-size:16px; color:var(--head); margin-bottom:12px; }
@media (max-width:900px){ .modal-kpis,.modal-compo{ grid-template-columns:repeat(2,1fr); } .modal-head{ grid-template-columns:1fr; } }

/* WALLETS */
.wallets-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.wallet-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.wallet-addr{ font-family:var(--mono); font-size:12px; color:var(--muted); word-break:break-all; }
.wallet-line{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-top:1px solid var(--border); font-size:14px; }
.wallet-line b{ color:var(--head); font-variant-numeric:tabular-nums; }
.solde-chain{ margin-top:12px; }
.solde-chain-head{ font-size:12px; font-weight:500; color:var(--blue); margin-bottom:2px; display:flex; justify-content:space-between; }
.solde-total{ color:var(--green); }
.kpi-wallets{ grid-template-columns:repeat(3,1fr); }
.kpi-4{ grid-template-columns:repeat(4,1fr); }
.dash-cards{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr); gap:20px; margin-bottom:22px; align-items:stretch; }
.hfc-green{ color:var(--green); } .hfc-ok{ color:var(--blue); } .hfc-warn{ color:var(--amber); } .hfc-danger{ color:var(--red); }
.dash-card-head{ display:flex; justify-content:space-between; align-items:center; }
.dash-link{ color:var(--blue); text-decoration:none; font-weight:500; font-size:14px; }
.dash-link:hover{ color:var(--accent); }
.dash-big{ font-size:28px; font-weight:600; color:var(--head); margin:8px 0 2px; font-family:var(--mono); font-variant-numeric:tabular-nums; }
/* Cartes résumé du dashboard : lignes alignées (titre / prix / note / donut) sur les 4 cartes */
.dash-cards > .card{ display:flex; flex-direction:column; }
.dash-cards .dash-card-head{ min-height:42px; align-items:flex-start; }
.dash-cards .dash-card-head h2{ font-size:17px; }
.dash-cards .dash-big{ min-height:34px; margin:6px 0 0; }
.dash-cards .dash-note{ color:var(--muted); font-size:13px; min-height:38px; margin-top:2px; }
.dash-cards .dash-donut{ height:150px; position:relative; margin-top:4px; }
.dash-cards .dash-stats-col{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.dash-cards .dash-stats-col > div{ display:flex; justify-content:space-between; align-items:baseline; font-weight:600; }
.dash-cards .dash-stats-col .m-label{ font-weight:400; }
@media (max-width:1000px){ .kpi-4{ grid-template-columns:repeat(2,1fr); } .dash-cards{ grid-template-columns:1fr; } }
.wallets-agg{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:22px; }
.token-card{ margin-bottom:22px; }
.token-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:14px; }
.token-item{ background:var(--card2); border-radius:10px; padding:12px 14px; }
.token-sym{ font-size:13px; font-weight:500; color:var(--head); }
.token-amt{ font-size:15px; font-weight:600; color:var(--text); font-family:var(--mono); font-variant-numeric:tabular-nums; margin-top:2px; }
.token-val{ font-size:12px; color:var(--muted); margin-top:2px; }
.token-val.neg{ color:var(--red); }
.wallet-head-right{ display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.del-form{ margin:0; }
.btn-del{ background:none; border:none; cursor:pointer; font-size:14px; opacity:.45; padding:0; color:var(--text); }
.btn-del:hover{ opacity:1; }
a.wallet-addr{ text-decoration:none; }
a.wallet-addr:hover{ color:var(--blue); }
.chart-wrap-sm{ height:210px; }
.add-form{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.add-form input, .add-form select{ padding:10px 12px; border:1px solid var(--border); border-radius:9px; font-size:14px; background:var(--card2); color:var(--text); }
.add-form input{ flex:1; min-width:160px; }
@media (max-width:1000px){ .wallets-agg{ grid-template-columns:1fr; } .kpi-wallets{ grid-template-columns:1fr; } }
#loading-overlay{ position:fixed; inset:0; background:var(--overlay); display:none; align-items:center; justify-content:center; z-index:200; }
.loading-box{ text-align:center; font-size:18px; font-weight:600; color:var(--head); }
.loading-box small{ display:block; margin-top:6px; font-weight:400; color:var(--muted); font-size:13px; }
@media (max-width:1000px){ .wallets-grid{ grid-template-columns:1fr; } }

/* --- Lending / Borrowing (Aave) --- */
.lending-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.lending-card{ display:flex; flex-direction:column; gap:16px; }
.hf-box{ text-align:center; padding:16px; border-radius:12px; background:var(--card2); }
.hf-label{ font-size:11px; color:var(--muted); letter-spacing:.05em; }
.hf-value{ font-size:42px; font-weight:700; line-height:1.05; margin:2px 0; font-family:var(--mono); font-variant-numeric:tabular-nums; }
.hf-tag{ display:inline-block; font-size:12px; font-weight:500; padding:3px 12px; border-radius:20px; }
.hf-bar{ height:7px; border-radius:4px; background:var(--track); margin:12px 0 4px; overflow:hidden; }
.hf-bar span{ display:block; height:100%; border-radius:4px; }
.hf-hint{ font-size:11px; color:var(--muted); }
.hf-green  .hf-value{ color:var(--green); } .hf-green  .hf-tag{ background:rgba(52,211,153,.15); color:var(--green); } .hf-green  .hf-bar span{ background:var(--green); }
.hf-ok     .hf-value{ color:var(--blue); }  .hf-ok     .hf-tag{ background:var(--accent-soft); color:var(--blue); }  .hf-ok     .hf-bar span{ background:var(--accent); }
.hf-warn   .hf-value{ color:var(--amber); } .hf-warn   .hf-tag{ background:rgba(251,191,36,.15); color:var(--amber); } .hf-warn   .hf-bar span{ background:var(--amber); }
.hf-danger .hf-value{ color:var(--red); }   .hf-danger .hf-tag{ background:rgba(251,113,133,.15); color:var(--red); }   .hf-danger .hf-bar span{ background:var(--red); }
@media (max-width:1000px){ .lending-grid{ grid-template-columns:1fr; } }
.compo-lend{ border-top:1px solid var(--border); padding-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; }
.compo-h{ font-size:11px; letter-spacing:.04em; color:var(--muted); margin-bottom:6px; }
.compo-row{ display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:baseline; font-size:13px; padding:2px 0; }
.compo-row .cs{ font-weight:500; color:var(--head); }
.compo-row .ca{ color:var(--muted); font-variant-numeric:tabular-nums; }
.compo-row .cu{ font-variant-numeric:tabular-nums; text-align:right; min-width:52px; }
.compo-date{ grid-column:1 / -1; font-size:11px; color:var(--muted); text-align:right; margin-top:2px; }

/* --- Connexion --- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--glow),var(--bg); padding:20px; margin-left:-216px; }
.login-card{ background:var(--card); border:1px solid var(--border); border-radius:18px; padding:38px 32px; width:100%; max-width:360px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px; text-align:center; }
.login-logo{ font-size:36px; color:var(--accent); line-height:1; }
.login-card h1{ font-size:22px; color:var(--head); }
.login-card .sub{ margin:-6px 0 6px; }
.login-card input{ padding:12px 14px; border:1px solid var(--border); border-radius:10px; font-size:15px; text-align:center; background:var(--card2); color:var(--text); }
.login-card input:focus{ outline:none; border-color:var(--accent); }
.login-card .btn{ padding:12px; font-size:15px; justify-content:center; }
.login-err{ background:rgba(251,113,133,.15); color:var(--red); border-radius:8px; padding:10px; font-size:13px; }

/* Bouton + badges historique wallet */
.btn-histo{ border:1px solid var(--border); background:var(--soft); border-radius:8px; cursor:pointer; padding:3px 9px; font-size:14px; line-height:1; color:var(--text); }
.btn-histo:hover{ background:var(--hover); }
.badge-in{ background:rgba(52,211,153,.16); color:var(--green); }
.badge-out{ background:rgba(251,113,133,.16); color:var(--red); }

/* Focus clavier visible (accessibilité) sur les éléments interactifs */
.tabs a:focus-visible, .btn:focus-visible, .menu a:focus-visible, .btn-histo:focus-visible, .zoom-bar button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* Légende HTML des camemberts : GRILLE → colonnes alignées (fini les décalages) */
.chart-legend{ display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:3px 14px; margin-top:12px; }
.chart-legend .cl-item{ display:flex; align-items:center; gap:7px; min-width:0; background:none; border:none; padding:2px; cursor:pointer; color:var(--text); font-size:12px; text-align:left; font-family:inherit; }
.chart-legend .cl-sw{ width:11px; height:11px; border-radius:3px; flex:none; }
.chart-legend .cl-tx{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chart-legend .cl-off{ opacity:.4; text-decoration:line-through; }

@media (max-width:760px){ body{ padding-left:0; } .sidebar{ position:static; width:auto; height:auto; flex-direction:row; flex-wrap:wrap; } .menu{ flex-direction:row; flex-wrap:wrap; } .side-foot{ margin-top:0; border-top:none; } .login-wrap{ margin-left:0; } }