/* ============================================================================
 * 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); }
: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; }

/* 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; }
body { background: var(--bg); color: var(--text); font-family: var(--font-mono); min-height: 100vh; }

/* 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 */
#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; position:sticky; top:0; z-index:200; }
.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; }
.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-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); } }
/* ═══ 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; }
}