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

:root {
    --bg-main: #030712;
    --bg-card: #080e21;
    --border-color: rgba(59, 130, 246, 0.15);
    --border-hover: rgba(59, 130, 246, 0.6);
    --primary-blue: #3b82f6;
    --accent-glow: #60a5fa;
    --text-main: #f3f4f6;
    --text-muted: #9ca3af;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    scroll-behavior: smooth;
    padding-top: 90px; /* Compense la suppression du header : réserve la place du menu flottant */
}

/* NAVBAR AVEC EFFET GLASSMORPHISME AVANCÉ */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 6%;
    background: rgba(3, 7, 18, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo-container img {
    height: 40px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.4));
    transition: transform 0.3s ease;
}

.logo-container img:hover {
    transform: scale(1.05);
}

nav ul {
    display: flex;
    list-style: none;
    gap: 30px;
}

nav ul li a {
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
}

nav ul li a:hover, nav ul li a.active {
    color: #ffffff;
}

nav ul li a.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 2px;
    box-shadow: 0 0 10px #3b82f6;
}

/* HERO SECTION ULTRA WOUAH AVEC LOGO GÉANT */
.hero-mega {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    padding: 90px 6%;
    position: relative;
    min-height: 85vh;
    overflow: hidden;
}

.hero-mesh-bg {
    position: absolute;
    top: -20%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.2) 0%, rgba(124, 58, 237, 0.1) 40%, transparent 70%);
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
    animation: meshPulse 8s ease-in-out infinite alternate;
}

@keyframes meshPulse {
    0% { transform: scale(1) translate(0, 0); opacity: 0.6; }
    100% { transform: scale(1.2) translate(-30px, 30px); opacity: 1; }
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-badge-glow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #60a5fa;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.15);
}

.hero-mega h1 {
    font-size: 3.8rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 25px;
    letter-spacing: -1px;
}

.gradient-text-animated {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientFlow 5s ease infinite;
}

@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.hero-mega p {
    color: var(--text-muted);
    font-size: 1.12rem;
    line-height: 1.6;
    margin-bottom: 35px;
    max-width: 540px;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    margin-bottom: 45px;
}

.btn-glow-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
    padding: 15px 30px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-glow-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(37, 99, 235, 0.6);
}

.btn-glass-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: white;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    padding: 15px 30px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.btn-glass-secondary:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
    transform: translateY(-3px);
}

/* MÉTRIQUES HERO */
.hero-metrics-row {
    display: flex;
    gap: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 25px;
}

.metric-card .metric-num {
    display: block;
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(90deg, #60a5fa, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.metric-card .metric-lbl {
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* CONTENEUR DU LOGO GÉANT AVEC EFFETS HOLOGRAPHIQUES */
.hero-giant-logo-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 480px;
    z-index: 2;
}

.logo-backlight-glow {
    position: absolute;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.6) 0%, rgba(124, 58, 237, 0.2) 60%, transparent 80%);
    border-radius: 50%;
    filter: blur(40px);
    animation: logoGlowPulse 4s ease-in-out infinite alternate;
}

@keyframes logoGlowPulse {
    0% { transform: scale(0.9); opacity: 0.7; }
    100% { transform: scale(1.3); opacity: 1; }
}

.cyber-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(59, 130, 246, 0.3);
    pointer-events: none;
}

.orbit-1 {
    width: 380px;
    height: 380px;
    animation: rotateOrbit 25s linear infinite;
}

.orbit-2 {
    width: 480px;
    height: 480px;
    border-color: rgba(139, 92, 246, 0.2);
    animation: rotateOrbitReverse 35s linear infinite;
}

@keyframes rotateOrbit {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes rotateOrbitReverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

.giant-logo-wrapper {
    position: relative;
    z-index: 3;
    padding: 30px;
    background: rgba(8, 14, 33, 0.6);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 35px;
    backdrop-filter: blur(20px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), inset 0 0 30px rgba(59, 130, 246, 0.2);
}

.floating-giant-logo {
    max-width: 280px;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 30px rgba(37, 99, 235, 0.8));
    animation: logoFloatAndTilt 6s ease-in-out infinite;
}

@keyframes logoFloatAndTilt {
    0% { transform: translateY(0px) rotate(0deg) scale(1); }
    50% { transform: translateY(-15px) rotate(2deg) scale(1.04); filter: drop-shadow(0 30px 45px rgba(96, 165, 250, 0.9)); }
    100% { transform: translateY(0px) rotate(0deg) scale(1); }
}

/* SECTION SOLUTIONS CYBER CARDS */
.solutions-section-advanced {
    padding: 80px 6%;
}

.solutions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.solution-card-cyber {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 35px 30px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.solution-card-cyber::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(800px circle at var(--mouse-x, 0) var(--mouse-y, 0), rgba(59, 130, 246, 0.08), transparent 40%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.solution-card-cyber:hover {
    transform: translateY(-8px);
    border-color: var(--border-hover);
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.2);
}

.solution-icon {
    font-size: 2.2rem;
    color: #60a5fa;
    margin-bottom: 22px;
    background: rgba(59, 130, 246, 0.1);
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.solution-card-cyber h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.solution-card-cyber p {
    color: var(--text-muted);
    font-size: 0.94rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

.card-link-arrow {
    color: #60a5fa;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.3s ease;
}

.solution-card-cyber:hover .card-link-arrow {
    gap: 14px;
}

/* PRODUITS GRID */
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    padding: 0 6%;
}

.product-card-cyber {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    overflow: hidden;
    transition: transform 0.4s ease, border-color 0.4s ease;
}

.product-card-cyber:hover {
    transform: translateY(-8px);
    border-color: var(--border-hover);
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.2);
}

.product-card-cyber:hover img {
    transform: scale(1.08);
}

.product-body {
    padding: 30px;
}

.product-tag-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 15px;
}

.product-icon-box {
    width: 45px;
    height: 45px;
    background: rgba(59, 130, 246, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
    font-size: 1.25rem;
}

.product-body h3 {
    font-size: 1.25rem;
    font-weight: 700;
}

.product-category {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.product-body p {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 15px 0 25px 0;
}

.product-link {
    color: #60a5fa;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

/* STATS BAR CYBER */
.stats-container-cyber {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: linear-gradient(135deg, rgba(8, 14, 33, 0.9) 0%, rgba(3, 7, 18, 0.95) 100%);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 45px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.stat-item h3 {
    font-size: 2.8rem;
    font-weight: 900;
    background: linear-gradient(90deg, #60a5fa, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.stat-item p {
    color: var(--text-muted);
    font-size: 0.92rem;
}

/* FOOTER CTA CYBER */
.cta-banner-cyber {
    background: linear-gradient(180deg, var(--bg-main) 0%, #060e24 100%);
    border-top: 1px solid var(--border-color);
    text-align: center;
    padding: 100px 20px;
    position: relative;
    overflow: hidden;
}

.cta-inner-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    filter: blur(50px);
}

.cta-banner-cyber h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 15px;
}

.cta-banner-cyber p {
    color: var(--text-muted);
    margin-bottom: 35px;
    font-size: 1.1rem;
}

/* RESPONSIVE DESIGN */
@media (max-width: 1024px) {
    .hero-mega {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 50px;
    }
    .hero-content {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .hero-mega p {
        max-width: 100%;
    }
    .hero-buttons {
        justify-content: center;
    }
    .hero-metrics-row {
        justify-content: center;
    }
    .solutions-grid, .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .stats-container-cyber {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .solutions-grid, .products-grid, .stats-container-cyber {
        grid-template-columns: 1fr;
    }
    .hero-mega h1 {
        font-size: 2.6rem;
    }
    nav ul {
        display: none;
    }
}
/* DESIGN DU FOOTER AVANCÉ */
footer {
    background: linear-gradient(180deg, #030712 0%, #010308 100%);
    border-top: 1px solid rgba(59, 130, 246, 0.2);
    padding: 70px 6% 30px 6%;
    position: relative;
    z-index: 10;
    color: var(--text-muted);
}

.footer-container {
    display: grid;
    grid-template-columns: 1.4fr 1.6fr 1.2fr;
    gap: 40px;
    margin-bottom: 50px;
}

.footer-logo {
    height: 38px;
    width: auto;
    object-fit: contain;
    margin-bottom: 18px;
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.4));
}

.brand-col p {
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 20px;
    color: var(--text-muted);
}

.footer-socials {
    display: flex;
    gap: 12px;
}

.social-icon {
    width: 38px;
    height: 38px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background: #3b82f6;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
}

.footer-col h4 {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
    position: relative;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 30px;
    height: 2px;
    background: #3b82f6;
    border-radius: 2px;
}

/* Grille de liens sur 2 colonnes pour la navigation */
.footer-links-grid {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 15px;
}

.footer-links-grid li a, .contact-list li a, .contact-list li span {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-links-grid li a:hover {
    color: #60a5fa;
    padding-left: 4px;
}

.contact-list {
    list-style: none;
    padding: 0;
}

.contact-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 0.9rem;
}

.contact-list li i {
    color: #60a5fa;
    font-size: 1rem;
    width: 18px;
    text-align: center;
}

.contact-list li a:hover {
    color: #60a5fa;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.footer-legal {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-legal a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-legal a:hover {
    color: #fff;
}

.separator {
    color: rgba(255, 255, 255, 0.2);
}

/* BOUTON WHATSAPP FLOTTANT (STICKY ANIMÉ) */
.whatsapp-floating-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
    z-index: 9999;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: whatsappPulse 2.5s infinite;
}

.whatsapp-floating-btn:hover {
    transform: scale(1.12) rotate(8deg);
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.6);
}

/* Bulle d'aide au survol */
.whatsapp-tooltip {
    position: absolute;
    right: 75px;
    background: #0f172a;
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    border: 1px solid rgba(37, 211, 102, 0.3);
    opacity: 0;
    pointer-events: none;
    transform: translateX(10px);
    transition: all 0.3s ease;
}

.whatsapp-floating-btn:hover .whatsapp-tooltip {
    opacity: 1;
    transform: translateX(0);
}

@keyframes whatsappPulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* RESPONSIVE DESIGN DU FOOTER */
@media (max-width: 900px) {
    .footer-container {
        grid-template-columns: 1fr;
        gap: 35px;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    .footer-legal {
        justify-content: center;
    }
}
/* BANDEAU R&D TICKER */
.rd-ticker-bar {
    background: linear-gradient(90deg, #0f172a, #1e293b, #0f172a);
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    color: #cbd5e1;
    padding: 10px 20px;
    font-size: 0.88rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    z-index: 5;
}

.ticker-content {
    display: inline-block;
    animation: tickerScroll 25s linear infinite;
}

.ticker-separator {
    color: #3b82f6;
    margin: 0 20px;
}

@keyframes tickerScroll {
    0% { transform: translateX(20%); }
    100% { transform: translateX(-20%); }
}

/* SECTION HERO */
.hero-section {
    padding: 100px 6% 60px 6%;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    padding: 6px 16px;
    border-radius: 20px;
    color: #60a5fa;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 25px;
}

.hero-section h1 {
    font-size: 2.8rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 20px;
}

.hero-section p {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 35px;
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* APERÇU DES PRODUITS */
.products-preview-section {
    padding: 80px 6%;
    background: rgba(2, 6, 23, 0.5);
}

.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px auto;
}

.section-header h2 {
    font-size: 2.2rem;
    color: #fff;
    font-weight: 700;
    margin-bottom: 12px;
}

.section-header p {
    color: var(--text-muted);
    font-size: 0.98rem;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.product-card {
    background: #0b1329;
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 16px;
    padding: 35px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.product-card:hover {
    transform: translateY(-5px);
    border-color: #3b82f6;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.15);
}

.product-tag {
    display: inline-block;
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-card h3 {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 12px;
}

.product-card p {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.product-features {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
}

.product-features li {
    font-size: 0.88rem;
    color: #cbd5e1;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.product-features li i {
    color: #3b82f6;
    font-size: 0.8rem;
}

.product-link {
    color: #60a5fa;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s;
}

.product-link:hover {
    gap: 10px;
    color: #93c5fd;
}

/* SECTION PROCESSUS (3 ÉTAPES) */
.process-section {
    padding: 80px 6%;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.process-step {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 35px;
    position: relative;
    transition: transform 0.3s ease;
}

.process-step:hover {
    transform: translateY(-4px);
    border-color: rgba(59, 130, 246, 0.4);
}

.step-number {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientFlow 5s ease infinite;
    position: relative;
    z-index: 2;
}

.process-step h3 {
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 12px;
}

.process-step p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* SECTION CTA IMMERSIVE */
.cta-immersive-section {
    padding: 80px 6% 100px 6%;
}

.cta-content-box {
    background: linear-gradient(135deg, #0b1329 0%, #030712 100%);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 24px;
    padding: 60px 40px;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.cta-icon-glow {
    width: 60px;
    height: 60px;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
    font-size: 1.5rem;
    margin: 0 auto 20px auto;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.cta-content-box h2 {
    font-size: 2.1rem;
    color: #fff;
    font-weight: 700;
    margin-bottom: 15px;
}

.cta-content-box p {
    color: var(--text-muted);
    font-size: 1rem;
    max-width: 650px;
    margin: 0 auto 30px auto;
    line-height: 1.6;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* BOUTONS GENERIQUES STYLE */
.btn-primary {
    background: #3b82f6;
    color: #fff;
    padding: 12px 24px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.3s, transform 0.2s;
}

.btn-primary:hover {
    background: #2563eb;
    transform: translateY(-2px);
}

.btn-primary-glow {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #fff;
    padding: 14px 28px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 5px 20px rgba(59, 130, 246, 0.4);
    transition: all 0.3s;
}

.btn-primary-glow:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.6);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 12px 24px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    transition: all 0.3s;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-whatsapp-pulse {
    background: #25d366;
    color: #fff;
    padding: 14px 28px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 5px 20px rgba(37, 211, 102, 0.3);
    transition: all 0.3s;
}

.btn-whatsapp-pulse:hover {
    background: #20ba5a;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.5);
}

@media (max-width: 768px) {
    .hero-section h1 { font-size: 2.1rem; }
    .hero-actions, .cta-buttons { flex-direction: column; }
}
/* Cache le curseur de base sur tout le site (optionnel, selon votre préférence) */
/* body { cursor: none; } */

.cursor-dot,
.cursor-outline {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 99999;
    pointer-events: none;
}

.cursor-dot {
    width: 8px;
    height: 8px;
    background-color: #3b82f6;
}

.cursor-outline {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(59, 130, 246, 0.5);
    transition: width 0.2s, height 0.2s, background-color 0.2s;
}

/* Effet au survol des éléments interactifs */
.cursor-outline.cursor-hover {
    width: 60px;
    height: 60px;
    background-color: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
}
/* --- Adaptations Responsive pour Tablettes et Mobiles --- */

/* Pour les tablettes et petits écrans (max 1024px) */
@media (max-width: 1024px) {
    header {
        padding: 15px 20px;
    }
    
    /* Passage de la grille de contact en une seule colonne */
    section div[style*="display: grid"] {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
}

/* Pour les smartphones (max 768px) */
@media (max-width: 768px) {
    /* Masquer le menu classique et le sélecteur de langue si besoin, ou les empiler */
    header nav {
        display: none; /* À remplacer idéalement par un menu burger mobile */
    }

    /* Ajustement des espacements de la section contact pour les petits mobiles */
    section {
        padding: 20px 15px;
    }

    /* Formulaire : passage des champs nom/email l'un sous l'autre */
    form div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Réduction de la taille des grands titres sur mobile */
    .section-header h2 {
        font-size: 1.5rem;
    }
}
/* --- Animations de la page Contact --- */

/* État initial des éléments avant leur apparition */
.contact-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* État final lorsque l'élément entre dans l'écran */
.contact-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Effet de focus dynamique et moderne sur les inputs du formulaire */
.contact-form-container input:focus,
.contact-form-container textarea:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
    outline: none;
    transform: scale(1.01);
    transition: all 0.3s ease;
}

/* Animation subtile du bouton d'envoi au survol */
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.4);
    transition: all 0.3s ease;
}
/* =========================================================
   NAVORA — HERO SOLUTIONS
   Illustration technologique fournie par l'utilisateur
========================================================= */

.solutions-hero {
    position: relative;
    min-height: 720px;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 76% 48%,
            rgba(0, 100, 255, 0.16),
            transparent 34%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(139, 92, 246, 0.10),
            transparent 30%
        ),
        #020817;
}

/* Halo discret derrière l'illustration */
.solutions-hero::before {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(0, 119, 255, 0.18) 0%,
        rgba(91, 33, 182, 0.08) 38%,
        transparent 70%
    );
    filter: blur(35px);
    z-index: 0;
    pointer-events: none;
}

/* Illustration : cube + N + circuits + icônes */
.hero-visual {
    position: absolute;
    right: -35px;
    top: 50%;
    width: min(58vw, 780px);
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
}

.hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;

    filter:
        drop-shadow(0 0 28px rgba(0, 110, 255, 0.32))
        drop-shadow(0 0 70px rgba(70, 0, 255, 0.16));

    animation: navoraHeroFloat 7s ease-in-out infinite;
}

@keyframes navoraHeroFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Fondu à gauche pour intégrer naturellement l'image au texte */
.solutions-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            #020817 0%,
            rgba(2, 8, 23, 0.98) 18%,
            rgba(2, 8, 23, 0.84) 38%,
            rgba(2, 8, 23, 0.32) 58%,
            transparent 76%
        );
}

/* Contenu du hero */
.solutions-hero .hero-content {
    position: relative;
    z-index: 3;

    width: 48%;
    max-width: 650px;
    margin-left: 7%;
    padding: 80px 0;
}

.solutions-hero .hero-label {
    display: inline-block;
    margin-bottom: 22px;

    color: #60a5fa;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.solutions-hero .hero-content h1 {
    margin: 0 0 22px;

    color: #fff;
    font-size: clamp(2.5rem, 4.4vw, 4.5rem);
    font-weight: 850;
    line-height: 1.05;
    letter-spacing: -2px;
}

.solutions-hero .hero-content h1 span {
    background: linear-gradient(
        90deg,
        #00aaff 0%,
        #3b82f6 45%,
        #8b5cf6 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.solutions-hero .hero-content p {
    max-width: 570px;
    margin-bottom: 35px;

    color: #94a3b8;
    font-size: 1.05rem;
    line-height: 1.7;
}

.solutions-hero .hero-buttons {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* Responsive tablette */
@media (max-width: 1024px) {
    .solutions-hero {
        min-height: 780px;
    }

    .hero-visual {
        right: -80px;
        width: 65vw;
        opacity: 0.72;
    }

    .solutions-hero .hero-content {
        width: 58%;
        margin-left: 6%;
    }

    .solutions-hero::after {
        background:
            linear-gradient(
                90deg,
                #020817 0%,
                rgba(2, 8, 23, 0.97) 28%,
                rgba(2, 8, 23, 0.72) 55%,
                transparent 82%
            );
    }
}

/* Responsive mobile */
@media (max-width: 768px) {
    .solutions-hero {
        min-height: 820px;
        align-items: flex-start;
    }

    .solutions-hero .hero-content {
        width: 90%;
        max-width: 600px;
        margin: 0 auto;
        padding: 85px 0 300px;
        text-align: center;
    }

    .solutions-hero .hero-content p {
        margin-left: auto;
        margin-right: auto;
        font-size: 0.98rem;
    }

    .solutions-hero .hero-buttons {
        justify-content: center;
    }

    .hero-visual {
        width: 105vw;
        max-width: none;
        right: -28vw;
        top: auto;
        bottom: -20px;
        transform: none;
        opacity: 0.62;
    }

    .solutions-hero::after {
        background:
            linear-gradient(
                180deg,
                #020817 0%,
                rgba(2, 8, 23, 0.82) 48%,
                rgba(2, 8, 23, 0.30) 72%,
                #020817 100%
            );
    }
}

@media (max-width: 520px) {
    .solutions-hero .hero-content h1 {
        font-size: 2.55rem;
        letter-spacing: -1.2px;
    }

    .solutions-hero .hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .solutions-hero .hero-buttons a {
        width: 100%;
    }

    .hero-visual {
        bottom: 0;
        right: -34vw;
        width: 120vw;
    }
}
/* Masquer les modales par défaut et gérer l'effet d'apparition */
.solution-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(5px);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

/* Classe active pour afficher la modale via JavaScript */
.solution-modal.active {
    display: flex;
}

.modal-content {
    background: #1e293b;
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 20px;
    padding: 40px;
    max-width: 600px;
    width: 90%;
    position: relative;
}
/* Animation d'apparition au défilement (Scroll Reveal) */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

/* Animation effet projecteur / lueur sur les cartes */
.interactive-card {
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.interactive-card:hover {
    transform: translateY(-8px);
    border-color: rgba(59, 130, 246, 0.6);
    box-shadow: 0 15px 30px -10px rgba(59, 130, 246, 0.3);
}

/* Animation d'apparition fluide des modales */
.solution-modal {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.solution-modal.active {
    opacity: 1;
    visibility: visible;
}

.solution-modal .modal-content {
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.solution-modal.active .modal-content {
    transform: scale(1) translateY(0);
}
/* =========================================================
   NAVORA — CUBE 3D + LOGO N
   100% HTML / CSS — AUCUNE IMAGE
========================================================= */

.cube-hero-wrapper {
    position: relative;
    width: 100%;
    min-height: 500px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: visible;
}


/* =========================
   CONTENEUR DU CUBE
========================= */

.cube-container {
    position: relative;

    width: 330px;
    height: 330px;

    perspective: 1200px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* Halo lumineux derrière */

.cube-container::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: 15px;
    top: 15px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 210, 255, 0.22) 0%,
            rgba(0, 110, 255, 0.16) 35%,
            rgba(140, 50, 255, 0.12) 55%,
            transparent 75%
        );

    filter: blur(35px);

    z-index: -2;
}


/* =========================
   CUBE
========================= */

.cube {
    position: absolute;

    width: 230px;
    height: 230px;

    left: 50%;
    top: 50%;

    margin-left: -115px;
    margin-top: -115px;

    transform-style: preserve-3d;

    transform:
        rotateX(-12deg)
        rotateY(-25deg);

    animation:
        navoraCubeFloat 7s ease-in-out infinite;
}


/* =========================
   FACES DU CUBE
========================= */

.cube-face {
    position: absolute;

    width: 230px;
    height: 230px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            145deg,
            rgba(12, 46, 91, 0.48),
            rgba(3, 12, 32, 0.72)
        );

    /*
       Même dégradé que le logo NAVORA
       cyan → bleu → violet
    */
    border: 2px solid transparent;

    background-clip: padding-box;

    box-shadow:
        inset 0 0 35px rgba(0, 170, 255, 0.10),
        0 0 20px rgba(0, 150, 255, 0.16);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);
}


/*
   Bordure lumineuse dégradée
*/

.cube-face::before {

    content: "";

    position: absolute;

    inset: -2px;

    border-radius: inherit;

    padding: 2px;

    background:
        linear-gradient(
            135deg,
            #62eaff 0%,
            #009dff 35%,
            #4f63ff 68%,
            #a855f7 100%
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    pointer-events: none;

    filter:
        drop-shadow(0 0 5px rgba(0, 220, 255, 0.45))
        drop-shadow(0 0 8px rgba(120, 60, 255, 0.25));
}


/* Lumière intérieure */

.cube-face::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(98, 234, 255, 0.10),
            transparent 40%,
            rgba(168, 85, 247, 0.12)
        );

    pointer-events: none;
}


/* =========================
   POSITION DES 6 FACES
========================= */

.cube-face.front {

    transform:
        translateZ(115px);
}

.cube-face.back {

    transform:
        rotateY(180deg)
        translateZ(115px);
}

.cube-face.right {

    transform:
        rotateY(90deg)
        translateZ(115px);
}

.cube-face.left {

    transform:
        rotateY(-90deg)
        translateZ(115px);
}

.cube-face.top {

    transform:
        rotateX(90deg)
        translateZ(115px);
}

.cube-face.bottom {

    transform:
        rotateX(-90deg)
        translateZ(115px);
}


/* =========================
   LOGO N
========================= */

.n-logo-wrapper {

    position: relative;

    width: 145px;
    height: 145px;

    display: flex;

    align-items: center;
    justify-content: center;

    z-index: 10;

    transform: translateZ(8px);

    filter:
        drop-shadow(
            0 0 8px
            rgba(98, 234, 255, 0.65)
        )
        drop-shadow(
            0 0 20px
            rgba(0, 157, 255, 0.45)
        )
        drop-shadow(
            0 0 28px
            rgba(168, 85, 247, 0.30)
        );
}


/* =========================
   BARRES DU N
========================= */

.n-bar {

    position: absolute;

    display: block;

    background:
        linear-gradient(
            135deg,
            #62eaff 0%,
            #009dff 35%,
            #4f63ff 70%,
            #a855f7 100%
        );

    border-radius: 30px;

    box-shadow:
        0 0 8px rgba(98, 234, 255, 0.65),
        0 0 18px rgba(0, 157, 255, 0.35),
        0 0 25px rgba(168, 85, 247, 0.25);
}


/* Diagonale */

.n-bar.diagonal {

    width: 125px;
    height: 30px;

    transform:
        rotate(45deg);
}


/* Barre verticale */

.n-bar.vertical {

    width: 30px;
    height: 100px;

    transform:
        translate(45px, -9px);
}


/* =========================
   PETITS PIXELS DU LOGO
========================= */

.dots-element {

    position: absolute;

    width: 26px;
    height: 26px;

    background-image:
        radial-gradient(
            circle,
            #39dfff 2px,
            transparent 2.7px
        );

    background-size: 7px 7px;

    filter:
        drop-shadow(
            0 0 5px
            rgba(57, 223, 255, 0.85)
        );

    z-index: 12;
}


.dots-element.top {

    top: 16px;
    right: 15px;

    transform:
        rotate(20deg);
}


.dots-element.bottom {

    bottom: 16px;
    left: 15px;

    transform:
        rotate(-20deg);
}


/* =========================
   LUMIÈRE SOUS LE CUBE
========================= */

.cube-container::after {

    content: "";

    position: absolute;

    width: 270px;
    height: 45px;

    left: 30px;
    bottom: 45px;

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            rgba(0, 220, 255, 0.50),
            rgba(79, 99, 255, 0.40),
            rgba(168, 85, 247, 0.45)
        );

    filter: blur(25px);

    transform:
        perspective(300px)
        rotateX(60deg);

    z-index: -1;

    animation:
        navoraGlow 4s ease-in-out infinite;
}


/* =========================
   ANIMATIONS
========================= */

@keyframes navoraCubeFloat {

    0%,
    100% {

        transform:
            rotateX(-12deg)
            rotateY(-25deg)
            translateY(0);
    }

    50% {

        transform:
            rotateX(-8deg)
            rotateY(-18deg)
            translateY(-12px);
    }
}


@keyframes navoraGlow {

    0%,
    100% {
        opacity: 0.55;
    }

    50% {
        opacity: 0.95;
    }
}


/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

    .cube-hero-wrapper {
        min-height: 400px;
    }

    .cube-container {
        transform: scale(0.85);
    }
}


@media (max-width: 500px) {

    .cube-hero-wrapper {
        min-height: 350px;
    }

    .cube-container {
        transform: scale(0.70);
    }
}
/* Variables Globales de Thème par Défaut (Cyberpunk Deep Blue) */
:root {
    --bg-main: #020617;
    --card-bg: rgba(15, 23, 42, 0.6);
    --border-color: rgba(96, 165, 250, 0.2);
    --text-main: #ffffff;
    --text-muted: #94a3b8;
    --accent-glow: #60a5fa;
}

/* Thème Sombre Ultra Sleek */
body.theme-ultra-dark {
    --bg-main: #000000;
    --card-bg: rgba(12, 12, 12, 0.85);
    --border-color: rgba(255, 255, 255, 0.1);
    --text-main: #f3f4f6;
    --text-muted: #9ca3af;
    --accent-glow: #38bdf8;
    background-color: #000000 !important;
}

/* Thème Clair Néon Futuriste */
body.theme-neon-light {
    --bg-main: #f8fafc;
    --card-bg: rgba(255, 255, 255, 0.9);
    --border-color: rgba(59, 130, 246, 0.3);
    --text-main: #0f172a;
    --text-muted: #475569;
    --accent-glow: #2563eb;
    background-color: #f8fafc !important;
}
body.theme-neon-light .solution-card-cyber, 
body.theme-neon-light .product-card-cyber, 
body.theme-neon-light .blog-card-cyber, 
body.theme-neon-light .tech-bar-card,
body.theme-neon-light .testimonial-card-glass {
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* =========================================================
   EXTENSION DU THÈME CLAIR — couvre l'ensemble du site
   (le HTML utilise beaucoup de couleurs codées en dur au lieu
   des variables CSS ; on les surcharge ici via des sélecteurs
   d'attribut ciblant les styles inline les plus fréquents).
========================================================= */

/* Structure générale : header (branding), footer, menus flottants */
body.theme-neon-light footer {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
    border-top-color: rgba(59, 130, 246, 0.15) !important;
}
/* Le menu flottant (desktop et mobile) reste toujours sombre, y compris en
   thème clair : le logo NAVORA est conçu pour un fond sombre, et un menu
   qui garde le même style dans les deux thèmes reste toujours parfaitement
   lisible, sans jamais se fondre dans un fond blanc. */

/* Textes codés en dur (blanc / gris clair) → texte sombre lisible sur fond clair */
body.theme-neon-light [style*="color: #fff"],
body.theme-neon-light [style*="color:#fff"],
body.theme-neon-light [style*="color: #ffffff"],
body.theme-neon-light [style*="color:#ffffff"] {
    color: #0f172a !important;
}
body.theme-neon-light [style*="color: #94a3b8"],
body.theme-neon-light [style*="color:#94a3b8"] {
    color: #475569 !important;
}
body.theme-neon-light [style*="color: #e2e8f0"] {
    color: #334155 !important;
}

/* Fonds de cartes/blocs codés en dur (bleu-nuit très sombre) → blanc/gris très clair */
body.theme-neon-light [style*="background: rgba(30, 41, 59"],
body.theme-neon-light [style*="background: rgba(15, 23, 42"],
body.theme-neon-light [style*="background: rgba(5, 9, 20"] {
    background: #ffffff !important;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06) !important;
}

/* Bordures bleutées : légèrement adoucies sur fond clair */
body.theme-neon-light [style*="border: 1px solid rgba(59, 130, 246"],
body.theme-neon-light [style*="border: 1px solid rgba(0, 102, 255"] {
    border-color: rgba(59, 130, 246, 0.25) !important;
}

/* Exception assumée : les grands bandeaux "hero" cinématiques (image/illustration
   + overlay sombre) restent sombres même en thème clair, comme sur de nombreux
   sites à dominante claire — leur texte reste donc blanc pour rester lisible. */
body.theme-neon-light .hero-mega [style*="color: #fff"],
body.theme-neon-light .hero-mega [style*="color: #ffffff"],
body.theme-neon-light .hero-mega [style*="color: #94a3b8"],
body.theme-neon-light .solutions-hero [style*="color: #fff"],
body.theme-neon-light .solutions-hero [style*="color: #ffffff"],
body.theme-neon-light .solutions-hero [style*="color: #94a3b8"],
body.theme-neon-light .hero-mega-enhanced [style*="color: #fff"],
body.theme-neon-light .hero-mega-enhanced [style*="color: #ffffff"],
body.theme-neon-light .hero-mega-enhanced [style*="color: #94a3b8"],
body.theme-neon-light .cube-hero-wrapper [style*="color: #fff"],
body.theme-neon-light .cube-hero-wrapper [style*="color: #ffffff"],
body.theme-neon-light .cube-hero-wrapper [style*="color: #94a3b8"] {
    color: #ffffff !important;
}

/* La page Carrières utilise un fond sombre en dur sur toute la section :
   on le bascule aussi en clair pour rester cohérent avec le reste du site. */
body.theme-neon-light .careers-section {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
}

/* Titres de section (h2 des .section-header) : définis en CSS pur (pas en
   inline), ils n'étaient pas couverts par les règles ci-dessus. */
body.theme-neon-light .section-header h2 {
    color: #0f172a !important;
}

/* Bloc CTA final ("Prêt à construire l'avenir ensemble ?") */
body.theme-neon-light .cta-content-box {
    background: #ffffff !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08) !important;
}
body.theme-neon-light .cta-content-box h2 {
    color: #0f172a !important;
}

/* Cartes "Notre méthodologie" (01/02/03) */
body.theme-neon-light .process-step {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.06) !important;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06) !important;
}
body.theme-neon-light .process-step h3 {
    color: #0f172a !important;
}

/* Titres des colonnes du footer ("Navigation", "Contact Direct"...) */
body.theme-neon-light .footer-col h4 {
    color: #0f172a !important;
}

/* Bouton secondaire "vitré" du hero (ex: "Lancer un projet") : conçu pour un
   fond sombre, il devient invisible sur fond clair. On l'adapte au thème. */
body.theme-neon-light .btn-glass-secondary {
    background: rgba(15, 23, 42, 0.04) !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.25) !important;
}
body.theme-neon-light .btn-glass-secondary:hover {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: #3b82f6 !important;
}
body.theme-neon-light .btn-secondary {
    background: rgba(15, 23, 42, 0.04) !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.25) !important;
}

/* Le titre du hero Solutions est en blanc codé en dur dans le CSS (pas en
   inline) : sur fond clair, il devient illisible. On le corrige aussi. */
body.theme-neon-light .solutions-hero .hero-content h1 {
    color: #0f172a !important;
}
body.theme-neon-light .solutions-hero .hero-content p {
    color: #475569 !important;
}

/* Widget d'heure : variante claire pour mieux s'intégrer sur fond blanc. */
body.theme-neon-light .sys-time-badge {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08), 0 0 15px rgba(59, 130, 246, 0.1) !important;
}
body.theme-neon-light .sys-time-city {
    color: #64748b !important;
}
body.theme-neon-light .sys-time-sep {
    background: rgba(100, 116, 139, 0.3) !important;
}

/* Pastilles de la section "Ce que l'on fait pour vous" : conçues en blanc
   translucide pour un fond sombre, elles étaient invisibles sur les cartes
   blanches du thème clair (fond quasi transparent + texte gris clair). */
body.theme-neon-light .tech-tags span {
    background: rgba(59, 130, 246, 0.08) !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
    color: #1d4ed8 !important;
}
body.theme-neon-light .tech-bar-card:hover .tech-tags span {
    border-color: rgba(59, 130, 246, 0.4) !important;
}

/* Bannières CTA en dégradé sombre codées en dur (Solutions, Produits, Projets,
   Carrières) : présentes sur presque toutes les pages secondaires, elles
   n'étaient pas couvertes par les règles ci-dessus (fond en linear-gradient,
   pas en background simple). */
body.theme-neon-light [style*="background: linear-gradient(135deg, rgba(15, 23, 42"],
body.theme-neon-light [style*="background: linear-gradient(135deg, rgba(30, 41, 59"] {
    background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08) !important;
}

/* Section "Nos Partenaires & Écosystème" : fond dédié jamais couvert. */
body.theme-neon-light .partners-section {
    background-color: #f8fafc !important;
    border-top-color: rgba(59, 130, 246, 0.15) !important;
}
body.theme-neon-light .partner-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06) !important;
}
body.theme-neon-light .partner-name {
    color: #334155 !important;
}

/* FILET DE SÉCURITÉ GLOBAL : tous les titres du site (h1 à h6) ainsi que
   les classes de titres codées en dur ailleurs (cartes produits, chatbot,
   alertes, terminal R&D...) passent en texte sombre lisible sur fond clair.
   Les bandeaux "hero" cinématiques restent exemptés (règle plus bas). */
body.theme-neon-light h1,
body.theme-neon-light h2,
body.theme-neon-light h3,
body.theme-neon-light h4,
body.theme-neon-light h5,
body.theme-neon-light h6,
body.theme-neon-light .card-title,
body.theme-neon-light .tech-title,
body.theme-neon-light .box-title,
body.theme-neon-light .process-title {
    color: #0f172a !important;
}
body.theme-neon-light .hero-mega h1,
body.theme-neon-light .hero-mega h2,
body.theme-neon-light .solutions-hero h1,
body.theme-neon-light .solutions-hero h2,
body.theme-neon-light .hero-mega-enhanced h1,
body.theme-neon-light .hero-mega-enhanced h2,
body.theme-neon-light .cube-hero-wrapper h1,
body.theme-neon-light .cube-hero-wrapper h2 {
    color: #ffffff !important;
}

/* Autres cartes/blocs à fond sombre codé en dur, utilisés sur les pages
   Solutions / Produits / Projets (hors des classes "-cyber" déjà couvertes). */
body.theme-neon-light .product-card,
body.theme-neon-light .solution-card,
body.theme-neon-light .process-card,
body.theme-neon-light .tech-stack-box {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06) !important;
}

/* Sélecteur de thèmes dynamique (pill) */
.theme-switcher-pill {
    position: fixed;
    top: 20px;
    right: 25px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(96, 165, 250, 0.3);
    backdrop-filter: blur(10px);
    padding: 5px;
    border-radius: 30px;
    display: flex;
    gap: 5px;
    z-index: 995;
}
.theme-btn {
    background: none;
    border: none;
    color: #94a3b8;
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.theme-btn.active, .theme-btn:hover {
    background: #3b82f6;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

/* Widget Heure Yaoundé */
.sys-time-badge {
    position: fixed;
    top: 90px;
    left: 25px;
    background: rgba(10, 14, 26, 0.9);
    border: 1px solid rgba(96, 165, 250, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 9px 18px;
    border-radius: 30px;
    z-index: 995;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(59, 130, 246, 0.15);
}
.sys-time-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px #22c55e;
    animation: sysTimePulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
}
.sys-time-city {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: 0.3px;
}
.sys-time-sep {
    width: 1px;
    height: 14px;
    background: rgba(148, 163, 184, 0.3);
}
.sys-time-clock {
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientFlow 5s ease infinite;
}
@keyframes sysTimePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

/* Galerie Témoignages Glassmorphism */
.testimonials-glass-carousel {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    min-height: 240px;
}
.testimonial-card-glass {
    position: absolute;
    top: 0; left: 0; width: 100%;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(96, 165, 250, 0.3);
    backdrop-filter: blur(12px);
    padding: 35px;
    border-radius: 20px;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.95) translateY(20px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.testimonial-card-glass.active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
}
.testimonial-rating {
    color: #f59e0b;
    margin-bottom: 15px;
    font-size: 14px;
}
.testimonial-text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-main);
    margin-bottom: 25px;
    font-style: italic;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}
.author-avatar {
    width: 45px; height: 45px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
}
.testimonial-author h4 {
    color: var(--text-main);
    font-size: 15px;
    margin: 0;
}
.testimonial-author span {
    color: var(--text-muted);
    font-size: 12px;
}
.carousel-dots-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}
.carousel-dots-nav .dot {
    width: 10px; height: 10px;
    background: rgba(148, 163, 184, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}
.carousel-dots-nav .dot.active {
    background: #3b82f6;
    width: 25px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.6);
}

/* Blog / Veille Technologique Cards */
.blog-card-cyber {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 30px;
    border-radius: 16px;
    transition: transform 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.blog-card-cyber:hover {
    border-color: #60a5fa;
    transform: translateY(-5px);
}
.blog-meta-badge {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-block;
    width: fit-content;
    margin-bottom: 15px;
}
.blog-card-cyber h3 {
    color: var(--text-main);
    font-size: 18px;
    margin-bottom: 12px;
    line-height: 1.4;
}
.blog-card-cyber p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
}
.blog-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
    font-size: 12px;
    color: var(--text-muted);
}
.blog-read-more {
    color: #60a5fa;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}
.blog-read-more:hover {
    color: #93c5fd;
}

/* Assistant Virtuel / Chatbot Flottant Styles */
.ai-chat-widget {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 9990;
}
.chat-toggle-btn {
    width: 60px; height: 60px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.5);
    transition: transform 0.3s ease;
}
.chat-toggle-btn:hover {
    transform: scale(1.08);
}
.chat-window-container {
    position: absolute;
    bottom: 75px;
    right: 0;
    width: 360px;
    height: 480px;
    background: #090e1a;
    border: 1px solid #3b82f6;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0) translateY(20px);
    transform-origin: bottom right;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.chat-window-container.active {
    transform: scale(1) translateY(0);
}
.chat-header {
    background: #1e293b;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(59, 130, 246, 0.3);
}
.chat-bot-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.bot-status-dot {
    width: 10px; height: 10px;
    background: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 8px #22c55e;
}
.chat-bot-info h4 {
    color: #fff;
    font-size: 14px;
    margin: 0;
}
.chat-bot-info span {
    color: #94a3b8;
    font-size: 10px;
}
#chat-close-btn {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 20px;
    cursor: pointer;
}
.chat-body {
    flex-grow: 1;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #020617;
}
.chat-msg {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.4;
}
.bot-msg {
    background: #1e293b;
    color: #e2e8f0;
    align-self: flex-start;
    border-bottom-left-radius: 2px;
}
.user-msg {
    background: #3b82f6;
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 2px;
}
.chat-input-area {
    padding: 12px;
    background: #090e1a;
    border-top: 1px solid #1e293b;
    display: flex;
    gap: 10px;
}
.chat-input-area input {
    flex-grow: 1;
    background: #020617;
    border: 1px solid #334155;
    padding: 8px 12px;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    outline: none;
}
.chat-input-area input:focus {
    border-color: #3b82f6;
}
.chat-input-area button {
    background: #3b82f6;
    border: none;
    color: #fff;
    width: 36px; height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.chat-input-area button:hover {
    background: #2563eb;
}

#neural-particles-canvas {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
}
.hero-mega { position: relative; overflow: hidden; }
.hero-content, .hero-giant-logo-container { position: relative; z-index: 2; }
@keyframes pulseGlow {
    0% { box-shadow: 0 0 15px rgba(96, 165, 250, 0.2); }
    50% { box-shadow: 0 0 30px rgba(96, 165, 250, 0.6); }
    100% { box-shadow: 0 0 15px rgba(96, 165, 250, 0.2); }
}
.pulse-glow { animation: pulseGlow 3s infinite ease-in-out; }
.reveal-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal-on-scroll.is-revealed { opacity: 1; transform: translateY(0); }
body { cursor: default; }
@media (pointer: fine) {
    a, button, input, .solution-card-cyber, .product-card-cyber, .blog-card-cyber { cursor: none !important; }
}
.custom-cursor { position: fixed; top: 0; left: 0; width: 8px; height: 8px; background-color: #60a5fa; border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: transform 0.1s ease; }
.custom-cursor-follower { position: fixed; top: 0; left: 0; width: 36px; height: 36px; border: 1px solid rgba(96, 165, 250, 0.5); border-radius: 50%; pointer-events: none; z-index: 9998; transform: translate(-50%, -50%); transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease; }
body.cursor-hovering .custom-cursor-follower { width: 55px; height: 55px; background-color: rgba(96, 165, 250, 0.1); border-color: #60a5fa; }
.terminal-trigger-hint { position: fixed; bottom: 15px; left: 20px; background: rgba(15, 23, 42, 0.85); border: 1px solid rgba(96, 165, 250, 0.3); color: #94a3b8; padding: 6px 12px; font-size: 11px; border-radius: 6px; z-index: 900; backdrop-filter: blur(5px); pointer-events: none; opacity: 0.7; }
.terminal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(2, 6, 23, 0.85); backdrop-filter: blur(10px); z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.terminal-overlay.active { opacity: 1; pointer-events: auto; }
.terminal-box { width: 90%; max-width: 650px; background: #090e1a; border: 1px solid #3b82f6; border-radius: 10px; box-shadow: 0 0 30px rgba(59, 130, 246, 0.3); overflow: hidden; font-family: 'Courier New', Courier, monospace; }
.terminal-header { background: #1e293b; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; color: #60a5fa; font-size: 13px; font-weight: bold; }
.terminal-header button { background: none; border: none; color: #ef4444; font-size: 18px; cursor: pointer; }
.terminal-body { padding: 15px; height: 250px; overflow-y: auto; color: #38bdf8; font-size: 13px; line-height: 1.5; }
.terminal-input-line { display: flex; padding: 10px 15px; background: #020617; border-top: 1px solid #1e293b; align-items: center; gap: 10px; color: #94a3b8; font-size: 13px; }
.terminal-input-line input { background: none; border: none; color: #fff; outline: none; flex-grow: 1; font-family: 'Courier New', Courier, monospace; font-size: 13px; }


/* Styles et Animations pour NAVORA Technologies */

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

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(0, 102, 255, 0.2);
    }
    50% {
        box-shadow: 0 0 35px rgba(0, 102, 255, 0.4);
    }
}

/* Classes d'animation à appliquer aux éléments */
.hero-content, .hero-mega-enhanced > div > div:nth-child(2) {
    animation: fadeInSlideUp 0.8s ease-out forwards;
}

.product-card {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 102, 255, 0.6);
    box-shadow: 0 20px 40px rgba(0, 102, 255, 0.2), 0 0 20px rgba(0, 102, 255, 0.1);
}

.btn-primary {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn-primary:hover {
    transform: scale(1.03);
    box-shadow: 0 15px 30px rgba(0, 102, 255, 0.5);
}

.project-filters button {
    transition: all 0.25s ease;
}

.project-filters button:hover {
    background: rgba(0, 102, 255, 0.2);
    color: #fff;
    border-color: rgba(0, 102, 255, 0.5);
}
/* Animation de pulsation pour la lueur néon d'arrière-plan */
@keyframes neonPulse {
    0%, 100% {
        opacity: 0.15;
        transform: scale(1);
    }
    50% {
        opacity: 0.3;
        transform: scale(1.08);
    }
}

/* Animation de l'effet holographique (scanner / balayage lumineux) */
@keyframes holoScan {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(1000%);
    }
}

/* Effet de battement pour les points de statut vert / actif */
@keyframes liveDot {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

/* Application des nouvelles animations aux éléments de la page */

/* Fait pulser doucement l'arrière-plan lumineux du hero */
.hero-mega-enhanced > div:first-child {
    animation: neonPulse 6s ease-in-out infinite;
}

/* Ajoute une ligne de balayage laser/holographique sur la fenêtre de code */
.hero-mega-enhanced .product-preview, 
.hero-mega-enhanced [style*="backdrop-filter"] {
    position: relative;
    overflow: hidden;
}

.hero-mega-enhanced [style*="backdrop-filter"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.8), transparent);
    animation: holoScan 4s linear infinite;
    pointer-events: none;
}

/* Anime les pastilles de statut en temps réel (effet radar/actif) */
.fa-circle[style*="color: #22c55e"],
span[style*="background: #22c55e"] {
    animation: liveDot 2s infinite;
}
@keyframes gridScroll {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 50px;
    }
}

.hero-mega-enhanced {
    background-image: 
        radial-gradient(circle at 70% 30%, rgba(0, 102, 255, 0.15), #060913 70%),
        linear-gradient(to right, rgba(0, 102, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 102, 255, 0.03) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
}
@keyframes cardAppear {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.products-grid .product-card {
    opacity: 0;
    animation: cardAppear 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Décalage temporel pour chaque carte de la grille */
.products-grid .product-card:nth-child(1) { animation-delay: 0.1s; }
.products-grid .product-card:nth-child(2) { animation-delay: 0.2s; }
.products-grid .product-card:nth-child(3) { animation-delay: 0.3s; }
.products-grid .product-card:nth-child(4) { animation-delay: 0.4s; }
.products-grid .product-card:nth-child(5) { animation-delay: 0.5s; }
.products-grid .product-card:nth-child(6) { animation-delay: 0.6s; }
.product-card {
    position: relative;
}

.product-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 21px;
    background: linear-gradient(135deg, #0066ff, transparent, #8b5cf6);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-card:hover::before {
    opacity: 0.7;
}
.product-card:hover .product-body i,
.product-card:hover .product-preview i {
    transform: scale(1.15) rotate(5deg);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Animations et effets dynamiques pour la page Carrières */

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

@keyframes pulseGlow {
    0% { box-shadow: 0 0 20px rgba(0, 102, 255, 0.2); }
    50% { box-shadow: 0 0 35px rgba(0, 102, 255, 0.4); }
    100% { box-shadow: 0 0 20px rgba(0, 102, 255, 0.2); }
}

@keyframes floatIcon {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}

.animate-fade-in {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-delay-1 { animation-delay: 0.1s; opacity: 0; }
.animate-delay-2 { animation-delay: 0.2s; opacity: 0; }
.animate-delay-3 { animation-delay: 0.3s; opacity: 0; }
.animate-delay-4 { animation-delay: 0.4s; opacity: 0; }

.hover-card-effect {
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.hover-card-effect:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 102, 255, 0.6);
    box-shadow: 0 15px 35px rgba(0, 102, 255, 0.15);
}

.hover-card-effect:hover .solution-icon {
    animation: floatIcon 2s ease-in-out infinite;
}

.pulse-container {
    animation: pulseGlow 4s ease-in-out infinite;
}
/* Styles spécifiques pour la page Carrières */
.careers-section { padding: 60px 0 100px 0; }
.careers-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section-header { text-align: center; max-width: 800px; margin: 0 auto 60px auto; }
.section-tag { color: #60a5fa; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; background: rgba(0, 102, 255, 0.1); padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(0, 102, 255, 0.3); }
.section-tag .gradient-text-animated {
    font-weight: 800;
}
.tag-dot { width: 6px; height: 6px; background: #3b82f6; border-radius: 50%; box-shadow: 0 0 10px #3b82f6; }
.careers-title { font-size: 3rem; color: #ffffff; margin-bottom: 20px; font-weight: 800; line-height: 1.15; }
.gradient-text { background: linear-gradient(135deg, #60a5fa, #3b82f6, #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.careers-subtitle { color: #94a3b8; font-size: 1.1rem; line-height: 1.7; }

.recruitment-box { background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.9)); border: 1px solid rgba(0, 102, 255, 0.3); border-radius: 24px; padding: 50px 30px; text-align: center; max-width: 800px; margin: 0 auto 70px auto; position: relative; overflow: hidden; }
.box-top-border { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, #0066ff, transparent); }
.recruitment-icon { width: 70px; height: 70px; background: rgba(0, 102, 255, 0.15); border: 1px solid rgba(0, 102, 255, 0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #60a5fa; font-size: 1.8rem; margin: 0 auto 24px auto; box-shadow: 0 0 20px rgba(0, 102, 255, 0.2); }
.box-title { color: #fff; font-size: 1.6rem; margin-bottom: 15px; font-weight: 700; }
.box-text { color: #94a3b8; font-size: 1rem; line-height: 1.6; margin-bottom: 30px; max-width: 600px; margin-left: auto; margin-right: auto; }

.alert-form { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 25px; max-width: 550px; margin-left: auto; margin-right: auto; }
.alert-input { background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(59, 130, 246, 0.3); padding: 12px 20px; border-radius: 30px; color: #fff; font-size: 0.95rem; flex: 1; min-width: 250px; outline: none; transition: border-color 0.3s; }
.alert-input:focus { border-color: #3b82f6; }
.alert-btn { background: linear-gradient(135deg, #0066ff, #2563eb); color: #fff; border: none; padding: 12px 24px; border-radius: 30px; font-weight: 600; font-size: 0.95rem; cursor: pointer; box-shadow: 0 10px 25px rgba(0, 102, 255, 0.4); transition: transform 0.2s, filter 0.2s; }
.alert-btn:hover { transform: scale(1.03); filter: brightness(1.1); }
.spontaneous-link { color: #60a5fa; text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color 0.2s; }
.spontaneous-link:hover { color: #93c5fd; }

.tech-stack-box { background: rgba(15, 23, 42, 0.4); border: 1px solid rgba(59, 130, 246, 0.15); border-radius: 20px; padding: 40px; margin-bottom: 70px; text-align: center; }
.small-tag { color: #60a5fa; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; display: block; margin-bottom: 8px; }
.tech-title { color: #fff; font-size: 1.5rem; margin-bottom: 15px; font-weight: 700; }
.tech-desc { color: #94a3b8; font-size: 0.95rem; max-width: 700px; margin: 0 auto 25px auto; line-height: 1.6; }
.tech-tags-grid { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.tech-badge { background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); color: #60a5fa; padding: 8px 16px; border-radius: 20px; font-size: 0.85rem; font-weight: 500; }

.culture-header { text-align: center; margin-bottom: 40px; }
.section-heading { font-size: 2.2rem; color: #ffffff; font-weight: 700; margin: 0; }
.solutions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; margin-bottom: 70px; }
.solution-card { background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(0, 102, 255, 0.25); border-radius: 20px; padding: 30px; backdrop-filter: blur(12px); }
.solution-icon { width: 50px; height: 50px; background: rgba(0, 102, 255, 0.15); border: 1px solid rgba(0, 102, 255, 0.3); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #60a5fa; font-size: 1.2rem; margin-bottom: 20px; }
.card-title { color: #fff; font-size: 1.15rem; margin-bottom: 10px; font-weight: 600; }
.card-desc { color: #94a3b8; font-size: 0.9rem; line-height: 1.5; margin: 0; }

.process-section { text-align: center; max-width: 900px; margin: 0 auto; }
.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; text-align: left; }
.process-card { background: rgba(30, 41, 59, 0.4); border: 1px solid rgba(59, 130, 246, 0.2); padding: 25px; border-radius: 16px; position: relative; }
.process-num { color: #3b82f6; font-size: 1.5rem; font-weight: 800; display: block; margin-bottom: 10px; }
.process-title { color: #fff; font-size: 1.05rem; margin-bottom: 8px; }
.process-desc { color: #94a3b8; font-size: 0.85rem; line-height: 1.5; margin: 0; }
/* --- Animations et effets dynamiques --- */

/* Apparition en fondu avec léger décalage vers le haut */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0; /* Caché par défaut avant l'animation */
}

/* Délais échelonnés pour une apparition en cascade */
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }

/* Effet de survol interactif sur les cartes (zoom et lueur) */
.hover-card-effect {
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.hover-card-effect:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 102, 255, 0.6);
    box-shadow: 0 15px 30px rgba(0, 102, 255, 0.15);
}

/* Animation subtile de pulsation pour la boîte de recrutement */
@keyframes softPulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 102, 255, 0.2); }
    70% { box-shadow: 0 0 0 15px rgba(0, 102, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 102, 255, 0); }
}

.recruitment-box {
    animation: softPulse 4s infinite;
}
/* --- Conteneur 3D et Logo interactif --- */
.logo-3d-wrapper {
    perspective: 1000px;
    display: inline-block;
    margin-bottom: 24px;
}

.logo-3d-element {
    width: 75px;
    height: 75px;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.2), rgba(139, 92, 246, 0.2));
    border: 1px solid rgba(0, 102, 255, 0.4);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
    font-size: 2rem;
    box-shadow: 0 10px 30px rgba(0, 102, 255, 0.3);
    transition: transform 0.1s ease-out, box-shadow 0.3s ease;
    transform-style: preserve-style;
    cursor: pointer;
}

.logo-3d-element:hover {
    box-shadow: 0 20px 40px rgba(0, 102, 255, 0.5);
    border-color: #60a5fa;
}

/* Animation de lévitation continue pour le logo */
@keyframes float3D {
    0% { transform: translateY(0px) rotateX(0deg) rotateY(0deg); }
    50% { transform: translateY(-10px) rotateX(5deg) rotateY(5deg); }
    100% { transform: translateY(0px) rotateX(0deg) rotateY(0deg); }
}

.floating-logo {
    animation: float3D 6s ease-in-out infinite;
}

/* Effet de brillance dynamique au survol des cartes */
.solution-card {
    position: relative;
    overflow: hidden;
}

.solution-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transition: 0.5s;
}

.solution-card:hover::before {
    left: 100%;
}
/* Section Partenaires */
.partners-section {
    padding: 60px 20px;
    background-color: #0b0f19; /* S'accorde avec le thème sombre high-tech */
    text-align: center;
    border-top: 1px solid rgba(59, 130, 246, 0.2);
}

.partners-container max-width {
    max-width: 1200px;
    margin: 0 auto;
}

.partners-section h3 {
    font-size: 2rem;
    color: #ffffff;
    margin-bottom: 10px;
    font-weight: 700;
}

.partners-subtitle {
    color: #94a3b8;
    font-size: 1rem;
    margin-bottom: 40px;
}

.partners-grid {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 30px;
    flex-wrap: wrap;
}

.partner-card {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 25px;
    width: 300px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.partner-card:hover {
    transform: translateY(-5px);
    border-color: #3b82f6;
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.3);
}

.partner-card img {
    max-height: 80px;
    width: auto;
    object-fit: contain;
    margin-bottom: 20px;
    border-radius: 8px;
}

.partner-name {
    color: #e2e8f0;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
}
/* Style du conteneur du sélecteur de langues */
.language-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px 12px;
    border-radius: 30px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.language-switcher:hover {
    border-color: #3b82f6;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
}

.language-switcher i {
    font-size: 0.9rem;
}

/* Style de la balise select */
.language-switcher select {
    background: transparent;
    border: none;
    color: #e2e8f0;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    outline: none;
    cursor: pointer;
}

/* Style des options du menu déroulant (pour les navigateurs compatibles comme Chrome) */
.language-switcher select option {
    background-color: #0b0f19;
    color: #ffffff;
    padding: 10px;
}
/* --- STYLE DU CHATBOT FLOTTANT --- */
.chatbot-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    font-family: inherit;
}

.chatbot-toggle-btn {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chatbot-toggle-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 25px rgba(59, 130, 246, 0.6);
}

.chatbot-window {
    position: absolute;
    bottom: 75px;
    right: 0;
    width: 360px;
    height: 480px;
    background: #0b1329;
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0);
    transform-origin: bottom right;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.chatbot-window.active {
    transform: scale(1);
}

.chatbot-header {
    background: #111d38;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

.chatbot-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chatbot-avatar {
    width: 35px;
    height: 35px;
    background: #3b82f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 14px;
}

.chatbot-title h4 {
    color: #ffffff;
    font-size: 15px;
    margin: 0;
}

.chatbot-title span {
    color: #10b981;
    font-size: 11px;
}

.chatbot-close-btn {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s;
}

.chatbot-close-btn:hover {
    color: #ffffff;
}

.chatbot-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #070d1d;
}

.chat-message {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.4;
    word-break: break-word;
}

.chat-message.bot {
    background: #111d38;
    color: #e2e8f0;
    align-self: flex-start;
    border-bottom-left-radius: 2px;
}

.chat-message.user {
    background: #3b82f6;
    color: #ffffff;
    align-self: flex-end;
    border-bottom-right-radius: 2px;
}

.chatbot-input-area {
    padding: 12px;
    background: #111d38;
    display: flex;
    gap: 8px;
    border-top: 1px solid rgba(59, 130, 246, 0.15);
}

.chatbot-input-area input {
    flex: 1;
    background: #070d1d;
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    padding: 10px 12px;
    color: #ffffff;
    font-size: 13.5px;
    outline: none;
    transition: border-color 0.2s;
}

.chatbot-input-area input:focus {
    border-color: #3b82f6;
}

.chatbot-send-btn {
    background: #3b82f6;
    border: none;
    border-radius: 8px;
    width: 40px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.chatbot-send-btn:hover {
    background: #2563eb;
}
/* Positionnement du chatbot en bas à droite */
.chatbot-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    font-family: inherit;
}

/* On remonte un peu le bouton WhatsApp pour qu'il soit juste au-dessus (ou en dessous) du chatbot */
.whatsapp-floating-btn {
    position: fixed;
    bottom: 100px; /* Décalé vers le haut pour laisser la place au chatbot */
    right: 30px;
    z-index: 9998;
    /* (garde le reste de tes styles WhatsApp existants ici) */
}
/* Style du bouton "Démarrer un projet" dans la navbar */
.btn-cta-nav {
    background: linear-gradient(135deg, #1683FF 0%, #0056b3 100%);
    color: #ffffff !important;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(22, 131, 255, 0.3);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
}

.btn-cta-nav:hover {
    background: linear-gradient(135deg, #3b9eff 0%, #1683FF 100%);
    box-shadow: 0 6px 20px rgba(22, 131, 255, 0.6);
    transform: translateY(-2px);
}
/* =========================================================
   NAVORA — TECH STACK
========================================================= */

.tech-stack-section {
    padding: 70px 6% 100px;
    position: relative;
}


/* HEADER */

.tech-stack-section .section-header {
    max-width: 800px;
    margin: 0 auto 55px;
    text-align: center;
}


.tech-stack-section .section-tag {
    display: inline-block;

    color: #60a5fa;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 3px;

    margin-bottom: 18px;
}


.tech-stack-section h2 {
    margin: 0 0 18px;

    font-size: clamp(2rem, 4vw, 3.3rem);

    color: var(--text-main);

    line-height: 1.1;
}


.gradient-text {

    background:
        linear-gradient(
            90deg,
            #60a5fa,
            #3b82f6,
            #a855f7
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


.tech-stack-section .section-header p {

    color: var(--text-muted);

    max-width: 650px;

    margin: 0 auto;

    line-height: 1.7;
}


/* =========================================================
   GRID
========================================================= */

.tech-stack-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(300px, 1fr)
        );

    gap: 22px;

    max-width: 1400px;

    margin: 0 auto;
}


/* =========================================================
   CARD
========================================================= */

.tech-bar-card {

    position: relative;

    padding: 25px;

    min-height: 150px;

    background:
        linear-gradient(
            145deg,
            rgba(15, 30, 55, 0.75),
            rgba(5, 13, 30, 0.90)
        );

    border: 1px solid
        rgba(96, 165, 250, 0.14);

    border-radius: 18px;

    overflow: hidden;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


.tech-bar-card::before {

    content: "";

    position: absolute;

    width: 160px;
    height: 160px;

    top: -100px;
    right: -70px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, .15),
            transparent 70%
        );

    pointer-events: none;
}


.tech-bar-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(59, 130, 246, .45);

    box-shadow:
        0 20px 50px
        rgba(0, 80, 255, .12);
}


/* =========================================================
   HEADER CARD
========================================================= */

.tech-card-header {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 22px;
}


.tech-card-header h3 {

    margin: 0 0 5px;

    color: var(--text-main);

    font-size: 16px;

    font-weight: 700;
}


.tech-card-header span {

    color: var(--text-muted);

    font-size: 12px;
}


/* =========================================================
   ICONES
========================================================= */

.tech-icon {

    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    font-size: 20px;

    color: #60a5fa;

    background:
        rgba(37, 99, 235, .10);

    border:
        1px solid
        rgba(59, 130, 246, .25);

    box-shadow:
        inset 0 0 20px
        rgba(37, 99, 235, .06);
}


/* =========================================================
   TAGS TECHNOLOGIQUES
========================================================= */

.tech-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.tech-tags span {

    padding:
        7px 11px;

    border-radius: 8px;

    background:
        rgba(255,255,255,.035);

    border:
        1px solid
        rgba(255,255,255,.07);

    color:
        #b8c7dc;

    font-size: 11px;

    transition:
        .25s ease;
}


.tech-bar-card:hover
.tech-tags span {

    border-color:
        rgba(59,130,246,.20);

    color:
        #dbeafe;

    background:
        rgba(59,130,246,.07);
}


/* =========================================================
   COULEURS DES DOMAINES
========================================================= */

.tech-icon.ai {
    color: #60a5fa;
}

.tech-icon.llm {
    color: #a78bfa;
}

.tech-icon.data {
    color: #38bdf8;
}

.tech-icon.analytics {
    color: #22d3ee;
}

.tech-icon.backend {
    color: #818cf8;
}

.tech-icon.frontend {
    color: #60a5fa;
}

.tech-icon.cloud {
    color: #38bdf8;
}

.tech-icon.devops {
    color: #a78bfa;
}

.tech-icon.security {
    color: #22d3ee;
}

.tech-icon.automation {
    color: #818cf8;
}

.tech-icon.blockchain {
    color: #c084fc;
}

.tech-icon.architecture {
    color: #60a5fa;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .tech-stack-section {

        padding:
            50px 5% 70px;
    }

    .tech-stack-grid {

        grid-template-columns:
            1fr;
    }

    .tech-bar-card {

        padding: 22px;
    }

}
/* =========================================================
   MENU DÉROULANT STICKY (QUI SUIT L'UTILISATEUR)
========================================================= */

.sticky-floating-nav {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: rgba(3, 7, 18, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(59, 130, 246, 0.3);
    padding: 10px 25px;
    border-radius: 50px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(59, 130, 246, 0.2);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
    opacity: 0;
    pointer-events: none;
}

/* Classe activée via JavaScript lorsque l'utilisateur fait défiler la page */
.sticky-floating-nav.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.sticky-floating-nav ul {
    display: flex;
    list-style: none;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.sticky-floating-nav ul li a {
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.sticky-floating-nav ul li a:hover,
.sticky-floating-nav ul li a.active {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.8);
}

/* Bouton d'action rapide dans le menu sticky (optionnel) */
.sticky-cta {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
    transition: transform 0.2s ease;
}

.sticky-cta:hover {
    transform: scale(1.05);
}