/* Volta, côté dashboard : la même identité que la landing et les apps.
   Blanc, cartes gris brume sans bordure, très grands chiffres serrés en Geist, boutons pilule,
   une seule couleur (le bleu Volta). Chargé APRÈS styles.css, dash.css et le style de la page.
   ⚠️ LES PAGES DU DASHBOARD INVERSENT LES JETONS (.swap-page) : --ink est le fond, --ink-2 la
   carte, --paper le texte. Les pages claires (inscription, connexion) gardent le sens normal. */
:root {
  --display: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --lab: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --text: #0b0b0c;
  --muted: #6e6e73;
  --paper: #f3f3f1;
  --paper-2: #ececea;
  --paper-line: #e6e6e3;
  --carimbo: #3d63c9;
  --carimbo-dk: #3d63c9;
}
/* Les chiffres passent en Geist, comme sur la landing ; seules les étiquettes restent en mono. */
.swap-page, body:not(.swap-page) { --mono: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.swap-page {
  --ink: #ffffff;
  --ink-2: #f3f3f1;
  --ink-line: #e6e6e3;
  --paper: #0b0b0c;
  --muted-dk: #6e6e73;
  --carimbo-dk: #3d63c9;
  --verde-dk: #1f8a5b;
  --red-dk: #b5483e;
  --crema: #a8681f;
}
body { font-variation-settings: normal; -webkit-font-smoothing: antialiased; font-size: 14px; }
body:not(.swap-page) { background: #ffffff; }
.label, .t th, .side, .tip-b .label { font-family: var(--lab) !important; letter-spacing: .1em; }
.proto { background: #0b0b0c !important; color: #ffffff !important; font-family: var(--lab) !important; }
.proto a { color: #9ab3f0 !important; }
:focus-visible { outline-color: var(--carimbo); }

/* La barre : collante, en verre dépoli ; l'onglet actif en pilule noire. */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 15; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); margin: -1rem calc(-1 * max(16px, env(safe-area-inset-left, 0px))) 0; padding: .9rem max(16px, env(safe-area-inset-left, 0px)) .9rem !important; border-bottom: 1px solid var(--ink-line) !important; }
.bar .logo, .logo { font: 600 1.2rem/1 var(--sans) !important; letter-spacing: -0.04em !important; }
.bar .logo svg { color: #0b0b0c !important; }
.tabs a { font-size: 14px !important; color: var(--muted-dk) !important; transition: color .2s, background-color .2s; }
.tabs a:hover { color: var(--paper) !important; }
.tabs a[aria-current] { background: #0b0b0c !important; color: #ffffff !important; box-shadow: none !important; }
.subtabs { margin-top: 1rem !important; }
.subtabs a { font-size: 14px !important; box-shadow: inset 0 0 0 1px var(--ink-line) !important; background: #ffffff; transition: box-shadow .2s; }
.subtabs a:hover { box-shadow: inset 0 0 0 1px #0b0b0c !important; }
.subtabs a[aria-current] { background: #0b0b0c !important; color: #ffffff !important; box-shadow: none !important; }
.side { font-size: 11px !important; }

/* Titres : grands et serrés. */
.head { margin: 2rem 0 1.4rem !important; }
.head h1 { font: 500 clamp(2rem, 4.2vw, 3.2rem)/1 var(--sans) !important; letter-spacing: -0.045em !important; text-wrap: balance; margin-top: .55rem !important; }
.card h2, .card > h2 { font: 500 clamp(1.3rem, 2vw, 1.6rem)/1.1 var(--sans) !important; letter-spacing: -0.035em !important; }
h3 { letter-spacing: -0.02em; }

/* Cartes : gris brume, sans bordure, très arrondies. */
.card { background: var(--ink-2) !important; border: 0 !important; border-radius: 24px !important; padding: 1.5rem 1.6rem !important; box-shadow: none !important; transition: transform .45s var(--ease); }
.grid-4 > .card:hover { transform: translateY(-2px); }
.grid-4, .grid-2, .grid-21, .stack { gap: 14px !important; }
.hero-n { font: 500 clamp(3.4rem, 7vw, 5.4rem)/0.95 var(--sans) !important; letter-spacing: -0.06em !important; font-variant-numeric: tabular-nums; }
.v19 { font: 500 clamp(1.8rem, 3vw, 2.4rem)/1 var(--sans) !important; letter-spacing: -0.05em !important; margin: .7rem 0 .35rem !important; font-variant-numeric: tabular-nums; }
.delta { font-family: var(--sans) !important; font-size: 13px !important; }
.note { font: 400 13px/1.5 var(--sans) !important; color: var(--muted-dk) !important; }

/* Boutons : pilule noire pour l'action (le bleu au survol), contour pour le reste. */
.btn-p, .btn-ink, .btn.btn-ink { position: relative; overflow: hidden; isolation: isolate; background: #0b0b0c !important; color: #ffffff !important; font-weight: 500 !important; font-size: 14px !important; min-height: 46px !important; padding: 0 1.3rem !important; border-radius: 999px !important; transition: transform .2s var(--ease); }
.btn-p::before, .btn-ink::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--carimbo); border-radius: inherit; transform: translateY(101%); transition: transform .45s var(--ease); }
.btn-p:hover::before, .btn-ink:hover::before { transform: translateY(0); }
.btn-p:active, .btn-ink:active { transform: scale(.97); }
.btn-p:disabled { opacity: .45; }
.btn-p:disabled::before { display: none; }
.btn-g, .btn-line, .btn.btn-line { background: #ffffff !important; color: #0b0b0c !important; border: 1px solid var(--ink-line) !important; box-shadow: none !important; font-weight: 500 !important; font-size: 14px !important; min-height: 46px !important; padding: 0 1.2rem !important; border-radius: 999px !important; transition: border-color .2s; }
.btn-g:hover, .btn-line:hover { border-color: #0b0b0c !important; }
.btn-r { min-height: 46px !important; background: #ffffff !important; border-color: rgba(181,72,62,.35) !important; font-weight: 500 !important; }
.chips button { background: #ffffff !important; border-color: var(--ink-line) !important; font-size: 13px !important; }
.chips button[aria-pressed="true"] { background: #0b0b0c !important; color: #ffffff !important; border-color: #0b0b0c !important; }
.chips button[aria-pressed="true"] b { color: #ffffff !important; }

/* Champs : blancs dans les cartes grises, gris sur fond blanc. */
.field input, .field select, .field textarea, .f input, .f select, .f textarea { background: #ffffff !important; border: 1px solid transparent !important; border-radius: 14px !important; font-family: var(--sans) !important; transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus, .field textarea:focus, .f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: #0b0b0c !important; box-shadow: 0 0 0 4px rgba(61,99,201,.12); }
body:not(.swap-page) .field input, body:not(.swap-page) .field select, body:not(.swap-page) .f input, body:not(.swap-page) .f select, body:not(.swap-page) input.in { background: var(--paper) !important; }
.switch input:checked + span { background: #0b0b0c !important; }
.switch input:checked + span::after { background: #ffffff !important; }
.track { background: #e6e6e3 !important; height: 5px !important; }
.track i { background: var(--carimbo) !important; }

/* Tableaux */
.t td { font-family: var(--sans); border-bottom-color: #e6e6e3 !important; height: 40px !important; }
.t th { border-bottom-color: #e6e6e3 !important; font-size: 10px !important; }
.t tbody tr { transition: background-color .15s; }
.t tbody tr:hover td { background: #ffffff !important; }
.t td.n { font-family: var(--sans) !important; }
.st { font-family: var(--sans) !important; font-size: 12.5px !important; }
.st.new { color: #0b0b0c !important; }

/* Tiroir et bulles d'aide */
.drawer { background: rgba(11,11,12,.38) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.drawer .panel { background: #ffffff !important; border-left: 0 !important; box-shadow: -30px 0 60px -30px rgba(0,0,0,.35); animation: glisse .45s var(--ease) both; }
@keyframes glisse { from { transform: translateX(40px); opacity: 0; } }
.drawer .panel h2 { font: 500 1.9rem/1 var(--sans) !important; letter-spacing: -0.045em !important; }
.kv dd { font-family: var(--sans) !important; }
.tip { opacity: .55; }
.tip-b { background: #0b0b0c !important; border-radius: 14px !important; font-family: var(--sans) !important; font-size: 13px !important; box-shadow: 0 18px 40px -18px rgba(0,0,0,.5) !important; }

/* Ce qui attend la vérification de l'email, ou l'offre Pro */
.verify-lock b, .lock-in b { font: 500 1.2rem/1.2 var(--sans) !important; letter-spacing: -0.03em; color: #0b0b0c !important; }
.lock-in .pro { background: #0b0b0c !important; color: #ffffff !important; }

/* Pages claires : inscription, connexion, onboarding */
body:not(.swap-page) h1 { font-family: var(--sans) !important; font-weight: 500 !important; letter-spacing: -0.045em !important; }
body:not(.swap-page) h2 { font-family: var(--sans) !important; font-weight: 500 !important; letter-spacing: -0.035em !important; }

@media (prefers-reduced-motion: reduce) {
  .drawer .panel, .card, .btn-p::before, .btn-ink::before { animation: none !important; transition: none !important; }
}

/* L'inscription du café : des blocs gris brume, sans bordure. */
.onb .bloc { background: #f3f3f1 !important; border: 0 !important; box-shadow: none !important; border-radius: 24px !important; }
.onb .bloc input, .onb .bloc select, .onb .bloc textarea { background: #ffffff !important; border-color: transparent !important; border-radius: 14px !important; }
.onb .bloc input:focus, .onb .bloc select:focus { border-color: #0b0b0c !important; outline: none; box-shadow: 0 0 0 4px rgba(61,99,201,.12); }
.onb .perks span, .perks > * { background: #f3f3f1 !important; }