/*----RESPONSIVE SCREEN > 768------- */

@font-face {
    font-family: 'evogriaregular';
    src: url('/polices/evogria-webfont.eot');
    src: url('/polices/evogria-webfont.eot?#iefix') format('embedded-opentype'),
         url('/polices/evogria-webfont.woff2') format('woff2'),
         url('/polices/evogria-webfont.woff') format('woff'),
         url('/polices/evogria-webfont.ttf') format('truetype'),
         url('/polices/evogria-webfont.svg#evogriaregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {
  box-sizing: border-box;                                                                     /* bordure et padding à l'interieur de la boite */
}

html{
  height: 100%;
}

body {
  font-family: "Verdana", Verdana, sans-serif ! important;
  color: black;
  height: 100%;
  margin: 0 ;
  font-size: 1em;
}

img, table, blockquote, code, pre, textarea, input, iframe, object, embed, video {        /* empeche de deborder du bloc */
    display: block;
    max-width: 100%;

}
h1, h2, h3 {
  font-size: 1em;
  font-weight: normal;
  padding: 0em;
  margin: 0em;
}

ul {                                                                                            /* tous les ul à zero */
  list-style-type: none;              
  margin: 0;
  padding: 0;
  
}

 input {
    position: absolute;
    left: -9999px;
  }

  a:active {
    color: #E32A18;
  }

  a {
    text-decoration: underline;
    color: black;
  }

#bloc_page{
  position:relative;
  max-width: 1400px;
  height: 100%;
  margin: auto;
  padding:0 0 2em 0;
}

.fond_transparent {
  background-color: rgba(255, 255, 255, 0.8);
}

.fond_transparent_noir {
  background-color: rgba(0, 0, 0, 0.5);
}

/* 
HH  HH  EEEEEE    A      DDDD    EEEEEE  RRRR
HH  HH  EE       A A     DD  DD  EE      RR  RR
HHHHHH  EEEEEE  AAAAA    DD  DD  EEEEEE  RR RR
HH  HH  EE     AA   AA   DD  DD  EE      RRRR
HH  HH  EEEEEEAA     AA  DDDD    EEEEEE  RR  RR 
*/

header {                      /* en ligne */
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  min-width:320px;  
   /* border: 1px solid gainsboro; */
}

#boite_logo { 
  -webkit-flex: 1 1 auto;  
      -ms-flex: 1 1 auto;  
          flex: 1 1 auto;
  
  display: -webkit-flex;  
  display: -ms-flexbox;  
  display: flex;

  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;

  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  
  height: 12em;                                    /* la boite a hauteur fixe */    
  /* border: 1px solid gainsboro; */
}

#logo {
  width: 80%;
  max-width: 230px;
  height: 80%;
  /* border: 1px solid gainsboro; */
} 

#logo img {
  width: 100%;
  height: 100%;
  border: 0;
  /* border: 1px solid gainsboro;*/
} 

.naturellement_RGE {
  position: absolute;
  width: 20vw;
  max-width: 12em;
  min-width: 9em;
  top :7em;
  left: 20%;
  -webkit-transform: rotate(-20deg);
          transform: rotate(-20deg);
}

/*
#####  ######  ####  #####   ####  #    #  ####  # #    # ###### 
 #    # #      #      #    # #    # ##   # #      # #    # #      
 #    # #####   ####  #    # #    # # #  #  ####  # #    # #####  
 #####  #           # #####  #    # #  # #      # # #    # #      
 #   #  #      #    # #      #    # #   ## #    # #  #  #  #      
 #    # ######  ####  #       ####  #    #  ####  #   ##   ######
 */

/* ---- RESPONSIVE < 768 ----- */
@media all and (max-device-width: 768px) {
  .naturellement_RGE {
  left: 30%;
  }

}

/*
 #    #   ##   #    # #  ####    ##   ##### #  ####  #    # 
 ##   #  #  #  #    # # #    #  #  #    #   # #    # ##   # 
 # #  # #    # #    # # #      #    #   #   # #    # # #  # 
 #  # # ###### #    # # #  ### ######   #   # #    # #  # # 
 #   ## #    #  #  #  # #    # #    #   #   # #    # #   ## 
 #    # #    #   ##   #  ####  #    #   #   #  ####  #    # 
 */
nav {
  -webkit-flex: 2 2 auto;
      -ms-flex: 2 2 auto;
          flex: 2 2 auto;
  
  display: -webkit-flex;  
  display: -ms-flexbox;  
  display: flex;

  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;

  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;

  -webkit-align-items: start;
      -ms-flex-align: start;
          align-items: start;
}

#boite_nav_screen ul {                          /* li en ligne */
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;  
  
    -webkit-flex-direction: row;  
        -ms-flex-direction: row;  
            flex-direction: row;

    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;          /* calé à droite de ul */

    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;            /* calé en haut de ul */
    
  margin-top: 10em;                             /* un marge du haut pour décaler la boite des ul*/                
}

#boite_nav_mobile {                             /* OFF menu pour les mobiles */
  display: none;
}

nav li {
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  
  height : 4em;                                 /* hauteur depassante bordures gauche des li */
  margin-right: 1em;                            /* marge droite entre li */
  padding-left: .1em;
  border-left: 1px solid grey;                  /* bordure gauche en screen */
}

nav a {
  font-family: 'evogriaregular', sans-serif;
  font-size: 1em;
  color: #888888;                                /* lien gris */
  text-decoration: none ! important;
  margin: 0px;
  padding: 2px 2px 0 2px;
}

nav a[href*="projets"]:hover {
    color:  #E32A18;
    border : 1px solid #E32A18;
    padding: 2px 1px 0 1px;
}

nav a[href*="renovation"]:hover {
    color:  #EA5B0C;
    border : 1px solid #EA5B0C;
    padding: 2px 1px 0 1px;
}

nav a[href*="copropriete"]:hover {
    color:  #1f5a2a;
    border : 1px solid #1f5a2a;
    padding: 2px 1px 0 1px;
}

nav a[href*="agence"]:hover {
    color:  #2F64A3;
    border : 1px solid #2F64A3;
   padding: 2px 1px 0 1px;
}

nav a[href*="actualites"]:hover {
    color:  #558800;
    border : 1px solid #558800;
    padding: 2px 1px 0 1px;
}

nav a[href*="contactez"]:hover {
    color:  black;
    border : 1px solid black;
    padding: 2px 1px 0 1px;
}

.page_active a[href*="index"] {
    border : 1px solid #404040;
     color:#404040;
    padding: 2px 1px 0 1px;
}

.page_active a[href*="projets"] {
    border : 1px solid #E32A18;
    color:#E32A18;
    padding: 2px 1px 0 1px;
}

.page_active a[href*="renovation"] {
    border : 1px solid #EA5B0C;
    color:#EA5B0C;
    padding: 2px 1px 0 1px;
}

.page_active a[href*="copropriete"] {
    border : 1px solid #1f5a2a;
    color:#1f5a2a;
    padding: 2px 1px 0 1px;
}

.page_active a[href*="agence"] {
    border : 1px solid #2F64A3;
    color:#2F64A3;
    padding: 2px 1px 0 1px;
}

.page_active a[href*="actualites"] {
    border : 1px solid #558800;
    color:#558800;
    padding: 2px 1px 0 1px;
}

.page_active a[href*="contactez"] {
    border : 1px solid black;
    color:black;
    padding: 2px 1px 0 1px;
}



/* ---- RESPONSIVE < 768 ----- */



@media all and (max-device-width: 768px) {

  #boite_logo {
    -webkit-flex: 1 1 0px;  
      -ms-flex: 1 1 0px;  
          flex: 1 1 0px;
  }

  nav {
    -webkit-flex: 1 1 0px;
        -ms-flex: 1 1 0px;
            flex: 1 1 0px;
  }

  #boite_nav_screen {                     /* OFF menu pour le menu screen */
    display: none;
  }
  
  #boite_nav_mobile {
    display: -webkit-flex;       
    display: -ms-flexbox;       
    display: flex;

    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;       /* tout en colonne */

    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;  /* calé en haut */
    
    min-width: 10.5em;                       /* largeur du bloc */
    height: 12em;
    margin-top: 3em;
    margin-left: 0em;                     /* décalage gauche */
    border-left: 1px solid grey;          /* bordure gauche */
  }
  
  #boite_nav_mobile li {                  /*toutes les lignes des menus */
    -webkit-flex: 0 0 1;
        -ms-flex: 0 0 1;
            flex: 0 0 1;
    
    height : 2em;                         /* limitation de la hauteur */
    margin-right: 0;                     /* suppression des marges droite li */        
    font-family: 'evogriaregular', sans-serif;
    font-size: 1em;
    color: #888888;
    border: none;                         /* OFF pour les bordures des li */
  }
  
  #sous_menu {
    display: none;                        /* OFF pour le sous menu */
    position: relative;
    z-index: 2;
  }  
   
  #boite_nav_mobile li:hover, #boite_nav_mobile li:focus {
    color:  black;
  }

  input:checked ~ #sous_menu {
    display: block;
  }
}

/* ---- RESPONSIVE < 420 ----- */
@media all and (max-device-width: 420px) {

  }

  /* 
########  #######   #######  ######## ######## ########  
##       ##     ## ##     ##    ##    ##       ##     ## 
##       ##     ## ##     ##    ##    ##       ##     ## 
######   ##     ## ##     ##    ##    ######   ########  
##       ##     ## ##     ##    ##    ##       ##   ##   
##       ##     ## ##     ##    ##    ##       ##    ##  
##        #######   #######     ##    ######## ##     ## 
*/

#adresse{
  position:relative;
  bottom: 0;
  width: 100%;
  font-size: .5em;
  color: #888;
  text-align: center;
  padding: 5em 0.5em 1em 0.5em;
}

#adresse .agence{
  font-family: 'evogriaregular', sans-serif;
  color: #666;
}
  
/* 
#### ##    ## ########  ######## ##     ## 
 ##  ###   ## ##     ## ##        ##   ##  
 ##  ####  ## ##     ## ##         ## ##   
 ##  ## ## ## ##     ## ######      ###    
 ##  ##  #### ##     ## ##         ## ##   
 ##  ##   ### ##     ## ##        ##   ##  
#### ##    ## ########  ######## ##     ## 
*/

/* ----------------bannière ------------------------------*/

#banniere {
   position: relative;            /* pour mettre un z */
   z-index: 0;
   /* border: 1px solid gainsboro; */
}

#titre_image_index {
  /*display: none;*/
  position: absolute;
  width: calc(100% - 30.3em);    /*valeur fixe à revoir en fonction du menu */
  left: 0;
  top: 0;
  border: 1px solid white;
}

#titre_image_index h1 {
  font-family: 'evogriaregular', sans-serif;
  vertical-align: top;
  font-size: 1.5em;
  line-height : 1.5em;
  color: black;
  padding: 0em;
  margin: -0.35em 0em 0em -0.1em;
}

#titre_image_index h2 {
  font-size: .7em;
  padding: 0em;
  margin: 0em;
  color: white;
  background-color: black;
}

#texte_image_index{
  display: block;
  position: absolute;  
  width: 30.3em;                /*valeur fixe à revoir en fonction du menu */
  right: 0;
  bottom: 0;
}

#texte_image_index p, #texte_image_index a {
  font-size: .7em;
  padding: 1em .7em;
  margin: 0em;
  color: white;
}

#texte_image_index a {
  font-size: .7em;
  text-decoration: underline;
  color: black;
}

#banniere:hover #titre_image_index, #banniere:hover #texte_image_index{     /* fait apparaitre le titre et les paragraphes sur les images */
  display: block;
}

/* ---- RESPONSIVE < 768 ----- */
@media all and (max-device-width: 768px) {
  
  #titre_image_index {
     width: calc(100% - 10.5em);    /*valeur fixe à revoir en fonction du menu */
  }

  #titre_image_index h1 {  
    font-size: .7em;  
  }

  #titre_image_index h2 {
    font-size: .7em;
  }

  #texte_image_index{
    width: 10.5em;                /*valeur fixe à revoir en fonction du menu */
  display: none;
  }

  #texte_image_index p {
    font-size: .5em;
    padding: .7em .5em;
  }
}

/* 
   ##   #####  ##### #  ####  #      ######  ####  
  #  #  #    #   #   # #    # #      #      #      
 #    # #    #   #   # #      #      #####   ####  
 ###### #####    #   # #      #      #           # 
 #    # #   #    #   # #    # #      #      #    # 
 #    # #    #   #   #  ####  ###### ######  ####  
                                                   
                                                   
 # #    # #####  ###### #    #                     
 # ##   # #    # #       #  #                      
 # # #  # #    # #####    ##                       
 # #  # # #    # #        ##                       
 # #   ## #    # #       #  #                      
 # #    # #####  ###### #    #     
 */

#articles_index {                         /* section */
  margin: 50px ;                           /* marges au pourtour valant retrait en projet li */
  margin-top: 0 ;
}

#conteneur_articles_index{                         
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

  -webkit-flex-direction: row;  
        -ms-flex-direction: row;  
            flex-direction: row;

  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;

  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;

  -webkit-align-items:flex-start;
      -ms-flex-align:start;
          align-items:flex-start;

  min-width:320px;
  margin-left: -50px;                     /* marges à gauche valant retrait et calcul pour les articles */
}

#conteneur_articles_index article {
  position: relative;

  -webkit-flex: 0 0 auto;                 /* 0% pour le bug de IE */
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;

  margin-left: 50px;
  margin-top: 50px;
  width: calc(33.333% - 50px);
  border-bottom: 1px solid #ccc;
}

#conteneur_articles_index .double_largeur {
  width: calc(66.667% - 50px);
}

#conteneur_articles_index .double_largeur .texte_articles {
  -webkit-columns: 2;
      -moz-columns: 2;
          columns: 2;
  -webkit-column-gap : 20px;
     -moz-column-gap : 20px;
          column-gap : 20px;  
}

#conteneur_articles_index article .titre_articles {
  width: 100%;
  border: 1px solid black;
  margin-bottom: 0.2em;
}

#conteneur_articles_index article .titre_articles h1 {
  width: calc( 100% - 5em );
  font-family: 'evogriaregular', sans-serif;
  font-size: 1.5em;
  line-height : 1em;
  padding: 0em ;
  margin: -0.1em 0em 0em -0.1em;
}

#conteneur_articles_index article .titre_articles h2 {
  font-size: .7em;
  padding: 0em 0.2em 0.2em 0.2em;
  margin: 0;
}

#conteneur_articles_index article .titre_articles .date_articles {
  position: absolute;
  top:0px;
  right: 0px;
  font-size: .7em;
  margin: -0.1em 0em 0em -0.1em;
}

#conteneur_articles_index article img.image_brute {
  display:inline;
  width: auto;
  height: auto;  
}

#conteneur_articles_index article img {
  width: 100%;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}

#conteneur_articles_index article img:hover {
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
}

#conteneur_articles_index article .texte_articles {
  font-size: .7em;
}

#conteneur_articles_index article .texte_articles p,{
  padding: 0.5em 0em;
  margin: 0;
}



/* ---- RESPONSIVE < 768 ----- */



@media all and (max-device-width: 768px) {
  
  #conteneur_articles_index article {
  width: calc(50% - 50px);
  }

  #conteneur_articles_index article .titre_articles {
  position: relative;
  }
    
}


/* ---- RESPONSIVE < 420 ----- */



@media all and (max-device-width: 420px) {
  
  #conteneur_articles_index article {
    width: calc(100% - 50px);
  }

  #conteneur_articles_index .double_largeur {
    width: calc(100% - 50px);
  }
  
}


/*
###       #######   ##
##        ##   ##   ##
##        ##   ##   ##
##  ##    ##   ##   ##  ##
########  ##   ##   ########
    ##    #######      ## 
*/

#erreur_404 {       /*section*/
  width: 100%;
  position: relative;
}

#erreur_404 img {  
  width:40%;
}

#erreur_404 > div {  
  display:block;
  position: absolute;
  right:0;
  top:30%;
  width:60%;
}

#erreur_404 p {  
  font-family: 'evogriaregular', sans-serif;
  font-size: 1.2em;
  line-height : 1em;
  text-align: center;
  padding: 1em;
  margin:0;
}

#erreur_404 a {
  display:block;
  font-family: 'evogriaregular', sans-serif;
  font-size: 1.2em;
  text-align: center;
  padding: 1em ;
}

#erreur_404 ~ footer {
  position: relative;
  top: 20%;
}

/* -----------responsive ----------*/

/* ---- RESPONSIVE < 768 ----- */
@media all and (max-device-width: 768px) {
    #erreur_404 p {  
    font-size: 1em;
  }

  #erreur_404 a {
    font-size: 1em;
  }
}

/* ---- RESPONSIVE < 420 ----- */
@media all and (max-device-width: 420px) {
  #erreur_404 p {
    font-size: .8em;
  }

  #erreur_404 a {
    font-size: .8em;
  }
  
}

/*   ###    ########  ######## ####  ######  ##       ########  ######          ########  ##        #######   ######   
  ## ##   ##     ##    ##     ##  ##    ## ##       ##       ##    ##         ##     ## ##       ##     ## ##    ##  
 ##   ##  ##     ##    ##     ##  ##       ##       ##       ##               ##     ## ##       ##     ## ##        
##     ## ########     ##     ##  ##       ##       ######    ######          ########  ##       ##     ## ##   #### 
######### ##   ##      ##     ##  ##       ##       ##             ##         ##     ## ##       ##     ## ##    ##  
##     ## ##    ##     ##     ##  ##    ## ##       ##       ##    ##         ##     ## ##       ##     ## ##    ##  
##     ## ##     ##    ##    ####  ######  ######## ########  ######          ########  ########  #######   ######   
*/

#titre_blog {
  width: 100%;    /*valeur fixe à revoir en fonction du menu */
  left: 0;
  top: 0;
  border: 1px solid black;
  position: relative;
   /* border: 1px solid gainsboro; */
}

#titre_blog h1 {
  font-family: 'evogriaregular', sans-serif;
  vertical-align: top;
  font-size: 1rem;
  line-height : 1.5rem;
  color: black;
  padding: 0rem;
  margin: 0.5rem ;
}

#titre_blog a img {
  display: inline;
  margin-right: 5px;
  margin-bottom: -5px;
  margin-top: 5px;
}

#titre_blog a {
  display: block;
  position: absolute;
  top :5px;
  right: 0;
  padding-right: 5px;
  font-size: 0.7rem;
}



/* ---- RESPONSIVE < 768 ----- */




@media all and (max-device-width: 768px) {

  #titre_blog h1 {  
    font-size: 1rem;  
  }

}

/* ---------------- ARTICLES BLOG ----------------------------- */


#conteneur_articles_blog{                         
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

  -webkit-flex-direction: row;  
        -ms-flex-direction: row;  
            flex-direction: row;

  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;

  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;

  -webkit-align-items:flex-start;
      -ms-flex-align:start;
          align-items:flex-start;

  min-width:320px;
  margin-right: 50px ;
  margin-left: 0px;    /* marges à gauche valant retrait et calcul pour les articles */
  /* border: 1px solid gainsboro; */
}

#conteneur_articles_blog article {
  position: relative;

  -webkit-flex: 0 0 auto;                 /* 0% pour le bug de IE */
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;

  margin-left: 50px;
  margin-top: 50px;
  width: calc(50% - 50px);
  border-bottom: 4px solid #558800;
}

#conteneur_articles_blog .toute_largeur {
  width: calc(100% - 50px);
}

#conteneur_articles_blog .toute_largeur .texte_articles {
  -webkit-columns: 2;
      -moz-columns: 2;
          columns: 2;
  -webkit-column-gap : 20px;
     -moz-column-gap : 20px;
          column-gap : 20px;  
}

#conteneur_articles_blog article .titre_articles {
  position: relative;
  width: 100%;
  border: 1px solid black;
  margin-bottom: 0.2em;
}

#conteneur_articles_blog article .titre_articles h1 {
  width: calc( 100% - 5em );
  font-family: 'evogriaregular', sans-serif;
  font-size: 1.5em;
  line-height : 1em;
  padding: 0em ;
  margin: -0.1em 0em 0em -0.1em;
}

#conteneur_articles_blog article .titre_articles h2 {
  font-size: .8em;
  padding: 0em 0.2em 0.2em 0.2em;
  margin: 0;
}

#conteneur_articles_blog article .titre_articles a {
  text-decoration: none;
}

#conteneur_articles_blog article .titre_articles .date_articles {
  position: absolute;
  top:0px;
  right: 0px;
  font-size: .8em;
  margin: -0.1em 0em 0em -0.1em;
}

#conteneur_articles_blog article img {
  width: 100%;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}

#conteneur_articles_blog article img:hover {
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
}

#conteneur_articles_blog article img.image_brute {
  display:inline;
  width: auto;
  height: auto;  
}

#conteneur_articles_blog article .texte_articles {
  font-size: .8em;
}

#conteneur_articles_blog article .texte_articles p,{
  padding: 0.5em 0em;
  margin: 0;
}





/* ---- RESPONSIVE < 768 ----- */





@media all and (max-device-width: 768px) {
  
  #conteneur_articles_blog article .titre_articles {
  position: relative;
  }
}



/* ---- RESPONSIVE < 420 ----- */



@media all and (max-device-width: 420px) {
  #conteneur_articles_blog article {
    width: calc(100% - 50px);
  }

  #conteneur_articles_blog .toute_largeur {
    width: calc(100% - 50px);
  }
  
}


/* 
########  ########   #######        ## ######## ########  ######  
##     ## ##     ## ##     ##       ## ##          ##    ##    ## 
##     ## ##     ## ##     ##       ## ##          ##    ##       
########  ########  ##     ##       ## ######      ##     ######  
##        ##   ##   ##     ## ##    ## ##          ##          ## 
##        ##    ##  ##     ## ##    ## ##          ##    ##    ## 
##        ##     ##  #######   ######  ########    ##     ######  
 */

/* ---------------navigation ---------------- */

#liste_projets {                              /* c'est la section */
  margin: 20px;
  margin-top: 0px;
  font-size: 0;                                /* bidouille pour supprimer les whitespaces */
}

input {
    position: absolute;
    left: -9999px;
  }

#liste_projets label {
  display: inline-block;
  height : 2rem;               
  font-family: 'evogriaregular', sans-serif;
  font-size: 1rem;                              /* valeur en rem plutot qu'en em qui cible le parent */
  margin-left: -1px;                             /* pour supperposer sur le cadre précédent */
  color: #E32A18;
  padding: .5rem .5rem .2rem .5rem;
  border: 1px solid #E32A18;
  cursor: pointer;
}

#liste_projets input:checked + label {
  padding: 7px 5px 5px 7px;
  border: 2px solid #E32A18;
}

/* ------------------ liste projet -------------------- */

#projets {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;

  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;

  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;

  -webkit-align-items:flex-end;
      -ms-flex-align:end;
          align-items:flex-end;
  
  margin-left : -20px;
  font-size: 1rem;
}

#projets li{
  display: none;
  position: relative;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: calc(33.333% - 20px);
  margin-left: 20px;
  margin-top: 20px;
}

#tous:checked ~ #projets>li[data-proj~="tous"],
#erp:checked ~ #projets>li[data-proj~="erp"],
#reno:checked ~ #projets>li[data-proj~="reno"],
#logt:checked ~ #projets>li[data-proj~="logt"],
#urba:checked ~ #projets>li[data-proj~="urba"],
#mob:checked ~ #projets>li[data-proj~="mob"] {
  display:block;
}

#projets li a {

}

#projets li a img {
  width: 100%;
  -webkit-filter: grayscale(70%);
          filter: grayscale(70%);
}

#projets li a img:hover {
  -webkit-filter: grayscale(30%);
          filter: grayscale(30%);
}

#projets li h1 {
  font-size: .7em;
  padding: 0em .7em;
  margin: 0em;
  color: #aaa;
  width: 100%;
  border: 1px solid #aaa;
}

#projets a:hover ~ h1{
  color: #E32A18;
  border: 1px solid #E32A18 !important;
}



/* ---- RESPONSIVE < 768 ----- */




@media all and (max-device-width: 768px) {

  #liste_projets label {                /* plus petit texte */
    height : 1.6rem;               
    font-size: .8rem;
    padding: .2rem .5rem .2rem .5rem;
    margin-top: -1px;
  }

  #projets li{                          /* 50% de large */
    width: calc(50% - 20px);
    margin-left: 20px;
    margin-top: 20px;
  }
 
}

/* ---- RESPONSIVE < 420 ----- */
@media all and (max-device-width: 420px) {

  #projets li{
    width: calc(100% - 20px);
    margin-left: 20px;
    margin-top: 20px;
  }
  
}
/*
########     ###     ######   ########  ######  
##     ##   ## ##   ##    ##  ##       ##    ## 
##     ##  ##   ##  ##        ##       ##       
########  ##     ## ##   #### ######    ######  
##        ######### ##    ##  ##             ## 
##        ##     ## ##    ##  ##       ##    ## 
##        ##     ##  ######   ########  ###### 


########  ########   #######        ## ######## ########  ######  
##     ## ##     ## ##     ##       ## ##          ##    ##    ## 
##     ## ##     ## ##     ##       ## ##          ##    ##       
########  ########  ##     ##       ## ######      ##     ######  
##        ##   ##   ##     ## ##    ## ##          ##          ## 
##        ##    ##  ##     ## ##    ## ##          ##    ##    ## 
##        ##     ##  #######   ######  ########    ##     ######  

*/

#page_projet {      /*section */
position: relative;

}

/*-- SLIDE --*/

#conteneur_slide {
  position :relative;
}

#conteneur_slide .gallery {
 width: 100%;  
}

#conteneur_slide .gallery .flickity-viewport {
  
}

#conteneur_slide .gallery-cell {
  width: 100%;
  height: 45vw;  
  margin-right: 0px;
}

#conteneur_slide .gallery-cell .gallery-cell-image {
  display: block;
  max-height: 100%;
  max-width: 100%;
  margin: 0 auto;
 
}

/* big buttons, no circle */
.flickity-prev-next-button {
  width: 3em;
  height: 3em;
  background: transparent;
  border-radius: 0;
  border: 1px solid #bbb;
  z-index: 2;
}
.flickity-prev-next-button:hover {
  border: 3px solid #bbb;
  background: transparent;
}
/* arrow color */
.flickity-prev-next-button .arrow {
  fill: #eee;
}
.flickity-prev-next-button.no-svg {
  color: white;
}
/* hide disabled button */
.flickity-prev-next-button:disabled {
  display: none;
}



/* position dots up a bit */
.flickity-page-dots {
  bottom: 10px;
}
/* dots are lines */
.flickity-page-dots .dot {
  height: 4px;
  width: 40px;
  margin: 0 4px 0 0;
  border-radius: 0;
}


/* ---- RESPONSIVE < 768 ----- */


@media all and (max-device-width: 768px) {
  /* #conteneur_slide .gallery {
   width: 100%;  
  }

  #conteneur_slide .gallery-cell {
    width: 100%;
    height: auto;  
    margin-right: 0px;
  }

  #conteneur_slide .gallery-cell .gallery-cell-image {
    display: block;
    max-height: 100%;
    max-width: 100%;
    margin: 0 auto;
   
  }*/
  
}

/* ---- RESPONSIVE < 420 ----- */
@media all and (max-device-width: 420px) {
  
}

/*------------- caracteristiques projet -----------*/

#caracteristiques_projet {
  position:absolute;
  top:0;
  width: 30%;         /* largeur des caracteristiques */
  height: 100%;
  z-index: 1;
}

#caracteristiques_projet label {  
  display: block;
  position: relative;
  width: 100%;
  height : auto;
  font-family: 'evogriaregular', sans-serif;
  color: #E32A18;
  font-size: .8rem;
  padding: .2rem .5rem .2rem .5rem;
  border: 1px solid #E32A18;
  cursor: pointer;
}

#caracteristiques_projet label:after { /*-- triangle --*/
  content:"\25bd";
  position:absolute;
  right: 0.5em;
}

#caracteristiques_projet table {
  display: none;
  height: 100%;
  margin-top: 20px;
  font-size: .7em;
  border-collapse: collapse;
  background-color: rgba(255, 255, 255, 0.8);
}

#caracteristiques_projet input:checked ~ table { /*--affichage du tableau --*/
  display: block;
}

#caracteristiques_projet input:checked ~ label:after { /*-- inversion du triangle --*/
  content:"\25b3";
}

#caracteristiques_projet td {
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #E32A18;
}

.caracteristique {
  color: rgb(100,100,100);
}

.ecologie {
    font-size: .7em;
    color:white;
    background-color: #E32A18;
    padding: .5em;

  }

/*-- texte projet --*/

#conteneur_texte_projet {
  width: 70%;              /*largeur du texte projet 100% - X*/ 
  position: relative;
  margin-left: 30%;         /*largeur du texte projet 100% - X*/  
}

#conteneur_texte_projet p {  /* pour tous les p du conteneur */
  font-size: 0.7em;
  padding: 0.2em 0.5em ;
  margin: 0;
}

#conteneur_texte_projet label {
  display:block;
  border : 1px solid black;
  cursor: pointer;
}

#conteneur_texte_projet label p:after { /*les ... */
  content:" ... \25b7";
  font-weight: bold;
  color: #E32A18;
}

#texte_projet {
  display: none;
  width: 100%;
}

#conteneur_texte_projet input:checked ~ #texte_projet { /*affiche le reste du texte */
  display: block;
  /* border: 1px solid black;
  border-top: 0px;*/
}

#conteneur_texte_projet input:checked ~ label:after { /*eteint les  ... */
  content:"";
}



/* ---- RESPONSIVE < 768 ----- */




@media all and (max-device-width: 768px) {

  #caracteristiques_projet {         
    width: 40%;
  }

  #conteneur_texte_projet {
  width: 60%;              /*largeur du texte projet 100% - X*/ 
  margin-left: 40%;         /*largeur du texte projet 100% - X*/  
  }
}

/* ---- RESPONSIVE < 420 ----- */
@media all and (max-device-width: 420px) {
  #caracteristiques_projet {
    margin-top:-2em;
    width: 100%;         /* largeur des caracteristiques */
  }

  #conteneur_texte_projet {
  position:relative;
  width: 100%;              /*largeur du texte projet 100% - X*/ 
  margin-left: 0;        /*largeur du texte projet 100% - X*/
  z-index: 0;  
  }

}


/* 
########  ######## ##    ##  #######  ##     ##    ###    ######## ####  #######  ##    ## 
##     ## ##       ###   ## ##     ## ##     ##   ## ##      ##     ##  ##     ## ###   ## 
##     ## ##       ####  ## ##     ## ##     ##  ##   ##     ##     ##  ##     ## ####  ## 
########  ######   ## ## ## ##     ## ##     ## ##     ##    ##     ##  ##     ## ## ## ## 
##   ##   ##       ##  #### ##     ##  ##   ##  #########    ##     ##  ##     ## ##  #### 
##    ##  ##       ##   ### ##     ##   ## ##   ##     ##    ##     ##  ##     ## ##   ### 
##     ## ######## ##    ##  #######     ###    ##     ##    ##    ####  #######  ##    ## 
*/

/* ---------------- section presentation renovation ---------*/ 

#renovation h1 {
  font-size: 1.5em;
  line-height : 1.5em;
  font-family: 'evogriaregular', sans-serif;
  text-transform: uppercase;
  color: black;
  border: 1px solid black;
  padding: 0.5em 0em 0.2em 0.5em;
  margin: 0em 0em 0em 0em;
}

#conteneur_presentation_renovation {
 margin:  20px;
 margin-bottom: 5em;
}

#conteneur_presentation_renovation {
    
    display: flex;
      display: -ms-flexbox;
      display: -webkit-flex;

    
      flex-direction: row;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;

   
      flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;

    
      justify-content: flex-start;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;

   
      align-content: stretch;
        -webkit-align-content: stretch;
        -ms-flex-line-pack: stretch;

  
      align-items: stretch;
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
    }

#presentation_rénovation {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;

    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;

    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

#faq_renovation {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;

    -webkit-flex: 0 1 50%;
    -ms-flex: 0 1 50%;
    flex: 0 1 50%;

    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;

    padding: 10px;
    margin: 10px 0 0 20px;
    }

/*---- pour cacher et afficher les label-----*/

#presentation_renovation  div[id$="1"],
#presentation_renovation  div[id$="2"],
#presentation_renovation  div[id$="3"],
#presentation_renovation  div[id$="4"],
#presentation_renovation  div[id$="5"],
#presentation_renovation  div[id$="6"],
#presentation_renovation  div[id$="7"],
#presentation_renovation  div[id$="8"],
#presentation_renovation  div[id$="9"],
#presentation_renovation  div[id$="10"] {
display:none;
}

#faq_renovation  div[id$="1"],
#faq_renovation  div[id$="2"],
#faq_renovation  div[id$="3"],
#faq_renovation  div[id$="4"],
#faq_renovation  div[id$="5"],
#faq_renovation  div[id$="6"],
#faq_renovation  div[id$="7"],
#faq_renovation  div[id$="8"],
#faq_renovation  div[id$="9"],
#faq_renovation  div[id$="10"] {
display:none;
}

#input_presentation_renovation_1:checked ~ div[id$="1"],
#input_presentation_renovation_2:checked ~ div[id$="2"],
#input_presentation_renovation_3:checked ~ div[id$="3"],
#input_presentation_renovation_4:checked ~ div[id$="4"],
#input_presentation_renovation_5:checked ~ div[id$="5"],
#input_presentation_renovation_6:checked ~ div[id$="6"],
#input_presentation_renovation_7:checked ~ div[id$="7"],
#input_presentation_renovation_8:checked ~ div[id$="8"],
#input_presentation_renovation_9:checked ~ div[id$="9"],
#input_presentation_renovation_10:checked ~ div[id$="10"]  {
display:block;
background-color: #eee;
}

#presentation_renovation input:checked ~ label > p:after { /*-- inversion du triangle --*/
  content:"\25b2 ...";
}

/* ----- bloc offre prsesentation renovation ----------*/

#presentation_renovation h2 {
  display:block;
  position: relative;
  width: 100%;
  font-size: 1em;
  line-height : 1em;
  font-family: 'evogriaregular', sans-serif;
  color: #EA5B0C;  
  border: 1px solid #EA5B0C;  
  padding: 0.1em 0.1em 1em 0.1em;
  margin: 10px 0em 0em -0.1em;
  text-transform: uppercase;
  font-weight: bold;  
  }

#presentation_renovation img {
  display:inline-block;
  float: right;
  margin:0 2px 0 0;
}

#presentation_renovation label {
  position: relative;
  display:inline-block;
  width: 60%;
  height: 120px;
  margin:0;
  padding: 0;
  cursor: pointer;
  border:0px;
}

#presentation_renovation label > p:after {
  content:"Lire la  Suite ... \25bc";
  display: block;
  position:absolute;
  right: 0;
  color: #E32A18;
}

#presentation_renovation p {
  font-size: .8em;
  color: black;
  text-align: justify;
  padding: 0.7em 0;
  margin: 0em;
}

#presentation_renovation li{
  list-style-type: none;
  font-size: .8em;           
  margin: 0;
  padding: 0.1em 0;
}

#presentation_renovation ul > ul {
  list-style-type: none;
  font-size: .8em;           
  margin-left: 2em;
  padding: 0;
}

#presentation_renovation li:before{
  content: "\25b7";
  color: #358F26;
  font-size: .8em;
  padding-right: 0.5em;
}

/*------------- bloc faq renovation-----------*/
#faq_renovation {
  background-color: #ffb71c;
}

#faq_renovation img{
  width: 100%
}

#faq_renovation h2 {
  display:block;
  position: relative;
  color: #7E1210;
  font-size: 1.2em;
  line-height : 1em;
  font-family: 'evogriaregular', sans-serif;
  padding: 0em 0em 1em 0em;
  margin: 2em 0em 0em -0.1em;
  text-transform: uppercase;
  font-weight: bold;  
  /*border: 1px solid #AEB404;  */
}

#faq_renovation label {
  position: relative;
  display:block;
  width: 100%;
  margin:0;
  padding: 0;
  cursor: pointer;
  border:0px;
}

#faq_renovation label > p:after {
  content:"Lire la  Suite ... \25bc";
  display: block;
  position:absolute;
  right: 0;
  color: #E32A18;
}

#faq_renovation p {
  font-size: .8em;
  color: black;
  text-align: justify;
  padding: 0.7em 0;
  margin: 0em;
}

#faq_renovation li{
  list-style-type: none;
  font-size: .8em;           
  margin: 0;
  padding: 0.1em 0;
}

#faq_renovation ul > ul {
  list-style-type: none;
  font-size: .8em;           
  margin-left: 2em;
  padding: 0;
}

#faq_renovation li:before{
  content: "\25b7";
  color: #358F26;
  font-size: .8em;
  padding-right: 0.5em;
}





/* ---- RESPONSIVE < 768 ----- */





@media all and (max-device-width: 768px) {

  #conteneur_presentation_renovation {
  
    flex-direction: column;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
  }
}


/* ---- RESPONSIVE < 420 ----- */
@media all and (max-device-width: 420px) {
 
 #conteneur_presentation_renovation {
  
    flex-direction: column;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
  }
 
}


/* 

########  ########  ######    #######     ########
##     ## ##    ##  ##   ##   ##     ##   ##    ## 
##        ##    ##  ##    ##  ##     ##   ##    ## 
##        ##    ##  ######    ##     ##   ##    ##
##        ##    ##  ##        ######      ##    ## 
##     ## ##    ##  ##        ##   ##     ##    ##
########  ########  ##        ##     ##   ######## 
*/

/* ---------------- section presentation copro ---------*/ 

#copropriete h1 {
  font-size: 1.5em;
  line-height : 1.5em;
  font-family: 'evogriaregular', sans-serif;
  text-transform: uppercase;
  color: black;
  border: 1px solid black;
  padding: 0.5em 0em 0.2em 0.5em;
  margin: 0em 0em 0em 0em;
}

#conteneur_presentation_copro {
 margin:  20px;
 margin-bottom: 5em;
 }

#conteneur_presentation_copro {
    
    display: flex;
      display: -ms-flexbox;
      display: -webkit-flex;

    
      flex-direction: row;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;

   
      flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;

    
      justify-content: flex-start;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;

   
      align-content: stretch;
        -webkit-align-content: stretch;
        -ms-flex-line-pack: stretch;

  
      align-items: stretch;
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
    }

#presentation_copro {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;

    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;

    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

#faq_copro {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;

    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;

    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;

    padding: 10px;
    margin: 10px 0 0 20px;
    }

/*---- pour cacher et afficher les label-----*/

#presentation_copro  div[id$="1"],
#presentation_copro  div[id$="2"],
#presentation_copro  div[id$="3"],
#presentation_copro  div[id$="4"],
#presentation_copro  div[id$="5"],
#presentation_copro  div[id$="6"],
#presentation_copro  div[id$="7"],
#presentation_copro  div[id$="8"],
#presentation_copro  div[id$="9"],
#presentation_copro  div[id$="10"] {
display:none;
}

#faq_copro  div[id$="1"],
#faq_copro  div[id$="2"],
#faq_copro  div[id$="3"],
#faq_copro  div[id$="4"],
#faq_copro  div[id$="5"],
#faq_copro  div[id$="6"],
#faq_copro  div[id$="7"],
#faq_copro  div[id$="8"],
#faq_copro  div[id$="9"],
#faq_copro  div[id$="10"] {
display:none;
}

#input_presentation_copro_1:checked ~ div[id$="1"],
#input_presentation_copro_2:checked ~ div[id$="2"],
#input_presentation_copro_3:checked ~ div[id$="3"],
#input_presentation_copro_4:checked ~ div[id$="4"],
#input_presentation_copro_5:checked ~ div[id$="5"],
#input_presentation_copro_6:checked ~ div[id$="6"],
#input_presentation_copro_7:checked ~ div[id$="7"],
#input_presentation_copro_8:checked ~ div[id$="8"],
#input_presentation_copro_9:checked ~ div[id$="9"],
#input_presentation_copro_10:checked ~ div[id$="10"]  {
display:block;
background-color: #eee;
}

#presentation_copro input:checked ~ label > p:after { /*-- inversion du triangle --*/
  content:"\25b2 ...";
}

/* ----- bloc offre prsesentation copro ----------*/

#presentation_copro h2 {
  display:block;
  position: relative;
  width: 100%;
  font-size: 1em;
  line-height : 1em;
  font-family: 'evogriaregular', sans-serif;
  color: #1f5a2a;  
  border: 1px solid #359f36;  
  padding: 0.1em 0.1em 1em 0.1em;
  margin: 10px 0em 0em -0.1em;
  text-transform: uppercase;
  font-weight: bold;
}

#presentation_copro .item {
  display: flex;
  flex-direction: row;
  flex: 2 600px;
}

#presentation_copro img {
  margin : 10px 0px 10px 20px;
  height: 100%;
}

#presentation_copro label {
  display:inline-block;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border:0px;
}

#presentation_copro label > p:after {
  content:"Lire la  Suite ... \25bc";
  display: block;
  font-size: 1.2em;
  color: #359f36;
  margin-top: 10px;
}

#presentation_copro p {
  font-size: .8em;
  color: black;
  text-align: justify;
  padding: 0.7em 0;
  margin: 0em;
}

#presentation_copro li{
  list-style-type: none;
  font-size: .8em;           
  margin: 0;
  padding: 0.1em 0;
}

#presentation_copro ul > ul {
  list-style-type: none;
  font-size: .8em;           
  margin-left: 2em;
  padding: 0;
}

#presentation_copro li:before{
  content: "\25b7";
  color: #359f36;
  top: 1.5em;
  font-size: 1.5em;
  padding-right: 0.5em;
}

/*------------- bloc faq copro-----------*/
#faq_copro {
  background-color: #83b127;
}

#faq_copro img{
  width: 100%
}

#faq_copro h2 {
  display:block;
  position: relative;
  color: #1f5a2a;
  font-size: 1.2em;
  line-height : 1em;
  font-family: 'evogriaregular', sans-serif;
  padding: 0em 0em 1em 0em;
  margin: 2em 0em 0em -0.1em;
  text-transform: uppercase;
  font-weight: bold;  
  /*border: 1px solid #AEB404;  */
}

#faq_copro label {
  position: relative;
  display:block;
  width: 100%;
  margin:0;
  padding: 0;
  cursor: pointer;
  border:0px;
}

#faq_copro label > p:after {
  content:"Lire la  Suite ... \25bc";
  display: block;
  position:absolute;
  right: 0;
  font-size: 1.5em;
  color: #359f36;
}

#faq_copro p {
  font-size: .8em;
  color: black;
  text-align: justify;
  padding: 0.7em 0;
  margin: 0em;
}

#faq_copro li{
  list-style-type: none;
  font-size: .8em;           
  margin: 0;
  padding: 0.1em 0;
}

#faq_copro ul > ul {
  list-style-type: none;
  font-size: .8em;           
  margin-left: 2em;
  padding: 0;
}

#faq_copro li:before{
  content: "\25b7";
  color: #359f36;
  font-size: 1em;
  padding-right: 0.5em;
}



/* ---- RESPONSIVE < 768 ----- */





@media all and (max-device-width: 768px) {

  #conteneur_presentation_copro {
  
  flex-direction: column;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  }

  #presentation_copro .item {
  display: flex;
  flex-direction: column;
  flex: 1 auto;
  }
  #presentation_copro img {
  margin : 10px 0px 10px 20px;
  height: 100%;
  width : 200px;
  }




}


/* ---- RESPONSIVE < 420 ----- */
@media all and (max-device-width: 420px) {
 
 #conteneur_presentation_copro {
  
  flex-direction: column;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  }

  #presentation_copro .item {
  display: flex;
  flex-direction: column;
  flex: 0 auto;
  }
 
}


/* 
   ###     ######   ######## ##    ##  ######  ######## 
  ## ##   ##    ##  ##       ###   ## ##    ## ##       
 ##   ##  ##        ##       ####  ## ##       ##       
##     ## ##   #### ######   ## ## ## ##       ######   
######### ##    ##  ##       ##  #### ##       ##       
##     ## ##    ##  ##       ##   ### ##    ## ##       
##     ##  ######   ######## ##    ##  ######  ######## 

 */

#agence{          /* section */
  position: relative;
  margin: 20px;
  margin-top: 0;
}

#presentation_agence {
  margin: 0px;
  margin-top: 2em;
  margin-left:50%;
}

#presentation_formation {  
  margin: 0px;
  margin-top: 20px;
  margin-left:50%;
}

#presentation_formateur {  
  margin: 0px;
  margin-top: 20px;
  margin-left:50%;
}

#presentation_capacite {  
  margin: 0px;
  margin-top: 20px;
  margin-left:50%;
}

.portrait {                         /* photo portrait */
  position: absolute;
  display:block;
  top: 12em;
  left: 10%; 
  width: 300px;
  z-index: -1;
}

#agence p{
  font-size: .7em;
  line-height: 1em;
  text-align: justify;
  padding: 0.2em 0;
  margin: 0;
}

#agence h1 { 
  width:100%;
  font-size: .7em;
  font-weight: bold;      
  padding: 0em;
  padding-bottom: 1em;
  padding-top: 4em;
  margin: 0;
  text-transform: uppercase;
}




/* ---- RESPONSIVE < 420 ----- */





@media all and (max-device-width: 420px) {

  #presentation_agence {
    margin: 0px;
    margin-top: 2em;
    margin-left:0;
  }

  #presentation_capacite {  
    margin: 0px;
    margin-top: 20px;
    margin-left:0;
  }

  #presentation_formation {  
    margin: 0px;
    margin-top: 20px;
    margin-left:0;
  }

  #presentation_formateur {  
    margin: 0px;
    margin-top: 20px;
    margin-left:0;
  }
}

/*
 ######   #######  ##    ## ########    ###     ######  ######## 
##    ## ##     ## ###   ##    ##      ## ##   ##    ##    ##    
##       ##     ## ####  ##    ##     ##   ##  ##          ##    
##       ##     ## ## ## ##    ##    ##     ## ##          ##    
##       ##     ## ##  ####    ##    ######### ##          ##    
##    ## ##     ## ##   ###    ##    ##     ## ##    ##    ##    
 ######   #######  ##    ##    ##    ##     ##  ######     ##    
*/

#contact {                       /* section*/
  position:relative;
  margin:20px;
  margin-top:0;
}

#adresse_contact {  
  margin-top : 3em;
  font-size: .7em;
  line-height: 1em;
  text-align: justify;
  padding: 0em;
  padding-top: 0.2em;
}

#formulaire_email {
  width:700px;
  margin-left: auto;
  margin-top: 2em;
}

#formulaire_email h2 {
  width:100%;
  font-size: .7em;
  font-weight: bold;      
  padding: 0em;
  padding-bottom: 1em;
  padding-top: 0;
  margin: 0;
  text-transform: uppercase;
  /*color: #2F64A3;*/
}

#formulaire_email label {
  font-size: .6em;
  display:inline-block;
  margin-bottom: .5em;
}

.contact{
  position: relative;
}
#formulaire_email .ContactForm {      /*les zones de saisies input*/
  position: absolute;
  display:inline-block;
  left: auto;
  right:0;
  width: 400px;

  border: 1px solid black;
  
}
.checkbox {  
  display: inline-block;
  margin-top :6em;
}
#checkspam {
  position: relative;
  display:inline;
  left:0;
  right: auto;
  width : auto;
  border:0;
}

.ContactBouton {
  position: absolute;
  display:inline-block;
  right: 0;
  height: 1.6em;
  padding: 0;

}

.transmis {
  border: 1px solid black;
  padding: .5em;
  margin-bottom: .5em;
  width: 100%;
  background-color: #eee;
}

#LiensSociaux {
  position: absolute;
  bottom: 0;
  left:0;

}

#LiensSociaux img {
  display: inline;
  margin-top: 5px;
  margin-bottom: -5px;
  margin-right: 5px;

}



/* ---- RESPONSIVE < 768 ----- */





@media all and (max-device-width: 768px) {
  #formulaire_email {
    width:100%;
  }

  #formulaire_email .ContactForm {      /*les zones de saisies input*/
   width: 60%;
  }
  #LiensSociaux {
  position: relative;
}

}

/* ---- RESPONSIVE < 420 ----- */
@media all and (max-device-width: 420px) {
  #formulaire_email label {
  display:block;
  margin-top: .5em;
  margin-bottom: 0;
  }
  #formulaire_email .ContactForm {      /*les zones de saisies input*/
   position: relative;
   display: block;
   width: 100%;
  }
  .checkbox {  
  display: inline-block;
  margin-top :1em;
  }
  #LiensSociaux {
  position: relative;
}