@import "https://unpkg.com/open-props";


a {
  text-decoration: none !important;
  color: inherit;
}

body {
    background-color: #fff;
    background-image: url("background.png");
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Colone {
  width: 350px;
}

.main {
  width: 100%;
  max-width: 1920px; /* Base pour 1080p */
  margin: 0;
  padding: 0px;
  justify-content: center;
}

p {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-6);
  font-size: var(--font-size-5);
}

a {
  text-decoration: none;
  color: var(--gray-8);
}

.Online {
  color: rgb(0, 155, 0);
}

.Offline {
  color: inherit;
  color: red;
}

.Name {
  color: var(--gray-8);
  font-size: var(--font-size-7);
  text-align: center;
  justify-content: center;
}

.ListeServeurs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  text-align: center;
  justify-content: center; /* Centre les colonnes */
  justify-items: center;
  margin-top: clamp(175px, 10%, 10%);
}


/* Boutton Connexion/Deconnexion */
.Connect {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-6);
  font-size: var(--font-size-6);
  color: var(--gray-8);
  background: var(--gray-0);
  border: 0;
  padding: 0.5%;
  transform: translateY(calc(var(--y, 0) * 1%)) scale(var(--scale));
  transition: transform 0.1s;
  margin-bottom: 10px;
  justify-content: center;
  text-align: center;
  position: absolute;
  top: 0px;
  right: 0px;
  margin-top: 30px;
  margin-right: 35px;
  text-decoration: none;
}

.Connect:hover {
  --y: 0;
  --scale: 1.05;
  --border-scale: 1;
}

.Connect:active {
  --y: 5%;
  --scale: 0.9;
  --border-scale: 0.9, 0.8;
}

.Connect:before {
  content: "";
  position: absolute;
  inset: calc(1rem * -1);
  border: var(--size-2) solid var(--gray-0);
  transform: scale(var(--border-scale, 0));
  transition: transform 0.125s;
  
  --angle-one: 105deg;
  --angle-two: 290deg;
  --spread-one: 30deg;
  --spread-two: 40deg;
  --start-one: calc(var(--angle-one) - (var(--spread-one) * 0.5));
  --start-two: calc(var(--angle-two) - (var(--spread-two) * 0.5));
  --end-one: calc(var(--angle-one) + (var(--spread-one) * 0.5));
  --end-two: calc(var(--angle-two) + (var(--spread-two) * 0.5));
  
  -webkit-mask: conic-gradient(
    transparent 0 var(--start-one),
    white var(--start-one) var(--end-one),
    transparent var(--end-one) var(--start-two),
    white var(--start-two) var(--end-two),
    transparent var(--end-two)
  );
  mask: conic-gradient(15);
  z-index: -1;
}
/* Boutton Connexion/Deconnexion */

/* Utilisateur connecté */
.User {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-6);
  font-size: var(--font-size-6);
  color: var(--gray-8);
  background: var(--gray-0);
  border: 0;
  padding: 0.5%;
  transform: translateY(calc(var(--y, 0) * 1%)) scale(var(--scale));
  transition: transform 0.1s;
  margin-bottom: 10px;
  justify-content: center;
  text-align: center;
  position: absolute;
  top: 0px;
  right: 0px;
  margin-top: 30px;
  margin-right: 360px;
  text-decoration: none;
}

.User:hover {
  --y: 0;
  --scale: 1.05;
  --border-scale: 1;
}

.User:active {
  --y: 5%;
  --scale: 0.9;
  --border-scale: 0.9, 0.8;
}

.User:before {
  content: "";
  position: absolute;
  inset: calc(1rem * -1);
  border: var(--size-2) solid var(--gray-0);
  transform: scale(var(--border-scale, 0));
  transition: transform 0.125s;
  
  --angle-one: 105deg;
  --angle-two: 290deg;
  --spread-one: 30deg;
  --spread-two: 40deg;
  --start-one: calc(var(--angle-one) - (var(--spread-one) * 0.5));
  --start-two: calc(var(--angle-two) - (var(--spread-two) * 0.5));
  --end-one: calc(var(--angle-one) + (var(--spread-one) * 0.5));
  --end-two: calc(var(--angle-two) + (var(--spread-two) * 0.5));
  
  -webkit-mask: conic-gradient(
    transparent 0 var(--start-one),
    white var(--start-one) var(--end-one),
    transparent var(--end-one) var(--start-two),
    white var(--start-two) var(--end-two),
    transparent var(--end-two)
  );
  mask: conic-gradient(15);
  z-index: -1;
}
/* Utilisateur connecté */


/* Liste Serveurs */
.BlocServeurs {
  min-width: 350px;
  width: 100%; /* Ajuste la largeur pour centrer */
  margin-left: auto;
  margin-right: auto;
}
/* Liste Serveurs */

/* Bouton Host */
.Host {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-6);
  font-size: var(--font-size-5);
  color: var(--gray-8);
  background: var(--gray-0);
  border: 0;
  padding: 0%;
  transform: translateY(calc(var(--y, 0) * 1%)) scale(var(--scale));
  transition: transform 0.1s;
  position: relative;
  justify-content: center;
  text-align: center;
  width: 100%; /* Ajuste la largeur pour centrer */
  min-height: 140px; /* Hauteur minimale pour garantir que le contenu s'adapte */
  margin-left: auto;
  margin-right: auto;
  text-decoration: none;
}

.Host:hover {
  --y: 0;
  --scale: 1.05;
  --border-scale: 1;
}

.Host:active {
  --y: 5%;
  --scale: 0.9;
  --border-scale: 0.9, 0.8;
}

.Host:before {
  content: "";
  position: absolute;
  inset: calc(1rem * -1);
  border: var(--size-2) solid var(--gray-0);
  transform: scale(var(--border-scale, 0));
  transition: transform 0.125s;
  
  --angle-one: 105deg;
  --angle-two: 290deg;
  --spread-one: 30deg;
  --spread-two: 40deg;
  --start-one: calc(var(--angle-one) - (var(--spread-one) * 0.5));
  --start-two: calc(var(--angle-two) - (var(--spread-two) * 0.5));
  --end-one: calc(var(--angle-one) + (var(--spread-one) * 0.5));
  --end-two: calc(var(--angle-two) + (var(--spread-two) * 0.5));
  
  -webkit-mask: conic-gradient(
    transparent 0 var(--start-one),
    white var(--start-one) var(--end-one),
    transparent var(--end-one) var(--start-two),
    white var(--start-two) var(--end-two),
    transparent var(--end-two)
  );
  mask: conic-gradient(15);
  z-index: -1;
}
/* Bouton Host */


/* Liste Sous-Serveurs */
.BlocSousServeur {
  margin-top: 30px;
  padding: 30px;
  display: grid;
  grid-template-columns: 1fr; /* Une seule colonne pour les sous-serveurs */
  min-width: 350px;
  width: 100%; /* Ajuste la largeur pour centrer */
  margin-left: auto;
  margin-right: auto;
}
/* Liste Sous-Serveurs */

/* Bouton Sub-Serveur */
.SousServeurs {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-6);
  font-size: var(--font-size-4);
  color: var(--gray-8);
  background: var(--gray-0);
  border: 0;
  padding: 2%;
  transform: translateY(calc(var(--y, 0) * 1%)) scale(var(--scale));
  transition: transform 0.1s;
  position: relative;
  margin-bottom: 35px;
  justify-content: center;
  text-align: center;
  width: 100%; /* Moins large que les serveurs */
  min-height: 120px; /* Hauteur minimale pour garantir que le contenu s'adapte */
  margin-left: auto;
  margin-right: auto;
}

.SousServeurs:hover {
  --y: 0;
  --scale: 1.05;
  --border-scale: 1;
}

.SousServeurs:active {
  --y: 5%;
  --scale: 0.9;
  --border-scale: 0.9, 0.8;
}

.SousServeurs:before {
  content: "";
  position: absolute;
  inset: calc(1rem * -1);
  border: var(--size-2) solid var(--gray-0);
  transform: scale(var(--border-scale, 0));
  transition: transform 0.125s;
  
  --angle-one: 105deg;
  --angle-two: 290deg;
  --spread-one: 30deg;
  --spread-two: 40deg;
  --start-one: calc(var(--angle-one) - (var(--spread-one) * 0.5));
  --start-two: calc(var(--angle-two) - (var(--spread-two) * 0.5));
  --end-one: calc(var(--angle-one) + (var(--spread-one) * 0.5));
  --end-two: calc(var(--angle-two) + (var(--spread-two) * 0.5));
  
  -webkit-mask: conic-gradient(
    transparent 0 var(--start-one),
    white var(--start-one) var(--end-one),
    transparent var(--end-one) var(--start-two),
    white var(--start-two) var(--end-two),
    transparent var(--end-two)
  );
  mask: conic-gradient(15);
  z-index: -1;
}
/* Bouton Sub-Serveur */

/* Media Queries pour différentes résolutions */
/* 720p (1280x720) */
@media screen and (min-width: 1200px) {
  .main {
    max-width: 1200px;
}

  .Colone {
    margin-left: 0px;
    margin-right: 0px;
    width: 320px;
  }

  p {
    font-size: calc(var(--font-size-5) * 1);
}

  .Name {
    font-size: calc(var(--font-size-7) * 1);
}

  .BlocServeurs {
    width: 255px;
  }

  .Host {
    padding: 4%;
    width: 255px;
}

  .SousServeurs {
    padding: 2%;
    width: 220px;
}
}

/* Media Queries pour différentes résolutions */
/* 1080p (1920x1080) */
@media screen and (min-width: 1900px) {
  .main {
    max-width: 1920px;
}

  .Colone {
    margin-left: px;
    margin-right: px;
    width: 380px;
  }

  p {
    font-size: calc(var(--font-size-5) * 1.5);
}

  .Name {
    font-size: calc(var(--font-size-7) * 1.5);
}

  .BlocServeurs {
    width: 380px;
  }

  .Host {
    padding: 4%;
    width: 380px;
}

  .SousServeurs {
    padding: 2%;
    width: 330px;
}
}

/* Media Queries pour différentes résolutions */
/* 1440p (2560x1440) */
@media screen and (min-width: 2000px) {
  .main {
    max-width: 2000px;
}

  .Colone {
    margin-left: 65px;
    margin-right: 65px;
    width: 450px;
  }

  p {
    font-size: calc(var(--font-size-5) * 1.5);
}

  .Name {
    font-size: calc(var(--font-size-7) * 1.5);
}

  .BlocServeurs {
    width: 450px;
  }

  .Host {
    padding: 4%;
    width: 450px;
}

  .SousServeurs {
    padding: 2%;
    width: 380px;
}
}

/* Media Queries pour différentes résolutions */
/* 4K (3840x2160) */
@media screen and (min-width: 3000px) {
  .main {
    max-width: 3840px;
}

  .Colone {
    margin-left: 0px;
    margin-right: 0px;
    width: 500px;
  }

  p {
    font-size: calc(var(--font-size-5) * 1.5);
}

  .Name {
    font-size: calc(var(--font-size-7) * 1.5);
}

  .BlocServeurs {
    width: 500px;
  }

  .Host {
    padding: 4%;
    width: 500px;
}

  .SousServeurs {
    padding: 4%;
    width: 400px;
}

}

/* Écrans de téléphone (max-width: 600px) */
@media screen and (max-width: 600px) {
  .main {
    max-width: 100%;
    padding: 10px;
  }

  .Connect {
    font-size: var(--font-size-4);
    margin-right: 20px;
    width: 150px;
  }

  .User {
    font-size: var(--font-size-4);
    margin-right: 20px;
    margin-top: 80px;
    width: 150px;
  }

  .Colone {
    margin-left: 5px;
    margin-right: 5px;
    width: 350px;
  }

  .ListeServeurs {
    grid-template-columns: repeat(1, 1fr);
  }

  p {
    font-size: calc(var(--font-size-5) * 1);
  }

  .Name {
    font-size: calc(var(--font-size-7) * 1);
  }

  .BlocServeurs {
    width: 300px;
  }

  .Host {
    padding: 2%;
    width: 300px;
  }

  .SousServeurs {
    padding: 1%;
    width: 250px;
  }
}