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

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px; line-height: 1.4; color: #000;
    background-color: #fff; overflow-x: hidden;
}

a { text-decoration: none; color: inherit; transition: opacity 0.3s; cursor: pointer; }
a:hover { opacity: 0.6; }

/* --- LOGO FIXE --- */
.fixed-logo-container {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%); width: 66vw;
    z-index: 400; pointer-events: none; mix-blend-mode: multiply; 
    transition: opacity 0.5s ease, visibility 0.5s ease;
    opacity: 1; visibility: visible;
}
.fixed-logo-container.fade-out { opacity: 0; visibility: hidden; }
#main-logo { width: 100%; height: auto; display: block; }

/* --- NAVIGATION --- */
#navbar {
    position: fixed; top: 0; left: 0; width: 100%;
    padding: 30px 40px; display: flex; justify-content: space-between;
    z-index: 500; opacity: 0; transition: opacity 1s ease 0.5s;
}
#navbar.visible { opacity: 1; }
.nav-left a, .nav-right a { text-transform: lowercase; font-weight: normal; letter-spacing: 0.5px; }

/* --- INTRO OVERLAY --- */
#intro-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #fff; z-index: 300; display: flex;
    flex-direction: column; justify-content: flex-end;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}
#intro-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.click-trigger { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; z-index: 1; }
.intro-footer { padding: 40px; z-index: 2; pointer-events: auto; }

/* --- SECTION ABOUT --- */
#about-section {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #fff; z-index: 200; opacity: 0; visibility: hidden;
    pointer-events: none; transition: opacity 0.6s ease, visibility 0.6s ease;
    display: flex; flex-direction: column; padding: 120px 40px 40px 40px; overflow-y: auto; 
}
#about-section.active { opacity: 1; visibility: visible; pointer-events: auto; }
.about-container {
    max-width: 800px; margin: 0 auto; opacity: 0; transform: translateY(20px);
    transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s; 
}
#about-section.active .about-container { opacity: 1; transform: translateY(0); }
.about-text { font-size: 14px; line-height: 1.6; text-align: justify; }

/* --- GALERIE ÉPARPILLÉE --- */
#main-content {
    position: relative; width: 100%; min-height: 100vh;
    padding-top: 25vh; background-color: transparent; z-index: 50; 
}
.scatter-container {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    padding: 0 5vw 15vw 5vw;
}
.scatter-item {
    display: block; margin: 8vh 3vw; /* Marges de base */
    cursor: zoom-in; /* Change la souris pour indiquer le zoom */
    transition: opacity 0.4s ease;
}
.scatter-item img {
    width: 100%; height: auto; display: block;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Léger détachement */
}
.scatter-item:hover { opacity: 0.8; }

/* --- LIGHTBOX (ZOOM) --- */
#lightbox {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    /* Fond blanc presque opaque pour masquer le logo subtilement */
    background-color: rgba(255, 255, 255, 0.98); 
    z-index: 600; /* Passe au-dessus de tout, y compris le logo (400) */
    display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden; cursor: zoom-out;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
#lightbox.active { opacity: 1; visibility: visible; }
#lightbox-img {
    max-width: 85vw; max-height: 85vh; object-fit: contain; cursor: default;
}

/* Flèches de navigation */
.lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    font-size: 24px; color: #a0a0a0; padding: 20px 30px;
    cursor: pointer; user-select: none; transition: color 0.3s;
}
.lightbox-nav:hover { color: #000; }
.lightbox-nav.prev { left: 2vw; }
.lightbox-nav.next { right: 2vw; }

/* --- MOBILE --- */
@media (max-width: 768px) {
    .fixed-logo-container { width: 90vw; }
    #navbar { padding: 20px; }
    .intro-footer { padding: 20px; }
    #about-section { padding: 100px 20px 20px 20px; }
    .scatter-item { margin: 5vh 0; }
    .lightbox-nav { padding: 10px; font-size: 20px; }
    .lightbox-nav.prev { left: 0; }
    .lightbox-nav.next { right: 0; }
}