/* MAIN */
body {
  font-family: "Satoshi", sans-serif !important;
  color: white !important;
  background-color: #dedede;
}

html {
  scroll-behavior: smooth;
}

/* HOME */
.full-screen-bg {
  background-image: linear-gradient(300deg, #1e1e20, #0e0e11 32%);
  background-size: cover, cover;
  position: relative;
  width: 100%;
  height: 100vh;
  /* ou la hauteur que vous souhaitez */
  overflow-x: hidden;
  /* pour gérer le contenu qui dépasse éventuellement */
  z-index: 1;
  background-blend-mode: overlay;
}

.full-screen-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(to bottom, #1e1e20 0%, rgba(0, 0, 0, 0) 60%),
    linear-gradient(to top, #0e0e11 0%, rgba(0, 0, 0, 0) 60%),
    url(../../uploads/users/back2.png) no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.2;
  /* Ajustez pour augmenter/réduire la transparence */
  z-index: -1;
  /* Place l'image derrière le contenu principal */
}

.mt-6 {
  margin-top: 25% !important;
}

.sp {
  background-color: #1d1c20;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 24px !important;
  color: white;
}

.footer-link {
  color: #a9a9a9;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
  transition: color .2s;
}
.footer-link:hover{
  color: hsl(0, 0%, 97%);

  transition: color .2s;

}
.icon-container {
  width: 15em; /* Set a width equal to half the font size */
  height: 8em; /* Set a height equal to half the font size */
  overflow: hidden; /* Hide the overflow */
  position: relative; /* Ensure the child stays inside */
}
.fa-icon-footer{
  font-size: 2em;
  
}
/* BTN SIGN */
.btn-sign {
  text-decoration: none;
  color: white !important;
  background-color: rgb(39 39 41);
  border: 1px solid rgba(255, 255, 255, .08);
  -webkit-transition: background-color 300ms linear;
  -ms-transition: background-color 300ms linear;
  transition: background-color 300ms linear;
}

.btn-sign:hover {
  background-color: rgba(39, 39, 41, 0.966);
  border-color: rgba(255, 255, 255, .25);
  transition: border-color 1s ease;
}

.btn-sign:active {
  background-color: rgb(39 39 41);
}

.main-text {
  text-align: center;
  text-shadow: 0 1px rgb(225 225 225 / 69%);
  background-image: linear-gradient(145deg, #424242 65%, #696969c2);
  -webkit-background-clip: text;
  letter-spacing: -.3px;
  background-clip: text;
  font-size: 3.5em;
}

.secondary-text {
  text-align: center;
  color: hwb(0 65% 35%);
  font-size: 1.3em;
  font-weight: 500;
}

@media screen and (max-width: 767px) {
  .main-text {
    font-size: 2em;
  }

  .secondary-text {
    text-align: center;
    color: hwb(0 65% 35%);
    font-size: 1em;
    font-weight: 500;
  }

  .mt-6 {
    margin-top: 50% !important;
  }
}

.full-screen-bg-sign {
  background-color: #764ba2;
  background-image: linear-gradient(-225deg, #5271C4 0%, #B19FFF 48%, #ECA1FE 100%);
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  box-shadow: 0 2px 10px 0 hsl(0deg 0% 53% / 77%);
  -webkit-overflow-scrolling: touch;
}

.bg-dash {
  background: #485563;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right,
      #29323c,
      hwb(212 19% 75%));
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right,
      #29323c,
      hwb(213 20% 73%));
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}



/* NAV */
#main-nav {
  background: transparent;
  transition: background 250ms ease-in;
  /*duration of fade transition */
}

.text-grey {
  color: rgb(145 145 145) !important;
}

/* BTN CO */
.btn-connexion {
  color: white !important;
  border-color: transparent !important;
  background-color: hsl(135.69deg 36.07% 46.29%);
  -webkit-transition: background-color 300ms linear;
  -ms-transition: background-color 300ms linear;
  transition: background-color 300ms linear;
}

.user_img {
  background-image: url(../../uploads/users/u_def.png);
  background-size: cover;
  height: 125px;
  width: 125px;
  transition: background 1s linear;
  background-repeat: no-repeat;
  background-position: center center;
  margin: 0 auto;
}


.btn-connexion:hover {
  background-color: hwb(135 24% 51%);
}


/*** |NPROGRESS| ***/

:root {
  --nprogress-color: hwb(0 100% 0%);
  --nprogress-height: 2px;
  --nprogress-spinner-opacity: 1;
  --nprogress-spinner-size: 32px;
  --nprogress-spinner-stroke-width: 3px;
}

#nprogress {
  /* Make clicks pass-through */
  pointer-events: none;
}

#nprogress .bar {
  background: hsl(0, 0%, 100%);
  background: var(--nprogress-color);
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  height: var(--nprogress-height);
}

/* Glow effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 30px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  box-shadow: 0 0 10px var(--nprogress-color), 0 0 5px var(--nprogress-color);
  opacity: 1;
  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

/* Spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 12px;
  left: 50%;
  margin-left: -16px;
  opacity: var(--nprogress-spinner-opacity);
}

#nprogress .spinner-icon {
  width: 32px;
  width: var(--nprogress-spinner-size);
  height: 32px;
  height: var(--nprogress-spinner-size);
  box-sizing: border-box;
  border: solid 2px transparent;
  border: solid var(--nprogress-spinner-stroke-width) transparent;
  border-top-color: #29d;
  border-top-color: var(--nprogress-color);
  border-left-color: #29d;
  border-left-color: var(--nprogress-color);
  border-radius: 50%;
  -webkit-animation: nprogress-spinner 400ms linear infinite;
  animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}

@-webkit-keyframes nprogress-spinner {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes nprogress-spinner {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*** |NPROGRESS| ***/


/*** INSCRIPTION ***/
.tt {
  color: #cecece;
  font-size: 1.8em;
  display: none;
}

.tt.active {
  background-color: transparent !important;
  display: contents;
}

.mt-n3 {
  margin-top: -8rem !important;
}

/*** END INSCRIPTION ***/

/*** DASH ***/
.pps {
  border-bottom: 1px solid #b5b5b5a6;
}
.mini-card{
  cursor: pointer;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #000;
  background-image: linear-gradient(#242325, #171619);
  border: 2px solid #181818;
  transition: box-shadow .3s;
  box-shadow: inset 0 1px 2px #525154, 0 20px 25px -5px rgba(0, 0, 0, .8), 0 10px 10px -5px rgba(0, 0, 0, .9);
  border-radius: 1rem;

}

.btn-launchw{
  font-weight: 500;
  margin-top: 12px;
  font-size: 0.9rem !important;
  backdrop-filter: blur(16px);
  color: #fff;
  border:none;
  background-color: #3c4040;
  padding: 10px 16px;
  transition: border-color .2s;
  transition: box-shadow .2s;
}
@media screen and (max-width: 767px) {
  .btn-launchw{
    margin-top: 0px !important;

  }

}
.btn-launchw:hover{
  background-color: #3c4040;
  color: #fff;
  border: transparent;
  box-shadow: inset 0 0 2px 1px #7d60ff, 0 0 2px 1px #7d60ff;

}
.btn-launchw:active:focus {
  background-color: #3c4040;
  border: none;
  color: #fff;
  box-shadow: inset 0 0 2px 1px #7d60ff, 0 0 5px 1px #7d60ff;

}

.btn-launch{
  font-weight: 500;
  margin-top: 12px;
  font-size: 0.9rem !important;
  backdrop-filter: blur(16px);
  color: #fff;
  border:none;
  background-color: #212728;
  padding: 10px 16px;
  transition: border-color .2s;
  transition: box-shadow .2s;
}
@media screen and (max-width: 767px) {
  .btn-launch{
    margin-top: 0px !important;

  }

}
.btn-launch:hover{
  background-color: #212728;
  color: #fff;
  border: transparent;
  box-shadow: inset 0 0 2px 1px #7d60ff, 0 0 2px 1px #7d60ff;

}
.btn-launch:active:focus {
  background-color: #212728;
  border: none;
  color: #fff;
  box-shadow: inset 0 0 2px 1px #7d60ff, 0 0 5px 1px #7d60ff;

}
.mini-card:hover{
    box-shadow: inset 0 0 2px 1px #7d60ff, 0 20px 25px -5px rgba(0, 0, 0, .8), 0 10px 10px -5px rgba(0, 0, 0, .9);
}
/*** END DASH ***/


/** ACCORDION **/
.black-accordion {
  background-color: #2c3034;
  border: none !important;
}

.black-accordion-head {
  background-color: #212529;
  color: white;
  border-bottom: .5px solid #373b3e !important;
  box-shadow: none !important;
  padding: 20px;
}

.accordion-button::after,
.accordion-button:not(.collapsed)::after {
  filter: brightness(0) invert(1);
}

.accordion-button:not(.collapsed) {
  background-color: #7d60ff;
  color: white;
  -webkit-transition: background-color 500ms linear;
  -ms-transition: background-color 500ms linear;
  transition: background-color 500ms linear;
}

.accordion-button.collapsed:hover {
  background-color: #2c3034;
  -webkit-transition: background-color 500ms linear;
  -ms-transition: background-color 500ms linear;
  transition: background-color 500ms linear;
}

.last-accord{
  border-radius: 0px 0px 24px 24px !important;
}
.last-accord:not(.collapsed){
  border-radius: 0px !important;
  transition: border-radius 500ms ease;
}


/** END ACCORDION **/

.clickable-row {
  cursor: pointer;
}

.bg-purple {*
  --bs-bg-opacity: 1;
  background-color: #7d60ff !important;
}

.m {
  color: #21d4fd;
}
.v {
  color: #e44c77;
}
.user_menu_img {
  background-image: url(../uploads/u_def.png);
  background-size: cover;
  height: 100px;
  width: 100px;
  transition: background 1s linear;
  background-repeat: no-repeat;
  background-position: center center;
}


.suggestion {
  padding: 8px;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
   transition: background-color 0.3s ease, transform 0.3s ease;
    overflow-x: hidden;
}
.suggestion:hover {
  background-color: hsl(0, 0%, 22%);
   transform: scale(0.99);
}
textarea[disabled] {
  background-color: #e9ecef;
  color: #6c757d;
}