/**
 * SloWealth — Styles partagés
 * Chargé en premier dans toutes les pages : palette, reset, typographie, tooltips.
 * Les styles spécifiques à chaque page restent dans leur balise <style> inline.
 *
 * MISE À JOUR : ce fichier est le seul endroit à modifier pour changer les couleurs.
 */

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Palette & variables ── */
:root{
  --ink:#0d0f12;--ink-2:#1e2229;--ink-3:#2d333d;
  --ink-muted:#6b7585;--ink-faint:#3d4452;
  --paper:#f5f3ee;--paper-2:#edeae3;--paper-3:#e4e0d7;
  --gold:#c8a84b;--gold-dim:#a88a35;--gold-light:#e8d08a;
  --green:#2d9e6b;--green-light:#e8f7f0;--green-mid:#1d6e49;
  --red:#c0392b;--red-light:#fdf0ee;
  --blue:#2980b9;--blue-light:#eaf4fb;
  --amber:#e67e22;--amber-light:#fef5ec;
  /* Radius tokens (Phase 2 — Claude's Discretion per 02-CONTEXT.md) */
  --radius-sm:7px;
  --radius-md:10px;
  --radius-lg:12px;
}

/* ── Typographie de base ── */
body{font-family:'DM Sans',sans-serif;background:var(--paper);color:var(--ink);min-height:100vh}

/* ── Focus visible (accessibilité clavier) ── */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ── Layout page ── */
.page{display:flex;flex-direction:column;min-height:100vh}
.page-header{background:var(--ink);padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;position:sticky;top:0;z-index:100}
.page-logo{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);text-decoration:none}
.page-logo span{color:#e8e4db;font-weight:400}
.page-actions{display:flex;align-items:center;gap:.65rem}

/* ── Bouton partager ── */
.share-btn{display:flex;align-items:center;gap:5px;padding:6px 12px;background:var(--ink-2);border:1px solid var(--ink-3);border-radius:7px;color:var(--ink-muted);font-size:.72rem;font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .2s;white-space:nowrap}
.share-btn:hover{border-color:var(--gold);color:var(--gold)}
.share-btn svg{width:13px;height:13px;flex-shrink:0}
.share-toast{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--ink);color:var(--gold);font-size:.78rem;padding:10px 16px;border-radius:8px;border:1px solid var(--ink-3);opacity:0;transform:translateY(8px);transition:all .3s;pointer-events:none;z-index:9998;font-family:'DM Mono',monospace}
.share-toast.show{opacity:1;transform:translateY(0)}

/* ── Toggle Nominal/Réel (partagé entre retraite, investissement, fire) ── */
.nr-toggle{display:inline-flex;background:var(--ink-2);border-radius:7px;padding:2px;gap:2px}
.nr-btn{padding:4px 10px;border:none;background:transparent;color:var(--ink-muted);font-size:.68rem;font-family:'DM Sans',sans-serif;font-weight:500;border-radius:5px;cursor:pointer;transition:all .2s}
.nr-btn.active{background:var(--ink-3);color:#e8e4db;box-shadow:0 1px 3px rgba(0,0,0,.15)}

/* ── Tooltips ── */
.tip{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:var(--paper-3);color:var(--ink-muted);font-size:8px;font-weight:700;cursor:default;position:relative;flex-shrink:0;transition:background .15s}
.tip:hover,.tip.tapped{background:var(--gold);color:var(--ink)}
#tip-bubble{position:fixed;background:#1a1d24;color:#d8d4cb;font-size:.68rem;line-height:1.55;width:230px;padding:9px 12px;border-radius:8px;border:1px solid #2d333d;pointer-events:none;opacity:0;transition:opacity .15s;z-index:9999;box-shadow:0 6px 20px rgba(0,0,0,.5);--arrow-left:50%}
#tip-bubble.show{opacity:1}
#tip-bubble::after{content:'';position:absolute;left:var(--arrow-left);transform:translateX(-50%);border:5px solid transparent}
#tip-bubble:not([data-arrow-pos="top"])::after{top:100%;border-top-color:#2d333d}
#tip-bubble[data-arrow-pos="top"]::after{bottom:100%;border-bottom-color:#2d333d}

/* ── Banners ── */
.banner{padding:.9rem 1.1rem;border-radius:10px;font-size:.78rem;line-height:1.5;margin-bottom:.5rem}
.banner.warn{background:#fef9ec;border:1px solid rgba(200,168,75,.35);color:#7a6020}
.banner.info{background:var(--blue-light);border:1px solid rgba(41,128,185,.2);color:#1a5a8a}
.banner.ok{background:var(--green-light);border:1px solid rgba(45,158,107,.25);color:var(--green-mid)}
.banner.red{background:var(--red-light);border:1px solid rgba(192,57,43,.2);color:var(--red)}
.banner a{color:inherit;font-weight:600}

/* ── Stat cards génériques ── */
.stat-card{background:#fff;border:1px solid var(--paper-3);border-radius:12px;padding:.95rem 1.1rem;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.stat-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.06)}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.stat-card.c-gold::before{background:var(--gold)}
.stat-card.c-green::before{background:var(--green)}
.stat-card.c-blue::before{background:var(--blue)}
.stat-card.c-amber::before{background:var(--amber)}
.stat-card.c-red::before{background:var(--red)}
.stat-card.c-gray::before{background:var(--ink-3)}
.stat-label{font-size:.63rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-muted);font-weight:500;margin-bottom:.3rem;display:flex;align-items:center;gap:4px}
.stat-value{font-family:'DM Mono',monospace;font-size:1.1rem;font-weight:500;letter-spacing:-.02em}
.stat-value.gold{color:var(--gold-dim)}
.stat-value.green{color:var(--green)}
.stat-value.blue{color:var(--blue)}
.stat-value.amber{color:var(--amber)}
.stat-value.red{color:var(--red)}
.stat-sub{font-size:.63rem;color:var(--ink-muted);margin-top:.2rem}