/* ════════════════════════════════════════════════════
   AFRICA NEW TALENT — Shared Theme + Dark Mode
   All pages import this file
════════════════════════════════════════════════════ */

/* ── LIGHT VARS ─────────────────────────────────── */
:root {
  --bg-primary:   #f5faf6;
  --bg-section:   #ffffff;
  --bg-section2:  #f5faf6;
  --text-primary: #0d1f12;
  --text-secondary: #1a3322;
  --text-muted:   rgba(13,31,18,.55);
  --text-faint:   rgba(13,31,18,.35);
  --border:       rgba(13,31,18,.07);
  --border-green: rgba(13,127,63,.2);
  --border-gold:  rgba(201,151,26,.25);
  --card-bg:      #ffffff;
  --card-shadow:  0 2px 16px rgba(13,31,18,.05);
  --glass-bg:     rgba(255,255,255,.7);
  --glass-green:  rgba(53,187,110,.06);
  --glass-green-b:rgba(53,187,110,.18);
  --stat-bg:      #ffffff;
  --stat-sep:     rgba(13,127,63,.12);
  --stat-mini-bg: #f0faf3;
  --nav-scrolled: rgba(245,250,246,.94);
  --nav-shadow:   0 1px 0 rgba(13,127,63,.12), 0 4px 24px rgba(13,31,18,.06);
  --input-bg:     #f8fcf9;
  --input-border: rgba(13,31,18,.1);
  --marquee-text: rgba(13,31,18,.3);
  --hero-bg:      linear-gradient(160deg, #f0faf3 0%, #e8f5ee 40%, #f5faf6 100%);
  --hero-radial:  rgba(53,187,110,.14);
  --orb1:         rgba(53,187,110,.12);
  --orb2:         rgba(201,151,26,.08);
  --grid-stroke:  #0d7f3f;
  --scroll-bar:   #f0faf3;
  --scroll-thumb: rgba(13,127,63,.3);
  --cursor-color: #0d7f3f;
  --cursor-ring:  rgba(13,127,63,.4);
  --cursor-mode:  multiply;
  --mobile-menu:  #ffffff;
  --quote-color:  rgba(13,127,63,.1);
  --big-bg-text:  rgba(13,31,18,.025);
  --footer-bg:    #0d1f12;
  --footer-border:rgba(53,187,110,.12);
  --glow-green:   0 0 40px rgba(13,127,63,.18), 0 0 80px rgba(13,127,63,.07);
  --tag-bg:       rgba(13,127,63,.08);
  --tag-border:   rgba(13,127,63,.2);
  --tag-color:    #0a6433;
  --wa-btn-shadow:0 4px 20px rgba(37,211,102,.35);
  --process-num:  #b0e8c5;
}

/* ── DARK VARS ──────────────────────────────────── */
[data-theme="dark"] {
  --bg-primary:   #06120a;
  --bg-section:   #06120a;
  --bg-section2:  #0a1c10;
  --text-primary: #e8f5ee;
  --text-secondary:#c8e8d0;
  --text-muted:   rgba(232,245,238,.6);
  --text-faint:   rgba(232,245,238,.4);
  --border:       rgba(255,255,255,.07);
  --border-green: rgba(53,187,110,.2);
  --border-gold:  rgba(248,200,50,.2);
  --card-bg:      rgba(255,255,255,.04);
  --card-shadow:  none;
  --glass-bg:     rgba(255,255,255,.04);
  --glass-green:  rgba(53,187,110,.06);
  --glass-green-b:rgba(53,187,110,.15);
  --stat-bg:      transparent;
  --stat-sep:     rgba(255,255,255,.06);
  --stat-mini-bg: rgba(255,255,255,.05);
  --nav-scrolled: rgba(6,18,10,.92);
  --nav-shadow:   0 1px 0 rgba(53,187,110,.12), 0 4px 24px rgba(0,0,0,.3);
  --input-bg:     rgba(255,255,255,.04);
  --input-border: rgba(255,255,255,.1);
  --marquee-text: rgba(255,255,255,.25);
  --hero-bg:      #06120a;
  --hero-radial:  rgba(53,187,110,.15);
  --orb1:         rgba(53,187,110,.12);
  --orb2:         rgba(248,200,50,.08);
  --grid-stroke:  #35bb6e;
  --scroll-bar:   #06120a;
  --scroll-thumb: rgba(53,187,110,.4);
  --cursor-color: #35bb6e;
  --cursor-ring:  rgba(53,187,110,.5);
  --cursor-mode:  difference;
  --mobile-menu:  rgba(6,18,10,.97);
  --quote-color:  rgba(53,187,110,.12);
  --big-bg-text:  rgba(255,255,255,.015);
  --footer-bg:    #031207;
  --footer-border:rgba(53,187,110,.1);
  --glow-green:   0 0 40px rgba(53,187,110,.25), 0 0 80px rgba(53,187,110,.1);
  --tag-bg:       rgba(53,187,110,.1);
  --tag-border:   rgba(53,187,110,.25);
  --tag-color:    #74d49d;
  --wa-btn-shadow:0 4px 24px rgba(37,211,102,.4);
  --process-num:  #0a6433;
}

/* ── BASE ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }

body {
  font-family: 'Cabinet Grotesk', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  cursor: none;
  transition: background .4s, color .4s;
}

body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: .25; pointer-events: none; z-index: 0;
}

/* ── CURSOR ───────────────────────────────────── */
#cursor {
  position: fixed; width: 10px; height: 10px;
  background: var(--cursor-color);
  border-radius: 50%; pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%); transition: transform .1s;
  mix-blend-mode: var(--cursor-mode);
}
#cursor-ring {
  position: fixed; width: 36px; height: 36px;
  border: 1.5px solid var(--cursor-ring);
  border-radius: 50%; pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%); transition: all .18s ease;
}
body:has(a:hover) #cursor-ring,
body:has(button:hover) #cursor-ring { width: 52px; height: 52px; border-color: var(--cursor-color); }

/* ── NAVBAR ───────────────────────────────────── */
#navbar { transition: all .4s cubic-bezier(.16,1,.3,1); }
#navbar.scrolled {
  background: var(--nav-scrolled) !important;
  backdrop-filter: blur(20px);
  box-shadow: var(--nav-shadow);
}
.nav-logo-text { color: var(--text-primary); }
.nav-link-item { color: var(--text-muted); }
.nav-link-item:hover { color: var(--text-primary); }
.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 1.5px; background: #0d7f3f;
  transform: scaleX(0); transition: transform .3s cubic-bezier(.16,1,.3,1);
}
[data-theme="dark"] .nav-link::after { background: #35bb6e; }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }

/* ── MOBILE MENU ──────────────────────────────── */
#mobile-menu {
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.16,1,.3,1);
  background: var(--mobile-menu) !important;
  border-left: 1px solid var(--border);
}
#mobile-menu.open { transform: translateX(0); }
.mobile-link { color: var(--text-primary); }
.mobile-link:hover { color: #35bb6e; }

/* ── DARK TOGGLE BTN ─────────────────────────── */
#theme-toggle {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--glass-bg);
  border: 1px solid var(--border-green);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .3s;
  color: var(--text-primary);
}
#theme-toggle:hover { background: var(--glass-green); }
.icon-sun, .icon-moon { width: 18px; height: 18px; }
[data-theme="dark"] .icon-sun { display: none; }
[data-theme="light"] .icon-moon, :root:not([data-theme]) .icon-moon { display: none; }

/* ── SECTIONS ────────────────────────────────── */
.section-white { background: var(--bg-section); }
.section-tinted { background: var(--bg-section2); }
.section-dark-always { background: var(--footer-bg) !important; }

/* ── CARDS ───────────────────────────────────── */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow);
  transition: all .4s cubic-bezier(.16,1,.3,1);
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--border-green) !important;
  box-shadow: 0 16px 48px rgba(13,31,18,.1) !important;
}
[data-theme="dark"] .card:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,.3) !important;
}
.card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(13,127,63,.06), transparent);
  opacity: 0; transition: opacity .4s;
}
[data-theme="dark"] .card::after {
  background: linear-gradient(135deg, rgba(53,187,110,.08), transparent);
}
.card:hover::after { opacity: 1; }

/* ── TAG PILL ────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--tag-bg);
  border: 1px solid var(--tag-border);
  color: var(--tag-color);
  border-radius: 100px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 12px;
}

/* ── GRADIENT TEXT ───────────────────────────── */
.text-gradient {
  background: linear-gradient(135deg, #35bb6e 0%, #f8c832 60%, #35bb6e 100%);
  background-size: 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradShift 4s ease infinite;
}
[data-theme="light"] .text-gradient,
:root:not([data-theme]) .text-gradient {
  background: linear-gradient(135deg, #0d7f3f 0%, #189f52 40%, #c9971a 80%, #0d7f3f 100%);
  background-size: 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── GLASS ───────────────────────────────────── */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-green);
}
.glass-green {
  background: var(--glass-green);
  border: 1px solid var(--glass-green-b);
}

/* ── GLOW ────────────────────────────────────── */
.glow-green { box-shadow: var(--glow-green); }

/* ── FORM FIELDS ─────────────────────────────── */
.form-field {
  background: var(--input-bg);
  border: 1.5px solid var(--input-border);
  color: var(--text-primary);
  transition: all .3s;
  width: 100%;
  border-radius: 12px;
  padding: 11px 16px;
  font-size: 14px;
  font-family: inherit;
}
.form-field:focus {
  outline: none;
  border-color: rgba(13,127,63,.5);
  background: var(--card-bg);
  box-shadow: 0 0 0 3px rgba(13,127,63,.1);
}
[data-theme="dark"] .form-field:focus {
  border-color: rgba(53,187,110,.6);
  background: rgba(53,187,110,.06);
}
.form-field::placeholder { color: var(--text-faint); }
.form-field option { background: var(--card-bg); color: var(--text-primary); }

/* ── BUTTONS ─────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg,#35bb6e,#0a6433);
  color: white;
  position: relative; overflow: hidden;
  transition: all .3s cubic-bezier(.16,1,.3,1);
}
.btn-primary::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,.18);
  transform: translateX(-110%) skewX(-15deg);
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.btn-primary:hover::before { transform: translateX(110%) skewX(-15deg); }
.btn-primary:hover { transform: translateY(-2px); }

.btn-outline {
  background: var(--glass-green);
  border: 1.5px solid var(--border-green);
  color: var(--text-primary);
  position: relative; overflow: hidden;
  transition: all .3s cubic-bezier(.16,1,.3,1);
}
.btn-outline:hover { transform: translateY(-2px); border-color: #35bb6e; }

/* ── REVEAL ANIMATIONS ───────────────────────── */
.reveal {
  opacity: 0; transform: translateY(36px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal.left  { transform: translateX(-40px); }
.reveal.right { transform: translateX(40px);  }
.reveal.scale { transform: scale(.94);        }
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }
.reveal-delay-5 { transition-delay: .5s; }

/* ── MARQUEE ─────────────────────────────────── */
.marquee-track { display: flex; width: max-content; animation: marquee 28s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
.marquee-text-col { color: var(--marquee-text); }
.marquee-band {
  border-top: 1px solid var(--border-green);
  border-bottom: 1px solid var(--border-green);
  background: var(--glass-green);
}

/* ── PLAYER CARDS ───────────────────────────── */
.player-card { transition: all .4s cubic-bezier(.16,1,.3,1); }
.player-card:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 20px 60px rgba(13,31,18,.14); }
[data-theme="dark"] .player-card:hover { box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.player-card .overlay { transition: opacity .4s; }
.player-card:hover .overlay { opacity: 1 !important; }
.player-card img { transition: transform .6s cubic-bezier(.16,1,.3,1); }
.player-card:hover img { transform: scale(1.07); }

/* ── ICON WRAP ───────────────────────────────── */
.icon-wrap { transition: all .4s cubic-bezier(.16,1,.3,1); }
.card:hover .icon-wrap, .service-card:hover .icon-wrap { transform: scale(1.1) rotate(-5deg); }

/* ── SERVICE CARD ────────────────────────────── */
.service-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow);
  transition: all .4s cubic-bezier(.16,1,.3,1);
  position: relative; overflow: hidden;
}
.service-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--glass-green), transparent);
  opacity: 0; transition: opacity .4s;
}
.service-card:hover { transform: translateY(-6px); border-color: var(--border-green) !important; box-shadow: 0 16px 48px rgba(13,31,18,.1) !important; }
[data-theme="dark"] .service-card:hover { box-shadow: 0 16px 48px rgba(0,0,0,.3) !important; }
.service-card:hover::after { opacity: 1; }

/* ── TESTIMONIAL ─────────────────────────────── */
.quote-mark { font-family: 'Bebas Neue'; font-size: 7rem; line-height: .6; color: var(--quote-color); }

/* ── HERO BIG NUMBERS ───────────────────────── */
.hero-num {
  font-family: 'Bebas Neue';
  font-size: clamp(5rem,14vw,10rem);
  line-height: .9; color: transparent;
  -webkit-text-stroke: 1px var(--border-green);
  position: absolute; user-select: none;
}

/* ── PROCESS NUM ─────────────────────────────── */
.process-num { color: var(--process-num); }

/* ── STAT BOX ────────────────────────────────── */
.stat-box { background: var(--stat-bg); }
.stat-mini { background: var(--stat-mini-bg); }
.stat-sep-grid { background: var(--stat-sep); }

/* ── CONTACT INFO ITEM ────────────────────────── */
.info-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow);
}

/* ── STEP INDICATORS (Rejoindre) ─────────────── */
.step-dot-active { background: #35bb6e; }
.step-dot-inactive { background: var(--border-green); }
.step-label-active { color: #35bb6e; }
.step-label-inactive { color: var(--text-muted); }
.step-line-fill { background: linear-gradient(90deg, rgba(13,127,63,.5), rgba(13,127,63,.1)); }
[data-theme="dark"] .step-line-fill { background: linear-gradient(90deg, rgba(53,187,110,.5), rgba(53,187,110,.1)); }

/* ── WHATSAPP FLOATING BUTTON ─────────────────── */
#wa-float {
  position: fixed; bottom: 28px; right: 28px; z-index: 999;
  width: 58px; height: 58px;
  background: #25d366;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  box-shadow: var(--wa-btn-shadow);
  transition: all .3s cubic-bezier(.16,1,.3,1);
  animation: waPulse 3s ease-in-out infinite;
}
#wa-float:hover { transform: scale(1.12) translateY(-3px); box-shadow: 0 8px 32px rgba(37,211,102,.55); }
#wa-float svg { width: 30px; height: 30px; fill: white; }
#wa-tooltip {
  position: absolute; right: 68px; top: 50%;
  transform: translateY(-50%);
  background: var(--footer-bg);
  color: white;
  font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 8px;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
  font-family: 'Cabinet Grotesk', sans-serif;
}
#wa-tooltip::after {
  content: ''; position: absolute; top: 50%; right: -5px;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: var(--footer-bg);
  border-right: none;
}
#wa-float:hover #wa-tooltip { opacity: 1; }

/* ── SCROLLBAR ───────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--scroll-bar); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 2px; }

/* ── KEYFRAMES ───────────────────────────────── */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes slideUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:none} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes ping2 { 0%{transform:scale(1);opacity:.8} 100%{transform:scale(2.5);opacity:0} }
@keyframes gradShift { 0%,100%{background-position:0%} 50%{background-position:100%} }
@keyframes scrollDrop { 0%{transform:translateY(-100%)} 100%{transform:translateY(200%)} }
@keyframes lineGrow { from{width:0} to{width:100%} }
@keyframes waPulse {
  0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.35),0 0 0 0 rgba(37,211,102,.25)}
  50%{box-shadow:0 4px 20px rgba(37,211,102,.35),0 0 0 10px rgba(37,211,102,0)}
}

/* ── MOBILE ──────────────────────────────────── */
@media (max-width: 768px) {
  body { cursor: auto; }
  #cursor, #cursor-ring { display: none; }
  .hero-num { display: none; }
  #wa-float { width: 50px; height: 50px; bottom: 20px; right: 20px; }
  #wa-float svg { width: 26px; height: 26px; }
}