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

:root{
    --bg:#0d0d0d;
    --y:#FFD000;
    --w:#fff;
    --bk:#000;
    --font:'Outfit', sans-serif;
    --gap:40px;
    --pill-h:38px;
    --pill-r:50px;
    --slide-gap:12px;
    --vp-pct:66%;
    --right-w:66.666%;
}

html,body{
    height:100%;
    overflow:hidden;
    background:var(--bg);
    color:var(--y);
    font-family:var(--font);
    font-weight:700;
}
a{text-decoration:none;color:inherit;}
button{cursor:pointer;font-family:var(--font);font-weight:700;}

/* =========================================
   TOP BAR
   ========================================= */
.topbar{
    position:fixed;
    top:0;left:0;
    width:100%;
    z-index:1000;
    display:grid;
    grid-template-columns:1fr 2fr;
    align-items:center;
    padding:18px 0;
}

/* Work page — navbar pill centrée, pas de gradient sombre */
.topbar-work{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:14px 0;
}
.topbar-work::before{
    display:none;
}
.topbar-work .nav-logo{
    position:absolute;
    left:48px;
    height:40px;
    min-width:120px;
}
.nav-pill{
    /* Centré sans transform — évite les conflits avec backdrop-filter */
    position:fixed;
    top:14px;
    left:0;right:0;
    margin:0 auto;
    width:-webkit-fit-content;
    width:fit-content;
    z-index:1001;
    display:flex;
    align-items:center;
    gap:4px;
    /* Fond semi-transparent + fallback blur */
    background:rgba(10,10,10,0.25);
    backdrop-filter:blur(16px) saturate(160%) brightness(0.95);
    -webkit-backdrop-filter:blur(16px) saturate(160%) brightness(0.95);
    border-radius:50px;
    padding:0 6px;
    overflow:hidden; /* clip le canvas à la forme pill */
}
/* Canvas glass — z-index 0, sous le grain et les boutons */
#navPillCanvas{
    position:absolute;
    inset:0;
    width:100%;height:100%;
    z-index:0;
    pointer-events:none;
    /* Zoom déjà fait côté JS (drawImage zoomé) + blur CSS + déformation SVG */
    filter:url(#glass-distort) blur(10px) saturate(2) brightness(0.5);
    opacity:0;
    transition:opacity 0.5s ease;
}
/* Canvas glass sur le bouton play — même effet que navbar */
#musicPlayCanvas{
    position:absolute;
    inset:0;
    width:100%;height:100%;
    z-index:0;
    pointer-events:none;
    filter:url(#glass-distort) blur(10px) saturate(2) brightness(0.5);
    opacity:0;
    transition:opacity 0.5s ease;
}
/* Alignement pill : pill-start centrée, pill-end alignée au bord droit de la navbar */
.nav-pill.pill-start{ padding-left:0; padding-right:0; }
.nav-pill.pill-end  { padding-right:0; right:48px; left:auto; margin:0; }

/* Grain par-dessus le canvas */
.nav-pill::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:50px;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.1'/%3E%3C/svg%3E");
    background-size:128px;
    opacity:0.4;
    mix-blend-mode:overlay;
    pointer-events:none;
    z-index:1;
}
.nav-pill .fil,
.nav-pill .fil-link{
    position:relative;
    z-index:2;
}
.nav-pill .fil,
.nav-pill .fil-link{
    font-size:0.65rem;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    height:var(--pill-h);
    display:flex;
    align-items:center;
    padding:0 16px;
    border-radius:50px;
    border:none;
    background:none;
    color:var(--w);
    opacity:0.6;
    cursor:pointer;
    text-decoration:none;
    transition:all 0.3s;
}
.nav-pill .fil:hover,
.nav-pill .fil-link:hover{ opacity:1; }
.nav-pill .fil.active{
    opacity:1;
    background:var(--y);
    color:var(--bk);
}

.topbar::before{
    content:'';
    position:absolute;
    top:0;left:0;
    width:100%;
    height:250%;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,0.8) 0%,
        rgba(0,0,0,0.35) 45%,
        transparent 100%
    );
    pointer-events:none;
    z-index:-1;
}

.nav-logo{
    display:block;
    width:auto;
    height:48px;
    background-image:url('../img/logo.png');
    background-size:contain;
    background-repeat:no-repeat;
    background-position:left center;
    opacity:0.8;
    transition:opacity 0.3s;
    flex-shrink:0;
    min-width:80px;
}
.nav-logo:hover{
    opacity:1;
}
.nav{
    grid-column:1;
    grid-row:1;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    padding-left:calc(33.333vw - var(--gap) - 260px);
    gap:6px;
}
.nav-link{
    font-size:0.7rem;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
    height:var(--pill-h);
    display:flex;
    align-items:center;
    padding:0 18px;
    border-radius:var(--pill-r);
    color:var(--w);
    transition:all 0.3s;
}
.nav-link:hover{
    color:var(--w);
    opacity:0.6;
}
.nav-link.active{
    background:var(--y);
    color:var(--bk);
    pointer-events:none;
}

.filters{
    grid-column:2;
    grid-row:1;
    display:flex;
    justify-content:flex-end;
    padding-left:var(--gap);
    padding-right:calc(22.67vw - var(--gap) + 2px);
    gap:6px;
}
.fil{
    font-size:0.65rem;
    font-weight:600;
    letter-spacing:2px;
    text-transform:none;
    height:var(--pill-h);
    display:flex;
    align-items:center;
    padding:0 16px;
    border-radius:var(--pill-r);
    border:none;
    background:none;
    color:var(--w);
    opacity:0.4;
    transition:all 0.3s;
}
.fil:hover{
    opacity:1;
    color:var(--w);
}
.fil.active{
    opacity:1;
    background:var(--y);
    color:var(--bk);
}

/* =========================================
   WATERMARK
   ========================================= */
.watermark{
    display:none;
}

/* =========================================
   CONTENT
   ========================================= */
.content{
    position:fixed;
    top:0;left:0;
    width:100%;
    height:100%;
    display:flex;
    z-index:2;
}

/* LEFT */
.left{
    width:33.333%;
    height:100%;
    position:relative;
}

.info{
    position:absolute;
    right:var(--gap);
    top:0;
    width:260px;
    text-align:right;
    overflow:hidden;
    will-change:top;
}

.info-wipe.wipe-exit{
    animation:wOut 0.3s cubic-bezier(0.16,1,0.3,1) forwards;
}
.info-wipe.wipe-enter{
    animation:wIn 0.5s cubic-bezier(0.16,1,0.3,1) forwards;
}

@keyframes wIn{
    0%{clip-path:inset(100% 0 0 0);transform:translateY(20px);opacity:0;}
    100%{clip-path:inset(0 0 0 0);transform:translateY(0);opacity:1;}
}
@keyframes wOut{
    0%{clip-path:inset(0 0 0 0);transform:translateY(0);opacity:1;}
    100%{clip-path:inset(0 0 100% 0);transform:translateY(-15px);opacity:0;}
}

.info-t{
    font-size:2.8rem;
    font-weight:800;
    line-height:1.0;
    margin-bottom:4px;
    color:var(--y);
    letter-spacing:0.02em;
}
.info-m{
    font-size:0.72rem;
    font-weight:500;
    line-height:1.2;
    margin:0;
    color:var(--w);
}
.info-d{
    font-size:0.68rem;
    font-weight:500;
    line-height:1.2;
    margin:2px 0 0 0;
    color:var(--w);
    opacity:0.35;
}

/* RIGHT */
.right{
    width:66.666%;
    height:100%;
    padding-left:var(--gap);
}

.vp{
    width:66%;
    height:100%;
    overflow:hidden;
    position:relative;
}

.track{
    position:absolute;
    top:0;left:0;
    width:100%;
    will-change:top;
}

.s{
    position:relative;
    width:100%;
    border-radius:4px;
    overflow:hidden;
    cursor:none;
    opacity:1;
    filter:brightness(0.3);
    transform:scale(0.94);
    transition:filter 0.5s, transform 0.5s, box-shadow 0.5s;
    margin-bottom:var(--slide-gap);
}
.s.active{
    filter:brightness(1);
    transform:scale(1);
}
.s:hover{ filter:brightness(0.5); }
.s.active:hover{ filter:brightness(1); }

.s img{
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    display:block;
    transition:transform 0.6s, opacity 0.5s;
}
.s.active img{transform:scale(1.02);}
.s:hover img{transform:scale(1.05);}

/* =========================================
   VIDEO HOVER — VIMEO PRELOAD
   ========================================= */
.s-preview{
    position:absolute;
    top:0;left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:1;
    overflow:hidden;
    border-radius:4px;
}

.s-preview iframe,
.s-preview video{
    width:100%;
    height:100%;
    border:none;
    transform:scale(1.05);
    object-fit:cover;
}

/* L'image est AU-DESSUS de la preview par défaut */
.s img{
    position:relative;
    z-index:3;
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    display:block;
    transition:transform 0.6s, opacity 0.5s ease;
}

/* Au hover sur le slide actif + prêt → on cache l'image pour révéler la vidéo dessous */
.s.preview-ready.hovering img{
    opacity:0;
}

.s.active img{transform:scale(1.02);}
.s:hover img{transform:scale(1.05);}
/* =========================================
   OVERLAY VIDEO
   ========================================= */
.overlay{
    position:fixed;
    top:0;left:0;
    width:100%;
    height:100%;
    background:#000;
    z-index:2000;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:opacity 0.4s ease, visibility 0.4s ease;
}
.overlay.open{
    opacity:1;
    visibility:visible;
}

.overlay-close{
    position:absolute;
    top:25px;right:30px;
    background:none;
    border:none;
    color:var(--y);
    font-size:1.8rem;
    cursor:pointer;
    transition:color 0.3s, transform 0.3s;
    z-index:2001;
}
.overlay-close:hover{
    color:var(--w);
    transform:scale(1.2);
}

.overlay-content{
    width:75%;
    max-width:1100px;
    transform:translateY(30px) scale(0.95);
    transition:transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.overlay.open .overlay-content{
    transform:translateY(0) scale(1);
}

.overlay-player{
    width:100%;
    aspect-ratio:16/9;
    background:var(--bk);
    border-radius:4px;
    overflow:hidden;
}
.overlay-player iframe{
    width:100%;
    height:100%;
    border:none;
}

.overlay-info{
    margin-top:20px;
    text-align:center;
}
.overlay-title{
    font-size:1.3rem;
    font-weight:800;
    color:var(--w);
    line-height:1.1;
    margin-bottom:6px;
}
.overlay-meta{
    font-size:0.7rem;
    font-weight:500;
    color:var(--w);
    opacity:0.4;
}

/* =========================================
   OVERLAY PAGE PROJET — monte du bas
   ========================================= */
.page-overlay{
    position:fixed;
    top:0;left:0;
    width:100%;
    height:100%;
    z-index:5000;
    background:#040810;
    transform:translateY(100%);
    transition:transform 0.75s cubic-bezier(0.16,1,0.3,1);
    overflow:hidden;
    display:flex;
    flex-direction:column;
}
.page-overlay.open{
    transform:translateY(0);
}
.page-overlay-close{
    position:absolute;
    top:25px;
    left:50%;
    transform:translateX(-50%);
    z-index:5001;
    background:none;
    border:none;
    color:var(--y);
    font-size:1.6rem;
    font-weight:800;
    cursor:pointer;
    opacity:0;
    transition:opacity 0.4s 0.5s, color 0.3s;
    pointer-events:none;
    line-height:1;
}
.page-overlay.open .page-overlay-close{
    opacity:1;
    pointer-events:auto;
}
.page-overlay-close:hover{
    color:var(--y);
}
.page-overlay-inner{
    width:100%;
    flex:1;
    overflow:hidden;
}
.page-overlay-inner iframe{
    width:100%;
    height:100%;
    border:none;
    display:block;
}

/* =========================================
   PAGE HERO FULLSCREEN
   ========================================= */
.hero-video{
    position:fixed;
    top:0;left:0;
    width:100%;
    height:100%;
    z-index:0;
    overflow:hidden;
}

.hero-video video{
    width:100vw;
    height:56.25vw;
    min-height:100vh;
    min-width:177.78vh;
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    object-fit:cover;
}

.hero-video iframe{
    width:100vw;
    height:56.25vw;
    min-height:100vh;
    min-width:177.78vh;
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    border:none;
}

.hero-video-overlay{
    position:absolute;
    top:0;left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.55);
    z-index:1;
}

.hero-center{
    position:fixed;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    z-index:10;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}

.hero-name{
    font-size:clamp(2rem, 6vw, 5rem);
    font-weight:800;
    letter-spacing:0.15vw;
    color:var(--y);
    text-decoration:none;
    line-height:1;
    transition:color 0.3s;
}
.hero-name:hover{
    color:var(--w);
}

.hero-role{
    font-size:clamp(0.6rem, 1.2vw, 0.85rem);
    font-weight:500;
    letter-spacing:4px;
    text-transform:uppercase;
    color:var(--y);
    opacity:0.4;
}

.hero-enter{
    margin-top:40px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    text-decoration:none;
    color:var(--y);
    opacity:0.5;
    transition:opacity 0.3s;
}
.hero-enter:hover{
    opacity:1;
}

.hero-enter-arrow{
    font-size:1.4rem;
    animation:bounceDown 2s infinite;
}

@keyframes bounceDown{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(8px);}
}

.hero-enter-text{
    font-size:0.6rem;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
}

/* =========================================
   PAGE PROJET
   ========================================= */
html:has(.page-project){
    overflow-y:auto !important;
    overflow-x:hidden;
    height:auto !important;
}

.page-project{
    overflow-x:hidden;
    overflow-y:auto !important;
    height:auto !important;
}

.project-hero{
    padding:120px var(--gap) 40px;
    max-width:900px;
    margin:0 auto;
    text-align:center;
}

.project-title{
    font-size:3rem;
    font-weight:800;
    color:var(--y);
    letter-spacing:4px;
    text-transform:uppercase;
    line-height:1;
    margin-bottom:18px;
}

.project-meta{
    display:flex;
    justify-content:center;
    gap:24px;
    font-size:0.72rem;
    font-weight:600;
    color:var(--y);
    opacity:0.5;
    margin-bottom:20px;
}

.project-meta span{
    position:relative;
}
.project-meta span:not(:last-child)::after{
    content:'·';
    position:absolute;
    right:-14px;
    color:var(--y);
    opacity:0.4;
}

.project-desc{
    font-size:0.78rem;
    font-weight:500;
    line-height:1.7;
    color:var(--y);
    opacity:0.4;
    max-width:550px;
    margin:0 auto;
}

.project-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:12px;
    padding:0 var(--gap) 80px;
    max-width:1200px;
    margin:0 auto;
}

.grid-item{
    position:relative;
    border-radius:4px;
    overflow:hidden;
    cursor:pointer;
}

.grid-item img{
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    display:block;
    transition:transform 0.6s cubic-bezier(0.16,1,0.3,1);
}

.grid-item:hover img{
    transform:scale(1.05);
}

.grid-item-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.5);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    opacity:0;
    transition:opacity 0.4s;
}

.grid-item:hover .grid-item-overlay{
    opacity:1;
}

.grid-item-play{
    font-size:1.8rem;
    color:var(--y);
    transition:transform 0.3s;
}

.grid-item:hover .grid-item-play{
    transform:scale(1.2);
}

.grid-item-label{
    font-size:0.65rem;
    font-weight:600;
    letter-spacing:1px;
    color:var(--w);
    text-align:center;
    padding:0 10px;
}


/* =========================================
   CURSEUR PERSONNALISÉ — slides
   ========================================= */
.custom-cursor{
    position:fixed;
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--y);
    pointer-events:none;
    z-index:9999;
    transform:translate(-50%,-50%) scale(0);
    transition:transform 0.2s cubic-bezier(0.16,1,0.3,1),
               opacity 0.2s ease;
    opacity:0;
    mix-blend-mode:difference;
    will-change:transform,left,top;
}
.custom-cursor.visible{
    transform:translate(-50%,-50%) scale(1);
    opacity:1;
}
.custom-cursor.clicking{
    transform:translate(-50%,-50%) scale(0.7);
}

/* =========================================
   SELECTION
   ========================================= */
::selection{background:var(--y);color:var(--bk);}


/* =========================================
   VIDEO DE FOND — PAGE PROJET
   ========================================= */
.bg-video{
    position:fixed;
    top:0;left:0;
    width:100%;
    height:100%;
    z-index:0;
    overflow:hidden;
}
.bg-video video{
    width:100vw;
    height:56.25vw;
    min-height:100vh;
    min-width:177.78vh;
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    object-fit:cover;
    opacity:0;
    transition:opacity 0.8s ease;
}
.bg-video-overlay{
    position:absolute;
    top:0;left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.65);
    z-index:1;
}

/* =========================================
   PAGE PROJET — CARROUSEL
   ========================================= */
.page-project{
    overflow:hidden;
    height:100%;
}

/* =========================================
   STYLES EXCLUSIFS PAGE PROJET (carrousel)
   Ne pas modifier — scopé sous .page-project
   ========================================= */
.page-project .info-carousel{
    position:fixed;
    left:0;
    width:100%;
    text-align:center;
    z-index:10;
    pointer-events:none;
}
.page-project .info-carousel .info-t{
    font-size:clamp(2rem, 3.5vw, 3.2rem);
    font-weight:800;
    line-height:1.0;
    letter-spacing:0em;
    margin-bottom:8px;
    color:var(--y);
}
.page-project .info-carousel .info-line{
    display:flex;
    justify-content:center;
    gap:8px;
    align-items:center;
}
.page-project .info-sep{
    opacity:0.3;
    color:var(--y);
}
.page-project .info-clip{
    position:fixed;
    left:0;
    width:100%;
    text-align:center;
    z-index:10;
    pointer-events:none;
    overflow:hidden;
    max-height:0;
    transition:max-height 0.5s cubic-bezier(0.16,1,0.3,1);
}
.page-project .info-clip.clip-in{
    max-height:60px;
}
.page-project .info-d{
    font-size:1.9rem;
    font-weight:800;
    letter-spacing:0.02em;
    padding-top:0;
    color:var(--y);
    opacity:1;
}

/* Carrousel centré verticalement */
.carousel-wrap{
    position:fixed;
    top:50%;
    left:0;
    transform:translateY(-50%);
    width:100vw;
    height:auto;
    z-index:10;
    overflow:hidden;
    display:flex;
    align-items:center;
    -webkit-mask-image:linear-gradient(to right, transparent 0%, black 18%, black 82%, transparent 100%);
    mask-image:linear-gradient(to right, transparent 0%, black 18%, black 82%, transparent 100%);
}
.carousel{
    display:flex;
    align-items:center;
    gap:20px;
    user-select:none;
    will-change:transform;
}
.carousel .s{
    flex-shrink:0;
    border-radius:4px;
    overflow:hidden;
    opacity:1;
    transform:scale(0.92);
    transition:transform 0.5s cubic-bezier(0.25,0.1,0.25,1),
               filter 0.5s;
    cursor:pointer;
    filter:brightness(0.55);
}
.carousel .s.active{
    transform:scale(1);
    filter:brightness(1);
}
.carousel .s img{
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    display:block;
    pointer-events:none;
}


/* =========================================
   MUSIC VIEW
   ========================================= */
.music-view{
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    z-index:2;
    background:#000;
}

/* Fond vidéo */
/* Vidéo plus visible */
/* Fond vidéo */
.music-bg{
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
}

/* Slots fond — slide haut/bas */
.music-bg-slot{
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    background:#000;
    transform:translateY(100vh);
    will-change:transform;
}
.music-bg-slot video{
    width:100vw;
    height:56.25vw;
    min-height:100vh;
    min-width:177.78vh;
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    object-fit:cover;
    opacity:0.7;
}
.music-bg-img{
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    background-size:cover;
    background-position:center;
    opacity:0.7;
}

.music-bg-overlay{
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    background:rgba(0,0,0,0.35);
    z-index:1;
    pointer-events:none;
}

/* Grain */
.music-bg::after{
    content:'';
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    z-index:2;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
    background-repeat:repeat;
    background-size:256px 256px;
    opacity:0.4;
    pointer-events:none;
    mix-blend-mode:overlay;
}

/* Play — sous le bloc info */
.music-play{
    position:relative;
    display:block;
    margin-top:16px;
    z-index:10;
    pointer-events:auto;
    width:135px;
    height:45px;
    border-radius:50px;
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border:none;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    overflow:hidden;
    transition:transform 0.35s cubic-bezier(0.16,1,0.3,1), background 0.3s;
}
.music-play::before{
    display:none;
}
.music-play::after{
    content:'';
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    background:rgba(255,208,0,0.22);
    border:none;
    border-radius:50px;
    box-sizing:border-box;
    z-index:1;
    pointer-events:none;
}
.music-play:hover{
    background:rgba(255,208,0,0.12);
}
.music-play svg{
    width:22px;
    height:22px;
    color:transparent;
    position:relative;
    z-index:2;
    margin-left:2px;
}
/* Colonne thumbs gauche — hauteur exacte de 5 thumbs, feather haut/bas */
.music-thumbs{
    position:absolute;
    top:50%;
    left:48px;
    transform:translateY(-50%);
    z-index:10;
    width:240px;
    /* hauteur = 5 thumbs (aspect 16/9 sur 240px = 135px) + 4 gaps de 10px */
    height:calc(5 * 135px + 4 * 10px); /* = 715px */
    overflow:hidden;
    -webkit-mask-image:linear-gradient(
        to bottom,
        transparent 0%,
        black 18%,
        black 82%,
        transparent 100%
    );
    mask-image:linear-gradient(
        to bottom,
        transparent 0%,
        black 18%,
        black 82%,
        transparent 100%
    );
}

/* Track intérieur qui se translate */
.music-thumbs-track{
    display:flex;
    flex-direction:column;
    gap:10px;
    will-change:transform;
    transition:transform 0.55s cubic-bezier(0.16,1,0.3,1);
}

.music-thumb{
    width:240px;
    height:135px;
    flex-shrink:0;
    border-radius:10px;
    overflow:hidden;
    cursor:pointer;
    filter:brightness(0.25);
    transform:scale(0.9);
    transition:filter 0.4s ease, transform 0.4s ease, border-color 0.3s;
    border:2px solid transparent;
    box-sizing:border-box;
}
.music-thumb:hover{ filter:brightness(0.55); transform:scale(0.95); }
.music-thumb.active{
    filter:brightness(1);
    transform:scale(1);
    border:1px solid rgba(255,208,0,0.5);
}
.music-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* Infos + Play — à droite des thumbs, centré verticalement */
.music-info{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    left:calc(48px + 240px + 48px);
    z-index:10;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.music-label{
    display:block;
    font-size:0.75rem;
    font-weight:500;
    letter-spacing:1px;
    text-transform:none;
    color:#fff;
    opacity:0.7;
    margin:0;
}

.music-client{
    font-size:clamp(2.8rem, 5vw, 4rem);
    font-weight:800;
    color:var(--y);
    letter-spacing:0;
    line-height:1;
    margin:0;
    white-space:nowrap;
}

.music-title{
    font-size:clamp(2rem, 3.5vw, 2.8rem);
    font-weight:600;
    color:var(--y);
    font-style:italic;
    letter-spacing:-0.06em;
    line-height:1;
    margin:0;
    white-space:nowrap;
}

.music-artist{
    font-size:clamp(2rem, 3.5vw, 2.8rem);
    font-weight:600;
    color:var(--y);
    letter-spacing:-0.02em;
    line-height:1;
    margin:0;
    white-space:nowrap;
}

.music-desc{
    font-size:0.75rem;
    font-weight:500;
    letter-spacing:1px;
    text-transform:none;
    color:#fff;
    opacity:1;
    margin:0;
    white-space:nowrap;
}

/* doublon supprimé — règles dans le premier bloc .music-play */

/* =========================================
   MOBILE ≤ 768px
   ========================================= */
@media(max-width:768px){

    /* Music view */
    .music-thumbs{ width:110px; padding:0 12px; }
    .music-thumb{ width:86px; }
    .music-title{ font-size:1.6rem; }
    .music-play{ width:64px;height:64px; }

    /* dp/ pages — topbar ancien format */
    .topbar{
        grid-template-columns:1fr 1fr;
        padding:14px 20px;
    }
    .nav{
        grid-column:1;
        padding-left:0;
        justify-content:flex-start;
        gap:4px;
    }
    .nav-link{
        font-size:0.6rem;
        letter-spacing:2px;
        height:24px;
        padding:0 12px;
    }
    .filters{
        grid-column:2;
        justify-content:flex-end;
        padding-right:0;
        gap:4px;
    }
    .fil{
        font-size:0.55rem;
        letter-spacing:1px;
        height:24px;
        padding:0 10px;
    }

    /* Hero mobile */
    .hero-name{letter-spacing:2px;}
    .hero-name:hover{letter-spacing:4px;}
    .hero-role{letter-spacing:2px;}
    .hero-enter{margin-top:30px;}

    /* Overlay */
    .overlay-content{width:95%;}
    .overlay-close{top:15px;right:15px;font-size:1.4rem;}
    .overlay-title{font-size:1rem;}
    .overlay-meta{font-size:0.62rem;}

    /* Pas de video hover sur mobile */
    .s-preview{display:none !important;}

    /* Projet mobile (dp/ pages) */
    .project-hero{padding:90px 20px 30px;}
    .project-title{font-size:1.8rem;letter-spacing:2px;}
    .project-meta{gap:16px;font-size:0.62rem;}
    .project-desc{font-size:0.68rem;}
    .project-grid{
        grid-template-columns:repeat(2, 1fr);
        gap:8px;
        padding:0 20px 60px;
    }
}

/* =========================================
   MOBILE — 380px
   ========================================= */
@media(max-width:380px){

    .topbar{
        grid-template-columns:1fr;
        gap:6px;
        padding:10px 15px;
    }
    .nav{
        grid-column:1;
        grid-row:1;
        justify-content:center;
    }
    .filters{
        grid-column:1;
        grid-row:2;
        justify-content:center;
    }
    .nav-link{
        font-size:0.55rem;
        padding:0 10px;
        letter-spacing:1px;
    }
    .fil{
        font-size:0.5rem;
        padding:0 8px;
    }
    .info-t{font-size:1rem;}

    .project-grid{grid-template-columns:1fr;}
    .project-title{font-size:1.4rem;}
}

/* =========================================
   SPA — SECTIONS EMPILÉES
   ========================================= */

/* Chaque section occupe tout le viewport */
.spa-page{
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    will-change:transform,opacity;
    pointer-events:none;
    /* transform crée un nouveau containing-block pour les position:fixed enfants */
}

/* Section active : visible et interactive */
.spa-page.spa-active{
    pointer-events:auto;
    z-index:20;
}

/* Sections en attente : invisibles, décalées hors écran */
.spa-page.spa-above{
    opacity:0;
    transform:translateY(-30px);
    z-index:8;
}
.spa-page.spa-below{
    opacity:0;
    transform:translateY(30px);
    z-index:8;
}

/* =========================================
   CONTACT — nav links (class distincte de .fil
   pour éviter l'interférence avec main.js)
   ========================================= */
.contact-fil{
    font-size:0.65rem;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    height:var(--pill-h);
    display:flex;
    align-items:center;
    padding:0 16px;
    border-radius:50px;
    border:none;
    background:none;
    color:var(--w);
    opacity:0.6;
    cursor:pointer;
    text-decoration:none;
    transition:all 0.3s;
    position:relative;
    z-index:2;
}
.contact-fil:hover{ opacity:1; }
.contact-fil.active{
    opacity:1;
    background:var(--y);
    color:var(--bk);
}

/* =========================================
   CONTACT — styles inline déplacés ici
   ========================================= */
.contact-label{
    font-size:0.6rem;
    font-weight:600;
    letter-spacing:6px;
    text-transform:uppercase;
    color:var(--w);
    opacity:0.3;
    margin-bottom:28px;
    display:block;
}
.contact-mail{
    font-size:clamp(2rem, 5vw, 4.2rem);
    font-weight:800;
    color:var(--y);
    text-decoration:none;
    letter-spacing:0.06em;
    line-height:1;
    display:inline-block;
    transition:color 0.3s ease, letter-spacing 0.5s cubic-bezier(0.16,1,0.3,1);
}
.contact-mail:hover{
    color:var(--w);
    letter-spacing:0em;
}
.contact-center{
    position:fixed;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    z-index:10;
    text-align:center;
}
/* =========================================
   MOBILE SPA ≤ 768px
   ========================================= */
@media (max-width:768px){

    /* ── Masquer les éléments desktop ── */
    .topbar,
    .nav-pill,
    .nav-logo,
    #immerView,
    .content,
    .custom-cursor,
    .contact-center          { display:none !important; }

    /* Hero : jamais visible (mobile.js navigue vers content au boot) */
    #spa-hero                { display:none !important; }

    /* Pas de will-change sur les sections SPA (évite le containing-block sur position:fixed) */
    .spa-page                { will-change:auto !important; }

    /* Les sections SPA ne doivent pas bloquer les touches mobiles (mob-viewport, mob-header) */
    .spa-page                { pointer-events:none !important; }
    /* Ré-activer seulement les overlays quand ils sont ouverts */
    .overlay.open,
    .page-overlay.open       { pointer-events:auto !important; }

    /* Fond noir + blocage des clics quand un overlay vidéo est ouvert */
    body:has(.overlay.open) .mob-header,
    body:has(.overlay.open) .mob-viewport,
    body:has(.page-overlay.open) .mob-header,
    body:has(.page-overlay.open) .mob-viewport { pointer-events:none !important; }

    body:has(.overlay.open)::before,
    body:has(.page-overlay.open)::before {
        content:'';
        position:fixed;
        inset:0;
        background:#000;
        z-index:1998;
        pointer-events:auto;
    }

    /* ── HEADER ── */
    .mob-header{
        display:flex;
        position:fixed;
        top:0;left:0;right:0;
        height:52px;
        padding:0 20px;
        align-items:center;
        justify-content:space-between;
        z-index:1010;
        background:rgba(13,13,13,0.9);
        backdrop-filter:blur(14px) saturate(160%);
        -webkit-backdrop-filter:blur(14px) saturate(160%);
    }
    .mob-logo{
        display:block;
        width:90px; height:38px;
        background-image:url('../img/logo.png');
        background-size:contain;
        background-repeat:no-repeat;
        background-position:left center;
        opacity:0.85;
        cursor:default;            /* pas cliquable */
        pointer-events:none;
    }
    .mob-section-btn{
        background:none; border:none;
        color:var(--y);
        font-family:var(--font);
        font-size:0.75rem; font-weight:700;
        letter-spacing:2.5px; text-transform:uppercase;
        cursor:pointer;
        padding:8px 0;
        display:flex; align-items:center; gap:7px;
    }
    .mob-chevron{
        font-style:normal; font-size:0.6rem;
        opacity:0.55;
        transition:transform 0.22s ease;
        display:inline-block;
    }
    .mob-section-btn.open .mob-chevron{ transform:rotate(180deg); }

    /* ── DROPDOWN ── */
    .mob-drop{
        position:fixed;
        top:52px; right:16px;
        background:rgba(13,13,13,0.97);
        backdrop-filter:blur(20px) saturate(160%);
        -webkit-backdrop-filter:blur(20px) saturate(160%);
        border-radius:14px;
        padding:6px 0;
        z-index:1011;
        min-width:150px;
        display:none; flex-direction:column;
        box-shadow:0 8px 32px rgba(0,0,0,0.55);
    }
    .mob-drop.open{ display:flex; }
    .mob-drop-item{
        display:block;
        padding:11px 20px;
        color:var(--w);
        font-family:var(--font);
        font-size:0.75rem; font-weight:700;
        letter-spacing:2.5px; text-transform:uppercase;
        opacity:0.5;
        transition:opacity 0.2s, color 0.2s;
    }
    .mob-drop-item:active,
    .mob-drop-item.active{ opacity:1; color:var(--y); }

    /* ── VIEWPORT (conteneur clippé des panels) ── */
    .mob-viewport{
        position:fixed;
        top:52px; left:0; right:0; bottom:0;
        overflow:hidden;
        z-index:5;
        background:var(--bg);
    }

    /* ── PANEL (occupe tout le viewport) ── */
    .mob-panel{
        position:absolute;
        inset:0;
    }

    /* ── Contenu WORK dans le panel ── */
    .mob-work{
        width:100%; height:100%;
        display:flex; flex-direction:column;
        align-items:center;
        justify-content:center;
        padding:12px 0 8px;
    }

    /* ── Flèches ── */
    .mob-arrow{
        color:var(--y);
        font-size:1.5rem;
        line-height:1;
        flex-shrink:0;
        padding:6px 0;
        user-select:none;
        pointer-events:none;
        transition:opacity 0.3s;
        opacity:0.7;
    }
    .mob-arrow.hidden{ opacity:0; }

    /* ── Vignette 16/9 ── */
    .mob-thumb-wrap{
        width:100%;
        aspect-ratio:16/9;
        position:relative;
        flex-shrink:0;
        overflow:hidden;
        cursor:pointer;                    /* iOS : active le click sur un div */
        -webkit-tap-highlight-color:transparent;
    }
    .mob-thumb-img{
        width:100%; height:100%;
        object-fit:cover;
        display:block;
        -webkit-tap-highlight-color:transparent;
    }
    .mob-play-hint{
        position:absolute;
        top:50%; left:50%;
        transform:translate(-50%,-50%);    /* centré h+v dans la vignette */
        width:52px; height:52px;
        border-radius:50%;
        background:rgba(255,208,0,0.2);
        backdrop-filter:blur(6px);
        -webkit-backdrop-filter:blur(6px);
        display:flex; align-items:center; justify-content:center;
        pointer-events:none;
    }
    .mob-play-hint::after{
        content:'';
        display:block;
        width:0; height:0;
        border-style:solid;
        border-width:8px 0 8px 15px;
        border-color:transparent transparent transparent var(--y);
        margin-left:4px;
    }

    /* ── Bloc info ── */
    .mob-info{
        width:100%;
        padding:12px 20px 6px;
        display:flex; flex-direction:column; gap:3px;
        flex-shrink:0;
    }
    .mob-info-label{
        font-size:0.5rem; letter-spacing:4px;
        text-transform:uppercase;
        color:var(--w); opacity:0.35;
        margin-bottom:1px;
    }
    .mob-info-title{
        font-size:1.05rem; font-weight:800;
        color:var(--y); letter-spacing:0.01em; line-height:1.15;
    }
    .mob-info-artist{
        font-size:0.82rem; font-weight:700;
        color:var(--w); opacity:0.65; margin-top:1px;
    }
    .mob-info-client{
        font-size:0.62rem; font-weight:600;
        color:var(--w); opacity:0.35;
        letter-spacing:1px; text-transform:uppercase; margin-top:2px;
    }

    /* ── Contenu CONTACT dans le panel ── */
    .mob-contact{
        width:100%; height:100%;
        display:flex; align-items:center; justify-content:center;
        padding:0 24px;
    }
    .mob-contact-mail{
        font-size:clamp(1rem,5vw,1.8rem);
        font-weight:800; color:var(--y);
        letter-spacing:0.04em; text-align:center;
        word-break:break-all;
    }

}