/* ============================================================
   SEO & Developer & Robots Notes :
   - Veillez à ce que ce fichier CSS ne soit pas bloqué par robots.txt svp,
     afin que les moteurs de recherche puissent correctement rendre ma page.
   ============================================================ */

/* Styles généraux pour la page */
body {
  margin: 0;
  background: black;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

/* Configuration du canvas en fond */
#canvas {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 0;
}

/* Réinitialisation du style des liens */
a {
  text-decoration: none;
}

/* Transition des boutons pour des interactions fluides */
button {
  transition: background 0.5s ease, letter-spacing 0.5s ease;
}

/* Style de base pour les boutons et les liens dans le conteneur */
button,
.buttons-container a {
  padding: 17px 66px;
  width: 220px;
  min-width: 220px;
  border-radius: 50px;
  cursor: pointer;
  border: 0;
  background-color: white;
  box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 15px;
  font-family: poppins, sans-serif;
  transition: all 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
}

/* Bouton avec effet "shine" pour attirer l'attention */
.btn-shine {
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, 0);
padding: 12px 48px;
color: #fff;
background: linear-gradient(to right, #9f9f9f 0, #fff 10%, #868686 20%);
background-position: 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shine 3s infinite linear;
animation-fill-mode: forwards;
-webkit-text-size-adjust: none;
font-weight: 600;
font-size: 16px;
text-decoration: none;
white-space: nowrap;
font-family: "Poppins", sans-serif;
z-index: 1;
}

/* Animation "shine" pour compatibilité multi-navigateurs */
@-moz-keyframes shine {
0% {
  background-position: 0;
}
60% {
  background-position: 180px;
}
100% {
  background-position: 180px;
}
}
@-webkit-keyframes shine {
0% {
  background-position: 0;
}
60% {
  background-position: 180px;
}
100% {
  background-position: 180px;
}
}
@-o-keyframes shine {
0% {
  background-position: 0;
}
60% {
  background-position: 180px;
}
100% {
  background-position: 180px;
}
}
@keyframes shine {
0% {
  background-position: 0;
}
60% {
  background-position: 180px;
}
100% {
  background-position: 180px;
}
}

/* Conteneur centré pour les boutons */
.buttons-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
gap: 77px;
align-items: center;
}

/* Redéfinition du style de base pour les boutons */
button {
padding: 17px 76px;
width: 220px;
min-width: 220px;
border-radius: 50px;
cursor: pointer;
border: 0;
background-color: white;
box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-size: 15px;
transition: all 0.5s ease;
}

/* États de survol spécifiques pour divers boutons */

/* Bouton Discord: gradient de violets */
.btn-discord:hover {
background: linear-gradient(45deg, #7289DA, #5865F2);
color: #fff;
letter-spacing: 3px;
box-shadow: #5865F2 0 0 22px;
}

/* Bouton Instagram: gradient typique */
.btn-instagram:hover {
background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4);
color: #fff;
letter-spacing: 3px;
box-shadow: #DD2A7B 0 0 22px;
}

/* Bouton TikTok: gradient combinant cyan et magenta */
.btn-tiktok:hover {
background: linear-gradient(45deg, #69C9D0, #EE1D52);
color: #fff;
letter-spacing: 3px;
box-shadow: firebrick 0 0 22px;
}

/* Bouton Youtube: gradient de rouges */
.btn-youtube:hover {
background: linear-gradient(45deg, #FF0000, #FF4500);
color: #fff;
letter-spacing: 3px;
box-shadow: #ffffff 0 0 22px;
}

/* Style d'état actif pour les boutons */
button:active {
letter-spacing: 3px;
background-color: hsla(226, 100%, 50%, 0.123);
color: hsl(0, 0%, 100%);
box-shadow: rgba(2, 49, 204, 0.527) 0px 0px 0px 0px;
transform: translateY(10px);
transition: 100ms;
}

/* Centrage du contenu interne des boutons */
button {
min-width: 220px;
display: flex;
align-items: center;
justify-content: center;
}

/* Style pour les icônes dans les boutons */
button i,
.buttons-container a i {
margin-right: 5px;
font-size: 14px;
}

/* Style du footer pour un affichage fixe en bas de page */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 10px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 14px;
  text-shadow: #00aeff 0 0 9px;
  color: white;
}