@media (max-width: 640px) {
	* {
		box-sizing: border-box;
	}
	
	/* passer body (et tous les éléments de largeur fixe) en largeur automatique */

	body {
		width: auto;
		margin: 0;
		padding: 0;
        
		
	}
	
	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */
	

	img,
	table,
	td,
	blockquote,
	code,
	pre,
	textarea,
	input,
	iframe,
	object,
	embed,
	video {
		max-width: 100%;
	}
	
	/* conserver le ratio des images */

	img {
		height: auto;
	}
	
	/* gestion des mots longs */

	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp {
		-webkit-hyphens: auto; /* césure propre */
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word; /* passage à la ligne forcé */
	}
	
	code,
	pre,
	samp {
		white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
	}
	
	/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

	.element1,
	.element2 {
		float: none;
		width: auto;
	}
	
	/* masquer les éléments superflus */

	.hide_mobile {
		display: none !important;
	}
	
	

	
	.contenair2
	{
		display: flex;
		flex-direction: column;

		
	}
    .bloc
    {
    	display: flex;
    	flex-direction: column;
    	
    }
    .petitbloc
    {
    	margin-left: 20%;
    	margin-right: 10%;

    	margin-bottom: 3%;
    	

    }
    .petitbloc1
    {
    	margin-left: 20%;
    	margin-right: 10%;
    	

    }
     .petitbloc2
    {
    	margin-left: 20%;
    	margin-right: 10%;
    	margin-bottom: 3%;
    	

    }
	p.base
	{
		text-align: center;
	}
	.contenair
	{
		position: fixed;
		background-color: #247FDA;
		z-index:64;
		
		height: 10%;
	}
	.headeraccueil
	{
		opacity:0;
	}
	.panorama
	{
		margin-top: 0em;
		z-index:3;
		position: relative;
		
	}
	.logobouge1
	{
        opacity:0;
	}
	.logobouge2
	{
        opacity:0;
	}
	.logobouge3
	{
        opacity:0;
	}
	.logo
	{
		opacity:0;
	}
	.invisible1
	{
		opacity:100;
		margin-left:220%;


	}
	.invisible1 img
    {
        width: 50%;
        height: 100%;
        opacity: 100;
    }
	.barres3
	{
		margin-left: 0%;
		margin-top: 2%;
		opacity: 100;
		margin-right: 0;
	}
	.barres3 img
	{
		width: 20%
	}
	.menumob
	{
		background-color: #247FDA;
		
		z-index: 10001;


	}
	/* Menu déroulant */
*{
  margin:0;
  padding:0;
}
#menu{
  width:150px;
  margin:20px auto 0 auto;
  opacity: 100;
  position: relative;
  margin-left: 50%;
}
.menu, .sousmenu{
  text-align:center;
  opacity: 100;
}
.menu{
  height:18px;
  width:150px;
  padding:0px ;
  background:#247FDA;
  color:#247FDA;
  opacity: 100;
}
.sousmenu{
  height:25px;
  width:150px;
  padding:0px ;
  background:grey;
  color:#fff;
  opacity: 100;
  
}
.menu a{
  display:block;
  width:100%;
  height:100%;
  color:#fff;
  font-family:cantarellregular,sans-serif;
  font-size:12px;
  font-weight:bold;
  text-decoration:none;
  background:#247FDA;
  opacity: 100;

}
.sousmenu a{
  display:block;
  width:100%;
  height:100%;
  color:#fff;
  font-family:cantarellregular,sans-serif;
  font-size:14px;
  font-weight:bold;
  text-decoration:none;
  background:#247FDA;
  opacity: 100;
  border: 2px white solid;

}
.menu a:hover, .sousmenu a:hover, .menu a:active, .sousmenu a:active, .menu a:focus, .sousmenu a:focus{
  text-decoration: none;
  background-color: #247FDA;
  opacity: 100;
}
@font-face {
    font-family: 'cantarellregular';
    src: url('police/Cantarell-Regular-webfont.eot');
    src: url('police/Cantarell-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('police/Cantarell-Regular-webfont.woff') format('woff'),
         url('police/Cantarell-Regular-webfont.ttf') format('truetype'),
         url('police/Cantarell-Regular-webfont.svg#cantarellregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
.photo img
{
	width: 100%;
}
#box {
	opacity: 0;
}
.fondgris
{
	background-color: white;
}







@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
}