@media screen and (max-width: 500px){

    html, body{
        font-size: 90%;
    }
    
    section > h1{
        font-size: 1.5rem;
        /*width: 90%;*/
    }
    
    .encadre{
        width: 93%;
    }

    section >h1 >img{
        width:10%;
    }

    .topnav {
        position:relative;
    }
    
    .hero{
        width:100%;
        height: auto;
    }
    
    .hero-contenu {
        width: 90%;
    }
    
    .hero-contenu p{
		font-family: 'VRB_____', serif;
		font-size: 1.1rem;
    }
    
	a.gros-bouton {
		font-size: 1.1em;
	}
    
    article{
        display: block;
    }
    
    p.chapo {
       max-width: 90%;
    }
    
    .encadre-blanc {
		width: 100%;
		text-align: left;
		padding: .5rem 0;
		font-size:1rem;
	}
    
    .schema img{
        width: 100%;
    }
    
    .borne{
        display: none;
    }    
    
    section #admin{
        display: block;
        width: 90vw;
    }
    
    .admin{
        
        margin-top: 1.5rem;
    }
    
    .admin figure {
        width: 100%;
        padding: .5rem; ;
    }

    .techniques {
        display: block;
        width: 100%;
   }

	.contact{
		width: 100%;
		padding: .5rem;
    }
    
    
    footer{
        display: block;
    }
    
    footer p{
        text-align: center;
        padding: .5rem 0 0 ;
        font-size: 1.2rem;
    }
}