@media screen and (max-width:814px)  { 
	#site-container{width: 100%; margin:auto; }
	#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
	#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; }
	.itemBarrePromo{width:50%; margin:auto;}
	.zoneAcheter{display:block; margin-bottom:0px; width:100%;  grid-column:1 / span 2; }
	.tableCatalogue{width:100%; margin:auto;}
	.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{
			/* background:brown; */
			position:relative;
			align-self:start;
			display:block;
			text-align:left;
			vertical-align:middle;
			z-index:90;
			left:5px;
			height:40px;
			width:40px;
			padding:1px;
			margin:1px;
			position:fixed;
			border-radius:5px;}
	// #top-nav-toggle{text-align:left;}
	#menuD-container> .top-nav-label {
		position: relative;
		right: 0;
		top: 0px;
		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: 99999;
		background: #6495ED;
/*		border-radius: 0.1875rem;
		height: 0.25rem;
		left: 0.1875rem;
		right: 0.1875rem;*/
		top: 1rem;
		// /*top: 0;*/
		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;
		/*background: pink;*/
	}

	#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);
		/*background: pink;*/
		text-align:center;margin:0;vertical-align:middle;
	}

	#menuDeroulantBarre{
		display: none;
	}

	#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
		display: block;
	}
	#menuDeroulantBarre{
			position:fixed;
			padding:0px;
			margin:auto;
			margin-top:10px;
			top:160px;
			text-align:left;
			z-index:2;
			border-radius:3px;
			height:99%;
			width:99%;
			/*background:grey;*/

		}
	.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
			left:1px;
			text-align:left;
			width:auto;
			border-radius:3px;
			padding:10px;
			padding-bottom:0px;
			clear:both;
			padding-bottom:20px;
			margin-bottom:20px;
			width:150px;
		}
	.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
			/*padding:0px;
			margin:0px;
			border-radius:3px;
			text-align:left;*/
			/*width:70%;*/

		}
	.textePpauxMenuDeroulant {
			z-index:2;
			text-align:left;
			padding:0px;
			margin:0px;
			border-radius:3px;
			/*width:100%;*/
		}
	.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
			position:relative;
			display:table;
			left:130px;
			top:-30px;
			height:100%;
			/*width:80%;*/
			margin:auto;
			z-index:3;
			margin-left:20px;
			border-radius:3px;
		}
	.sousMenuBarre {
			height:100%;
			width:100%;
			margin:auto;
			z-index:3;
			left:130px;
			border-radius:3px;
			padding-bottom:0px;
			margin-left:20px;
			position:absolute;
		}
	.sousMenuItem{
			height:100%;
			padding:1px;
			margin:1px;
			/*border-radius:3px;*/
		}
	sousMenuItem:hover, .sousMenuItem:hover > * {
			/*height:100%;
			padding:1px;
			margin:1px;*/
		}
	.familles-img {
			display:none;
			width:2px;
		}
	#menuIndep-container{
			/*float:left;*/
			/*display:flex; flex-direction:rows;*/
			/* background:lightgreen; */
		}
	#familles-container{
			background:white;
			left:0px;
			display: flex;
			justify-content:space-around;
			position:absolute;
	  		flex-wrap: wrap;
			width:75%;
			height:150px;
		}
	.familles-boite{
			/*width:100%;*/
			white-space:break-spaces;
			padding:0px;
			margin:0px;
			max-height:37px;
		}
	.familles-libelle {
			/*width:100%;*/
			white-space:break-spaces;
			padding:0px;
		}
	#sousCat-container{
			border-radius:3px;
		}
	 .categories-boite, .categoriesItems, .categoriesImages {
			/*padding:0px;
			margin:0px;
			border-radius:3px;*/
		}
	.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
			/*padding:0px;
			margin:0px;
			left:90px;
			border-radius:3px;*/
		}
	.categoriesImages {
			text-align:right;
		}
	#rechBarre-container{
			left : 10%;
			grid-column:1 / span 4;
			grid-column-gap:3px;
			grid-row:2 / span 3;
			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;
	} 
} 

	@media screen and (max-width:800px)  {
	#site-container{width: 100%; margin:auto; }
	#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
	#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; }
	.itemBarrePromo{width:50%; margin:auto;}
	.zoneAcheter{display:block; margin-bottom:0px; width:100%;  grid-column:1 / span 2; }
	.tableCatalogue{width:100%; margin:auto;}
	.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{
			/* background:brown; */
			position:relative;
			align-self:start;
			display:block;
			text-align:left;
			vertical-align:middle;
			z-index:90;
			top:3px;
			left:5px;
			height:40px;
			width:40px;
			padding:1px;
			margin:1px;
			position:fixed;
			border-radius:5px;}
	// #top-nav-toggle{text-align:left;}
	#menuD-container> .top-nav-label {
		position: relative;
		right: 0;
		top: 0px;
		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: 99999;
		background: #6495ED;
		border-radius: 0.1875rem;
		height: 0.25rem;
		left: 0.1875rem;
		right: 0.1875rem;
		top: 1.125rem;
		// /*top: 0;*/
		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;
		/*background: pink;*/
	}

	#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);
		/*background: pink;*/
		text-align:center;margin:0;vertical-align:middle;
	}

	#menuDeroulantBarre{
		display: none;
	}

	#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
		display: block;
	}
	#menuDeroulantBarre{
			position:fixed;
			padding:0px;
			margin:auto;
			margin-top:10px;
			top:160px;
			text-align:left;
			z-index:2;
			border-radius:3px;
			height:99%;
			width:99%;
			/*background:grey;*/

		}
	.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
			left:1px;
			text-align:left;
			width:auto;
			border-radius:3px;
			padding:10px;
			padding-bottom:0px;
			clear:both;
			padding-bottom:20px;
			margin-bottom:20px;
			width:150px;
		}
	.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
			/*padding:0px;
			margin:0px;
			border-radius:3px;
			text-align:left;*/
			/*width:70%;*/

		}
	.textePpauxMenuDeroulant {
			z-index:2;
			text-align:left;
			padding:0px;
			margin:0px;
			border-radius:3px;
			/*width:100%;*/
		}
	.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
			position:relative;
			display:table;
			left:130px;
			top:-30px;
			height:100%;
			/*width:80%;*/
			margin:auto;
			z-index:3;
			margin-left:20px;
			border-radius:3px;
		}
	.sousMenuBarre {
			height:100%;
			width:100%;
			margin:auto;
			z-index:3;
			left:130px;
			border-radius:3px;
			padding-bottom:0px;
			margin-left:20px;
			position:absolute;
		}
	.sousMenuItem{
			height:100%;
			padding:1px;
			margin:1px;
			/*border-radius:3px;*/
		}
	sousMenuItem:hover, .sousMenuItem:hover > * {
			/*height:100%;
			padding:1px;
			margin:1px;*/
		}
	.familles-img {
			display:none;
			width:2px;
		}
	#menuIndep-container{
			/*float:left;*/
			/*display:flex; flex-direction:rows;*/
			/* background:lightgreen; */
		}
	#familles-container{
			background:white;
			left:0px;
			display: flex;
			justify-content:space-around;
			position:absolute;
	  		flex-wrap: wrap;
			width:75%;
			height:150px;
		}
	.familles-boite{
			/*width:100%;*/
			white-space:break-spaces;
			padding:0px;
			margin:0px;
			max-height:37px;
		}
	.familles-libelle {
			/*width:100%;*/
			white-space:break-spaces;
			padding:0px;
		}
	#sousCat-container{
			border-radius:3px;
		}
	 .categories-boite, .categoriesItems, .categoriesImages {
			/*padding:0px;
			margin:0px;
			border-radius:3px;*/
		}
	.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
			/*padding:0px;
			margin:0px;
			left:90px;
			border-radius:3px;*/
		}
	.categoriesImages {
			text-align:right;
		}
	#rechBarre-container{
			left : 10%;
			grid-column:1 / span 4;
			grid-column-gap:3px;
			grid-row:2 / span 3;
			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;
		}
} 

	@media screen and (max-width:764px)  {
	#site-container{width: 100%; margin:auto; }
	#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
	#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; }
	.itemBarrePromo{width:50%; margin:auto;}
	.zoneAcheter{display:block; margin-bottom:0px; width:100%;  grid-column:1 / span 2; }
	.tableCatalogue{width:100%; margin:auto;}
	.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{
			/* background:brown; */
			position:relative;
			align-self:start;
			display:block;
			text-align:left;
			vertical-align:middle;
			z-index:90;
			top:3px;
			left:5px;
			height:40px;
			width:40px;
			padding:1px;
			margin:1px;
			position:fixed;
			border-radius:5px;}
	// #top-nav-toggle{text-align:left;}
	#menuD-container> .top-nav-label {
		position: relative;
		right: 0;
		top: 0px;
		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: 99999;
		background: #6495ED;
		border-radius: 0.1875rem;
		height: 0.25rem;
		left: 0.1875rem;
		right: 0.1875rem;
		top: 1.125rem;
		// /*top: 0;*/
		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;
		/*background: pink;*/
	}

	#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);
		/*background: pink;*/
		text-align:center;margin:0;vertical-align:middle;
	}

	#menuDeroulantBarre{
		display: none;
	}

	#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
		display: block;
	}
	#menuDeroulantBarre{
			position:fixed;
			padding:0px;
			margin:auto;
			margin-top:10px;
			top:160px;
			text-align:left;
			z-index:2;
			border-radius:3px;
			height:99%;
			width:99%;
			/*background:grey;*/

		}
	.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
			left:1px;
			text-align:left;
			width:auto;
			border-radius:3px;
			padding:10px;
			padding-bottom:0px;
			clear:both;
			padding-bottom:20px;
			margin-bottom:20px;
			width:150px;
		}
	.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
			/*padding:0px;
			margin:0px;
			border-radius:3px;
			text-align:left;*/
			/*width:70%;*/

		}
	.textePpauxMenuDeroulant {
			z-index:2;
			text-align:left;
			padding:0px;
			margin:0px;
			border-radius:3px;
			/*width:100%;*/
		}
	.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
			position:relative;
			display:table;
			left:130px;
			top:-30px;
			height:100%;
			/*width:80%;*/
			margin:auto;
			z-index:3;
			margin-left:20px;
			border-radius:3px;
		}
	.sousMenuBarre {
			height:100%;
			width:100%;
			margin:auto;
			z-index:3;
			left:130px;
			border-radius:3px;
			padding-bottom:0px;
			margin-left:20px;
			position:absolute;
		}
	.sousMenuItem{
			height:100%;
			padding:1px;
			margin:1px;
			/*border-radius:3px;*/
		}
	sousMenuItem:hover, .sousMenuItem:hover > * {
			/*height:100%;
			padding:1px;
			margin:1px;*/
		}
	.familles-img {
			display:none;
			width:2px;
		}
	#menuIndep-container{
			/*float:left;*/
			/*display:flex; flex-direction:rows;*/
			/* background:lightgreen; */
		}
	#familles-container{
			background:white;
			left:0px;
			display: flex;
			justify-content:space-around;
			position:absolute;
	  		flex-wrap: wrap;
			width:75%;
			height:150px;
		}
	.familles-boite{
			/*width:100%;*/
			white-space:break-spaces;
			padding:0px;
			margin:0px;
			max-height:37px;
		}
	.familles-libelle {
			/*width:100%;*/
			white-space:break-spaces;
			padding:0px;
		}
	#sousCat-container{
			border-radius:3px;
		}
	 .categories-boite, .categoriesItems, .categoriesImages {
			/*padding:0px;
			margin:0px;
			border-radius:3px;*/
		}
	.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
			/*padding:0px;
			margin:0px;
			left:90px;
			border-radius:3px;*/
		}
	.categoriesImages {
			text-align:right;
		}
	#rechBarre-container{
			left : 10%;
			grid-column:1 / span 4;
			grid-column-gap:3px;
			grid-row:2 / span 3;
			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;
		}
	*{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;  }
	#eCol2{ margin:auto; height:100%; }
	#menuIndep-container{display:none; width:0px; height:0px;}
	#rechBarre-container{grid-row:4; left:0px;margin:auto; grid-column:1 / span 4;}
	#rechInput{padding:0;font-size:1rem; margin:auto;}
	#container-usrSiteMsg{grid-column:1 / span 4;}
	#menuDeroulantBarre>li:first-child{display:block; padding: 10px; margin:2px; width:100%; padding-bottom:0px; margin-bottom:20px;}
	.itemBarrePromo{width:50%;}
	#messCom{font-size:1rem;}
	#barreClientContainer, #pageConnexion{display:flex;flex-direction:column;justify-content:space-around;}
	#spinnerPopup, .spinnerPopup{ top: 10px; width:80%;	}
} 

	@media screen and (max-width:731px)  {
	#site-container{width: 100%; margin:auto; }
	#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
	#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; }
	.itemBarrePromo{width:50%; margin:auto;}
	.zoneAcheter{display:block; margin-bottom:0px; width:100%;  grid-column:1 / span 2; }
	.tableCatalogue{width:100%; margin:auto;}
	.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{
			/* background:brown; */
			position:relative;
			align-self:start;
			display:block;
			text-align:left;
			vertical-align:middle;
			z-index:90;
			top:3px;
			left:5px;
			height:40px;
			width:40px;
			padding:1px;
			margin:1px;
			position:fixed;
			border-radius:5px;}
	// #top-nav-toggle{text-align:left;}
	#menuD-container> .top-nav-label {
		position: relative;
		right: 0;
		top: 0px;
		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: 99999;
		background: #6495ED;
		border-radius: 0.1875rem;
		height: 0.25rem;
		left: 0.1875rem;
		right: 0.1875rem;
		top: 1.125rem;
		// /*top: 0;*/
		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;
		/*background: pink;*/
	}

	#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);
		/*background: pink;*/
		text-align:center;margin:0;vertical-align:middle;
	}

	#menuDeroulantBarre{
		display: none;
	}

	#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
		display: block;
	}
	#menuDeroulantBarre{
			position:fixed;
			padding:0px;
			margin:auto;
			margin-top:10px;
			top:160px;
			text-align:left;
			z-index:2;
			border-radius:3px;
			height:99%;
			width:99%;
			/*background:grey;*/

		}
	.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
			left:1px;
			text-align:left;
			width:auto;
			border-radius:3px;
			padding:10px;
			padding-bottom:0px;
			clear:both;
			padding-bottom:20px;
			margin-bottom:20px;
			width:150px;
		}
	.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
			/*padding:0px;
			margin:0px;
			border-radius:3px;
			text-align:left;*/
			/*width:70%;*/

		}
	.textePpauxMenuDeroulant {
			z-index:2;
			text-align:left;
			padding:0px;
			margin:0px;
			border-radius:3px;
			/*width:100%;*/
		}
	.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
			position:relative;
			display:table;
			left:130px;
			top:-30px;
			height:100%;
			/*width:80%;*/
			margin:auto;
			z-index:3;
			margin-left:20px;
			border-radius:3px;
		}
	.sousMenuBarre {
			height:100%;
			width:100%;
			margin:auto;
			z-index:3;
			left:130px;
			border-radius:3px;
			padding-bottom:0px;
			margin-left:20px;
			position:absolute;
		}
	.sousMenuItem{
			height:100%;
			padding:1px;
			margin:1px;
			/*border-radius:3px;*/
		}
	sousMenuItem:hover, .sousMenuItem:hover > * {
			/*height:100%;
			padding:1px;
			margin:1px;*/
		}
	.familles-img {
			display:none;
			width:2px;
		}
	#menuIndep-container{
			/*float:left;*/
			/*display:flex; flex-direction:rows;*/
			/* background:lightgreen; */
		}
	#familles-container{
			background:white;
			left:0px;
			display: flex;
			justify-content:space-around;
			position:absolute;
	  		flex-wrap: wrap;
			width:75%;
			height:150px;
		}
	.familles-boite{
			/*width:100%;*/
			white-space:break-spaces;
			padding:0px;
			margin:0px;
			max-height:37px;
		}
	.familles-libelle {
			/*width:100%;*/
			white-space:break-spaces;
			padding:0px;
		}
	#sousCat-container{
			border-radius:3px;
		}
	 .categories-boite, .categoriesItems, .categoriesImages {
			/*padding:0px;
			margin:0px;
			border-radius:3px;*/
		}
	.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
			/*padding:0px;
			margin:0px;
			left:90px;
			border-radius:3px;*/
		}
	.categoriesImages {
			text-align:right;
		}
	#rechBarre-container{
			left : 10%;
			grid-column:1 / span 4;
			grid-column-gap:3px;
			grid-row:2 / span 3;
			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;
		}
	*{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;  }
	#eCol2{ margin:auto; height:100%; }
	#menuIndep-container{display:none; width:0px; height:0px;}
	#rechBarre-container{grid-row:4; left:0px;margin:auto; grid-column:1 / span 4;}
	#rechInput{padding:0;font-size:1rem; margin:auto;}
	#container-usrSiteMsg{grid-column:1 / span 4;}
	#menuDeroulantBarre>li:first-child{display:block; padding: 10px; margin:2px; width:100%; padding-bottom:0px; margin-bottom:20px;}
	.itemBarrePromo{width:50%;}
	#messCom{font-size:1rem;}
	#barreClientContainer, #pageConnexion{display:flex;flex-direction:column;justify-content:space-around;}
	#spinnerPopup, .spinnerPopup{ top: 10px; width:80%;	}
} 

@media screen and (max-width:720px)  {
#site-container{width: 100%; margin:auto; } 
#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; } 
.itemBarrePromo{width:50%; margin:auto;}
.zoneAcheter{display:block; margin-bottom:0px; width:100%;  grid-column:1 / span 2; } 
.tableCatalogue{width:100%; margin:auto;} 
.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{
		/* background:brown; */
		position:relative;
		align-self:start;
		display:block;
		text-align:left;
		vertical-align:middle;
		z-index:90;
		top:3px;
		left:5px;
		height:40px;
		width:40px;
		padding:1px;
		margin:1px;
		position:fixed;
		border-radius:5px;}
// #top-nav-toggle{text-align:left;}
#menuD-container> .top-nav-label {
	position: relative;
	right: 0;
	top: 0px;
	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: 99999;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	// /*top: 0;*/
	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;
	/*background: pink;*/
}

#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);
	/*background: pink;*/
	text-align:center;margin:0;vertical-align:middle;
}

#menuDeroulantBarre{
	display: none;
}

#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
	display: block;
}
#menuDeroulantBarre{
		position:fixed;
		padding:0px;
		margin:auto;
		margin-top:10px;
		top:160px;
		text-align:left;
		z-index:2;
		border-radius:3px;
		height:99%;
		width:99%;
		/*background:grey;*/

	}
.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
		left:1px;
		text-align:left;
		width:auto;
		border-radius:3px;
		padding:10px;
		padding-bottom:0px;
		clear:both;
		padding-bottom:20px;
		margin-bottom:20px;
		width:150px;
	}
.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
		/*padding:0px;
		margin:0px;
		border-radius:3px;
		text-align:left;*/
		/*width:70%;*/

	}
.textePpauxMenuDeroulant {
		z-index:2;
		text-align:left;
		padding:0px;
		margin:0px;
		border-radius:3px;
		/*width:100%;*/
	}
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
		position:relative;
		display:table;
		left:130px;
		top:-30px;
		height:100%;
		/*width:80%;*/
		margin:auto;
		z-index:3;
		margin-left:20px;
		border-radius:3px;
	}
.sousMenuBarre {
		height:100%;
		width:100%;
		margin:auto;
		z-index:3;
		left:130px;
		border-radius:3px;
		padding-bottom:0px;
		margin-left:20px;
		position:absolute;
	}
.sousMenuItem{
		height:100%;
		padding:1px;
		margin:1px;
		/*border-radius:3px;*/
	}
sousMenuItem:hover, .sousMenuItem:hover > * {
		/*height:100%;
		padding:1px;
		margin:1px;*/
	}
.familles-img {
		display:none;
		width:2px;
	}
#menuIndep-container{
		/*float:left;*/
		/*display:flex; flex-direction:rows;*/
		/* background:lightgreen; */
	}
#familles-container{
		background:white;
		left:0px;
		display: flex;
		justify-content:space-around;
		position:absolute;
  		flex-wrap: wrap;
		width:75%;
		height:150px;
	}
.familles-boite{
		/*width:100%;*/
		white-space:break-spaces;
		padding:0px;
		margin:0px;
		max-height:37px;
	}
.familles-libelle {
		/*width:100%;*/
		white-space:break-spaces;
		padding:0px;
	}
#sousCat-container{
		border-radius:3px;
	}
 .categories-boite, .categoriesItems, .categoriesImages {
		/*padding:0px;
		margin:0px;
		border-radius:3px;*/
	}
.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
		/*padding:0px;
		margin:0px;
		left:90px;
		border-radius:3px;*/
	}
.categoriesImages {
		text-align:right;
	}
#rechBarre-container{
		left : 10%;
		grid-column:1 / span 4;
		grid-column-gap:3px;
		grid-row:2 / span 3;
		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;
	}
*{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;  }
#eCol2{ margin:auto; height:100%; }
#menuIndep-container{display:none; width:0px; height:0px;}
#rechBarre-container{grid-row:4; left:0px;margin:auto; grid-column:1 / span 4;}
#rechInput{padding:0;font-size:1rem; margin:auto;}
#container-usrSiteMsg{grid-column:1 / span 4;}
#menuDeroulantBarre>li:first-child{display:block; padding: 10px; margin:2px; width:100%; padding-bottom:0px; margin-bottom:20px;}
.itemBarrePromo{width:50%;}
#messCom{font-size:1rem;}
#barreClientContainer, #pageConnexion{display:flex;flex-direction:column;justify-content:space-around;}
#spinnerPopup, .spinnerPopup{ top: 10px; width:80%;	}
}

@media screen and (max-width:667px)  {
#site-container{width: 100%; margin:auto; }
#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; }
.itemBarrePromo{width:50%; margin:auto;}
.zoneAcheter{display:block; margin-bottom:0px; width:100%;  grid-column:1 / span 2; }
.tableCatalogue{width:100%; margin:auto;}
.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{
		/* background:brown; */
		position:relative;
		align-self:start;
		display:block;
		text-align:left;
		vertical-align:middle;
		z-index:90;
		top:3px;
		left:5px;
		height:40px;
		width:40px;
		padding:1px;
		margin:1px;
		position:fixed;
		border-radius:5px;}
// #top-nav-toggle{text-align:left;}
#menuD-container> .top-nav-label {
	position: relative;
	right: 0;
	top: 0px;
	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: 99999;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	// /*top: 0;*/
	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;
	/*background: pink;*/
}

#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);
	/*background: pink;*/
	text-align:center;margin:0;vertical-align:middle;
}

#menuDeroulantBarre{
	display: none;
}

#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
	display: block;
}
#menuDeroulantBarre{
		position:fixed;
		padding:0px;
		margin:auto;
		margin-top:10px;
		top:160px;
		text-align:left;
		z-index:2;
		border-radius:3px;
		height:99%;
		width:99%;
		/*background:grey;*/

	}
.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
		left:1px;
		text-align:left;
		width:auto;
		border-radius:3px;
		padding:10px;
		padding-bottom:0px;
		clear:both;
		padding-bottom:20px;
		margin-bottom:20px;
		width:150px;
	}
.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
		/*padding:0px;
		margin:0px;
		border-radius:3px;
		text-align:left;*/
		/*width:70%;*/

	}
.textePpauxMenuDeroulant {
		z-index:2;
		text-align:left;
		padding:0px;
		margin:0px;
		border-radius:3px;
		/*width:100%;*/
	}
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
		position:relative;
		display:table;
		left:130px;
		top:-30px;
		height:100%;
		/*width:80%;*/
		margin:auto;
		z-index:3;
		margin-left:20px;
		border-radius:3px;
	}
.sousMenuBarre {
		height:100%;
		width:100%;
		margin:auto;
		z-index:3;
		left:130px;
		border-radius:3px;
		padding-bottom:0px;
		margin-left:20px;
		position:absolute;
	}
.sousMenuItem{
		height:100%;
		padding:1px;
		margin:1px;
		/*border-radius:3px;*/
	}
sousMenuItem:hover, .sousMenuItem:hover > * {
		/*height:100%;
		padding:1px;
		margin:1px;*/
	}
.familles-img {
		display:none;
		width:2px;
	}
#menuIndep-container{
		/*float:left;*/
		/*display:flex; flex-direction:rows;*/
		/* background:lightgreen; */
	}
#familles-container{
		background:white;
		left:0px;
		display: flex;
		justify-content:space-around;
		position:absolute;
  		flex-wrap: wrap;
		width:75%;
		height:150px;
	}
.familles-boite{
		/*width:100%;*/
		white-space:break-spaces;
		padding:0px;
		margin:0px;
		max-height:37px;
	}
.familles-libelle {
		/*width:100%;*/
		white-space:break-spaces;
		padding:0px;
	}
#sousCat-container{
		border-radius:3px;
	}
 .categories-boite, .categoriesItems, .categoriesImages {
		/*padding:0px;
		margin:0px;
		border-radius:3px;*/
	}
.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
		/*padding:0px;
		margin:0px;
		left:90px;
		border-radius:3px;*/
	}
.categoriesImages {
		text-align:right;
	}
#rechBarre-container{
		left : 10%;
		grid-column:1 / span 4;
		grid-column-gap:3px;
		grid-row:2 / span 3;
		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;
	}
*{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;  }
#eCol2{ margin:auto; height:100%; }
#menuIndep-container{display:none; width:0px; height:0px;}
#rechBarre-container{grid-row:4; left:0px;margin:auto; grid-column:1 / span 4;}
#rechInput{padding:0;font-size:1rem; margin:auto;}
#container-usrSiteMsg{grid-column:1 / span 4;}
#menuDeroulantBarre>li:first-child{display:block; padding: 10px; margin:2px; width:100%; padding-bottom:0px; margin-bottom:20px;}
.itemBarrePromo{width:50%;}
#messCom{font-size:1rem;}
#barreClientContainer, #pageConnexion{display:flex;flex-direction:column;justify-content:space-around;}
#spinnerPopup, .spinnerPopup{ top: 10px; width:80%;	}
}

@media screen and (max-width:653px)  {
#site-container{width: 100%; margin:auto; }
#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; }
.itemBarrePromo{width:50%; margin:auto;}
.zoneAcheter{display:block; margin-bottom:0px; width:100%;  grid-column:1 / span 2; }
.tableCatalogue{width:100%; margin:auto;}
.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{
		/* background:brown; */
		position:relative;
		align-self:start;
		display:block;
		text-align:left;
		vertical-align:middle;
		z-index:90;
		top:3px;
		left:5px;
		height:40px;
		width:40px;
		padding:1px;
		margin:1px;
		position:fixed;
		border-radius:5px;}
// #top-nav-toggle{text-align:left;}
#menuD-container> .top-nav-label {
	position: relative;
	right: 0;
	top: 0px;
	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: 99999;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	// /*top: 0;*/
	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;
	/*background: pink;*/
}

#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);
	/*background: pink;*/
	text-align:center;margin:0;vertical-align:middle;
}

#menuDeroulantBarre{
	display: none;
}

#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
	display: block;
}
#menuDeroulantBarre{
		position:fixed;
		padding:0px;
		margin:auto;
		margin-top:10px;
		top:160px;
		text-align:left;
		z-index:2;
		border-radius:3px;
		height:99%;
		width:99%;
		/*background:grey;*/

	}
.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
		left:1px;
		text-align:left;
		width:auto;
		border-radius:3px;
		padding:10px;
		padding-bottom:0px;
		clear:both;
		padding-bottom:20px;
		margin-bottom:20px;
		width:150px;
	}
.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
		/*padding:0px;
		margin:0px;
		border-radius:3px;
		text-align:left;*/
		/*width:70%;*/

	}
.textePpauxMenuDeroulant {
		z-index:2;
		text-align:left;
		padding:0px;
		margin:0px;
		border-radius:3px;
		/*width:100%;*/
	}
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
		position:relative;
		display:table;
		left:130px;
		top:-30px;
		height:100%;
		/*width:80%;*/
		margin:auto;
		z-index:3;
		margin-left:20px;
		border-radius:3px;
	}
.sousMenuBarre {
		height:100%;
		width:100%;
		margin:auto;
		z-index:3;
		left:130px;
		border-radius:3px;
		padding-bottom:0px;
		margin-left:20px;
		position:absolute;
	}
.sousMenuItem{
		height:100%;
		padding:1px;
		margin:1px;
		/*border-radius:3px;*/
	}
sousMenuItem:hover, .sousMenuItem:hover > * {
		/*height:100%;
		padding:1px;
		margin:1px;*/
	}
.familles-img {
		display:none;
		width:2px;
	}
#menuIndep-container{
		/*float:left;*/
		/*display:flex; flex-direction:rows;*/
		/* background:lightgreen; */
	}
#familles-container{
		background:white;
		left:0px;
		display: flex;
		justify-content:space-around;
		position:absolute;
  		flex-wrap: wrap;
		width:75%;
		height:150px;
	}
.familles-boite{
		/*width:100%;*/
		white-space:break-spaces;
		padding:0px;
		margin:0px;
		max-height:37px;
	}
.familles-libelle {
		/*width:100%;*/
		white-space:break-spaces;
		padding:0px;
	}
#sousCat-container{
		border-radius:3px;
	}
 .categories-boite, .categoriesItems, .categoriesImages {
		/*padding:0px;
		margin:0px;
		border-radius:3px;*/
	}
.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
		/*padding:0px;
		margin:0px;
		left:90px;
		border-radius:3px;*/
	}
.categoriesImages {
		text-align:right;
	}
#rechBarre-container{
		left : 10%;
		grid-column:1 / span 4;
		grid-column-gap:3px;
		grid-row:2 / span 3;
		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;
	}
#itemMaint{width:85%}
#btnAdminText{max-width:250px; 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;}
#pub-container{flex-direction: row;}
#page-container{grid-column:1 / span 4;}
#tablePages{grid-column:1 / span 4;}
.gondole-container{display:flex; flex-direction:column; justify-content:space-around; align-content:center; margin:auto; margin-bottom:15px; text-align:center;}
.pub-image {max-width:150px; max-height:150px; min-width:150px; min-height:150px; }
#familles-container{	width:65%; height:170px;}
.grid1to2{grid-column: 1 / span 2;}
.tablePanier {display:flex;flex-direction:column;}
.tablePanier>#tableCli {display:grid; grid-column:1 / span 2; grid-row:1;}
}

@media screen and (max-width:640px)  {
#site-container{width: 100%; margin:auto; }
#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; }
.itemBarrePromo{width:50%; margin:auto;}
.zoneAcheter{display:block; margin-bottom:0px; width:100%;  grid-column:1 / span 2; }
.tableCatalogue{width:100%; margin:auto;}
.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{
		/* background:brown; */
		position:relative;
		align-self:start;
		display:block;
		text-align:left;
		vertical-align:middle;
		z-index:90;
		top:3px;
		left:5px;
		height:40px;
		width:40px;
		padding:1px;
		margin:1px;
		position:fixed;
		border-radius:5px;}
// #top-nav-toggle{text-align:left;}
#menuD-container> .top-nav-label {
	position: relative;
	right: 0;
	top: 0px;
	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: 99999;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	// /*top: 0;*/
	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;
	/*background: pink;*/
}

#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);
	/*background: pink;*/
	text-align:center;margin:0;vertical-align:middle;
}

#menuDeroulantBarre{
	display: none;
}

#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
	display: block;
}
#menuDeroulantBarre{
		position:fixed;
		padding:0px;
		margin:auto;
		margin-top:10px;
		top:160px;
		text-align:left;
		z-index:2;
		border-radius:3px;
		height:99%;
		width:99%;
		/*background:grey;*/

	}
.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
		left:1px;
		text-align:left;
		width:auto;
		border-radius:3px;
		padding:10px;
		padding-bottom:0px;
		clear:both;
		padding-bottom:20px;
		margin-bottom:20px;
		width:150px;
	}
.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
		/*padding:0px;
		margin:0px;
		border-radius:3px;
		text-align:left;*/
		/*width:70%;*/

	}
.textePpauxMenuDeroulant {
		z-index:2;
		text-align:left;
		padding:0px;
		margin:0px;
		border-radius:3px;
		/*width:100%;*/
	}
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
		position:relative;
		display:table;
		left:130px;
		top:-30px;
		height:100%;
		/*width:80%;*/
		margin:auto;
		z-index:3;
		margin-left:20px;
		border-radius:3px;
	}
.sousMenuBarre {
		height:100%;
		width:100%;
		margin:auto;
		z-index:3;
		left:130px;
		border-radius:3px;
		padding-bottom:0px;
		margin-left:20px;
		position:absolute;
	}
.sousMenuItem{
		height:100%;
		padding:1px;
		margin:1px;
		/*border-radius:3px;*/
	}
sousMenuItem:hover, .sousMenuItem:hover > * {
		/*height:100%;
		padding:1px;
		margin:1px;*/
	}
.familles-img {
		display:none;
		width:2px;
	}
#menuIndep-container{
		/*float:left;*/
		/*display:flex; flex-direction:rows;*/
		/* background:lightgreen; */
	}
#familles-container{
		background:white;
		left:0px;
		display: flex;
		justify-content:space-around;
		position:absolute;
  		flex-wrap: wrap;
		width:75%;
		height:150px;
	}
.familles-boite{
		/*width:100%;*/
		white-space:break-spaces;
		padding:0px;
		margin:0px;
		max-height:37px;
	}
.familles-libelle {
		/*width:100%;*/
		white-space:break-spaces;
		padding:0px;
	}
#sousCat-container{
		border-radius:3px;
	}
 .categories-boite, .categoriesItems, .categoriesImages {
		/*padding:0px;
		margin:0px;
		border-radius:3px;*/
	}
.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
		/*padding:0px;
		margin:0px;
		left:90px;
		border-radius:3px;*/
	}
.categoriesImages {
		text-align:right;
	}
#rechBarre-container{
		left : 10%;
		grid-column:1 / span 4;
		grid-column-gap:3px;
		grid-row:2 / span 3;
		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;
	}
#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;}
#pub-container{flex-direction: row;}
#page-container{grid-column:1 / span 4;}
#tablePages{grid-column:1 / span 4;}
.gondole-container{display:flex; flex-direction:column; justify-content:space-around; align-content:center; margin:auto; margin-bottom:15px; text-align:center;}
.pub-image {max-width:150px; max-height:150px; min-width:150px; min-height:150px; }
#familles-container{	width:65%; height:170px;}
.grid1to2{grid-column: 1 / span 2;}
.tablePanier {display:flex;flex-direction:column;}
.tablePanier>#tableCli {display:grid; grid-column:1 / span 2; grid-row:1;}
}

@media screen and (max-width:568px)  {
#site-container{width: 100%; margin:auto; }
#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; }
.itemBarrePromo{width:50%; margin:auto;}
.zoneAcheter{display:block; margin-bottom:0px; width:100%;  grid-column:1 / span 2; }
.tableCatalogue{width:100%; margin:auto;}
.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{
		/* background:brown; */
		position:relative;
		align-self:start;
		display:block;
		text-align:left;
		vertical-align:middle;
		z-index:90;
		top:3px;
		left:5px;
		height:40px;
		width:40px;
		padding:1px;
		margin:1px;
		position:fixed;
		border-radius:5px;}
// #top-nav-toggle{text-align:left;}
#menuD-container> .top-nav-label {
	position: relative;
	right: 0;
	top: 0px;
	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: 99999;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	// /*top: 0;*/
	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;
	/*background: pink;*/
}

#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);
	/*background: pink;*/
	text-align:center;margin:0;vertical-align:middle;
}

#menuDeroulantBarre{
	display: none;
}

#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
	display: block;
}
#menuDeroulantBarre{
		position:fixed;
		padding:0px;
		margin:auto;
		margin-top:10px;
		top:160px;
		text-align:left;
		z-index:2;
		border-radius:3px;
		height:99%;
		width:99%;
		/*background:grey;*/

	}
.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
		left:1px;
		text-align:left;
		width:auto;
		border-radius:3px;
		padding:10px;
		padding-bottom:0px;
		clear:both;
		padding-bottom:20px;
		margin-bottom:20px;
		width:150px;
	}
.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
		/*padding:0px;
		margin:0px;
		border-radius:3px;
		text-align:left;*/
		/*width:70%;*/

	}
.textePpauxMenuDeroulant {
		z-index:2;
		text-align:left;
		padding:0px;
		margin:0px;
		border-radius:3px;
		/*width:100%;*/
	}
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
		position:relative;
		display:table;
		left:130px;
		top:-30px;
		height:100%;
		/*width:80%;*/
		margin:auto;
		z-index:3;
		margin-left:20px;
		border-radius:3px;
	}
.sousMenuBarre {
		height:100%;
		width:100%;
		margin:auto;
		z-index:3;
		left:130px;
		border-radius:3px;
		padding-bottom:0px;
		margin-left:20px;
		position:absolute;
	}
.sousMenuItem{
		height:100%;
		padding:1px;
		margin:1px;
		/*border-radius:3px;*/
	}
sousMenuItem:hover, .sousMenuItem:hover > * {
		/*height:100%;
		padding:1px;
		margin:1px;*/
	}
.familles-img {
		display:none;
		width:2px;
	}
#menuIndep-container{
		/*float:left;*/
		/*display:flex; flex-direction:rows;*/
		/* background:lightgreen; */
	}
#familles-container{
		background:white;
		left:0px;
		display: flex;
		justify-content:space-around;
		position:absolute;
  		flex-wrap: wrap;
		width:75%;
		height:150px;
	}
.familles-boite{
		/*width:100%;*/
		white-space:break-spaces;
		padding:0px;
		margin:0px;
		max-height:37px;
	}
.familles-libelle {
		/*width:100%;*/
		white-space:break-spaces;
		padding:0px;
	}
#sousCat-container{
		border-radius:3px;
	}
 .categories-boite, .categoriesItems, .categoriesImages {
		/*padding:0px;
		margin:0px;
		border-radius:3px;*/
	}
.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
		/*padding:0px;
		margin:0px;
		left:90px;
		border-radius:3px;*/
	}
.categoriesImages {
		text-align:right;
	}
#rechBarre-container{
		left : 10%;
		grid-column:1 / span 4;
		grid-column-gap:3px;
		grid-row:2 / span 3;
		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;
	}

#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;}
.pub-image {max-width:150px; max-height:150px; min-width:150px; min-height:150px; }
#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;}
#familles-container{	width:55%; height:350px; }
#logo{width: 100%; top:55px; left: 1%;z-index:0;}
.msgInfos>div>span>img{width: 60%; }
}

@media screen and (max-width:540px)  {
#site-container{width: 100%; margin:auto; }
#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; }
.itemBarrePromo{width:50%; margin:auto;}
.zoneAcheter{display:block; margin-bottom:0px; width:100%;  grid-column:1 / span 2; }
.tableCatalogue{width:100%; margin:auto;}
.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{
		/* background:brown; */
		position:relative;
		align-self:start;
		display:block;
		text-align:left;
		vertical-align:middle;
		z-index:90;
		top:3px;
		left:5px;
		height:40px;
		width:40px;
		padding:1px;
		margin:1px;
		position:fixed;
		border-radius:5px;}
// #top-nav-toggle{text-align:left;}
#menuD-container> .top-nav-label {
	position: relative;
	right: 0;
	top: 0px;
	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: 99999;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	// /*top: 0;*/
	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;
	/*background: pink;*/
}

#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);
	/*background: pink;*/
	text-align:center;margin:0;vertical-align:middle;
}

#menuDeroulantBarre{
	display: none;
}

#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
	display: block;
}
#menuDeroulantBarre{
		position:fixed;
		padding:0px;
		margin:auto;
		margin-top:10px;
		top:160px;
		text-align:left;
		z-index:2;
		border-radius:3px;
		height:99%;
		width:99%;
		/*background:grey;*/

	}
.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
		left:1px;
		text-align:left;
		width:auto;
		border-radius:3px;
		padding:10px;
		padding-bottom:0px;
		clear:both;
		padding-bottom:20px;
		margin-bottom:20px;
		width:150px;
	}
.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
		/*padding:0px;
		margin:0px;
		border-radius:3px;
		text-align:left;*/
		/*width:70%;*/

	}
.textePpauxMenuDeroulant {
		z-index:2;
		text-align:left;
		padding:0px;
		margin:0px;
		border-radius:3px;
		/*width:100%;*/
	}
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
		position:relative;
		display:table;
		left:130px;
		top:-30px;
		height:100%;
		/*width:80%;*/
		margin:auto;
		z-index:3;
		margin-left:20px;
		border-radius:3px;
	}
.sousMenuBarre {
		height:100%;
		width:100%;
		margin:auto;
		z-index:3;
		left:130px;
		border-radius:3px;
		padding-bottom:0px;
		margin-left:20px;
		position:absolute;
	}
.sousMenuItem{
		height:100%;
		padding:1px;
		margin:1px;
		/*border-radius:3px;*/
	}
sousMenuItem:hover, .sousMenuItem:hover > * {
		/*height:100%;
		padding:1px;
		margin:1px;*/
	}
.familles-img {
		display:none;
		width:2px;
	}
#menuIndep-container{
		/*float:left;*/
		/*display:flex; flex-direction:rows;*/
		/* background:lightgreen; */
	}
#familles-container{
		background:white;
		left:0px;
		display: flex;
		justify-content:space-around;
		position:absolute;
  		flex-wrap: wrap;
		width:75%;
		height:150px;
	}
.familles-boite{
		/*width:100%;*/
		white-space:break-spaces;
		padding:0px;
		margin:0px;
		max-height:37px;
	}
.familles-libelle {
		/*width:100%;*/
		white-space:break-spaces;
		padding:0px;
	}
#sousCat-container{
		border-radius:3px;
	}
 .categories-boite, .categoriesItems, .categoriesImages {
		/*padding:0px;
		margin:0px;
		border-radius:3px;*/
	}
.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
		/*padding:0px;
		margin:0px;
		left:90px;
		border-radius:3px;*/
	}
.categoriesImages {
		text-align:right;
	}
#rechBarre-container{
		left : 10%;
		grid-column:1 / span 4;
		grid-column-gap:3px;
		grid-row:2 / span 3;
		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;
	}

#syntheseLignes{grid-column:1 / span 2; }



.champsCli,listeDeroulanteCli{width:100%; grid-column: 1 / span 2;}
.pub-image {max-width:150px; max-height:150px; min-width:150px; min-height:150px; }
#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;}
#familles-container{	width:55%; height:350px; }
#logo{width: 100%; top:55px; left: 1%;z-index:0;} 
.msgInfos>div>span>img{width: 60%; } 
} 

@media screen and (max-width:414px)  {
#site-container{width: 100%; margin:auto; }
#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; }
.itemBarrePromo{width:50%; margin:auto;}
.zoneAcheter{display:block; margin-bottom:0px; width:100%;  grid-column:1 / span 2; }
.tableCatalogue{width:100%; margin:auto;}
.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{
		/* background:brown; */
		position:relative;
		align-self:start;
		display:block;
		text-align:left;
		vertical-align:middle;
		z-index:90;
		top:3px;
		left:5px;
		height:40px;
		width:40px;
		padding:1px;
		margin:1px;
		position:fixed;
		border-radius:5px;}
// #top-nav-toggle{text-align:left;}
#menuD-container> .top-nav-label {
	position: relative;
	right: 0;
	top: 0px;
	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: 99999;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	// /*top: 0;*/
	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;
	/*background: pink;*/
}

#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);
	/*background: pink;*/
	text-align:center;margin:0;vertical-align:middle;
}

#menuDeroulantBarre{
	display: none;
}

#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
	display: block;
}
#menuDeroulantBarre{
		position:fixed;
		padding:0px;
		margin:auto;
		margin-top:10px;
		top:160px;
		text-align:left;
		z-index:2;
		border-radius:3px;
		height:99%;
		width:99%;
		/*background:grey;*/

	}
.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
		left:1px;
		text-align:left;
		width:auto;
		border-radius:3px;
		padding:10px;
		padding-bottom:0px;
		clear:both;
		padding-bottom:20px;
		margin-bottom:20px;
		width:150px;
	}
.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
		/*padding:0px;
		margin:0px;
		border-radius:3px;
		text-align:left;*/
		/*width:70%;*/

	}
.textePpauxMenuDeroulant {
		z-index:2;
		text-align:left;
		padding:0px;
		margin:0px;
		border-radius:3px;
		/*width:100%;*/
	}
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
		position:relative;
		display:table;
		left:130px;
		top:-30px;
		height:100%;
		/*width:80%;*/
		margin:auto;
		z-index:3;
		margin-left:20px;
		border-radius:3px;
	}
.sousMenuBarre {
		height:100%;
		width:100%;
		margin:auto;
		z-index:3;
		left:130px;
		border-radius:3px;
		padding-bottom:0px;
		margin-left:20px;
		position:absolute;
	}
.sousMenuItem{
		height:100%;
		padding:1px;
		margin:1px;
		/*border-radius:3px;*/
	}
sousMenuItem:hover, .sousMenuItem:hover > * {
		/*height:100%;
		padding:1px;
		margin:1px;*/
	}
.familles-img {
		display:none;
		width:2px;
	}
#menuIndep-container{
		/*float:left;*/
		/*display:flex; flex-direction:rows;*/
		/* background:lightgreen; */
	}
#familles-container{
		background:white;
		left:0px;
		display: flex;
		justify-content:space-around;
		position:absolute;
  		flex-wrap: wrap;
		width:75%;
		height:150px;
	}
.familles-boite{
		/*width:100%;*/
		white-space:break-spaces;
		padding:0px;
		margin:0px;
		max-height:37px;
	}
.familles-libelle {
		/*width:100%;*/
		white-space:break-spaces;
		padding:0px;
	}
#sousCat-container{
		border-radius:3px;
	}
 .categories-boite, .categoriesItems, .categoriesImages {
		/*padding:0px;
		margin:0px;
		border-radius:3px;*/
	}
.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
		/*padding:0px;
		margin:0px;
		left:90px;
		border-radius:3px;*/
	}
.categoriesImages {
		text-align:right;
	}
#rechBarre-container{
		left : 10%;
		grid-column:1 / span 4;
		grid-column-gap:3px;
		grid-row:2 / span 3;
		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;
	}
#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;}
.pub-image {max-width:150px; max-height:150px; min-width:150px; min-height:150px; }
.boutons{width:auto;}
.itemBarrePromo{width:80%;}
 .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-container{
					width:47%;
					height:550px;
					text-align:center;

				}
.familles-boite{
					text-align:center;
					margin-bottom:1px;
					padding:0px;

				}
.familles-libelle {
					font-size:1rem;
				}
.logo{width: 120%; }
}

@media screen and (max-width:411px)  {
#site-container{width: 100%; margin:auto; } 
#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; } 
.itemBarrePromo{width:50%; margin:auto;}
.zoneAcheter{display:block; margin-bottom:0px; width:100%;  grid-column:1 / span 2; } 
.tableCatalogue{width:100%; margin:auto;} 
.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{
		/* background:brown; */
		position:relative;
		align-self:start;
		display:block;
		text-align:left;
		vertical-align:middle;
		z-index:90;
		top:3px;
		left:5px;
		height:40px;
		width:40px;
		padding:1px;
		margin:1px;
		position:fixed;
		border-radius:5px;}
// #top-nav-toggle{text-align:left;}
#menuD-container> .top-nav-label {
	position: relative;
	right: 0;
	top: 0px;
	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: 99999;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	// /*top: 0;*/
	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;
	/*background: pink;*/
}

#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);
	/*background: pink;*/
	text-align:center;margin:0;vertical-align:middle;
}

#menuDeroulantBarre{
	display: none;
}

#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
	display: block;
}
#menuDeroulantBarre{
		position:fixed;
		padding:0px;
		margin:auto;
		margin-top:10px;
		top:160px;
		text-align:left;
		z-index:2;
		border-radius:3px;
		height:99%;
		width:99%;
		/*background:grey;*/

	}
.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
		left:1px;
		text-align:left;
		width:auto;
		border-radius:3px;
		padding:10px;
		padding-bottom:0px;
		clear:both;
		padding-bottom:20px;
		margin-bottom:20px;
		width:150px;
	}
.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
		/*padding:0px;
		margin:0px;
		border-radius:3px;
		text-align:left;*/
		/*width:70%;*/

	}
.textePpauxMenuDeroulant {
		z-index:2;
		text-align:left;
		padding:0px;
		margin:0px;
		border-radius:3px;
		/*width:100%;*/
	}
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
		position:relative;
		display:table;
		left:130px;
		top:-30px;
		height:100%;
		/*width:80%;*/
		margin:auto;
		z-index:3;
		margin-left:20px;
		border-radius:3px;
	}
.sousMenuBarre {
		height:100%;
		width:100%;
		margin:auto;
		z-index:3;
		left:130px;
		border-radius:3px;
		padding-bottom:0px;
		margin-left:20px;
		position:absolute;
	}
.sousMenuItem{
		height:100%;
		padding:1px;
		margin:1px;
		/*border-radius:3px;*/
	}
sousMenuItem:hover, .sousMenuItem:hover > * {
		/*height:100%;
		padding:1px;
		margin:1px;*/
	}
.familles-img {
		display:none;
		width:2px;
	}
#menuIndep-container{
		/*float:left;*/
		/*display:flex; flex-direction:rows;*/
		/* background:lightgreen; */
	}
#familles-container{
		background:white;
		left:0px;
		display: flex;
		justify-content:space-around;
		position:absolute;
  		flex-wrap: wrap;
		width:75%;
		height:150px;
	}
.familles-boite{
		/*width:100%;*/
		white-space:break-spaces;
		padding:0px;
		margin:0px;
		max-height:37px;
	}
.familles-libelle {
		/*width:100%;*/
		white-space:break-spaces;
		padding:0px;
	}
#sousCat-container{
		border-radius:3px;
	}
 .categories-boite, .categoriesItems, .categoriesImages {
		/*padding:0px;
		margin:0px;
		border-radius:3px;*/
	}
.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
		/*padding:0px;
		margin:0px;
		left:90px;
		border-radius:3px;*/
	}
.categoriesImages {
		text-align:right;
	}
#rechBarre-container{
		left : 10%;
		grid-column:1 / span 4;
		grid-column-gap:3px;
		grid-row:2 / span 3;
		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;
	}
#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;} 
.pub-image {max-width:150px; max-height:150px; min-width:150px; min-height:150px; } 
.boutons{width:auto;} 
.itemBarrePromo{width:80%;} 
 .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-container{
					width:47%;
					height:550px;
					text-align:center;

				}
.familles-boite{
					text-align:center;
					margin-bottom:1px;
					padding:0px;

				}
.familles-libelle {
					font-size:1rem;
				}
.logo{width: 120%; } 
} 

@media screen and (max-width:375px)  {
#site-container{width: 100%; margin:auto; } 
#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; } 
.itemBarrePromo{width:50%; margin:auto;}
.zoneAcheter{display:block; margin-bottom:0px; width:100%;  grid-column:1 / span 2; } 
.tableCatalogue{width:100%; margin:auto;} 
.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{
		/* background:brown; */
		position:relative;
		align-self:start;
		display:block;
		text-align:left;
		vertical-align:middle;
		z-index:90;
		top:3px;
		left:5px;
		height:40px;
		width:40px;
		padding:1px;
		margin:1px;
		position:fixed;
		border-radius:5px;}
// #top-nav-toggle{text-align:left;}
#menuD-container> .top-nav-label {
	position: relative;
	right: 0;
	top: 0px;
	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: 99999;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	// /*top: 0;*/
	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;
	/*background: pink;*/
}

#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);
	/*background: pink;*/
	text-align:center;margin:0;vertical-align:middle;
}

#menuDeroulantBarre{
	display: none;
}

#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
	display: block;
}
#menuDeroulantBarre{
		position:fixed;
		padding:0px;
		margin:auto;
		margin-top:10px;
		top:160px;
		text-align:left;
		z-index:2;
		border-radius:3px;
		height:99%;
		width:99%;
		/*background:grey;*/

	}
.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
		left:1px;
		text-align:left;
		width:auto;
		border-radius:3px;
		padding:10px;
		padding-bottom:0px;
		clear:both;
		padding-bottom:20px;
		margin-bottom:20px;
		width:150px;
	}
.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
		/*padding:0px;
		margin:0px;
		border-radius:3px;
		text-align:left;*/
		/*width:70%;*/

	}
.textePpauxMenuDeroulant {
		z-index:2;
		text-align:left;
		padding:0px;
		margin:0px;
		border-radius:3px;
		/*width:100%;*/
	}
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
		position:relative;
		display:table;
		left:130px;
		top:-30px;
		height:100%;
		/*width:80%;*/
		margin:auto;
		z-index:3;
		margin-left:20px;
		border-radius:3px;
	}
.sousMenuBarre {
		height:100%;
		width:100%;
		margin:auto;
		z-index:3;
		left:130px;
		border-radius:3px;
		padding-bottom:0px;
		margin-left:20px;
		position:absolute;
	}
.sousMenuItem{
		height:100%;
		padding:1px;
		margin:1px;
		/*border-radius:3px;*/
	}
sousMenuItem:hover, .sousMenuItem:hover > * {
		/*height:100%;
		padding:1px;
		margin:1px;*/
	}
.familles-img {
		display:none;
		width:2px;
	}
#menuIndep-container{
		/*float:left;*/
		/*display:flex; flex-direction:rows;*/
		/* background:lightgreen; */
	}
#familles-container{
		background:white;
		left:0px;
		display: flex;
		justify-content:space-around;
		position:absolute;
  		flex-wrap: wrap;
		width:75%;
		height:150px;
	}
.familles-boite{
		/*width:100%;*/
		white-space:break-spaces;
		padding:0px;
		margin:0px;
		max-height:37px;
	}
.familles-libelle {
		/*width:100%;*/
		white-space:break-spaces;
		padding:0px;
	}
#sousCat-container{
		border-radius:3px;
	}
 .categories-boite, .categoriesItems, .categoriesImages {
		/*padding:0px;
		margin:0px;
		border-radius:3px;*/
	}
.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
		/*padding:0px;
		margin:0px;
		left:90px;
		border-radius:3px;*/
	}
.categoriesImages {
		text-align:right;
	}
#rechBarre-container{
		left : 10%;
		grid-column:1 / span 4;
		grid-column-gap:3px;
		grid-row:2 / span 3;
		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;
	}
#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;} 
.pub-image {max-width:150px; max-height:150px; min-width:150px; min-height:150px; } 
.boutons{width:auto;} 
.itemBarrePromo{width:80%;} 
 .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-container{
					width:47%;
					height:550px;
					text-align:center;

				}
.familles-boite{
					text-align:center;
					margin-bottom:1px;
					padding:0px;

				}
.familles-libelle {
					font-size:1rem;
				}
.logo{width: 120%; } 
} 

@media screen and (max-width:360px)  {
#site-container{width: 100%; margin:auto; } 
#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; } 
.itemBarrePromo{width:50%; margin:auto;}
.zoneAcheter{display:block; margin-bottom:0px; width:100%;  grid-column:1 / span 2; } 
.tableCatalogue{width:100%; margin:auto;} 
.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{
		/* background:brown; */
		position:relative;
		align-self:start;
		display:block;
		text-align:left;
		vertical-align:middle;
		z-index:90;
		top:3px;
		left:5px;
		height:40px;
		width:40px;
		padding:1px;
		margin:1px;
		position:fixed;
		border-radius:5px;}
// #top-nav-toggle{text-align:left;}
#menuD-container> .top-nav-label {
	position: relative;
	right: 0;
	top: 0px;
	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: 99999;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	// /*top: 0;*/
	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;
	/*background: pink;*/
}

#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);
	/*background: pink;*/
	text-align:center;margin:0;vertical-align:middle;
}

#menuDeroulantBarre{
	display: none;
}

#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
	display: block;
}
#menuDeroulantBarre{
		position:fixed;
		padding:0px;
		margin:auto;
		margin-top:10px;
		top:160px;
		text-align:left;
		z-index:2;
		border-radius:3px;
		height:99%;
		width:99%;
		/*background:grey;*/

	}
.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
		left:1px;
		text-align:left;
		width:auto;
		border-radius:3px;
		padding:10px;
		padding-bottom:0px;
		clear:both;
		padding-bottom:20px;
		margin-bottom:20px;
		width:150px;
	}
.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
		/*padding:0px;
		margin:0px;
		border-radius:3px;
		text-align:left;*/
		/*width:70%;*/

	}
.textePpauxMenuDeroulant {
		z-index:2;
		text-align:left;
		padding:0px;
		margin:0px;
		border-radius:3px;
		/*width:100%;*/
	}
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
		position:relative;
		display:table;
		left:130px;
		top:-30px;
		height:100%;
		/*width:80%;*/
		margin:auto;
		z-index:3;
		margin-left:20px;
		border-radius:3px;
	}
.sousMenuBarre {
		height:100%;
		width:100%;
		margin:auto;
		z-index:3;
		left:130px;
		border-radius:3px;
		padding-bottom:0px;
		margin-left:20px;
		position:absolute;
	}
.sousMenuItem{
		height:100%;
		padding:1px;
		margin:1px;
		/*border-radius:3px;*/
	}
sousMenuItem:hover, .sousMenuItem:hover > * {
		/*height:100%;
		padding:1px;
		margin:1px;*/
	}
.familles-img {
		display:none;
		width:2px;
	}
#menuIndep-container{
		/*float:left;*/
		/*display:flex; flex-direction:rows;*/
		/* background:lightgreen; */
	}
#familles-container{
		background:white;
		left:0px;
		display: flex;
		justify-content:space-around;
		position:absolute;
  		flex-wrap: wrap;
		width:75%;
		height:150px;
	}
.familles-boite{
		/*width:100%;*/
		white-space:break-spaces;
		padding:0px;
		margin:0px;
		max-height:37px;
	}
.familles-libelle {
		/*width:100%;*/
		white-space:break-spaces;
		padding:0px;
	}
#sousCat-container{
		border-radius:3px;
	}
 .categories-boite, .categoriesItems, .categoriesImages {
		/*padding:0px;
		margin:0px;
		border-radius:3px;*/
	}
.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
		/*padding:0px;
		margin:0px;
		left:90px;
		border-radius:3px;*/
	}
.categoriesImages {
		text-align:right;
	}
#rechBarre-container{
		left : 10%;
		grid-column:1 / span 4;
		grid-column-gap:3px;
		grid-row:2 / span 3;
		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;
	}
#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;} 
.pub-image {max-width:150px; max-height:150px; min-width:150px; min-height:150px; } 
.boutons{width:auto;} 
.itemBarrePromo{width:80%;} 
 .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-container{
					width:47%;
					height:550px;
					text-align:center;

				}
.familles-boite{
					text-align:center;
					margin-bottom:1px;
					padding:0px;

				}
.familles-libelle {
					font-size:1rem;
				}
.logo{width: 120%; } 
.pub-image {max-width:150px; max-height:150px; min-width:150px; min-height:150px; } 
.boutons{width:auto;} 
} 

@media screen and (max-width:320px)  { 
#site-container{width: 100%; margin:auto; } 
#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; } 
.itemBarrePromo{width:50%; margin:auto;}
.zoneAcheter{display:block; margin-bottom:0px; width:100%;  grid-column:1 / span 2; } 
.tableCatalogue{width:100%; margin:auto;} 
.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{
		/* background:brown; */
		position:relative;
		align-self:start;
		display:block;
		text-align:left;
		vertical-align:middle;
		z-index:90;
		top:3px;
		left:5px;
		height:40px;
		width:40px;
		padding:1px;
		margin:1px;
		position:fixed;
		border-radius:5px;}
// #top-nav-toggle{text-align:left;}
#menuD-container> .top-nav-label {
	position: relative;
	right: 0;
	top: 0px;
	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: 99999;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	// /*top: 0;*/
	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;
	/*background: pink;*/
}

#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);
	/*background: pink;*/
	text-align:center;margin:0;vertical-align:middle;
}

#menuDeroulantBarre{
	display: none;
}

#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
	display: block;
}
#menuDeroulantBarre{
		position:fixed;
		padding:0px;
		margin:auto;
		margin-top:10px;
		top:160px;
		text-align:left;
		z-index:2;
		border-radius:3px;
		height:99%;
		width:99%;
		/*background:grey;*/

	}
.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
		left:1px;
		text-align:left;
		width:auto;
		border-radius:3px;
		padding:10px;
		padding-bottom:0px;
		clear:both;
		padding-bottom:20px;
		margin-bottom:20px;
		width:150px;
	}
.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
		/*padding:0px;
		margin:0px;
		border-radius:3px;
		text-align:left;*/
		/*width:70%;*/

	}
.textePpauxMenuDeroulant {
		z-index:2;
		text-align:left;
		padding:0px;
		margin:0px;
		border-radius:3px;
		/*width:100%;*/
	}
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
		position:relative;
		display:table;
		left:130px;
		top:-30px;
		height:100%;
		/*width:80%;*/
		margin:auto;
		z-index:3;
		margin-left:20px;
		border-radius:3px;
	}
.sousMenuBarre {
		height:100%;
		width:100%;
		margin:auto;
		z-index:3;
		left:130px;
		border-radius:3px;
		padding-bottom:0px;
		margin-left:20px;
		position:absolute;
	}
.sousMenuItem{
		height:100%;
		padding:1px;
		margin:1px;
		/*border-radius:3px;*/
	}
sousMenuItem:hover, .sousMenuItem:hover > * {
		/*height:100%;
		padding:1px;
		margin:1px;*/
	}
.familles-img {
		display:none;
		width:2px;
	}
#menuIndep-container{
		/*float:left;*/
		/*display:flex; flex-direction:rows;*/
		/* background:lightgreen; */
	}
#familles-container{
		background:white;
		left:0px;
		display: flex;
		justify-content:space-around;
		position:absolute;
  		flex-wrap: wrap;
		width:75%;
		height:150px;
	}
.familles-boite{
		/*width:100%;*/
		white-space:break-spaces;
		padding:0px;
		margin:0px;
		max-height:37px;
	}
.familles-libelle {
		/*width:100%;*/
		white-space:break-spaces;
		padding:0px;
	}
#sousCat-container{
		border-radius:3px;
	}
 .categories-boite, .categoriesItems, .categoriesImages {
		/*padding:0px;
		margin:0px;
		border-radius:3px;*/
	}
.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
		/*padding:0px;
		margin:0px;
		left:90px;
		border-radius:3px;*/
	}
.categoriesImages {
		text-align:right;
	}
#rechBarre-container{
		left : 10%;
		grid-column:1 / span 4;
		grid-column-gap:3px;
		grid-row:2 / span 3;
		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;
	}
#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;} 
.pub-image {max-width:150px; max-height:150px; min-width:150px; min-height:150px; } 
.boutons{width:auto;} 
.itemBarrePromo{width:80%;} 
 .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-container{
					width:47%;
					height:550px;
					text-align:center;

				}
.familles-boite{
					text-align:center;
					margin-bottom:1px;
					padding:0px;

				}
.familles-libelle {
					font-size:1rem;
				}
.logo{width: 120%; } 
.pub-image {max-width:150px; max-height:150px; min-width:150px; min-height:150px; } 
.boutons{width:auto;} 
} 

@media screen and (max-width:250px)  { 
#site-container{width: 100%; margin:auto; } 
#header-containerImg{grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; }
#promos-container{display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; } 
.itemBarrePromo{width:50%; margin:auto;}
.zoneAcheter{display:block; margin-bottom:0px; width:100%;  grid-column:1 / span 2; } 
.tableCatalogue{width:100%; margin:auto;} 
.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{
		/* background:brown; */
		position:relative;
		align-self:start;
		display:block;
		text-align:left;
		vertical-align:middle;
		z-index:90;
		top:3px;
		left:5px;
		height:40px;
		width:40px;
		padding:1px;
		margin:1px;
		position:fixed;
		border-radius:5px;}
// #top-nav-toggle{text-align:left;}
#menuD-container> .top-nav-label {
	position: relative;
	right: 0;
	top: 0px;
	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: 99999;
	background: #6495ED;
	border-radius: 0.1875rem;
	height: 0.25rem;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 1.125rem;
	// /*top: 0;*/
	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;
	/*background: pink;*/
}

#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);
	/*background: pink;*/
	text-align:center;margin:0;vertical-align:middle;
}

#menuDeroulantBarre{
	display: none;
}

#menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{
	display: block;
}
#menuDeroulantBarre{
		position:fixed;
		padding:0px;
		margin:auto;
		margin-top:10px;
		top:160px;
		text-align:left;
		z-index:2;
		border-radius:3px;
		height:99%;
		width:99%;
		/*background:grey;*/

	}
.menuDeroulantItem ,#menuDeroulantBarre>li:first-child{
		left:1px;
		text-align:left;
		width:auto;
		border-radius:3px;
		padding:10px;
		padding-bottom:0px;
		clear:both;
		padding-bottom:20px;
		margin-bottom:20px;
		width:150px;
	}
.menuDeroulantItem:hover > * , #menuDeroulantBarre>li:first-child > * {
		/*padding:0px;
		margin:0px;
		border-radius:3px;
		text-align:left;*/
		/*width:70%;*/

	}
.textePpauxMenuDeroulant {
		z-index:2;
		text-align:left;
		padding:0px;
		margin:0px;
		border-radius:3px;
		/*width:100%;*/
	}
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul {
		position:relative;
		display:table;
		left:130px;
		top:-30px;
		height:100%;
		/*width:80%;*/
		margin:auto;
		z-index:3;
		margin-left:20px;
		border-radius:3px;
	}
.sousMenuBarre {
		height:100%;
		width:100%;
		margin:auto;
		z-index:3;
		left:130px;
		border-radius:3px;
		padding-bottom:0px;
		margin-left:20px;
		position:absolute;
	}
.sousMenuItem{
		height:100%;
		padding:1px;
		margin:1px;
		/*border-radius:3px;*/
	}
sousMenuItem:hover, .sousMenuItem:hover > * {
		/*height:100%;
		padding:1px;
		margin:1px;*/
	}
.familles-img {
		display:none;
		width:2px;
	}
#menuIndep-container{
		/*float:left;*/
		/*display:flex; flex-direction:rows;*/
		/* background:lightgreen; */
	}
#familles-container{
		background:white;
		left:0px;
		display: flex;
		justify-content:space-around;
		position:absolute;
  		flex-wrap: wrap;
		width:75%;
		height:150px;
	}
.familles-boite{
		/*width:100%;*/
		white-space:break-spaces;
		padding:0px;
		margin:0px;
		max-height:37px;
	}
.familles-libelle {
		/*width:100%;*/
		white-space:break-spaces;
		padding:0px;
	}
#sousCat-container{
		border-radius:3px;
	}
 .categories-boite, .categoriesItems, .categoriesImages {
		/*padding:0px;
		margin:0px;
		border-radius:3px;*/
	}
.familles-boite:hover ul, .familles-boite:hover #sousCat-container {
		/*padding:0px;
		margin:0px;
		left:90px;
		border-radius:3px;*/
	}
.categoriesImages {
		text-align:right;
	}
#rechBarre-container{
		left : 10%;
		grid-column:1 / span 4;
		grid-column-gap:3px;
		grid-row:2 / span 3;
		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;
	}
#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;} 
.pub-image {max-width:150px; max-height:150px; min-width:150px; min-height:150px; } 
.boutons{width:auto;} 
.itemBarrePromo{width:80%;} 
 .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-container{
					width:47%;
					height:550px;
					text-align:center;

				}
.familles-boite{
					text-align:center;
					margin-bottom:1px;
					padding:0px;

				}
.familles-libelle {
					font-size:1rem;
				}
.logo{width: 120%; } 
.pub-image {max-width:150px; max-height:150px; min-width:150px; min-height:150px; } 
.boutons{width:auto;} 
}