/* ============================================================
   VA NETWORK — Système de design partagé
   Esthétique : bleu nuit, sobre & raffiné, surfaces en verre
   dépoli (transparence), navigation latérale, accent azur unique.
   ============================================================ */

/* ---------- Polices (hébergées en local) ---------- */
@font-face{font-family:'Bricolage Grotesque';font-weight:700;font-display:swap;
  src:url('/static/fonts/bricolage-600.ttf') format('truetype');}
@font-face{font-family:'Bricolage Grotesque';font-weight:800;font-display:swap;
  src:url('/static/fonts/bricolage-800.ttf') format('truetype');}
@font-face{font-family:'Plus Jakarta Sans';font-weight:400;font-display:swap;
  src:url('/static/fonts/jakarta-400.ttf') format('truetype');}
@font-face{font-family:'Plus Jakarta Sans';font-weight:500;font-display:swap;
  src:url('/static/fonts/jakarta-500.ttf') format('truetype');}
@font-face{font-family:'Plus Jakarta Sans';font-weight:600;font-display:swap;
  src:url('/static/fonts/jakarta-600.ttf') format('truetype');}
@font-face{font-family:'Plus Jakarta Sans';font-weight:700;font-display:swap;
  src:url('/static/fonts/jakarta-700.ttf') format('truetype');}

/* ---------- Jetons de design (bleu nuit) ---------- */
:root{
  --bg:#070b15;            --bg-2:#0a1120;
  --navy:#0e1726;
  --surface:rgba(255,255,255,.012);    /* verre — très transparent */
  --surface-2:rgba(255,255,255,.035);
  --surface-solid:#0f1827;
  --border:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.18);
  --accent:#5b8cff;        --accent-2:#7b74ff;   --accent-deep:#3f63d6;
  --accent-soft:rgba(91,140,255,.14);
  --text:#e9edf7;          --text-dim:#95a1bb;   --text-faint:#5a6783;
  --radius:18px;           --radius-sm:12px;     --radius-lg:24px;
  --shadow:0 24px 60px -28px rgba(0,0,0,.7);
  --shadow-sm:0 10px 28px -16px rgba(0,0,0,.6);
  --grad-accent:linear-gradient(135deg,var(--accent),var(--accent-2));
  --glass-blur:saturate(180%) blur(28px);
  --font-display:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-body:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.4,.2,.2,1);
}

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);background:var(--bg);color:var(--text);
  min-height:100vh;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* Ambiance bleu nuit : halos azur très diffus */
  background-image:
    radial-gradient(45vw 45vw at 80% 0%, rgba(91,140,255,.45), transparent 60%),
    radial-gradient(40vw 40vw at 5% 25%, rgba(123,116,255,.38), transparent 60%),
    radial-gradient(40vw 35vw at 30% 110%, rgba(91,140,255,.30), transparent 60%),
    radial-gradient(35vw 35vw at 70% 75%, rgba(123,116,255,.25), transparent 60%);
  background-attachment:fixed;
}
a{color:var(--accent);text-decoration:none}
h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:1.15}

/* ---------- Marque ---------- */
.va-logo{display:flex;align-items:center;gap:12px}
.va-logo-mark{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:.95rem;color:#fff;
  background:var(--grad-accent);
  box-shadow:0 8px 22px -8px rgba(91,140,255,.7),inset 0 1px 0 rgba(255,255,255,.35)}
.va-logo-text{font-family:var(--font-display);font-weight:800;font-size:1.5rem;letter-spacing:-.03em}
.va-gradient-text{background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- Carte (verre) ---------- */
.va-card{
  background:var(--surface);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.05);position:relative;
}

/* ---------- Layout : barre latérale + contenu ---------- */
.va-app{display:flex;min-height:100vh}
.va-sidebar{
  width:250px;flex-shrink:0;height:100vh;position:sticky;top:0;
  display:flex;flex-direction:column;padding:22px 14px;
  background:rgba(10,17,32,.15);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-right:1px solid var(--border);
}
.va-sidebar .va-logo{padding:6px 10px 18px}
.va-sidebar .va-nav{display:flex;flex-direction:column;gap:3px;margin-top:6px;
  position:static;height:auto;padding:0;background:none;border:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.va-nav-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-faint);padding:14px 14px 6px}
.va-nav-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;
  color:var(--text-dim);font-weight:600;font-size:.91rem;cursor:pointer;border:1px solid transparent;
  background:none;font-family:var(--font-body);text-align:left;width:100%;
  transition:all .18s var(--ease)}
.va-nav-item svg{width:19px;height:19px;flex-shrink:0;opacity:.85}
.va-nav-item:hover{background:rgba(255,255,255,.05);color:var(--text)}
.va-nav-item.active{background:var(--accent-soft);color:#fff;border-color:rgba(91,140,255,.28)}
.va-nav-item.active svg{color:var(--accent);opacity:1}
.va-nav-item .badge{margin-left:auto;background:var(--accent);color:#fff;
  font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:20px}
.va-sidebar-foot{margin-top:auto;padding:12px 14px;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:11px;color:var(--text-dim);font-size:.86rem}
.va-avatar{width:34px;height:34px;border-radius:10px;background:var(--grad-accent);
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:.85rem;flex-shrink:0}
.va-main{flex:1;min-width:0;padding:26px 32px 40px}
.va-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;gap:16px}
.va-page-title{font-family:var(--font-display);font-weight:800;font-size:1.55rem;letter-spacing:-.02em}
.va-page-sub{color:var(--text-dim);font-size:.9rem;margin-top:2px}

/* ---------- Grilles & stats ---------- */
.va-grid{display:grid;gap:16px}
.va-stat{padding:18px 20px}
.va-stat-label{color:var(--text-dim);font-size:.8rem;font-weight:600}
.va-stat-value{font-family:var(--font-display);font-weight:800;font-size:1.9rem;margin-top:6px;letter-spacing:-.02em}
.va-stat-trend{font-size:.78rem;font-weight:600;color:var(--accent);margin-top:4px}
.va-thumb{aspect-ratio:9/13;border-radius:14px;border:1px solid var(--border);
  background:linear-gradient(160deg,rgba(91,140,255,.12),rgba(123,116,255,.05));
  display:grid;place-items:center;color:var(--text-faint);overflow:hidden}

/* ---------- Champs ---------- */
.va-label{display:block;font-size:.72rem;font-weight:700;color:var(--text-dim);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:9px}
.va-field{position:relative;margin-bottom:18px}
.va-field .va-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--text-faint);pointer-events:none;display:flex}
.va-input{width:100%;padding:14px 16px 14px 44px;background:rgba(255,255,255,.04);
  border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--text);
  font-size:1rem;font-family:var(--font-body);outline:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s}
.va-input::placeholder{color:var(--text-faint)}
.va-input:focus{border-color:var(--accent);background:rgba(91,140,255,.05);box-shadow:0 0 0 4px rgba(91,140,255,.14)}

/* ---------- Boutons ---------- */
.va-btn{width:100%;padding:15px;border:none;border-radius:var(--radius-sm);font-family:var(--font-body);
  font-size:1rem;font-weight:700;color:#fff;cursor:pointer;background:var(--grad-accent);
  box-shadow:0 10px 28px -10px rgba(91,140,255,.6),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .15s var(--ease),box-shadow .2s var(--ease);
  display:inline-flex;align-items:center;justify-content:center;gap:8px}
.va-btn:hover{transform:translateY(-2px);box-shadow:0 16px 38px -12px rgba(91,140,255,.7)}
.va-btn:active{transform:translateY(0)}
.va-btn--ghost{background:rgba(255,255,255,.05);border:1px solid var(--border-strong);
  box-shadow:none;color:var(--text)}
.va-btn--cyan{background:rgba(255,255,255,.05);border:1px solid var(--border-strong);box-shadow:none;color:var(--text)}

/* ---------- Onglets (pour pages sans sidebar, ex. connexion) ---------- */
.va-tabs{display:flex;gap:4px;padding:5px;margin-bottom:26px;background:rgba(255,255,255,.04);
  border:1px solid var(--border);border-radius:14px}
.va-tab{flex:1;padding:10px;background:none;border:none;border-radius:10px;cursor:pointer;
  color:var(--text-dim);font-family:var(--font-body);font-size:.86rem;font-weight:600;transition:all .2s var(--ease)}
.va-tab:hover{color:var(--text)}
.va-tab.active{color:#fff;background:var(--accent-soft);box-shadow:inset 0 0 0 1px rgba(91,140,255,.3)}
.va-panel{display:none;animation:vaFade .35s var(--ease)}
.va-panel.active{display:block}

/* ---------- Bascule langue ---------- */
.va-lang{display:inline-flex;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:9px;overflow:hidden}
.va-lang button{padding:6px 11px;font-size:.74rem;font-weight:700;letter-spacing:.04em;color:var(--text-faint);
  background:none;border:none;cursor:pointer;transition:all .15s;font-family:var(--font-body)}
.va-lang button:hover{color:var(--text-dim)}
.va-lang button.active{background:rgba(255,255,255,.09);color:var(--text)}

/* ---------- Messages ---------- */
.va-alert{padding:11px 15px;border-radius:10px;font-size:.86rem;text-align:center;margin-bottom:18px}
.va-alert--error{background:rgba(255,99,132,.08);border:1px solid rgba(255,99,132,.3);color:#ff8da3}

/* ---------- Pages intérieures (nav haute + container) ---------- */
.va-nav{
  position:sticky;top:0;z-index:100;height:62px;display:flex;align-items:center;gap:14px;
  padding:0 24px;background:rgba(7,11,21,.80);flex-wrap:nowrap;white-space:nowrap;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--border);
}
.va-nav .va-logo{flex-shrink:0}
.va-nav .va-logo-mark{width:30px;height:30px;font-size:.7rem;border-radius:9px}
.va-nav .va-logo-text{font-size:1.05rem}
.va-nav-back,.va-nav-btn{display:inline-flex;align-items:center;gap:6px;color:var(--text-dim);
  font-size:.88rem;font-weight:600;text-decoration:none;padding:7px 14px;
  border:1px solid var(--border-strong);border-radius:10px;background:rgba(255,255,255,.03);
  transition:all .15s var(--ease)}
.va-nav-back:hover,.va-nav-btn:hover{color:var(--text);border-color:rgba(91,140,255,.4);background:rgba(91,140,255,.06)}
.va-nav-btn{margin-left:auto}
.va-nav-sep{color:var(--border-strong)}

.va-page{max-width:880px;margin:0 auto;padding:34px 24px}

/* Barre du haut dans .va-main (pour pages internes avec sidebar) */
.page-topbar{display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;gap:12px;border-bottom:1px solid var(--border);
  background:rgba(7,11,21,.60);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  position:sticky;top:0;z-index:50}
.va-page-header{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.va-page-icon{width:54px;height:54px;border-radius:16px;flex-shrink:0;display:grid;place-items:center;
  background:rgba(91,140,255,.10);border:1px solid rgba(91,140,255,.28);color:var(--accent)}
.va-page-icon svg{width:24px;height:24px}
.va-page-h{font-family:var(--font-display);font-size:1.25rem;font-weight:800;letter-spacing:-.02em}
.va-page-s{font-size:.84rem;color:var(--text-dim);margin-top:3px}

.va-info-box{background:rgba(91,140,255,.06);border:1px solid rgba(91,140,255,.22);
  border-left:3px solid var(--accent);border-radius:0 14px 14px 0;padding:14px 18px;
  margin-bottom:24px;font-size:.88rem;color:var(--text-dim);line-height:1.7}
.va-info-box strong{color:var(--accent)}
.va-info-box code{background:rgba(255,255,255,.05);padding:2px 7px;border-radius:5px;
  color:#ff8da3;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em}

.va-grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.va-grid-cards--wide{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}

.va-chip{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid var(--border);cursor:pointer;user-select:none;
  transition:all .15s var(--ease)}
.va-chip:hover{border-color:rgba(91,140,255,.4);background:rgba(91,140,255,.06)}
.va-chip.copied{border-color:rgba(74,222,128,.5);background:rgba(74,222,128,.07)}
.va-chip-at{color:var(--text-faint);font-size:.85rem;flex-shrink:0}
.va-chip-text{flex:1;font-weight:700;font-size:.88rem;color:var(--accent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.va-chip-ico{flex-shrink:0;color:var(--text-faint);transition:color .2s}
.va-chip:hover .va-chip-ico{color:var(--text-dim)}
.va-chip.copied .va-chip-text{color:#74de80}
.va-chip.copied .va-chip-ico{color:#74de80}

.va-toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);
  background:rgba(10,17,32,.85);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--border-strong);color:var(--text);font-size:.86rem;font-weight:600;
  padding:11px 22px;border-radius:12px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:999}
.va-toast.show{opacity:1}

/* ---------- Animations ---------- */
@keyframes vaFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes vaRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.va-rise{animation:vaRise .6s var(--ease) both}
.va-rise-1{animation-delay:.05s}.va-rise-2{animation-delay:.13s}
.va-rise-3{animation-delay:.21s}.va-rise-4{animation-delay:.29s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .va-sidebar{width:74px;padding:18px 10px}
  .va-sidebar .va-logo-text,.va-nav-item span,.va-nav-label,.va-sidebar-foot span{display:none}
  .va-nav-item{justify-content:center;padding:12px}
  .va-main{padding:20px 16px}
}