@font-face {
  font-family: Hind;
  src: url(../fonts/Hind-Regular.ttf), url(../fonts/Hind-Medium.ttf), url(../fonts/Hind-SemiBold.ttf), url(../fonts/Hind-Bold.ttf);
}
@font-face {
  font-family: League Spartan;
  src: url(../fonts/LeagueSpartan-Bold.otf);
}
html {
  scroll-behavior: smooth;
}

body {
  width: 100vw;
  height: 100vh;
  background-color: #0C0C0D;
  color: white;
  font-family: Hind;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body ::-webkit-scrollbar {
  display: none;
}
@media (min-width: 480px) {
  body {
    font-size: 1rem;
  }
}

main {
  scrollbar-width: none;
}

h2 {
  font-family: League Spartan;
  font-size: 1.6rem;
  text-align: center;
}
@media (min-width: 480px) {
  h2 {
    font-size: 2rem;
  }
}
@media (min-width: 1100px) {
  h2 {
    font-size: 2.8rem;
  }
}

h3 {
  font-family: League Spartan;
  font-size: 1.5rem;
}
@media (min-width: 1100px) {
  h3 {
    font-size: 2rem;
  }
}

h4 {
  font-size: 1.2rem;
  font-weight: 500;
}
@media (min-width: 1100px) {
  h4 {
    font-size: 1.8rem;
  }
}

h5 {
  font-family: League Spartan;
  font-size: 14px;
  margin-top: 1.5rem;
}
@media (min-width: 480px) {
  h5 {
    font-size: 1rem;
  }
}
h5.bigger {
  font-size: 2rem;
  text-align: center;
}

.h5-like {
  font-family: League Spartan;
  font-size: 1rem;
  margin-top: 1.5rem;
}

.scrollbarContainer .simplebar-scrollbar {
  margin: 1px;
}
.scrollbarContainer .simplebar-scrollbar::before {
  background-color: rgba(255, 255, 255, 0.5);
}

.topBar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 4rem;
  border-bottom: 1px solid #545455;
}
@media (min-width: 1100px) {
  .topBar {
    height: 6rem;
  }
}
.topBar a {
  display: flex;
}
.topBar a img {
  max-height: 3.5rem;
}
@media (min-width: 1100px) {
  .topBar a img {
    max-height: 5rem;
  }
}
.topBar .menu {
  position: absolute;
  left: 1rem;
  width: 2rem;
}
@media (min-width: 1100px) {
  .topBar .menu {
    display: none;
  }
}

section.session_confirm {
  display: none;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 0.3s;
  overflow: hidden;
}

section.session_confirm.displayed {
  display: flex;
}

section.session_confirm.opacity1 {
  opacity: 1;
}

section.session_confirm.opacity1 .confirm_bloc {
  top: 0;
}

.session_confirm .confirm_bloc {
  background-color: #31A8FF;
  color: white;
  width: 65vw;
  text-align: center;
  padding: 20px;
  border-radius: 10px;
  position: relative;
  top: 15vh;
  transition: top 0.3s;
}

.confirm_bloc p {
  margin-bottom: 20px;
}

.confirm_bloc button {
  background: transparent;
  border: 0;
  color: white;
  font-weight: bold;
  /* border-bottom: solid 3px white; */
  background: rgba(0, 0, 0, 0.3);
  padding: 5px 20px;
  font-family: "Hind";
  font-size: 1rem;
  margin: 0 10px;
  transition: background 0.3s;
  outline: 0;
  border-radius: 5px;
  /* padding-bottom: 4px; */
  /* padding: 0 0 4px; */
  /* border-color: rgba(0,0,0,.3); */
}

.confirm_bloc button:hover {
  background: rgba(0, 0, 0, 0.6);
}

.session_wait {
  display: flex;
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 10%;
  color: white;
  background-color: #070707;
  position: fixed;
  top: 0;
  left: 0;
  text-align: center;
  z-index: 1;
  font-weight: bold;
  transition: background-color 0.5s;
}

.session_wait.session_valid {
  background-color: #3CB043;
}

.session_wait h2 {
  font-size: 1.875rem;
  font-weight: bold;
  margin: 5vh 0 0;
}

.session_wait .fa-check-circle {
  font-size: 3.75rem;
  margin: 0;
  padding: 0;
  font-weight: bold;
}

.session_wait .cancel {
  font-size: 1rem;
  background: transparent;
  color: #e21617;
  text-decoration: none;
  border: 0;
  outline: 0;
  margin-top: 100px;
}

.session_wait .cancel i {
  font-size: 1rem;
  margin-right: 5px;
}

.session_wait .spinner {
  margin: 100px auto 0;
  width: 70px;
  text-align: center;
}

.session_wait .spinner > div {
  width: 18px;
  height: 18px;
  background-color: #fff;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.session_wait .spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.session_wait .spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
  }
}
@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
html {
  scroll-behavior: smooth;
}

body {
  overflow-y: auto;
}

nav {
  position: fixed;
  top: 0rem;
  padding: 2rem;
  display: flex;
  justify-content: center;
  left: 0;
  z-index: 999;
  background-color: #0C0C0D;
  width: 100%;
}
nav .homeLink {
  display: flex;
  gap: 1rem;
}
nav .homeLink img {
  width: 1rem;
  transform: translateY(-0.1rem);
  margin: 0 0.5rem;
}

header {
  padding: 4rem 2rem;
  position: relative;
  align-items: center;
  margin-top: 6rem;
  display: flex;
  flex-direction: column;
  align-content: center;
}
header:nth-of-type(1) {
  margin-top: 0;
}
@media (min-width: 480px) {
  header {
    padding: 6rem 6rem 4rem 6rem;
  }
}
@media (min-width: 1100px) {
  header {
    padding: 8rem;
  }
}
header h2 {
  margin-top: 2rem;
}
header .logo {
  height: 10rem;
}
@media (min-width: 1100px) {
  header .logo {
    height: 12rem;
  }
}
header a {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-weight: 700;
  padding: 0.6em 2em;
  border-radius: 1em;
  background-color: #FF3142;
  transition: 0.3s ease-in-out;
}
header a img {
  width: 1.2rem;
  transition: 0.3s ease-in-out;
}
@media (min-width: 1100px) {
  header a:hover {
    background-color: #F5C61F;
    color: #0C0C0D;
  }
  header a:hover img {
    filter: invert(1);
  }
}
@media (min-width: 1100px) {
  header a {
    margin-top: 2rem;
  }
}

main {
  padding: 2rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
}
@media (min-width: 480px) {
  main {
    padding: 2rem 6rem 4rem 6rem;
  }
}
@media (min-width: 1100px) {
  main {
    padding: 8rem;
  }
}
main .categorie {
  width: 100%;
}
main .categorie .header {
  position: relative;
}
main .categorie .header img {
  width: 100%;
  height: 16rem;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (min-width: 480px) {
  main .categorie .header img {
    height: 24rem;
    border-radius: 0.5rem;
  }
}
main .categorie .header .gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, rgba(12, 12, 13, 0.8));
}
main .categorie .header .text-content {
  position: absolute;
  inset: auto auto 1.5rem 1.5rem;
}
@media (min-width: 480px) {
  main .categorie .header .text-content {
    inset: auto auto 2rem 2rem;
  }
}
main .categorie .header .text-content * {
  text-align: left;
}
main .categorie .link {
  color: #31A8FF;
  margin: 0.5rem 0 0 1.5rem;
}
@media (min-width: 480px) {
  main .categorie .link {
    margin-left: 2rem;
  }
}
main .categorie .list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
  padding: 0 0.5rem;
}
@media (min-width: 480px) {
  main .categorie .list {
    padding: 0;
  }
}
main .categorie .list li {
  display: flex;
  align-items: center;
  padding-left: 1rem;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 0.5rem;
  overflow: hidden;
}
@media (min-width: 480px) {
  main .categorie .list li {
    padding-left: 2rem;
  }
}
main .categorie .list li .button {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 480px) {
  main .categorie .list li .button {
    width: 4rem;
    height: 4rem;
  }
}
main .categorie .list li .button:nth-of-type(1) {
  background-color: rgba(255, 255, 255, 0.05);
  margin-left: auto;
}
main .categorie .list li .button:nth-of-type(2) {
  background-color: rgba(255, 255, 255, 0.1);
}
main .categorie .list li .button img {
  height: 1rem;
}
@media (min-width: 480px) {
  main .categorie .list li .button img {
    height: 1.25rem;
  }
}

.video-container {
  position: fixed;
  inset: 0;
  z-index: 10;
  background-color: rgba(12, 12, 13, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease-in-out;
}
.video-container.hidden {
  opacity: 0;
  pointer-events: none;
}
.video-container.hidden .video {
  transform: translateY(100%);
}
.video-container .video {
  width: 80%;
  transition: transform 0.3s ease-out;
}
.video-container .close {
  position: absolute;
  inset: 2rem 2rem auto auto;
  width: 2rem;
  pointer-events: none;
}

.timer-container {
  position: fixed;
  inset: 0;
  z-index: 10;
  background-color: #0C0C0D;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease-out;
}
.timer-container.hidden {
  transform: translateY(100%);
}
.timer-container .objectif {
  font-size: 1rem;
  max-width: 80%;
  text-align: center;
}
@media (min-width: 480px) {
  .timer-container .objectif {
    font-size: 1.5rem;
  }
}
.timer-container .timer {
  font-size: 2rem;
}
@media (min-width: 480px) {
  .timer-container .timer {
    font-size: 3rem;
  }
}
.timer-container .progress-container {
  width: 24rem;
  max-width: 80%;
  height: 1rem;
  border-radius: 1rem;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.1);
}
.timer-container .progress-container .progress {
  width: 0;
  max-width: 100%;
  height: 100%;
  background-color: #31A8FF;
  transition: width 1s linear, background-color 1s 1s ease-in-out;
}
.timer-container .progress-container .progress.red {
  background-color: #FF3142;
}
.timer-container .close {
  position: absolute;
  inset: 2rem 2rem auto auto;
  width: 2rem;
}
.timer-container .button-container {
  position: absolute;
  bottom: 2rem;
  display: flex;
  gap: 1rem;
}
.timer-container .button-container button {
  padding: 1em 2em;
  border-radius: 0.5rem;
  background-color: #FF3142;
}
.timer-container .button-container .pause {
  background-color: rgba(255, 255, 255, 0.1);
}
.timer-container .button-container .pause,
.timer-container .button-container .done,
.timer-container .button-container .text-done,
.timer-container .button-container .text-failed {
  display: none;
}
.timer-container.started .start {
  display: none;
}
.timer-container.started .pause,
.timer-container.started .done {
  display: block;
}
.timer-container.done .text-done {
  display: block;
  font-size: 1.2rem;
  padding: 0 1rem;
  text-align: center;
}
@media (min-width: 480px) {
  .timer-container.done .text-done {
    font-size: 1.5rem;
  }
}
.timer-container.done .start,
.timer-container.done .pause,
.timer-container.done .done {
  display: none;
}/*# sourceMappingURL=videos.css.map */