@charset "UTF-8";
* {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  box-sizing: border-box;
}
* p {
  padding: 0;
  margin: 0;
}

/* Changer la couleur de la barre */
#nprogress .bar {
  background: #4493f8 !important; /* Utilise la couleur que tu veux */
  height: 3px; /* Taille fine */
}

/* Supprimer l'animation lumineuse (peg) */
#nprogress .peg {
  box-shadow: none;
}

/* Supprimer la roue de chargement */
#nprogress .spinner {
  display: none !important;
}

@font-face {
  font-family: "Metalina";
  src: url("../fonts/metalina/Metalina.ttf") format("truetype"), url("../fonts/metalina/Metalina.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@keyframes shine {
  0%, 5% {
    background-position: -50%;
  }
  20% {
    background-position: top left;
  }
  90% {
    background-position: top right;
  }
  100% {
    background-position: 150%;
  }
}
html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: rgba(145, 152, 161, 0.5176470588) #1e2530;
  scrollbar-width: auto;
}

body {
  background-color: #0d1117;
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-size: 14px;
}

.smoke {
  height: 1000%;
  width: 1000%;
  background-color: rgba(0, 0, 0, 0.6039215686);
  position: fixed;
  z-index: 4;
  display: none;
  color: rgba(0, 0, 0, 0.436);
}

.fire-background {
  height: 1000%;
  width: 1000%;
  background-color: #0d1117;
  position: fixed;
  z-index: 4;
  display: none;
  color: rgba(0, 0, 0, 0.436);
}

.nopost {
  color: #9198a1;
  flex-direction: column;
  gap: 10px;
  margin: 0 auto;
  align-items: center;
  display: none;
  margin-top: 30px;
  padding: 0 50px;
}
.nopost h1 {
  margin-right: auto;
}
.nopost h3 {
  color: #767b81;
}

.popup {
  color: rgb(255, 255, 255);
  background-color: #252b36;
  border-radius: 6px;
  width: 350px;
  padding: 20px 17px;
  margin: 0 auto;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5568627451);
  position: fixed;
  top: 35%;
  left: 50%;
  transform: translatex(-50%);
  z-index: 4;
  display: none;
}
.popup .top {
  display: flex;
  justify-content: space-between;
}
.popup .top img {
  position: relative;
  height: 35px;
  padding: 7px;
  top: -7px;
  cursor: pointer;
  border-radius: 50px;
  background-color: rgba(145, 152, 161, 0.1725490196);
}
.popup .top img:hover {
  background-color: rgba(145, 152, 161, 0.2901960784);
}
.popup .top h3 {
  margin-bottom: 10px;
}
.popup .choice {
  border-radius: 6px;
  padding: 8px;
  cursor: pointer;
  float: right;
  margin-top: 25px;
}

.fire-system {
  font-size: 14.5px;
  display: flex;
  flex-direction: column;
  color: rgb(255, 255, 255);
  background-color: #252b36;
  border-radius: 6px;
  width: 650px;
  padding: 20px 17px;
  margin: 0 auto;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5568627451);
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translatex(-50%);
  z-index: 4;
  text-align: center;
  display: none;
}
.fire-system .body {
  display: flex;
  width: 100%;
  text-align: left;
  gap: 20px;
}
.fire-system .body .daily-flammes-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}
.fire-system .body .consignes {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 49%;
}
.fire-system .body .consignes p {
  line-height: 21px;
}

.notif {
  width: 350px;
  height: 60px;
  background-color: #0d1117;
  border: 1px solid #44b0f8;
  border-radius: 15px;
  display: flex;
  align-items: center;
  color: white;
  gap: 10px;
  padding: 0 20px;
  position: fixed;
  top: 7px;
  z-index: 4;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translatey(-100px);
}
.notif img {
  height: 25px;
}

.notif-autorisation {
  background-color: #36393e;
  border-radius: 7px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  width: 32%;
  padding: 15px;
  color: white;
  position: fixed;
  top: 7px;
  z-index: 4;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: flex;
  gap: 1em;
  transform: translatey(-400px);
}
.notif-autorisation div .header {
  font-weight: 500;
  font-size: 17px;
  margin-bottom: 15px;
}
.notif-autorisation div div {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 1em;
}
.notif-autorisation div div .cancel {
  margin-left: auto;
  cursor: pointer;
}
.notif-autorisation div div .validate {
  font-weight: 500;
  font-size: 16px;
  background-color: #4493f8;
  border-radius: 5px;
  padding: 6px 13px;
  cursor: pointer;
}
.notif-autorisation img {
  height: 65px;
}

.modal {
  color: white;
  background-color: #252b36;
  border-radius: 6px;
  padding: 20px 17px;
  margin: 0 auto;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5568627451);
  position: fixed;
  top: 28%;
  left: 50%;
  transform: translatex(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 20px;
  display: none;
}
.modal .top {
  display: flex;
  justify-content: space-between;
}
.modal .top img {
  position: relative;
  height: 35px;
  padding: 7px;
  top: -2px;
  cursor: pointer;
  border-radius: 50px;
  background-color: rgba(145, 152, 161, 0.1725490196);
}
.modal .top img:hover {
  background-color: rgba(145, 152, 161, 0.2901960784);
}
.modal .link-type-container {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.modal .link-type-container .link-container {
  display: flex;
  border-radius: 6px;
  border: 1px solid white;
  justify-content: space-between;
  padding: 10px;
  gap: 10px;
  background-color: rgba(255, 255, 255, 0.1254901961);
}
.modal .link-type-container .link-container p {
  color: #ffffff;
  word-wrap: break-word;
  width: 95%;
}
.modal .link-type-container .link-container img {
  height: 27px;
  cursor: pointer;
}

nav {
  background-color: #010409;
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  padding: 10px 16px;
  justify-content: space-between;
  border-bottom: 1px solid rgba(145, 152, 161, 0.6509803922);
}
nav .logo {
  display: flex;
  align-items: center;
  color: white;
  gap: 3px;
  cursor: pointer;
}
nav .logo p {
  font-family: "Itim", cursive;
  font-size: 27px;
}
nav .logo img {
  height: 32px;
}
nav .logo .path-collection {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 15px;
  display: flex;
  gap: 5px;
  align-items: center;
}
nav .logo .path-collection a {
  color: white;
  text-decoration: none;
  font-size: 15px;
  padding: 5px 7px;
  border-radius: 5px;
}
nav .logo .path-collection a:hover {
  background-color: #15191f;
}
nav .logo .path-collection a:nth-child(5) {
  font-weight: 500;
}
nav .logo .path-collection p {
  font-size: 21px !important;
  color: rgba(145, 152, 161, 0.6509803922);
}
nav .logo-valentin {
  gap: 1.5px;
}
nav .logo-valentin p {
  font-family: "Metalina", sans-serif;
  font-size: 25px;
}
nav .logo-valentin img {
  margin-top: -12px;
  height: 34px;
}
nav .nav-menu {
  display: flex;
  align-items: center;
  gap: 30px;
}
nav .nav-menu .search-box {
  border: 1px solid rgba(145, 152, 161, 0.6509803922);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  border-radius: 50px;
}
nav .nav-menu .search-box input {
  width: 240px;
  outline: none;
  border: none;
  caret-color: white;
  background: none;
  color: white;
  font-size: 16px;
}
nav .nav-menu .search-box img {
  height: 24px;
}
nav .nav-menu .search-box .close {
  height: 16px;
  cursor: pointer;
  margin-right: 5px;
  visibility: hidden;
}
nav .nav-menu .search-box input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
nav .nav-menu .notification-nav {
  border-radius: 50px;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0 -10px;
  position: relative;
  z-index: 3;
}
nav .nav-menu .notification-nav:hover {
  background-color: rgba(145, 152, 161, 0.2);
}
nav .nav-menu .notification-nav img {
  height: 30px;
}
nav .nav-menu .notification-nav .count-notif-container {
  background-color: #4493f8;
  position: absolute;
  right: 5px;
  top: 5px;
  border-radius: 50px;
  height: 17px;
  width: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 11px;
}
nav .nav-menu .notification-nav .notification-box-container {
  display: none;
  position: absolute;
  width: 340px;
  top: 42px;
  right: 0px;
  background-color: #1c2430;
  border-radius: 17px;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
}
nav .nav-menu .notification-nav .notification-box-container h3 {
  color: #acbec8;
  padding: 12px 20px;
}
nav .nav-menu .notification-nav .notification-box-container .notification-container .notification-simple {
  overflow-y: auto;
  height: 200px;
  scrollbar-color: rgba(172, 190, 200, 0.0941176471) rgba(172, 190, 200, 0.1960784314);
  scrollbar-width: thin;
}
nav .nav-menu .notification-nav .notification-box-container .notification-container .notification {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  background-color: rgba(172, 190, 200, 0.1960784314);
}
nav .nav-menu .notification-nav .notification-box-container .notification-container .notification img {
  height: 40px;
  width: 40px;
  object-fit: cover;
  border-radius: 50px;
}
nav .nav-menu .notification-nav .notification-box-container .notification-container .notification div p {
  color: rgba(219, 228, 233, 0.5960784314);
}
nav .nav-menu .notification-nav .notification-box-container .notification-container .notification div .name-date {
  display: flex;
  gap: 5px;
}
nav .nav-menu .notification-nav .notification-box-container .notification-container .notification div .name-date .username {
  color: #dbe4e9;
  font-weight: 500;
}
nav .nav-menu .notification-nav .notification-box-container .notification-container .notification div .name-date .username:hover {
  text-decoration: underline;
}
nav .nav-menu .notification-nav .notification-box-container .notification-container .notification div .content {
  font-size: 13px;
}
nav .nav-menu .notification-nav .notification-box-container .notification-container .notification:hover {
  background-color: rgba(172, 190, 200, 0.2431372549);
}
nav .nav-menu .notification-nav .notification-box-container .notification-container .all-notification {
  margin: 15px 20px;
  display: flex;
  justify-content: center;
}
nav .nav-menu .notification-nav .notification-box-container .notification-container .all-notification a {
  background-color: rgba(172, 190, 200, 0.1568627451);
  border-radius: 19px;
  padding: 10px 30px;
  font-weight: 500;
  color: white;
  text-decoration: none;
}
nav .nav-menu .notification-nav .notification-box-container .notification-container .all-notification a:hover {
  text-decoration: underline;
}
nav .nav-menu .profil_pic {
  height: 33px;
  width: 33px;
  object-fit: cover;
  border-radius: 50px;
  cursor: pointer;
}

.profil-navigation-container {
  background-color: #010409;
  display: flex;
  gap: 12px;
  padding-left: 16px;
}
.profil-navigation-container div {
  padding-bottom: 8px;
}
.profil-navigation-container div a {
  display: flex;
  color: white;
  text-decoration: none;
  gap: 10px;
  padding: 5px 7px;
  border-radius: 5px;
}
.profil-navigation-container div a:hover {
  background-color: #15191f;
}
.profil-navigation-container div a img {
  height: 18px;
}
.profil-navigation-container div a p {
  margin-top: auto;
}
.profil-navigation-container div a p:nth-child(3) {
  background-color: #23282f;
  display: flex;
  justify-content: center;
  height: 20px;
  width: 20px;
  border-radius: 50%;
}
.profil-navigation-container div:nth-child(2) a {
  position: relative;
  padding-left: 30px;
}
.profil-navigation-container div:nth-child(2) img {
  top: 2.5px;
  left: 0;
  position: absolute;
  height: 25px;
  transform: rotate(-43.5deg);
}
.profil-navigation-container div:nth-child(3) a {
  position: relative;
  padding-left: 27px;
}
.profil-navigation-container div:nth-child(3) img {
  top: 7px;
  left: 4px;
  position: absolute;
}

.first-tab-system-container {
  flex-grow: 1;
  display: flex;
  overflow: hidden;
}
.first-tab-system-container .tab, .first-tab-system-container .page, .first-tab-system-container .mini-profil {
  height: 100%; /* Prend toute la hauteur de .content */
  overflow: auto; /* Permet le défilement dans chaque section */
}
.first-tab-system-container .tab {
  width: 18.9vw;
  border-right: 1px solid rgba(145, 152, 161, 0.6509803922);
  display: flex;
  flex-direction: column;
  padding: 10px 18px;
  box-sizing: border-box;
  gap: 10px;
  scrollbar-color: #0d1117 #0d1117;
  scrollbar-width: thin;
}
.first-tab-system-container .tab:hover {
  scrollbar-color: rgba(145, 152, 161, 0.5176470588) #0d1117;
}
.first-tab-system-container .tab .group a {
  display: flex;
  align-items: center;
  color: white;
  text-decoration: none;
  gap: 10px;
  padding: 1.6vh;
  cursor: pointer;
  border-radius: 6px;
}
.first-tab-system-container .tab .group a:hover {
  background-color: rgba(145, 152, 161, 0.1137254902);
}
.first-tab-system-container .tab .group .profil_pic {
  height: 23px;
  width: 23px;
  object-fit: cover;
  border-radius: 50px;
  cursor: pointer;
}
.first-tab-system-container .tab img {
  height: 22px;
}
.first-tab-system-container .tab hr {
  border: 0.5px solid rgba(145, 152, 161, 0.1764705882);
}
.first-tab-system-container .tab .copyright {
  color: #9198a1;
  font-size: 12px;
  margin-top: auto;
}
.first-tab-system-container .tab .about {
  font-size: 11px;
  text-decoration: none;
  color: #4493f8;
}
.first-tab-system-container .tab .about:hover {
  text-decoration: underline;
}
.first-tab-system-container .highlight {
  background-color: rgb(255, 118, 26);
  font-weight: bold;
}
.first-tab-system-container .page {
  flex-grow: 1;
  flex-basis: 0;
  scrollbar-color: rgba(145, 152, 161, 0.5176470588) #0d1117;
  scrollbar-width: thin;
  overflow-x: hidden;
}
.first-tab-system-container .page .loader {
  border: 4px solid rgba(68, 146, 248, 0.2156862745); /* Light grey */
  border-top: 4px solid #4493f8; /* Blue */
  border-radius: 50%;
  width: 37px;
  height: 37px;
  margin: 0 auto;
  animation: spin 0.8s linear infinite;
  margin-top: 20px;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.first-tab-system-container .page .mydebug, .first-tab-system-container .page .notmydebug {
  width: 100%;
  border-bottom: 1px solid rgba(145, 152, 161, 0.6509803922);
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 10px 30px;
  display: flex;
  overflow-wrap: break-word;
  position: relative;
  cursor: pointer;
  display: none;
}
.first-tab-system-container .page .mydebug:hover, .first-tab-system-container .page .notmydebug:hover {
  background-color: rgba(255, 255, 255, 0.0274509804);
}
.first-tab-system-container .page .mydebug .top, .first-tab-system-container .page .notmydebug .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.first-tab-system-container .page .mydebug .pic-name-post-date, .first-tab-system-container .page .notmydebug .pic-name-post-date {
  display: flex;
  gap: 10px;
  align-items: center;
}
.first-tab-system-container .page .mydebug .pic-name-post-date img, .first-tab-system-container .page .notmydebug .pic-name-post-date img {
  height: 35px;
  width: 35px;
  cursor: pointer;
  object-fit: cover;
  border-radius: 50px;
}
.first-tab-system-container .page .mydebug .pic-name-post-date a, .first-tab-system-container .page .notmydebug .pic-name-post-date a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 550;
}
.first-tab-system-container .page .mydebug .pic-name-post-date a:hover, .first-tab-system-container .page .notmydebug .pic-name-post-date a:hover {
  text-decoration: underline;
}
.first-tab-system-container .page .mydebug .pic-name-post-date p, .first-tab-system-container .page .notmydebug .pic-name-post-date p {
  color: #9198a1;
}
.first-tab-system-container .page .mydebug .title, .first-tab-system-container .page .notmydebug .title {
  font-size: 23px;
  font-weight: 600;
  color: white;
  margin: -8px 0 -5px 0;
}
.first-tab-system-container .page .mydebug .option, .first-tab-system-container .page .notmydebug .option {
  height: 35px;
  padding: 7px;
  cursor: pointer;
  border-radius: 50px;
}
.first-tab-system-container .page .mydebug .option:hover, .first-tab-system-container .page .notmydebug .option:hover {
  background-color: rgba(145, 152, 161, 0.2901960784);
}
.first-tab-system-container .page .mydebug .ressource, .first-tab-system-container .page .notmydebug .ressource {
  align-self: baseline;
}
.first-tab-system-container .page .mydebug .ressource a, .first-tab-system-container .page .notmydebug .ressource a {
  color: #4493f8;
}
.first-tab-system-container .page .mydebug .description, .first-tab-system-container .page .notmydebug .description {
  color: white;
  line-height: 25px;
  margin-bottom: -7px;
  margin-top: -4px;
}
.first-tab-system-container .page .mydebug .description pre, .first-tab-system-container .page .notmydebug .description pre {
  text-wrap-mode: wrap;
}
.first-tab-system-container .page .mydebug .option-menu, .first-tab-system-container .page .notmydebug .option-menu {
  color: #9198a1;
  background-color: #252b36;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  position: absolute;
  margin-top: 6px;
  right: 3%;
  display: none;
  z-index: 3;
}
.first-tab-system-container .page .mydebug .option-menu .op, .first-tab-system-container .page .notmydebug .option-menu .op {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 13px;
  border-bottom: 1.5px solid #313845;
}
.first-tab-system-container .page .mydebug .option-menu .op p, .first-tab-system-container .page .notmydebug .option-menu .op p {
  margin-top: 4px;
}
.first-tab-system-container .page .mydebug .option-menu .op img, .first-tab-system-container .page .notmydebug .option-menu .op img {
  height: 20px;
}
.first-tab-system-container .page .mydebug .option-menu .op:hover, .first-tab-system-container .page .notmydebug .option-menu .op:hover {
  background-color: #313845;
}
.first-tab-system-container .page .mydebug .option-menu .op:nth-child(5), .first-tab-system-container .page .notmydebug .option-menu .op:nth-child(5) {
  border: none;
}
.first-tab-system-container .page .mydebug .img-debug, .first-tab-system-container .page .notmydebug .img-debug {
  width: 100%;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.first-tab-system-container .page .mydebug .img-debug .img-debug-bg, .first-tab-system-container .page .notmydebug .img-debug .img-debug-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: blur(11px); /* Applique un flou */
  z-index: 1;
}
.first-tab-system-container .page .mydebug .img-debug img, .first-tab-system-container .page .notmydebug .img-debug img {
  width: 100%;
  z-index: 2;
}
.first-tab-system-container .page .mydebug .code, .first-tab-system-container .page .notmydebug .code {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 15px;
  overflow: hidden;
  margin-top: 3px;
}
.first-tab-system-container .page .mydebug .code .header, .first-tab-system-container .page .notmydebug .code .header {
  display: flex;
  align-items: center;
  color: #9198a1;
  background-color: rgba(145, 152, 161, 0.5058823529);
  justify-content: space-between;
  padding: 0 10px;
}
.first-tab-system-container .page .mydebug .code .header p, .first-tab-system-container .page .notmydebug .code .header p {
  font-size: 14px;
}
.first-tab-system-container .page .mydebug .code .header div, .first-tab-system-container .page .notmydebug .code .header div {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 13px 0;
  z-index: 2;
  cursor: pointer;
}
.first-tab-system-container .page .mydebug .code .header div img, .first-tab-system-container .page .notmydebug .code .header div img {
  height: 17px;
}
.first-tab-system-container .page .mydebug .code pre, .first-tab-system-container .page .notmydebug .code pre {
  margin-top: -22px;
  margin-bottom: -35px;
  cursor: auto;
}
.first-tab-system-container .page .mydebug .code pre code, .first-tab-system-container .page .notmydebug .code pre code {
  width: 100%;
  max-height: 400px;
  border-radius: 0 0 15px 15px;
  overflow: auto;
  font-family: monospace;
  scrollbar-color: rgba(145, 152, 161, 0.5176470588) #0d1117;
  scrollbar-width: thin;
}
.first-tab-system-container .page .mydebug .bottom, .first-tab-system-container .page .notmydebug .bottom {
  display: flex;
  color: #9198a1;
}
.first-tab-system-container .page .mydebug .bottom .state-simple, .first-tab-system-container .page .notmydebug .bottom .state-simple {
  height: 20px;
  width: 20px;
  margin-right: auto;
}
.first-tab-system-container .page .mydebug .bottom .count-fav, .first-tab-system-container .page .mydebug .bottom .count-like, .first-tab-system-container .page .mydebug .bottom .share-btn, .first-tab-system-container .page .mydebug .bottom .copy-btn, .first-tab-system-container .page .mydebug .bottom .count-fav-mydebug, .first-tab-system-container .page .mydebug .bottom .count-like-mydebug, .first-tab-system-container .page .mydebug .bottom .comment-post-btn, .first-tab-system-container .page .notmydebug .bottom .count-fav, .first-tab-system-container .page .notmydebug .bottom .count-like, .first-tab-system-container .page .notmydebug .bottom .share-btn, .first-tab-system-container .page .notmydebug .bottom .copy-btn, .first-tab-system-container .page .notmydebug .bottom .count-fav-mydebug, .first-tab-system-container .page .notmydebug .bottom .count-like-mydebug, .first-tab-system-container .page .notmydebug .bottom .comment-post-btn {
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0 7px;
}
.first-tab-system-container .page .mydebug .bottom .count-fav img, .first-tab-system-container .page .mydebug .bottom .count-like img, .first-tab-system-container .page .mydebug .bottom .share-btn img, .first-tab-system-container .page .mydebug .bottom .copy-btn img, .first-tab-system-container .page .mydebug .bottom .count-fav-mydebug img, .first-tab-system-container .page .mydebug .bottom .count-like-mydebug img, .first-tab-system-container .page .mydebug .bottom .comment-post-btn img, .first-tab-system-container .page .notmydebug .bottom .count-fav img, .first-tab-system-container .page .notmydebug .bottom .count-like img, .first-tab-system-container .page .notmydebug .bottom .share-btn img, .first-tab-system-container .page .notmydebug .bottom .copy-btn img, .first-tab-system-container .page .notmydebug .bottom .count-fav-mydebug img, .first-tab-system-container .page .notmydebug .bottom .count-like-mydebug img, .first-tab-system-container .page .notmydebug .bottom .comment-post-btn img {
  height: 18px;
}
.first-tab-system-container .page .notmydebug .bottom {
  gap: 20px;
  color: white;
  align-self: baseline;
}
.first-tab-system-container .page .notmydebug .bottom .count-fav, .first-tab-system-container .page .notmydebug .bottom .count-like, .first-tab-system-container .page .notmydebug .bottom .share-btn, .first-tab-system-container .page .notmydebug .bottom .copy-btn, .first-tab-system-container .page .notmydebug .bottom .comment-post-btn {
  gap: 4px;
  padding: 5px 10px;
  background-color: rgba(145, 152, 161, 0.2901960784);
  cursor: pointer;
  margin: 0;
  transition: 0.1s;
}
.first-tab-system-container .page .notmydebug .bottom .comment-post-btn {
  gap: 5.5px;
}
.first-tab-system-container .page .notmydebug .bottom .count-like:hover {
  transition: 0.1s;
  background-color: rgba(249, 24, 129, 0.4745098039);
}
.first-tab-system-container .page .notmydebug .bottom .count-fav:hover {
  transition: 0.1s;
  background-color: rgba(255, 193, 1, 0.4745098039);
}
.first-tab-system-container .page .notmydebug .bottom .share-btn:hover, .first-tab-system-container .page .notmydebug .bottom .copy-btn:hover, .first-tab-system-container .page .notmydebug .bottom .comment-post-btn:hover {
  transition: 0.1s;
  background-color: rgba(145, 152, 161, 0.5019607843);
}
.first-tab-system-container .page .notmydebug .option-menu .op:nth-child(2) {
  border: none;
}
.first-tab-system-container .page .back-big-debug {
  margin-left: 23px;
  margin-right: 5px;
  margin-top: 9px;
  border-radius: 50px;
  padding: 10px;
  background-color: rgba(145, 152, 161, 0.5019607843);
  height: 38px;
  cursor: pointer;
}
.first-tab-system-container .page .back-big-debug:hover {
  background-color: rgba(145, 152, 161, 0.4078431373);
}
.first-tab-system-container .page .big-debug {
  border-bottom: 1px solid transparent;
  padding-left: 15px;
  flex-grow: 1;
}
.first-tab-system-container .page .big-debug:hover {
  background-color: transparent;
}
.first-tab-system-container .page .comment-big-container {
  width: 100%;
  padding-bottom: 30px;
}
.first-tab-system-container .page .comment-big-container .comment-container {
  color: white;
  margin-top: 10px;
  background-color: transparent;
  font-size: 16px;
  border: 1.5px solid #313845;
  border-radius: 50px;
  overflow: hidden;
  padding-left: 20px;
  margin-right: 30px;
  margin-left: 10px;
}
.first-tab-system-container .page .comment-big-container .comment-container textarea {
  width: 100%;
  font-size: 15px;
  padding-top: 15px;
  height: 45px;
  resize: vertical;
  min-height: 45px;
  background-color: transparent;
  border: none;
  outline: none;
  color: white;
  padding-right: 15px;
  /* Masque la scrollbar dans tous les navigateurs */
  overflow: hidden;
  /* Assure que le scroll est masqué */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* Internet Explorer */
}
.first-tab-system-container .page .comment-big-container .comment-container .textarea::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Edge */
}
.first-tab-system-container .page .comment-big-container .comment-container .bottom-comment {
  margin-right: 15px;
  display: flex;
  gap: 15px;
  padding: 5px 0;
  display: none;
}
.first-tab-system-container .page .comment-big-container .comment-container .bottom-comment .cancel, .first-tab-system-container .page .comment-big-container .comment-container .bottom-comment .comment-btn {
  border-radius: 6px;
  padding: 8px;
  color: white;
  border: none;
  font-weight: 500;
  cursor: pointer;
}
.first-tab-system-container .page .comment-big-container .comment-container .bottom-comment .cancel {
  background-color: #9198a1;
  margin-left: auto;
}
.first-tab-system-container .page .comment-big-container .comment-container .bottom-comment .comment-btn {
  background-color: #4493f8;
}
.first-tab-system-container .page .comments-big-container {
  width: 100%;
  padding-bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: 35px;
  max-width: 100%;
}
.first-tab-system-container .page .comments-big-container .comments-container {
  margin-right: 30px;
  margin-left: 10px;
  display: flex;
  gap: 7px;
  font-size: 15px;
}
.first-tab-system-container .page .comments-big-container .comments-container .profil-pic-comment {
  margin-top: 2px;
  height: 28px;
  width: 28px;
  object-fit: cover;
  cursor: pointer;
  border-radius: 50px;
}
.first-tab-system-container .page .comments-big-container .comments-container .name-date-content {
  padding-top: 6px;
  display: flex;
  gap: 8px;
  flex-direction: column;
  width: 95%;
}
.first-tab-system-container .page .comments-big-container .comments-container .name-date-content .name-date {
  display: flex;
  gap: 7px;
}
.first-tab-system-container .page .comments-big-container .comments-container .name-date-content .name-date p {
  color: #9198a1;
}
.first-tab-system-container .page .comments-big-container .comments-container .name-date-content .name-date i {
  color: #edb200;
}
.first-tab-system-container .page .comments-big-container .comments-container .name-date-content a {
  color: white;
  text-decoration: none;
  font-weight: 500;
}
.first-tab-system-container .page .comments-big-container .comments-container .name-date-content a:hover {
  text-decoration: underline;
}
.first-tab-system-container .page .comments-big-container .comments-container .name-date-content .content {
  color: white;
  word-wrap: break-word; /* Permet au texte long de revenir à la ligne */
  overflow-wrap: break-word; /* Gère également le retour à la ligne */
  white-space: normal; /* Empêche le texte de rester sur une seule ligne */
  font-size: 13.5px;
  max-width: 100%;
  line-height: 20px;
}
.first-tab-system-container .page .comments-big-container .comments-container .name-date-content .response, .first-tab-system-container .page .comments-big-container .comments-container .name-date-content .delete-comment {
  color: #9198a1;
  font-size: 13.5px;
  cursor: pointer;
  z-index: 2;
  align-self: baseline;
}
.first-tab-system-container .page .comments-big-container .comments-container .name-date-content .response:hover, .first-tab-system-container .page .comments-big-container .comments-container .name-date-content .delete-comment:hover {
  text-decoration: underline;
}
.first-tab-system-container .page .comments-big-container .comments-container .name-date-content .delete-comment {
  z-index: 1;
  margin-top: -26px;
  padding-left: 70px;
}
.first-tab-system-container .page .comments-big-container .comment_comment {
  margin-top: -20px;
  margin-left: 45px;
}
.first-tab-system-container .page .comments-big-container .comment_comment2 {
  margin-top: -20px;
  margin-left: 82px;
}
.first-tab-system-container .page .comments-big-container .comment_comment3 {
  margin-top: -20px;
  margin-left: 119px;
}
.first-tab-system-container .page .comments-big-container .comment_comment4 {
  margin-top: -20px;
  margin-left: 156px;
}
.first-tab-system-container .page .comments-big-container .comment-comment-container {
  width: 100%;
  color: white;
  background-color: transparent;
  font-size: 16px;
  border: 1.5px solid #313845;
  border-radius: 20px;
  overflow: hidden;
  padding-left: 20px;
  display: none;
}
.first-tab-system-container .page .comments-big-container .comment-comment-container textarea {
  width: 100%;
  font-size: 13.5px;
  padding-top: 15px;
  height: 55px;
  resize: vertical;
  min-height: 55px;
  background-color: transparent;
  border: none;
  outline: none;
  color: white;
  padding-right: 15px;
}
.first-tab-system-container .page .comments-big-container .comment-comment-container .bottom-comment {
  margin-right: 15px;
  display: flex;
  gap: 15px;
  padding: 5px 0;
}
.first-tab-system-container .page .comments-big-container .comment-comment-container .bottom-comment .cancel, .first-tab-system-container .page .comments-big-container .comment-comment-container .bottom-comment .comment-btn {
  border-radius: 6px;
  padding: 6px;
  color: white;
  border: none;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.first-tab-system-container .page .comments-big-container .comment-comment-container .bottom-comment .cancel {
  background-color: #9198a1;
  margin-left: auto;
}
.first-tab-system-container .page .comments-big-container .comment-comment-container .bottom-comment .comment-btn {
  background-color: #4493f8;
}
.first-tab-system-container .mini-profil {
  width: 24.55vw;
  border-left: 1px solid rgba(145, 152, 161, 0.6509803922);
  display: flex;
  flex-direction: column;
  align-items: baseline;
}
.first-tab-system-container .mini-profil .banniere {
  width: 100%;
  height: 17vh;
  object-fit: cover;
  background-color: rgba(122, 142, 168, 0.5176470588);
}
.first-tab-system-container .mini-profil .form-set-banner {
  display: none;
}
.first-tab-system-container .mini-profil .set-banner-container {
  padding: 7px 10px;
  cursor: pointer;
  border-radius: 50px;
  position: absolute;
  right: 4px;
  margin-top: 3px;
}
.first-tab-system-container .mini-profil .set-banner-container:hover {
  background-color: rgba(145, 152, 161, 0.2901960784);
}
.first-tab-system-container .mini-profil .set-banner-container .set-banner {
  margin-top: 3px;
  height: 20px;
}
.first-tab-system-container .mini-profil .username-container {
  padding-left: 10px;
  margin-top: -50px;
  display: flex;
  align-items: center;
}
.first-tab-system-container .mini-profil .username-container .username {
  color: white;
  font-weight: 550;
  font-size: 26px;
  margin-right: 5px;
}
.first-tab-system-container .mini-profil .rank {
  color: white;
  font-weight: 550;
  padding-left: 10px;
  margin-top: 5px;
}
.first-tab-system-container .mini-profil .progress {
  padding-left: 10px;
  margin-bottom: 23px;
  font-size: 14px;
  margin-top: 5px;
  color: #B0BEC5;
}
.first-tab-system-container .mini-profil .progress span {
  color: #edb200;
}
.first-tab-system-container .mini-profil .mini-profil-pic-container {
  background-color: #0d1117;
  height: 95px;
  width: 95px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: -50px;
  left: 10px;
}
.first-tab-system-container .mini-profil .mini-profil-pic-container .mini-profil-pic {
  height: 80px;
  width: 80px;
  object-fit: cover;
  border-radius: 50px;
  cursor: pointer;
}
.first-tab-system-container .mini-profil .stats-container {
  justify-content: space-around;
  width: 100%;
  height: 14%;
  max-height: 100px;
  display: flex;
  margin-bottom: 21px;
}
.first-tab-system-container .mini-profil .stats-container .stat-block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.first-tab-system-container .mini-profil .stats-container .stat {
  display: flex;
  gap: 5px;
  align-items: center;
}
.first-tab-system-container .mini-profil .stats-container .stat img {
  height: 22px;
}
.first-tab-system-container .mini-profil .stats-container .stat div {
  display: flex;
  gap: 4px;
}
.first-tab-system-container .mini-profil .stats-container .stat div p:nth-of-type(1) {
  color: white;
  font-weight: 600;
}
.first-tab-system-container .mini-profil .stats-container .stat div p:nth-of-type(2) {
  color: #9198a1;
  margin-top: auto;
  margin-bottom: 1px;
}
.first-tab-system-container .mini-profil .badges {
  padding-left: 10px;
  color: white;
}
.first-tab-system-container .mini-profil .badges i {
  color: white;
  font-weight: 550;
  margin-top: 5px;
}
.first-tab-system-container .mini-profil .badges .img-container {
  margin-top: 5px;
}
.first-tab-system-container .mini-profil .badges .img-container img {
  height: 17.3%;
  width: 17.3%;
  cursor: pointer;
}
.first-tab-system-container .mini-profil .badges .img-container img:nth-child(2) {
  margin-bottom: -4px;
  height: 20.3%;
  width: 20.3%;
  margin-left: -2px;
}
.first-tab-system-container .mini-profil .badges .img-container img:nth-child(3) {
  margin-bottom: -4.5px;
  height: 19.3%;
  width: 19.3%;
  margin-left: -7px;
  margin-right: -3px;
}
.first-tab-system-container .mini-profil .badges .img-container img:nth-child(4) {
  margin-bottom: -3px;
  height: 19%;
  width: 19%;
}
.first-tab-system-container .mini-profil .link-container {
  width: 100%;
  text-align: center;
  margin-top: auto;
  border-top: 1px solid rgba(145, 152, 161, 0.6509803922);
}
.first-tab-system-container .mini-profil a {
  display: flex;
  justify-content: center;
  padding: 10px 0;
  text-decoration: none;
  color: #9198a1;
}
.first-tab-system-container .mini-profil .next-flamme-container {
  padding-left: 10px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}
.first-tab-system-container .mini-profil .next-flamme-container i {
  color: white;
  font-weight: 550;
  margin-top: 5px;
}
.first-tab-system-container .mini-profil .next-flamme-container p {
  margin-top: auto;
}
.first-tab-system-container .mini-profil .next-flamme-container p:nth-of-type(2) {
  font-size: 12px;
  color: #9198a1;
}
.first-tab-system-container .mini-profil .stats-today-container {
  font-size: 13px;
  padding-left: 10px;
  margin-top: 6px;
  color: #9198a1;
  display: flex;
  align-items: center;
  gap: 1em;
}
.first-tab-system-container .mini-profil .stats-today-container span {
  font-weight: 500;
  color: white;
}
.first-tab-system-container .mini-profil .stats-today-container .ou {
  font-size: 8.5px;
  text-align: center;
  margin-bottom: -4px;
  margin-top: 1px;
  color: white;
}

.tippy-box[data-theme~=custom] {
  background-color: #666a70;
  color: white;
}

.tippy-box[data-theme~=custom][data-placement^=top] > .tippy-arrow::before {
  border-top-color: #666a70;
}

.tippy-box[data-theme~=custom][data-placement^=bottom] > .tippy-arrow::before {
  border-bottom-color: #666a70;
}

.tippy-box[data-theme~=custom][data-placement^=left] > .tippy-arrow::before {
  border-left-color: #666a70;
}

.tippy-box[data-theme~=custom][data-placement^=right] > .tippy-arrow::before {
  border-right-color: #666a70;
}

.add-debug-form-container {
  overflow-y: scroll;
  flex-grow: 1;
  padding: 30px 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  height: calc(100vh - 63px);
  scrollbar-color: rgba(145, 152, 161, 0.5176470588) #0d1117;
  scrollbar-width: auto;
}
.add-debug-form-container .add-debug-form {
  color: white;
  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: 20px;
  width: 70%;
}
.add-debug-form-container .add-debug-form .header {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.add-debug-form-container .add-debug-form .header p {
  color: #9198a1;
  font-size: 14.5px;
}
.add-debug-form-container .add-debug-form .error {
  display: flex;
  gap: 5px;
  margin-top: -3px;
  display: none;
}
.add-debug-form-container .add-debug-form .error img {
  margin-top: 1px;
  height: 15px;
}
.add-debug-form-container .add-debug-form .error p {
  color: #f85149;
  font-weight: 500;
  font-size: 13.5px;
}
.add-debug-form-container .add-debug-form .entry {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.add-debug-form-container .add-debug-form .entry label {
  font-weight: 500;
}
.add-debug-form-container .add-debug-form .entry input, .add-debug-form-container .add-debug-form .entry textarea, .add-debug-form-container .add-debug-form .entry select {
  color: white;
  background: none;
  border: 1px solid rgba(145, 152, 161, 0.6509803922);
  padding: 8px;
  border-radius: 9px;
  outline: none;
  width: 500px;
}
.add-debug-form-container .add-debug-form .entry input:focus, .add-debug-form-container .add-debug-form .entry textarea:focus, .add-debug-form-container .add-debug-form .entry select:focus {
  border: 2px solid #4493f8;
}
.add-debug-form-container .add-debug-form .entry input option, .add-debug-form-container .add-debug-form .entry textarea option, .add-debug-form-container .add-debug-form .entry select option {
  background-color: #0d1117;
}
.add-debug-form-container .add-debug-form .entry .mini-description {
  font-size: 14px;
  color: #9198a1;
}
.add-debug-form-container .add-debug-form .entry textarea {
  max-width: 500px;
  min-height: 85px;
}
.add-debug-form-container .add-debug-form .entry .code-form-add {
  min-height: 150px;
  overflow: auto;
}
.add-debug-form-container .add-debug-form .file-input .image-preview-container {
  display: flex;
  display: none;
}
.add-debug-form-container .add-debug-form .file-input .image-preview-container img:nth-child(1) {
  width: 300px;
  border-radius: 15px;
}
.add-debug-form-container .add-debug-form .file-input .image-preview-container img:nth-child(2) {
  margin-top: 7px;
  margin-left: -35px;
  height: 30px;
  background-color: #61666c;
  padding: 5px;
  border-radius: 50px;
  cursor: pointer;
}
.add-debug-form-container .add-debug-form .file-input .image-preview-container img:nth-child(2):hover {
  background-color: #3b3d41;
}
.add-debug-form-container .add-debug-form .file-input .file-input-container {
  display: flex;
  border: 1px solid rgba(145, 152, 161, 0.6509803922);
  border-radius: 9px;
  overflow: hidden;
  width: 500px;
  cursor: pointer;
}
.add-debug-form-container .add-debug-form .file-input .file-input-container label {
  padding: 8px;
  background-color: rgba(145, 152, 161, 0.4196078431);
  border-right: 1px solid rgba(145, 152, 161, 0.6509803922);
}
.add-debug-form-container .add-debug-form .file-input .file-input-container p {
  padding: 8px;
}
.add-debug-form-container .add-debug-form .file-input input {
  display: none;
}
.add-debug-form-container .add-debug-form .title-debug input {
  width: 300px;
}
.add-debug-form-container .add-debug-form hr {
  border: 0.5px solid rgba(145, 152, 161, 0.6509803922);
  width: 100%;
}
.add-debug-form-container .add-debug-form h3 {
  position: relative;
  margin-bottom: -10px;
}
.add-debug-form-container .add-debug-form h3::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2.5px;
  height: 2px;
  background-color: #4493f8;
  border-radius: 50px;
}
.add-debug-form-container .add-debug-form i {
  font-size: 14.5px;
}
.add-debug-form-container .add-debug-form .status-form {
  display: flex;
  align-items: center;
  gap: 7px;
}
.add-debug-form-container .add-debug-form .status-form img {
  height: 30px;
}
.add-debug-form-container .add-debug-form .status-form p:nth-child(1) {
  font-weight: 500;
}
.add-debug-form-container .add-debug-form .status-form p:nth-child(2) {
  color: #9198a1;
  font-size: 13.5px;
}
.add-debug-form-container .add-debug-form .status-form input {
  cursor: pointer;
  height: 17px;
  width: 17px;
  margin-right: 5px;
  accent-color: #4493f8;
}
.add-debug-form-container .add-debug-form input[type=submit] {
  color: white;
  border: none;
  padding: 8px;
  border-radius: 6px;
  background-color: #4493f8;
  margin-left: auto;
  font-weight: 500;
  cursor: pointer;
}
.add-debug-form-container .add-debug-form input[type=submit]:focus {
  background-color: #1a5db5;
}

.add-debug-form-container form .choice-group {
  display: flex;
  gap: 10px;
  margin-left: auto;
}
.add-debug-form-container form .choice-group .cancel {
  color: white;
  border: none;
  padding: 8px;
  border-radius: 6px;
  background-color: #9198a1;
  margin-left: auto;
  font-weight: 500;
  cursor: pointer;
}
.add-debug-form-container form .choice-group .cancel:focus {
  background-color: #6f767f;
}

.image-debug-modal-container {
  height: 100vh;
  width: 100vw;
  z-index: 4;
  position: absolute;
  display: none;
}
.image-debug-modal-container .close-debug-modal {
  height: 48px;
  background-color: #474a4e;
  padding: 10px;
  border-radius: 50px;
  cursor: pointer;
  position: absolute;
  top: 7px;
  right: 7px;
}
.image-debug-modal-container .close-debug-modal:hover {
  background-color: #3b3d41;
}
.image-debug-modal-container .img-debug-modal {
  position: absolute; /* postulat de départ */
  top: 50%;
  left: 50%; /* à 50%/50% du parent référent */
  transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
  height: 100%;
}

.total-debug {
  font-size: 17px;
  padding: 20px 30px;
  color: white;
}
.total-debug .total-debug-number {
  font-weight: bold;
}
.total-debug .total-debug-query {
  font-style: italic;
  color: rgb(255, 118, 26);
  font-weight: 700;
}

.inscription-container {
  display: flex;
}
.inscription-container .branding {
  color: white;
  background-image: url("../image/bg-space.webp");
  background-size: cover;
  background-position: center;
  width: 50%;
  padding: 0 80px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-top: 30px;
  height: 125vh;
}
.inscription-container .branding h1 {
  font-size: 32px;
}
.inscription-container .branding p {
  font-size: 16px;
}
.inscription-container .branding .plume3d {
  height: 280px;
  width: 280px;
  margin-top: -70px;
  margin-left: 250px;
}
.inscription-container .branding .plume3d-2 {
  height: 280px;
  width: 280px;
  margin-top: -210px;
  transform: rotate(-0.1turn);
}
.inscription-container .form-ins-container {
  background-color: white;
  width: 50%;
  padding: 30px 55px;
}
.inscription-container .form-ins-container .redirect-conn {
  display: flex;
  gap: 10px;
}
.inscription-container .form-ins-container .redirect-conn p {
  margin-left: auto;
}
.inscription-container .form-ins-container .redirect-conn a {
  color: black;
}
.inscription-container .form-ins-container .error {
  padding: 16px;
  border-radius: 6px;
  border: 1px solid rgba(248, 81, 73, 0.4);
  background-color: rgba(248, 82, 73, 0.1843137255);
  display: none;
  margin-bottom: 20px;
}
.inscription-container .form-ins-container form {
  display: flex;
  flex-direction: column;
  padding: 0 40px;
}
.inscription-container .form-ins-container form label {
  margin-bottom: 3px;
  font-weight: 500;
}
.inscription-container .form-ins-container form #email, .inscription-container .form-ins-container form #username {
  background: none;
  border: 1.5px solid rgba(145, 152, 161, 0.6509803922);
  padding: 10px;
  border-radius: 9px;
  outline: none;
  width: 100%;
  margin-bottom: 25px;
}
.inscription-container .form-ins-container form #email:focus, .inscription-container .form-ins-container form #username:focus {
  border: 1.5px solid #4493f8;
}
.inscription-container .form-ins-container form .password-container {
  border: 1.5px solid rgba(145, 152, 161, 0.6509803922);
  border-radius: 9px;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-bottom: 25px;
}
.inscription-container .form-ins-container form .password-container img {
  height: 20px;
  cursor: pointer;
  margin: 0 7px;
}
.inscription-container .form-ins-container form .password-container #password {
  padding: 10px;
  outline: none;
  flex-grow: 1;
  border: none;
}
.inscription-container .form-ins-container form input[type=submit] {
  margin-top: 10px;
  background-color: black;
  color: white;
  padding: 10px;
  border-radius: 9px;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
}
.inscription-container .form-ins-container form input[type=submit]:hover {
  background-color: rgb(40, 39, 39);
}

.connexion-container {
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
}
.connexion-container .logo {
  height: 50px;
  width: 50px;
  margin-bottom: 5px;
}
.connexion-container .error {
  padding: 16px;
  border-radius: 6px;
  border: 1px solid rgba(248, 81, 73, 0.4);
  background-color: rgba(248, 82, 73, 0.1843137255);
  display: none;
}
.connexion-container form {
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  background-color: #151b23;
  border: 1px solid rgba(145, 152, 161, 0.6509803922);
  border-radius: 6px;
  width: 300px;
  padding: 17px;
}
.connexion-container form #username_email {
  margin-bottom: 20px;
  background: none;
  border: 1px solid rgba(145, 152, 161, 0.6509803922);
  padding: 6px;
  border-radius: 6px;
  outline: none;
  color: white;
}
.connexion-container form #username_email:focus {
  border: 1px solid #4493f8;
}
.connexion-container form label {
  margin-bottom: 4px;
}
.connexion-container form a {
  margin-left: auto;
  margin-top: -21px;
  margin-bottom: 6px;
  color: #247aea;
  font-size: 13px;
}
.connexion-container form .password-container {
  border: 1px solid rgba(145, 152, 161, 0.6509803922);
  border-radius: 6px;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-bottom: 20px;
}
.connexion-container form .password-container img {
  height: 20px;
  cursor: pointer;
  margin: 0 7px;
}
.connexion-container form .password-container #password {
  color: white;
  padding: 6px;
  outline: none;
  flex-grow: 1;
  border: none;
  background: none;
}
.connexion-container form input[type=submit] {
  margin-top: 5px;
  background-color: #247aea;
  color: white;
  padding: 6px;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
}
.connexion-container form input[type=submit]:hover {
  background-color: #1a73e8;
}
.connexion-container .redirect-ins {
  display: flex;
  gap: 10px;
  margin-top: 5px;
}
.connexion-container .redirect-ins a {
  color: #247aea;
}

.update-mdp-container {
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
}
.update-mdp-container .logo {
  height: 50px;
  width: 50px;
  margin-bottom: 5px;
}
.update-mdp-container .error {
  padding: 16px;
  border-radius: 6px;
  border: 1px solid rgba(248, 81, 73, 0.4);
  background-color: rgba(248, 82, 73, 0.1843137255);
  display: none;
}
.update-mdp-container .success {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 10px;
  padding: 16px;
  border-radius: 6px;
  border: 1px solid rgba(40, 167, 69, 0.4); /* Vert avec opacité 40% (66 hex) */
  background-color: rgba(40, 167, 69, 0.1843137255); /* Vert avec opacité 18% (2F hex) */
  display: none;
}
.update-mdp-container .success a {
  color: white;
  font-weight: 500;
}
.update-mdp-container form {
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  background-color: #151b23;
  border: 1px solid rgba(145, 152, 161, 0.6509803922);
  border-radius: 6px;
  width: 300px;
  padding: 17px;
}
.update-mdp-container form label {
  margin-bottom: 4px;
}
.update-mdp-container form .password-container {
  border: 1px solid rgba(145, 152, 161, 0.6509803922);
  border-radius: 6px;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-bottom: 20px;
}
.update-mdp-container form .password-container img {
  height: 20px;
  cursor: pointer;
  margin: 0 7px;
}
.update-mdp-container form .password-container #password {
  color: white;
  padding: 6px;
  outline: none;
  flex-grow: 1;
  border: none;
  background: none;
}
.update-mdp-container form input[type=submit] {
  margin-top: 5px;
  background-color: #247aea;
  color: white;
  padding: 6px;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
}
.update-mdp-container form input[type=submit]:hover {
  background-color: #1a73e8;
}

.emailmdp-container {
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
}
.emailmdp-container .logo {
  height: 50px;
  width: 50px;
  margin-bottom: 5px;
}
.emailmdp-container .error {
  padding: 16px;
  border-radius: 6px;
  border: 1px solid rgba(248, 81, 73, 0.4);
  background-color: rgba(248, 82, 73, 0.1843137255);
  display: none;
}
.emailmdp-container .success {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 10px;
  padding: 16px;
  border-radius: 6px;
  border: 1px solid rgba(40, 167, 69, 0.4); /* Vert avec opacité 40% (66 hex) */
  background-color: rgba(40, 167, 69, 0.1843137255); /* Vert avec opacité 18% (2F hex) */
  display: none;
}
.emailmdp-container .success a {
  color: white;
  font-weight: 500;
}
.emailmdp-container form {
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  background-color: #151b23;
  border: 1px solid rgba(145, 152, 161, 0.6509803922);
  border-radius: 6px;
  width: 300px;
  padding: 17px;
}
.emailmdp-container form #email {
  margin-bottom: 20px;
  background: none;
  border: 1px solid rgba(145, 152, 161, 0.6509803922);
  padding: 6px;
  border-radius: 6px;
  outline: none;
  color: white;
}
.emailmdp-container form #email:focus {
  border: 1px solid #4493f8;
}
.emailmdp-container form label {
  margin-bottom: 4px;
}
.emailmdp-container form input[type=submit] {
  margin-top: 5px;
  background-color: #247aea;
  color: white;
  padding: 6px;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
}
.emailmdp-container form input[type=submit]:hover {
  background-color: #1a73e8;
}

.menu-container {
  position: absolute;
  z-index: 5;
  background-color: #171b22;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 10px;
  right: 0;
  padding: 16px;
  border-radius: 10px 0 0 10px;
  border-top: 1px solid rgba(145, 152, 161, 0.6509803922);
  border-bottom: 1px solid rgba(145, 152, 161, 0.6509803922);
  border-left: 1px solid rgba(145, 152, 161, 0.6509803922);
  display: none;
}
.menu-container .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 5px;
  padding-bottom: 13px;
  border-bottom: 1.5px solid rgba(145, 152, 161, 0.6509803922);
}
.menu-container .header .close-menu {
  height: 25px;
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
}
.menu-container .header .close-menu:hover {
  background-color: rgba(255, 255, 255, 0.1529411765);
}
.menu-container .header .pic-name {
  display: flex;
  align-items: center;
  gap: 5px;
}
.menu-container .header .pic-name p {
  font-weight: 500;
}
.menu-container .header .pic-name img {
  height: 35px;
  width: 35px;
  object-fit: cover;
  border-radius: 50px;
}
.menu-container .link-container div {
  display: flex;
  cursor: pointer;
  padding: 16px 0;
  border-radius: 6px;
  gap: 5px;
  padding-left: 5px;
  padding-right: 5px;
}
.menu-container .link-container div:hover {
  background-color: rgba(255, 255, 255, 0.0274509804);
}
.menu-container .link-container div img {
  height: 18px;
}

.connexion-inscription {
  display: none;
}
.connexion-inscription > :nth-child(1) {
  color: #4493f8;
  text-decoration: none;
  padding: 5px 9px;
  padding-bottom: 8px;
  border: 1px solid #4493f8;
  border-radius: 6px;
}
.connexion-inscription > :nth-child(1):hover {
  background-color: rgba(68, 146, 248, 0.2196078431);
}
.connexion-inscription > :nth-child(2) {
  color: white;
  text-decoration: none;
  padding: 5px 9px;
  padding-bottom: 8px;
  border: 1px solid #1a75ec;
  border-radius: 6px;
  background-color: #1a75ec;
  margin-left: 3px;
}
.connexion-inscription > :nth-child(2):hover {
  background-color: #0d56b7;
  border: 1px solid #0d56b7;
}

.login-message {
  color: #9198a1;
  margin-top: 50px;
  padding: 0 50px;
  display: none;
}
.login-message a {
  text-decoration: none;
  font-weight: 500;
  color: #1a75ec;
}

.profil-container {
  color: white;
  display: flex;
  padding: 30px;
}
.profil-container .first-party {
  width: 290px;
  margin-right: 30px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}
.profil-container .first-party .profil-pic-container {
  position: relative;
}
.profil-container .first-party .profil-pic-container .profil-pic {
  height: 290px;
  width: 290px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(145, 152, 161, 0.6509803922);
}
.profil-container .first-party .profil-pic-container .set-profil-pic-container {
  padding: 7px 10px;
  cursor: pointer;
  border-radius: 50px;
  position: absolute;
  right: 5px;
  top: 220px;
  border: 1.5px solid rgba(145, 152, 161, 0.6509803922);
  background-color: #0d1117;
}
.profil-container .first-party .profil-pic-container .set-profil-pic-container:hover {
  background-color: #272f39;
}
.profil-container .first-party .profil-pic-container .set-profil-pic-container .set-profil-pic {
  margin-top: 3px;
  height: 22px;
}
.profil-container .first-party .username {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 12px;
}
.profil-container .first-party .fer {
  margin-top: -10px;
  margin-bottom: 5px;
  font-size: 22px;
  font-weight: 500;
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
  background: #6d6d6d -webkit-gradient(linear, left top, right top, from(#6d6d6d), to(#6d6d6d), color-stop(0.5, #fff)) 0 0 no-repeat;
  background-size: 100px;
  color: rgba(109, 109, 109, 0.1294117647);
  background-clip: text;
  animation-name: shine;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  text-shadow: 0 0px 0px rgba(109, 109, 109, 0.1294117647);
}
.profil-container .first-party .bronze {
  margin-top: -10px;
  margin-bottom: 5px;
  font-size: 22px;
  font-weight: 500;
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
  background: #cd7f32 -webkit-gradient(linear, left top, right top, from(#cd7f32), to(#cd7f32), color-stop(0.5, #fff)) 0 0 no-repeat;
  background-size: 100px;
  color: rgba(205, 128, 50, 0.1725490196);
  background-clip: text;
  animation-name: shine;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  text-shadow: 0 0px 0px rgba(205, 128, 50, 0.1725490196);
}
.profil-container .first-party .argent {
  margin-top: -10px;
  margin-bottom: 5px;
  font-size: 22px;
  font-weight: 500;
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
  background: #c0c0c0 -webkit-gradient(linear, left top, right top, from(#c0c0c0), to(#c0c0c0), color-stop(0.5, #fff)) 0 0 no-repeat;
  background-size: 100px;
  color: rgba(192, 192, 192, 0.2);
  background-clip: text;
  animation-name: shine;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  text-shadow: 0 0px 0px rgba(192, 192, 192, 0.2);
}
.profil-container .first-party .gold {
  margin-top: -10px;
  margin-bottom: 5px;
  font-size: 22px;
  font-weight: 500;
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
  background: #FFD700 -webkit-gradient(linear, left top, right top, from(#FFD700), to(#FFD700), color-stop(0.5, #fff)) 0 0 no-repeat;
  background-size: 100px;
  color: rgba(255, 217, 0, 0.1294117647);
  background-clip: text;
  animation-name: shine;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  text-shadow: 0 0px 0px rgba(255, 217, 0, 0.1294117647);
}
.profil-container .first-party .platine {
  margin-top: -10px;
  margin-bottom: 5px;
  font-size: 22px;
  font-weight: 500;
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
  background: #e5e4e2 -webkit-gradient(linear, left top, right top, from(#e5e4e2), to(#e5e4e2), color-stop(0.5, #fff)) 0 0 no-repeat;
  background-size: 100px;
  color: rgba(229, 228, 226, 0);
  background-clip: text;
  animation-name: shine;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  text-shadow: 0 0px 0px rgba(229, 228, 226, 0);
}
.profil-container .first-party .diamant {
  margin-top: -10px;
  margin-bottom: 5px;
  font-size: 22px;
  font-weight: 500;
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
  background: #b9f2ff -webkit-gradient(linear, left top, right top, from(#b9f2ff), to(#b9f2ff), color-stop(0.5, #fff)) 0 0 no-repeat;
  background-size: 100px;
  color: rgba(185, 242, 255, 0.1529411765);
  background-clip: text;
  animation-name: shine;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  text-shadow: 0 0px 0px rgba(185, 242, 255, 0.1529411765);
}
.profil-container .first-party .arcenciel {
  margin-top: -10px;
  margin-bottom: 5px;
  font-size: 22px;
  font-weight: 500;
  background: linear-gradient(to right, #6666ff, #0099ff, #00ff00, #ff3399, #6666ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow_animation 6s ease-in-out infinite;
  background-size: 400% 100%;
}
@keyframes rainbow_animation {
  0%, 100% {
    background-position: 0 0;
  }
  50% {
    background-position: 100% 0;
  }
}
.profil-container .first-party .bio {
  font-size: 16px;
  margin-bottom: 20px;
  white-space: pre-wrap;
}
.profil-container .first-party .edit-profil {
  width: 100%;
  color: white;
  background-color: rgba(145, 152, 161, 0.7019607843);
  border-radius: 7px;
  border: 1px solid rgba(145, 152, 161, 0.6509803922);
  padding: 5px;
  cursor: pointer;
  margin-bottom: 20px;
}
.profil-container .first-party .edit-profil:hover {
  background-color: rgba(145, 152, 161, 0.4588235294);
}
.profil-container .first-party .following {
  display: flex;
}
.profil-container .first-party .following span {
  color: white;
  font-weight: 500;
  margin: 0 4px;
}
.profil-container .first-party .following .redirect {
  color: #9198a1;
  cursor: pointer;
  font-weight: normal;
}
.profil-container .first-party .following .redirect:hover {
  color: #4493f8;
}
.profil-container .first-party .following img {
  height: 20px;
  margin-top: -2px;
}
.profil-container .first-party .update-user-informations label, .profil-container .first-party .update-user-informations p {
  font-weight: 500;
  font-size: 16px;
}
.profil-container .first-party .update-user-informations input, .profil-container .first-party .update-user-informations textarea {
  color: white;
  background: none;
  border: 1px solid rgba(145, 152, 161, 0.6509803922);
  padding: 8px;
  border-radius: 9px;
  outline: none;
  width: 100%;
  max-width: 100%;
  margin-bottom: 10px;
  margin-top: 5px;
}
.profil-container .first-party .update-user-informations input:focus, .profil-container .first-party .update-user-informations textarea:focus {
  border: 1px solid #4493f8;
}
.profil-container .first-party .update-user-informations textarea {
  height: 80px;
}
.profil-container .first-party .update-user-informations .link-conatiner {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.profil-container .first-party .update-user-informations .link-conatiner img {
  height: 18px;
  margin-right: 4px;
}
.profil-container .first-party .update-user-informations .link-conatiner input {
  margin: 0;
  padding: 4.5px;
  padding-left: 6px;
}
.profil-container .first-party .update-user-informations p {
  margin-bottom: 10px;
}
.profil-container .first-party .update-user-informations .save {
  color: white;
  border: none;
  padding: 4px;
  border-radius: 6px;
  background-color: #4493f8;
  margin-left: auto;
  font-weight: 500;
  cursor: pointer;
  margin-right: 4px;
}
.profil-container .first-party .update-user-informations .save:focus {
  background-color: #1a5db5;
}
.profil-container .first-party .update-user-informations .cancel-update {
  color: white;
  border: none;
  padding: 4px;
  border-radius: 6px;
  background-color: #9198a1;
  margin-left: auto;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 10px;
}
.profil-container .first-party .update-user-informations .cancel-update:focus {
  background-color: #6f767f;
}
.profil-container .first-party .user-info-container {
  display: flex;
  margin-bottom: 10px;
}
.profil-container .first-party .user-info-container img {
  height: 17px;
  margin-right: 6px;
}
.profil-container .first-party .user-info-container p {
  margin-top: 0.09em;
}
.profil-container .first-party .user-info-container a {
  color: white;
  text-decoration: none;
}
.profil-container .first-party .user-info-container a:hover {
  text-decoration: underline;
  color: #4493f8;
}
.profil-container .second-party {
  flex-grow: 1;
}
.profil-container .second-party .stats-container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 30px;
}
.profil-container .second-party .stats-container .stat {
  background-color: #252d39;
  padding: 1.3vh 6%;
  position: relative;
}
.profil-container .second-party .stats-container .stat p {
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 4px;
}
.profil-container .second-party .stats-container .stat div {
  display: flex;
  gap: 7px;
}
.profil-container .second-party .stats-container .stat div img {
  height: 40px;
}
.profil-container .second-party .stats-container .stat .img-container {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  top: 0;
  right: 0;
  padding-right: 2px;
  padding-top: 2vh;
  width: 46%;
  height: 50%;
}
.profil-container .second-party .stats-container .stat .img-container img {
  height: 15px;
}
.profil-container .second-party .stats-container .stat .img-container img:nth-child(2) {
  height: 17px;
  margin-top: -1px;
}
.profil-container .second-party .stats-container .stat .stat-age2 {
  height: 35px;
  margin-top: 2px;
}
.profil-container .second-party .popular-debug-container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
.profil-container .second-party .popular-debug-container .debug {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 48vh;
  max-height: 390px;
  border-radius: 17px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  background-color: #161b23;
  cursor: pointer;
  transition: 0.3s;
}
.profil-container .second-party .popular-debug-container .debug:hover {
  transition: 0.3s;
  transform: scale(1.03);
}
.profil-container .second-party .popular-debug-container .debug .header {
  width: 100%;
  height: 34.5%;
  object-fit: cover;
  object-position: top;
}
.profil-container .second-party .popular-debug-container .debug .content {
  padding: 0.6em;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.profil-container .second-party .popular-debug-container .debug .content .title {
  font-size: 17px;
  font-weight: 500;
}
.profil-container .second-party .popular-debug-container .debug .content .link {
  color: #4493f8;
  align-self: baseline;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  gap: 5%;
  font-size: 14.5px;
  margin-bottom: -5px;
}
.profil-container .second-party .popular-debug-container .debug .content .link img {
  margin-top: 4.5%;
  height: 13px;
}
.profil-container .second-party .popular-debug-container .debug .content pre {
  height: 2%;
}
.profil-container .second-party .popular-debug-container .debug .content pre code {
  font-weight: 400;
  font-family: monospace;
  padding: 3%;
  background-color: #0d1117;
  border-radius: 5px;
  scrollbar-width: none;
}
.profil-container .second-party .popular-debug-container .debug .bottom {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  color: #9198a1;
  padding: 0.6em;
  font-weight: 500;
  font-size: 13.5px;
}
.profil-container .second-party .popular-debug-container .debug .bottom img {
  height: 14px;
}
.profil-container .second-party .popular-debug-container .debug .bottom div {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.profil-container .second-party .popular-debug-container .debug .bottom div div {
  gap: 0.3em;
}

/* Pour masquer le bouton dans Internet Explorer et Edge */
input[type=password]::-ms-reveal {
  display: none;
}

/* Mode sombre */
.checkbox {
  display: none;
}

.slider {
  width: 50px;
  height: 20px;
  background-color: #2196F3;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  transition: 0.3s;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25) inset;
  cursor: pointer;
  position: absolute;
  z-index: 5;
  right: 24px;
  top: 143px;
  display: none;
}

.slider::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transform: translateX(30px);
  border-radius: 20px;
  transition: 0.3s;
  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.25);
}

.checkbox:checked ~ .slider::before {
  transform: translateX(-30px);
  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.25);
}

.checkbox:checked ~ .slider {
  background-color: lightgray;
}

.checkbox:active ~ .slider::before {
  transform: translate(0);
}

.light-mode {
  background-color: #fff;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* basic structure for the rays setup */
.congratulation-container {
  z-index: 5;
  position: absolute;
  display: none;
  flex-direction: column;
  align-items: baseline;
  align-items: center;
  gap: 230px;
  width: 100%;
  opacity: 0;
}
.congratulation-container .message {
  height: 150px;
  position: absolute;
  top: 3vh;
}
.congratulation-container .badge-name {
  height: 100px;
  position: absolute;
  top: 70vh;
}
.congratulation-container #raysDemoHolder {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 490px;
  height: 490px;
  top: 25vh;
}
.congratulation-container #raysDemoHolder #raysLogo {
  width: 300px;
  height: 250px;
  text-indent: -3000px;
  display: block;
  position: absolute;
  left: 23%;
  z-index: 2;
}
.congratulation-container #raysDemoHolder #rays { /* with animation properties */
  background: url(https://davidwalsh.name/wp-content/themes/2k11/images/rays-main.png) 0 0 no-repeat;
  position: absolute;
  top: -114px;
  width: 500px;
  height: 500px;
  /* microsoft ie */
  animation-name: spin;
  animation-duration: 40000ms; /* 40 seconds */
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.big-notification-container .notification {
  position: relative;
  display: flex;
  padding: 10px 20px;
  cursor: pointer;
  border-bottom: 1px solid rgba(145, 152, 161, 0.6509803922);
}
.big-notification-container .notification:hover {
  background-color: rgba(255, 255, 255, 0.0274509804);
}
.big-notification-container .notification .nature {
  font-size: 35px;
  margin-top: -8px;
  padding-right: 12px;
}
.big-notification-container .notification div {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: 7px;
}
.big-notification-container .notification div .username {
  color: white;
  font-weight: 500;
  font-size: 16px;
}
.big-notification-container .notification div .content {
  color: rgb(145, 152, 161);
  font-size: 17px;
}
.big-notification-container .notification div .date {
  color: rgb(145, 152, 161);
  font-size: 12.5px;
}
.big-notification-container .notification div img {
  height: 45px;
  width: 45px;
  object-fit: cover;
  border-radius: 50px;
}

.bell-animate {
  animation: bellshake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform-origin: top;
}

@keyframes bellshake {
  0% {
    transform: rotate(0);
  }
  15% {
    transform: rotate(7deg);
  }
  25% {
    transform: rotate(0);
  }
  /* Retour à 0° */
  35% {
    transform: rotate(-7deg);
  }
  45% {
    transform: rotate(0);
  }
  /* Retour à 0° */
  55% {
    transform: rotate(6deg);
  }
  65% {
    transform: rotate(0);
  }
  /* Retour à 0° */
  75% {
    transform: rotate(-6deg);
  }
  85% {
    transform: rotate(0);
  }
  /* Retour à 0° */
  90% {
    transform: rotate(4deg);
  }
  95% {
    transform: rotate(-4deg);
  }
  98% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.new-notif-icon {
  color: #4493f8;
  font-size: 55px;
  position: absolute;
  right: 15px;
  top: -19px;
  display: none;
}

.new-notif-page-icon {
  color: #4493f8;
  font-size: 60px;
  position: absolute;
  right: 85px;
  top: 17px;
}

.error-404 {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-top: 170px;
  width: 100%;
  color: white;
}
.error-404 h1 {
  font-size: 60px;
  margin-bottom: 30px;
}
.error-404 a {
  color: white;
  font-weight: 500;
}

.certification {
  margin-bottom: -2px;
  height: 13px !important;
  width: 13px !important;
}

.help-container {
  margin: 100px auto;
  color: white;
}
.help-container form {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}
.help-container form input[type=email] {
  border: 1px solid rgba(145, 152, 161, 0.6509803922);
  background: none;
  outline: none;
  color: white;
  border-radius: 17px;
  padding: 10px 7px;
  margin-bottom: 10px;
}
.help-container form input[type=email]:focus {
  border: 2px solid #4493f8;
}
.help-container form textarea {
  border: 1px solid rgba(145, 152, 161, 0.6509803922);
  background: none;
  outline: none;
  height: 150px;
  min-height: 150px;
  min-width: 500px;
  color: white;
  border-radius: 17px;
  padding: 7px;
}
.help-container form textarea:focus {
  border: 2px solid #4493f8;
}
.help-container form input[type=submit] {
  color: white;
  border: none;
  padding: 8px;
  border-radius: 6px;
  background-color: #4493f8;
  margin-left: auto;
  margin-top: 10px;
  font-weight: 500;
  cursor: pointer;
}
.help-container form input[type=submit]:focus {
  background-color: #1a5db5;
}

.fire-text {
  background: linear-gradient(180deg, #FF5733, #FFC828);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nomobile-container {
  margin-top: 45px;
  color: white;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.nomobile-container .logo {
  height: 110px;
}
.nomobile-container p {
  margin-top: 25px;
  width: 90%;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
}
.nomobile-container .interface {
  max-width: 95%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

.collections-container {
  width: 100%;
}
.collections-container .folder-container {
  width: 100%;
  display: flex;
  gap: 6em;
  padding: 20px;
}
.collections-container .folder-container .folder {
  text-align: center;
  position: relative;
  width: 8%;
  cursor: pointer;
}
.collections-container .folder-container .folder a {
  text-decoration: none;
}
.collections-container .folder-container .folder img {
  height: 80px;
}
.collections-container .folder-container .folder img:nth-child(2) {
  height: 40px;
  position: absolute;
  left: 30px;
  top: 27px;
}
.collections-container .folder-container .folder p {
  font-weight: 500;
  color: white;
}

.add-collection-container {
  color: white;
  background-color: #181c23;
  border-radius: 6px;
  width: 37.5%;
  padding: 15px;
  margin: 0 auto;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5568627451);
  position: fixed;
  top: 12vh;
  left: 50%;
  transform: translatex(-50%);
  z-index: 4;
  display: none;
}
.add-collection-container .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.8em;
}
.add-collection-container .header img {
  position: relative;
  height: 30px;
  padding: 7px;
  cursor: pointer;
  border-radius: 5px;
}
.add-collection-container .header img:hover {
  background-color: rgba(145, 152, 161, 0.2901960784);
}
.add-collection-container .premium {
  display: flex;
  background-color: #232831;
  border: 0.3px solid rgba(199, 199, 199, 0.2549019608);
  padding: 17px;
  border-radius: 7px;
  margin-bottom: 1.8em;
}
.add-collection-container .premium img {
  height: 22px;
  padding-right: 7px;
}
.add-collection-container .premium div p:nth-child(1) {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 0.1em;
}
.add-collection-container .premium div p:nth-child(2) {
  color: #b0b0b0;
  font-size: 12.7px;
  line-height: 20px;
  padding-right: 2em;
}
.add-collection-container .premium button {
  align-self: baseline;
  align-self: center;
  color: white;
  border: none;
  padding: 7px 13px;
  border-radius: 6px;
  background-color: #4493f8;
  font-weight: 500;
  cursor: pointer;
}
.add-collection-container .premium button:focus {
  background-color: #1a5db5;
}
.add-collection-container form .inputs-container {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin-bottom: 2.5em;
}
.add-collection-container form .inputs-container .input-container {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.add-collection-container form .inputs-container .input-container label {
  font-weight: 500;
}
.add-collection-container form .inputs-container .input-container input[type=text], .add-collection-container form .inputs-container .input-container select {
  color: white;
  background: none;
  width: 100%;
  border: 0.3px solid rgba(199, 199, 199, 0.2549019608);
  outline: none;
  padding: 5px;
  border-radius: 7px;
}
.add-collection-container form .inputs-container .input-container input[type=text]:focus, .add-collection-container form .inputs-container .input-container select:focus {
  border: 0.3px solid rgba(199, 199, 199, 0.5254901961);
}
.add-collection-container form .inputs-container .input-container select option {
  background-color: #232831;
}
.add-collection-container form .bottom {
  display: flex;
  gap: 15px;
}
.add-collection-container form .bottom button {
  border-radius: 6px;
  padding: 7px 12px;
  color: white;
  border: none;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.add-collection-container form .bottom button:nth-child(1) {
  background-color: #9198a1;
  margin-left: auto;
}
.add-collection-container form .bottom button:nth-child(2) {
  background-color: #4493f8;
}

.debugs-sorting-container {
  width: 100%;
}
.debugs-sorting-container .sorting {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  align-items: center;
  justify-content: end;
  padding: 1.5em;
  padding-bottom: 0;
}
.debugs-sorting-container .sorting input {
  background: none;
  border: 1px solid rgba(145, 152, 161, 0.6509803922);
  padding: 5px;
  border-radius: 5px;
  font-size: 14px;
  width: 380px;
  color: white;
  outline-color: #4493f8;
}
.debugs-sorting-container .sorting input:focus {
  outline: none; /* Pour retirer complètement l'outline */
  box-shadow: 0 0 0 2px #4493f8; /* Ajuste la couleur et l'épaisseur selon ton design */
  border: none;
}
.debugs-sorting-container .sorting .button-options {
  position: relative;
}
.debugs-sorting-container .sorting .button-options .button-sort {
  display: flex;
  color: white;
  align-items: center;
  padding: 5px 10px;
  background-color: rgb(45, 51, 58);
  border: 1px solid rgba(145, 152, 161, 0.231372549);
  border-radius: 5px;
  gap: 0.6em;
  cursor: pointer;
  font-weight: 500;
}
.debugs-sorting-container .sorting .button-options .button-sort:hover {
  background-color: #242a34;
}
.debugs-sorting-container .sorting .button-options .button-sort img {
  height: 7px;
}
.debugs-sorting-container .sorting .button-options .options {
  color: white;
  position: absolute;
  background-color: rgb(45, 51, 58);
  right: 0;
  z-index: 2;
  border: 1px solid rgba(145, 152, 161, 0.231372549);
  border-radius: 5px;
  margin-top: 0.6em;
  display: none;
}
.debugs-sorting-container .sorting .button-options .options p {
  padding: 5px 10px;
  border-bottom: 1px solid rgba(145, 152, 161, 0.231372549);
  cursor: pointer;
  transition: 0.1s;
}
.debugs-sorting-container .sorting .button-options .options p:hover {
  transition: 0.1s;
  background-color: rgba(145, 152, 161, 0.231372549);
}
.debugs-sorting-container .sorting .button-options .options-fonction {
  width: 150px;
}
.debugs-sorting-container .sorting button {
  color: white;
  border: none;
  padding: 5px 15px;
  border-radius: 6px;
  background-color: #4493f8;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  gap: 0.3em;
}
.debugs-sorting-container .sorting button:hover {
  background-color: #3271c4;
}
.debugs-sorting-container .sorting button img {
  height: 19px;
}
.debugs-sorting-container .debugs-container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 1.8% 0;
  justify-items: center;
}
.debugs-sorting-container .debugs-container .debug {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30vw;
  height: 46vh;
  max-height: 390px;
  border-radius: 17px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  background-color: #161b23;
  cursor: pointer;
  transition: 0.3s;
  margin-bottom: 10%;
  position: relative;
}
.debugs-sorting-container .debugs-container .debug:hover {
  transition: 0.3s;
  transform: scale(1.03);
}
.debugs-sorting-container .debugs-container .debug .header {
  width: 100%;
  height: 31%;
  object-fit: cover;
  object-position: top;
}
.debugs-sorting-container .debugs-container .debug .content {
  padding: 0.6em;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.debugs-sorting-container .debugs-container .debug .content .title {
  font-size: 17px;
  font-weight: 500;
}
.debugs-sorting-container .debugs-container .debug .content .link {
  color: #4493f8;
  align-self: baseline;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  gap: 5%;
  font-size: 14.5px;
  margin-bottom: -5px;
}
.debugs-sorting-container .debugs-container .debug .content .link img {
  margin-top: 4.5%;
  height: 13px;
}
.debugs-sorting-container .debugs-container .debug .content pre {
  height: 2%;
}
.debugs-sorting-container .debugs-container .debug .content pre code {
  font-weight: 400;
  font-family: monospace;
  padding: 3%;
  background-color: #0d1117;
  border-radius: 5px;
  scrollbar-width: none;
}
.debugs-sorting-container .debugs-container .debug .bottom {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  color: #9198a1;
  padding: 0.6em;
  font-weight: 500;
  font-size: 13.5px;
}
.debugs-sorting-container .debugs-container .debug .bottom img {
  height: 14px;
}
.debugs-sorting-container .debugs-container .debug .bottom div {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.debugs-sorting-container .debugs-container .debug .bottom div div {
  gap: 0.3em;
}

.fire-animation-container {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -60%);
  top: 50%;
  z-index: 5;
  display: none;
}
.fire-animation-container .fire {
  filter: drop-shadow(0 0 40px #FF4500);
  display: none;
}
.fire-animation-container h1 {
  color: #fde047;
  animation: bounce 1s infinite;
  display: none;
}
.fire-animation-container p {
  margin-top: 10px;
  color: #fdba74;
  font-size: 16px;
  display: none;
  margin-bottom: 25px;
}
.fire-animation-container button {
  cursor: pointer;
  border: none;
  width: 160%;
  padding-top: 1.3rem;
  /* py-4 = padding-top + padding-bottom 1rem */
  padding-bottom: 1.3rem;
  border-radius: 0.5rem;
  /* rounded-lg */
  font-weight: bold;
  /* font-bold */
  font-size: 1.125rem;
  /* text-lg = 18px */
  transition: all 0.3s;
  /* transition-all duration-300 */
  transform: translate(0, 0);
  /* pour activer transform */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  /* shadow-lg */
  background-image: linear-gradient(to right, #f97316, #ef4444); /* from-orange-500 to-red-500 */
  color: white; /* text-white */
  transition: transform 0.2s ease; /* pour les effets de hover/active */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Active : réduire à 95% */
}
.fire-animation-container button:hover {
  transform: scale(1.05);
}
.fire-animation-container button:active {
  transform: scale(0.95);
}
.fire-animation-container button svg {
  animation: bounce 1s infinite;
}
.fire-animation-container .counter {
  display: flex;
  color: white;
  align-items: center;
  gap: 3px;
  padding: 10px 23px;
  border-radius: 50px;
  border: 1.5px solid #f97316;
  display: none;
}
.fire-animation-container a {
  color: #f97316;
  display: none;
  position: absolute;
  top: 100%;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
@keyframes flip {
  0% {
    transform: rotate3d(0, 1, 0, 0deg);
  }
  50% {
    transform: rotate3d(0, 1, 0, 180deg);
  }
  100% {
    transform: rotate3d(0, 1, 0, 360deg);
  }
}
.expired-link-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #0d1117;
}
.expired-link-container .expired-link-message {
  text-align: center;
  padding: 3rem;
  margin: 2rem;
  max-width: 500px;
  background-color: #252b36;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  animation: fadeIn 0.5s ease-out;
}
.expired-link-container .expired-link-message .warning-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 1.5rem;
  animation: pulse 2s infinite;
}
.expired-link-container .expired-link-message h2 {
  color: #ffffff;
  font-size: 1.8rem;
  margin-bottom: 1rem;
  font-weight: 500;
}
.expired-link-container .expired-link-message p {
  color: #9198a1;
  font-size: 1.1rem;
  margin-bottom: 2rem;
  line-height: 1.5;
}
.expired-link-container .expired-link-message .retry-button {
  display: inline-block;
  padding: 12px 30px;
  background-color: #4493f8;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}
.expired-link-container .expired-link-message .retry-button:hover {
  background-color: #3274d1;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(68, 147, 248, 0.2);
}
.expired-link-container .expired-link-message .retry-button:active {
  transform: translateY(0);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.ranking-link {
  position: relative;
  border: 2px solid transparent;
  background: linear-gradient(#252b36, #252b36) padding-box, linear-gradient(45deg, #ffd700, #ffa500) border-box;
  border-radius: 12px;
  overflow: hidden;
}
.ranking-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.2), transparent);
  transition: 0.5s;
  z-index: 0;
  border-radius: 10px;
}
.ranking-link:hover {
  background: linear-gradient(#252b36, #252b36) padding-box, linear-gradient(45deg, #ffd700, #ffa500) border-box;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}
.ranking-link:hover::before {
  left: 100%;
}
.ranking-link:hover img {
  transform: rotate(20deg) scale(1.1);
}
.ranking-link img {
  position: relative;
  transition: transform 0.3s ease;
  z-index: 1;
}
.ranking-link p {
  position: relative;
  z-index: 1;
}
.ranking-link .ranking-badge {
  position: absolute;
  top: 0px;
  right: 0px;
  background: linear-gradient(45deg, #ffd700, #ffa500);
  color: #252b36;
  padding: 2px 6px;
  border-bottom-left-radius: 8px;
  font-size: 10px;
  font-weight: bold;
  box-shadow: 0 1px 3px rgba(255, 215, 0, 0.3);
  z-index: 2;
  transform-origin: center;
}

@keyframes pulse-badge {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(255, 215, 0, 0.4);
  }
  100% {
    transform: scale(1);
  }
}
.ranking-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #fff;
}

.subtitle {
  color: #8b949e;
  font-size: 1rem;
  margin-left: 20px;
  margin-bottom: 30px;
}
.subtitle span {
  text-decoration: underline;
  cursor: pointer;
}

.ranking-container {
  background: #161b22;
  border-radius: 12px;
  overflow: hidden;
  max-width: 600px;
  margin: 0 auto;
  margin-bottom: 30px;
}

@keyframes pulse-flame {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.ranking-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #21262d;
  transition: background-color 0.2s ease;
}
.ranking-item:hover {
  background: #1c2128;
}
.ranking-item .rank {
  font-size: 1.2rem;
  font-weight: 600;
  width: 40px;
  color: #fff;
}
.ranking-item .user-info {
  display: flex;
  align-items: center;
  flex: 1;
}
.ranking-item .avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  margin-right: 15px;
  background: #21262d;
  overflow: hidden;
}
.ranking-item .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ranking-item .username {
  font-weight: 500;
  color: #fff;
  text-decoration: none;
}
.ranking-item .username:hover {
  text-decoration: underline;
}
.ranking-item .flames {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.ranking-item .flames img {
  width: 20px;
}
.ranking-item .flame-icon {
  width: 20px;
  height: 20px;
}
.ranking-item .flame-count {
  font-weight: bold;
  color: #fff;
}
.ranking-item:nth-child(1) {
  background: linear-gradient(45deg, rgba(255, 215, 0, 0.1), transparent);
}
.ranking-item:nth-child(1) .rank {
  color: #ffd700;
}
.ranking-item:nth-child(1) .avatar {
  border: 2px solid #ffd700;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
.ranking-item:nth-child(2) {
  background: linear-gradient(45deg, rgba(192, 192, 192, 0.1), transparent);
}
.ranking-item:nth-child(2) .rank {
  color: #c0c0c0;
}
.ranking-item:nth-child(2) .avatar {
  border: 2px solid #c0c0c0;
}
.ranking-item:nth-child(3) {
  background: linear-gradient(45deg, rgba(205, 127, 50, 0.1), transparent);
}
.ranking-item:nth-child(3) .rank {
  color: #cd7f32;
}
.ranking-item:nth-child(3) .avatar {
  border: 2px solid #cd7f32;
}

.saison-count p {
  color: #ffd700;
  font-size: 12px;
}
.saison-count .end {
  color: white;
  display: flex;
}

.time-display {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  font-family: monospace;
}

.time-unit {
  display: inline-block;
  text-align: center;
}

.number {
  font-weight: bold;
  color: #fff;
}

.label {
  color: #666;
}

.streak-1-color {
  background: linear-gradient(180deg, #fdaa14, #fdaa14);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.streak-2-color {
  background: linear-gradient(180deg, #f73306, #fd9e15);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.streak-3-color {
  background: linear-gradient(180deg, #fd4178, #fc703e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.streak-4-color {
  background: linear-gradient(180deg, #f624e4, #fd58c1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.streak-5-color {
  background: linear-gradient(180deg, #a054f4, #d478f9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fire-user-container-1 {
  display: flex;
  align-items: center;
}
.fire-user-container-1 .fire-img {
  height: 15px !important;
  width: 15px !important;
  margin-right: 3px;
}
.fire-user-container-1 p {
  font-weight: bold;
}

.fire-user-container-2 {
  display: flex;
  align-items: center;
  margin-left: 5px;
}
.fire-user-container-2 .fire-img {
  height: 20px !important;
  width: 20px !important;
  margin-right: 3px;
}
.fire-user-container-2 p {
  font-size: 20px;
  font-weight: bold;
}

/*# sourceMappingURL=style-desktop.css.map */