/* ============================================================================
 * styles.css — Feuille de styles globale (extraite de index.html, étape D)
 * 4 sections dans l'ordre de cascade d'origine :
 *   1. Base / :root / composants   2. Admin (.adm-*)
 *   3. Page d'accueil (landing)     4. Footer global
 * Note: correction du bug <style> parasite qui masquait la 1re règle .adm-th.
 * ==========================================================================*/

/* ═══ 1. BASE / :ROOT / COMPOSANTS ═══════════════════════════════════════ */
:root {
  --bg: #0d0f0e;
  --bg2: #141714;
  --bg3: #1a1d1a;
  --border: rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.13);
  --text: #e8ebe6;
  --muted: #7a8478;
  --accent: #b5f0a5;
  --accent2: #4ade80;
  --red: #f87171;
  --pos: #b5f0a5;
  --amber: #fbbf24;
  --card: #161918;
  --font-display: 'Syne', sans-serif;
  --font-mono: 'DM Mono', monospace;
}
:root[data-theme="light"] {
  --bg: #eef1ea;          /* soft sage page — lets white cards lift off it */
  --bg2: #ffffff;          /* elevated surfaces : cards, modals, dropdowns */
  --bg3: #f2f4ef;          /* recessed : inputs, hover, active highlights */
  --border: rgba(24,40,22,0.10);
  --border2: rgba(24,40,22,0.17);
  --text: #14201a;
  --muted: #5c6a59;
  --accent: #2e8b3d;       /* deep readable green (mirrors dark mint accent) */
  --accent2: #236d2f;
  --red: #d23535;
  --pos: #2e8b3d;
  --amber: #b45309;
  --card: #ffffff;
}

/* ─────────────────────────────────────────────────────────────
   LIGHT-MODE FIXES — neutralise values that were tuned for dark.
   All scoped to [data-theme="light"] so dark mode is untouched.
   ───────────────────────────────────────────────────────────── */

/* Accent buttons : near-black text was meant for the light mint dark
   accent. On the deep-green light accent it needs to flip to white. */
:root[data-theme="light"] .btn:not(.btn-sm),
:root[data-theme="light"] .contact-cat-btn.active,
:root[data-theme="light"] .sim-tab.active,
:root[data-theme="light"] .sim-btn,
:root[data-theme="light"] [style*="var(--accent);color:#0d1a0d"],
:root[data-theme="light"] [style*="var(--accent);color:#0d0f0e"] { color:#fff !important; }

/* Generic accent "add data" button → white text. No !important, so the
   per-vehicle bright variants (#page-… , higher specificity) keep dark text. */
:root[data-theme="light"] .add-data-btn { color:#fff; }

/* Date / month picker icon : invert(1) hides the (black) glyph on light
   fields — drop the filter so it shows normally. */
:root[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="light"] input[type="month"]::-webkit-calendar-picker-indicator { filter:none; }

/* Surfaces drawn with white-alpha vanish on a light background. */
:root[data-theme="light"] #adm-table tbody tr:nth-child(even) { background:rgba(24,40,22,.035); }
:root[data-theme="light"] .sim-note { background:rgba(24,40,22,.03); }
:root[data-theme="light"] #ov-net-worth-row { border-top-color:var(--border) !important; }

/* Drop-shadows built for dark surfaces read as muddy blobs on light —
   soften and warm them. */
:root[data-theme="light"] .acc2-row-media { box-shadow:0 18px 42px -24px rgba(24,40,22,.26) !important; }
:root[data-theme="light"] .nav-dropdown-menu,
:root[data-theme="light"] .sc-dropdown { box-shadow:0 10px 30px -10px rgba(24,40,22,.20); }

/* Pale-mint pill fills (rgba(181,240,165,.12)) + pale-mint text (#b5f0a5)
   were tuned for dark surfaces — both vanish on white. Deepen text and
   give the fill enough body to read. */
:root[data-theme="light"] .badge-pos { background:rgba(46,139,61,.12); color:var(--accent2); }
:root[data-theme="light"] .sc-badge-action { background:rgba(46,139,61,.12); color:var(--accent2); border-color:rgba(46,139,61,.28); }

/* Onglet admin "Titres en attente" — ligne éditable + boutons d'action */
#adm-pending-table tbody tr { border-bottom:1px solid var(--border2); transition:background .1s; }
#adm-pending-table tbody tr:nth-child(even) { background:rgba(255,255,255,.025); }
#adm-pending-table tbody tr:hover { background:var(--bg2) !important; }
:root[data-theme="light"] #adm-pending-table tbody tr:nth-child(even) { background:rgba(24,40,22,.035); }

.adm-btn-validate { background:rgba(181,240,165,.12); border:1px solid rgba(181,240,165,.3); color:#b5f0a5; transition:all .15s; }
.adm-btn-validate:hover { background:rgba(181,240,165,.22); border-color:rgba(181,240,165,.5); }
:root[data-theme="light"] .adm-btn-validate { background:rgba(46,139,61,.12); border-color:rgba(46,139,61,.3); color:var(--accent2); }
:root[data-theme="light"] .adm-btn-validate:hover { background:rgba(46,139,61,.2); border-color:rgba(46,139,61,.5); }

.adm-btn-reject { background:transparent; border:1px solid var(--border2); color:var(--muted); transition:all .15s; }
.adm-btn-reject:hover { border-color:#f87171; color:#f87171; }
:root[data-theme="light"] .div-veh-badge[style*="b5f0a5"],
:root[data-theme="light"] .div-veh-badge[style*="181,240,165"] { color:var(--accent2) !important; }
:root[data-theme="light"] .msg.ok { color:var(--accent2); }


/* HHI legend "0 — parfait" hardcodes #4ade80 (pale on white). */
:root[data-theme="light"] [style*="color:#4ade80"] { color:var(--accent2) !important; }

/* Fiche fiscale Crypto-actifs : vert #34d399 codé en dur, illisible en clair. */
:root[data-theme="light"] [style*="color:#34d399"] { color:var(--accent2) !important; }

/* Nav-brand : "Ro" en blanc #fff + "smerta" en #b5f0a5 → illisibles en clair. */
:root[data-theme="light"] .nav-brand span:first-child { color:var(--text) !important; }
:root[data-theme="light"] .nav-brand span:last-child { color:var(--pos) !important; }

/* Captures d'écran landing : une version par thème (sombre par défaut). */
.acc-img-sombre { display:block; }
.acc-img-clair { display:none; }
:root[data-theme="light"] .acc-img-sombre { display:none; }
:root[data-theme="light"] .acc-img-clair { display:block; }

/* Captures d'écran landing cliquables → agrandissement (lightbox). */
.acc-img-zoomable { cursor:zoom-in; transition:filter .15s; }
.acc-img-zoomable:hover { filter:brightness(1.05); }
.acc-lightbox-overlay {
  position:fixed; inset:0; z-index:100010; background:rgba(0,0,0,.82);
  display:none; align-items:center; justify-content:center; padding:40px;
  backdrop-filter:blur(4px); cursor:zoom-out;
}
.acc-lightbox-overlay.open { display:flex; }
.acc-lightbox-overlay img {
  max-width:100%; max-height:100%; border-radius:10px; cursor:default;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7); border:1px solid var(--border2);
}
.acc-lightbox-close {
  position:absolute; top:18px; right:22px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18); color:#fff; font-size:22px; line-height:1;
  width:40px; height:40px; border-radius:50%; cursor:pointer; display:flex;
  align-items:center; justify-content:center; transition:background .15s;
}
.acc-lightbox-close:hover { background:rgba(255,255,255,.18); }
.acc-lightbox-inner { display:flex; flex-direction:column; align-items:center; gap:18px; max-width:100%; max-height:100%; }
.acc-lightbox-cta {
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:var(--accent); color:#0d0f0e; border:none; border-radius:999px;
  padding:12px 22px; font-family:var(--font-display); font-weight:700;
  font-size:14.5px; text-decoration:none; white-space:nowrap;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.5); transition:filter .15s,transform .15s;
}
.acc-lightbox-cta:hover { filter:brightness(1.08); transform:translateY(-1px); }

/* Boutons de scroll overview (inline-style rgba(255,255,255,…) / color:#fff). */
:root[data-theme="light"] #ov-scroll-left,
:root[data-theme="light"] #ov-scroll-right {
  background:rgba(24,40,22,.08) !important;
  border-color:rgba(24,40,22,.18) !important;
  color:var(--text) !important;
}

/* Badge "Non exposé" géographie + encarts inline rgba(255,255,255,.04). */
:root[data-theme="light"] [style*="rgba(255,255,255,.04)"],
:root[data-theme="light"] [style*="rgba(255,255,255,0.04)"] {
  background:rgba(24,40,22,.05) !important;
}

/* Export buttons (share modal) : la règle .btn:not(.btn-sm) force color:#fff
   mais ces boutons ont background:var(--bg3) → texte blanc invisible. */
:root[data-theme="light"] .btn[style*="var(--bg3)"] {
  color: var(--text) !important;
  border: 1px solid var(--border2) !important;
}

/* Modale "Modifier l'objectif" : Supprimer (rouge pastel #ef4444 pensé pour
   le fond sombre) et Annuler (.btn-ghost, --muted/--border2 très pâles en
   clair) paraissent tous deux délavés/désactivés à côté du bouton vert
   "Enregistrer". Contraste renforcé, scope limité à ces 2 boutons. */
:root[data-theme="light"] #goal-delete-btn {
  background: rgba(210,53,53,.08) !important;
  color: var(--red) !important;
  border: 1px solid rgba(210,53,53,.45) !important;
}
:root[data-theme="light"] #goal-delete-btn:hover {
  background: rgba(210,53,53,.14) !important;
}
:root[data-theme="light"] #goal-cancel-btn {
  color: var(--text) !important;
  border: 1px solid var(--border2) !important;
}
:root[data-theme="light"] #goal-cancel-btn:hover {
  border-color: var(--accent2) !important;
  color: var(--accent2) !important;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; }
body { background: var(--bg); color: var(--text); font-family: var(--font-mono); min-height: 100vh; overflow-x: hidden; }

/* NAV */
nav {
  display: flex; align-items: center; justify-content: flex-start; gap: 0;
  padding: 1.05rem 2.25rem; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg); z-index: 100;
  backdrop-filter: blur(8px);
}
.nav-divider { width:1px; height:18px; background:var(--border); margin:0 18px; flex-shrink:0; }
.nav-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; padding:6px 14px; margin:-6px -14px -6px 0; border-radius:20px; transition:background .2s, transform .15s, box-shadow .2s; }
.nav-brand span { color: var(--accent); }
.nav-brand:hover { background: rgba(181,240,165,.12); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(181,240,165,.25); }
.nav-tabs { display: flex; gap: 6px; }
.nav-tab {
  padding: 10px 18px; border-radius: 8px; border: 1px solid transparent; background: transparent;
  color: var(--muted); font-family: var(--font-mono); font-size: 13.5px; font-weight: 500;
  cursor: pointer; position: relative; transition: .15s;
}
.nav-tab.active { background: var(--bg3); color: var(--text); }
.nav-tab.active::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px;
  background: var(--accent); border-radius: 2px;
}
.nav-tab:hover:not(.active) { border-color: var(--accent); color: var(--text); background: var(--bg2); }

/* Hover générique (fallback) pour tout bouton on-click sans style dédié :
   même traitement visuel que les onglets de la navbar (.nav-tab:hover).
   :where() = spécificité nulle -> n'écrase jamais une règle de hover déjà
   existante ailleurs (.btn, .adm-btn-*, etc.), ne s'applique qu'aux boutons
   qui n'ont encore aucun style de survol dédié. */
:where(button[onclick], a.btn[onclick]) {
  border: 1px solid transparent;
  transition: border-color .15s, color .15s, background .15s;
}
:where(button[onclick], a.btn[onclick]):hover {
  border-color: var(--accent);
  color: var(--text);
  background: var(--bg2);
}

/* DROPDOWN NAV */
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 10px; padding: 4px; min-width: 170px;
  display: none; z-index: 300; flex-direction: column; gap: 2px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.nav-dropdown.open .nav-dropdown-menu { display: flex; }
.nav-dropdown-item {
  padding: 8px 14px; border-radius: 7px; border: 1px solid transparent;
  background: transparent; color: var(--muted); font-family: var(--font-mono);
  font-size: 12px; cursor: pointer; text-align: left; width: 100%;
  transition: all .15s;
}
.nav-dropdown-item:hover { background: var(--bg3); color: var(--text); border-color: var(--accent); }
.nav-dropdown-item.active { background: var(--bg3); color: var(--accent); border-color: var(--accent); }
.nav-dropdown-arrow { font-size: 9px; margin-left: 5px; display: inline-block; transition: transform .2s; }
.nav-dropdown.open .nav-dropdown-arrow { transform: rotate(180deg); }

/* VIEW TOGGLE (treemap/pie) */
.view-toggle { display: flex; gap: 3px; }
.view-toggle-btn {
  padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border);
  background: transparent; color: var(--muted); cursor: pointer;
  font-size: 14px; transition: all .15s; line-height: 1;
}
.view-toggle-btn.active { background: var(--bg3); color: var(--text); border-color: var(--border2); }
.view-toggle-btn:hover:not(.active) { color: var(--text); }

/* PAGES */
.page { display: none; padding: 2rem; max-width: 1100px; margin: 0 auto; }
.page.active { display: block; }

/* LOGIN */
#page-login { display: flex; align-items: center; justify-content: center; min-height: 80vh; max-width: 100%; padding: 2rem; }
.login-box {
  background: var(--card); border: 1px solid var(--border2); border-radius: 16px;
  padding: 2.5rem; width: 100%; max-width: 360px;
}
.login-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; margin-bottom: .4rem; }
.login-sub { color: var(--muted); font-size: 12px; margin-bottom: 1.5rem; }
.input-group { margin-bottom: 1rem; }
.input-group label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .08em; }
.input-group input {
  width: 100%; background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 8px; padding: 10px 12px; color: var(--text);
  font-family: var(--font-mono); font-size: 13px; outline: none;
  transition: border-color .2s;
}
.input-group input:focus { border-color: var(--accent); }
.btn {
  width: 100%; padding: 10px; border-radius: 8px; border: none;
  background: var(--accent); color: #0d1a0d; font-family: var(--font-mono);
  font-size: 13px; font-weight: 500; cursor: pointer; transition: opacity .2s;
}
.btn:hover { opacity: .85; }
.btn-sm {
  width: auto; padding: 6px 14px; font-size: 12px;
  background: var(--bg3); color: var(--text); border: 1px solid var(--border2);
}
.btn-sm:hover { border-color: var(--accent); color: var(--accent); opacity: 1; }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border2); width: auto; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); opacity: 1; }
.btn-danger { background: transparent; color: var(--red); border: 1px solid rgba(248,113,113,.3); }
.btn-danger:hover { background: rgba(248,113,113,.08); opacity: 1; }
.login-err { color: var(--red); font-size: 12px; margin-top: .5rem; display: none; }

/* ── Thèmes couleur par véhicule ── */
/* PEA — cyan */
#page-dashboard .add-data-btn { background:#22d3ee; color:#0d0f0e; transition:background .2s, transform .15s, box-shadow .2s; }
#page-dashboard .add-data-btn:hover { background:#4de0f5; transform:translateY(-1px); box-shadow:0 4px 12px rgba(34,211,238,.35); }
#page-dashboard .chart-tab.active { background:rgba(34,211,238,.18); color:#22d3ee; border-color:rgba(34,211,238,.35); }
#page-dashboard .chart-tab:hover:not(.active) { color:#22d3ee; border-color:rgba(34,211,238,.25); }
#page-dashboard .view-toggle-btn.active { background:rgba(34,211,238,.18); color:#22d3ee; border-color:rgba(34,211,238,.35); }
#page-dashboard .view-toggle-btn:hover:not(.active) { color:#22d3ee; }
/* CTO — bleu */
#page-cto .add-data-btn { background:#60a5fa; color:#0d0f0e; transition:background .2s, transform .15s, box-shadow .2s; }
#page-cto .add-data-btn:hover { background:#90c0fc; transform:translateY(-1px); box-shadow:0 4px 12px rgba(96,165,250,.35); }
#page-cto .chart-tab.active { background:rgba(96,165,250,.18); color:#60a5fa; border-color:rgba(96,165,250,.35); }
#page-cto .chart-tab:hover:not(.active) { color:#60a5fa; border-color:rgba(96,165,250,.25); }
#page-cto .view-toggle-btn.active { background:rgba(96,165,250,.18); color:#60a5fa; border-color:rgba(96,165,250,.35); }
#page-cto .view-toggle-btn:hover:not(.active) { color:#60a5fa; }

/* Assurance-vie — violet */
#page-av .add-data-btn { background:#a78bfa; color:#0d0f0e; transition:background .2s, transform .15s, box-shadow .2s; }
#page-av .add-data-btn:hover { background:#c1aefc; transform:translateY(-1px); box-shadow:0 4px 12px rgba(167,139,250,.35); }
#page-av .chart-tab.active { background:rgba(167,139,250,.18); color:#a78bfa; border-color:rgba(167,139,250,.35); }
#page-av .chart-tab:hover:not(.active) { color:#a78bfa; border-color:rgba(167,139,250,.25); }
#page-av .view-toggle-btn.active { background:rgba(167,139,250,.18); color:#a78bfa; border-color:rgba(167,139,250,.35); }
#page-av .view-toggle-btn:hover:not(.active) { color:#a78bfa; }

/* Crypto — orange */
#page-crypto .add-data-btn { background:#fb923c; color:#0d0f0e; transition:background .2s, transform .15s, box-shadow .2s; }
#page-crypto .add-data-btn:hover { background:#fcb377; transform:translateY(-1px); box-shadow:0 4px 12px rgba(251,146,60,.35); }
#page-crypto .chart-tab.active { background:rgba(251,146,60,.18); color:#fb923c; border-color:rgba(251,146,60,.35); }
#page-crypto .chart-tab:hover:not(.active) { color:#fb923c; border-color:rgba(251,146,60,.25); }
#page-crypto .view-toggle-btn.active { background:rgba(251,146,60,.18); color:#fb923c; border-color:rgba(251,146,60,.35); }
#page-crypto .view-toggle-btn:hover:not(.active) { color:#fb923c; }

/* Livrets — cyan */
#page-livrets .add-data-btn { background:#34d399; color:#0d0f0e; transition:background .2s, transform .15s, box-shadow .2s; }
#page-livrets .add-data-btn:hover { background:#71e0b8; transform:translateY(-1px); box-shadow:0 4px 12px rgba(52,211,153,.35); }
#page-livrets .chart-tab.active { background:rgba(52,211,153,.18); color:#34d399; border-color:rgba(52,211,153,.35); }
#page-livrets .chart-tab:hover:not(.active) { color:#34d399; border-color:rgba(52,211,153,.25); }
#page-livrets .view-toggle-btn.active { background:rgba(52,211,153,.18); color:#34d399; border-color:rgba(52,211,153,.35); }
#page-livrets .view-toggle-btn:hover:not(.active) { color:#34d399; }

/* PEE — teal */
#page-pee .add-data-btn { background:#0e9e85; color:#fff; transition:background .2s, transform .15s, box-shadow .2s; }
#page-pee .add-data-btn:hover { background:#56bbaa; transform:translateY(-1px); box-shadow:0 4px 12px rgba(14,158,133,.35); }
#page-pee .chart-tab.active { background:rgba(14,158,133,.18); color:#0e9e85; border-color:rgba(14,158,133,.35); }
#page-pee .chart-tab:hover:not(.active) { color:#0e9e85; border-color:rgba(14,158,133,.25); }
#page-pee .view-toggle-btn.active { background:rgba(14,158,133,.18); color:#0e9e85; border-color:rgba(14,158,133,.35); }
#page-pee .view-toggle-btn:hover:not(.active) { color:#0e9e85; }

/* PER — rose */
#page-per .add-data-btn { background:#f472b6; color:#0d0f0e; transition:background .2s, transform .15s, box-shadow .2s; }
#page-per .add-data-btn:hover { background:#f79ccc; transform:translateY(-1px); box-shadow:0 4px 12px rgba(244,114,182,.35); }
#page-per .chart-tab.active { background:rgba(244,114,182,.18); color:#f472b6; border-color:rgba(244,114,182,.35); }
#page-per .chart-tab:hover:not(.active) { color:#f472b6; border-color:rgba(244,114,182,.25); }
#page-per .view-toggle-btn.active { background:rgba(244,114,182,.18); color:#f472b6; border-color:rgba(244,114,182,.35); }
#page-per .view-toggle-btn:hover:not(.active) { color:#f472b6; }

/* Métaux — doré */
#page-metaux .add-data-btn { background:#d4a83a; color:#0d0f0e; transition:background .2s, transform .15s, box-shadow .2s; }
#page-metaux .add-data-btn:hover { background:#e1c275; transform:translateY(-1px); box-shadow:0 4px 12px rgba(212,168,58,.35); }

#page-exotiques .add-data-btn { background:#f472b6; color:#0d0f0e; transition:background .2s, transform .15s, box-shadow .2s; }
#page-exotiques .add-data-btn:hover { background:#f79ccc; transform:translateY(-1px); box-shadow:0 4px 12px rgba(244,114,182,.35); }
#page-metaux .chart-tab.active { background:rgba(212,168,58,.18); color:#d4a83a; border-color:rgba(212,168,58,.35); }
#page-metaux .chart-tab:hover:not(.active) { color:#d4a83a; border-color:rgba(212,168,58,.25); }
#page-metaux .view-toggle-btn.active { background:rgba(212,168,58,.18); color:#d4a83a; border-color:rgba(212,168,58,.35); }
#page-metaux .view-toggle-btn:hover:not(.active) { color:#d4a83a; }

/* Immobilier — bleu */
#page-immo .add-data-btn { background:#60a5fa; color:#0d0f0e; transition:background .2s, transform .15s, box-shadow .2s; }
#page-immo .add-data-btn:hover { background:#90c0fc; transform:translateY(-1px); box-shadow:0 4px 12px rgba(96,165,250,.35); }
#page-immo .chart-tab.active { background:rgba(96,165,250,.18); color:#60a5fa; border-color:rgba(96,165,250,.35); }
#page-immo .chart-tab:hover:not(.active) { color:#60a5fa; border-color:rgba(96,165,250,.25); }
#page-immo .view-toggle-btn.active { background:rgba(96,165,250,.18); color:#60a5fa; border-color:rgba(96,165,250,.35); }
#page-immo .view-toggle-btn:hover:not(.active) { color:#60a5fa; }

/* Crédits — rouge doux */
#page-credits .add-data-btn { background:#f87171; color:#0d0f0e; transition:background .2s, transform .15s, box-shadow .2s; }
#page-credits .add-data-btn:hover { background:#fa9c9c; transform:translateY(-1px); box-shadow:0 4px 12px rgba(248,113,113,.35); }
#page-credits .chart-tab.active { background:rgba(248,113,113,.18); color:#f87171; border-color:rgba(248,113,113,.35); }
#page-credits .chart-tab:hover:not(.active) { color:#f87171; border-color:rgba(248,113,113,.25); }
#page-credits .view-toggle-btn.active { background:rgba(248,113,113,.18); color:#f87171; border-color:rgba(248,113,113,.35); }
#page-credits .view-toggle-btn:hover:not(.active) { color:#f87171; }

/* Vue d'ensemble — vert (accent de marque) */
#page-overview .chart-tab.active { background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,transparent); }
#page-overview .chart-tab:hover:not(.active) { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 35%,transparent); background:var(--bg2); }
#page-overview .add-data-btn { transition:background .2s, transform .15s, box-shadow .2s; }
#page-overview .add-data-btn:hover { background:color-mix(in srgb,var(--accent) 70%,white); transform:translateY(-1px); box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 35%,transparent); }

/* Dividendes reçus — vert (accent de marque) */
#page-dividendes .chart-tab.active { background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,transparent); }
#page-dividendes .chart-tab:hover:not(.active) { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 35%,transparent); background:var(--bg2); }
#page-dividendes .add-data-btn { transition:background .2s, transform .15s, box-shadow .2s; }
#page-dividendes .add-data-btn:hover { background:color-mix(in srgb,var(--accent) 70%,white); transform:translateY(-1px); box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 35%,transparent); }
#page-budget .add-data-btn { transition:background .2s, transform .15s, box-shadow .2s; }
#page-budget .add-data-btn:hover { background:color-mix(in srgb,var(--accent) 70%,white); transform:translateY(-1px); box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 35%,transparent); }

/* Analyse — vert (accent de marque) */
#page-analyse .chart-tab.active { background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,transparent); }
#page-analyse .chart-tab:hover:not(.active) { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 35%,transparent); background:var(--bg2); }

/* SECTION TITLE */
.section-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.5rem; }
.section-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }
.section-sub { color: var(--muted); font-size: 12px; }

/* STATS GRID */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 2rem; align-items: start; }
.stat {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 1rem 1.2rem;
}
.stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 6px; }
.stat-value { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; }
.stat-value.pos { color: var(--accent); }
.stat-value.neg { color: var(--red); }
.stat-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }
.stat-duo { display: block; }
.stat-duo-item { display: block; }
.stat-duo-sep { display: block; height: 1px; background: var(--border); margin: .6rem 0; }
.stat-perf-tabs { display: flex; align-items: center; gap: 0; margin-bottom: .55rem; }
.stat-perf-tab { font-size: 10px; padding: 0; border: none; background: transparent; color: var(--muted); cursor: pointer; text-transform: uppercase; letter-spacing: .07em; transition: color .15s; }
.stat-perf-tab:hover { color: var(--text); }
.stat-perf-tab.active { color: var(--accent); }
.stat-perf-tab:not(:last-child)::after { content: '·'; margin: 0 6px; color: var(--border); cursor: default; }
.stat-foot { margin-top: .75rem; padding-top: .6rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; color: var(--muted); }
.stat-foot b { color: var(--text); font-weight: 500; }
.stat-foot b.pos { color: var(--accent); }
.stat-foot b.neg { color: var(--red); }
.stat-perf-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.stat-perf-name { font-size: 12px; color: var(--muted); }
.stat-value-sm { font-size: 1.2rem; }
#stats-grid, #cto-stats-grid, #av-stats-grid, #crypto-stats-grid, #livrets-stats-grid, #pee-stats-grid, #per-stats-grid, #metaux-stats, #immo-stats-grid, #credits-stats-grid { align-items: stretch; grid-auto-rows: 1fr; }
#stats-grid .stat, #cto-stats-grid .stat, #av-stats-grid .stat, #crypto-stats-grid .stat, #livrets-stats-grid .stat, #pee-stats-grid .stat, #per-stats-grid .stat, #metaux-stats .stat, #immo-stats-grid .stat, #credits-stats-grid .stat, #div-stats-grid .stat { display: flex; flex-direction: column; }
#stats-grid .stat-foot, #cto-stats-grid .stat-foot, #av-stats-grid .stat-foot, #crypto-stats-grid .stat-foot, #livrets-stats-grid .stat-foot, #pee-stats-grid .stat-foot, #per-stats-grid .stat-foot, #metaux-stats .stat-foot, #immo-stats-grid .stat-foot, #credits-stats-grid .stat-foot, #div-stats-grid .stat-foot { margin-top: auto; }
.stat--center { text-align: center; }
.stat--center .stat-foot { justify-content: center; }
@media (max-width: 900px) { #stats-grid, #cto-stats-grid, #av-stats-grid, #crypto-stats-grid, #livrets-stats-grid, #pee-stats-grid, #per-stats-grid, #metaux-stats, #immo-stats-grid, #credits-stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 560px) { #stats-grid, #cto-stats-grid, #av-stats-grid, #crypto-stats-grid, #livrets-stats-grid, #pee-stats-grid, #per-stats-grid, #metaux-stats, #immo-stats-grid, #credits-stats-grid { grid-template-columns: 1fr !important; } }

/* CHART AREA */
.chart-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 1.5rem; margin-bottom: 1.5rem;
}
.chart-card h3 { font-family: var(--font-display); font-size: .95rem; font-weight: 600; margin-bottom: 1.2rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.chart-wrap { position: relative; height: 260px; }
.chart-tabs { display: flex; gap: 4px; margin-bottom: 1rem; }
.chart-tab {
  padding: 4px 12px; border-radius: 5px; border: 1px solid var(--border);
  background: transparent; color: var(--muted); font-family: var(--font-mono);
  font-size: 11px; cursor: pointer; transition: all .15s;
}
.chart-tab.active { background: var(--bg3); color: var(--text); border-color: var(--border2); }

/* TABLE */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border);
  color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 400;
}
td { padding: 9px 12px; border-bottom: 1px solid var(--border); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg3); }
.td-pos { color: var(--accent); }
.td-neg { color: var(--red); }

/* Ligne de position cliquable (PEA/CTO/AV/Crypto/PEE/PER/Métaux/Dividendes) :
   ouvre le formulaire de modification au clic. Halo vert arrondi façon
   bouton nav (.nav-tab:hover) au survol, sans casser la mise en page du tableau. */
.pos-row { cursor: pointer; }
.pos-row:hover { outline: 1px solid var(--accent); outline-offset: -1px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 6%, transparent); }

/* Cartes cliquables de la Vue d'ensemble (Budget du mois, Dividendes) :
   même halo vert que .pos-row, adapté au rayon des .chart-card (12px).
   Remplace l'ancien hover inline (border-color: var(--border2), gris). */
.ov-link-card:hover { outline: 1px solid var(--accent); outline-offset: -1px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 6%, transparent); }

/* Carte objectif financier (Vue d'ensemble, #ov-goals-list) : bordure fine
   permanente façon .chart-card, + halo vert au survol (remplace l'ancien
   hover inline onmouseenter/onmouseleave qui ne se déclenchait pas de façon
   fiable en thème clair). */
.goal-row { border: 1px solid var(--border); }
.goal-row:hover { outline: 1px solid var(--accent); outline-offset: -1px; border-radius: 10px; }

/* ADMIN */
.admin-form {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem;
}
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 1rem; }
.div-form-row-2 { display: grid; grid-template-columns: 1fr 1.7fr; gap: 10px; }
.div-form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
@media (max-width: 500px) { .div-form-row-2, .div-form-row-3 { grid-template-columns: 1fr; } }
.div-veh-badge { display:inline-flex;align-items:center;gap:4px;font-size:10px;padding:2px 8px;border-radius:20px;border:1px solid;font-family:var(--font-mono); }
.div-recent-item { display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;background:var(--bg3);border:1px solid var(--border);border-radius:8px;font-size:13px; }
.div-recent-date { font-size:11px;color:var(--muted);font-family:var(--font-mono);min-width:52px;flex-shrink:0; }
.div-recent-name { flex:1;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.div-recent-amount { font-family:var(--font-mono);font-size:13px;color:var(--accent);font-weight:600;white-space:nowrap; }
.div-recent-actions { display:flex;gap:.25rem;flex-shrink:0; }
.div-recent-actions button { background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:13px;padding:2px 5px;border-radius:4px;line-height:1; }
.div-recent-actions button:hover { color:var(--text);background:var(--border); }
.form-group label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .06em; }
.form-group input, .form-group select {
  width: 100%; background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 8px; padding: 9px 10px; color: var(--text);
  font-family: var(--font-mono); font-size: 13px; outline: none;
  transition: border-color .2s; box-sizing: border-box;
}
.form-group input:focus, .form-group select:focus { border-color: var(--accent); }
.form-group label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.import-area {
  border: 1px dashed var(--border2); border-radius: 10px; padding: 1.5rem;
  text-align: center; color: var(--muted); font-size: 12px; margin-bottom: 1rem;
}
.import-area input[type=file] { display: none; }
.import-area label { cursor: pointer; color: var(--accent); text-decoration: underline; }
.msg { font-size: 12px; margin-top: 4px; }
.msg.ok { color: var(--accent); }
.msg.err { color: var(--red); }
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; }
.badge-pos { background: rgba(181,240,165,.12); color: var(--accent); }
.badge-neg { background: rgba(248,113,113,.1); color: var(--red); }

/* FOOTER note */
.note { font-size: 11px; color: var(--muted); text-align: center; padding: 2rem; border-top: 1px solid var(--border); }

/* MODAL */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: none; z-index: 1000; backdrop-filter: blur(4px);
  overflow-y: auto; align-items: flex-start;
}
.modal-overlay.open { display: block; }
.modal-content {
  background: var(--bg); border: 1px solid var(--border2);
  border-radius: 12px; max-width: 980px; width: calc(100% - 2rem);
  padding: 1.5rem 2rem 2rem; position: relative;
  margin: 2rem auto;
}
.modal-close {
  position: absolute; top: 12px; right: 14px;
  background: transparent; border: none; color: var(--muted);
  font-size: 22px; cursor: pointer; line-height: 1;
  padding: 4px 8px; border-radius: 6px;
}
.modal-close:hover { background: var(--bg3); color: var(--text); }

/* Modale d'édition budget (petite modale) : centrée verticalement,
   contrairement aux grandes modales (positions, etc.) qui restent
   alignées en haut pour laisser respirer les longs formulaires. */
#budget-item-modal.open { display: flex; align-items: center; justify-content: center; }
#budget-item-modal .modal-content { margin: 0; }

/* ADD BUTTON */
.add-data-btn {
  background: var(--accent); color: #0d1a0d;
  border: none; border-radius: 8px;
  padding: 8px 16px; font-family: var(--font-mono);
  font-size: 13px; font-weight: 500;
  cursor: pointer; display: inline-flex;
  align-items: center; gap: 6px;
  transition: opacity .2s;
}
.add-data-btn:hover { opacity: .85; }

@media(max-width:900px){
  #stats-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media(max-width:600px){
  nav { padding: .85rem 1.1rem; }
  .page { padding: 1rem; }
  .stat-value { font-size: 1.2rem; }
  .modal-content { padding: 1rem; }
  #stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media(max-width:480px){
  #stats-grid { grid-template-columns: 1fr !important; }
}
#ov-vehicles-grid::-webkit-scrollbar{display:none}
/* SHARE / READONLY */
/* position:sticky retiré (09/08/2026) : entrait en conflit avec `nav` (également
   sticky top:0) et se superposait visuellement dessus. La bannière reste désormais
   dans le flux normal, juste sous la nav — plus de chevauchement. */
#readonly-banner { display:none; background:rgba(96,165,250,.12); border-bottom:1px solid rgba(96,165,250,.3); color:#60a5fa; text-align:center; padding:10px 16px; font-size:12px; }
.nav-share-btn { margin-left:10px; background:none; border:1px solid var(--border2); color:var(--muted); border-radius:8px; padding:7px 14px; font-family:var(--font-mono); font-size:12.5px; font-weight:500; cursor:pointer; transition:color .15s,border-color .15s,background .15s; white-space:nowrap; letter-spacing:.02em; }
.nav-share-btn:hover { color:var(--text); border-color:var(--accent); background:var(--bg2); }
/* Variante accent (Feedback, Inscription/Connexion) : garde son identité verte au survol */
.nav-share-btn.is-accent { color:var(--accent); border-color:var(--accent); }
.nav-share-btn.is-accent:hover { color:var(--accent); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); }
/* Badge compte : feedback au survol, cohérent avec .nav-brand:hover */
#nav-auth-badge { transition:transform .15s, box-shadow .15s, filter .15s; }
#nav-auth-badge:hover { transform:translateY(-1px); box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 40%,transparent); filter:brightness(1.05); }
.share-chk-row { display:flex; align-items:center; gap:8px; padding:5px 0; font-size:13px; cursor:pointer; }
.share-chk-row input[type=checkbox] { width:15px; height:15px; accent-color:var(--accent); cursor:pointer; }
.contact-cat-btn { background:var(--bg3); border:1px solid var(--border); color:var(--muted); border-radius:20px; padding:5px 12px; font-size:12px; cursor:pointer; transition:.15s; white-space:nowrap; }
.contact-cat-btn:hover { border-color:var(--accent); color:var(--text); }
.contact-cat-btn.active { background:var(--accent); border-color:var(--accent); color:#0d1a0d; font-weight:600; }
.contact-input { width:100%; background:var(--bg3); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:.5rem .75rem; font-size:13px; box-sizing:border-box; font-family:inherit; outline:none; transition:border-color .15s; }
.contact-input:focus { border-color:var(--accent); }
.contact-input[readonly] { opacity:.55; cursor:default; }
#share-url-out { width:100%; background:var(--bg2); border:1px solid var(--border2); color:var(--muted); border-radius:8px; padding:8px 10px; font-size:11px; font-family:var(--font-mono); resize:none; margin-top:.75rem; }
.readonly-mode .ro-hide { display:none !important; }
/* Boutons "+ Ajouter..." / "+ Gérer..." (classe commune .add-data-btn,
   toutes pages confondues) : ouvrent un formulaire dont la sauvegarde est
   un no-op en mode lecture seule (Storage.setItem neutralisé, cf.
   enterReadOnlyMode / refacto/partage.js) — masqués partout pour éviter un
   bouton qui ne fait rien (demande Maxime 09/08/2026 : Dividendes reçus,
   Budget, Crédits, Immobilier — généralisé aux autres pages par la même
   règle, elles utilisent toutes la même classe). */
.readonly-mode .add-data-btn { display:none !important; }
.flux-kpi-row { display:flex; justify-content:space-between; align-items:center; padding:4px 0; border-bottom:1px solid var(--border); font-size:12px; }
.flux-kpi-row:last-child { border-bottom:none; }
.flux-kpi-label { color:var(--muted); cursor:help; }
.flux-kpi-val { font-family:var(--font-mono); font-weight:600; color:var(--text); }
@media (max-width:900px) { #flux-sankey-grid { grid-template-columns:1fr !important; } }

/* ── Combobox recherche titres ── */
.sc-wrap { position:relative; }
.sc-dropdown {
  /* position/top/left/width fixés dynamiquement en JS (portal sur body) */
  background:var(--bg2); border:1px solid var(--border2); border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.5); overflow:hidden; max-height:280px; overflow-y:auto;
}
.sc-option {
  display:flex; align-items:center; gap:8px; padding:9px 12px; cursor:pointer;
  font-size:12px; font-family:var(--font-mono); transition:background .1s;
  border-bottom:1px solid var(--border);
}
.sc-option:last-child { border-bottom:none; }
.sc-option:hover, .sc-option[aria-selected="true"] { background:var(--bg3); }
.sc-option-main { flex:1; min-width:0; }
.sc-option-nom { font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sc-option-sub { font-size:10px; color:var(--muted); margin-top:1px; letter-spacing:.03em; }
.sc-badge {
  font-size:9px; text-transform:uppercase; letter-spacing:.06em; padding:2px 6px;
  border-radius:4px; flex-shrink:0; font-weight:600;
}
.sc-badge-action  { background:rgba(181,240,165,.12); color:#b5f0a5; border:1px solid rgba(181,240,165,.2); }
.sc-badge-etf     { background:rgba(96,165,250,.12);  color:#60a5fa; border:1px solid rgba(96,165,250,.2); }
.sc-badge-fonds   { background:rgba(167,139,250,.12); color:#a78bfa; border:1px solid rgba(167,139,250,.2); }
.sc-badge-metal   { background:rgba(212,168,58,.12);  color:#d4a83a; border:1px solid rgba(212,168,58,.2); }
.sc-live { position:absolute; bottom:4px; right:6px; font-size:9px; color:var(--muted); font-style:italic; }

.sim-tab{background:var(--bg3);border:1px solid var(--border);color:var(--muted);border-radius:9px;padding:8px 18px;font-size:12.5px;cursor:pointer;transition:.15s;font-weight:500}
.sim-tab:hover{border-color:var(--accent);color:var(--text);background:var(--bg2)}
.sim-tab.active{background:var(--accent);color:#111;border-color:var(--accent);font-weight:700}
.sim-panel{display:none}
.sim-panel.active{display:block}
.sim-grid{display:grid;grid-template-columns:minmax(300px,400px) 1fr;gap:1.5rem;align-items:start}
@media(max-width:800px){.sim-grid{grid-template-columns:1fr}}
.sim-input-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:1.4rem 1.6rem}
.sim-input-card .sim-section-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:1.1rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}
.sim-panel>.sim-section-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:1.1rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}
.sim-input-card label{font-size:12.5px;color:var(--text);display:block;margin-bottom:.3rem;margin-top:.1rem}
.sim-field{width:100%;box-sizing:border-box;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:.6rem .9rem;color:var(--text);font-size:14px;outline:none;margin-bottom:.85rem;transition:border-color .15s}
.sim-field:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(181,240,165,.12)}
.sim-result-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:1.4rem 1.6rem}
.sim-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;margin-bottom:1.25rem}
.sim-kpi{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:.75rem 1rem}
.sim-kpi-label{font-size:11px;color:var(--muted);margin-bottom:.3rem;line-height:1.3}
.sim-kpi-value{font-size:1.25rem;font-weight:700;font-family:var(--font-display);line-height:1.15}
.sim-kpi-sub{font-size:10.5px;color:var(--muted);margin-top:.2rem}
.sim-btn{background:var(--accent);color:#111;border:none;border-radius:9px;padding:.7rem 1.4rem;font-size:14px;font-weight:700;cursor:pointer;width:100%;margin-top:.5rem;transition:.15s;letter-spacing:.02em}
.sim-btn:hover{opacity:.88;transform:translateY(-1px)}
.sim-note{font-size:11px;color:var(--muted);margin-top:.65rem;line-height:1.6;padding:.6rem .8rem;background:rgba(255,255,255,.03);border-radius:7px;border:1px solid var(--border)}
.sim-milestone{display:inline-flex;align-items:center;gap:.3rem;font-size:11px;background:rgba(181,240,165,.1);border:1px solid rgba(181,240,165,.2);border-radius:20px;padding:3px 10px;margin:2px}
.rebalnc-row{display:grid;grid-template-columns:1fr 100px 80px 28px;gap:.4rem;align-items:center;margin-bottom:.4rem}

/* ═══ 2. ADMIN (.adm-*) ══════════════════════════════════════════════════ */
.adm-th {
  background:var(--bg2); position:sticky; top:0; z-index:2;
  padding:10px 12px; text-align:left; font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.5px; color:var(--muted);
  border-bottom:2px solid var(--border2); white-space:nowrap; cursor:pointer;
  user-select:none;
}
.adm-th:hover { color:var(--text); }
.adm-th.adm-sort-asc::after  { content:' ▲'; font-size:9px; opacity:.7; }
.adm-th.adm-sort-desc::after { content:' ▼'; font-size:9px; opacity:.7; }
#adm-table { table-layout:fixed; }
#adm-table col.col-nom    { width:220px; }
#adm-table col.col-isin   { width:120px; }
#adm-table col.col-ticker { width:80px; }
#adm-table col.col-type   { width:90px; }
#adm-table col.col-cours  { width:110px; }
#adm-table col.col-sect   { width:155px; }
#adm-table col.col-pays   { width:130px; }
#adm-table col.col-elig   { width:180px; }
#adm-table col.col-act    { width:40px; }
#adm-table tbody tr {
  border-bottom:1px solid var(--border2);
  transition:background .1s;
}
#adm-table tbody tr:nth-child(even) { background:rgba(255,255,255,.025); }
#adm-table tbody tr:hover { background:var(--bg2) !important; }
#adm-table tbody td { padding:8px 12px; vertical-align:middle; overflow:hidden; }
.adm-input {
  background:transparent; border:1px solid transparent; border-radius:5px;
  color:var(--text); font-size:13px; padding:4px 7px; width:100%;
  transition:border-color .15s,background .15s; font-family:inherit;
  text-overflow:ellipsis;
}
.adm-input:focus { outline:none; border-color:var(--accent); background:var(--bg3); }
.adm-select {
  background:var(--bg); border:1px solid transparent; border-radius:5px;
  color:var(--text); font-size:13px; padding:4px 6px; width:100%;
  font-family:inherit; cursor:pointer; transition:border-color .15s;
}
.adm-select:focus { outline:none; border-color:var(--accent); }
.adm-select option { background:var(--bg2); }
.adm-dirty { box-shadow:inset 3px 0 0 rgba(251,191,36,.8); }
.adm-dirty .adm-input  { border-color:rgba(251,191,36,.3); }
.adm-dirty .adm-select { border-color:rgba(251,191,36,.3); }
.adm-cours-zero { color:#f87171; font-weight:600; }
.adm-cours-date { font-size:10px; color:var(--muted); display:block; margin-top:1px; }
.adm-type { display:inline-block; border-radius:4px; padding:2px 7px; font-size:11px; font-weight:600; text-transform:uppercase; }
.adm-type-action { background:rgba(96,165,250,.15); color:#60a5fa; }
.adm-type-etf    { background:rgba(181,240,165,.15); color:#b5f0a5; }
.adm-type-crypto { background:rgba(251,146,60,.15); color:#fb923c; }
.adm-type-opcvm  { background:rgba(167,139,250,.15); color:#a78bfa; }
.adm-type-metal  { background:rgba(212,168,58,.15); color:#d4a83a; }
.adm-elig { display:inline-block; border-radius:3px; padding:1px 5px; font-size:10px;
  background:var(--bg3); color:var(--muted); border:1px solid var(--border2); margin-right:2px; }
.adm-btn-del {
  background:transparent; border:1px solid transparent; color:var(--muted);
  border-radius:5px; padding:4px 8px; cursor:pointer; font-size:14px; transition:all .15s;
}
.adm-btn-del:hover { border-color:#f87171; color:#f87171; }
.adm-btn-link {
  background:transparent; border:1px solid transparent; color:var(--muted);
  border-radius:5px; padding:4px 7px; cursor:pointer; font-size:13px; transition:all .15s; margin-right:2px;
}
.adm-btn-link:hover { border-color:var(--accent); color:var(--accent); }
/* ── Admin page viewport constraint ─────────────────────── */
#page-securities.active {
  display: flex !important; flex-direction: column;
  padding: 0; max-width: 100%; margin: 0;
  height: 100vh; overflow: hidden;
}
#adm-app { flex: 1; min-height: 0; }
#adm-table-wrap { flex: 1; overflow: auto; padding: 0 24px 16px; }

/* ── Add modal ───────────────────────────────────────────── */
#adm-add-modal {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.72); z-index: 210;
  align-items: center; justify-content: center;
}
#adm-add-modal.open { display: flex; }
#adm-add-modal .adm-mbox {
  background: var(--bg2); border: 1px solid var(--border2); border-radius: 12px;
  padding: 24px; width: 460px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; gap: 14px;
}
#adm-add-modal h3 { font-size: 15px; font-weight: 600; color: var(--text); margin: 0; }
.adm-add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.adm-add-grid .adm-full { grid-column: 1 / -1; }
.adm-add-field label {
  display: block; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 5px;
}
.adm-add-field input, .adm-add-field select {
  width: 100%; background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 7px; padding: 8px 11px; color: var(--text);
  font-size: 13px; outline: none; font-family: inherit; box-sizing: border-box;
  transition: border-color .15s;
}
.adm-add-field input:focus, .adm-add-field select:focus { border-color: var(--accent); }
.adm-add-field input.adm-invalid { border-color: #f87171; }
#adm-add-hint {
  font-size: 12px; color: var(--muted); line-height: 1.6;
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 7px; padding: 8px 11px;
}
#adm-add-status { font-size: 12px; min-height: 18px; }
.adm-modal-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 2px; }
.adm-btn-cancel {
  background: transparent; border: 1px solid var(--border2); color: var(--muted);
  border-radius: 7px; padding: 8px 16px; cursor: pointer; font-size: 13px;
}
.adm-btn-cancel:hover { border-color: var(--text); color: var(--text); }
.adm-btn-ok {
  background: var(--accent); color: #0d0f0e; border: none;
  border-radius: 7px; padding: 8px 20px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.adm-btn-ok:hover { opacity: .88; }
/* ── Admin tabs ─────────────────────────────────────────── */
.adm-tabs { display:flex; gap:0; border-bottom:1px solid var(--border2); background:var(--bg2); padding:0 16px; flex-shrink:0; }
.adm-tab-btn { background:transparent; border:none; border-bottom:2px solid transparent; color:var(--muted); font-size:13px; font-weight:500; padding:10px 16px; cursor:pointer; transition:color .15s,border-color .15s; white-space:nowrap; }
.adm-tab-btn:hover { color:var(--text); }
.adm-tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
#adm-panel-titres { display:flex; flex-direction:column; flex:1; min-height:0; }
#adm-panel-div { display:none; flex-direction:column; flex:1; min-height:0; }
#div-table-wrap { flex:1; overflow:auto; padding:0 24px 16px; }
/* ── Dividendes detail modal ────────────────────────────── */
#adm-div-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:220; align-items:center; justify-content:center; }
#adm-div-modal.open { display:flex; }
#adm-div-modal .adm-mbox { width:720px; max-width:calc(100vw - 32px); max-height:82vh; display:flex; flex-direction:column; gap:0; padding:0; overflow:hidden; background:var(--bg2); border:1px solid var(--border2); border-radius:12px; }
.div-modal-head { padding:18px 24px 12px; border-bottom:1px solid var(--border2); flex-shrink:0; }
.div-modal-head h3 { margin:0 0 10px; font-size:15px; font-weight:600; }
.div-sub-tabs { display:flex; gap:0; }
.div-sub-tab { background:transparent; border:none; border-bottom:2px solid transparent; color:var(--muted); font-size:12px; font-weight:500; padding:6px 14px; cursor:pointer; transition:color .15s,border-color .15s; }
.div-sub-tab:hover { color:var(--text); }
.div-sub-tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
.div-modal-body { flex:1; overflow:auto; padding:16px 24px; }
.div-modal-foot { padding:12px 24px; border-top:1px solid var(--border2); display:flex; gap:8px; justify-content:flex-end; align-items:center; flex-shrink:0; }
.div-inline-table { width:100%; border-collapse:collapse; font-size:13px; }
.div-inline-table th { text-align:left; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; padding:6px 8px; border-bottom:1px solid var(--border2); white-space:nowrap; }
.div-inline-table td { padding:5px 6px; border-bottom:1px solid var(--border2); vertical-align:middle; }
.div-inline-table input[type="number"], .div-inline-table input[type="date"] { background:var(--bg3); border:1px solid var(--border2); border-radius:5px; padding:4px 7px; color:var(--text); font-size:12px; width:100%; box-sizing:border-box; outline:none; }
input[type="date"]::-webkit-calendar-picker-indicator { filter:invert(1) brightness(1.5); opacity:.65; cursor:pointer; transition:opacity .15s; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity:1; }
.div-inline-table input:focus { border-color:var(--accent); }
.div-inline-table select { background:var(--bg3); border:1px solid var(--border2); border-radius:5px; padding:4px 7px; color:var(--text); font-size:12px; width:100%; box-sizing:border-box; outline:none; }
.div-del-btn { background:transparent; border:none; color:var(--muted); cursor:pointer; font-size:14px; padding:2px 6px; border-radius:4px; }
.div-del-btn:hover { color:#f87171; }

/* ═══ FOOTER GLOBAL (restauré Phase 157, 2026-07-07) ═══════════════════ */
.site-footer{padding:32px 0 24px;border-top:1px solid var(--border);margin-top:56px;color:var(--muted);font-size:.84rem}
.site-footer-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:center;max-width:1180px;margin:0 auto;padding:0 32px}
.site-footer-brand{font-weight:700}
.site-footer-brand span.sf-accent{color:var(--accent)}
.site-footer-links{display:flex;gap:20px;flex-wrap:wrap}
.site-footer-links a{cursor:pointer;transition:color .15s}
.site-footer-links a:hover{color:var(--text)}
.site-footer-social{display:flex;align-items:center;gap:14px}
.site-footer-icon{display:inline-flex;color:var(--muted);transition:color .15s}
.site-footer-icon:hover{color:var(--accent)}
.site-footer-copy{max-width:1180px;margin:14px auto 0;padding:0 32px;opacity:.55}

/* ═══ RESPONSIVE BURGER MENU ════════════════════════════════════════════ */
.nav-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--text);
  font-size: 20px;
  margin-left: auto;
  margin-right: 12px;
  transition: color 0.2s;
}
.nav-burger:hover { color: var(--accent); }

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100vh;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  padding-top: 60px;
  transform: translateX(-100%);
  transition: transform 0.3s ease-out;
  z-index: 990;
  overflow-y: auto;
}
.sidebar.open { transform: translateX(0); }

.sidebar-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--text);
  font-size: 20px;
  transition: color 0.2s;
}
.sidebar-close:hover { color: var(--accent); }

.sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidebar-nav li {
  border-bottom: 1px solid var(--border);
}
.sidebar-nav a {
  display: block;
  padding: 12px 16px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  transition: background 0.2s;
}
.sidebar-nav a:hover {
  background: var(--bg);
}

.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
  z-index: 985;
}
.sidebar-overlay.open {
  background: rgba(0, 0, 0, 0.4);
  opacity: 1;
  pointer-events: all;
}

@media (max-width: 768px) {
  .nav-burger { display: block; }
  .nav-tabs { display: none; }
}

.div-add-row-btn { background:var(--bg3); border:1px dashed var(--border2); border-radius:7px; padding:8px 12px; cursor:pointer; color:var(--muted); font-size:13px; font-weight:500; }

/* ═══ MOBILE — barre de navigation (Lot A, 2026-07-12) ══════════════ */
@media (max-width: 768px){
  nav { flex-wrap: wrap; row-gap: 8px; column-gap: 6px; padding: .7rem 1rem; }
  /* burger toujours à l'extrême gauche, cible tactile ≥ 44px, jamais rogné */
  .nav-burger {
    display: flex; align-items: center; justify-content: center;
    order: -1; margin-left: 0; margin-right: 6px;
    min-width: 44px; min-height: 44px;
  }
  .nav-divider { display: none; }
  .nav-share-btn { padding: 6px 10px; font-size: 11.5px; }
}

/* ═══ MOBILE — overview (Lot C, 2026-07-12) ══════════════════════════ */
@media (max-width: 640px){
  /* Grilles 2 colonnes de l'overview → une seule colonne (donut+légende,
     budget+dividendes, etc. reprennent toute la largeur → plus de troncature) */
  .ov-col2 { grid-template-columns: 1fr !important; }
  /* En-tête de page (titre + date + Actualiser) : pas d'écrasement du titre */
  .section-head { flex-wrap: wrap; row-gap: .35rem; margin-bottom: 1rem; }
  .section-head .section-title { font-size: 1.2rem; }
  /* Carrousel véhicules : flèches masquées sur tactile (on swipe) */
  #ov-scroll-left, #ov-scroll-right { display: none !important; }
}

/* ═══ MOBILE — modales de saisie (Lot D, 2026-07-12) ═════════════════ */
@media (max-width: 640px){
  /* Combobox : masquer la mention "Cours du ..." qui chevauchait le placeholder */
  .sc-live { display: none; }
  /* En-tête de colonnes masqué sur mobile (les placeholders suffisent, et ça
     supprime le "Prix de Revient Unitaire (€)" qui se cassait en 3 lignes) */
  .pos-head-grid { display: none !important; }
  /* Ligne de saisie : recherche pleine largeur (ligne 1), puis Qté / PRU / ×
     (ligne 2) → champs larges et confortables. Couvre PEA/CTO/AV/PEE/PER. */
  .pos-data-row > div { grid-template-columns: 1fr 1fr 40px !important; gap: 6px !important; }
  .pos-data-row > div > *:first-child { grid-column: 1 / -1 !important; }
}

/* ═══ MOBILE — grilles multi-colonnes repliées (Lot E, 2026-07-12) ═════
   Cible les grilles inline (analyse, budget, exotiques, dividendes, modale
   budget) qui ne se repliaient pas → colonne de droite coupée sur mobile.
   Sélecteurs d'attribut = aucun HTML modifié. `!important` bat le style inline.
   Les grilles en repeat(auto-fit,minmax(...)) se replient déjà seules : intactes. */
@media (max-width: 640px){
  [style*="grid-template-columns:1fr 1fr;"],
  [style$="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3,minmax(0,1fr))"],
  [style*="grid-template-columns:1fr minmax(210px,300px)"],
  [style*="grid-template-columns:1fr minmax(220px,300px)"],
  [style*="grid-template-columns:1fr minmax(260px,320px)"],
  [style*="grid-template-columns:1fr 1px 1fr"]
  { grid-template-columns: 1fr !important; }
}

/* ═══ MOBILE — onglets scrollables + grandes tables simulateurs (Lot F) ═══
   .chart-tabs est en flex sans wrap → débordait/coupait (sous-onglets Analyse).
   Les tables simulateurs sont en width:100% → se compressaient au lieu de défiler. */
@media (max-width: 640px){
  .chart-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .chart-tabs::-webkit-scrollbar { display: none; }
  .chart-tabs > * { flex-shrink: 0; }
  #sec-matrix, #rebalnc-result, #srente-detail { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #sec-matrix > table { min-width: 520px; }
  #rebalnc-result > table, #srente-detail > table { min-width: 460px; }
}

/* ═══ MOBILE — boutons d'en-tête de page (Lot G, 2026-07-12) ═══════════
   Le bouton d'action (+ Positions / + Ajouter…) en margin-left:auto se
   coupait au bord droit (immo, crédit, exotique, crypto). Sur mobile il
   passe sur sa propre ligne, pleine largeur → jamais coupé, cible tactile. */
@media (max-width: 640px){
  .section-head { flex-wrap: wrap; }
  .section-head > .add-data-btn {
    flex-basis: 100%; width: 100%; margin-left: 0 !important; justify-content: center;
  }
  .section-head > div[style*="margin-left:auto"] { flex-basis: 100%; margin-left: 0 !important; }
  .section-head > div[style*="margin-left:auto"] .add-data-btn { width: 100%; justify-content: center; }
}

/* ═══ MOBILE — finitions (Lot H, 2026-07-12) ══════════════════════════
   Tables positions : en-têtes/valeurs sur une seule ligne (fini le
   "Prix de Revient Unitaire" cassé en 3 lignes) — la table défile (Lot B).
   Landing : bande chiffres 4 col → 2×2 ; hero 2 col → 1 col. */
@media (max-width: 640px){
  #pea-pos-table th, #pea-pos-table td,
  #cto-pos-table th, #cto-pos-table td,
  #av-pos-table th, #av-pos-table td,
  #crypto-pos-table th, #crypto-pos-table td,
  #pee-pos-table th, #pee-pos-table td,
  #per-pos-table th, #per-pos-table td { white-space: nowrap; }
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
  [style*="grid-template-columns:1fr 1.05fr"] { grid-template-columns: 1fr !important; }
}

/* ═══ MOBILE — audit round 2 (Lot I, 2026-07-12) ══════════════════════
   #3/#4 paires de graphes immo/crédit (2fr 1fr) → empilées.
   #5/#6 bandes de stats (.stats) en 2×2 (les dashboards véhicules gardent
   leur comportement via leurs règles #*-stats-grid, plus spécifiques).
   #1/#2 croix des modales de saisie repositionnée en haut à droite. */
@media (max-width: 640px){
  [style*="grid-template-columns:2fr 1fr;"],
  [style$="grid-template-columns:2fr 1fr"] { grid-template-columns: 1fr !important; }

  .stats { grid-template-columns: repeat(2, 1fr) !important; }

  #pea-pos-modal .modal-content, #cto-pos-modal .modal-content,
  #av-pos-modal .modal-content, #pee-pos-modal .modal-content,
  #per-pos-modal .modal-content { position: relative; }
  #pea-pos-modal button[aria-label="Fermer"], #cto-pos-modal button[aria-label="Fermer"],
  #av-pos-modal button[aria-label="Fermer"], #pee-pos-modal button[aria-label="Fermer"],
  #per-pos-modal button[aria-label="Fermer"] {
    position: absolute; top: 10px; right: 10px; z-index: 3;
  }
}

/* ═══ MOBILE — lignes de titres en CARTES empilées (Lot J, 2026-07-12) ══
   Les tables de positions (#*-pos-table) deviennent des cartes : nom en tête,
   puis une ligne "label · valeur" par colonne. 100% CSS (nth-child + ::before),
   aucun JS/HTML touché. Ordre colonnes fixe : Nom, Qté/Contrat, PRU/Investi,
   Valo, PV, Part [, ×]. */
@media (max-width: 640px){
  [id$="-pos-table"] { max-height: none !important; overflow: visible !important; }
  [id$="-pos-table"] table { min-width: 0 !important; display: block; }
  [id$="-pos-table"] thead { display: none; }
  [id$="-pos-table"] tbody { display: block; }
  [id$="-pos-table"] tbody tr {
    display: block; background: var(--bg2);
    border: 1px solid var(--border); border-radius: 10px;
    padding: 10px 12px; margin-bottom: 8px;
  }
  [id$="-pos-table"] tbody td {
    display: flex; justify-content: space-between; align-items: baseline;
    text-align: right !important; padding: 3px 0 !important; border: none !important;
    white-space: nowrap;
  }
  [id$="-pos-table"] tbody td::before {
    content: ""; color: var(--muted); font-size: 11px; text-transform: uppercase;
    letter-spacing: .03em; text-align: left; font-weight: 400; margin-right: 12px;
  }
  /* Nom : pleine largeur, mis en avant, séparateur, pas de label */
  [id$="-pos-table"] tbody td:first-child {
    display: block; text-align: left !important; white-space: normal !important;
    font-size: 15px; font-weight: 600; padding-bottom: 6px !important;
    margin-bottom: 4px; border-bottom: 1px solid var(--border) !important;
  }
  [id$="-pos-table"] tbody td:first-child::before { display: none; }
  /* Cellule action (×) en 7e : label masqué, bouton à droite */
  [id$="-pos-table"] tbody td:nth-child(7) { justify-content: flex-end; }
  [id$="-pos-table"] tbody td:nth-child(7)::before { display: none; }

  /* Labels par colonne — groupe standard (PEA/CTO/crypto/PEE/PER) */
  #pea-pos-table td:nth-child(2)::before,#cto-pos-table td:nth-child(2)::before,#crypto-pos-table td:nth-child(2)::before,#pee-pos-table td:nth-child(2)::before,#per-pos-table td:nth-child(2)::before{content:"Qté"}
  #pea-pos-table td:nth-child(3)::before,#cto-pos-table td:nth-child(3)::before,#crypto-pos-table td:nth-child(3)::before,#pee-pos-table td:nth-child(3)::before,#per-pos-table td:nth-child(3)::before{content:"PRU"}
  #pea-pos-table td:nth-child(4)::before,#cto-pos-table td:nth-child(4)::before,#crypto-pos-table td:nth-child(4)::before,#pee-pos-table td:nth-child(4)::before,#per-pos-table td:nth-child(4)::before{content:"Valorisation"}
  #pea-pos-table td:nth-child(5)::before,#cto-pos-table td:nth-child(5)::before,#crypto-pos-table td:nth-child(5)::before,#pee-pos-table td:nth-child(5)::before,#per-pos-table td:nth-child(5)::before{content:"Plus-value"}
  #pea-pos-table td:nth-child(6)::before,#cto-pos-table td:nth-child(6)::before,#crypto-pos-table td:nth-child(6)::before,#pee-pos-table td:nth-child(6)::before,#per-pos-table td:nth-child(6)::before{content:"Part"}
  /* AV : Contrat / Investi / Valorisation / Plus-value / Part */
  #av-pos-table td:nth-child(2)::before{content:"Contrat"}
  #av-pos-table td:nth-child(3)::before{content:"Investi"}
  #av-pos-table td:nth-child(4)::before{content:"Valorisation"}
  #av-pos-table td:nth-child(5)::before{content:"Plus-value"}
  #av-pos-table td:nth-child(6)::before{content:"Part"}
}

/* ── Ajustement Lot J : croix en haut à droite de la carte (2026-07-12) ── */
@media (max-width: 640px){
  [id$="-pos-table"] tbody tr { position: relative; }
  [id$="-pos-table"] tbody td:first-child { padding-right: 30px !important; }
  [id$="-pos-table"] tbody td:nth-child(7) {
    position: absolute; top: 8px; right: 10px; padding: 0 !important; margin: 0;
  }
}

/* ═══ MOBILE — positions exotiques + métaux en CARTES (Lot K, 2026-07-12) ══
   Mêmes cartes empilées que le Lot J, pour #exotiques-positions-wrap (7 col :
   Nom,Catégorie,Date,Prix,Valeur,PV,×) et #metaux-positions-wrap (10 col :
   Nom,Métal,Qté,Poids,PRU,Cours,Valeur,PV,%,×). 100% CSS. */
@media (max-width: 640px){
  #exotiques-positions-wrap, #metaux-positions-wrap { max-height: none !important; overflow: visible !important; }
  #exotiques-positions-wrap table, #metaux-positions-wrap table { min-width: 0 !important; display: block; }
  #exotiques-positions-wrap thead, #metaux-positions-wrap thead { display: none; }
  #exotiques-positions-wrap tbody, #metaux-positions-wrap tbody { display: block; }
  #exotiques-positions-wrap tbody tr, #metaux-positions-wrap tbody tr {
    display: block; position: relative; background: var(--bg2);
    border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
  }
  #exotiques-positions-wrap tbody td, #metaux-positions-wrap tbody td {
    display: flex; justify-content: space-between; align-items: baseline;
    text-align: right !important; padding: 3px 0 !important; border: none !important; white-space: nowrap;
  }
  #exotiques-positions-wrap tbody td::before, #metaux-positions-wrap tbody td::before {
    content: ""; color: var(--muted); font-size: 11px; text-transform: uppercase;
    letter-spacing: .03em; text-align: left; font-weight: 400; margin-right: 12px;
  }
  #exotiques-positions-wrap tbody td:first-child, #metaux-positions-wrap tbody td:first-child {
    display: block; text-align: left !important; white-space: normal !important;
    font-size: 15px; font-weight: 600; padding-right: 30px !important; padding-bottom: 6px !important;
    margin-bottom: 4px; border-bottom: 1px solid var(--border) !important;
  }
  #exotiques-positions-wrap tbody td:first-child::before, #metaux-positions-wrap tbody td:first-child::before { display: none; }
  #exotiques-positions-wrap tbody td:nth-child(7), #metaux-positions-wrap tbody td:nth-child(10) {
    position: absolute; top: 8px; right: 10px; padding: 0 !important; margin: 0;
  }
  #exotiques-positions-wrap tbody td:nth-child(7)::before, #metaux-positions-wrap tbody td:nth-child(10)::before { display: none; }

  #exotiques-positions-wrap td:nth-child(2)::before{content:"Catégorie"}
  #exotiques-positions-wrap td:nth-child(3)::before{content:"Date d'achat"}
  #exotiques-positions-wrap td:nth-child(4)::before{content:"Prix d'achat"}
  #exotiques-positions-wrap td:nth-child(5)::before{content:"Valeur estimée"}
  #exotiques-positions-wrap td:nth-child(6)::before{content:"Plus-value"}

  #metaux-positions-wrap td:nth-child(2)::before{content:"Métal"}
  #metaux-positions-wrap td:nth-child(3)::before{content:"Qté"}
  #metaux-positions-wrap td:nth-child(4)::before{content:"Poids"}
  #metaux-positions-wrap td:nth-child(5)::before{content:"PRU"}
  #metaux-positions-wrap td:nth-child(6)::before{content:"Cours"}
  #metaux-positions-wrap td:nth-child(7)::before{content:"Valeur"}
  #metaux-positions-wrap td:nth-child(8)::before{content:"Plus-value"}
  #metaux-positions-wrap td:nth-child(9)::before{content:"Part"}
}

/* ═══ MOBILE — carte Composition métaux/exotiques (Lot L, 2026-07-12) ═══
   Desktop : treemap + camembert côte à côte (grille 1fr 1fr). Sur mobile le
   Lot E les empilait → le treemap (souvent vide, plugin treemap lazy) laissait
   un grand blanc. On masque le conteneur du treemap : le camembert + légende
   prennent toute la largeur, plus d'espace mort. */
@media (max-width: 640px){
  div:has(> #metaux-comp-treemap),
  div:has(> #exotiques-comp-treemap) { display: none !important; }
}

/* ═══ MOBILE — Analyse « Mes positions » : stats en lignes (Lot M, 2026-07-12)
   Les 3 stats (Valorisation / PRU / Nb actions) passent en lignes empilées
   compactes : valeur à gauche, titre à droite, séparateur entre chaque. */
@media (max-width: 640px){
  #ov-pos-detail-content .stats { grid-template-columns: 1fr !important; gap: 0 !important; margin-bottom: 1rem !important; }
  #ov-pos-detail-content .stat {
    background: transparent !important; border: none !important; border-radius: 0 !important;
    border-bottom: 1px solid var(--border) !important; padding: 10px 2px !important;
    display: flex; flex-direction: row; align-items: baseline;
    justify-content: space-between; gap: 12px;
  }
  #ov-pos-detail-content .stat:last-child { border-bottom: none !important; }
  #ov-pos-detail-content .stat-label { margin: 0 !important; text-align: left; }
  #ov-pos-detail-content .stat-value { font-size: 1.2rem; }
}

/* ═══ MOBILE — grilles de graphes immo/crédit affichées par JS (Lot N) ═════
   #immo-charts-row et #credits-charts-row démarrent en display:none et sont
   passés en display:grid par le JS → le navigateur re-sérialise le style inline
   (espaces après ':'), ce qui cassait le sélecteur d'attribut du Lot I. On
   cible par id (robuste) → graphes empilés sur mobile. */
@media (max-width: 640px){
  #immo-charts-row, #credits-charts-row { grid-template-columns: 1fr !important; }
}

/* ═══ MOBILE — stats véhicules en LIGNES compactes (Lot O, 2026-07-12) ═════
   Sur 12 grilles (PEA/CTO/AV/crypto/métaux/exotiques/PEE/PER/dividendes/budget/
   immo/crédit), les cartes de stats deviennent des lignes : label à gauche,
   valeur à droite, sous-texte (.stat-foot/.stat-sub) préservé en petite ligne
   dessous. Les cartes "Performance" (.stat-perf-row) restent en bloc (déjà en
   lignes). 100% CSS. Livrets NON concerné (non demandé). */
@media (max-width: 640px){
  :is(#stats-grid,#cto-stats-grid,#av-stats-grid,#crypto-stats-grid,#metaux-stats,#exotiques-stats-grid,#pee-stats-grid,#per-stats-grid,#div-stats-grid,#immo-stats-grid,#credits-stats-grid,#livrets-stats-grid,#page-budget .stats){
    grid-template-columns: 1fr !important; gap: 0 !important;
  }
  :is(#stats-grid,#cto-stats-grid,#av-stats-grid,#crypto-stats-grid,#metaux-stats,#exotiques-stats-grid,#pee-stats-grid,#per-stats-grid,#div-stats-grid,#immo-stats-grid,#credits-stats-grid,#livrets-stats-grid,#page-budget .stats) .stat{
    background: transparent !important; border: none !important; border-radius: 0 !important;
    border-bottom: 1px solid var(--border) !important; padding: 9px 2px !important;
    text-align: left !important; margin: 0 !important;
  }
  :is(#stats-grid,#cto-stats-grid,#av-stats-grid,#crypto-stats-grid,#metaux-stats,#exotiques-stats-grid,#pee-stats-grid,#per-stats-grid,#div-stats-grid,#immo-stats-grid,#credits-stats-grid,#livrets-stats-grid,#page-budget .stats) .stat:last-child{
    border-bottom: none !important;
  }
  :is(#stats-grid,#cto-stats-grid,#av-stats-grid,#crypto-stats-grid,#metaux-stats,#exotiques-stats-grid,#pee-stats-grid,#per-stats-grid,#div-stats-grid,#immo-stats-grid,#credits-stats-grid,#livrets-stats-grid,#page-budget .stats) .stat:not(:has(.stat-perf-row)){
    display: grid !important; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 12px;
  }
  :is(#stats-grid,#cto-stats-grid,#av-stats-grid,#crypto-stats-grid,#metaux-stats,#exotiques-stats-grid,#pee-stats-grid,#per-stats-grid,#div-stats-grid,#immo-stats-grid,#credits-stats-grid,#livrets-stats-grid,#page-budget .stats) .stat:not(:has(.stat-perf-row)) .stat-label{
    align-self: center; margin: 0 !important;
  }
  :is(#stats-grid,#cto-stats-grid,#av-stats-grid,#crypto-stats-grid,#metaux-stats,#exotiques-stats-grid,#pee-stats-grid,#per-stats-grid,#div-stats-grid,#immo-stats-grid,#credits-stats-grid,#livrets-stats-grid,#page-budget .stats) .stat:not(:has(.stat-perf-row)) .stat-value{
    text-align: right; font-size: 1.2rem; margin: 0 !important;
  }
  :is(#stats-grid,#cto-stats-grid,#av-stats-grid,#crypto-stats-grid,#metaux-stats,#exotiques-stats-grid,#pee-stats-grid,#per-stats-grid,#div-stats-grid,#immo-stats-grid,#credits-stats-grid,#livrets-stats-grid,#page-budget .stats) .stat-foot,
  :is(#stats-grid,#cto-stats-grid,#av-stats-grid,#crypto-stats-grid,#metaux-stats,#exotiques-stats-grid,#pee-stats-grid,#per-stats-grid,#div-stats-grid,#immo-stats-grid,#credits-stats-grid,#livrets-stats-grid,#page-budget .stats) .stat-sub{
    grid-column: 1 / -1; margin-top: 3px !important; padding-top: 0 !important;
    border-top: none !important; justify-content: space-between !important;
  }
  :is(#stats-grid,#cto-stats-grid,#av-stats-grid,#crypto-stats-grid,#metaux-stats,#exotiques-stats-grid,#pee-stats-grid,#per-stats-grid,#div-stats-grid,#immo-stats-grid,#credits-stats-grid,#livrets-stats-grid,#page-budget .stats) .stat:has(.stat-perf-row){
    display: block !important;
  }
  :is(#stats-grid,#cto-stats-grid,#av-stats-grid,#crypto-stats-grid,#metaux-stats,#exotiques-stats-grid,#pee-stats-grid,#per-stats-grid,#div-stats-grid,#immo-stats-grid,#credits-stats-grid,#livrets-stats-grid,#page-budget .stats) .stat:has(.stat-perf-row) .stat-label{
    margin: 0 0 4px !important;
  }
}

/* ═══ MOBILE — Analyse « Dividendes » : espacement réduit (Lot P, 2026-07-12)
   .chart-card a margin-bottom:1.5rem qui s'ajoutait aux gap des conteneurs
   flex/grid → double espace une fois empilé sur mobile. On réduit dans l'onglet. */
@media (max-width: 640px){
  #analyse-panel-cac40 .chart-card { margin-bottom: .6rem; }
  #analyse-panel-cac40 [style*="grid-template-columns:1fr minmax(210px,300px)"] { gap: .6rem !important; }
}

/* ═══ MOBILE — Analyse Exposition géo : masquer le séparateur (Lot Q) ═══
   La grille 1fr 1px 1fr (zones | trait vertical | HHI) est repliée sur mobile
   (Lot E) → le trait (div background:border;min-height:80px) devenait une grande
   barre grise pleine largeur. On le masque quand empilé. */
@media (max-width: 640px){
  [style*="grid-template-columns:1fr 1px 1fr"] > div:nth-child(2) { display: none !important; }
}

/* ═══ MOBILE — Overview hero « Patrimoine brut total » cohérent (Lot R) ═══
   Les mini-stats (Capital investi, Plus-value, Rendement / Actif, Immo, Dettes,
   Patrimoine net) passent en lignes label·valeur comme le reste de l'app.
   Ciblage via ids existants : row1 = #ov-total-val + div, row2 = #ov-net-worth-row. */
@media (max-width: 640px){
  #ov-total-val + div, #ov-net-worth-row { flex-direction: column !important; gap: 0 !important; }
  #ov-total-val + div > div, #ov-net-worth-row > div {
    display: flex !important; justify-content: space-between; align-items: baseline;
    padding: 7px 0; border-bottom: 1px solid var(--border2);
    border-left: none !important; padding-left: 0 !important; margin: 0 !important;
  }
  #ov-total-val + div > div > div:first-child,
  #ov-net-worth-row > div > div:first-child { margin-bottom: 0 !important; }
  #ov-total-val + div > div:last-child, #ov-net-worth-row > div:last-child { border-bottom: none !important; }
}

/* ── Hover du menu burger façon navbar (accent) — 2026-07-12 ──────────── */
.sidebar-nav a { transition: background .2s, color .15s, border-color .15s; border-left: 3px solid transparent; }
.sidebar-nav a:hover { background: var(--bg3); color: var(--text); border-left-color: var(--accent); }
.sidebar-nav a.active { background: var(--bg3); color: var(--accent); border-left-color: var(--accent); }

/* ═══ MOBILE — cartes de biens immobiliers réagencées (Lot T, 2026-07-12) ══
   La carte (#immo-list > div) est une ligne flex 3 colonnes (nom/méta ·
   badges · valeur) trop tassée sur mobile. On passe en grille 2 lignes :
   ligne 1 = nom/méta (gauche) + valeur (droite) ; ligne 2 = badges pleine largeur. */
@media (max-width: 640px){
  #immo-list > div {
    display: grid !important; grid-template-columns: 1fr auto;
    align-items: start !important; gap: 4px 10px !important;
  }
  #immo-list > div > div:nth-child(1) { grid-column: 1; grid-row: 1; }
  #immo-list > div > div:nth-child(3) { grid-column: 2; grid-row: 1; min-width: 0 !important; }
  #immo-list > div > div:nth-child(2) {
    grid-column: 1 / -1; grid-row: 2; justify-content: flex-start !important; margin-top: 2px;
  }
}

/* ═══ Voile de chargement #app-loading-overlay (CSS reconstruit 2026-07-12) ══
   Le markup + le JS (init.js, classe .fade-out puis suppression) existaient mais
   le CSS avait disparu → overlay invisible, spinner non animé. Reconstruit. */
#app-loading-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  opacity: 1; transition: opacity .3s ease;
}
#app-loading-overlay.fade-out { opacity: 0; pointer-events: none; }
.alo-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.alo-logo { width: 42px; height: 42px; border-radius: 10px; }
.alo-spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--border2); border-top-color: var(--accent);
  animation: alo-spin .8s linear infinite;
}
@keyframes alo-spin { to { transform: rotate(360deg); } }

/* ═══ Bandeau "Créer un compte" (Phase 207, 2026-08-10) ══════════════════
   Glissement du bas vers le haut à l'apparition plutôt qu'un display:block
   brutal — même bandeau fixe bas d'écran que #rgpd-consent. */
#div-signup-cta {
  animation: div-cta-slide-in .35s cubic-bezier(.22,1,.36,1);
}
@keyframes div-cta-slide-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ═══ Toast "Voir la démo" (Phase 203, 2026-08-10) ═══════════════════════
   Invitation non-intrusive (coin bas-droit, hors flux) affichée après la
   6e recherche de dividendes pour un invité — remplace le bandeau
   d'inscription. Slide-in + petit point qui pulse, aucun overlay/blocage. */
#div-demo-toast {
  animation: div-toast-in .45s cubic-bezier(.22,1,.36,1);
}
@keyframes div-toast-in {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.div-toast-dot {
  animation: div-toast-pulse 1.8s ease-in-out infinite;
}
@keyframes div-toast-pulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .4; transform: scale(1.4); }
}
@media (max-width: 640px) {
  #div-demo-toast { left: 16px; right: 16px; max-width: none; bottom: 16px; }
}
/* ═══ Fix audit réel iPhone (Lot V, 2026-07-13) ═══════════════════════ */
/* Burger dessiné en CSS → indépendant de la police d'icônes (qui pouvait
   être bloquée par la CSP → burger invisible). */
.nav-burger .ti { display: none; }
.nav-burger::before {
  content: ""; display: block; width: 20px; height: 2px;
  background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}
@media (max-width: 640px){
  /* Saisie métaux + exotiques : grilles 5-6 colonnes → 2 colonnes (header et
     lignes d'entrée restent alignés car même grille). */
  [style*="grid-template-columns:1.6fr 1fr 1fr 1fr 1fr 28px"],
  [style*="grid-template-columns:2fr 1fr 1fr 1fr 1fr"],
  [style*="grid-template-columns:2fr 70px 80px 90px 90px"],
  [style*="grid-template-columns:2fr 1fr 1fr 1fr;"],
  [style$="grid-template-columns:2fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
  /* Croix de la modale exotiques en haut à droite (le titre sur 2 lignes la
     faisait passer en dessous). */
  #exotiques-modal .modal-content { position: relative; }
  #exotiques-modal button[aria-label="Fermer"] { position: absolute; top: 10px; right: 10px; z-index: 3; }
}

/* ═══ MOBILE — combobox recherche : dropdown pleine largeur (Lot W, 2026-07-13)
   .sc-dropdown (portal position:fixed, left/width fixés en JS = largeur input)
   devenait étroit et illisible sur mobile. On l'étend sur toute la largeur. */
@media (max-width: 640px){
  .sc-dropdown { left: 8px !important; right: 8px !important; width: auto !important; max-width: calc(100vw - 16px); }
}

/* ═══ MOBILE — modales jamais plus larges que l'écran (Lot X, 2026-07-13)
   Certaines modales (max-width 560/860/920px inline) dépassaient le viewport
   sur petit écran → contenu coupé à droite (ex. saisie immobilier). On plafonne
   toute .modal-content à la largeur de l'écran. */
@media (max-width: 640px){
  .modal-content { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; }
}

/* ═══ MOBILE — budget : valeur € sur une seule ligne (Lot Y, 2026-07-13)
   La cellule montant des tables Entrées/Sorties du mois n'avait pas nowrap
   → « 2 550,00 » et « € » se séparaient sur deux lignes. */
@media (max-width: 640px){
  #budget-in-tbody td:nth-child(3), #budget-out-tbody td:nth-child(3) { white-space: nowrap; }
}

/* ═══ MOBILE — header compacté pour tenir sur une ligne (Lot Z1, 2026-07-13)
   Marque + boutons resserrés → burger·Rosmerta·Partager·Feedback·compte sur une
   seule ligne (logged-in). flex-wrap conservé en secours pour la vue invité. */
@media (max-width: 768px){
  nav { column-gap: 4px; padding: .6rem .75rem; }
  .nav-brand { font-size: 1.15rem; padding: 4px 8px; margin: -4px -8px -4px 0; }
  .nav-burger { margin-right: 2px; }
  .nav-share-btn { padding: 4px 8px; font-size: 11px; }
}

/* ═══ MOBILE — inputs date jamais débordants (Lot Z2, 2026-07-13)
   Sécurité : les champs date/month restent dans leur conteneur (le débordement
   visible venait surtout de la modale trop large, corrigé au Lot X). */
@media (max-width: 640px){
  input[type="date"], input[type="month"] { min-width: 0; max-width: 100%; box-sizing: border-box; }
}

/* ═══ MOBILE — sliders timeline plus grands (Lot Z3, 2026-07-13)
   Zone tactile agrandie (hauteur) pour les sliders de date, style natif
   coloré par véhicule (accent-color) conservé. */
@media (max-width: 640px){
  input[type="range"] { height: 34px; cursor: pointer; }
}

/* ═══ MOBILE — saisie métaux/exotiques : champs agrandis (Lot Z4, 2026-07-13)
   Inputs/selects plus grands et plus tapables ; font 16px = pas de zoom auto iOS. */
@media (max-width: 640px){
  #exotiques-modal input, #exotiques-modal select,
  #metaux-modal input, #metaux-modal select {
    font-size: 16px !important; padding: 9px 8px !important;
    min-height: 42px; box-sizing: border-box;
  }
}

/* ═══ MOBILE — header connecté tient sur UNE ligne (Lot AA, 2026-07-14)
   L'avatar compte (#nav-auth-badge) passait à la 2e ligne à cause de flex-wrap.
   En mode connecté (bouton invité #nav-auth-btn masqué → style contient "none"),
   on force nowrap et on compacte marque + Partager/Feedback + badge pour tout
   faire tenir sur une ligne. La vue invité garde flex-wrap (bouton
   « Inscription / Connexion » long qui a besoin de passer à la ligne). */
@media (max-width: 768px){
  nav:has(#nav-auth-btn[style*="none"]) { flex-wrap: nowrap; column-gap: 3px; }
  nav:has(#nav-auth-btn[style*="none"]) .nav-brand { flex: 0 0 auto; }
  nav:has(#nav-auth-btn[style*="none"]) .nav-share-btn {
    padding: 4px 7px; font-size: 10.5px; white-space: nowrap; flex: 0 0 auto;
  }
  nav:has(#nav-auth-btn[style*="none"]) #nav-auth-badge {
    margin-left: 4px !important; flex: 0 0 auto;
  }
}

/* ═══ MOBILE — Partager/Feedback en icônes seules (Lot AM, 2026-07-14)
   Sous 640px, en mode connecté, le libellé texte des boutons Partager/
   Feedback est masqué : seule l'icône (↗ / ✉) reste visible, dans un bouton
   carré compact. Le texte reste accessible via aria-label (déjà présent sur
   les <button>) pour les lecteurs d'écran. Desktop/tablette inchangés. */
@media (max-width: 640px){
  nav:has(#nav-auth-btn[style*="none"]) .nav-share-btn-label { display: none; }
  nav:has(#nav-auth-btn[style*="none"]) .nav-share-btn {
    padding: 6px 9px; min-width: 30px; min-height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}

/* ═══ MOBILE — champs date : iOS respecte enfin width/font (Lot AB, 2026-07-14)
   Sur iOS, input[type=date] NATIF ignore width/font-size/text-align → la valeur
   s'affichait trop grosse et centrée (dividendes 4832) et la boîte débordait du
   formulaire (objectif 4817, immo 4829, crédit 4830) malgré width:100%;box-sizing.
   -webkit-appearance:none force le contrôle à respecter sa boîte CSS existante.
   ::-webkit-date-and-time-value aligne la valeur à gauche comme les autres champs.
   On ne (re)force PAS width:100% ici → les petits champs date inline (méta
   d'ouverture) gardent leur largeur propre et ne s'étirent pas. */
@media (max-width: 640px){
  input[type="date"] { -webkit-appearance: none; appearance: none; font-size: 15px; }
  input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
}

/* ═══ MOBILE — croix de fermeture toujours en haut à droite (Lot AC, 2026-07-14)
   Les modales « saisie » ont un header flex-wrap ; quand le titre s'étale sur
   plusieurs lignes, le bouton × (dernier enfant) passait SOUS le titre (crédits
   4831, + crypto/livrets/métaux non couverts par Lot I/V). On généralise le
   positionnement absolu top-right à toutes les .modal-content (le bouton porte
   aria-label="Fermer") ; .modal-close est déjà positionné → exclu. Les modales
   custom #credit-modal / #immo-modal (sans aria-label) sont ciblées par id.
   Remplace/complète les règles per-id des Lots I et V. */
@media (max-width: 640px){
  .modal-content { position: relative; }
  .modal-content [aria-label="Fermer"]:not(.modal-close) {
    position: absolute; top: 10px; right: 10px; z-index: 5;
  }
  /* Modales custom crédits & immobilier (header = 1er enfant de la boîte interne) */
  #credit-modal > div > div:first-child,
  #immo-modal  > div > div:first-child { position: relative; }
  #credit-modal > div > div:first-child > button:last-child,
  #immo-modal  > div > div:first-child > button:last-child {
    position: absolute; top: 0; right: 0; z-index: 5; margin: 0;
  }
}

/* ═══ MOBILE — modales de saisie : lignes empilées + bandeau meta (Lot AD, 2026-07-14)
   1) Lignes de saisie CTO/crypto/PER/PEE (+ PEA) : la grille inline
      « 2fr 1fr 1fr 32px » posée en JS (style.cssText → re-sérialisée AVEC espace
      après ':', cf. Lot N) restait sur une seule ligne serrée (4820/4822/4824/4826).
      → recherche pleine largeur (1re ligne) puis Qté / PRU / × (2e ligne).
      AV : grille « 1.4fr 2fr 1fr 1fr 32px » → Contrat + Fonds pleine largeur, puis
      Qté / Prix / × (4821).
   2) Bandeau meta (Ouverture / Abondement) du header des modales pos : passe pleine
      largeur et ses puces s'empilent → plus de débordement latéral (PEE 4824).
   On cible les 2 variantes de sérialisation (avec/sans espace) par robustesse. */
@media (max-width: 640px){
  /* --- 1) lignes 4 champs (CTO/crypto/PER/PEE/PEA) --- */
  [style*="grid-template-columns:2fr 1fr 1fr 32px"],
  [style*="grid-template-columns: 2fr 1fr 1fr 32px"]{
    grid-template-columns: 1fr 1fr 32px !important; row-gap: 6px !important;
  }
  [style*="grid-template-columns:2fr 1fr 1fr 32px"] > *:first-child,
  [style*="grid-template-columns: 2fr 1fr 1fr 32px"] > *:first-child{
    grid-column: 1 / -1 !important;
  }
  /* --- 1bis) ligne AV (5 champs) --- */
  [style*="grid-template-columns:1.4fr 2fr 1fr 1fr 32px"],
  [style*="grid-template-columns: 1.4fr 2fr 1fr 1fr 32px"]{
    grid-template-columns: 1fr 1fr 32px !important; row-gap: 6px !important;
  }
  [style*="grid-template-columns:1.4fr 2fr 1fr 1fr 32px"] > *:nth-child(1),
  [style*="grid-template-columns: 1.4fr 2fr 1fr 1fr 32px"] > *:nth-child(1),
  [style*="grid-template-columns:1.4fr 2fr 1fr 1fr 32px"] > *:nth-child(2),
  [style*="grid-template-columns: 1.4fr 2fr 1fr 1fr 32px"] > *:nth-child(2){
    grid-column: 1 / -1 !important;
  }
  /* --- 2) bandeau meta du header (dernier bloc du header des modales pos) --- */
  .modal-content > div:first-child > div:last-child{
    flex-wrap: wrap; width: 100%; gap: 6px !important; justify-content: flex-start;
  }
  .modal-content > div:first-child > div:last-child > div{ flex: 1 1 140px; min-width: 0; }
  .modal-content > div:first-child input[type="date"],
  .modal-content > div:first-child input[type="number"]{
    min-width: 0 !important; width: auto; flex: 1 1 auto;
  }
}

/* ═══ MOBILE — saisie exotiques calquée sur métaux (Lot AE, 2026-07-14)
   La ligne de saisie exotiques est posée en JS (exotiques.js : row.style.cssText)
   → le style inline est re-sérialisé AVEC un espace après ':' (piège Lot N). Le
   sélecteur no-space du Lot V ne matchait donc pas → la ligne restait sur 6
   colonnes débordantes (4828) alors que métaux (HTML littéral, sans espace) était
   déjà en 2 colonnes propres (4827). On ajoute la variante AVEC espace. */
@media (max-width: 640px){
  [style*="grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 28px"]{
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ═══ MOBILE — combobox dividendes (et .sc-dropdown) plus lisible (Lot AF, 2026-07-14)
   Le dropdown des titres détenus s'affichait mal placé (bug JS corrigé dans
   navigation.js : plus d'ajout de window.scrollY sur un élément position:fixed →
   il s'ancre désormais juste sous le champ). Ici on améliore lisibilité + zone
   tactile et on plafonne la hauteur pour rester au-dessus du clavier (4833). */
@media (max-width: 640px){
  .sc-dropdown { max-height: 42vh; }
  .sc-option { font-size: 13px; padding: 11px 12px; }
}

/* ═══ MOBILE — Analyse : cartes KPI → lignes (Lot AI, 2026-07-14)
   Les grilles KPI des panneaux Analyse (secteurs 4834, géo 4835, revenus passifs
   4837) sont des .stats SANS id → non captées par Lot O. On leur applique le même
   rendu liste (label gauche · valeur droite, sous-texte dessous) que les véhicules.
   Chaque panneau n'a qu'une seule .stats (KPI) → pas de risque de collision. */
@media (max-width: 640px){
  :is(#analyse-panel-secteurs,#analyse-panel-geo,#analyse-panel-passifs) .stats{
    grid-template-columns: 1fr !important; gap: 0 !important;
  }
  :is(#analyse-panel-secteurs,#analyse-panel-geo,#analyse-panel-passifs) .stats .stat{
    background: transparent !important; border: none !important; border-radius: 0 !important;
    border-bottom: 1px solid var(--border) !important; padding: 9px 2px !important;
    text-align: left !important; margin: 0 !important;
    display: grid !important; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 12px;
  }
  :is(#analyse-panel-secteurs,#analyse-panel-geo,#analyse-panel-passifs) .stats .stat:last-child{
    border-bottom: none !important;
  }
  :is(#analyse-panel-secteurs,#analyse-panel-geo,#analyse-panel-passifs) .stats .stat .stat-label{
    align-self: center; margin: 0 !important; text-align: left !important;
  }
  :is(#analyse-panel-secteurs,#analyse-panel-geo,#analyse-panel-passifs) .stats .stat .stat-value{
    text-align: right !important; font-size: 1.2rem; margin: 0 !important;
  }
  :is(#analyse-panel-secteurs,#analyse-panel-geo,#analyse-panel-passifs) .stats .stat .stat-sub{
    grid-column: 1 / -1; margin-top: 3px !important; text-align: left !important;
  }
}

/* ═══ MOBILE — Exposition géo : blocs de largeurs homogènes (Lot AJ, 2026-07-14)
   Le canvas de la carte choroplèthe (#geo-map-container) débordait en largeur.
   Comme les items de grille ont min-width:auto (= min-content), la grille du haut
   (carte + répartition pays) s'étirait au-delà du viewport, tandis que le card
   zones+HHI (bloc simple) restait à la largeur de l'écran → il paraissait plus
   étroit (4836). On empêche tout débordement : min-width:0 sur les blocs et carte
   plafonnée à 100 % de large. */
@media (max-width: 640px){
  #geo-content > div, #geo-content .chart-card { min-width: 0; }
  #geo-map-container { min-width: 0; max-width: 100%; overflow: hidden; }
  #geo-map-container canvas, #geo-map-container svg { max-width: 100% !important; }
}

/* ═══ MOBILE — modale budget : largeurs homogènes (Lot AK, 2026-07-14)
   Les grilles 1fr 1fr (formulaires + tables) se replient bien (Lot E), mais les
   cartes contenant les tables débordaient : le min-content du tableau (colonnes +
   montant nowrap du Lot Y) dépasse le viewport et, les items de grille ayant
   min-width:auto, la carte s'élargissait au-delà de l'écran → largeur incohérente
   avec les cartes formulaires (4838). On autorise les cartes à rétrécir et la
   table à défiler horizontalement à l'intérieur. */
@media (max-width: 640px){
  #budget-modal .admin-form { min-width: 0; }
  #budget-modal .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ═══ MOBILE — anti-zoom automatique iOS au focus des champs (Lot AL, 2026-07-14)
   Sur Safari iOS, tout input/select/textarea dont le font-size calculé est
   < 16px déclenche un zoom automatique de la page au focus (garde-fou
   d'accessibilité du système), obligeant l'utilisateur à dézoomer manuellement
   ensuite. La plupart des champs du site sont en 11-14px (inline styles) pour
   la densité d'affichage. On force 16px uniquement sur mobile, en !important
   pour prioriter sur les styles inline. */
@media (max-width: 640px){
  input, select, textarea { font-size: 16px !important; }
}

/* ═══ UTILITAIRES (Lot R4, 2026-08-22)
   Classes pour les motifs style="..." en dur les plus répétés dans le HTML
   (audits/Plan-Refacto-2026-08-18.md §R4). Un motif = une classe, dans
   l'ordre de fréquence mesurée. display:none n'est volontairement pas
   couvert ici : il est aussi manipulé au runtime par le JS
   (el.style.display='none'), le convertir exigerait de traiter aussi les
   endroits qui le lisent/l'écrivent — voir le plan.
   !important sur toutes les déclarations : un style="..." inline avait une
   spécificité absolue (toujours prioritaire). Une classe seule (0,1,0) peut
   perdre face à un sélecteur composé déjà présent dans ce fichier (ex.
   ".chart-card h3" écrasait .u-m-0 sans !important, testé en navigateur) —
   même raison que le !important déjà utilisé plus haut pour l'anti-zoom iOS. */
.u-text { color: var(--text) !important; }
.u-label { font-size: 10px !important; color: var(--muted) !important; text-transform: uppercase !important; letter-spacing: .08em !important; }
.u-hint { font-size: 11px !important; color: var(--muted) !important; }
.u-hint-block { font-size: 11px !important; color: var(--muted) !important; display: block !important; margin-bottom: 4px !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-m-0 { margin: 0 !important; }
.u-input {
  width: 100% !important; box-sizing: border-box !important; background: var(--bg3) !important;
  border: 1px solid var(--border2) !important; color: var(--text) !important;
  border-radius: 6px !important; padding: 6px 8px !important; font-size: 13px !important;
}
.u-flex-8 { display: flex !important; align-items: center !important; gap: 8px !important; }
.u-flex-12 { display: flex !important; align-items: center !important; gap: .75rem !important; }
.u-accent-strong { color: var(--accent) !important; font-weight: 700 !important; }

/* ═══ UTILITAIRES — lot 2, generation automatique (Lot R4, 2026-08-22)
   231 motifs style="..." restants (>= 3 occurrences, hors display:none)
   convertis en classes. Noms generes a partir des proprietes CSS (voir
   r4_gen_and_replace.py) : lisibles pour les proprietes courantes
   (font-size, color via var(--x), margin/padding, display, gap...),
   jeton+hash court pour le reste (border composes, box-shadow,
   grid-template-columns, transition, couleurs hex/rgba/color-mix) — la
   regle elle-meme fait foi. !important partout, meme raison qu'au lot 1 :
   un style inline avait une specificite absolue. */
.u-taright-p6px10px08dc6-bdb9dc44-muted-fs11-upper-ls07-0b971 { text-align: right !important; padding: 6px 10px !important; border-bottom: 1px solid var(--border) !important; color: var(--muted) !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: .07em !important; font-weight: 400 !important; }
.u-bg2-r10-p1rem125rem722e9-bd9dc44 { background: var(--bg2) !important; border-radius: 10px !important; padding: 1rem 1.25rem !important; border: 1px solid var(--border) !important; }
.u-disp-fsr85-fw600 { font-family: var(--font-display) !important; font-size: .85rem !important; font-weight: 600 !important; }
.u-fs16-muted-tr3d8be { font-size: 16px !important; color: var(--muted) !important; transition: transform .2s !important; }
.u-w100p-mt2-bg2-bd3e541-text-r6-p5 { width: 100% !important; margin-top: 2px !important; background: var(--bg2) !important; border: 1px solid var(--border2) !important; color: var(--text) !important; border-radius: 6px !important; padding: 5px !important; }
.u-flex-gap10-fsr96 { display: flex !important; gap: 10px !important; font-size: .96rem !important; }
.u-fs12-muted-mbr75 { font-size: 12px !important; color: var(--muted) !important; margin-bottom: .75rem !important; }
.u-fs11-p4px10px9923b { font-size: 11px !important; padding: 4px 10px !important; }
.u-fs12-muted-lh17 { font-size: 12px !important; color: var(--muted) !important; line-height: 1.7 !important; }
.u-mbr100 { margin-bottom: 1rem !important; }
.u-p10px14px31edb-bdt9dc44-flex-aic-gapr50-bg { padding: 10px 14px !important; border-top: 1px solid var(--border) !important; display: flex !important; align-items: center !important; gap: .5rem !important; background: var(--bg) !important; }
.u-fs11-muted-block-mbr25 { font-size: 11px !important; color: var(--muted) !important; display: block !important; margin-bottom: .25rem !important; }
.u-op7 { opacity: .7 !important; }
.u-w100p-hauto { width: 100% !important; height: auto !important; }
.u-disp-fsr110-fw800-ls002eme47a3 { font-family: var(--font-display) !important; font-size: 1.1rem !important; font-weight: 800 !important; letter-spacing: -0.02em !important; }
.u-p125rem15re4047d { padding: 1.25rem 1.5rem !important; }
.u-fs10-upper-ls06em3c7b7-muted-block-mbr30 { font-size: 10px !important; text-transform: uppercase !important; letter-spacing: .06em !important; color: var(--muted) !important; display: block !important; margin-bottom: .3rem !important; }
.u-p6px13px4c2a2-r999-bd9dc44-bg2-fs12-muted-tr57c31 { padding: 6px 13px !important; border-radius: 999px !important; border: 1px solid var(--border) !important; background: var(--bg2) !important; font-size: 12px !important; color: var(--muted) !important; transition: border-color .15s !important; }
.u-fs11-muted-mt1-ls03em2b73b { font-size: 11px !important; color: var(--muted) !important; margin-top: 1px !important; letter-spacing: .03em !important; }
.u-bg2-bd9dc44-r12-ovhidden { background: var(--bg2) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; overflow: hidden !important; }
.u-w100p-flex-aic-jcsb-p12px16px7218f-cur-text { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 12px 16px !important; cursor: pointer !important; color: var(--text) !important; }
.u-fs11-muted-block-mbr30 { font-size: 11px !important; color: var(--muted) !important; display: block !important; margin-bottom: .3rem !important; }
.u-mlauto { margin-left: auto !important; }
.u-flex-aic-gapr50 { display: flex !important; align-items: center !important; gap: .5rem !important; }
.u-mw860-p0cfcd2-ovyauto-mh92vh { max-width: 860px !important; padding: 0 !important; overflow-y: auto !important; max-height: 92vh !important; }
.u-flex-aic-gapr50-bg2-bd9dc44-r8-p5px10px50f63 { display: flex !important; align-items: center !important; gap: .5rem !important; background: var(--bg2) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; padding: 5px 10px !important; }
.u-fs10-muted-upper-ls07emb4c07-nowrap { font-size: 10px !important; color: var(--muted) !important; text-transform: uppercase !important; letter-spacing: .07em !important; white-space: nowrap !important; }
.u-mbr75 { margin-bottom: .75rem !important; }
.u-w100p-bb-bg3-bd9dc44-r8-p6rem8rem6be90-text-fs14-outline0 { width: 100% !important; box-sizing: border-box !important; background: var(--bg3) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; padding: .6rem .8rem !important; color: var(--text) !important; font-size: 14px !important; outline: none !important; }
.u-w100p-bb-bg3-bd9dc44-r8-p55rem75remf832d-text-fs13-m-88728 { width: 100% !important; box-sizing: border-box !important; background: var(--bg3) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; padding: .55rem .75rem !important; color: var(--text) !important; font-size: 13px !important; font-family: var(--font-mono) !important; outline: none !important; }
.u-disp-fsr85-fw600-mbr75 { font-family: var(--font-display) !important; font-size: .85rem !important; font-weight: 600 !important; margin-bottom: .75rem !important; }
.u-bg5e96b-bd334c4-text-fs12-mono-outline0-minw120 { background: transparent !important; border: none !important; color: var(--text) !important; font-size: 12px !important; font-family: var(--font-mono) !important; outline: none !important; min-width: 120px !important; }
.u-neg { color: var(--neg) !important; }
.u-bg2-bd9dc44-r10-ovhidden { background: var(--bg2) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; overflow: hidden !important; }
.u-taright-mtr60 { text-align: right !important; margin-top: .6rem !important; }
.u-fs11-muted-none-op55-trda541 { font-size: 11px !important; color: var(--muted) !important; text-decoration: none !important; opacity: .55 !important; transition: opacity .15s !important; }
.u-ccbdd9 { color: #34d399 !important; }
.u-taright-p6px8px8a684-bdb9dc44-muted-fs11-fw400 { text-align: right !important; padding: 6px 8px !important; border-bottom: 1px solid var(--border) !important; color: var(--muted) !important; font-size: 11px !important; font-weight: 400 !important; }
.u-bg3-bd3e541-text-r6-p6px8px8a684-mono-fs12-w100p-bb { background: var(--bg3) !important; border: 1px solid var(--border2) !important; color: var(--text) !important; border-radius: 6px !important; padding: 6px 8px !important; font-family: var(--font-mono) !important; font-size: 12px !important; width: 100% !important; box-sizing: border-box !important; }
.u-flex-aic-jcsb-mbr100 { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 1rem !important; }
.u-accent { color: var(--accent) !important; }
.u-card-bd9dc44-r16-p26-tra8daf { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: 16px !important; padding: 26px !important; transition: border-color .2s,transform .2s !important; }
.u-w44-h44-r12-flex-aic-jcc-fsr135-mb16-bg8ace1 { width: 44px !important; height: 44px !important; border-radius: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.35rem !important; margin-bottom: 16px !important; background: color-mix(in srgb,var(--accent) 13%,transparent) !important; }
.u-disp-fsr112-mb8-fw700 { font-family: var(--font-display) !important; font-size: 1.12rem !important; margin-bottom: 8px !important; font-weight: 700 !important; }
.u-muted-fsr94 { color: var(--muted) !important; font-size: .94rem !important; }
.u-accent-c17905-bd334c4 { background: var(--accent) !important; color: #0d1a0d !important; border: none !important; }
.u-mbr100-p6rem1remd1eb2-bg2-bd9dc44-r10 { margin-bottom: 1rem !important; padding: .6rem 1rem !important; background: var(--bg2) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; }
.u-fs10-upper-ls08eme1c35-muted-mbr50 { font-size: 10px !important; text-transform: uppercase !important; letter-spacing: .08em !important; color: var(--muted) !important; margin-bottom: .5rem !important; }
.u-flex-aic-gapr75-wrap { display: flex !important; align-items: center !important; gap: .75rem !important; flex-wrap: wrap !important; }
.u-fs12-muted-nowrap { font-size: 12px !important; color: var(--muted) !important; white-space: nowrap !important; }
.u-bg3-bd3e541-text-r6-p5px10px50f63-fs12-mono { background: var(--bg3) !important; border: 1px solid var(--border2) !important; color: var(--text) !important; border-radius: 6px !important; padding: 5px 10px !important; font-size: 12px !important; font-family: var(--font-mono) !important; }
.u-flex-aic-jcsb-mbr60-gapr75-wrap { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: .6rem !important; gap: .75rem !important; flex-wrap: wrap !important; }
.u-p6px8px8a684 { padding: 6px 8px !important; }
.u-fs11-muted-upper-ls06em3c7b7-mb6 { font-size: 11px !important; color: var(--muted) !important; text-transform: uppercase !important; letter-spacing: .06em !important; margin-bottom: 6px !important; }
.u-bg2-bd9dc44-muted-fs18-cur-p5px10px50f63-r8-lh1 { background: var(--bg2) !important; border: 1px solid var(--border) !important; color: var(--muted) !important; font-size: 18px !important; cursor: pointer !important; padding: 5px 10px !important; border-radius: 8px !important; line-height: 1 !important; }
.u-fs11-muted-mb3 { font-size: 11px !important; color: var(--muted) !important; margin-bottom: 3px !important; }
.u-grid-grid4ea93-gapr100 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1rem !important; }
.u-disp-fsr90-fw600-mbr100 { font-family: var(--font-display) !important; font-size: .9rem !important; font-weight: 600 !important; margin-bottom: 1rem !important; }
.u-grid-grid47498-gapr75-mbr100 { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)) !important; gap: .75rem !important; margin-bottom: 1rem !important; }
.u-card-bd9dc44-r16-p28px26px21b64-flex-gap18-aifs { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: 16px !important; padding: 28px 26px !important; display: flex !important; gap: 18px !important; align-items: flex-start !important; }
.u-w46-h46-r12-flex-aic-jcc-fsr140-shrink0-bg8ace1 { width: 46px !important; height: 46px !important; border-radius: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.4rem !important; flex-shrink: 0 !important; background: color-mix(in srgb,var(--accent) 13%,transparent) !important; }
.u-disp-fsr106-mb7-fw700 { font-family: var(--font-display) !important; font-size: 1.06rem !important; margin-bottom: 7px !important; font-weight: 700 !important; }
.u-muted-fsr93-lh155 { color: var(--muted) !important; font-size: .93rem !important; line-height: 1.55 !important; }
.u-bg334c4-bd334c4-muted-fsr140-cur-lh1 { background: none !important; border: none !important; color: var(--muted) !important; font-size: 1.4rem !important; cursor: pointer !important; line-height: 1 !important; }
.u-tacenter { text-align: center !important; }
.u-taright { text-align: right !important; }
.u-fs125-muted-block-mbr35 { font-size: 12.5px !important; color: var(--muted) !important; display: block !important; margin-bottom: .35rem !important; }
.u-fs11 { font-size: 11px !important; }
.u-grid-grid4ea93-gapr100-mbr100 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1rem !important; margin-bottom: 1rem !important; }
.u-bg2-r10-bd9dc44-pr125 { background: var(--bg2) !important; border-radius: 10px !important; border: 1px solid var(--border) !important; padding: 1.25rem !important; }
.u-taleft-fs11-muted-upper-ls4-p8px12px8ddbc { text-align: left !important; font-size: 11px !important; color: var(--muted) !important; text-transform: uppercase !important; letter-spacing: .4px !important; padding: 8px 12px !important; }
.u-flex-aic-gap7 { display: flex !important; align-items: center !important; gap: 7px !important; }
.u-disp-fsr250-fw800-accent-lsn1-lh1 { font-family: var(--font-display) !important; font-size: 2.5rem !important; font-weight: 800 !important; color: var(--accent) !important; letter-spacing: -1px !important; line-height: 1 !important; }
.u-muted-fsr90-mt10 { color: var(--muted) !important; font-size: .9rem !important; margin-top: 10px !important; }
.u-accent-fsr78-fw600-ls12-upper-disp { color: var(--accent) !important; font-size: .78rem !important; font-weight: 600 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; font-family: var(--font-display) !important; }
.u-disp-fsr165-lsn6-m12px014px4cd3c-fw800 { font-family: var(--font-display) !important; font-size: 1.65rem !important; letter-spacing: -.6px !important; margin: 12px 0 14px !important; font-weight: 800 !important; }
.u-muted-mb18 { color: var(--muted) !important; margin-bottom: 18px !important; }
.u-lsnone-flex-fdcol-gap11 { list-style: none !important; display: flex !important; flex-direction: column !important; gap: 11px !important; }
.u-bd3e541-r14-ovhidden-shadow23f70 { border: 1px solid var(--border2) !important; border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 18px 50px -22px rgba(0,0,0,.6) !important; }
.u-pr100 { padding: 1rem !important; }
.u-p0cfcd2-ovhidden { padding: 0 !important; overflow: hidden !important; }
.u-w100p-flex-aic-jcsb-p12px16px7218f-bg5e96b-bd334c4-c-45d65 { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 12px 16px !important; background: transparent !important; border: none !important; cursor: pointer !important; font-family: var(--font-mono) !important; color: var(--text) !important; }
.u-bg2-bd9dc44-muted-fs18-cur-p5px10px50f63-r8-lh1-trcb10e { background: var(--bg2) !important; border: 1px solid var(--border) !important; color: var(--muted) !important; font-size: 18px !important; cursor: pointer !important; padding: 5px 10px !important; border-radius: 8px !important; line-height: 1 !important; transition: all .15s !important; }
.u-disp-fsr90-fw700-ls01emed26c { font-family: var(--font-display) !important; font-size: .9rem !important; font-weight: 700 !important; letter-spacing: -.01em !important; }
.u-grid-grid98b11-gap0cfcd2-p8px14px6px210ea-bdb9dc44 { display: grid !important; grid-template-columns: 2fr 1fr 1fr 32px !important; gap: 0 !important; padding: 8px 14px 6px !important; border-bottom: 1px solid var(--border) !important; }
.u-fsr82 { font-size: 0.82rem !important; }
.u-disp-fsr90-fw700 { font-family: var(--font-display) !important; font-size: .9rem !important; font-weight: 700 !important; }
.u-fs10-muted-upper-ls08eme1c35-mb4 { font-size: 10px !important; color: var(--muted) !important; text-transform: uppercase !important; letter-spacing: .08em !important; margin-bottom: 4px !important; }
.u-grid-grid4ea93-gapr85 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: .85rem !important; }
.u-gridc6fd1 { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
.u-grid-grid0a3fd-gapr100-mbr150 { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)) !important; gap: 1rem !important; margin-bottom: 1.5rem !important; }
.u-fs11-muted-ml8 { font-size: 11px !important; color: var(--muted) !important; margin-left: 8px !important; }
.u-mtr50 { margin-top: .5rem !important; }
.u-flex-aic-jcsb-wrap-gap8-mbr100 { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 1rem !important; }
.u-fs11-muted-nowrap { font-size: 11px !important; color: var(--muted) !important; white-space: nowrap !important; }
.u-bg3-bd3e541-text-r7-p4px10px9923b-fs12-cur-outline0-disp { background: var(--bg3) !important; border: 1px solid var(--border2) !important; color: var(--text) !important; border-radius: 7px !important; padding: 4px 10px !important; font-size: 12px !important; cursor: pointer !important; outline: none !important; font-family: var(--font-display) !important; }
.u-taleft-p6px10px08dc6-bdb9dc44-muted-fs11-upper-ls07e-00520 { text-align: left !important; padding: 6px 10px !important; border-bottom: 1px solid var(--border) !important; color: var(--muted) !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: .07em !important; font-weight: 400 !important; }
.u-flex-gap6-wrap-mbr150 { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; margin-bottom: 1.5rem !important; }
.u-w100p-bg2-bd3e541-text-r8-p9px12pxb624d-mono-fs13-bb { width: 100% !important; background: var(--bg2) !important; border: 1px solid var(--border2) !important; color: var(--text) !important; border-radius: 8px !important; padding: 9px 12px !important; font-family: var(--font-mono) !important; font-size: 13px !important; box-sizing: border-box !important; }
.u-h300-posrelative { height: 300px !important; position: relative !important; }
.u-accent-fsr78-fw600-ls16-upper-disp { color: var(--accent) !important; font-size: .78rem !important; font-weight: 600 !important; letter-spacing: 1.6px !important; text-transform: uppercase !important; font-family: var(--font-display) !important; }
.u-disp-fsclamp17rem033c6-lsn1-m12px0f5e87-fw800 { font-family: var(--font-display) !important; font-size: clamp(1.7rem,3.4vw,2.4rem) !important; letter-spacing: -1px !important; margin: 12px 0 !important; font-weight: 800 !important; }
.u-muted-fsr104 { color: var(--muted) !important; font-size: 1.04rem !important; }
.u-grid-grid4ea93-gap50-aic-mb64 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 50px !important; align-items: center !important; margin-bottom: 64px !important; }
.u-grid4ea93 { grid-template-columns: 1fr 1fr !important; }
.u-grid85256 { grid-template-columns: 1fr !important; }
.u-bd5c36a-r10-p22px14pxb8b17-tacenter-cur-tr57c31 { border: 1.5px dashed var(--border2) !important; border-radius: 10px !important; padding: 22px 14px !important; text-align: center !important; cursor: pointer !important; transition: border-color .15s !important; }
.u-fs13-text-mb2 { font-size: 13px !important; color: var(--text) !important; margin-bottom: 2px !important; }
.u-fs12-muted-mt8 { font-size: 12px !important; color: var(--muted) !important; margin-top: 8px !important; }
.u-fs11-muted-underline-cur { font-size: 11px !important; color: var(--muted) !important; text-decoration: underline !important; cursor: pointer !important; }
.u-grid-grid4ea93-gap8 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
.u-mt8 { margin-top: 8px !important; }
.u-mh260-ovyauto-bd3e541-r8 { max-height: 260px !important; overflow-y: auto !important; border: 1px solid var(--border2) !important; border-radius: 8px !important; }
.u-fsr82-2 { font-size: .82rem !important; }
.u-flex-aic-gapr50-mt10 { display: flex !important; align-items: center !important; gap: .5rem !important; margin-top: 10px !important; }
.u-block-fs11-muted-upper-ls5-mbr35 { display: block !important; font-size: 11px !important; color: var(--muted) !important; text-transform: uppercase !important; letter-spacing: .5px !important; margin-bottom: .35rem !important; }
.u-w100p-p10px14px31edb-r8-bd3e541-bg2-text-fs14-outline0 { width: 100% !important; padding: 10px 14px !important; border-radius: 8px !important; border: 1px solid var(--border2) !important; background: var(--bg2) !important; color: var(--text) !important; font-size: 14px !important; outline: none !important; }
.u-flex-aic-jcsb-mbr125 { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 1.25rem !important; }
.u-m0cfcd2-fsr110 { margin: 0 !important; font-size: 1.1rem !important; }
.u-flex1 { flex: 1 !important; }
.u-mbr150 { margin-bottom: 1.5rem !important; }
.u-fs13 { font-size: 13px !important; }
.u-op6 { opacity: .6 !important; }
.u-inline-block-w10-h2-bg879b7-vamid-mr4-bdt6fd0b { display: inline-block !important; width: 10px !important; height: 2px !important; background: #94a3b8 !important; vertical-align: middle !important; margin-right: 4px !important; border-top: 2px dashed #94a3b8 !important; }
.u-h200 { height: 200px !important; }
.u-flex-aic-gap8-mbr30 { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: .3rem !important; }
.u-fs12-mono-text-fw600 { font-size: 12px !important; font-family: var(--font-mono) !important; color: var(--text) !important; font-weight: 600 !important; }
.u-fs10-muted-mlauto { font-size: 10px !important; color: var(--muted) !important; margin-left: auto !important; }
.u-h340 { height: 340px !important; }
.u-flex-wrap-gap6px16pxca575-mtr75 { display: flex !important; flex-wrap: wrap !important; gap: 6px 16px !important; margin-top: .75rem !important; }
.u-posrelative-h240 { position: relative !important; height: 240px !important; }
.u-mtr100 { margin-top: 1rem !important; }
.u-disp-fsr85-fw600-ce0fc4-mbr50 { font-family: var(--font-display) !important; font-size: .85rem !important; font-weight: 600 !important; color: #60a5fa !important; margin-bottom: .5rem !important; }
.u-block-fs12-muted-mbr40 { display: block !important; font-size: 12px !important; color: var(--muted) !important; margin-bottom: .4rem !important; }
.u-mbr85 { margin-bottom: .85rem !important; }
.u-fsr250-mbr75 { font-size: 2.5rem !important; margin-bottom: .75rem !important; }
.u-fs15-fw500-mbr40 { font-size: 15px !important; font-weight: 500 !important; margin-bottom: .4rem !important; }
.u-fs13-muted { font-size: 13px !important; color: var(--muted) !important; }
.u-flex-gap14-fs11-muted { display: flex !important; gap: 14px !important; font-size: 11px !important; color: var(--muted) !important; }
.u-flex-aic-jcsb-wrap-gap8-mbr75 { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 8px !important; margin-bottom: .75rem !important; }
.u-w100p-minw600-bord1a721-fs13 { width: 100% !important; min-width: 600px !important; border-collapse: collapse !important; font-size: 13px !important; }
.u-cur { cursor: pointer !important; }
.u-posrelative-zindc4ca4-mw1180-m0autoa8a4c-p72px32px400e0c9 { position: relative !important; z-index: 1 !important; max-width: 1180px !important; margin: 0 auto !important; padding: 72px 32px 40px !important; }
.u-muted { color: var(--muted) !important; }
.u-fs12-muted-upper-ls07emb4c07 { font-size: 12px !important; color: var(--muted) !important; text-transform: uppercase !important; letter-spacing: .07em !important; }
.u-mh380-ovyauto { max-height: 380px !important; overflow-y: auto !important; }
.u-fs11-p3px9pxbf3bb { font-size: 11px !important; padding: 3px 9px !important; }
.u-w36-h36-bg592b5-bd46a84-r10-flex-aic-jcc-fs17-shrink0 { width: 36px !important; height: 36px !important; background: rgba(167,139,250,.15) !important; border: 1px solid rgba(167,139,250,.3) !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 17px !important; flex-shrink: 0 !important; }
.u-c39d0b { color: #a78bfa !important; }
.u-p8px14px3b6b1-flex-fdcol-gap4 { padding: 8px 14px !important; display: flex !important; flex-direction: column !important; gap: 4px !important; }
.u-fs11-muted-mtr40-p02px209e4 { font-size: 11px !important; color: var(--muted) !important; margin-top: .4rem !important; padding: 0 2px !important; }
.u-fs12-muted-nowrap-mlr50 { font-size: 12px !important; color: var(--muted) !important; white-space: nowrap !important; margin-left: .5rem !important; }
.u-disp-fsr110-fw700-mbr150 { font-family: var(--font-display) !important; font-size: 1.1rem !important; font-weight: 700 !important; margin-bottom: 1.5rem !important; }
.u-bd9dc44-r10-ovhidden { border: 1px solid var(--border) !important; border-radius: 10px !important; overflow: hidden !important; }
.u-w100p-flex-aic-jcsb-p12px16px7218f-bg5e96b-cur-text { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 12px 16px !important; background: transparent !important; cursor: pointer !important; color: var(--text) !important; }
.u-mono-fs12 { font-family: var(--font-mono) !important; font-size: 12px !important; }
.u-fs9-tr3d8be { font-size: 9px !important; transition: transform .2s !important; }
.u-w100p-bord1a721-fs12 { width: 100% !important; border-collapse: collapse !important; font-size: 12px !important; }
.u-taleft-p6px8px8a684-bdb9dc44-muted-fs11-fw400 { text-align: left !important; padding: 6px 8px !important; border-bottom: 1px solid var(--border) !important; color: var(--muted) !important; font-size: 11px !important; font-weight: 400 !important; }
.u-p8px14px3b6b1 { padding: 8px 14px !important; }
.u-bg3-bd3e541-text-r6-p6px8px8a684-fs12-w100p-bb { background: var(--bg3) !important; border: 1px solid var(--border2) !important; color: var(--text) !important; border-radius: 6px !important; padding: 6px 8px !important; font-size: 12px !important; width: 100% !important; box-sizing: border-box !important; }
.u-bg6a087-c17905-bd334c4-fw600-p7px16px159a2 { background: #f59e0b !important; color: #0d1a0d !important; border: none !important; font-weight: 600 !important; padding: 7px 16px !important; }
.u-flex-aic-jcsb-mbr150 { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 1.5rem !important; }
.u-flex-fdcol-aic-gapr35 { display: flex !important; flex-direction: column !important; align-items: center !important; gap: .35rem !important; }
.u-muted-fsr72 { color: var(--muted) !important; font-size: .72rem !important; }
.u-flex1-h1-border { flex: 1 !important; height: 1px !important; background: var(--border) !important; }
.u-mbr125 { margin-bottom: 1.25rem !important; }
.u-accent-underline { color: var(--accent) !important; text-decoration: underline !important; }
.u-mw500 { max-width: 500px !important; }
.u-grid-grid4ea93-gapr50-mbr50 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: .5rem !important; margin-bottom: .5rem !important; }
.u-fs12-muted-block-mbr30 { font-size: 12px !important; color: var(--muted) !important; display: block !important; margin-bottom: .3rem !important; }
.u-resie6dec-ff6995c-lh15 { resize: vertical !important; font-family: inherit !important; line-height: 1.5 !important; }
.u-fs12-minh2fd82-mbr60 { font-size: 12px !important; min-height: 1.2em !important; margin-bottom: .6rem !important; }
.u-mbr60 { margin-bottom: .6rem !important; }
.u-grid-grid4ea93-gapr50-mbr60 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: .5rem !important; margin-bottom: .6rem !important; }
.u-m0cfcd2-ff9b3cc-upper { margin: 0 !important; font-family: monospace !important; text-transform: uppercase !important; }
.u-flex1-bg3-text-bd9dc44 { flex: 1 !important; background: var(--bg3) !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
.u-p1rem125rem722e9 { padding: 1rem 1.25rem !important; }
.u-fs12-muted { font-size: 12px !important; color: var(--muted) !important; }
.u-posrelative-h200 { position: relative !important; height: 200px !important; }
.u-flex-aic-gap10-wrap { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; }
.u-grid-grid4ea93-gapr100-mbr150 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1rem !important; margin-bottom: 1.5rem !important; }
.u-fs11-muted-mb4 { font-size: 11px !important; color: var(--muted) !important; margin-bottom: 4px !important; }
.u-fsr100-fw500 { font-size: 1rem !important; font-weight: 500 !important; }
.u-fs13-text-fw600 { font-size: 13px !important; color: var(--text) !important; font-weight: 600 !important; }
.u-w100p-p9px13px7a4ab-r7-bd3e541-bg2-text-fs13-outline-5f325 { width: 100% !important; padding: 9px 13px !important; border-radius: 7px !important; border: 1px solid var(--border2) !important; background: var(--bg2) !important; color: var(--text) !important; font-size: 13px !important; outline: none !important; margin-bottom: .75rem !important; }
.u-fs12-muted-lh16 { font-size: 12px !important; color: var(--muted) !important; line-height: 1.6 !important; }
.u-tacenter-fs11-muted-upper-ls4-p8px12px8ddbc { text-align: center !important; font-size: 11px !important; color: var(--muted) !important; text-transform: uppercase !important; letter-spacing: .4px !important; padding: 8px 12px !important; }
.u-flex1-fs115 { flex: 1 !important; font-size: 11.5px !important; }
.u-mw1100-m0autoa8a4c-flex-wrap-aic-gap14-jcsb { max-width: 1100px !important; margin: 0 auto !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 14px !important; justify-content: space-between !important; }
.u-accent-c17905-bd334c4-fw600-p7px16px159a2 { background: var(--accent) !important; color: #0d1a0d !important; border: none !important; font-weight: 600 !important; padding: 7px 16px !important; }
.u-bge0fc4-c17905-bd334c4-fw600-p7px16px159a2 { background: #60a5fa !important; color: #0d1a0d !important; border: none !important; font-weight: 600 !important; padding: 7px 16px !important; }
.u-bg39d0b-c4820f-bd334c4-fw600-p7px16px159a2 { background: #a78bfa !important; color: #0d0f0e !important; border: none !important; font-weight: 600 !important; padding: 7px 16px !important; }
.u-cc2bd4 { color: #fb923c !important; }
.u-bgc2bd4-c17905-bd334c4-fw600-p7px16px159a2 { background: #fb923c !important; color: #0d1a0d !important; border: none !important; font-weight: 600 !important; padding: 7px 16px !important; }
.u-c446c3 { color: #f472b6 !important; }
.u-bg39d0b-c17905-bd334c4-fw600-p7px16px159a2 { background: #a78bfa !important; color: #0d1a0d !important; border: none !important; font-weight: 600 !important; padding: 7px 16px !important; }
.u-mw520 { max-width: 520px !important; }
.u-fs10-muted { font-size: 10px !important; color: var(--muted) !important; }
.u-tacenter-p35rem1rem2b9c3-muted { text-align: center !important; padding: 3.5rem 1rem !important; color: var(--muted) !important; }
.u-flex-fdcol-gapr45 { display: flex !important; flex-direction: column !important; gap: .45rem !important; }
.u-p6rem1remd1eb2-taleft-muted-fw500 { padding: .6rem 1rem !important; text-align: left !important; color: var(--muted) !important; font-weight: 500 !important; }
.u-p6rem1remd1eb2-taright-muted-fw500 { padding: .6rem 1rem !important; text-align: right !important; color: var(--muted) !important; font-weight: 500 !important; }
.u-mtr100-mh360-ovyauto-ovxauto-r8-bd9dc44 { margin-top: 1rem !important; max-height: 360px !important; overflow-y: auto !important; overflow-x: auto !important; border-radius: 8px !important; border: 1px solid var(--border) !important; }
.u-possticky-topcfcd2-card-zindc4ca4 { position: sticky !important; top: 0 !important; background: var(--card) !important; z-index: 1 !important; }
.u-disp-fsr85-fw600-c96480-mbr50 { font-family: var(--font-display) !important; font-size: .85rem !important; font-weight: 600 !important; color: #fbbf24 !important; margin-bottom: .5rem !important; }
.u-c96480 { color: #fbbf24 !important; }
.u-h260 { height: 260px !important; }
.u-disp-fsr85-fw600-c446c3-mbr50 { font-family: var(--font-display) !important; font-size: .85rem !important; font-weight: 600 !important; color: #f472b6 !important; margin-bottom: .5rem !important; }
.u-disp-fsr85-fw600-cc2bd4-mbr50 { font-family: var(--font-display) !important; font-size: .85rem !important; font-weight: 600 !important; color: #fb923c !important; margin-bottom: .5rem !important; }
.u-flex7edc0 { flex: 0 0 auto !important; }
.u-bg2-r10-p85rem1remb29f2-bd9dc44 { background: var(--bg2) !important; border-radius: 10px !important; padding: .85rem 1rem !important; border: 1px solid var(--border) !important; }
.u-mono-fsr105-fw600 { font-family: var(--font-mono) !important; font-size: 1.05rem !important; font-weight: 600 !important; }
.u-fs11-muted-mt2 { font-size: 11px !important; color: var(--muted) !important; margin-top: 2px !important; }
.u-grid-grid4ea93-gapr75 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: .75rem !important; }
.u-disp-fsr85-fw600-c4707a-mbr50 { font-family: var(--font-display) !important; font-size: .85rem !important; font-weight: 600 !important; color: #22d3ee !important; margin-bottom: .5rem !important; }
.u-c4707a { color: #22d3ee !important; }
.u-ovxauto { overflow-x: auto !important; }
.u-disp-fsr85-fw600-muted-upper-ls06em3c7b7 { font-family: var(--font-display) !important; font-size: .85rem !important; font-weight: 600 !important; color: var(--muted) !important; text-transform: uppercase !important; letter-spacing: .06em !important; }
.u-disp-fsr85-fw600-c6a087-mbr50 { font-family: var(--font-display) !important; font-size: .85rem !important; font-weight: 600 !important; color: #f59e0b !important; margin-bottom: .5rem !important; }
.u-op5 { opacity: .5 !important; }
.u-flex-jcsb-aic-gapr100-p125rem0cb2f4-bdb9dc44 { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 1rem !important; padding: 1.25rem 0 !important; border-bottom: 1px solid var(--border) !important; }
.u-flex-jcsb-aic-gapr100-wrap { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 1rem !important; flex-wrap: wrap !important; }
.u-flex-jcfe-gapr50 { display: flex !important; justify-content: flex-end !important; gap: .5rem !important; }
.u-p8px18pxec06b-r7-bd3e541-bg5e96b-muted-fs13-cur { padding: 8px 18px !important; border-radius: 7px !important; border: 1px solid var(--border2) !important; background: transparent !important; color: var(--muted) !important; font-size: 13px !important; cursor: pointer !important; }
.u-fs13-text-fw600-mbr25 { font-size: 13px !important; color: var(--text) !important; font-weight: 600 !important; margin-bottom: .25rem !important; }
.u-muted-fs12-lh15 { color: var(--muted) !important; font-size: 12px !important; line-height: 1.5 !important; }
.u-disp-fsr85-fw600-c44946-mbr50 { font-family: var(--font-display) !important; font-size: .85rem !important; font-weight: 600 !important; color: #14b8a6 !important; margin-bottom: .5rem !important; }
.u-disp-fsr85-fw600-c39d0b-mbr50 { font-family: var(--font-display) !important; font-size: .85rem !important; font-weight: 600 !important; color: #a78bfa !important; margin-bottom: .5rem !important; }
.u-bg3-bd3e541-r8-p7px14px092ba-text-fs13-cur-nowrap { background: var(--bg3) !important; border: 1px solid var(--border2) !important; border-radius: 8px !important; padding: 7px 14px !important; color: var(--text) !important; font-size: 13px !important; cursor: pointer !important; white-space: nowrap !important; }
.u-h280-posrelative { height: 280px !important; position: relative !important; }