/* fonts */
/* https://fonts.google.com/ */

@font-face {
	font-family: "Jost";
	src: url(/style/font/Jost-Light.ttf);
	font-display: swap;
	font-weight: 300;
}
@font-face {
	font-family: "Jost";
	src: url(/style/font/Jost-Regular.ttf);
	font-display: swap;
	font-weight: 400;
}
@font-face {
	font-family: "Jost";
	src: url(/style/font/Jost-Medium.ttf);
	font-display: swap;
	font-weight: 500;
}
@font-face {
	font-family: "Jost";
	src: url(/style/font/Jost-SemiBold.ttf);
	font-display: swap;
	font-weight: 600;
}
@font-face {
	font-family: "Jost";
	src: url(/style/font/Jost-Bold.ttf);
	font-display: swap;
	font-weight: 700;
}
@font-face {
	font-family: "PT Serif";
	src: url(/style/font/PTSerif-BoldItalic.ttf);
	font-display: swap;
  	font-style: italic;
	font-weight: 700;
}
/* variables */
:root {
	--font: "Jost",arial,sans-serif;
	--font-titre: "PT Serif", serif;
	--padding: 30px;
	--gris-clair: #cdcdcd;
	--gris-fonce: #58585a;
	--jaune: #deb645;
}
/*** default styles */
* {box-sizing : border-box;  padding: 0;margin: 0;}
select * {padding: 0 0.5em;}
ul, ol {list-style: none;}
a img, :link img, :visited img, object, fieldset {border: none;}
a:focus, a:hover {text-decoration: none;}
a:active {outline: none;}
a {outline: none;}
address {font-style: normal;}
:link, :visited {text-decoration: none;}
legend {position: relative;left: 0;/* ie */}
/*** font size : http://www.knacss.com/ */
html {font-size: 62.5%;}
body {background-color: #fff;color: #000;font-family: helvetica, arial, sans-serif;font-size: 1.4em; /* equiv 14px */line-height: 1.5; /* adapt to your design */}
input, select, textarea {font-size: 100%;}
/*** Float containers (http://www.csscreator.com/attributes/containedfloat.php) */
.clearfix:after {content: ".";display: block;height: 0;font-size:0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */
/*** Image Replacement */
.mir {letter-spacing : -1000em;}
/*\*/
* html .mir {text-indent: -999em;overflow: hidden;}
html>body .mir {letter-spacing: normal;text-indent: -999em;overflow: hidden;}/**/
/*** generic style */
.clear {clear: both;}
div.clear {height: 0;}
.no-wrap {white-space:nowrap;}
/*** error */
.errorOutput {font-weight: bold;padding: 0.5em 20px;border-top: 2px solid #eee;	border-bottom: 2px solid #eee;background: transparent url(/style/alert.gif) no-repeat left center;}
a:link, a:visited {color : #000;}

body{
	font-family: 'Jost', sans-serif;
	font-weight : 400;
	font-size : 1.9em;
}

#header, #menu, #main, #footer {width : 100%; }

.page, .page_min  {
	width : 100%;
	max-width : 1260px;
	margin : 0 auto;
	padding: 0 1em;
}
.page_min {
	max-width : 950px;
}

.page_demi {
	max-width : 650px;
		width : 100%;
}

.xs_col1-2,
.col1-2,
.col1-3,
.col2-3,
.col3-4,
.col1-4 {float : left;}

.col{width: 100%; }
.col3-4{width: 75%;}

.xs_col1-2,
.col1-2 {
	width: 50%;
}

.col1-3{width: 33.33%;}
.col2-3{width: 66.66%;}
.col1-4{width: 25%;}

.flexParent {
	display: flex;
	flex-wrap: wrap;
}

.flex_page_demi,
.flex1-1,
.flex1-2,
.flex1-3,
.flex2-3,
.flex3-4,
.flex1-4 {
	display: flex;
}

.flex{width: 100%; }
.flex1-1{width: 100%;}
.flex3-4{width: 75%;}
.flex1-2{width: 50%;}
.flex1-3{width: 33.33%;}
.flex2-3{width: 66.66%;}
.flex1-4{width: 25%;}

.flexColumn {
	flex-direction: column;
	width : 100%;
}

.flex_page_demi {
	max-width: 600px;
}

.flex_right_center {
	justify-content: right;
	align-items: center;
}

.flex_between {
    justify-content: space-between;
}
.flex_start_center {
    justify-content: flex-start;
    align-items: center;
}
.flex_center_center {
    justify-content: center;
    align-items: center;
}
.flex_between_center {
    justify-content: space-between;
    align-items: center;
}
.flex_end_center {
    justify-content: flex-end;
    align-items: center;
}
.flex_around_center {
    justify-content: space-around;
    align-items: center;
}

.column2 {
	column-gap: 20px;
	columns: 2 auto;
}

.column3 {
	column-gap: 20px;
	columns: 3 auto;
}

.flex_gap {
	gap: 1em
}

.flexbox {display: flex;flex-wrap: wrap;}
.flexbox.nowrap {flex-wrap: nowrap}
.flexbox.gap {gap: 30px;}
.flexbox > .col1-2 {width: auto; flex-basis: 45%; flex-grow: 1; min-width: 300px}
.flexbox > .col1-3 {width: auto; flex-basis: 30%; flex-grow: 1; min-width: 300px}
.flexbox > .col2-3 {width: auto; flex-basis: 60%; flex-grow: 1; min-width: 300px}


/* colonne texte (main) / colonne image (secondary) avec overflow hidden */
.tpl1 {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

	.tpl1__secondary {overflow: hidden}

@media all and (min-width: 720px) {
	
	.tpl1 {
		flex-direction: row;
		flex-wrap: nowrap;
	}
	
		.tpl1__main {min-width: 500px;}
	
		.tpl1__col1-3 {width: calc(50% - 180px)}
		.tpl1__col2-3 {width: calc(50% + 180px)}
		
		.tpl1__col1-3 > .tpl1__text {max-width: 450px;}
		.tpl1__col2-3 > .tpl1__text {max-width: 800px;}
			
		.tpl1__text.tpl1__left {float: left;}
		.tpl1__text.tpl1__right {float: right;}	
	
}

.padding{padding: 30px;}
.paddingLR{padding: 0 30px;}
.paddingTB{padding: 30px 0;}
.padding_right{padding-right: 30px;}
.padding_left{padding-left: 30px;}
.padding_bottom{padding-bottom: 30px;}
.paddingNoBottom {padding-bottom: 0}
.paddingBig {padding : 60px 30px;}

.marginAuto { margin : 1px auto; }
.paddingNoBottom {padding-bottom : 0;}
/*gestion des couleurs et des fonds  */

.bg_gris_fonce {background-color : #1c1c1a; color : #9f9f9d;}
.bg_gris_clair {background-color : #f9f9f7; color : #000;}
.bg_blanc {background-color : #fff; color : #000;}
.bg_noir {background-color : #000; color : #fff;}
.bg_jaune {background : #deb645; color : #000;}


.bg_gris_clair a:link, .bg_gris_clair a:visited,
.bg_blanc a:link, .bg_blanc a:visited {color : #000;}

.bg_blanc p a:link, .bg_blanc p a:visited { text-decoration : underline;}

.bg_noir a:link, .bg_noir a:visited,
.bg_gris_fonce a:link, .bg_gris_fonce a:visited {color : #fff;}

.bg_jaune a:link, .bg_jaune a:visited, 
.bg_blanc a:link, .bg_blanc a:visited, 
.bg_gris_clair a:link, .bg_gris_clair a:visited {color : #000;}

.jaune, a.jaune:link, .jaune, a.jaune:visited, 
.bg_blanc a.jaune:link, .jaune, .bg_blanc a.jaune:visited {
	color : var(--jaune) !important;
}
.relative {position: relative;}


.section {padding : 50px 0;}
.sectionSmall {padding : 20px 0;}
.sectionPaddingNone {padding : 0;}
.sectionNoBottom {padding-bottom : 0;}
.img_100, .cmsArticleDesc img {
	display: block;
	line-height: 1;
	max-width: 100%;
	width: auto;
	height: auto;
}

.img_cover {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.float_right {float : right;}
.float_left {float : left;}

.align_center {text-align : center;}
.align_right {text-align : right;}


.maj {text-transform: uppercase;}
.italic {font-style: italic;}
.noItalic, 
.noMaj {font-style: normal;}

.thin {font-weight: 100;}
.extralight {font-weight: 200;}
.light {font-weight: 300;}
.normal {font-weight: 400;}
.medium {font-weight: 500;}
.semibold {font-weight: 600;}
.bold {font-weight: 700;}
.extrabold {font-weight: 800;}
.black {font-weight: 900;}

.big {font-size: 120%;}
.extrabig {font-size: 140%;}
.small {font-size: 80%;}
.extrasmall {font-size: 60%;}


.font_titre {
	font-family: var(--font-titre);
}
.block {display: block;}

.box1-3 {
	width: calc(50% - 180px);
}

.box1-3-content {
	max-width : 450px;
}

.box2-3 {
	width: calc(50% + 180px);
}

.box2-3-content {
	max-width : 800px;
}

/* animations */
.zoom_container {
	display: block;
	overflow: hidden;
	line-height: 0;
}

.zoomup { transition: 0.4s; }
.zoomup:is(:hover,:focus) {transform: scale(1.2);}

.zoomdown { transition: 0.4s; }
.zoomdown:is(:hover,:focus) {transform: scale(0.8);}

.zoomtourne { transition: 0.4s;}
.zoomtourne:is(:hover,:focus) {transform: rotate(15deg) scale(0.9);}

.zoominfini:is(:hover,:focus) {
	animation-duration: 0.8s;
	animation-name: zoominfini;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}

@keyframes zoominfini {
  from { transform: scale(1); }
  to   { transform: scale(1.2); }
}

.fade {
	opacity: 0;
	transition: 1s;
}
.fondu_top {
	opacity: 0;
	position: relative;
	transform: translateY(-200px);
	transition: all 1s, width 0s;
}
.fondu_bottom {
	opacity: 0;
	position: relative;
	transform: translateY(200px);
	transition: all 1s, width 0s;
}
.fondu_left {
	opacity: 0;
	position: relative;
	transform: translateX(-1000px);
	transition: all 1s, width 0s;
}
.fondu_right {
	opacity: 0;
	position: relative;
	transform: translateX(1000px);
	transition: all 1s, width 0s;
}
.animActive {
	opacity: 1;
	transform: none;
	z-index: 100;
}

.transition05 { transition: 0.5s; }
.transition1 { transition: 1s; }
.transition15 { transition: 1.5s; }
.transition2 { transition: 2s; }
.transition25 { transition: 2.5s; }


/*** header  *****************************************/
header {position: fixed; top : 0; left : 0; width : 100%; z-index : 120; transition : all 0.5s}
#accueil header {background: transparent; border-bottom:none;}
#accueil header.nav-fix, header {background: var(--jaune); border-bottom: 1px solid;}

#logo img {
	max-width: 189px;
}
#top {padding : 5px 0; font-size : 95%;}

#top h1 {
	font-family: 'Raleway', sans-serif;
	font-weight : 400;
	font-size : 100%;
	margin-bottom : 0;
}

a#logo .img_100{
	display : block;
}


header.section {padding : 20px 0;}
header h1 {
	font-family: 'Raleway', sans-serif;
	font-weight : 500;
	text-transform : uppercase;
	font-size : 100%;
	padding : 35px 20px;
	line-height : 1.3em;
}

header h1 i{font-style : normal;}
header h1 strong{
	font-weight : 800;
	font-size : 150%;
	text-transform : none;
}

.nav-caddie li {
	display: inline-block;
	padding : 0 10px;  vertical-align: middle;
}

.nav-caddie a{
	text-transform : uppercase;
}

.langs {
	display: flex;
	flex-direction: column;
	font-size: 75%;
	line-height: 1;
}

#nav-panier  {position : relative;}

#nav-panier::after {
	border-radius: 30px;
	color: #fff;
	content: attr(data-compteur);
	font-size: 11px;
	margin-top: -13px;
	min-width: 16px;
	padding: 2px;
	position: absolute;
	text-align: center;
	background: black;
	right: -10px;
}

#nav-panier[data-compteur="0"]:after {
	display: none;
}

header + section.bg_blanc {
	padding-top : 117px;
}

#slider {
	height: 100vh;
	/*background: transparent url(/style/slider/slide-accueil-vinsio-2000.jpg) no-repeat center center;*/
	background: transparent url(/style/accueil/teaser-2026-vinsobre.jpg) no-repeat center center;
	background-size: cover;
	position: relative;
	overflow: hidden;
}

#slider::after {
	position: absolute;
	content : "";
	width: 100%;
	height: 100%;
	display: block;
	top : 50%;
	left: 50%;
	background : transparent url(/style/accueil/v3.svg) no-repeat center center;
	background-size: cover;
	transform: translate(-50%,-50%) scale(1.2); 
	transform-origin: center center;
	transition: 0.5s all;
	animation: anim-zoom 2s 1s linear forwards;
	pointer-events: none;
}

.masthead {
	width: 100%;
	height: 100%;
}


#img_text_slide {
	position: absolute;
	right : 20vw;
	top : 32%;
	display: block;
	z-index : 30;
}

.contenu_text_slide {
	font-size: 280%;
	color : #000;
	line-height : 0.9em;
	animation: changementcouleur 2s 1s linear forwards;

}

@keyframes changementcouleur {
  0% { color : #000;}
  100% { color : #fff; text-shadow: 2px 2px 2px rgba(0,0,0,.5);}
}

@keyframes anim-zoom {
  0% { transform: translate(-50%,-50%) scale(1);}
  25% { transform: translate(-50%,-50%) scale(1.5);}
  50% { transform: translate(-50%,-50%) scale(3);}
  99.98% { transform: translate(-50%,-50%) scale(17); }
  100%{ transform: translate(-50%,-50%) scale(17); opacity: 0}
}




/**** pelemele ****/

.pelemele {
	container-type: inline-size;
    container-name: pelemele;
}

	.pelemele.pelemele--last {
		overflow: hidden;
	}
	
	.pelemele.pelemele--last + * {
		padding-top: 60px;
	}

.pelemele__container {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.pelemele__images {
	order: 2;
	position: relative;
	
}

.pelemele__images img {
	display: block;
	width: 100%;
	height: auto;
	transition : all 0.5s;
}


.pelemele__images img:hover,
.pelemele__images img:focus {
	filter: sepia(0.7);
	-webkit-filter: sepia(0.7);
	-moz-filter: sepia(0.7);
	-o-filter: sepia(0.7);
	-ms-filter: sepia(0.7);
}

.pelemele__images > :not(.pelemele__defaut) {display: none}

.pelemele__imagesx3 div:nth-child(1) {top : 0; left : 0;}
.pelemele__imagesx3 div:nth-child(2) {top : 32%; right : 5px;}
.pelemele__imagesx3 div:nth-child(3) {top : 40%; left : 16%;}

@container pelemele (width >= 600px) {
	
	.pelemele__images {
		min-height: 640px;
	}
	
	.pelemele__images > div {
		position: absolute;
		border : 10px solid #fff;
		display: block!important;
		max-width: 100%;
	}
	
	.pelemele__images img {
		width: auto;
		height: revert-layer;
	}

	#pelemeleAccueil .pelemele__imagesx4 div:nth-child(1) {top : 0; left : 0;}
	#pelemeleAccueil .pelemele__imagesx4 div:nth-child(2) {top : 18%; left : 5%;}
	#pelemeleAccueil .pelemele__imagesx4 div:nth-child(3) {top : 25%; right : 0;}
	#pelemeleAccueil .pelemele__imagesx4 div:nth-child(4) {top : 48%; left : 15%;}
		#pelemeleAccueil .pelemele__imagesx4 div:nth-child(2) img {max-width: 400px; height: auto;}
		#pelemeleAccueil .pelemele__imagesx4 div:nth-child(3) img {max-width: 400px; height: auto;}
		#pelemeleAccueil .pelemele__imagesx4 div:nth-child(4) img {max-width: 400px; height: auto;}
	
	#pelemeleQui .pelemele__imagesx3 div:nth-child(1) {top : 0; left : 0;}
	#pelemeleQui .pelemele__imagesx3 div:nth-child(2) {top : 32%; right : 5px;}
	#pelemeleQui .pelemele__imagesx3 div:nth-child(3) {top : 45%; left : 20%;}
		#pelemeleQui .pelemele__imagesx3 div:nth-child(3) img {max-height: 400px;}
		
	#pelemele1Historique .pelemele__imagesx3 div:nth-child(1) {top : 0; left : 0;}
	#pelemele1Historique .pelemele__imagesx3 div:nth-child(2) {top : 32%; right : 5px;}
	#pelemele1Historique .pelemele__imagesx3 div:nth-child(3) {top : 50%; left : 16%;}
		#pelemele1Historique .pelemele__imagesx3 div:nth-child(3) img {max-height: 350px;}
		
	#pelemeleVinification1 .pelemele__imagesx3 div:nth-child(1) {top : 0; left : 0;}
	#pelemeleVinification1 .pelemele__imagesx3 div:nth-child(2) {top : 32%; right : 0px;}
	#pelemeleVinification1 .pelemele__imagesx3 div:nth-child(3) {top : 45%; left : 15%;}
		#pelemeleVinification1 .pelemele__imagesx3 div:nth-child(3) img {max-height: 400px;}
		
	#pelemeleVinification2 .pelemele__imagesx3 div:nth-child(1) {top : 0; left : 0;}
	#pelemeleVinification2 .pelemele__imagesx3 div:nth-child(2) {top : 25%; right : 0px;}
	#pelemeleVinification2 .pelemele__imagesx3 div:nth-child(3) {top : 42%; left : 2%;}
	
	#pelemeleVinification3 .pelemele__imagesx4 div:nth-child(1) {top : 0; left : 0;}
	#pelemeleVinification3 .pelemele__imagesx4 div:nth-child(2) {top : 22%; left : 5%;}
	#pelemeleVinification3 .pelemele__imagesx4 div:nth-child(3) {top : 34%; right : 0;}
	#pelemeleVinification3 .pelemele__imagesx4 div:nth-child(4) {top : 52%; left : 15%;}
		

}

@container pelemele (width >= 1000px) {
	
	.pelemele__container {
		flex-direction: row;
	}
	
	.pelemele__container > div {
		flex-basis: 33%;
	}
	
	.pelemele__container > div.pelemele__images {
		flex-basis: 66%;
	}
	
	.pelemele__images {
		order: initial;
	}

}

.revendeur.departement {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-weight: bold;
}

.revendeur.departement::after {
	content:"";
	display: block;
	background: transparent url(/style/accueil/puce-repeat.jpg) repeat-x left top;
	width : 150px; 
	height : 10px; 
	margin-top: 20px;
}


	.filtres {
		display: flex;
		justify-content: space-between;
	}
	
	
	/*
	
	.filtres {text-align: center; }
	
	.filtres li {
		display: inline-block;
		padding : 0 30px;
		position: relative;
	}

	.filtres li a{
		display: block;
		font-weight: 300;
		text-transform: uppercase;
	}


	.filtres li a::after{
		content : "\f078";
		font-family: "Font Awesome 5 Free";
		font-weight: bold;
		padding-right: 5px;
		font-size : 80%;
	}
	
	.filtres li li a::after{content :""; display: none;}
	
	*/
	
	#selection {
		display: inline-block;
	}

	.tag {
	    line-height: 1em;
	    color: #333;
	    font-weight: 300;
	    padding: 5px 10px;
	    margin: 0 5px 10px 0;
	    display: inline-block;
	}

	.tag-retire {
		cursor : pointer;
		padding : 0 6px;
		font-size: 110%;
		font-family: 'Lato', sans-serif;
	    border: none;
	    background-color: transparent;
	}
	
	#selectionArticles {transition : 5s;}

@media all and (min-width: 750px) {
	
	#form_rubriques {display : inline-block;}
	#recherche-avancee {text-align: right; }
	
	.md_col1-4 {
		float : left;
		width: 25%
	}
	
	.filtres ul {
		display: none;
		background: #fff;
		padding :20px 10px 10px;
		position : absolute;
		text-align: left;
		width : 300px;
		opacity: 0;
		visibility: hidden;
		transition : all 0.5s;
		box-shadow : 0px 5px 5px 0px rgba(0,0,0,0.2);
	}

	.filtres > li {
		padding : 0 30px;
		position: relative;
	}
	
	.filtres li a{
		display: block;
		font-weight: 300;
		text-transform: uppercase;
	}
	
	.filtres ul li {
		display: block;
		padding : 0 10px 10px;
	}

	.filtres  li a {	
		pointer-events: none;
	}
	
	.filtres li a::after{
		content : "\f078";
		font-family: "Font Awesome 5 Free";
		font-weight: bold;
		padding-right: 5px;
		font-size : 80%;
	}
	
	.filtres li li a::after{content :""; display: none;}


	.filtres ul li a {
		border-bottom : 2px solid transparent;
		transition : all 0.5s;
	}

	.filtres ul li a:hover, .filtres ul li a:focus{
		color : #e3e0db;
	}

	.filtres li:hover ul {
		display: block;
		opacity: 1;
		visibility: visible;
	}

	.close-recherche, 
	.recherche-avancee-btn-bas,
	#affiche-recherche-avancee {display: none;}
	.rubrique-filtres span {display: none;}
}

/*** menu *****************************************/

/* menu */
nav#mainNav ul { text-align: center; }
nav#mainNav li { display: inline-block; position: relative; }
nav#mainNav li a { display: block; padding: 10px; position: relative; transition : all 0.5s}
#menuBurger, #openNav { display: none; }

/* effets passage de souris */
nav#mainNav li a:is(:hover,:focus),
#accueil nav#mainNav li#nav-accueil > a,
.qui nav#mainNav li#nav-qui > a,
#vinification nav#mainNav li#nav-vinification > a,
#appellation nav#mainNav li#nav-appellation > a,
#historique nav#mainNav li#nav-historique > a,
#qui nav#mainNav li#nav-qui-sommes-nous > a,
#contact nav#mainNav li#nav-contact > a {
	background: var(--jaune);
}

/* sous-menu */
/* 
nav#mainNav .sousMenuParent ul {
	text-align: left;
	position: absolute;
	max-height: 0;
	overflow: hidden;
	transition: 0.5s;
}
nav#mainNav .sousMenuParent:is(:hover,:focus-within) ul,
nav#mainNav .sousMenuParent a:is(:hover,:focus) + ul {max-height: 250px;}
nav#mainNav .sousMenuParent ul a {white-space: nowrap;}
nav#mainNav .burgerOnly {display: none;}
*/ 

.nav-caddie {position: relative; z-index : 100;}

	nav#mainNav .burgerOnly { display: block; }

	nav#mainNav ul {
		position: absolute;
		display: flex;
		flex-direction: column;
		width: min(100vw,620px);
		height: 100vh;
		top: 0px;
		right: 0;
		padding: 80px calc(var(--padding) / 2) calc(var(--padding) / 2) calc(var(--padding) / 2);
		text-align: left;
		transform: translateX(100%);
		transition: 0.5s;
		box-shadow : -8px 0px 10px 1px rgba(0,0,0,.2);
	}
	nav#mainNav > ul {
		overflow: hidden;
		z-index: 1;
	}
	nav#mainNav li { display: block; }

	/* sous-menu */
	nav#mainNav .sousMenuParent > a::after {
		content: '\f0da';
		font-family: "Font Awesome 6 Free";
		font-weight: 700;
		position: absolute;
		top: 50%;
		right: 10px;
		transform: translateY(-50%);
	}

	nav#mainNav #openNav:not(:checked) ~ ul .sousMenuParent ul { display: none; }
	nav#mainNav .sousMenuParent ul, nav#mainNav .sousMenuParent a:hover + ul {
		position: fixed;
		/*top: 0;*/
		background: #fff;
		right: -100%;
		max-height: none !important;
		z-index: 2;
		transform: none;
		box-shadow: none;
	}
	nav#mainNav .sousMenuParent > a.open + ul {	right: 0; }

	/* bars */
	#menuBurger { display: block; padding : 10px}
	#menuBurger label {
		z-index : 100;
		cursor: pointer;
		position: relative;
		display: block;
		width: 85px;
	}
	#menuBurger label::before,
	#menuBurger label::after {
		content: '';
	}
	#menuBurger label span,
	#menuBurger label::before,
	#menuBurger label::after {
		width: 20px;
		height: 2px;
		background-color: #000;
		transition: 0.5s;
		margin-top : 5px;
		display: block;
		transform-origin: left;
	}
	#menuBurger label b {
		display: block;
		position: absolute;
		top : 50%;
		transform: translateY(-50%); 
		left: 30px;
		line-height: 1em;
		font-weight: 400;
		text-transform: uppercase;
	}

	/* burger ouvert */
	nav#mainNav #openNav:checked ~ #menuBurger ~ ul { transform: none; }
	nav#mainNav #openNav:checked + #menuBurger label:before { transform: rotate(45deg); }
	nav#mainNav #openNav:checked + #menuBurger label span { opacity: 0; }
	nav#mainNav #openNav:checked + #menuBurger label:after  { transform: rotate(-45deg); }

	nav#mainNav li a::before { display: none !important; }

/***/


.ico::before{
	font-family : 'Font Awesome 5 Free';
	font-size : 120%;
	padding-right : 5px; font-weight : bold;
}

.bg_noir .ico::before{color : #9f9f9d;}
p.ico span{overflow : hidden; display : block;}
p.ico::before{float : left;}

.ico-eye::before { content : "\f06e"; }
.ico-map::before { content : "\f3c5"; }
.ico-mobile::before { content : "\f3cd"; }
.ico-phone::before { content : "\f095"; }
.ico-web::before { content : "\f0ac"; }
.ico-mail::before { content : "\f0e0"; }
.ico-recherche::before { content : "\f002"; }
.ico-therapeute::before { content : "\f470"; }
.ico-bag::before { content : "\f290"; }
.ico-compte::before { content : "\f2bd"; }
.ico-pdf::before { content : "\f1c1"; }
.ico-print::before { content : "\f02f"; }
.ico-streetview::before {content : "\f21d";  }
.ico-diagnoses::before {content : "\f470";  }
.ico-nav::before {content : "\f0c9";  color : #fff;}
.ico-distributeur::before {content : "\f494"; color : var(--jaune);}
.ico-prescripteur::before {content : "\f46d"; color : var(--jaune);}
.bg_vert_fonce .ico-compte::before, .bg_vert_fonce .ico-bag::before, .bg_vert_fonce .ico-therapeute::before  {color : #fff;}

.ico-calendar::before {content : "\f073"; font-weight: normal; font-size : 80%;}

.ico-small::before {font-size: 80%; color : var(--jaune)}

#recherche {
	margin-top : 10px;
	text-align : right;
}

#recherche input, #newsletter input {
	border : none;
	border-bottom : 1px solid;
	background : transparent;
}
#newsletter input {border-color : #9f9f9d; color : #9f9f9d;}

#newsletter input, #newsletter label, #newsletter a {
	display : inline;
	padding : 0 5px 0 0;
}

/*** liste + paragrahe  *****************************************/
ul.list{
	list-style-type : disc;
	margin-left : 15px;
	margin-bottom : 1.5em;
}

	ul.list.jaune li {color :var(--jaune);}
	ul.list.jaune li span{color :#000;}

ul.inline li{
	display : inline-block;
	padding : 0 10px;
}


.section  p {margin-bottom : 1.5em;}
.section h1 + p {margin-top : 1.5em;}
.section h1 + form {margin-top : 1.5em;}
.section p.noMargin,
.section ul.noMargin{
	margin-bottom : 0;
}


.list_questions li{
	display: inline-block;
	padding: 10px 0 0 0;
}

.list_questions li a{
	transition: all 0.8s;
	border: 1px solid #000;
	text-transform: uppercase;
	border-radius: 5px;
	padding: 10px 10px;
	color: #000 !important;
	margin: 0 20px;
}

.list_questions li a:first-child{margin-left: 0;}

.list_questions li a:focus, .list_questions li a:hover{
	background: #06382d;
	color: #fff!important;
}

/*** accueil    *****************************************/
.rondFondScale {
	position: relative;
	display: block;
}
.rondFondScale img {
	position: relative;
	z-index: 20;
}
.rondFondScale::after {
	position: absolute;
	left : 50%; 
	display: block;
	content : "";
	transform-origin: center;
	fill: var(--jaune);
	 	width: min(500px,calc(100% - 100px));
  	height: min(500px,calc(100% - 100px));
  	top : 50%; 
	transform: translate(-50%, -50%);
  	z-index: 10;
  	background: transparent url('/style/circle-solid.svg') no-repeat center center;
}

.zoomonce.animActive::after {
	animation: 3s ease-in 0s zoomonce;
    
}
@keyframes zoomonce {
    from { transform: translate(-50%,-50%) scale(0.1); }
    to   { transform: translate(-50%,-50%) scale(1); }
}


/*** rubrique    *****************************************/
/* =pagination */
.nav-page span {
	float: left;
	margin-bottom: 1.5em;
}

.nav-page ul {float: right;}

.nav-page li {
	float: left;
	padding: 0 0.4em;
	border-left: 1px solid #c0c0c0;
}

.nav-page li.fp, .nav-page li.pn, .nav-page li.dp {border-left: none;}
.nav-page li.pn a:link, .nav-page li.pn a:visited {text-decoration: underline; }
.nav-page li a:link, .nav-page li  a:visited {text-decoration: underline; color : #000;}
.nav-page li.cp {color: #fff; background : #FAAA00; padding : 0 2px;}
.nav-page span {display: none;}



/*** produits   *****************************************/
	.ecArticleContentAccueil {
		/* margin : 0 20%; */
		max-width: 300px;
		margin: 0 auto;
	}
		.ecArticleLibelle {
			font-size : 130%; 
			font-family: var(--font);
			font-weight: 300;
			text-transform: uppercase;
			font-style: normal;
			margin-bottom: 5px;
		}
		
			.ecArticleLibelle .ecArticleRubrique {
				display: block;
				font-size: 80%;
			}
			.ecArticleLibelle .ecArticleSouslibelle {
				display: block;
				font-size: 70%;
				text-transform: none;
			}

		.ecArticleRubrique, .ecArticleRubrique.like_h3  {
			font-size : 100%; 
			font-family: var(--font);
			font-weight: 300;
			text-transform: uppercase;
			font-style: normal;
			margin-bottom: 0px;
		}
		.ecArticleSouslibelle {
			font-size : 90%; 
			font-weight: 300;
			display: block;
		}

		h1.ecArticleLibelles {margin-bottom: 0; font-size : 100%}
		h1.ecArticleLibelles span{display: block;}
		h1.ecArticleLibelles span.ecArticleLibelle{text-transform: none; margin-bottom: 10px;}

		.ecArticleDescCourt {
			margin-top : 20px;
		}
		
		 .ecArticleDocuments {
			border-top: 1px solid ;
			padding : 10px 0
		}

		ul.ecArticleLinks li {
			border-left : 1px solid var(--jaune); 
			line-height: 1em;
			padding : 0 20px
		}
			ul.ecArticleLinks li a {line-height: 1em;}

		ul.ecArticleLinks li:first-child {
			border-left : none;
			padding-left : 0;
		}

	.ecArticleTarifs::after, .ecArticlePanier::after {	
		content: "";
		display: block;
		background: transparent url(/style/accueil/puce-repeat.jpg) repeat-x left bottom;
		width: 250px;
		height: 10px;
		padding-top: 20px;
		margin-bottom: 30px; 
	}

	.ico-wineglass::before {content : "\f4e3"; display:  inline-flex;padding-right: 10px;}
	.ecArticleDescLong {display: inline-flex; margin-top : 10px; font-size: 90%}

	.ecArticleVignette {
		display: block;
		margin-bottom : 20px;
	}

		.ecArticleVignette .img_100 {
			margin : 0 auto;
			max-height: 500px;
			width: auto;
		}
		/*.article{}*/
		.article_photo .popup-gallery { position: sticky; top: 135px; }
		.popup-gallery .rondFondScale {max-height: calc(100vh - 300px);}
		.popup-gallery .rondFondScale img {max-height: calc(100vh - 300px); display: block;}

.ecArticleDescBloc, .bloc_next {
	border-bottom: 1px solid var(--jaune);
	margin : 20px 0;
}
.unProduit .ecArticleLibelle {min-height : 57px; }
.bg_blanc .ecArticleDescBloc a:link, .bg_blanc  .ecArticleDescBloc a:visited{color : var(--jaune)}
.bg_blanc .ecArticleDescBloc a:focus, .bg_blanc  .ecArticleDescBloc a:hover{text-decoration : underline;}
.ecArticleDescBlocLib, .titre_next {
	text-transform : uppercase; 
	font-weight : 300; 
	position : relative; 
	display : block; 
	cursor: pointer;
	color : var(--jaune)!important;
	margin-bottom : 20px;
}

.ecArticleDescBlocLib::after, .titre_next::after {
	content : "\f078";
	font-family : 'Font Awesome 5 Free';
	font-size : 100%;
	padding-right : 5px; 
	font-weight : bold;
	display: block;
	position: absolute;
	pointer-events: none;
	right : 0; 
	top : 50%; 
	transform: translateY(-50%);
}


.ecArticleDescBlocLib.open::after, .titre_next.open::after {
	content : '\f077';
}

.ecArticleDescBloc:not(:first-child) div {
	display: none;
}

.bloc_next div {
	display: none;
}


.ecArticleDescBloc table {width: 100%; font-size : 90%;}
.ecArticleDescBloc table td {padding : 5px 0; border-bottom: 1px solid rgba(0,0,0,0.2); border-collapse: collapse;}

.ecArticleDescBlocLibAvis span::after {
	content : '\f107';
	font-family : 'Font Awesome 5 Free';
	padding-left : 5px;
}


.ecArticleDescBlocLibAvis.active span::after {
	content : '\f106';
}


#ecArticleDescBlocavis-lesavis {display : none;}
.ecArticleDescBlocLibAvis {cursor : pointer;}

.ecArticleAttributs {margin-top : 20px;}
.inline.ecArticleAttributs li:first-child {padding-left : 0;}

.ecArticleAvis {margin-top : 20px;}


.ecArticleRef strong {text-transform : uppercase; font-weight : 300;}
.ecArticleRef,
.ecArticleConditionnement {display : block;}
.ecArticleConditionnement {
	font-weight : 700;
}

.ecArticleStock {
	font-size: 90%;
	font-weight: 300;
	font-size: 90%;
	display: block;
	text-transform: uppercase;
	padding: 10px 0 ;
}
.ecArticleStock[data-vente="0"] {color: red;}



.ecArticlePanier .ecTarif {
	font-size : 150%;
	font-weight : 600;
	color : #000;
}

.ecArticlePanier .ecTarifPromo {
	font-size : 350%;
	color : #6dbb2a;
	display : block;
	font-weight : 700;
}

.ecTarifNormal {
	font-size : 90%;
}

.unProduit .ecTarifPromo {font-size : 150%; font-weight : bold; display : block; width : 100%;}

.ecTarifNormal {text-decoration : line-through; font-size : 80%; display : block; width : 100%;}

.ecArticlePanier .ecTarifNormal { font-size : 140%; }

.ecTarif {
	font-size : 130%;
	font-weight : 600;
	color : var(--jaune)
}


.ecArticleTitrePanier {
	font-weight : 700;
	text-transform : uppercase;
	display : block;
	margin-top :  30px;
	font-size : 120%;
}

.strongBigVert {
	color : #6dbb2a!important;
	font-size : 130%;
	font-weight : 700
}

.ecVenteArticle{border-bottom : none;}


.ecArticleBlocQte  {
	border : 1px solid #000;
	margin-right: 20px;
	display: inline-flex;
	padding : 2px 10px;
	align-items: center;
}

.ecArticleSelectQuantiteLabel {
	font-weight : 300;
	padding-right: 5px;
}

.ecArticleSelectQuantite {
	max-width : 3em;
	padding : 10px 5px;
	border : none;
	text-align: center;
}


.ecAjoutArticlePanierStyle {
	margin : 10px 0;
}

.ecAjoutPanier, .ecAjoutArticlePanierStyle, .ecFormInputSubmit, .xf .footer input[type=submit]  {
	background-color: var(--jaune);
	text-transform : uppercase;
	padding : 10px 10px;
	color : #fff!important;
	font-weight : 300;
	font-size : 100%;
	border : none;
	font-family: var(--font);
	cursor : pointer;
	display : inline-block;
	appearance:none;
	border-radius: 0;
}

.xf .footer input[type=submit]  {
	float: right;
}
.titreDesc {
	display : block;
	margin : 40px 0 20px 0;
	text-transform: uppercase;
	font-weight: 600;
}

.small {font-size : 80%;}
.big {font-size : 120%;}

.navIntProduit a{margin-bottom : 5px; margin-top : 20px; display : block; text-transform : uppercase; font-size : 80%; color : #88898b!important;}


a.color_facebook{color : #3c5a99!important;}
a.color_twitter{color : #1da1f2!important;}
a.color_pinterest{color : #bd081b!important;}
a.color_g_plus{color : #dc4a38!important;}

.ecArticlePartage i{font-size : 120%;}
.ecArticlePartage img{max-width : 15px;}

.ecMontantEconomise {display : block; margin : 5px 0 15px 0; color : #F22508;}

.titreDescPlusArticle {
	padding : 80px 20px;
}

/* praticiens  distributeurs */
.carteVisite, .magasin {
	border : 1px solid #b9b7b7;
}
.carteVisite span.ico,  .carteVisite a.ico {display : block; padding-top : 5px;  padding-bottom : 5px;}


.map {
	background: none repeat scroll 0 0 #fff;
	box-sizing: border-box;
	margin-top: 10px;
}

.map > div {
	width : 100%;
	height: 200px;
	/*margin: 15px;*/
}

.googlemap {
	display: block;
	margin-top: 15px;
}


.grid-sizer {
	width: 25%;
	padding: 20px;
	box-sizing: border-box;
	line-height: 1;
	float: left;
	position: absolute;
}


/* =breadcrumb */
#breadcrumb {
	padding : 10px 0;
	font-size: 80%;
}

#breadcrumb ul, #breadcrumb li {display: inline;}
#breadcrumb span:after {content: "\0020 \3E";}
#breadcrumb li:last-child {font-weight: bold; color : var(--jaune); font-weight: 700;}

.star-ratings-css {
	unicode-bidi: bidi-override;
	color: #BFCAD6;
	font-size: 40px;
	line-height: 20px;
	/*height: 25px;*/
	/*width: 100px;*/
	display: inline-block;
	margin: 0 auto;
	position: relative;
	padding: 0;
	/*text-shadow: 0px 1px 0 #a2a2a2;*/
}
.unProduit .star-ratings-css {margin-top : 5px; }
.ecArticleAvis .star-ratings-css {font-size : 50px;}

.star-ratings-css-top {
	color: #FC951D;
	padding: 0;
	position: absolute;
	z-index: 1;
	display: block;
	top: 0;
	left: 0;
	overflow: hidden;
}
.star-ratings-css-bottom {
	padding: 0;
	display: block;
	z-index: 0;
}

/*** compte    *****************************************/
.menuCompteClient {
	gap: 30px;
}
.menuCompteClient li{
	display: flex;
	flex-basis: 30%;
	flex-grow: 1;
	min-width: 300px;
}	
.menuCompteClient a {
	width: 100%;
	padding : 30px;
	position: relative;
	border : 1px solid var(--jaune);
	display: block;
	background: #fff;
	transition: all 0.5s;
}
.menuCompteClient span {font-size: 80%}
.menuCompteClient i {
	background : #fff;
	display: block;
	position: absolute;
	top : -10px;
	left : -10px;	
	font-size: 150%;
	transition: all 0.5s;
}
	
.menuCompteClient a:hover, 
.menuCompteClient a:focus {
	background: rgba(222, 182, 69, 0.2);
}

.menuCompteClient a:hover i, 
.menuCompteClient a:focus i{
	font-size : 120%;
	top : -25px;
	left : 0px;
}

/*** caddie   *****************************************/
.nav-etape {
	display : flex;
	flex-wrap: wrap;
	background : #ebebeb;
}
.nav-etape li{
	flex: 1 0 25%;
	padding: 10px;
	text-align : center;
	text-transform : uppercase;
	font-weight : 300;
}

.nav-etape li.actif{
	background : var(--jaune);
	color : #fff;
}

.nav-etape li.actif a{color : #fff;}

#caddie .footer {margin-top : 30px;}

.item-table {display : table; margin-bottom: 1.5em;}
.item-header {display : table-header-group;}
.item-row {display : table-row;}
.item-thead, .item-cell {display : table-cell; box-sizing : border-box;}
.item-footer {display: table-footer-group;}


#cadd-art {
	width: 100%;
	margin-bottom: 10px;
	border-collapse: collapse;
	empty-cells: hide;
}

#cadd-art .item-thead, #cadd-art .item-cell {
	border-bottom: 1px solid #E8E8E8;
}

/*#cadd-art .offre  .item-cell {}*/

#cadd-art .item-thead {
	background: #E8E8E8;
	white-space: nowrap;
	padding : 5px;
	color : #8c8c8c;
}

.item-row .cadd-ref { width:10%; }
.item-row .cadd-libelle { width:40%;}
.item-row .cadd-pu { width:10%;}
.item-row .cadd-qte { width:15%;}
.item-row .cadd-total { width:10%;}
.item-row .cadd-autre { width:15%;}

/*.offre .libelle { width:75%;}*/

.cadd-recap .item-row .cadd-ref
{ width:15%; }
.cadd-recap .item-row .cadd-libelle 	{ width:40%;}
.cadd-valid .item-row .cadd-libelle 	{ width:55%;}

.cadd-recap .item-row .cadd-libelle2
{ width:20%;}
.cadd-recap .item-row .cadd-pu ,
.cadd-valid .item-row .cadd-pu
{ width:15%; text-align : right;}
.cadd-recap .item-row .cadd-qte ,
.cadd-valid .item-row .cadd-qte
{ width:15%; text-align : right;}
.cadd-recap .item-row .cadd-total ,
.cadd-valid .item-row .cadd-total
{ width:15%; text-align : right;}

#cadd-art .item-cell {
	text-align: center; padding : 20px 5px;
}
#cadd-art  .saut .item-cell {border: none;}


/*#cadd-art .offre .item-cell {border-bottom : none;}*/

#cadd-art .libelle {
	text-align: left;
	vertical-align: middle;
	/* max-width: 250px;
     width:expression(parseInt(this.offsetWidth) > 250 ? "250px" : true);*/
}


#cadd-art .libelle strong{
	color: #000;
	font-size: 1.3em;
	line-height: 1.1em;
	text-transform: uppercase;
	font-weight : 400;
}

#cadd-art .offre .libelle strong{font-weight : normal; text-transform : none; font-size : 1.0em;}


#cadd-art  .libelle .stock{
	display: block;
	font-size: 90%;
	color: #ff0000;
}

#cadd-art  .remise .item-cell  {color: #f00; padding-left: 20px;}

#cadd-art .label {text-align: left;}

#cadd-art .cadd-ref img {
	display: inline;
	margin-right: 10px;
	vertical-align: middle;
	width: auto;
	max-width : 100px;
	max-height: 150px;
}

#cadd-art .hide {border: none;}



#cadd-art .delete, .table-total .refresh {text-align: center;}

.table-total.refresh button, #caddie .bouton {
	border: none;
	background: transparent;
	cursor: pointer;
	color: #F22508;
	font-size: 1.1em;
}

#cadd-art  button:focus, #cadd-art  button:hover {color: #EAEAEA;}
#cadd-art  strong {font-size : 1.1em;}

#cadd-art .cadd-qte input[type=text]{
	background: none repeat scroll 0 0 #f5f5f5;
	color: #696363;
	font-weight: 500;
	padding: 0.3em 0.5em;
	border : none;
	text-align : center;
}
.table-total{
	width : 40%;
	margin: 20px 0 20px 0;
	float : right;
	border-collapse: collapse;
}
.table-total td{
	border : 1px solid #e8e8e8;
	padding: 20px 5px;
}

.table_avantages {border : none; margin : 0;}
input[name=code_promo] {width : 100%; max-width : 190px; }

.submitFormPromo {
	float : right;
	font-size : 90%;
	text-decoration : underline;
	color : var(--jaune);
	border : none;
	background : transparent;
}
.cadd-section .table-total{
	width : 45%;
}

.table-total .ecLabelCell{
	width : 67%;
}

.table-total .ecCodeAvantage .ecLabelCell{
	width : 67%;
}

.table-total .item-cell {
	border: 1px solid #E8E8E8;

	/*border-top: 1px solid #E8E8E8;*/
	padding: 20px 5px;
}


.table_avantages .item-cell {padding : 10px 5px 20px 5px;}

.table_avantages .item-cell {border : none;}

.recommandation-panier {text-align : right;   margin-bottom: 10px;}

#cadd-cgv {display: none;}

#cadd-cgv .cadd-cgv-page {
	width: 950px;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -460px;
	background: #f0f0f0;
	font: 1em/1.1em Arial, sans-serif;
	text-align: left;
}

#cadd-cgv .cadd-cgv-header {
	height: 2em;
	padding: 0 8px;
	line-height: 1.8em;
	text-align: right;
	background: black;
}
#cadd-cgv .cadd-cgv-header a {color: white!important; font-size: 110%;}
#cadd-cgv .cadd-cgv-content {height: 300px; overflow: auto; padding: 10px;}

#cn-caddie-erreur {margin-bottom: 10px;}
#cn-caddie-erreur p {margin-bottom: 4px!important;}
#cn-caddie-erreur li {padding-left: 26px;}

.ecModePaiement {margin-bottom: 10px;}

.ecModePaiement:first-child {border-left : none;}
.ecModePaiement {border-left : 1px solid #E8E8E8;}

.ecModePaiementLogo {margin: 5px 0 0 16px;}
.ecModePaiementLogo img {max-width : 100%;}
.ecModePaiementDetail {padding: 0 10px;}
.ecModePaiementDetail  p { margin: 0}

#cadd-commander, .ecTerminerAchat  {float: right;}
#cadd-continuer {float: left;}

.cadd-section {
	margin-bottom: 1em;
	padding: 5px 0;
	border-top: 3px solid #fff;
	border-bottom: 3px solid #fff;
}

.cadd-section .entete h3 {float: left;}
.cadd-section .entete a {padding-left: 10px; color: rgb(242, 37, 8);}
.cadd-section .entete a:before {content:"[";}
.cadd-section .entete a:after {content:"]";}

.cadd-confirm {
	padding: 20px;
	background: #ebebeb;
	line-height: 1.4;
	margin-bottom: 1em;
}

.cadd-warning {
	padding: 5px;
	background: #fbb30b;
	line-height: 1.4;
	margin-bottom: 1em;
}

#cadd-valid-cgv a {color: rgb(242, 37, 8);}

#cadd-commande pre {
	font: italic 0.9em/1.1em Arial,sans-serif;
	letter-spacing: 1px;
	margin-bottom: 1em;
}

.ecCaddieSection {margin-bottom: 45px;}
/*.ecCaddieSectionEntete {}*/
.ecCaddieSectionEntete h3 {float: left;}
.ecCaddieSectionEntete a {padding-left: 10px; color: rgb(242, 37, 8)!important;}
.ecCaddieSectionEntete a:before {content:"[";}
.ecCaddieSectionEntete a:after {content:"]";}
.ecCaddieSectionDetail {clear: both;}

.ecCaddieSection .ecCaddieSectionLivraison {
	float: left;
	width: 62%;
}
.ecCaddieSection .ecCaddieSectionLivraison .ecCaddieSectionLivraisonAdresse {
	border-right: 1px solid #b4b4b4;
	float: left;
	margin-right: 10px;
	max-width: 50%;
	padding-right: 10px;
}
.ecCaddieSection .ecCaddieSectionLivraison .ecCaddieSectionLivraisonMode {
	float: left;
	max-width: 40%;
}
.ecCaddieSection .ecCaddieSectionExpedition {
	float: right;
	width: 38%;
}

.ecCaddieSection.ecCaddieSectionLivraisonFacturation {border-top : 1px solid #E8E8E8; border-bottom : 1px solid #E8E8E8; padding-top : 20px; margin-top : 60px;}


.ecCaddieSection .ecCaddieSectionExpedition .ecCaddieSectionContent, .ecCaddieSection .ecCaddieSectionLivraison .ecCaddieSectionContent {
	padding: 8px;
}
.ecCaddieSection .ecCaddieSectionLivraison .ecCaddieSectionContent {
	margin-right: 8px;
}
.ecCaddieSectionLivraison {border-right : 10px solid #fff; box-sizing : border-box;  }

.ecFormInputSubmit[disabled] {
	opacity: 0.5;
	cursor: default;
	pointer-events: none;
}

.ecFormInputSubmitBig {font-size : 130%;}

a.ecTerminerAchat {color : #000;}

.ecTable {display: table; width: 100%;}
.ecTableRow {display: table-row;}
.ecTableCell {display: table-cell;}

.ecLabelCell {text-align: left!important;}
.ecEmptyCell {border:none!important;}

.ecCodeAvantage td {border:none!important;}
.ecCodeAvantageInfo {
	border: medium none !important;
	float: right;
	font-size: 95%;
	padding: 4px 0 0;
	width: 45%;
}

.ecCaddieCommentaire {width: 50%;}
.ecCaddieCommentaire textarea {width:100%; height: 100px;}

.ecCaddieValide {
	padding-left: 40px;
	vertical-align: bottom;
	text-align: right;
}

.ecAffiliation {width: 0; height: 0; visibility: hidden;}

/* =commande */
.commandes {
	width: 100%;
}
.commandes .item-header {
	background: none repeat scroll 0 0 #e8e8e8;
}
.commandes .item-thead, .commandes .item-row .item-cell {
	border-bottom: 1px solid #e8e8e8;
	padding: 10px 5px;
}
.commandes .item-footer .item-cell {
	padding: 20px 5px;
}

.commandes .item-footer .item-cell:first-child {
	text-align: left;
}

.commandes .item-thead.montant,
.commandes .item-cell.montant,
.commandes .item-footer .item-cell {
	text-align: right;
}

.commandes .item-thead.centre,
.commandes .item-cell.centre {
	text-align: center;
}

.commandes .item-label {font-weight: bold;}

.commandes .voir a {
	background: none repeat scroll 0 0 #e8e8e8;
	display: block;
	float: right;
	padding: 2px 5px;
}
.commandes .voir a:before {
	content: ">";
	font-size: 0.8em;
	padding-right: 5px;
}
.commande .statut {
	border-bottom: 3px solid #f22508;
	border-top: 3px solid #f22508;
	margin-bottom: 1em;
	padding-top: 0.8em;
}
.commande .regler, .commande .paiements {
	border-left-style: solid;
	border-left-width: 3px;
	margin: 0.8em 0;
	padding: 0 10px;
}
.commande .regler {
	border-left-color: #f22508;
}
.commande .paiements {
	border-left-color: #e0e0e0;
}
.commande .regler li, .commande .paiements li {
	border-bottom: 2px solid #e0e0e0;
	padding: 0.8em 10px;
}

#cadd-form button	{
	border : none;
	background : none;
	cursor : pointer
}

.ecArticleQuantite  {
	font-size : 100%; font-weight : 300; 	border : none;
	background : none;
	cursor : pointer
}
.ecArticleQuantite:first-child {padding-right : 5px;}

#cadd-form-refresh { font-size : 120%; color : #F22508;}

/*** expedition   *****************************************/


/* types */

/*.ecTypeExpedition {}*/

.ecTypeExpedition-libelle {
	display: block;
	margin-bottom: 10px;
	box-sizing: border-box;
	padding: 10px;
	background: #F5F5F5;
	font-weight: bold;
	position: relative;
}
.ecTypeExpedition-libelle::after {
	content: '\25B6';
	position: absolute;
	right: 10px;
	font-weight: bold
}
.ecTypeExpedition-libelle.ecTypeExpedition--isOpen::after {
	content: '\25BC';
}

.ecTypeExpedition:nth-child(1n+2) .ecModesExpedition {
	display: none;
}

.ecModesExpedition {
	margin-bottom: 10px;
}

/* modes */

.ecModeExpedition {
	padding: 10px;
	background: #FAFAFA;
	margin-bottom: 10px;
}

.ecModeExpedition .ecExpeditionOptions {
	display: none;
}

/*.ecModeExpedition.ecSelectionne {}*/

.ecModeExpedition.ecSelectionne .ecExpeditionOptions{
	display: block;
}

/* points retraits */

.ecPointsRetrait-table {
	display: table-row;
}

.ecPointsRetrait-liste, .ecPointsRetrait-carte {
	display: table-cell;
	vertical-align: top;
}

.ecPointsRetrait-liste {
	width: 30%;
}

.ecPointsRetrait-liste .ecListe {
	position: relative;
	height: 600px;
	overflow-y: scroll;
}

.ecPointRetrait {
	border-top: 1px solid #F0F0F0;
	padding: 10px;
	background: #FAFAFA;
}

.ecPointRetrait:first-child {border-top: none}

.ecPointRetraitFerme {
	opacity: 0.5;
}

.ecPointRetrait.ecSelectionne {
	background-color: #f0f0f0;
}

.ecPointRetrait-adresse {
	position: relative;
}

.ecPointRetrait-adresse > strong {
	display: block;
	padding-right: 40px;
}

.ecPointRetrait-distance {
	position: absolute;
	top: 0;
	right: 0;
	font-weight: bold;
}

.ecPointRetrait-carte {float: left; display: none;}
.ecPointRetrait-carte a:before {
	content : "\f041";
	padding-right : 5px;
	font-family : "Font Awesome 5 Free";
	font-weight: bold;
	font-size: 140%;
	line-height: 1;
}

.ecPointRetrait-horaires {font-size: 80%; padding: 10px 0;}
/*.ecPointRetrait-horaires .ecTable { display: none;}*/
.ecPointRetrait-horaires a:before,
.ecPointRetrait-horaires strong:before {
	content : "\f017";
	padding-right : 5px;
	font-family : "Font Awesome 5 Free";
	font-size: 100%;
	line-height: 1;
}



.ecPointsRetrait-carte {
	width: 70%;
	padding-left: 10px;
}

.ecPointsRetrait-carte .ecMapCanvas {
	width: 100%;
	height: 600px;
	z-index: 1;
}

/*.ecMarkerGetHoraires {}
.ecMarkerSelectPoint {}*/

/* offres (modes et points retraits) */

.ecModeExpedition-entete {
	float: left;
	width: 80%;
}

.ecCustomRadio input {
	opacity: 0;
	position: absolute;
}

.ecCustomRadio input, .ecCustomRadio span {
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
}

.ecCustomRadio input + span::before {
	content: '';
	background: #fff;
	border: 2px solid #ddd;
	display: inline-block;
	vertical-align: middle;
	width: 20px;
	height: 20px;
	padding: 2px;
	margin-right: 10px;
	/*text-align: center;*/
}

.ecCustomRadio input + span::before {
	border-radius: 50%;
}

.ecCustomRadio input:checked + span::before {
	background: #ccc;
	box-shadow: 0 0 0 4px #FFF inset;
}

.ecCustomRadio.ecCustomRadio-retrait {
	padding-left: 40px;
}
.ecCustomRadio.ecCustomRadio-retrait input + span::before {
	margin-left: -40px;
}

.ecModeExpedition-descriptif {
	padding: 10px 0 0 40px;
	line-height: 1.5;
}

/* aligner logo au sein du descriptif descriptif */
.ecModeExpedition-descriptif img {
	vertical-align: middle;
}

.ecModeExpedition-tarif {
	float: right;
	width: 20%;
	text-align: right;
}



.ecExpeditionOptions {
	margin: 0 0 0 30px;
	border-top: 1px solid #777777;
	padding: 10px 0 0 0;
}

/*.ecExpeditionOption {}*/

.ecExpeditionOption-choix {
	float: left;
	width: 50%;
}

.ecExpeditionOption-nom span {top : 4px; position : relative;}

.ecExpeditionOption-input {
	vertical-align: bottom;
	position: static!important;
}

.ecExpeditionOption-descriptif {
	padding: 20px 0;
}

.ecExpeditionOption-erreur {
	color: red;
}

/*.ecExpeditionChoix {
	margin-right: 5px;
}*/

.ecExpeditionPicto {
	vertical-align: middle;
}

.ecExpeditionTarif {
	float: right;
}

.footer .ecmPoursuivreAchat {
	float : left;
}

.cn_phone .ecPointsRetrait-carte #map{display : none;}

.mfp-content #map {
	background: #fff none repeat scroll 0 0;
	height: 350px;
	margin: 20px auto;
	max-width: 600px;
	padding: 10px;
	position: relative;
	width: auto;
}
/*** footer  *****************************************/

footer {
	font-size: 90%;
	/*padding-top : 60px;*/
}

	

.nav-mentions li, .nav_rs li{
	display : inline-block;
}
.nav-mentions li a {
	line-height: 1;
}
.nav-mentions li a, .nav_rs li a{padding : 0 5px;}

.nav-mentions li a {font-size : 90%;}

.nav-mentions li a{border-left : 1px solid; line-height: 1em;
  display: block; font-weight: 300}
.nav-mentions li:first-child a{
	border-left : none;
	padding-left :0;
}

.borderRight {
	border-right: 1px solid;
}
.mentions_alcool {
	padding-top : 60px;
	font-size: 110%;
	padding-bottom: 40px;
}

.logo_footer {
	margin-bottom : 30px;
}
.footer_nav li{
	padding-bottom: 5px;
}

/*** titre *****************************************/
.surtitre {
	font-style: italic;
	font-weight: 400;
	display: block;
	position : relative;
	margin-bottom: 5px;
}
.surtitre::before {
	content:"";
	display: block;
	background: transparent url(/style/accueil/puce-repeat.jpg) repeat-x left top;
	width : 150px; 
	height : 10px; 
	margin-bottom: 10px;
}

.content_svg  {
	height: 90px;
 	display: flex;
  	align-items: end;
  	justify-content: center;
  	margin-bottom: 20px;
}
.content_svg svg {
	fill: var(--jaune);	
	width: auto;
	max-height : 90px;
	display: block;
}
/*** titre ****************************************/
h1.like_h2 { font-size: 240%; margin-bottom : 20px;}
h2, .like_h2, h3, .like_h3, h4, .like_h4, #caddie h1  {
	font-family: var(--font-titre);
	line-height: 1.2;
	margin-bottom: 20px;
	font-weight: 700;
}

h2, .like_h2, #caddie h1  {
	font-size: 180%;
	font-weight: 700;
	margin-bottom : 30px;
	font-style: italic;
	color : var(--jaune);
}

h2.noMargin , .like_h2.noMargin  {margin-bottom: 0}

h3, .like_h3 {
	font-size: 140%;
	font-weight: 300;
	color : #000;
}

h4, .like_h4 {
	font-size: 120%;
	text-transform: uppercase;
	color : var(--jaune);
	font-weight: 300;
	font-family: var(--font);
	font-style: normal;
	margin-bottom: 0;
}

/*** lien *****************************************/

a.btn_suite, .lienRubriqueAccueil a, a.ecmRetourAccueil {
	display : inline-block;
	text-transform : uppercase;
	padding : 2px 10px;
	color : var(--jaune)!important;
	font-weight: 300px;
	font-family: var(--font);
	transition: all 1.2s;
	position : relative;
	text-decoration: none;
	border-left: 1px solid var(--jaune);
	border-right: 1px solid var(--jaune);
}

	.bg_jaune a.btn_suite {
		color : #000!important;
		border-left: 1px solid #000;
		border-right: 1px solid #000;
	}

.btn_suite::before, .btn_suite::after,
.lienRubriqueAccueil a:before, .lienRubriqueAccueil a:after  {
    content: "";
    position: absolute;
    width: 0%; 
    height: 1px;
    background: var(--jaune);
    transition: all 0.4s ease-in-out;
}

.bg_jaune .btn_suite::before, .bg_jaune .btn_suite::after { background: #000;}

	.btn_suite::before, .lienRubriqueAccueil a::before {
		top: 0;
		left: 0;
	}	
	
	.btn_suite::after, .lienRubriqueAccueil a::after {
		bottom: 0;
		right: 0;
	}


	.btn_suite:hover::before, .btn_suite:hover::after, 
	.lienRubriqueAccueil a:hover::before, .lienRubriqueAccueil a:hover::after {
		width: 100%;
		transition: all 0.4s ease-in-out;
	}


a.btn_suite:hover,
a.btn_suite:focus, .lienRubriqueAccueil a:hover, .lienRubriqueAccueil a:focus {
	
	color : #000;
}

.cms-root a.btn_suite{
	font-size : 80%;
}

a.btn_vert {
	color : #06382d;
}


a.btn_vert:hover,
a.btn_vert:focus {
	background : #06382d;
	color : #fff;
}

a.btn_suite_orange {
	background : orange;
	color : #000;
}

a.btn_conversion {
	border-bottom : 1px solid;
	padding-bottom : 2px;
	text-transform : uppercase;
}


/*** actualites  *****************************************/

.imgActu {
	display : block;
	height : 150px;
	overflow : hidden;
	position : relative;
}

.imgActu img {
	max-height : 100%;
	margin : 0 auto;
	position : absolute;
	top : 50%;
	left : 50%;
	transform : translate(-50%,-50%);
}


.imgActu span{
	position : absolute;
	top : 50%;
	left : 50%;
	transform : translate(-50%,-50%);
	text-transform : uppercase;
	color : rgba(146,143,143,0.5);
	font-weight : 300;
	text-align : center;
	font-size : 95%;
}

.imgActu span::before{
	content : '\f030';
	font-family : 'Font Awesome 5 Free';
	display : block;
	font-size : 200%;
	color : rgba(146,143,143,0.5);
}

/* slider legendary */

.legendarySlider{position:relative;display:grid;grid-template-rows:100%;overflow:hidden;width:100%}.legendarySlider.lsFullscreen{height:100vh}.legendarySlider>.lsOneSlide{height:100%;object-fit:cover;overflow:hidden}.legendarySlider.lsFade>.lsOneSlide{width:100%;position:absolute;top:0;left:0;opacity:0;z-index:1}.legendarySlider.lsFade>.lsOneSlide:first-child{position:relative;z-index:2}.lsPrev,.lsNext{font-size:70%;position:absolute;top:50%;transform:translateY(-50%);color:#000;padding:20px;z-index:3;transition:font-size 0.2s,color 0.2s}.lsPrev{left:0}.lsPrev.lsOutside{transform:translateX(-100%)}.lsNext{right:0}.lsNext.lsOutside{transform:translateX(100%)}
.lsPrev:is(:hover,:focus),.lsNext:is(:hover,:focus){font-size:105%}.lsPuces{display:flex;justify-content:center;position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:3}.lsPuce{width:8px;height:8px;background-color:#444;border-radius:50%;margin:3px;transition:all 0.2s}.lsPuce:hover,.lsPuce:focus,.lsPuce.active{width:11px;height:11px;margin:1.5px;background-color:#aaa}.lsVignettes{display:flex;justify-content:center;height:100px;width:100%}.lsVignette{height:100%;width:150px;overflow:hidden}.lsVignette img{object-fit:cover;object-position:center;width:100%;height:100%;transition:transform 0.2s}.lsVignette:hover img{transform:scale(1.2)}
.lsPuce:hover, .lsPuce:focus, .lsPuce.active {
  background-color: var(--jaune);
}
/* magnific popup */
.mfp-bg,.mfp-container,.mfp-wrap{left:0;top:0;width:100%;height:100%}.mfp-container:before,.mfp-content{display:inline-block;vertical-align:middle}.mfp-bg{z-index:1042;overflow:hidden;position:fixed;background:#0b0b0b;opacity:.8}.mfp-wrap{z-index:1043;position:fixed;outline:0!important;-webkit-backface-visibility:hidden}.mfp-container{text-align:center;position:absolute;padding:0 8px;box-sizing:border-box}.mfp-container:before{content:'';height:100%}.mfp-align-top .mfp-container:before,.mfp-loading.mfp-figure,.mfp-s-error .mfp-content,.mfp-s-ready .mfp-preloader{display:none}.mfp-content{position:relative;margin:0 auto;text-align:left;z-index:1045}.mfp-ajax-holder .mfp-content,.mfp-inline-holder .mfp-content{width:100%;cursor:auto}.mfp-ajax-cur{cursor:progress}.mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder .mfp-close{cursor:-moz-zoom-out;cursor:-webkit-zoom-out;cursor:zoom-out}.mfp-gallery .mfp-image-holder .mfp-figure,.mfp-zoom{cursor:pointer}.mfp-zoom{cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in}.mfp-auto-cursor .mfp-content{cursor:auto}.mfp-arrow,.mfp-close,.mfp-counter,.mfp-preloader{-webkit-user-select:none;-moz-user-select:none;user-select:none}.mfp-hide{display:none!important}.mfp-preloader{color:#ccc;position:absolute;top:50%;width:auto;text-align:center;margin-top:-.8em;left:8px;right:8px;z-index:1044}.mfp-close,.mfp-preloader a:hover{color:#fff}.mfp-preloader a{color:#ccc}button.mfp-arrow,button.mfp-close{overflow:visible;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;display:block;outline:0;padding:0;z-index:1046;box-shadow:none;touch-action:manipulation}.mfp-figure:after,.mfp-iframe-scaler iframe{box-shadow:0 0 8px rgba(0,0,0,.6);position:absolute;left:0}button::-moz-focus-inner{padding:0;border:0}.mfp-close{width:44px;height:44px;line-height:44px;position:absolute;right:0;top:0;text-decoration:none;text-align:center;opacity:.65;padding:0 0 18px 10px;font-style:normal;font-size:28px;font-family:Arial,Baskerville,monospace}.mfp-arrow:focus,.mfp-arrow:hover,.mfp-close:focus,.mfp-close:hover{opacity:1}.mfp-close:active{top:1px}.mfp-close-btn-in .mfp-close{color:#333}.mfp-iframe-holder .mfp-close,.mfp-image-holder .mfp-close{color:#fff;right:-6px;text-align:right;padding-right:6px;width:100%}.mfp-counter{position:absolute;top:0;right:0;color:#ccc;font-size:12px;line-height:18px;white-space:nowrap}.mfp-figure,img.mfp-img{line-height:0}.mfp-arrow{position:absolute;opacity:.65;margin:-55px 0 0;top:50%;padding:0;width:90px;height:110px;-webkit-tap-highlight-color:transparent}.mfp-arrow:active{margin-top:-54px}.mfp-arrow:after,.mfp-arrow:before{content:'';display:block;width:0;height:0;position:absolute;left:0;top:0;margin-top:35px;margin-left:35px;border:inset transparent}.mfp-arrow:after{border-top-width:13px;border-bottom-width:13px;top:8px}.mfp-arrow:before{border-top-width:21px;border-bottom-width:21px;opacity:.7}.mfp-arrow-left{left:0}.mfp-arrow-left:after{border-right:17px solid #fff;margin-left:31px}.mfp-arrow-left:before{margin-left:25px;border-right:27px solid #3f3f3f}.mfp-arrow-right{right:0}.mfp-arrow-right:after{border-left:17px solid #fff;margin-left:39px}.mfp-arrow-right:before{border-left:27px solid #3f3f3f}.mfp-iframe-holder{padding-top:40px;padding-bottom:40px}.mfp-iframe-holder .mfp-content{line-height:0;width:100%;max-width:900px}.mfp-image-holder .mfp-content,img.mfp-img{max-width:100%}.mfp-iframe-holder .mfp-close{top:-40px}.mfp-iframe-scaler{width:100%;height:0;overflow:hidden;padding-top:56.25%}.mfp-iframe-scaler iframe{display:block;top:0;width:100%;height:100%;background:#000}.mfp-figure:after,img.mfp-img{width:auto;height:auto;display:block}img.mfp-img{box-sizing:border-box;padding:40px 0;margin:0 auto}.mfp-figure:after{content:'';top:40px;bottom:40px;right:0;z-index:-1;background:#fff}.mfp-figure small{color:#bdbdbd;display:block;font-size:12px;line-height:14px}.mfp-figure figure{margin:0}.mfp-bottom-bar{margin-top:-36px;position:absolute;top:100%;left:0;width:100%;cursor:auto}.mfp-title{text-align:left;line-height:18px;color:#f3f3f3;word-wrap:break-word;padding-right:36px}@media screen and (max-width:800px) and (orientation:landscape),screen and (max-height:300px){.mfp-img-mobile .mfp-image-holder{padding-left:0;padding-right:0}.mfp-img-mobile .mfp-bottom-bar:empty,.mfp-img-mobile img.mfp-img{padding:0}.mfp-img-mobile .mfp-figure:after{top:0;bottom:0}.mfp-img-mobile .mfp-figure small{display:inline;margin-left:5px}.mfp-img-mobile .mfp-bottom-bar{background:rgba(0,0,0,.6);bottom:0;margin:0;top:auto;padding:3px 5px;position:fixed;box-sizing:border-box}.mfp-img-mobile .mfp-counter{right:5px;top:3px}.mfp-img-mobile .mfp-close{top:0;right:0;width:35px;height:35px;line-height:35px;background:rgba(0,0,0,.6);position:fixed;text-align:center;padding:0}}@media all and (max-width:900px){.mfp-arrow{-webkit-transform:scale(.75);transform:scale(.75)}.mfp-arrow-left{-webkit-transform-origin:0;transform-origin:0}.mfp-arrow-right{-webkit-transform-origin:100%;transform-origin:100%}.mfp-container{padding-left:6px;padding-right:6px}}


.white-popup {
	position: relative;
	background: #FFF;
	padding: 40px;
	width: auto;
	max-width: 600px;
	margin: 20px auto;
	color: black;
}

#caddie-popup h2{
	font-size : 190%;
	margin-bottom : 15px;
}
#articlePopupPanier {margin-bottom : 30px;}


body.cn-rgpd-overlay {
	overflow: hidden;
	height: 100vh;
	background : rgba(0,0,0,.5);
}

.cn-rgpd {
	display: block;
	position: absolute;
	width: 100%;
	height: 100vh;
	z-index: 99999;
	top : 0;
	left: 0;
}

.cn-rgpd-content {
	min-width: 320px;
	display: block;
	position: absolute;
	max-width: 500px;
	height: auto;
	z-index: 100000;
	font-size: 16px;
	line-height: 18px;
	top : 50%;
	left: 50%;
	padding : 20px;
	color: #000;
	background : #fff;
	transform : translate(-50%,-50%);
}

.cn-rgpd strong {
	display : block;
	padding-bottom : 20px;
	font-size : 30px;
}

.cn-rgpd p {padding-bottom : 20px;}

.cn-rgpd a.btnDenyCookies {
	display: block;
	padding-bottom : 10px;
	text-align: center;
	text-decoration: underline;
	color : #8c8c8c!important;
}

.cn-rgpd a.btnAcceptCookies,
.cn-rgpd a.btnDetailsCookies {
	display: block;
	width : 100%;
	margin-bottom : 10px;
	padding: 5px 10px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	outline: none;
}

.cn-rgpd a.btnAcceptCookies {
	background : #000;
	color : #fff!important;
}

.cn-rgpd a.btnDetailsCookies {
	border : 1px solid;
	color : #000!important;
}

.js .no-js {display : none;}

.gammeAccueilResponsive {
	display : none;
}

.gammeAccueilResponsive a{display : block;}


/* commentaires clients */

.ecCommentTitre {display: inline-block; font-weight: bold;}
.ecCommentDate {display: inline-block; color: #999;}
.ecCommentAuteur {margin: 4px 0;}
/*.ecCommentTexte {}*/
.ecCommentTexteLabel {display: none;}

.ecPoll {display: inline-block}
select+.ecPoll {padding-left: 10px; vertical-align: bottom}

.ecPoll-0 {
	width: 37px;
	height: 32px;
	background: transparent url(ecommerce/avis/poll.png) no-repeat;
	float: left;
}

.ecPoll-0 {display: block;}
.ecPoll-1 {background-position: 0 -82px;}
.ecPoll-2{background-position: 0 -164px;}



/*********************** responsive  ***************************************/

.article {
	grid-gap: 20px;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 33.33% 20px 1fr;
	grid-template-columns: 33.33% 1fr;
	-ms-grid-rows: auto 20px 1fr;
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"intro photo"
		"descriptif descriptif";
}

.article_photo {
	-ms-grid-row: 1;
	-ms-grid-row-span: 1;
	-ms-grid-column: 2;
	grid-area: photo;
}

.article_intro {
	-ms-grid-row: 1;
	-ms-grid-row-span: 1;
	-ms-grid-column: 1;
	grid-area: intro;
}

.article_descriptif {
	-ms-grid-row: 1;
	-ms-grid-row-span: 1;
	-ms-grid-column: 2;
	grid-area: descriptif;
}
/*
.article_libelle {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
	grid-area: libelle;
}

.article_panier {
	-ms-grid-row: 2;
	-ms-grid-column: 1;
	grid-area: panier;
}
.article_descriptif {
	-ms-grid-row: 4;
	-ms-grid-row-span: 4;
	-ms-grid-column: 1;
	grid-area: descriptif;
}
.article_resume {
	-ms-grid-row: 3;
	-ms-grid-row-span: 3;
	-ms-grid-column: 1;
	grid-area: resume;
}
*/

/* Common styles of menus */

.dl-navdeploy {overflow : hidden;}

/*.dl-menu-resp {
	position: absolute;
	right : 0;
	top : 0;
	z-index : 500;
}*/

.dl-submenu {
	height: calc(100vh - 46px);
}
/*scrool bar chrome */
.dl-submenu { overflow: hidden; }
.dl-subviewopen > .dl-submenu { overflow: auto; }


.dl-menuwrapper {
	width: 100%;
	float: left;
	position: relative;
	z-index : 500;
	-webkit-perspective: 1000px;
	perspective: 1000px;
	-webkit-perspective-origin: 50% 200%;
	perspective-origin: 50% 200%;
}

.dl-menuwrapper:first-child {
	margin-right: 100px;
}

.dl-menuwrapper button {
	background: var(--noir);
	border: none;
	position: relative;
	cursor: pointer;
	/*width: 46px;*/
	height: 46px;
	padding : 0px 10px 5px 45px;
	font-size : 150%;
	z-index : 300;
	outline: none;
	font-family: 'Lato', sans-serif;

}


.dl-menuwrapper button span{
	text-transform: uppercase;
	font-size : 45%;
	font-weight: 300;
}
.dl-menuwrapper button::after {
	position: absolute;
	left : 10px;
	top: 0;
	line-height: 50px;
	font-family: 'Font Awesome 5 Free';
	speak: none;
	content: "\f0c9";
	font-weight : bold;
}


.dl-menuwrapper button.dl-active::after {
	content: "\f00d"; font-size : 75%; padding-left : 10px;}


.dl-menuwrapper button:hover,
.dl-menuwrapper button.dl-active,
.dl-menuwrapper ul {
	background: #aaa;
}


.dl-menuwrapper ul {
	padding: 0;
	list-style: none;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.dl-menuwrapper li {
	position: relative;
}

.dl-menuwrapper li a {
	display: block;
	position: relative;
	padding: 15px 20px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	font-weight:300;
	font-size : 90%;
	color: #fff;
	text-transform: uppercase;
	font-family: 'Lato', sans-serif;
	outline: none;
}

.no-touch .dl-menuwrapper li a:hover {
	background: rgba(255,248,213,0.1);
}

.dl-menuwrapper li.dl-back > a {
	padding-left: 30px;
	background: rgba(0,0,0,0.1);
	font-weight: 900;
}

.dl-menuwrapper li.dl-back:after,
.dl-menuwrapper li > a:not(:only-child):after {
	position: absolute;
	top: 0;
	line-height: 50px;
	font-family: 'Font Awesome 5 Free';
	speak: none;
	-webkit-font-smoothing: antialiased;
	content: "\f0da";
	font-weight : bold;
}

.dl-menuwrapper li.dl-back:after {
	left: 10px;
	color: rgba(255,255,255,0.8);
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

.dl-menuwrapper li > a:after {
	right: 10px;
	color: rgba(255,255,255,0.8);
}

.dl-menuwrapper .dl-menu {
	/*margin: 5px 0 0 0;*/
	position: absolute;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.dl-menuwrapper .dl-menu.dl-menu-toggle {
	transition: all 0.3s ease;
}

.dl-menuwrapper .dl-menu.dl-menuopen {
	opacity: 1;
	pointer-events: auto;
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
	height: calc(100vh - 46px);
	overflow: scroll;
}

/* Hide the inner submenus */
.dl-menuwrapper li .dl-submenu {
	display: none;
}

/* 
When a submenu is openend, we will hide all li siblings.
For that we give a class to the parent menu called "dl-subview".
We also hide the submenu link. 
The opened submenu will get the class "dl-subviewopen".
All this is done for any sub-level being entered.
*/
.dl-menu.dl-subview li,
.dl-menu.dl-subview li.dl-subviewopen > a,
.dl-menu.dl-subview li.dl-subview > a {
	display: none;
}

.dl-menu.dl-subview li.dl-subview,
.dl-menu.dl-subview li.dl-subview .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
	display: block;
}

/* Dynamically added submenu outside of the menu context */
.dl-menuwrapper > .dl-submenu {
	position: absolute;
	width: 100%;
	top: 50px;
	left: 0;
	margin: 0;
}

/* Animation classes for moving out and in */

.dl-menu.dl-animate-out-1 {
	-webkit-animation: MenuAnimOut1 0.4s;
	animation: MenuAnimOut1 0.4s;
}

.dl-menu.dl-animate-out-2 {
	-webkit-animation: MenuAnimOut2 0.3s ease-in-out;
	animation: MenuAnimOut2 0.3s ease-in-out;
}

.dl-menu.dl-animate-out-3 {
	-webkit-animation: MenuAnimOut3 0.4s ease;
	animation: MenuAnimOut3 0.4s ease;
}

.dl-menu.dl-animate-out-4 {
	-webkit-animation: MenuAnimOut4 0.4s ease;
	animation: MenuAnimOut4 0.4s ease;
}

.dl-menu.dl-animate-out-5 {
	-webkit-animation: MenuAnimOut5 0.4s ease;
	animation: MenuAnimOut5 0.4s ease;
}

@-webkit-keyframes MenuAnimOut1 {
	0% { }
	50% {
		-webkit-transform: translateZ(-250px) rotateY(30deg);
	}
	75% {
		-webkit-transform: translateZ(-372.5px) rotateY(15deg);
		opacity: .5;
	}
	100% {
		-webkit-transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
}

@-webkit-keyframes MenuAnimOut2 {
	0% { }
	100% {
		-webkit-transform: translateX(-100%);
		opacity: 0;
	}
}

@-webkit-keyframes MenuAnimOut3 {
	0% { }
	100% {
		-webkit-transform: translateZ(300px);
		opacity: 0;
	}
}

@-webkit-keyframes MenuAnimOut4 {
	0% { }
	100% {
		-webkit-transform: translateZ(-300px);
		opacity: 0;
	}
}

@-webkit-keyframes MenuAnimOut5 {
	0% { }
	100% {
		-webkit-transform: translateY(40%);
		opacity: 0;
	}
}

@keyframes MenuAnimOut1 {
	0% { }
	50% {
		-webkit-transform: translateZ(-250px) rotateY(30deg);
		transform: translateZ(-250px) rotateY(30deg);
	}
	75% {
		-webkit-transform: translateZ(-372.5px) rotateY(15deg);
		transform: translateZ(-372.5px) rotateY(15deg);
		opacity: .5;
	}
	100% {
		-webkit-transform: translateZ(-500px) rotateY(0deg);
		transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
}

@keyframes MenuAnimOut2 {
	0% { }
	100% {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
		opacity: 0;
	}
}

@keyframes MenuAnimOut3 {
	0% { }
	100% {
		-webkit-transform: translateZ(300px);
		transform: translateZ(300px);
		opacity: 0;
	}
}

@keyframes MenuAnimOut4 {
	0% { }
	100% {
		-webkit-transform: translateZ(-300px);
		transform: translateZ(-300px);
		opacity: 0;
	}
}

@keyframes MenuAnimOut5 {
	0% { }
	100% {
		-webkit-transform: translateY(40%);
		transform: translateY(40%);
		opacity: 0;
	}
}

.dl-menu.dl-animate-in-1 {
	-webkit-animation: MenuAnimIn1 0.3s;
	animation: MenuAnimIn1 0.3s;
}

.dl-menu.dl-animate-in-2 {
	-webkit-animation: MenuAnimIn2 0.3s ease-in-out;
	animation: MenuAnimIn2 0.3s ease-in-out;
}

.dl-menu.dl-animate-in-3 {
	-webkit-animation: MenuAnimIn3 0.4s ease;
	animation: MenuAnimIn3 0.4s ease;
}

.dl-menu.dl-animate-in-4 {
	-webkit-animation: MenuAnimIn4 0.4s ease;
	animation: MenuAnimIn4 0.4s ease;
}

.dl-menu.dl-animate-in-5 {
	-webkit-animation: MenuAnimIn5 0.4s ease;
	animation: MenuAnimIn5 0.4s ease;
}

@-webkit-keyframes MenuAnimIn1 {
	0% {
		-webkit-transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
	20% {
		-webkit-transform: translateZ(-250px) rotateY(30deg);
		opacity: 0.5;
	}
	100% {
		-webkit-transform: translateZ(0px) rotateY(0deg);
		opacity: 1;
	}
}

@-webkit-keyframes MenuAnimIn2 {
	0% {
		-webkit-transform: translateX(-100%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0px);
		opacity: 1;
	}
}

@-webkit-keyframes MenuAnimIn3 {
	0% {
		-webkit-transform: translateZ(300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
}

@-webkit-keyframes MenuAnimIn4 {
	0% {
		-webkit-transform: translateZ(-300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
}

@-webkit-keyframes MenuAnimIn5 {
	0% {
		-webkit-transform: translateY(40%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		opacity: 1;
	}
}

@keyframes MenuAnimIn1 {
	0% {
		-webkit-transform: translateZ(-500px) rotateY(0deg);
		transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
	20% {
		-webkit-transform: translateZ(-250px) rotateY(30deg);
		transform: translateZ(-250px) rotateY(30deg);
		opacity: 0.5;
	}
	100% {
		-webkit-transform: translateZ(0px) rotateY(0deg);
		transform: translateZ(0px) rotateY(0deg);
		opacity: 1;
	}
}

@keyframes MenuAnimIn2 {
	0% {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
		opacity: 1;
	}
}

@keyframes MenuAnimIn3 {
	0% {
		-webkit-transform: translateZ(300px);
		transform: translateZ(300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		transform: translateZ(0px);
		opacity: 1;
	}
}

@keyframes MenuAnimIn4 {
	0% {
		-webkit-transform: translateZ(-300px);
		transform: translateZ(-300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		transform: translateZ(0px);
		opacity: 1;
	}
}

@keyframes MenuAnimIn5 {
	0% {
		-webkit-transform: translateY(40%);
		transform: translateY(40%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-1 {
	-webkit-animation: SubMenuAnimIn1 0.4s ease;
	animation: SubMenuAnimIn1 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-2 {
	-webkit-animation: SubMenuAnimIn2 0.3s ease-in-out;
	animation: SubMenuAnimIn2 0.3s ease-in-out;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-3 {
	-webkit-animation: SubMenuAnimIn3 0.4s ease;
	animation: SubMenuAnimIn3 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-4 {
	-webkit-animation: SubMenuAnimIn4 0.4s ease;
	animation: SubMenuAnimIn4 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-5 {
	-webkit-animation: SubMenuAnimIn5 0.4s ease;
	animation: SubMenuAnimIn5 0.4s ease;
}

@-webkit-keyframes SubMenuAnimIn1 {
	0% {
		-webkit-transform: translateX(50%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0px);
		opacity: 1;
	}
}

@-webkit-keyframes SubMenuAnimIn2 {
	0% {
		-webkit-transform: translateX(100%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0px);
		opacity: 1;
	}
}

@-webkit-keyframes SubMenuAnimIn3 {
	0% {
		-webkit-transform: translateZ(-300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
}

@-webkit-keyframes SubMenuAnimIn4 {
	0% {
		-webkit-transform: translateZ(300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
}

@-webkit-keyframes SubMenuAnimIn5 {
	0% {
		-webkit-transform: translateZ(-200px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0);
		opacity: 1;
	}
}

@keyframes SubMenuAnimIn1 {
	0% {
		-webkit-transform: translateX(50%);
		transform: translateX(50%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
		opacity: 1;
	}
}

@keyframes SubMenuAnimIn2 {
	0% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
		opacity: 1;
	}
}

@keyframes SubMenuAnimIn3 {
	0% {
		-webkit-transform: translateZ(-300px);
		transform: translateZ(-300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		transform: translateZ(0px);
		opacity: 1;
	}
}

@keyframes SubMenuAnimIn4 {
	0% {
		-webkit-transform: translateZ(300px);
		transform: translateZ(300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		transform: translateZ(0px);
		opacity: 1;
	}
}

@keyframes SubMenuAnimIn5 {
	0% {
		-webkit-transform: translateZ(-200px);
		transform: translateZ(-200px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		opacity: 1;
	}
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-1 {
	-webkit-animation: SubMenuAnimOut1 0.4s ease;
	animation: SubMenuAnimOut1 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-2 {
	-webkit-animation: SubMenuAnimOut2 0.3s ease-in-out;
	animation: SubMenuAnimOut2 0.3s ease-in-out;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-3 {
	-webkit-animation: SubMenuAnimOut3 0.4s ease;
	animation: SubMenuAnimOut3 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-4 {
	-webkit-animation: SubMenuAnimOut4 0.4s ease;
	animation: SubMenuAnimOut4 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-5 {
	-webkit-animation: SubMenuAnimOut5 0.4s ease;
	animation: SubMenuAnimOut5 0.4s ease;
}

@-webkit-keyframes SubMenuAnimOut1 {
	0% {
		-webkit-transform: translateX(0%);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateX(50%);
		opacity: 0;
	}
}

@-webkit-keyframes SubMenuAnimOut2 {
	0% {
		-webkit-transform: translateX(0%);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateX(100%);
		opacity: 0;
	}
}

@-webkit-keyframes SubMenuAnimOut3 {
	0% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateZ(-300px);
		opacity: 0;
	}
}

@-webkit-keyframes SubMenuAnimOut4 {
	0% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateZ(300px);
		opacity: 0;
	}
}

@-webkit-keyframes SubMenuAnimOut5 {
	0% {
		-webkit-transform: translateZ(0);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateZ(-200px);
		opacity: 0;
	}
}

@keyframes SubMenuAnimOut1 {
	0% {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateX(50%);
		transform: translateX(50%);
		opacity: 0;
	}
}

@keyframes SubMenuAnimOut2 {
	0% {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
		opacity: 0;
	}
}

@keyframes SubMenuAnimOut3 {
	0% {
		-webkit-transform: translateZ(0px);
		transform: translateZ(0px);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateZ(-300px);
		transform: translateZ(-300px);
		opacity: 0;
	}
}

@keyframes SubMenuAnimOut4 {
	0% {
		-webkit-transform: translateZ(0px);
		transform: translateZ(0px);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateZ(300px);
		transform: translateZ(300px);
		opacity: 0;
	}
}

@keyframes SubMenuAnimOut5 {
	0% {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateZ(-200px);
		transform: translateZ(-200px);
		opacity: 0;
	}
}

/* No JS Fallback */
.no-js .dl-menuwrapper .dl-menu {
	position: relative;
	opacity: 1;
	-webkit-transform: none;
	transform: none;
}

.no-js .dl-menuwrapper li .dl-submenu {
	display: block;
}

.no-js .dl-menuwrapper li.dl-back {
	display: none;
}

.no-js .dl-menuwrapper li > a:not(:only-child) {
	background: rgba(0,0,0,0.1);
}

.no-js .dl-menuwrapper li > a:not(:only-child):after {
	content: '';
}

/* Colors for demos */

/* Demo 1 */
.demo-1 .dl-menuwrapper button {
	background: var(--noir);
}

.demo-1 .dl-menuwrapper button:hover,
.demo-1 .dl-menuwrapper button.dl-active,
.demo-1 .dl-menuwrapper ul {
	background: var(--noir);
}


@media all and (min-width: 1280px) {
	/**** accueil ****/
	.bg_v_fond {
		background: transparent url(/style/accueil/v-vinsio.jpg) no-repeat left center;
	}
}


@media all and (max-width: 1280px) {
	#top h1 {display : none;}
	.leLogo h1{max-width : 300px;}
}

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

	#top, .nav-caddie  {display : none;}

	h1 {margin-bottom : 0;}
	nav.bg_blanc {display : none;}

	#logo {width : 25%;}
	#logo .img_100 {margin : 10px 0 0 10px; max-width : 85px;	}
	header h1 {font-size: 95%; width : 75%; margin : 0;  padding: 10px 10px 0 10px}
	header h1 i{font-size: 80%;}

	.headerMobile {display : block;}

	 .nav-caddie {display: block;}

	.footerMenu .nav-caddie .ico::before{color : var(--noir);}

	#headerMobile {position: fixed; top : 0; width: 100%; background: var(--noir);  height : 46px; z-index : 500; display: block; }

	#headerMobile .nav-caddie {
		float : none;
		width : 100%;
		padding-top : 7px;
		top: 0;
		right: 0;
		position: static;
	}
	#headerMobile .nav-caddie li{vertical-align: middle;}
	#headerMobile .nav-caddie a{ z-index : 550; position : relative;}

	header.section {
		padding-top : 40px;
		padding-bottom : 0;
	}

	.dl-menu-resp {
		display: block;
	}
	.box1-3-content {max-width: none}
	.box2-3-content {max-width: none}
	
}

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

	.flex1-4.unProduit {width : 50%;}
	.flex1-3.rubriqueAccueil {width : 50%;}
	.flex1-4.blocRubrique {width : 100%;}
	.blocRubrique .bg_noir {background-size : cover;}
	.cacheMobile {display : none;}

	
	
}

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

	#slider::after {
		display: none;
	}
	
	#articlePopupPanier img {display: none}
	
	.sliderArticle .flex_center_center {align-items: initial;}
	.sliderArticle .ecArticleDescCourt {
		height: 180px;
		padding-bottom: 40px;
		overflow: hidden;
		overflow:hidden;
	    text-overflow: ellipsis;
	    position:relative;
	}
	.sliderArticle .ecArticleDescCourt:before {
		content:'';
    width:100%;
    height:100%;    
    position:absolute;
    left:0;
    top:0;
    background:linear-gradient(transparent 120px, white);
		
	}
	
	.sliderArticle .ecArticleDescLong {display: none}
	.rondFondScale img {max-height: 300px;}
	
	.lsPrev.lsOutside,
	.lsNext.lsOutside {
		transform:none
	}
	
	.btn_suite.cacheMobile, nav.bg_blanc {display : none;}

	.xf .footer input.ecFormInputSubmit[type="submit"],  input.ecFormInputSubmit[type="submit"] , #caddie-popup .ecFormInputSubmit {font-size : 120%;}

	.ecArticleVignette {
		max-height: 250px;
		min-height: inherit;
	}

	.ecArticleVignette .img_100 { max-height : 250px;}


	.titreDescPlusArticle {padding : 20px;}
	.titreDescPlusArticle h1.align_right {text-align: left; margin-bottom : 0;}
	.popup-gallery  {margin-bottom : 10px;}
	.popup-gallery  .img_100{max-height : 250px;}
	.ecArticleAvis {
		display : none;
	}


	/*.page {padding : 0;}*/
	
	.col1-2, .col1-3, .col2-3, .col1-4  , .col3-4  {float : none; width : 100%; }
	.col1-3.borderRight {
		border-right: none;
		border-bottom: 1px solid;
	}
	.col1-3.paddingLR {
		padding: 30px 0;
	}

	.flex1-2, .flex1-3, .flex2-3, .flex1-4  , .flex3-4  {width : 100%;}

	.flex1-3.rubriqueAccueil {width : 100%;}

	#rassurance .col1-4 {
		float : left;
		width : 50%;
	}

	/** panier **/
	.nav-etape {display : none; }

	.table-total, .cadd-section .table-total  {width : 100%; }

	.table-total .item-row .cadd-qte { width:33.33%; margin-top : 10px;}
	.table-total .item-row .cadd-total { width:33.33%; margin-top : 10px;}
	.table-total .item-row .cadd-autre { width:33.33%; margin-top : 10px;}
	.table-total .item-cell {border : none; padding : 2px 5px;}
	.table-total  .item-row { border-bottom: none; border-top: 1px solid #e8e8e8; padding : 2px 5px;}

	.table-total .ecLabelCell, .table-total .ecTotalCell,
	.cadd-section .table-total .ecLabelCell  {width : 50%;}
	.table-total  { border-top: 1px solid #e8e8e8;}
	.table_avantages  {  border-top: none;}
	.table-total  .item-row:first-child { border-top: none; }
	.table-total .item-row {padding : 2px 0;}
	.table-total .ecTotalCell {text-align : right;}

	.ecCaddieSection .ecCaddieSectionLivraison {margin-bottom : 15px; border-right : none; border-bottom : 10px solid #fff;}
	.ecCaddieSection .ecCaddieSectionLivraison, 	.ecCaddieSection .ecCaddieSectionExpedition,
	.ecCaddieSection .ecCaddieSectionLivraison .ecCaddieSectionLivraisonAdresse, .ecCaddieSection .ecCaddieSectionLivraison .ecCaddieSectionLivraisonMode  {
		float: none; width: 100%;   max-width: 100%;
	}

	.ecCaddieSection .ecCaddieSectionLivraison .ecCaddieSectionContent {margin-right : 0;}
	.ecCaddieSection .ecCaddieSectionLivraison .ecCaddieSectionLivraisonAdresse {border : none; margin : 0; }

	.ecCaddieSection .ecCaddieSectionLivraison .ecCaddieSectionLivraisonMode  {border-top: 1px solid #e8e8e8; padding : 5px 0; margin-top : 5px;}

	.ecCodeAvantageInfo {width : 100%; float : none;}
	.recommandation-panier {
		text-align: left;
	}

	#cadd-commander, a.ecmPoursuivreAchat, a.ecmRetourAccueil {float : none;  width: 100%; padding : 10px 5px;}
	.ecFormInputSubmit, a.ecmPoursuivreAchat,  a.ecmRetourAccueil {width : 100%; box-sizing : border-box; display : block; }

	#cadd-continuer, .footer .btn_suite, #caddie-popup a.btn_suite {
		float: none;
		display: block;
		text-align : center;
		width: 100%;
		margin: 10px 0 0;
		font-size: 80%;
	}
	.ecFormInputSubmit {text-align:center}
	.table-total .ecCodeAvantage .ecLabelCell {width : 100%;}
	.table-total .ecCodeAvantage .item-cell  {width : 100%;}

	#caddie-popup a.ecTerminerAchat, #caddie-popup a.ecmPoursuivreAchat {float : none; width : 100%; box-sizing : border-box;  display: block;}
	#caddie-popup a.ecTerminerAchat {text-align : right;}

	a.ecmRetourAccueil, a.ecmPoursuivreAchat, a.ecTerminerAchat { margin-top : 20px;}
	a.lire_la_suite, a.ecmPoursuivreAchat, a.ecmRetourAccueil {
		padding : 5px;
	}

	.ecFormInputSubmit, .ecTerminerAchat {padding : 5px 10px;}


	.commandes .item-header{display : none;}
	.commandes,
	.commandes .item-row,
	.commandes .item-thead,
	.commandes .item-cell,
	.commandes .item-footer {display :block; box-sizing : border-box; float : none; width : 100%;}

	.commandes  .item-row {
		
		padding: 10px 0;
	}
	
	.commandes .item-row .item-cell.voir {border: none}

	.commandes .item-cell {width : 100%; float : none; border : none; padding : 2px;}
	.commandes .numero_commande:before {font-weight : bold; content : "Commande N\00B0 : "}
	.cn_en.commandes .numero_commande:before {font-weight : bold; content : "Order N\00B0 : "}
	.cn_de.commandes .numero_commande:before {font-weight : bold; content : "Bestellung N\00B0 : "}
	.commandes .date_commande:before {font-weight : bold;  content : "Date : "}
	.cn_en.commandes .date_commande:before {font-weight : bold;  content : "Date : "}
	.cn_de.commandes .date_commande:before {font-weight : bold;  content : "Datum : "}
	.commandes .montant:before {font-weight : bold;  content : "Montant : "}
	.cn_en.commandes .montant:before {font-weight : bold;  content : "Amount : "}
	.cn_de.commandes .montant:before {font-weight : bold;  content : "Betrag : "}
	.commandes .statut:before {font-weight : bold;  content : "Statut : "}
	.cn_en.commandes .statut:before {font-weight : bold;  content : "Status : "}
	.cn_de.commandes .statut:before {font-weight : bold;  content : "Status : "}

	.ecCaddieValide, .ecCaddieCommentaire {display : block; width : 100%;}
	.ecCaddieValide {
		margin-top : 15px;
		padding-left: 0;
		text-align: left; }

	.ecModeExpedition-tarif, .ecModeExpedition-entete  {float : none; width : 100%;}
	.ecModeExpedition-tarif {font-size : 120%;}
	.ecPointsRetrait-carte #map {display : none;}
	.ecPointRetrait-carte {display: block;}
	.ecPointsRetrait-liste, .ecPointsRetrait-carte, .ecExpeditionOption-choix { float : none; width : 100%; }
	.ecPointsRetrait-liste, .ecPointsRetrait-carte, .ecPointsRetrait-table {display : block;}

	.ecPointsRetrait-liste .ecListe {
		position: relative;
		height: auto;
		overflow-y: inherit;
	}
	.ecPointsRetrait-carte {padding-left : 0;}

	.cn_phone .ecPointsRetrait-carte #map{display : none;}

}

@media all and (max-width: 550px) {
	
	.padding{padding: 30px 0;}
	
	.box1-3,
	.box2-3 {
		width: 100%;
	}

	.flex1-4.unProduit {width : 100%;}
	.flex1-3.rubriqueAccueil {width : 100%;}
	.unProduit {text-align : center; margin-bottom : 30px;}
	.unProduit .flex1-2{
		justify-content: center;
		align-items: center;
	}
	
	/** panier **/
	#item-table-intro {display : none;}

	.item-table,
	.ecTableRow ,
	.ecTableCell,
	.item-header,
	.item-row,
	.item-thead, .item-cell {display :block; box-sizing : border-box; float : left;}

	.cadd-recap .item-row .cadd-ref  { width:20%; }
	.cadd-recap .item-row .cadd-libelle { width:80%; }
	/*.cadd-recap .item-row .cadd-libelle2 { width:30%; }*/

	#cadd-art .item-cell {display :block; box-sizing : border-box; float : none; width : 100%; margin : 0;}

	#cadd-art  .item-row .cadd-ref  {display : none; }
	.item-row .cadd-libelle,
	.item-row .cadd-libelle2,
	.item-row .cadd-pu,
	.item-row .cadd-qte,
	.item-row .cadd-total
	{ width : 100%;}
	#cadd-art .item-row .cadd-total {font-weight : bold; text-align: right;font-size : 1.4em; }
	#cadd-art .item-row .cadd-total:after  {content : ' €';}
	#cadd-art .item-row .cadd-libelle {font-size : 1.1em; padding-right: 25px;}
	.item-row {position : relative; }

	#cadd-art .item-row .cadd-pu:before { content:"Prix unitaire : ";}
	.cn_en #cadd-art .item-row .cadd-pu:before { content:"Unit price : ";}
	.cn_de  #cadd-art .item-row .cadd-pu:before { content:"Einheitspreis : ";}
	#cadd-art .offre .cadd-pu:before, #cadd-art .offre .cadd-pu { display : none;}
	#cadd-art  .item-row .cadd-qte:before { content:"Quantité : ";}
	.cn_en  #cadd-art  .item-row .cadd-qte:before { content:"Quantity : ";}
	.cn_de #cadd-art  .item-row .cadd-qte:before { content:"Menge : ";}
	#cadd-art  .offre .cadd-qte:before, #cadd-art  .offre .cadd-qte{ display : none;}
	/*	.item-row .cadd-total:before { content:"Total : ";}*/


	.cadd-recap .item-row .cadd-qte, .cadd-valid .item-row .cadd-qte,
	.cadd-recap .item-row .cadd-total, .cadd-valid .item-row .cadd-total,
	.cadd-recap .item-row .cadd-pu, .cadd-valid .item-row .cadd-pu { width:33.33%; margin-top : 10px;}

	/*.item-row .cadd-total { width:35%; margin-top : 10px;}*/

	#cadd-art .item-row .cadd-autre { position : absolute; top : 10px; right : 0; width: 15px; padding : 0;}
	#cadd-art .item-row .cadd-autre  	a{margin-right : 0; }

	.item-header {display : none;}
	.item-row {padding : 10px 0; width : 100%;}
	#cadd-art .item-thead, #cadd-art .item-cell {border : none; padding : 2px 5px;}

	.ecArticleQuantite { height : 24px; width : 24px; margin-left : 15px;}


	#cadd-form .ecFormInputSubmit { margin-top : 15px;}


	.ecCaddieCommentaire {
		width: 100%;
	}

	a.ecmRetourAccueil, a.ecmPoursuivreAchat, a.ecTerminerAchat { margin-top : 20px;}

	.commandes .statut {
		clear : left;
	}

	#cadd-art .item-cell { text-align: left;}
	.commandes .item-cell {width : 100%; float : none; border : none; padding : 2px;}
	.commandes .numero_commande:before {font-weight : bold; content : "Commande N\00B0 : "}
	.cn_en.commandes .numero_commande:before {font-weight : bold; content : "Order N\00B0 : "}
	.cn_de.commandes .numero_commande:before {font-weight : bold; content : "Bestellung N\00B0 : "}
	.commandes .date_commande:before {font-weight : bold;  content : "Date : "}
	.cn_en.commandes .date_commande:before {font-weight : bold;  content : "Date : "}
	.cn_de.commandes .date_commande:before {font-weight : bold;  content : "Datum : "}
	.commandes .montant:before {font-weight : bold;  content : "Montant : "}
	.cn_en.commandes .montant:before {font-weight : bold;  content : "Amount : "}
	.cn_de.commandes .montant:before {font-weight : bold;  content : "Betrag : "}
	.commandes .statut:before {font-weight : bold;  content : "Statut : "}
	.cn_en.commandes .statut:before {font-weight : bold;  content : "Status : "}
	.cn_de.commandes .statut:before {font-weight : bold;  content : "Status : "}

	.table-total .item-total-regler big{font-size : 150%;}
	/*.table-total-recap   {border-collapse : collapse;}
    .table-total-recap  .item-cell{ border-left : 1px solid #e8e8e8; border-bottom : 1px solid #e8e8e8;  padding : 5px 5px; }
    .table-total-recap  .ecTotalCell{ border-right : 1px solid #e8e8e8;  }
    .table-total-recap  .item-cell{ border-left : 1px solid #e8e8e8; padding : 10px 5px }
    .table-total-recap .item-row { border : none; padding : 0; }
    */

	.ecCaddieValide {padding-left : 0; text-align : left;}
	.ecLabelCell .align_right {text-align : left;}
	.ecModePaiement {border : none;}
	.article {
		
		grid-gap: 20px;
		display: block;
		height: 100%;
		grid-template-columns: 25% 1fr 25%;
		grid-template-rows: auto 1fr auto;
		grid-template-areas:
		"photo libelle panier"
		"photo descriptif rassurance"
		"photo descriptif rassurance";
	}
	
	
		
}

/* planning */
/*div.planning {}*/

div.planning select {
	width: 100%;
	display: block;
}

/* body (wrapper) */
.cnBodyWrapper {
	position: relative;
}

/* overlay */
body.is--masked {
	width: 100%;
	height: 100vh;
	position: fixed;
	overflow-y: scroll;
	overflow-x: hidden;
}

body.is--masked::before {
	content: '';
	position: fixed;
	z-index: 800;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: .8;
	background-color: #1a1919;
	pointer-events: all;
	transition: all 0.4s ease-in-out;
}

/** mini panier **/

.ecPanierMini {
	position : absolute;
	z-index : 900;
	top : 0;
	right : -100%;
	width: 100%;
	max-width : 520px;
	height : 100%;
	padding : 0;
	color : #000;
	background: #fff;
	transition: all 0.4s ease-in-out;
}

.ecPanierMini.is--opened {right : 0;}

.ecPanierMini-content {
	position: relative;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* flex children */
.ecPanierMini-main {
	display: flex;
	flex: 1;
	min-height: 0;/* important, for non-chrome browsers */
}

.ecPanierMini-footer {
	height: 150px;
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
	text-transform: uppercase;
	font-weight: 300;
	background : #d7cdbc;
}

/* main wrapper (for overflowed content) */
.ecPanierMini-mainWrapper {
	flex: 1;
	overflow: auto;
}

/* main:header */
.ecPanierMini-header {
	padding: 20px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	font-size : 180%;
	font-weight: 300;
	text-transform: uppercase;
}

.ecPanierMini-titre {flex-grow: 2;}
a.ecPanierMini-close:link, a.ecPanierMini-close:visited {color : #000;}

/* main:info & detail */

.ecPanierMini-info, .ecPanierMini-detail {padding: 20px;}

.ecPanierMini-article {
	display: flex;
	flex-wrap: nowrap;
	border-bottom : 1px solid #d5d3d2;
}

.ecPanierMini-articleVisuel, .ecPanierMini-articleTarif {
	width: 25%;
	padding: 20px;
	text-align: center;
}

.ecPanierMini-articleLien:link,
.ecPanierMini-articleLien:visited {
	color : #000;
	text-decoration: none;
}

.ecPanierMini-articlePhoto {
	line-height : 1;
	width : auto;
	max-width : 100%;
	max-height: 120px;
}

.ecPanierMini-articleDetail {
	width: 50%;
	padding: 20px;
}

.ecPanierMini-articleLibelle,
.ecPanierMini-articleConfig {display: block}

.ecPanierMini-articleConfig {font-size: 80%}

.ecPanierMini-articleQuantite {
	display: flex;
	font-size: 80%
}

.ecPanierMini-articleQuantite button {
	border: none;
	width: 25px;
	height: 25px;
	background: #f6f5f4;
	color: black;
}

.ecPanierMini-articleQuantite input {
	width: 40px;
	border: 1px solid #f6f5f4;
	padding: 2px;
	text-align: center;
}



.ecPanierMini-labelTotal {
	width: 66.66%;
	padding: 20px;
}
.ecPanierMini-montantTotal {
	width: 33.33%;
	padding: 20px;
}
.ecPanierMini-poursuivre, .ecPanierMini-voir {
	width: 50%;
	padding: 20px;
	font-size : 80%;
}

.ecPanierMini-montantTotal, .ecPanierMini-voir {text-align: right}
.ecPanierMini-poursuivre {font-size : 80%;}

/* chargement */
.loader {
	display: flex;
	align-items: center;
}

	.loader--spinner {
		width: 48px;
		height: 48px;
		margin: 0 20px;
		border: 5px solid #FFF;
		border-bottom-color: transparent;
		border-radius: 50%;
		display: inline-block;
		box-sizing: border-box;
		animation: rotation 1s linear infinite;
	}

/* animations */
@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* avantages */

.avantage {
	margin-bottom: 2em;
}

.avantage__banner img {width: 100%}
.avantage__visual img {margin: 0 auto}

.avantage__libelle,
.avantage__information,
.avantage__resume,
.avantage__footer {
	padding: 0.5em 0;
	font-size: 85%;
}

.avantage__libelle {
	padding: 0.5em;
	text-align: center;
	font-size: 100%;
	font-weight: bold;
	background: #e0e0e0;
}

.avantage--code {
	font-weight: bold;
	letter-spacing: .1rem;
}

.avantage__footer {
	display: flex;
	justify-content: space-between;
}

.avantage a.btn--default:link,
.avantage a.btn--default:visited {
	border-width: 2px;
	border-radius: 5px;
	padding: 0.25em;
}

.avantage a.btn--primary:link,
.avantage a.btn--primary:visited {
	border: 2px solid #E46E27;
	border-radius: 5px;
	padding: 0.25em;
	color: #E46E27;
}

.avantage a.btn--primary:focus,
.avantage a.btn--primary:hover {
	background: #E46E27;
	color: white;
}

@media print {
  .no-print {
    display: none !important;
  }
}

.timeline {
	display: flex;
	flex-direction: column;
}

.timeline__text > h2 {
	margin: 1em 0
}

.timeline__text > p {
	margin: 0 0 1.5em 0
}

.timeline__date {
	background: var(--jaune);
	padding: 0.5em 1em;
	font-weight: bold;
}

.timeline__event {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.timeline__event::before,
.timeline__event::after {
	display: block;
	content: '';
	height: 0px;
	width: 0;
	margin: 0 auto;
	position: absolute;
	border-right: 2px solid var(--jaune);
	transition: 0.5s;
}

.timeline__event::before {
	top: 0;
	transform: translateY(-100%);
}
.timeline__event::after {
	top: 48px;
}

.timeline__event.animActive::before,
.timeline__event.animActive::after { height: 40px; }

.timeline__event:nth-child(odd) > .timeline__event::after {
	border-right: 2px solid var(--jaune);
}

.timeline__event:nth-child(even) > .timeline__event::after {
	border-left: 2px solid var(--jaune);
}

.timeline__text { padding: 40px 0; }

@media all and (min-width: 720px) {
	
	.timeline__text {
		width: 50%;
	}

	.timeline__text::before {
		width: 100%;
	}

	.timeline__event > .timeline__text {
		align-self: start;
	}

	.timeline__event:nth-child(even) > .timeline__text {
		align-self: end;
	}
	
	.ecArticleDescCourt {
		border-bottom: 1px solid ;
	}

}

.reseaux_sociaux {
	display: flex;
	gap: 1em;
}

.reseaux_sociaux > div {
	flex-basis: 45%;
}

.reseaux_sociaux ul {
	display: flex;
	gap: 1em;
}

.cmsRubriqueDesc ul {
	list-style-type: disc;
	padding-left: 1em;
}

.targetOffset {
	scroll-margin-top: 115px;
}

.symbol {
	display: inline-block;
	width: 1em;
	height: 1em;
}