@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&family=MedievalSharp&display=swap');

:root {
  --texte: #d0e4ff;
  --fond-nuit: #0a1b2a;
  --bouton-bg: #1e3a5f;
  --bordure: #6ca0dc;
}

/* Fond principal */
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  background: var(--fond-nuit) url('../Images/fond.png') center center no-repeat;
  background-size: contain;
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: var(--texte);
  text-align: center;
  font-family: 'MedievalSharp', cursive;
  position: relative;
  overflow: hidden;
  animation: fondAnime 60s ease-in-out infinite alternate;
}


/* 🎥 Légère animation du fond (balancement) */
@keyframes fondAnime {
  0% { background-position: center center; transform: scale(1); }
  50% { background-position: center 48%; transform: scale(1.05); }
  100% { background-position: center center; transform: scale(1); }
}

/* Légère ombre bleutée */ 
body::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 10, 25, 0.6);
  backdrop-filter: blur(2px);
  z-index: 0;
} 

/* 🌫️ Brume */
.brume {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  animation: bougerBrume 120s linear infinite;
  opacity: 0.4;
  z-index: 0;
}

@keyframes bougerBrume {
  0% { transform: translate(-10%, -10%) rotate(0deg); }
  100% { transform: translate(-20%, -20%) rotate(360deg); }
}

/* 🔥 Flammes vacillantes */
.flamme {
  position: absolute;
  width: 40px;
  height: 80px;
  background: radial-gradient(circle at 50% 70%, rgba(255, 180, 100, 0.5), rgba(255, 120, 50, 0.1) 70%, transparent 90%);
  border-radius: 50%;
  filter: blur(8px);
  animation: vaciller 0.4s infinite alternate;
  z-index: 0;

  /* position de la flamme*/
  left: 53%;
  bottom: 12%;

  transform: translateX(-50%);
}

.flamme:nth-child(1) { left: 20%; }
.flamme:nth-child(2) { left: 50%; }
.flamme:nth-child(3) { left: 80%; }

@keyframes vaciller {
  0% { transform: scale(1) translateX(0); opacity: 0.4; }
  50% { transform: scale(1.1) translateX(-3px); opacity: 0.7; }
  100% { transform: scale(1) translateX(3px); opacity: 0.5; }
}

/* ✨ Lucioles */
.luciole {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #f5f5ff;
  border-radius: 50%;
  box-shadow: 0 0 10px #f5f5ff;
  opacity: 0.7;
  animation: voler 10s linear infinite;
  z-index: 0;
}

.luciole:nth-child(4) { top: 10%; left: 20%; animation-delay: 0s; }
.luciole:nth-child(5) { top: 40%; left: 60%; animation-delay: 2s; }
.luciole:nth-child(6) { top: 70%; left: 80%; animation-delay: 4s; }
.luciole:nth-child(7) { top: 85%; left: 40%; animation-delay: 6s; }

@keyframes voler {
  0% { transform: translate(0, 0) scale(1); opacity: 0.3; }
  25% { transform: translate(20px, -30px) scale(1.2); opacity: 1; }
  50% { transform: translate(-10px, -60px) scale(0.8); opacity: 0.6; }
  75% { transform: translate(10px, -90px) scale(1); opacity: 0.4; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
}
/* Légère ombre bleutée 
body::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 10, 25, 0.6);
  backdrop-filter: blur(2px);
  z-index: 0;
} */

/* Titres et texte */
h1 {
  font-family: 'Cinzel Decorative', cursive;
  font-size: 3.5em;
  margin-bottom: 0.3em;
  z-index: 1;
  text-shadow: 0 0 15px rgba(108,160,220,0.7);
}

p {
  font-size: 1.3em;
  font-style: italic;
  z-index: 1;
  margin-bottom: 2em;
  text-shadow: 0 0 8px rgba(108,160,220,0.3);
}

/* Bouton */
a {
  text-decoration: none;
  background-color: var(--bouton-bg);
  color: var(--texte);
  padding: 0.8em 1.8em;
  border-radius: 8px;
  font-size: 1.2em;
  z-index: 1;
  border: 2px solid var(--bordure);
  transition: all 0.3s ease;
  box-shadow: 0 0 12px rgba(108,160,220,0.2);
}

a:hover {
  background-color: var(--bordure);
  color: #0a1b2a;
  box-shadow: 0 0 20px rgba(108,160,220,0.8);
}

/* Animation d’apparition */
.fade-in {
  opacity: 0;
  animation: fadeIn 2.5s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* Responsive */
/* 🌙 Mode simplifié pour mobile */
@media (max-width: 768px) {
  body {
    background-size: cover;
    animation: none !important;
    transition: none !important;
    background-attachment: scroll; /* évite les bugs de fond fixe sur mobile */
  }

  /* Désactive complètement les effets */
  .brume,
  .flamme,
  .luciole {
    display: none !important;
  }

  /* Supprime les effets visuels lourds */
  body::after {
    background: rgba(0, 10, 25, 0.7);
    backdrop-filter: none !important;
  }

  h1, p, a {
    text-shadow: none !important;
  }

  a {
    box-shadow: none !important;
  }
}

/* 🌌 Réactive tout sur les grands écrans */
@media (min-width: 769px) {
  .brume,
  .flamme,
  .luciole {
    display: block;
    opacity: 1;
    transition: opacity 0.8s ease-in-out;
  }

  body {
    animation: fondAnime 60s ease-in-out infinite alternate;
  }

  body::after {
    backdrop-filter: blur(2px);
  }
}
/* 📱 Désactivation complète des animations en mode paysage sur mobile */
@media (orientation: landscape) and (max-height: 600px) {
  body {
    background-size: cover;
    animation: none !important;
    transition: none !important;
    background-attachment: scroll;
  }

  .brume,
  .flamme,
  .luciole {
    display: none !important;
  }

  body::after {
    background: rgba(0, 10, 25, 0.7);
    backdrop-filter: none !important;
  }

  h1, p, a {
    text-shadow: none !important;
  }

  a {
    box-shadow: none !important;
  }
}