/* 
 * DJEUMATRANS — CORE DESIGN SYSTEM V6.0 
 * Responsive & Mobile-First B2B UI
 */

:root {
    --navy-deep: #0A1F44;
    --navy-light: #162C5A;
    --orange-safety: #FF6B35;
    --white-pure: #FFFFFF;
    --slate-bg: #F8FAFC;
    --green-wa: #22C55E;
    --transition-standard: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 1. BASES & TYPO */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap');
body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }

/* 2. NAVIGATION & LINKS */
.nav-link { position: relative; transition: var(--transition-standard); }
.nav-link::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--orange-safety); transition: var(--transition-standard); }
.nav-link:hover { color: var(--orange-safety); }
.nav-link:hover::after { width: 100%; }

.mobile-nav-link { font-size: 1.5rem; font-weight: 900; text-transform: uppercase; tracking-widest: 0.1em; transition: var(--transition-standard); }
.mobile-nav-link:hover { color: var(--orange-safety); padding-left: 10px; }

/* 3. COMPOSANTS UI SOUVERAINS */
.badge-custom { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--orange-safety); padding: 0.75rem 1.5rem; border-radius: 99px; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.2em; }

.h2-custom { font-weight: 900; tracking-tighter: -0.05em; line-height: 1.1; font-size: 2.5rem; text-transform: uppercase; color: var(--navy-deep); }
@media (min-width: 768px) { .h2-custom { font-size: 4rem; } }

.section-tag { color: var(--orange-safety); font-weight: 900; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5em; display: block; margin-bottom: 1.5rem; }

/* 4. CARTES ET INDICATEURS */
.card-unit { background: white; padding: 3rem; border-radius: 2.5rem; transition: var(--transition-standard); border-bottom: 8px solid transparent; height: 100%; }
.card-unit:hover { transform: translateY(-12px); box-shadow: 0 40px 80px rgba(10, 31, 68, 0.1); border-bottom-color: var(--orange-safety); }
.card-unit.active { background: var(--navy-deep); color: white; box-shadow: 0 30px 60px rgba(10, 31, 68, 0.4); }
.card-unit .icon-box { width: 4rem; height: 4rem; background: var(--slate-bg); color: var(--orange-safety); display: flex; align-items: center; justify-content: center; border-radius: 1rem; margin-bottom: 2rem; transition: var(--transition-standard); }
.card-unit.active .icon-box { background: rgba(255,255,255,0.1); }

.icon-indicator { width: 3.5rem; height: 3.5rem; border-radius: 1.25rem; background: var(--slate-bg); color: var(--orange-safety); display: flex; align-items: center; justify-content: center; transition: var(--transition-standard); }
.group:hover .icon-indicator { background: var(--orange-safety); color: white; transform: rotate(-10deg); }

.step-num { width: 4.5rem; height: 4.5rem; background: var(--slate-bg); border: 4px solid #E2E8F0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.5rem; margin: 0 auto 2rem; transition: var(--transition-standard); }
.step-num.dark { background: var(--navy-deep); color: white; border-color: var(--navy-light); }
.group:hover .step-num { border-color: var(--orange-safety); transform: scale(1.1); }

/* 5. FORMULAIRE B2B */
.input-b2b { width: 100%; background: #F8FAFC; border: 2px solid #E2E8F0; padding: 1.25rem; border-radius: 1.25rem; font-weight: 700; outline: none; transition: var(--transition-standard); }
.input-b2b:focus { border-color: var(--orange-safety); background: white; }
.label-b2b { font-[10px] font-black uppercase text-slate-400 tracking-widest mb-2 block; }

.btn-submit-b2b { width: 100%; background: var(--orange-safety); color: white; padding: 1.5rem; border-radius: 1.25rem; font-weight: 900; text-transform: uppercase; font-size: 11px; letter-spacing: 0.15em; transition: var(--transition-standard); box-shadow: 0 10px 25px rgba(255, 107, 53, 0.3); }
.btn-submit-b2b:hover { background: var(--navy-deep); transform: translateY(-3px); }

/* 6. MISC */
.glass-btn { background: rgba(255,255,255,0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); padding: 1.25rem 2.5rem; border-radius: 1rem; font-weight: 900; text-transform: uppercase; font-size: 10px; tracking-widest: 0.1em; transition: var(--transition-standard); }
.shadow-3xl { box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.25); }

@keyframes bounce-slow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
.animate-bounce-slow { animation: bounce-slow 3s infinite ease-in-out; }