@font-face {
        font-family: "BOULEVARDUnionClub";
        font-style: normal;
        font-weight: normal;
        src: local("BOULEVARDUnionClub"),
        url("BOULEVARDUnionClub-Regular.woff") format("woff");
    }

    @font-face {
        font-family: "BOULEVARDUnionClub";
        font-style: normal;
        font-weight: normal;
        src: local("BOULEVARDUnionClub"),
        url("BOULEVARDUnionClub-Script.woff") format("woff");
    }



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

    body {
        background-color: rgb(29, 29, 29);
    }

    .loader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgb(29,29,29);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }

    .loader-bars {
        display: flex;
        gap: 1.5rem;
    }

    .loader .bar {
        width: 15px;
        height: 60px;
        background-color: rgb(181, 92, 239);
        border-radius: 5px;
    }

    .nav-links {
        list-style: none;
    }

    main {
        background-color: rgb(78, 78, 78);
        min-height: 90vh;
        border-radius: 50px;
    }

    /* ------------------- HERO AU MILIEU ------------------- */

    .hero {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
    }

    .hero .Julian {
        font-family: "BOULEVARDUnionClub", sans-serif;
        font-size: 16.7vw;
        transition: all ease-in-out 0.2s;
        color: aliceblue;
    }

    .hero .Melchior {
        font-family: "BOULEVARDUnionClub", sans-serif;
        font-size: 12.5vw;
        border-radius: 0 0 45px 45px;
        transition: all ease-in-out 0.2s;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        z-index: 2;
        padding-left: 2vw;
        color: aliceblue;
    }

    .Julian {
        padding: 0.2em 0.2em 0.2em 0em;
        padding-left: 2vw;
        padding-top: 4vh;
        color: rgb(0, 0, 0);
        border-radius: 45px 45px 0 0;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        z-index: 2;
    }

    .Julian:hover {
        color: rgb(0, 0, 0);
    }

    .Julian:hover ~ .red-bg {
        top: 18vh;
        height: 18.7vw;
    }

    .Melchior:hover {
        color: rgb(0, 0, 0);
    }

    .Melchior:hover ~ .red-bg {
        top: 32vw;
        height: 12.5vw;
    }

    .red-bg {
        position: absolute;
        left: 0;
        width: 100%;
        height: 0;
        background-color: rgb(181, 92, 239);
        z-index: 1;
        transition: all 0.35s ease;
    }

    /* États animés appliqués par JS */
    .red-bg.julian-active {
        top: 18vh;
        height: 18.7vw;
    }

    .red-bg.julian-leave {
        top: 0;
        height: 0;
    }

    .red-bg.melchior-active {
        top: 32vw;
        height: 12.5vw;
    }

    .red-bg.melchior-leave {
        top: 100vh;
        height: 0;
    }

    /* ------------------- NAV AVEC FLOU ------------------- */

    nav {
        display: flex;
        position: fixed;
        justify-content: space-between;
        align-items: center;
        top: 0;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.04);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 100;
        border-radius: 20em;
        padding: 0 2em;
        margin-top: 1em;
        margin-left: 1em;
        margin-right: 1em;
        max-width: 98vw;
        transform-origin: top center;
    }

    nav ul {
        display: flex;
        gap: 2em;
        align-items: center;
        list-style: none;
        margin: 0;
    }

    nav ul li a {
        text-decoration: none;
        color: rgb(255, 255, 255);
        font-family: "BOULEVARDUnionClub", sans-serif;
        font-size: 100%;
        transition: all ease-in-out 0.2s;
        padding: 1em;
        border-radius: 2em;
    }

    /* ------------------- LOGO ------------------- */



    .btn-neon {
        display: inline-block;
        font-size: 1.4rem;
        font-weight: 600;
        background: none;
        border: none;
        color: white;
        white-space: pre;
        font-family: "BOULEVARDUnionClub", sans-serif;
    }

    .btn-neon .letter {
        display: inline-block;
    }

    /* About me */
    .aboutme {
        color: white;
    }

    /* Projects */

    /* Contact */

    html,
    body,
    .horizontal {
        scrollbar-width: none;
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    .horizontal::-webkit-scrollbar {
        display: none;
    }

    img {
        max-height: 100vh;
        max-width: 100vw;
    }

    .burger {
        display: none;
        flex-direction: column;
        gap: 5px;
    }

    .burger span {
        width: 28px;
        height: 3px;
        background: white;
        border-radius: 5px;
        transition: 0.3s;
    }

    .purple-bg {
        display: none;
    }

    h2 {
        font-family: "BOULEVARDUnionClub", sans-serif;
        margin-left: 10vw;
        color: white;
    }

    /* ----------------------- PROJECTS ------------------------ */

    .container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 60px 40px;
    }

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 80px;
    }

    .title {
        font-size: 80px;
        font-weight: bold;
        letter-spacing: -2px;
    }

    .watch-text {
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    .projects-list {
        list-style: none;
    }

    .project-item {
        border-top: 1px solid #ffffff;
        padding: 40px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.3s ease;
        position: relative;
    }

    .project-item:last-child {
        border-bottom: 1px solid #ffffff;
    }

    .project-name {
        font-family: "BOULEVARDUnionClub", sans-serif;
        font-size: 2vw;
        font-weight: bold;
        letter-spacing: 1px;
        text-transform: uppercase;
        flex: 1;
        transition: color 0.3s ease;
        color: #f0f0f0;
    }

    .project-tags {
        font-family: "BOULEVARDUnionClub", sans-serif;
        display: flex;
        gap: 15px;
        flex: 1;
        justify-content: center;
    }

    .tag {
        background: #222;
        padding: 8px 20px;
        border-radius: 20px;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all 0.3s ease;
        color: white;
    }

    .project-year {
        font-family: "BOULEVARDUnionClub", sans-serif;
        font-size: 2vw;
        color: #f6f6f6;
        transition: color 0.3s ease;
    }

    .project-item.active {
        background: #b55cef;
        color: #000;
        padding-left: 40px;
        padding-right: 40px;
        margin: 0 -40px;
    }

    .project-item.active .project-name {
        color: #000;
    }

    .project-item.active .project-year {
        color: #000;
    }

    .project-item.active .tag {
        background: rgba(0, 0, 0, 0.2);
        color: #000;
    }

    .cursor-image {
        position: fixed;
        width: 18vw;
        height: 22vw;
        pointer-events: none;
        z-index: 1000;
        opacity: 0;
        transform: translate(-50%, -120%);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    }

    .cursor-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .about-content {
        max-width: 900px;
        margin: 4rem auto;
        padding: 0 2rem;
    }

    .about-text {
        font-family: "BOULEVARDUnionClub", sans-serif;
        font-size: clamp(1.2rem, 2vw, 1.8rem);
        line-height: 1.8;
        color: #f0f0f0;
        text-align: center;
        letter-spacing: 0.5px;
    }

    /* Update .loader to use flex column to stack bars and buttons */
    .loader {
        /* Existing properties... */
        flex-direction: column;
        gap: 2rem;
    }

    .loader-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .lang-selection {
        opacity: 0; /* Hidden initially, shown via GSAP */
        display: flex;
        align-items: center;
        gap: 15px;
        font-family: "BOULEVARDUnionClub", sans-serif;
    }

    .lang-btn {
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.5);
        font-size: 1.5rem;
        font-family: inherit;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .lang-btn:hover {
        color: rgb(181, 92, 239); /* Purple color */
        transform: scale(1.1);
    }

    .separator {
        color: rgba(255, 255, 255, 0.3);
        font-size: 1.5rem;
    }

    /* --- BOUTON CV STYLE TECHNIQUE --- */
    .btn-cv {
        position: relative;
        display: inline-block;
        padding: 15px 40px;
        margin-top: 20px; /* Un peu d'espace au dessus */

        /* Forme & Bordure */
        border-radius: 50px;
        border: 1px solid rgba(181, 92, 239, 0.4);
        background: rgba(255, 255, 255, 0.03); /* Fond très léger par défaut */

        /* Typo */
        color: white;
        font-family: "BOULEVARDUnionClub", sans-serif;
        text-decoration: none;
        font-size: 1.2rem;
        letter-spacing: 1px;
        text-transform: uppercase;

        /* Technique d'animation */
        overflow: hidden; /* Important pour contenir le remplissage */
        z-index: 1;
        transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); /* Mouvement fluide */
       text-align: center;
    }

    /* Le fond violet qui arrive (caché à gauche au début) */
    .btn-cv::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0%; /* Vide au départ */
        height: 100%;
        background: rgb(181, 92, 239);
        z-index: -1; /* Derrière le texte */
        transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        border-radius: 50px;
    }

    /* Le trait de lumière (Reflet) */
    .btn-cv::after {
        content: "";
        position: absolute;
        top: 0;
        left: -100%; /* Hors champ à gauche */
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        transform: skewX(-20deg); /* Penché pour la vitesse */
        z-index: -1;
        transition: none; /* Pas d'anim au retour */
    }

    /* --- ÉTAT HOVER (SURVOL) --- */
    .btn-cv:hover {
        color: white;
        border-color: transparent;
        box-shadow: 0 0 20px rgba(181, 92, 239, 0.5); /* Glow violet */
        transform: translateY(-3px); /* Monte légèrement */
    }

    .btn-cv:hover::before {
        width: 100%; /* Remplissage complet */
    }

    .btn-cv:hover::after {
        left: 100%; /* Le reflet traverse tout le bouton */
        transition: left 0.6s ease-in-out;
    }

    .btn-container {
        display: flex;
        justify-content: center; /* Centre horizontalement */
        align-items: center;
        width: 100%;
        margin-top: 2rem; /* Espace au-dessus du bouton */
    }

    body, a, button {
        cursor: none; /* On cache la souris windows */
    }

    /* --- 2. LE CURSEUR ROND FLUIDE --- */
    .custom-cursor-round {
        position: fixed;
        top: 0;
        left: 0;
        width: 20px;
        height: 20px;
        background-color: white; /* Ou rgb(181, 92, 239) */
        border-radius: 50%;
        pointer-events: none; /* Click au travers */
        z-index: 10000;
        mix-blend-mode: difference; /* Inversion de couleur stylée sur fond clair/sombre */
        transform: translate(-50%, -50%); /* Centrage parfait */
    }

    /* --- 3. PRÉPARATION 3D LOGO --- */
    .logo {
        /* Indispensable pour l'effet 3D */
        perspective: 1000px;
        display: inline-block; /* S'assure que la div prend la taille du logo */


    }

    .logoimg {
        /* Permet la rotation fluide sans flou */
        transform-style: preserve-3d;
        will-change: transform;
        height: 7vh;
    }

    .custom-cursor-round {
        /* ... tes propriétés existantes ... */
        transition: background-color 0.2s ease, transform 0.1s ease; /* Ajoute la transition de couleur */
    }

    /* Quand cette classe est active, le curseur devient violet */
    /* Violet (Cursor) - Violet (Fond) = NOIR (Visuellement) */
    .cursor-force-black {
        background-color: rgb(181, 92, 239) !important;
    }

    .project-item, h2, .about-text {
        visibility: visible;
        opacity: 1;
    }

    /* --- ANTI-FLASH : On cache les éléments par défaut --- */
    .project-item,
    h2,
    .about-text,
    .btn-container,
    .panel.contact img {
        visibility: hidden; /* Le secret est là : invisible mais garde sa place */
        opacity: 0;
    }

    /* Positionnement du conteneur 3D */
    #canvas-container {
        position: absolute;
        top: 0;
        right: 0; /* On le colle à droite */
        width: 60vw; /* Il prend 60% de la largeur */
        height: 100vh;
        z-index: 2; /* ⚠️ CRUCIAL : Au-dessus du fond violet (1) */
        pointer-events: none; /* Permet de cliquer à travers */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* On s'assure que le Texte est DEVANT la 3D */
    .hero .Julian,
    .hero .Melchior {
        position: relative;
        z-index: 10; /* Le texte doit être au-dessus de tout (z-index 10) */
    }

    /* On s'assure que le fond violet est DERRIÈRE la 3D */
    .red-bg {
        z-index: 1; /* Le fond reste en bas */
    }

    @media (max-width: 650px) {
        .burger {
            display: flex;
        }

        #canvas-container {
            width: 100vw !important; /* Prend toute la largeur */
            left: 0 !important;      /* Se colle à gauche */
            right: auto !important;
            top: 0;
            height: 50vh; /* Prend la moitié haute de l'écran (ajuste si besoin) */
            /* Si tu veux qu'il soit en fond complet, mets height: 100vh; */
        }

        .nav-links {
            position: absolute;
            top: 15vh;
            right: 0;
            width: 90%;
            max-width: 400px;
            flex-direction: column;
            padding: 1em 0;
            gap: 1.2em;
            transform: translateY(-200%);
            transition: transform 0.4s ease;
            background-color: rgba(40, 40, 40, 0.76);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border-radius: 30px;
            z-index: 1000;
        }

        .nav-links.open {
            transform: translateY(0);
        }

        nav {
            flex-direction: row;
            justify-content: space-between;
            max-width: 90vw;
        }

        nav ul li a {
            text-decoration: none;
            color: rgb(255, 255, 255);
            font-family: "BOULEVARDUnionClub", sans-serif;
            font-size: 100%;
            transition: all ease-in-out 0.2s;
            padding: 1em;
            border-radius: 2em;
        }

        .btn-neon {
            padding: 1em 2em;
            color: white;
            font-family: "BOULEVARDUnionClub", sans-serif;
            text-decoration: none;
            border: 2px solid rgba(181, 92, 239, 0);
            transition: 0.3s ease;
        }

        .btn-neon:hover {
            box-shadow: 0 0 15px rgba(181, 92, 239, 0), 0 0 30px rgb(181, 92, 239);
            color: rgb(181, 92, 239);
        }

        .purple-bg {
            display: block;
            position: absolute;
            left: 0;
            width: 70vw;
            height: 15vh;
            background-color: rgb(181, 92, 239);
            z-index: 1;
            transition: all 0.35s ease;
        }

        .hero {
            min-height: 60vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
        }

        .cursor-image {
            transform: translate(-50%, -150%);}
    }