/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

*{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

body{
	background: url("images/fond.png");
	color: #bfafeb;
	font-family: Tahoma, sans-serif;
	font-size: .9em;
}

a{
	color: #ebe1ff;
	font-size: 1em;
	text-decoration: none;
}
a:hover,a:focus{
	color: #bfafeb;
}

p{
	line-height: 1.5em;
	margin: 5px;
	text-align: justify;
}

p.important{
	text-align: center;
	line-height: 1.5em;
	font-size: 2em;
	
}

.contenaire{
	background: #37006a;
	border: solid #bfafeb 4px;
	border-radius: 12px;
	margin: 0 auto;
	width: 70%;
}


header{
	background: #37006a;
	border-bottom: solid #bfafeb 4px;
	border-radius: 12px 12px 0 0;
	height: 341px;
	text-align: center;
}

h2{
	font-family: 'Script MT Bold', Tahoma, sans-serif;
	margin: 0 5px;
	text-align: center;
}
h3{
	font-family: 'Script MT Bold', Tahoma, sans-serif;
	font-size: 1.5em;
	margin: 5px 5px 5px 10%;
}

aside h4{
	background: #4f81bd;
	background: -webkit-linear-gradient(#4f81bd,#003257); 
	background: -moz-linear-gradient(#4f81bd,#003257); 
	background: -ms-linear-gradient(#4f81bd,#003257); 
	background: -o-linear-gradient(#4f81bd,#003257); 
	background: linear-gradient(#4f81bd,#003257);
	color: #dce6f2;
	display:table;
	padding: 5px;
	margin: 0;
	border-radius: 12px 0 0 0;
	border-bottom: dotted #003257 3px;
	width: 100%;
}

aside{
	float: right;
	border: solid #003257 2px;
	border-right: solid #003257 0;
	border-radius: 12px 0 0 12px;
	width: 25%;
	padding: 0;
}


nav ul{
	background: #bfafeb;
	background: -webkit-linear-gradient(#bfafeb,#37006a); 
	background: -moz-linear-gradient(#bfafeb,#37006a); 
	background: -ms-linear-gradient(#bfafeb,#37006a); 
	background: -o-linear-gradient(#bfafeb,#37006a); 
	background: linear-gradient(#bfafeb,#37006a);
	border-left: solid #bfafeb 2px;
	border-top: solid #bfafeb 2px;
	border-radius: 12px 0 0 0;
	color: #37006a;
	display:table;
	margin:0 0 0 20%;
	text-transform:uppercase;
	width:80%;
	padding: 0;
}

nav ul li{
	display: table-cell;
}

nav ul li a{
	display : block;
	padding: 5px 0 10px 0;
	text-align: center;
}

nav ul li a:hover, nav ul li a:focus, nav ul li a.actif{
	background: rgba(220,230,242,.2);
	color:#37006a;
	font-weight: bold;
}

nav ul li a.coin_arrondi:hover, nav ul li a.coin_arrondi:focus, nav ul li a.coin_arrondi.actif{
	border-radius: 12px 0 0 0;
	background: rgba(220,230,242,.2);
	font-weight: bold;
}

/* .coin_arrondi.actif{ */
	/* background: #37006a; */
	/* background: -webkit-linear-gradient(#37006a,#bfafeb);  */
	/* background: -moz-linear-gradient(#37006a,#bfafeb);  */
	/* background: -ms-linear-gradient(#37006a,#bfafeb);  */
	/* background: -o-linear-gradient(#37006a,#bfafeb);  */
	/* background: linear-gradient(#37006a,#bfafeb); */
	/* border-radius: 12px 0 0 0; */
	/* color: #ffffff; */
/* } */
/* .actif{ */
	/* background: #37006a; */
	/* background: -webkit-linear-gradient(#37006a,#bfafeb);  */
	/* background: -moz-linear-gradient(#37006a,#bfafeb);  */
	/* background: -ms-linear-gradient(#37006a,#bfafeb);  */
	/* background: -o-linear-gradient(#37006a,#bfafeb);  */
	/* background: linear-gradient(#37006a,#bfafeb); */
	/* color: #ffffff; */
/* } */
.content h1,.content h2{
	font-family: 'Script MT Bold', sans-serif;
}

.sous_menu {
	background: #bfafeb;
	background: -webkit-linear-gradient(to right,#bfafeb,#37006a); 
	background: -moz-linear-gradient(to right,#bfafeb,#37006a); 
	background: -ms-linear-gradient(to right,#bfafeb,#37006a); 
	background: -o-linear-gradient(to right,#bfafeb,#37006a); 
	background: linear-gradient(to right,#bfafeb,#37006a);
	border-bottom: solid #37006a 2px;
	border-left: solid #37006a 2px;
	border-top: solid #37006a 2px;
	border-radius: 12px 0 0 12px;
	color: #37006a;
	margin-left: -15%;
	padding: 0;
	position: fixed;
	text-align: center;
	width: 15%;
}

.sous_menu ul{
	list-style: none;
	text-align: left;
	padding-left: 5px;
}

.sous_menu ul{
	color: #37006a;
}

.sous_menu ul li a{
	color: white;
	display:block;
	padding: 5px;
	text-transform: uppercase;
	
}

.sous_menu a:hover{
	background: rgba(220,230,242,.2);
	border-radius: 12px 0 0 12px;
	color: #37006a;
}

.sous_menu a.actif{
	background: rgba(220,230,242,.2);
	border-bottom: solid #37006a 2px;
	border-left: solid #37006a 2px;
	border-top: solid #37006a 2px;
	border-radius: 12px 0 0 12px;
	color: #37006a;
	font-weight: bold;
}
.sous_menu_mobile{
	display:none;
}
table{
	border: solid #bfafeb  2px;
	border-collapse: collapse;
	margin: 5px auto;
	width: 90%;
}
table tbody th{
	text-align: left;
}
table th{
	background: #37006a;
	border: solid #bfafeb  2px;
	color: #bfafeb ;
	padding: 3px;
}
table td{
	border: solid #bfafeb  1px;
	padding: 3px;
}
table tr:nth-child(even){
	background: rgba(220,230,242,.2);
}

.content img{
	border: solid #bfafeb  2px;
	border-radius: 12px;
}

.img_stock{
	width:15%;
}
.img_stock:hover{
	width:30%;
}

.img_centrer{
	margin-left: 35%;
	width: 30%;
}
.img_centrer:hover{
	width: 60%;
}

.img_presentation{
	width:30%;
}
.img_presentation:hover{
	width:60%;
}
.img_left{
	float:left;
	margin: 4px 4px 4px 20px;
	width: 30%;
}
.img_left:hover{
	width: 50%;
}
.img_right{
	float: right;
	margin: 4px 20px 4px 4px;
	width: 30%;
}
.img_right:hover{
	width: 50%;
}


.no_float{
clear: both;
}

dl dt{
	margin: 5px 0;
	padding: 5px;
	text-decoration: underline;
}

dl {
	line-height: 1.5em;
}

.lien_top{
	margin-right: 5px;
	text-align: right;
}
.lien_top a{
	color: #bfafeb;
	font-size: .8em;
}
.lien_top a:hover{
	text-decoration: underline;
	text-transform: uppercase;
}

footer{
	border-top: solid #bfafeb 2px;
}
footer p{
	margin: 0;
	text-align: center;
}
footer a{
	color: #bfafeb;
	font-size: .8em;
}
footer a:hover{
	text-decoration: underline;
	text-transform: uppercase;
}

@media (max-width:1100px){
	header{
		width: 100%;
		height: auto;
	}
	header h1, header h2{
		font-size: 1.5em;
	}
	header img{
		display: none;
	}
	h2,h3{
		font-size: 1.2em;
	}
	p{
		font-size: .9em;
	}
	.contenaire{
		width: 100%;
		border: solid #bfafeb 2px;
		border-radius: 0;
	}
	.sous_menu{
		display:none;
	}
	.sous_menu_mobile{
		display:table;
	}
	.sous_menu_mobile ul{
		background: #37006a;
		border: solid #bfafeb 2px;
		border-radius: 0;
		color: #bfafeb;
		display:table;
		margin:0;
		width: 100%;
	}
	.sous_menu_mobile ul{
		margin: 0;
		padding: 0;
	}
	.sous_menu_mobile ul li{
		display: block;
	}
	.sous_menu_mobile ul li a{
		display : block;
		padding: 5px;
		text-align: center;
		text-transform: uppercase;
	}
	.sous_menu_mobile ul li a:hover, .sous_menu_mobile ul li a:focus{
		background:#bfafeb;
	}
	nav ul li{
		border-radius: 0;
		display: block;

	}
	nav{
		float: left;
		width: 100%;
	}
	nav ul{
		background:#37006a;
		border-radius: 0;
		border: solid #bfafeb 2px;
		margin:0;
		width: 100%;
	}
	nav ul li a:hover, nav ul li a:focus{
		background: #bfafeb;
		border: none;
	}

	nav ul li a.coin_arrondi:hover, nav ul li a.coin_arrondi:focus{
		background: #bfafeb;
		border: none;
		border-radius: 0;
		
	}
	
	nav ul li a.coin_arrondi.actif, nav ul li a.actif{
		background: #bfafeb;
		border-radius: 0;
		color: #37006a;
		border: none;
	}
	
	.img_centrer{
		margin-left: 5%;
	width: 40%;
	}
	.img_centrer:hover{
	width: 80%;
	}
	.img_stock{
	width:40%;
	}
	.img_stock:hover{
	width:80%;
	}
}