/* ==========================================
   1. POLICES & CONFIGURATION DE BASE
   ========================================== */
@font-face {
    font-family: 'Brown Sugar';
    src: url('fonts/brown-sugar.ttf') format('truetype'),
         url('Fonts/Brown Sugar.ttf') format('truetype'),
         url('Fonts/BrownSugar.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

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

/* CORRECTIF GLOBAL ANTI-BLOCAGE MULTI-NAVIGATEURS */
html, body {
    background-color: #0d0d0d;
    color: #f5f5f5;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    
    width: 100%;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    height: auto !important; /* Permet à la page de grandir selon son contenu */

    overflow-x: hidden;      /* Empêche le scroll horizontal indésirable */
    overflow-y: auto !important; /* Force le scroll vertical partout */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom !important; /* Autorise le swipe vertical et le zoom natif */
}

/* Base de la section Hero pour PC */
.hero {
    position: relative;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-image: url('hero.jpg');
    background-size: cover;
    background-position: center;
}

/* ==========================================
   2. NAVBAR DYNAMIQUE & TRANSPARENTE
   ========================================== */
nav.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 40px;
    z-index: 100;
    background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
    border-bottom: none;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

nav.navbar.nav-hidden {
    transform: translateY(-100%);
}

.nav-logo {
    font-family: 'Brown Sugar', sans-serif;
    font-size: 28px;
    letter-spacing: 0.05em;
    color: #ffffff;
    text-decoration: none;
    flex-shrink: 0;
}

.nav-links { 
    display: flex; 
    gap: 25px; 
}

.nav-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    transition: opacity 0.3s;
    font-weight: 300;
    white-space: nowrap;
}

.nav-links a:hover { 
    opacity: 0.6; 
}

/* ==========================================
   3. FOOTER UNIFORME
   ========================================== */
.manifesto-footer {
    max-width: 1400px;
    margin: 100px auto 0 auto;
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #555555;
    border-top: 1px solid #1a1a1a;
    width: 100%;
}

.footer-left a, .footer-right a {
    color: #555555;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-left a:hover, .footer-right a:hover { 
    color: #ffffff; 
}

.footer-center { 
    color: #555555; 
}

.footer-right { 
    display: flex; 
    gap: 25px; 
}

/* ==========================================
   4. ADAPTATION TABLETTES & RESPONSIVE (768px)
   ========================================== */
@media (max-width: 768px) {
    nav.navbar {
        padding: 25px 20px;
        flex-direction: row;
        justify-content: space-between;
        background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    }

    .nav-links {
        max-width: 65%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        gap: 20px;
        padding-bottom: 5px;
    }

    .nav-links::-webkit-scrollbar {
        display: none;
    }
    
    .nav-links {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .manifesto-footer { 
        flex-direction: column; 
        gap: 20px; 
        text-align: center; 
        margin-top: 60px;
    }
    
    .footer-right { 
        justify-content: center; 
    }
}

/* ==========================================
   5. CORRECTIF ABSOLU SMARTPHONES (480px)
   ========================================== */
@media (max-width: 480px) {
    /* Nettoyage du blocage : On supprime 'position: fixed' et 'overflow: hidden' 
       qui figeaient la page sur les autres navigateurs */
    html, body {
        position: relative !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .hero {
        /* On garde votre comportement parfait d'image fixe en arrière-plan */
        position: relative !important; 
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        
        background-position: 35% center !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
    }
}