:root {
            --red: #A62D17;
            --dark-green: #052b1e;
            --white: #ffffff;
            --bg: #052b1e;
            --mouais: #A62D17;
            --accent-green: #A62D17;
            --nav-text: rgba(255, 255, 255, 0.3);
            --filter-color: #ffffff;
        }

        [data-theme="light"] {
            --bg: #F5F5DC;
            --white: #A62D17;
            --mouais: #052b1e;
            --accent-green: #052b1e;
            --nav-text: rgba(5, 43, 30, 0.3);
            --filter-color: #052b1e;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        
        body { 
            font-family: 'Unbounded', sans-serif; 
            background-color: var(--bg); color: var(--white); 
            overflow: hidden; 
            transition: background-color 0.8s ease;
        }

        strong{
            color: #A62D17;
        }

        #theme-toggle {
            position: fixed; top: 40px; right: 40px; z-index: 20000;
            background: none; border: 2px solid var(--red); color: var(--red);
            padding: 8px 15px; font-family: 'Unbounded'; font-weight: 900; font-size: 0.7rem;
            cursor: pointer; text-transform: uppercase; border-radius: 50px;
            transition: all 0.3s ease;
        }
        #theme-toggle:hover { background: var(--red); color: var(--bg); }

        #logo-link {
            position: fixed; top: 40px; left: 40px; width: 50px; z-index: 10001;
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        #logo-link:hover { transform: scale(1.1) rotate(-5deg); }
        #master-icon { width: 50px; display: block; }

        header { 
            position: fixed; top: 55px; left: 105px; z-index: 10000; 
            font-weight: 900; text-transform: uppercase; font-size: 0.9rem;
            color: var(--red) !important; pointer-events: none;
        }

        footer {
            position: fixed; bottom: 25px; left: 0; width: 100%;
            display: flex; justify-content: center; gap: 60px; z-index: 10000;
        }
        .nav-link { 
            color: var(--red) !important; text-decoration: none; 
            font-size: 1.3rem; font-weight: 900; 
            text-transform: uppercase; position: relative; transition: 0.3s;
        }
        .nav-link::after {
            content: ''; position: absolute; width: 0; height: 4px; bottom: -5px; left: 0;
            background-color: var(--red); transition: width 0.3s ease;
        }
        .nav-link:hover::after, .nav-link.active::after { width: 100%; }

        .nav-container {
            position: fixed; left: 40px; top: 50%;
            transform: translateY(-50%); z-index: 500;
            display: flex; flex-direction: column; gap: 20px;
        }
        .nav-cursor {
            position: absolute; left: 0; top: 0; width: 55px; height: 45px;
            background: var(--accent-green); border-radius: 4px; z-index: 1;
            transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
        }
        .nav-item {
            position: relative; width: 55px; height: 45px;
            color: var(--nav-text); font-weight: 900; font-size: 0.9rem;
            display: flex; align-items: center; justify-content: center;
            z-index: 2; cursor: pointer; transition: color 0.4s ease;
        }
        .nav-item.active { color: #fff; }

        .viewport { 
            height: 100vh; width: 100vw; 
            overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; 
        }
        .viewport::-webkit-scrollbar { display: none; }

        section { 
            position: relative; height: 100vh; width: 100vw; 
            scroll-snap-align: start; display: flex; 
            align-items: center; justify-content: center; overflow: hidden; 
        }

        .reveal-content { 
            opacity: 0; transform: translateY(40px); 
            transition: all 1s cubic-bezier(0.2, 1, 0.3, 1); 
            width: 100%; max-width: 1600px; z-index: 5;
            display: flex; flex-direction: column; align-items: center;
        }
        section.is-visible .reveal-content { opacity: 1; transform: translateY(0); }

        .hero-grid {
            display: grid; grid-template-columns: 1.2fr 0.8fr; 
            gap: 80px; align-items: center; width: 90%;
        }
        .about-text { font-size: 7vw; font-weight: 900; line-height: 0.95; text-transform: uppercase; letter-spacing: -0.04em; }
        .red-text { color: var(--mouais); transition: color 0.5s; }
        .about-right-info { padding-left: 60px; border-left: 6px solid var(--red); }
        .info-label { font-size: 1.8rem; font-weight: 900; color: var(--accent-green); text-transform: uppercase; margin-bottom: 20px; letter-spacing: 0.2em; }
        .info-value { font-size: 1.5vw; font-weight: 400; line-height: 1.4; color: var(--white); margin-bottom: 50px; }

        .bg-skills-wrapper {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            z-index: 1; pointer-events: none;
        }
        .bg-skills-part { font-size: 24vw; font-weight: 900; color: var(--red); line-height: 0.7; text-transform: uppercase; letter-spacing: -0.07em; opacity: 1; }

        .filter-bar { margin-bottom: 50px; display: flex; gap: 40px; z-index: 20; }
        .filter-btn { 
            background: none; border: none; color: var(--filter-color); 
            font-family: 'Unbounded'; font-size: 1.2rem; font-weight: 900; 
            text-transform: uppercase; cursor: pointer; transition: 0.4s;
            position: relative; padding: 10px 0; opacity: 0.4;
        }
        .filter-btn.active { opacity: 1; color: var(--filter-color); }
        .filter-btn.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: var(--red); }

        .organic-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; width: 100%; max-width: 1300px; }
        .software-bubble {
            position: relative; width: 220px; height: 220px;
            border-radius: 50%; background: #000; border: 1px solid rgba(255,255,255,0.1);
            overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center;
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            animation: float 6s ease-in-out infinite;
        }
        .software-bubble img { width: 100%; height: 100%; object-fit: cover;  opacity: 0.3; transition: 0.5s; }
        .software-bubble:hover img { opacity: 1; }
        .software-bubble.hidden { width: 0; height: 0; margin: -15px; opacity: 0; transform: scale(0); pointer-events: none; }

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






































@media (max-width: 1024px) {
    /* 1. STABILISATION & FIX IPHONE (SVH) */
    html, body {
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        /* Utilise svh pour éviter que la barre d'adresse Safari ne cache le bas */
        height: 100svh !important; 
        overflow: hidden !important;
        touch-action: none !important;
    }

   /* 2. UI FIXE (HEADER & LOGO) - ALIGNÉ SUR CONTACT */
    #logo-link { 
        top: 20px !important; 
        left: 20px !important; 
        width: 35px !important; 
        position: fixed !important; 
        z-index: 10005; 
    }
    
    #master-icon { width: 35px !important; }
    
    header { 
        top: 32px !important; 
        left: 65px !important; /* Position identique à contact */
        position: fixed !important; 
        z-index: 10004; 
        font-size: 0.6rem !important; /* Taille uniforme */
        white-space: nowrap;
        width: auto !important;
    }

    /* On supprime le header::before qui créait un décalage instable */
    header::before { display: none !important; }

    #theme-toggle { 
        top: 20px !important; 
        right: 20px !important; 
        padding: 6px 12px !important; 
        font-size: 0.55rem !important; 
        position: fixed !important; 
        z-index: 10005; 
        border-radius: 50px !important;
    }

    /* 3. VIEWPORT & SECTIONS (Le secret de l'adaptation) */
    .viewport {
        height: 100svh !important; /* Force la hauteur réelle mobile */
        width: 100vw !important;
        overflow-y: scroll !important;
        scroll-snap-type: y mandatory;
        scrollbar-width: none;
    }

    section {
        height: 100svh !important; /* Hauteur écran exact */
        width: 100vw !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important; 
        /* GIGANTESQUE PADDING BAS pour protéger le footer */
        /* 80px en haut (header), 100px en bas (footer + barre iPhone) */
        padding: 80px 20px 100px 20px !important; 
        box-sizing: border-box !important;
        position: relative !important;
    }

    /* 4. CONTENEUR DU TEXTE (Adapter l'espace) */
    .hero-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 400px !important;
        /* Hauteur max pour ne pas pousser le footer */
        max-height: 100% !important; 
        /* Gap dynamique : se réduit si l'écran est petit */
        gap: 2vh !important; 
    }

    .about-text { 
        /* On réduit légèrement (13vw -> 11vw) pour éviter le débordement */
        font-size: 11vw !important; 
        line-height: 1.1 !important;
        text-align: center !important;
        /* Empêche le texte de prendre toute la place si l'écran est petit */
        flex-shrink: 1 !important; 
    }

    .about-right-info { 
        border-top: 3px solid var(--brand-red) !important;
        padding-top: 15px !important;
        width: 100% !important;
        text-align: center !important;
        /* Si l'écran est vraiment minuscule, on autorise ce bloc à se compresser */
        flex-shrink: 0 !important; 
    }

    .info-label { font-size: 0.9rem !important; margin-bottom: 5px !important; }
    .info-value { font-size: 0.8rem !important; line-height: 1.4 !important; }

    /* 5. FOOTER (Position blindée) */
    footer, #main-footer { 
        position: fixed !important;
        /* On le remonte un peu pour la barre iPhone */
        bottom: 30px !important; 
        left: 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        gap: 30px !important;
        z-index: 10004;
        /* Fond transparent ou couleur page pour lisibilité si besoin */
        pointer-events: none; /* Laisse passer le scroll si on touche entre les liens */
    }
    
    .nav-link { 
        font-size: 0.85rem !important; 
        pointer-events: auto; /* Réactive le clic sur les liens */
    }

    /* 6. SKILLS & RESTE */
    .nav-container { display: none !important; }
    .bg-skills-part { font-size: 28vw !important; opacity: 0.1 !important; }
    .filter-bar { margin: 20px 0 !important; gap: 10px !important; }
    .organic-cloud { width: 100% !important; justify-content: center !important; gap: 10px !important; }
    .software-bubble { width: 65px !important; height: 65px !important; border-radius: 50% !important; }
}