/* =========================================================
   GLOBAL CORPORATE & INVESTMENT BANKING — Couche de design « premium »
   Direction artistique institutionnelle : bleu nuit / blanc / gris,
   touche dorée très discrète, typographie serif pour les titres.

   Fichier chargé APRÈS style.css sur le site
   public, les pages de connexion/inscription et l'espace client. Il ne
   modifie que l'apparence (couleurs, typographie, espacements, effets) :
   aucune structure HTML, aucun identifiant, aucun script n'en dépend.
   Le back-office administrateur ne le charge pas (apparence inchangée).
========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&family=Inter:wght@400;500;600;700&display=swap");

:root{
  /* Palette institutionnelle */
  --navy-950: #061224;
  --navy-900: #0A1A33;
  --navy-800: #0F2547;
  --navy-700: #16335F;
  --navy-600: #1E4277;
  --steel-300: #A9BCD6;
  --steel-100: #E7EDF5;
  --gold: #B8975A;
  --gold-soft: #D9C29A;

  /* Redéfinition des jetons existants (utilisés partout dans style.css) */
  --bg: #ffffff;
  --bg-alt: #F4F6F9;
  --bg-card: #ffffff;
  --bg-card-2: #F7F9FC;
  --border: rgba(10, 26, 51, 0.10);
  --border-strong: rgba(10, 26, 51, 0.20);
  --green: var(--steel-300);
  --green-soft: var(--steel-100);
  --green-dark: var(--navy-700);
  --green-glow: rgba(22, 51, 95, 0.28);
  --cta: var(--navy-800);
  --cta-soft: var(--navy-600);
  --text: #0E1A2B;
  --text-muted: #4A5568;
  --text-dim: #7A8699;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-glow: 0 24px 48px -28px rgba(10, 26, 51, 0.35);
  --shadow-soft: 0 1px 2px rgba(10,26,51,.04), 0 12px 32px -18px rgba(10,26,51,.22);
  --ff-head: 'Inter', system-ui, sans-serif;
  --ff-body: 'Inter', system-ui, sans-serif;
  --ff-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* Le site client conserve ces jetons (style.css les redéfinissait en cyan) */
body.client-app{ --cta: var(--navy-800); --cta-soft: var(--navy-600); }

/* ---------- Fond et typographie ---------- */
body{ color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body::before{ background: var(--bg); }
body::after{ display:none; }
body.client-app::before{ background: var(--bg-alt); }

h1, h2{ font-family: var(--ff-serif); font-weight: 500; letter-spacing: -0.015em; color: var(--text); }
h3, h4, h5{ font-family: var(--ff-head); font-weight: 600; letter-spacing: -0.005em; }
p{ line-height: 1.7; }
::selection{ background: var(--navy-700); color:#fff; }

/* Texte « dégradé » animé : remplacé par un or discret, statique */
.gradient-text{
  background: none; -webkit-background-clip: initial; background-clip: initial;
  color: var(--gold-soft); animation: none; font-style: italic;
}

/* Décors flous colorés : retirés (sobriété institutionnelle) */
.blob, .ring{ display:none !important; }

/* ---------- Éléments d'accroche ---------- */
.eyebrow{
  background: none; border: none; padding: 0; border-radius: 0;
  color: var(--gold); font-size: .72rem; font-weight: 600; letter-spacing: .2em;
}
.eyebrow .dot{ width:22px; height:1px; border-radius:0; background: var(--gold); box-shadow:none; animation:none; }

/* ---------- Boutons ---------- */
.btn{
  border-radius: 6px; font-weight: 600; letter-spacing: .01em; padding: 14px 26px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn-primary{
  background: var(--navy-800); color:#fff; border-color: var(--navy-800);
  box-shadow: 0 10px 24px -14px rgba(10,26,51,.65);
}
.btn-primary:hover{ background: var(--navy-700); border-color: var(--navy-700); transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(10,26,51,.7); }
.btn-primary:active{ transform: translateY(0); }
.btn-ghost{ background: transparent; color: var(--navy-800); border-color: rgba(10,26,51,.28); }
.btn-ghost:hover{ background: var(--navy-800); color:#fff; border-color: var(--navy-800); transform: translateY(-2px); }
.btn-gold{ background: var(--gold); color: var(--navy-950); border-color: var(--gold); }
.btn-gold:hover{ background: var(--gold-soft); border-color: var(--gold-soft); transform: translateY(-2px); }
.btn:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
.client-app .btn-primary, .client-app .btn-primary:hover{ box-shadow: 0 10px 24px -14px rgba(10,26,51,.65); }

/* ---------- Logo ---------- */
.logo{ font-family: var(--ff-head); font-weight: 700; letter-spacing: .04em; }
.logo-mark{
  width: 38px; height: 38px; border-radius: 4px;
  background: linear-gradient(145deg, var(--navy-800), var(--navy-950));
  color: var(--gold-soft); font-family: var(--ff-serif); font-weight: 600; font-size: .95rem; letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgba(217,194,154,.35);
}
.logo-text{ font-weight: 700; letter-spacing: .08em; font-size: .7em; }

/* ---------- Navigation ---------- */
.nav{ padding: 18px 0; }
.nav.scrolled{
  background: rgba(255,255,255,.97); backdrop-filter: saturate(160%) blur(12px);
  border-bottom-color: var(--border); box-shadow: 0 8px 24px -22px rgba(10,26,51,.45); padding: 12px 0;
}
.nav-links a{ font-size: .86rem; font-weight: 500; letter-spacing: .02em; }
.nav-links a::after{ height: 1px; background: var(--gold); }
.nav.scrolled .nav-links a{ color: var(--text-muted); }
.nav.scrolled .nav-links a:hover{ color: var(--navy-800); }
.nav.scrolled .nav-actions > .btn-ghost{ background: transparent; color: var(--navy-800); border-color: rgba(10,26,51,.28); }
.nav.scrolled .nav-actions > .btn-ghost:hover{ background: var(--navy-800); color:#fff; }
.nav-actions > .btn-ghost{ border-color: rgba(255,255,255,.45); }
.nav-actions .btn-sm{ padding: 9px 18px; }
@media (max-width: 880px){
  .nav-links{ background: #fff; box-shadow: -30px 0 60px rgba(10,26,51,.18); }
  .nav-links a{ font-size: 1rem; }
}

/* ---------- En-tête des pages intérieures (photo + voile bleu nuit) ---------- */
.hero{ background: linear-gradient(180deg, var(--navy-950), var(--navy-800)); }
.page-hero{ padding: 180px 0 110px; }
.page-hero h1{ color:#fff; font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.page-hero .eyebrow, .hero .eyebrow{ background:none; border:none; color: var(--gold-soft); }
.page-hero .eyebrow .dot, .hero .eyebrow .dot{ background: var(--gold-soft); box-shadow:none; }
.hero p, .page-hero p.lead{ color: rgba(255,255,255,.78); }

/* ---------- Sections, cartes, listes ---------- */
section{ padding: 120px 0; }
.section-head{ margin-bottom: 64px; }
.section-head h2{ font-size: clamp(2rem, 3.6vw, 2.8rem); }
.section-head p{ font-size: 1.02rem; }
.card{ border-radius: var(--radius); box-shadow: var(--shadow-soft); border-color: var(--border); }
.card::before{ background: none; }
.card::after{
  content:""; position:absolute; left:0; top:0; height:2px; width:0; background: var(--gold);
  transition: width .5s var(--ease);
}
.card:hover{ transform: translateY(-6px); border-color: var(--border-strong); box-shadow: var(--shadow-glow); }
.card:hover::after{ width:100%; }
.card-icon{
  width:48px; height:48px; border-radius: 8px; background: var(--steel-100); color: var(--navy-700);
  border: none; font-size: 1.15rem;
}
.check-list li i{ color: var(--gold); }
.step{ border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.wizard-card{ border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.info-card, .table-card{ border-radius: var(--radius); box-shadow: var(--shadow-soft); }

/* ---------- Bandeau d'appel à l'action ---------- */
.cta-banner{
  border-radius: 14px;
  background: linear-gradient(120deg, var(--navy-950), var(--navy-800));
  border: 1px solid rgba(217,194,154,.18);
}
.cta-banner::before{ display:none; }
.cta-banner .eyebrow{ background:none; border:none; color: var(--gold-soft); }
.cta-banner .eyebrow .dot{ background: var(--gold-soft); box-shadow:none; }
.cta-banner h2{ font-family: var(--ff-serif); }

/* ---------- Pied de page bleu nuit ---------- */
footer{ background: var(--navy-950); border-top: 1px solid rgba(217,194,154,.15); color: rgba(255,255,255,.72); padding: 84px 0 34px; }
footer .logo{ color:#fff; }
footer p{ color: rgba(255,255,255,.62); }
.footer-grid h5{ color: var(--gold-soft); font-size: .72rem; letter-spacing: .2em; }
.footer-grid a{ color: rgba(255,255,255,.72); }
.footer-grid a:hover{ color:#fff; }
.footer-grid li{ color: rgba(255,255,255,.72); font-size:.9rem; }
.footer-grid .row-link{ color: var(--gold-soft); }
.social-row a{ background: transparent; border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.8); }
.social-row a:hover{ background: var(--gold); color: var(--navy-950); border-color: var(--gold); }
.footer-bottom{ border-top-color: rgba(255,255,255,.1); color: rgba(255,255,255,.5); }
.legal-disclaimer{ color: rgba(255,255,255,.42); }

/* ---------- Formulaires ---------- */
.field label{ font-weight: 500; color: var(--text); font-size: .82rem; }
.field input, .field select, .field textarea{ border-radius: 8px; border-color: var(--border-strong); }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--navy-700); box-shadow: 0 0 0 4px rgba(22,51,95,.12);
}
.check-row input{ accent-color: var(--navy-700); }

/* ---------- Pages de connexion / inscription ---------- */
.auth-wrap{
  background:
    linear-gradient(180deg, rgba(244,246,249,.94), rgba(244,246,249,.97)),
    url("https://images.unsplash.com/photo-1621831337128-35676ca30868?auto=format&fit=crop&w=2000&q=60") center / cover fixed;
}
.auth-card{ border-radius: 14px; box-shadow: 0 30px 70px -40px rgba(10,26,51,.45); border-color: var(--border); }
.auth-card h1{ font-family: var(--ff-serif); }

/* ---------- Espace client ---------- */
.sidebar{ background: #fff; border-right-color: var(--border); }
.side-nav a{ border-radius: 8px; font-weight: 500; }
.side-nav a.active{ background: var(--steel-100); color: var(--navy-800); border-color: transparent; box-shadow: inset 3px 0 0 var(--gold); }
.balance-card{
  background:
    radial-gradient(ellipse 120% 90% at 100% 0%, rgba(30,66,119,.55), transparent 60%),
    linear-gradient(140deg, var(--navy-800), var(--navy-950) 70%);
  border: 1px solid rgba(217,194,154,.2);
}
.balance-card::before{ display:none; }
.balance-card .lbl{ color: var(--gold-soft); letter-spacing: .16em; }
.balance-amount{ font-family: var(--ff-serif); font-weight: 500; }
.qa-btn{ border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.qa-btn i{ color: var(--navy-700); }
.dash-top h1{ font-family: var(--ff-serif); font-weight: 500; }
.stepper .st-item.active .st-circle{ background: var(--navy-800); box-shadow: 0 0 0 4px rgba(22,51,95,.12); }
.btn-fund{ border-radius: 6px; }
.btn-fund-deposit{ background: linear-gradient(135deg, var(--navy-800), var(--navy-600)); box-shadow: 0 12px 26px -14px rgba(10,26,51,.7); }
.btn-fund-deposit:hover{ box-shadow: 0 18px 32px -16px rgba(10,26,51,.75); }
.btn-fund-withdraw{ color: var(--navy-800); border-color: rgba(10,26,51,.3); }
.funds-icon, .deposit-shield, .track-icon{ background: linear-gradient(135deg, var(--navy-800), var(--navy-600)); }
.dash-topbar{ background: rgba(255,255,255,.97); }

/* ---------- Suivi public ---------- */
.track-card{ border-radius: 14px; box-shadow: 0 30px 70px -44px rgba(10,26,51,.45); }

/* ---------- Animations discrètes ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Bouton principal de la barre : doré sur la photo, bleu nuit une fois défilé */
.nav:not(.scrolled) .nav-actions > .btn-primary{ background: var(--gold); border-color: var(--gold); color: var(--navy-950); box-shadow:none; }
.nav:not(.scrolled) .nav-actions > .btn-primary:hover{ background: var(--gold-soft); border-color: var(--gold-soft); }
.footer-grid li{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.footer-grid li i{ color: var(--gold-soft); }

/* En-tête des pages connexion / inscription sur téléphone : logo et bouton compacts */
@media (max-width:560px){
  .nav .logo-mark{ width:32px; height:32px; font-size:.82rem; }
  .nav .logo-text{ letter-spacing:.04em; }
  .nav-actions .btn-sm{ padding: 8px 12px; font-size: .78rem; }
}

/* Un élément marqué « hidden » reste toujours masqué, même si sa classe
   (ex. .btn en inline-flex) définit un autre affichage. */
[hidden]{ display: none !important; }

/* Pages sans menu (connexion / inscription) : le bouton de l'en-tête reste
   visible sur téléphone (ailleurs, il est repris dans le menu mobile). */
@media (max-width: 880px){
  .nav .container > .logo + .nav-actions > .btn-ghost{ display:inline-flex; }
}

/* Opération rejetée ou annulée : montant barré et grisé (aucun mouvement réel) */
.tx-amount.tx-void{ color: var(--text-dim); text-decoration: line-through; }

/* Espace client sur téléphone : chaque opération devient une carte compacte
   (libellé + montant, puis date + statut) au lieu de colonnes coupées à droite. */
@media (max-width: 640px){
  .client-app #tx-section table, .client-app #funds-table{ min-width: 0; width: 100%; }
  .client-app #tx-section thead, .client-app #funds-table thead{ display: none; }
  .client-app #tx-body tr, .client-app #funds-body tr{
    display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center;
    padding: 14px 0; border-bottom: 1px solid var(--border);
  }
  .client-app #tx-body td, .client-app #funds-body td{ padding: 0 !important; border: none !important; text-align: left !important; }
  .client-app #tx-body td:nth-child(1){ grid-column: 1; grid-row: 1; font-weight: 600; }
  .client-app #tx-body td:nth-child(4){ grid-column: 2; grid-row: 1; text-align: right !important; white-space: nowrap; }
  .client-app #tx-body td:nth-child(2){ grid-column: 1; grid-row: 2; font-size: .82rem; color: var(--text-dim); }
  .client-app #tx-body td:nth-child(3){ grid-column: 2; grid-row: 2; justify-self: end; }
  .client-app #funds-body td:nth-child(1){ grid-column: 1; grid-row: 1; }
  .client-app #funds-body td:nth-child(5){ grid-column: 2; grid-row: 1; text-align: right !important; white-space: nowrap; }
  .client-app #funds-body td:nth-child(2){ grid-column: 1 / -1; grid-row: 2; font-size: .74rem !important; color: var(--text-dim); }
  .client-app #funds-body td:nth-child(3){ grid-column: 1; grid-row: 3; font-size: .82rem; color: var(--text-dim); }
  .client-app #funds-body td:nth-child(4){ grid-column: 2; grid-row: 3; justify-self: end; }
}