/* --- VARIABLES & RESET GLOBAL --- */
:root { --bg: #030303; --text: #f0f0f0; --border: rgba(255,255,255,0.2); }
body, html { margin: 0; padding: 0; background-color: var(--bg); color: var(--text); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; overflow: hidden; cursor: none; }

/* --- POST-PROCESSING GLOBAL --- */
.noise { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; opacity: 0.08; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); }
.vignette { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 998; background: radial-gradient(circle, rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%); }

/* --- CURSEUR GLOBAL --- */
.cursor-dot, .cursor-outline { position: fixed; top: 0; left: 0; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 10000; }
.cursor-dot { width: 4px; height: 4px; background-color: var(--text); transition: opacity 0.2s; }
.cursor-outline { width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, 0.3); transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), height 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s; }

/* --- GESTION DES VUES --- */
.view { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; opacity: 0; visibility: hidden; z-index: 10; }
.view.active { opacity: 1; visibility: visible; }
.no-grain { background-color: var(--bg); z-index: 3; }

/* --- UI COMMUNE POUR LES PROJETS --- */
.ui-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 50; display: flex; flex-direction: column; justify-content: space-between; padding: 40px; box-sizing: border-box; pointer-events: none; text-shadow: 0 4px 20px rgba(0,0,0,0.8); }
.ui-header { display: flex; justify-content: space-between; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.1em; color: rgba(255,255,255,0.6); }
.ui-bottom { max-width: 500px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.ui-bottom h2 { font-size: 3rem; margin: 0; font-weight: 400; text-transform: uppercase; letter-spacing: -0.02em; color: var(--text); line-height: 1; }
.ui-bottom p { font-size: 0.85rem; line-height: 1.6; color: rgba(255,255,255,0.5); margin: 0; }
.btn-row { display: flex; gap: 15px; pointer-events: auto; }

/* Boutons d'action */
.action-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border: 1px solid rgba(255,255,255,0.3); color: var(--text); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.1em; cursor: none; position: relative; overflow: hidden; transition: border-color 0.3s; background: transparent; text-shadow: none; }
.action-btn::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0%; background: var(--text); z-index: -1; transition: height 0.3s cubic-bezier(0.19, 1, 0.22, 1); }
.action-btn:hover { border-color: var(--text); color: var(--bg); }
.action-btn:hover::after { height: 100%; }
.action-btn.solid { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 500; }
.action-btn.solid::after { background: var(--bg); }
.action-btn.solid:hover { color: var(--text); border-color: rgba(255,255,255,0.3); }

/* --- VUE 1 : ACCUEIL --- */
#webgl-liquid { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; opacity: 0.8; }
.content-landing { position: relative; z-index: 10; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
h1.title { font-size: 9vw; font-weight: 500; letter-spacing: -0.04em; margin: 0; overflow: hidden; text-transform: uppercase; line-height: 1; }
.char { display: inline-block; transform: translateY(110%); opacity: 0; }
p.subtitle { font-size: 1.1rem; margin-top: 2rem; opacity: 0; font-weight: 300; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.btn-custom { margin-top: 4rem; padding: 1rem 3rem; border: 1px solid rgba(255,255,255,0.3); color: var(--text); background: transparent; font-size: 0.9rem; pointer-events: auto; text-transform: uppercase; letter-spacing: 0.05em; position: relative; overflow: hidden; opacity: 0; transition: 0.3s; }
.btn-custom::before { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background: var(--text); transition: top 0.4s cubic-bezier(0.76, 0, 0.24, 1); z-index: -1; }
.btn-custom:hover { color: var(--bg); border-color: var(--text); }
.btn-custom:hover::before { top: 0; }

/* --- VUE 2 : MENU --- */
.split-container { display: flex; width: 100vw; height: 100vh; z-index: 10; position: relative; background: transparent; }
.split-side { flex: 1; display: flex; justify-content: center; align-items: center; position: relative; border-right: 1px solid var(--border); transition: flex 0.8s cubic-bezier(0.16, 1, 0.3, 1), background 0.5s; pointer-events: auto; }
.split-side:last-child { border-right: none; }
.split-side:hover { flex: 1.3; background: rgba(255,255,255,0.02); }
.text-box { padding: 15px 35px; border: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.2em; font-size: 1.5rem; color: var(--text); background: transparent; transition: all 0.4s; }
.split-side:hover .text-box { background-color: var(--text); color: var(--bg); border-color: var(--text); }

/* --- VUES PROJETS (SCROLLABLES) --- */
.scroll-view { overflow-y: auto; overflow-x: hidden; pointer-events: auto; scroll-behavior: smooth; }
.project-hero { position: relative; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; z-index: 1; }
.webgl-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* Image de couverture statique pour les projets */
.static-hero-img { 
    max-width: 60vw; 
    max-height: 65vh; 
    object-fit: contain; 
    z-index: 10; 
    position: relative; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.5); 
    border-radius: 4px;
}
.scale-shadow { transform: scale(1.3); }

/* Hero affiché avec le même style que la galerie (ex: Yvnnis 2 = même rendu que Yvnnis 3) */
.hero-as-gallery {
    max-width: 80vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    z-index: 10;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
    border-radius: 4px;
    display: block;
}

/* Shadow 3 : cover carrée — taille maximale identique aux covers galerie */
.hero-as-gallery.hero-shadow {
    width: 80vw;
    max-width: 80vw;
    max-height: 90vh;
}

.scroll-indicator { position: absolute; bottom: 40px; right: 40px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.2em; opacity: 0.6; animation: bounce 2s infinite; z-index: 10; pointer-events: none; text-shadow: none; }
@keyframes bounce { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, 10px); } }

/* --- GALERIE PROJETS ---
   FIX Yvnnis 2 :
   On supprime la hauteur fixe "600px" de l'ancienne version qui écrasait les images.
   Toutes les images de galerie utilisent désormais object-fit: contain sans hauteur forcée,
   ce qui garantit que Yvnnis 2.jpg et Yvnnis 3.jpg (et toutes les autres) s'affichent
   à la même taille proportionnelle, pilotée uniquement par max-width/max-height.
*/
.project-gallery { 
    position: relative; 
    z-index: 10; 
    width: 100vw; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 15vh; 
    padding: 10vh 0 30vh 0; 
    background: transparent; 
}
.gallery-item { 
    max-width: 80vw; 
    max-height: 90vh; 
    width: auto;
    height: auto;
    object-fit: contain; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.4); 
    opacity: 0; 
    border-radius: 4px; 
    position: relative; 
    z-index: 11; 
    display: block;
}
video.gallery-item { 
    pointer-events: auto; 
    min-height: 400px; 
    background-color: rgba(5,5,8,0.5); 
}

/* --- VUE 15 : HÉLICE PHOTOS 3D --- */
/*
   FIX PERFORMANCES PHOTOS :
   - isolation: isolate  →  crée un nouveau stacking context, évite les repaints globaux
   - contain: strict     →  le navigateur ne recalcule pas le layout hors du conteneur
   - transform: translateZ(0) sur les items →  force la promotion en couche GPU (layer compositing)
   - will-change: transform, opacity →  signal au browser pour pré-allouer les couches
   - pointer-events ciblés seulement sur les items visibles (via JS)
*/
#photo-helix-container { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    perspective: 1200px; 
    overflow: hidden; 
    background-color: #111;
    isolation: isolate;
    contain: strict;
}
.photo-helix-item {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 250px; 
    height: 250px; 
    background-color: #000000;
    border-radius: 4px; 
    border: 1px solid rgba(255, 255, 255, 0.15); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.6);
    transition: border 0.3s;
    /* GPU layer compositing — clé anti-lag */
    will-change: transform, opacity;
    transform-style: preserve-3d; 
    padding: 12px 12px 40px 12px; 
    box-sizing: border-box; 
    pointer-events: auto;
    /* Force promotion GPU dès le départ */
    transform: translate(-50%, -50%) translateZ(0);
    backface-visibility: hidden;
}
.photo-inner {
    width: 100%; 
    height: 100%; 
    background-color: #1a1a1a;
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat; 
    border-radius: 2px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    color: #333; 
    font-size: 2em; 
    font-weight: bold;
    /* Lazy-load : l'image se charge via JS quand l'item est visible */
}
.photo-helix-item:hover { 
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.2); 
    border: 1px solid rgba(255, 255, 255, 0.4); 
    z-index: 9999 !important; 
}
#photo-helix-container.is-vortex .photo-helix-item { 
    width: 130px; 
    height: 130px; 
    padding: 6px 6px 20px 6px; 
}

.photo-pagination-center { 
    position: absolute; 
    bottom: 60px; 
    right: 60px; 
    z-index: 100; 
    text-align: right; 
    pointer-events: none; 
}
.scroll-indicator-photos { 
    opacity: 0.8; 
    font-size: 0.9em; 
    text-transform: uppercase; 
    letter-spacing: 0.1em; 
    color: white; 
}
.scroll-indicator-photos i { margin-right: 8px; }

/* --- NAVIGATION RAPIDE --- */
.quick-nav {
    position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
    z-index: 100; display: flex; gap: 15px; opacity: 0; visibility: hidden;
    transition: opacity 0.4s, visibility 0.4s; pointer-events: none;
}
.quick-nav.visible { opacity: 1; visibility: visible; pointer-events: auto; }

.quick-nav-item {
    font-size: 0.7rem; color: var(--text); opacity: 0.4; cursor: none;
    padding: 5px; transition: all 0.3s; position: relative; font-family: monospace;
}
.quick-nav-item::after {
    content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 0; height: 1px; background: var(--text); transition: width 0.3s;
}
.quick-nav-item:hover, .quick-nav-item.active { opacity: 1; }
.quick-nav-item.active::after { width: 100%; }

.quick-nav-item .tooltip {
    position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -10px);
    background: rgba(0,0,0,0.8); backdrop-filter: blur(5px); padding: 5px 10px;
    border-radius: 4px; border: 1px solid var(--border); font-size: 0.6rem;
    white-space: nowrap; font-family: 'Helvetica Neue', sans-serif; letter-spacing: 0.1em;
    opacity: 0; visibility: hidden; transition: all 0.3s; pointer-events: none;
}
.quick-nav-item:hover .tooltip { opacity: 1; visibility: visible; transform: translate(-50%, -5px); }