/* SmartPay Website — Styles partagés */
/* Palette exacte issue de l'application Flutter */
:root {
  --primary:       #116BA9;
  --primary-dark:  #0D1B2A;
  --primary-light: #4DA6E8;
  --accent:        #1DB37E;
  --accent-dark:   #17956A;
  --surface:       #F2F4F8;
  --ink:           #0D1321;
  --ink-muted:     #6B7280;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
* { font-family: 'Inter', system-ui, sans-serif; }

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Nav active link */
.nav-link.active { color: var(--primary); font-weight: 600; }

/* Card hover lift */
.card-hover { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(17,107,169,0.14); }

/* Details/FAQ  */
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }
details > div { overflow: hidden; }
details[open] > div { animation: faq-open 0.2s ease; }
@keyframes faq-open { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }

/* Section label badge */
.section-label { letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.72rem; font-weight: 700; }

/* Stat number */
.stat-num { font-variant-numeric: tabular-nums; }

/* Gradient text */
.text-gradient {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-accent {
  background: linear-gradient(135deg, var(--accent) 0%, #34d399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Phone mockup */
.phone-shell {
  width: 260px; height: 530px;
  background: #0D1B2A;
  border-radius: 40px;
  padding: 8px;
  box-shadow: 0 32px 80px rgba(13,27,42,0.45), 0 8px 20px rgba(13,27,42,0.2);
}
.phone-screen {
  width: 100%; height: 100%;
  border-radius: 34px;
  overflow: hidden;
  background: #F2F4F8;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 12px;
}
.phone-screen img { width:100%; height:100%; object-fit:cover; }

/* Float animation for hero badges */
@keyframes float-y {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}
.float-badge { animation: float-y 3.5s ease-in-out infinite; }
.float-badge-slow { animation: float-y 4.5s ease-in-out infinite; animation-delay: -1.5s; }

/* Pulse ring — NFC active badge */
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(29,179,126,0.45); }
  70%  { box-shadow: 0 0 0 10px rgba(29,179,126,0); }
  100% { box-shadow: 0 0 0 0 rgba(29,179,126,0); }
}
.pulse-ring { animation: pulse-ring 2.2s ease-out infinite; }

/* Staggered grid reveal */
.stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.48s ease, transform 0.48s ease;
}
.stagger.in > *:nth-child(1) { opacity:1; transform:none; transition-delay:0ms; }
.stagger.in > *:nth-child(2) { opacity:1; transform:none; transition-delay:80ms; }
.stagger.in > *:nth-child(3) { opacity:1; transform:none; transition-delay:160ms; }
.stagger.in > *:nth-child(4) { opacity:1; transform:none; transition-delay:240ms; }
.stagger.in > *:nth-child(5) { opacity:1; transform:none; transition-delay:320ms; }
.stagger.in > *:nth-child(6) { opacity:1; transform:none; transition-delay:400ms; }
.stagger.in > *:nth-child(7) { opacity:1; transform:none; transition-delay:480ms; }
.stagger.in > *:nth-child(8) { opacity:1; transform:none; transition-delay:560ms; }
.stagger.in > *:nth-child(9) { opacity:1; transform:none; transition-delay:640ms; }

/* Animated progress bar */
.bar-fill {
  height: 100%;
  border-radius: 9999px;
  width: 0;
  transition: width 1.4s cubic-bezier(0.25, 1, 0.5, 1) 0.3s;
}
.bar-fill.visible { width: var(--tw, 100%); }

/* Counter number animation */
.count-up { font-variant-numeric: tabular-nums; }

/* ── n geometric pattern — sections claires uniquement ──────────────── */
section {
  background-image: url('../images/bg-pattern.svg');
  background-repeat: repeat;
  background-size: 120px 120px;
}
/* Pas de pattern sur les sections sombres ni le footer */
section[class*="bg-primary-dark"],
footer {
  background-image: none;
}

/* Scrollbar subtil */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c1c8d4; border-radius: 3px; }