body {
  font-size: 14px;
  width: auto;
  margin: auto;
  font-family: "Lato", sans-serif;
  background: #C6C8BB;

}

.retour {
  clear: both;
}

p {
  line-height: 140%;
}

#principale {
  margin: auto;
  margin-bottom: 100px;
  margin-top: 100px;
  width: 1110px;
  background: white;
  -webkit-border-radius: 13px;
border-radius: 13px;
  -webkit-box-shadow: 0 0 30px 1px #6E6E6E;
box-shadow: 0 0 30px 1px #6E6E6E;
}

#principale .margin {
 margin: auto;
}

.container {
  width: 1080px;
  margin: auto;
}

/*..............................HEADER...........................*/

header {
  height: 200px;
  position: relative;
  }


header img {
  background: white;
  padding: 15px 0px 5px 7px;
  float: left;
  width: 334px;
  -webkit-border-radius: 9px 0 0 0;
  border-radius: 9px 0 0 0;
}


#img_header_chanteur {
  background: url("images/header/img_header_ok.jpg") no-repeat left;
  height: 200px;
  float: left;
  width: 769px;
  -webkit-border-radius: 0 9px 0 0;
  border-radius: 0 9px 0 0;
  box-shadow:
    inset 134px -13px 44px 0px rgba(255, 255, 255, 1),
    inset -41px 13px 44px 0px rgba(255, 255, 255, 1);
}


#menu_haut ul {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 7%;
  left: 78%;
}

#menu_haut li {
  text-align: center;
  width: 100px;
  height: 20px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  padding: 5px 0 1px 0;
  margin: 0 5px;

}

#menu_haut #rose{
  background :#F837A4;
}


#menu_haut #orange{
  background :#EF9922;
}

#menu_haut a{
  text-decoration: none;
  color: white;
  display: block;
  text-align: center;
}


/*..............................NAV...........................*/

nav {
  background: url("images/ligne_rose_haut.svg") no-repeat center;
  position: absolute;
  top: 95%;
  left: 0%;
  padding-bottom: 30px;
  width: 100%;
}


#menu>ul {
  position: absolute;
  top: -75%;
  left: 35%;
  display: flex;
}


#menu ul ul {
  display: none;
  position: absolute;
  top: 104%;
  left: 0%;
  align-items: flex-start;
  width: 100%;
}


#menu>ul>li {
  position: relative;
  margin-right: 10px;
}

nav a {
  display: block;
	text-decoration: none;
	color: #888484;
  text-align: center;
	padding: 5px 17px 5px 17px;
  background: #E2E2E2;
  -webkit-border-radius: 9px 9px 0 0;
  border-radius: 9px 9px 0 0;
}


nav a:hover {
  color: white;
  background: linear-gradient(180deg,
   rgba(255, 28, 130, 1) 40%,
   rgba(248, 55, 164, 1) 100%);
}


#menu li:hover ul{
  display: block;
}


nav li:hover li{
  background: #F837A4;
  color: white;
}


#menu ul ul li a {
  -webkit-border-radius: 0;
  border-radius: 0;
}



/*..............................NAV/MENU DEROULANT...........................*/



/*..............................INDEX...........................*/

/*..............................SECTION ACCUEIL...........................*/

#accueil {
  padding: 44px 20px;
  background: #F1F1F1 url("images/ligne_rose_bas.svg") no-repeat bottom;
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
}


/*.bg_gris {
  background: linear-gradient(
    0deg,
    rgba(205, 206, 209, 1) 20%,
    rgba(245, 245, 245, 1) 100%
  );
}*/


#accueil h1{
  font-size: 35px;
  color: #F837A4;
  font-weight: bold;
  margin-bottom: 20px;
}


#accueil h2{
  font-size: 20px;
  color: #F837A4;
  font-weight: bold;
  margin: 20px 0 10px 0;
}

#accueil .col_texte {
  width: 70%;
  padding-right: 50px;
}

#accueil .col_img {
  width: 30%;
  margin-top: 34px;
}

#accueil p {
  color: #888484;
  text-align: justify;
}

#accueil ul {
  margin-bottom: 10px;
  list-style-image: url("images/puces_rose.svg");
  padding-left: 30px;
}

#accueil li {
    color: #888484;
    line-height: 140%;
}


/*..............................SECTION COLONNE...........................*/

#pole_thematique {
  display: flex;
  justify-content: space-between;
}


#pole_thematique .col_3 {
  width: 31.5%;
}


#pole_thematique .col_3 h3 {
  font-size: 25px;
  color: #F837A4;
  text-align: left;
  margin-bottom: 8px;
}


#pole_thematique .col_3 p {
  color: #888484;
  text-align: left;
  margin: 8px 0;
  text-align: justify;
}


#pole_thematique .col_3 a {
  font-size: 13px;
  color: #F837A4;
  text-decoration: none;
}


#pole_thematique .col_3 .en_savoir_plus {
  text-align: right;
}


#pole_thematique .col_3 a:hover {
  font-weight: bold;
  transform: scale(1.5);
}


/*..............................FOOTER...........................*/

footer {
  margin-top: 30px;
  padding-bottom: 15px;
}

footer .footer_gauche {
  text-align: left;
  font-size: 13px;
  width: 50%;
  float: left;
}

footer .footer_gauche a {
  text-decoration: none;
  color: #888484;
}


footer .footer_droit {
  text-align: right;
  font-size: 13px;
  width: 50%;
  color: #888484;
  float: left;
}


/*..............................CONTACT...........................*/

#contact {
  padding: 44px 20px;
  background: #F1F1F1 url("images/ligne_rose_bas.svg") no-repeat bottom;
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 50px;
}


#contact h1{
  font-size: 30px;
  color: #F837A4;
  font-weight: bold;
  margin-bottom: 30px;
}


#contact h2{
  font-size: 20px;
  color: #F837A4;
  font-weight: bold;
  margin: 20px 0 10px 0;
}

#contact h2.titre_gris{
  color: #888484;
  font-size: 16px;
  margin-top: 40px;
}

#contact p {
  color: #888484;
  text-align: justify;
}

#informations p {
  margin-bottom: 10px;
}

#informations {
  padding: 10px 70px 30px 20px;
  box-shadow: 7px 7px 9px 0px rgba(143, 143, 143, 0.3);

}

#col_formulaire {
  padding: 10px 40px 30px 20px;
  box-shadow: 7px 7px 9px 0px rgba(143, 143, 143, 0.3);
}

#informations span.bold {
  font-weight: bold;
  color: #343434;
}

#informations a {
  text-decoration: none;
  color: #F837A4;
}

/*..............................CONTACT/FORMULAIRE...........................*/


#formulaire p {
  clear: both;
}



#formulaire label {
  float: left;
  width: 20%;
  padding-right: 20px;
  height: 23px;
  padding-top: 5px;
}


#formulaire input[type="text"],
#formulaire input[type="email"] ,
#formulaire input[type="tel"] {
  float: left;
  margin-bottom: 15px;
  width: 70%;
  height: 23px;
  padding: 2px 3px 2px 8px;
}

#cp, #ville {
  width: 36%!important;
}

#formulaire textarea {
	width: 72%;
	margin: 0 0 10px 0;
  resize: none;
}

#formulaire .middle {
  padding-top: 55px;
}

#btn_formulaire input[type="submit"], #btn_formulaire input[type="reset"] {
  cursor: pointer;
  -webkit-border-radius: 130px;
  border-radius: 130px;
  border: none;
  background: white;
  color: #888484;
  width: 95%;
  padding: 2px 50px;

}


#btn_formulaire  input[type="submit"]:hover, #btn_formulaire  input[type="reset"]:hover {
  background: #F837A4;
  color: white;
}


#btn_formulaire {
  display: flex;
  justify-content: end;
}