@media screen and (max-width:814px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{
		position:relative;
		align-self:start;
		display:block;
		text-align:left;
		vertical-align:middle;
		z-index:11;

		height:40px;
		width:40px;
		padding:1px;
		margin:1px;

		border-radius:5px; } 
#menuD-container> .top-nav-label {
	position: relative;
	height: 2.5rem;
	width: 2.5rem;
	border-radius: 0.1875rem;
	cursor: pointer;
	display: block;
	font-size: 0;
	margin: 0;
	overflow: hidden;
	padding: 1px;
	text-align:center;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu::before,
#menuD-container> .top-nav-label .open-close-menu::after {
	content: "";
	display: block;
	position: absolute;
	background-color: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0;
	width: 100%;
	transition-duration: 0.3s, 0.3s;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::before {
	top: -0.6875rem;
	transform-origin: top;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::after {
	bottom: -0.6875rem;
	transform-origin: bottom;
	margin:auto;
}

#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
  background: none;
  transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	left: 0.125rem;
	transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
	top: 0px;
	transform: rotate(45deg);
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	bottom: 0;
	transform: rotate(-45deg);
	text-align:center;margin:0;vertical-align:middle;
}

#menuDeroulantBarre {display: none; }

#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
	display: block;
}
#menuDeroulantBarre{
		position:relative;
		padding:7px;
		margin:auto;
		text-align:left; 
		z-index:2;
		border-radius:3px;
		max-height:80%;
		width:99%;
		max-width: 100%;
	} 
.menuDeroulantItem {
		left:1px;
		text-align:left;
		width:auto;
		border-radius:3px;
		z-index:0;
		width:98%;

	}
.texteMenus {
		z-index:2;
		text-align:left;
		padding:0px;
		margin:0px;
		border-radius:3px;
		display: contents;
	}
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
		position:relative;
		/* display:table; */
		left:130px;
		top:-30px;
		height:100%;
		margin:auto;
		z-index:3;
		margin-left:20px;
		border-radius:3px;
	} 
.sousMenuBarre {
		height:100%;
		width:70%;
		margin:auto;
		z-index:10;
		left:130px;
		border-radius:3px;
		padding-bottom:0px;
		margin-left:20px;
		position:absolute;
		top:0px;
		height: max-content;

	} 
.sousMenuItem{
		height:100%;
		padding:1px;
		margin:1px;
	} 
.familles-img {
		display:none;
		width:2px;
	}
#familles-container{
		background:white;
		left:0px;
		display: flex;
		flex-direction: column;
		justify-content:space-around;
		position:absolute;
		flex-wrap: wrap;
		justify-content: flex-start;

		height:150px;
		z-index:4;
		border:0px;
		width:100%;
	}
.familles-boite{
		white-space:break-spaces;
		padding:0px;
		margin:0px;
		max-height:37px;
	}
.familles-libelle {
		white-space:break-spaces;
		padding:0px;
	}
#sousCat-container{
		border-radius:3px;
	}
.categoriesImages {
		text-align:right;
	}
#rechBarre-container{
		left : 10%; 
		grid-column: 1 / span 4;
		grid-column-gap:3px;
		margin:0;
		margin:1px;
		padding-top:7px;
		padding-left:28px;
		justify-self:center;
	} 
#rechItem{
		margin:0px;
		padding:0px;
		padding-left:30px;
		left:10%;
	} 
#rechInput{
		margin:0px;
		padding:0px;
	} 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
} 
@media screen and (max-width:800px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{
		position:relative;
		align-self:start;
		display:block;
		text-align:left;
		vertical-align:middle;
		z-index:11;

		height:40px;
		width:40px;
		padding:1px;
		margin:1px;

		border-radius:5px; } 
#menuD-container> .top-nav-label {
	position: relative;
	height: 2.5rem;
	width: 2.5rem;
	border-radius: 0.1875rem;
	cursor: pointer;
	display: block;
	font-size: 0;
	margin: 0;
	overflow: hidden;
	padding: 1px;
	text-align:center;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu::before,
#menuD-container> .top-nav-label .open-close-menu::after {
	content: "";
	display: block;
	position: absolute;
	background-color: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0;
	width: 100%;
	transition-duration: 0.3s, 0.3s;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::before {
	top: -0.6875rem;
	transform-origin: top;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::after {
	bottom: -0.6875rem;
	transform-origin: bottom;
	margin:auto;
}

#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
  background: none;
  transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	left: 0.125rem;
	transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
	top: 0px;
	transform: rotate(45deg);
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	bottom: 0;
	transform: rotate(-45deg);
	text-align:center;margin:0;vertical-align:middle;
}

#menuDeroulantBarre {display: none; }

#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
	display: block;
}
#menuDeroulantBarre{
		position:relative;
		padding:7px;
		margin:auto;
		text-align:left; 
		z-index:2;
		border-radius:3px;
		max-height:80%;
		width:99%;
		max-width: 100%;
	} 
.menuDeroulantItem {
		left:1px;
		text-align:left;
		width:auto;
		border-radius:3px;
		z-index:0;
		width:98%;

	}
.texteMenus {
		z-index:2;
		text-align:left;
		padding:0px;
		margin:0px;
		border-radius:3px;
		display: contents;
	}
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
		position:relative;
		/* display:table; */
		left:130px;
		top:-30px;
		height:100%;
		margin:auto;
		z-index:3;
		margin-left:20px;
		border-radius:3px;
	} 
.sousMenuBarre {
		height:100%;
		width:70%;
		margin:auto;
		z-index:10;
		left:130px;
		border-radius:3px;
		padding-bottom:0px;
		margin-left:20px;
		position:absolute;
		top:0px;
		height: max-content;

	} 
.sousMenuItem{
		height:100%;
		padding:1px;
		margin:1px;
	} 
.familles-img {
		display:none;
		width:2px;
	}
#familles-container{
		background:white;
		left:0px;
		display: flex;
		flex-direction: column;
		justify-content:space-around;
		position:absolute;
		flex-wrap: wrap;
		justify-content: flex-start;

		height:150px;
		z-index:4;
		border:0px;
		width:100%;
	}
.familles-boite{
		white-space:break-spaces;
		padding:0px;
		margin:0px;
		max-height:37px;
	}
.familles-libelle {
		white-space:break-spaces;
		padding:0px;
	}
#sousCat-container{
		border-radius:3px;
	}
.categoriesImages {
		text-align:right;
	}
#rechBarre-container{
		left : 10%; 
		grid-column: 1 / span 4;
		grid-column-gap:3px;
		margin:0;
		margin:1px;
		padding-top:7px;
		padding-left:28px;
		justify-self:center;
	} 
#rechItem{
		margin:0px;
		padding:0px;
		padding-left:30px;
		left:10%;
	} 
#rechInput{
		margin:0px;
		padding:0px;
	} 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
} 
@media screen and (max-width:764px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{
		position:relative;
		align-self:start;
		display:block;
		text-align:left;
		vertical-align:middle;
		z-index:11;

		height:40px;
		width:40px;
		padding:1px;
		margin:1px;

		border-radius:5px; } 
#menuD-container> .top-nav-label {
	position: relative;
	height: 2.5rem;
	width: 2.5rem;
	border-radius: 0.1875rem;
	cursor: pointer;
	display: block;
	font-size: 0;
	margin: 0;
	overflow: hidden;
	padding: 1px;
	text-align:center;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu::before,
#menuD-container> .top-nav-label .open-close-menu::after {
	content: "";
	display: block;
	position: absolute;
	background-color: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0;
	width: 100%;
	transition-duration: 0.3s, 0.3s;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::before {
	top: -0.6875rem;
	transform-origin: top;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::after {
	bottom: -0.6875rem;
	transform-origin: bottom;
	margin:auto;
}

#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
  background: none;
  transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	left: 0.125rem;
	transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
	top: 0px;
	transform: rotate(45deg);
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	bottom: 0;
	transform: rotate(-45deg);
	text-align:center;margin:0;vertical-align:middle;
}

#menuDeroulantBarre {display: none; }

#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
	display: block;
}
#menuDeroulantBarre{
		position:relative;
		padding:7px;
		margin:auto;
		text-align:left; 
		z-index:2;
		border-radius:3px;
		max-height:80%;
		width:99%;
		max-width: 100%;
	} 
.menuDeroulantItem {
		left:1px;
		text-align:left;
		width:auto;
		border-radius:3px;
		z-index:0;
		width:98%;

	}
.texteMenus {
		z-index:2;
		text-align:left;
		padding:0px;
		margin:0px;
		border-radius:3px;
		display: contents;
	}
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
		position:relative;
		/* display:table; */
		left:130px;
		top:-30px;
		height:100%;
		margin:auto;
		z-index:3;
		margin-left:20px;
		border-radius:3px;
	} 
.sousMenuBarre {
		height:100%;
		width:70%;
		margin:auto;
		z-index:10;
		left:130px;
		border-radius:3px;
		padding-bottom:0px;
		margin-left:20px;
		position:absolute;
		top:0px;
		height: max-content;

	} 
.sousMenuItem{
		height:100%;
		padding:1px;
		margin:1px;
	} 
.familles-img {
		display:none;
		width:2px;
	}
#familles-container{
		background:white;
		left:0px;
		display: flex;
		flex-direction: column;
		justify-content:space-around;
		position:absolute;
		flex-wrap: wrap;
		justify-content: flex-start;

		height:150px;
		z-index:4;
		border:0px;
		width:100%;
	}
.familles-boite{
		white-space:break-spaces;
		padding:0px;
		margin:0px;
		max-height:37px;
	}
.familles-libelle {
		white-space:break-spaces;
		padding:0px;
	}
#sousCat-container{
		border-radius:3px;
	}
.categoriesImages {
		text-align:right;
	}
#rechBarre-container{
		left : 10%; 
		grid-column: 1 / span 4;
		grid-column-gap:3px;
		margin:0;
		margin:1px;
		padding-top:7px;
		padding-left:28px;
		justify-self:center;
	} 
#rechItem{
		margin:0px;
		padding:0px;
		padding-left:30px;
		left:10%;
	} 
#rechInput{
		margin:0px;
		padding:0px;
	} 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
* {font-size:1rem;} 
#devise {display:none;} 
#header-container {grid-template-columns: 10% 20% 20% 20% 25%; height:10px;} 
#imgTitre {margin-top:18px; height:100%; line-height:30px; font-size:1.4rem; } 
#eCol2 {margin:auto; height:100%; } 
#menuIndep-container {display:none; width:0px; height:0px;} 
#rechInput {padding:0;font-size:1rem; margin:auto;} 
#container-usrSiteMsg {grid-column:1 / span 4;} 
#menuDeroulantBarre>li:first-child {display:block; } 
#messCom {font-size:1rem;} 
#barreClientContainer, #pageConnexion {display:flex;flex-direction:column;justify-content:space-around;} 
#spinnerPopup, .spinnerPopup {top: 10px; width:80%;	} 
.tableCatalogue {display:block;} 
.prix {display:block; margin:auto; text-align: center;} 
} 
@media screen and (max-width:731px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{
		position:relative;
		align-self:start;
		display:block;
		text-align:left;
		vertical-align:middle;
		z-index:11;

		height:40px;
		width:40px;
		padding:1px;
		margin:1px;

		border-radius:5px; } 
#menuD-container> .top-nav-label {
	position: relative;
	height: 2.5rem;
	width: 2.5rem;
	border-radius: 0.1875rem;
	cursor: pointer;
	display: block;
	font-size: 0;
	margin: 0;
	overflow: hidden;
	padding: 1px;
	text-align:center;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu::before,
#menuD-container> .top-nav-label .open-close-menu::after {
	content: "";
	display: block;
	position: absolute;
	background-color: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0;
	width: 100%;
	transition-duration: 0.3s, 0.3s;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::before {
	top: -0.6875rem;
	transform-origin: top;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::after {
	bottom: -0.6875rem;
	transform-origin: bottom;
	margin:auto;
}

#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
  background: none;
  transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	left: 0.125rem;
	transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
	top: 0px;
	transform: rotate(45deg);
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	bottom: 0;
	transform: rotate(-45deg);
	text-align:center;margin:0;vertical-align:middle;
}

#menuDeroulantBarre {display: none; }

#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
	display: block;
}
#menuDeroulantBarre{
		position:relative;
		padding:7px;
		margin:auto;
		text-align:left; 
		z-index:2;
		border-radius:3px;
		max-height:80%;
		width:99%;
		max-width: 100%;
	} 
.menuDeroulantItem {
		left:1px;
		text-align:left;
		width:auto;
		border-radius:3px;
		z-index:0;
		width:98%;

	}
.texteMenus {
		z-index:2;
		text-align:left;
		padding:0px;
		margin:0px;
		border-radius:3px;
		display: contents;
	}
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
		position:relative;
		/* display:table; */
		left:130px;
		top:-30px;
		height:100%;
		margin:auto;
		z-index:3;
		margin-left:20px;
		border-radius:3px;
	} 
.sousMenuBarre {
		height:100%;
		width:70%;
		margin:auto;
		z-index:10;
		left:130px;
		border-radius:3px;
		padding-bottom:0px;
		margin-left:20px;
		position:absolute;
		top:0px;
		height: max-content;

	} 
.sousMenuItem{
		height:100%;
		padding:1px;
		margin:1px;
	} 
.familles-img {
		display:none;
		width:2px;
	}
#familles-container{
		background:white;
		left:0px;
		display: flex;
		flex-direction: column;
		justify-content:space-around;
		position:absolute;
		flex-wrap: wrap;
		justify-content: flex-start;

		height:150px;
		z-index:4;
		border:0px;
		width:100%;
	}
.familles-boite{
		white-space:break-spaces;
		padding:0px;
		margin:0px;
		max-height:37px;
	}
.familles-libelle {
		white-space:break-spaces;
		padding:0px;
	}
#sousCat-container{
		border-radius:3px;
	}
.categoriesImages {
		text-align:right;
	}
#rechBarre-container{
		left : 10%; 
		grid-column: 1 / span 4;
		grid-column-gap:3px;
		margin:0;
		margin:1px;
		padding-top:7px;
		padding-left:28px;
		justify-self:center;
	} 
#rechItem{
		margin:0px;
		padding:0px;
		padding-left:30px;
		left:10%;
	} 
#rechInput{
		margin:0px;
		padding:0px;
	} 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
* {font-size:1rem;} 
#devise {display:none;} 
#header-container {grid-template-columns: 10% 20% 20% 20% 25%; height:10px;} 
#imgTitre {margin-top:18px; height:100%; line-height:30px; font-size:1.4rem; } 
#eCol2 {margin:auto; height:100%; } 
#menuIndep-container {display:none; width:0px; height:0px;} 
#rechInput {padding:0;font-size:1rem; margin:auto;} 
#container-usrSiteMsg {grid-column:1 / span 4;} 
#menuDeroulantBarre>li:first-child {display:block; } 
#messCom {font-size:1rem;} 
#barreClientContainer, #pageConnexion {display:flex;flex-direction:column;justify-content:space-around;} 
#spinnerPopup, .spinnerPopup {top: 10px; width:80%;	} 
.tableCatalogue {display:block;} 
.prix {display:block; margin:auto; text-align: center;} 
} 
@media screen and (max-width:720px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{
		position:relative;
		align-self:start;
		display:block;
		text-align:left;
		vertical-align:middle;
		z-index:11;

		height:40px;
		width:40px;
		padding:1px;
		margin:1px;

		border-radius:5px; } 
#menuD-container> .top-nav-label {
	position: relative;
	height: 2.5rem;
	width: 2.5rem;
	border-radius: 0.1875rem;
	cursor: pointer;
	display: block;
	font-size: 0;
	margin: 0;
	overflow: hidden;
	padding: 1px;
	text-align:center;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu::before,
#menuD-container> .top-nav-label .open-close-menu::after {
	content: "";
	display: block;
	position: absolute;
	background-color: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0;
	width: 100%;
	transition-duration: 0.3s, 0.3s;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::before {
	top: -0.6875rem;
	transform-origin: top;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::after {
	bottom: -0.6875rem;
	transform-origin: bottom;
	margin:auto;
}

#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
  background: none;
  transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	left: 0.125rem;
	transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
	top: 0px;
	transform: rotate(45deg);
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	bottom: 0;
	transform: rotate(-45deg);
	text-align:center;margin:0;vertical-align:middle;
}

#menuDeroulantBarre {display: none; }

#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
	display: block;
}
#menuDeroulantBarre{
		position:relative;
		padding:7px;
		margin:auto;
		text-align:left; 
		z-index:2;
		border-radius:3px;
		max-height:80%;
		width:99%;
		max-width: 100%;
	} 
.menuDeroulantItem {
		left:1px;
		text-align:left;
		width:auto;
		border-radius:3px;
		z-index:0;
		width:98%;

	}
.texteMenus {
		z-index:2;
		text-align:left;
		padding:0px;
		margin:0px;
		border-radius:3px;
		display: contents;
	}
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
		position:relative;
		/* display:table; */
		left:130px;
		top:-30px;
		height:100%;
		margin:auto;
		z-index:3;
		margin-left:20px;
		border-radius:3px;
	} 
.sousMenuBarre {
		height:100%;
		width:70%;
		margin:auto;
		z-index:10;
		left:130px;
		border-radius:3px;
		padding-bottom:0px;
		margin-left:20px;
		position:absolute;
		top:0px;
		height: max-content;

	} 
.sousMenuItem{
		height:100%;
		padding:1px;
		margin:1px;
	} 
.familles-img {
		display:none;
		width:2px;
	}
#familles-container{
		background:white;
		left:0px;
		display: flex;
		flex-direction: column;
		justify-content:space-around;
		position:absolute;
		flex-wrap: wrap;
		justify-content: flex-start;

		height:150px;
		z-index:4;
		border:0px;
		width:100%;
	}
.familles-boite{
		white-space:break-spaces;
		padding:0px;
		margin:0px;
		max-height:37px;
	}
.familles-libelle {
		white-space:break-spaces;
		padding:0px;
	}
#sousCat-container{
		border-radius:3px;
	}
.categoriesImages {
		text-align:right;
	}
#rechBarre-container{
		left : 10%; 
		grid-column: 1 / span 4;
		grid-column-gap:3px;
		margin:0;
		margin:1px;
		padding-top:7px;
		padding-left:28px;
		justify-self:center;
	} 
#rechItem{
		margin:0px;
		padding:0px;
		padding-left:30px;
		left:10%;
	} 
#rechInput{
		margin:0px;
		padding:0px;
	} 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
* {font-size:1rem;} 
#devise {display:none;} 
#header-container {grid-template-columns: 10% 20% 20% 20% 25%; height:10px;} 
#imgTitre {margin-top:18px; height:100%; line-height:30px; font-size:1.4rem; } 
#eCol2 {margin:auto; height:100%; } 
#menuIndep-container {display:none; width:0px; height:0px;} 
#rechInput {padding:0;font-size:1rem; margin:auto;} 
#container-usrSiteMsg {grid-column:1 / span 4;} 
#menuDeroulantBarre>li:first-child {display:block; } 
#messCom {font-size:1rem;} 
#barreClientContainer, #pageConnexion {display:flex;flex-direction:column;justify-content:space-around;} 
#spinnerPopup, .spinnerPopup {top: 10px; width:80%;	} 
.tableCatalogue {display:block;} 
.prix {display:block; margin:auto; text-align: center;} 
} 
@media screen and (max-width:667px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{
		position:relative;
		align-self:start;
		display:block;
		text-align:left;
		vertical-align:middle;
		z-index:11;

		height:40px;
		width:40px;
		padding:1px;
		margin:1px;

		border-radius:5px; } 
#menuD-container> .top-nav-label {
	position: relative;
	height: 2.5rem;
	width: 2.5rem;
	border-radius: 0.1875rem;
	cursor: pointer;
	display: block;
	font-size: 0;
	margin: 0;
	overflow: hidden;
	padding: 1px;
	text-align:center;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu::before,
#menuD-container> .top-nav-label .open-close-menu::after {
	content: "";
	display: block;
	position: absolute;
	background-color: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0;
	width: 100%;
	transition-duration: 0.3s, 0.3s;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::before {
	top: -0.6875rem;
	transform-origin: top;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::after {
	bottom: -0.6875rem;
	transform-origin: bottom;
	margin:auto;
}

#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
  background: none;
  transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	left: 0.125rem;
	transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
	top: 0px;
	transform: rotate(45deg);
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	bottom: 0;
	transform: rotate(-45deg);
	text-align:center;margin:0;vertical-align:middle;
}

#menuDeroulantBarre {display: none; }

#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
	display: block;
}
#menuDeroulantBarre{
		position:relative;
		padding:7px;
		margin:auto;
		text-align:left; 
		z-index:2;
		border-radius:3px;
		max-height:80%;
		width:99%;
		max-width: 100%;
	} 
.menuDeroulantItem {
		left:1px;
		text-align:left;
		width:auto;
		border-radius:3px;
		z-index:0;
		width:98%;

	}
.texteMenus {
		z-index:2;
		text-align:left;
		padding:0px;
		margin:0px;
		border-radius:3px;
		display: contents;
	}
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
		position:relative;
		/* display:table; */
		left:130px;
		top:-30px;
		height:100%;
		margin:auto;
		z-index:3;
		margin-left:20px;
		border-radius:3px;
	} 
.sousMenuBarre {
		height:100%;
		width:70%;
		margin:auto;
		z-index:10;
		left:130px;
		border-radius:3px;
		padding-bottom:0px;
		margin-left:20px;
		position:absolute;
		top:0px;
		height: max-content;

	} 
.sousMenuItem{
		height:100%;
		padding:1px;
		margin:1px;
	} 
.familles-img {
		display:none;
		width:2px;
	}
#familles-container{
		background:white;
		left:0px;
		display: flex;
		flex-direction: column;
		justify-content:space-around;
		position:absolute;
		flex-wrap: wrap;
		justify-content: flex-start;

		height:150px;
		z-index:4;
		border:0px;
		width:100%;
	}
.familles-boite{
		white-space:break-spaces;
		padding:0px;
		margin:0px;
		max-height:37px;
	}
.familles-libelle {
		white-space:break-spaces;
		padding:0px;
	}
#sousCat-container{
		border-radius:3px;
	}
.categoriesImages {
		text-align:right;
	}
#rechBarre-container{
		left : 10%; 
		grid-column: 1 / span 4;
		grid-column-gap:3px;
		margin:0;
		margin:1px;
		padding-top:7px;
		padding-left:28px;
		justify-self:center;
	} 
#rechItem{
		margin:0px;
		padding:0px;
		padding-left:30px;
		left:10%;
	} 
#rechInput{
		margin:0px;
		padding:0px;
	} 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
* {font-size:1rem;} 
#devise {display:none;} 
#header-container {grid-template-columns: 10% 20% 20% 20% 25%; height:10px;} 
#imgTitre {margin-top:18px; height:100%; line-height:30px; font-size:1.4rem; } 
#eCol2 {margin:auto; height:100%; } 
#menuIndep-container {display:none; width:0px; height:0px;} 
#rechInput {padding:0;font-size:1rem; margin:auto;} 
#container-usrSiteMsg {grid-column:1 / span 4;} 
#menuDeroulantBarre>li:first-child {display:block; } 
#messCom {font-size:1rem;} 
#barreClientContainer, #pageConnexion {display:flex;flex-direction:column;justify-content:space-around;} 
#spinnerPopup, .spinnerPopup {top: 10px; width:80%;	} 
.tableCatalogue {display:block;} 
.prix {display:block; margin:auto; text-align: center;} 
} 
@media screen and (max-width:653px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{
		position:relative;
		align-self:start;
		display:block;
		text-align:left;
		vertical-align:middle;
		z-index:11;

		height:40px;
		width:40px;
		padding:1px;
		margin:1px;

		border-radius:5px; } 
#menuD-container> .top-nav-label {
	position: relative;
	height: 2.5rem;
	width: 2.5rem;
	border-radius: 0.1875rem;
	cursor: pointer;
	display: block;
	font-size: 0;
	margin: 0;
	overflow: hidden;
	padding: 1px;
	text-align:center;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu::before,
#menuD-container> .top-nav-label .open-close-menu::after {
	content: "";
	display: block;
	position: absolute;
	background-color: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0;
	width: 100%;
	transition-duration: 0.3s, 0.3s;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::before {
	top: -0.6875rem;
	transform-origin: top;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::after {
	bottom: -0.6875rem;
	transform-origin: bottom;
	margin:auto;
}

#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
  background: none;
  transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	left: 0.125rem;
	transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
	top: 0px;
	transform: rotate(45deg);
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	bottom: 0;
	transform: rotate(-45deg);
	text-align:center;margin:0;vertical-align:middle;
}

#menuDeroulantBarre {display: none; }

#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
	display: block;
}
#menuDeroulantBarre{
		position:relative;
		padding:7px;
		margin:auto;
		text-align:left; 
		z-index:2;
		border-radius:3px;
		max-height:80%;
		width:99%;
		max-width: 100%;
	} 
.menuDeroulantItem {
		left:1px;
		text-align:left;
		width:auto;
		border-radius:3px;
		z-index:0;
		width:98%;

	}
.texteMenus {
		z-index:2;
		text-align:left;
		padding:0px;
		margin:0px;
		border-radius:3px;
		display: contents;
	}
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
		position:relative;
		/* display:table; */
		left:130px;
		top:-30px;
		height:100%;
		margin:auto;
		z-index:3;
		margin-left:20px;
		border-radius:3px;
	} 
.sousMenuBarre {
		height:100%;
		width:70%;
		margin:auto;
		z-index:10;
		left:130px;
		border-radius:3px;
		padding-bottom:0px;
		margin-left:20px;
		position:absolute;
		top:0px;
		height: max-content;

	} 
.sousMenuItem{
		height:100%;
		padding:1px;
		margin:1px;
	} 
.familles-img {
		display:none;
		width:2px;
	}
#familles-container{
		background:white;
		left:0px;
		display: flex;
		flex-direction: column;
		justify-content:space-around;
		position:absolute;
		flex-wrap: wrap;
		justify-content: flex-start;

		height:150px;
		z-index:4;
		border:0px;
		width:100%;
	}
.familles-boite{
		white-space:break-spaces;
		padding:0px;
		margin:0px;
		max-height:37px;
	}
.familles-libelle {
		white-space:break-spaces;
		padding:0px;
	}
#sousCat-container{
		border-radius:3px;
	}
.categoriesImages {
		text-align:right;
	}
#rechBarre-container{
		left : 10%; 
		grid-column: 1 / span 4;
		grid-column-gap:3px;
		margin:0;
		margin:1px;
		padding-top:7px;
		padding-left:28px;
		justify-self:center;
	} 
#rechItem{
		margin:0px;
		padding:0px;
		padding-left:30px;
		left:10%;
	} 
#rechInput{
		margin:0px;
		padding:0px;
	} 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
.flexToColumn {display:flex; flex-direction:column;}
#ongletBarre li {min-width:50%}
#itemMaint {width:85%} 
#btnAdminText {max-width:50%; color:transparent; text-indent:-99px; left:0px; position:relative; padding:0px; font-size:0px; white-space:break-spaces; width:5px;} 
#btnAdminText::after {color:white; content:"Administration";left:1px; font-size:1rem; padding-left:1px; padding-right:1px;} 
.pageConnexion {padding:0px; margin:0px;} 
.libConnCell {grid-column:1 / span 2; text-align:center;} 
.champsConn {width:95%;} 
.libClientsCell {margin:1px; padding:1px;} 
#tableCli {grid-column:1 / span 4;} 
#syntheseLignes {grid-column:1 / span 2; } 
#blocSynthese {grid-column:1 / span 2; grid-row:3; margin:auto; margin-top:2%; margin-bottom:20px; padding:0px; width:100%;} 
.blocItemPanier {margin:auto; width:100%;} 
#recapContainer {grid-column:1 / span 2;} 
#etapesContainer {display:flex; flex-direction:column;} 
#hiddenColonne {display:none; visibility: hidden; width:0px;} 
.hiddenColonne {display:none; visibility: hidden; width:0px;} 
.c64 {grid-column:4;} 
.c75 {grid-column:5;} 
#c64 {grid-column:4;} 
#c75 {grid-column:5;} 
#tableMesCdes {grid-template-columns:10% 25% 25% 20% 20%; grid-column-gap:0px;} 
#detailResponsiv {grid-column:1 / span 4;} 
#pdpBarre {display:flex; flex-direction:column;} 
#etapesContainer {display:flex; flex-direction:column;} 
.gondole-container {display:flex; flex-direction:column; justify-content:space-around; align-content:center; margin:auto; margin-bottom:15px; text-align:center;} 
.grid1to2 {grid-column: 1 / span 2;}
.tablePanier {display:flex;flex-direction:column;} 
.tablePanier>#tableCli {display:grid; grid-column:1 / span 2; grid-row:1;} 
.catalogueImgPrd {max-width:110px;} 
} 
@media screen and (max-width:640px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{
		position:relative;
		align-self:start;
		display:block;
		text-align:left;
		vertical-align:middle;
		z-index:11;

		height:40px;
		width:40px;
		padding:1px;
		margin:1px;

		border-radius:5px; } 
#menuD-container> .top-nav-label {
	position: relative;
	height: 2.5rem;
	width: 2.5rem;
	border-radius: 0.1875rem;
	cursor: pointer;
	display: block;
	font-size: 0;
	margin: 0;
	overflow: hidden;
	padding: 1px;
	text-align:center;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu::before,
#menuD-container> .top-nav-label .open-close-menu::after {
	content: "";
	display: block;
	position: absolute;
	background-color: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0;
	width: 100%;
	transition-duration: 0.3s, 0.3s;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::before {
	top: -0.6875rem;
	transform-origin: top;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::after {
	bottom: -0.6875rem;
	transform-origin: bottom;
	margin:auto;
}

#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
  background: none;
  transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	left: 0.125rem;
	transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
	top: 0px;
	transform: rotate(45deg);
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	bottom: 0;
	transform: rotate(-45deg);
	text-align:center;margin:0;vertical-align:middle;
}

#menuDeroulantBarre {display: none; }

#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
	display: block;
}
#menuDeroulantBarre{
		position:relative;
		padding:7px;
		margin:auto;
		text-align:left; 
		z-index:2;
		border-radius:3px;
		max-height:80%;
		width:99%;
		max-width: 100%;
	} 
.menuDeroulantItem {
		left:1px;
		text-align:left;
		width:auto;
		border-radius:3px;
		z-index:0;
		width:98%;

	}
.texteMenus {
		z-index:2;
		text-align:left;
		padding:0px;
		margin:0px;
		border-radius:3px;
		display: contents;
	}
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
		position:relative;
		/* display:table; */
		left:130px;
		top:-30px;
		height:100%;
		margin:auto;
		z-index:3;
		margin-left:20px;
		border-radius:3px;
	} 
.sousMenuBarre {
		height:100%;
		width:70%;
		margin:auto;
		z-index:10;
		left:130px;
		border-radius:3px;
		padding-bottom:0px;
		margin-left:20px;
		position:absolute;
		top:0px;
		height: max-content;

	} 
.sousMenuItem{
		height:100%;
		padding:1px;
		margin:1px;
	} 
.familles-img {
		display:none;
		width:2px;
	}
#familles-container{
		background:white;
		left:0px;
		display: flex;
		flex-direction: column;
		justify-content:space-around;
		position:absolute;
		flex-wrap: wrap;
		justify-content: flex-start;

		height:150px;
		z-index:4;
		border:0px;
		width:100%;
	}
.familles-boite{
		white-space:break-spaces;
		padding:0px;
		margin:0px;
		max-height:37px;
	}
.familles-libelle {
		white-space:break-spaces;
		padding:0px;
	}
#sousCat-container{
		border-radius:3px;
	}
.categoriesImages {
		text-align:right;
	}
#rechBarre-container{
		left : 10%; 
		grid-column: 1 / span 4;
		grid-column-gap:3px;
		margin:0;
		margin:1px;
		padding-top:7px;
		padding-left:28px;
		justify-self:center;
	} 
#rechItem{
		margin:0px;
		padding:0px;
		padding-left:30px;
		left:10%;
	} 
#rechInput{
		margin:0px;
		padding:0px;
	} 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
.flexToColumn {display:flex; flex-direction:column;}
#ongletBarre li {min-width:50%}
#itemMaint {width:85%} 
#btnAdminText {max-width:50%; color:transparent; text-indent:-99px; left:0px; position:relative; padding:0px; font-size:0px; white-space:break-spaces; width:5px;} 
#btnAdminText::after {color:white; content:"Administration";left:1px; font-size:1rem; padding-left:1px; padding-right:1px;} 
.pageConnexion {padding:0px; margin:0px;} 
.libConnCell {grid-column:1 / span 2; text-align:center;} 
.champsConn {width:95%;} 
.libClientsCell {margin:1px; padding:1px;} 
#tableCli {grid-column:1 / span 4;} 
#syntheseLignes {grid-column:1 / span 2; } 
#blocSynthese {grid-column:1 / span 2; grid-row:3; margin:auto; margin-top:2%; margin-bottom:20px; padding:0px; width:100%;} 
.blocItemPanier {margin:auto; width:100%;} 
#recapContainer {grid-column:1 / span 2;} 
#etapesContainer {display:flex; flex-direction:column;} 
#hiddenColonne {display:none; visibility: hidden; width:0px;} 
.hiddenColonne {display:none; visibility: hidden; width:0px;} 
.c64 {grid-column:4;} 
.c75 {grid-column:5;} 
#c64 {grid-column:4;} 
#c75 {grid-column:5;} 
#tableMesCdes {grid-template-columns:10% 25% 25% 20% 20%; grid-column-gap:0px;} 
#detailResponsiv {grid-column:1 / span 4;} 
#pdpBarre {display:flex; flex-direction:column;} 
#etapesContainer {display:flex; flex-direction:column;} 
.gondole-container {display:flex; flex-direction:column; justify-content:space-around; align-content:center; margin:auto; margin-bottom:15px; text-align:center;} 
.grid1to2 {grid-column: 1 / span 2;}
.tablePanier {display:flex;flex-direction:column;} 
.tablePanier>#tableCli {display:grid; grid-column:1 / span 2; grid-row:1;} 
.catalogueImgPrd {max-width:110px;} 
} 
@media screen and (max-width:568px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{
		position:relative;
		align-self:start;
		display:block;
		text-align:left;
		vertical-align:middle;
		z-index:11;

		height:40px;
		width:40px;
		padding:1px;
		margin:1px;

		border-radius:5px; } 
#menuD-container> .top-nav-label {
	position: relative;
	height: 2.5rem;
	width: 2.5rem;
	border-radius: 0.1875rem;
	cursor: pointer;
	display: block;
	font-size: 0;
	margin: 0;
	overflow: hidden;
	padding: 1px;
	text-align:center;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu::before,
#menuD-container> .top-nav-label .open-close-menu::after {
	content: "";
	display: block;
	position: absolute;
	background-color: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0;
	width: 100%;
	transition-duration: 0.3s, 0.3s;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::before {
	top: -0.6875rem;
	transform-origin: top;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::after {
	bottom: -0.6875rem;
	transform-origin: bottom;
	margin:auto;
}

#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
  background: none;
  transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	left: 0.125rem;
	transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
	top: 0px;
	transform: rotate(45deg);
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	bottom: 0;
	transform: rotate(-45deg);
	text-align:center;margin:0;vertical-align:middle;
}

#menuDeroulantBarre {display: none; }

#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
	display: block;
}
#menuDeroulantBarre{
		position:relative;
		padding:7px;
		margin:auto;
		text-align:left; 
		z-index:2;
		border-radius:3px;
		max-height:80%;
		width:99%;
		max-width: 100%;
	} 
.menuDeroulantItem {
		left:1px;
		text-align:left;
		width:auto;
		border-radius:3px;
		z-index:0;
		width:98%;

	}
.texteMenus {
		z-index:2;
		text-align:left;
		padding:0px;
		margin:0px;
		border-radius:3px;
		display: contents;
	}
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
		position:relative;
		/* display:table; */
		left:130px;
		top:-30px;
		height:100%;
		margin:auto;
		z-index:3;
		margin-left:20px;
		border-radius:3px;
	} 
.sousMenuBarre {
		height:100%;
		width:70%;
		margin:auto;
		z-index:10;
		left:130px;
		border-radius:3px;
		padding-bottom:0px;
		margin-left:20px;
		position:absolute;
		top:0px;
		height: max-content;

	} 
.sousMenuItem{
		height:100%;
		padding:1px;
		margin:1px;
	} 
.familles-img {
		display:none;
		width:2px;
	}
#familles-container{
		background:white;
		left:0px;
		display: flex;
		flex-direction: column;
		justify-content:space-around;
		position:absolute;
		flex-wrap: wrap;
		justify-content: flex-start;

		height:150px;
		z-index:4;
		border:0px;
		width:100%;
	}
.familles-boite{
		white-space:break-spaces;
		padding:0px;
		margin:0px;
		max-height:37px;
	}
.familles-libelle {
		white-space:break-spaces;
		padding:0px;
	}
#sousCat-container{
		border-radius:3px;
	}
.categoriesImages {
		text-align:right;
	}
#rechBarre-container{
		left : 10%; 
		grid-column: 1 / span 4;
		grid-column-gap:3px;
		margin:0;
		margin:1px;
		padding-top:7px;
		padding-left:28px;
		justify-self:center;
	} 
#rechItem{
		margin:0px;
		padding:0px;
		padding-left:30px;
		left:10%;
	} 
#rechInput{
		margin:0px;
		padding:0px;
	} 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
#syntheseLignes {grid-column:1 / span 2; } 
.flexToColumn {display:flex; flex-direction:column;}
.flexToRow {display:flex; flex-direction:row; grid-row-gap:0px; }
.notInResponsive {display: none;}
.onlyInResponsive {display: block; margin: 1px;}
.champsCli,listeDeroulanteCli {width:100%; grid-column: 1 / span 2;}
#tableMesCdes {display:flex; flex-direction:column; grid-column-gap:0px;} 
.w100 {width:100%;} 
.m0 {margin:0px;} 
.champsMesCdesCell {text-align:left;} 
#detailCdeLignes {display:flex; flex-direction:column; width:100%;margin:auto;} 
.msgInfos>div>span>img {width: 60%; } 
#eCol1 {min-width:30px;} 
#header-containerImg {background-size: cover; } 
#header-containerImg {background-size: contain; size:100%; margin:auto; grid-column: 1/span 5;} 
} 
@media screen and (max-width:540px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{
		position:relative;
		align-self:start;
		display:block;
		text-align:left;
		vertical-align:middle;
		z-index:11;

		height:40px;
		width:40px;
		padding:1px;
		margin:1px;

		border-radius:5px; } 
#menuD-container> .top-nav-label {
	position: relative;
	height: 2.5rem;
	width: 2.5rem;
	border-radius: 0.1875rem;
	cursor: pointer;
	display: block;
	font-size: 0;
	margin: 0;
	overflow: hidden;
	padding: 1px;
	text-align:center;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu::before,
#menuD-container> .top-nav-label .open-close-menu::after {
	content: "";
	display: block;
	position: absolute;
	background-color: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0;
	width: 100%;
	transition-duration: 0.3s, 0.3s;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::before {
	top: -0.6875rem;
	transform-origin: top;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::after {
	bottom: -0.6875rem;
	transform-origin: bottom;
	margin:auto;
}

#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
  background: none;
  transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	left: 0.125rem;
	transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
	top: 0px;
	transform: rotate(45deg);
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	bottom: 0;
	transform: rotate(-45deg);
	text-align:center;margin:0;vertical-align:middle;
}

#menuDeroulantBarre {display: none; }

#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
	display: block;
}
#menuDeroulantBarre{
		position:relative;
		padding:7px;
		margin:auto;
		text-align:left; 
		z-index:2;
		border-radius:3px;
		max-height:80%;
		width:99%;
		max-width: 100%;
	} 
.menuDeroulantItem {
		left:1px;
		text-align:left;
		width:auto;
		border-radius:3px;
		z-index:0;
		width:98%;

	}
.texteMenus {
		z-index:2;
		text-align:left;
		padding:0px;
		margin:0px;
		border-radius:3px;
		display: contents;
	}
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
		position:relative;
		/* display:table; */
		left:130px;
		top:-30px;
		height:100%;
		margin:auto;
		z-index:3;
		margin-left:20px;
		border-radius:3px;
	} 
.sousMenuBarre {
		height:100%;
		width:70%;
		margin:auto;
		z-index:10;
		left:130px;
		border-radius:3px;
		padding-bottom:0px;
		margin-left:20px;
		position:absolute;
		top:0px;
		height: max-content;

	} 
.sousMenuItem{
		height:100%;
		padding:1px;
		margin:1px;
	} 
.familles-img {
		display:none;
		width:2px;
	}
#familles-container{
		background:white;
		left:0px;
		display: flex;
		flex-direction: column;
		justify-content:space-around;
		position:absolute;
		flex-wrap: wrap;
		justify-content: flex-start;

		height:150px;
		z-index:4;
		border:0px;
		width:100%;
	}
.familles-boite{
		white-space:break-spaces;
		padding:0px;
		margin:0px;
		max-height:37px;
	}
.familles-libelle {
		white-space:break-spaces;
		padding:0px;
	}
#sousCat-container{
		border-radius:3px;
	}
.categoriesImages {
		text-align:right;
	}
#rechBarre-container{
		left : 10%; 
		grid-column: 1 / span 4;
		grid-column-gap:3px;
		margin:0;
		margin:1px;
		padding-top:7px;
		padding-left:28px;
		justify-self:center;
	} 
#rechItem{
		margin:0px;
		padding:0px;
		padding-left:30px;
		left:10%;
	} 
#rechInput{
		margin:0px;
		padding:0px;
	} 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
#syntheseLignes {grid-column:1 / span 2; } 
.flexToColumn {display:flex; flex-direction:column;}
.flexToRow {display:flex; flex-direction:row; grid-row-gap:0px; }
.notInResponsive {display: none;}
.onlyInResponsive {display: block; margin: 1px;}
.champsCli,listeDeroulanteCli {width:100%; grid-column: 1 / span 2;}
#tableMesCdes {display:flex; flex-direction:column; grid-column-gap:0px;} 
.w100 {width:100%;} 
.m0 {margin:0px;} 
.champsMesCdesCell {text-align:left;} 
#detailCdeLignes {display:flex; flex-direction:column; width:100%;margin:auto;} 
.msgInfos>div>span>img {width: 60%; } 
#eCol1 {min-width:30px;} 
#header-containerImg {background-size: cover; } 
#header-containerImg {background-size: contain; size:100%; margin:auto; grid-column: 1/span 5;} 
} 
@media screen and (max-width:414px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{
		position:relative;
		align-self:start;
		display:block;
		text-align:left;
		vertical-align:middle;
		z-index:11;

		height:40px;
		width:40px;
		padding:1px;
		margin:1px;

		border-radius:5px; } 
#menuD-container> .top-nav-label {
	position: relative;
	height: 2.5rem;
	width: 2.5rem;
	border-radius: 0.1875rem;
	cursor: pointer;
	display: block;
	font-size: 0;
	margin: 0;
	overflow: hidden;
	padding: 1px;
	text-align:center;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu::before,
#menuD-container> .top-nav-label .open-close-menu::after {
	content: "";
	display: block;
	position: absolute;
	background-color: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0;
	width: 100%;
	transition-duration: 0.3s, 0.3s;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::before {
	top: -0.6875rem;
	transform-origin: top;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::after {
	bottom: -0.6875rem;
	transform-origin: bottom;
	margin:auto;
}

#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
  background: none;
  transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	left: 0.125rem;
	transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
	top: 0px;
	transform: rotate(45deg);
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	bottom: 0;
	transform: rotate(-45deg);
	text-align:center;margin:0;vertical-align:middle;
}

#menuDeroulantBarre {display: none; }

#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
	display: block;
}
#menuDeroulantBarre{
		position:relative;
		padding:7px;
		margin:auto;
		text-align:left; 
		z-index:2;
		border-radius:3px;
		max-height:80%;
		width:99%;
		max-width: 100%;
	} 
.menuDeroulantItem {
		left:1px;
		text-align:left;
		width:auto;
		border-radius:3px;
		z-index:0;
		width:98%;

	}
.texteMenus {
		z-index:2;
		text-align:left;
		padding:0px;
		margin:0px;
		border-radius:3px;
		display: contents;
	}
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
		position:relative;
		/* display:table; */
		left:130px;
		top:-30px;
		height:100%;
		margin:auto;
		z-index:3;
		margin-left:20px;
		border-radius:3px;
	} 
.sousMenuBarre {
		height:100%;
		width:70%;
		margin:auto;
		z-index:10;
		left:130px;
		border-radius:3px;
		padding-bottom:0px;
		margin-left:20px;
		position:absolute;
		top:0px;
		height: max-content;

	} 
.sousMenuItem{
		height:100%;
		padding:1px;
		margin:1px;
	} 
.familles-img {
		display:none;
		width:2px;
	}
#familles-container{
		background:white;
		left:0px;
		display: flex;
		flex-direction: column;
		justify-content:space-around;
		position:absolute;
		flex-wrap: wrap;
		justify-content: flex-start;

		height:150px;
		z-index:4;
		border:0px;
		width:100%;
	}
.familles-boite{
		white-space:break-spaces;
		padding:0px;
		margin:0px;
		max-height:37px;
	}
.familles-libelle {
		white-space:break-spaces;
		padding:0px;
	}
#sousCat-container{
		border-radius:3px;
	}
.categoriesImages {
		text-align:right;
	}
#rechBarre-container{
		left : 10%; 
		grid-column: 1 / span 4;
		grid-column-gap:3px;
		margin:0;
		margin:1px;
		padding-top:7px;
		padding-left:28px;
		justify-self:center;
	} 
#rechItem{
		margin:0px;
		padding:0px;
		padding-left:30px;
		left:10%;
	} 
#rechInput{
		margin:0px;
		padding:0px;
	} 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
#header-containerImg {display:flex; flex-wrap:wrap; } 
#tablePages {display:block;} 
.menuDeroulantItem {display:block; width:100%;} 
#gallerie {display:block; padding-bottom:0px; margin-bottom:0px;} 
#tableCli {display:flex; flex-direction:column; justify-content:space-between; margin:auto;} 
.libClientsCell,.libClients {text-align:left;} 
.boutons {width:auto;} 
.gondole-container {display:flex; flex-direction:column; justify-content:space-around; align-content:center; margin:auto; margin-bottom:15px; text-align:center;} 
tablePanier {grid-column:1;} 
champsPanierCell {width:100%} 
#etapesContainer {display:flex; flex-direction:column;padding:20px;} 
.champsCli,listeDeroulanteCli {width:100%; grid-column: 1 / span 2;}
.familles-boite {text-align:center; margin-bottom:1px; padding:0px; }
.familles-libelle {font-size:1rem; }
#logo {display:none; } 
.titreFamilleVignette:first-child {margin-top:20px;}} 
@media screen and (max-width:411px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{
		position:relative;
		align-self:start;
		display:block;
		text-align:left;
		vertical-align:middle;
		z-index:11;

		height:40px;
		width:40px;
		padding:1px;
		margin:1px;

		border-radius:5px; } 
#menuD-container> .top-nav-label {
	position: relative;
	height: 2.5rem;
	width: 2.5rem;
	border-radius: 0.1875rem;
	cursor: pointer;
	display: block;
	font-size: 0;
	margin: 0;
	overflow: hidden;
	padding: 1px;
	text-align:center;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu::before,
#menuD-container> .top-nav-label .open-close-menu::after {
	content: "";
	display: block;
	position: absolute;
	background-color: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0;
	width: 100%;
	transition-duration: 0.3s, 0.3s;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::before {
	top: -0.6875rem;
	transform-origin: top;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::after {
	bottom: -0.6875rem;
	transform-origin: bottom;
	margin:auto;
}

#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
  background: none;
  transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	left: 0.125rem;
	transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
	top: 0px;
	transform: rotate(45deg);
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	bottom: 0;
	transform: rotate(-45deg);
	text-align:center;margin:0;vertical-align:middle;
}

#menuDeroulantBarre {display: none; }

#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
	display: block;
}
#menuDeroulantBarre{
		position:relative;
		padding:7px;
		margin:auto;
		text-align:left; 
		z-index:2;
		border-radius:3px;
		max-height:80%;
		width:99%;
		max-width: 100%;
	} 
.menuDeroulantItem {
		left:1px;
		text-align:left;
		width:auto;
		border-radius:3px;
		z-index:0;
		width:98%;

	}
.texteMenus {
		z-index:2;
		text-align:left;
		padding:0px;
		margin:0px;
		border-radius:3px;
		display: contents;
	}
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
		position:relative;
		/* display:table; */
		left:130px;
		top:-30px;
		height:100%;
		margin:auto;
		z-index:3;
		margin-left:20px;
		border-radius:3px;
	} 
.sousMenuBarre {
		height:100%;
		width:70%;
		margin:auto;
		z-index:10;
		left:130px;
		border-radius:3px;
		padding-bottom:0px;
		margin-left:20px;
		position:absolute;
		top:0px;
		height: max-content;

	} 
.sousMenuItem{
		height:100%;
		padding:1px;
		margin:1px;
	} 
.familles-img {
		display:none;
		width:2px;
	}
#familles-container{
		background:white;
		left:0px;
		display: flex;
		flex-direction: column;
		justify-content:space-around;
		position:absolute;
		flex-wrap: wrap;
		justify-content: flex-start;

		height:150px;
		z-index:4;
		border:0px;
		width:100%;
	}
.familles-boite{
		white-space:break-spaces;
		padding:0px;
		margin:0px;
		max-height:37px;
	}
.familles-libelle {
		white-space:break-spaces;
		padding:0px;
	}
#sousCat-container{
		border-radius:3px;
	}
.categoriesImages {
		text-align:right;
	}
#rechBarre-container{
		left : 10%; 
		grid-column: 1 / span 4;
		grid-column-gap:3px;
		margin:0;
		margin:1px;
		padding-top:7px;
		padding-left:28px;
		justify-self:center;
	} 
#rechItem{
		margin:0px;
		padding:0px;
		padding-left:30px;
		left:10%;
	} 
#rechInput{
		margin:0px;
		padding:0px;
	} 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
#header-containerImg {display:flex; flex-wrap:wrap; } 
#tablePages {display:block;} 
.menuDeroulantItem {display:block; width:100%;} 
#gallerie {display:block; padding-bottom:0px; margin-bottom:0px;} 
#tableCli {display:flex; flex-direction:column; justify-content:space-between; margin:auto;} 
.libClientsCell,.libClients {text-align:left;} 
.boutons {width:auto;} 
.gondole-container {display:flex; flex-direction:column; justify-content:space-around; align-content:center; margin:auto; margin-bottom:15px; text-align:center;} 
tablePanier {grid-column:1;} 
champsPanierCell {width:100%} 
#etapesContainer {display:flex; flex-direction:column;padding:20px;} 
.champsCli,listeDeroulanteCli {width:100%; grid-column: 1 / span 2;}
.familles-boite {text-align:center; margin-bottom:1px; padding:0px; }
.familles-libelle {font-size:1rem; }
#logo {display:none; } 
.titreFamilleVignette:first-child {margin-top:20px;}} 
@media screen and (max-width:375px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{
		position:relative;
		align-self:start;
		display:block;
		text-align:left;
		vertical-align:middle;
		z-index:11;

		height:40px;
		width:40px;
		padding:1px;
		margin:1px;

		border-radius:5px; } 
#menuD-container> .top-nav-label {
	position: relative;
	height: 2.5rem;
	width: 2.5rem;
	border-radius: 0.1875rem;
	cursor: pointer;
	display: block;
	font-size: 0;
	margin: 0;
	overflow: hidden;
	padding: 1px;
	text-align:center;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu::before,
#menuD-container> .top-nav-label .open-close-menu::after {
	content: "";
	display: block;
	position: absolute;
	background-color: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0;
	width: 100%;
	transition-duration: 0.3s, 0.3s;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::before {
	top: -0.6875rem;
	transform-origin: top;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::after {
	bottom: -0.6875rem;
	transform-origin: bottom;
	margin:auto;
}

#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
  background: none;
  transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	left: 0.125rem;
	transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
	top: 0px;
	transform: rotate(45deg);
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	bottom: 0;
	transform: rotate(-45deg);
	text-align:center;margin:0;vertical-align:middle;
}

#menuDeroulantBarre {display: none; }

#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
	display: block;
}
#menuDeroulantBarre{
		position:relative;
		padding:7px;
		margin:auto;
		text-align:left; 
		z-index:2;
		border-radius:3px;
		max-height:80%;
		width:99%;
		max-width: 100%;
	} 
.menuDeroulantItem {
		left:1px;
		text-align:left;
		width:auto;
		border-radius:3px;
		z-index:0;
		width:98%;

	}
.texteMenus {
		z-index:2;
		text-align:left;
		padding:0px;
		margin:0px;
		border-radius:3px;
		display: contents;
	}
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
		position:relative;
		/* display:table; */
		left:130px;
		top:-30px;
		height:100%;
		margin:auto;
		z-index:3;
		margin-left:20px;
		border-radius:3px;
	} 
.sousMenuBarre {
		height:100%;
		width:70%;
		margin:auto;
		z-index:10;
		left:130px;
		border-radius:3px;
		padding-bottom:0px;
		margin-left:20px;
		position:absolute;
		top:0px;
		height: max-content;

	} 
.sousMenuItem{
		height:100%;
		padding:1px;
		margin:1px;
	} 
.familles-img {
		display:none;
		width:2px;
	}
#familles-container{
		background:white;
		left:0px;
		display: flex;
		flex-direction: column;
		justify-content:space-around;
		position:absolute;
		flex-wrap: wrap;
		justify-content: flex-start;

		height:150px;
		z-index:4;
		border:0px;
		width:100%;
	}
.familles-boite{
		white-space:break-spaces;
		padding:0px;
		margin:0px;
		max-height:37px;
	}
.familles-libelle {
		white-space:break-spaces;
		padding:0px;
	}
#sousCat-container{
		border-radius:3px;
	}
.categoriesImages {
		text-align:right;
	}
#rechBarre-container{
		left : 10%; 
		grid-column: 1 / span 4;
		grid-column-gap:3px;
		margin:0;
		margin:1px;
		padding-top:7px;
		padding-left:28px;
		justify-self:center;
	} 
#rechItem{
		margin:0px;
		padding:0px;
		padding-left:30px;
		left:10%;
	} 
#rechInput{
		margin:0px;
		padding:0px;
	} 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
#header-containerImg {display:flex; flex-wrap:wrap; } 
#tablePages {display:block;} 
.menuDeroulantItem {display:block; width:100%;} 
#gallerie {display:block; padding-bottom:0px; margin-bottom:0px;} 
#tableCli {display:flex; flex-direction:column; justify-content:space-between; margin:auto;} 
.libClientsCell,.libClients {text-align:left;} 
.boutons {width:auto;} 
.gondole-container {display:flex; flex-direction:column; justify-content:space-around; align-content:center; margin:auto; margin-bottom:15px; text-align:center;} 
tablePanier {grid-column:1;} 
champsPanierCell {width:100%} 
#etapesContainer {display:flex; flex-direction:column;padding:20px;} 
.champsCli,listeDeroulanteCli {width:100%; grid-column: 1 / span 2;}
.familles-boite {text-align:center; margin-bottom:1px; padding:0px; }
.familles-libelle {font-size:1rem; }
#logo {display:none; } 
.titreFamilleVignette:first-child {margin-top:20px;}} 
@media screen and (max-width:360px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{
		position:relative;
		align-self:start;
		display:block;
		text-align:left;
		vertical-align:middle;
		z-index:11;

		height:40px;
		width:40px;
		padding:1px;
		margin:1px;

		border-radius:5px; } 
#menuD-container> .top-nav-label {
	position: relative;
	height: 2.5rem;
	width: 2.5rem;
	border-radius: 0.1875rem;
	cursor: pointer;
	display: block;
	font-size: 0;
	margin: 0;
	overflow: hidden;
	padding: 1px;
	text-align:center;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu::before,
#menuD-container> .top-nav-label .open-close-menu::after {
	content: "";
	display: block;
	position: absolute;
	background-color: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0;
	width: 100%;
	transition-duration: 0.3s, 0.3s;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::before {
	top: -0.6875rem;
	transform-origin: top;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::after {
	bottom: -0.6875rem;
	transform-origin: bottom;
	margin:auto;
}

#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
  background: none;
  transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	left: 0.125rem;
	transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
	top: 0px;
	transform: rotate(45deg);
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	bottom: 0;
	transform: rotate(-45deg);
	text-align:center;margin:0;vertical-align:middle;
}

#menuDeroulantBarre {display: none; }

#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
	display: block;
}
#menuDeroulantBarre{
		position:relative;
		padding:7px;
		margin:auto;
		text-align:left; 
		z-index:2;
		border-radius:3px;
		max-height:80%;
		width:99%;
		max-width: 100%;
	} 
.menuDeroulantItem {
		left:1px;
		text-align:left;
		width:auto;
		border-radius:3px;
		z-index:0;
		width:98%;

	}
.texteMenus {
		z-index:2;
		text-align:left;
		padding:0px;
		margin:0px;
		border-radius:3px;
		display: contents;
	}
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
		position:relative;
		/* display:table; */
		left:130px;
		top:-30px;
		height:100%;
		margin:auto;
		z-index:3;
		margin-left:20px;
		border-radius:3px;
	} 
.sousMenuBarre {
		height:100%;
		width:70%;
		margin:auto;
		z-index:10;
		left:130px;
		border-radius:3px;
		padding-bottom:0px;
		margin-left:20px;
		position:absolute;
		top:0px;
		height: max-content;

	} 
.sousMenuItem{
		height:100%;
		padding:1px;
		margin:1px;
	} 
.familles-img {
		display:none;
		width:2px;
	}
#familles-container{
		background:white;
		left:0px;
		display: flex;
		flex-direction: column;
		justify-content:space-around;
		position:absolute;
		flex-wrap: wrap;
		justify-content: flex-start;

		height:150px;
		z-index:4;
		border:0px;
		width:100%;
	}
.familles-boite{
		white-space:break-spaces;
		padding:0px;
		margin:0px;
		max-height:37px;
	}
.familles-libelle {
		white-space:break-spaces;
		padding:0px;
	}
#sousCat-container{
		border-radius:3px;
	}
.categoriesImages {
		text-align:right;
	}
#rechBarre-container{
		left : 10%; 
		grid-column: 1 / span 4;
		grid-column-gap:3px;
		margin:0;
		margin:1px;
		padding-top:7px;
		padding-left:28px;
		justify-self:center;
	} 
#rechItem{
		margin:0px;
		padding:0px;
		padding-left:30px;
		left:10%;
	} 
#rechInput{
		margin:0px;
		padding:0px;
	} 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
#header-containerImg {display:flex; flex-wrap:wrap; } 
#tablePages {display:block;} 
.menuDeroulantItem {display:block; width:100%;} 
#gallerie {display:block; padding-bottom:0px; margin-bottom:0px;} 
#tableCli {display:flex; flex-direction:column; justify-content:space-between; margin:auto;} 
.libClientsCell,.libClients {text-align:left;} 
.boutons {width:auto;} 
.gondole-container {display:flex; flex-direction:column; justify-content:space-around; align-content:center; margin:auto; margin-bottom:15px; text-align:center;} 
tablePanier {grid-column:1;} 
champsPanierCell {width:100%} 
#etapesContainer {display:flex; flex-direction:column;padding:20px;} 
.champsCli,listeDeroulanteCli {width:100%; grid-column: 1 / span 2;}
.familles-boite {text-align:center; margin-bottom:1px; padding:0px; }
.familles-libelle {font-size:1rem; }
#logo {display:none; } 
.titreFamilleVignette:first-child {margin-top:20px;}.boutons {width:auto;} 
} 
@media screen and (max-width:320px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{
		position:relative;
		align-self:start;
		display:block;
		text-align:left;
		vertical-align:middle;
		z-index:11;

		height:40px;
		width:40px;
		padding:1px;
		margin:1px;

		border-radius:5px; } 
#menuD-container> .top-nav-label {
	position: relative;
	height: 2.5rem;
	width: 2.5rem;
	border-radius: 0.1875rem;
	cursor: pointer;
	display: block;
	font-size: 0;
	margin: 0;
	overflow: hidden;
	padding: 1px;
	text-align:center;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu::before,
#menuD-container> .top-nav-label .open-close-menu::after {
	content: "";
	display: block;
	position: absolute;
	background-color: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0;
	width: 100%;
	transition-duration: 0.3s, 0.3s;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::before {
	top: -0.6875rem;
	transform-origin: top;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::after {
	bottom: -0.6875rem;
	transform-origin: bottom;
	margin:auto;
}

#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
  background: none;
  transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	left: 0.125rem;
	transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
	top: 0px;
	transform: rotate(45deg);
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	bottom: 0;
	transform: rotate(-45deg);
	text-align:center;margin:0;vertical-align:middle;
}

#menuDeroulantBarre {display: none; }

#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
	display: block;
}
#menuDeroulantBarre{
		position:relative;
		padding:7px;
		margin:auto;
		text-align:left; 
		z-index:2;
		border-radius:3px;
		max-height:80%;
		width:99%;
		max-width: 100%;
	} 
.menuDeroulantItem {
		left:1px;
		text-align:left;
		width:auto;
		border-radius:3px;
		z-index:0;
		width:98%;

	}
.texteMenus {
		z-index:2;
		text-align:left;
		padding:0px;
		margin:0px;
		border-radius:3px;
		display: contents;
	}
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
		position:relative;
		/* display:table; */
		left:130px;
		top:-30px;
		height:100%;
		margin:auto;
		z-index:3;
		margin-left:20px;
		border-radius:3px;
	} 
.sousMenuBarre {
		height:100%;
		width:70%;
		margin:auto;
		z-index:10;
		left:130px;
		border-radius:3px;
		padding-bottom:0px;
		margin-left:20px;
		position:absolute;
		top:0px;
		height: max-content;

	} 
.sousMenuItem{
		height:100%;
		padding:1px;
		margin:1px;
	} 
.familles-img {
		display:none;
		width:2px;
	}
#familles-container{
		background:white;
		left:0px;
		display: flex;
		flex-direction: column;
		justify-content:space-around;
		position:absolute;
		flex-wrap: wrap;
		justify-content: flex-start;

		height:150px;
		z-index:4;
		border:0px;
		width:100%;
	}
.familles-boite{
		white-space:break-spaces;
		padding:0px;
		margin:0px;
		max-height:37px;
	}
.familles-libelle {
		white-space:break-spaces;
		padding:0px;
	}
#sousCat-container{
		border-radius:3px;
	}
.categoriesImages {
		text-align:right;
	}
#rechBarre-container{
		left : 10%; 
		grid-column: 1 / span 4;
		grid-column-gap:3px;
		margin:0;
		margin:1px;
		padding-top:7px;
		padding-left:28px;
		justify-self:center;
	} 
#rechItem{
		margin:0px;
		padding:0px;
		padding-left:30px;
		left:10%;
	} 
#rechInput{
		margin:0px;
		padding:0px;
	} 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
#header-containerImg {display:flex; flex-wrap:wrap; } 
#tablePages {display:block;} 
.menuDeroulantItem {display:block; width:100%;} 
#gallerie {display:block; padding-bottom:0px; margin-bottom:0px;} 
#tableCli {display:flex; flex-direction:column; justify-content:space-between; margin:auto;} 
.libClientsCell,.libClients {text-align:left;} 
.boutons {width:auto;} 
.gondole-container {display:flex; flex-direction:column; justify-content:space-around; align-content:center; margin:auto; margin-bottom:15px; text-align:center;} 
tablePanier {grid-column:1;} 
champsPanierCell {width:100%} 
#etapesContainer {display:flex; flex-direction:column;padding:20px;} 
.champsCli,listeDeroulanteCli {width:100%; grid-column: 1 / span 2;}
.familles-boite {text-align:center; margin-bottom:1px; padding:0px; }
.familles-libelle {font-size:1rem; }
#logo {display:none; } 
.titreFamilleVignette:first-child {margin-top:20px;}.boutons {width:auto;} 
} 
@media screen and (max-width:250px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{
		position:relative;
		align-self:start;
		display:block;
		text-align:left;
		vertical-align:middle;
		z-index:11;

		height:40px;
		width:40px;
		padding:1px;
		margin:1px;

		border-radius:5px; } 
#menuD-container> .top-nav-label {
	position: relative;
	height: 2.5rem;
	width: 2.5rem;
	border-radius: 0.1875rem;
	cursor: pointer;
	display: block;
	font-size: 0;
	margin: 0;
	overflow: hidden;
	padding: 1px;
	text-align:center;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu {
	display: block;
	margin:auto;
	position: absolute;
	z-index: 11;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	transition: 0.25s ease-in-out 0s;
}

#menuD-container> .top-nav-label .open-close-menu::before,
#menuD-container> .top-nav-label .open-close-menu::after {
	content: "";
	display: block;
	position: absolute;
	background-color: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0;
	width: 100%;
	transition-duration: 0.3s, 0.3s;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::before {
	top: -0.6875rem;
	transform-origin: top;
	margin:auto;
}

#menuD-container> .top-nav-label .open-close-menu::after {
	bottom: -0.6875rem;
	transform-origin: bottom;
	margin:auto;
}

#menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu {
  background: none;
  transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before,
#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	left: 0.125rem;
	transition-delay: 0s, 0.3s;
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before {
	top: 0px;
	transform: rotate(45deg);
}

#menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after {
	bottom: 0;
	transform: rotate(-45deg);
	text-align:center;margin:0;vertical-align:middle;
}

#menuDeroulantBarre {display: none; }

#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
	display: block;
}
#menuDeroulantBarre{
		position:relative;
		padding:7px;
		margin:auto;
		text-align:left; 
		z-index:2;
		border-radius:3px;
		max-height:80%;
		width:99%;
		max-width: 100%;
	} 
.menuDeroulantItem {
		left:1px;
		text-align:left;
		width:auto;
		border-radius:3px;
		z-index:0;
		width:98%;

	}
.texteMenus {
		z-index:2;
		text-align:left;
		padding:0px;
		margin:0px;
		border-radius:3px;
		display: contents;
	}
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
		position:relative;
		/* display:table; */
		left:130px;
		top:-30px;
		height:100%;
		margin:auto;
		z-index:3;
		margin-left:20px;
		border-radius:3px;
	} 
.sousMenuBarre {
		height:100%;
		width:70%;
		margin:auto;
		z-index:10;
		left:130px;
		border-radius:3px;
		padding-bottom:0px;
		margin-left:20px;
		position:absolute;
		top:0px;
		height: max-content;

	} 
.sousMenuItem{
		height:100%;
		padding:1px;
		margin:1px;
	} 
.familles-img {
		display:none;
		width:2px;
	}
#familles-container{
		background:white;
		left:0px;
		display: flex;
		flex-direction: column;
		justify-content:space-around;
		position:absolute;
		flex-wrap: wrap;
		justify-content: flex-start;

		height:150px;
		z-index:4;
		border:0px;
		width:100%;
	}
.familles-boite{
		white-space:break-spaces;
		padding:0px;
		margin:0px;
		max-height:37px;
	}
.familles-libelle {
		white-space:break-spaces;
		padding:0px;
	}
#sousCat-container{
		border-radius:3px;
	}
.categoriesImages {
		text-align:right;
	}
#rechBarre-container{
		left : 10%; 
		grid-column: 1 / span 4;
		grid-column-gap:3px;
		margin:0;
		margin:1px;
		padding-top:7px;
		padding-left:28px;
		justify-self:center;
	} 
#rechItem{
		margin:0px;
		padding:0px;
		padding-left:30px;
		left:10%;
	} 
#rechInput{
		margin:0px;
		padding:0px;
	} 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
#header-containerImg {display:flex; flex-wrap:wrap; } 
#tablePages {display:block;} 
.menuDeroulantItem {display:block; width:100%;} 
#gallerie {display:block; padding-bottom:0px; margin-bottom:0px;} 
#tableCli {display:flex; flex-direction:column; justify-content:space-between; margin:auto;} 
.libClientsCell,.libClients {text-align:left;} 
.boutons {width:auto;} 
.gondole-container {display:flex; flex-direction:column; justify-content:space-around; align-content:center; margin:auto; margin-bottom:15px; text-align:center;} 
tablePanier {grid-column:1;} 
champsPanierCell {width:100%} 
#etapesContainer {display:flex; flex-direction:column;padding:20px;} 
.champsCli,listeDeroulanteCli {width:100%; grid-column: 1 / span 2;}
.familles-boite {text-align:center; margin-bottom:1px; padding:0px; }
.familles-libelle {font-size:1rem; }
#logo {display:none; } 
.titreFamilleVignette:first-child {margin-top:20px;}.boutons {width:auto;} 
}