body { background: #000; overflow: hidden; }
        html { overflow-y: auto !important; }
        #index-background {
            position: fixed; inset: 0; z-index: 0; pointer-events: none;
        }
        #index-background img {
            position: absolute; inset: 0; width: 100%; height: 100%;
            object-fit: cover; opacity: 0; transition: opacity 2s ease;
            filter: brightness(0.25);
        }
        #index-background img.visible { opacity: 1; }

        .bio-page {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            gap: 20px;
            padding: 0 8vw;
            padding-top: 20vh;
            box-sizing: border-box;
            position: relative;
            z-index: 2;
        }
        .bio-fixed-title {
            position: fixed;
            bottom: 20px;
            left: 6vw;
            font-family: 'Host Grotesk', sans-serif;
            color: #fff;
            z-index: 10;
            pointer-events: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
        }
        .bio-title-main {
            font-size: clamp(3rem, 8vw, 5rem);
            letter-spacing: 0.08em;
        }
        .bio-title-sub {
            font-size: 1.5rem;
            font-weight: 300;
            color: rgba(255,255,255,0.5);
            letter-spacing: 1px;
            text-transform: uppercase;
            padding-left: 6px;
        }
        .bio-inner {
            width: 100%;
            max-width: 900px;
            margin-left: auto;
            margin-right: 80px;
            background: rgba(255,255,255,0.2);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 12px;
            padding: 48px;
            box-sizing: border-box;
            position: relative;
            z-index: 2;
            max-height: 70vh;
            overflow-y: auto;
        }
        .bio-visual {
            position: fixed;
            inset: 0;
            z-index: 0;
            pointer-events: none;
        }
        .bio-visual img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(0.3) blur(1px);
        }
        .bio-portrait {
            
            border-radius: 50%;
            overflow: hidden;
            margin-bottom: 24px;
            border: 2px solid rgba(255,255,255,0.15);
        }
        .bio-portrait img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .bio-portrait {
            
            border-radius: 50%;
            overflow: hidden;
            margin-bottom: 24px;
        }
        .bio-portrait img {
            width: 26vw;
  height: 26vw;
            border-radius: 0;
            object-fit: cover;
        }
        .bio-inner .lang-toggle {
            padding-bottom: 20px;
        }
        .bio-inner h1 {
            font-family: 'Virginia', serif;
            font-size: clamp(2rem, 5vw, 3.5rem);
            color: #fff;
            margin: 0 0 32px;
            letter-spacing: 0.06em;
        }
        .bio-inner h1 {
            display: flex;
            gap: 12px;
            margin-bottom: 40px;
        }
        .bio-inner .lang-btn {
            background: transparent;
            border: 1px solid rgba(255,255,255,0.2);
            color: rgba(255,255,255,0.5);
            font-family: 'Host Grotesk', sans-serif;
            font-size: 0.8rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            padding: 6px 16px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .bio-inner .lang-btn.active {
            background: rgba(255,255,255,0.1);
            border-color: rgba(255,255,255,0.5);
            color: #fff;
        }
        .bio-section {
            margin-bottom: 36px;
        }
        .bio-section h2 {
            font-family: 'Host Grotesk', sans-serif;
            font-size: 0.9rem;
            color: rgba(255,255,255,0.4);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin: 0 0 12px;
        }
        .bio-section p {
            font-family: 'Host Grotesk', sans-serif;
            font-size: 1.15rem;
            line-height: 1.7;
            color: rgba(255,255,255,0.75);
            margin: 0 0 16px;
        }
        .bio-section h3 {
            font-family: 'Host Grotesk', sans-serif;
            font-size: 0.9rem;
            color: rgba(255,255,255,0.6);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin: 24px 0 12px;
        }
        .bio-collab {
            margin-bottom: 20px;
            padding-left: 12px;
            border-left: 1px solid rgba(255,255,255,0.15);
        }
        .bio-collab p {
            font-size: 1rem;
            margin-bottom: 6px;
        }
        .bio-collab ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .bio-collab li {
            font-family: 'Host Grotesk', sans-serif;
            font-size: 0.9rem;
            color: rgba(255,255,255,0.6);
            line-height: 1.6;
        }
        .bio-collab a {
            color: rgba(255,255,255,0.7);
            text-decoration: none;
            transition: color 0.3s ease;
        }
        .bio-collab a:hover {
            color: #fff;
        }
        .lang-hidden { display: none; }
        .bio-footer {
            margin-top: 48px;
        }
        .cv-link {
            display: inline-block;
            padding: 10px 24px;
            border: 1px solid rgba(255,255,255,0.3);
            color: #fff;
            text-decoration: none;
            font-family: 'Host Grotesk', sans-serif;
            font-size: 0.85rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            transition: all 0.3s ease;
        }
        .cv-link:hover {
            background: rgba(255,255,255,0.1);
        }


        /* WCAG & Custom Utilities */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ------------------------
   LOADER
-------------------------*/

#loader{
    position:fixed;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);

    background:rgba(12,18,28,.35);

    z-index:99999;

    overflow:hidden;

    transition:
    opacity .7s ease,
    visibility .7s ease;
}

/* ------------------------
   Gradient animé
-------------------------*/

.loader-background{

    position:absolute;
    width:200%;
    height:200%;

    background:
    radial-gradient(circle at 20% 20%,#0042ac 0%,transparent 25%),
    radial-gradient(circle at 80% 30%,#000000 0%,transparent 25%),
    radial-gradient(circle at 40% 80%,#f2f3f4 0%,transparent 25%);

    filter:blur(120px);

    animation:backgroundMove 12s linear infinite;
}

@keyframes backgroundMove{

    0%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(-8%,-6%);
    }

    100%{
        transform:translate(0,0);
    }

}

/* ------------------------
   Contenu
-------------------------*/

.loader-content{

    position:relative;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

}

/* ------------------------
   Halo lumineux
-------------------------*/

.glow{

    position:absolute;

    width:180px;
    height:180px;

    border-radius:50%;

    background:#3B82F6;

    filter:blur(55px);

    opacity:.45;

    animation:glow 2.5s ease-in-out infinite;

}

@keyframes glow{

    0%,100%{

        transform:scale(.9);

        opacity:.35;

    }

    50%{

        transform:scale(1.2);

        opacity:.7;

    }

}

/* ------------------------
   Logo
-------------------------*/

.logo{

    position:relative;

    width:120px;

    animation:

    spin 3s linear infinite,

    float 3s ease-in-out infinite;

    filter:

    drop-shadow(0 10px 25px rgba(0,0,0,.35));

}

@keyframes spin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

@keyframes float{

    0%,100%{
        translate:0 0;
    }

    50%{
        translate:0 -12px;
    }

}

/* ------------------------
   Texte
-------------------------*/

.loading-text{

    margin-top:35px;

    color:white;

    font-family:Inter,sans-serif;

    letter-spacing:4px;

    font-size:.9rem;

    text-transform:uppercase;

    opacity:.8;

    animation:blink 1.5s ease infinite;

}

@keyframes blink{

    50%{
        opacity:.35;
    }

}

/* ------------------------
   Disparition
-------------------------*/

#loader.hide{

    opacity:0;

    visibility:hidden;

}
.logo{color: white; }



        @media (max-width: 768px) {
            .bio-portrait {
                margin-bottom: -2px;
            }
            .bio-page {
                padding-top: 80px !important;
            }
            .bio-fixed-title {
                bottom: none !important;
                
            left: 22vw;
            }
            .bio-title-main {
                font-size: 2rem !important;
            }
            .bio-title-sub {
                font-size: 0.65rem !important;
            }
            .bio-inner {
                width: 90%;
                padding: 20px;
                margin: 0 auto;
                height: 56vh;
            }
            html, body {
                overflow: hidden !important;
            }
        }