/* Importation de la police Oswald (Style Métal/Rock moderne) depuis Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght=700&display=swap');

/* --- INTÉGRATION DE LA NOUVELLE POLICE LOCALE --- */
@font-face {
    font-family: 'PinkBlue';
    src: url('Pink Blue.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
html, body {
    max-width: 100%;
    overflow-x: hidden; /* Coupe tout ce qui dépasse à droite et à gauche */
}
/* Styles Généraux : Ambiance Basalte et Cendres */
body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #121214; /* Noir de roche volcanique */
    color: #cdcdcd; /* Gris cendré pour le texte */
    line-height: 1.6;
}

.container {
    padding: 50px 20px;
    max-width: 900px;
    margin: 0 auto;
}

/* Titres de sections avec une bordure couleur Lave en fusion */
h2 {
    font-family: 'Oswald', 'Impact', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 3px solid #ff3700; /* Rouge lave */
    padding-bottom: 8px;
    color: #fff;
    font-size: 2rem;
}

/* Hero Banner (Le cratère) */
.hero {
    background: linear-gradient(rgba(18,18,20,0.2), rgba(18,18,20,0.95)), url('photo-groupe.JPG') no-repeat center center/cover;
    height: 65vh;
    display: flex;
    align-items: flex-end; 
    justify-content: center;
    text-align: center;
}

.hero-content {
    padding-bottom: 40px; 
    width: 100%;
}

/* Nom du groupe Volcano écrit au pinceau (Pink Blue) : texte noir et relief rouge */
.hero-content h1 {
    font-family: 'PinkBlue', 'Oswald', 'Impact', sans-serif;
    font-size: 5.5rem; /* Augmenté ici pour que le titre soit plus grand */
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: inline-block;
    position: relative;
    color: #000000;
    
    /* Effet d'ombre/relief rouge intense en cascade sous l'écriture noire */
    text-shadow: 
        2px 2px 0px #ff3700,
        4px 4px 0px #cc1100,
        6px 6px 12px rgba(0, 0, 0, 0.9);
}

/* Suppression de l'ancien effet d'incandescence complexe de l'élément virtuel ::after */
.hero-content h1::after {
    display: none;
}

.hero-content p {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    color: #ffaa00; /* Orange chaud */
    letter-spacing: 5px;
    margin-top: 5px;
    font-size: 1.2rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

/* Boutons : Métal Chaud / Lave */
.btn, .btn-secondary, .btn-small {
    display: inline-block;
    background-color: #ff3700; /* Lave */
    color: #fff;
    padding: 12px 26px;
    text-decoration: none;
    border-radius: 0px; /* Bords droits, plus agressif/rock */
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 3px 3px 0px #000;
}
.btn:hover { 
    background-color: #ff5500;
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0px #000;
}

.btn-secondary { 
    background-color: #222; 
    border: 2px solid #ff3700; 
    box-shadow: none;
}
.btn-secondary:hover { 
    background-color: #ff3700; 
    transform: none;
}

.btn-small { 
    padding: 6px 12px; 
    font-size: 0.85rem; 
    box-shadow: none;
}

/* Tableau des Concerts (Style sombre et épuré) */
.concert-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.concert-table td {
    padding: 18px;
    border-bottom: 1px solid #2a2a2e;
}

.concert-table tr:hover td {
    background-color: #1a1a1e; /* Effet de survol discret */
    color: #fff;
}

/* Footer (Chambre magmatique) */
footer {
    background-color: #0b0b0c;
    padding: 50px 20px;
    text-align: center;
    border-top: 2px solid #2a2a2e;
}

footer p {
    font-size: 1.1rem;
}

footer a { 
    color: #ffaa00; 
    text-decoration: none; 
    font-weight: bold;
}
footer a:hover {
    color: #ff3700;
}

.social-links {
    margin-top: 20px;
}

.social-links a { 
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    margin: 0 15px; 
    letter-spacing: 1px;
}

/* Style de la carte Musique */
.media-card {
    background-color: #1a1a1e; /* Roche sombre */
    border-left: 4px solid #ff3700; /* Ligne de lave sur le côté */
    padding: 25px;
    margin-top: 20px;
    box-shadow: 4px 4px 0px #000;
}

.media-card h3 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    color: #fff;
    margin-top: 0;
    letter-spacing: 1px;
}

/* Customisation discrète du lecteur audio pour coller au thème sombre */
audio::-webkit-media-controls-panel {
    background-color: #222226;
}

/* Grille de la Galerie Photo (Optimisée pour 4 images) */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colonnes sur grand écran */
    gap: 20px; /* Espace entre les photos */
    margin-top: 25px;
}

.gallery-item {
    background-color: #1a1a1e;
    border: 2px solid #2a2a2e;
    box-shadow: 4px 4px 0px #000;
    padding: 6px;
}

.gallery-item img {
    width: 100%;
    height: 200px; /* Force une taille uniforme */
    object-fit: cover; /* Évite de déformer les images */
    display: block;
}

/* Version Mobile */
@media screen and (max-width: 768px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-content h1 { font-size: 4.5rem; } /* Réduction pour tablettes */
}

@media screen and (max-width: 480px) {
    .gallery-grid { grid-template-columns: 1fr; }
    .hero-content h1 { 
        font-size: 3.2rem; /* Taille idéale pour que ça ne dépasse plus sur smartphone */
        letter-spacing: 1px;
    }
}