@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%;*/

}

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

input {
    position: absolute;
    left: -9999px;
    /*height: 0px;*/
}

a:active {
    color: #E32A18;
}

a {
    /*text-decoration: underline;*/
    /*test suppression de souligement car le H1 des articles "nonn" imporatn ne foncionne pas*/
    color: black;
}

.bold {
  font-weight: bold;
}

span.orange {
    color: #cd2400;
    font-size: 1.4em;
}

#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; 
  /*declare le flexibilité des enfants*/

  
  
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row; 
          /*
          row : direction en ligne des enfants ;
          column : directien en colonne ;
          */
          /*
  flex-wrap: wrap ;
  */
          /* qui peut etre ajouté permet de gerer
          le depassement des enfants;

          flex-direction et flex-wrap peuvent etre rasemblé
          dans   flex-flow: row wrap;
          */
  /*
   -webkit-justify-content: space-around;
      -ms-flex-pack: space-around;
          justify-content: space-around;
          */
          /*
- centre : place tous les enfant au centre (cote à cote);
- start : Éléments groupés au début
- end : Éléments groupés à la fin
- flex-start : Éléments flexibles groupés au début
- flex-end; : Éléments flexibles groupés à la fin
- left : Éléments groupés à gauche
- right : Éléments groupés à droite
- space-around : repartis les marges y compris au debut et fin;
- space-between : idem sans marge au debut et fin;
- space-evenly : les marges entres enfants sont égales y compris debut et fin;
;
          justify-self posé sur l'enfant permet de rompre le schema proposé ici;
          */
/*
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; 
          */
          /*
          - centre : verticalement les enfants;
          - stretch: etirés vericalement;
          - start : alignement au debut (haut);
          - end : alignement à la fin (bas);

          align-self: end/start/center .. peut etre ajouté sur un enfant pour 
          modifié la reaction des enfants prrévu ici;
          */

  min-width:320px;  
  min-height: 150px;
  margin: 50px 50px 0 50px;
}

#boite_logo { 
  -webkit-flex: 0 0 auto;  
      -ms-flex: 0 0 auto;  
          flex: 0 0 auto;
  
  display: -webkit-flex;  
  display: -ms-flexbox;  
  display: flex; /*declare le flexibilité des enfants*/

  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
          /*
          - centre  place tous les enfant au centre (cote à cote);
          - space-around : repartis les marges y compris au debut et fin;
          - space-between : idem sans marge au debut et fin;
          - space-evenly : les marges entres enfants sont égales y compris debut et fin;
          ;
          justify-self posé sur l'enfant permet de rompre le schema proposé ici;
          */

  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  /*
          - centre : verticalement les enfants;
          - stretch: etirés vericalement;
          - start : alignement au debut (haut);
          - end : alignement à la fin (bas);

          align-self: end/start/center .. peut etre ajouté sur un enfant pour 
          modifié la reaction des enfants prrévu ici;
          */

  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;*/
} 


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

@media all and (max-device-width: 820px) {
  
  header {                      /* en ligne */
  
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; 
  /*declare le flexibilité des enfants*/
   
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row; 
 /*
row : direction en ligne des enfants ;
column : directien en colonne ;
*/
  flex-wrap: wrap ;
/* qui peut etre ajouté permet de gerer le depassement des enfants;

flex-direction et flex-wrap peuvent etre rasemblé
dans   flex-flow: row wrap;
*/
/*min-width:320px;  */
/*min-height: 300px;*/
}
 
}

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

@media all and (max-device-width: 420px) {
  
  header {   
  -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column; /*en colonne*/
   align-content: stretch;  /* devront prendre toute la largeur*/
}

}
  

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

#navigation_header {
  -webkit-flex: 2 2 auto;
      -ms-flex: 2 2 auto;
          flex: 2 2 auto;
/* 
s'applique sur les enfants de NAV

La propriété raccourcie flex permet de définir 
les valeurs de cette propriété 
dans cet ordre : flex-grow, flex-shrink, flex-basis
flexgrow : permet de répartir l'espace disponible 
en « parts ».
flex-shrink : définit le facteur de rétrécissement d'un élément flexible.
flex-basis : définit la taille de l'élément en termes 
d'espace occupé. La valeur initiale de cette propriété est auto, ou une valeur en px;
*/

  display: -webkit-flex;  
  display: -ms-flexbox;  
  display: flex; 
  /*declare le flexibilité des enfants*/

  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
   /*
   row : direction en ligne des enfants ;
   column : directien en colonne ;
   */

  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
/*
- centre : place tous les enfant au centre (cote à cote);
- start : Éléments groupés au début
- end : Éléments groupés à la fin
- flex-start : Éléments flexibles groupés au début
- flex-end; : Éléments flexibles groupés à la fin
- left : Éléments groupés à gauche
- right : Éléments groupés à droite
- space-around : repartis les marges y compris au debut et fin;
- space-between : idem sans marge au debut et fin;
- space-evenly : les marges entres enfants sont égales y compris debut et fin;
;
justify-self posé sur l'enfant permet de rompre le schema proposé ici;
*/

  -webkit-align-items: start;
      -ms-flex-align: start;
          align-items: start;
/*
- centre : verticalement les enfants;
- stretch: etirés vericalement;
- start : alignement au debut (haut);
- end : alignement à la fin (bas);

align-self: end/start/center .. peut etre ajouté sur un enfant pour 
modifié la reaction des enfants prrévu ici;
*/
}

#boite_nav_screen ul {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;   
  /*declare le flexibilité des enfants*/
  
    -webkit-flex-direction: row;  
        -ms-flex-direction: row;  
            flex-direction: row;
 /*   row : direction en ligne des enfants */

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

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

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

/*nav */ 
#boite_nav_screen 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 */
  display:block;
}

nav a {
  font-family: 'evogriaregular', sans-serif;
  font-size: 1em;
  line-height : 1em;
  color: #888888;   /* lien gris */
  text-decoration: none ! important;
  margin: 0px;
  padding: 2px 2px 0 2px;
  display:block; /*rassembler les 2lignes de "projet, audit" en 1seul block*/
}

nav li a[href*="projets"]:hover {
    color:  #E32A18 !important;
    border : 1px solid #E32A18 !important;
    padding: 2px 1px 0 1px;
    display:block; /*rassembler les 2lignes de "projet, audit" en 1seul block*/
}

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

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

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

nav li 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;
    display :block; /*rassembler les 2lignes de "projet, audit" en 1seul block*/
}

.page_active a[href*="renovation"] {
    border : 1px solid #EA5B0C;
    color:#EA5B0C;
    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: 820px) {

  #boite_logo {
    -webkit-flex: 1 1 auto;  
      -ms-flex: 1 1 auto;  
          flex: 1 1 auto;
 /* parametre de flexibilité des enfants :
flex-grow, flex-shrink, flex-basis
flexgrow : « parts » de 1 pour 1.
flex-shrink : définit le facteur de rétrécissement
flex-basis : auto : ne compresse pas les images;
*/
  }

  nav {
    -webkit-flex: 1 1 0px;
        -ms-flex: 1 1 0px;
            flex: 1 1 0px;
/* parametre de flexibilité des enfants :
flex-grow, flex-shrink, flex-basis
flexgrow : « parts » de 1 pour 1.
flex-shrink : définit le facteur de rétrécissement
flex-basis : le plus petit;
*/
  }

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

    -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;
  font-size: 0.8em;
  margin: 0 auto;
  width: 100%;
  font-size: .8em;
  color: #888; 
  padding: 5em 0.5em 1em 0.5em;
}

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


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

#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;
  column-gap: 50px; /*remplace le margin lefte cidessous*/
  /*margin-left: -50px;   */                  /* marges à gauche valant retrait et calcul pour les articles */
  border-top: solid gray 1px;
}

#temporaire {     /*pour le index.html  temporaire que 
  j'installe quand je veux etre tanquille pour bosser sur le code */
  display: block;
  position:relative;
  width: 100%;
  text-align: center;
  font-family: 'evogriaregular', sans-serif;
  font-size: 1.5em;
  color: #4B610B;
  padding: 0em;
  margin: 100px;
  
}

#conteneur_articles_index article {
  position: relative;

  -webkit-flex: 1 1 300px; 
      -ms-flex: 1 1 300px;
          flex: 1 1 300px;
          /* 300 pour en mettre 3 par ligne */

  /* margin-left: 50px; plus besoin grace au colum-gap sur le parent*/
  margin-top: 50px;
  /*width: calc(33.333% - 50px); ne ser plus garce au colum-gap sur le parent*/
  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 rgb(44, 122, 132);
  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.05em 0em 0em -0.1em;
  color : rgb(44, 122, 132);
}

#conteneur_articles_index article .titre_articles a {
  text-decoration: none!important;
}

#conteneur_articles_index article .titre_articles h2 {
  font-size: 1em;
  padding: 0em 0.2em 0.2em 0.2em;
  margin: 0;
  color : rgb(44, 122, 132);
  text-decoration: none;
}

#conteneur_articles_index article .texte_articles h3 {
  font-size: 1em;
  font-weight: bold;
  margin: 0;
  color : #a91e00;
  text-transform: uppercase;
  margin-top: 1em;
  margin-bottom: 1em;
  text-decoration: none;
}

#conteneur_articles_index article .texte_articles ul {                                                                                            /* tous les ul à zero */
  list-style-type: disc;
  margin: 0;
  padding: 0em;
  line-height: 100%;    
}

#conteneur_articles_index article .texte_articles li {                                                                                            /* tous les ul à zero */
  margin-bottom: 0.2em;    
}

#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 {
 max-width: 100%;
 }


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

#conteneur_articles_index article .texte_articles p{
  padding: 0.5em 0em;
  margin: 0;
}
#logo-ao-float {
  float: right;
  margin-left: 15px;
  position: relative;
  top: 20px;
  border-top : solid gray 1px;
}


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



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

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


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



@media all and (max-device-width: 450px) {
  
  #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;
  }
  
}


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

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

#renovation h1 {
  font-size: 1rem;
  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 {
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex; 
/*declare le flexibilité des enfants*/
          
      -webkit-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;
/*row : direction en ligne des enfants */
         
      -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
/* qui peut etre ajouté permet de gerer le depassement des enfants;
flex-direction et flex-wrap peuvent etre rasemblé
dans   flex-flow: row wrap;
*/
        
      -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
      justify-content: flex-start;
/*
gere l'espace libre entre enfant sur l'axe principale
- centre : place tous les enfant au centre (cote à cote);
- start : Éléments groupés au début
- end : Éléments groupés à la fin
- flex-start : Éléments flexibles groupés au début
- flex-end; : Éléments flexibles groupés à la fin
- left : Éléments groupés à gauche
- right : Éléments groupés à droite
- space-around : repartis les marges y compris au debut et fin;
- space-between : idem sans marge au debut et fin;
- space-evenly : les marges entres enfants sont égales y compris debut et fin;
;
justify-self posé sur l'enfant permet de rompre le schema proposé ici;
*/
        
      -webkit-align-content: stretch;
      -ms-flex-line-pack: stretch;
      align-content: stretch;
/*Contrôle l'espace entre les lignes flexibles sur l'axe secondaire.
- center;  Les éléments sont groupés au centre 
- start;  Les éléments sont groupés au début  (haut)
- end;  Les éléments sont groupés à la fin (bas)
- flex-start; Les éléments flexibles sont groupés au début 
- flex-end; Les éléments flexibles sont groupés à la fin 
- normal;
- baseline;
- first baseline;
- last baseline;
- space-between;  L'espace est réparti entre les éléments, le premier est
accolé au bord et le dernier également.
- space-around;  L'espace est réparti entre les éléments avec un demi-espace
au début et à la fin 
- space-evenly;  L'espace est réparti entre les éléments et autour 
- stretch;  Les éléments dimensionnés avec auto sont étirés également
afin de remplir le conteneur*/

      
      -webkit-align-items: flex-start;
      -ms-flex-align: flex-start;
      align-items: flex-start;
/*
- centre : verticalement les enfants;
- stretch: etirés vericalement;
- start : alignement au debut (haut);
- end : alignement à la fin (bas);

align-self: end/start/center .. peut etre ajouté sur un enfant pour 
modifié la reaction des enfants prrévu ici;
*/

 margin:  20px;
 margin-bottom: 5em;
}


/*---- 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: #F0E9C9;

}

#presentation_renovation, #faq_renovation input:checked ~ label > p:after { 
  content:"\25b2 ...";
  /*-- inversion du triangle et suppression du lire la suite--*/
}

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

#presentation_renovation {
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex; 
/*declare le flexibilité des enfants*/
          
      -webkit-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;
/*row : direction en ligne des enfants */

      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
/* qui peut etre ajouté permet de gerer le depassement des enfants;
flex-direction et flex-wrap peuvent etre rasemblé
dans   flex-flow: row wrap;
*/
      -webkit-flex: 1 1 80%;
      -ms-flex: 1 1 80%;
      flex: 1 1 80%;
 /* parametre de flexibilité des enfants :
flex-grow, flex-shrink, flex-basis
flexgrow : facteur d'agrandissement
flex-shrink : définit le facteur de rétrécissement
flex-basis : taille;
*/
gap: 10px;
min-height: 0;
}

.article_renovation {
      -webkit-flex: 1 1 380px;
      -ms-flex: 1 1 380px;
      flex: 1 1 380px;
 /* parametre de flexibilité des enfants :
flex-grow, flex-shrink, flex-basis
flexgrow : facteur d'agrandissement
flex-shrink : définit le facteur de rétrécissement
flex-basis : taille;
*/
      /*-webkit-align-items: flex-start;*/
      /*-ms-flex-align: flex-start;*/
      /*align-items: flex-start;*/
/*
- centre : verticalement les enfants;
- stretch: etirés vericalement;
- start : alignement au debut (haut);
- end : alignement à la fin (bas);

align-self: end/start/center .. peut etre ajouté sur un enfant pour 
modifié la reaction des enfants prrévu ici;
*/
align-self: flex-start; /* Ignore la hauteur de la ligne */
}

.titre_article_renovation {
  border: 1px solid #7E1210;  
  padding: 0em 0em 1em 0em;
  margin: 10px 0em 0em -0.1em;
  }

  .titre_article_renovation h2 {
  font-size: 1em;
  line-height : 1em;
  font-family: 'evogriaregular', sans-serif;
  color: #7E1210;  
  text-transform: uppercase;
  font-weight: bold;
  margin: 0px;
  }

  .titre_article_renovation h3 {
  font-size: 1em;
  padding: 0em 0.2em 0.2em 0.2em;
  margin: 0;
  color : #7E1210;
  text-decoration: none;
}

.contenu_article_renovation {
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex; 
/*declare le flexibilité des enfants*/
          
      -webkit-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;
/*row : direction en ligne des enfants */

      -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
/* qui peut etre ajouté permet de gerer le depassement des enfants;
flex-direction et flex-wrap peuvent etre rasemblé
dans   flex-flow: row wrap;
*/
}

.contenu_article_renovation > * { 
  /*pour les enfants*/

      -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
 /* parametre de flexibilité des enfants :
flex-grow, flex-shrink, flex-basis
flexgrow : facteur d'agrandissement
flex-shrink : définit le facteur de rétrécissement
flex-basis : taille;
*/
      -webkit-align-items: flex-start;
      -ms-flex-align: flex-start;
      align-items: flex-start;
/*
- centre : verticalement les enfants;
- stretch: etirés vericalement;
- start : alignement au debut (haut);
- end : alignement à la fin (bas);

align-self: end/start/center .. peut etre ajouté sur un enfant pour 
modifié la reaction des enfants prrévu ici;
*/
 
}


.contenu_article_renovation img {
  align-self: flex-start;
  height:200px;
  margin: 10px 0px 10px 10px;
}

.contenu_article_renovation label {
  position: relative;
  display: block;
  margin:0;
  padding: 0;
  cursor: pointer;
  border:0px;
  /*max-height: 24px;*/
  /*overflow: hidden;*/
}

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

.contenu_article_renovation p {
  /*position: absolute;*/
  /*top: 0;*/
  /*left: 0;*/
  width: 100%;
  line-height: 1.2;
  font-size: .8em;
  color: black;
  text-align: justify;
  padding: 0.7em 0;
  margin: 0em;
}

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

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

.contenu_article_renovation li:before{
  content: "\25b7";
  color: #358F26;
  font-size: .8em;
  padding-right: 0.5em;
}
.contenu_article_renovation div[id*="texte_presentation_renovation"] {
  padding: 10px;
  margin-top: 10px;
  text-align: left;

}
/*------------- bloc faq renovation-----------*/

#faq_renovation {
    -webkit-flex: 0 1 20%;
    -ms-flex: 0 1 20%;
    flex: 0 1 20%;
/* parametre de flexibilité des enfants : flex-grow, flex-shrink, flex-basis
flexgrow : « parts » de 1 pour 1.
flex-shrink : définit le facteur de rétrécissement
flex-basis : le plus petit;
*/
min-height: 0; /* Empêche l'étirement vertical */

padding: 10px;
margin: 10px 0 0 20px;
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: left;
  padding: 5px;
  margin: 10px;
}

#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: 820px) {

  #conteneur_presentation_renovation {
  
    flex-direction: column;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      /* en colonne*/
  }
  #presentation_renovation {
              
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
/*row : direction en ligne des enfants */
  }
}


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



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

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

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

  display: flex;                    /* CHANGER */
  flex-wrap: wrap;                  /* AJOUTER */
  justify-content: center;        /* AJOUTER (à droite) */
}

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:flex-end;
          align-items:flex-end;
  
  margin-left : -20px;
  font-size: 1rem;
}

#projets li{
  display:none; /*eteint les li avant de les rallumer*/
  /*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;

  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  /* Transformer le li en flex container pour aligner son contenu */
  
  -webkit-justify-content: flex-end;  
      -ms-flex-pack: end;
           justify-content: flex-end;
  /* Aligne le contenu en bas du conteneur*/
}

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

  display: -webkit-flex;
      display: -ms-flexbox;
          display: flex;  
  /* Flex au lieu de block ! 
  pour permettre d'utiliser le stretch vertical des images
  les Li restent des flex items et peuvent être étirés par le parent*/
}

#projets li a {
 
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Aligne le contenu en bas */

 -webkit-flex: 1 1 auto;  
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
          /* Prend tout l'espace disponible */

  overflow: hidden;  
  /* Important pour contenir l'image */
}

#projets li a img {
  width: 100%;
  height: 100%;
  display:block;    /* Évite l'espace sous l'image */
  object-fit: contain;  /* OU contain selon besoin */

  -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 red;
  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:"\25bc";
  font-size: 2rem;
  position:absolute;
  right: 0.2em;
  top : 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: 1em;
    color:white;
    background-color: #E32A18;
    padding: .5em;

  }

/*-- texte projet --*/

#conteneur_texte_projet {
  width: 70%;              /*largeur du texte projet 100% - X*/ 
  position: relative;
  margin-top: 30px;
  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;  
  }

}


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

#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;

  -webkit-column-gap : 50px;
     -moz-column-gap : 50px;
          column-gap : 50px;

  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;
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;

  -webkit-flex: 1 0 380px;
      -ms-flex: 1 0 380px;
          flex: 1 0 380px;

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

#conteneur_articles_blog .double_largeur {
  -webkit-flex: 2 0 auto;
      -ms-flex: 2 0 auto;
          flex: 2 0 auto;
          /*doublement de la largeur*/
}

#conteneur_articles_blog article .double_colonne {
  -webkit-columns: 2;
      -moz-columns: 2;
          columns: 2;

  -webkit-column-gap : 20px;
     -moz-column-gap : 20px;
          column-gap : 20px;
}

/*
#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 #558800;
  margin-bottom: 0.2em;
  color:  #558800;
  /*border : 1px solid #558800;*/
}

#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;
  color:  #558800;
}

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

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

#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(50%);
          filter: grayscale(50%);
}

#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);
  }
  
}


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

 */

#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: 0.8rem;
  line-height: 1em;
  text-align: justify;
  padding: 0.2em 0;
  margin: 0;
}

#agence h1 { 
  width:100%;
  font-size: 0.8rem;
  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 : 3rem;
  font-size: 0.8rem;
  line-height: 1rem;
  text-align: justify;
  padding: 1rem;
  padding-top: 0.2rem;
}

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

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

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

.contact{
  position: relative;
}

.zone_texte {
 height: 6em;
}

.zone_input {
   height: 1.5em;
}

#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;