@charset "utf-8";
/*########################*/
/*########################*/
/*  ATCHOUM C.S.S. V0.1   */
/*######   STYLE   #######*/
/*#### PAGES DIVERSES ####*/
/*########################*/
/*########################*/


 h1
{
 padding:10px 5px !important ; 
  float:left;
  width:100%;
  /*! overflow:auto; */
}

#content-large-confirmer
{
 padding:4vmin 2vmin; 
  overflow:hidden;
}

/************************************************/
/************************************************/
/*PAGE MDP PERDU -- MODIFIER EMAIL / TEL / PASS */
/************************************************/
/************************************************/
#passShowHide{
  position:absolute;
  right:20px;
  top:0;
  z-index:24443;
  cursor:pointer;
  color:#999;
}

.form600px{
  border-left:none;
  border-right:none;
  padding:10px;
  width:600px;
  margin:20px auto 0;
}

.form600px input{
width:100%;
}
  
    
    .form600px .ligneForm{
margin:20px auto;
      position:relative;
}

.form600px .boutSubmit{
margin:20px auto;
  display:block;
}


#modifMDP a
{
  font-size:12px;
}




/************************************************/
/************************************************/
/*************** PAGE STANDARD ******************/
/************************************************/
/************************************************/


.boxSmall{
padding:0 10%;  
}


.pageColG{
	width:60%;
  float:left;
  margin: 20px 0  ;
  text-align:justify;
	}


.pageColG p, .pageColG img{
  margin:  0 0 20px;
    width:100%;
	}

.pageColD{
	width:34%;
  float:right;
    margin: 20px 0  ;

	}

.pageColD .fond-gris-clair{
padding:10px;

	}

.pageColD .txtIntroPage, .txtIntroPage2{
	padding:10px;	
  margin:10px 000;
  } 
  
.pageColD H3{
	margin:0;
	} 
.pageColD p{
	margin:0 0 10px;
	} 
  
 .pageColD .illusPage{
	width:100%;	}




/************************************************/
/************************************************/
/************* PAGE PARTENAIRES *****************/
/************************************************/
/************************************************/
.boxBleue{
  background:#C2D5DB;
    padding: 20px 10%;
  color:#14456B;
float:left;
  text-align:justify;
}

.boxBleueInner{
  background:#fff;
  padding:10px;
  width:calc(100% - 20px);
  float:left;
    margin:10px 0 0 ;
border-radius:5px;
}

.divTable{
  width:100%;
  float:left;
}

.divTableG{
  width:10%;
  float:left;
  font-size:44px;
}
.divTableD {
  width:90%;
  float:left;
}

.divTableD .txt-blanc{
padding:0 10px;
  border-radius:5px;
  font-size:1.2em;
}


.boxA{
  float:left;
    margin:0 0 40px 0;
}

.boxA-G{
  float:left;
 width:35%; 
}
.boxA-G img{
  float:left;
 width:100%; 
}

.boxA-D{
  float:left;
  width:65%;
}

.boxB{
  float:left;
    margin:0 0 40px 0;
width:100%;
}

.boxB-G{
  float:left;
width:calc(55% - 20px);
  padding:10px;
}

.boxB-G H1{
margin:0;
}

.boxB-D{
  float:left;
width:45%;
}

.boxB-D img{
width:100%;
}
.boxC{
  float:left;
    margin:0 0 40px 0;

}


.boxC-G{
  float:left;
width:calc(55% - 20px);
  padding:10px;
}

.boxC-G H1{
margin:0;
}

.boxC-D{
  float:left;
width:45%;
}
 .boxC-D .txt-vert{
 border:1px solid #37b397;
   padding:5px;
   transform:rotate(2.5deg)
}


.boxD{
  float:left;
    margin:0 0 40px 0;

}


.boxF{
  width:95%;
  margin:auto;
}
.boxF img{
  width:100%;
  
}

.boxF-G{
  width:50%;
  float:left;
  
}
.boxF img{
  width:100%;
  
}
.boxF-D{
  width:calc(50% - 20px);
  float:left;
  padding:10px;
}


.boxF-D ul {
margin:0;
padding:0;}


.boxF-D H1 {
margin:0;
padding:0;}


.boxF-D ul li{
  margin:5px 0;
}


.boxF-D ul li:before{
   content: '';
   display: inline-block;
   height: 25px;
   width: 25px;
   background-image: url('../img/icos/ico-main-bleue.png');
  background-size:90%;
  background-repeat:no-repeat;
  background-position:0 5px;
}

.boxG{
  
  background:#37b397;
  color:#fff;
text-align:center;
padding:20px;
position:relative;
top:-5px;
}
.boxH{
  position:relative;
  top:-5px;
  width:95%;
  margin:auto;
}

.boxH img{
  
  width:100%;
}




.boxI{
  width:100%;
  margin:auto;
}
.boxI img{
  width:100%;
  
}

.boxI-G{
  width:40%;
  float:left;
  position:relative;
}
.boxI-G img{
  width:50%;
  position:relative;
  left:35%;
}
.boxI-D{
  width:calc(50% - 20px);
  float:right;
  padding:10px;
}


.boxI-D ul {
margin:0;
padding:0;}


.boxI-D H1 {
margin:0;
padding:0;}


.boxI-D ul li{
  margin:5px 0;
}


.boxI-D ul li:before{
   content: '';
   display: inline-block;
   height: 25px;
   width: 25px;
   background-image: url('../img/icos/ico-main-bleue.png');
  background-size:90%;
  background-repeat:no-repeat;
  background-position:0 5px;
}


.boxI-D .fond-vert{
 
  padding:0 10px;
  border-radius:5px;
}
/************************************************/
/************************************************/
/*************** PAGE CONTACT *******************/
/************************************************/
/************************************************/

#contactBoxes
{
  position:relative;
  padding: 3vmin;
  background:#eee;
  margin:auto;
	overflow:auto;
}



/* CONTACT FORM */
#formContact{
  float:left;  padding:20px;
  margin:20px 0;
  background:#eee;
}


#formContact input, textarea{
  
  width:calc(100% - 22px);
  border:1px solid #ccc;
  padding:10px;
  float:left;
  margin:20px 0 20px 0;
  border-radius:5px;
}



#formContact textarea{
  
  width:calc(100% - 22px);
  border:1px solid #ccc;
  padding:10px;
  float:left;
  margin:20px  0 0;
  height:365px;
  resize:none;
}

#formContact input[type="submit"]{
  
  width:150px;
  border:1px solid #ccc;
  padding:10px;
  float:right;
  margin:10px 0% 0 0;
  background:#37B397;
  color:#fff;
  height:76px;
}








.formG{
  float:left;
 width:49%; 
  margin:0 0 0 0;
}

.formD{
  float:right;
 width:49%; 
  margin:0 0 0 0;
}


.contactBoxTitre
{
	font-size:5vw;
  margin: 2vmin 0;
}
.contactBoxTitre-confirmer
{
	font-size:4vw;
  margin: 2vmin 0;
}

#contactBoxes
{
  position:relative;
  padding: 3vmin;
  background:#eee;
  margin:auto;
	overflow:auto;
}


#contactBox-G
{
  width:64%;
  float:left;
  height:45vmin;
  padding:0 0 2.5%;
}

#contactBox-G-confirmer
{
	
  float:left;
  height:auto;
  padding:6vw 0;
  width:100%;
}

#msgBoxes
{
  position:relative;
  padding: 3vw;
  background:#eee;
  margin: 6vw auto;
	overflow:auto;
}


#msgBox-G
{
  width:64%;
  float:left;
  height:45vw;
  padding:0 0 2.5%;
}

#msgBox-G-confirmer
{
	
  float:left;
  height:auto;
  padding:6vw 0;
}

.contactBoxCell
{
  width:45%;
  width:calc(45% - 0.25vmin);
  float:left;
  padding:2.5%;
  text-align:center;
  font-size:3vmin;
}
.contactBoxCell-confirmer
{
  width:45%;
  width:calc(45% - 0.25vmin);
  float:left;
  padding:2.5%;
  text-align:center;
  font-size:3vmin;
}

.contactBoxCell:hover
{
  background:#DD0C1E;
 color:#fff;
}
.contactBoxCell-G{
  border-right:0.5vmin solid #fff;
  }

.contactBoxCell img
{
  width:auto;
	height:15vmin!important;
  display:block;
	margin:auto;
}

.contactBoxCell-confirmer img
{
  width:auto;
  height:20vmin!important;
  display:block;
  margin:auto;
}
.contactBoxCell span
{
  display:block;
	clear:both;
}


#contactBox-D
{
	width:32%;
  float:right;
  height:45vmin;
  padding: 0 0 2.5%;
}
#contactBox-D a
{
 
  display:block;
	  padding:2.5%;
  text-align:center;
  font-size:3vmin;
}

#contactBox-D a:hover
{
 
color:#fff;
}
#contactBox-D img
{
  width:auto;
	height:15vmin!important;
  display:block;
	margin:auto;
}


/* PAGE STANDARD */
 
#pageStdColG
{
 	width:35%;
display:inline-block;

  overflow:hidden;
}

#pageStdColG img
{
 width:100%;
	border:1px solid #ccc;
  margin-top:2.5vmin;
}

#pageStdColD
{	
  float:right;

    overflow:hidden;

}


/* PAGE STANDARD 2 */


#ulArticles li
{
float:left;
margin: 3vmin 0 0;  
}


.liArticleG
{
 width:35%;
  float:left;
}


.liArticleG img
{
 width:100%;
  float:left;
}



.liArticleD
{
 	width:calc(65% - 2vmin);;
  float:left;
  padding:0 1vmin;
}


.liArticleD h3, .liArticleD h2
{
margin:0 0 1vmin;
}

/* TEMOIGNAGES */


#ulTemoignages li
{
  border-bottom:2px dotted #333;
  padding:2vmin 0;
  clear:both;
  overflow:hidden;
}


.liTemoignageG
{
 width:15%;
  float:left;
}


.liTemoignageG img
{
 width:90%;
  float:left;
}



.liTemoignageD
{
 	width:calc(85% - 2vmin);
  float:left;
  padding:0 1vmin;
}


.temoignage-nom
{

}


/* FAQ */

#liFaq li
{
  border-bottom:2px dotted #333;
  padding:2vmin 0;
  clear:both;
  overflow:hidden;
}

/* AUTRES PAGES */


#ulPage li
{
  border-bottom:2px dotted #333;
  padding:2vmin 0;
  clear:both;
  overflow:hidden;
}


.liPageG
{	margin: 2vmin 0 ;  

 width:15%;
  float:left;
}


.liPageG img
{
 width:90%;
  float:left;
}


.illus-conducteur-2{

	width:80% !important;
}


.liPageD
{	margin: 2vmin 0 ;  

 	width:calc(85% - 2vmin);
  float:left;
  padding:0 1vmin;
}

.liPageD .titre-Page
{
color:#37B397;
  font-weight:bold;
}



.boxCol
{
	width:100%;
  float:left;
	margin:2vw 0 0 ;
}

.boxColG
{
	width:20%;
  float:left;
}


.boxColG img
{
	height:10vw;
  
}

.boxColD
{
padding:1vw;
  float:left;
  width:calc(80% - 2vw)
}

/***** RECAPITULATIF TRAJET *****/
/********************************/

.tableauTrajet{
  width:calc(100% - 22px);
  background:#eee;
  float:left;
  display:;
  justify-content:space-between;
  border:1px solid #ccc;
  margin:40px 0;
  padding:10px;
  position: relative;
}
.tableauCol{
  padding:0;
   min-width:30%; 
  float:left;
}

.tableauCol li{
border-bottom:1px solid #ccc;
  padding:10px 0;
  min-height:40px;
}


.tableauCol li img{
width:30px;
height:auto;
}

.caracterIco{
  font-size:30px;
  font-weight:bold;
}
.icoOuter{
  width:40px;
  display:inline-block;
}

.conducteurNomOuter{
  width:100% !important;
  float:left;
  text-align:center;
  font-size:24px;
}
.conducteurNom{
color:#14456B;
  font-weight:bold;
}
.mentionCB{
position:relative;
  bottom:auto;
  right:auto;
  left:auto;
  text-align:justify;
    clear:both;
  padding: 10px
}
.mentionCB .icoOuter{
margin:0 10px;
  
}
.mentionCB .icoOuter {
margin:0 20px 0 0;
  
}

.mentionCB .icoOuter img{
  
  width:50px;
  margin-right:20px;
}
.avertissements{
position:absolute;
  top:-65px;
  width:990px;
}
/***** BOX CONDUCTEUR *******/
.conducteurPhoto{
  width:250px;
  height:250px;
  margin:20px auto;
  border-radius:10000px;
  overflow:hidden;
  border:2px solid #ccc;
}

.conducteurPhoto img{
  width:100%;
  height:auto;
  margin: auto;
  border-radius:10000px;
  overflow:hidden;
  
}
.conducteurPhoto .st0{
fill:#ccc;
}

.selectionJoursCovoituragePlanifie{
  float:left;
  width:600px;
}
.selectionJoursCovoituragePlanifie ul {
 margin: auto;
 padding: 0;
 overflow: hidden;
 width: 100%;
}
.selectionJoursCovoituragePlanifie ul li {
 float: left;
 width: calc(12.5% - 2px);
 height: 40px;
 margin: 1px;
 padding: 0;
 text-align: center;
 background: #eee;
 line-height: 16px;
 position: relative;
  font-size:0.8em;
}
.selectionJoursCovoituragePlanifie ul li .resetInput {
 font-size: 0.65em;
 background: none;
 color: #fff;
 cursor: pointer;
 text-transform: uppercase;
 position: absolute;
 width: 15px;
 height: 15px;
 right: 0;
}
.selectionJoursCovoituragePlanifie ul li .resetInput:hover {
 background: white;
 color: black;
}
.selectionJoursCovoituragePlanifie ul li input {
 font-size: 1em;
 background: #31BA9C;
 color: #fff;
 width: calc(100% - 2px);
 text-align: center;
 height: 100%;
}
.selectionJoursCovoituragePlanifie .ligneForm {
 border: 1px solid #ccc;
 margin: 10px 0;
 background: #EEEEEE;
 border-radius: 5px;
 padding: 5px;
 width: calc(100% - 10px);
}

.selectionJoursCovoituragePlanifie .inputDate {
 margin: 0px 20px 0;
 border: 1px solid #ccc;
 padding: 5px 5px 5px 25px;
 border-radius: 5px;
 width: 100px;
}
/*******************************************/
/*******************************************/
/*******************************************/
/********* RESPONSIVE FORMAT MOBILE ********/
/*******************************************/
/*-*****************************************/
@media screen and (max-width: 768px) {
  #content-large {
  width:95%;
    margin:0 auto;
    float:none !important;
    display:block;
  }

  #content-large h1 {
    padding: 0 0;
    overflow: hidden;
    font-size:9vw ;
    margin:4vw 0;
}

  H1 { 
  color:#fff;
    text-align:left;
  }  
.titre-vert{
	font-size:15vw !important;
}
.txt-vert{
	font-size:7.5vw;
	text-align:left;
}

.boutInscription{
	 background: #E3A52D !important;
    color: #fff;
    padding: 1vw;
    margin: 2vw 0;
    width: calc(100% - 2vw);
    display: block;
    text-align: center;
    border-radius: 2vw;
    }
  

  
  .pageColG,  .pageColD{
    
      width:95%;
      color:#fff;
      margin:auto;
      overflow:hidden;
      float:none;
    }
  

  .pageColD{

      margin:0 auto 2vw !important;

    }
    
      .pageColG img,  .pageColD img{
	background:#fff;
    }
    
.illusSVG
      {
      background:#fff;
  
      }

.boxCol
{
	width:100%;
  float:left;
	margin:3vw 0 0 ;
}

.boxColG
{
	width:100%;
  height:18vw;
  overflow:hidden;
  float:left;
}

.titre-vert
{
    text-align:center;
    color:white;
    font-size:8vh;
}
.boxColG img
{
	height:100%;
  background:none;
}

.boxColD
{
padding:4vw;
  float:left;
  width:calc(100% - 8vw);
}

.fond-gris-clair{
  color:#666;
  }
  
/************************************************/
/************************************************/
/*************** PAGE CONTACT *******************/
/************************************************/
/************************************************/


#contactBoxes
{
  position:relative;
  padding: 2vw;
  background:#eee;
  margin: 2vw auto;
	overflow:hidden;
  width:calc(100% - 8vw);
}


/* CONTACT FORM */
  
#formContact{
  float:none;  
  padding:4vw;
  margin:4vw auto;
  width:calc(100% - 12vw);
  overflow: hidden;
}


#formContact input, textarea{
  width:calc(100% - 4vw);
    padding:2vw;
  float:left;
  margin:2vw 0 2vw  0;
  border-radius:1w;
}



#formContact textarea{
  
  width:calc(100% - 4vw);
    padding:2vw;
  border:1px solid #ccc;
  padding:2vw;
  float:left;
  margin:2vw  0 0;
  height:62vw;
  resize:none;
}

#formContact input[type="submit"]{
  width:calc(100% - 0vw);
  padding:2vw;
  float:left;
  margin:4vw 0 2vw 0;
  background:#37B397;
  color:#fff;
}

#formContact input[type="submit"]:hover{
  margin:4vw 0 2vw 0;

  background:#666;
}

.formG{
  float:left;
 width:100%; 
  margin:0 0 0 0;
}

.formD{
  float:right;
 width:100%; 
  margin:0 0 0 0;
}
  
  
  
  
.contactBoxTitre
{
	font-size:6vw;
  margin: 2vw 0;
}
.contactBoxTitre-confirmer
{
	font-size:8vw;
  margin: 2vw 0;
}
#contactBox-G
{
  width:100%;
  float:left;
  height:auto;
  padding:0 0;
}

#contactBox-G-confirmer
{
	
  float:left;
  height:auto;
  padding:0 0 ;
}



.contactBoxCell
{
  width:calc(100% - 5%);
  float:left;
  padding:2.5%;
  text-align:center;
  font-size:5vw;
  border-bottom:2vw solid #fff;
}
.contactBoxCell-confirmer
{
  width:calc(100% - 5%);
  float:left;
  padding:2.5%;
  text-align:center;
  font-size:5vw;
}

.contactBoxCell:hover
{
  background:#DD0C1E;
 color:#fff;
}
.contactBoxCell-G{
  border-right:0.5vw solid #fff;
  }

.contactBoxCell img
{
  width:auto;
	height:15vw!important;
  display:block;
	margin:auto;
}

.contactBoxCell-confirmer img
{
  width:auto;
  height:20vw !important;
  display:block;
  margin:auto;
}
.contactBoxCell span
{
  display:block;
	clear:both;
}


#contactBox-D
{
	width:100%;
  float:right;
  height:auto;
  padding: 0 0 2.5%;
}
#contactBox-D a
{
 
  display:block;
	  padding:2.5%;
  text-align:center;
  font-size:5vw;
}

#contactBox-D a:hover
{
 
color:#fff;
}
#contactBox-D img
{
  width:auto;
	height:15vw!important;
  display:block;
	margin:auto;
}


#pageStdColD{
width:calc(95% - 4vw);
  margin:auto;
  float:none;
  padding:2vw;
  color:#fff;
}
  
/*PAGE PERDU MDP */  

.form600px{
  border-left:none;
  border-right:none;
  padding:10px;
  width:95%;
  margin:20px auto 0;
}

.form600px input{
width:100%;
}
  
    
    .form600px .ligneForm{
margin:4vw auto;
      position:relative;
}

.form600px .boutSubmit{
margin:4vw auto;
  display:block;
}


#modifMDP a
{
  font-size:4vw;
}
  
  
    #passShowHide {
    position: absolute;
    right: 4vw;
    top: 2vw;
    z-index: 3;
    cursor: pointer;
    color: #999;
    font-size:4vw;
}
  
  
  /* PAGE RIB*/
  

/* CONTACT FORM */
#formContactRib,
#formAffichetRib{
  float:left;  
  padding:2vw ;
  margin: 2vw 0 0;
  background:#eee;
  width:calc(100% - 4vw);
}


#formAffichetRib{
  
}
.formIBAN{
  float:left;
}



.formTitulaire{
float:right;
clear:both;
  width:100%;
}

#formContactRib input, #formContactRib textarea,
#formAffichetRib input, #formAffichetRib textarea {
  border:1px solid #ccc;
  padding:1vw;
  border-radius:5px;
  display: inline-block;
  width: calc(50% - 4vw - 2px);
  margin: 2vw 0 ;
  font-size:8vw;
 
}
.spanIBAN, .spanBIC, .spanTitulaire
  {
    display:block;
    width:100%;
   font-size:8vw; 
  }

#formAffichetRib input, #formAffichetRib textarea {
background:#555;
  color:#fff;
   width: calc(50% - 4vw - 2px);

}

  .formTitulaire input{
float:left;
clear:both;
  width:calc(100% - 4vw) !important;
}
  
  
.formBIC{
  
float:left;
width:100%;
margin:2vw 0 0;
}
.inputFormRibBic{
  width: calc(100% - 4vw) !important ; 
}

.inputFormRibNom{
  width: calc(100% - 4vw) !important ; 
}

#formAffichetRib h3,
#formContactRib H3{
  margin:0 0 2vw
    ;width:100%;
  font-size:9.5vw;
  text-align:center;
  
}

#formContactRib .txt-s{
display:none;
}


#formContactRib textarea{
  
  width:calc(100% - 22px);
  border:1px solid #ccc;
  padding:2vw;
  float:left;
  margin:2vw  0 0;
  height:auto;
  resize:none;
}

#formContactRib input[type="submit"]{
  
  width: calc(100% - 2vw) !important ; 
  border:1px solid #ccc;
  padding:2vw;
  margin:2vw 0;
  background:#37B397;
  color:#fff;
  display:inline-block;
}


#formContact iframe{
  position: relative;
  top: 10px;
    float:left;
}

  
  
/***** RECAPITULATIF TRAJET *****/
/********************************/

.tableauTrajet{
  width:calc(100% - 4vw);
  background:#eee;
  float:left;
  display:block;
  /*! justify-content:space-between; */
  border:1px solid #ccc;
  margin:0 0;
  padding:2vw;
  position: relative;
}
.tableauCol{
  padding:0;
  width:100% !important;
  float:left;
  clear: both;
  display: block;
  margin:0;
}

.tableauCol li{
border-bottom:1px solid #ccc;
  padding:2vw 0;
  height:auto;
}


.tableauCol li img{
width:6vw;
height:auto;
}

.caracterIco{
  font-size:6vw;
  font-weight:bold;
}
.icoOuter{
  width:8vw;
  display:inline-block;
}

.conducteurNomOuter{
  width:100% !important;
  float:left;
  text-align:center;
  font-size:8vw;
}
.conducteurNom{
color:#14456B;
  font-weight:bold;
}
.mentionCB{
position:relative;
 bottom: auto;
left: auto;
  
}
.mentionCB .icoOuter{
margin:0;
  
}

.avertissements{
position:relative;
  top:auto;
  width:100%;
  float:left;
  background:#fff;
}
  .ligneTrajetForm {
    width: 100%;
    padding: 0 !important;
    margin: 0 0;
}
  .ligneTrajetForm form {
    width: calc(100% - 4vw + 2px);
    float: left;
    margin-left: 0;
    padding:2vw;
    position: relative;
    background:#fff;
}
  
  [type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label {
    position: relative;
    padding-left: 8vw;
    cursor: pointer;
    font-size: 5vw !important;
}
/***** BOX CONDUCTEUR *******/
.conducteurPhoto{
  width:50vw;
  height:50vw;
  margin:20px auto;
  border-radius:10000px;
  overflow:hidden;
  border:2px solid #ccc;
}
  
.conducteurPhoto img{
  width:100%;
  height:auto;
  margin: auto;
  border-radius:10000px;
  overflow:hidden;
  
}
.conducteurPhoto .st0{
fill:#ccc;
}
  
  
  .boxBleue{
  background:#C2D5DB;
    padding: 0 2vw;
  color:#fff;
float:left;
  text-align:left;
    width:calc(100% - 4vw);
}

.boxBleueInner{
  background:#14456B;
  padding:2vw;
  width:calc(100% - 4vw);
  float:left;
    margin:2vw 0 0 ;
border-radius:1vw;
}

.boxBleueInner  img{
  width:100%;
 
}
  
.divTable{
  width:100%;
  float:left;
}

.divTableG{
  width:10%;
  float:left;
  font-size:8vw;
}
.divTableD {
  width:90%;
  float:left;
}

.divTableD .txt-blanc{
padding:0 2vw;
  border-radius:1vw;
  font-size:6vw;
  clear:both;
  display:inline;
   line-height:10vw;

}


.boxA{
  float:left;
    margin:0 0 4vw 0;
}

.boxA-G{
  float:left;
 width:35%; 
}
.boxA-G img{
  float:left;
 width:0%; 
}

.boxA-D{
  float:left;
  width:100%;
}

.boxB{
  float:left;
    margin:0 0 4vw 0;
width:100%;
}

.boxB-G{
  float:left;
width:calc(100% - 4vw);
  padding:2vw;
}

.boxB-G H1{
margin:0;
}

.boxB-D{
  float:left;
width:100%;
}

.boxB-D img{
width:100%;
}
.boxC{
  float:left;
    margin:0 0 4vw 0;

}


.boxC-G{
  float:left;
width:calc(100% - 4vw);
  padding:2vw;
}

.boxC-G H1{
margin:0;
}

.boxC-D{
  float:left;
width:100%;
}
 .boxC-D .txt-vert{
 border:1px solid #37b397;
   padding:2vw;
   transform:rotate(2.5deg)
}


.boxD{
  float:left;
    margin:0 0 4vw 0;
}


.boxD img{
margin:0;
  padding:0;display:none;
}

.boxE img{
  width:100%;
margin:0;
  padding:0;
}
.boxF{
  width:100%;
  margin:auto;
  color:#fff;
}
.boxF .font-wasted{
    color:#fff;
  }
.boxF img{
  width:100%;
  
}

.boxF .txt-gris-clair{
color:#fff;  
}

  
.boxF-G{
  width:100%;
  float:left;
  
}
.boxF img{
  width:100%;
  
}
.boxF-D{
  width:calc(100% - 4vw);
  float:left;
  padding:2vw;
}


.boxF-D ul {
margin:0;
padding:0;}


.boxF-D H1 {
margin:0;
padding:0;}


.boxF-D ul li{
  margin:1vw 0;
}


.boxF-D ul li:before{
   content: '';
   display: inline-block;
   height: 4vw;
   width: 4vw;
   background-image: url('../img/icos/ico-main-bleue.png');
  background-size:90%;
  background-repeat:no-repeat;
  background-position:0 1vw;
}

.boxG{
  
  background:#37b397;
  color:#fff;
text-align:center;
padding:2vw;
position:relative;
top:-1vw;
}
.boxH{
  position:relative;
  top:-1vw;
  width:100%;
  margin:auto;
}

.boxH img{
  
  width:100%;
}




.boxI{
  width:100%;
  margin:auto;
}
.boxI img{
  width:100%;
  
}

.boxI-G{
  width:100%;
  float:left;
  position:relative;
}
.boxI-G img{
  width:100%;
  position:relative;
  left:0%;
}
.boxI-D{
  width:calc(100% - 4vw);
  float:right;
  padding:2vw;
  color:#fff;
}


.boxI-D ul {
margin:0;
padding:0;}


.boxI-D H1 {
margin:0;
padding:0;}


.boxI-D ul li{
  margin:5px 0;
}


.boxI-D ul li:before{
   content: '';
   display: inline-block;
   height: 25px;
   width: 25px;
   background-image: url('../img/icos/ico-main-bleue.png');
  background-size:90%;
  background-repeat:no-repeat;
  background-position:0 5px;
}


.boxI-D .fond-vert{
 
  padding:0 10px;
  border-radius:5px;
}
  
  
  .boxSmall {
    padding: 0 4vw;
    color: #fff;
}
}