@font-face {
    font-family: "Neuzeit-black";
    src: url("../fonts/Neuzeit-black.otf");
  }
  
  @font-face {
    font-family: "Neuzeit-regular";
    src: url("../fonts/Neuzeit-regular.otf");
  }
  
  @font-face {
    font-family: "New-hero";
    src: url("../fonts/New-hero.otf");
  }


  h1,h2,h3,h4,h5{
    font-family: 'Neuzeit-regular', sans-serif;
  }
  

  *{
    font-family: 'New-hero', sans-serif;
  }
  
  .input-cp{
    text-align: center;
  }


  .margin-desktop{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
  }

  body{
    overflow-x: hidden;
  }

 
  #redirection{
    font-family: "New-hero";
    font-size: 14px;
}

.step-two{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
}

.input-steptwo{
  position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    flex-direction: row;
    align-content: center;
    justify-content: start;
}

.input-steptree{
  position: relative;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: center;
    justify-content: start;
}
  
.label-marge{
  margin-top: 20px;
}
  .text-primary {
    color: #e4146b !important;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 50px;
    text-transform: uppercase;
    margin-top: 70px;
  }

  .text-primary-smaller {
    color: #e4146b !important;
    font-size: 16px;
    font-weight: bold;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    font-family: Neuzeit-regular;
  }
  
  label,
  span,a {
    font-size: 14px;
  }
button {
  text-transform: uppercase;
}

.btn-primary {
  background-color: #001d2d !important;
  border-color: #001d2d !important;
}

.btn-light{
    color:#001d2d;
    background-color: white;
    border-color: #e4146b;
}




/* sidebar */
.form-sidebar .sidebar .step {
  cursor: pointer;
}

.form-sidebar{
  min-height:100vh;
  height: 100%;
  border-radius: 0 30px 30px 0 !important;

}

p,label{
    font-size: 14px;
    font-weight: bold;
}

.circle {
    position:relative;
    width: 20px;
    height: 20px;
    border: 2px solid var(--text-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background-color: #d1d4ff;
}

.step.active .circle {
    background-color: #BFF574; /* Change background color when step is active */
  }


  .step.active .circle::after {
    content: '';
    width:30px;
    height:30px;
    position: absolute;
  
    border-radius: 50%;
    border: 2px solid #BFF574;
    z-index: 3;
}

.step-content{
  flex-grow: 1;
}

.step-content a {
    color: var(--text-white);
    font-size: 14px;
    display: block;
    margin-left: 10px; 
    padding-top: 3px;
    text-decoration: none;
}

.bar {
  display: block;
  border: 1px solid #d1d4ff;
  width: 3px;
  margin: 10px 8px;
  height: 55px;
  background-color: #d1d4ff;
}

  .logo {
    display: block;
    text-align: center;
    width: 130px;
    margin: 0 auto;
}



.bg-primary {
  background-color: #e4146b !important;
}

/* index */
.bloc-choix{
    width:220px;
    height:200px;
    border:10px solid #001d2d;
    border-radius: 30px;
    margin:10px;
    text-align: center;
    background-color: #e4146b;
    color:white;
    
}


/* .bloc-choix:hover{
    width:220px;
    height:200px;
    border:10px solid #001d2d;
    border-radius: 30px;
    margin:10px;
    text-align: center;
    background-color: #e4146b;
    color:white;
    
} */


.real-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.radio-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  padding: 0;
  width: 100%;
  cursor: pointer;
  flex-direction: row;
  height:100%;
}

.radio-box input:checked + .fake-radio {
  background-color: #001d2d;
  border-color: transparent;
  color: white;
}

.fake-radio {
  display: flex;
  padding: 10px 20px;
  font-size: 12px;
  border-radius: 8px;
  font-weight: 550;
  border: 2px solid #001d2d ;
  color: black;
  cursor: pointer;
  width:100%;
  text-align: center;
  height: 75px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.btnstep{
  display: flex;
  flex-direction: row;
}

.btn-cta{
    text-transform: math-auto !important;
}

.btn-custom-back {
  padding: 10px 25px;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  color: #001d2d;
  border-radius: 50px;
  text-transform: uppercase;
  font-weight: bold;
}


.btn-custom-back .fa-arrow-left {
  margin-right: 10px;
}

.bloc-choix-image{
    height:100px;
}

.bloc-choix-image img{
    padding-top: 30px;
    width:50px;
}

.bloc-choix-text{
    font-size:16px;
}

.invisible{
    height:0
}

.btn-form {
    padding: 20px !important;
    border: 1px solid #e4146b !important;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn-form-twolines {
    padding: 10px !important;
  }

  .btn-form:hover {
    color: #e4146b !important;
    background-color: #001d2d !important;
    border-color: #001d2d !important;
  }

  .btn-form-active {
    color: #e4146b !important;
    background-color: #001d2d !important;
    border-color: #001d2d !important;
  }

  .form-input {
    padding: 20px;
    border: 2px solid #001d2d  !important;
    border-radius: 8px;
    height: 75px;
    outline: none;
    /* border-radius: 10px 0 0 10px; */
}

  .form-input2 {
    padding: 20px;
    border: 2px solid #001d2d  !important;
    border-radius: 8px;
    height: 75px;
    outline: none;
    border-radius: 10px 0 0 10px;
    box-sizing: border-box;

}

.input-group-text-primary {
  font-family: Arial, sans-serif; /* S'assure que la police est sans-serif */
  font-weight: bold;
  text-align: center;
}


@media (max-width: 1024px) {
  .input-steptwo {
      flex-direction: column; /* Les champs se réarrangent verticalement */
      align-items: stretch;  /* Assure que les éléments prennent toute la largeur disponible */
  }
  
  .input-group-text-primary {
      margin-left: 0;
      width: 100%;
  }
}

  label {
  }

 .custom-margin{
  margin-top: 30px;
 }

  .form-control {
    width: inherit !important;
  }


  .modal-header {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    border-bottom: none;
    padding-bottom: 0;
}

.modal-footer {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap)* .5);
  background-color: var(--bs-modal-footer-bg);
  border-top: none;

}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #dc3545;
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #bb2d3b;
  --bs-btn-hover-border-color: #b02a37;
  --bs-btn-focus-shadow-rgb: 225, 83, 97;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b02a37;
  --bs-btn-active-border-color: #a52834;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #dc3545;
  --bs-btn-disabled-border-color: #dc3545;
}

.text-font-weight{
  font-weight: 200 !important;
}

.redirection-link{
  text-decoration: underline;
  font-weight: 400;
  font-family: "new-hero";
}
  .form-input[readonly] {
    background-color: #ffffff;
    border: none !important;
    border: 2px solid #001d2d  !important;
  }


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

.input-special-number{
    text-align: end;
}

.input-group-text {
  color: white;
  background-color: #001d2d ;
  border-color: #001d2d ;
  width: 124px !important;
  display: flex;
  justify-content: center;
}

  .computer-class{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    margin-bottom: 30px;
  }

  
  .qty-btn {
    font-size: 30px;
    width: 75px;
    height: 75px;
    padding-top: 12px;

  }

  .qty-add{
    margin-right:10px
  }

  .btn-secondary{
    background-color: #001d2d;
    border-color: #001d2d;
    color:#e4146b
  }


  .numberstyle {
    flex-grow: 1; /* Take up remaining space */
    margin: 0 10px; /* Adjust margin as needed */
    text-align: center;
    width: auto; /* Set width to auto */
    min-width: 0; /* Allow shrinking beyond its content size */
}

  .calendar-icon {
    position: absolute;
    right: 25px;
    top: 25px;
  }

  .input-group2 {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
  }

  .form-radio{
    padding:12px;
    border:1px solid #001d2d ;
    margin-right: 10px;
  }

  .form-check-input {
    padding: 10px;
    border: 2px solid #001d2d ;
  }
  
  .fa-circle-plus{
    cursor: pointer;
  }



  .active-bar{
    border : 1px solid #BFF574;
    background-color: #BFF574;
  }

  


  /* select 2 style */

  .select2-container{
    width:100%!important;
  }

  .select2-selection{
    height:75px!important
  }



   /* Custom styles to ensure Select2 dropdown retains the form-input class styling */
   .select2-container--default .select2-selection--single {
    padding: 10px; /* Adjust to match your form input padding */
    border: 1px solid #e4146b !important; /* Adjust to match your form input border */
    border-radius: 8px; /* Adjust to match your form input border-radius */
    height: 75px; /* Adjust to match your form input height */
    outline: none;
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: normal; /* Adjust to match your form input line-height */
    padding: 0; /* Remove padding to align text vertically */
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 20px!important; /* Adjust height as needed */
    width: 20px!important; /* Adjust width as needed */
    position: absolute;
    top: 50%!important;
    right: 10px; /* Adjust if necessary */
    transform: translateY(-50%);
}

.select2-container--default .select2-selection--single {
  border-radius: 8px!important;
}

.select2-dropdown {
    border: 1px solid #e4146b !important; /* Adjust to match your form input border */
    border-radius: 8px; /* Adjust to match your form input border-radius */
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 50px!important;
}

.error-input {
  border: 2px solid red !important;
  background-color: #ffe6e6; /* Optionnel : couleur de fond légère pour indiquer l'erreur */
}

.error-message p {
  font-size: 0.9em;
  color: red;
  margin-top: 4px;
}



.input-group-text-error{
  background-color: red!important;
  border-color: red!important;
}

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



.label-conaissances{
  padding-top:0px;
}

/* .main-container{
  margin-bottom: 150px
} */

.btn-secondary:hover{
  background-color: #001d2d;
  color:#e4146b;
  border-color:#001d2d
}

.form-check-label{
  padding-top:0px;
}

.btn-success{
  background-color: #BFF574;
  color:#e4146b;
  border: none;
}

.btn-success:hover {
  color: #e4146b;
  background-color: #BFF574;
  border-color: #BFF574;
}

.btnNext:hover .fa-solid.fa-arrow-right {
  color: #e4146b;
  padding-right: 21px;
}
.btnForm{
  position: relative;
  margin-top: 100px !important;
  bottom: 50px;
  width: 100%;
  left: 0;
  right: 0;
}

.btnForm .btn {
border-radius: 40px !important;
padding-top: 13px !important;
padding-bottom: 10px !important;
text-transform: uppercase;
}




.btnPrev {
  width: 200px;
  margin-right: 20px;
  font-size: 16px !important;
  color: #001d2d;
  padding-right:36px!important;
  border-color: #e4146b !important;
}

.btnNext {
  width:200px;
  border-radius: 40px !important;
  padding: 15px !important;
  font-size: 16px !important;
  margin-left: 25px;
  text-align: start;
  padding-left:36px!important;
}

.btnEnd {
  width: 296px;
  background-color: #bff574 !important;
  border-color: #bff574 !important;
  color: #e4146b;
  padding-left: 36px !important;
  text-align: left;
  font-size: 16px !important;
}

.btnNext:hover .fa-solid.fa-arrow-right {
  color: #BFF574; 
  padding-right:21px;
  
}


.btnPrev:hover .fa-arrow-left {
  color: #e4146b;
  padding-left: 21px;
}

.btnPrev:hover .btnText {
  color: #e4146b;
  padding-left: 15px;
}

.btnEnd:hover {
  color: #e4146b; 
  
}

.btnPrev:hover {
  color: #001d2d; 
  background-color: white;
  border-color: #e4146b;
  
}

.fa-arrow-left{
  float:left;
  padding-top:3px;
  padding-left:36px;
}

.fa-arrow-right{
  float:right;
  padding-top:3px;
  padding-right:36px;
}

/* .error-container{
  height:0
} */

.border-danger {
  border: 1px solid red;
}

.error-message {
  font-size: 0.9em;
  color: red;
}

.relative-bottom {
  position: relative !important;
  margin-top: 100px !important;
  right: 0px;
  bottom: 50px;
  -webkit-transform: translateZ(0);
}

#resultsList {
  background-color: white;
  border: 1px solid #e4146b;
  border-radius: 4px;
  margin-top: 5px;
  margin-left: 10px;
  display: none;
  padding: 10px;
  overflow-y: auto;
}

#resultsList li {
  padding: 10px;
  cursor: pointer;
}
#resultsList li:hover {
  background-color: #f8f8f8;
}

.btn-modal {
  border-radius: 20px;
  font-size: 14px;
  width: 250px;
  padding: 10px;
  opacity: unset !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.btn-modal-one:hover{
  filter: brightness(0.8); /* Augmente la luminosité (éclaircir) */

}

.btn-modal-two:hover {
  filter: brightness(1.2); /* Augmente la luminosité (éclaircir) */
  /* Pour assombrir, utilise `brightness(0.8)` */
}


.close-modal {
  cursor: pointer !important;
  pointer-events: auto !important;
}


/* Hide the default Select2 arrow */
.select2-container .select2-selection__arrow b {
  display: none; /* Hide the default arrow */
}

/* Add FontAwesome chevron-down icon */
.select2-container .select2-selection__arrow:after {
  content: '\f078'; /* FontAwesome chevron-down unicode */
  font-family: 'Font Awesome 6 Free'; /* Specify the FontAwesome family */
  font-weight: 900; /* Ensure it's using the solid style */
  font-size: 14px; /* Adjust icon size */
  color: #333; /* Customize color if needed */
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  pointer-events: none; /* Ensure the arrow doesn't interfere with clicking */
}


.list-ville {
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
  width: 80%;
  border: 1px solid #ddd;
  background: #fff;
  position: absolute;
  margin-top: 5px; /* Décalage sous le champ */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.list-ville ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-ville li {
  padding: 10px;
  cursor: pointer;
}

.list-ville li:hover {
  background-color: #f0f0f0;
}

.sidebar-width{
  width:70%;
}

.form-label{
  text-align: start;
  margin-bottom: -10px;
  height: 75px;
}

.container{
  position: relative;
}


.fixed-bottom{
 
    position:fixed!important;
  /* margin-top:100px!important; */
    right:50px!important;
    bottom: 50px!important;
  
}

.alert-danger {
    border-left: 5px solid #dc3545;
    background-color: #f8d7da;
    color: #721c24;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
}

.error-highlight {
    animation: pulse 1.5s;
    box-shadow: 0 0 15px rgba(220, 53, 69, 0.5);
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    70% {
        transform: scale(1.02);
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}