html { scroll-behavior: smooth; }
        body { 
            background-color: #f8fafc; 
            font-family: 'Plus Jakarta Sans', sans-serif; 
            color: #1e293b; 
            overflow-x: hidden;
        }
        .serif { font-family: 'Cormorant Garamond', serif; }

        /* --- DESIGN DU BACKGROUND --- */
        .bg-visual {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: -1;
            background: #f8fafc;
            overflow: hidden;
        }

        /* Effet de grain/bruit */
        .bg-visual::after {
            content: "";
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
            opacity: 0.05;
            pointer-events: none;
        }

        /* Formes colorées floues (Blobs) */
        .blob {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0.4;
            z-index: -1;
            animation: float 20s infinite alternate;
        }
        .blob-1 { width: 500px; height: 500px; background: #818cf8; top: -100px; right: -100px; }
        .blob-2 { width: 400px; height: 400px; background: #f472b6; bottom: -50px; left: -100px; animation-delay: -5s; }
        .blob-3 { width: 300px; height: 300px; background: #38bdf8; top: 40%; left: 20%; animation-delay: -10s; }

        @keyframes float {
            0% { transform: translate(0, 0) scale(1); }
            100% { transform: translate(50px, 100px) scale(1.1); }
        }

        /* Maillage de points */
        .dot-grid {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
            background-size: 30px 30px;
            opacity: 0.3;
            z-index: -1;
        }

        /* --- STYLES COMPOSANTS --- */
        .glass-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 30px;
        }

        .video-container {
            position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; width: 100%;
        }
        .video-container iframe {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
        }

        .reveal-text { overflow: hidden; display: inline-block; }
        .reveal-text span {
            display: inline-block; transform: translateY(100%);
            animation: reveal 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
        }
        @keyframes reveal { to { transform: translateY(0); } }

        section { scroll-margin-top: 100px; }

        /* --- SPLASH SCREEN & SUPERPOSITION --- */
        #splash-screen {
            position: fixed;
            inset: 0;
            background-color: #f8fafc;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        #splash-screen.hidden {
            opacity: 0;
            pointer-events: none;
        }

        /* On reproduit exactement le style du titre du Header */
        .typewriter-wrapper {
            text-align: center;
            line-height: 0.9;
        }

        .typewriter-text {
            font-family: 'Cormorant Garamond', serif;
            font-style: italic;
            font-size: clamp(3rem, 8vw, 9rem); /* Taille adaptative identique au header */
            min-height: 1.2em;
            display: inline-block;
            border-right: 4px solid #4f46e5;
            white-space: pre-wrap;
            animation: blink 0.8s step-end infinite;
        }

        .blue-text {
            color: #4f46e5;
        }

        @keyframes blink {
            from, to { border-color: transparent }
            50% { border-color: #4f46e5; }
        }

        #info-modal.active { opacity: 1; pointer-events: auto; }
        #info-modal.active .modal-content { transform: scale(1); }