@charset "UTF-8";
/* CSS Document */

*{
	margin:0;
	padding:0;}
	
html, body{
	width:100%;
	height:100%;
	min-height:100%;
	-webkit-font-smoothing: antialiased;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
	font-size: 100%;
	
	color:#000;
	font-family: 'Montserrat', sans-serif;

    /*
	font-family: 'Montserrat', sans-serif;
    font-family: 'Yellowtail', cursive;
	*/
}


a{text-decoration:none;
color: #000}
	
img{vertical-align: middle;}

input[type=text], input[type=button], input[type=number], input[type=submit] {
-webkit-appearance: none;
-webkit-border-radius: 0;
}

a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}



 .centrage{
        max-width: 1400px;
        position: relative;
        margin: auto;
     box-sizing: border-box;
  
    }

@media screen and (min-width: 1400px) {
    .centrage{   padding: 0 80px;} 
}



@media screen and (min-width: 900px) and (max-width: 1400px){
    .centrage{   padding: 0 48px;} 
    
}


@media screen and (min-width: 480px)  and (max-width: 900px) {
    .centrage{   padding: 0 80px;} 

    #apropos .fl-right,
    #consultations .fl-right{
        width: calc(100% + 160px);
        margin-left: -80px;
        overflow-x: hidden;
    }
    
     #apropos .fl-right img,
    #consultations .fl-right img{    
        position: relative;
    }
    
}

@media screen and (max-width: 480px){
    .centrage{   padding: 0 48px;} 
    
    #apropos .fl-right,
    #consultations .fl-right{
        width: calc(100% + 96px);
        margin-left: -48px;
        overflow-x: hidden;
    }
    
     #apropos .fl-right img,
    #consultations .fl-right img{    
        position: relative;
    }
}

/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

TYPO

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/


@media screen and (min-width: 660px) {
.menu a{
    font-size: 17px;
    font-weight: 500;
}

.centrage h2,
.pouquoi h4,
.approche h3,
.pour-qui h3{
     font-family: 'Yellowtail', cursive;
    font-size: 78px;
    font-weight: 400;
}

.prez p,
#consultations .prez h3{
    font-size: 18px;
    font-weight: 400;
}


.formation h3{
    font-size:16px;
    font-weight: 700;
}

.formation ul{}

.formation li,
.spec p,
#consultations .prez p,
    .fl-right p,
        .fl-left p{
    font-size: 16px;
}


.spec h2,
.pour-qui h2{
    font-size: 24px;
    font-weight: 700;
}

p.non-ex{
    font-size: 17px;
    font-weight: 500;
}

.white{
    font-size: 14px;    
}


#consultations a button{
    font-size: 21px;
   
}

footer h2{}

footer h3,
span.tel{
    font-size: 21px;
    font-weight: 700;
}


footer h2,
#contact p{
    font-size: 18px;
    font-weight: 400;
}
    
#contact p,
    .ml a{
    font-size: 16px;
}    
}


@media screen and (max-width: 660px) {
.menu a{
    font-size: 28px;
    font-weight: 500;
}

.centrage h2,
.pouquoi h4,
.approche h3,
.pour-qui h3{
     font-family: 'Yellowtail', cursive;
    font-size: 48px;
    font-weight: 400;
}

.prez p,
#consultations .prez h3{
    font-size: 14px;
    font-weight: 400;
}


.formation h3{
    font-size:16px;
    font-weight: 700;
}

.formation ul{}

.formation li,
.spec p,
#consultations .prez p,
    .fl-right p,
        .fl-left p{
    font-size: 14px;
}


.spec h2,
.pour-qui h2{
    font-size: 24px;
    font-weight: 700;
}

p.non-ex{
    font-size: 14px;
    font-weight: 500;
}

.white{
    font-size: 14px;    
}


#consultations a button{
    font-size: 16px;
   
}

footer h2{}

footer h3,
span.tel{
    font-size: 16px;
    font-weight: 700;
}


footer h2,
#contact p{
    font-size: 14px;
    font-weight: 400;
}
    
#contact p,
    .ml a{
    font-size: 14px;
}    
}


/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

HEADER

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/


header{
    width: 100%;
    position: relative;
    float: left;
   
}

.nom-mob{
    display: none;
}


@media screen and (max-width: 1000px) {
 .nom-mob{
    display: block;
}   
}

.deco{
    width: 100%;
    height: 80px;
    position: absolute;
    bottom: 0;
    background-image: url("images/deco.svg");
    background-position: bottom left;
    background-repeat: repeat-x;

}

/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

MENU

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

@media screen and (min-width: 1000px) {
  
    
    h1{
        visibility: hidden;
        font-size: 1px;
        display: none;
    }
    
    .menu{
         display: flex; 
  justify-content: space-around;
  align-items: flex-start;
    }
    
    .menu a{}
    
    .menu a:nth-of-type(1) .colo{border-bottom: solid 0px #FADB11;}
    
    .menu a:nth-of-type(2) .colo{border-bottom: solid 0px #E84F1C;}
    
    .menu a:nth-of-type(3) .colo{border-bottom: solid 0px #009EE1;}

    .menu a:nth-of-type(5) .colo{border-bottom: solid 0px #1BA363;}

    .menu a:nth-of-type(6) .colo{border-bottom: solid 0px #E64892;}
    
    .menu a:nth-of-type(7) .colo{border-bottom: solid 0px #F2B5D3;}
  
    
    .menu a:hover .colo{
        border-bottom: solid 14px #FADB11;
        position: absolute;
        top: 10px;
        width: 120%;
        left: -10%;
        z-index: 0;
    }
    
    
    .menu a:nth-of-type(2):hover .colo{border-bottom: solid 14px #E84F1C;}
    
    .menu a:nth-of-type(3):hover .colo{border-bottom: solid 14px #009EE1;}

    .menu a:nth-of-type(5):hover .colo{border-bottom: solid 14px #1BA363;}

    .menu a:nth-of-type(6):hover .colo{border-bottom: solid 14px #E64892;}
    
    .menu a:nth-of-type(7):hover .colo{border-bottom: solid 14px #F2B5D3;}
    
    
    .name{
        position: relative;
        z-index: 100;
    }
    
    .menu a:nth-of-type(4):hover{
        position: relative;
         border-bottom: none;
        top: 0;
    }
    
    
    
    
.mobilenav {
   width: 100%;
}
    
    .mobilenav h2{
        width: 160px;
        top: -20px;
        position: relative;
    }
    
.menu a:nth-of-type(1),
.menu a:nth-of-type(2),
.menu a:nth-of-type(3),
.menu a:nth-of-type(5),
.menu a:nth-of-type(6),
.menu a:nth-of-type(7){
        position: relative;
        top: 84px;
    }
    
.hamburger-menu-button {
    visibility: hidden;
display: block
   
    
    
}



.hamburger-menu-button-open {}
.hamburger-menu-button-open, 
.hamburger-menu-button-open::before, 
.hamburger-menu-button-open::after {}
.hamburger-menu-button-open{}
.hamburger-menu-button-open::before{}
.hamburger-menu-button-open::after{}

.hamburger-menu-button-open::before, 
.hamburger-menu-button-open::after {}
.hamburger-menu-button-open::before {}
.hamburger-menu-button-open::after {}
.hamburger-menu-button-close {}
.hamburger-menu-button-close::before {}
.hamburger-menu-button-close::after {}
.ham-menu {
  
   /* background-color: purple;*/
}
.ham-menu .menu {}
.ham-menu.on .menu {}



.ham-menu .menu a {

 
   
}
.ham-menu .menu a:first-child .ham-menu .menu a {
 /* padding-left: 30px;*/
}
.ham-menu .menu a {
  
  
}

.ham-menu .menu a:first-child{
   
}

.ham-menu .menu a.active, .ham-menu .menu a:hover {
 
}
}


@media screen and (max-width: 1000px) {
     nav h1{
       /* display: block;
         width: 200px;
         position: absolute;
         left: 0;
         top: 0;*/
         
           position: absolute;
        display: block;
        width: 160px;
        top: -30px;
        left: 0px;
        z-index: 9999;
    }    
    
    
   .menu h2,
     .menu img,
    .menu a:nth-of-type(4),
        .menu h2 img,
    .menu a h2{
        position: absolute;
        display: none;
        top: 0;
        display: none;
       visibility: hidden;
        height: 0;
        line-height: 0;
        z-index: -1000;
    }   
    
nav a.item,
nav a:hover.item{
    padding: 15px 0px;
    }  
    
    
    
nav a.item{
    width: 100%;
    float: left;
    box-sizing: border-box;
    padding: 15px 0;
        margin: 15px 0;
} 
    
    
    
    
.mobilenav {
    position: absolute;
    width: 100%;
    left: 0;
    top: -30px;
    z-index: 200;
   
}
.hamburger-menu-button {
  width: 40px;
  height: 40px;
  padding: 6px;
  display: block;
/*    
  position: relative;
    float: right;
  margin-top: 0px;
      z-index: 200;
*/
    position: fixed;
    top: 0;
    right: 0;
      z-index: 9999;

  background: transparent;
  box-sizing: content-box;
  border: 0;
  color: transparent;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
        background-color: #FFF;
}



.hamburger-menu-button-open {
  top: 50%;
  margin-top: -1px;
  left: 50%;
  margin-left: -12px;
}

.hamburger-menu-button-open, 
.hamburger-menu-button-open::before, 
.hamburger-menu-button-open::after {
  position: absolute;
  height: 2px;
  background: #000;
  border-radius: 8px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.hamburger-menu-button-open{width: 24px;}
.hamburger-menu-button-open::before{width: 24px;}
.hamburger-menu-button-open::after{width: 24px;}

.hamburger-menu-button-open::before, 
.hamburger-menu-button-open::after {
  right: 0;
  content: "";
}
.hamburger-menu-button-open::before {
   
  top: 6px;
}
.hamburger-menu-button-open::after {
       
  bottom: 6px;
}
.hamburger-menu-button-close {
  background: transparent;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
     width: 24px;
}
.hamburger-menu-button-close::before {
    background:#000;
  -webkit-transform: translateY(-6px) rotate(45deg);
          transform: translateY(-6px) rotate(45deg);
     width: 24px;
}
.hamburger-menu-button-close::after {
    background:#000;
  -webkit-transform: translateY(6px) rotate(-45deg);
          transform: translateY(6px) rotate(-45deg);
     width: 24px;
}
.ham-menu {
    position: absolute;
    top:0;
text-align: center;
  margin: auto;
    width:100%;
    min-width: 375px;
}
.ham-menu .menu { 
  font-size: 0;
  -webkit-transform: translateX(-110%);
          transform: translateX(-110%);
  background-color: #3896d3;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
    width:100%;
    min-height: 100vh;
      top: 0;
    left: 0;
    background-color: #FFF;
      position: absolute;
}
.ham-menu.on .menu {
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
        background-color: #FFF;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding-right: 10%;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    text-align: right;
      -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;

}



.ham-menu .menu a {
  display: block;
    margin: 0;
    padding: 0;
   
}
.ham-menu .menu a:first-child .ham-menu .menu a {
 /* padding-left: 30px;*/
}
.ham-menu .menu a {
  padding: 30px;
  display: block;
    width:100%;
  background-color: transparent;
  color: #000;
  text-transform: uppercase;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  font-size: 13px;
    position: relative;
}

.ham-menu .menu a:first-child{
    margin-top: 100px;
}

.ham-menu .menu a.active, .ham-menu .menu a:hover {
  background-color: #FFF;
  color: #000 !important;
    padding: 30px;
    font-weight: 700;
}

.ham-menu .menu a.active, .ham-menu .menu a:active {
  background-color: #000;
  color: #000 !important;
    padding: 30px;
}    
    
}


/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

SLIDE

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.fullscreen{
	width:100%;
	height:100%;
	min-height:100%;
	float:left;
	z-index:1;
	position:relative;
	float:left;
margin-bottom: 120px;}

@media screen and (min-width: 900px) {
    .fullscreen{margin-bottom: 120px;}}

@media screen and (max-width: 900px) {
    .fullscreen{margin-bottom: 0px;}}

.deg{
    width: 100%;
    height: 30%;
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);


width: 100%;
    height: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    z-index: 100;
}

.slider ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.slider {
width:100%;
height:100%;
min-height:100%;
position:absolute;
top:0;
left:0;
z-index:-1;
/*clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);*/

}


.slider .jquery-reslider .slider-block {
  width: 100%;
  height: 100%;
  position: absolute;
  background-position: 50% 50%;
  background-size: cover;
  opacity: 0;
}


.slider .jquery-reslider .slider-direction {
  width: 60px;
  height: 100px;
  position: absolute;
  bottom:0px;
  z-index: 1;
  cursor: pointer;
}



/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

XXX

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/


.a-propos-consult,
.pouquoi,
.pour-qui,
.approche{
    width: 100%;
    background-color: #FFF;
    position: relative;
    float: left;
    z-index: 100;
}


.fl-left img,
.fl-right img{
    width: 100%;
    
}

@media screen and (min-width: 900px) {
.fl-left{
    width: 48%;
    float: left;
}

.fl-right{
    position: relative;
    width: 48%;
    float: right;
}
}

@media screen and (max-width: 900px) {
.fl-left,
.fl-right{
    width: 100%;
    float: left;
}
    
   

}




#apropos h2{
margin-bottom: 2px;/*40 a la abse sauf que titre aligné sur ilg donc valeur neg de 38 et 2*/
  
    position: relative;
}


@media screen and (min-width: 800px) {
#apropos p{
    width: 80%;
}
    
   
}


@media screen and (max-width: 800px) {
#apropos p{
    width: 100%;
}
    
     
}

@media screen and (min-width: 900px) {
  #apropos  .fl-right{}
 #apropos h2{  top: -38px;}        
}

@media screen and (max-width: 900px) {
  #apropos  .fl-right{
        margin-bottom: 40px;
    }  
    
    #apropos h2{  top: 0px;
    margin-bottom: 20px;}    
}

.prez,
.formation{
    position: relative;
    width: 100%;
   
}

.formation{
     margin-top: 50px;
}

.prez:before{
    content: "";
    position: absolute;
    width: 2px;
    height: 100%;
    top: 0;
    left: -28px;
    border-left: solid 2px #E64892;

}

.prez p{
  /*  width: 100%;
    box-sizing: border-box;
    padding-left: 2    00px;*/
}

.formation h3{
    color: #E64892;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.formation ul li{
    color: #575756;
    margin-bottom: 20px;
    
}

#apropos{
    margin-bottom: 90px;
}



/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

POURQUOI

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.pouquoi{
    background-color: #F2B5D3;
    
  /*  display: flex; 
  justify-content: space-around;
  align-items: flex-start;*/
    width: 100%;
        text-align: center;
    
   
     
}

hr{
    width: 100%;
    height: 1px;
    border: none;
    background-color: transparent;
    position: relative;
    float: left;
}

@media screen and (min-width: 1160px) {
    .la{display: none;}    
}

@media screen and (min-width: 900px)  and (max-width: 1160px) {
    .la{display: block;}    
}

@media screen and (min-width: 720px) and (max-width: 900px) {
    .la{display: none;}    
}

@media screen and (min-width: 660px) and (max-width: 720px) {
    .la{display: block;}    
}

@media screen and (max-width: 660px) {
    .la{display: none;}    
}


.pourquoi .centrage{  /*display: table;*/
margin-bottom: 20px;
/*display: flex;*/

}

.pouquoi{
    padding-top: 60px;
padding-bottom: 90px;}

#pourquoi .centrage h4{
    width: 100%;
    position: relative;
    padding-bottom: 60px;
}




.spec{ 
    box-sizing: border-box;
    padding: 40px 34px 58px 34px;
    position: relative;
    background-color: #FFF;
}


@media screen and (min-width: 900px) {
.spec{ 
    width: 28%;
      margin-bottom: 90px;}   
    
    

.test{ box-sizing: border-box; 
     display: flex;
    flex-wrap: wrap;
   
  
}
    
    .test .spec:nth-of-type(2),
    .test .spec:nth-of-type(5){
    margin: 0 8%;
}
    


.test .spec:nth-of-type(1),
.test .spec:nth-of-type(2),
.test .spec:nth-of-type(3){
    margin-bottom: 90px;
}

.test .spec:nth-of-type(4),
.test .spec:nth-of-type(5),
.test .spec:nth-of-type(6)    {
    margin-bottom: 50px;/*50 plus 25 du trait */
}    
    
  
}

@media screen and (min-width: 660px) and (max-width: 900px) {
   .test{ box-sizing: border-box; 
     display: flex;
    flex-wrap: wrap;
}
    
.spec,
    #monapproche .spec{ 
    width: 44%;
    float: left;
    margin-bottom: 50px;
   } 
    
    
   .spec:nth-of-type(2n+2){
       margin-left: 12%;
       
    }
    
    #monapproche .spec:nth-of-type(3){
        margin-left: 28%;
    }    
}

@media screen and (max-width: 660px) {
   .test{ box-sizing: border-box; 
     display: flex;
    flex-wrap: wrap;
}
    
.spec,
    #monapproche .spec{ 
    width: 100%;
    float: left;
    margin-bottom: 50px;
   } 
}


.spec:after,
.cut:after{
    content: "";
position: absolute;
    bottom: -20px;
    right: -20px;
 height : 0;
 width : 0;
 border-bottom : 80px solid #F2B5D3;
 border-left : 80px solid transparent;
     
}

.cut:after{
     border-bottom : 80px solid #FFF;
}

#monapproche .spec:after{ border-bottom : 80px solid #1BA363;
}

.spec:before,
.cut:before{
    content: "";
    position: absolute;
    width: 100px;/*150*/
    height: 1px;
    background-color: #FFF;
    z-index: 100;
    bottom: 19px;/*20*/
    right: -30px;/*55*/
transform: rotate(-45deg);
}

.cut:before{
     background-color: #009EE1;
}


.spec img{
    width: 40px;
    height: 40px;
    margin-bottom: 28px;
}

.spec h2{
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    margin-bottom: 40px;
}

p.non-ex{
    float: left;
    width: 100%;
    color: #FFF;
}

/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

POUR QUI

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

#pourqui{
    padding: 100px 0;
}

.pour-qui h3{
    width: 100%;
    text-align: center;
}

.pour-qui h2{
    color: #009EE1;
}



.pour-qui h3{
margin-bottom: 2px;/*40 a la abse sauf que titre aligné sur ilg donc valeur neg de 38 et 2*/
    top: -38px;
    position: relative;
}




.pour-qui h2{
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 30px;
    
}


@media screen and (min-width: 900px) {
    .pour-qui h2   {
        margin-top: 20%;
    } 
    
.pour-qui .ici h2{
     margin-top: 10%;

}
}

@media screen and (max-width: 900px) {
    .pour-qui article h2,
    .pour-qui article p{
        width: 100%;
        text-align: center;
        position: relative;
        float: left;
    }
    
    .pour-qui article h2{
      
         margin-top: 80px;
    }   
    .pour-qui article p{
         margin-bottom: 80px;
    }   
}

.cut{
    position: relative;
    width: 100%;
}


.cut img{
    width: 100%;
}

/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

APPROCHE

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.approche{
    background-color: #1BA363;
    text-align: center;
}


.approche h3{
    width: 100%;
    padding: 60px 0;
}

.white{
    color: #FFF;
}

.approche .spec{
    margin-bottom: 0;
}

#monapproche{ padding-bottom: 90px;}

#monapproche .test{
    margin-bottom: 40px;
}

/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

CONSULT

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/
#consultations{
    padding-top: 80px;
    padding-bottom: 70px;
}


#consultations h2{
    position: relative;
    top: -38px;
    margin-bottom: 2px;
}

@media screen and (max-width: 900px) {
 #consultations{
     padding-top: 0px;}  
    
    #consultations h2{
         top: 0px;
        margin-top: 40px;
        margin-bottom: 20px;
    }    
    
}



#consultations .prez h3{
    color: #E64892;
}


#consultations .prez h3{
    font-weight: 700;
text-transform: uppercase;
}

.gris{
    color: #575756;
}

#consultations a button{
    width: 410px;
    height: 70px;
    background-color: #E64892;
    border: none;
    color: #FFF;
   
    font-weight: 400;
    text-transform: uppercase;
    position: relative;
    margin-top: 48px;
}

@media screen and (max-width: 640px) {
    #consultations a button   {
         width: calc(100% - 70px);
    }
}


#consultations a button:after{
    content: "";
    background-image: url("images/btn-rose.svg");
    background-repeat: no-repeat;
    background-position: center center;
    width: 70px;
    height: 70px;
     position: absolute;
    right: -70px;
    top: 0;
 
}


#consultations a:hover button{
    background-color: #009EE1;
}

#consultations a:hover button:after{
     background-image: url("images/btn-bleu.svg");
}


/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

FOOTER

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/


footer{
    text-align: center;
    padding-top: 88px;
    padding-bottom: 70px;
    background-color: #FADB11;
    position: relative;
    float: left;
    width: 100%;

   
}

footer h2{
    margin-bottom: 30px;
}


footer h4,
footer p{
        line-height: 30px;
        font-weight: 400;
}

footer h3,
.tel{
        line-height: 30px;
    font-weight: 700;
}



.deco-basse{
    width: 100%;
    height: 40px;
    position: relative;
    float: left;
    background-position: left top;
    background-repeat: repeat-x;
    background-image: url("images/deco-basse.svg")
}
.ml{
    width: auto;
    height: 100%;
    position: relative;
    float: right;
    padding: 0 30px;
    box-sizing: border-box;
    padding-top: 10px;
    background-color: #FFF;
}

@media screen and (min-width: 460px) {
    .aurevoir{
        display: inline-block;
    }   
    .foot{
        display: none;
    }
}

@media screen and (max-width: 460px) {
    .aurevoir{
        display: none;
    }  
    
    .ml{
        width: 100%;
        text-align: center;
        margin-top: 40px;
        padding-bottom: 20px;
    }
    
    .foot{
        display: block;
    }
}


/*
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

TRANSITION

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/
#consultations a button,
#consultations a button:after
.menu a .colo{
 transition:.3s;   
    
    
}

#consultations a:hover button,
#consultations a:hover button:after,
.menu a:hover .colo{
  transition:.3s; 
    cursor: pointer;
    
    
}



header{
    position: relative;
    margin-top: 30px;
   
}



/*h1{
    order: 1;
    position: absolute;
    color: #FFF;
    top: 0;
    left: 0;
    z-index: 9999;
}*/


/*
@media screen and (min-width: 1160px) {
h1{
    width: 350px;
    background-color: pink;
    position: absolute;
    text-align: center;
    color: #FFF;
    top: 0;
    left: 50%;
    margin-left: -175px;
    z-index: 9999;
}
}*/