@media screen and (max-width:814px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{ position:relative; align-self:start; display:block; text-align:left; vertical-align:middle; z-index:11; height:40px; width:40px; padding:1px; margin:1px; border-radius:5px; } 
#menuD-container> .top-nav-label { position: relative; height: 2.5rem; width: 2.5rem; border-radius: 0.1875rem; cursor: pointer; display: block; font-size: 0; margin: 0; overflow: hidden; padding: 1px; text-align:center; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu::before, #menuD-container> .top-nav-label .open-close-menu::after { content: ""; display: block; position: absolute; background-color: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0; width: 100%; transition-duration: 0.3s, 0.3s; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::before { top: -0.6875rem; transform-origin: top; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::after { bottom: -0.6875rem; transform-origin: bottom; margin:auto; } #menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu { background: none; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before, #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { left: 0.125rem; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before { top: 0px; transform: rotate(45deg); } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { bottom: 0; transform: rotate(-45deg); text-align:center;margin:0;vertical-align:middle; } #menuDeroulantBarre {display: none; } #menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{ display: block; }#menuDeroulantBarre{ position:relative; padding:7px; margin:auto; text-align:left; z-index:2; border-radius:3px; max-height:80%; width:99%; max-width: 100%; } 
.menuDeroulantItem { left:1px; text-align:left; width:auto; border-radius:3px; z-index:0; width:98%; }
.texteMenus { z-index:2; text-align:left; padding:0px; margin:0px; border-radius:3px; display: contents; }
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul { position:relative; left:130px; top:-30px; height:100%; margin:auto; z-index:3; margin-left:20px; border-radius:3px; } 
.sousMenuBarre { height:100%; width:70%; margin:auto; z-index:10; left:130px; border-radius:3px; padding-bottom:0px; margin-left:20px; position:absolute; top:0px; height: max-content; } 
.sousMenuItem{ height:100%; padding:1px; margin:1px; } 
.familles-img { display:none; width:2px; }
#familles-container{ background:white; left:0px; display: flex; flex-direction: column; justify-content:space-around; position:absolute; flex-wrap: wrap; justify-content: flex-start; height:150px; z-index:4; border:0px; width:100%; }
.familles-boite{ white-space:break-spaces; padding:0px; margin:0px; max-height:37px; }
.familles-libelle { white-space:break-spaces; padding:0px; }
#sousCat-container{ border-radius:3px; }
.categoriesImages { text-align:right; }
#rechBarre-container{ left : 10%; grid-column: 1 / span 4; grid-column-gap:3px; margin:0; margin:1px; padding-top:7px; padding-left:28px; justify-self:center; } 
#rechItem{ margin:0px; padding:0px; padding-left:30px; left:10%; } 
#rechInput{ margin:0px; padding:0px; } 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
} 
@media screen and (max-width:800px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{ position:relative; align-self:start; display:block; text-align:left; vertical-align:middle; z-index:11; height:40px; width:40px; padding:1px; margin:1px; border-radius:5px; } 
#menuD-container> .top-nav-label { position: relative; height: 2.5rem; width: 2.5rem; border-radius: 0.1875rem; cursor: pointer; display: block; font-size: 0; margin: 0; overflow: hidden; padding: 1px; text-align:center; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu::before, #menuD-container> .top-nav-label .open-close-menu::after { content: ""; display: block; position: absolute; background-color: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0; width: 100%; transition-duration: 0.3s, 0.3s; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::before { top: -0.6875rem; transform-origin: top; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::after { bottom: -0.6875rem; transform-origin: bottom; margin:auto; } #menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu { background: none; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before, #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { left: 0.125rem; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before { top: 0px; transform: rotate(45deg); } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { bottom: 0; transform: rotate(-45deg); text-align:center;margin:0;vertical-align:middle; } #menuDeroulantBarre {display: none; } #menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{ display: block; }#menuDeroulantBarre{ position:relative; padding:7px; margin:auto; text-align:left; z-index:2; border-radius:3px; max-height:80%; width:99%; max-width: 100%; } 
.menuDeroulantItem { left:1px; text-align:left; width:auto; border-radius:3px; z-index:0; width:98%; }
.texteMenus { z-index:2; text-align:left; padding:0px; margin:0px; border-radius:3px; display: contents; }
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul { position:relative; left:130px; top:-30px; height:100%; margin:auto; z-index:3; margin-left:20px; border-radius:3px; } 
.sousMenuBarre { height:100%; width:70%; margin:auto; z-index:10; left:130px; border-radius:3px; padding-bottom:0px; margin-left:20px; position:absolute; top:0px; height: max-content; } 
.sousMenuItem{ height:100%; padding:1px; margin:1px; } 
.familles-img { display:none; width:2px; }
#familles-container{ background:white; left:0px; display: flex; flex-direction: column; justify-content:space-around; position:absolute; flex-wrap: wrap; justify-content: flex-start; height:150px; z-index:4; border:0px; width:100%; }
.familles-boite{ white-space:break-spaces; padding:0px; margin:0px; max-height:37px; }
.familles-libelle { white-space:break-spaces; padding:0px; }
#sousCat-container{ border-radius:3px; }
.categoriesImages { text-align:right; }
#rechBarre-container{ left : 10%; grid-column: 1 / span 4; grid-column-gap:3px; margin:0; margin:1px; padding-top:7px; padding-left:28px; justify-self:center; } 
#rechItem{ margin:0px; padding:0px; padding-left:30px; left:10%; } 
#rechInput{ margin:0px; padding:0px; } 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
} 
@media screen and (max-width:764px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{ position:relative; align-self:start; display:block; text-align:left; vertical-align:middle; z-index:11; height:40px; width:40px; padding:1px; margin:1px; border-radius:5px; } 
#menuD-container> .top-nav-label { position: relative; height: 2.5rem; width: 2.5rem; border-radius: 0.1875rem; cursor: pointer; display: block; font-size: 0; margin: 0; overflow: hidden; padding: 1px; text-align:center; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu::before, #menuD-container> .top-nav-label .open-close-menu::after { content: ""; display: block; position: absolute; background-color: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0; width: 100%; transition-duration: 0.3s, 0.3s; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::before { top: -0.6875rem; transform-origin: top; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::after { bottom: -0.6875rem; transform-origin: bottom; margin:auto; } #menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu { background: none; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before, #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { left: 0.125rem; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before { top: 0px; transform: rotate(45deg); } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { bottom: 0; transform: rotate(-45deg); text-align:center;margin:0;vertical-align:middle; } #menuDeroulantBarre {display: none; } #menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{ display: block; }#menuDeroulantBarre{ position:relative; padding:7px; margin:auto; text-align:left; z-index:2; border-radius:3px; max-height:80%; width:99%; max-width: 100%; } 
.menuDeroulantItem { left:1px; text-align:left; width:auto; border-radius:3px; z-index:0; width:98%; }
.texteMenus { z-index:2; text-align:left; padding:0px; margin:0px; border-radius:3px; display: contents; }
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul { position:relative; left:130px; top:-30px; height:100%; margin:auto; z-index:3; margin-left:20px; border-radius:3px; } 
.sousMenuBarre { height:100%; width:70%; margin:auto; z-index:10; left:130px; border-radius:3px; padding-bottom:0px; margin-left:20px; position:absolute; top:0px; height: max-content; } 
.sousMenuItem{ height:100%; padding:1px; margin:1px; } 
.familles-img { display:none; width:2px; }
#familles-container{ background:white; left:0px; display: flex; flex-direction: column; justify-content:space-around; position:absolute; flex-wrap: wrap; justify-content: flex-start; height:150px; z-index:4; border:0px; width:100%; }
.familles-boite{ white-space:break-spaces; padding:0px; margin:0px; max-height:37px; }
.familles-libelle { white-space:break-spaces; padding:0px; }
#sousCat-container{ border-radius:3px; }
.categoriesImages { text-align:right; }
#rechBarre-container{ left : 10%; grid-column: 1 / span 4; grid-column-gap:3px; margin:0; margin:1px; padding-top:7px; padding-left:28px; justify-self:center; } 
#rechItem{ margin:0px; padding:0px; padding-left:30px; left:10%; } 
#rechInput{ margin:0px; padding:0px; } 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
* {font-size:1rem;} 
#devise {display:none;} 
#header-container {grid-template-columns: 10% 20% 20% 20% 25%; height:10px;} 
#imgTitre {margin-top:18px; height:100%; line-height:30px; font-size:1.4rem; } 
#eCol2 {margin:auto; height:100%; } 
#menuIndep-container {display:none; width:0px; height:0px;} 
#rechInput {padding:0;font-size:1rem; margin:auto;} 
#container-usrSiteMsg {grid-column:1 / span 4;} 
#menuDeroulantBarre>li:first-child {display:block; } 
#messCom {font-size:1rem;} 
#barreClientContainer, #pageConnexion {display:flex;flex-direction:column;justify-content:space-around;} 
#spinnerPopup, .spinnerPopup {top: 10px; width:80%; } 
.tableCatalogue {display:block;} 
.prix {display:block; margin:auto; text-align: center;} 
} 
@media screen and (max-width:731px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{ position:relative; align-self:start; display:block; text-align:left; vertical-align:middle; z-index:11; height:40px; width:40px; padding:1px; margin:1px; border-radius:5px; } 
#menuD-container> .top-nav-label { position: relative; height: 2.5rem; width: 2.5rem; border-radius: 0.1875rem; cursor: pointer; display: block; font-size: 0; margin: 0; overflow: hidden; padding: 1px; text-align:center; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu::before, #menuD-container> .top-nav-label .open-close-menu::after { content: ""; display: block; position: absolute; background-color: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0; width: 100%; transition-duration: 0.3s, 0.3s; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::before { top: -0.6875rem; transform-origin: top; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::after { bottom: -0.6875rem; transform-origin: bottom; margin:auto; } #menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu { background: none; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before, #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { left: 0.125rem; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before { top: 0px; transform: rotate(45deg); } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { bottom: 0; transform: rotate(-45deg); text-align:center;margin:0;vertical-align:middle; } #menuDeroulantBarre {display: none; } #menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{ display: block; }#menuDeroulantBarre{ position:relative; padding:7px; margin:auto; text-align:left; z-index:2; border-radius:3px; max-height:80%; width:99%; max-width: 100%; } 
.menuDeroulantItem { left:1px; text-align:left; width:auto; border-radius:3px; z-index:0; width:98%; }
.texteMenus { z-index:2; text-align:left; padding:0px; margin:0px; border-radius:3px; display: contents; }
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul { position:relative; left:130px; top:-30px; height:100%; margin:auto; z-index:3; margin-left:20px; border-radius:3px; } 
.sousMenuBarre { height:100%; width:70%; margin:auto; z-index:10; left:130px; border-radius:3px; padding-bottom:0px; margin-left:20px; position:absolute; top:0px; height: max-content; } 
.sousMenuItem{ height:100%; padding:1px; margin:1px; } 
.familles-img { display:none; width:2px; }
#familles-container{ background:white; left:0px; display: flex; flex-direction: column; justify-content:space-around; position:absolute; flex-wrap: wrap; justify-content: flex-start; height:150px; z-index:4; border:0px; width:100%; }
.familles-boite{ white-space:break-spaces; padding:0px; margin:0px; max-height:37px; }
.familles-libelle { white-space:break-spaces; padding:0px; }
#sousCat-container{ border-radius:3px; }
.categoriesImages { text-align:right; }
#rechBarre-container{ left : 10%; grid-column: 1 / span 4; grid-column-gap:3px; margin:0; margin:1px; padding-top:7px; padding-left:28px; justify-self:center; } 
#rechItem{ margin:0px; padding:0px; padding-left:30px; left:10%; } 
#rechInput{ margin:0px; padding:0px; } 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
* {font-size:1rem;} 
#devise {display:none;} 
#header-container {grid-template-columns: 10% 20% 20% 20% 25%; height:10px;} 
#imgTitre {margin-top:18px; height:100%; line-height:30px; font-size:1.4rem; } 
#eCol2 {margin:auto; height:100%; } 
#menuIndep-container {display:none; width:0px; height:0px;} 
#rechInput {padding:0;font-size:1rem; margin:auto;} 
#container-usrSiteMsg {grid-column:1 / span 4;} 
#menuDeroulantBarre>li:first-child {display:block; } 
#messCom {font-size:1rem;} 
#barreClientContainer, #pageConnexion {display:flex;flex-direction:column;justify-content:space-around;} 
#spinnerPopup, .spinnerPopup {top: 10px; width:80%; } 
.tableCatalogue {display:block;} 
.prix {display:block; margin:auto; text-align: center;} 
} 
@media screen and (max-width:720px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{ position:relative; align-self:start; display:block; text-align:left; vertical-align:middle; z-index:11; height:40px; width:40px; padding:1px; margin:1px; border-radius:5px; } 
#menuD-container> .top-nav-label { position: relative; height: 2.5rem; width: 2.5rem; border-radius: 0.1875rem; cursor: pointer; display: block; font-size: 0; margin: 0; overflow: hidden; padding: 1px; text-align:center; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu::before, #menuD-container> .top-nav-label .open-close-menu::after { content: ""; display: block; position: absolute; background-color: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0; width: 100%; transition-duration: 0.3s, 0.3s; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::before { top: -0.6875rem; transform-origin: top; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::after { bottom: -0.6875rem; transform-origin: bottom; margin:auto; } #menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu { background: none; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before, #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { left: 0.125rem; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before { top: 0px; transform: rotate(45deg); } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { bottom: 0; transform: rotate(-45deg); text-align:center;margin:0;vertical-align:middle; } #menuDeroulantBarre {display: none; } #menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{ display: block; }#menuDeroulantBarre{ position:relative; padding:7px; margin:auto; text-align:left; z-index:2; border-radius:3px; max-height:80%; width:99%; max-width: 100%; } 
.menuDeroulantItem { left:1px; text-align:left; width:auto; border-radius:3px; z-index:0; width:98%; }
.texteMenus { z-index:2; text-align:left; padding:0px; margin:0px; border-radius:3px; display: contents; }
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul { position:relative; left:130px; top:-30px; height:100%; margin:auto; z-index:3; margin-left:20px; border-radius:3px; } 
.sousMenuBarre { height:100%; width:70%; margin:auto; z-index:10; left:130px; border-radius:3px; padding-bottom:0px; margin-left:20px; position:absolute; top:0px; height: max-content; } 
.sousMenuItem{ height:100%; padding:1px; margin:1px; } 
.familles-img { display:none; width:2px; }
#familles-container{ background:white; left:0px; display: flex; flex-direction: column; justify-content:space-around; position:absolute; flex-wrap: wrap; justify-content: flex-start; height:150px; z-index:4; border:0px; width:100%; }
.familles-boite{ white-space:break-spaces; padding:0px; margin:0px; max-height:37px; }
.familles-libelle { white-space:break-spaces; padding:0px; }
#sousCat-container{ border-radius:3px; }
.categoriesImages { text-align:right; }
#rechBarre-container{ left : 10%; grid-column: 1 / span 4; grid-column-gap:3px; margin:0; margin:1px; padding-top:7px; padding-left:28px; justify-self:center; } 
#rechItem{ margin:0px; padding:0px; padding-left:30px; left:10%; } 
#rechInput{ margin:0px; padding:0px; } 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
* {font-size:1rem;} 
#devise {display:none;} 
#header-container {grid-template-columns: 10% 20% 20% 20% 25%; height:10px;} 
#imgTitre {margin-top:18px; height:100%; line-height:30px; font-size:1.4rem; } 
#eCol2 {margin:auto; height:100%; } 
#menuIndep-container {display:none; width:0px; height:0px;} 
#rechInput {padding:0;font-size:1rem; margin:auto;} 
#container-usrSiteMsg {grid-column:1 / span 4;} 
#menuDeroulantBarre>li:first-child {display:block; } 
#messCom {font-size:1rem;} 
#barreClientContainer, #pageConnexion {display:flex;flex-direction:column;justify-content:space-around;} 
#spinnerPopup, .spinnerPopup {top: 10px; width:80%; } 
.tableCatalogue {display:block;} 
.prix {display:block; margin:auto; text-align: center;} 
} 
@media screen and (max-width:667px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{ position:relative; align-self:start; display:block; text-align:left; vertical-align:middle; z-index:11; height:40px; width:40px; padding:1px; margin:1px; border-radius:5px; } 
#menuD-container> .top-nav-label { position: relative; height: 2.5rem; width: 2.5rem; border-radius: 0.1875rem; cursor: pointer; display: block; font-size: 0; margin: 0; overflow: hidden; padding: 1px; text-align:center; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu::before, #menuD-container> .top-nav-label .open-close-menu::after { content: ""; display: block; position: absolute; background-color: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0; width: 100%; transition-duration: 0.3s, 0.3s; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::before { top: -0.6875rem; transform-origin: top; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::after { bottom: -0.6875rem; transform-origin: bottom; margin:auto; } #menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu { background: none; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before, #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { left: 0.125rem; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before { top: 0px; transform: rotate(45deg); } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { bottom: 0; transform: rotate(-45deg); text-align:center;margin:0;vertical-align:middle; } #menuDeroulantBarre {display: none; } #menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{ display: block; }#menuDeroulantBarre{ position:relative; padding:7px; margin:auto; text-align:left; z-index:2; border-radius:3px; max-height:80%; width:99%; max-width: 100%; } 
.menuDeroulantItem { left:1px; text-align:left; width:auto; border-radius:3px; z-index:0; width:98%; }
.texteMenus { z-index:2; text-align:left; padding:0px; margin:0px; border-radius:3px; display: contents; }
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul { position:relative; left:130px; top:-30px; height:100%; margin:auto; z-index:3; margin-left:20px; border-radius:3px; } 
.sousMenuBarre { height:100%; width:70%; margin:auto; z-index:10; left:130px; border-radius:3px; padding-bottom:0px; margin-left:20px; position:absolute; top:0px; height: max-content; } 
.sousMenuItem{ height:100%; padding:1px; margin:1px; } 
.familles-img { display:none; width:2px; }
#familles-container{ background:white; left:0px; display: flex; flex-direction: column; justify-content:space-around; position:absolute; flex-wrap: wrap; justify-content: flex-start; height:150px; z-index:4; border:0px; width:100%; }
.familles-boite{ white-space:break-spaces; padding:0px; margin:0px; max-height:37px; }
.familles-libelle { white-space:break-spaces; padding:0px; }
#sousCat-container{ border-radius:3px; }
.categoriesImages { text-align:right; }
#rechBarre-container{ left : 10%; grid-column: 1 / span 4; grid-column-gap:3px; margin:0; margin:1px; padding-top:7px; padding-left:28px; justify-self:center; } 
#rechItem{ margin:0px; padding:0px; padding-left:30px; left:10%; } 
#rechInput{ margin:0px; padding:0px; } 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
* {font-size:1rem;} 
#devise {display:none;} 
#header-container {grid-template-columns: 10% 20% 20% 20% 25%; height:10px;} 
#imgTitre {margin-top:18px; height:100%; line-height:30px; font-size:1.4rem; } 
#eCol2 {margin:auto; height:100%; } 
#menuIndep-container {display:none; width:0px; height:0px;} 
#rechInput {padding:0;font-size:1rem; margin:auto;} 
#container-usrSiteMsg {grid-column:1 / span 4;} 
#menuDeroulantBarre>li:first-child {display:block; } 
#messCom {font-size:1rem;} 
#barreClientContainer, #pageConnexion {display:flex;flex-direction:column;justify-content:space-around;} 
#spinnerPopup, .spinnerPopup {top: 10px; width:80%; } 
.tableCatalogue {display:block;} 
.prix {display:block; margin:auto; text-align: center;} 
} 
@media screen and (max-width:653px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{ position:relative; align-self:start; display:block; text-align:left; vertical-align:middle; z-index:11; height:40px; width:40px; padding:1px; margin:1px; border-radius:5px; } 
#menuD-container> .top-nav-label { position: relative; height: 2.5rem; width: 2.5rem; border-radius: 0.1875rem; cursor: pointer; display: block; font-size: 0; margin: 0; overflow: hidden; padding: 1px; text-align:center; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu::before, #menuD-container> .top-nav-label .open-close-menu::after { content: ""; display: block; position: absolute; background-color: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0; width: 100%; transition-duration: 0.3s, 0.3s; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::before { top: -0.6875rem; transform-origin: top; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::after { bottom: -0.6875rem; transform-origin: bottom; margin:auto; } #menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu { background: none; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before, #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { left: 0.125rem; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before { top: 0px; transform: rotate(45deg); } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { bottom: 0; transform: rotate(-45deg); text-align:center;margin:0;vertical-align:middle; } #menuDeroulantBarre {display: none; } #menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{ display: block; }#menuDeroulantBarre{ position:relative; padding:7px; margin:auto; text-align:left; z-index:2; border-radius:3px; max-height:80%; width:99%; max-width: 100%; } 
.menuDeroulantItem { left:1px; text-align:left; width:auto; border-radius:3px; z-index:0; width:98%; }
.texteMenus { z-index:2; text-align:left; padding:0px; margin:0px; border-radius:3px; display: contents; }
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul { position:relative; left:130px; top:-30px; height:100%; margin:auto; z-index:3; margin-left:20px; border-radius:3px; } 
.sousMenuBarre { height:100%; width:70%; margin:auto; z-index:10; left:130px; border-radius:3px; padding-bottom:0px; margin-left:20px; position:absolute; top:0px; height: max-content; } 
.sousMenuItem{ height:100%; padding:1px; margin:1px; } 
.familles-img { display:none; width:2px; }
#familles-container{ background:white; left:0px; display: flex; flex-direction: column; justify-content:space-around; position:absolute; flex-wrap: wrap; justify-content: flex-start; height:150px; z-index:4; border:0px; width:100%; }
.familles-boite{ white-space:break-spaces; padding:0px; margin:0px; max-height:37px; }
.familles-libelle { white-space:break-spaces; padding:0px; }
#sousCat-container{ border-radius:3px; }
.categoriesImages { text-align:right; }
#rechBarre-container{ left : 10%; grid-column: 1 / span 4; grid-column-gap:3px; margin:0; margin:1px; padding-top:7px; padding-left:28px; justify-self:center; } 
#rechItem{ margin:0px; padding:0px; padding-left:30px; left:10%; } 
#rechInput{ margin:0px; padding:0px; } 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
.flexToColumn {display:flex; flex-direction:column;}
#ongletBarre li {min-width:50%}
#itemMaint {width:85%} 
#btnAdminText {max-width:50%; color:transparent; text-indent:-99px; left:0px; position:relative; padding:0px; font-size:0px; white-space:break-spaces; width:5px;} 
#btnAdminText::after {color:white; content:"Administration";left:1px; font-size:1rem; padding-left:1px; padding-right:1px;} 
.pageConnexion {padding:0px; margin:0px;} 
.libConnCell {grid-column:1 / span 2; text-align:center;} 
.champsConn {width:95%;} 
.libClientsCell {margin:1px; padding:1px;} 
#tableCli {grid-column:1 / span 4;} 
#syntheseLignes {grid-column:1 / span 2; } 
#blocSynthese {grid-column:1 / span 2; grid-row:3; margin:auto; margin-top:2%; margin-bottom:20px; padding:0px; width:100%;} 
.blocItemPanier {margin:auto; width:100%;} 
#recapContainer {grid-column:1 / span 2;} 
#etapesContainer {display:flex; flex-direction:column;} 
#hiddenColonne {display:none; visibility: hidden; width:0px;} 
.hiddenColonne {display:none; visibility: hidden; width:0px;} 
.c64 {grid-column:4;} 
.c75 {grid-column:5;} 
#c64 {grid-column:4;} 
#c75 {grid-column:5;} 
#tableMesCdes {grid-template-columns:10% 25% 25% 20% 20%; grid-column-gap:0px;} 
#detailResponsiv {grid-column:1 / span 4;} 
#pdpBarre {display:flex; flex-direction:column;} 
#etapesContainer {display:flex; flex-direction:column;} 
.gondole-container {display:flex; flex-direction:column; justify-content:space-around; align-content:center; margin:auto; margin-bottom:15px; text-align:center;} 
.grid1to2 {grid-column: 1 / span 2;}
.tablePanier {display:flex;flex-direction:column;} 
.tablePanier>#tableCli {display:grid; grid-column:1 / span 2; grid-row:1;} 
.catalogueImgPrd {max-width:110px;} 
} 
@media screen and (max-width:640px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{ position:relative; align-self:start; display:block; text-align:left; vertical-align:middle; z-index:11; height:40px; width:40px; padding:1px; margin:1px; border-radius:5px; } 
#menuD-container> .top-nav-label { position: relative; height: 2.5rem; width: 2.5rem; border-radius: 0.1875rem; cursor: pointer; display: block; font-size: 0; margin: 0; overflow: hidden; padding: 1px; text-align:center; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu::before, #menuD-container> .top-nav-label .open-close-menu::after { content: ""; display: block; position: absolute; background-color: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0; width: 100%; transition-duration: 0.3s, 0.3s; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::before { top: -0.6875rem; transform-origin: top; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::after { bottom: -0.6875rem; transform-origin: bottom; margin:auto; } #menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu { background: none; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before, #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { left: 0.125rem; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before { top: 0px; transform: rotate(45deg); } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { bottom: 0; transform: rotate(-45deg); text-align:center;margin:0;vertical-align:middle; } #menuDeroulantBarre {display: none; } #menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{ display: block; }#menuDeroulantBarre{ position:relative; padding:7px; margin:auto; text-align:left; z-index:2; border-radius:3px; max-height:80%; width:99%; max-width: 100%; } 
.menuDeroulantItem { left:1px; text-align:left; width:auto; border-radius:3px; z-index:0; width:98%; }
.texteMenus { z-index:2; text-align:left; padding:0px; margin:0px; border-radius:3px; display: contents; }
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul { position:relative; left:130px; top:-30px; height:100%; margin:auto; z-index:3; margin-left:20px; border-radius:3px; } 
.sousMenuBarre { height:100%; width:70%; margin:auto; z-index:10; left:130px; border-radius:3px; padding-bottom:0px; margin-left:20px; position:absolute; top:0px; height: max-content; } 
.sousMenuItem{ height:100%; padding:1px; margin:1px; } 
.familles-img { display:none; width:2px; }
#familles-container{ background:white; left:0px; display: flex; flex-direction: column; justify-content:space-around; position:absolute; flex-wrap: wrap; justify-content: flex-start; height:150px; z-index:4; border:0px; width:100%; }
.familles-boite{ white-space:break-spaces; padding:0px; margin:0px; max-height:37px; }
.familles-libelle { white-space:break-spaces; padding:0px; }
#sousCat-container{ border-radius:3px; }
.categoriesImages { text-align:right; }
#rechBarre-container{ left : 10%; grid-column: 1 / span 4; grid-column-gap:3px; margin:0; margin:1px; padding-top:7px; padding-left:28px; justify-self:center; } 
#rechItem{ margin:0px; padding:0px; padding-left:30px; left:10%; } 
#rechInput{ margin:0px; padding:0px; } 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
.flexToColumn {display:flex; flex-direction:column;}
#ongletBarre li {min-width:50%}
#itemMaint {width:85%} 
#btnAdminText {max-width:50%; color:transparent; text-indent:-99px; left:0px; position:relative; padding:0px; font-size:0px; white-space:break-spaces; width:5px;} 
#btnAdminText::after {color:white; content:"Administration";left:1px; font-size:1rem; padding-left:1px; padding-right:1px;} 
.pageConnexion {padding:0px; margin:0px;} 
.libConnCell {grid-column:1 / span 2; text-align:center;} 
.champsConn {width:95%;} 
.libClientsCell {margin:1px; padding:1px;} 
#tableCli {grid-column:1 / span 4;} 
#syntheseLignes {grid-column:1 / span 2; } 
#blocSynthese {grid-column:1 / span 2; grid-row:3; margin:auto; margin-top:2%; margin-bottom:20px; padding:0px; width:100%;} 
.blocItemPanier {margin:auto; width:100%;} 
#recapContainer {grid-column:1 / span 2;} 
#etapesContainer {display:flex; flex-direction:column;} 
#hiddenColonne {display:none; visibility: hidden; width:0px;} 
.hiddenColonne {display:none; visibility: hidden; width:0px;} 
.c64 {grid-column:4;} 
.c75 {grid-column:5;} 
#c64 {grid-column:4;} 
#c75 {grid-column:5;} 
#tableMesCdes {grid-template-columns:10% 25% 25% 20% 20%; grid-column-gap:0px;} 
#detailResponsiv {grid-column:1 / span 4;} 
#pdpBarre {display:flex; flex-direction:column;} 
#etapesContainer {display:flex; flex-direction:column;} 
.gondole-container {display:flex; flex-direction:column; justify-content:space-around; align-content:center; margin:auto; margin-bottom:15px; text-align:center;} 
.grid1to2 {grid-column: 1 / span 2;}
.tablePanier {display:flex;flex-direction:column;} 
.tablePanier>#tableCli {display:grid; grid-column:1 / span 2; grid-row:1;} 
.catalogueImgPrd {max-width:110px;} 
} 
@media screen and (max-width:568px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{ position:relative; align-self:start; display:block; text-align:left; vertical-align:middle; z-index:11; height:40px; width:40px; padding:1px; margin:1px; border-radius:5px; } 
#menuD-container> .top-nav-label { position: relative; height: 2.5rem; width: 2.5rem; border-radius: 0.1875rem; cursor: pointer; display: block; font-size: 0; margin: 0; overflow: hidden; padding: 1px; text-align:center; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu::before, #menuD-container> .top-nav-label .open-close-menu::after { content: ""; display: block; position: absolute; background-color: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0; width: 100%; transition-duration: 0.3s, 0.3s; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::before { top: -0.6875rem; transform-origin: top; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::after { bottom: -0.6875rem; transform-origin: bottom; margin:auto; } #menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu { background: none; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before, #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { left: 0.125rem; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before { top: 0px; transform: rotate(45deg); } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { bottom: 0; transform: rotate(-45deg); text-align:center;margin:0;vertical-align:middle; } #menuDeroulantBarre {display: none; } #menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{ display: block; }#menuDeroulantBarre{ position:relative; padding:7px; margin:auto; text-align:left; z-index:2; border-radius:3px; max-height:80%; width:99%; max-width: 100%; } 
.menuDeroulantItem { left:1px; text-align:left; width:auto; border-radius:3px; z-index:0; width:98%; }
.texteMenus { z-index:2; text-align:left; padding:0px; margin:0px; border-radius:3px; display: contents; }
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul { position:relative; left:130px; top:-30px; height:100%; margin:auto; z-index:3; margin-left:20px; border-radius:3px; } 
.sousMenuBarre { height:100%; width:70%; margin:auto; z-index:10; left:130px; border-radius:3px; padding-bottom:0px; margin-left:20px; position:absolute; top:0px; height: max-content; } 
.sousMenuItem{ height:100%; padding:1px; margin:1px; } 
.familles-img { display:none; width:2px; }
#familles-container{ background:white; left:0px; display: flex; flex-direction: column; justify-content:space-around; position:absolute; flex-wrap: wrap; justify-content: flex-start; height:150px; z-index:4; border:0px; width:100%; }
.familles-boite{ white-space:break-spaces; padding:0px; margin:0px; max-height:37px; }
.familles-libelle { white-space:break-spaces; padding:0px; }
#sousCat-container{ border-radius:3px; }
.categoriesImages { text-align:right; }
#rechBarre-container{ left : 10%; grid-column: 1 / span 4; grid-column-gap:3px; margin:0; margin:1px; padding-top:7px; padding-left:28px; justify-self:center; } 
#rechItem{ margin:0px; padding:0px; padding-left:30px; left:10%; } 
#rechInput{ margin:0px; padding:0px; } 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
#syntheseLignes {grid-column:1 / span 2; } 
.flexToColumn {display:flex; flex-direction:column;}
.flexToRow {display:flex; flex-direction:row; grid-row-gap:0px; }
.notInResponsive {display: none;}
.onlyInResponsive {display: block; margin: 1px;}
.champsCli,listeDeroulanteCli {width:100%; grid-column: 1 / span 2;}
#tableMesCdes {display:flex; flex-direction:column; grid-column-gap:0px;} 
.w100 {width:100%;} 
.m0 {margin:0px;} 
.champsMesCdesCell {text-align:left;} 
#detailCdeLignes {display:flex; flex-direction:column; width:100%;margin:auto;} 
.msgInfos>div>span>img {width: 60%; } 
#eCol1 {min-width:30px;} 
#header-containerImg {background-size: cover; } 
#header-containerImg {background-size: contain; size:100%; margin:auto; grid-column: 1/span 5;} 
} 
@media screen and (max-width:540px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{ position:relative; align-self:start; display:block; text-align:left; vertical-align:middle; z-index:11; height:40px; width:40px; padding:1px; margin:1px; border-radius:5px; } 
#menuD-container> .top-nav-label { position: relative; height: 2.5rem; width: 2.5rem; border-radius: 0.1875rem; cursor: pointer; display: block; font-size: 0; margin: 0; overflow: hidden; padding: 1px; text-align:center; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu::before, #menuD-container> .top-nav-label .open-close-menu::after { content: ""; display: block; position: absolute; background-color: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0; width: 100%; transition-duration: 0.3s, 0.3s; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::before { top: -0.6875rem; transform-origin: top; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::after { bottom: -0.6875rem; transform-origin: bottom; margin:auto; } #menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu { background: none; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before, #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { left: 0.125rem; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before { top: 0px; transform: rotate(45deg); } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { bottom: 0; transform: rotate(-45deg); text-align:center;margin:0;vertical-align:middle; } #menuDeroulantBarre {display: none; } #menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{ display: block; }#menuDeroulantBarre{ position:relative; padding:7px; margin:auto; text-align:left; z-index:2; border-radius:3px; max-height:80%; width:99%; max-width: 100%; } 
.menuDeroulantItem { left:1px; text-align:left; width:auto; border-radius:3px; z-index:0; width:98%; }
.texteMenus { z-index:2; text-align:left; padding:0px; margin:0px; border-radius:3px; display: contents; }
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul { position:relative; left:130px; top:-30px; height:100%; margin:auto; z-index:3; margin-left:20px; border-radius:3px; } 
.sousMenuBarre { height:100%; width:70%; margin:auto; z-index:10; left:130px; border-radius:3px; padding-bottom:0px; margin-left:20px; position:absolute; top:0px; height: max-content; } 
.sousMenuItem{ height:100%; padding:1px; margin:1px; } 
.familles-img { display:none; width:2px; }
#familles-container{ background:white; left:0px; display: flex; flex-direction: column; justify-content:space-around; position:absolute; flex-wrap: wrap; justify-content: flex-start; height:150px; z-index:4; border:0px; width:100%; }
.familles-boite{ white-space:break-spaces; padding:0px; margin:0px; max-height:37px; }
.familles-libelle { white-space:break-spaces; padding:0px; }
#sousCat-container{ border-radius:3px; }
.categoriesImages { text-align:right; }
#rechBarre-container{ left : 10%; grid-column: 1 / span 4; grid-column-gap:3px; margin:0; margin:1px; padding-top:7px; padding-left:28px; justify-self:center; } 
#rechItem{ margin:0px; padding:0px; padding-left:30px; left:10%; } 
#rechInput{ margin:0px; padding:0px; } 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
#syntheseLignes {grid-column:1 / span 2; } 
.flexToColumn {display:flex; flex-direction:column;}
.flexToRow {display:flex; flex-direction:row; grid-row-gap:0px; }
.notInResponsive {display: none;}
.onlyInResponsive {display: block; margin: 1px;}
.champsCli,listeDeroulanteCli {width:100%; grid-column: 1 / span 2;}
#tableMesCdes {display:flex; flex-direction:column; grid-column-gap:0px;} 
.w100 {width:100%;} 
.m0 {margin:0px;} 
.champsMesCdesCell {text-align:left;} 
#detailCdeLignes {display:flex; flex-direction:column; width:100%;margin:auto;} 
.msgInfos>div>span>img {width: 60%; } 
#eCol1 {min-width:30px;} 
#header-containerImg {background-size: cover; } 
#header-containerImg {background-size: contain; size:100%; margin:auto; grid-column: 1/span 5;} 
} 
@media screen and (max-width:414px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{ position:relative; align-self:start; display:block; text-align:left; vertical-align:middle; z-index:11; height:40px; width:40px; padding:1px; margin:1px; border-radius:5px; } 
#menuD-container> .top-nav-label { position: relative; height: 2.5rem; width: 2.5rem; border-radius: 0.1875rem; cursor: pointer; display: block; font-size: 0; margin: 0; overflow: hidden; padding: 1px; text-align:center; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu::before, #menuD-container> .top-nav-label .open-close-menu::after { content: ""; display: block; position: absolute; background-color: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0; width: 100%; transition-duration: 0.3s, 0.3s; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::before { top: -0.6875rem; transform-origin: top; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::after { bottom: -0.6875rem; transform-origin: bottom; margin:auto; } #menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu { background: none; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before, #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { left: 0.125rem; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before { top: 0px; transform: rotate(45deg); } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { bottom: 0; transform: rotate(-45deg); text-align:center;margin:0;vertical-align:middle; } #menuDeroulantBarre {display: none; } #menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{ display: block; }#menuDeroulantBarre{ position:relative; padding:7px; margin:auto; text-align:left; z-index:2; border-radius:3px; max-height:80%; width:99%; max-width: 100%; } 
.menuDeroulantItem { left:1px; text-align:left; width:auto; border-radius:3px; z-index:0; width:98%; }
.texteMenus { z-index:2; text-align:left; padding:0px; margin:0px; border-radius:3px; display: contents; }
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul { position:relative; left:130px; top:-30px; height:100%; margin:auto; z-index:3; margin-left:20px; border-radius:3px; } 
.sousMenuBarre { height:100%; width:70%; margin:auto; z-index:10; left:130px; border-radius:3px; padding-bottom:0px; margin-left:20px; position:absolute; top:0px; height: max-content; } 
.sousMenuItem{ height:100%; padding:1px; margin:1px; } 
.familles-img { display:none; width:2px; }
#familles-container{ background:white; left:0px; display: flex; flex-direction: column; justify-content:space-around; position:absolute; flex-wrap: wrap; justify-content: flex-start; height:150px; z-index:4; border:0px; width:100%; }
.familles-boite{ white-space:break-spaces; padding:0px; margin:0px; max-height:37px; }
.familles-libelle { white-space:break-spaces; padding:0px; }
#sousCat-container{ border-radius:3px; }
.categoriesImages { text-align:right; }
#rechBarre-container{ left : 10%; grid-column: 1 / span 4; grid-column-gap:3px; margin:0; margin:1px; padding-top:7px; padding-left:28px; justify-self:center; } 
#rechItem{ margin:0px; padding:0px; padding-left:30px; left:10%; } 
#rechInput{ margin:0px; padding:0px; } 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
#header-containerImg {display:flex; flex-wrap:wrap; } 
#tablePages {display:block;} 
.menuDeroulantItem {display:block; width:100%;} 
#gallerie {display:block; padding-bottom:0px; margin-bottom:0px;} 
#tableCli {display:flex; flex-direction:column; justify-content:space-between; margin:auto;} 
.libClientsCell,.libClients {text-align:left;} 
.boutons {width:auto;} 
.gondole-container {display:flex; flex-direction:column; justify-content:space-around; align-content:center; margin:auto; margin-bottom:15px; text-align:center;} 
tablePanier {grid-column:1;} 
champsPanierCell {width:100%} 
#etapesContainer {display:flex; flex-direction:column;padding:20px;} 
.champsCli,listeDeroulanteCli {width:100%; grid-column: 1 / span 2;}
.familles-boite {text-align:center; margin-bottom:1px; padding:0px; }
.familles-libelle {font-size:1rem; }
#logo {display:none; } 
.titreFamilleVignette:first-child {margin-top:20px;}} 
@media screen and (max-width:411px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{ position:relative; align-self:start; display:block; text-align:left; vertical-align:middle; z-index:11; height:40px; width:40px; padding:1px; margin:1px; border-radius:5px; } 
#menuD-container> .top-nav-label { position: relative; height: 2.5rem; width: 2.5rem; border-radius: 0.1875rem; cursor: pointer; display: block; font-size: 0; margin: 0; overflow: hidden; padding: 1px; text-align:center; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu::before, #menuD-container> .top-nav-label .open-close-menu::after { content: ""; display: block; position: absolute; background-color: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0; width: 100%; transition-duration: 0.3s, 0.3s; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::before { top: -0.6875rem; transform-origin: top; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::after { bottom: -0.6875rem; transform-origin: bottom; margin:auto; } #menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu { background: none; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before, #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { left: 0.125rem; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before { top: 0px; transform: rotate(45deg); } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { bottom: 0; transform: rotate(-45deg); text-align:center;margin:0;vertical-align:middle; } #menuDeroulantBarre {display: none; } #menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{ display: block; }#menuDeroulantBarre{ position:relative; padding:7px; margin:auto; text-align:left; z-index:2; border-radius:3px; max-height:80%; width:99%; max-width: 100%; } 
.menuDeroulantItem { left:1px; text-align:left; width:auto; border-radius:3px; z-index:0; width:98%; }
.texteMenus { z-index:2; text-align:left; padding:0px; margin:0px; border-radius:3px; display: contents; }
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul { position:relative; left:130px; top:-30px; height:100%; margin:auto; z-index:3; margin-left:20px; border-radius:3px; } 
.sousMenuBarre { height:100%; width:70%; margin:auto; z-index:10; left:130px; border-radius:3px; padding-bottom:0px; margin-left:20px; position:absolute; top:0px; height: max-content; } 
.sousMenuItem{ height:100%; padding:1px; margin:1px; } 
.familles-img { display:none; width:2px; }
#familles-container{ background:white; left:0px; display: flex; flex-direction: column; justify-content:space-around; position:absolute; flex-wrap: wrap; justify-content: flex-start; height:150px; z-index:4; border:0px; width:100%; }
.familles-boite{ white-space:break-spaces; padding:0px; margin:0px; max-height:37px; }
.familles-libelle { white-space:break-spaces; padding:0px; }
#sousCat-container{ border-radius:3px; }
.categoriesImages { text-align:right; }
#rechBarre-container{ left : 10%; grid-column: 1 / span 4; grid-column-gap:3px; margin:0; margin:1px; padding-top:7px; padding-left:28px; justify-self:center; } 
#rechItem{ margin:0px; padding:0px; padding-left:30px; left:10%; } 
#rechInput{ margin:0px; padding:0px; } 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
#header-containerImg {display:flex; flex-wrap:wrap; } 
#tablePages {display:block;} 
.menuDeroulantItem {display:block; width:100%;} 
#gallerie {display:block; padding-bottom:0px; margin-bottom:0px;} 
#tableCli {display:flex; flex-direction:column; justify-content:space-between; margin:auto;} 
.libClientsCell,.libClients {text-align:left;} 
.boutons {width:auto;} 
.gondole-container {display:flex; flex-direction:column; justify-content:space-around; align-content:center; margin:auto; margin-bottom:15px; text-align:center;} 
tablePanier {grid-column:1;} 
champsPanierCell {width:100%} 
#etapesContainer {display:flex; flex-direction:column;padding:20px;} 
.champsCli,listeDeroulanteCli {width:100%; grid-column: 1 / span 2;}
.familles-boite {text-align:center; margin-bottom:1px; padding:0px; }
.familles-libelle {font-size:1rem; }
#logo {display:none; } 
.titreFamilleVignette:first-child {margin-top:20px;}} 
@media screen and (max-width:375px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{ position:relative; align-self:start; display:block; text-align:left; vertical-align:middle; z-index:11; height:40px; width:40px; padding:1px; margin:1px; border-radius:5px; } 
#menuD-container> .top-nav-label { position: relative; height: 2.5rem; width: 2.5rem; border-radius: 0.1875rem; cursor: pointer; display: block; font-size: 0; margin: 0; overflow: hidden; padding: 1px; text-align:center; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu::before, #menuD-container> .top-nav-label .open-close-menu::after { content: ""; display: block; position: absolute; background-color: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0; width: 100%; transition-duration: 0.3s, 0.3s; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::before { top: -0.6875rem; transform-origin: top; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::after { bottom: -0.6875rem; transform-origin: bottom; margin:auto; } #menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu { background: none; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before, #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { left: 0.125rem; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before { top: 0px; transform: rotate(45deg); } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { bottom: 0; transform: rotate(-45deg); text-align:center;margin:0;vertical-align:middle; } #menuDeroulantBarre {display: none; } #menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{ display: block; }#menuDeroulantBarre{ position:relative; padding:7px; margin:auto; text-align:left; z-index:2; border-radius:3px; max-height:80%; width:99%; max-width: 100%; } 
.menuDeroulantItem { left:1px; text-align:left; width:auto; border-radius:3px; z-index:0; width:98%; }
.texteMenus { z-index:2; text-align:left; padding:0px; margin:0px; border-radius:3px; display: contents; }
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul { position:relative; left:130px; top:-30px; height:100%; margin:auto; z-index:3; margin-left:20px; border-radius:3px; } 
.sousMenuBarre { height:100%; width:70%; margin:auto; z-index:10; left:130px; border-radius:3px; padding-bottom:0px; margin-left:20px; position:absolute; top:0px; height: max-content; } 
.sousMenuItem{ height:100%; padding:1px; margin:1px; } 
.familles-img { display:none; width:2px; }
#familles-container{ background:white; left:0px; display: flex; flex-direction: column; justify-content:space-around; position:absolute; flex-wrap: wrap; justify-content: flex-start; height:150px; z-index:4; border:0px; width:100%; }
.familles-boite{ white-space:break-spaces; padding:0px; margin:0px; max-height:37px; }
.familles-libelle { white-space:break-spaces; padding:0px; }
#sousCat-container{ border-radius:3px; }
.categoriesImages { text-align:right; }
#rechBarre-container{ left : 10%; grid-column: 1 / span 4; grid-column-gap:3px; margin:0; margin:1px; padding-top:7px; padding-left:28px; justify-self:center; } 
#rechItem{ margin:0px; padding:0px; padding-left:30px; left:10%; } 
#rechInput{ margin:0px; padding:0px; } 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
#header-containerImg {display:flex; flex-wrap:wrap; } 
#tablePages {display:block;} 
.menuDeroulantItem {display:block; width:100%;} 
#gallerie {display:block; padding-bottom:0px; margin-bottom:0px;} 
#tableCli {display:flex; flex-direction:column; justify-content:space-between; margin:auto;} 
.libClientsCell,.libClients {text-align:left;} 
.boutons {width:auto;} 
.gondole-container {display:flex; flex-direction:column; justify-content:space-around; align-content:center; margin:auto; margin-bottom:15px; text-align:center;} 
tablePanier {grid-column:1;} 
champsPanierCell {width:100%} 
#etapesContainer {display:flex; flex-direction:column;padding:20px;} 
.champsCli,listeDeroulanteCli {width:100%; grid-column: 1 / span 2;}
.familles-boite {text-align:center; margin-bottom:1px; padding:0px; }
.familles-libelle {font-size:1rem; }
#logo {display:none; } 
.titreFamilleVignette:first-child {margin-top:20px;}} 
@media screen and (max-width:360px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{ position:relative; align-self:start; display:block; text-align:left; vertical-align:middle; z-index:11; height:40px; width:40px; padding:1px; margin:1px; border-radius:5px; } 
#menuD-container> .top-nav-label { position: relative; height: 2.5rem; width: 2.5rem; border-radius: 0.1875rem; cursor: pointer; display: block; font-size: 0; margin: 0; overflow: hidden; padding: 1px; text-align:center; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu::before, #menuD-container> .top-nav-label .open-close-menu::after { content: ""; display: block; position: absolute; background-color: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0; width: 100%; transition-duration: 0.3s, 0.3s; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::before { top: -0.6875rem; transform-origin: top; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::after { bottom: -0.6875rem; transform-origin: bottom; margin:auto; } #menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu { background: none; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before, #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { left: 0.125rem; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before { top: 0px; transform: rotate(45deg); } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { bottom: 0; transform: rotate(-45deg); text-align:center;margin:0;vertical-align:middle; } #menuDeroulantBarre {display: none; } #menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{ display: block; }#menuDeroulantBarre{ position:relative; padding:7px; margin:auto; text-align:left; z-index:2; border-radius:3px; max-height:80%; width:99%; max-width: 100%; } 
.menuDeroulantItem { left:1px; text-align:left; width:auto; border-radius:3px; z-index:0; width:98%; }
.texteMenus { z-index:2; text-align:left; padding:0px; margin:0px; border-radius:3px; display: contents; }
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul { position:relative; left:130px; top:-30px; height:100%; margin:auto; z-index:3; margin-left:20px; border-radius:3px; } 
.sousMenuBarre { height:100%; width:70%; margin:auto; z-index:10; left:130px; border-radius:3px; padding-bottom:0px; margin-left:20px; position:absolute; top:0px; height: max-content; } 
.sousMenuItem{ height:100%; padding:1px; margin:1px; } 
.familles-img { display:none; width:2px; }
#familles-container{ background:white; left:0px; display: flex; flex-direction: column; justify-content:space-around; position:absolute; flex-wrap: wrap; justify-content: flex-start; height:150px; z-index:4; border:0px; width:100%; }
.familles-boite{ white-space:break-spaces; padding:0px; margin:0px; max-height:37px; }
.familles-libelle { white-space:break-spaces; padding:0px; }
#sousCat-container{ border-radius:3px; }
.categoriesImages { text-align:right; }
#rechBarre-container{ left : 10%; grid-column: 1 / span 4; grid-column-gap:3px; margin:0; margin:1px; padding-top:7px; padding-left:28px; justify-self:center; } 
#rechItem{ margin:0px; padding:0px; padding-left:30px; left:10%; } 
#rechInput{ margin:0px; padding:0px; } 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
#header-containerImg {display:flex; flex-wrap:wrap; } 
#tablePages {display:block;} 
.menuDeroulantItem {display:block; width:100%;} 
#gallerie {display:block; padding-bottom:0px; margin-bottom:0px;} 
#tableCli {display:flex; flex-direction:column; justify-content:space-between; margin:auto;} 
.libClientsCell,.libClients {text-align:left;} 
.boutons {width:auto;} 
.gondole-container {display:flex; flex-direction:column; justify-content:space-around; align-content:center; margin:auto; margin-bottom:15px; text-align:center;} 
tablePanier {grid-column:1;} 
champsPanierCell {width:100%} 
#etapesContainer {display:flex; flex-direction:column;padding:20px;} 
.champsCli,listeDeroulanteCli {width:100%; grid-column: 1 / span 2;}
.familles-boite {text-align:center; margin-bottom:1px; padding:0px; }
.familles-libelle {font-size:1rem; }
#logo {display:none; } 
.titreFamilleVignette:first-child {margin-top:20px;}.boutons {width:auto;} 
} 
@media screen and (max-width:320px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{ position:relative; align-self:start; display:block; text-align:left; vertical-align:middle; z-index:11; height:40px; width:40px; padding:1px; margin:1px; border-radius:5px; } 
#menuD-container> .top-nav-label { position: relative; height: 2.5rem; width: 2.5rem; border-radius: 0.1875rem; cursor: pointer; display: block; font-size: 0; margin: 0; overflow: hidden; padding: 1px; text-align:center; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu::before, #menuD-container> .top-nav-label .open-close-menu::after { content: ""; display: block; position: absolute; background-color: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0; width: 100%; transition-duration: 0.3s, 0.3s; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::before { top: -0.6875rem; transform-origin: top; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::after { bottom: -0.6875rem; transform-origin: bottom; margin:auto; } #menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu { background: none; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before, #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { left: 0.125rem; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before { top: 0px; transform: rotate(45deg); } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { bottom: 0; transform: rotate(-45deg); text-align:center;margin:0;vertical-align:middle; } #menuDeroulantBarre {display: none; } #menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{ display: block; }#menuDeroulantBarre{ position:relative; padding:7px; margin:auto; text-align:left; z-index:2; border-radius:3px; max-height:80%; width:99%; max-width: 100%; } 
.menuDeroulantItem { left:1px; text-align:left; width:auto; border-radius:3px; z-index:0; width:98%; }
.texteMenus { z-index:2; text-align:left; padding:0px; margin:0px; border-radius:3px; display: contents; }
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul { position:relative; left:130px; top:-30px; height:100%; margin:auto; z-index:3; margin-left:20px; border-radius:3px; } 
.sousMenuBarre { height:100%; width:70%; margin:auto; z-index:10; left:130px; border-radius:3px; padding-bottom:0px; margin-left:20px; position:absolute; top:0px; height: max-content; } 
.sousMenuItem{ height:100%; padding:1px; margin:1px; } 
.familles-img { display:none; width:2px; }
#familles-container{ background:white; left:0px; display: flex; flex-direction: column; justify-content:space-around; position:absolute; flex-wrap: wrap; justify-content: flex-start; height:150px; z-index:4; border:0px; width:100%; }
.familles-boite{ white-space:break-spaces; padding:0px; margin:0px; max-height:37px; }
.familles-libelle { white-space:break-spaces; padding:0px; }
#sousCat-container{ border-radius:3px; }
.categoriesImages { text-align:right; }
#rechBarre-container{ left : 10%; grid-column: 1 / span 4; grid-column-gap:3px; margin:0; margin:1px; padding-top:7px; padding-left:28px; justify-self:center; } 
#rechItem{ margin:0px; padding:0px; padding-left:30px; left:10%; } 
#rechInput{ margin:0px; padding:0px; } 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
#header-containerImg {display:flex; flex-wrap:wrap; } 
#tablePages {display:block;} 
.menuDeroulantItem {display:block; width:100%;} 
#gallerie {display:block; padding-bottom:0px; margin-bottom:0px;} 
#tableCli {display:flex; flex-direction:column; justify-content:space-between; margin:auto;} 
.libClientsCell,.libClients {text-align:left;} 
.boutons {width:auto;} 
.gondole-container {display:flex; flex-direction:column; justify-content:space-around; align-content:center; margin:auto; margin-bottom:15px; text-align:center;} 
tablePanier {grid-column:1;} 
champsPanierCell {width:100%} 
#etapesContainer {display:flex; flex-direction:column;padding:20px;} 
.champsCli,listeDeroulanteCli {width:100%; grid-column: 1 / span 2;}
.familles-boite {text-align:center; margin-bottom:1px; padding:0px; }
.familles-libelle {font-size:1rem; }
#logo {display:none; } 
.titreFamilleVignette:first-child {margin-top:20px;}.boutons {width:auto;} 
} 
@media screen and (max-width:250px)  {
#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } 
#menuD-container {top:25;} 
#bandeau-container {grid-column:1 / span 5;} 
#page-container {grid-column:1 / span 5;} 
#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } 
.itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} 
.zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } 
.catalogueImgPrd {max-width:150px;} 
.boutons {margin:auto; width:auto;} 
.msgKo {display:block;margin:auto;} 
#panierConteneurItem {display:flex;flex-direction:column} 
#menuIndep-container {display:none; width:0px; height:0px;} 
#menuD-container{ position:relative; align-self:start; display:block; text-align:left; vertical-align:middle; z-index:11; height:40px; width:40px; padding:1px; margin:1px; border-radius:5px; } 
#menuD-container> .top-nav-label { position: relative; height: 2.5rem; width: 2.5rem; border-radius: 0.1875rem; cursor: pointer; display: block; font-size: 0; margin: 0; overflow: hidden; padding: 1px; text-align:center; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu { display: block; margin:auto; position: absolute; z-index: 11; background: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0.1875rem; right: 0.1875rem; top: 1.125rem; transition: 0.25s ease-in-out 0s; } #menuD-container> .top-nav-label .open-close-menu::before, #menuD-container> .top-nav-label .open-close-menu::after { content: ""; display: block; position: absolute; background-color: #8B0000; border-radius: 0.1875rem; height: 0.25rem; left: 0; width: 100%; transition-duration: 0.3s, 0.3s; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::before { top: -0.6875rem; transform-origin: top; margin:auto; } #menuD-container> .top-nav-label .open-close-menu::after { bottom: -0.6875rem; transform-origin: bottom; margin:auto; } #menuD-container> [type="checkbox"]:checked ~ .top-nav-label .open-close-menu { background: none; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before, #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { left: 0.125rem; transition-delay: 0s, 0.3s; } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::before { top: 0px; transform: rotate(45deg); } #menuD-container > [type="checkbox"]:checked ~ .top-nav-label .open-close-menu::after { bottom: 0; transform: rotate(-45deg); text-align:center;margin:0;vertical-align:middle; } #menuDeroulantBarre {display: none; } #menuD-container > [type="checkbox"]:checked ~ #menuDeroulantBarre{ display: block; }#menuDeroulantBarre{ position:relative; padding:7px; margin:auto; text-align:left; z-index:2; border-radius:3px; max-height:80%; width:99%; max-width: 100%; } 
.menuDeroulantItem { left:1px; text-align:left; width:auto; border-radius:3px; z-index:0; width:98%; }
.texteMenus { z-index:2; text-align:left; padding:0px; margin:0px; border-radius:3px; display: contents; }
.menuDeroulantItem:hover > ul, #menuDeroulantBarre>li:first-child:hover > ul { position:relative; left:130px; top:-30px; height:100%; margin:auto; z-index:3; margin-left:20px; border-radius:3px; } 
.sousMenuBarre { height:100%; width:70%; margin:auto; z-index:10; left:130px; border-radius:3px; padding-bottom:0px; margin-left:20px; position:absolute; top:0px; height: max-content; } 
.sousMenuItem{ height:100%; padding:1px; margin:1px; } 
.familles-img { display:none; width:2px; }
#familles-container{ background:white; left:0px; display: flex; flex-direction: column; justify-content:space-around; position:absolute; flex-wrap: wrap; justify-content: flex-start; height:150px; z-index:4; border:0px; width:100%; }
.familles-boite{ white-space:break-spaces; padding:0px; margin:0px; max-height:37px; }
.familles-libelle { white-space:break-spaces; padding:0px; }
#sousCat-container{ border-radius:3px; }
.categoriesImages { text-align:right; }
#rechBarre-container{ left : 10%; grid-column: 1 / span 4; grid-column-gap:3px; margin:0; margin:1px; padding-top:7px; padding-left:28px; justify-self:center; } 
#rechItem{ margin:0px; padding:0px; padding-left:30px; left:10%; } 
#rechInput{ margin:0px; padding:0px; } 
.tableCatalogue {width:90%; grid-template-columns:auto;} 
#tableCli{ width:97%; margin:auto; } 
#container-usrSiteMsg{ margin-top:20px; } 
.pdpTxt {font-size:1rem; } 
#header-containerImg {display:flex; flex-wrap:wrap; } 
#tablePages {display:block;} 
.menuDeroulantItem {display:block; width:100%;} 
#gallerie {display:block; padding-bottom:0px; margin-bottom:0px;} 
#tableCli {display:flex; flex-direction:column; justify-content:space-between; margin:auto;} 
.libClientsCell,.libClients {text-align:left;} 
.boutons {width:auto;} 
.gondole-container {display:flex; flex-direction:column; justify-content:space-around; align-content:center; margin:auto; margin-bottom:15px; text-align:center;} 
tablePanier {grid-column:1;} 
champsPanierCell {width:100%} 
#etapesContainer {display:flex; flex-direction:column;padding:20px;} 
.champsCli,listeDeroulanteCli {width:100%; grid-column: 1 / span 2;}
.familles-boite {text-align:center; margin-bottom:1px; padding:0px; }
.familles-libelle {font-size:1rem; }
#logo {display:none; } 
.titreFamilleVignette:first-child {margin-top:20px;}.boutons {width:auto;} 
}