/* Le thème : jetons de couleur, et la couche du thème sombre qui réétage les classes et les teintes écrites en dur.
   Extrait tel quel de index.html (découpage du front). */

/* ─── THEME CLAIR / SOMBRE ───────────────────────────────────────────────
   Le projet a ete ecrit en clair : 19 classes Tailwind claires et une
   quarantaine de fonds en dur. Plutot que de reprendre chaque balise, on
   redefinit ces classes sous [data-theme="dark"]. `!important` est ici
   necessaire et non paresseux : il faut battre les styles INLINE, qu'aucune
   specificite de selecteur ne surpasse.
   Le fond de page vit dans une variable : il etait inline sur <body>, donc
   intouchable par une feuille de style. */
:root {
  --page-bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --ink: #0f172a;
  --ink-2: #334155;
  --ink-3: #526176;
  --hairline: #e2e8f0;
  --field-border: #94a3b8;
  --placeholder: #526176;
  --estimated-ink: #4338ca;
  --focus: #1d4ed8;
  --radius-control: 10px;
  --radius-panel: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --cashflow-ld-label: #0369a1;
  --cashflow-cd-label: #b45309;
  --cashflow-custom-label: #6b21a8;
  --cashflow-custom-bg: #faf5ff;
  --cashflow-positive: #047857;
  --cashflow-negative: #b91c1c;
  /* Cloche « valeur conseillee » : pastels, calibres sur du blanc. */
  --gauss-red: #fecaca;
  --gauss-amber: #fde68a;
  --gauss-lime: #d9f99d;
  --gauss-green: #bbf7d0;
  --gauss-peak: #86efac;
  /* Pastilles des chiffres communaute : un fond teinte derriere l'emoji. */
  --tile-blue: #eff6ff;
  --tile-cyan: #ecfeff;
  --tile-green: #f0fdf4;
  --tile-amber: #fef3c7;
  --tile-purple: #faf5ff;
  /* Les deux rôles d'un bouton (boutons.css), dans le bleu marine du logo.
     L'ACTION (« cliquer fait quelque chose ») est pleine ; la SÉLECTION
     (« c'est ici, c'est choisi ») en est une teinte claire, bordée, avec une
     lumière lente. */
  --action-bg: #1e3a5f;
  --action-bg-hover: #172e4c;
  --action-ink: #ffffff;
  --selection-bg: #e9eef5;
  --selection-line: #b7c5d8;
  --selection-ink: #1e3a5f;
  /* La lumière de la sélection est nacrée : du blanc, à peine teinté de rose
     d'un côté et de bleu de l'autre. Des teintes plus franches faisaient un arc
     en ciel. Assez pâles, elles ne signifient rien à côté du vert, du rouge et
     de l'ambre qui, eux, portent un sens. */
  --reflet-rose: rgba(255, 226, 240, .4);
  --reflet-clair: rgba(255, 255, 255, .75);
  --reflet-ciel: rgba(222, 240, 255, .5);
}
html[data-theme="dark"] {
  --page-bg: #0b1220;
  --surface: #111827;
  --surface-2: #0f172a;
  --ink: #e5e7eb;
  --ink-2: #cbd5e1;
  --ink-3: #a9b8cb;
  --hairline: #1f2937;
  --field-border: #64748b;
  --placeholder: #a9b8cb;
  --estimated-ink: #c7d2fe;
  --focus: #93c5fd;
  --cashflow-ld-label: #7dd3fc;
  --cashflow-cd-label: #fcd34d;
  --cashflow-custom-label: #d8b4fe;
  --cashflow-custom-bg: #1d1b34;
  --cashflow-positive: #86efac;
  --cashflow-negative: #fca5a5;
  /* Memes teintes, reetagees : sur fond sombre les pastels eblouissaient et
     volaient la vedette aux champs. Le pic reste le point le plus contraste
     de la cloche (3,3:1), comme le vert central l'est sur fond blanc. */
  --gauss-red: #7f1d1d;
  --gauss-amber: #78350f;
  --gauss-lime: #3f6212;
  --gauss-green: #166534;
  --gauss-peak: #15803d;
  /* Memes pastilles : la teinte porte l'identite, pas la luminosite — elles
     restent au niveau de la carte et ne se distinguent que par la chroma. */
  --tile-blue: #0d2440;
  --tile-cyan: #08303a;
  --tile-green: #06281c;
  --tile-amber: #33270a;
  --tile-purple: #1d1b34;
  /* Même marine, éclairci : plein, il se fondait dans le fond sombre. */
  --action-bg: #4a6fa8;
  --action-bg-hover: #41629a;
  --action-ink: #ffffff;
  --selection-bg: #1b2840;
  --selection-line: #34496b;
  --selection-ink: #d5deeb;
  --reflet-rose: rgba(255, 205, 232, .06);
  --reflet-clair: rgba(255, 255, 255, .09);
  --reflet-ciel: rgba(190, 228, 255, .08);
}
body { background: var(--page-bg); color: var(--ink); }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; }
}
/* Hauteur du cadre de navigation, pour ce qui se range dessous. Mesurée :
   la barre passe à deux lignes dès que le nom du bien ne tient plus. */
:root { --nav-h: 0px; }

/* LE COUP D'ŒIL. Les trois champs sur une ligne, le verdict dessous : on lit
   le chiffre qui décide avant le détail qui l'explique. */
.coup-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 10px; }
.coup-champ { display: flex; flex-direction: column; gap: 4px; }
.coup-libelle { font-size: 11px; color: #64748b; }
.coup-saisie { display: flex; align-items: center; gap: 6px; }
.coup-saisie input { flex: 1 1 auto; min-width: 0; font-size: 14px;
  border: 1px solid #cbd5e1; border-radius: 8px; padding: 6px 8px; text-align: right; }
.coup-unite { font-size: 11px; color: #64748b; white-space: nowrap; }
.coup-verdict { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; padding: 12px 14px; }
.coup-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 8px; border-bottom: 1px solid #e2e8f0; }
.coup-tete-libelle { font-size: 13px; font-weight: 600; color: #334155; }
.coup-tete-valeur { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.coup-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 3px 0; }
.coup-ligne-libelle { font-size: 12px; color: #64748b; }
.coup-ligne-valeur { font-size: 12px; font-weight: 500; color: #334155; font-variant-numeric: tabular-nums; }

/* CE QUI A BOUGÉ PENDANT VOTRE ABSENCE. Une ligne de pastilles, pas un pavé :
   la première version occupait 285 pixels en permanence pour annoncer une
   baisse et six retraits. Le détail se déplie à la demande.
   Les teintes du prix PORTENT du sens — une baisse est une bonne nouvelle —
   donc elles se réétagent en sombre au lieu de disparaître. */
:root { --veille-baisse: #047857; --veille-hausse: #b91c1c; }
html[data-theme="dark"] { --veille-baisse: #86efac; --veille-hausse: #fca5a5; }

.veille-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
/* Dans le cadre des filtres, la barre s'aligne sur les groupes qui la précèdent
   au lieu de coller au bord. */
#recherches-barre .veille-barre { padding: 0 14px 14px; margin-top: 4px; }
.barre-intitule { font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-3); }
.veille-puce { display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 999px;
  padding: 5px 11px; min-height: 36px; cursor: pointer; color: #334155; white-space: nowrap; }
.veille-puce:hover { border-color: #94a3b8; }
.veille-puce--ajout { border-style: dashed; color: #64748b; }

.recherche-nom { overflow: hidden; text-overflow: ellipsis; max-width: 12rem; }
.recherche-compte { font-size: 11px; font-weight: 700; background: var(--veille-baisse);
  color: #fff; border-radius: 999px; padding: 1px 6px; font-variant-numeric: tabular-nums; }
html[data-theme="dark"] .recherche-compte { color: #0f172a; }
.recherche-retirer { color: #94a3b8; font-size: 15px; line-height: 1; padding: 0 2px; }
.recherche-retirer:hover { color: #b91c1c; }

html[data-theme="dark"] .veille-puce:not(.active) { background: var(--surface) !important; border-color: var(--hairline) !important; color: var(--ink-2) !important; }

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] .bg-slate-100 { background-color: var(--surface) !important; }
html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-slate-800 { color: var(--ink) !important; }
html[data-theme="dark"] .text-slate-700,
html[data-theme="dark"] .text-slate-600 { color: var(--ink-2) !important; }
html[data-theme="dark"] .text-slate-500,
html[data-theme="dark"] .text-slate-400 { color: var(--ink-3) !important; }
html[data-theme="dark"] .border-slate-100,
html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-slate-300,
html[data-theme="dark"] .divide-slate-100 > * + * { border-color: var(--hairline) !important; }

html[data-theme="dark"] .card { background: rgba(17, 24, 39, .85) !important; border-color: var(--hairline) !important; }
html[data-theme="dark"] .ghost-btn { background: rgba(17, 24, 39, .92) !important; border-color: var(--hairline) !important; color: var(--ink-2) !important; }
html[data-theme="dark"] .lang-btn:not(.active) { background: var(--surface) !important; color: var(--ink-3) !important; }
html[data-theme="dark"] .muted { color: var(--ink-3) !important; }
html[data-theme="dark"] input:not([type=range]):not([role=switch]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { background-color: var(--surface-2) !important; color: var(--ink) !important; border-color: var(--hairline) !important; }
/* La carte Leaflet reste claire : on l'assombrit sans la deteindre. */
html[data-theme="dark"] #map .leaflet-tile { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9); }
html[data-theme="dark"] #map.leaflet-container { background: var(--surface-2) !important; }


/* Surfaces qui portent leur fond en dur dans le CSS du projet : elles ne sont pas
   atteintes par la reecriture des classes Tailwind. Reperees en mesurant, page
   chargee en sombre, les elements dont le fond calcule restait clair. */
html[data-theme="dark"] .community-stats,
html[data-theme="dark"] .cstat,
html[data-theme="dark"] .filter-clusters,
html[data-theme="dark"] .filter-summary,
html[data-theme="dark"] .filter-cluster,
html[data-theme="dark"] .value-misc-row,
html[data-theme="dark"] #filterPanel,
html[data-theme="dark"] #valueFilterPanel,
html[data-theme="dark"] #workspaceTabs { background: var(--surface) !important; border-color: var(--hairline) !important; }
html[data-theme="dark"] #community-ticker b { color: var(--ink) !important; }
html[data-theme="dark"] .cstat-title,
html[data-theme="dark"] .cstat-value { color: var(--ink) !important; }
html[data-theme="dark"] .cstat-label,
html[data-theme="dark"] .cstat-live { color: var(--ink-3) !important; }


/* Boutons et pastilles de carte. Leur fond est ecrit en dur, soit dans une regle
   CSS, soit — pour les pastilles fabriquees en JS — dans un attribut style.
   On cible les DECLARATIONS LITTERALES telles qu'elles sont ecrites : c'est plus
   sur qu'un selecteur approximatif, et ca se voit si une valeur change.
   Les couleurs qui PORTENT DU SENS ne sont pas touchees : barres de cashflow
   (rouge/vert), badge NEW, pastilles de source. */
html[data-theme="dark"] .card-menu-btn,
html[data-theme="dark"] .dossier-del-btn,
html[data-theme="dark"] .map-focus-btn,
html[data-theme="dark"] .favorite-btn { background: var(--surface-2) !important; border-color: var(--hairline) !important; color: var(--ink-2) !important; }
html[data-theme="dark"] [style*="background:#f1f5f9;"],
html[data-theme="dark"] [style*="background:#f8fafc;"],
html[data-theme="dark"] [style*="background:#ffffff;"],
html[data-theme="dark"] [style*="background:#fff1f2;"] { background: var(--surface-2) !important; border-color: var(--hairline) !important; }
html[data-theme="dark"] kbd { background: var(--surface-2) !important; border-color: var(--hairline) !important; color: var(--ink-2) !important; }
/* Bouton désactivé : son gris clair se lisait comme un bloc blanc sur fond sombre.
   Il doit rester VISIBLEMENT inerte, donc plus sourd que le fond, pas plus clair. */
html[data-theme="dark"] .btn:disabled { background: var(--surface-2) !important; color: var(--ink-3) !important; opacity: 1 !important; }

/* Contrôles Leaflet : ils vivent hors de notre CSS, posés par la bibliothèque. */
html[data-theme="dark"] .leaflet-control-zoom-in,
html[data-theme="dark"] .leaflet-control-zoom-out,
html[data-theme="dark"] .leaflet-control-attribution { background: var(--surface) !important; color: var(--ink-2) !important; }
html[data-theme="dark"] .leaflet-control-zoom-in,
html[data-theme="dark"] .leaflet-control-zoom-out { border-color: var(--hairline) !important; }


/* ─── TEINTES ÉCRITES EN DUR DANS LES ATTRIBUTS style ────────────────────
   Le front fabrique ses pastilles et ses encadrés en JS, couleur comprise.
   Aucune specificite de selecteur ne bat un style inline : seul !important
   le peut. On cible donc les DECLARATIONS LITTERALES, extraites du code lui-meme
   — 23 fonds clairs et 16 encres sombres — plutot que devinees.

   Deux traitements, selon ce que la couleur DIT :
    - surface neutre (blanc, gris) -> elle devient sombre ;
    - teinte qui SIGNIFIE (vert = bon, rouge = alerte, ambre = attention) -> elle
      garde sa teinte, assombrie, et son encre est eclaircie d'autant. L'effacer
      supprimerait l'information. */
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background:#f8fafc"],
html[data-theme="dark"] [style*="background:#f1f5f9"],
html[data-theme="dark"] [style*="background:#e2e8f0"],
html[data-theme="dark"] [style*="background:#e5e7eb"],
html[data-theme="dark"] [style*="background:#fafbfc"],
html[data-theme="dark"] [style*="background:#f5f9ff"] { background: var(--surface-2) !important; }
html[data-theme="dark"] [style*="background:#fff;"],
html[data-theme="dark"] [style*='background:#fff"'] { background: var(--surface-2) !important; }
html[data-theme="dark"] [style*="background:#dcfce7"],
html[data-theme="dark"] [style*="background:#ecfdf5"],
html[data-theme="dark"] [style*="background:#f4fdf7"] { background: #06281c !important; }
html[data-theme="dark"] [style*="background:#fee2e2"],
html[data-theme="dark"] [style*="background:#fef2f2"] { background: #2f1416 !important; }
html[data-theme="dark"] [style*="background:#fef3c7"],
html[data-theme="dark"] [style*="background:#fffbeb"] { background: #33270a !important; }
html[data-theme="dark"] [style*="background:#dbeafe"],
html[data-theme="dark"] [style*="background:#e0f2fe"],
html[data-theme="dark"] [style*="background:#eff6ff"] { background: #0d2440 !important; }
html[data-theme="dark"] [style*="background:#faf5ff"],
html[data-theme="dark"] [style*="background:#eef2ff"],
html[data-theme="dark"] [style*="background:#e0e7ff"],
html[data-theme="dark"] [style*="background:#ede9fe"] { background: #1d1b34 !important; }
html[data-theme="dark"] [style*="background:#fff1f2"] { background: #33121b !important; }
html[data-theme="dark"] [style*="color:#b91c1c"],
html[data-theme="dark"] [style*="color:#dc2626"],
html[data-theme="dark"] [style*="color:#be123c"] { color: #fca5a5 !important; }
html[data-theme="dark"] [style*="color:#166534"],
html[data-theme="dark"] [style*="color:#16a34a"],
html[data-theme="dark"] [style*="color:#047857"] { color: #86efac !important; }
html[data-theme="dark"] [style*="color:#b45309"],
html[data-theme="dark"] [style*="color:#92400e"],
html[data-theme="dark"] [style*="color:#78350f"],
html[data-theme="dark"] [style*="color:#7c2d12"] { color: #fcd34d !important; }
html[data-theme="dark"] [style*="color:#1d4ed8"],
html[data-theme="dark"] [style*="color:#075985"] { color: #93c5fd !important; }
html[data-theme="dark"] [style*="color:#0f172a"],
html[data-theme="dark"] [style*="color:#334155"] { color: var(--ink) !important; }
html[data-theme="dark"] [style*="color:#64748b"],
html[data-theme="dark"] [style*="color:#475569"] { color: var(--ink-3) !important; }

html[data-theme="dark"] [style*="color:#6b21a8"] { color: #d8b4fe !important; }
html[data-theme="dark"] [style*="color:#1e293b"],
html[data-theme="dark"] [style*="color:#854d0e"] { color: var(--ink-2) !important; }
html[data-theme="dark"] #community-ticker .tk-city { color: #93c5fd !important; }
/* Onglet inactif : volontairement sourd, mais pas au point d'etre illisible. */
html[data-theme="dark"] [style*="color:#475569"] { color: var(--ink-3) !important; }


/* ─── RÈGLES DU PROJET À FOND CLAIR ──────────────────────────────────────
   Le <style> du projet compte 65 règles dont le fond est clair, écrit en dur.
   Elles ne sont atteintes ni par la réécriture des classes Tailwind, ni par les
   sélecteurs d'attribut style : ce sont des règles CSS ordinaires.
   Recensées en parcourant le bloc <style> lui-même — donc exhaustives — et
   traitées selon la même règle : surface neutre assombrie, teinte qui signifie
   conservée en version sombre. Les variantes DÉJÀ prévues pour fond sombre
   (.on-dark, .action-icon) sont épargnées : elles sont correctes telles quelles. */
html[data-theme="dark"] .card { background: rgba(17, 24, 39, .85) !important; }
html[data-theme="dark"] .map-focus-btn { background: #06281c !important; }
html[data-theme="dark"] .online { background: #06281c !important; }
html[data-theme="dark"] .offline { background: #2f1416 !important; }
html[data-theme="dark"] .checking { background: var(--surface) !important; }
html[data-theme="dark"] .progress { background: var(--surface) !important; }
html[data-theme="dark"] .skeleton-card { background: rgba(17, 24, 39, .85) !important; }
html[data-theme="dark"] .skeleton-line::after,
html[data-theme="dark"] .skeleton-block::after { background: var(--surface) !important; }
html[data-theme="dark"] .sort-btn { background: var(--surface) !important; }
html[data-theme="dark"] .favorite-btn { background: rgba(17, 24, 39, 0.5) !important; }
html[data-theme="dark"] .community-stats { background: var(--surface) !important; }
html[data-theme="dark"] .cstat { background: var(--surface) !important; }
html[data-theme="dark"] .community-banner { background: var(--surface) !important; }
html[data-theme="dark"] .card-menu-btn { background: var(--surface) !important; }
html[data-theme="dark"] .card-menu-btn:hover { background: var(--surface) !important; }
html[data-theme="dark"] .card-menu-btn.flagged { background: #33270a !important; }
html[data-theme="dark"] .card-menu-pop { background: var(--surface) !important; }
html[data-theme="dark"] .card-menu-item:hover { background: var(--surface) !important; }
html[data-theme="dark"] .dossier-del-btn { background: var(--surface) !important; }
html[data-theme="dark"] .dossier-del-btn:hover { background: #2f1416 !important; }
html[data-theme="dark"] .dossier-del-btn:disabled { background: var(--surface) !important; }
html[data-theme="dark"] .dossier-del-btn:disabled:hover { background: var(--surface) !important; }
html[data-theme="dark"] .new-badge { background: #06281c !important; }
html[data-theme="dark"] .level-detail-card { background: var(--surface) !important; }
html[data-theme="dark"] .field-chip-present { background: #06281c !important; }
html[data-theme="dark"] .field-chip-missing { background: #2f1416 !important; }
html[data-theme="dark"] .workspace-tabbar { background: rgba(17, 24, 39, .78) !important; }
/* Onglet non choisi : l'encre claire (#475569, 2,3:1 sur la barre) disparaissait,
   et son survol passait au bleu nuit, illisible sur le fond sombre. */
html[data-theme="dark"] .workspace-tab-btn:not(.active) { color: var(--ink-3); }
html[data-theme="dark"] .workspace-tab-btn:not(.active):hover { background: var(--surface) !important; color: var(--ink); }
html[data-theme="dark"] .ghost-btn { background: rgba(17, 24, 39, .92) !important; }
html[data-theme="dark"] .settings-item:hover { background: var(--surface) !important; }
html[data-theme="dark"] .ghost-btn:hover { background: var(--surface) !important; }
/* Niveau 1 — la piste s'enfonce (plus sombre que la carte) et la pastille
   active remonte : en clair c'etait l'inverse, et transposer tel quel donnait
   une pastille #0f172a sur un fond #111827, donc un trou. */
html[data-theme="dark"] .management-section-nav { background: var(--surface-2) !important; border-color: var(--hairline) !important; }
html[data-theme="dark"] .management-section-btn:not(.active) { color: var(--ink-3) !important; }
html[data-theme="dark"] .management-section-btn:not(.active):hover { color: var(--ink) !important; background: rgba(148, 163, 184, .14) !important; }
/* Niveau 2 — aucun fond, juste le texte et son soulignement : les deux doivent
   donc s'eclaircir, sinon l'onglet actif disparait purement et simplement. */
html[data-theme="dark"] .management-subnav { border-bottom-color: var(--hairline) !important; }
html[data-theme="dark"] .management-subnav .management-subtab-btn { color: var(--ink-3) !important; }
html[data-theme="dark"] .management-subnav .management-subtab-btn:hover { color: var(--ink) !important; border-bottom-color: var(--ink-3) !important; }
html[data-theme="dark"] .management-subnav .management-subtab-btn.active { color: var(--ink) !important; border-bottom-color: var(--ink) !important; }
html[data-theme="dark"] .lang-btn:not(.active) { background: var(--surface) !important; }
html[data-theme="dark"] .metric-tile { background: rgba(17, 24, 39, .92) !important; }
html[data-theme="dark"] .channel-tile { background: var(--surface) !important; }
html[data-theme="dark"] .conf-cluster { background: var(--surface) !important; }
html[data-theme="dark"] .cases-add { background: var(--surface) !important; }
html[data-theme="dark"] .card.is-new { background: #06281c !important; }
html[data-theme="dark"] .filter-panel { background: var(--surface) !important; }
html[data-theme="dark"] .filter-clusters { background: var(--surface) !important; }
html[data-theme="dark"] .filter-chip input:not(:checked) + .filter-chip-tag:hover { background: var(--surface) !important; }
html[data-theme="dark"] .value-custom-row input { background: var(--surface) !important; }
html[data-theme="dark"] .perpage-field select { background: var(--surface) !important; }
html[data-theme="dark"] .perpage-field select:hover { background: var(--surface) !important; }
html[data-theme="dark"] .value-misc-row { background: var(--surface) !important; }
html[data-theme="dark"] .mform-head .rule { background: var(--surface) !important; }
html[data-theme="dark"] .mfield input,
html[data-theme="dark"] .mfield select,
html[data-theme="dark"] .mfield textarea { background: var(--surface) !important; }
html[data-theme="dark"] .management-panel input:not([type=checkbox]):not([type=radio]):not([type=range]),
html[data-theme="dark"] .management-panel select,
html[data-theme="dark"] .management-panel textarea { background: var(--surface) !important; }
html[data-theme="dark"] #managementBody input:focus,
html[data-theme="dark"] #managementBody select:focus,
html[data-theme="dark"] #managementBody textarea:focus,
html[data-theme="dark"] .management-panel input:focus,
html[data-theme="dark"] .management-panel select:focus,
html[data-theme="dark"] .management-panel textarea:focus { background: #0d2440 !important; }
/* Le `!important` du fond écrasait AUSSI celui de l'état actif : les deux boutons
   se retrouvaient sur le même fond, et l'inactif gardait seul une bordure claire
   — c'est lui qui avait l'air sélectionné. Seul l'inactif est donc forcé ;
   l'actif suit la sélection (boutons.css). L'inactif passe à l'encre secondaire,
   lisible (#475569 sur #111827 ne faisait que 2,3:1). */
html[data-theme="dark"] .renta-metric-btn:not(.renta-metric-active) {
  background: var(--surface) !important;
  color: var(--ink-3) !important;
  border-color: var(--hairline) !important;
}
/* Tableau de décomposition : la trame fait la lecture, pas le trait. Un filet à
   1,21:1 sur le fond sombre ne séparait rien ; une ligne sur deux légèrement
   teintée se lit sans ajouter de contraste dur. */
html[data-theme="dark"] .lot-row:nth-child(odd) { background: rgba(148, 163, 184, .06); }
html[data-theme="dark"] .lot-row.sans-zebre:nth-child(odd) { background: transparent; }
html[data-theme="dark"] .lot-row { border-top-color: #334155 !important; }
html[data-theme="dark"] .lot-head { border-bottom-color: #334155 !important; }
html[data-theme="dark"] .lot-row input,
html[data-theme="dark"] .lot-row select { border-color: #64748b !important; }
html[data-theme="dark"] .lot-row.est-rempli { background: rgba(59, 130, 246, .10); }
html[data-theme="dark"] .source-chip { background: var(--surface-2) !important; border-color: var(--hairline) !important; color: var(--ink-2) !important; }
html[data-theme="dark"] .source-chip:hover { border-color: var(--ink-3) !important; color: var(--ink) !important; }
/* Le signalement « champ vide » est un rouge porteur de sens : il doit battre
   la regle generique de champ ci-dessus, qui le noyait dans le gris. */
html[data-theme="dark"] .management-panel input.field-empty,
html[data-theme="dark"] .management-panel select.field-empty,
html[data-theme="dark"] input.field-empty,
html[data-theme="dark"] select.field-empty { border-color: #ef4444 !important; }

/* Le bouton lui-meme : une seule icone, celle de la bascule A VENIR. */
#themeToggle .icon-sun { display: none; }
html[data-theme="dark"] #themeToggle .icon-sun { display: block; }
html[data-theme="dark"] #themeToggle .icon-moon { display: none; }

:root {
  --line-color: #cbd5e1;
  --line-color-hover: #4f46e5;
}

/* Ombre et survol sont definis plus bas, avec les surlignages : `.card:hover`
   etant plus specifique que `.card`, une ombre declaree ici ecraserait les
   halos (nouveaute + selection) des que la souris entre sur la carte. */
.card {
  position: relative;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(6px);
  border-radius: 1rem;
  padding: 1rem;
  border: 1px solid #f1f5f9;
}

/* LES INSIGNES DE CONTRIBUTION — bronze, argent, or. Le même disque à côté du
   niveau (menu du compte), sur les biens partagés, et en anneau autour de
   l'avatar ; le cadre des cartes partagées en reprend la couleur. */
:root { --insigne-bronze: #b4713d; --insigne-argent: #94a3b8; --insigne-or: #d4a017; }
html[data-theme="dark"] { --insigne-bronze: #d08a52; --insigne-argent: #cbd5e1; --insigne-or: #f2c94c; }
.insigne { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 0 0 1px rgba(15, 23, 42, .15); }
.insigne--bronze { background: radial-gradient(circle at 35% 35%, #e3a873, var(--insigne-bronze)); }
.insigne--argent { background: radial-gradient(circle at 35% 35%, #f1f5f9, var(--insigne-argent)); }
.insigne--or { background: radial-gradient(circle at 35% 35%, #fbe38a, var(--insigne-or)); }
#userBtn[data-insigne] #userAvatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--insigne-anneau); }
#userBtn[data-insigne="bronze"] { --insigne-anneau: var(--insigne-bronze); }
#userBtn[data-insigne="argent"] { --insigne-anneau: var(--insigne-argent); }
#userBtn[data-insigne="or"] { --insigne-anneau: var(--insigne-or); }
.card.carte-cadre--bronze { box-shadow: 0 0 0 2px var(--insigne-bronze); }
.card.carte-cadre--argent { box-shadow: 0 0 0 2px var(--insigne-argent); }
.card.carte-cadre--or { box-shadow: 0 0 0 2px var(--insigne-or), 0 8px 24px rgba(212, 160, 23, .18); }
.contrib-succes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.succes { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; cursor: help;
  background: color-mix(in srgb, var(--insigne-or) 18%, transparent); color: var(--ink-2); }