@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

:root {
    --afo-blue: #1E3A8A;
    --afo-gold: #F59E0B;
    --afo-light: #F3F4F6;
}
.text-indigo-500{color: #1E3A8A !important;}

html, body {
    font-family: 'Inter', sans-serif;
    margin:0;
    padding:0;
}

body {
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.nav-blur {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(30,58,138,0.06);
}

.gradient-text {
    background: linear-gradient(135deg,var(--afo-blue), #4f46e5);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.glass-card {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(8px);
    border:1px solid rgba(30,58,138,0.06);
}

.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 60px -20px rgba(30,58,138,0.25);
}

.btn-primary {
    background: linear-gradient(90deg,var(--afo-blue), #3b82f6);
    color:#fff;
}

.btn-ghost {
    border:1px solid rgba(0,0,0,0.06);
    background:#fff;
}

.pulse-dot { animation: pulse 1.6s infinite; }
.respire-wrapper {
    display: inline-block;
    animation: breath 2.8s ease-in-out infinite;
}

@keyframes breath {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1); }
}
.hover-tilt {
    transition: transform 0.6s ease, box-shadow 0.6s ease;
    transform-origin: center;
}

/* Effet au survol */
.hover-tilt:hover {
    transform: scale(1.06) rotateX(8deg) rotateY(8deg);

}


/* Couleurs Afojusi */
.btn-animated {
    background: linear-gradient(90deg,var(--afo-blue), #3b82f6) !important;
    color:#fff;
    transition: all 0.3s ease;
}

/* Actif toggle mensuel/annuel */
.toggle-active {
    background: #1E3A8A !important;
    color: #FFFFFF !important;
}

.toggle-inactive {
    background: #F3F4F6;
    color: #1E3A8A;
}

/* Bouton S'inscrire */
.btn-animated.signup-btn {
    background: linear-gradient(to right, #1E3A8A, #F59E0B);
}

.btn-animated.signup-btn:hover {
    box-shadow: 0 0 15px rgba(30, 58, 138, 0.5);
}

@keyframes pulse {
    0% { transform:scale(1); }
    50% { transform:scale(1.12); }
    100% { transform:scale(1); }
}

@media (min-width:1024px) {
    .hero-title { font-size: clamp(36px, 6vw, 72px); }
}


/* =====================================================
   🔥 MODE SOMBRE — AFOJUSI DARK MODE
   -----------------------------------------------------
   - Fond blanc → bleu Afojusi (#1E3A8A)
   - Textes + éléments inversés
   - Rien ne remplace ton style, tout s’ajoute proprement
====================================================== */

body.dark-mode {
    background-color: var(--afo-blue) !important;
    color: white !important;
}

/* Headers, navbars, menus */
.dark-mode .nav-blur,
.dark-mode nav,
.dark-mode header,
.dark-mode .topbar {
    background-color: var(--afo-blue) !important;
    color: white !important;
    border-color: rgba(255,255,255,0.3) !important;
}
.dark-mode .demo, .dark-mode .contact{
    background-color: var(--afo-blue) !important;
    color: white !important;
}

/* Cartes, sections, panels */
.dark-mode .glass-card,
.dark-mode .card,
.dark-mode .section,
.dark-mode .panel,
.dark-mode .pricing-card {
    background-color: var(--afo-blue) !important;
    color: white !important;
    border: 1px solid white !important;
}

/* Textes */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6,
.dark-mode p,
.dark-mode span,
.dark-mode a,
.dark-mode li,
.dark-mode label {
    color: white !important;
}

/* Boutons */
.dark-mode button,
.dark-mode .btn {
    background-color: #fff !important;
    color: var(--afo-blue) !important;
    border-color: #fff !important;
}

/* Inputs, selects */
.dark-mode input,
.dark-mode textarea,
.dark-mode select {
    background-color: white !important;
    color: var(--afo-blue) !important;
    border: 1px solid white !important;
}