@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;
  }

  a:active {
    color: #E32A18;
  }

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

  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 */
  margin: 50px ;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; /*declare le flexibilité des enfants*/

  min-width:320px;  
  min-height: 300px;
  
  -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-wrap: wrap ;
          /* qui peut etre ajouté permet de gerer
          le depassement des enfants;

          flex-flow: row wrap;
          flex-direction et flex-wrap peuvent etre rasemblé
          dans  

          */
  
   -webkit-justify-content: space-around;
      -ms-flex-pack: space-around;
          justify-content: space-around; 
          /*
          - 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;
          */
}

#alto {
   flex: 1 1 400px;
  display : flex;
  justify-content: center;
  
}
#fleche {
  flex: 2 1 auto;
  display : flex;
  justify-content: start;
  
}
#ao {
  flex: 0 1 480px;
  display : flex;
  justify-content: center;
  
} 



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

/* ---- RESPONSIVE < 768 ----- */
@media all and (max-device-width: 820px) {
  header {                      /* en ligne */
  margin: 50px ;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; /*declare le flexibilité des enfants*/

  min-width:320px;  
  min-height: 300px;
  
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row; 
          
  flex-wrap: wrap ;
   
}
  #alto {
   flex: 1 1 300px;
  display : flex;
  justify-content: center;
  max-width: 300px;
  
}
#fleche {
  flex: 2 1 auto;
  display : flex;
  justify-content: center;
  margin:20px;
  
}
#ao {
  flex: 0 1 300px;
  display : flex;
  justify-content: center;
  max-width: 300px;
  
}
#alto img{
  max-width: 100%; /*pour forcer la diminution de l'image*/
  max-height: auto; /* pour garder le ratio d'image*/
  
}
#fleche img{
  max-width: 100%;
  max-height: auto;
  
}
#ao img{
  max-width: 100%;
  max-height: auto;
  
} 
    
}


/* ---- 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*/
}
  }
#alto {
   flex: 1 1 auto;  
}
#fleche {
  flex: 1 1 auto;  
}
#ao {
  flex: 1 1 auto;  
} 
  
}



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

#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;
  margin-left: -50px;                     /* marges à gauche valant retrait et calcul pour les articles */
}

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


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


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

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

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


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

#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) {

  
  #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:"\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;  
  }

}