/* 
  Allow angular.js to be loaded in body, hiding cloaked elements until 
  templates compile.  The !important is important given that there may be 
  other selectors that are more specific or come later and might alter display.  
 */
 
 /* NEW COLOR #FF6666 */
 
 :root {
    --vert-1: #236C5F;
    --vert-2: #0B3930;
    --vert-3: #AAD1CA;

    --logo-main-1: #F9B284;
    --logo-main-2: #F9A97A;
    --logo-main-3: #EF9573;
    --logo-main-4: #EA8E70;

    --logo-petales-1: #F8BEB4;
    --logo-petales-2: #F39A8F;
    --logo-petales-3: #EE726D;
    --logo-petales-4: #E9454E;

    --flag-blue: #0F70B7;
    --flag-white: #FFFFFF;
    --flag-red: #E9454E;
    
    --produit-generique-width: 480px;
    --produit-generique-width-2: 398px;

    --produit-sousGenerique-width: 336px;
    --produit-sousGenerique-width-2: 295px;

    --produit-image-baseHeight: 356px;
    --produit-image-baseWidth: 192px;
    
    --ratio-vignette-2: 0.829;
    --ratio-vignetteSouGenerique-2: 0.878;
    --ratio-vignettePC: 1;
    --ratio-vignettePrincipale: 1.3;
    --ratio-vignetteMobile: 0.8;
    --ratio-vignetteMobile-2: 0.7;
    --ratio-vignetteSousGenerique: 0.6;

}
 
[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}

html, 
body {
    height: 100%;
}

body > * {
	font-size: 16px; 
	/* 
		Par d�faut, l'h�ritage du font-size standard ne marche pas, peut-�tre en raison du "font-size: 100%;" ci dessous. 
		Pour r�tablir un standard, on force l'h�ritage avec " > * ".
		Valeur standard � 16px / 1rem .
	*/
}
body:has(.filter-mobile-header) {
	overflow: hidden;
}
body:has(.conteneur-catalogue) {
	overflow-y: hidden;
}

html {
  scroll-behavior: smooth;
}

body {
	width:100%;
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-family: 'PT Sans', sans-serif;
}

p {
	font-size:1.2em;
}

input:focus {
	outline:none;
}

ul {
	padding:0;
	margin:0;
}

li {
	list-style: none;
}

#catalogueForm {
	height:100%;	
}

.display-none {
    display: none !important;
}

div.superContainer {
	position : relative;
	min-height: 100%;
	min-width:1000px;
	width:100%;
}

.fa span {
	font-family: Tahoma, Geneva, sans-serif;
	
}
.conteneur{
	height: 100%;
	width: 100%;
	margin:0;
	padding:0;
	padding-bottom: 0;
}

.entete{	
	height: 50px;
	width: 100%;
	background-color: rgb( 95, 53, 119);	
}

ul.nav {
	padding-bottom: 22px;
}

.nav>li>a {
    padding: 10px 0;
}

.dropdown:hover a {
  background-color:#ffffff !important;
}

.nav .open>a, .nav .open>a:focus, .nav .open>a:hover, nav ul li a {
	background-color:#ffffff !important;
}

.dropdown:not(.modeMobile):hover .dropdown-menu {
	display:block;
}

.dropdown-menu {
	position: absolute;
    top: 0; left: -16px;

	text-align:center;
	width:100%;
	background-color: transparent;
	margin-top: 0 !important;
	padding: 40px 0;
	border:none;
	border-radius: 0;
	box-shadow:none;
	min-width: 180px;
}

.dropdown-menu li p:before {
    font-family: "FontAwesome";
    content: "\f105";
    font-size: 13px;
    padding-right: 5px;
    color: var(--vert-1);
}

.navbar-right .dropdown-menu {
    right: 0;
    left: 0;
}

.dropdown-menu ul {
	display: inline-block;
	border:none;
	border-top: 3px solid var(--vert-3);
	border-left: 1px solid #dddddd;
	border-bottom: 1px solid #dddddd;
	border-right: 1px solid #dddddd;
	background-color:#efefef;
	padding: 0 20px;
	
	color: var(--vert-1);
}

.dropdown-menu li {
	display:block;
	text-align: left;
	padding: 10px;
	border:none;
	border-bottom:1px solid #dddddd;
	font-size: 0.8em;
}

.dropdown-menu li:last-child {
	border-bottom:none;
}

.dropdown-menu li span {
	color:#ff6666;
}

.dropdown-menu li:hover {
	background-color: var(--vert-3);
	cursor:pointer;
	color:#ffffff;
}

.dropdown-menu li:hover p:before {
	color:#ffffff;
}

.dropdown-menu p {
	margin-bottom:0;
}

.dropdown-menu:hover {
	display:block;
}

.caret-menu {
	color: #ffffff;
    position: absolute;
    bottom: 1px;
    left: 49%;
}

.nav-second-row {
	background-color:#ffffff;
	padding: 20px 0;
	text-align:center;
	font-weight: bold;
	font-size:1.2em;
}

.title-nav span {
	color:#222222;
	font-size:14px;
	text-decoration:none;
	background-color: #ffffff;
	border-radius: 3px;
	padding: 7px 20px;
	display: inline-block;
    vertical-align: middle;
}

.title-nav:hover span {
	color:#ffffff;
	text-decoration:none;
	background-color: #ff6666;
	border-radius: 3px;
	padding: 7px 20px;
	cursor: pointer;
}

.title-nav:hover span.pill-active-nopointer {
	cursor: default !important;
}


.dropdown-menu:hover + .title-nav span {
	color:#ffffff;
	text-decoration:none;
	background-color: #ff6666 !important;
	border-radius: 3px;
	padding: 7px 20px;
}

.nav-second-row .title-nav a {
	color: #333333;
}

.nav-second-row .title-nav:hover a {
	color: #ffffff;
	text-decoration:none;
}

.zoneRecherche{
	display: inline-block;
	vertical-align: middle;
	width: 100%;
}

.zoneRecherche input {
	font-size:1.2em;
}

.divBtRecherche{
	display: inline-block;
	vertical-align: middle;
	width:50px;
}

.btRecherche{
	height: 50px;
	width:50px;
	border-color: #FF6666;	
	background-color: #FF6666;
	color : #ffffff;
	cursor : pointer;
	border: none;
}

.btRecherche i{
	font-size: 2em;
}

.divMaComExpress{
	display : inline-block;
	vertical-align: middle;
	margin-left: 20px;
}

.divMaComExpress button{
  background-color: #78cc95; /* rgb( 201, 153, 193 ); */
  height: 20px;
  border: none;
  cursor : pointer;
  border-radius: 10px;
}

.divMaComExpress button > span{
  font-size: 12px;
  font-family: Tahoma;
  text-transform: uppercase;
  text-align: center;
}


.nomUtilisateur{
	color: #ff6666;	
	font-size: 14px;
	text-transform: uppercase;
	font-family: Tahoma;
	display: inline-block;
	padding-top: 10px;
}

.deconnection{
	display: inline-block;
	margin-left:10px
}

.deconnection button{
	margin-top: 7px;
	border: 0 none;
	background-color: #ff6666;
	cursor: pointer;
}
.deconnection i{
	color: #ff6666;
	font-size: 2.5em;
	vertical-align: middle;
	cursor: pointer;
}


.divPrixActive{
	display: inline-block;
	float: right;
	cursor: pointer;
	margin-right: 10px;
	margin-top: -3px;
}

.divBtCompte{
	display: inline-block;
	vertical-align: middle;
	float: right;
}

/* .divBtPanier{
	display: inline-block;
	vertical-align: middle;
	white-space: nowrap;
	float: right;
} */

.btEnteteMonCompte{
	border-style: solid;
	border-width: 1px;
	border-color: #ffffff;
	background-color: #ff6666;
	color : #ffffff;
	cursor : pointer;
	padding : 5px 10px 5px 10px;    
    font-family: Tahoma;
	font-size: 14px;
 }

.btEnteteMonCompte span{
	vertical-align: middle;
}

.btEnteteMonCompte i{
	vertical-align: middle; 
	font-size: 1.5em;
}

.btPanier{
	border-radius:50%;
	background-color: #ffffff;
	width: 32px;
 	height: 32px;
 	border: none;
 	cursor : pointer;
 	float : left;
}

.btPanier i{
	font-size: 1.4em;
	color: #ff6666;

}

.menuPrincipal{
	background: #ffffff;
	box-shadow: 0px 3px 12px #aaa;
}

.nav-container { 
	width:100%;
	right:0px;
}

nav {
  position: relative;
  margin-bottom:0px;
  background-color:#ffffff;
}

nav li {
  display: inline-block;
  list-style: none;
}


.sticky {
	background-color: #ffffff;
	position: fixed;
	border-bottom:1px solid #dddddd;
	top: 0px;
	width:100%;
	z-index: 2700; /* Pour etre sur qu'il soit au premier plan*/
}

div.logo{
	height: 80px;
	max-width:260px;
	width: 22.92020373514431%;/*270px*/
	display: inline-block;
}
div.logo img{
	height: 78px;
	width: 85%;
	border : none;
}

div.picto{
/* 	height: 80px; */
	padding: 0 3px 5px 3px;
	display: inline-block;
}
div.picto img{
	height: 30px;
	width: 30px;
	border : none;
	background-color: #bbaac6; /*#DCD4E3;*/
}
div.picto img.selected{
	background-color: #ff6666;
}
div.picto img:HOVER{
	background-color: #9c54a8;
}
div.picto img.pictoLivr{
	width: 100px;
}

div.menuUlWrapper{
	height: 80px;
	display: inline-block;
	vertical-align: top;
	max-width: 540px;
	width:54.15959252971138%;/*638px*/
}
.listeLinksMenu{
	font-family: 'Arial';
  	font-size : 12px;
	text-align: center;
	padding-top: 5px;
	margin-bottom: 0;
}

.divMenuProdFrancaise{
	position: relative;
    display: inline-block;
	vertical-align: top;
	height: 37px;
	max-width:250px;
	width: 22.92020373514431%;/*270px*/
}
.divMenuProdFrancaise button{
	margin-top: 37px;
    border-radius: 10px;
    background-color:  #78cc95; /* #ddd4e2; */
    height: 37px;
    border: none;
    font-size: 12px;
    font-family: Tahoma;
    color: white; /* #ff6666; */
    text-transform: uppercase;
    cursor: pointer;
    float: right;
    width: 215px;
    text-align: left;
    padding-left: 10px;
}

.logoProdFr{
	position: absolute;
    top: 9px;
    right: -21px;
    border-radius: 34px;
    border: #DDD4E2 solid 2px;
    background: white;
    height: 64px;
    width: 64px;
    cursor: pointer;
}

.logoProdFr img {
  /* margin-top: -7px;
  vertical-align: middle; */
  height:60px;
}

.linkMenu{
  	height: 45px;
	margin: 0px 0.67911714770798% 0 0.67911714770798%;/*8px*/
	padding: 0 2.12224108658744% 0 2.12224108658744%;/*25px*/
	background: transparent;
	white-space: nowrap;
    vertical-align: middle;
    border: transparent solid  0.063em;
}

.linkMenu a, .linkMenu span{
	color: #ff6666;
	text-decoration: none;
    display:table-cell;
    height: 45px;
	vertical-align: middle;
	cursor: pointer;
}

.linkMenu a:HOVER, .linkMenu span:HOVER{
	color: #9c54a8;
	text-decoration: none;
}
.linkMenu.selected{
	border-style: solid;
	border-width: 0.063em;
	border-color: rgb( 45, 62, 80 );
	background-color: rgb( 95, 53, 119 );
}


.linkMenu.selected:HOVER{
	background: #9c54a8;
}

.linkMenu.selected a,.linkMenu.selected span{
	color: white;
	text-decoration: none;
}

.contenu{
	max-width: 1480px;
	/* min-width: 1000px; */
	margin:0;
	padding:0;
	margin:0 auto;
}

.contenu-accueil {
	max-width: 1178px;
	/* min-width: 1000px; */
	margin:0;
	padding:0;
	margin:0 auto;
	padding-bottom:100px;
}

.contenu-menu {
	max-width: 1178px;
	/* min-width: 1000px; */
	margin:0;
	padding:0;
	margin:0 auto;
}

div.pagin {
	text-align: right;
	padding-top: 20px;
	padding-bottom: 10px;
	padding:20px;
	font-size: 13px;
	font-family: Tahoma;
	color: #777777;
}
div.pagin span.gauche {
	float: left;
}
div.pagin span.droite {
	float: right;
}
							
.pagination {
	display: inline-block;
	padding-left: 0;
	border-radius: 4px;
	font-family: 'Tahoma';
	margin: auto;
	-webkit-padding-start: 0px;
	height: fit-content;
}
.pagination > li {
  display: inline;
}
.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  text-align:center;
  color: #FFFFFF;
  background-color: #dddddd;
  text-decoration: none;
  border-radius: 1px;
  margin-left: 10px;
  line-height:30px;
  height: 30px;
  width: 30px;
  padding: 0;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  color: #777777;
  cursor: pointer;
  background-color: #dddddd;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 2;
  color: #fff;
  cursor: pointer;
  background-color: var(--vert-1);
  border-color: var(--vert-1);
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
  color: #777;
  cursor: not-allowed;
  border-radius: 1px;
  visibility: hidden;
  display: none;
}
.pagination-lg > li > a,
.pagination-lg > li > span {
  padding: 10px 16px;
  font-size: 18px;
}
.pagination-sm > li > a,
.pagination-sm > li > span {
 	padding: 5px 10px;
  	font-size: 12px;
}

.menuRubrique{
	width: 100%;
	margin-bottom: 65px;
	text-align: center;
}


.menuRubrique .ongletMenuRubrique{
	height: 25px;
	margin: 0 15px 0 0;
	padding: 5px;
	background: #F5F5F5;
	border: #777777 solid 1px;
	border-radius: 2px;
  	display:inline-block;
	vertical-align: top;
	text-align: center;
	color: #777777;
	cursor: pointer;
	text-transform: uppercase;
}

.ongletMenuRubrique:HOVER{
	background: black;
	border: black solid 1px;
	color: #F5F5F5;
}

.menuRubrique .ongletMenuRubrique.selected{
	background: black;
	border: black solid 1px;
	color: #F5F5F5;
}

.menuRubrique .ongletMenuRubrique p{
	text-align: center;
	margin: 4px 10px 5px 10px;	
	font-size: 14px;
	font-family: Tahoma;
}

.cmsFooterSpacer{
	width: 100%;
	height: 80px;
}
.cmsFooter{
	width: 100%;
	height: 400px;
	background: #121212;
}

.footer{
	background-color: #ffffff;
    padding: 15px 0 0;
    color: #777777;
    display: block;
    bottom: 0;
    position: absolute;
    width: 100%;
    height:80px;
    z-index: 10;
}

.footer-catalogue > .footer {
	width: 100%;
}

.pill-active {
	background-color: #ff6666 !important;
	color:#ffffff !important;
}

.texteCopyright{
	color: #777777;
	float: left;
}

.texteCopyright span{
  	position: relative;
  	top: 15px;
  	font-size: 15px;
}

.zoneMenuFooter{
	float : right;
	height: 60px;
}

.listeLinksMenuFooter{
	text-align: center;
}

.linkMenuFooter{
	height: 15px;
	white-space: nowrap;
	display: inline-block;
	padding: 15px 20px 0px 20px;
	cursor: pointer;
}

.linkMenuFooter a{
	color: #c3c3c3;
	text-decoration: none;
	font-size: 15px;
}

.linkMenuFooter a:HOVER{
	color: #ff6666;
	text-decoration: none;
}
.selectedFooter{
	color: #ff6666;
}



button{outline-style:none;}

.tabCatalogueListe{
	/* min-width: 980px; */
	width:100%;
	border-spacing: 0;
	margin:auto; 
}

.tabCatalogueListe .prixBarre{
	font-size: 11px;
	font-family: Arial;
	color: #9D88AA;
	font-weight: bold;
	text-decoration: line-through;
}

.tabCatalogueListe .nouvPrix{
	font-size: 11px;
	font-family: Arial;
	font-weight : bold;
	color: #ff6666;
}

/* .livrOk{
	font-size: 15px;
	font-family: Tahoma;
	color: #777777;
}

.livrNOk{
	font-size: 15px;
	font-family: Tahoma;
	color: #AEA9B1;
} */

.entetePopupInfo{
	height: 30px;
	border-bottom: solid 1px #ff6666;
	width: 100%;
	padding: 5px 0 5px 0;
}

.entetePopupInfo > .divBtClose{
	display: inline-block;
  	float: right;
  	width: 70px;
  	height: 50px;
}

.entetePopupInfo > div {
  margin-left: 10px;
}

.divConteneurIconeSurVignette{
	position: absolute;
	top: 5px;
	height: 25px;
	width: 99%;
}

.divConteneurIconeSurVignette div{
	font-size: 1.3em !important;
	float: right;
	margin-right: 10px;
}

.imagePopUp{
	margin-bottom: -3px;
	max-width: 975px;
 	max-height: 600px;
}

.titreErreurStock{
	font-size: 17px;
	font-family: Tahoma;
	color: #333333;
	margin-left: 20px !important;
}

.texteErreurStock{
	font-size: 15px;
	font-family: Tahoma;
	color: #ff6666;
}

.erreurStockNomProd{
	font-size: 17px;
	font-family: Tahoma;
	color: #FF6666;
}

.divBtCloseErreurStock{
	display: inline-block;
	float: right;
	height: 50px;
}

.addCommandeExpress{
	background-color : #ff6666;
}

.notAddCommandeExpress{
	background-color: #C0AFC6;
}

#fieldAutoComplete{
	border: medium none;
    border-radius: 0;
    height: 50px;
    width: 100%;
    background-color: #eee;
    padding: 0 10px;
}

.left{
	text-align: left !important;
}
.right{
	text-align: right !important;
}

.sensitive {
	cursor : pointer !important;
}

.row {
	margin-right:0 !important;
	margin-left:0 !important;
}

.row-normal {
	margin-right:-15px !important;
	margin-left:-15px !important;
}

.menu-burger {
	display:none;
}
.modeMobile, .modeMobile_block {
	display:none !important;
}
.menu-tuto {
	display:none;
}

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

.menu-desktop-compte {
	display: flex;
}

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 99;
  top: 0;
  right: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-x: hidden;
  transition: 0.2s;
}

.overlay-content {
  position: relative;
  top: 10%;
  width: 100%;
  padding:0 30px;
  text-align: left;
}

.overlay p, .overlay a {
  padding: 8px 0;
  text-decoration: none;
  font-size: 20px;
  color: #ddd;
  display: block;
  transition: 0.3s;
}

.overlay span {
  padding: 5px;
  text-decoration: none;
  font-size: 16px;
  color: #ccc;
}

.overlay p:hover, .overlay p:focus, .overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: -10px;
  right: 25px;
  font-size: 60px;
}

.separator-menu-mobile {
	border-bottom: 1px solid #dddddd;
	margin-top:20px;
}


.overlay-filtres {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  background-color: rgba(255,255,255, 1);
  overflow-x: hidden;
  transition: 0.2s;
}

.overlay-filtres p, .overlay-filtres a {
  padding: 2px;
  text-decoration: none;
  font-size: 16px;
  color: #222222;
  display: block;
  transition: 0.3s;
}

.overlay-filtres span {
  padding: 5px;
  text-decoration: none;
  font-size: 16px;
  color: #222222;
}

.overlay-filtres p:hover, .overlay-filtres p:focus, .overlay-filtres a:hover, .overlay-filtres a:focus {
  color: #444444;
}

.overlay-filtres .closebtn {
  position: absolute;
  right: 30px;
  top: -14px;
  font-size: 60px;
}

.recherche-mobile {
	display:none;
}

.zone-recherche-container{
	display:flex;
	padding-top:24px;
	width:100%;
} 

.sous-familles, .sous-familles option {
	width: 100%;
}

.sous-familles {
	height: 20px;
}

.qte-commande {
	position: absolute;
    background-color: #ff6666;
    padding: 10px;
    color: #ffffff;
}

.nav-tabs > li {
    margin-bottom: 0;
}

.nav-tabs > li > a {
	padding:10px 30px;
	color:#666666;
    border: none;
    border-radius: 0;
}

.nav-tabs > li > a:hover {
    border-color: #ff6666;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    color: #ffffff;
    padding:10px 30px;
    cursor: default;
    background-color: #ff6666;
    border: none;
    border-bottom: #ff6666;
}

ul.nav {
    padding-bottom: 0px;
}

.nav-tabs {
    border-bottom: 1px solid #ff6666;
    margin-bottom:5px;
}

.modal-header {
    padding: 0;
    border-bottom:none;
}

.modal-header button {
    padding-top: 10px;
    padding-right:15px;
}

.modal-body {
    position: relative;
    padding: 10px;
    padding-top:0;
    min-height:250px;
}

a.anchor {
	display: block;
	position: relative;
	top: -200px;
    visibility: hidden;
}

.div-btn-tuto {
	width:100%;
	margin: 0 0 10px 0;
}

.btn-tuto {
	display: inline-block;
	background-color: #ff6666;
	border:none;
	text-align: center;
	margin-top:10px;
	padding: 10px;
	width: 100%;
	cursor: pointer;
	color: #FFFFFF;
	font-size: 14px;
}

.btn-commander {
	background-color: transparent;
    border: none;
}

.btn-commander:hover {
	cursor:pointer;
}

.btn-commander p {
	color:#ffffff;
	font-size: 14px;
	font-weight:bold;
	line-height:40px;
	margin:0;
	padding-left: 65px;
}

.dropdown-commander {
	background-color:#ffffff;
	padding: 0;
    border: 4px solid #eee;
}

.dropdown-commander li {
    border-right: 1px solid #ffffff;
}

.dropdown-commander li p:before {
    display:none;
}

.dropdown-commander li:hover {
    cursor:default;
    background-color: #ffffff;
    color: #333;
}

.dropdown-commander .midi {
    color:#33bb50;
    font-weight:bold;
}
.dropdown-commander .prod {
    color:#33bb50;
    font-weight:bold;
}
.dropdown-commander .stock-title {
    color:#ff6666;
    font-weight:bold;
}
.dropdown-commander .depart {
    color:#555555;
    font-weight:bold;
}

.ngdialog.ngDialog-theme-ficheDetail .ngdialog-content {
    width: 80% !important;
    height: 600px;
}

.modal-dialog-warning {
    width: 80%;
    max-width:400px;
    margin: 50px auto;
}

.no-padding {
	padding: 0;
}

/* LOADER */
.lds-ellipsis {
  display: inline-block;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 10, 0.5);
  z-index: 999999;
  overflow:hidden !important;
}
.lds-ellipsis.catalogue-loading:not(.mobile-view) {
	z-index : 2102 !important;
}
.lds-ellipsis.filters-loading {
	position: absolute;
	top: 0;
}
.lds-ellipsis div {
  position: absolute;
  top: 48%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffffff;;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.dropdown-container .lds-ellipsis div {
	top: 38% !important;
}

.lds-ellipsis div:nth-child(1) {
  left: calc(48% + 8px);
  animation: lds-ellipsis1 0.6s infinite;
}
.dropdown-container .lds-ellipsis div:nth-child(1) {
	left: calc(37% + 8px) !important;
}

.lds-ellipsis div:nth-child(2) {
  left: calc(48% + 8px);
  animation: lds-ellipsis2 0.6s infinite;
}
.dropdown-container .lds-ellipsis div:nth-child(2) {
	left: calc(37% + 8px) !important;
}

.lds-ellipsis div:nth-child(3) {
  left: calc(48% + 32px);
  animation: lds-ellipsis2 0.6s infinite;
}
.dropdown-container .lds-ellipsis div:nth-child(3) {
	left: calc(37% + 32px) !important;
}

.lds-ellipsis div:nth-child(4) {
  left: calc(48% + 56px);
  animation: lds-ellipsis3 0.6s infinite;
}
.dropdown-container .lds-ellipsis div:nth-child(4) {
	left: calc(37% + 56px) !important;
}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}


/* ################################################################################# */
/* ########################## COMPOSANT HEADER ##################################### */
/* ################################################################################# */


.fullWidth {
    width: 100%;
}

/* NAV BAR */
#navBar {
    background-color: var(--vert-1);
    color: white;
    opacity: 1;
    z-index: 1000;

    position: fixed;
    top: 0; width: 100%;
    font-size: 16px;

    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
}
#navBar > div {
    margin: auto 11.2px auto 11.2px; 
    max-height: 64px;
}
#navBar > div:not(.navDropdown):not(#accountTag):not(.modeMobile){
    display: inline-block;
}
#navBar input {
    border-radius: 16px;
}
#navBar #logo-navBar {
	z-index: 12;
    margin: 0 !important;
    display: flex !important;
    font-size: 16px;
}
#navBar #logo-navBar img {
    height: 64px; 
    width: 64px;
}
#navBar #logo-navBar .accountLabel.modeMobile span:not(.account-clientSubstitute):not(.normal-size-label) {
    font-size: 12px;
    line-height: 14px;
}
#navBar #logo-navBar .accountLabel.modeMobile span.account-clientSubstitute {
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;    
}
#navBar #logo-navBar .accountLogout.modeMobile i.fa-sign-out {
    font-size: 28px;
}

#navBar .navTag {
    cursor: pointer;
    background-color: var(--vert-1);
}
#navBar .inputTag {
    position: relative;
    width: 288px;
}
#navBar .inputTag .inputControl {
    border-radius: 12px;
    width: 100%;
    margin: 0;
    max-height: 40px;

    font-size: 16px;
    color: #495057;
    background: #ffffff;
    padding: 8px 32px 8px 8px;
    border: 1px solid #ced4da;
    transition: background-color .2s,color .2s,border-color .2s,box-shadow .2s;

    overflow: hidden;
}
#navBar .inputTag i {
    right: 10px;
    color: var(--vert-1);

    position: absolute;
    top: 50%;
    margin-top: -10px;

    font-style: normal;
    font-weight: 400;
    font-feature-settings: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font-size: 20px;
    --pseudo-ftSize: 24px;
}

#accountTag, #accountTag #accountIcon {
    display: flex;
    flex-direction: row;
    vertical-align: middle;
    margin: auto 4px auto 4px !important;
}
#accountTag #accountIcon i.fa-user-circle {
    font-size: 36px;
}
#accountTag .accountLabel, #logo-navBar .accountLabel {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 6px;
    padding-top: 4px;
    padding-bottom: 4px;
}
#accountTag .accountLabel span.account-clientSubstitute {
    font-weight: 600;
    line-height: 18px;
}
#accountTag .accountLabel span:not(.account-clientSubstitute):not(.normal-size-label) {
    font-size: 10px;
    line-height: 14px;
}
#accountTag .accountLogout, #navBar #logo-navBar .accountLogout.modeMobile {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 10px;
    margin-right: 20px;
}
#accountTag .accountLogout i.fa-sign-out {
    font-size: 26px;
}

.mobileNavBar {
    margin: auto 8px auto 8px !important;
}
.mobileNavBar .navTag i {
    font-size: 40px;
    margin-left: 12px;
    margin-right: 12px;
}


/* FOOTER MOBILE */

#footBar {
    position: fixed;
    bottom: 0; width: 100%;

    font-size: 16px;
    z-index: 2;

    background-color: var(--vert-1);
    color: white; 
    opacity: 1;

    flex-direction: row;
    justify-content: space-around;
}
#footBar .navTag {
    display: flex;
    flex-direction: column;
    padding: 8px;
    cursor: pointer;
}
#footBar .navTag .dropdown-menu.navDropdown {
	transform: translateY(calc(2px - 100%));
	padding: 0;
}
#footBar .navTag .dropdown-menu.navDropdown.expand {
	display: block !important;
}
#footBar .navTag .dropdown-menu.navDropdown ul {
	border-bottom: 4px solid var(--vert-1);
	border-top: none;
}

.selected-nav, .selectedMobile {
    position: relative;
    font-weight: 800;

}
.selected-nav::before {
    position: absolute;
    top:0; left: 50%;
    transform: translate(-50%, 50%);
    background-image: url('/webshop/img/phili.png');
    background-size: 30.4px 30.4px;
    display: inline-block;
    width: 30.4px; 
    height: 30.4px;
    filter: brightness(0) invert(1);
    content:"";
}
.navIcon {
    width: fit-content;
    margin: 0 auto 0 auto;
}

.mobileNavBar .navTag .navIcon:has(i.custom-icon) {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    --pseudo-ftSize: 40px !important;
}
#navBar .accountLogout i.custom-icon {
    --pseudo-ftSize: 30px !important;
}
#navBar i.custom-icon, #footBar i.custom-icon {
    --pseudo-ftSize: 40px;
}

/* ################################################################################# */
/* ################################################################################# */


/* ************************************************************************ */
/* *********************** ViGNETTE PRODUIT ******************************* */
/* ************************************************************************ */

.vignette-produit {
    font-family: Arial, Helvetica, sans-serif;

    display: flex;
    background-color: white;
    position: relative;

    border-radius: 8px;
}
.vignette-produit:not(.vignette-principale) {
    margin: 8px;

    box-shadow: 0 2px 1px -1px #ccc,0 1px 1px #ccc,0 1px 2px #ccc;
}
.vignette-produit.vignette-principale {
    width: calc(100% - 16px);
    margin: 16px 0 16px 16px;

}
.vignette-produit:not(.vignette-principale) .withPrincipal {
    display: none !important;
}

/* ####################################################### */
/* ################### TAG PRIX MIN ###################### */
/* ####################################################### */

.vignette-produit .tag-lowest-price {
    display: none;
    position: absolute;
    top: -18px;
    left: 50%; transform: translateX(-50%);
    height: 18px;
    line-height: 16px;
    font-size: 15px;

    z-index: 2;
    min-width: 90%;

    background-color: var(--flag-red);
    color: white;

    border-top-left-radius: 18px;
    border-top-right-radius: 18px;

}
.vignette-produit .tag-lowest-price  span {
    margin: auto;
}

/* ####################################################### */
/* ################### PRODUIT IMAGE ##################### */
/* ####################################################### */

.vignette-produit .produit-image {

    background-color: rgb(250 250 250);

    position: relative;
    overflow: hidden;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.vignette-produit .produit-image:hover {
	overflow: unset!important;
	z-index: 2800;
}
.vignette-produit .produit-image img {
    width: 100%;
    top: 50%;
    position: relative;
    transform: translateY(-50%);
    transition: transform .2s;
}
.vignette-produit .produit-image img:hover, .vignette-produit .produit-image:hover img {
	z-index: 2600; 
  	position: absolute; 
  	max-width: 80vw; 
  	height: 100%; 
  	width: auto;
}

.vignette-produit .produit-image .produit-tips {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;

    display: flex;
    flex-direction: column-reverse;
    padding: 8px 4px 8px 4px;
}
.vignette-produit .produit-image:hover .produit-tips {
	z-index: 2600;
}

.vignette-produit .produit-image .produit-tips .produit-tip { 
    width: 100%;
    border-radius: 9px;
    background-color: pink;
    margin: 4px 0;
    padding-left: 8px; 
    padding-right: 8px;

	overflow: hidden;
    text-wrap: wrap;
    text-align: center;
}
.vignette-produit .produit-image .produit-tips.pink-1 .produit-tip {
    background-color: #ffcccc !important;
}
.vignette-produit .produit-image .produit-tips.pink-2 .produit-tip {
    background-color: #ff9999 !important;
}
.vignette-produit .produit-image .produit-tips.pink-3 .produit-tip {
    background-color: #ff6666 !important;
}

/* ####################################################### */
/* ############### INFO PRODUIT / GLOBAL ################# */
/* ####################################################### */

.vignette-produit .infoProduit {

    position: relative;
    right: 0; top: 0;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.vignette-produit.vignette-principale .infoProduit {
    padding-left: 12px;
}

/* BOUTON FAVORI */
.vignette-produit.loading .infoProduit .favoriteButton {
	display: none !important;
}
.vignette-produit .infoProduit .favoriteButton {
    width: 40px;
    position: absolute;
    top: 6px; 
    right: 0;
    display: flex;
    z-index: 2100;
    color: black;
    font-size: 20px;
}
.vignette-produit.vignette-principale .infoProduit .favoriteButton {
    width: auto !important;
    right: 16px !important;
}

.vignette-produit .infoProduit .favoriteButton label {
    width: fit-content;
    margin: auto;
    cursor: pointer;
}
.vignette-produit .infoProduit .favoriteButton label.hidden {
    display: none;
}
.vignette-produit .infoProduit .favoriteButton label.show {
    display: block;
}
.vignette-produit .infoProduit .favoriteButton label.pink-heart {
    color: var(--flag-red);
}

.vignette-produit .infoProduit .favoriteButton input[type=checkbox] {
    display: none;
}

.vignette-produit .infoProduit .favoriteButton .link-label {
    font-size: 15px;
    line-height: 14px;
    margin: auto 0 auto 4px;
}
.vignette-produit:not(.vignette-principale) .infoProduit .favoriteButton .link-label {
    display: none;
}
.vignette-produit.vignette-principale .infoProduit .favoriteButton .link-label {
    display: flex;
}

/* ####################################################### */
/* #################### LIGNE HEADER ##################### */
/* ####################################################### */
.vignette-produit  .infoProduit .ficheInfo-header {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    /* pointer-events:none; */
}
.vignette-produit:not(.vignette-principale) .infoProduit .ficheInfo-header {
    width: 100%;
}

.vignette-produit  .infoProduit .ficheInfo-header .ficheInfo-title {
    width: calc(100% - 40px);
    font-weight: bold;
    padding: 4px 4px 1px 4px;
    
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow :  hidden;
    text-overflow: ellipsis;
}
.vignette-produit.vignette-principale .infoProduit .ficheInfo-header .ficheInfo-title {
    font-size: 18px;
}


.vignette-produit .infoProduit .ficheInfo-header #tags-title {
    margin-top: 20px;
    font-weight: bold;
    padding-bottom: 0;
}
.vignette-produit:not(.vignette-principale) .infoProduit .ficheInfo-header #tags-title {
    display: none;
}
.vignette-produit.vignette-principale .infoProduit .ficheInfo-header #tags-title {
    display: flex;
}


.vignette-produit .infoProduit .ficheInfo-header .tags {
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 1px 4px 4px 4px;
}
.vignette-produit .infoProduit .ficheInfo-header .tags .tag {
    width: max-content;
    text-wrap: nowrap;
    display: inline-flex;
}
.vignette-produit .infoProduit .ficheInfo-header .tags .tag .colorIcon {
    height: 15px;width: 15px;
    border-radius: 50%;
    margin-right: 4px;
    background-size: 100% !important;
}
.vignette-produit .infoProduit .ficheInfo-header .tags .tag .colorIcon.border-black {
	border: 1px solid black;
}
.vignette-produit .infoProduit .ficheInfo-header .tags .tag i {
    margin-right: 4px;
    --pseudo-ftSize: 16px;
    margin-top: -1px;
}
.vignette-produit .infoProduit .ficheInfo-header .tags .tag i.fa-flag {
    margin-right: 4px;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    background-image: linear-gradient(to right, var(--flag-blue) 33%, var(--flag-white) 33%, var(--flag-white) 66%, var(--flag-red) 66%); 
}


/* ####################################################### */
/* ########### LIGNE COMMENTAIRE/PRODUCTEUR ############## */
/* ####################################################### */

.vignette-produit .infoProduit .ficheInfo-comment {
    display: inline-flex;
    z-index: 2000;
}
.vignette-produit.vignette-principale .infoProduit .ficheInfo-comment {
    padding: 0;
    position: absolute;
}
.vignette-produit:not(.vignette-principale) .infoProduit .ficheInfo-comment {
    flex-direction: row;
    width: 100%;
    padding: 8px;
}

.vignette-produit .infoProduit .ficheInfo-comment .ficheInfo-commentPicture {
    border-radius: 50%;
    height: 50px; width: 50px;
}
.vignette-produit .infoProduit .ficheInfo-comment .ficheInfo-commentPicture img {
    border-radius: 50%;
    height: 100%;
}

.vignette-produit:not(.vignette-principale) .infoProduit .ficheInfo-comment .comment-section:has(.ficheInfo-commentContent) {
    width: 100%;
}
.vignette-produit:not(.vignette-principale) .infoProduit .ficheInfo-comment .comment-section:has(.ficheInfo-producteur) {
    display: none;
}

.vignette-produit.vignette-principale .infoProduit .ficheInfo-comment .comment-section .comment-header {
    font-size: 14px;
    font-weight: bold;
}
.vignette-produit:not(.vignette-principale) .infoProduit .ficheInfo-producteur, .vignette-produit:not(.vignette-principale) .infoProduit .ficheInfo-comment .comment-section .comment-header {
    display: none;
}


/* COMMENTAIRE */
.vignette-produit .infoProduit .ficheInfo-comment .comment-section .ficheInfo-commentContent {
    position: relative;
    height: 48px;
    width: 100%; 
}
.vignette-produit.vignette-principale .infoProduit .ficheInfo-comment .comment-section .ficheInfo-commentContent {
    margin-bottom: 12px;
    margin-top: 6px;
}

.vignette-produit .infoProduit .ficheInfo-comment .comment-section .ficheInfo-commentContent .ficheInfo-commentContent-expand {
    display: block;
    display: -webkit-box;

    margin: auto 8px;
    padding-left: 10px;
    padding-right: 8px;
    font-style: italic;
    
    line-height: 16px; 
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow :  hidden;
    text-overflow: ellipsis;
}
.vignette-produit .infoProduit .ficheInfo-comment .comment-section .ficheInfo-commentContent .ficheInfo-commentContent-expand:not(:hover) {
    word-break: break-all;
    word-wrap:break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}
.vignette-produit .infoProduit .ficheInfo-comment .comment-section .ficheInfo-commentContent .ficheInfo-commentContent-expand:hover {
    display: block;
    position: absolute;
    top: -4px;
    right: 0;

    width: max-content; 
    height: auto;
    background-color: white;
    border-color: var(--vert-1);
    box-shadow:  0.5px -0.5px 4px 0.1px var(--vert-2);
    z-index: 2000;

    padding: 8px;
    border-radius: 8px;

	font-size: 14px;
    overflow: unset;
    text-overflow: unset;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset; 
}
.vignette-produit.vignette-principale .infoProduit .ficheInfo-comment .comment-section .ficheInfo-commentContent .ficheInfo-commentContent-expand:hover {
    width: 100%;
}

.vignette-produit .infoProduit .ficheInfo-comment .comment-section .ficheInfo-commentContent .ficheInfo-commentContent-expand::before {
    content: "\00AB" ;
    position: absolute;
    top: 0; left: 6px;
}
.vignette-produit .infoProduit .ficheInfo-comment .comment-section .ficheInfo-commentContent .ficheInfo-commentContent-expand:hover::before {
    content: none;
}

.vignette-produit .infoProduit .ficheInfo-comment .comment-section .ficheInfo-commentContent .ficheInfo-commentContent-expand::after {
    content: "\00BB";
    position: absolute;
    bottom: 0; right: 8px;
}
.vignette-produit .infoProduit .ficheInfo-comment .comment-section .ficheInfo-commentContent .ficheInfo-commentContent-expand:hover::after {
    content: none;
}

.vignette-produit .infoProduit .ficheInfo-comment .comment-section .ficheInfo-commentContent .ficheInfo-commentContent-expand .profileCommenter {
    display: none;
}
.vignette-produit .infoProduit .ficheInfo-comment .comment-section .ficheInfo-commentContent .ficheInfo-commentContent-expand:hover .profileCommenter {
    display: block;
    font-weight: bold;
    font-style: normal;
    margin-bottom: 4px;
}

/* INFO PRODUCTEUR */
.vignette-produit.vignette-principale .infoProduit .ficheInfo-comment .comment-section .ficheInfo-producteur {
    display: flex;
    flex-direction: column;
    padding-left: 12px;
}
.vignette-produit.vignette-principale .infoProduit .ficheInfo-comment .comment-section .ficheInfo-producteur .ficheInfo-producteur-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.vignette-produit.vignette-principale .infoProduit .ficheInfo-comment .comment-section .ficheInfo-producteur .ficheInfo-producteur-container .producteur-img { 
    height: 90px;
    width: 90px;
    border-radius: 8px;
    margin: 4px 8px 0 0;
}
.vignette-produit.vignette-principale .infoProduit .ficheInfo-comment .comment-section .ficheInfo-producteur .ficheInfo-producteur-container .producteur-img.img-error {
    display: none;
}
.vignette-produit.vignette-principale .infoProduit .ficheInfo-comment .comment-section .ficheInfo-producteur .ficheInfo-producteur-container .description-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 4px 8px 0 0;
    min-height: 80px;
}
.vignette-produit.vignette-principale .infoProduit .ficheInfo-comment .comment-section .ficheInfo-producteur .ficheInfo-producteur-container .description-container .producteur-description {
    font-size: 14px;
    position: relative;
}
.vignette-produit.vignette-principale .infoProduit .ficheInfo-comment .comment-section .ficheInfo-producteur .ficheInfo-producteur-container .description-container .producteur-description .producteur-nom {
    font-weight: bold;
}
.vignette-produit.vignette-principale .infoProduit .ficheInfo-comment .comment-section .ficheInfo-producteur .ficheInfo-producteur-container .description-container .producteur-description .producteur-text {
    margin-top: 2px;
    line-height: 15px;
}


/* ####################################################### */
/* ############## ZONE COMMANDE/GENERAL ################## */
/* ####################################################### */

.vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
}

/* ####################################################### */
/* #################### LIGNE OPTIONS #################### */
/* ####################################################### */

.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-options {
    text-transform: uppercase;
    display: flex;
    flex-wrap: wrap;
}
.vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-options {
    width: 100%;
    min-width: 100%;
    height: min-content;
    margin-bottom: 80px;
}

.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-options .options-header {
	width: 100%;
    font-size: 14px;
    font-weight: bold;
    text-transform: none;
    margin-left: 8px;
    margin-bottom: 4px;
}
.vignette-produit:not(.vignette-principale) .infoProduit .ficheInfo-commandZone .ficheInfo-options .options-header {
    display: none;
}
.vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-options .options-header {
    display: flex;
}

.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-options .option {
	display: flex;
	height: min-content;
	margin-bottom: 2px;
}
.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-options .option input[type=radio] {
    display: none;
}
.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-options .option input[type=radio] + label {
    display: inline-block;
    border: 1px solid grey;
    padding: 4px 6px 6px 6px;
    border-radius: 13px;
    margin-left: 4px;
    margin-right: 4px;
    color: black;
    font-weight: 500;

    max-width: calc(100% - 12px);
    min-width: max-content;
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 2px;

}
.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-options label.optionChecked {
    background-color: var(--vert-3) !important;
    border: 2px solid var(--vert-1) !important;
    font-weight: 600 !important;
}

/* ####################################################### */
/* ################### LIGNE QUANTITE #################### */
/* ####################################################### */

.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-quantite {
    display: inline-flex;
    flex-direction: column;
}
.vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-quantite {
    position: relative;
    width: 280px;
}

.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .selectQuantite {
    margin: 4px 8px;
    text-align: center;
    
    display: inline-flex;
    flex-direction: row;
}

.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .selectQuantite .quantiteTag {
    border-style: solid;
    border-width: 1px;
    vertical-align: middle;
    display: flex;
    align-items:center;
    justify-content:center;
}
.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .selectQuantite .stockQuantite {
    color: grey;
    border-color: grey;
}
.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .selectQuantite .stockQuantite.hideQte {
	visibility: hidden;
}
.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .selectQuantite .lvrQuantite {
    color: var(--flag-red);
    border-color: var(--flag-red);
}
.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .selectQuantite button {

    background-color: white;
    border: 1px solid var(--vert-1);
    border-radius: 4px;

    font-size: 20px;
}
.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .selectQuantite button .buttonIcon {
    font-size: 24px;
    line-height: 20px;
    font-weight: 500;
    margin: auto 0 auto 0;
    width: 100%;
}
.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .selectQuantite .selectedQuantite {
    margin: auto 0 auto 0;
    font-size: 20px;
}
.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .selectQuantite .selectedQuantite input {
    width: 100%;
    height: 100%;
    border: none;
    font-size: 16px;
    text-align: center;
}

/* LIGNE INFO QUANTITE */
.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .info {
    display: flex;
    flex-direction: row;
    margin: 0 8px;

    font-weight: 600;
}
.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .info .rightMargin {
	margin-right: 4px;
}
.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .info .prixBarre{
	font-size: 11px;
	font-family: Arial;
	color: #9D88AA;
	font-weight: bold;
	text-decoration: line-through;
}
.vignette-produit:not(.vignette-principale) .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .info {
    justify-content: space-around;
}
.vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .info {
    justify-content: space-between;    

    position: absolute;
    left: 16px;
    top: -20px;
    min-width: 250px;
}

.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .info .fa-money {
    color:lime;
    width: 15px;
}
.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .info .fa-calendar {
    color: red;
    width: 15px;
}
.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .info .fa-calendar::before {
    margin: 1px;
}

/* ####################################################### */
/* ################ LIGNE BOUTON-DROPDOWN ################ */
/* ####################################################### */

.vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-commandeButton {
    display: flex;
    flex-direction: row;
    padding-right: 0 !important;
}

.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-commandeButton .button-dropdown {
    position: relative;
    width: 100%;
    padding: 0px 8px;
    margin-bottom: 6px;

}

.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-commandeButton .button-dropdown .warning {
    display: none;
    position: absolute;
    width: 90%;
    top: -60px; left: -20px;
    padding: 6px;
    font-size: 14px; line-height: 16px;
    text-wrap: wrap;
    background-color: var(--vert-3);
    color: black;
    border-radius: 8px;
}

.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-commandeButton .button-dropdown button {
    height: 30px;    
    border: none;
    color: white;
    border-radius: 4px;
    padding: 0;
    margin: 4px auto;
}
.vignette-produit:not(.vignette-principale) .infoProduit .ficheInfo-commandZone .ficheInfo-commandeButton .button-dropdown button {
    width: 100%;
}
.vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-commandeButton .button-dropdown button {
    width: 280px;
    margin-right: 20px !important;
}
.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-commandeButton .button-dropdown button.orderButton {
    background-color: var(--vert-1);
}
.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-commandeButton .button-dropdown button.orderButton:hover ~ .warning {
    display: block;
}
.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-commandeButton .button-dropdown button.oneClickOrderButton {
    background-color: var(--flag-red);
}
.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-commandeButton .button-dropdown button.addToCommandButton {
    background-color: white;
    color: var(--vert-1);
    border: 2px solid var(--vert-1);
}
.vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-commandeButton .button-dropdown button.addToCommandButton {
    margin-right: 0 !important;
}

.vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-commandeButton .button-dropdown button.addToCommandButton.invisible {
	background: transparent;
    border: none !important;
    font-size:0;
    pointer-events: none;
}


/* ************************************************************************ */
/* ******************* VIGNETTE SOUS-GENERIQUE **************************** */
/* ************************************************************************ */

.vignette-sousGenerique {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;


    display: flex;
    background-color: white;
    position: relative;

    margin: 8px;
    border-radius: 8px;

    box-shadow: 0 2px 1px -1px #ccc,0 1px 1px #ccc,0 1px 2px #ccc;
    
    cursor: pointer;
}

.vignette-sousGenerique .produit-image {
    background-color: rgb(250 250 250);

    position: relative;
    overflow: hidden;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.vignette-sousGenerique .produit-image:hover {
	overflow: unset!important;
	z-index: 2800;
}
	
.vignette-sousGenerique .produit-image img {
	width: 100%;
    top: 50%;
    position: relative;
    transform: translateY(-50%);
    transition: transform .2s;
}
.vignette-sousGenerique .produit-image img:hover, .vignette-sousGenerique .produit-image:hover img {
	z-index: 2600; 
  	position: absolute; 
  	max-width: 80vw; 
  	height: 100%; 
  	width: auto;
}

.vignette-sousGenerique .infoProduitSG {
    position: relative;
    right: 0; 
    top: 0;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.vignette-sousGenerique .infoProduitSG .infoProduitSG-header {
    padding: 16px 16px 16px 16px;
    font-weight: bolder;
}

.vignette-sousGenerique .infoProduitSG .ficheProduitSG-infoPrix {
    padding: 32px 16px 0px 16px;
    font-size: 14px;
}
.vignette-sousGenerique .infoProduitSG .ficheProduitSG-infoPrix .prixMinimum {
    font-weight: bold;
}

.vignette-sousGenerique .ficheProduitSG-button {
    width: 100%; 
    height: fit-content;

    position: relative;
    display: flex;

    padding: 16px 8px;
}
.vignette-sousGenerique .ficheProduitSG-button button {
    width: calc(100% - 16px);
    height: 30px;

    border: none;
    background-color: var(--vert-1);
    margin: 0 auto 0 auto;
    border-radius: 4px;

    color: white;
    line-height: 24px;
    font-size: 18px;
}

/* ************************************************************************ */
/* ************************************************************************ */
/* ************************************************************************ */



/* ************************************************************************ */
/* ************************ CONTAINER VIEW ******************************** */
/* ************************************************************************ */

.containerView {
    position: relative;
    /* 
    background-color: rgb(231, 231, 231);
    */

    width: 100%;

    overflow: hidden !important;
}

.containerView .subContainer {
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
.containerView.mobile-view .subContainer:not(.topWithRetour), .containerView:not(.mobile-view) .subContainer {
    height: 100%;
}
.containerView.mobile-view .subContainer.topWithRetour {
    height: calc(100% - 42px) !important;
}

#container-view span.dev, #container-view .ecranDEV {
    /* DEV  */
    display: none !important;
}
#container-view span.dev {
    position: absolute; 
    background-color: blue;
    color: white;
    opacity: 0.9;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
#container-view .ecranDEV {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: orange;
    opacity: 0.7;
    display: flex;
    flex-direction: column;
    z-index: 2;
}
#container-view .ecranDEV button.dev {
    margin: 8px;
}

#container-view .retourButton {
    width: 100%;
    background-color: white;
    padding: 8px 10px 8px 8px;
    font-size: 18px;
}
#container-view .retourButton .button-container {
    display: flex;
}
#container-view .retourButton .button-container:has(#retourCatalogueButton) {
	flex-direction: row;
}
#container-view .retourButton .button-container:has(#toFavoriteButton) {
	flex-direction: row-reverse;
}
#container-view .retourButton .button-container:has(#catalogueComplet-mobile) {
	justify-content: space-between;
  	flex-wrap: wrap;
}
#container-view .retourButton .button-container .filter-mobile-switch {
	display: flex;
}
#container-view .retourButton .button-container .button-link {
    display: flex;
    flex-direction: row;
    cursor: pointer;
}
#container-view .retourButton .button-container .button-link .filter-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#container-view .retourButton .button-container .button-link .link-label {
    margin-left: 6px;
    padding-bottom: 0px;
}
#container-view .link-label, #container-view .link-label a {
    text-decoration: underline;
    cursor: pointer;
    color: black;
}

/* CONTAINERS - GENERAL */

#container-view .subContainer .container-produits, #container-view .subContainer .container-sousGeneriques {
	display: flex;
	flex-direction: column;
}
#container-view .subContainer .container-produits {
    padding: 0px 12px 40px 12px;
    position: relative;
}
#container-view .subContainer .container-produits.recommandations {
	background-color: var(--logo-petales-1);
}
#container-view .subContainer .container-produits .wrap-container {
    padding-bottom: 12px;
    z-index: 10;
}
#container-view .subContainer #catalogue-container.container-produits .wrap-container {
    padding-top: 26px;
}
#container-view .subContainer .container-produits .wrap-container,
#container-view .subContainer .container-produits .wrap-container .sub-wrapper,
#container-view .subContainer .container-sousGeneriques .wrap-container,
#container-view .subContainer .container-sousGeneriques .wrap-container .sub-wrapper {
	display: flex;
    flex-wrap: wrap;
}
#container-view .subContainer .container-sousGeneriques {
    padding: 0 12px 12px 12px;
    background-color: white;
}
#container-view .subContainer .container-header {
    font-size: 20px;
    font-weight: 900;
    padding: 12px 0 14px 16px;

    text-shadow: 1px 0 #333;
  	letter-spacing: 1px;

}
#container-view .subContainer .container-paginator {
	position: absolute;
    bottom: 0;
    left: -12px;

    width: calc(100% + 12px);
    height: 40px;

    display: flex;

    z-index: 5;
}
#container-view .subContainer .container-paginator.hide-paginator {
	height: 0 !important;
	overflow: hidden !important;
}
#container-view .subContainer .container-paginator.voir-plus ul {
	display : none !important;
}

#container-view .subContainer .container-paginator:not(.datefilterActif) span.voir-plus-dates,
#container-view .subContainer .container-paginator.datefilterActif span.voir-plus-button {
    display: none;
}

#container-view .subContainer .container-paginator:not(.voir-plus) span.voir-plus-button {
	display: none;
}
#container-view .subContainer .container-paginator span.link-label {
	margin: 0 auto 16px auto;
	font-size: 18px;
}
#container-view .subContainer .container-produits:has(.empty-catalogue):not(:has(.container-paginator.datefilterActif)) {
	height: 100%;
	padding-bottom: 0;
}
#container-view .subContainer:has(.bandeau) .container-produits {
	min-height: calc(100% - 300px) !important;
}
#container-view .subContainer:has(.bandeau) .container-produits:has(.empty-catalogue) {
    height: calc(100% - 300px) !important;
}
#container-view .subContainer .container-empty:has(.empty-favorites), #container-view .subContainer .container-empty.rechercheEnCours {
    font-size: 24px;
    padding: 30px;
    margin: auto;
    text-align: center;
}
#container-view .subContainer .container-empty.empty-catalogue {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#container-view .subContainer .container-empty.empty-catalogue.noresults-height-auto {
	height: auto !important;
	padding: 1rem 0 !important;
}
#container-view .subContainer .container-empty.empty-catalogue .empty-warning {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    max-width: 774px;
    width: 774px;

    font-size: 16px;
}
#container-view .subContainer .container-empty.empty-catalogue .empty-warning img.empty-image {
    display: block;
    max-height: 250px;
    max-width: 250px;
    width: auto; height: auto;
    margin: auto;
}
#container-view .subContainer .container-empty.empty-catalogue .empty-warning .empty-message {
    max-width: 524px;
    min-width: 250px;
    text-wrap: wrap;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    padding: 0px 12px;
    margin: auto;
}
#container-view .subContainer .container-empty.empty-catalogue .empty-warning .empty-message p.message-content {
    margin-bottom: 15px;
    font-weight: 500;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}
#container-view .subContainer .container-empty.empty-catalogue .empty-warning .empty-message button {
    width: fit-content; 
    height: 36px;
    border: none;
    background-color: var(--vert-1);
    border-radius: 4px;
    color: white;
    line-height: 16px;
    font-size: 18px;
    font-weight: 600;
    padding: 0px 12px;
}

/* CONTAINERS - PARTICULARITES */
#container-view #ecran-favoris.subContainer, #container-view #ecran-catalogue.subContainer {
    height: 100%;
}
#container-view #ecran-favoris.subContainer .container-produits, #container-view #ecran-catalogue.subContainer .container-produits {
    min-height: 100%;
    padding-right: 0;
}
#container-view .subContainer .container-produits #wrapper-catalogue.wrap-container {
    height: 100%;
    overflow-y: auto;
}
#container-view .subContainer .container-produits #wrapper-favoris.wrap-container {
    height: calc(100% - 56px);
    overflow-y: auto;
}


/* COMPORTEMENT MESSAGE RESULTAT VIDE SI FILTRE DATE */

#container-view .subContainer .container-produits .wrap-container .container-empty {
    display: none;
}
#ecran-catalogue .container-produits:has(.hide-paginator) .wrap-container:has(.sub-wrapper:empty) .container-empty,
#ecran-sousGenerique .container-produits:has(.hide-paginator):has(.wrap-container:empty) .container-empty {
    display: flex !important;
}

#ecran-sousGenerique.subContainer .container-produits:has(.empty-catalogue) {
    height: auto !important;
}

#ecran-sousGenerique .container-produits:has(.hide-paginator):has(.wrap-container:empty) {
    height: auto !important;
}
#ecran-catalogue .container-produits:has(.hide-paginator, .wrap-container:has(.sub-wrapper:empty)) {
    height: auto !important;
}

.container-produits:has(.hide-paginator):not(:has(.vignette-produit)) {
    height: auto !important;
}
.container-produits:has(.hide-paginator):not(:has(.vignette-produit)) .container-empty {
    display: flex !important;
}
.container-produits:has(.hide-paginator):has(.vignette-produit) .container-empty {
    display: none !important;
}

/* FAVORIS */
#container-view #ecran-favoris.subContainer:has(.container-empty) {
    height: 100%;
}
#container-view #ecran-favoris.subContainer .container-produits {
    background-color: white;
}
#container-view #ecran-favoris.subContainer .container-produits:has(.container-empty) {
    height: 100%;
    padding: 0;
    position: relative;
}
#container-view #ecran-favoris.subContainer .container-produits .container-empty:has(.empty-favorites) {
    height: calc(100% - 56px);
}
#container-view #ecran-favoris.subContainer .container-produits .container-empty span.empty-favorites {
    display: block;
    max-width: 640px;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);

    text-wrap: wrap;
    text-align: left;
    font-size: 18px;
}

/* SLIDER */ 
#container-view .subContainer  #slider-accueil, #container-view .subContainer .bandeau { 
    height: 300px; 
    background-color: white; 
    background-repeat: no-repeat; 
    background-size: 100%; 
    position: relative; 
} 
#container-view .subContainer  #slider-accueil span,
#container-view .subContainer  #slider-accueil a,
#container-view .subContainer  #slider-accueil .carousel-inner .item span.slider-title { 
    position: absolute; 
    font-size: 32px; 
    color: white; 
    font-weight: bold; 
    top: 50%; 
    transform: translateY(-50%); 
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6); 
} 
#container-view .subContainer  #slider-accueil .slider-control { 
	width: auto !important; 
	height: auto !important; 
	opacity: 1 !important; 
	bottom: unset !important; 
} 
#container-view .subContainer  #slider-accueil .slider-control,
#container-view .subContainer  #slider-accueil .slider-control i { 
    cursor: pointer; 
    z-index: 999; 
} 
#container-view .subContainer  #slider-accueil .slider-control:hover { 
	color: #bbb; 
    text-decoration: none; 
    outline: 0; 
    opacity: .9; 
} 
#container-view .subContainer  #slider-accueil ol.carousel-indicators { 
    position: absolute; 
    bottom: 0; 
    margin: 0; padding: 0; 
    left: 50%; 
    transform: translateX(-50%); 
} 
#container-view .subContainer  #slider-accueil ol.carousel-indicators li { 
    height: 12px; width: 12px; 
    margin-left: 8px; margin-right: 8px; 
    border-radius: 75%; 
    border-color: white; 
    border-style: solid; 
    border-width: 1px; 
} 
#container-view .subContainer  #slider-accueil ol.carousel-indicators li.active { 
    box-shadow: 0 1px 2px rgba(0, 0, 0, .6); 
} 
#container-view .subContainer  #slider-accueil .slider-left-arrow { 
    left: 0 !important; 
    right: unset !important; 
} 
#container-view .subContainer  #slider-accueil .slider-right-arrow { 
    right: 0 !important; 
    left: unset !important; 
} 
#container-view .subContainer  #slider-accueil .slider-left-arrow,
#container-view .subContainer  #slider-accueil .slider-right-arrow { 
    cursor: pointer; 
    padding: 8px; 
} 
#container-view .subContainer  #slider-accueil .carousel-inner { 
    height: 100%; 
} 
#container-view .subContainer  #slider-accueil .carousel-inner .item { 
    height: 100% !important; width: 100%; 
    margin: 0; padding: 0; 
    position: absolute !important; 
    top: 0 !important; 
} 
#container-view .subContainer  #slider-accueil .carousel-inner .item img,
#container-view .subContainer .bandeau img { 
	position: absolute !important; 
	top: 50% !important; 
    left: 50% !important; 
    transform: translate(-50%, -50%) !important;
} 
#container-view .subContainer  #slider-accueil .carousel-inner .item span.slider-title { 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

/* SOUS-GENERIQUES */
#container-view #ecran-sousGenerique.subContainer .produit-principal {
    background-color: #ffffff;
    border-bottom: 2px solid var(--vert-1);
}
#container-view #ecran-sousGenerique.subContainer .container-header {
    padding-bottom: 0;
}
#container-view #ecran-sousGenerique.subContainer .container-produits {
    background-color: var(--vert-3);
}
#container-view #ecran-sousGenerique.subContainer .container-produits .wrap-container {
    padding-top: 12px;
}
#container-view #ecran-sousGenerique.subContainer .container-produits .wrap-container .vignette-produit {
    box-shadow: 0 2px 1px -1px var(--vert-3),0 1px 1px var(--vert-3),0 1px 2px var(--vert-3) !important;
}
#container-view #ecran-sousGenerique.subContainer .container-produits .wrap-container .vignette-produit:first-child .tag-lowest-price {
    display: flex !important;
}


.filterComponent {
    display: block;
    width: 100%;
    position: relative;
}
.filterComponent:has(.mobile-filter) {
    top: 50px !important;
    z-index: 2000;
    position: absolute;
}



/* ****************************************************************************************************** */
/* ******************************************* MEDIA QUERIES ******************************************** */
/* ****************************************************************************************************** */


@media (min-width: 1580px) {
	.col-xl-3 {
	    width: 25%;
	}
}

@media 
(min-width: 1442.1px),
(min-width: 1080.1px) and (max-width: 1267px),
(min-width: 728.1px ) and (max-width: 957px),
(min-width: 370.1px ) and (max-width: 646px) {
    .vignette-sousGenerique {
        width: var(--produit-sousGenerique-width) !important;
        min-width: var(--produit-sousGenerique-width) !important;
    }

    .vignette-sousGenerique .produit-image {
        width: calc(var(--produit-image-baseWidth) * var(--ratio-vignetteSousGenerique)) !important;
        height: calc(var(--produit-image-baseHeight) * var(--ratio-vignetteSousGenerique)) !important;
    }

    .vignette-sousGenerique .infoProduitSG {
        width: calc(100% - calc(var(--produit-image-baseWidth) * var(--ratio-vignetteSousGenerique)) ) !important; 
    }

    .vignette-sousGenerique .infoProduitSG .infoProduitSG-header {
        font-size: 16px !important;
    }
}

@media 
(min-width:1267.1px) and (max-width: 1442px),
(min-width: 957.1px) and (max-width: 1080px),
(min-width: 646.1px) and (max-width: 728px) {
    .vignette-sousGenerique {
        width: calc(var(--produit-sousGenerique-width) * var(--ratio-vignetteSouGenerique-2)) !important;
        min-width: calc(var(--produit-sousGenerique-width) * var(--ratio-vignetteSouGenerique-2)) !important;
    }

    .vignette-sousGenerique .produit-image {
        width: calc(var(--produit-image-baseWidth) * var(--ratio-vignetteSousGenerique) * var(--ratio-vignetteSouGenerique-2)) !important;
        height: calc(var(--produit-image-baseHeight) * var(--ratio-vignetteSousGenerique) * var(--ratio-vignetteSouGenerique-2)) !important;    
    }

    .vignette-sousGenerique .infoProduitSG {
        width: calc(100% - calc(var(--produit-image-baseWidth) * var(--ratio-vignetteSousGenerique) * var(--ratio-vignetteSouGenerique-2)) ) !important; 
    }

    .vignette-sousGenerique .infoProduitSG .infoProduitSG-header {
        font-size: 14px !important;
    }
}

/* @media (min-width: 850.1px) { */
@media 
(min-width: 1265.1px) and (max-width: 1532px),
(min-width: 850.1px) and (max-width: 1020px) {

    .vignette-produit {
        font-size: 14px !important;
    }

    .vignette-produit:not(.vignette-principale) {
        width: calc(var(--produit-generique-width) * var(--ratio-vignette-2) ) !important;
        min-width: calc(var(--produit-generique-width) * var(--ratio-vignette-2) ) !important;
    }

    .vignette-produit:not(.vignette-principale) .produit-image {
        width: calc(var(--produit-image-baseWidth) * var(--ratio-vignette-2)) !important;
        height: calc(var(--produit-image-baseHeight) * var(--ratio-vignette-2)) !important;
    }
    .vignette-produit:not(.vignette-principale) .infoProduit {
        width: calc(100% - calc(var(--produit-image-baseWidth) * var(--ratio-vignette-2))) !important;
    }
    .vignette-produit:not(.vignette-principale) .infoProduit .ficheInfo-comment .comment-section .ficheInfo-commentContent .ficheInfo-commentContent-expand:hover {
        max-width: calc(var(--produit-generique-width) * var(--ratio-vignette-2) - 30px) !important;
    }

    .vignette-produit .produit-image .produit-tips .produit-tip {
        font-size: 12px !important;
    }


    .vignette-produit:not(.vignette-principale) .infoProduit .ficheInfo-header .ficheInfo-title {
        font-size: 14px !important; 
    }

    .vignette-produit .infoProduit .ficheInfo-header #tags-title {
        font-size: 13px !important;
    }

    .vignette-produit .infoProduit .ficheInfo-header .tags .tag {
        margin: 0px 8px 0px 4px !important;
        font-size: 12px !important;
        line-height: 13px !important;
    }

    .vignette-produit .infoProduit .ficheInfo-comment .comment-section .ficheInfo-commentContent .ficheInfo-commentContent-expand {
        font-size: 12px !important;
    }

    .vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-options {
        padding: 4px 2px !important;
    }

    .vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-options .option input[type=radio] + label {
        line-height: 11px !important;
        font-size: 10px !important;
        height: 20px !important;
    }

    .vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .selectQuantite .quantiteTag {
        height: 27px !important;
        width: 27px !important;
        font-size: 12px !important;
        margin: 0px 15px !important;
    }
    .vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .selectQuantite button, .vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .selectQuantite .selectedQuantite {
        width: 27px !important;
    }
    .vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .selectQuantite button {
        height: 27px !important;
    }

    .vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .info {
        font-size: 12px !important;
        line-height: 13px !important;
    }

    .vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-commandeButton .button-dropdown button {
        font-size: 13px !important;
    }
}

/* @media screen and (max-width: 850px) { */
@media
(min-width: 1532.1px),
(min-width:1020.1px) and (max-width: 1265px),
screen and (max-width: 850px) {

    .vignette-produit {
        font-size: 16px !important;
    }

    .vignette-produit .produit-image .produit-tips .produit-tip {
        font-size: 14px !important;
    }

    .vignette-produit:not(.vignette-principale) .infoProduit .ficheInfo-header .ficheInfo-title {
        font-size: 15px !important;
    }

    .vignette-produit .infoProduit .ficheInfo-header #tags-title {
        font-size: 14px !important;
    }

    .vignette-produit .infoProduit .ficheInfo-header .tags .tag {
        margin: 4px 8px 0 4px !important;
        font-size: 14px !important;
        line-height: 15px !important;
    }

    .vignette-produit .infoProduit .ficheInfo-comment .comment-section .ficheInfo-commentContent .ficheInfo-commentContent-expand {
        font-size: 14px !important;
    }

    .vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-options {
        padding: 8px 2px !important;
    }

    .vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-options .option input[type=radio] + label {
        line-height: 14px !important;
        font-size: 12px !important;
        height: 26px !important;
    }

    .vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .selectQuantite .quantiteTag {
        height: 36px !important;
        width: 36px !important;
        font-size: 14px !important;
        margin: 0px 20px;
    }
    .vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .selectQuantite button, .vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .selectQuantite .selectedQuantite {
        width: 36px !important;
    }
    .vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .selectQuantite button {
        height: 36px !important;
    }

    .vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .info {
        font-size: 14px !important;
        line-height: 15px !important;
    }

    .vignette-produit .infoProduit .ficheInfo-commandZone .ficheInfo-commandeButton .button-dropdown button {
        font-size: 15px !important;
    }
}

@media
(min-width: 1532.1px),
(min-width:1020.1px) and (max-width: 1265px),
(min-width: 520.1px) and (max-width: 850px) {

    .vignette-produit:not(.vignette-principale) {
        width: var(--produit-generique-width) !important;
        min-width: var(--produit-generique-width) !important;
    }

    .vignette-produit:not(.vignette-principale) .produit-image {
        width: calc(var(--produit-image-baseWidth) * var(--ratio-vignettePC)) !important;
        height: calc(var(--produit-image-baseHeight) * var(--ratio-vignettePC)) !important;
    }

    .vignette-produit:not(.vignette-principale) .infoProduit {
        width: calc(100% - calc(var(--produit-image-baseWidth) * var(--ratio-vignettePC))) !important;
    }

    .vignette-produit:not(.vignette-principale) .infoProduit .ficheInfo-comment .comment-section .ficheInfo-commentContent .ficheInfo-commentContent-expand:hover {
        max-width: calc(var(--produit-generique-width) * var(--ratio-vignettePC) - 30px) !important;
    }
}

@media screen and (max-width: 850px) {
    #container-view .subContainer .container-produits .wrap-container.centered {
        width: min-content;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width: 992px) {
	
	/* ******************************************************** */
	/* ******* HEADER ******** */
	/* *********************** */

	.enteteHeader #footBar {
        display: flex !important;
    }
    
    .inputTag.modeMobile {
        width: 100% !important;
        padding: 8px;
    }
    .inputTag.modeMobile input {
        border-radius: 8px;
        padding-right: 32px !important;
    }
    .inputTag.modeMobile i {
        font-size: 20px !important;
        right: 24px !important;
        margin-top: -10px !important;
    }
    
    /* ******************************************************** */

	/* ******************************************************** */
	/* ******* FILTERS ******* */
	/* *********************** */
	.filterComponent {
		z-index: 2801 !important;
	}
	
	.filters-array.deactivated {
        height: 100px !important;
        top: calc(100% - 100px) !important;
        padding: 0 !important;
    }

	.nav-mobile-rubrique {
		margin-bottom:10px;
	}
	.overlay-content p {
		margin-bottom:0px;
	}
	div.superContainer {
	    min-width: 100%;
	    width: 90%;
	    padding-bottom: 1px;
	}
	.contenu {
	    max-width: none;
	    min-width: 0;
	}
	.row-user-logout {
		display:none;
	}
	.menu-logo {
		width:100px;
	}
	.menu-burger {
		display:block;
		float: right;
		font-size:4em;
		vertical-align: middle;
		padding: 7px 5px 0 0;
		color:#ff6666;
	}
	.modeMobile {
		display: flex !important;
	}
	.modeMobile_block {
		display: block !important;
	}
	.menu-tuto {
		display:block;
		float: right;
		font-size:3.6em;
		vertical-align: middle;
		padding: 8px 10px 0 0;
		color:#ff6666;
	}
	.menu-desktop, .menu-desktop-compte {
		display:none;
	}
	.modeDesktop {
		display:none !important;
	}
	.recherche-mobile {
		display:block;
	}
	.zone-recherche-container {
		padding: 0 0 10px 10px;
		width:100%;
		transition: all 0.5s linear;
	} 
	.tabCatalogueListe {
		min-width: 0 !important;
	}
	
	div.pagin span.gauche {
	    width: 100%;
	    text-align: right;
	    margin-bottom: 10px;
	}
	    
	.cmsFooterSpacer {
	    height: 0px;
	}
	.footer {
	    padding: 10px 0 20px;
	    height: auto;
	}
	.texteCopyright {
		color:#ff6666;
	    float: none;
	    text-align: center;
	    padding-bottom: 10px;
	}
	.zoneMenuFooter {
	    float: none;
	    height: auto;
	}
	.ngdialog.ngDialog-theme-ficheDetail .ngdialog-content {
	    width: 90% !important;
	    height: 100% !important;
	}
	.btn-tuto-download {
		display:none;
	}
	.footer-catalogue > .footer {
		width: 100%;
	}
}

@media (min-width: 900.1px) {
    .vignette-produit.vignette-principale .produit-image {
        width: calc(var(--produit-image-baseWidth) * var(--ratio-vignettePrincipale));
        height: calc(var(--produit-image-baseHeight) * var(--ratio-vignettePrincipale));
    }

    .vignette-produit.vignette-principale .infoProduit {
        width: calc(100% - calc(var(--produit-image-baseWidth) * var(--ratio-vignettePrincipale)));
    }

    .vignette-produit.vignette-principale .infoProduit .ficheInfo-header {
        width: calc(60% - 24px);
    }

    .vignette-produit.vignette-principale .infoProduit .ficheInfo-comment {
        flex-direction: column;
        width: 40%;
        right: 16px;
        top: 51px;
    }

    .vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-quantite {
        position: relative;
    }
}

@media (min-width: 460.1px) and (max-width: 900px) {
    .vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .info, .vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-quantite {
        position: unset;
    }
}

@media screen and (max-width: 900px) {

    /* BREAKPOINT :  Vignette principale 
        - On passe le ratio de l'image de 1.3 � 1 
        - La zone de commentaire/producteur passe en dessous de la vignette, sur une ligne; on augmente la hauteur du containeur de la vignette principale
        - La zone des boutons de s�lection de quantit� passe en dessous de l'image; on augmente la hauteur de la vignette principale
    */
    

    #container-view .subContainer .vignette-principale-container:has(.no-comment):has(.no-images):has(.no-description) {
        height: auto !important;
    }

    .vignette-produit.vignette-principale .produit-image {
        border-radius: 8px;
    }

    .vignette-produit.vignette-principale .infoProduit {
        position: unset;
    }

    .vignette-produit.vignette-principale .infoProduit .ficheInfo-header {
        width: 100%;
    }
    .vignette-produit.vignette-principale .infoProduit .ficheInfo-comment {
        width: 100%;

        top: unset;
        right: unset;
        bottom: -16px;
        left: 0;
        transform: translateY(100%);
        flex-direction: row-reverse;
        justify-content: space-between;
        flex-wrap: wrap-reverse;
    }
    .vignette-produit.vignette-principale .infoProduit .ficheInfo-comment .comment-section {
        width: 50%;
        min-width: 370px;
    }
    .vignette-produit.vignette-principale .infoProduit .ficheInfo-comment.no-images.no-description .comment-section, .vignette-produit.vignette-principale .infoProduit .ficheInfo-comment.no-comment .comment-section  {
        width: 100%;
    }
    .vignette-produit.vignette-principale .infoProduit .ficheInfo-comment .comment-section .ficheInfo-producteur .ficheInfo-producteur-container .description-container {
        max-width: calc(100% - 196px);
        margin-right: 0;
    }

    .vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .selectQuantite {
        position: absolute;
        left: 0;
        bottom: 0px;
        margin-left: 0;
        margin-right: 0;
        width: 280px;
    }
    .vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .selectQuantite .stockQuantite.hideQte {
		margin-left: -18px !important;
	}
    .vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-commandeButton, .vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .selectQuantite {
        padding-top: 8px;
    }
    .vignette-produit.vignette-principale .infoProduit .ficheInfo-quantite .selectQuantite .quantiteTag {
        margin: 0 10px;
        height: 30px;
        width: 30px;
    }
    .vignette-produit.vignette-principale .infoProduit .ficheInfo-quantite .selectQuantite button {
        height: 30px;
        width: 30px;
    }
    .vignette-produit.vignette-principale .infoProduit .ficheInfo-quantite .selectQuantite .selectedQuantite {
        width: 30px;
    }

    .vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-commandeButton .button-dropdown {
        margin-bottom: 4px !important;
    }

    .vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-commandeButton {
        width: 100%;
    }

}

@media (min-width: 793.1px) and (max-width: 900px) {
    #container-view .subContainer .vignette-principale-container {
        height: calc(240px + var(--produit-image-baseHeight)* var(--ratio-vignettePC));
    }
    #container-view .subContainer .vignette-principale-container:not(:has(.no-comment)):has(.no-images):has(.no-description) {
        height: calc(212px + var(--produit-image-baseHeight)* var(--ratio-vignettePC)) !important;
    }

    .vignette-produit.vignette-principale .infoProduit .ficheInfo-header .ficheInfo-title {
        width: calc(100% - 170px);
    }
}

@media (min-width: 520.1px) and (max-width: 900px) {

    .vignette-produit.vignette-principale {
        height: calc(80px + var(--produit-image-baseHeight)* var(--ratio-vignettePC));
    }

    .vignette-produit.vignette-principale .produit-image {
        width: calc(var(--produit-image-baseWidth) * var(--ratio-vignettePC));
        height: calc(var(--produit-image-baseHeight) * var(--ratio-vignettePC));
    }

    .vignette-produit.vignette-principale .infoProduit {
        width: calc(100% - calc(var(--produit-image-baseWidth) * var(--ratio-vignettePC)));
    }
}

@media screen and (max-width: 832px) {
    /* BREAKPOINT : Vignette principale
        - les boutons de commandes passent d'une ligne � deux par manque de largeur
    */
    .vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-quantite {
	    width: 100%;
	}
    .vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .selectQuantite {
        height: 88px;
    }
    .vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .selectQuantite .quantiteTag,
    .vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .selectQuantite button {
        margin-top: auto;
        margin-bottom: auto;
    }
    .vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-commandeButton .button-dropdown {
        width: 100%;
        margin: auto;
    }
    .vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-commandeButton .button-dropdown button  {
        width: 100%;
    }


}
@media (min-width: 793.1px) {
	#container-view .subContainer  #slider-accueil .carousel-inner .item img:not(.img-error),
	#container-view .subContainer .bandeau img:not(.img-error) {    
		height: 100%;
	    width: 100%;
	    object-fit: cover; 
	}
}

@media screen and (max-width: 793px) {

    /* BREAKPOINT : Vignette principale 
        - Les deux sections de commentaire/producteur doivent passer sur deux lignes
    */
    
	#container-view .subContainer  #slider-accueil .carousel-inner .item img:not(.img-error),
	#container-view .subContainer .bandeau img:not(.img-error) {    
		height: calc(210 * 100vw / 580);
	    width: 100%;
	    object-fit: cover; 
	}

    .vignette-produit.vignette-principale .infoProduit .favoriteButton .link-label {
        display: none;
    }

    .vignette-produit.vignette-principale .infoProduit .ficheInfo-comment:not(.no-images.no-description) .comment-section {
        width: 100%;
        max-width: none;
        margin-bottom: 16px;
    }

    .vignette-produit.vignette-principale .infoProduit .ficheInfo-comment .comment-section .ficheInfo-commentContent .ficheInfo-commentContent-expand:hover {
        max-width: 100%;
    }

    .vignette-produit.vignette-principale .infoProduit .ficheInfo-comment .comment-section .ficheInfo-producteur .ficheInfo-producteur-container .description-container {
        max-width: calc(100% - 196px);
    }
}

@media screen and (max-width: 761px) {
    #container-view .subContainer .container-empty .empty-warning .empty-message button {
        margin: auto;
    }
}

@media (min-width: 520.1px) and (max-width: 793px) {
    #container-view .subContainer .vignette-principale-container:not(:has(.no-comment)):not(:has(.no-images)):not(:has(.no-description)),
    #container-view .subContainer .vignette-principale-container:not(:has(.no-comment)):has(.no-images):not(:has(.no-description)),
    #container-view .subContainer .vignette-principale-container:not(:has(.no-comment)):not(:has(.no-images)):has(.no-description) {
        height: calc(340px + var(--produit-image-baseHeight)* var(--ratio-vignettePC));
    }
    #container-view .subContainer .vignette-principale-container:has(.no-comment) {
        height: calc(238px + var(--produit-image-baseHeight)* var(--ratio-vignettePC));
    }
    #container-view .subContainer .vignette-principale-container:not(:has(.no-comment)):has(.no-images):has(.no-description) {
        height: calc(210px + var(--produit-image-baseHeight)* var(--ratio-vignettePC));
    }
}

@media (min-width: 370.1px) and (max-width: 793px) {
    .vignette-produit.vignette-principale .infoProduit .ficheInfo-header .ficheInfo-title {
        width: calc(100% - 40px);
    }
}

@media (min-width: 520.1px) {
    .vignette-produit:not(.vignette-principale) .produit-image {
        width: calc(var(--produit-image-baseWidth) * var(--ratio-vignettePC));
        height: calc(var(--produit-image-baseHeight) * var(--ratio-vignettePC));
    }

    .vignette-produit:not(.vignette-principale) .infoProduit {
        width: calc(100% - calc(var(--produit-image-baseWidth) * var(--ratio-vignettePC)));
    }
}

@media screen and (max-width: 520px) {

    /* BREAKPOINT : Vignette Produit normal
        - Passage en mode mobile
    */
    /* BREAKPOINT : Vignette Produit principal
        - Ratio image de 1 � 0.8
    */

    #container-view .subContainer .container-produits {
        padding: 0px 0px 40px 0px;
    }

    .vignette-produit:not(.vignette-principale) {
        width: calc(100% - 16px);
        min-width: calc(100% - 16px);
    }
    .vignette-produit.vignette-principale {
        margin-left: 8px
    }

    .vignette-produit.vignette-principale .infoProduit .ficheInfo-comment .comment-section .ficheInfo-commentContent .ficheInfo-commentContent-expand:hover {
        left: -8px;
    }

    .vignette-produit:not(.vignette-principale) .infoProduit .ficheInfo-comment {
        display: none;
    }

    .vignette-produit:not(.vignette-principale) .infoProduit .ficheInfo-commandZone .ficheInfo-options {
        padding: 0 2px; 
    }

    .vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .selectQuantite {
        bottom: 80px;
        width: 100%;
        height: auto;
        justify-content: center;
    }

    .vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-commandeButton {
        position: absolute;
        left: 0;
        bottom: 0;
    }
}

@media (min-width: 424.1px) and (max-width: 520px) {
    .vignette-produit.vignette-principale .produit-image {
        width: calc(var(--produit-image-baseWidth) * var(--ratio-vignetteMobile));
        height: calc(var(--produit-image-baseHeight) * var(--ratio-vignetteMobile));
    }

    .vignette-produit.vignette-principale .infoProduit {
        height: calc(var(--produit-image-baseHeight) * var(--ratio-vignetteMobile));
        width: calc(100% - calc(var(--produit-image-baseWidth) * var(--ratio-vignetteMobile)));
    }

}

@media (min-width: 460.1px) and (max-width: 520px) {
    #container-view .subContainer .vignette-principale-container:not(:has(.no-comment)):not(:has(.no-images)):not(:has(.no-description)),
    #container-view .subContainer .vignette-principale-container:not(:has(.no-comment)):has(.no-images):not(:has(.no-description)),
    #container-view .subContainer .vignette-principale-container:not(:has(.no-comment)):not(:has(.no-images)):has(.no-description) {
        height: calc(380px + var(--produit-image-baseHeight)* var(--ratio-vignetteMobile));
    }
    #container-view .subContainer .vignette-principale-container:has(.no-comment) {
        height: calc(278px + var(--produit-image-baseHeight)* var(--ratio-vignetteMobile));
    }
    #container-view .subContainer .vignette-principale-container:not(:has(.no-comment)):has(.no-images):has(.no-description) {
        height: calc(250px + var(--produit-image-baseHeight)* var(--ratio-vignetteMobile));
    }

    .vignette-produit.vignette-principale {
        height: calc(125px + var(--produit-image-baseHeight)* var(--ratio-vignetteMobile));
    }
    
    .vignette-produit:not(.vignette-principale) .produit-image {
        width: calc(var(--produit-image-baseWidth) * var(--ratio-vignetteMobile));
        height: calc(var(--produit-image-baseHeight) * var(--ratio-vignetteMobile));
    }

    .vignette-produit:not(.vignette-principale) .infoProduit {
        width: calc(100% - calc(var(--produit-image-baseWidth) * var(--ratio-vignetteMobile)));
    }

    .vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-options {
        margin-bottom: 25px;
    }
}

@media screen and (max-width: 460px) {

    .vignette-produit:not(.vignette-principale) {
        height: calc( calc(var(--produit-image-baseHeight) * var(--ratio-vignetteMobile-2)) + 76px);
    }
    
    .vignette-produit:not(.vignette-principale) .produit-image {
        width: calc(var(--produit-image-baseWidth) * var(--ratio-vignetteMobile-2));
        height: calc(var(--produit-image-baseHeight) * var(--ratio-vignetteMobile-2));
        border-radius: 8px 0 0 0;
    }

    .vignette-produit:not(.vignette-principale) .infoProduit {
        width: calc(100% - calc(var(--produit-image-baseWidth) * var(--ratio-vignetteMobile-2)));
        max-height: calc(var(--produit-image-baseHeight) * var(--ratio-vignetteMobile-2));
        position: unset;
    }

    .vignette-produit.vignette-principale .infoProduit .ficheInfo-header .tags .tag .withPrincipal {
        display: none;
    }
    .vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-quantite {
        position: absolute !important;
        bottom: 80px;
        left: 0;
        width: 100%;
        height: auto;
        justify-content: center;
    }

    .vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-options {
        margin-bottom: 0;
    }
    .vignette-produit.vignette-principale .infoProduit .ficheInfo-quantite .selectQuantite, .vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .info {
        position: unset !important;
        padding-top: 0 !important;
    }
    .vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .info {
        width: 275px;
        margin: auto;
    }

    .vignette-produit:not(.vignette-principale) .infoProduit .ficheInfo-quantite {
        width: 100%;
    }
    .vignette-produit:not(.vignette-principale) .infoProduit .ficheInfo-quantite .selectQuantite {
        width: fit-content;
        margin: 4px auto;
    }
    .vignette-produit:not(.vignette-principale) .infoProduit .ficheInfo-quantite .selectQuantite .quantiteTag {
        margin: 0 10px;
        height: 30px;
        width: 30px;
    }
    .vignette-produit:not(.vignette-principale) .infoProduit .ficheInfo-quantite .selectQuantite button {
        height: 30px;
        width: 30px;
    }
    .vignette-produit:not(.vignette-principale) .infoProduit .ficheInfo-quantite .selectQuantite .selectedQuantite {
        width: 30px;
    }

    .vignette-produit:not(.vignette-principale) .infoProduit .ficheInfo-commandZone .ficheInfo-commandeButton {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 76px;
    }

    .vignette-produit:not(.vignette-principale) .infoProduit .ficheInfo-commandZone .ficheInfo-commandeButton .button-dropdown {
        margin-bottom: 0 !important;
        padding: 3px 8px !important;
        height: 100%;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-around !important;
    }
    .vignette-produit:not(.vignette-principale) .infoProduit .ficheInfo-commandZone .ficheInfo-commandeButton .button-dropdown button {
        margin: 0 !important;
    }
}

@media (min-width: 424.1px) and (max-width: 460px) {
    #container-view .subContainer .vignette-principale-container:not(:has(.no-comment)):not(:has(.no-images)):not(:has(.no-description)),
    #container-view .subContainer .vignette-principale-container:not(:has(.no-comment)):has(.no-images):not(:has(.no-description)),
    #container-view .subContainer .vignette-principale-container:not(:has(.no-comment)):not(:has(.no-images)):has(.no-description) {
        height: calc(390px + var(--produit-image-baseHeight)* var(--ratio-vignetteMobile));
    }
    #container-view .subContainer .vignette-principale-container:has(.no-comment) {
        height: calc(295px + var(--produit-image-baseHeight)* var(--ratio-vignetteMobile));
    }
    #container-view .subContainer .vignette-principale-container:not(:has(.no-comment)):has(.no-images):has(.no-description) {
        height: calc(260px + var(--produit-image-baseHeight)* var(--ratio-vignetteMobile));
    }

    .vignette-produit.vignette-principale {
        height: calc(140px + var(--produit-image-baseHeight)* var(--ratio-vignetteMobile));
    }

    .vignette-produit.vignette-principale .infoProduit .ficheInfo-commandZone .ficheInfo-options {
        margin-bottom: 10px;
    }
}

@media (min-width: 424.1px) and (max-width: 992px) {
	.conteneur:not(:has(.inputTag.modeMobile)) .lds-ellipsis { 
		margin-top: -64px; 
	} 
    .conteneur:has(.inputTag.modeMobile) .lds-ellipsis { 
		margin-top: -120px; 
	}
}

@media screen and (max-width: 424px) {

	.conteneur-catalogue:not(:has(.inputTag.modeMobile)) .lds-ellipsis { 
		margin-top: -112px; 
	}
	.conteneur-accueil:not(:has(.inputTag.modeMobile)) .lds-ellipsis { 
		margin-top: -64px; 
	} 
	/* ******************************************************** */
	/* HEADER */
	.mobileNavBar.modeMobile {
		width: 100%;
		padding: 0 0 8px 0;
		justify-content: flex-end;
	}
	
	#logo-navBar {
		width: 100%;
		justify-content: space-between;
	}
	
	#accountTag .accountLabel, #logo-navBar .accountLabel {
	    padding-top: 14px;
	    padding-bottom: 14px;
	}

	/* ******************************************************** */

	/* ******************************************************** */
	/* PAGE PRINCIPALE */

	.conteneur-catalogue:not(:has(.inputTag.modeMobile)) {
		padding-top: 112px !important;
	}
	.conteneur-catalogue:has(.inputTag.modeMobile) {
        padding-top: 168px !important;
    }

    /* ******************************************************** */

    /* BREAKPOINT : Vignette principale
        - passage ratio image de 0.8 � 0.7
    */
    .vignette-produit.vignette-principale {
        height: calc(140px + var(--produit-image-baseHeight)* var(--ratio-vignetteMobile-2));
    }
    .vignette-produit.vignette-principale .produit-image {
        width: calc(var(--produit-image-baseWidth) * var(--ratio-vignetteMobile-2));
        height: calc(var(--produit-image-baseHeight) * var(--ratio-vignetteMobile-2));
    }
    .vignette-produit .infoProduit {
        width: calc(100% - calc(var(--produit-image-baseWidth)* var(--ratio-vignetteMobile-2)));
        height: calc(var(--produit-image-baseHeight) * var(--ratio-vignetteMobile-2));
    }

    .options-header.withPrincipal, #tags-title {
        display: none !important;
    }

    .vignette-produit.vignette-principale .infoProduit .ficheInfo-comment .comment-section {
        min-width: unset !important;
    }
    .vignette-produit.vignette-principale .infoProduit .ficheInfo-comment .comment-section .ficheInfo-producteur {
        padding-left: 0;
    }
    .vignette-produit.vignette-principale .infoProduit .ficheInfo-comment .comment-section .ficheInfo-producteur .ficheInfo-producteur-container .description-container {
        margin-right: 0;
    }

}

@media (min-width: 370.1px) and (max-width: 424px) {
    #container-view .subContainer .vignette-principale-container:not(:has(.no-comment)):not(:has(.no-images)):not(:has(.no-description)),
    #container-view .subContainer .vignette-principale-container:not(:has(.no-comment)):has(.no-images):not(:has(.no-description)),
    #container-view .subContainer .vignette-principale-container:not(:has(.no-comment)):not(:has(.no-images)):has(.no-description) {
        height: calc(400px + var(--produit-image-baseHeight)* var(--ratio-vignetteMobile-2));
    }
    #container-view .subContainer .vignette-principale-container:has(.no-comment) {
        height: calc(298px + var(--produit-image-baseHeight)* var(--ratio-vignetteMobile-2));
    }
    #container-view .subContainer .vignette-principale-container:not(:has(.no-comment)):has(.no-images):has(.no-description) {
        height: calc(270px + var(--produit-image-baseHeight)* var(--ratio-vignetteMobile-2));
    }
}

@media screen and (max-width: 370px) {

    /* BREAKPOINT : Vignette Sous-Generique
        - passage mode mobile
    */
    .vignette-sousGenerique {
        width: calc(100% - 16px);
    }
    
    .vignette-sousGenerique .produit-image {
        width: calc(var(--produit-image-baseWidth) * var(--ratio-vignetteSousGenerique));
        height: calc(var(--produit-image-baseHeight) * var(--ratio-vignetteSousGenerique));
    }

    .vignette-sousGenerique .infoProduitSG {
        width: calc(100% - calc(var(--produit-image-baseWidth) * var(--ratio-vignetteSousGenerique)) ); 
    }

    #container-view .subContainer .vignette-principale-container:not(:has(.no-comment)):not(:has(.no-images)):not(:has(.no-description)) {
        height: calc(480px + var(--produit-image-baseHeight)* var(--ratio-vignetteMobile-2));
    }
    #container-view .subContainer .vignette-principale-container:has(.no-comment):not(:has(.no-images)):not(:has(.no-description)) {
        height: calc(378px + var(--produit-image-baseHeight)* var(--ratio-vignetteMobile-2));
    }
    #container-view .subContainer .vignette-principale-container:not(:has(.no-comment)):has(.no-images):has(.no-description) {
        height: calc(260px + var(--produit-image-baseHeight)* var(--ratio-vignetteMobile-2));
    }
    #container-view .subContainer .vignette-principale-container:not(:has(.no-comment)):has(.no-images):not(:has(.no-description)),
    #container-view .subContainer .vignette-principale-container:not(:has(.no-comment)):not(:has(.no-images)):has(.no-description) {
        height: calc(400px + var(--produit-image-baseHeight)* var(--ratio-vignetteMobile-2));
    }
    #container-view .subContainer .vignette-principale-container:has(.no-comment):has(.no-images):not(:has(.no-description)),
    #container-view .subContainer .vignette-principale-container:has(.no-comment):not(:has(.no-images)):has(.no-description)  {
        height: calc(298px + var(--produit-image-baseHeight)* var(--ratio-vignetteMobile-2));
    }

    .vignette-produit.vignette-principale .infoProduit {
        padding-left: 0;
    }
    .vignette-produit.vignette-principale .infoProduit .favoriteButton {
        right: 2px !important;
    }
    .vignette-produit.vignette-principale .infoProduit .ficheInfo-header .ficheInfo-title {
        width: calc(100% - 20px);
    }

    .vignette-produit.vignette-principale .infoProduit .ficheInfo-comment .comment-section .ficheInfo-producteur .ficheInfo-producteur-container .description-container {
        width: 100%;
        max-width: none;
    }


    /* BREAKPOINT : Vignette Produit non principal
        - passage ratio image de 0.8 � 0.7
    */
    .vignette-produit:not(.vignette-principale) {
        height: calc( calc(var(--produit-image-baseHeight) * var(--ratio-vignetteMobile-2)) + 76px + 60px);
    }

    .vignette-produit:not(.vignette-principale) .infoProduit .ficheInfo-commandZone .ficheInfo-quantite {
        position: absolute;
        left: 0;
        bottom: 76px;
        margin: 0 auto;
    }
    .vignette-produit:not(.vignette-principale) .infoProduit .ficheInfo-commandZone .ficheInfo-quantite .selectQuantite .quantiteTag {
        margin: 0 30px;
    }
}

div.divVignette.col-xs-12.col-sm-6.col-md-6.col-lg-4.col-xl-3{
    padding-right: 5px !important;
    padding-left: 5px !important;
}

/* ################################################################################# */
/* ############################# ICONES CUSTOM ##################################### */
/* ################################################################################# */

.custom-icon {
    color: white;      
    display: block;
    height: var(--pseudo-ftSize);
    width: var(--pseudo-ftSize);
    background-repeat: no-repeat;
    background-size: contain;
}
.custom-icon.invert-color {
    filter: brightness(0) invert(1);
}
.custom-icon.pigwii-largeur {
    background-image: url(/webshop/icons/IconesPigwii/Largeur.svg);
}
.custom-icon.pigwii-taille {
    background-image: url(/webshop/icons/IconesPigwii/Taille.svg);
}
.custom-icon.svgrepocom-lilies {
	background-image: url(/webshop/icons/IconesAutres/lily-svgrepo-com.svg);
}
.custom-icon.gardening-svgrepo-com {
    background-image: url(/webshop/icons/IconesRosedor/gardening-svgrepo-com.svg);
}
.custom-icon.rosedor-accessoires {
    background-image: url(/webshop/icons/IconesRosedor/accessoires.svg);
}
.custom-icon.rosedor-bouquet {
    background-image: url(/webshop/icons/IconesRosedor/bouquet.svg);
}
.custom-icon.rosedor-bouquet.custom-icon-bold {
    background-image: url(/webshop/icons/IconesRosedor/bouquet-bold.svg);
}
.custom-icon.rosedor-box-3d-50 {
    background-image: url(/webshop/icons/IconesRosedor/box-3d-50.svg);
}
.custom-icon.rosedor-box-3d-50.custom-icon-medium {
    background-image: url(/webshop/icons/IconesRosedor/box-3d-50-medium.svg);
}
.custom-icon.rosedor-cheque-3 {
    background-image: url(/webshop/icons/IconesRosedor/cheque-3.svg);
}
.custom-icon.rosedor-cheque-3.custom-icon-bold {
    background-image: url(/webshop/icons/IconesRosedor/cheque-3.svg);
}
.custom-icon.rosedor-compte {
    background-image: url(/webshop/icons/IconesRosedor/compte.svg);
}
.custom-icon.rosedor-discount-2 {
    background-image: url(/webshop/icons/IconesRosedor/discount-2.svg);
}
.custom-icon.rosedor-discount-2.custom-icon-bold {
    background-image: url(/webshop/icons/IconesRosedor/discount-2-bold.svg);
}
.custom-icon.rosedor-download-2 {
    background-image: url(/webshop/icons/IconesRosedor/download-2.svg);
}
.custom-icon.rosedor-flower-07 {
    background-image: url(/webshop/icons/IconesRosedor/flower-07.svg);
}
.custom-icon.rosedor-flower-07.custom-icon-medium {
    background-image: url(/webshop/icons/IconesRosedor/flower-07-medium.svg);
}
.custom-icon.rosedor-food-scale {
    background-image: url(/webshop/icons/IconesRosedor/food-scale.svg);
}
.custom-icon.rosedor-logo-facebook {
    background-image: url(/webshop/icons/IconesRosedor/logo-facebook.svg);
}
.custom-icon.rosedor-logo-instagram {
    background-image: url(/webshop/icons/IconesRosedor/logo-instagram.svg);
}
.custom-icon.rosedor-logo-youtube {
    background-image: url(/webshop/icons/IconesRosedor/logo-youtube.svg);
}
.custom-icon.rosedor-logout {
    background-image: url(/webshop/icons/IconesRosedor/logout.svg);
}
.custom-icon.rosedor-loupe {
    background-image: url(/webshop/icons/IconesRosedor/loupe.svg);
}
.custom-icon.rosedor-measure-02 {
    background-image: url(/webshop/icons/IconesRosedor/measure-02.svg);
}
.custom-icon.rosedor-measurement {
    background-image: url(/webshop/icons/IconesRosedor/measurement.svg);
}
.custom-icon.rosedor-plant-vase {
    background-image: url(/webshop/icons/IconesRosedor/plant-vase.svg);
}
.custom-icon.rosedor-setup-preferences {
    background-image: url(/webshop/icons/IconesRosedor/setup-preferences.svg);
}
.custom-icon.rosedor-shopping-cart {
    background-image: url(/webshop/icons/IconesRosedor/shopping-cart.svg);
}

.custom-icon.flag.as, .custom-icon.flag.ads {
    /* Afrique du Sud */
    background-image: url(/webshop/icons/Pays/south-africa.svg);
}
.custom-icon.flag.au {
    /* Australie */
    background-image: url(/webshop/icons/Pays/australia.svg);
}
.custom-icon.flag.ba, .custom-icon.flag.id, .custom-icon.flag.bs {
    /* Bali, Indon�sie */
    background-image: url(/webshop/icons/Pays/indonesia.svg);
}
.custom-icon.flag.be {
    /* Belgique */
    background-image: url(/webshop/icons/Pays/belgium.svg);
}
.custom-icon.flag.br {
    /* Br�sil */
    background-image: url(/webshop/icons/Pays/brazil.svg);
}
.custom-icon.flag.ca, .custom-icon.flag.cm {
    /* Cameroun */
    background-image: url(/webshop/icons/Pays/cameroon.svg);
}
.custom-icon.flag.co, .custom-icon.flag.col {
    /* Colombie */
    background-image: url(/webshop/icons/Pays/colombia.svg);
}
.custom-icon.flag.cr {
    /* Costa Rica */
    background-image: url(/webshop/icons/Pays/costarica.svg);
}
.custom-icon.flag.de {
    /* Allemagne */
    background-image: url(/webshop/icons/Pays/germany.svg);
}
.custom-icon.flag.ec, .custom-icon.flag.eq {
    /* Equateur */
    background-image: url(/webshop/icons/Pays/ecuador.svg);
}
.custom-icon.flag.es, .custom-icon.flag.esp {
    /* Espagne */
    background-image: url(/webshop/icons/Pays/spain.svg);
}
.custom-icon.flag.et {
    /* Ethiopie */
    background-image: url(/webshop/icons/Pays/ethiopia.svg);
}
.custom-icon.flag.fl, .custom-icon.flag.eu {
    /* Floride, Etats-Unis */
    background-image: url(/webshop/icons/Pays/usa.svg);
}
.custom-icon.flag.fr, .custom-icon.flag.fra {
    /* France */
    background-image: url(/webshop/icons/Pays/france.svg);
}
.custom-icon.flag.it, .custom-icon.flag.ita {
    /* Italie */
    background-image: url(/webshop/icons/Pays/italy.svg);
}
.custom-icon.flag.ke {
    /* Kenya */
    background-image: url(/webshop/icons/Pays/kenya.svg);
}
.custom-icon.flag.nl {
    /* Pays-Bas,Hollande */
    background-image: url(/webshop/icons/Pays/netherlands.svg);
}
.custom-icon.flag.pe {
    /* P�rou */
    background-image: url(/webshop/icons/Pays/peru.svg);
}
.custom-icon.flag.po, .custom-icon.flag.pt {
    /* Portugal */
    background-image: url(/webshop/icons/Pays/portugal.svg);
}
.custom-icon.flag.si, .custom-icon.flag.sin {
    /* Singapour */
    background-image: url(/webshop/icons/Pays/singapore.svg);
}
.custom-icon.flag.ta, .custom-icon.flag.tw {
    /* Taiwan */
    background-image: url(/webshop/icons/Pays/taiwan.svg);
}
.custom-icon.flag.vi, .custom-icon.flag.vie {
    /* Vietnam */
    background-image: url(/webshop/icons/Pays/vietnam.svg);
}

/* ################################################################################# */
/* ################################################################################# */
/* ################################################################################# */