/* HEADER */

#header ul.site{
	float:left;
}

#header ul.icones{
	float: right;
}

#header ul.categorie{
	float: left;
}

.icone{ /* Pour les icones affichées dans les pages */
	width: 35px;
	margin:0;
}
.icone img{
	width: 100%;
}
.sitehote{
	font-family:Times New Roman;
}

/* 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;	
}


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

	/* Iphone 3 4 5 portrait 320px */
	/* Iphone 6 portrait 375px */
	#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.2rem;
		margin:0.2rem 0 0 0;
		font-weight:500;
		float:left;
	}

	#header ul.icones{
		margin:0 1rem 0 0;
	}
	#header ul.icones li.icone{
		width: 21px;
		margin:0 0 0 0.7rem;
		float:left;
		cursor:pointer;
	}

	.containbar {
	    width: 10%;
	    cursor: pointer;
	    margin:0;
	    padding-top:1rem;
	}
	.bar1{
	    width: 50%;
	    height: 2px;
	    margin-left: 25%;
	   	margin-bottom: 5px;
	}
	.bar2{
	    width: 50%;
	    height: 2px;
	   	margin-left: 25%;
	   	margin-bottom: 5px;
	}
	.bar3{
	    width: 50%;
	    height: 2px;
	    margin-left: 25%;
	   	margin-bottom: 0;
	}

	#sommaire ul.categorie li{
		display: block;
		text-align: left;
		margin: 0 0 0.5rem 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: 90%;
	    margin:0;
	    padding:0.7rem 0 0 0;
	}

	#header ul.site li.sitehote {
		font-size:1.3rem;
		margin:0.26rem 0 0 0;
		font-weight:500;
		float:left;
	}

	#header ul.icones{
		margin:0 1rem 0 0;
	}
	#header ul.icones li.icone{
		width: 22px;
		margin:0 0 0 0.7rem;
		float:left;
		cursor:pointer;
	}

	.containbar {
	    width: 10%;
	    cursor: pointer;
	    margin:0;
	    padding-top:1.1rem;
	}
	.bar1{
	    width: 50%;
	    height: 2px;
	    margin-left: 25%;
	   	margin-bottom: 5px;
	}
	.bar2{
	    width: 50%;
	    height: 2px;
	   	margin-left: 25%;
	   	margin-bottom: 5px;
	}
	.bar3{
	    width: 50%;
	    height: 2px;
	    margin-left: 25%;
	   	margin-bottom: 0;
	}

	#sommaire ul.categorie li{
		display: block;
		text-align: left;
		margin: 0 0 0.5rem 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: 90%;
	    margin:0;
	    padding:0.7rem 0 0 0;
	}

	#header ul.site li.sitehote {
		font-size:1.3rem;
		margin:0.25rem 0 0 0;
		font-weight:500;
		float:left;
	}

	#header ul.icones{
		margin:0 1rem 0 0;
	}
	#header ul.icones li.icone{
		width: 22px;
		margin:0 0 0 1.5rem;
		float:left;
		cursor:pointer;
	}

	.containbar {
	    width: 10%;
	    cursor: pointer;
	    margin:0;
	    padding-top:1.1rem;
	}
	.bar1{
	    width: 50%;
	    height: 2px;
	    margin-left: 25%;
	   	margin-bottom: 5px;
	}
	.bar2{
	    width: 50%;
	    height: 2px;
	   	margin-left: 25%;
	   	margin-bottom: 5px;
	}
	.bar3{
	    width: 50%;
	    height: 2px;
	    margin-left: 25%;
	   	margin-bottom: 0;
	}

	#sommaire ul.categorie li{
		display: block;
		text-align: left;
		margin: 0 0 0.5rem 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.4rem;
		margin:0.25rem 0 0 0;
		font-weight:500;
		float:left;
		clear:both;
	}

	#header ul.icones{
		margin:0 1rem 0 0;
	}
	#header ul.icones li.icone{
		width: 22px;
		margin:0 0 0 2rem;
		float:left;
		cursor:pointer;
	}

	.containbar {
	    width: 10%;
	    cursor: pointer;
	    margin:0;
	    padding-top:1.1rem;
	}
	.bar1{
	    width: 50%;
	    height: 2px;
	    margin-left: 25%;
	   	margin-bottom: 5px;
	}
	.bar2{
	    width: 50%;
	    height: 2px;
	   	margin-left: 25%;
	   	margin-bottom: 5px;
	}
	.bar3{
	    width: 50%;
	    height: 2px;
	    margin-left: 25%;
	   	margin-bottom: 0;
	}

	#sommaire ul.categorie li{
		display: block;
		text-align: left;
		margin: 0 0 0.5rem 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.4rem;
		margin:0.25rem 0 0 0;
		font-weight:500;
		float:left;
		clear:both;
	}

	#header ul.icones{
		margin:0 1rem 0 0;
	}
	#header ul.icones li.icone{
		width: 22px;
		margin:0 0 0 2rem;
		float:left;
		cursor:pointer;
	}

	.containbar {
	    width: 10%;
	    cursor: pointer;
	    margin:0;
	    padding-top:1.1rem;
	}
	.bar1{
	    width: 50%;
	    height: 2px;
	    margin-left: 25%;
	   	margin-bottom: 5px;
	}
	.bar2{
	    width: 50%;
	    height: 2px;
	   	margin-left: 25%;
	   	margin-bottom: 5px;
	}
	.bar3{
	    width: 50%;
	    height: 2px;
	    margin-left: 25%;
	   	margin-bottom: 0;
	}

	#sommaire ul.categorie li{
		display: block;
		text-align: left;
		margin: 0 0 0.5rem 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.4rem;
		margin:0.25rem 0 0 0;
		font-weight:500;
		float:left;
		clear:both;
	}

	#header ul.icones{
		margin:0 1rem 0 0;
	}
	#header ul.icones li.icone{
		width: 22px;
		margin:0 0 0 2rem;
		float:left;
		cursor:pointer;
	}

	.containbar {
	    width: 10%;
	    cursor: pointer;
	    margin:0;
	    padding-top:1.1rem;
	}
	.bar1{
	    width: 50%;
	    height: 2px;
	    margin-left: 25%;
	   	margin-bottom: 5px;
	}
	.bar2{
	    width: 50%;
	    height: 2px;
	   	margin-left: 25%;
	   	margin-bottom: 5px;
	}
	.bar3{
	    width: 50%;
	    height: 2px;
	    margin-left: 25%;
	   	margin-bottom: 0;
	}

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

}

/* Tablettes */		

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

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

	#header ul.icones{
		margin: 0 1rem 0 0;
	}
	#header ul.icones li.icone{
		width: 25px;
		margin:0 0 0 2rem;
		float:left;
		cursor:pointer;
	}

	#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.5rem 0;
	}

}

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

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

	#header ul.icones{
		margin: 0 1rem 0 0;
	}
	#header ul.icones li.icone{
		width: 25px;
		margin:0 0 0 2rem;
		float:left;
		cursor:pointer;
	}

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

}

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

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

	#header ul.icones{
		margin: 0 1rem 0 0;
	}
	#header ul.icones li.icone{
		width: 25px;
		margin:0 0 0 2rem;
		float:left;
		cursor:pointer;
	}

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

}

/* Ordinateurs */

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

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

	#header ul.icones{
		margin: 0 1rem 0 0;
	}
	#header ul.icones li.icone{
		width: 25px;
		margin:0 0 0 2rem;
		float:left;
		cursor:pointer;
	}

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

}

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

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

	#header ul.icones{
		margin: 0 1rem 0 0;
	}
	#header ul.icones li.icone{
		width: 26px;
		margin:0 0 0 2rem;
		float:left;
		cursor:pointer;
	}

	#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.5rem 0;
	}

}

@media all and (min-width:1300px) and (max-width:1399px) {

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

	#header ul.icones{
		margin: 0 1rem 0 0;
	}
	#header ul.icones li.icone{
		width: 26px;
		margin:0 0 0 2rem;
		float:left;
		cursor:pointer;
	}

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

}

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

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

	#header ul.icones{
		margin: 0 1rem 0 0;
	}
	#header ul.icones li.icone{
		width: 27px;
		margin:0 0 0 2rem;
		float:left;
		cursor:pointer;
	}

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

}

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

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

	#header ul.icones{
		margin: 0 1rem 0 0;
	}
	#header ul.icones li.icone{
		width: 27px;
		margin:0 0 0 2.5rem;
		float:left;
		cursor:pointer;
	}

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

}

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

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

	#header ul.icones{
		margin: 0 1rem 0 0;
	}
	#header ul.icones li.icone{
		width: 28px;
		margin:0 0 0 2.5rem;
		float:left;
		cursor:pointer;
	}

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

}

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

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

	#header ul.icones{
		margin: 0 1rem 0 0;
	}
	#header ul.icones li.icone{
		width: 28px;
		margin:0 0 0 2.5rem;
		float:left;
		cursor:pointer;
	}

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

}

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

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

	#header ul.icones{
		margin: 0 1rem 0 0;
	}
	#header ul.icones li.icone{
		width: 28px;
		margin:0 0 0 2.5rem;
		float:left;
		cursor:pointer;
	}

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

}