/* ─── DJOLIBA LANDING PAGE STYLES ─── */

:root {
    --djoliba-deep: #0B2545;
    --djoliba-ocean: #1A5276;
    --djoliba-sahel: #27AE60;
    --djoliba-emerald: #10B981;
    --djoliba-earth: #E67E22;
    --djoliba-bg: #F8F9FA;
    --djoliba-text: #2C3E50;
    --djoliba-muted: #64748B;
}

/* Polices & Typographies */
.font-serif-accent {
    font-family: 'Playfair Display', Georgia, serif;
}

/* ─── Dark Sections (Hero & CTA) Typography ─── */
section.bg-\[\#0B2545\],
section[class*="bg-[#0B2545]"],
.landing-dark-section {
    color: #F8FAFC !important;
}

section.bg-\[\#0B2545\] h1,
section.bg-\[\#0B2545\] h2,
section.bg-\[\#0B2545\] h3,
section.bg-\[\#0B2545\] h4,
section.bg-\[\#0B2545\] .text-white,
section[class*="bg-[#0B2545]"] h1,
section[class*="bg-[#0B2545]"] h2,
section[class*="bg-[#0B2545]"] h3,
section[class*="bg-[#0B2545]"] h4,
section[class*="bg-[#0B2545]"] .text-white {
    color: #FFFFFF !important;
}

section.bg-\[\#0B2545\] p.text-slate-300,
section.bg-\[\#0B2545\] span.text-slate-300,
section[class*="bg-[#0B2545]"] p.text-slate-300,
section[class*="bg-[#0B2545]"] .text-slate-300 {
    color: #CBD5E1 !important;
}

section.bg-\[\#0B2545\] .text-slate-400,
section[class*="bg-[#0B2545]"] .text-slate-400 {
    color: #94A3B8 !important;
}

/* Arrière-plans & Gradients dynamiques */
.landing-bg-pattern {
    background-color: var(--djoliba-bg);
    background-image: radial-gradient(rgba(11, 37, 69, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
}

.landing-glow-blue {
    background: radial-gradient(circle, rgba(26, 82, 118, 0.12) 0%, rgba(248, 249, 250, 0) 70%);
}

.landing-glow-green {
    background: radial-gradient(circle, rgba(39, 174, 96, 0.12) 0%, rgba(248, 249, 250, 0) 70%);
}

.landing-glow-earth {
    background: radial-gradient(circle, rgba(230, 126, 34, 0.10) 0%, rgba(248, 249, 250, 0) 70%);
}

/* Header dynamique lors du défilement */
.landing-header {
    transition: background-color 0.3s ease, -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.landing-header.scrolled {
    background-color: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 4px 20px -2px rgba(11, 37, 69, 0.05);
}

/* Effets de carte et de verre (Glassmorphism) */
.landing-card {
    background: #FFFFFF;
    border: 1px solid rgba(226, 232, 240, 0.9);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.landing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(11, 37, 69, 0.08), 0 8px 10px -6px rgba(11, 37, 69, 0.04);
    border-color: rgba(26, 82, 118, 0.25);
}

/* Animation de pulsation du badge Bêta */
@keyframes betaPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.7;
    }
}

.animate-beta-pulse {
    animation: betaPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Animation d'apparition au scroll (Reveal on scroll) */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Délais en cascade pour les cartes */
.reveal-delay-100 { transition-delay: 100ms; }
.reveal-delay-200 { transition-delay: 200ms; }
.reveal-delay-300 { transition-delay: 300ms; }
.reveal-delay-400 { transition-delay: 400ms; }