@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

body {
        font-family: 'Figtree','Inter', sans-serif;
    }

    .gradient-text {
        background: linear-gradient(135deg, #7b8cfe, #e30613);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .hero-gradient {
        background: linear-gradient(135deg, #1a194d 0%, #0F1F45 50%, #1a194d 100%);
    }

    .card-glow:hover {
        box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.3), 0 20px 40px rgba(37, 99, 235, 0.1);
    }

    .nav-blur {
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .channel-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .channel-card:hover {
        border-color: rgba(37, 99, 235, 0.4);
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    }

    .dest-tag {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .dest-tag:hover {
        background: rgba(37, 99, 235, 0.2);
        border-color: rgba(37, 99, 235, 0.5);
    }

    .stat-card {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .use-case-card {
        transition: all 0.3s ease;
    }

    .use-case-card:hover .use-case-icon {
        transform: scale(1.1);
    }

    @media (prefers-reduced-motion: reduce) {

        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
        }
    }

    /* Styles pour les onglets de code */
    .code-tabs button.active {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.1);
    }

    .code-panel {
        display: none;
    }

    .code-panel.active {
        display: block;
        animation: fadeUp 0.3s ease-out;
    }

     .nav-blur { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
    .toc-link { transition: all 0.2s; border-left: 2px solid transparent; }
    .toc-link:hover, .toc-link.active { border-left-color: #2563EB; color: #2563EB; background: rgba(37,99,235,0.05); }
    .prose h2 { font-size: 1.25rem; font-weight: 800; color: #0F1F45; margin-top: 2.5rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #E5E7EB; }
    .prose h3 { font-size: 1rem; font-weight: 700; color: #0F1F45; margin-top: 1.5rem; margin-bottom: 0.5rem; }
    .prose p { color: #4B5563; line-height: 1.8; margin-bottom: 1rem; font-size: 0.9375rem; }
    .prose ul { margin: 0.75rem 0 1rem 1.25rem; }
    .prose ul li { color: #4B5563; font-size: 0.9375rem; line-height: 1.8; margin-bottom: 0.25rem; position: relative; }
    .prose ul li::before { content: '·'; position: absolute; left: -1rem; color: #2563EB; font-weight: 700; font-size: 1.2rem; line-height: 1.4; }
    .prose a { color: #2563EB; text-decoration: underline; text-underline-offset: 2px; }
    .prose strong { color: #0F1F45; font-weight: 600; }
    .info-box { background: #EFF6FF; border-left: 3px solid #2563EB; border-radius: 0 0.5rem 0.5rem 0; }
    .warn-box { background: #FFFBEB; border-left: 3px solid #F59E0B; border-radius: 0 0.5rem 0.5rem 0; }
  .danger-box { background: #FEF2F2; border-left: 3px solid #EF4444; border-radius: 0 0.5rem 0.5rem 0; }