@viewport {width: device-width; zoom: 1;}
@-webkit-viewport {width: device-width;}
@-moz-viewport {width: device-width;}
@-ms-viewport {width: device-width;}
@-o-viewport {width: device-width;}
@viewport {width: device-width;}

body {margin: 0;padding: 0;	background-color: #FFFFFF;font-family: "Raleway", sans-serif, Arial, Verdana, sans-serif;}
h1, h2, h3, h4, h5, h6 {font-family: "Raleway", sans-serif, Arial, Verdana, sans-serif;}
h1 {font-size: 1.6em;color: #BB0339;font-weight: bold;}
h2 {font-size: 1.3em;color: #BB0339;}
h3 {font-weight: bold;	color: #000000;	font-size: 1.1em;}
h4 {font-size: 0.9em;}
p {font-size: 0.9em; font-family: "Raleway", sans-serif, Arial, Verdana, sans-serif;}
a {color:#BB0339; text-decoration: none;}
a:hover {text-decoration: underline;}
.right {float: right;}
.center {margin: 0 auto 0 auto;}
.red {color: #BB0339;}
.securite {display: none;} /* Utilisée pour les pièges robots des formulaires */
#topbar {background-color: #fff;padding: 20px; padding-right: 10%; text-align: right; margin: 0 auto 0 auto;}
#topbar p.responsive {display: none;}
#header {width: 100%; text-align: center; padding-top: 1%; background-color: #EEEEEE;}
#header img {max-width: 100%;}
.logo {position: absolute; z-index: 1; top: 10px; left: 10%; max-width: 100%;}
.photo_float_left {padding: 8px; border: 1px solid #999; float: left; margin-right: 10px; margin-bottom: 10px;}
hr.separateur_20 {visibility: hidden; margin: 20px;}
hr.separateur_30 {visibility: hidden; margin: 30px; clear: left;}
.couv {padding: 8px; border: 1px solid #999; float: left;}
.erreur {color: #F00; font-weight: bold;}

p.justify {text-align: justify;}
hr {visibility:hidden;}
.bandeau_promo {background-color:#FD4F48; margin-top:0; text-align:center}
#conteneur {max-width: 85%; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #EEEEEE; border-left-color: #EEEEEE; margin: 0 auto 0 auto; padding: 20px; background-color: #FFF;}
#conteneur_compte {max-width: 85%; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #EEEEEE; border-left-color: #EEEEEE; margin: 0 auto 0 auto; padding: 20px; background-color: #FFF; overflow: auto;}
#num_paru{text-align: center;}
#num_paru p{text-align: center;	margin-right: 30px;	padding: 10px;	display: inline-block;}
#num_paru p a{font-weight:bold}	
#num_paru img{padding: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 3px;
	border-left-width: 1px;	border-top-style: solid; border-right-style: solid; border-bottom-style: solid;
	border-left-style: solid; border-top-color: #CCC;	border-right-color: #CCC; border-bottom-color: #999;
	border-left-color: #CCC;}

.bloc_revue {
	background-color: #F0F0F0;
	padding: 20px;
	border-radius: 4px;
	margin-bottom: 20px;
	float: left;
	width: 28%;
	margin-right: 10px;
}
.bloc_revue img {float:left; padding: 10px; border:1px solid #CCC;background-color: #fff; margin:0 10px 10px 0}
.bloc_revue p {text-align: justify;}
.une_revue {
	padding: 5px;
	height: auto;
	width: 65%;
	text-align: left;
	float: left;
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 0;
	margin-left: 10px;
}
.une_revue p {line-height: 1.8em;}
.une_revue img {padding: 10px; border:1px solid #CCC; margin-right: 30px;}
.une_revue ul, .une_revue ol {font-size: 0.9em; font-family: "Raleway", sans-serif, Arial, Verdana, sans-serif; line-height: 1.8em;}
.une_revue li {margin: 5px 0;}

div.flex {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	float:left;
}
div.col_triple {
	background-color: #FFF;
	width: 33%;
	padding: 15px;
	margin-right: 20px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
div.col_triple#nomarge {
	background-color: #FFF;
	width: 45%;
	padding: 20px;
	margin-right: 0px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.col_droite {
	position: -webkit-sticky;
    position: sticky;
    top: 7rem;
	padding: 5px;
	height: auto;
	width: 30%;
	text-align: center;
	float: left;
	margin-top: 20px;
	margin-bottom: 0;
	margin-left: 10px;
	
}
.col_droite p {line-height: 1.8em;}
.col_droite img {padding: 10px; border:1px solid #CCC;z-index:0;}
.col_droite img.bouton {border: none; box-shadow: 2px 2px 4px #000000; margin-bottom: 5px; padding: 2px;}
.col_droite img.bouton:hover {box-shadow: 4px 4px 2px #BB0339;}

.col_droite_compte {
	padding: 5px;
	height: auto;
	width: 30%;
	text-align: left;
	float: left;
	margin-top: 20px;
	margin-bottom: 0;
	margin-left: 10px;
	
}
.col_droite_compte p {line-height: 1.8em;}
.col_droite_compte img {padding: 10px; border:1px solid #CCC; margin-right: 30px;}

.col_nav_compte {
	position: -webkit-sticky;
    position: sticky;
    top: 7rem;
	padding: 5px;
	width: 23%;
	text-align: left;
	margin-bottom: 0;
	margin-left: 10px;
float: left;
}
.col_nav_compte h3 a {
	font-weight: 100;
	color: #333
}
.col_nav_compte h3 a.current {font-weight: bold; color:#BB0339}
/* Style des onglets */
div.tab {max-width:100%; overflow: hidden;  background-color: #fff;}
div.tab button {background-color: #B5B5B5;	width: 25%;	height: auto; float: left;	outline: none;	cursor: pointer;
	transition: 0.3s;font-size: 15px;	color: #FFF;	font-weight: bold;	text-align: center;	padding: 14px 0 14px 0;
	border-right-width: 1px;border-top-style: none;	border-right-style: solid;	border-bottom-style: solid;
	border-left-style: none;border-right-color: #CCC;	border-bottom-width: 1px;	border-bottom-color: #CCC;
}
div.tab button:hover {background-color: #ddd;}
div.tab button.active {	background-color: #BB0339;border: 1px double #fff;}

/* Style the tab content */
.tabcontent {max-width:100%; display: none;  padding: 6px 12px;  border: 1px solid #ccc;}

.titre_tab_pap{background-image: url(images/mep/ico_pap.jpg); background-repeat: no-repeat; background-position: 30%; border: none; padding: 28px 0px 28px 13%; background-position-x: 1%; text-indent:1%}
.titre_tab_num{background-image: url(images/mep/ico_num2.jpg); background-repeat: no-repeat; background-position: 30%; border: none; padding: 28px 0px 28px 13%; background-position-x: 1%; text-indent:1%;}
.titre_tab_duo{background-image: url(images/mep/ico_duo.jpg); background-repeat: no-repeat; background-position: 30%; border: none; padding: 16px 0px 16px 23%; background-position-x: 1%; text-indent:1%}
.button {padding: 16px 16px; text-align: center;  text-decoration: none; display: inline-block; font-size: 0.9em;
font-weight:bold; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; cursor: pointer;margin:2%;}
.button1 {background-color: #FFF; color: #000; border: 1px solid #BB0339;}
.button1:hover {background-color: #BB0339; color: white;}
.button1:active {background-color: #BB0339;color: white;}
.button_openaccess {background-color: #090; color: #FFF; border: 1px solid #000;}
.button_openaccess:hover {background-color: #FFF; color: #090;}
.button_openaccess:active {background-color: #FFF;color: #090;}
.button2 {text-align: left;	background-color: #0089B7; color: #fff; border: 1px solid #0089B7; background-image: url(images/mep/caddie.png);	background-repeat: no-repeat; background-position: 90%;padding: 16px 52px 16px 32px;
}
.button3 {text-align: left;	background-color: #F4923B; color: #fff;	border: 1px solid #F4923B;	background-image: url(images/mep/voir.png); background-repeat: no-repeat;	background-position: 90%;padding: 16px 62px 16px 32px;}
.button4 {background-color: #F4923B; color: #fff; border: 1px solid #F4923B; background-image: url(images/mep/ico_commander.jpg); background-repeat: no-repeat; background-position: 90%; padding: 16px 45px 16px 32px;}
.button5 {text-align: left; background-color: #333333; color: #fff; border: 1px solid #333333; background-image: url(images/mep/ico_continuer.jpg); background-repeat: no-repeat; background-position: 5%; padding: 16px 32px 16px 45px;}
.button_conn {background-color: #FA564A; color: #FFF; border: 1px solid #FA564A; width:97%}
.button_conn:hover {background-color: #FA4132; color: #000;} 
.button_creation_compte {background-color: #CCCCCC; color: #333; border: 1px solid #CCCCCC; width:97%}
.button_creation_compte:hover {background-color: #999; color: #333;} 
.button6 {background-color: #FFF; color: #000; border: 1px solid #BB0339; width:250px}
.button6:hover {background-color: #BB0339; color: white;}
.button6:active {background-color: #BB0339;color: white;}
.button_recherche {text-align: left;background-color: #0089B7;color: #fff;	border: 1px solid #0089B7;	background-image: url(images/mep/ico_recherche.png);background-repeat: no-repeat;	background-position: 95%;	padding: 16px 52px	16px 32px;}
.button_recherche_archives {text-align: center;	background-color: #0089B7;	color: #fff;	border: 1px solid #0089B7;
	background-image: url(images/mep/ico_recherche.png);background-repeat: no-repeat;	padding: 16px;}
.button_etape_ok {font-size: 1.2em; font-family: 'Montserrat', sans-serif;background-color: #BB0339; color: #fff; border: 1px solid #BB0339;padding: 16px 26px;}
.button_etape_ko {font-size: 1.2em; font-family: 'Montserrat', sans-serif;background-color: #FFF;	color: #CCC;	border: 1px solid #FEB1C9;padding: 16px 26px;}
.button_adresse_ajour {background-color: #FFF; color: #000; border: 1px solid #BB0339; padding:8px}
.button_adresse_ajour:hover {background-color: #BB0339; color: white;}
.button_paiement {background-color: #FFF;color: #000;	border: 2px solid #BB0339;	width: 100%;	vertical-align: middle;	background-image: url(images/mep/chevron_rouge.jpg);background-repeat: no-repeat;background-position: 90%;
	padding: 16px 52px 16px 45px;}
.button_paiement:hover {border: 2px solid #333;}
.button_paiement img{ text-align:left;vertical-align: middle;}
.button_promo {background-color: #FD4F48;color: #FFF; border: 1px solid #FFF; padding:6px; font-weight:bold; margin-left:20px; cursor: pointer}
.button_promo:hover {background-color: #FD4F48;	color: #CCC;	font-weight: bold;	border: 1px solid #CCC}
/* Full-width input fields */
.container input[type=text], .container input[type=password] { width: 100%;  padding: 12px 20px;  margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box;border-radius: 4px;}
/* Modal pour l'identification */
.modal button {background-color: #333;  color: white; font-weight:bold; padding: 10px 10px; margin: 8px 0; border: none; cursor: pointer;   width: 100%;}
.modal button:hover {opacity: 0.8;}
.modal .cancelbtn { width: auto; padding: 10px 18px; background-color: #F3923B;}
.modal .imgcontainer {text-align: center; margin: 0px 0 12px 0; position: relative;}
.modal img.avatar {width: 40%; border-radius: 50%;}
.modal .container {padding: 16px;}
.modal span.psw {float: right;  padding-top: 16px;}
.modal {text-align:left;display: none; position: fixed; z-index: 600; left: 0;top: 0;width: 100%; height: 100%; 	overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4);}
.modal-content {background-color: #fefefe;margin: 5px auto; border: 2px solid #BB0339;width: 30%;border-radius : 6px; padding: 2%;}
.modal-content p {font-size: 80%; text-align:center;}
.modal-content hr {border-bottom: 1px #CCCCCC solid; background-color: #FFF; width:50%}
.modal .close {position: absolute; right: 0px;  top: 0px; color: #fff; font-size: 30px; font-weight: bold;}
.modal .close:hover,.modal .close:focus {color: #fff; cursor: pointer;}
/* Add Zoom Animation */
.animate {-webkit-animation: animatezoom 0.6s;animation: animatezoom 0.6s}
img {max-width:100%;}

/* Modal pour l'identification */
.checkout-summary {margin:0 auto 0 auto;max-width: 80%;	background-color: #fefefe;}
.checkout-summary img {width: 58px;height: 75px}
.checkout-summary img#jeton {width: 58px;height: 75px}
.checkout-summary-title { display: -webkit-flex;  display: -ms-flexbox;  display: flex;  -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;  padding: 1em;  border: 1px solid #e6e6e6; line-height:2em;}
.checkout-summary-item { border-left: 1px solid #e6e6e6;  border-right: 1px solid #e6e6e6; padding: 1em; border-bottom: 1px solid #e6e6e6;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;}
.checkout-summary-item .item-name, .checkout-summary-item .item-price {padding: 0 0.8em;}
.checkout-summary-item .item-name p, .checkout-summary-item .item-price p {margin: 0; padding: 0;}
.checkout-summary-item .title {font-weight: bold;}
.checkout-summary-details {padding: 0.8em; border: 1px solid #e6e6e6; border-top: none;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;}
/* Cadre des adresses "Livraison et facturation" */
div.cadre_adresse {margin: 15px; background-color: #FFFFFF;box-shadow: 2px 2px 4px #CCCCCC; width: 46%; border:1px solid #CCCCCC; float:left; }
div.cadre_adresse h3{background-color: #F2F2F3;	text-transform: uppercase; margin:0; padding:20px; color: #666}
div.cadre_adresse p{padding:5px 10px 0px 20px}

/* Cadre des bloc "Connexion ou creation de compte" */
div.cadre_conn_inscription {padding: 30px; background-color: #FFFFFF;width: 44%; float:left; }
div.cadre_conn_inscription#border {padding: 30px;border-right:1px solid #CCCCCC; padding-right:15px}
div.cadre_conn_inscription h3{	text-transform: uppercase; margin:0; padding:20px; color:#BB0339; font-size:130%; border-bottom:1px solid #CCCCCC;}
div.cadre_conn_inscription p{padding:5px 10px 0px 20px}

/*div.items div.adresse_livraison {max-width: 100%; margin: 0 10px; border: 1px solid #000; text-align: left; padding: 10px; border-radius: 5px; box-shadow: 2px 2px 4px #000000;}*/

/* Console Affichage RAPIDE du panier */
.dropdown {position: relative; display: inline-block;}
.dropdown-content {display: none;position: absolute;right: 0px;top:30px; background-color: #fff;min-width: 450px;
    border: 1px solid #CCC; padding: 12px 16px; z-index: 1000;}
.dropdown:hover .dropdown-content {display: block;}
.shopping-cart-button {
	padding: 10px;
	background-color: #0089B7;
	color: #D6D6D6;
}
.shopping-cart-button:hover {background-color: #0089B7; color:#fff;}
.shopping-cart-button i {margin-right: 0.5rem;}
.shopping-cart-dropdown-pane .dropdown-pane {padding: 0;}
.shopping-cart-item {padding: 1rem;  border-bottom: 1px solid #e6e6e6;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;}
.shopping-cart-item img {width: 30px;height:38px}
.shopping-cart-item img#jeton {width: 30px;height:38px}
.shopping-cart-item-name, .shopping-cart-item-price {padding: 0 1em;}
.shopping-cart-item-name {font-size:0.8em}
.shopping-cart-item-name p, .shopping-cart-item-price p {margin: 0; padding: 0;}
.shopping-cart-title {font-weight: bold;}
.shopping-cart-checkout {padding: 0.5em;margin-bottom: 0;}
.fa-shopping-cart:before {content: "\f07a";}

@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)}
    to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
    from {transform: scale(0)}
    to {transform: scale(1)}
} 

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {display: block; float: none;}
    .cancelbtn {width: 100%;}
}


/* CAROUSEL */
#masterhead { padding-top: 20px;  padding-bottom: 124px;	margin-bottom: -52px;}
.carousel {	position: relative;height: 150px;}
.carousel-inner {position: relative;width: 100%;overflow: hidden;}
.carousel-inner > .item {
    	position: relative;
    	display: none;
    	height: 150px;
    	background-color: #777;
  	-webkit-transition: .6s ease-in-out left;
	-o-transition: .6s ease-in-out left;
	transition: .6s ease-in-out left;
}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {line-height: 1;position: absolute;top: 0;left: 0;min-width: 100%;height: 150px;}
.carousel-inner > .active,.carousel-inner > .next,.carousel-inner > .prev {display: block;}
.carousel-inner > .active {left: 0;}
.carousel-inner > .next,.carousel-inner > .prev {position: absolute;top: 0;width: 100%;}
.carousel-inner > .next {left: 100%;}
.carousel-inner > .prev {left: -100%;}
.carousel-inner > .next.left,.carousel-inner > .prev.right {left: 0;}
.carousel-inner > .active.left {left: -100%;}
.carousel-inner > .active.right {left: 100%;}
.controlsBlock {   	position: relative;bottom: 0;left: 0;top: 10px;display: block;width: 177px;margin: 0 auto;z-index: 1;height: 24px;text-align: center;}
.controls {position: relative;display: block;}
.carousel-control {
  	position: absolute;
  	top: 25.5px;
  	bottom: 0;
  	left: 0;
  	background: #000000;
  	font-size: 5px;
  	background: none !important;
  	color: #000 !important;
  	text-align: center;
}

.carousel-control i {font-size: 20px;}
.carousel-control.left {left: 0;}
.carousel-control.right {right: 0;}
.carousel-control:hover,.carousel-control:focus {color: #000;}
.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right {position: absolute;z-index: 5;display: inline-block;}
.carousel-control .glyphicon-chevron-left {left: 0;}
.carousel-control .glyphicon-chevron-right {right: 0;}
.carousel-indicators {
  	position: relative;
  	bottom: 0;
  	left: 50%;
  	z-index: 15;
  	width: 60%;
  	top: 10px;
  	padding-left: 0;
  	margin-left: -30%;
  	text-align: center;
  	list-style: none;
}

.carousel-indicators li {
  	display: inline-block;
   	zoom: 1;
   	width: 10px;
   	height: 10px;
   	margin: 0 2px;
   	background: transparent;
   	-webkit-border-radius: 50%;
   	-moz-border-radius: 50%;
   	border-radius: 50%;
   	border: 3px solid transparent;
   	-webkit-box-shadow: rgba(0,0,0,0.5) 0 0 2px;
   	-moz-box-shadow: rgba(0,0,0,0.5) 0 0 2px;
   	box-shadow: rgba(0,0,0,0.5) 0 0 2px;
   	cursor: pointer;
}

.carousel-indicators .active {width: 10px;height: 10px;margin: 0;background-color: #000000;}
.carousel-caption {
  	position: absolute;
  	right: 15%;
  	bottom: 20px;
  	left: 15%;
  	z-index: 10;
  	padding-top: 20px;
  	padding-bottom: 20px;
  	color: #fff;
  	text-align: center;
  	text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.carousel-caption .btn {text-shadow: none;}

@media screen and (min-width: 768px) {
	.carousel {height: 317px;}
	.carousel-inner > .item {height: 317px;}
	.carousel-inner > .item > img,
	.carousel-inner > .item > a > img {height: 317px;}
  	.carousel-control .glyphicon-chevron-left,
  	.carousel-control .glyphicon-chevron-right,
  	.carousel-control .icon-prev,
  	.carousel-control .icon-next {font-size: 15px;}
  	.carousel-caption {right: 20%;left: 20%;padding-bottom: 30px;}
  	.carousel-indicators {bottom: .0;}
}


/* Modal affichage des résumés et confirmation ajout panier */
.modalDialog {position: fixed;	overflow-y:scroll;	font-family: Arial, Helvetica, sans-serif;	top: 0;	right: 0;
bottom: 0;	left: 0;background: rgba(0,0,0,0.8);z-index: 99999;opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;	
	transition: opacity 400ms ease-in;
	pointer-events: none;text-align:justify;}
.modalDialog:target {opacity:1;pointer-events: auto;}
.modalDialog > div {width: 70%;position: relative;	border-radius: 10px;background: #fff; margin: 10% auto 10% auto;
	padding: 13px 4% 13px 6%;}
.close {background: #BB0339;color: #FFFFFF;line-height: 25px;position: absolute;right: -12px;text-align: center; top: -10px;	width: 24px;text-decoration: none;font-weight: bold;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
		-moz-box-shadow: 1px 1px 3px #000;
		-webkit-box-shadow: 1px 1px 3px #000;
		box-shadow: 1px 1px 3px #000;}
.close:hover { background: #00d9ff;}

/* Formulaire calculateur du montant */
@import url('https://fonts.googleapis.com/css?family=Dax:400,900');
$font: 'Dax',
sans-serif;

.middle {max-width: 100%; text-align: center;}
.middle h1 {font-family: "Dax", sans-serif;color: #fff;}
.middle input[type="radio"] {display: none;}
.middle input[type="radio"]:checked + .box {background-color: #BB0339;border: 1px solid #BB0339;}
.middle input[type="radio"]:checked + .box span {color: #FFFFFF;}
.middle .box {width: 15%;height: 40px;background-color: #fff;display: inline-block;	text-align: center;
cursor: pointer;border: 1px solid #BB0339;	position: relative;	font-family: "Dax", sans-serif;	font-weight: bold;
cursor: pointer;margin: 1%; }
.middle .box span {position: absolute;left: 0;right: 0;font-size: 1em;user-select: none;color: #000000;top:-10px}
.middle .box span:before {font-size: 1em;font-family: FontAwesome; display: block;opacity: 0; font-weight: normal;
  color: #fff;}
.middle .front-end span:before {content: '\f121';}
.middle .back-end span:before {content: '\f0f4';}


/* Formulaires de recherche */
form#form_recherche_archives {padding: 10px;border-radius: 10px;max-width: 80%; display:inline-block}
form#form_recherche_archives input[type="text"] {width: 100%;color:#999;font-weight:bold;border: 1px solid #CCC;
	padding: 10px;}
form#form_recherche_archives submit{width: 100%;}
form#form_recherche_annee {padding: 10px;border-radius: 10px;max-width: 80%;}
form#form_recherche_annee fieldset, form#form_recherche_archives fieldset {padding: 15px; border: none;}
form#form_recherche_annee legend, form#form_recherche_archives legend {font-weight: bold;display: block;text-align: left;color: #000;font-family: Arial, Helvetica, sans-serif;	font-size: 1em;	width: 100%;line-height: 2em}
form#form_recherche_annee legend span {float: right; font-size: 70%; font-weight: normal;}
form#form_recherche_annee legend span a {color: #333;}
form#form_recherche_annee label {font-family: Arial, Helvetica, sans-serif; font-size: 0.85em;font-weight: bold;}
form#form_recherche_annee h2 {color: #BB1016; font-size: 1em;}
form#form_recherche_annee select {font-weight: bold;}
form#form_recherche_annee hr {clear: left; visibility: hidden; margin: 0px;}
form#form_recherche_annee input[type="text"] {width: 80%;border: 1px solid #CCC;float: left;padding: 10px;}
label.form_recherche_annee {font-weight: bold; width: 20%; margin: 0px; padding: 5px; display: block; float: left;}
form#form_recherche_avancee {padding: 10px;	border-radius: 10px;max-width: 80%;}
form#form_recherche_avancee fieldset {padding: 10px; border: none;}
form#form_recherche_avancee legend {font-weight: bold;	display: block;	text-align: left;	color: #333;
	font-family: Arial, Helvetica, sans-serif;	font-size: 1em;	width: 100%;}
form#form_recherche_avancee legend span {float: right; font-size: 70%; font-weight: bold;}
form#form_recherche_avancee legend span a {color: #000;}
form#form_recherche_avancee label {font-family: Arial, Helvetica, sans-serif;font-size: 0.85em;	margin-top: 10px;}
form#form_recherche_avancee h2 {color: #BB1016; font-size: 1em;}
form#form_recherche_avancee p {font-weight: bold;text-align: left}
form#form_recherche_avancee select {font-weight: bold;width: 98%;padding: 10px;	border: 1px solid #CCC;margin-top:10px;
}
form#form_recherche_avancee hr {clear: left; visibility: hidden; margin: 0px;}
form#form_recherche_avancee input[type="text"] {border: 1px solid #CCC;	padding: 10px;	width: 95%;	text-align: left;}
label.label_recherche_avancee {font-weight: bold; width: 20%; margin: 0px; padding: 5px; display: block; float: left;}

/* Formulaire contact */
.flex-container-contact {display: flex;	flex-wrap: wrap; justify-content: center; background-color: #F2F2F2; padding: 3% 0 3% 0;}
.flex-container-contact>div {width: 43.99%; padding: 30px 10px;}
/************* Contact *****************************/
form#contact {padding: 10px; border-radius: 2px; max-width: 95%; border: 1px solid #CCC;
box-shadow: 2px 2px 1px  rgba(102,98,98,0.35);
-webkit-box-shadow: 2px 2px 1px  rgba(102,98,98,0.35);
-moz-box-shadow: 2px 2px 1px  rgba(102,98,98,0.35);
}
form#contact fieldset {padding: 10px; border: none;}
form#contact legend {font-weight: bold;	display: block;	text-align: left; color: #333; font-family: Arial, Helvetica, sans-serif; font-size: 1em; width: 100%;}
form#contact legend span {float: right; font-size: 70%; font-weight: bold;}
form#contact legend span a {color: #000;}
form#contact label {font-family: Arial, Helvetica, sans-serif;font-size: 0.85em; margin-top: 10px;}
form#contact h2 {color: #BB1016; font-size: 1em;}
form#contact p {font-weight: bold;text-align: left}
form#contact select {font-weight: bold; width: 100%; padding: 10px; border: 1px solid #CCC; margin-bottom:10px}
form#contact select [selected]{color: #CCC;}
form#contact hr {clear: left; visibility: hidden; margin: 0px;}
form#contact input[type="text"], form#contact input[type="email"], form#contact textarea {border: 1px solid #CCC;	padding: 10px;	width: 91%;	text-align: left;margin-bottom:10px}
form#contact button[type="submit"]{margin:0 auto 0 auto; width: 100%;}
label.label_recherche_avancee {font-weight: bold; width: 20%; margin: 0px; padding: 5px; display: block; float: left;}

/************* Inscription *****************************/
#formulaire_apidpm {margin:0px auto 0px auto; padding:10px; width:80%;}
form.minimal legend {color:#BB0339; font-weight:bold}
form.minimal fieldset {font-weight:bold}
form.minimal img {padding:8px; border:1px solid #999; float:left; margin-right:10px; margin-bottom:10px}
form.minimal label {
	display: block;
	width: 150px;
	margin: 10px 0;
	font-size: 0.9em;
	padding: 8px;
}
form.minimal label.module_login {margin: 0px 0; float: none;}
form.minimal legend {font-size: 0.9em; font-weight: bold;}
form.minimal label.checkbox {width: auto;}
form.minimal label span, form.minimal legend span {color: #F00; font-weight: bold;}
form.minimal textarea {line-height: 1.5em;}
 
    form.minimal input[type="text"],
    form.minimal input[type="email"],
    form.minimal input[type="number"],
    form.minimal input[type="search"],
    form.minimal input[type="password"],
	form.minimal input[type="tel"],
    form.minimal textarea, form.minimal select, form.minimal submit {
	background-color: rgb(255,255,255);
	border: 1px solid rgb( 186, 186, 186 );
	border-radius: 2px;
	font-size: 0.9em;
	margin: 10px auto;
	padding: 8px;
	width: 95%;

    }
	form.minimal button.button button1 {margin: 10px auto; }
	
form.minimal input.module_login[type="text"], form.minimal input.module_login[type="password"] {margin: 0px 0;}
     
    form.minimal input[type="text"]:focus,
    form.minimal input[type="email"]:focus,
    form.minimal input[type="number"]:focus,
    form.minimal input[type="search"]:focus,
    form.minimal input[type="password"]:focus,
	form.minimal input[type="tel"]:focus,,
    form.minimal textarea:focus,
    form.minimal select:focus {border-color: #4195fc; color: rgb(0,0,0); }
     
        form.minimal input[type="text"]:invalid:focus,
        form.minimal input[type="email"]:invalid:focus,
        form.minimal input[type="number"]:invalid:focus,
        form.minimal input[type="search"]:invalid:focus,
        form.minimal input[type="password"]:invalid:focus,
		 form.minimal input[type="tel"]:invalid:focus,
        form.minimal textarea:invalid:focus,
        form.minimal select:invalid:focus { 
            border-color: rgb(248,66,66);
            -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgb(248,66,66);
            -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgb(248,66,66);
              box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgb(248,66,66);
        }
		
		form.minimal input[type="text"]:valid:focus,
        form.minimal input[type="email"]:valid:focus,
        form.minimal input[type="number"]:valid:focus,
        form.minimal input[type="search"]:valid:focus,
        form.minimal input[type="password"]:valid:focus,
		 form.minimal input[type="tel"]:valid:focus,
        form.minimal textarea:valid:focus,
        form.minimal select:valid:focus { 
            border-color: rgb(4,203,32);
            -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgb(4,203,32);
            -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgb(4,203,32);
              box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgb(4,203,32);
        }
#inscription form li {list-style-type:none}
#inscription form span{color: #AA3138; font-weight:bold}
#inscription form img {float:left;	vertical-align: middle;	padding: 5px;	background-color: #FFF;	border: 1px solid #999;	margin-right:10px;}


.collapsible{-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2)}
.collapsible > li{ list-style: none; padding:0}
.collapsible h4{ color:#BB0339; font-style:normal;}
.collapsible p{ color:#333333;}
.collapsible img{ padding:0; border:none; vertical-align:bottom; margin:0}
.collapsible-header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;-webkit-tap-highlight-color:transparent;line-height:1;padding:0.8em;background-color:#fff;border-bottom:1px solid #ddd}.collapsible-header:focus{outline:0}
.collapsible-header i{width:0.8em;font-size:1.6rem;display:inline-block;text-align:center;margin-right:1rem}
.collapsible-header h4{line-height:1.7em;}
.collapsible-body{display:none;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0.8em}
.collapsible-body ul li, .collapsible-body ul li ul li{ font-size:100%; color: #333; line-height:1.7em; margin-bottom:10px}
.collapsible{border:none;-webkit-box-shadow:none;box-shadow:none}
.collapsible{margin:.5rem 0 1rem 0}
.collapsible-header:focus{background-color:#eee}


/* liste déroulante Langue */
.custom-dropdown--large {font-size: 0.8em; font-weight:bold}
.custom-dropdown--small {font-size: 0.7em;}
.custom-dropdown__select{font-size: inherit; /* inherit size from .custom-dropdown */ padding: .1em; /* add some space*/ margin: 0; /* remove default margins */}
.custom-dropdown__select--white {background-color:#fff ; color: #333; font-weight:bold}
@supports (pointer-events: none) and
      ((-webkit-appearance: none) or
      (-moz-appearance: none) or
      (appearance: none)) {

    .custom-dropdown {position: relative; display: inline-block; vertical-align: middle;}

    .custom-dropdown__select { padding-right: 1.8em; /* accommodate with the pseudo elements for the dropdown arrow */
        border: 0;border-radius: 3px; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
    .custom-dropdown::before, .custom-dropdown::after {content: "";position: absolute; pointer-events: none;}
    .custom-dropdown::after { /*  Custom dropdown arrow */
        content: "\25BC"; height: 0.8em; font-size: .625em; line-height: 1; right: 0.8em;top: 40%; margin-top: -.2em;}
/*  Custom dropdown arrow cover */
    .custom-dropdown::before {width: 1.5em; right: 0; top: 0; bottom: 0; border-radius: 0 3px 3px 0;}
    .custom-dropdown__select[disabled] {color: rgba(0,0,0,.3);}
    .custom-dropdown.custom-dropdown--disabled::after {color: rgba(0,0,0,.1);}
    /* White dropdown style */
    .custom-dropdown--white::before {top: .5em; bottom: .5em; background-color: #FFF; border-left: 1px solid rgba(0,0,0,.1);}
    .custom-dropdown--white::after {color: rgba(0,0,0,.9);}
    /* FF only temp fix */
    @-moz-document url-prefix() {
        .custom-dropdown__select {padding-right: .9em;}
        .custom-dropdown--large .custom-dropdown__select {padding-right: .8em}
        .custom-dropdown--small .custom-dropdown__select {padding-right: .5em}
		    }
}

/* Pied */
#info_pied{width:85%; margin:0 auto 0 auto;text-align:center; background-color:#BB0339; padding:8px}
#info_pied p{display: inline-block;}
/* Inscription newsletter */
#newsletter{width:77%;	background-color:#FFF;	margin: 0 auto 0 auto;	text-align: center;	padding: 8px;border:none;}
#newsletter p{display: inline-block; font-size:90%}
#newsletter form {border:none;}
#newsletter form#form_newsletter label {font-size:90%;}
#newsletter form#form_newsletter label img {vertical-align: middle}
#newsletter form#form_newsletter input[type="text"] {border: 1px solid #CCC;padding: 10px;	width: 25%;text-align: left;}
#newsletter form#form_newsletter fieldset {border: none;}
#newsletter form#form_newsletter label {background-image:url(images/mep/ico_newsletter.jpg); background-repeat: no-repeat; text-align:left; padding:10px 20px 10px 50px;}
/* Pied */
#pied{width: 100%;background-color: #111111; text-align:center}
#pied div {max-width: 75%;margin:0 auto 0 auto; text-align:left;}
#pied div .bloc{padding: 21px; float:left}
#pied div .bloc h3{color:#FE5247;text-align:left;}
#pied div .bloc p{color: #fff;	font-weight: 600;	text-align: left;text-indent: 10%}
#pied div .bloc p a{color: #fff;text-decoration:none}
#pied div .bloc p a:hover{color: #fff;text-decoration:underline}
#pied div .bloc ul li{color:#FE5247; font-size:90%; text-align:left; list-style:none}
#pied div .bloc ul li a{color:#FE5247;text-decoration:none; list-style: disc; line-height:1.5em }
#pied div .bloc ul li a:hover{color:#FE5247;text-decoration:underline}



/* Styles factures */
table#tableau_facture th, table#tableau_facture td {font-size: 0.8em; text-align: center;}
table#tableau_facture th.left, table#tableau_facture td.left {text-align: left;}
table#tableau_facture th.right, table#tableau_facture td.right {text-align: right;}

table#tableau_historique {border: 1px solid #000000; border-radius: 5px; box-shadow: 4px 4px 8px #000000;}
table#tableau_historique th {background-color: #F5E0E2;}
table#tableau_historique th, table#tableau_historique td {font-size: 0.8em; text-align: center; padding: 10px;}

table#tableau_facture {border: 1px solid #000000; border-radius: 5px; box-shadow: 4px 4px 8px #000000;}
table#tableau_facture th {background-color: #F5E0E2;}
table#tableau_facture td {background-color: #F4F4F4;}
table#tableau_facture td.total {text-align: right; font-weight: bold;}
table#tableau_facture th, table#tableau_facture td {font-size: 0.8em; text-align: center; padding: 10px;}

table#tableau_facture_adresse {border: 1px solid #000000; border-radius: 5px; box-shadow: 4px 4px 8px #000000; margin-left: 50%; width: 33%;}
table#tableau_facture_adresse th {background-color: #F5E0E2;}
table#tableau_facture_adresse td {background-color: #F4F4F4;}
table#tableau_facture_adresse th, table#tableau_facture_adresse td {font-size: 0.8em; text-align: center; padding: 10px;}

/*!
 *  Font Awesome 4.7.0 by @davegandy - https://fontawesome.io - @fontawesome
 *  License - https://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */@font-face{font-family:'FontAwesome';src:url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');src:url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}
.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.fa-twitter-square:before{content:"\f081";font-size:27px; margin-right:5px }
.fa-facebook-square:before{content:"\f082"; font-size:27px; margin-right:5px}
.fa-linkedin-square:before{content:"\f08c"; font-size:27px; margin-right:5px}
.fa-youtube-square:before{content:"\f166"; font-size:27px; margin-right:20px}
.fa-user-circle-o{content:"\f166"; font-size:27px; margin-right:20px}
.fa-twitter-square:hover, .fa-facebook-square:hover, .fa-linkedin-square:hover, .fa-youtube-square:hover, .fa-user-circle-o:hover{color:#BB0339}

#copyright{
	width: 100%;
	background-color: #000000;
	display: flex;
	flex-wrap: wrap;
	padding: 30px 0 20px 0;
	margin-top: -10px
}
#copyright p {vertical-align:middle;}
#copyright p.copy {margin-left:70px;color:#FFF; text-align: left; width:61%; font-size:80%}
#copyright p.reso {text-align: right;width:28%; margin-right:50px}

div#cookies {background-color: #A30A0A; color: #FFF; position: fixed; bottom: 0px; padding: 1%; display: flex; justify-content: space-around; width: 100%; z-index: 100;}
div#cookies a {color: #FFF;}
div#cookies .button {padding: 3px 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 0.9em; font-weight: bold; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; cursor: pointer; width: auto;}
div#cookies .button1 {background-color: #FFF; color: #A30A0A; border: none;}
div#cookies .button1:hover {background-color: #A30A0A; color: #FFF; border: 1px solid #FFF;}

div#cookies .button2 {background-color: #FFF; color: #090; border: none;}
div#cookies .button2:hover {background-color: #090; color: #FFF; border: 1px solid #FFF;}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#topbar {background-color: #fff;text-align:left; overflow:hidden;padding:0px;margin:0 auto 0 auto; position:fixed; width:100%; top:0; z-index:3}
#topbar p {text-align:left;top: 1%; font-size:110%}
#topbar p.responsive {display:inline-block;text-align:center;top: 1%; width:100%}
#topbar .display{display:none}
.dropdown {display:none}
.logo{display:none}
#header {display:none;}
#header img{max-width: 70%;}
.bandeau_promo {background-color:#FD4F48; margin-top:105px; position:fixed; text-align:center}
#conteneur{max-width: 100%; margin:90px auto 0 auto;}
.col_droite {width: 100%; margin:0 auto 0 auto;}
#conteneur .box {width:26%;}
.modal{padding-top: 0px;z-index: 600}
.modal-content {background-color: #fefefe;margin: 5px auto; /* 15% from the top and centered */
    border: 1px solid #888; width: 80%; /* Could be more or less, depending on screen size */}
.une_revue{width:100%; text-align:center; margin:0 auto 0 auto;}
.une_revue p {margin:0 auto 0 auto; text-align:left}
.une_revue ul li { list-style:none; text-align:left }
.couv {float: none;}
div.tab button {width: 50%;height:70px}
div.tab button#offreduo {width: 100%;height:70px}
div.tab button#numann {width: 100%;height:70px}
.titre_tab_pap, .titre_tab_num{background-repeat: no-repeat; background-position: 30%; border: none; padding: 28px 0px 28px 30%; background-position-x: 1%; text-indent:1%}
.titre_tab_duo{background-image: url(images/mep/ico_duo.jpg); background-repeat: no-repeat; background-position: 30%; border: none; padding: 16px 0px 16px 50%; background-position-x: 1%; text-indent:1%}
.tabcontent {margin:0 auto 0 auto; text-align:left}
.middle .box {max-width:40%;}
.middle .box span {font-size: 75%;top:-4px}
.modalDialog > div {width: 80%;text-align:justify;padding-left: 10%;position: relative; position:inherit}
.modalDialog {width: 100%;text-align:justify; }
.modalDialog h3{text-align:justify;padding-right: 8%;}
.modalDialog > div p{text-align:justify; }
.col_nav_compte {width: 98%;	position:inherit;}

.button2, .button3, .button5, .button4 {width: 100%; font-size: 85%;}
.checkout-summary {max-width: 100%; font-size:90%}
.checkout-summary img {display:none}
div.cadre_adresse,div.cadre_conn_inscription, div.cadre_conn_inscription#border {width:100%; margin:0 0 30px 0; float:none}
.collapsible-header, .collapsible-body, .collapsible{margin:0;padding:0;}

.collapsible ul > li{text-indent:0px;margin:0;
padding:0;list-style-type: none;}
.collapsible-body ul li{ font-size:90%; color: #333; line-height:1.7em; margin-bottom:10px;
padding:0; text-indent:0px;}

.bloc_revue {float:none; width:88%}
#info_pied{width:100%;text-align:center;padding:0px; margin:0px} 
form#form_newsletter input[type="text"] {width: 90%;}

.flex-container-contact > div {width: 100%;}
.flex-container-contact>div {padding: 10px; display:block;}
form#contact {border: none;box-shadow: none; width: 95%; padding-right:20px;}
form#contact input[type="text"], form#contact input[type="email"], form#contact textarea {width: 88%; margin-bottom:10px}
form#contact button[type="submit"]{margin:0 auto 0 auto; width: 100%;}

#newsletter{width:100%;text-align:center;padding:0px; margin-top:20px;}
#newsletter form#form_newsletter fieldset {border: none;}
#newsletter form#form_newsletter input[type="text"] {width: 45%;}
#newsletter form#form_newsletter label {font-size:80%;}
#newsletter form#form_newsletter label {background-image:url(images/mep/ico_newsletter.jpg); background-repeat: no-repeat; text-align:left; padding:10px 20px 10px 50px;}

#formulaire_apidpm {width:90%;}
form.minimal label {float: none;  margin: 10px 0;	font-size: 0.9em;	padding: 8px;}
form.minimal textarea, form.minimal select { margin: 10px;}
  form.minimal input[type="text"],
    form.minimal input[type="email"],
    form.minimal input[type="number"],
    form.minimal input[type="search"],
    form.minimal input[type="password"],
	form.minimal input[type="tel"],
    form.minimal textarea, form.minimal select {
width:95%; }
#pied div {text-align:center;}
#pied div .bloc {padding:0;text-align:center;margin-left:20px }
#copyright {text-align:center;}
#copyright p.copy {text-align:center;}
#copyright p.reso {text-align:center; width:50%; margin:0 auto 0 auto}
div#cookies {display: block; text-align: center;}
div#cookies .button2 {width: auto;}