/* =====================================================================
   SYLMERA — LE THEME, EN UN SEUL FICHIER                        v137

   Ce fichier ne change AUCUNE disposition et AUCUN balisage. Il ne
   touche que trois choses, sur toutes les pages a la fois :

     1. l'ecriture        — Plus Jakarta Sans, l'air des banques du UK
     2. les couleurs      — le texte passe a l'encre presque noire,
                            le fond s'eclaircit, le vert Sylmera reste
                            la couleur de marque et le lime la couleur vive
     3. les arrondis      — cartes et boutons plus doux

   Il est charge en dernier dans chaque page : il gagne donc sur les
   styles ecrits dans la page, sans avoir a les modifier.

   POUR TOUT ANNULER : supprimer ce fichier et sa ligne <link>. Rien
   d'autre n'a bouge dans le site.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ---------------------------------------------------------------------
   1. LES COULEURS
   Les pages du site declarent toutes leurs couleurs sous ces noms. En
   les redefinissant ici, chaque page se recolore d'elle-meme.
   --------------------------------------------------------------------- */
:root{
  /* le texte et les fonds */
  --ink:#111416;
  --ink-2:#454C50;
  --ink-3:#6E7679;
  --muted:#7C858A;
  --faint:#A4ACAF;
  --bg:#F1F2EE;
  --surface:#FFFFFF;
  --line:#E7E9E3;
  --line-2:#DCE0D9;

  /* le vert de la marque : garde pour les bandeaux, les en-tetes,
     le P2P — c'est lui qui dit « Sylmera » */
  --deep:#0C3B2E;
  --deep-soft:#E7F1EA;
  --teal:#0C3B2E;
  --teal-2:#12564A;
  --teal-soft:#E7F1EA;

  /* la couleur vive */
  --lime:#C8F21E;
  --lime-deep:#8CAD12;
  --lime-soft:#F2FBD6;

  /* les etats */
  --ok:#1C6B4E;      --ok-soft:#E6F3EC;
  --warn:#8A6A1F;    --warn-soft:#FFF6E2;   --warn-ink:#8A6A1F;  --warn-bg:#FFF6E2;
  --danger:#B23B33;  --danger-soft:#FBECEA;
  --violet:#6B4EE6;

  /* les formes */
  --r:14px;
  --r-lg:20px;
  --shadow:0 1px 2px rgba(17,20,22,.04), 0 10px 28px rgba(17,20,22,.05);
}

/* ---------------------------------------------------------------------
   2. L'ECRITURE
   Une seule famille sur tout le site. Les chiffres restent alignes en
   colonnes, comme sur un releve bancaire.
   --------------------------------------------------------------------- */
html, body,
h1, h2, h3, h4, h5, h6,
p, span, div, li, td, th, dt, dd, label, small, strong, b, em, figcaption,
a, button, input, select, textarea, optgroup,
.num, .btn, .pill, .badge, .tag, .chip, .coin{
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

h1, h2, h3{ font-weight:800 !important; letter-spacing:-.028em !important; }
h4, h5, h6{ font-weight:700 !important; letter-spacing:-.02em !important; }

.num, .headline-amount, .det-amt, .tx-amt, .wallet-amount, .amount, .money{
  font-variant-numeric:tabular-nums !important;
  letter-spacing:-.03em !important;
  font-weight:800 !important;
}

body{ -webkit-font-smoothing:antialiased; }

/* ---------------------------------------------------------------------
   3. LES FORMES
   Rien ne se deplace : seuls les coins et les ombres changent.
   --------------------------------------------------------------------- */
.card, .modal, .sheet, .panel, .tile, .box{
  border-radius:var(--r-lg) !important;
}

.btn, button.btn, a.btn{
  border-radius:999px !important;
  font-weight:700 !important;
  letter-spacing:-.01em !important;
}

.btn-primary{ background:var(--ink) !important; border-color:var(--ink) !important; color:#fff !important; }
.btn-primary:hover{ background:#000 !important; }
.btn-lime{ background:var(--lime) !important; border-color:var(--lime) !important; color:var(--ink) !important; }
.btn-ghost{ border-color:var(--line) !important; color:var(--ink) !important; }

.pill, .badge, .tag, .chip{ border-radius:999px !important; font-weight:700 !important; }

input, select, textarea{ border-radius:12px !important; }

/* Les pastilles de monnaie gardent leur rond et leur logo. */
.coin, .coin-sm, .coin-xs{ border-radius:50% !important; }