/* --- POLICE PERSONNALISÉE POUR EMAIL --- */
@font-face {
  font-family: 'BeerMoney';
  src: url('beermoney.ttf') format('truetype');
}

/* --- GLOBAL --- */
html, body {
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, #0a0a0a, #1a1a1a, #000000);
  background-size: 400% 400%;
  animation: gradientToBlack 6s ease-in-out forwards;
  font-family: sans-serif;
  color: white;
  text-align: center;
}

/* --- ANIMATIONS --- */
@keyframes gradientToBlack {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(1.1); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes glitchRed {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-2px, -2px); }
  40% { transform: translate(2px, 2px); }
  60% { transform: translate(-2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0, 0); }
}

@keyframes glitchCyan {
  0% { transform: translate(0, 0); }
  20% { transform: translate(2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, -2px); }
  80% { transform: translate(-2px, 2px); }
  100% { transform: translate(0, 0); }
}

/* --- LOGO --- */
.logo {
  max-width: 220px;
  margin: 30px auto 10px auto;
  display: block;
  opacity: 0;
  animation: fadeIn 2s ease-out forwards;
}

/* --- EMAIL CONTACT --- */
.email-contact {
  position: absolute;
  top: 10px;
  right: 15px;
  z-index: 100;
  white-space: nowrap;
}

.email-contact a {
  color: #ff007f;
  text-decoration: none;
  font-weight: bold;
  opacity: 0.9;
  font-family: 'BeerMoney', sans-serif;
  font-size: 26px; /* taille par défaut */
  text-transform: uppercase;
}

.email-contact a:hover {
  text-decoration: underline;
  opacity: 1;
}

/* --- SOUS-TITRE --- */
.subtitle {
  margin-bottom: 20px;
  font-size: 1rem;
  opacity: 0.9;
}

/* --- BOUTONS AVEC GLITCH AU SURVOL --- */
.button {
  position: relative;
  display: inline-block;
  padding: 12px 24px;
  margin: 8px;
  border-radius: 30px;
  color: white;
  font-weight: bold;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase;
  background: black;
  border: 2px solid white;
  overflow: hidden;
  transition: 0.2s ease;
  z-index: 1;
}

.button::before,
.button::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  line-height: 48px;
  font-weight: bold;
}

.button::before {
  color: red;
  z-index: 2;
}

.button::after {
  color: cyan;
  z-index: 3;
}

.button:hover::before {
  animation: glitchRed 0.3s steps(2, end) infinite;
  opacity: 1;
}

.button:hover::after {
  animation: glitchCyan 0.3s steps(2, end) infinite;
  opacity: 1;
}

.button:hover {
  opacity: 0.9;
}

/* --- COULEURS SPÉCIFIQUES --- */
.button.instagram {
  background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af);
  border: none;
}

.button.facebook {
  background-color: #007bff;
  border: none;
}

.button.youtube {
  background-color: #ff0000;
  border: none;
}

/* --- BOUTON AUDIO --- */
#toggleAudioBtn {
  background-color: #222;
  border: 1px solid white;
  display: inline-block;
  padding: 12px 24px;
  margin: 15px auto;
  border-radius: 25px;
  color: white;
  font-size: 1rem;
  cursor: pointer;
}

/* --- DATES --- */
.dates {
  margin-top: 20px;
  font-size: 14px;
  opacity: 0.9;
  line-height: 1.6;
  padding: 0 10px;
}

.dates strong {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
}

.dates em {
  display: block;
  margin-top: 5px;
  font-style: italic;
  opacity: 0.7;
}

/* --- RESPONSIVE --- */
@media (max-width: 600px) {
  .logo {
    max-width: 160px;
    margin: 20px auto 10px;
  }

  .email-contact {
    position: static;
    text-align: center;
    margin: 26px 0;
  }

  .email-contact a {
    font-size: 23px; /* taille agrandie pour mobile ici */
  }

  .button {
    display: block;
    width: 60%;
    margin: 10px auto;
    font-size: 1rem;
  }

  #toggleAudioBtn {
    width: 60%;
  }

  .dates {
    font-size: 13px;
  }
}