/* --- RESET & BASE --- */
a, a:visited { text-decoration: none; color: inherit; }
html { scroll-behavior: smooth; }
body { 
    font-family: 'Georgia', serif; 
    background-color: #0b0b0b; 
    color: #ccc; 
    margin: 0; padding: 0; 
    line-height: 1.6; 
}

/* --- NAVIGATION --- */
nav { 
    background: rgba(0,0,0,0.98); 
    padding: 20px 0; 
    border-bottom: 1px solid #1a1a1a; 
    position: sticky; top: 0; z-index: 1000; 
}
.nav-container { 
    max-width: 98%; margin: 0 auto; 
    display: flex; justify-content: space-between; align-items: center; 
}
.site-title { 
    color: #fff; text-transform: uppercase; 
    letter-spacing: 3px; font-weight: bold; 
    font-size: 1.4em; 
}
.nav-links { display: flex; align-items: center; }
.nav-links a { 
    color: #bbb; 
    margin-left: 20px; 
    text-transform: uppercase; 
    font-size: 0.9em; 
    letter-spacing: 1.5px; 
    transition: 0.3s; 
    white-space: nowrap; 
    font-weight: normal;
}
.nav-links a:hover { color: #fff; }

/* LE CADENAS */
.nav-links a[href="admin.php"] { display: inline-block; opacity: 0.3; font-size: 1.1em; }
.nav-links a[href="admin.php"]:hover { opacity: 1; }

/* --- SECTIONS --- */
.content-text { 
    max-width: 900px; margin: 0 auto; padding: 80px 20px; 
    text-align: center; border-top: 1px solid #1a1a1a; 
}
.gallery-section {
    max-width: 95vw; margin: 0 auto; padding: 80px 10px;
    text-align: center; border-top: 1px solid #1a1a1a;
}
#intro, #main-content > section:first-child { border-top: none; }

/* CORRECTION DU TITRE COUPE */
h2 { 
    color: #fff; 
    text-transform: uppercase; 
    letter-spacing: 5px; 
    margin-bottom: 40px; 
    font-weight: normal; 
    font-size: 1.8em; 
    display: block;
    width: 100%;
    white-space: normal; /* Autorise le retour à la ligne */
    overflow-wrap: break-word; /* Coupe les mots s'ils sont trop longs */
    line-height: 1.4;
}

/* --- GRILLE 5 COLONNES (PC) --- */
.grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
.album-card, .photo { flex: 0 0 calc(20% - 15px); margin-bottom: 30px; }
.photo img, .album-card img { 
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover; 
    cursor: pointer; transition: 0.4s; border: 1px solid #1a1a1a; 
}
.photo img:hover, .album-card img:hover { opacity: 0.7; transform: scale(1.02); }
.album-card p { color: #888; text-transform: uppercase; font-size: 0.8em; margin-top: 12px; letter-spacing: 1px; }

/* --- QUI SUIS-JE --- */
.qui-container { display: flex; gap: 40px; align-items: flex-start; text-align: left; max-width: 900px; margin: 0 auto; }
.qui-photo img { width: 280px; border: 1px solid #1a1a1a; }

/* --- CONTACT --- */
#contact form { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 500px; margin: 0 auto; }
#contact input, #contact textarea { padding: 12px; background: #111; border: 1px solid #222; color: white; font-family: inherit; font-size: 1em; }
#contact button { padding: 15px; background: white; color: black; font-weight: bold; cursor: pointer; border: none; letter-spacing: 2px; }

/* --- LIGHTBOX --- */
#lightbox { 
    display: none; position: fixed; z-index: 9999; top: 0; left: 0; width: 100vw; height: 100vh; 
    background: rgba(0,0,0,0.98); justify-content: center; align-items: center; 
}
#lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; }
.nav-zoom { position: fixed; top: 0; bottom: 0; width: 12%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.2); font-size: 4em; cursor: pointer; z-index: 10005; user-select: none; }
.nav-zoom:hover { color: #fff; background: rgba(255,255,255,0.05); }
.prev-btn { left: 0; } .next-btn { right: 0; }
.close-lightbox { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,0.1); color: #fff; padding: 10px 25px; border-radius: 30px; border: 1px solid rgba(255,255,255,0.2); z-index: 10010; cursor: pointer; }

footer { padding: 60px 0; text-align: center; color: #444; border-top: 1px solid #1a1a1a; font-size: 0.9em; }

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 1024px) {
    .album-card, .photo { flex: 0 0 calc(33.33% - 15px); }
}
@media (max-width: 768px) {
    nav { padding: 15px 0; }
    .nav-container { flex-direction: row; padding: 0 10px; }
    .site-title { font-size: 1em; letter-spacing: 1px; }
    .nav-links a { margin-left: 10px; font-size: 0.6em; letter-spacing: 0.5px; }
    
    .nav-links a[href="admin.php"] { display: none; }

    /* Réglage des titres sur mobile pour éviter la coupure */
    h2 { 
        font-size: 1.3em !important; 
        letter-spacing: 2px !important; /* Réduction de l'espacement pour gagner de la place */
        padding: 0 10px;
    }

    .album-card, .photo { flex: 0 0 calc(50% - 15px); }
    .qui-container { flex-direction: column; align-items: center; text-align: center; }
    .qui-photo img { width: 100%; max-width: 280px; }
}
@media (max-width: 480px) {
    .site-title { font-size: 0.85em; }
    .nav-links a { margin-left: 6px; font-size: 0.5em; }
    h2 { font-size: 1.1em !important; letter-spacing: 1px !important; }
}