/******************/
/* TOUTE LA PAGE */
/****************/
body{
  margin:0px;
  padding:0px; 
  font-family: 'Open Sans Condensed', sans-serif;
}

/*********/
/* MENU */
/*******/
header{
  text-transform: uppercase;
  background-color: #0d47a1;
  height:68px;
}

header h1{
  color:white;
  margin: 0 50px;
  line-height: 60px; /* Hauteur de la lgine */
  text-shadow: 3px 3px 3px black;
}

header nav{
  float:right; /* le menu se positionne à droite */
  position: relative; /* permet de pouvoir monter sur la barre du header avec la propriété top qui suit */ 
  top: -60px;
  z-index: 1; /* Affiche le menu et sous menu sur le slider. */
}

header nav ul{
  margin:0px;
  padding: 0px;
}

header nav ul li{
  list-style: none; /* Enleve les puces du menu */
  float: left; /* colle les elements à gauche dans le bloque */
  padding: 15px; /* Espace les rubriques */
  position: relative;
  border: 0px solid beige;
}

header nav ul li a{
  text-decoration: none; /* Retire les soulignement des liens */
  font-size: 15px;
  font-weight: bold;
  display: block;
  width: 200px;
  color: white;
  text-shadow: 3px 3px 3px black;
  line-height: 38px;
}

header nav ul li ul { /* Sous menu */
  position:absolute; /* positionne les sous menu en dessous de leurs parents */
  visibility: hidden;
  left:0px;
  top:68px;
 
}

header nav ul li ul li{ /* Lignes des sous menu */
  background-color: #0d47a1;
  width:400px;
  margin-right: 0px;
}

header nav ul li:hover ul{ /* afficher les sous menu lors du passage de la souris sur le menu */
  visibility: visible;
}

header nav ul li:hover{
  background-color: orange;
}

/************/
/* SLIDERS */
/**********/

header #all-slider img{
  width: 100%; /* Adapte l'image lors de la redimentionnement en largeur */
}

header #all-slider #slider {
  width:100%;
  height: 900px; 
  margin: 1em auto;
  overflow: hidden; /* masque toutes les images qui dépasse 900px */
  position: relative;
  bottom: 60px;
}

.slide{
  max-width: 100%;
  position: absolute;
  left: 0px;
  right: 0px;
  animation: slide 25s linear infinite; /* 25s au total soir pour 5 photo, 5s par photo */
}

.slide:nth-child(2){animation-delay: 5s;}  /* L'image 2 apparaitra au bout de 5s */
.slide:nth-child(3){animation-delay: 10s;} /* L'image 3 apparaitra au bout de 10s, soit 5s après la deuxième image */
.slide:nth-child(4){animation-delay: 15s;} /* L'image 4 apparaitra au bout de 15s */
.slide:nth-child(5){animation-delay: 20s;} /* L'image 5 apparaitra au bout de 20s */

@keyframes slide{ /* Directives du slider */
  /* l'image s'etompe toutes les 5s */
  0%, 20%, 40%, 60%, 80%, 100%{
    opacity: 0; /* rend invisible l'image */
  }
  
  5%, 15% {
    opacity: 1; /* Affiche l'image */
  }
  
}


/* TITRE DU SITE */
header #titre h3{
  color: #007E33;
  text-shadow: 1px 1px 1px #FFF;
  
}

header #titre{
  position:absolute; /* retire l'élément du flux normal d'affichage */
  top: 190px;
  left: 50px;
  font-size: 3em;
  /* background-color: rgba(255,255,255,1); */
  width:720px;
 /*  margin: 0, auto; */
 text-align: center; 
}

/********************/
/* Boutons du site */
/******************/

.btn-services, .btn-contact{
  padding: 20px 0px 20px 0px; 
  color: white;
  border-radius: 50px;
  font: bold 33px Arial;
  width: 350px;
  box-shadow: 1px 1px 3px white;
}

.btn-services{
  background-Color: #478bf9;
}

.btn-contact{
  background-color: #FF8800;
}

/* Boutons Etapes */
button a {
  text-decoration: none;
  color:white;
}

.btn-savoir-plus{
  padding: 6px 10px 6px 10px;
  border-radius: 50px;
  background-color: red;
  font: bold 13px Arial;
  width: 140px;
}

.btn-envoyer{
  padding: 10px 15px;
  background-color: #007E33;
  margin: 10px;
  border: none;
  font: bold 13px Arial;
  
}

/*****************/
/* PARTIE ETAPES */
/*****************/

section#container{
  position: relative; /* Position libre */
  top:838px; /* Position dans la page */
  text-align: center;
  width:100%;
  height:100%;
}

section#container #etapes .etape1 img, section#container #etapes .etape3 img{
  width: 80px;
  height:80px;
}

section#container #etapes .etape2 img{
  width:120px;
  height: 120px;
}


section#container #etapes div{
  display: inline-block;
  width:300px;
  padding: 20px;
}

section#container h4{
  color:blue;
  text-transform: uppercase;
}

section#container section> h4{ /* Premier H4 des secionts contenu dans container */ 
  font-size: 50px;
  border-bottom: 5px solid black;
  
}

section#container p {
  font-size: 20px;
  font-style: italic;
  font-weight: bold;
}


/*************/
/* SERVICES */
/***********/

section#container section#services{
  background-color: gray;
  height: 100%;
  padding-bottom:50px;
}

section#container section#services div{
  width:460px;
  height:270px;
  display: inline-block;
  border-radius:10px;
  margin-right: 70px;
}

section#container section#services div .infos{
  background-color: rgba(255,255,255,0.9);
  width: 70%;
  position: relative;
  left:-35px;
}

/*******************/
/* CONTACTEZ NOUS */
/*****************/

section#container #contact{
  padding-bottom:50px;
}

section#container #contact form{
  /* border:2px solid black; */
  width:80%;
  margin: 0 auto;
  padding: 1em;
}

section#container #contact form label{
  color: green;
  font-weight: bold;
  font-size: 30px;
  text-decoration: underline;
  font-style: italic;
}

section#container #contact form input{
  width: 70%;
  height: 3em;
  cursor:pointer;
}

section#container #contact form textarea{
  width: 70%;
  height:15em;
  cursor:pointer;
}

section#container #contact form input[type="text"], textarea{ /* cible les champ input de format texte et textarea */
  border-bottom: 2px solid #AAA;
  border-right: 2px solid #AAA;
}

::placeholder, textarea{ /* modifie la couleur du texte affiché quand le champ est vide */
  color:blue;
  font-size: 1.5em;
  font-style:italic;
}

/***********/
/* FOOTER */
/*********/

footer{
  text-align: center;
  position:relative;
  top:828px;
  background-color: #0d47EE;
  color:white;
}

footer #titre-footer{
  font-size: 50px;
  text-shadow: 2px 2px 2px black;
  margin-bottom:50px;
}

footer #titre-footer span.point{
  color:red;
  font-size:110px;
}

footer #menu-footer a{
  color: white;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
}

footer #copyright{
  background-color: blue;
  height:50px;
  line-height: 50px;
}