/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

html {
  scroll-behavior: smooth;
}

body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/*--------------------------------------------------------SLIDER----------------------------------------------------------------------------------------*/

.slider{
  height: 400px;
}

#slide1{
  height: 100%;
  width: 100%;
  background-image: url(Images/banniere1.jpg);
  background-size: cover;
  background-position: center;
}

#slide1-text{
  float: right;
  margin-right: 4%;
  background-color: #eff4f7;
  width: 30%;
  border-radius: 5px;
  margin-top: 3.5%;
}

#slide1-text h3{
  margin-top: 0px;
  padding: 20px;
  font-family: Roboto;
  font-weight: 900;
  font-size: 22px;
  color: white;
  padding-top: 3%;
  padding-bottom: 2%;
  background-color: #1a1a1a;
}

#slide1-text p{
  font-family: Roboto;
  padding: 20px;
  padding-top: 0.4%;
  text-align: justify;
  color: #2f2f2f;
}

#slide2{
  height: 100%;
  width: 100%;
  background-image: url(Images/banniere2.jpg);
  background-size: cover;
}

#slide2-text{
  float: left;
  margin-top: 11%;
  margin-left: 4%;
  background-color: #eff4f7;
  width: 30%;
  border-radius: 5px;
}

#slide2-text h3{
  margin-top: 0px;
  padding: 20px;
  font-family: Roboto;
  font-weight: 900;
  font-size: 22px;
  color: white;
  padding-top: 3%;
  padding-bottom: 2%;
  background-color: #1a1a1a;
}

#slide2-text p{
  font-family: Roboto;
  padding: 20px;
  padding-top: 0.4%;
  text-align: justify;
  color: #2f2f2f;
}

#slide3{
  height: 100%;
  width: 100%;
  background-image: url(Images/banniere3.jpg);
  background-size: cover;
}

.slide_viewer {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.slide_group {
  height: 100%;
  position: relative;
  width: 100%;
}

.slide {
  display: none;
  height: 100%;
  position: absolute;
  width: 100%;
}

.slide:first-child {
  display: block;
}

.slide:nth-of-type(1) {
  background: #3e3e3e;
}

.slide:nth-of-type(2) {
  background: #3e3e3e;
}

.slide:nth-of-type(3) {
  background: #3e3e3e;
}

.slide:nth-of-type(4) {
  background: #3e3e3e;
}

.slide_buttons {
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
}

a.slide_btn {
  color: #474544;
  font-size: 42px;
  margin: 0 0.175em;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.slide_btn.active, .slide_btn:hover {
  color: #155177;
  cursor: pointer;
}

.directional_nav {
  height: 50px;
  margin: 0 auto;
  position: relative;
  top: -100px;
}

.previous_btn {
  display: none;
}

.next_btn {
  display: none;
}

.previous_btn, .next_btn {
  cursor: pointer;
  height: 65px;
  opacity: 0.5;
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -ms-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
  width: 65px;
}

.previous_btn:hover, .next_btn:hover {
  opacity: 1;
}

@media only screen and (max-width: 767px) {
  .previous_btn {
    left: 50px;
  }
  .next_btn {
    right: 50px;
  }
}

.slide a{
  color: white;
  font-weight: bold;
}

.slide a:hover{
  color: #f29a00;
  font-weight: bold;
}

/*-------------------------------------------------------------------BANDE1---------------------------------------------------------------------------------------------*/

#bande1{
  padding-bottom: 1%;
}

#bande1 p{
  font-family: Roboto;
  text-align: center;
  margin-left: 10%;
  margin-right: 10%;
  color: #444;
}

/*-------------------------------------------------------------------BANDE2---------------------------------------------------------------------------------------------*/

h2{
  font-size: 32px;
  text-align: center;
  font-family: Poppins;
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 0px;
  padding-top: 4%;
}

#bande2{
  background-color: #eff4f7;
}

#conteneur-flex{
  display: flex;
  width: 100%;
  justify-content: space-around;
  height: 100%;
}

.missions{
  height: 100%;
  margin: 2%;
  width: 30%;
  margin-bottom: 4%;
}

#bande2 img{
  height: 150px;
  width: 150px;
}

#bande2 h3{
  text-align: center;
  text-transform: uppercase;
  font-family: Roboto;
  font-weight: 900;
  letter-spacing: 5px;
  font-size: 19px;
  color: #333;
}

#bande2 p{
  text-align: justify;
  margin-left: 10%;
  margin-right: 10%;
  font-family: Roboto;
  color: #2f2f2f;
}

/*-------------------------------------------------------------------BANDE3---------------------------------------------------------------------------------------------*/

#bande3{
 background: rgba(0,102,204,1);
 background: -moz-linear-gradient(top, rgba(0,102,204,1) 0%, rgba(3,76,150,1) 0%, rgba(4,100,144,1) 26%, rgba(6,130,188,1) 55%, rgba(32,159,217,1) 100%);
 background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,102,204,1)), color-stop(0%, rgba(3,76,150,1)), color-stop(26%, rgba(4,100,144,1)), color-stop(55%, rgba(6,130,188,1)), color-stop(100%, rgba(32,159,217,1)));
 background: -webkit-linear-gradient(top, rgba(0,102,204,1) 0%, rgba(3,76,150,1) 0%, rgba(4,100,144,1) 26%, rgba(6,130,188,1) 55%, rgba(32,159,217,1) 100%);
 background: -o-linear-gradient(top, rgba(0,102,204,1) 0%, rgba(3,76,150,1) 0%, rgba(4,100,144,1) 26%, rgba(6,130,188,1) 55%, rgba(32,159,217,1) 100%);
 background: -ms-linear-gradient(top, rgba(0,102,204,1) 0%, rgba(3,76,150,1) 0%, rgba(4,100,144,1) 26%, rgba(6,130,188,1) 55%, rgba(32,159,217,1) 100%);
 background: linear-gradient(to bottom, rgba(0,102,204,1) 0%, rgba(3,76,150,1) 0%, rgba(4,100,144,1) 26%, rgba(6,130,188,1) 55%, rgba(32,159,217,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0066cc', endColorstr='#209fd9', GradientType=0 );
  position: relative;
  box-shadow: 3px 6px 28px 1px rgba(105,105,105,0.2);
  height: 440px

}

#conteneur-flex2{
  height: 100%;
  display: flex;
}

#texte-flex{
  width: 45%;
  margin-left: 5%;
  margin-top: auto;
  margin-bottom: auto;
}

#bande3 img{
  height: 100%;
  margin-left: 5%;
}

#bande3 h2{
  color: white;
  text-align: left;
  margin-bottom: 3%;
  margin-top: 0px;
  padding-top: 0px;
}

#bande3 p{
  color: white;
  font-family: Roboto;
  text-align: justify;
  font-size: 18px;
}

#bande3 li{
  color: white;
  font-family: Roboto;
  font-size: 18px;
  list-style-type: none;
  counter-increment: repas;
  margin-bottom: 20px;
}

#bande3 ol{
  counter-reset: repas;
}

#bande3 ul{
  margin-left: -41px;
  margin-bottom: 5%;
}

#bande3 li:before{
  content: counter(repas);
  color: white;
  font-size: 25px;
  margin-right: 10px;
  border-width: 3px;
  border-style: solid;
  border-color: white;
  border-radius: 100px;
  padding-right: 9px;
  padding-left: 9px;
}

#bande3 a{
  font-family: Roboto;
  letter-spacing: 2px;
  padding: 10px;
  border: 3px solid white;
  color: white;
  text-decoration: none;
  font-size: 18px;
  border-radius: 2px;
  transition: 0.2s;
}

#bande3 a:hover{
  transition: 0.2s;
  color: #209fd9;
  background-color: white;
}

/*-------------------------------------------------------------------BANDE4---------------------------------------------------------------------------------------------*/

#bande4{
  background-color: white;
}

#bande4 h2{
  padding-top: 2%;
}

#bande4 img{
  height: 100%;
  filter: grayscale(100%);
     -webkit-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
     -o-filter: grayscale(100%);
  transition-property: height;
  transition-duration: 0.5s;
}

#bande4 img:hover{
  height: 120%;
  filter: grayscale(0%);
     -webkit-filter: grayscale(0%);
     -moz-filter: grayscale(0%);
     -ms-filter: grayscale(0%);
     -o-filter: grayscale(0%);
}

#ligne1{
  height: 110px;
  margin-top: 2%;
}

#ligne2{
  height: 50px;
  margin-top: 1%;
  margin-bottom: 3%;
}

/*----------------------------------------CONTACT--------------------------------------------*/

#contact{
  background-color: #eff4f7;
  margin-top: 5%;
}

iframe {
  width: 40%;
  border: none;
  margin-left: 1%;
}

#conteneur-flex-contact {
  display: flex;
  width: 100%;
  justify-content: flex-start;
}

#conteneur-texte {
  margin-left: 2.5%;
  margin-bottom: 3%;
  margin-top: 3%;
  margin-right: 3%;
}

#contact h2 {
  text-align: left;
  margin-top: 0px;
  padding-top: 0px;
}

#contact h3 {
  font-family: Roboto;
  font-weight: 400;
  letter-spacing: 2px;
  font-size: 20px;
  text-transform: uppercase;
  color: #4767ce;
}

#contact img {
  height: 25px;
  margin-top: auto;
  margin-bottom: auto;
}

#contact p {
  font-family: Roboto;
  font-size: 18px;
  margin-left: 10px;
  margin-bottom: 0;
  margin-top: 0;
}

.conteneur-flex2 {
  display: flex;
  margin-bottom: 20px;
}