/* =========================================
   1. FONTS (Neue Haas Grotesk)
   ========================================= */
@font-face { font-family: 'Neue Haas Grotesk Display'; src: url('fonts/NeueHaasDisplayLight.ttf') format('truetype'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Neue Haas Grotesk Display'; src: url('fonts/NeueHaasDisplayRoman.ttf') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Neue Haas Grotesk Display'; src: url('fonts/NeueHaasDisplayMediu.ttf') format('truetype'); font-weight: 500; font-style: normal; }

/* =========================================
   2. VARIABLES & RESET
   ========================================= */
:root {
    --bg: #ffffff;
    --text: #000000;
    --pink: #f61d86;
    --ease: cubic-bezier(0.25, 1, 0.5, 1);
    --entrance-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
    --logo-ease: cubic-bezier(0.65, 0, 0.35, 1); 
}

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

body { 
    background: var(--bg); color: var(--text); 
    font-family: 'Neue Haas Grotesk Display', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow: hidden; height: 100vh; width: 100vw; 
    cursor: none !important; 
    font-size: 16px; 
}

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

a, button, .label, .v-item, .h-item, img, .logo, #main-logo, .logo-fixed { cursor: none !important; }

/* =========================================
   3. NAVIGATION
   ========================================= */
nav {
    position: fixed; top: 0; left: 0; width: 100%; 
    height: 100px; 
    padding: 0 40px; 
    display: flex; align-items: center; justify-content: flex-start; 
    z-index: 2000; background: transparent;
    opacity: 0; transition: opacity 0.8s ease;
}

.nav-left { 
    position: relative; 
    margin-right: 60px; 
}

.logo-spacer { height: 40px; width: 40px; visibility: hidden; }

/* LOGO FIXE */
.logo-fixed {
    position: fixed;
    top: 30px; 
    left: 40px; 
    width: 40px; 
    height: auto;
    opacity: 0; 
    transition: none; 
    z-index: 2005; 
}
body.anim-done .logo-fixed { opacity: 1; }
body.no-intro .logo-fixed { opacity: 1; }


.nav-center { display: flex; align-items: center; gap: 15px; }
.nav-center button, .nav-center a { 
    background: none; border: none; cursor: none !important; 
    font-family: 'Neue Haas Grotesk Display', sans-serif; 
    font-weight: 500; font-size: 12px; 
    letter-spacing: 0.5px; 
    color: var(--pink); opacity: 0.4; text-decoration: none;
    padding: 0; margin: 0; transition: opacity 0.3s ease;
}
.sep { font-size: 12px; opacity: 0.3; color: var(--pink); font-weight: 400; }
.nav-center button.active { opacity: 1; }
.nav-center button:hover, .nav-center a:hover { opacity: 0.7; }

.nav-right { margin-left: auto; display: flex; gap: 30px; }
.btn-text {
    text-decoration: none; color: #000; cursor: none !important;
    font-size: 12px; 
    font-weight: 400; opacity: 0.6; transition: opacity 0.3s;
}
.btn-text:hover { opacity: 1; }

/* =========================================
   4. VUE PROJETS
   ========================================= */
#section-projets {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 1; transition: opacity 0.6s ease;
}
body.view-perso #section-projets { opacity: 0; pointer-events: none; }

.side-labels {
    position: fixed; top: 40vh; 
    width: 20vw; 
    display: flex; flex-direction: column; gap: 40px; 
    z-index: 100;
    opacity: 0; transform: translateY(60px);
    transition: opacity 1s ease, transform 1.2s var(--ease);
}
.side-labels.left { left: 40px; }
.side-labels.right { right: 40px; text-align: right; }

.label { 
    font-size: 10px; 
    font-weight: 500; text-transform: uppercase;
    opacity: 0.3; transition: 0.4s; cursor: none !important; 
    letter-spacing: 0.8px; color: #000;
}
.label span { font-weight: 300; margin-right: 12px; font-size: 9px; opacity: 0.7; }
.label.active { opacity: 1; transform: scale(1.05); }
.label.disabled { opacity: 0.15; cursor: default; }

.vertical-container { width: 100%; height: 100%; }
.v-item {
    position: absolute; left: 50%; 
    width: 26vw; 
    height: 40vh; 
    margin-left: -13vw; 
    will-change: transform; cursor: none !important;
}
.img-inner { 
    width: 100%; height: 100%; overflow: hidden; position: relative; 
    background: #f4f4f4; display: flex; align-items: center; justify-content: center;
}
.img-inner img { 
    width: 100%; height: 120%; object-fit: cover; 
    position: absolute; top: -10%; left: 0; 
    transition: filter 0.5s ease, transform 0.1s linear; 
}
.v-item:not(.soon-item):hover .img-inner img { filter: brightness(1.08); }
.soon-item .img-inner {
    background: #f0f0f0; color: #ccc;
    font-size: 11px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase;
}

/* =========================================
   5. VUE PERSO
   ========================================= */
#section-perso {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; pointer-events: none; transition: opacity 0.6s ease;
}
body.view-perso #section-perso { opacity: 1; pointer-events: auto; }
.horizontal-container { width: 100%; height: 100%; }
.h-item {
    position: absolute; top: 50%; 
    width: 35vw; 
    height: 50vh; 
    margin-top: -25vh; will-change: transform; cursor: none !important;
}
.h-item .img-inner img { height: 100%; top: 0; }

/* =========================================
   6. CURSEUR
   ========================================= */
#custom-cursor {
    position: fixed; top: 0; left: 0; width: 20px; height: 20px;
    pointer-events: none; z-index: 99999; mix-blend-mode: difference; 
    display: flex; align-items: center; justify-content: center;
    transform: translate(-50%, -50%);
}
.cursor-cross { position: relative; width: 100%; height: 100%; }
.cursor-cross::before, .cursor-cross::after {
    content: ''; position: absolute; background: white;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.cursor-cross::before { width: 100%; height: 1px; }
.cursor-cross::after { width: 1px; height: 100%; }
.cursor-label {
    position: absolute; left: 25px; color: white; 
    font-family: 'Neue Haas Grotesk Display', sans-serif; 
    font-size: 9px; font-weight: 500; letter-spacing: 1px; opacity: 0; transition: opacity 0.3s;
}
#custom-cursor.hovered .cursor-label { opacity: 1; }
#custom-cursor.hovered .cursor-cross { transform: scale(1.5); }

/* =========================================
   7. LOADER & LOGO
   ========================================= */
#white-curtain {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #ffffff; z-index: 9000; 
    transition: opacity 1s ease 1s, visibility 0s linear 2s;
}
body.loaded #white-curtain { opacity: 0; visibility: hidden; }

/* Skip Intro */
body.no-intro #white-curtain { display: none !important; }
body.no-intro #main-logo { display: none !important; }
body.no-intro nav { opacity: 1; transition: none; }
body.no-intro .side-labels, body.no-intro .entrance-element { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }

#main-logo {
    position: fixed; 
    top: 55%; left: 50%; width: 150px; 
    height: auto;
    z-index: 10000; transform: translate(-50%, -50%);
    opacity: 0; 
    transition: all 1.3s var(--logo-ease); 
    cursor: none !important;
    pointer-events: none; 
}

body.appearing #main-logo { top: 50%; opacity: 1; }
body.loaded #main-logo { top: 30px; left: 40px; width: 40px; transform: translate(0, 0); }
body.anim-done #main-logo { opacity: 0; transition: opacity 0s; }


.entrance-element {
    opacity: 0; transform: translateY(100px) scale(0.98);
    transition: opacity 1.5s ease-out, transform 1.5s var(--entrance-ease);
}
body.loaded nav { opacity: 1; transition-delay: 0.6s; }
body.loaded .side-labels { opacity: 1; transform: translateY(0); transition-delay: 0.8s; }
body.loaded .entrance-element { opacity: 1; transform: translateY(0) scale(1); transition-delay: 1s; }

/* =========================================
   8. TRANSITION DE PAGE (RIDEAU)
   ========================================= */
#page-transition {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: #ffffff; z-index: 999999;
    transform: translateY(100%);
    will-change: transform;
    transition: transform 0.7s cubic-bezier(0.8, 0, 0.2, 1);
}
body.is-transitioning #page-transition { transform: translateY(0%); }
body.transition-out #page-transition { transform: translateY(0%); }
body.transition-done #page-transition { transform: translateY(-100%); }

/* =========================================
   9. STYLES PAGES INTERNES (CORRIGÉ : Images Contenues)
   ========================================= */
.page-container {
    width: 100%; min-height: 100vh; padding: 140px 40px 50px;
    position: relative; z-index: 10;
}
.project-header { 
    padding: 140px 0 80px; 
    max-width: 1000px; /* On limite aussi la largeur du texte */
    margin: 0 auto; 
}
.project-title { 
    font-size: 4vw; 
    font-weight: 400; line-height: 1; margin-bottom: 20px; 
}
.project-meta { display: flex; gap: 40px; margin-top: 30px; font-size: 12px; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.5px; }

.project-images { 
    width: 100%; 
    padding: 0 0 100px; /* Pas de padding latéral, on gère avec max-width */
    
    /* C'EST ICI QU'ON RÉDUIT L'IMAGE */
    max-width: 1000px; /* Largeur max raisonnable */
    margin: 0 auto;    /* Centré */
    
    display: flex; flex-direction: column; gap: 60px; /* Espace aéré entre les images */
}
.full-img { width: 100%; height: auto; display: block; }
.img-placeholder {
    width: 100%; height: 500px; 
    background: #f4f4f4; display: flex; align-items: center; justify-content: center;
    color: #ccc; text-transform: uppercase; font-size: 11px; letter-spacing: 1px;
}

.back-btn { 
    display: block; width: fit-content; margin: 0 auto 50px;
    font-size: 12px; text-transform: uppercase; letter-spacing: 1px; 
    opacity: 0.5; transition: 0.3s; text-decoration: none; color: black;
    padding-bottom: 5px; border-bottom: 1px solid transparent;
}
.back-btn:hover { opacity: 1; border-bottom: 1px solid black; }

.about-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 80px; max-width: 1000px; /* Réduit pour matcher les images */ margin: 0 auto; }
.about-intro h1 { font-size: 3vw; font-weight: 400; line-height: 1.1; margin-bottom: 30px; letter-spacing: -0.5px; }
.about-bio p { font-weight: 300; font-size: 16px; line-height: 1.5; margin-bottom: 25px; opacity: 0.8; }
.about-services { margin-top: 50px; border-top: 1px solid rgba(0,0,0,0.1); padding-top: 30px; }
.service-list { list-style: none; margin-top: 15px; }
.service-list li { font-size: 13px; font-weight: 500; text-transform: uppercase; margin-bottom: 8px; opacity: 0.5; }

.contact-wrapper { height: 60vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.contact-label { font-size: 11px; font-weight: 500; text-transform: uppercase; opacity: 0.4; margin-bottom: 20px; }
.big-mail { font-size: 4vw; font-weight: 400; text-decoration: none; color: #000; transition: color 0.3s; }
.big-mail:hover { color: var(--pink); }
.socials-row { margin-top: 50px; display: flex; gap: 30px; }
.social-link { font-size: 12px; font-weight: 500; text-transform: uppercase; text-decoration: none; color: #000; opacity: 0.4; transition: 0.3s; }
.social-link:hover { opacity: 1; }

/* =========================================
   10. BACKGROUND VIDEO
   ========================================= */
.chrome-bg {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    width: 450px; 
    max-width: 80vw; 
    height: auto;
    
    z-index: -1; 
    opacity: 0.8; 
    pointer-events: none; 
    
    mix-blend-mode: multiply; 
    
    transition: opacity 0.5s ease;
}

body.view-page .chrome-bg { opacity: 0.3; }