*{margin:0;padding:0;}
body{font-family: Arial,Helvetica,sans-serif;font-size:13px;background-color:#f5f3f3;color:#474647;}
a{color:#5372c2;text-decoration:none;cursor:pointer;}
a:hover{color:#ff6600;}
a img{border:none;}
p{margin-top:5px;margin-bottom:8px;}
ul{margin-left:30px;}
button{padding:2px;padding-right:4px;padding-left:4px;cursor:pointer;}
input[type='radio']{margin-left:6px;}
.spacer-bottom{margin-bottom:6px;}
.normal-text{font-family: Arial,Helvetica,sans-serif;font-size:13px;color:#474647;font-weight:normal;}
.small-text{font-family: Arial,Helvetica,sans-serif;font-size:11px;color:#969698;font-weight:normal;margin-bottom:2px;}
.text-right{text-align:right;}
.text-left{text-align:left;}
.float-right{float:right;}
.float-left{float:left;}
.separator-dashed, .separator-solid{margin-bottom:4px;padding-bottom:4px;color:#a7a5a7;}
.separator-dashed{border-bottom:1px dashed #a7a5a7;}
.separator-solid{border-bottom:1px solid #a7a5a7;}
span.important{color:#ff6600;font-weight:bold;}
select optgroup{font-style:italic;color:#a7a5a7;}
button[type=button]:disabled, input:disabled, .disabled{color:#a7a5a7;}

/* TITLE */
h1{font-size:22px;font-weight:bold;color:#ff6600;border-bottom:1px solid #a7a5a7;margin-bottom:8px;}
h2{font-size:16px;font-weight:bold;color:#4f70c3;margin-bottom:6px;margin-top:6px;}
h3{font-size:13px;font-weight:bold;color:#565556;margin-bottom:6px;margin-top:4px;}
h4{font-size:13px;font-weight:normal;margin-bottom:8px;}

h1 .back,
h2 .back,
h3 .back,
h4 .back{float:right;font-size:12px;padding-top:6px;}
h1 .back a .arrow,
h2 .back a .arrow,
h3 .back a .arrow,
h4 .back a .arrow{font-size:16px;}

h1 .back a{color:#ff6600;}
h1 .back a:hover{color:#5372c2;}

/* BACKGROUND */

.background{
    top: 0px;
    left: 0px;
}
.background-middle{
    background:url('../images/banner.png') no-repeat;
    background-position: center top;
    height: 255px;
    width: 100%;
    position: absolute;
    z-index: -1;
}
.background-left, .background-right{
	background-repeat: repeat-x;
    width: 50%;
    height: 255px;
    overflow: hidden;
    position: absolute;
    z-index: -2;
}
.background-left{background-image: url('../images/banner-repeat-left.png'); left: 0;}
.background-right{background-image: url('../images/banner-repeat-right.png'); right: 0;}

header {
    min-height: 255px;
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
}

header .inner {
	width: 100%;
	display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
}


/* PAGE WRAPPER */
.page-wrapper{position:relative;max-width:1200px;margin:0 auto;}

/* HEADER */
header .logo{position: relative; top: 40px; width:250px;height:90px;background:url('../images/logo.png') no-repeat;}
header .logo-legend{font-style:italic;font-weight:bold;font-size:10px;}
/*
header .menu{position:relative;top:120px;margin-left:4px;display: flex; justify-content: space-between;}
header span.menu-item{margin-right:38px;text-decoration:none;font-weight:bold;color:#5372c2;letter-spacing:1px;}
header span.menu-item a:hover{color:#ff6600;}
header span.menu-item.active, .header span.menu-item a.active{color:#ff6600;}
*/

header .menu {
	display: flex;
	justify-content: center;
	width: 100%;
}

header .menu .menu-item {
	margin: 0 10px;
}

/* BODY - CONTAINERS */
.container-3-cols{float:left;width:984px;margin-left:3px;margin-right:12px;}
.container-2-cols{float:left;width:650px;margin-left:3px;margin-right:15px;}
.container-1-col{float:left;width:319px;margin-right:3px;}
.sub-container-3-cols{float:left;width:960px;}
.sub-container-2-cols{float:left;width:100%;}
.sub-container-1-col{float:left;width:100%; max-width:300px; margin-bottom:20px;}
.sub-container-1-col.last{margin-right:0px;}
.sub-container-2-cols img {
	width: 100%;
}

/* LEFT-PART */
.result-message{margin-bottom:10px;}

/* RIGHT-PART */
.user {margin-bottom:12px;}
.user .warning{margin-top:12px;}
.user form table tr td{padding-bottom:4px;}
.social-network-links{position:relative;top:-14px;text-align:center;}
.social-network-links img{position:relative;top:16px;margin-left:2px;margin-right:2px;}

/* FOOTER */
.footer{width:100%;position:relative;clear:both;padding-top:35px;padding-bottom:8px;color:#565556;font-size:11px;}
.footer .menu{width:100%;text-align:center;margin-top:6px;margin-bottom:4px;}
.footer .menu a.menu-item{font-weight:bold;color:#565556;margin-right:20px;}
.footer .menu a.menu-item:hover{text-decoration:underline;}
.footer .legal{text-align:center;font-style:italic;margin-top:12px;}

/* STAFF, ADMIN, etc */
.staff{color:#a7a5a7;font-weight:normal;}

/* "voir les détails" LINK */
.details{font-style:italic;font-size:11px;font-weight:normal;}

/* cookie banner */
#cookie-banner {
	display: none;
	margin-bottom: 12px;
	background-color: #fff;
	padding: 12px;
	z-index: 999;
	border-radius: 3px;
}

/* Reponsive */
.body {
	display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
    grid-auto-rows: auto;
    margin: 10px;
}

.body > .main {
	grid-column: 1 / span 3;
}

.menu.active {
  display: flex;
}

#menu-toggle {
	display: flex;
	position: absolute;
    top: 205px;
    right: 20px;
    color: white;
}

.gallery.media {
	display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(250px, auto);
    margin: 1em;
}

.legal {
	margin: 10px;
}

.normal-list .img,
.normal-element-highlight .img {
	background-position: center !important;
}

.gallery.media .sub-container-1-col {
    max-width: 250px !important;
    width: 100% !important;
    margin: 0px !important;
}

.gallery.media .block-1-col {
	width: 100%;
}

.gallery .sub-container-1-col {
	width: 100%;
}

input {
	/*-webkit-appearance: none;*/
	/*-moz-appearance: none;*/
	/*appearance: none;*/
}

.footer .menu .icon {
	padding-left: 0px !important;
}

@media screen and (max-width: 1024px) {
	.gallery.media {
	    grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 768px) {
	.body {
		display: flex;
		flex-direction: column;
	}
	.content {
		margin: 10px;
	}
	div.normal-list a.img, div.normal-element-highlight a.img,
	div.normal-list div.content, div.normal-element-highlight div.content {
		width: 100% !important;
	}
	.normal-element-highlight {
		background-position: left;
	}
	#menu-toggle {
    	display: block;
    	width: 32px;
	    height: 32px;
	    background: url(../images/icon/32x32/menu.png);
	    background-repeat: no-repeat;
	    background-size: 20px;
	    background-position: bottom center;
	}
	header .menu {
		padding: 10px;
	    margin-top: 125px;
	    display: flex;
	    flex-direction: column;
	    background: black;
	    align-items: center;
		padding-bottom: 20px;
		display: none;
		margin-bottom: -5px;
		padding-top: 40px;
	}
	header .menu .menu-item {
		margin: 5px;
	}
	.footer {
		padding-top: 10px;
	}
	.footer .menu {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	.footer .menu .menu-item {
		margin: 0 10px;
	}
	.icon-rss, a.icon-rss:hover, a.icon-rss-hover, .icon-rss.active {
		background-image: none !important;
	}
	.logo-legend {
		position: absolute;
		top: 220px;
		left: 20px;
		color: white;
	}
	header .menu-item a {
		color: white;
	}
	.normal-list .img,
	.normal-element-highlight .img {
		background-position: left !important;
	}
	.background-middle {
		background-position: left top !important;
	}
	.sub-container-1-col,
	.block-1-col {
		width: 100% !important;
		max-width: 100% !important;
		background-size: cover !important;
	}
	div.normal-element-highlight a.img,
	div.small-list a.img,
	div.big-list a.img,
	div.normal-list a.img {
		width: 100% !important;
		background-size: cover !important;
		height: 200px !important;
	}
	.cart-table tbody > tr,
	.single-product-table tbody > tr,
	.magazine-table tbody > tr {
		display: flex !important;
		flex-wrap: wrap !important;
	}
	
	.magazine-table tbody > tr > td {
		width: 50% !important;
	}
	
	.cart-table tbody > tr > td,
	.single-product-table tbody > tr > td {
		width: 100% !important;
	}
	
	table.shop-item-one tbody > tr {
		display: flex; 
		flex-direction: column;
	}
	
	div.submit-error-result, span.submit-error-result {
		margin: 0px !important;
	}
	.gallery.mediaItem {
		pointer-events: none !important;
	}
	table.shop-item-one td.shop-item-one-bottom {
		border: none !important;
	}
	
	table.shop-item-list tr {
		display: flex !important;
		flex-wrap: wrap !important;
	}
	
	table.shop-item-list tr > td {
		width: 50%;
	}
	textarea,
	input[type] {
		width: 100% !important;
	}
	

}