* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Comfortaa', cursive;
  line-height: 1.6;
  background: #0a0a0a;
  color: #e8e8e8;
  position: relative; /* Ajouté pour s'assurer que le body est un conteneur de positionnement si nécessaire */
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  padding: 1rem 0;
  background: transparent; /* Le fond du header lui-même est transparent */
}

.cloud-container {
  background: linear-gradient(135deg,
    rgba(26, 26, 46, 0.8) 0%,
    rgba(22, 33, 62, 0.8) 50%,
    rgba(15, 20, 25, 0.8) 100%
  );
  border-radius: 20px;
  box-shadow:
    0 8px 32px rgba(74, 158, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  max-width: 900px;
  margin: 0 auto;
  padding: 0.5rem;
  text-align: center;
  animation: cosmicFloat 8s ease-in-out infinite;
  border: 1px solid #2d3748;
  position: relative;
  overflow: hidden;
}

.cloud-container::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(circle at 30% 20%, rgba(74, 158, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
  animation: cosmicRotate 20s linear infinite;
  z-index: -1;
}

@keyframes cosmicFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-8px) rotate(0.5deg);
  }
  50% {
    transform: translateY(-12px) rotate(0deg);
  }
  75% {
    transform: translateY(-8px) rotate(-0.5deg);
  }
}

@keyframes cosmicRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.cloud-container h1 {
  font-size: 1.8rem;
  color: #e8e8e8;
}

.httpster-nav {
  display: flex;
  /* justify-content: center; Centre le menu principal (si pas de hamburger) */
  align-items: center;
  padding: 1rem 2rem; /* Espace intérieur */
  background: rgba(22, 33, 62, 0.8); /* Fond spatial avec transparence 80% */
  box-shadow: 0 2px 8px rgba(74, 158, 255, 0.2); /* Ombre cosmique */
  position: fixed; /* Reste en haut de la page */
  top: 80px; /* Espace par rapport au haut (après le header) */
  width: 100%;
  z-index: 999; /* En dessous du header mais au-dessus du reste */
  position: relative; /* MODIFIÉ: Ajouté pour le positionnement du sélecteur de langue globe */
}

.httpster-nav .menu {
  display: flex;
  gap: 1.5rem; /* Espace entre les éléments du menu */
  margin: 0 auto; /* Centre le menu si le hamburger n'est pas là */
}

.httpster-nav a {
  color: #e8e8e8; /* Couleur du texte des liens */
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  position: relative; /* Pour l'effet de soulignement */
  transition: color 0.3s ease, transform 0.2s ease;
}

.httpster-nav a:hover, .httpster-nav a:focus {
  color: #4a9eff; /* Couleur nébuleuse au survol/focus */
  transform: translateY(-2px); /* Léger mouvement vers le haut */
  outline: none; /* Supprime l'outline par défaut au focus */
}

.httpster-nav a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px; /* Position du soulignement */
  left: 0;
  background-color: #4a9eff; /* Couleur nébuleuse du soulignement */
  transition: width 0.3s ease; /* Animation du soulignement */
}

.httpster-nav a:hover::after, .httpster-nav a:focus::after {
  width: 100%; /* Soulignement complet au survol/focus */
}

.httpster-nav .hamburger {
  display: none; /* Caché par défaut sur les grands écrans */
  cursor: pointer;
  width: 30px;
  height: 20px;
  position: relative; /* Pour le positionnement des barres */
  transition: all 0.3s ease;
  /* S'assurer que le hamburger est cliquable et visible en haut à droite sur mobile */
  margin-left: 0; /* Pousse le hamburger à droite si le menu est à gauche */
}

.httpster-nav .hamburger span {
  background: #e8e8e8; /* Couleur des barres du hamburger */
  height: 3px;
  width: 100%;
  position: absolute;
  left: 0;
  transition: all 0.3s ease; /* Animation des barres */
}

.httpster-nav .hamburger span:nth-child(1) { top: 0; }
.httpster-nav .hamburger span:nth-child(2) { top: 8px; }
.httpster-nav .hamburger span:nth-child(3) { top: 16px; }

/* Animation du hamburger en croix */
.httpster-nav .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.httpster-nav .hamburger.active span:nth-child(2) { opacity: 0; }
.httpster-nav .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }

/* Styles des sous-menus */
.submenu-container {
  position: relative; /* Pour le positionnement du sous-menu */
}

.submenu {
  display: none; /* Caché par défaut */
  position: absolute;
  top: 100%; /* En dessous de l'élément parent */
  left: 0;
  background: rgba(22, 33, 62, 0.8); /* Transparence 80% */
  box-shadow: 0 4px 16px rgba(74, 158, 255, 0.2);
  border-radius: 5px;
  padding: 0.5rem 0;
  min-width: 200px; /* Largeur minimale */
  z-index: 1000; /* Au-dessus des autres éléments */
  opacity: 0;
  transform: translateY(10px); /* Position initiale pour l'animation */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.submenu-container:hover .submenu,
.submenu.active { /* .active pour le contrôle via JS sur mobile */
  display: block;
  opacity: 1;
  transform: translateY(0); /* Position finale pour l'animation */
}

.submenu a {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  color: #e8e8e8;
  text-decoration: none;
}

.submenu a:hover, .submenu a:focus {
  background: #2d3748; /* Fond cosmique au survol/focus */
  color: #4a9eff; /* Couleur nébuleuse du texte au survol/focus */
}

/* Décalage pour les ancres à cause de la navigation fixe */
h3[id] {
  padding-top: 150px; /* Hauteur de la nav + header + marge */
  margin-top: -150px; /* Compense le padding */
  display: block; /* Assure que le padding est appliqué */
}

@media (max-width: 768px) {
  .httpster-nav {
    top: 60px; /* Ajustement pour les petits écrans */
    justify-content: space-between; /* Aligne le logo/titre à gauche et le hamburger à droite */
    padding: 0.5rem 1rem; /* Moins de padding sur mobile */
  }

  .httpster-nav .menu {
    display: none; /* Menu principal caché, affiché par JS */
    flex-direction: column; /* Affichage vertical */
    background: rgba(22, 33, 62, 0.8); /* Transparence 80% */
    position: absolute;
    top: 100%; /* En dessous de la barre de nav */
    left: 0;
    width: 100%;
    padding: 1rem;
    box-shadow: 0 4px 16px rgba(74, 158, 255, 0.2);
  }

  .httpster-nav .menu.active {
    display: flex; /* Affiché quand le hamburger est cliqué */
  }

  .httpster-nav .hamburger {
    display: block; /* Hamburger visible sur mobile */
  }

  .httpster-nav a { /* Styles pour les liens dans le menu mobile */
    font-size: 1.1rem;
    padding: 0.5rem 0;
  }

  .cloud-container h1 {
    font-size: 1.3rem; /* Titre du header plus petit */
  }

  .cloud-container {
    border-radius: 15px;
    padding: 0.4rem;
  }

  .submenu-container {
    width: 100%; /* Sous-menu prend toute la largeur */
  }

  .submenu { /* Sous-menu sur mobile */
    position: static; /* Plus en absolu */
    box-shadow: none;
    background: rgba(26, 26, 46, 0.8); /* Fond spatial avec transparence 80% */
    padding: 0.5rem 1rem;
    transform: translateY(0);
    opacity: 1;
    display: none; /* Caché par défaut, géré par JS */
  }

  .submenu.active {
    display: block; /* Affiché quand le parent est cliqué */
  }

  .submenu a {
    font-size: 1rem;
  }

  h3[id] { /* Décalage d'ancre sur mobile */
    padding-top: 120px; /* Ajusté pour la hauteur de nav mobile */
    margin-top: -120px;
  }
}

.container {
  max-width: 900px;
  margin: 7rem auto 2rem; /* Marge en haut pour la nav fixe, ajustée pour la hauteur de la nav */
  padding: 3rem 1.5rem;
}

/* Conteneurs pour les H3 uniquement */
section {
  margin-bottom: 2rem;
  padding: 2rem;
  background: rgba(22, 33, 62, 0.8); /* Fond spatial avec transparence 80% */
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(74, 158, 255, 0.2);
  border-top: 4px solid #4a9eff; /* Bordure supérieure nébuleuse */
  opacity: 0; /* Pour animation */
  transform: translateY(30px) scale(0.95); /* Animation plus dynamique */
  animation: cosmicFadeIn 0.8s ease-out forwards; /* Animation d'apparition cosmique */
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

section:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 32px rgba(74, 158, 255, 0.4);
  border-top-color: #8b5cf6;
}

section::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(74, 158, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

section:hover::before {
  left: 100%;
}

/* Articles sans style de conteneur - H2 libres */
article {
  margin-bottom: 4rem;
  /* Pas de padding, background, border, shadow pour éviter les conteneurs imbriqués */
  opacity: 0; /* Pour animation */
  transform: translateY(20px); /* Pour animation */
  animation: fadeInUp 0.6s ease-out forwards; /* Animation d'apparition */
}

section:nth-child(2) { animation-delay: 0.2s; }
section:nth-child(3) { animation-delay: 0.4s; }
section:nth-child(4) { animation-delay: 0.6s; }
section:nth-child(5) { animation-delay: 0.8s; }
section:nth-child(6) { animation-delay: 1.0s; }
section:nth-child(7) { animation-delay: 1.2s; }
section:nth-child(8) { animation-delay: 1.4s; }

article:nth-child(2) { /* Délai pour le deuxième article */
  animation-delay: 0.2s;
}

@keyframes cosmicFadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  50% {
    opacity: 0.7;
    transform: translateY(10px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cosmicTextShine {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

section#gallery { /* Styles spécifiques pour la galerie */
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 1rem 0;
}

/* Espacement entre H2 et leurs sections suivantes */
h2 + section {
  margin-top: 2rem;
}

h2 {
  color: #e8e8e8;
  font-size: 2.2rem;
  margin-bottom: 1rem;
  margin-top: 3rem;
  position: relative;
  text-shadow: 0 0 20px rgba(74, 158, 255, 0.3);
  background: linear-gradient(135deg, #e8e8e8 0%, #4a9eff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: cosmicTextShine 3s ease-in-out infinite;
}

/* Premier H2 de la page sans marge supérieure */
article:first-of-type h2:first-child,
main > article:first-child h2:first-child {
  margin-top: 0;
}

h2::before { /* Patte de chien décorative avant les H2 */
  content: "🐾 ";
  font-size: 1.5rem;
}

h3 {
  text-align: center;
  font-weight: bold;
  font-size: 1.4rem;
  color: #4a9eff;
  text-shadow: 0 0 10px rgba(74, 158, 255, 0.5);
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 0.5rem;
}

h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #4a9eff, transparent);
  border-radius: 1px;
}

p {
  margin-bottom: 1rem;
}

.hero { /* Section principale "héros" */
  text-align: center;
  padding: 3rem 2rem;
  background: rgba(9, 17, 39, 0.8); /* Fond spatial avec transparence 80% */
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(74, 158, 255, 0.3);
  border: 1px solid #2d3748;
}

.hero-image {
  max-width: 500px;
  width: 100%;
  height: auto;
  border-radius: 15px;
  display: block;
  margin: 1rem auto;
}

.hero h2 {
  font-size: 2.5rem;
}

.hero p {
  font-size: 1.2rem;
  max-width: 600px;
  margin: 1rem auto;
}

.cta-button { /* Bouton d'appel à l'action */
  display: inline-block;
  background: linear-gradient(135deg, #4a9eff 0%, #667eea 100%);
  color: #0a0a0a;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 700;
  margin: 0.5rem;
  position: relative;
  transition: all 0.3s ease;
  border: 1px solid #2d3748;
  box-shadow: 0 4px 15px rgba(74, 158, 255, 0.3);
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.cta-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #8b5cf6 0%, #667eea 100%);
  transition: left 0.3s ease;
  z-index: -1;
}

.cta-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

.cta-button:hover, .cta-button:focus {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.5);
  color: #e8e8e8;
  outline: 2px solid #8b5cf6;
}

.cta-button:hover::before, .cta-button:focus::before {
  left: 0;
}

.cta-button:hover::after, .cta-button:focus::after {
  width: 100px;
  height: 100px;
}

.cta-button:active { /* Effet au clic */
  transform: scale(0.95);
}

@keyframes pulse { /* Animation de pulsation (non utilisée actuellement mais gardée) */
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

.symbol-gallery { /* Galerie de symboles */
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.symbol-card {
  background: rgba(22, 33, 62, 0.8); /* Transparence 80% */
  padding: 1rem;
  border-radius: 5px;
  text-align: center;
  width: 200px;
  border: 1px solid #2d3748;
  box-shadow: 0 2px 8px rgba(74, 158, 255, 0.1);
}

.symbol-card img {
  max-width: 100px;
  height: auto;
}

.chant-gallery { /* Galerie de chants */
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.chant-card {
  background: rgba(22, 33, 62, 0.8); /* Transparence 80% */
  padding: 1rem;
  border-radius: 5px;
  text-align: center;
  width: 250px;
  border: 1px solid #2d3748;
  box-shadow: 0 2px 8px rgba(74, 158, 255, 0.1);
}

.chant-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: #e8e8e8;
}

.chant-card audio { /* Lecteur audio */
  width: 100%;
  margin: 0.5rem 0;
}

.chant-card .spotify-link { /* Lien Spotify */
  display: inline-block;
  background: #1db954; /* Couleur Spotify */
  color: #fff;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 600;
  margin-top: 0.5rem;
}

.chant-card .spotify-link:hover, .chant-card .spotify-link:focus {
  background: #17a346; /* Couleur Spotify plus foncée */
  outline: 2px solid #17a346;
}

li {
  padding-bottom: 1rem; /* Espacement pour les listes */
}

form { /* Styles pour le formulaire de contact */
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 500px;
  margin: 0 auto;
}

input, textarea {
  padding: 0.5rem;
  border: 2px solid #2d3748; /* Bordure cosmique */
  border-radius: 5px;
  font-family: 'Comfortaa', cursive; /* Garde la même police */
  background: rgba(26, 26, 46, 0.8); /* Transparence 80% */
  color: #e8e8e8;
}

button { /* Bouton générique (utilisé pour le formulaire) */
  background: #4a9eff;
  color: #0a0a0a;
  padding: 0.75rem;
  border: 1px solid #2d3748;
  border-radius: 5px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

button:hover, button:focus {
  background: #8b5cf6;
  color: #e8e8e8;
  outline: 2px solid #8b5cf6;
}

footer {
  background: rgba(22, 33, 62, 0.8); /* Transparence 80% */
  color: #b8b8b8;
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
  box-shadow: 0 -2px 8px rgba(74, 158, 255, 0.2); /* Ombre cosmique en haut du footer */
  border-top: 1px solid #2d3748; /* Ligne de séparation */
}

/* Styles pour la popup (non utilisée actuellement, mais gardée) */
.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
  z-index: 2000; /* Au-dessus de tout */
  justify-content: center;
  align-items: center;
}

.popup-content {
  background: rgba(22, 33, 62, 0.8); /* Transparence 80% */
  padding: 2rem;
  border-radius: 10px;
  text-align: center;
  max-width: 400px;
  width: 90%; /* Responsive */
  box-shadow: 0 4px 16px rgba(74, 158, 255, 0.3);
  position: relative; /* Pour le bouton de fermeture */
  border: 1px solid #2d3748;
}

.popup-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 1.5rem;
  cursor: pointer;
  color: #e8e8e8;
}

.popup-close:hover, .popup-close:focus {
  color: #4a9eff;
}

.popup h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.popup p {
  font-size: 1.1rem;
}

@media (max-width: 768px) { /* Ajustements mobiles pour la popup */
  .container {
    margin: 5rem auto 2rem; /* Marge supérieure réduite sur mobile */
  }

  .chant-card {
    width: 100%;
    max-width: 300px;
  }

  .hero-image {
    max-width: 100%; /* Image héros prend toute la largeur disponible */
  }

  .popup-content {
    padding: 1.5rem;
  }

  .popup h2 {
    font-size: 1.5rem;
  }

  .popup p {
    font-size: 1rem;
  }
}

/* NOUVEAUX STYLES pour le sélecteur de langue GLOBE */
/* .httpster-nav a une `position: relative;` ajoutée plus haut */

.globe-language-switcher {
  position: absolute; 
  top: 50%; 
  right: 20px; /* Ajustez selon votre mise en page */
  transform: translateY(-50%);
  z-index: 1005; /* Doit être au-dessus des autres éléments de la nav, mais en dessous du dropdown lui-même */
}

.globe-icon {
  font-size: 1.7rem; /* Taille de l'icône globe */
  color: #e8e8e8; /* Couleur de l'icône, adaptée au thème cosmique */
  cursor: pointer;
  padding: 5px; /* Zone cliquable un peu plus grande */
  display: inline-block;
  user-select: none; /* Empêcher la sélection du texte de l'icône */
}
.globe-icon:hover, .globe-icon:focus {
  color: #4a9eff; /* Couleur nébuleuse au survol/focus */
}

.lang-dropdown {
  display: none; /* Caché par défaut, géré par JS */
  position: absolute;
  top: 100%; /* Se positionne sous l'icône */
  right: 0; /* S'aligne à droite de son parent (.globe-language-switcher) */
  background-color: rgba(22, 33, 62, 0.8); /* Transparence 80% */
  border: 1px solid #2d3748;
  border-radius: 5px;
  box-shadow: 0 4px 16px rgba(74, 158, 255, 0.25);
  min-width: 70px; /* Largeur minimale pour les codes de langue */
  z-index: 1006; /* Au-dessus du globe et potentiellement d'autres éléments de la nav */
  padding: 5px 0; /* Espacement interne vertical */
}

.lang-dropdown a {
  display: block;
  padding: 8px 15px; /* Espacement confortable */
  text-decoration: none;
  color: #e8e8e8;
  font-size: 0.95rem; /* Taille de police claire */
  text-align: center; /* Centrer les codes de langue */
  transition: background-color 0.2s ease, color 0.2s ease;
}

.lang-dropdown a:hover, .lang-dropdown a:focus {
  background-color: #2d3748; /* Fond cosmique au survol/focus */
  color: #4a9eff; /* Couleur nébuleuse */
  outline: none; /* On gère le focus visuellement autrement */
}

/* Ajustements pour mobile pour le sélecteur de langue globe */
@media (max-width: 768px) {
  .globe-language-switcher {
    right: 15px; /* Un peu moins d'espace sur mobile */
    /* S'assurer qu'il ne chevauche pas le hamburger si celui-ci est aussi à droite */
  }
  .globe-icon {
    font-size: 1.6rem;
  }
  /* Si le menu hamburger est actif et que le menu se déploie, 
     vous pourriez vouloir cacher ou déplacer le globe pour éviter les superpositions.
     Le sélecteur suivant est un exemple et pourrait nécessiter un ajustement
     en fonction de la structure HTML exacte après l'injection par nav.js.
     Il suppose que .menu.active et .globe-language-switcher sont frères directs de .httpster-nav
     ou que .globe-language-switcher est après .menu dans le DOM.
  */
  .httpster-nav .menu.active + .globe-language-switcher, /* Si le globe est après le menu */
  .httpster-nav .globe-language-switcher.hidden-on-mobile-menu-active { /* Ou via une classe JS */
    /* display: none; */ /* Option: cacher le globe quand le menu mobile est ouvert */
    /* Ou ajuster sa position, par exemple: */
    /* top: initial; bottom: 10px; right: 10px; transform: none; */
  }
}


/* Améliorations d'accessibilité pour le thème cosmique */
input:focus, textarea:focus, button:focus, .cta-button:focus {
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.5);
  outline: 2px solid #4a9eff;
  outline-offset: 2px;
}

/* Améliorer le contraste pour les liens */
a {
  color: #4a9eff;
}

a:visited {
  color: #8b5cf6;
}

/* Assurer un bon contraste pour le texte */
p, li, span {
  color: #e8e8e8;
}

/* Classes pour les animations JS */
.cosmic-hidden {
  opacity: 0;
  transform: translateY(50px) scale(0.9);
  transition: none;
}

.cosmic-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cosmic-glow {
  animation: cosmicGlowPulse 2s ease-in-out;
}

@keyframes cosmicGlowPulse {
  0%, 100% {
    text-shadow: 0 0 10px rgba(74, 158, 255, 0.5);
  }
  50% {
    text-shadow:
      0 0 20px rgba(74, 158, 255, 0.8),
      0 0 30px rgba(139, 92, 246, 0.6);
  }
}

/* Curseur personnalisé supprimé pour une meilleure UX */

/* Accessibilité : désactiver les animations pour les utilisateurs préférant un mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {
    animation: none !important;
    transition: none !important;
  }

  .cosmic-hidden {
    opacity: 1;
    transform: none;
  }

}