@media (min-width: 649px) {
body header {
    position: absolute;
    top: 0px;
    left: 0px;
    width:100%;
    height:50px;
    text-align: center;
}
.logogauche {
float:left;
margin: 0px 0px 0px 7%;
display: inline-block;
}
#menu-icon {

    display: hidden;
    width: 40px;
    height: 40px;
    background: #4C8FEC url(Images/burger.png) center;
}    
ul {
  list-style-type: none;
  margin: 40px 7% 0px 0px;
  padding: 0;
  overflow: hidden;
  background-color: rgb(f,f,f);
}

li {
  float: right;
}

li a {
  display: block;
  color: rgb(0,0,0);
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: rgb(200,200,200);
}
.slogan {
    font-style: italic;
    text-align: center;
    /*font-size: 1em;*/
    font-family: Helvetica, Arial, sans-serif;
   }
div.pageaccueil {
    /*position: absolute;*/
    margin-top: 100px;
    padding-top: 10px;
    text-align: justify;
    /*top: 50px;*/
    /*left: 0px;*/
    min-width:100%;
    min-height:100vh;
    box-sizing: border-box;
    /*background-color: black;*/
    text-align: center;
    color : rgb(0,0,0);
    background-image: url('Images/IMG_20190929_185920-01.jpeg');
    background-image: cover;
    background-size:  auto auto;
    /*background-size:  contain;*/
    /*background-size:  100% auto;*/
    background-repeat: no-repeat;
    /*background-position: 100% auto;*/
    background-position: center center;
     
}

div.article {
    /*position: relative;*/
    /*position: absolute; /* postulat de départ */
    /*left: 50%; */
    /*top: auto;*/
    /*left: 0px;*/
    /*width:75%;*/
    text-align: justify;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    font-family: Helvetica, Arial, sans-serif;
    /*height:auto;*/
    /*margin: 10px 150px 10px ;*/
    /*background-color:yellow;*/
    /*-webkit-column-count:2; /* Opera, Safari, Google Chrome */
    /*-moz-column-count: 2; /* Firefox */
    /*column-count: 2; /* Internet Explorer */
}
div.article2 {
    /*position: relative;*/
    /*position: absolute; /* postulat de départ */
    /*left: 50%; */
    /*top: auto;*/
    /*left: 0px;*/
    /*width:75%;*/
    text-align: justify;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    font-family: Helvetica, Arial, sans-serif;
    /*height:auto;*/
    /*margin: 10px 150px 10px ;*/
    /*background-color:yellow;*/
    /*-webkit-column-count:2; /* Opera, Safari, Google Chrome */
    /*-moz-column-count: 2; /* Firefox */
    /*column-count: 2; /* Internet Explorer */
}
.presta
{
    text-align: justify;
    font-family: Helvetica, Arial, sans-serif;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}
#conteneur
{
    display: flex;
    justify-content: center;
    align-items: top;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    font-family: Helvetica, Arial, sans-serif;
    background-color: rgb(200,200,200);
    text-align: justify;
}
.particulier
{
    flex-wrap: wrap;
    flex: 1;
    /*min-width:210px;*/
    margin-bottom:0;
    padding: 1% 1% 1% 1%;
    border:1px solid black;
    font-family: Helvetica, Arial, sans-serif;
}    
.groupe
{
    flex-wrap: wrap;
    flex: 1;
    /*min-width:210px;*/
    padding: 1% 1% 1% 1%;
    border:1px solid black;
    font-family: Helvetica, Arial, sans-serif;
}
.professionnel
{
    flex-wrap: wrap;
    flex: 1;
    /*min-width:210px;*/
    padding: 1% 1% 1% 1%;
    border:1px solid black;
    font-family: Helvetica, Arial, sans-serif;
}

body footer {
    background-color: rgb(220,220,220);
    overflow: hidden;
    /*bottom:0;*/
    /*display: inline-block;*/
    width:100%;
    font-size: smaller;

    
    /*height:50px;*/
    
}
a { text-decoration: none;
	color: black;  
} 
a:hover { 
	color: blue; /* pour le passage de la souris*/
}
.gauchcentr{
    text-align: left;
}
.pieddecal{
    display: inline-block;
    font-family: Helvetica, Arial, sans-serif;
    padding-left: 10%;
    vertical-align: middle;
}
.pied{
    display: inline-block;
    font-family: Helvetica, Arial, sans-serif;
    vertical-align: middle;
}    
.pieddecal2{
    display: inline-block;
    font-family: Helvetica, Arial, sans-serif;
    padding-left: 10%;
    vertical-align: middle;
}
/*Définir toutes les polices*/
.h1 {
    font-weight: bold;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 2em;
    text-align: center;
}

.h2 {
    font-weight: bold;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1.5em;
    text-align: center;
}

/*Pour faire flotter les images*/
.flotte {
float:left;
margin: 10px 10px 10px 10px;
}
.flotteac {
    /*float:left;
      
    margin: 5px 5px 5px 5px;*/
    text-align: center;
    margin: 10px 10px 10px 10px;
    height:200px;

}
.imgcentre {
			text-align: center;
			margin: 10px 10px 10px 10px;
}
.imgcentre2 {
			text-align: center;
			margin: 10px auto 10px auto;
}


@-ms-viewport {
    width: extend-to-zoom;
    zoom: 1.0;
}








/*-----------------------------------------------------------------------------------*/
/*          VERSION MOBILE         */


}
@media (max-width: 648px) {
	* {
		box-sizing: border-box;
		font-family: Helvetica, Arial, sans-serif;
		text-align: justify;

	}
 
body header {
    display: inline-block;
   
    top: 0px;
    left: 0px;
    width:100%;
    height:80px;
    text-align: center;
}

#menu-icon {

    display: inline-block;
    margin-top: 15px;
    margin-left: 40%; 
    width: 40px;
    height: 26px;
    background: #FFFFFF url(Images/burger.png) center;
}    
nav ul, nav:active ul { 
	display: none;
	position: absolute;
    padding: 20px;
    right: 20px;
    top: 60px;
    width: 50%;
    list-style-type: none;
    background: #fff;
    
}
    nav li {

        text-align: center;
        width: 100%;
        padding: 10px 0;
        margin: 0;

    }
    nav:hover ul {

        display: block;

    }
li a:hover {
  background-color: #555;
  color: white;
}

li a {
  color: rgb(0,0,0);
  max-width: 75%;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  text-align: left;
  text-decoration: none;
  padding: 5px 5px;
}

nav:hover ul {

        /*display: block;*/
        display: flex;
        flex-direction: column-reverse;

    }

.logogauche {
float:left;
margin: 0px 0px 0px 7%;
max-width: 100px;
max-height: 100px;
display: inline-block;
}

.h1 {
    font-weight: bold;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1.5em;
    text-align: center;
}
.h2 {
    font-weight: bold;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1em;
    text-align: center;
}

.slogan {
    font-style: italic;
    text-align: center;
    font-size: 0.8em;
    font-family: Helvetica, Arial, sans-serif;
   }

.flotte {
    text-align: center;
}
.flotteac {
    
    height: 200px;  
    
    
    
}
	/* passer body (et tous les éléments de largeur fixe) en largeur automatique */

	.pageaccueil {
		float: none;
		width: 100%;
		height:	400px;
        padding-top: 10px;
		background-image: url('Images/IMG_20190929_185920-01.jpeg');
        background-size: auto 400px;
        background-position: center;
        text-align: justify;
   }

    .article {
		width: auto;
		margin: 0;
		padding: 0;
        font-size:120%;
        text-align: justify;
        /*background-color: yellow;*/
	}
    /*body aside {
		width: auto;
		margin: 0;
		padding: 0;
                font-size:120%;
	}*/
	
	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

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

	img {
		height: auto;
        text-align: center;
	}

	/* 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) */
/*body header {
        background-color: yellow;
    }*/
	

	.article {
		float: none;
		width: auto;
		
	}
	.gauchcentr{
    text-align: center;
}
	/* masquer les éléments superflus */

	.hide_mobile {
		display: none !important;
	}
	
	/* Un message personnalisé */

	/*body:before {
		content: "Version mobile du site";
		display: block;
		text-align: center;
		font-style: italic;
		color: #777;
	}*/

.pieddecal{
    display: block;
    font-family: Helvetica, Arial, sans-serif;
    padding-left: 10%;
    vertical-align: middle;
}
.pied{
    display: inline-block;
    font-family: Helvetica, Arial, sans-serif;
    vertical-align: middle;
}
.pieddecal2{
       margin: 0 auto;
       width: 200px;
       font-family: Helvetica, Arial, sans-serif;
       vertical-align: middle;
}
.imagfootdecal{
    display: inline-block;
    font-family: Helvetica, Arial, sans-serif;
    height: 35px;
    width: auto;
    padding: 1% 1% 1% 10%;
    vertical-align: middle;
}
.imagfootdecal2{
    /*display: inline-block;*/
    font-family: Helvetica, Arial, sans-serif;
    height: 35px;
    width: auto;
    padding: 1% 1% 1% 0%;
    vertical-align: middle;
}
a { text-decoration: none;
	color: black;  
} 
a:hover { 
	color: blue; /* pour le passage de la souris*/
}	
body footer {
    background-color: rgb(220,220,220);
    overflow: hidden;
    /*bottom:0;*/
    /*display: inline-block;*/
    width:100%;
    font-size: smaller;

    
    /*height:50px;*/
  
}

}
/* Le truc qui suit c'est pour les ipomme */
@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
}
</pre>
  </body>
</html>