@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;600&family=Playfair+Display:wght@400;700&display=swap');

:root { --gold: #F15B5D; --bg: #050505; --text: #ffffff; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: 'Montserrat', sans-serif; overflow-x: hidden; line-height: 1.6; }

/* --- 1. LE MENU DE NAVIGATION (Logo centré, menu en dessous) --- */
.main-nav { 
    position: fixed; top: 0; left: 0; width: 100%; 
    background: transparent; 
    border-bottom: none;
    
    /* On empile les éléments de haut en bas et on centre */
    display: flex; 
    flex-direction: column; 
    align-items: center;
    padding: 15px 40px 20px 40px; 
    z-index: 9999;
    transition: background 0.4s ease, border-bottom 0.4s ease;
}

.main-nav.scrolled {
    background: rgba(5, 5, 5, 0.98);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

/* On détache les réseaux sociaux pour les garder en haut à gauche */
.nav-socials { 
    position: absolute; 
    left: 40px; 
    top: 30px; 
    display: flex; 
    gap: 15px; 
}
.nav-socials a { color: white; font-size: 1.2rem; transition: 0.3s; }
.nav-socials a:hover { color: var(#F15B5D); }

/* Le logo au centre avec de l'espace en dessous pour le menu */
.logo-center { text-align: center; z-index: 10000; margin-bottom: 15px; }
.logo-center img { height: 45px; filter: brightness(0) invert(1); }
.logo-center h1 { font-family: 'Playfair Display', serif; font-size: 0.9rem; letter-spacing: 5px; color: white; text-transform: uppercase; margin-top: 5px; }

/* Le menu centré en dessous du logo */
.nav-links { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; justify-content: center; width: 100%; }
.nav-links a { text-decoration: none; color: white; font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; transition: 0.3s; }
.nav-links a:hover { color: var(#F15B5D); }

/* BOUTON MENU BURGER (Caché sur ordinateur avec !important) */
.menu-burger { display: none !important; color: white; font-size: 1.8rem; cursor: pointer; z-index: 10000; transition: 0.3s; }
.menu-burger:hover { color: var(#F15B5D); }


/* --- 2. SECTIONS ET GRILLES --- */
.hero-slider { position: relative; height: 100vh; width: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; }
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.5s ease-in-out; z-index: 1; }
.slide.active { opacity: 1; }
.hero-content { position: relative; z-index: 10; text-align: center; padding: 0 20px; }

.page-content { padding: 180px 10% 100px; text-align: center; } /* J'ai ajouté un peu d'espace car le menu est plus haut */
.page-artiste { padding-top: 180px; padding-bottom: 100px; text-align: center; width: 100%; }

.section-title { font-family: 'Playfair Display', serif; font-size: 2.5rem; color: var(#F15B5D); margin-bottom: 50px; letter-spacing: 4px; text-transform: uppercase; }

.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; max-width: 1000px; margin: 0 auto; }
.artiste-card { padding: 40px; border: 1px solid rgba(255,255,255,0.05); text-decoration: none; color: white; display: flex; flex-direction: column; align-items: center; transition: 0.4s; }
.artiste-card:hover { border-color: var(#F15B5D); transform: translateY(-5px); background: rgba(255,255,255,0.02); }

.portrait-artiste, .portrait-page { width: 200px !important; height: 200px !important; border-radius: 50%; object-fit: cover; margin: 0 auto 25px auto; border: 2px solid var(#F15B5D); display: block; }
.style-artiste { color: var(#F15B5D); letter-spacing: 3px; font-size: 0.9rem; margin-bottom: 20px; display: block; }
.insta-link { color: white; text-decoration: none; font-size: 0.9rem; letter-spacing: 2px; display: inline-block; margin-bottom: 40px; transition: 0.3s; }
.insta-link:hover { color: var(#F15B5D); }

.galerie-mosaique { column-count: 3; column-gap: 20px; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.galerie-mosaique img { width: 100%; display: block; margin-bottom: 20px; border: 1px solid rgba(255,255,255,0.1); transition: 0.4s; }
.galerie-mosaique img:hover { border-color: var(#F15B5D); transform: scale(1.02); box-shadow: 0px 5px 15px rgba(212, 175, 55, 0.2); }

.main-footer { background: #030303; padding: 60px 10% 40px; border-top: 1px solid rgba(212, 175, 55, 0.1); text-align: center; margin-top: 50px; }
.footer-grid { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.footer-info h4 { color: var(#F15B5D); letter-spacing: 4px; font-size: 0.8rem; margin-bottom: 15px; }
.footer-info p { font-size: 0.85rem; color: #888; line-height: 1.8; }


/* =========================================
   OPTIMISATION MOBILE (Écrans < 850px)
   ========================================= */
@media (max-width: 850px) { 
    /* Sur mobile, on remet tout sur une seule ligne horizontale */
    .main-nav { 
        padding: 0 20px; 
        position: fixed; 
        flex-direction: row; 
        height: 100px;
        justify-content: space-between;
    }
    
    .nav-socials { position: relative; left: 0; top: 0; display: flex !important; gap: 15px; z-index: 10000; } 
    .nav-socials a { font-size: 1.1rem; }
    
    .logo-center { position: absolute; left: 50%; transform: translateX(-50%); width: auto; z-index: 10000; margin-bottom: 0; }

    .menu-burger { display: block !important; z-index: 10000; } 
    
    .nav-links { 
        position: absolute; top: 100px; left: 0; width: 100%; 
        background: rgba(5, 5, 5, 0.98); border-bottom: 1px solid var(#F15B5D);
        flex-direction: column; align-items: center; padding: 20px 0; gap: 20px;
        transform: translateY(-200%); 
        transition: transform 0.4s ease-in-out;
        z-index: 9998;
    }
    
    .nav-links.active { transform: translateY(0); }

    .hero-content h2 { font-size: 2rem !important; }
    .section-title { font-size: 2rem; }
    .page-content { padding-top: 120px; }
    .page-artiste { padding-top: 120px; }
    .footer-grid { flex-direction: column; gap: 30px; }
    .galerie-mosaique { column-count: 2; }
}

@media (max-width: 500px) { 
    .galerie-mosaique { column-count: 1; } 
    .grid-container { grid-template-columns: 1fr; }
}