/* ============================================================
   PAYSEN — Feuille de styles personnalisée
   Complément au framework Tailwind CSS
   ============================================================ */

/* ── Variables */
:root {
  --navy: #040D50;
  --orange: #FF9F2F;
}

/* ── Reset */
* {
  box-sizing: border-box;
}

html {
  font-family: 'Lato', system-ui, sans-serif;
}

/* ── Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #040D50; border-radius: 3px; }
.dark ::-webkit-scrollbar-track { background: #020830; }
.dark ::-webkit-scrollbar-thumb { background: #FF9F2F; }

/* ── Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #FF9F2F 0%, #FFD080 50%, #FF9F2F 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-blue {
  background: linear-gradient(135deg, #040D50 0%, #1B4FD8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Hero background */
.hero-bg {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(27, 79, 216, 0.3) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(255, 159, 47, 0.15) 0%, transparent 50%),
    linear-gradient(135deg, #040D50 0%, #071570 50%, #040D50 100%);
}

.dark .hero-bg {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(27, 79, 216, 0.4) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(255, 159, 47, 0.15) 0%, transparent 50%),
    linear-gradient(135deg, #020830 0%, #050e5c 50%, #020830 100%);
}

/* ── Glassmorphism */
.glass {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.glass-light {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(4, 13, 80, 0.08);
}

.dark .glass-light {
  background: rgba(7, 21, 112, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── Glow */
.glow-orange { box-shadow: 0 0 40px rgba(255, 159, 47, 0.25); }
.glow-blue   { box-shadow: 0 0 40px rgba(27, 79, 216, 0.25); }

/* ── Gradient border */
.border-gradient {
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #FF9F2F, #1B4FD8) border-box;
  border: 2px solid transparent;
}

.dark .border-gradient {
  background:
    linear-gradient(#0b1060, #0b1060) padding-box,
    linear-gradient(135deg, #FF9F2F, #1B4FD8) border-box;
}

/* ── Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

/* ── Dashboard mockup */
.dash-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px;
}

.dash-bar {
  background: linear-gradient(to top, #1B4FD8, #60A5FA);
  border-radius: 4px 4px 0 0;
}

.dash-line {
  background: linear-gradient(90deg, transparent, #FF9F2F, transparent);
  height: 2px;
}

/* ── Navigation au scroll */
.nav-scrolled {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px);
  box-shadow: 0 2px 20px rgba(4, 13, 80, 0.1);
}

.dark .nav-scrolled {
  background: rgba(4, 13, 80, 0.95) !important;
}

/* Boutons lang / dark visibles sur fond blanc après scroll */
.nav-scrolled #lang-toggle,
.nav-scrolled #dark-toggle {
  border-color: rgba(4, 13, 80, 0.25) !important;
  color: rgba(4, 13, 80, 0.7) !important;
}

.nav-scrolled #lang-toggle:hover,
.nav-scrolled #dark-toggle:hover {
  border-color: #FF9F2F !important;
  color: #FF9F2F !important;
}

/* En dark mode : on garde les couleurs blanches */
.dark .nav-scrolled #lang-toggle,
.dark .nav-scrolled #dark-toggle {
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Boutons hamburgeur mobile */
.nav-scrolled #mobile-menu-btn span {
  background-color: #040D50;
}

.dark .nav-scrolled #mobile-menu-btn span {
  background-color: white;
}

/* ── Boutons */
.btn-primary {
  background: linear-gradient(135deg, #FF9F2F 0%, #e8891a 100%);
  color: #040D50;
  font-weight: 700;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 159, 47, 0.4);
}

.btn-outline {
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: white;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #FF9F2F;
  transform: translateY(-2px);
}

/* ── Service cards */
.service-card {
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-8px);
}

.service-card:hover .service-icon {
  transform: scale(1.1);
}

.service-icon {
  transition: transform 0.3s ease;
}

/* ── Stats */
.stat-num {
  font-variant-numeric: tabular-nums;
}

/* ── Hero image Ken Burns (zoom lent) */
@keyframes kenBurns {
  0%   { transform: scale(1)    translateX(0)    translateY(0); }
  50%  { transform: scale(1.06) translateX(-1%)  translateY(-1%); }
  100% { transform: scale(1)    translateX(0)    translateY(0); }
}

.hero-zoom {
  animation: kenBurns 12s ease-in-out infinite;
  will-change: transform;
}

/* ── Floating notification cards (hero) */
@keyframes floatCard1 {
  0%, 100% { transform: translateY(0px) rotate(-1deg); }
  50%       { transform: translateY(-10px) rotate(0deg); }
}

@keyframes floatCard2 {
  0%, 100% { transform: translateY(0px) rotate(1deg); }
  50%       { transform: translateY(-8px) rotate(0deg); }
}

@keyframes floatCard3 {
  0%, 100% { transform: translateY(0px) rotate(-0.5deg); }
  50%       { transform: translateY(-12px) rotate(0.5deg); }
}