
/*** Agenda ***/
#entete_agenda{
	background:#F2F2F2;
	text-align:center;
	color:#4d4d4d;
	font-size:1.375em;
	text-transform:uppercase;
	padding:6px 0;
	height:38px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
}

#entete_agenda > a{
	background:#4D4D4D center center no-repeat;
	width:38px;
	height:38px;
	margin:-6px 0 0 0;
}
#entete_agenda > a > span{
	display:none;	
}
#entete_agenda > a.prec{
	float:left;
	background-image:url(../images/fleche_blanche_g.png);
}
#entete_agenda > a.suiv{
	float:right;
	background-image:url(../images/fleche_blanche_d.png);
}
#agenda{
	position: relative;
}
#agenda > ul.jours{
	margin:0;
	padding:0;
	list-style:none;
	border-bottom:solid 1px #E6E6E6;
}
#agenda > ul.jours > li{
	float:left;
	height:42px;
	width:14.2857%;
	text-align:center;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	padding:12px 0;
	font-size:0.875em;
	text-transform:uppercase;
	border-right:solid 1px #E6E6E6;
}
#agenda > ul.jours > li:nth-last-child(2){
	border:none;	
}
#agenda > ul.jours > li.clear{
	float:none;
	padding:0;
	width:0;
	height:0;
}
#agenda > ul.jours_mois{
	margin:0;
	padding:0;
	list-style:none;
}
#agenda > ul.jours_mois > li{
	float:left;
	width:14.2857%;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	border-right:solid 1px #E6E6E6;
	border-bottom:solid 1px #E6E6E6;
	background:#f6f6f6;
}
#agenda > ul.jours_mois > li > div{
	width:100%;
	text-align:center;
	float:left;
}
#agenda > ul.jours_mois > li > div > span.num_jour{
	color:#4D4D4D;
	font-size:1.750em;
	display:block;
	position:relative;
	top:50%;
	margin:-14px 0 0 0;
}

#agenda > ul.jours_mois > li.actif > div{
	background:url(../images/loupe_agenda.png) bottom right no-repeat #4d4d4d;
	cursor:pointer;
}
#agenda > ul.jours_mois > li.encours > div{
	background:#000;
}
#agenda > ul.jours_mois > li.actif > div > span.nb_events{
	position:relative;
	display:block;
	background:#FFF;
	color:#4d4d4d;
	width:22px;
	height:22px;
	padding:4px 0 0 0;
	font-size:0.813em;
	border-radius:11px;
	text-align:center;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	left:100%;
	margin:5px 0 0 -27px;
}
#agenda > ul.jours_mois > li.encours > div > span.nb_events{
	color:#4D4D4D;
}
#agenda > ul.jours_mois > li.actif > div > span.num_jour{
	margin:-41px 0 0 0;
}
#agenda > ul.jours_mois > li.actif > div > span.num_jour{
	color:#FFF;
	text-align:center;
}
#agenda > ul.jours_mois > li.actif > ul.detail_jour{
	display:none;
	width:100%;
	border-top:solid 4px #4D4D4D;
	margin:0;
	list-style:none;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	padding:15px;
	background:#FFFFFF;
	position:absolute;
	z-index:50;
	left:0;
	border-bottom:1px solid #E6E6E6;
}
#agenda > ul.jours_mois > li.actif > ul.detail_jour > li{
	border-top: solid 1px #4D4D4D;
}
#agenda > ul.jours_mois > li.actif > ul.detail_jour > a.bt_fermer{
	float:right;
	margin:-15px;
	background:url(../images/btn_fermer.png);
	width:22px;
	height:22px;
}
#agenda > ul.jours_mois > li.actif > ul.detail_jour > a.bt_fermer > span{
	display: none;
}
#agenda > ul.jours_mois > li.actif > ul.detail_jour > p{
	font-size:1.125em;
}
#agenda > ul.jours_mois > li.actif > ul.detail_jour > li > p.titre_evt{
	font-size:1.125em;
	color:#4d4d4d;
}
#agenda > ul.jours_mois > li.actif > ul.detail_jour > li > p.lieu_evt{
	font-size:0.875em;
	margin:0;
}
#agenda > ul.jours_mois > li.inactif > div{
	background:#FFFFFF;
}
#agenda > ul.jours_mois > li.inactif > div > span.num_jour{
	color:#A6A6A7;
}
#agenda > ul.jours_mois > li:nth-child(7n){
	border-right:none;
}
#agenda > ul.jours_mois > li:nth-child(7n+1){
	clear:both;
}

.btn_retour{
	float:left;
	padding:10px 15px;
	margin:20px 0 0 0;
	color:#FFF;
	font-size:0.875rem;
	background:#333;
	border-radius:4px;
}
.btn_retour:hover{
	background:#666;
}

.col_gauche{
	width:48%;
	float:left;
}
.col_droite{
	width:48%;
	float:right;
}


/* CONTACT */

.contact_gauche{
	float:left;
	width:40%;
	padding:6px 0;
	color:#999;
	font-size:0.750em;
}
.contact_gauche label{
	display:block;
	margin:0;
	padding:4px 0;
}
.contact_droite{
	float:right;
	width:60%;
}
.contact_droite input[type="text"], .contact_droite input[type="email"]{
	border:none;
	display:block;
	padding:0 5px;
	min-height:30px;
	margin-bottom:10px;
	width:90%;
	box-sizing:border-box;
	border:1px solid #CCC;
}
.contact_droite select{
	border:none;
	display:block;
	padding:5px;
	height:30px;
	margin-bottom:10px;
	width:90%;
	border:1px solid #CCC;
}
.contact_droite label{
	font-size:0.750em;
	line-height:20px;
	color:#999;
}
.contact_droite textarea{
	border:none;
	display:block;
	padding:5px;
	min-height:100px;
	margin-bottom:10px;
	width:90%;
	border:1px solid #CCC;
	box-sizing:border-box;
}
.contenu form input[type="submit"]{
	cursor:pointer;
	float:left;
	color:#FFF;
	font-size:0.750em;
	background:#2c1d6b;
	padding:10px 16px;
	font-weight:bold;
	margin:10px 0 0 0;
	border:none;
	font-family:Arial, Helvetica, sans-serif;
}
.contenu form input[type="submit"]:hover{
	background:#000;
	color:#FFF;
}

/*** Produits ***/

section#listing_produits{
	margin:0 -10px;
	display: flex;
	flex-wrap:wrap;
}
section#listing_produits article {
    flex-basis: 25%;
}
section#listing_produits article div {
	margin:10px;
	min-height:280px;
}
section#listing_produits article div a {
    color: #666;
    display: block;
    font-size: 0.75em;
}
section#listing_produits article div img {
    display: block;
    margin-bottom: 15px;
    width: 100%;
}
section#listing_produits article div a strong {
    color: #000;
    display: block;
    font-size: 0.9rem;
}
section#listing_produits article div p.desc_prod {
    color: #666;
    display: block;
    font-size: 0.75em;
}
section#listing_produits article div p.prix_prod {
    font-size: 0.9rem;
	font-weight:bold;
	color:#000;
}

/*** Produits dans une page de contenu ***/

#contenu_listing_produits{
	margin:0 -10px;
	display: flex;
	flex-wrap:wrap;
}

#contenu_listing_produits article {
    flex-basis: 25%;
}
#contenu_listing_produits article div {
	margin:10px;
	min-height:280px;
}
#contenu_listing_produits article div a {
    color: #666;
    display: block;
    font-size: 0.75em;
}
#contenu_listing_produits article div img {
    display: block;
    margin-bottom: 15px;
    width: 100%;
}

#contenu_listing_produits article div a strong {
    color: #000;
    font-weight:600;
    display: block;
    font-size: 0.9rem;
}
#contenu_listing_produits article div p.desc_prod {
    color: #666;
    display: block;
    line-height: 1.5em;
    font-size: 0.75em;
}
#contenu_listing_produits article div p.prix_prod {
    font-size: 0.9rem;
	font-weight:bold;
	color:#000;
}

/******************************************/

/******** Detail de d'un produit *********/


.detail_produit{
	display:flex;
	flex-wrap:wrap;
}

.detail_produit img{
	float:left;
	max-width:400px;
	width:100%;
	margin:0 0 10px;
}

.detail_produit h1{
	font-size:2rem;
	font-weight:bold;
	flex-basis:100%;
	margin:30px 0;
}

.detail_produit #zone_img{
	flex-basis:45%;
	padding-right:30px;
}

.detail_produit #zone_img ul{
	display:flex;
	flex-wrap:wrap;
	padding:0;
}

.detail_produit #zone_img ul li a img{
	float:none;
	max-width:none;
}

.detail_produit #zone_img ul li:before{
	content:none;	
}

.detail_produit #zone_img ul .bigthumb{
	flex-basis:100%;
}

.detail_produit #zone_img ul .bigthumb a{
	display: flex;
}

.detail_produit #zone_img ul .bigthumb a img{
	width:100%;
	height:100%;
    object-fit: cover;
    object-position:center;
}


.detail_produit #zone_description{
	align-self: stretch;
	flex-basis:55%;
}

.detail_produit #zone_description p{
	font-weight:400;
	margin:15px 0;
}

.detail_produit #zone_description .prix{
	font-size:1.5em;
	font-weight:bold;
}

.detail_produit .btn_retour{
	border-radius:0;
}

/******************************************/



article .barre{text-decoration: line-through;font-size:0.8em;}


#zone_img{
	float:left;
	width:45%;
	padding-right:5%;
}
#zone_img ul li{
	float:left;
	list-style:none;
}
#zone_img ul li.bigthumb{
	width:99%;
}
#zone_img ul li.thumb{
	width:33%;
}
#zone_img ul li.thumb a{
	display:block;padding:0 3px;
}

ul.lightGallery>li{display:block;float:left;}

.front_message{
    position:fixed;
    top:130px;
    left:50%;
    width:400px;
    margin-left:-200px;
    border-radius:5px;
    box-shadow:0px 2px 5px rgba(0,0,0,0.56) ;
    padding:10px;
    z-index:120;
    color:#FFFFFF;
    text-align:center;
}

.front_message.error {
    background: #d7246f;
}

.front_message.success {
    background: #186e8c;
}

.front_message p {
    margin-top: 0px;
    margin-bottom: 0px;
}

.pagination{
	display:block;
	margin:30px 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.pagination a{
	font-size:0.813em;
	padding:6px 12px;
	margin:0 1px 0 0;
	text-align:center;
	background:#EAEAEA;
	font-weight:bold;
	color:#333;
}
.pagination .disabled{
	color:#FFF;
	background:#000;
}
.pagination a:hover{
	color:#FFF;
	background:#999;
}

.right{
	float:right !important;
	margin-top:-55px !important;
}

@media screen and (max-width:820px) {
	section#listing_produits article {
		float: left;
		flex-basis: 33.333%;
	}
	section#contenu_listing_produits article{
		flex-basis:33.33%;
	}
	.detail_produit #zone_img{
		flex-basis:65%;
	}
	.detail_produit #zone_description{
		flex-basis:35%;
	}
}
@media screen and (max-width:600px) {
	#agenda > ul.jours_mois > li > div > span.num_jour{
		font-size:1em;
		margin:-8px 0 0 0;
	}
	#agenda > ul.jours_mois > li.actif > div{
		background-size:15px 15px;
	}
	#agenda > ul.jours_mois > li.actif > div > span.nb_events{
		width:12px;
		height:12px;
		padding:0;
		font-size:0.625em;
		border-radius:6px;
		margin:3px 0 0 -14px;
	}
	#agenda > ul.jours_mois > li.actif > div > span.num_jour{
		margin:-23px 0 0 0;
	}
	.col_gauche{
		width:100%;
		float:left;
	}
	.col_droite{
		width:100%;
		float:right;
	}
	section#listing_produits article {
		flex-basis: 50%;
	}
	section#contenu_listing_produits article {
		flex-basis: 50%;
	}
	.right{
		float:none !important;
		display:block !important;
		margin-top:15px !important;
	}
	
	form .contact_gauche, form .contact_droite{
		float: none;
		width: 100%;
	}

}
@media screen and (max-width:480px) {
	section#listing_produits article {
		flex-basis: 100%;
	}
	section#contenu_listing_produits article {
		flex-basis: 100%;
	}
	.detail_produit #zone_img{
		flex-basis:100%;
	}
	.detail_produit #zone_description{
		flex-basis:100%;
	}
}

/*** Galerie photos ***/
.galerie{
	float: left;
	width: 25%;
	padding: 10px;
  	box-sizing: border-box;
  	-moz-box-sizing:border-box;
}
.galerie:nth-child(4n+0):after {
	content: " ";
	clear: both;
}
.galerie img{
	display: block;
	margin: auto;
}
.galerie strong{
	display: block;
	text-align: center;
}

/*** Actus ***/

section#listing_actus article {
    float: left;
    width: 33.3333%;
}
section#listing_actus article a {
    color: #acacac;
    display: block;
    font-size: 0.75em;
    padding: 0 15px;
}
section#listing_actus article a img {
    display: block;
    margin-bottom: 15px;
    width: 100%;
}
section#listing_actus article a strong {
    color: #fff;
    display: block;
    font-size: 0.813rem;
}
section#listing_actus article p a {
    font-size: 0.813rem;
}

label.obligatoire::after{
	content:" *";
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-5-1,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
    float: left;
}
.col-1 {
    width: 8.3333333333%;
}
.col-2 {
    width: 16.6666666666%;
}
.col-3 {
    width: 25%;
}
.col-4 {
    width: 33.3333333333%;
}
.col-5 {
    width: 41.6666666666%;
}
.col-5-1 {
    width: 48%
}
.col-6 {
    width: 50%;
}
.col-7 {
    width: 58.3333333333%;
}
.col-8 {
    width: 66.6666666666%;
}
.col-9 {
    width: 75%;
}
.col-10 {
    width: 83.3333333333%;
}
.col-11 {
    width: 91.6666666666%;
}
.col-12 {
    width: 100%;
}
.col_left {
    float: left;
}
.col_right {
    float: right;
}

@media screen and (max-width:640px) {
	.contenu .col-1,
	.contenu .col-2,
	.contenu .col-3,
	.contenu .col-4,
	.contenu .col-5,
	.contenu .col-5-1,
	.contenu .col-6,
	.contenu .col-7,
	.contenu .col-8,
	.contenu .col-9,
	.contenu .col-10,
	.contenu .col-11,
	.contenu .col-12 {
	    float: none;
	    width:100%;
	}
}