/* cyrillic-ext */
/* @font-face {
  font-family: 'roboto';
  src: url(../fonts/Roboto/Roboto-Regular.ttf);
}

@
font-face {
  font-family: 'roboto';
  src: url(../fonts/Roboto/Roboto-Bold.ttf);
  font-weight: bold;
}

@font-face {

  font-family: 'roboto';
  src: url(../fonts/Roboto/Roboto-Italic.ttf);
  font-style: italic;
} */

* {
  font-family: 'cambria';
}

html {
  scroll-behavior: smooth;
}

body {
  font-size: 15px !important;
  height: 100%;
  background-color: #fff;
}

.btn-light {
  box-shadow: 3px 3px 5px 2px #cecdcd;
  margin-bottom: 10px;
  font-size: 0.9rem !important;
}

.bg-light:hover {
  color: white;
  background-color: #e39533;
}

.btn-success {
  box-shadow: 3px 3px 5px 2px #71f14a !important;
  margin-bottom: 10px;
  font-size: 0.9rem !important;
}

.btn-danger {
  box-shadow: 3px 3px 5px 2px #fa040b !important;
  margin-bottom: 10px;
  font-size: 0.9rem !important;
}

h4 {
  font-size: 1.05rem !important;
}

h5 {
  font-size: 0.95rem !important;
}
 
.header {
  box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);
}

.header .navbar-brand {
  color: #a55ba5;
}

.header .nav-item {
  padding-left: 15px;
  color: black;
}

.choice-zone {
  margin-top: 20px;

}

.box-wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  gap: 5px
}

.box-cycle {
  flex-basis: 255px !important;
  flex-shrink: 0;
  padding-bottom: 0
}

.box-document {
  padding-top: 5px;
  min-width: 255px !important;
  box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  margin-bottom: 5px;
  background-color: #fff;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.box-document h4{
  font-size: 1.1rem;
}

.box-document:hover {
  background-color: rgba(165, 91, 165, 0.3);
  border-color: #a55ba533;
}


.box-instructions {
  background-color: #fff;

}

.btn-sm-pos {
  min-width: 100px;
  max-width: 200px;
  height: 40px;
  color: #ffffff;
  background-color: #f59537;
  text-align: center !important;
  border-color: #f59537;
  box-shadow: 3px 3px 5px 2px #d0cfcf;
}

.box-instructions a[href="#procedure"]:hover {
  text-decoration: none;
  color: #10163e
}

.box-item .fa {
  font-size: 20px;
  color: #ff8800;
  margin-right: 12px;
  height: 100%;
}

.boxer {
  flex: 25%;
  background-color: white;
  border: 1px solid orange;
  padding-bottom: 5px;
  display: flex;
  flex-direction: row;

}

.box-item {

}

.img-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.sub-box-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 400px;
  padding: 0px 5px;
  font-size: 13px;
  text-align: justify;
  gap: 10px;
}

.num-step {
  flex-basis: 50px;
  flex-grow: 0;
  flex-shrink: 0;
  z-index: 100;
}

.img {
  flex-basis: 110px;
  flex-shrink: 0;
}

.step-text {
  flex-grow: 1;

}

.box-content {

}

.footer {
  margin-top: 15px;
  min-height: 200px;
  background-color: rgba(165, 91, 165, 1);
  background-image: linear-gradient( rgba(255, 255, 255, 1), #5e0baf, rgb(99, 28, 123));
  padding-top: 15px;
  bottom: 0;
  left: 0;
  color: white;
}

.footer .h3 {
  border-bottom: 2px solid #fff;
}

.footer .copyright {
  margin-top: 15px;
}

.footer ul {
  list-style: none;
  margin: 0;
  margin-top: 15px;
  padding: 0;

}



.bg-light {
  background-color: rgb(164, 93, 164) !important;
}

a.bg-light:hover,
a.bg-light:focus,
button.bg-light:hover,
button.bg-light:focus {
  background-color: #dae0e5 !important;
}

.navbar-light {
  background-image: linear-gradient(to left, rgb(99, 28, 123), #5e0baf, #5e0baf, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
  width: 100vw;
}


.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show>.nav-link {
  color: rgb(238, 124, 14);
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
  color: #211450;
}

.navbar-light .navbar-nav .nav-link {
  color: #ffffff;
}

.navbar-light .navbar-toggler {
  color: rgba(0,0,0,.5);
  border-color: rgba(255,255,255,.5);
}



.text-light {
  color: #ffffff !important;
}

.btn-site {
  color: #ffffff;
  background-color: #f59537;
  border-color: #f59537;
}

.btn-site:hover {
  color: #fff;
  background-color: #ffa854;
  border-color: #ffa854;
}

.btn-pdf {
  color: #ffffff;
  background-color: #f59537;
  text-align: center !important;
  border-color: #f59537;
}

.btn-pdf:hover {
  color: #fff;
  background-color: #254388;
  border-color: #254388;
}

.btn-pos {
  min-width: 250px;
  max-width: 40%;
  height: 100%;
  color: #ffffff;
  background-color: #f59537;
  text-align: center !important;
  border-color: #f59537;
  box-shadow: 3px 3px 5px 2px grey;

}



.btn-pos:hover {
  color: #fff;
  background-color: #254388;
  border-color: #254388;
}


.text-center {
  text-align: center !important;
  color: #362f36;
}


#animated_div {
  width: 70px;
  height: 47px;
  background: #92B901;
  color: #ffffff;
  position: relative;
  font-weight: bold;
  padding: 10px;
  animation: animated_div 5s 1;
  -moz-animation: animated_div 5s 1;
  -webkit-animation: animated_div 5s 1;
  -o-animation: animated_div 5s 1;
  border-radius: 5px;
  -webkit-border-radius: 5px;
}

@keyframes animated_div {
  0% {
    transform: rotate(0deg);
    left: 0px;
  }

  25% {
    transform: rotate(20deg);
    left: 0px;
  }

  50% {
    transform: rotate(0deg);
    left: 500px;
  }

  55% {
    transform: rotate(0deg);
    left: 500px;
  }

  70% {
    transform: rotate(0deg);
    left: 500px;
    background: #1ec7e6;
  }

  100% {
    transform: rotate(-360deg);
    left: 0px;
  }
}

@-webkit-keyframes animated_div {
  0% {
    -webkit-transform: rotate(0deg);
    left: 0px;
  }

  25% {
    -webkit-transform: rotate(20deg);
    left: 0px;
  }

  50% {
    -webkit-transform: rotate(0deg);
    left: 500px;
  }

  55% {
    -webkit-transform: rotate(0deg);
    left: 500px;
  }

  70% {
    -webkit-transform: rotate(0deg);
    left: 500px;
    background: #1ec7e6;
  }

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

@-moz-keyframes animated_div {
  0% {
    -moz-transform: rotate(0deg);
    left: 0px;
  }

  25% {
    -moz-transform: rotate(20deg);
    left: 0px;
  }

  50% {
    -moz-transform: rotate(0deg);
    left: 500px;
  }

  55% {
    -moz-transform: rotate(0deg);
    left: 500px;
  }

  70% {
    -moz-transform: rotate(0deg);
    left: 500px;
    background: #1ec7e6;
  }

  100% {
    -moz-transform: rotate(-360deg);
    left: 0px;
  }
}

@-o-keyframes animated_div {
  0% {
    transform: rotate(0deg);
    left: 0px;
  }

  25% {
    transform: rotate(20deg);
    left: 0px;
  }

  50% {
    transform: rotate(0deg);
    left: 500px;
  }

  55% {
    transform: rotate(0deg);
    left: 500px;
  }

  70% {
    transform: rotate(0deg);
    left: 500px;
    background: #1ec7e6;
  }

  100% {
    transform: rotate(-360deg);
    left: 0px;
  }
}

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.header_area {
  position: relative;
  width: 100%;
  z-index: 99;
  transition: background 0.4s, all 0.3s linear;
}

.container-instructions-item {
  background-color: #f1f0f1;
  display: flex;
  flex-direction: row
}

@media (max-width: 1100px) {
  .navbar-light .navbar-nav .nav-link{
  }

  .navbar-light .navbar-nav .btn-login{
    font-size: 16px
  }
}

@media (max-width: 1000px) {
  .container-instructions-item {
    flex-wrap: wrap;
  }

  .boxer {
    flex: 50%
  }

  .sub-box-item {
    height: 30%
  }

  #proc-arrow{
    display: none;
  }

  .img-container {
    flex-direction: row;
  }
}


@media screen and (max-width: 992px) {
  .welcome-zone h3 {
    font-size: 14px;
  }

}

@media (max-width: 991px) {
  .header_area {
    position: absolute;
  }
}

@media screen and (max-width: 780px) {

  .footer .h3 {
    font-size: 15px;
  }

  .footer li {
    font-size: 12px;
  }

  .box-wrapper {
    flex-direction: column;

  }

  .box-cycle {

    flex-direction: row;
    flex-shrink: 0;
    padding-bottom: 0;
    display: flex;
  }

  .box-document {
    min-width: 200px !important;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
  }
}

@media (max-width: 660px) {
  .box-cycle {
    flex-direction: column;
  }

  .box-document {
    padding-top: 5px;
    min-width: 200px !important;
    box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);
    border-radius: 5px;
    margin-bottom: 5px;
    background-color: #fff;
    font-size: 0.9rem;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    gap: 10px
  }
}

@media (max-width: 500px) {
  .boxer {
    flex: 100%
  }
}


.header_area .navbar_fixed .main_menu {
  position: fixed;
  width: 50%;
  top: -70px;
  left: 0;
  right: 0;
  background: #ffffff;
  -webkit-transform: translateY(70px);
  -moz-transform: translateY(70px);
  -ms-transform: translateY(70px);
  -o-transform: translateY(70px);
  transform: translateY(70px);
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1);
}

.header_area.navbar_fixed .main_menu .navbar .nav .nav-item .nav-link {
  line-height: 70px;
}

.welcome-zone {
  background-color: rgb(146, 102, 146);
  box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);
  margin-top: 80px;
  margin-bottom: 1.5rem;
  background-color: rgb(175, 137, 175);
  background-image: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1),  #5e0baf, #5e0baf, #5e0baf, rgba(255, 255, 255, 1),rgba(255, 255, 255, 1));
  border-radius: 0.6rem;
  height: auto;
  color: #fff;
  text-align: center;
  padding: 0.5rem 0.5rem;
  font-size: 1.1rem;
}

@media (min-width: 576px) {

}




.lien-bloc {
  background: -webkit-linear-gradient(90deg, #a55ba5 0%, #a55ba5 100%);
  background: -moz-linear-gradient(90deg, #a55ba5 0%, #a55ba5 100%);
  background: -ms-linear-gradient(90deg, #a55ba5 0%, #a55ba5 100%);
  background: -o-linear-gradient(90deg, #a55ba5 0%, #a55ba5 100%);
  background: linear-gradient(90deg, #a55ba5 0%, #a55ba5 100%);
}

.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 500px) {
  .container-fluid {
    padding-left: 5px!important;
    padding-right: 5px!important;
  }
}
/*.effet_box_boutton {
background: #f9f9f9;
padding: 40px 30px;
margin-bottom: 30px;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s; }
.effet_box_boutton img {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s; }
.effet_box_boutton h4 {
  margin-top: 20px;
  margin-bottom: 0;
  color: #000000;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s; }
  */

/*Survol bouton cycle*/
/*debut*/
.effet_box_boutton:hover {
  box-shadow: 0px 20px 50px rgba(165, 91, 165, 0.2);
  /*background: -webkit-linear-gradient(120deg, #a55ba5 50%, #ffa854 20%);*/
  /*background: -moz-linear-gradient(120deg, #a55ba5 50%, #ffa854 20%);*/
  /*background: -ms-linear-gradient(120deg, #a55ba5 50%, #ffa854 20%);*/
  /*background: -o-linear-gradient(120deg, #a55ba5 50%, #ffa854 20%);*/
  background: linear-gradient(180deg, #ffa854 50%, #a55ba5 20%);
}

/*fin/

/* Zoom au survol de l'image*/

/*debut*/
.img-zoom-hover .img-zoom {
  overflow: visible !important;
  position: relative;
}

.img-zoom-hover .img-zoom img {

  max-width: 100%;
  -moz-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.img-zoom-hover .img-zoom * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.img-zoom-hover:hover .img-zoom img {
  -moz-transform: rotate(5deg) scale(1.3);
  -webkit-transform: rotate(5deg) scale(1.3);
  transform: rotate(5deg) scale(1.3);
}

/*Fin*/



.box_etapes {
  background-color: #fff;
  margin-bottom: 30px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

/*.box_etapes:hover {
  background: rgba(165, 91, 165, 0.2);
  box-shadow: 0 7px 8px rgba(255, 245, 245, 1);

}*/


/*Bouton postuler*/