@charset "UTF-8";
:root {
  --green-100:rgba(177, 212, 212, 1);
  --fontfamilyPfamily: ZillaSlab_regular;
  --fontfamilySfamily:HostGrotesk_regular;
}

@font-face {
  font-family: HostGrotesk_regular;
  src: url("../../../../fonts/host_grotesk/font-files/HostGrotesk-Regular.ttf");
}
@font-face {
  font-family: ZillaSlab_regular;
  src: url("../../../../fonts/zilla_slab/font-files/ZillaSlab-Regular.ttf");
}
:root {
  --green-100:rgba(177, 212, 212, 1);
  --fontfamilyPfamily: ZillaSlab_regular;
  --fontfamilySfamily:HostGrotesk_regular;
}

@font-face {
  font-family: HostGrotesk_regular;
  src: url("../../../../fonts/host_grotesk/font-files/HostGrotesk-Regular.ttf");
}
@font-face {
  font-family: ZillaSlab_regular;
  src: url("../../../../fonts/zilla_slab/font-files/ZillaSlab-Regular.ttf");
}
:root {
  --green-100:rgba(177, 212, 212, 1);
  --fontfamilyPfamily: ZillaSlab_regular;
  --fontfamilySfamily:HostGrotesk_regular;
}

@font-face {
  font-family: HostGrotesk_regular;
  src: url("../../../../fonts/host_grotesk/font-files/HostGrotesk-Regular.ttf");
}
@font-face {
  font-family: ZillaSlab_regular;
  src: url("../../../../fonts/zilla_slab/font-files/ZillaSlab-Regular.ttf");
}
:root {
  --green-100:rgba(177, 212, 212, 1);
  --fontfamilyPfamily: ZillaSlab_regular;
  --fontfamilySfamily:HostGrotesk_regular;
}

@font-face {
  font-family: HostGrotesk_regular;
  src: url("../../../../fonts/host_grotesk/font-files/HostGrotesk-Regular.ttf");
}
@font-face {
  font-family: ZillaSlab_regular;
  src: url("../../../../fonts/zilla_slab/font-files/ZillaSlab-Regular.ttf");
}
:root {
  --green-100:rgba(177, 212, 212, 1);
  --fontfamilyPfamily: ZillaSlab_regular;
  --fontfamilySfamily:HostGrotesk_regular;
}

@font-face {
  font-family: HostGrotesk_regular;
  src: url("../../../../fonts/host_grotesk/font-files/HostGrotesk-Regular.ttf");
}
@font-face {
  font-family: ZillaSlab_regular;
  src: url("../../../../fonts/zilla_slab/font-files/ZillaSlab-Regular.ttf");
}
:root {
  --green-100:rgba(177, 212, 212, 1);
  --fontfamilyPfamily: ZillaSlab_regular;
  --fontfamilySfamily:HostGrotesk_regular;
}

@font-face {
  font-family: HostGrotesk_regular;
  src: url("../../../../fonts/host_grotesk/font-files/HostGrotesk-Regular.ttf");
}
@font-face {
  font-family: ZillaSlab_regular;
  src: url("../../../../fonts/zilla_slab/font-files/ZillaSlab-Regular.ttf");
}
:root {
  --green-100:rgba(177, 212, 212, 1);
  --fontfamilyPfamily: ZillaSlab_regular;
  --fontfamilySfamily:HostGrotesk_regular;
}

@font-face {
  font-family: HostGrotesk_regular;
  src: url("../../../../fonts/host_grotesk/font-files/HostGrotesk-Regular.ttf");
}
@font-face {
  font-family: ZillaSlab_regular;
  src: url("../../../../fonts/zilla_slab/font-files/ZillaSlab-Regular.ttf");
}
.d-none {
  display: none;
}

.host_grotesk {
  font-family: "Host Grotesk";
}

.svg-kagoo {
  position: absolute;
  height: 317.6907339766px;
  transform: rotate(2.78deg);
  opacity: 1;
  right: -3%;
  bottom: 0px;
}

@media (min-width: 1400px) {
  .content-form {
    max-width: 1320px;
    margin: 0 auto;
  }
}
.ciece-svg {
  position: absolute;
  left: -5%;
  top: 135px;
  width: 15rem;
  height: 15rem;
}

body header, body footer {
  display: none;
}

.overlay-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  z-index: 5;
  border-radius: 0px 0px 32px 32px;
}

.content-form {
  height: 120vh;
  width: 100%;
  background-color: #027373;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#kagoo-app {
  overflow-y: hidden;
}

.form-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 74.84375%;
  margin: 100px auto;
  margin-bottom: 115px;
}

.form {
  width: 100%;
}

.form-part {
  position: relative;
  top: 0px;
  left: 3.75782881%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 52px;
  z-index: 11;
  width: 34.9686848%;
}

.language-select {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 16px;
}

.form-head-details {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 12px;
}

.small-title .H3-M {
  font-family: "HostGrotesk_regular";
  font-size: 14px;
  line-height: 100%;
  font-weight: 500 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  color: #15171E;
}

.small-title {
  font-family: "HostGrotesk_regular";
  font-size: 14px;
  line-height: 100%;
  font-weight: 400 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  color: #15171E;
}

.big-title {
  font-family: "ZillaSlab_regular";
  font-size: 32px;
  line-height: 100%;
  font-weight: 600 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  color: #026969;
}

#form-log {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 32px;
  width: 100%;
}

.form-head {
  width: 66.8656716%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 24px;
}

.zilla_slab {
  font-family: "Zilla Slab";
}

.raduis-c16 {
  border-radius: 1rem;
}

.bg-white {
  background-color: white;
}

.bg-green-500 {
  background-color: #027373;
}

.image-part {
  width: 55.014384%;
  height: 560px;
  position: relative;
  right: 0.52192067%;
  top: 0;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 32px 12px 12px 32px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.meduim-style-h3 {
  font-weight: 400;
  font-size: 14px;
  line-height: 18.4px;
}

.text-white {
  color: white;
}

.Bk300 {
  color: rgb(46, 45, 56);
}

.Bk100 {
  color: #838488;
}

.green-600 {
  color: #026969;
}

.green-500 {
  color: #027373;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.title {
  font-weight: 600;
  font-size: 32px;
  line-height: 22px;
}

.mb-24 {
  margin-bottom: 24px;
}

.mb-12 {
  margin-bottom: 12px;
}

.m-0 {
  margin: 0px;
}

.mb-52 {
  margin-bottom: 52px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-32 {
  margin-bottom: 32px;
}

.mt-0 {
  margin-top: 0px !important;
}

.h-40 {
  height: 40px;
}

.h-28 {
  height: 28px;
}

.m-row {
  /* margin: 6.8rem !important; */
  position: relative;
  z-index: 11;
  height: 567.5px;
  /* margin-top: 3.7rem; */
}

.el {
  /* width: 958px; */
  /* height: 12vh;
  margin-top: 45px; */
}

.pr-0 {
  padding-right: 0;
}

.mr-0 {
  margin: 0.31rem;
}

.d-flex {
  display: flex;
}

.w-50 {
  width: 50%;
}

input {
  background-color: #FBFBFD;
  padding: 1rem 0.75rem;
  color: #5E5E5E !important;
  border: 1px solid #DEDEE2;
  font-size: 14px;
}

input:-webkit-autofill {
  background-color: #FBFBFD !important;
  color: #5E5E5E !important;
}

input:focus-visible {
  background-color: #FBFBFD;
  padding: 1rem 0.75rem;
  outline: unset !important;
  border: 1px #027373 solid !important;
  color: #5E5E5E;
}

input::-moz-placeholder {
  color: #D0D0D4;
  padding: 1rem 0.75rem;
  font-family: "Host Grotesk";
}

input::placeholder {
  color: #D0D0D4;
  padding: 1rem 0.75rem;
  font-family: "Host Grotesk";
}

input:hover {
  border: 1px #8BBFBF solid;
}

input:active {
  color: #5E5E5E;
}

.has-error input {
  background-color: #FFF4F4;
  padding: 1rem 0.75rem;
  border: 1px #F93F2E solid !important;
  color: #5E5E5E !important;
  font-size: 14px;
}

.text-error {
  color: #F93F2E;
  font-size: 12px;
  font-family: "Host Grotesk";
  font-weight: 400;
}

.w-100 {
  width: 100%;
}

.raduis-c8 {
  border-radius: 0.5rem;
}

.H4-minimum {
  font-weight: 400;
  line-height: 15px;
  font-size: 12px;
  margin: 0;
}

.align-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.form-group {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 8px;
  height: -moz-fit-content;
  height: fit-content;
  width: 100%;
}

.form-group input {
  width: 100%;
}

.icon-eyes {
  width: 23px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  right: 16px;
  top: 16px;
}

.icon-eyes svg {
  color: #838488;
}

.bottom-border {
  border: 1px solid #f25f29;
  margin: 0;
  width: 100%;
}

.text-end {
  text-align: end;
}

.gap-6 {
  gap: 6px;
}

.gap-16 {
  gap: 1rem;
}

.btn-login {
  padding: 0.75rem 1rem;
  font-size: 14px;
}

.btn-login:hover {
  font-size: 14px;
  color: white;
  background-color: #358F8F;
}

.btn-login:active:focus, .btn-login:focus {
  font-size: 14px;
  color: white;
  background-color: #026969;
  outline-offset: unset;
  outline: unset;
}

.btn-langue {
  padding: 8px 12px;
  border-radius: 5px;
  background-color: #FFF7F4;
  color: #F25F29;
  border-color: transparent;
}

.btn-langue:hover {
  background-color: rgb(254, 239, 234);
}

.btn-langue:active:focus {
  outline: unset !important;
  background-color: rgb(251, 205, 189);
}

.bloc-remember:hover .checkmark {
  border: 1px rgb(162, 163, 168) solid !important;
}

.full-width-image {
  width: 100%;
  /* height: 100%; */
  height: 560px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 3.12rem 0.75rem 0.75rem 3.12rem;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 3.12rem 0.75rem 0.75rem 3.12rem;
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
  pointer-events: none;
}

.miroir {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}

.position-relative {
  position: relative;
}

.image-backdrop {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 32px 12px 12px 32px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}

.card-text {
  position: absolute;
  top: 60px;
  /* filter: blur(2px); */
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  border-radius: 0 1rem 1rem 0;
  background: rgba(28, 55, 35, 0.09);
  box-shadow: 0px 0px 56px rgba(28, 55, 35, 0.09);
  padding: 48px 24px 36px 24px;
  width: 79.6963947%;
  height: 196px;
}

.detail {
  /* width: 75%; */
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 24px;
}

.detail-title {
  color: #FFFFFF;
  font-family: "ZillaSlab_regular";
  font-size: 20px;
  line-height: 100%;
  font-weight: 600 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  width: 62.8571429%;
}

.detail-desc {
  color: #FFFFFF;
  font-family: "HostGrotesk_regular";
  font-size: 12px;
  line-height: 140%;
  font-weight: 400 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  width: 65.5714286%;
}

.copyright {
  position: absolute;
  bottom: 30px;
  left: 23.5px;
}

.copyright .copyright-text {
  font-family: "HostGrotesk_regular";
  font-size: 12px;
  line-height: 140%;
  font-weight: 400 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  color: #FFFFFF;
}

.small-logo {
  position: absolute;
  bottom: 24.58px;
  right: 32.09px;
}

.small-logo img {
  width: 33.54px;
  height: 32.42px;
}

.eyes_password {
  position: absolute;
  right: 12px;
  top: 14px;
}

.checkbox-type {
  height: 20px;
  width: 20px;
  border: 1px solid rgb(208, 208, 212);
  border-radius: 4px;
  -moz-appearance: none;
       appearance: none; /* Supprime le style par défaut du navigateur */
  -webkit-appearance: none; /* Pour les navigateurs Webkit */
  background-color: #fff;
  opacity: 0;
  /* cursor: pointer; */
  z-index: 1111;
  padding: 0;
  margin: 0;
}

.text-part {
  display: flex;
  justify-content: end;
}

.button-container button {
  /*  
      example de valeur de color lors de son utilisation :
      $colors: (
          default: #007bff,
          hover: #0056b3,
          focus: #80bdff,
          disabled: #c0c0c0
      );
  */
  gap: 8px;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  min-width: -moz-fit-content;
  min-width: fit-content;
  height: 2.25rem;
  width: -moz-fit-content;
  width: fit-content;
  font-family: "HostGrotesk_regular";
  font-size: 14px;
  line-height: 100%;
  font-weight: 500 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  border-radius: 5px;
  text-decoration: none;
  background-color: #027373;
  border: none;
  color: #FFFFFF;
  text-decoration: none;
  width: 100%;
  justify-content: center;
  text-align: center;
}
.button-container button:hover {
  color: #FFFFFF;
  background-color: #358F8F;
  text-decoration: none;
}
.button-container button:focus, .button-container button:focus-within {
  background-color: #026969;
  color: #FFFFFF;
  box-shadow: none !important;
  outline: none;
}
.button-container button:disabled, .button-container button:disabled:hover {
  background-color: #F4F4F7;
  border: 1.5px solid #F4F4F7;
  color: #C9C9CE !important;
  cursor: not-allowed;
}

.button-container {
  width: 100%;
}

.checkbox-type:checked {
  background-color: #fff;
}

.checkmark {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 1px solid rgb(208, 208, 212);
  border-radius: 4px;
}

.bloc-remember:hover .checkbox-type:checked + .checkmark {
  background-color: rgb(2, 115, 115);
  border: 1px rgb(2, 115, 115) solid !important;
}

.checkbox-type:checked + .checkmark {
  background-color: rgb(85, 161, 161);
  border: 1px rgb(85, 161, 161) solid !important;
}

.checkbox-type:checked + .checkmark::after {
  content: "✔";
  position: absolute;
  width: 6px;
  right: 6px;
  font-size: 15px;
  color: transparent;
  top: 2px;
  height: 10px;
  border: 1px solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.forget_pass {
  text-align: end;
  text-decoration: none;
}

.forget_pass:hover, .forget_pass:active {
  text-decoration: unset;
  color: rgb(2, 115, 115);
  text-decoration: underline;
}

.forget_pass:focus {
  text-decoration: unset;
  color: rgb(1, 82, 82);
  text-decoration: underline;
}

.card-left {
  padding: 44px 55px 74px 36px;
  height: 100%;
  /* min-width: 447px; */
}

body {
  background-color: #027373 !important;
}

.remove-flex {
  position: relative;
  top: 4%;
}

.bloc-remember {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dropdown-menu {
  box-shadow: 0px 0px 10px 0px rgba(88, 88, 88, 0.1294117647);
  background-color: #FFFFFF;
  position: absolute;
  top: calc(100% + 8px);
  border-radius: 0.25rem;
  max-height: 32px;
  width: 96px;
  display: none;
}

.form-group .js-error {
  color: #F93F2E; /* rouge d’erreur */
  font-family: "HostGrotesk_regular";
  font-size: 12px;
  line-height: 140%;
  font-weight: 400 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  display: block;
}

.bloc-remember > * {
  cursor: pointer;
}

.dropdown-menu.show {
  display: block;
}

.dropdown button {
  cursor: pointer;
}

.dropdown-menu a {
  /* padding: 8px 8px; */
  font-family: "Host Grotesk";
  font-size: 14px;
  font-weight: 400;
  color: rgb(46, 45, 56);
  display: block;
  /* height: 24px; */
  /* text-align: center; */
}

.dropdown-menu:hover {
  background-color: rgb(251, 251, 253);
}

.dropdown-menu:focus:active {
  background-color: rgb(247, 247, 249);
}

.dropdown-menu a:hover {
  text-decoration: none;
  /* background-color: rgba(2, 115, 115, 0.05); */
}

.open > .dropdown-menu {
  /* display: grid; */
  width: 101.09px;
  /* height: 32px; */
  border: none;
  box-shadow: 0px 0px 10px 0px rgba(88, 88, 88, 0.1294117647);
}

#dropdownMenuButton {
  width: 101.09px;
}

.img-ellipse {
  position: absolute;
  left: -22rem;
  top: 138px;
  width: 15rem;
  height: 15rem;
}

.img-kagooK {
  position: absolute;
  width: 292.9px;
  height: 321.94px;
  bottom: -63.92px;
  left: 84rem;
  transform: rotate(17deg);
}

.img-logo {
  width: 76px;
  height: 20px;
  margin-top: 0px;
  margin-bottom: 4px;
}

.btn-small-orange-25-terciary-2 {
  /*  
      example de valeur de color lors de son utilisation :
      $colors: (
          default: #007bff,
          hover: #0056b3,
          focus: #80bdff,
          disabled: #c0c0c0
      );
  */
  gap: 8px;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  min-width: 60px;
  height: 28px;
  width: -moz-fit-content;
  width: fit-content;
  font-family: "HostGrotesk_regular";
  font-size: 12px;
  line-height: 100%;
  font-weight: 500 !important;
  letter-spacing: 0;
  vertical-align: middle;
  margin: 0px !important;
  border-radius: 5px;
  height: 28px;
  text-decoration: none;
  background-color: #FFF7F4;
  border: none;
  color: #f25f29;
  color: #f25f29;
  border: none;
}
.btn-small-orange-25-terciary-2:hover {
  color: #f25f29;
  background-color: #FEF2EE;
  text-decoration: none;
}
.btn-small-orange-25-terciary-2:focus, .btn-small-orange-25-terciary-2:focus-within {
  background-color: rgba(242, 95, 41, 0.15);
  color: #f25f29;
  box-shadow: none !important;
  outline: none;
}
.btn-small-orange-25-terciary-2:disabled, .btn-small-orange-25-terciary-2:disabled:hover {
  background-color: #F4F4F7;
  border: 1.5px solid #F4F4F7;
  color: #C9C9CE !important;
  cursor: not-allowed;
}

.other-lang {
  position: relative;
  left: 3px;
}

.w-96 {
  width: 96px;
}

@media (max-width: 1279px) {
  .content-form .image-part {
    display: none;
  }
  .content-form .form-part {
    width: 92.4843424%;
  }
}
@media (max-width: 786px) {
  .content-form {
    background-color: white !important;
    height: 100vh !important;
  }
  .content-form .form-container {
    width: 100%;
  }
  .content-form .form-container .form-part {
    left: 16px;
    right: 16px;
    width: calc(100% - 32px) !important;
  }
  body .ciece-svg, body .overlay-content, body .svg-kagoo {
    display: none;
  }
  .card-left {
    padding: unset !important;
  }
  .eyes_password {
    right: 20px;
    top: 20px;
  }
  .miroir, .img-ellipse, .img-kagooK {
    display: none;
  }
  .m-row {
    margin: unset !important;
    height: unset;
  }
  .bg-img {
    display: none;
  }
  #container {
    display: block;
  }
  body {
    background-color: white !important;
  }
  #appkagoo {
    background-color: transparent !important;
  }
  html {
    font-size: unset;
  }
  .remove-flex {
    display: unset !important;
    position: relative;
    top: 17%;
  }
}
@media (max-width: 344px) {
  .remove-flex-align {
    display: unset !important;
    padding: 0px !important;
  }
  .text-end {
    text-align: unset !important;
    padding: 0px !important;
    margin-bottom: 52px !important;
  }
  .pm-0 {
    padding: 0px !important;
  }
  .w-50 {
    width: unset !important;
  }
}
@media (min-width: 787px) and (max-width: 991px) {
  .miroir, .img-ellipse, .img-kagooK {
    display: none;
  }
  .remove-flex {
    display: unset !important;
    position: relative;
    top: 17%;
  }
  .bg-img {
    display: none;
  }
  .m-row {
    /* height: 57rem; */
    /* margin: 5rem; */
  }
}
@media (min-width: 1200px) {
  .container {
    width: 970px !important;
  }
}
.icon_log {
  filter: invert(50%) sepia(15%) saturate(200%) hue-rotate(180deg) brightness(90%) contrast(85%);
  width: 17px;
  height: 14px;
}

.p-4 {
  padding: 4px;
}/*# sourceMappingURL=login.css.map */