/*
Theme Name: vjing-theme-2
Theme URI: https://www.youtube.com/watch?v=6yHUifU3DZc&list=OLAK5uy_lP8LNxKyQoJM69t8-vmtwSdrZepEu1VTo&index=2
Author: muff_weedler
Description: Thème personnalisé pour le Vjing au Zoo - Usine.
Version: 2.0
Text Domain: vjing-zoo
*/

/* 1. RESET & BASE STYLE */
* {
    margin: 0;
    padding: 0;
    box_sizing: border-box;
}

body {
    background-color: #000; /* Fond entièrement noir */
    color: #fff;            /* Texte en blanc */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

/* 2. BANNIÈRE (Hero Section) */
.hero-banner {
    width: 100%;
    height: 600px; /* Hauteur fixe demandée */
    overflow: hidden;
    position: relative;
}

.hero-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Pour que l'image remplisse l'espace sans se déformer */
    display: block;
    filter: brightness(100%); /* Assombrit légèrement pour le style "club" */
}

/* 3. NAVIGATION */
nav {
    width: 100%;
    padding: 20px 0;
    border-bottom: 1px solid #222; /* Une fine séparation discrète */
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 40px; /* Espacement entre les entrées */
}

.nav-item a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 2px;
    transition: opacity 0.3s ease;
}

.nav-item a:hover {
    opacity: 0.6; /* Effet de survol discret */
}

/* 4. ZONE DE CONTENU (Placeholder) */
main {
    padding: 20px 20px;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 60vh;
}

.content-placeholder {
    text-align: center;
    opacity: 0.5;
    font-style: none;
}

/* 5. RESPONSIVE (Mobile) */
@media (max-width: 600px) {
    .hero-banner {
        height: 300px; /* On réduit un peu la hauteur sur petit mobile */
    }

    .nav-menu {
        gap: 20px; /* On réduit l'écart sur mobile */
    }

    .nav-item a {
        font-size: 0.75rem;
        letter-spacing: 1px;
    }
}

/* 6. FOOTER */
.site-footer {
    width: 100%;
    padding: 0px 0px 0px 0px; /* Plus d'espace en haut pour respirer */
    border-top: 1px solid #222;    /* Même style que la nav */
    margin-top: 20px;              /* Pour bien séparer du contenu */
    background-color: #000;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;       /* On empile le copyright et les liens */
    align-items: center;          /* On centre tout horizontalement */
    gap: 20px;                    /* Espace entre le copyright et les liens */
}

.footer-links {
    list-style: none;
    display: flex;
    gap: 20px;                    /* Espace entre les liens du footer */
    padding: 0;
}

.footer-links a {
    color: #fff;
    text-decoration: none;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.6;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.footer-links a:hover {
    opacity: 1;                   /* Le lien s'éclaire au survol */
    color: #fff;
}

/* Responsive Footer */
@media (max-width: 600px) {
    .footer-links {
        flex-direction: column;   /* Sur mobile, les liens s'empilent verticalement */
        align-items: center;
        gap: 15px;
    }
    
    .site-footer {
        padding: 20px 20px;
    }
}

/* --- SECTION VJ'S ARCHIVE --- */

/* Titre de la section */
.archive-header {
    text-align: center;
    margin-bottom: 20px;
}

.section-title {
    font-size: 3rem;
    letter-spacing: 5px;
    text-transform: uppercase;
}

/* La Grille (Mosaïque) */
.vj-grid {
    display: grid;
    /* Crée des colonnes automatiques : minimum 250px, sinon elles s'étirent */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px; /* Espace entre les photos */
    align-items: start;
}

/* La Carte VJ */
.vj-card {
    cursor: pointer;
}

.vj-link {
    text-decoration: none;
    color: inherit;
}

/* Le conteneur de l'image pour forcer le format 4:5 */
.vj-image-container {
    width: 100%;
    aspect-ratio: 4 / 5; /* MAGIE : Force le ratio 4:5 */
    overflow: hidden;    /* Pour que l'image qui zoome ne dépasse pas */
    background-color: #111;
}

.vj-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* L'image remplit le cadre sans se déformer */
    display: block;
    transition: transform 0.5s ease, filter 0.5s ease; /* Transition fluide */
}

/* Le Nom du VJ */
.vj-name {
    margin-top: 15px;
    text-align: center;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: color 0.3s ease;
}

/* --- L'EFFET AU SURVOL (HOVER) --- */

/* 1. L'image zoome légèrement */
.vj-card:hover .vj-image-container img {
    transform: scale(1.1);
}

/* 2. L'image s'assombrit */
.vj-card:hover .vj-image-container img {
    filter: brightness(0.5);
}

/* 3. Le nom change de couleur ou d'opacité */
.vj-card:hover .vj-name {
    color: #888;
}

/* --- SECTION EVENTS --- */

.event-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.event-card {
    border-bottom: 1px solid #222;
    padding-bottom: 20px;
    transition: all 0.3s ease; /* Pour une transition douce sur toute la carte */
}

.event-link {
    text-decoration: none;
    color: inherit; /* On garde la couleur par défaut du texte */
    display: block;
}

/* État de base : Le titre est blanc et la date est grise */
.event-date {
    font-size: 0.8rem;
    color: #888; /* La date est grise par défaut */
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: color 0.3s ease; /* Transition pour le changement de couleur */
}

.event-title {
    font-size: 1.5rem;
    color: #ffffff; /* Le titre est blanc par défaut */
    text-transform: uppercase;
    margin-top: 5px;
    transition: color 0.3s ease; /* Transition pour le changement de couleur */
}

/* --- L'EFFET AU SURVOL (HOVER) --- */

/* Quand on survole la CARTE, la date ET le titre s'assombrissent */
.event-card:hover .event-date,
.event-card:hover .event-title {
    color: #444; /* On les fait passer d'un blanc/gris à un gris très sombre */
}

/* Optionnel : Un petit effet de décalage vers la droite pour dynamiser le survol */
.event-card:hover {
    padding-left: 5px;
    background-color: #050505; /* Un très léger fond pour marquer le survol */
}


/* Détail de l'événement */
.event-detail {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.event-main-title {
    font-size: 3rem;
                text-transform: uppercase;
    margin-bottom: 10px;
}

.event-detail-date {
    font-size: 1.2rem;
    color: #888;
    margin-bottom: 40px;
}

.event-lineup {
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.event-visuals {
    margin-bottom: 40px;
    padding: 20px;
    background: #111; /* Petit encadré pour les visuels */
}

.visuals-list {
    list-style: none;
    padding: 0;
}

.visuals-list a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.visuals-list a:hover {
    color: #888;
}

.genre-badge {
    display: inline-block;
    padding: 5px 15px;
    background: #222;
    border-radius: 20px;
    font-size: 0.7rem;
    margin: 5px;
    text-transform: uppercase;
}

/* --- IMAGE DÉTAIL ÉVÉNEMENT --- */

.event-detail-image-container {
    width: 100%;
    max-width: 800px; /* On limite la largeur pour ne pas que l'image soit gigantesque */
    margin: 30px auto; /* Centrage et espace avec le texte au dessus/dessous */
    overflow: hidden;
    border-radius: 4px; /* Un petit arrondi très léger pour le style */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Une légère ombre pour la profondeur */
}

.event-detail-img {
    width: 100%;
    height: auto;   /* Garde les proportions de l'image */
    display: block;
    object-fit: cover;
}

/* On s'assure que la section line-up a un peu d'espace après l'image */
.event-lineup {
    margin-top: 30px;
}