:root {
    --bg-color: #050505;
    --text-color: #E0E0E0;
    --accent-color: #FFF;
    --meta-color: #00FF41;
}

/* Force le curseur caché partout par défaut */
* { cursor: none !important; }

body {
    margin: 0; padding: 0;
    background-color: var(--bg-color); color: var(--text-color);
    font-family: 'Courier New', Courier, monospace;
    font-size: 15px;
    overflow: hidden; 
    height: 100vh; width: 100vw;
    user-select: none;
    -webkit-font-smoothing: antialiased;
}

/* --- ETAT FOCUS --- */
.nav-menu, #projectList { display: flex; }
#projectDetailInfo { display: none; }

.header-controls { 
    position: fixed; top: 25px; left: 50%; transform: translateX(-50%);
    display: none; gap: 40px; align-items: center; 
    z-index: 20000; pointer-events: auto;
}

body.project-focus .header-controls { display: flex; }
body.project-focus .nav-menu { display: none !important; }
body.project-focus #projectList { display: none !important; }
body.project-focus #projectDetailInfo { display: block; }

.mobile-overlay-close {
    display: none; position: fixed; bottom: 20px; right: 20px;
    z-index: 999999; background: #000; color: #FFF;
    padding: 10px 20px; border: 1px solid #FFF;
    font-weight: bold; font-size: 15px; cursor: pointer; pointer-events: auto;
}

/* --- CURSEUR --- */
#customCursor {
    position: fixed; top: 0; left: 0; width: 45px; height: 45px;
    background-color: #FFF; border-radius: 50%; pointer-events: none; z-index: 99999;
    mix-blend-mode: difference; transform: translate(-50%, -50%); transition: transform 0.05s ease-out;
    display: flex; justify-content: center; align-items: center;
}
#customCursor::before { content: ''; position: absolute; background-color: #000; width: 1px; height: 8px; }
#customCursor::after { content: ''; position: absolute; background-color: #000; width: 8px; height: 1px; }

#cursorCoords {
    position: fixed; bottom: 20px; right: 20px; z-index: 2000;
    font-size: 14px; color: #FFF; font-family: monospace; pointer-events: none; mix-blend-mode: difference;
}

/* --- SPLASH SCREEN --- */
#splashScreen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    background-color: #000; z-index: 10000; overflow: hidden;
}
#splashBg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    opacity: 0.4; filter: grayscale(100%); z-index: 1; pointer-events: none;
    will-change: opacity;
}
#logoWrapper {
    position: absolute; top: 35%; width: 60%; max-width: 650px; 
    display: flex; justify-content: center; cursor: pointer; z-index: 2;
    mix-blend-mode: difference;
}
#splashLogo { 
    width: 100%; height: auto; object-fit: contain; 
    filter: brightness(0) invert(1);
}

#splashFooter {
    position: absolute; bottom: 40px; left: 40px; z-index: 3;
    font-size: 13px; color: #FFF; display: flex; flex-direction: column; gap: 6px; font-weight: bold;
    text-shadow: 0 0 5px rgba(0,0,0,0.8);
}
#splashFooter a { text-decoration: none; color: #FFF; border-bottom: 1px solid transparent; }
#splashFooter a:hover { border-bottom: 1px solid #FFF; }

/* --- MAIN CONTENT --- */
#mainContent { opacity: 0; visibility: hidden; }
#randomBg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.2;
    background-size: cover; background-position: center; filter: grayscale(100%) contrast(1.2);
    pointer-events: none; transition: opacity 1s; background-image: none;
}

/* MODIFICATION ICI : Z-INDEX AUGMENTÉ POUR ÊTRE AU DESSUS DE TOUT SUR MOBILE */
.sticky-triggers {
    position: fixed; top: 25px; right: 25px; z-index: 20000; display: flex; gap: 10px;
}
.trigger-sq { width: 14px; height: 14px; cursor: pointer; transition: transform 0.2s; }
.trigger-sq.white-fill { background-color: #FFF; border: 1px solid #FFF; }
.trigger-sq.white-border { background-color: transparent; border: 1px solid #FFF; }
.trigger-sq:hover { transform: scale(1.1); }

/* NOUVEAU : OVERLAY POUR MOBILE */
#mobileStickyOverlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.85); /* Fond noir presque opaque */
    z-index: 15000; /* Juste en dessous des triggers et de la note */
    backdrop-filter: blur(5px);
}

header {
    position: fixed; top: 25px; left: 25px; bottom: 25px;
    z-index: 1000; width: 330px; display: flex; flex-direction: column; pointer-events: none;
}
header > * { pointer-events: auto; }

.logo-container {
    background: transparent; padding: 6px 0px; border: 1px solid transparent;
    display: inline-block; transform: scale(1.6); transform-origin: top left;
    margin-bottom: 50px; cursor: pointer;
    mix-blend-mode: difference;
}
.header-logo { 
    height: 22px; width: auto; object-fit: contain; transition: filter 0.2s; 
    filter: brightness(0) invert(1);
}
.logo-container:hover .header-logo { opacity: 0.7; }

#backButton, #resetButton {
    font-size: 20px; cursor: pointer; text-transform: uppercase; border: none;
    transition: all 0.2s ease-out; font-weight: normal; padding: 0; margin: 0; letter-spacing: 1px;
}
#backButton { color: #AAA; }
#resetButton { color: #FFF; } 
#backButton:hover, #resetButton:hover { color: var(--meta-color); transform: scale(1.1); }

.nav-menu, #projectList { flex-direction: column; gap: 8px; padding: 0; width: 100%; }
.nav-menu { margin-bottom: 60px; }
#projectList { overflow-y: auto; padding-right: 10px; scrollbar-width: none; }
#projectList::-webkit-scrollbar { display: none; }

.nav-item, .project-link {
    font-size: 15px; color: #AAA; text-decoration: none; padding: 4px 0;
    border-left: 2px solid transparent; transition: all 0.2s ease-out;
    text-transform: uppercase; cursor: pointer; display: block;
}
.nav-item:hover, .project-link:hover {
    color: var(--meta-color); border-left: 10px solid var(--meta-color); padding-left: 15px;
}

.project-preview-img {
    position: fixed; left: 380px; top: 50%; transform: translateY(-50%);
    max-width: 600px; max-height: 600px; border: 1px solid #FFF; background: #000; z-index: 600;
    display: none; pointer-events: none; box-shadow: 0 10px 40px rgba(0,0,0,1); object-fit: contain;
}

#projectDetailInfo {
    position: fixed; bottom: 20px; left: 25px; z-index: 1000; pointer-events: none;
    font-family: 'Courier New', monospace; color: #FFF; font-size: 15px; line-height: 1.4; text-transform: uppercase;
}
.p-title { font-weight: bold; margin-bottom: 5px; color: var(--meta-color); display: block; }
.p-desc { display: block; color: #DDD; }

.sticky-note {
    position: absolute; width: 240px; padding: 18px;
    font-family: 'Courier New', monospace; font-size: 13px; line-height: 1.4;
    cursor: grab; pointer-events: auto; display: none;
    box-shadow: 10px 10px 30px rgba(0,0,0,0.8); z-index: 3000; border: 1px solid #FFF;
}
.sticky-note:active { cursor: grabbing; z-index: 9999999; }
.sticky-note.black-theme { background: #000; color: #FFF; border-color: #FFF; }
.sticky-note.white-theme { background: #FFF; color: #000; border-color: #000; }
.sticky-note.white-theme .note-header { color: #000; }
.note-header { font-weight: bold; margin-bottom: 10px; font-size: 13px; color: var(--meta-color); }
.note-link-bold { color: #000; text-decoration: none; font-weight: bold; border-bottom: 2px solid #000; font-size: 14px; }
.note-link { color: var(--meta-color); text-decoration: none; border-bottom: 1px dotted var(--meta-color); }

/* --- DOCUMENTS & IMAGES --- */
#desktopSurface { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 200; }

.doc-container {
    position: absolute; 
    width: 300px; 
    height: auto; 
    background: transparent; opacity: 0;
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                top 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                left 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, width, top, left;
    display: flex; flex-direction: column;
    box-shadow: 10px 10px 40px rgba(0,0,0,0.9);
    transform-origin: center center; 
    pointer-events: auto;
}

.doc-container.zoomed {
    position: fixed !important;
    top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important; height: auto !important;
    max-width: 90vw; max-height: 90vh;
    z-index: 9999998 !important; /* Note: Légèrement en dessous des sticky notes en drag */
    box-shadow: 0 0 100px rgba(0,0,0,1);
    border: none;
    display: flex; justify-content: center; align-items: center;
    background: transparent;
}

.doc-container.zoomed .doc-img {
    width: auto; height: auto;
    max-width: 90vw; max-height: 90vh;
    border: 1px solid #FFF;
    object-fit: contain;
}
.doc-container.zoomed .meta-expand-btn { display: none; }
.doc-container.zoomed .meta-code-panel { display: none !important; }

.doc-container:active { box-shadow: 0 0 15px #FFF; z-index: 9999 !important; }
.doc-container.shrunk { transform: scale(0.7) !important; }

.doc-img { 
    width: 100%; height: auto; display: block; pointer-events: none; 
    object-fit: contain; background: #000; border: 1px solid #FFF; 
}

.meta-expand-btn {
    position: absolute; bottom: 8px; right: 8px;
    width: 20px; height: 20px; 
    display: flex; justify-content: center; align-items: center; 
    cursor: pointer;
    font-family: 'Courier New', monospace; font-weight: bold; font-size: 14px; 
    color: #000; background: #FFF; border-radius: 50%;
    z-index: 30; opacity: 0; transition: opacity 0.2s ease-in; pointer-events: auto;
}

.meta-code-panel {
    position: absolute;
    bottom: 35px; /* Juste au dessus du bouton i */
    right: 0px;   /* Collé à droite, s'étend vers la gauche */
    background: rgba(0,0,0,0.9);
    border: 1px solid #FFF;
    color: #FFF;
    font-family: 'Courier New', monospace; font-size: 11px; line-height: 1.4;
    padding: 10px;
    width: 220px; /* Largeur fixe pour la languette */
    display: none; /* Caché par défaut */
    z-index: 40;
    pointer-events: none;
    text-align: left;
}
.doc-container.expanded .meta-code-panel { display: block; }

.kwd { color: #BBB; font-weight: bold; } 
.str { color: #FFF; } 
.int { color: var(--meta-color); }

/* --- OVERLAYS --- */
.content-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; 
    background: #050505; z-index: 500; display: none; 
    overflow-y: auto; padding: 60px 20px; box-sizing: border-box;
}
.text-layout { max-width: 900px; margin: 0 auto; padding-left: 20px; border-left: 1px solid #333; min-height: 80vh; padding-bottom: 100px; }
.text-layout h1 { font-size: 22px; border-bottom: 1px solid #FFF; padding-bottom: 20px; margin-bottom: 40px; letter-spacing: 2px; text-transform: uppercase; }
.text-layout h1:hover { color: #FFF; border-color: #FFF; }
.bio-name-box { border: 1px solid #FFF; padding: 4px 10px; display: inline-block; font-weight: bold; font-size: 13px; color: #FFF; margin-bottom: 10px; }
.press-category { margin-top: 35px; font-size: 14px; font-weight: bold; color: #FFF; border-bottom: 1px dashed #333; margin-bottom: 10px; padding-bottom: 5px; }
.press-item { margin-bottom: 8px; font-size: 15px; color: #BBB; display: block; line-height: 1.4; }
.press-item:hover { color: #FFF; }

/* --- MOBILE --- */
@media screen and (max-width: 900px) {
    * { cursor: auto !important; }
    #customCursor, #cursorCoords { display: none !important; }
    body { overflow: auto; height: auto; min-height: 100vh; }
    
    .mobile-overlay-close { display: block !important; }
    .project-link, .nav-item { font-weight: bold !important; font-size: 16px; padding: 8px 0; }
    
    header { position: relative; width: 100%; padding: 20px; box-sizing: border-box; }
    .logo-container { transform: scale(1.2); transform-origin: top left; margin-bottom: 30px; }
    
    body.project-focus header > * { display: none !important; }
    body.project-focus header { pointer-events: none; position: fixed; height: 0; padding: 0; z-index: 5000; }
    
    body.project-focus .header-controls {
        position: fixed; bottom: 20px; right: 20px; top: auto; left: auto;
        transform: none; display: block !important; gap: 0; z-index: 6000;
    }
    body.project-focus #backButton {
        background: #000; color: #FFF; padding: 10px 20px; border: 1px solid #FFF;
        font-weight: bold; font-size: 15px; display: block; letter-spacing: 0;
    }
    body.project-focus #resetButton { display: none !important; }
    .project-preview-img { display: none !important; }
    
    #projectDetailInfo {
        top: 20px; left: 20px; bottom: auto; right: 20px;
        font-size: 12px; max-width: 80%; z-index: 6000;
        background: rgba(0,0,0,0.5); padding: 5px;
    }
    
    /* POST-ITS SUR MOBILE */
    .sticky-note {
        left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important;
        width: 85vw; opacity: 1 !important; 
        z-index: 18000; /* Supérieur à l'overlay */
        box-shadow: 0 0 50px rgba(0,0,0,0.5);
    }
    .sticky-note.white-theme { background-color: #FFF !important; }
    .sticky-note.black-theme { background-color: #000 !important; }
    
    .text-layout { padding-left: 0; border-left: none; padding-top: 20px; }
    .content-overlay { padding: 40px 20px; z-index: 99999; }
    div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }

    body.project-focus #desktopSurface { display: none !important; }
    
    body.project-focus #mobileWheelContainer {
        display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        overflow-y: scroll; scroll-behavior: smooth; scroll-snap-type: y mandatory;
        z-index: 1000; padding-top: 50vh; padding-bottom: 50vh; box-sizing: border-box;
    }

    .mobile-wheel-item {
        width: 100%; height: auto; display: flex; justify-content: center; align-items: center;
        margin-bottom: 40px; scroll-snap-align: center; opacity: 0.3;
        transform: scale(0.9); transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .mobile-wheel-img {
        max-width: 90vw; max-height: 60vh; object-fit: contain;
        border: 1px solid #FFF; background: #000;
    }
    .mobile-wheel-item.active { opacity: 1; transform: scale(1); z-index: 10; }
}