.hero-section {
    position: relative; width: 100%; height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.hero-top-links {
    position: absolute; top: 33%; display: flex; gap: 40px; z-index: 10;
}

.hero-top-links a {
    color: white; text-decoration: none; font-size: 0.85rem;
    text-transform: uppercase; opacity: 0.5; transition: opacity 0.4s;
}

.hero-main-title {
    padding-bottom: 130px; font-size: 7rem; font-weight: 500; margin: 0;
    z-index: 10; text-align: center;
    /* Transition pour l'apparition/disparition */
    transition: transform var(--transition-speed) ease, opacity var(--transition-speed) ease;
}

.hero-landscape {
    position: absolute; bottom: 0; width: 100%; z-index: 5;
    transform-origin: bottom right;
    transition: transform var(--transition-speed) cubic-bezier(0.2, 0.8, 0.2, 1), opacity var(--transition-speed);
}

.hero-landscape img {
    width: 100%; display: block; object-fit: cover;
    transition: opacity var(--transition-speed) ease;
}

.img-dark { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; }

/* Logique Jour / Nuit */
body[data-theme="light"] .img-light { opacity: 1; }
body[data-theme="light"] .img-dark { opacity: 0; }
body[data-theme="dark"] .img-light { opacity: 0; }
body[data-theme="dark"] .img-dark { opacity: 1; }

/* --- ÉTATS D'ANIMATION --- */

/* Sortie */
.page-transitioning .hero-main-title { transform: translateY(30px); opacity: 0; }
.page-transitioning .hero-landscape { transform: translateY(100%) rotate(3deg); opacity: 0; }
.page-transitioning nav.main-menu { opacity: 0; }

/* Entrée (Page-initial-load) */
.page-initial-load .hero-main-title { transform: translateY(30px); opacity: 0; }
.page-initial-load .hero-landscape { transform: translateY(100%) rotate(-3deg); opacity: 0; }
.page-initial-load nav.main-menu { opacity: 0; }







/* ==========================================================
   RESPONSIVE HERO (TABLETTES & MOBILES)
   ========================================================== */
@media (max-width: 1024px) {
    .hero-main-title { font-size: 5rem; padding-bottom: 100px; }
    .hero-top-links { gap: 25px; }
    .hero-top-links a { font-size: 0.75rem; }
}

@media (max-width: 768px) {
    .hero-top-links { 
        position: relative; top: auto; gap: 20px; margin-bottom: 10px; width: 100%; justify-content: center; 
    }
    .hero-main-title { 
        font-size: 4.5rem; padding-bottom: 0; margin-bottom: 15vh; 
    }
    .hero-landscape img.img-light, 
    .hero-landscape img.img-dark { 
        height: 40vh; /* Permet aux montagnes de rester proportionnelles */
    }
}