html, body {
  height: 100%;
  margin: 0;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0;
}

body {
  font-family: 'Press Start 2P', monospace;
  background-color: #1b1b1b;
  color: #fff;
  image-rendering: pixelated;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background: transparent;
  display: none;
}

header {
  background-color: #2c2c2c;
  padding: 1.5rem 2rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 2px solid #444;
  position: relative;
}

.nav {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.logo {
  font-size: 1rem;
  color: #fff;
  text-align: center;
  width: 100px;
  height: 100px;
}

.logo img {
    width: 100px;
    height: 100px;
    border-radius: 50px;
}

.nav-left,
.nav-right {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.nav-right {
  justify-content: end;
}

a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: #fff;
}


main {
  flex: 2;
  display: flex;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 0rem;
}

footer {
  text-align: center;
  padding: 2rem;
  font-size: 0.7rem;
  color: #999;
}

.button {
  line-height: 1;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.75em 1em;
  padding-right: 1.25em;
  color: #fff;
  border: 1px solid transparent;
  font-weight: 700;
  border-radius: 2em;
  font-size: 1rem;
  box-shadow: 0 0.7em 1.5em -0.5em hsla(249, 62%, 51%, 0.745);
  transition: transform 0.3s;

  background: linear-gradient(
    90deg,
    rgba(77, 54, 208, 1) 0%,
    rgba(132, 116, 254, 1) 100%
  );
}

.button__icon {
  width: 1.5em;
  height: 1.5em;
}

.button:hover {
  border-color: #f4f5f2;
}

.button:active {
  transform: scale(0.98);
  box-shadow: 0 0.5em 1.5em -0.5em hsla(249, 62%, 51%, 0.745);
}

.one-button {
  padding: 0.6em 2em;
  border: none;
  outline: none;
  color: rgb(255, 255, 255);
  background: #111;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

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

@keyframes glowing-button-85 {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.one-button:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #222;
  left: 0;
  top: 0;
  border-radius: 10px;
}

.three-button {
  margin-top: 250px;
  font-size: 1.2rem;
  padding: 1rem 2.5rem;
  border: none;
  outline: none;
  border-radius: 0.4rem;
  cursor: pointer;
  text-transform: uppercase;
  background-color: rgb(14, 14, 26);
  color: rgb(234, 234, 234);
  font-weight: 700;
  transition: 0.6s;
  box-shadow: 0px 0px 60px #1f4c65;
  -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}

/*Card effect*/
.card1 {
  background-color: black;
  width: 100%;             /* prend toute la largeur disponible */
  max-width: 1200px;       /* optionnel, limite largeur max */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  box-shadow: 2px 2px 19px;
  padding: 0px;           /* pour que le texte ne colle pas */
  box-sizing: border-box;  /* inclut padding dans largeur */
  height: auto;            /* hauteur auto selon contenu */
  color: white;            /* pour le texte */
}

.card1::before,
.card1::after {
  content: "";
  position: absolute;
  z-index: -1;             /* devant le fond mais derrière le contenu */
  top: 0;
  left: 0;
  width: 100%;             /* couvre toute la carte */
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(4,0,255,1) 0%,
    rgba(136,0,255,1) 35%,
    rgba(209,0,255,1) 100%
  );
  border-radius: 6px;
}

.card1::after {
  filter: blur(20px);
  transition: 2s;
}

.card1:hover::after {
  animation: cardafter 2.5s infinite forwards;
}

@keyframes cardafter {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}


h1 {
  background: linear-gradient(90deg, #0040b8, #0066ff, #00fff0);
  font-size: 30px;
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
  animation: gradientShift 4s ease-in-out infinite;
}

.card1 a {
  background: linear-gradient(90deg, #0040b8, #0066ff, #00fff0);
  font-size: 20px;
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
  animation: gradientShift 4s ease-in-out infinite;
}

.command-block {
  background-color: #1e1e1e;
  font-family: monospace;
  padding: 12px 16px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  font-size: 16px;
  margin: 10px 0;
}

.command-block code {
  background-image: linear-gradient(90deg, #0040b8, #0066ff, #00fff0);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradientShift 4s ease-in-out infinite;
}

.command-block button {
  background: none;
  border: none;
  color: #00fff0;
  font-size: 18px;
  cursor: pointer;
}

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

/*Alert effect*/

.alert-error {
  position: relative;
  width: 100%;          /* prend toute la largeur du parent */
  max-width: none;      /* ou supprime max-width si tu en avais */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0.75rem 1rem; /* padding vertical et horizontal */
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  border: 1px solid #f85149;
  color: #b22b2b;
  background: linear-gradient(180deg, #f851491a, #f851491a);
  box-sizing: border-box;
  /* hauteur automatique par défaut avec padding */
}

/* SVG inside .alert-error inherits text color */
.alert-error svg {
  color: #b22b2b;
}

/* Close button */
.alert-close-btn {
  position: absolute;
  right: 1rem; /* right-4 */
  padding: 0.25rem; /* p-1 */
  border-radius: 0.375rem; /* rounded-md */
  border: 1px solid #f85149;
  background: transparent;
  color: #f85149;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert-close-btn:hover {
  opacity: 1;
}

/* The SVG inside the button */
.alert-close-btn svg {
  width: 16px;
  height: 16px;
}

/* Message container */
.alert-message {
  display: flex;
  align-items: center;
  margin-right: auto;
  gap: 0.5rem; /* gap-x-2 */
  font-family: monospace;
  font-weight: 700; /* font-bold */
}

/* SVG inside message */
.alert-message svg {
  width: 28px;
  height: 28px;
}

.attention-text {
  font-weight: 700;
  font-family: monospace, monospace;
  font-size: 18px;
  background: linear-gradient(90deg, #ff4a4a, #fc0000, #dd6767);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradientShiftRed 4s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(255, 0, 0, 0.3);
  user-select: none; /* optionnel, empêche la sélection du texte */
}

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

/*dl btn anim*/
.dl-btn {
  padding: 0.8em 2em 0.8em 2.5em;
  font-size: 15px;
  font-weight: bold;
  border-radius: 15px;
  color: #f6fff6;
  letter-spacing: 0.3em;
  text-shadow: -2px 2px 5px #309afd;
  background-color: transparent;
  border: 2px solid #00dbe2;
  box-shadow: 0 0 0px 1px #009cb1,
    0 0 10px 2px #22ffff,
    inset 0 0 0px 1px #006a85,
    inset 0 0 10px 2px #00c3dd;
  transition: 100ms;
}

.dl-btn:hover {
  box-shadow: 0 0 0px 1px #12e2f1,
    0 0 10px 2px #00ffff,
    inset 0 0 0px 1px #0198ac,
    inset 0 0 30px 2px #2ad4ff;
  text-shadow: 0 0 10px #2cabff;
  transform: translateY(-5px);
}

.dl-btn:active {
  box-shadow: 0 0 0px 1px #4be4ff,
    0 0 25px 2px #1ef8db,
    inset 0 0 0px 1px #03fcfc,
    inset 0 0 30px 2px #29ffff;
  transform: translateY(1px);
}