/* wrapper styles */
.wrapper {
  position: relative;
  min-height: 100vh;
}

/* small screens styles */
@media (max-width: 767px) {
  .sidebar {
    position: absolute;
    /*top: 100; */
	left: 0; 
	right: 0;
  }
  
  /* navigation styles */
  nav {
    -webkit-columns: 1;
    -moz-columns: 1;
    -ms-columns: 1;
    columns: 1;
    -webkit-column-gap: 2px;
    -moz-column-gap: 2px;
    -ms-column-gap: 2px;
    column-gap: 2px;
    padding: 2px;
  }
  nav > a {
    display: inline-block;
    width: 100%;
/*	    height: 6rem;
    line-height: 6rem;*/
    height: 3rem;
    line-height: 3rem;
    padding-left: 1rem;
  }
  .wrapper {
    transform: translateX(0) translateZ(0);
    transition: transform .2s;
    will-change: transform;
  }  

  /* button deco */
  [class^="nav-button"] {
    display: block;
    z-index: 1;
    height: 2.5rem; width: 2.5rem;
    background-color: transparent;
    background-image: linear-gradient(to right, #333, #333),
      linear-gradient(to right, #333, #333),
      linear-gradient(to right, #333, #333);
    background-position: center top, center, center bottom;
    background-repeat: no-repeat;
    /* background-size: 3.5rem .9rem; */
	background-size: 3.5rem .3rem;
    padding: 0;
    outline: 0;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
  }
  
  /* here's goes the push top effect */
  body:target .wrapper {
    /*transform: translateY(19rem); /* based on navigation's height */
	 transform: translateY(29rem); /* pour deplacer le contenu en fonction de la hauteur du menu */
  }
  .nav-button-close,
  body:target .nav-button-open {
    display: none;
  }
  .nav-button-open,
  body:target .nav-button-close {
    display: block;
  }
  
  img {
		width:100%;
	}
  
} /* end of small screen media queries */

/* Global deco */
* {
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
body {
  margin: 0.3em;
  padding: 0;
  color: #fff;
  font-size: 1.6em;
  font-family: calibri, arial, sans-serif;
  background-color: #eee;
  /*overflow:hidden; /* test correction overflow -jp */
}
a {
  /*color: #fff;*/
  color: black;
}
.wrapper {
  
  padding: 2rem;
  background-color: #eee;
  color: #333;
  height:auto;	 /* pour éviter le débordement en mode responsive */
  
}
.sidebar {
  /*background: #333;*/
  color: #ddd;
  /* 3 lig suivantes pour centrer le menu dans page sup à 768px */
  margin-left:auto;
  margin-right:auto;
  text-align: center;
}
nav a {
  margin-bottom: 2px;
  text-decoration: none;
  /*background: rgba(255,255,255, 0.1);*/
  background: #eee;
  padding-left:0.5em; /* pour séparer élément menu */
}

#entete {					/*exemple div perso qui contient la présentation et le menu*/
	color:#333333;
	/*height:150px;*/
	height:80px;
	display: inline-block;
	line-height: 1em	/*réduction d'espace entre ligne Christian Decollewaert et Entre béton et bitume...ne donne pas le résultat attendu */

}



.titre{						/* exemple de classe permettant de modifier ponctuellement une balise existante*/
	/*color:red;*/
	font-size: 1.1em;
}


#entete h2 {				/* je modifie la valeur par defaut de h2 seulement dans entete*/
	font-weight: normal;
	font-size: 1.4em;
	font-family: calibri, arial, sans-serif;
	/*line-height: 0.5em réduction d'espace entre ligne Christian Decollewaert et Entre béton et bitume... ne fonctionne pas */
	margin-top:0.4em;	/* réduction marge haute de entête h2 */
	margin-bottom: 0.6em	/* réduction marge basse de entête h2 */
}

.legendephoto {				/* pour remplacer et simplifier tes pages de photos */
	font-family: calibri, arial, sans-serif;
	font-size: 1.2em;
	color:#000000;
	text-align:center;
	margin-bottom:30px;
}
	
	
img {
	padding-top:5px; /* (ou autre valeur pour espacer le titre des photos par rapport aux photos)*/
	max-width: 100%;
	height: auto;
}