.hero-section {
            padding: 180px 5% 60px;
            text-align: center;
            min-height: 40vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .title-badge {
            display: inline-block; padding: 6px 16px;
            background: rgba(155, 48, 255, 0.1); border: 1px solid rgba(155, 48, 255, 0.3);
            border-radius: 30px; color: #9b30ff; font-size: 0.75rem; font-weight: 700;
            letter-spacing: 2px; text-transform: uppercase; margin-bottom: 20px;
        }

        .page-title {
            font-size: 3.5rem; font-weight: 800; margin-bottom: 20px; color: #fff;
            letter-spacing: -1px;
        }
        
        .text-gradient {
            background: linear-gradient(135deg, #fff 30%, #9b30ff 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        .page-desc { color: #aaa; max-width: 600px; line-height: 1.6; font-size: 1.1rem; }

        /* --- BLOG GRID STYLES --- */
        .blog-container {
            max-width: 1200px; margin: 0 auto; padding: 0 5% 100px;
            display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
            gap: 30px;
            align-items: start;
        }

        .blog-card {
            background: rgba(15, 15, 17, 0.4);
            backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            overflow: hidden;
            transition: all 0.4s ease;
            display: flex; flex-direction: column;
            opacity: 0; transform: translateY(30px); /* Pour l'animation */
        }

        .blog-card:hover {
            transform: translateY(-10px);
            border-color: rgba(155, 48, 255, 0.5);
            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
        }

        .card-image-wrapper {
            width: 100%; height: 200px;
            background: #1a1a1d;
            position: relative;
            overflow: hidden;
        }

        .card-image-wrapper img {
            width: 100%; height: 100%; object-fit: cover;
            transition: transform 0.5s ease;
            opacity: 0.8;
        }

        .blog-card:hover .card-image-wrapper img { transform: scale(1.05); opacity: 1; }

        .card-content { padding:25px 25px 20px 25px; flex-grow: 1; display: flex; flex-direction: column; }

        .card-meta {
            font-size: 0.75rem; color: #9b30ff; text-transform: uppercase; 
            letter-spacing: 1px; font-weight: 700; margin-bottom: 10px;
            display: flex; justify-content: space-between;
        }

        .card-date { color: #666; font-weight: 500; }

        .card-title {
            font-size: 1.4rem; font-weight: 700; color: #fff; margin-bottom: 10px;
            line-height: 1.3;
        }

        .card-excerpt {
            font-size: 0.95rem; color: #bbb; line-height: 1.6; margin-bottom: 25px;
            flex-grow: 1;
        }

        .read-more {
            color: #fff; text-decoration: none; font-size: 0.9rem; font-weight: 600;
            display: inline-flex; align-items: center; gap: 8px; transition: gap 0.3s ease;
        }
        .read-more span { color: #9b30ff; font-size: 1.2em; }
        .blog-card:hover .read-more { gap: 12px; color: #9b30ff; }