body { background: #ffffff;}

#maintopmodule {
  background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 100%);
    margin-top: 100px;
    display: flex; /* Active flexbox */
    justify-content: center; /* Centre le texte horizontalement */
    align-items: flex-end; /* Positionne le texte en bas verticalement */
    height: 300px; /* Hauteur du conteneur, ajuste selon tes besoins */
    text-align: center; /* Centre le texte à l'intérieur du conteneur */
  	font-family: 'Oxygen', sans-serif; /* Applique la police */
    font-size: 3.6rem; /* Taille idéale pour un titre, ajustable */
    color: #FFACAC; /* Choisis la couleur du texte */
    line-height: 1.2; /* Ajoute un interligne de 1.4 fois la taille de la police */
    color: #FFACAC; /* Choisis la couleur du texte */
	text-shadow: 
   -1px -1px 0 #fff,  
    1px -1px 0 #fff,
   -1px  1px 0 #fff,
    1px  1px 0 #fff;
    margin: 0; /* Retire les marges par défaut */
    padding-top: 400px;
  padding-bottom : 40px;
}

#wrapper  {
    position: relative;
    z-index: 1; /* S'assure que le contenu est au-dessus */
  	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(184,33,33,0) 100%);
}


#content {
    width: 800px; /* Fixe la largeur sur PC */
    max-width: 90%; /* Permet au contenu de s’adapter sur mobile */
    margin: 0 auto; /* Centre horizontalement */
    text-align: center; /* Centre aussi les éléments à l’intérieur */
}

/* Image backround gérée aussi en custom code body */

#background-fixed {
    position: fixed;
    top: 0; /* Force l’image à rester en haut */
    left: 50%;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-start; /* Aligne le haut de l'image */
    justify-content: center;
}

#background-fixed img {
    width: 1080px; /* Taille fixe pour PC */
    height: auto;
    object-fit: contain; /* Évite le rognage */
    max-height: 100vh; /* Évite qu'elle dépasse en hauteur */
    position: absolute;
    top: 0; /* Fixe l’image en haut */
}


/* Définition des variables globales */
:root {
    --font-family: "Inter", sans-serif;
    --btn-width: 250px;
    --btn-radius: 20px;
    --btn-padding: 0.5rem 3rem;
    --btncont-padding: 0.7rem 3.2rem;
    --transition-speed: 0.3s;
    
    /* Couleurs principales */
    --color-primary: #646cff;
    --color-fb: #316CB1;
    --color-inst: #F60683;
    --color-yout: #F70100;
    --color-site: #722784;
    --color-hover: #ffffff;
    --text-hover: #000000;
    
    /* Dégradé */
    --gradient-start: #FFC2C2;
    --gradient-end: #FFCC99;
    --border-hover: #ffacac;
    
    /* Couleurs pour le glitch */
    --glitch-bg: rgba(0, 255, 255, 0.1);
    --glitch-border: rgba(0, 255, 255, 0.5);
    --glitch-shadow: rgba(0, 255, 255, 0.3);
    --glitch-color1: #ff00ff;
    --glitch-color2: #00ffff;
}

/* Style de base pour tous les boutons */
.btn, .btnlink, .btncont, .btnfb, .btninst, .btnyout, .btnsite, .btnh {
    display: inline-block;
    width: var(--btn-width);
    padding: var(--btn-padding);
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-family);
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: var(--btn-radius);
    border: 2px solid;
    margin: 15px;
    cursor: pointer;
    overflow: hidden;
    transition: all var(--transition-speed) ease;
}

/* Ajustement pour .btncont */
.btncont {
    padding: var(--btncont-padding);
}

/* Couleurs de fond */
.btn { background-color: var(--color-primary); }
.btnfb { background-color: var(--color-fb); }
.btninst { background-color: var(--color-inst); }
.btnyout { background-color: var(--color-yout); }
.btnsite { background-color: var(--color-site); }

/* Dégradé pour btnlink et btncont */
.btnlink, .btncont {
    background: linear-gradient(to bottom, var(--gradient-start), var(--gradient-end));
    background-size: 100% 200%;
    background-position: top;
    transition: background-position 0.5s ease, border-color var(--transition-speed) ease;
}

/* Hover pour boutons unis */
.btn:hover, .btnfb:hover, .btninst:hover, .btnyout:hover, .btnsite:hover {
    background: var(--color-hover);
    color: var(--text-hover);
}

/* Hover pour dégradé */
.btnlink:hover, .btncont:hover {
    background-position: bottom;
    color: var(--text-hover);
    border-color: var(--border-hover);
}

/* Bordure au survol */
.btn:hover { border-color: var(--color-primary); }
.btnfb:hover { border-color: var(--color-fb); }
.btninst:hover { border-color: var(--color-inst); }
.btnyout:hover { border-color: var(--color-yout); }
.btnsite:hover { border-color: var(--color-site); }

/* --- Bouton Glitch --- */
.btnh {
    background: var(--glitch-bg);
    border: 2px solid var(--glitch-border);
    box-shadow: 0 0 10px var(--glitch-shadow);
    text-transform: uppercase;
    position: relative;
    transition: all 0.4s ease;
}

/* Effet lumineux sur le texte */
.btnh span {
    position: relative;
    display: inline-block;
    text-shadow: 0 0 8px var(--glitch-shadow);
}

/* Duplicatas pour effet glitch */
.btnh::before,
.btnh::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    opacity: 0;
    filter: blur(1px);
    transition: all var(--transition-speed) ease;
}

.btnh::before {
    top: 0;
    color: var(--glitch-color1);
    transform: translateX(-3px);
    animation: glitch 1.5s infinite;
}

.btnh::after {
    bottom: 0;
    color: var(--glitch-color2);
    transform: translateX(3px);
    animation: glitch 1.5s infinite reverse;
}

/* Animation glitch */
@keyframes glitch {
    0%, 100% { opacity: 0.3; transform: translateX(0); }
    20% { opacity: 0.5; transform: translateX(-3px); }
    40% { opacity: 0.7; transform: translateX(3px); }
    60% { opacity: 0.5; transform: translateX(-2px); }
    80% { opacity: 0.3; transform: translateX(2px); }
}





/* Ajout d'un scan futuriste */
.btnh::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(0, 255, 255, 0.8), transparent);
  top: -10%;
  animation: scan 2s linear infinite;
  filter: blur(1px);
}

/* Animation de la ligne de scan */
@keyframes scan {
  0% { top: -10%; }
  100% { top: 110%; }
}

/* Effet au survol */
.btnh:hover {
  background: rgba(0, 255, 255, 0.2);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
  border-color: rgba(0, 255, 255, 1);
}


/* Style de base du bouton */
.btnglow {
  display: inline-block;
  padding: 0.5rem 3rem;
  font-size: 1rem;
  font-weight: 600;
  color: white !important; /* Texte toujours blanc */
  background: transparent;
  border-radius: 20px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  font-family: "Inter", sans-serif;
  text-align: center;
  margin: 15px;
  text-decoration: none;
  width: 250px;
  position: relative;
  z-index: 1;
  border: 2px solid transparent; /* Bordure invisible par défaut */
  box-sizing: border-box; /* Empêche tout changement de taille */
}

/* Effet lumineux CONTINU sur le contour */
.btnglow::before {
  content: "";
  position: absolute;
  top: -2px; left: -2px;
  right: -2px; bottom: -2px;
  border-radius: 22px; /* Ajusté pour éviter un débordement */
  background: linear-gradient(45deg, 
    #ff0000, #ff7300, #fffb00, #48ff00, 
    #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000
  );
  background-size: 400%;
  z-index: -2;
  filter: blur(6px);
  animation: glowing 10s linear infinite;
  opacity: 1; /* Effet lumineux actif */
}

/* Faux layer INTERMÉDIAIRE pour masquer l'intérieur tout en laissant plus de glow visible */
.btnglow::after {
  content: "";
  position: absolute;
  top: 1px; left: 1px;
  right: 1px; bottom: 1px;
  background: #1a1a1a; /* Fond toujours gris foncé */
  border-radius: 19px; /* Réduit d'1px pour mieux voir le glow */
  z-index: -1;
}

/* Effet au survol : contour blanc, mais pas de décalage */
.btnglow:hover {
  border-color: white; /* Contour blanc au survol */
  transform: none; /* Empêche tout déplacement involontaire */
}

/* Animation continue du glow */
@keyframes glowing {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}

/* Style de base du bouton lumineux rgb à l'intérieur */
.btnglow2{
  display: inline-block;
  padding: 0.5rem 3rem;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  background: #1a1a1a; /* Gris très foncé */
  border-radius: 20px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  font-family: "Inter", sans-serif;
  text-align: center;
  margin: 15px; /* Ajoute un espace de 30px (15px de chaque côté) */
  text-decoration: none; /* Supprime le soulignement */
  width: 250px; /* Largeur fixe */
  border: 2px solid rgba(255, 255, 255, 0.5); /* Contour lumineux normal */
  position: relative;
  z-index: 0;
}

/* Effet lumineux animé en fond */
.btnglow2::before {
  content: "";
  background: linear-gradient(45deg, 
    #ff0000, #ff7300, #fffb00, #48ff00, 
    #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000
  );
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  background-size: 400%;
  z-index: -1;
  filter: blur(6px);
  opacity: 0;
  border-radius: 20px;
  transition: opacity 0.3s ease-in-out;
  animation: glowing 10s linear infinite;
}

/* Fond normal sous le bouton */
.btnglow2::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #1a1a1a; /* Toujours gris très foncé */
  left: 0;
  top: 0;
  border-radius: 20px;
  z-index: -2;
}

/* Activation du glow au survol */
.btnglow2:hover {
  color: white !important; /* Texte reste blanc */
}
.btnglow2:hover::before {
  opacity: 1; /* Active l'effet lumineux */
}

/* Effet d'animation du glow */
@keyframes glowing {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}

/* Effet au clic */
.btnglow2:active {
  color: black;
}
.btnglow2:active::after {
  background: transparent;
}

/* ---------- Useful Button styling ---------- */


.button {
    position: relative;
    background-color: black;
    border-radius: 4em;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    padding: 0.5rem 3rem;
    cursor: pointer;
    user-select: none;
    text-align: center;
    text-decoration: none;
    transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s; /* Safari */
    overflow: hidden; /* Important : Empêche l'effet de déborder du bouton */
}

.button:hover {
    background-color: #3A3A3A;
}

.button:after {
    content: "";
    position: absolute;
    border-radius: 4em;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s;
    /* Modification de l'ombre pour un effet plus discret */
    box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.3); /* Ombre blanche semi-transparente */
    /* Ajout d'un arrière-plan pour un effet de lumière */
    background-color: rgba(255, 255, 255, 0.1); /* Blanc transparent */
}

.button:hover:after {
    opacity: 1;
    /* Modification de l'ombre pour un effet plus intense */
    box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.3); /* Ombre blanche semi-transparente */
}

.button:active:after {
    /* Suppression de l'effet au clic pour ne pas interférer avec le hover */
    opacity: 0;
    box-shadow: none;
}

.button:active {
    top: 0px; /* Correction du décalage au clic */
}

.wavewhite {
  position: relative;
  width: 200px;
  height: 50px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  background: linear-gradient(to top, #1a1a1a, #333);
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.3s, color 0.3s;
  display: inline-block;
  border: none;
}

/* Effet au survol */
.wavewhite:hover {
  background: white;
  color: black;
}

/* Ajout des ondes extérieures */
.wavewhite::before,
.wavewhite::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 25px;
  border: 3px solid rgba(255, 255, 255, 0.7);
  opacity: 0;
  transform: scale(1);
}

/* Onde gauche */
.wavewhite::before {
  left: -50%;
  top: 50%;
  transform-origin: center;
}

/* Onde droite */
.wavewhite::after {
  right: -50%;
  top: 50%;
  transform-origin: center;
}

/* Animation des ondes */
@keyframes waveEffect {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.4;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Déclenchement des ondes au survol */
.wavewhite:hover::before {
  animation: waveEffect 1.5s ease-out infinite;
}

.wavewhite:hover::after {
  animation: waveEffect 1.5s ease-out 0.3s infinite;
}