/* =====================================================
   BAT'INNOV - Design Moderne 2025
   ===================================================== */

/* ---- Variables Design Moderne ---- */
:root {
  --btp-blue: #0F2952;
  --btp-blue-light: #1E4080;
  --btp-orange: #F47B20;
  --btp-orange-light: #FF9A4A;
  --btp-gold: #E8A020;
  --btp-dark: #0A0F1E;
  --btp-gray: #F0F4F8;
  --glass: rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.15);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.15);
  --shadow-orange: 0 8px 32px rgba(244,123,32,0.35);
  --radius-xl: 20px;
  --radius-2xl: 32px;
}

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

body {
  font-family: 'Inter', sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
  letter-spacing: -0.02em;
}

/* ---- Navbar Moderne ---- */
nav.bg-white.shadow-md {
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(244,123,32,0.12) !important;
  box-shadow: 0 4px 24px rgba(15,41,82,0.08) !important;
}

/* ---- Hero Section ---- */
section.relative.min-h-screen,
section.relative.bg-gradient-to-br.min-h-screen {
  background: linear-gradient(135deg, #0A1628 0%, #0F2952 40%, #1a3d6b 70%, #0F2952 100%) !important;
  position: relative;
  overflow: hidden;
}

section.relative.min-h-screen::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 70vw;
  height: 70vw;
  background: radial-gradient(circle, rgba(244,123,32,0.15) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

section.relative.min-h-screen::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, rgba(30,64,128,0.3) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ---- Boutons Modernes ---- */
.bg-btp-orange, .bg-primary-orange {
  background: linear-gradient(135deg, #F47B20, #FF9A4A) !important;
  box-shadow: var(--shadow-orange) !important;
  border: none !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.bg-btp-orange:hover, .bg-primary-orange:hover {
  background: linear-gradient(135deg, #e06010, #F47B20) !important;
  box-shadow: 0 12px 40px rgba(244,123,32,0.5) !important;
  transform: translateY(-2px) scale(1.02) !important;
}

/* ---- Cartes de Services ---- */
.bg-white.rounded-xl, .bg-white.rounded-2xl {
  border: 1px solid rgba(15,41,82,0.06) !important;
  box-shadow: 0 4px 24px rgba(15,41,82,0.06) !important;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.bg-white.rounded-xl:hover, .bg-white.rounded-2xl:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 60px rgba(15,41,82,0.14) !important;
  border-color: rgba(244,123,32,0.2) !important;
}

/* ---- Sections Alternées ---- */
.bg-btp-gray {
  background: linear-gradient(180deg, #F0F4F8 0%, #E8EFF7 100%) !important;
}

.bg-btp-blue, .bg-primary-blue {
  background: linear-gradient(135deg, #0A1628 0%, #0F2952 60%, #1E4080 100%) !important;
}

/* ---- Titres de Section ---- */
h2.text-3xl, h2.text-4xl {
  position: relative;
}

h2.text-3xl::after, h2.text-4xl::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #F47B20, #FF9A4A);
  border-radius: 4px;
  margin: 12px auto 0;
}

.text-left h2.text-3xl::after,
.text-left h2.text-4xl::after {
  margin-left: 0;
}

/* ---- Stats/Chiffres ---- */
.text-btp-orange, .text-primary-orange {
  background: linear-gradient(135deg, #F47B20, #FF9A4A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Icônes dans les cartes ---- */
.bg-btp-orange.rounded-full,
.bg-btp-orange.rounded-xl,
.bg-btp-orange.rounded-lg {
  background: linear-gradient(135deg, #F47B20, #FF9A4A) !important;
  box-shadow: 0 8px 20px rgba(244,123,32,0.3) !important;
}

/* ---- Input / Formulaires ---- */
input[type="text"], input[type="email"], input[type="tel"], 
input[type="number"], textarea, select {
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

input:focus, textarea:focus, select:focus {
  border-color: #F47B20 !important;
  box-shadow: 0 0 0 4px rgba(244,123,32,0.12) !important;
  outline: none !important;
}

/* ---- Footer ---- */
footer {
  background: linear-gradient(135deg, #060D1A 0%, #0A1628 40%, #0F2952 100%) !important;
  position: relative;
  overflow: hidden;
}

footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #F47B20, #FF9A4A, #F47B20, transparent);
}

/* ---- Liens de Navigation ---- */
nav a.text-gray-700:hover {
  color: #F47B20 !important;
  background: rgba(244,123,32,0.08) !important;
  border-radius: 8px;
}

/* ---- Animations ---- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Tags / Badges ---- */
.bg-blue-100, .bg-orange-100 {
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}

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

/* ---- Loading Skeleton ---- */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

/* ---- Glassmorphism cards (hero section) ---- */
.glass-card {
  background: var(--glass) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-xl) !important;
}

/* ---- CTA Section ---- */
section.bg-btp-orange {
  background: linear-gradient(135deg, #E8660A 0%, #F47B20 50%, #FF9A4A 100%) !important;
  position: relative;
  overflow: hidden;
}

section.bg-btp-orange::before {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 500px; height: 500px;
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
  pointer-events: none;
}

/* ---- Progress bars ---- */
.progress-bar {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #F47B20, #FF9A4A);
  box-shadow: 0 2px 8px rgba(244,123,32,0.4);
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #F0F4F8; }
::-webkit-scrollbar-thumb { 
  background: linear-gradient(180deg, #F47B20, #0F2952);
  border-radius: 999px;
}

/* ---- Selection ---- */
::selection {
  background: rgba(244,123,32,0.25);
  color: #0F2952;
}

/* ---- Responsive improvements ---- */
@media (max-width: 768px) {
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.6rem !important; }
  
  .bg-white.rounded-xl:hover {
    transform: none !important;
  }
}

/* ---- Dividers ---- */
.section-divider {
  width: 100%;
  height: 80px;
  background: inherit;
  clip-path: ellipse(55% 100% at 50% 0%);
}