/* style paves toggle */

.imgradius {
  border: 1px solid rgb(224, 140, 101);
  border-radius: 24px 0 24px 0px !important;
}

.marg {
  border-radius: 24px 0 24px 0px !important;
  width: 340px;
  margin-left: -10px !important;
  padding: -10px !important;
}

.margcv {
  border-radius: 24px 0 24px 0px !important;
  width: 240px;
  margin-left: -10px !important;
  padding: -10px !important;
}

.frontgraph,
.backgraph {
  background-size: cover;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
  background-position: center;
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  text-align: center;
  min-height: 140px;
  color: #fff;
  font-size: 1rem;
  margin: 3px;
}

.margraph {
  border-radius: 24px 0 24px 0px !important;
  height: 150px;
  /* margin-left: -10px !important; */
  /* padding: -10px !important;  */
  width: 100%;
}

.tograph {
  border-color: rgb(224, 140, 101);
  border-style: solid;
  border-radius: 24px 0 24px 0px;
  height: 160px;
  width: auto;
}

.margprest {
  border-radius: 24px 0 24px 0px !important;
  width: 440px;
  margin-left: -10px !important;
  padding: -10px !important;
}

.togfront {
  border-color: rgb(224, 140, 101);
  border-style: solid;
  border-radius: 24px 0 24px 0px;
  width: 350px;
}

.togfrontcv {
  border-color: rgb(224, 140, 101);
  border-style: solid;
  border-radius: 24px 0 24px 0px;
  width: 250px;
}

.togfrontprest {
  border-color: rgb(224, 140, 101);
  border-style: solid;
  border-radius: 24px 0 24px 0px;
  width: 450px;
}



.togin {
  border-radius: 24px 0 24px 0px;
  border: 1px solid rgb(224, 140, 101);
}

/* -------------------- */
/*carousel-sd*/

.bout {
  border: 2px solid rgb(247, 94, 24) !important;
}


.curseur {
  background-color: white;
  padding: 1%;
}

.home-sd-carousel .carousel-item {
  height: 50vh;
  width: 50vw;
  margin-left: auto;
  margin-right: auto;
  background-position: center;
  background-size: cover;
  position: relative;
  z-index: 1;
}

.home-sd-carousel .carousel-item:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 50%;
  z-index: -1;
}

.home-sd-carousel .carousel-item .container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.home-sd-carousel .carousel-item h1 {
  margin: 0 0 10px;
}

.spe {
  margin: 0;
  background: linear-gradient(70deg, rgb(216, 124, 19), rgb(238, 255, 0));
  border-radius: 10px;
  width: 400px;
  padding: 10px;
}

.home-sd-carousel .carousel-item h3 {
  margin: 0;
  text-transform: uppercase;
  text-align: start;
  background-color: #283891;
  /* color: #fff; */
  color: black;
  width: 600px;
  padding: 10px;
}

.home-sd-carousel .carousel-item p {
  margin: 0;
  text-align: start;
}

.home-sd-carousel .carousel-item.active h1 {
  animation: fadeInLeft 0.5s ease forwards;
}

.home-sd-carousel .carousel-item.active h3 {
  animation: fadeInRight 0.5s ease forwards;
}

.home-sd-carousel .carousel-item.active p {
  animation: fadeInRight 0.5s ease forwards;
}

.home-sd-carousel .carousel-controls {
  position: absolute;
  left: 50%;
  bottom: 40px;
  z-index: 10;
  transform: translate(-50%);
}

.home-sd-carousel .carousel-indicators {
  position: relative;
  margin: 0;
}

.home-sd-carousel .carousel-indicators li {
  width: 70px;
  height: 70px;
  margin: 0 5px;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  border: 3px solid transparent;
  transition: all 0.3s ease;
}

.home-sd-carousel .carousel-control-next img,
.home-sd-carousel .carousel-control-prev img {
  width: 30px;
}

.home-sd-carousel .carousel-control-next {
  right: -90px;
}

.home-sd-carousel .carousel-control-prev {
  left: -90px;
}

.home-sd-carousel .carousel-indicators li.active {
  /* border-color:#fff; */
  border-color: black;
  transform: scale(1.2);
}

.home-sd-carousel .carousel-control-next,
.home-sd-carousel .carousel-control-prev {
  width: 60px;
  height: 60px;
  opacity: 1;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  transition: all 0.1s ease;
}

.home-sd-carousel .carousel-control-next:hover,
.home-sd-carousel .carousel-control-prev:hover {
  box-shadow: 0 0 10px #fff;
  /* box-shadow: 0 0 10px black; */
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }

  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }

  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

/*FAQ-sd*/

.back {
  background: #faddc3;
}



.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 98%;
  text-align: justify;

}



.col {
  margin: 1rem;
  cursor: pointer;
}

.cols {

  display: -webkit-box;
  display: -ms-flexbox;
  margin: auto;
  width: 80%;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
}

.container {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}


.container:hover .front,
.container:hover .back {
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.container .back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.container .front {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.container:hover .back {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.container:hover .front {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.front:after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  content: '';
  display: block;
  opacity: .5;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 24px 0 24px 0px;
}

.front,
.back {
  background-size: cover;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
  background-position: center;
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  text-align: center;
  color: #fff;
  font-size: 1rem;
  margin: 3px;
}

.fronth,
.backh {
  min-height: 280px;
}

.frontg,
.backg {
  min-height: 150px;
}

.frontp,
.backp {
  min-height: 200px;
}


.fronthgt,
.backhgt {
  min-height: 450px;
}



.front .inner p {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  position: relative;
  vertical-align: middle;
}

.front .inner p:after {
  content: '';
  width: 4rem;
  height: 2px;
  position: absolute;
  background: #C6D4DF;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -.75rem;
}

.front .inner span {
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Montserrat';
  font-weight: 300;
}

.inner {
  -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
  transform: translateY(-50%) translateZ(60px) scale(0.94);
  top: 50%;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 1px solid transparent;
  -webkit-perspective: inherit;
  perspective: inherit;
  z-index: 2;
}

.innercv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
  transform: translateY(-50%) translateZ(60px) scale(0.94);
  top: 50%;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 1px solid transparent;
  -webkit-perspective: inherit;
  perspective: inherit;
  z-index: 2;
}

.prestation {
  color: rgb(216, 124, 19) !important;
  text-align: justify;
}

.univers-card {
  position: absolute;
  font-size: 1.5rem;
  font-weight: bolder;
  color: rgb(253, 253, 255) !important;
  text-shadow: 0 0 0.2em #283891, 0 0 0.2em #283891, 0 0 0.2em #283891;
}

.univers-titre {   
  font-weight: bolder;
  color: rgb(253, 253, 255) !important;
  text-shadow: 0 0 0.2em #283891, 0 0 0.2em #283891, 0 0 0.2em #283891;
}

.univers-txt {
  color: rgb(216, 124, 19) !important;
  text-align: justify;
}

.wrapper {
  width: 80%;
  margin: 0 auto;
  padding-top: 150px;
  text-align: center;
}



@media screen and (max-width: 100rem) {
  .col {
    /* width: calc(50% - 2rem); */
    width: 50%;
  }
}

/* @media screen and (max-width: 48rem){
   .col{
     width: calc(30% - 2rem);
   }
 }  */

@media screen and (max-width: 80rem) {
  .col {
    width: 100%;
    margin: 0 0 2rem 0;
  }

  .univers-txt{
    font-size: 0.8rem;
  }
}

@media screen and (max-width: 50rem) {
  
  .fronthgt,
  .backhgt {
    min-height: 350px;
  }

  .presta{
    max-width: 100%;
  }
  
  .togfront {  
    width: 250px;
  }

  .togfrontprest {   
    width: 300px;
  }

  .marg {  
    width: 240px;
  }

  .margprest {   
    width: 290px;   
  }

  .prestation {
    font-size: 0.7rem;
  }

  .univers-txt{
    font-size: 0.8rem;
  }

  .univers-titre {
    font-size: 1rem !important;
  }
}