/* HEADER */

#header ul.site{
	float:left;
}

#header ul.mespages{
	float: right;
}

#header ul.icones{
	float: right;
}

#header ul.categorie{
	float: left;
}

.sitehote{
	font-family:Times New Roman;
}

.timesnewroman{
	font-family:Times New Roman;
	font-style:italic;
} 


.bandeau{
	clear: both;
	float:left;
	width: 100%;
	padding:0;
	margin:0;
}
ul.bandeau li{
	float:left;
}


/* Versions mobiles */
.containFK {
    float:left;
}
.containbar {
    float:left;
}

.bar1, .bar2, .bar3{
    background-color: #333;
}

/* Menu accordéon */
#sommaire{
	max-height: 0;
    overflow: hidden;
	width: 100%;
	-webkit-transition: max-height 0.2s ease-out; /* Safari */
    transition: max-height 0.2s ease-out;	
}

.icone{
	cursor:pointer;
}
.drapeau{
	margin-top: 0.25rem;
}

@media all and (max-width:374px) {

	/* Iphone 3 4 5 portrait 320px */
	#header{
		padding:0;
		margin:0;
	}

	#content{
		padding: 0 0 1rem 0;
	}

	.containFK {
	    width: 85%;
	    margin:0;
	    padding:0.7rem 0 0 0;
	}

	#header ul.site li.sitehote {
		font-size:1.5rem;
		margin:0 0 0 1rem;
		font-weight:500;
		float:left;
		clear:both;
	}

	#header ul.mespages{
		float:left;
	}
	#header ul.mespages li.mesinfos{
		margin:0 0 0 1rem;
		font-size: 1rem;
		font-weight: 300;
		float:left;
	}

	.containbar {
	    width: 10%;
	    cursor: pointer;
	    margin:2.5% 0 0 0;
	    padding-top:0.8rem;
	}
	.bar1{
	    width: 80%;
	    height: 3px;
	    margin-right: 20%;
	   	margin-bottom: 7px;
	}
	.bar2{
	    width: 80%;
	    height: 3px;
	   	margin-right: 20%;
	   	margin-bottom: 7px;
	}
	.bar3{
	    width: 80%;
	    height: 3px;
	    margin-right: 20%;
	   	margin-bottom: 0;
	}

	#sommaire ul.categorie li{
		display: block;
		text-align: left;
		margin: 0 0 0.5rem 1rem;
	}
	#sommaire ul.categorie li.right{
		display: block;
		text-align: right;
		margin:1rem 1rem -1.5rem 0;
	}
	#sommaire ul li.icone{
		display: inline-block;
		text-align: center;
		margin: 0 1rem 0 1rem;
	}

}

@media all and (min-width:375px) and (max-width:479px){

	/* Iphone 6 portrait 375px */
	#header{
		padding:0;
		margin:0;
	}

	#content{
		padding: 0 0 1rem 0;
	}

	.containFK {
	    width: 85%;
	    margin:0;
	    padding:0.7rem 0 0 0;
	}

	#header ul.site li.sitehote {
		font-size:1.5rem;
		margin:0 0 0 1rem;
		font-weight:500;
		float:left;
		clear:both;
	}

	#header ul.mespages{
		float:left;
	}
	#header ul.mespages li.mesinfos{
		margin:0 0 0 1rem;
		font-size: 1rem;
		font-weight: 300;
		float:left;
	}

	.containbar {
	    width: 10%;
	    cursor: pointer;
	    margin:0;
	    padding-top:1.3rem;
	}
	.bar1{
	    width: 80%;
	    height: 3px;
	    margin-right: 20%;
	   	margin-bottom: 7px;
	}
	.bar2{
	    width: 80%;
	    height: 3px;
	   	margin-right: 20%;
	   	margin-bottom: 7px;
	}
	.bar3{
	    width: 80%;
	    height: 3px;
	    margin-right: 20%;
	   	margin-bottom: 0;
	}

	#sommaire ul.categorie li{
		display: block;
		text-align: left;
		margin: 0 0 0.5rem 1rem;
		}
	#sommaire ul.categorie li.right{
		display: block;
		text-align: right;
		margin:1rem 1rem -1.5rem 0;
	}
	#sommaire ul li.icone{
		display: inline-block;
		text-align: center;
		margin: 0 1rem 0 1rem;
	}

}

@media all and (min-width:480px) and (max-width:567px){

	/* iphone 3 4 paysage 480px */
	#header{
		padding:0;
		margin:0;
	}

	#content{
		padding: 0 0 1rem 0;
	}

	.containFK {
	    width: 85%;
	    margin:0;
	    padding:0.7rem 0 0 0;
	}

	#header ul.site li.sitehote {
		font-size:1.5rem;
		margin:0 0 0 1rem;
		font-weight:500;
	}

	#header ul.mespages{
		float:left;
	}
	#header ul.mespages li.mesinfos{
		margin:0 0 0 1rem;
		font-size: 1rem;
		font-weight: 300;
		float:left;
	}

	.containbar {
	    width: 10%;
	    cursor: pointer;
	    margin:0;
	    padding-top:1.3rem;
	}
	.bar1{
	    width: 80%;
	    height: 3px;
	    margin-right: 20%;
	   	margin-bottom: 7px;
	}
	.bar2{
	    width: 80%;
	    height: 3px;
	   	margin-right: 20%;
	   	margin-bottom: 7px;
	}
	.bar3{
	    width: 80%;
	    height: 3px;
	    margin-right: 20%;
	   	margin-bottom: 0;
	}

	#sommaire ul.categorie li{
		display: block;
		text-align: left;
		margin: 0 0 0.5rem 1rem;
		}
	#sommaire ul.categorie li.right{
		display: block;
		text-align: right;
		margin:1rem 1rem -1.5rem 0;
	}
	#sommaire ul li.icone{
		display: inline-block;
		text-align: center;
		margin: 0 1rem 0 1rem;
	}

}

@media all and (min-width:568px) and (max-width:639px) {

	/* iphone 5 paysage 568px */
	#header{
		padding:0;
		margin:0;
	}

	#content{
		padding: 0 0 1rem 0;
	}

	.containFK {
	    width: 90%;
	    margin:0;
	    padding:0.7rem 0 0 0;
	}

	#header ul.site li.sitehote {
		font-size:1.6rem;
		margin:0 0 0 1rem;
		font-weight:500;
	}

	#header ul.mespages{
		padding:0.2rem 1rem 0 0;
	}
	#header ul.mespages li.mesinfos{
		margin:0 0 0 1rem;
		font-size: 1rem;
		font-weight: 300;
	}

	.containbar {
	    width: 8%;
	    cursor: pointer;
	    margin:0;
	    padding-top:0.8rem;
	    padding-bottom:0.2rem;
	}
	.bar1{
	    width: 80%;
	    height: 3px;
	    margin-right: 20%;
	   	margin-bottom: 7px;
	}
	.bar2{
	    width: 80%;
	    height: 3px;
	   	margin-right: 20%;
	   	margin-bottom: 7px;
	}
	.bar3{
	    width: 80%;
	    height: 3px;
	    margin-right: 20%;
	   	margin-bottom: 0;
	}

	#sommaire ul.categorie li{
		display: block;
		text-align: left;
		margin: 0 0 0.5rem 1rem;
		}
	#sommaire ul.categorie li.right{
		display: block;
		text-align: right;
		margin:1rem 1rem -1.5rem 0;
	}
	#sommaire ul li.icone{
		display: inline-block;
		text-align: center;
		margin: 0 1rem 0 1rem;
	}

}

@media all and (min-width:640px) and (max-width:719px) {

	/* Samsung galaxy paysage 640px iphone 6 paysage 667 */
	/* Navigation mobile */
	#header{
		padding:0;
		margin:0;
	}

	#content{
		padding: 0 0 1rem 0;
	}

	.containFK {
	    width: 90%;
	    margin:0;
	    padding:0.7rem 0 0 0;
	}

	#header ul.site li.sitehote {
		font-size:1.6rem;
		margin:0 0 0 1rem;
		font-weight:500;
	}

	#header ul.mespages{
		padding:0.2rem 1rem 0 0;
	}
	#header ul.mespages li.mesinfos{
		margin:0 0 0 1rem;
		font-size: 1rem;
		font-weight: 300;
	}

	.containbar {
	    width: 8%;
	    cursor: pointer;
	    margin:0;
	    padding-top:0.8rem;
	    padding-bottom:0.2rem;
	}
	.bar1{
	    width: 80%;
	    height: 3px;
	    margin-right: 20%;
	   	margin-bottom: 7px;
	}
	.bar2{
	    width: 80%;
	    height: 3px;
	   	margin-right: 20%;
	   	margin-bottom: 7px;
	}
	.bar3{
	    width: 80%;
	    height: 3px;
	    margin-right: 20%;
	   	margin-bottom: 0;
	}

	#sommaire ul.categorie li{
		display: block;
		text-align: left;
		margin: 0 0 0.5rem 1rem;
		}
	#sommaire ul.categorie li.right{
		display: block;
		text-align: right;
		margin:1rem 1rem -1.5rem 0;
	}
	#sommaire ul li.icone{
		display: inline-block;
		text-align: center;
		margin: 0 1rem 0 1rem;
	}

}

@media all and (min-width:720px) and (max-width:767px) {

	/* Microsoftsurface portrait 720 px iphone 6+ paysage 736 */
	#header{
		padding:0;
		margin:0;
	}

	#content{
		padding: 0 0 1rem 0;
	}

	.containFK {
	    width: 90%;
	    margin:0;
	    padding:0.7rem 0 0 0;
	}

	#header ul.site li.sitehote {
		font-size:1.6rem;
		margin:0 0 0 1rem;
		font-weight:500;
	}

	#header ul.mespages{
		float:right;
		padding:0.2rem 1rem 0 0;
	}
	#header ul.mespages li.mesinfos{
		margin:0 0 0 1rem;
		font-size: 1rem;
		font-weight: 300;
	}

	.containbar {
	    width: 8%;
	    cursor: pointer;
	    margin:0;
	    padding-top:0.8rem;
	    padding-bottom:0.2rem;
	}
	.bar1{
	    width: 80%;
	    height: 3px;
	    margin-right: 20%;
	   	margin-bottom: 7px;
	}
	.bar2{
	    width: 80%;
	    height: 3px;
	   	margin-right: 20%;
	   	margin-bottom: 7px;
	}
	.bar3{
	    width: 80%;
	    height: 3px;
	    margin-right: 20%;
	   	margin-bottom: 0;
	}

	#sommaire ul.categorie li{
		display: block;
		text-align: left;
		margin: 0 0 0.5rem 1rem;
		}
	#sommaire ul.categorie li.right{
		display: block;
		text-align: right;
		margin:1rem 1rem -1.5rem 0;
	}
	#sommaire ul li.icone{
		display: inline-block;
		text-align: center;
		margin: 0 1rem 0 1rem;
	}

}

/* Tablettes */		

@media all and (min-width:768px) and (max-width:959px) {

	/* ipad portrait 768px Samsung Tab 800px */
	#header ul.site{
		margin: 0.5rem 0 0 1rem;
	}
	#header ul.site li.sitehote{
		font-size: 2rem;
		margin:0;
	}

	#header ul.mespages{
		margin:0.8rem 0 0 0;
	}
	#header ul.mespages li.mesinfos{
		font-size: 1.1rem;
		margin:0 1rem 0 0;
	}

	#header ul.icones{
		margin:0 1rem 0 0;
	}

	#header ul.categorie {
		margin:0.3rem 0 0.3rem 1rem;
	}
	#header ul.categorie li{
		float: left;
		font-size: 1.1rem;
		margin:0 1.5rem 0 0;
	}

}

@media all and (min-width:960px) and (max-width:1023px) {

	/* Asus LG  paysage 960px */
	#header ul.site{
		margin: 0.5rem 0 0 1rem;
	}
	#header ul.site li.sitehote{
		font-size: 2rem;
		margin:0;
	}

	#header ul.mespages{
		margin:0.8rem 0 0 0;
	}
	#header ul.mespages li.mesinfos{
		font-size: 1.1rem;
		margin:0 1rem 0 0;
	}

	#header ul.icones{
		margin:0 1rem 0 0;
	}

	#header ul.categorie {
		margin:0.3rem 0 0.3rem 1rem;
	}
	#header ul.categorie li{
		float: left;
		font-size: 1.1rem;
		margin:0 2rem 0 0;
	}

}

@media all and (min-width:1024px) and (max-width:1099px) {

	/* ipad paysage 1024 px */
	#header ul.site{
		margin: 0.5rem 0 0 1rem;
	}
	#header ul.site li.sitehote{
		font-size: 2rem;
		margin:0;
	}

	#header ul.mespages{
		margin:0.8rem 0 0 0;
	}
	#header ul.mespages li.mesinfos{
		font-size: 1.1rem;
		margin:0 1rem 0 0;
	}

	#header ul.icones{
		margin:0 1rem 0 0;
	}

	#header ul.categorie {
		margin:0.3rem 0 0.3rem 1rem;
	}
	#header ul.categorie li{
		float: left;
		font-size: 1.1rem;
		margin:0 2rem 0 0;
	}

}

/* Ordinateurs */

@media all and (min-width:1100px) and (max-width:1199px) {

	#header ul.site{
		margin: 0.5rem 0 0 1rem;
	}
	#header ul.site li.sitehote{
		font-size: 2.2rem;
		margin:0;
	}

	#header ul.mespages{
		margin:0.8rem 0 0 0;
	}
	#header ul.mespages li.mesinfos{
		font-size: 1.2rem;
		margin:0 1rem 0 0;
	}

	#header ul.icones{
		margin:0 1rem 0 0;
	}

	#header ul.categorie {
		margin:0.3rem 0 0.3rem 1rem;
	}
	#header ul.categorie li{
		float: left;
		font-size: 1.2rem;
		margin:0 2.5rem 0 0;
	}

}

@media all and (min-width:1200px) and (max-width:1279px) {

	#header ul.site{
		margin: 0.5rem 0 0 1rem;
	}
	#header ul.site li.sitehote{
		font-size: 2.2rem;
		margin:0;
	}

	#header ul.mespages{
		margin:0.8rem 0 0 0;
	}
	#header ul.mespages li.mesinfos{
		font-size: 1.3rem;
		margin:0 1rem 0 0;
	}

	#header ul.icones{
		margin:0 1rem 0 0;
	}

	#header ul.categorie {
		margin:0.3rem 0 0.3rem 1rem;
	}
	#header ul.categorie li{
		float: left;
		font-size: 1.3rem;
		margin:0 2.5rem 0 0;
	}

}

@media all and (min-width:1280px) and (max-width:1365px) {

	#header ul.site{
		margin: 0.5rem 0 0 1rem;
	}
	#header ul.site li.sitehote{
		font-size: 2.2rem;
		margin:0;
	}

	#header ul.mespages{
		margin:0.8rem 0 0 0;
	}
	#header ul.mespages li.mesinfos{
		font-size: 1.3rem;
		margin:0 1rem 0 0;
	}

	#header ul.icones{
		margin:0 1rem 0 0;
	}

	#header ul.categorie {
		margin:0.4rem 0 0.4rem 1rem;
	}
	#header ul.categorie li{
		float: left;
		font-size: 1.3rem;
		margin:0 2.5rem 0 0;
	}

}

@media all and (min-width:1366px) and (max-width:1400px) {

	#header ul.site{
		margin: 0.5rem 0 0 1rem;
	}
	#header ul.site li.sitehote{
		font-size: 2.2rem;
		margin:0;
	}

	#header ul.mespages{
		margin:0.8rem 0 0 0;
	}
	#header ul.mespages li.mesinfos{
		font-size: 1.3rem;
		margin:0 1rem 0 0;
	}

	#header ul.icones{
		margin:0 1rem 0 0;
	}

	#header ul.categorie {
		margin:0.4rem 0 0.4rem 1rem;
	}
	#header ul.categorie li{
		float: left;
		font-size: 1.3rem;
		margin:0 2.5rem 0 0;
	}

}

@media all and (min-width:1400px) and (max-width:1499px) {

	#header ul.site{
		margin: 0.5rem 0 0 1rem;
	}
	#header ul.site li.sitehote{
		font-size: 2.3rem;
		margin:0;
	}

	#header ul.mespages{
		margin:0.8rem 0 0 0;
	}
	#header ul.mespages li.mesinfos{
		font-size: 1.3rem;
		margin:0 1rem 0 0;
	}

	#header ul.icones{
		margin:0 1rem 0 0;
	}

	#header ul.categorie {
		margin:0.5rem 0 0.5rem 1rem;
	}
	#header ul.categorie li{
		float: left;
		font-size: 1.3rem;
		margin:0 3rem 0 0;
	}

}

@media all and (min-width:1500px) and (max-width:1599px) {

	#header ul.site{
		margin: 0.5rem 0 0 1rem;
	}
	#header ul.site li.sitehote{
		font-size: 2.3rem;
		margin:0;
	}

	#header ul.mespages{
		margin:0.8rem 0 0 0;
	}
	#header ul.mespages li.mesinfos{
		font-size: 1.3rem;
		margin:0 1rem 0 0;
	}

	#header ul.icones{
		margin:0 1rem 0 0;
	}

	#header ul.categorie {
		margin:0.5rem 0 0.5rem 1rem;
	}
	#header ul.categorie li{
		float: left;
		font-size: 1.3rem;
		margin:0 3rem 0 0;
	}

}

@media all and (min-width:1600px) and (max-width:1699px) {

	#header ul.site{
		margin: 0.5rem 0 0 1rem;
	}
	#header ul.site li.sitehote{
		font-size: 2.4rem;
		margin:0;
	}

	#header ul.mespages{
		margin:0.8rem 0 0 0;
	}
	#header ul.mespages li.mesinfos{
		font-size: 1.4rem;
		margin:0 1rem 0 0;
	}

	#header ul.icones{
		margin:0 1rem 0 0;
	}

	#header ul.categorie {
		margin:0.5rem 0 0.5rem 1rem;
	}
	#header ul.categorie li{
		float: left;
		font-size: 1.4rem;
		margin:0 3rem 0 0;
	}

}

@media all and (min-width:1700px) and (max-width:1799px) {

	#header ul.site{
		margin: 0.5rem 0 0 1rem;
	}
	#header ul.site li.sitehote{
		font-size: 2.4rem;
		margin:0;
	}

	#header ul.mespages{
		margin:0.8rem 0 0 0;
	}
	#header ul.mespages li.mesinfos{
		font-size: 1.4rem;
		margin:0 1rem 0 0;
	}

	#header ul.icones{
		margin:0 1rem 0 0;
	}

	#header ul.categorie {
		margin:0.5rem 0 0.5rem 1rem;
	}
	#header ul.categorie li{
		float: left;
		font-size: 1.4rem;
		margin:0 3rem 0 0;
	}

}

@media all and (min-width:1800px) {

	#header ul.site{
		margin: 0.5rem 0 0 1rem;
	}
	#header ul.site li.sitehote{
		font-size: 2.4rem;
		margin:0;
	}

	#header ul.mespages{
		margin:0.8rem 0 0 0;
	}
	#header ul.mespages li.mesinfos{
		font-size: 1.4rem;
		margin:0 1rem 0 0;
	}

	#header ul.icones{
		margin:0 1rem 0 0;
	}

	#header ul.categorie {
		margin:0.5rem 0 0.5rem 1rem;
	}
	#header ul.categorie li{
		float: left;
		font-size: 1.4rem;
		margin:0 3rem 0 0;
	}

}