@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap');
html { -ms-text-size-adjust: 100%;  -webkit-text-size-adjust: 100%;}
body { background-color:#f5f5f5; margin:0; }
body, td, div, button {  font-family:'Poppins',Montserrat,Helvetica Neue,Helvetica,Tahoma, Arial, sans-serif; font-size:12px;  color:#666;  }
img { border:none;}
td { padding:5px 10px;}

a {color:#00b3a1;  text-decoration:none;}
a:hover { color:#0a8e88;}

td a {color:#00b3a1 !important;  text-decoration:none;}

.black {color:#000;}
.blue {color:#00b3a1;}
.grey {color:#999;}
.pink {color:#ff1d71 !important; }

.blackbold {color:#000 !important; font-weight:600;}
.bluebold {color:#00b3a1 !important; font-weight:600;}
.greenbold {color:#a1d70e !important; font-weight:600;}
.pinkbold {color:#ff1d71 !important; font-weight:600;}

h1 { color:#000 !important; font-size:22px; margin:8px 30px 15px 0 !important; padding:0 !important; font-weight:normal; }
h3 { color:#000; font-size:16px; font-weight:normal; margin:0; padding:3px 10px 3px 0; }
/*h1 { color:#000; font-size:24px; margin:20px 0px; padding:0; font-weight:normal;}*/
/*h2 {  color:#000; font-size:20px; font-weight:normal; margin:0; padding:0; float:left; }*/
/*h2 {  color:#000; font-size:20px; font-weight:normal; margin:5px; }*/
/*h3 { color:#00b3a1; font-size:16px; margin:5px 0 5px 0;font-weight:normal; }*/
h4 { color:#00b3a1; font-size:12px; margin:0; padding:0; font-weight:normal; line-height:16px;}

header {background: #3a3f44; width:100%; height:60px; color:#fff; position:relative;}
footer {background: #3a3f44; width:100%; height:40px; color:#fff; }
header .left { float:left;}
header .right { float:right; margin-right:10px;}
header img { height:14px; padding:6px;}

main { padding:15px 20px 0px 20px;  z-index: 1;  z-index: var(--layout-index-main); min-height:500px; }

input, textarea, select, button {  padding:3px 5px;border:1px solid #ddd;  font-size:12px; border-radius:5px;font-family:Montserrat,Helvetica,Tahoma, Arial, Helvetica, sans-serif; background:#fff; }
input:focus, textarea:focus, select:focus { outline:none;border-top-width:2px; border-top-color:#25b4ad;}
textarea {width:90%; min-height:100px;}


input.btn, button.btn {background:#00b3a1; border:none; text-align:center;  color:#fff;  cursor:pointer; margin-top:10px; padding:5px 10px;}
input.btn:hover, button.btn:hover {background:#0a8e88; color:#fff;}

input.btnlight {background:#eaeef2;   border:none; text-align:center;  color:#666;  cursor:pointer; margin-top:10px; padding:5px 10px;}
input.btnlight:hover {background:#dadfe4;  border:none; color:#333; }

input.btnred {background:#ff0000;   border:none; text-align:center;  color:#fff;  cursor:pointer; margin-top:10px; padding:5px 10px;}
input.btnred:hover {background:#e21717;  border:none; color:#fff; }

input.integer {-moz-appearance: textfield; }
input.integer::-webkit-inner-spin-button,input.integer::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0; }
input.integer::-o-inner-spin-button,input.integer::-o-outer-spin-button {-o-appearance: none; margin: 0; }

/* entete */
#logo { position:absolute; top:0; left:0;}
#catalogue { position:absolute; top:10px; left:50px;}
#barre{position:absolute; top:12px; left:180px; border:none; width:300px; padding:9px 3px 6px 0; border-radius:5px;background:#fff; align-items:center;}
#barre input {border:none; padding:0 10px; float:left; width:250px; margin-top:1px; }
#barre button{border:none; padding:0 5px; float:right; cursor:pointer; }
/*#barre svg {margin-top:3px;}*/
#barre svg:hover {fill:#999;}
#barre span:hover{color:#999;}
#h_client {position:absolute; top:0; right:80px;color:#fff;line-height:60px;}
#h_user {position:absolute; top:10px; right:40px;}
#h_panier {position:absolute; top:17px; right:10px;}
#qty_cart { width:16px; height:16px; position:absolute; top:15px; right:3px; background: #00b3a1; border-radius:8px;color:#fff; font-size:8px; text-align:center; line-height:16px;}

.switch {   position: relative;  display: inline-block;}
.switch-input {  display: none;}
.switch-label {  display: block;  width: 24px;  height: 12px;  text-indent: -230%;  clip: rect(0 0 0 0);  color: transparent;  user-select: none;}
.switch-label::before, .switch-label::after {  content: "";  display: block;  position: absolute;  cursor: pointer;}
.switch-label::before {  width: 100%;  height: 100%;  background-color: #dedede;  border-radius: 9999em;  -webkit-transition: background-color 0.25s ease;  transition: background-color 0.25s ease;}
.switch-label::after {  top: 0;  left: 0;  width: 12px;  height: 12px;  border-radius: 50%;  background-color: #fff;  box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);  -webkit-transition: left 0.25s ease;  transition: left 0.25s ease;}
.switch-input:checked + .switch-label::before {  background-color: #00b3a1;}
.switch-input:checked + .switch-label::after {  left: 12px;}

.bggrisclair {background:#f5f5f5 !important;}

.fleche-droite {width:15px; height:9px; transform: rotate(270deg); margin: 0 8px 2px 6px !important; padding:0 !important; filter: invert(100%);}
.clear { float:clear;}
#clear {clear:both;}

.bouton {
	background-color:#00b3a1;
	font-size:12px;
	color:#fff;
	font-weight:normal;
	float:right;
	align-items:center;  border-radius:5px; padding:7px 14px !important;
	display:flex;
	text-decoration:none;
	cursor:pointer;
	margin-left:8px !important;
	min-height:16px;
	}
.boutonleft {
	background-color:#00b3a1;
	font-size:12px;
	color:#fff;
	font-weight:normal;
	float:left;
	align-items:center;  border-radius:5px; padding:7px 14px !important;
	display:flex;
	text-decoration:none;
	cursor:pointer;
	margin-left:0px !important;
	min-height:16px;
	}
.boutoncenter {
	width:100%; border:none;
	background-color:#00b3a1;
	font-size:12px;
	color:#fff;
	font-weight:normal;
	align-items:center;  border-radius:5px; padding:7px 14px !important;
	display:flex;
	text-decoration:none;
	cursor:pointer;
	margin-left:0px !important;
	min-height:16px;
	}
.bouton:hover, .boutonleft:hover, .boutoncenter:hover {background:#0a8e88;color:#fff !important;} 
.bouton img, .boutonleft img {filter: invert(100%);  height:16px; max-width:16px; display:flex; border:none; margin-right:6px;}

#msgerror { margin:20px 0; border:1px solid #ccc; color:#F00; padding:10px; border-radius:5px; background:#fff; border-left-width:3px; border-left-color:#F00; display:none;}
#msg { margin:20px 0; border:1px solid #ccc; color:#6acc00; padding:10px; border-radius:5px; background:#fff; border-left-width:3px; border-left-color:#6acc00; display:none; }

#login { position: absolute;   top: 50%; left: 50%; text-align:center;
  transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */ width:300px; height:400px; background:#ffffff; border-radius:10px; box-shadow:0 0 20px #ccc; padding:20px;}
#login  .login { display:inline-table;}
.logo-login {float:left; height:60px; margin:20px 0 40px 0; }
.logo-login img {height:60px;}
.texte-login {float:left; height:60px;  margin:20px 0px 40px 15px; font-family:'Comfortaa',Montserrat,Tahoma, Arial, sans-serif; font-size:24px;  line-height:30px;}
.texte-login-1 {color:#05cfd6;}
.texte-login-2 {color:#067772;}
#login div { margin-bottom:20px;}
#login input {width:70%;}


.menu {  margin:0;  padding:0;  list-style:none;  background:#3a3f44; border:none;  }
.menu ul {  margin:0;  padding:0; height:40px;  background:#3a3f44; list-style:none;}
.menu li { float:left; padding:0 10px; color:#fff; margin:0 10px; text-align:center; line-height:40px; cursor:pointer;font-size:14px;}
.menu li:hover {color:#00b3a1;}
.menu li a{  background:#3a3f44; display:block;  white-space:nowrap;   color:#fff !important;  text-decoration:none; line-height:40px; text-align:center; margin:0; }
.menu li a:hover{color:#00b3a1 !important; text-decoration:none; }
.menu li ul { position:absolute;  z-index:1000;  display:none; height:auto; padding:0; margin:0; border:none;  background:#3a3f44;}
.menu li:hover ul{ display:block;}
.menu li li {background:#3a3f44; display:block; float:none; width:auto; padding:0; margin:0;}
.menu li:hover li a {background:none;}
.menu li ul a { display:block; line-height:30px; text-align:left; margin:0; padding:0 10px 0 10px;}
.menu li ul a:hover, .menu li ul li:hover a { text-decoration:none; background:#626d79;}

.alerte { display:none !important; background-image:URL(img/ico-alert-on.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%;width:20px; height:40px;}
.alerte:hover {display:block;}
.alerte ul {top:40px !important; }
.alerte li {background-image:linear-gradient(#ffe42c, #ffa700) !important; line-height:12px !important; }
.alerte table { background-color:none;  width:100%;  border-spacing:0px;}
.alerte td { padding:3px 5px; font-size:10px; color:#000; }

.icon { width:16px; height:16px;	 	float:right;  padding:4px!important; margin-left:6px; display:flex; 	text-decoration:none; cursor:pointer;	}
.icon-cell { width:16px; height:16px; padding:0px 1px!important;  text-decoration:none; 	}
.icon-cell-active { width:16px; height:16px; padding:0px!important;  display:flex; text-decoration:none; 	cursor:pointer;	}

.icon-home { background-image:URL(img/ico-home.png); background-repeat: no-repeat; background-size:36px 36px; background-position:50% 50%; height:50px;   width:36px; }
.icon-home:hover { background-image:URL(img/ico-home-on.png); }

.icon-look { background-image:URL(img/ico-look.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%;  }
.icon-look:hover { background-image:URL(img/ico-look-on.png); }

.icon-user { background-image:URL(img/ico-mon-compte.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; height:30px; }
.icon-user:hover { background-image:URL(img/ico-mon-compte-on.png); }

.icon-deco { background-image:URL(img/ico-deconnexion.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; height:30px; }
.icon-deco:hover { background-image:URL(img/ico-deconnexion-on.png); }

.icon-commande { background-image:URL(img/ico_commande.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; }
.icon-commande:hover { background-image:URL(img/ico_commande_on.png); }

.icon-add { background:no-repeat 50% 50% / 16px 16px URL(img/ico-add.png) !important;  }
/*.icon-add { background-image:URL(img/ico-add-on.png) !important; background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; filter:grayscale(100%); }*/
.icon-add:hover {background:no-repeat 50% 50% / 16px 16px URL(img/ico-add-on.png) !important;}

.icon-del { background-image:URL(img/ico-del-on.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; filter:grayscale(100%); }
.icon-del:hover { filter:grayscale(0%); }

.icon-edit { background-image:URL(img/ico-edit.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%;  }
.icon-edit:hover { background-image:URL(img/ico-edit-on.png); }

.icon-pdf { background-image:URL(img/ico-pdf-on.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%;  filter:grayscale(100%) brightness(0); }
.icon-pdf:hover { filter:grayscale(0%);  }

.icon-mail { background-image:URL(img/ico-mail-on.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; filter:grayscale(100%) brightness(0); }
.icon-mail:hover { filter:grayscale(0%);  }

.icon-export { background-image:URL(img/ico-export-on.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; filter:grayscale(100%) brightness(0); }
.icon-export:hover { filter:grayscale(0%);  }

.icon-liste { background-image:URL(img/ico-liste-on.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; filter:grayscale(100%) brightness(0); }
.icon-liste:hover { filter:grayscale(0%);  }

.icon-copy { background-image:URL(img/ico-copy-on.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; filter:grayscale(100%) brightness(0); }
.icon-copy:hover { filter:grayscale(0%);  }

.icon-transfer { background-image:URL(img/ico-transfer-on.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; filter:grayscale(100%) brightness(0); }
.icon-transfer:hover { filter:grayscale(0%);  }

.icon-loupe { background-image:URL(img/ico-loupe.png); background-repeat: no-repeat; background-size:10px 10px; background-position:50% 50%; filter:grayscale(70%); }
.icon-loupe:hover { filter:grayscale(100%)  brightness(0);  }

.icon-panier { background-image:URL(img/ico-panier.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; }
.icon-panier:hover {background-image:URL(img/ico-panier-on.png); }


#boutons {float:right; }

#form { background-color:#fff; margin-bottom:20px; margin-top:20px !important;  position:relative;border-spacing:0px; border-radius:5px; }
#form td {color:#666; }
#form th { font-size:12px;  padding:5px 10px; text-transform: uppercase;  color:#000;  font-weight:normal; background-color:#93e5e1;}

#tablo{ background-color:none;  width:100%; margin-bottom:10px; margin-top:10px !important; border-spacing:0px; float:left;}
#tablo td, #tablocompact td {border-bottom:1px solid #eee; color:#666;}
#tablo tr{ height:30px;}
#tablo th { font-size:10px;  padding:5px 5px; text-transform: uppercase;  color:#000;  font-weight:normal; background-color:#93e5e1; }
#tablo td { padding:5px 5px;}

#tablocompact{ background-color:none;  width:100%;  border-spacing:0px; border-collapse: collapse;}
#tablocompact tr{ height:20px;}
#tablocompact th {  padding:3px 3px; font-weight:normal; color:#000;  font-size:9px; text-transform: uppercase; position: -webkit-sticky;   position: sticky;  top: 0; background:#93e5e1;}
#tablocompact input, #tablocompact select {  padding:2px 2px !important;border:1px solid #ddd;  font-size:10px !important; }
#tablocompact td {font-size:10px !important; padding:2px 3px;}

#tablo tr, #tablocompact tr  {background:#ffffff; }
#tablo tr:hover, #tablocompact tr:hover  {background:#f5f5f5; }
#tablo thead tr, #tablocompact thead tr, #form thead tr { background-color:#f5f5f5 !important; color:#000;}

#tablo th:first-child, #tablocompact th:first-child, #form th:first-child { border-radius: 5px 0 0 0 !important;}
#tablo th:last-child, #tablocompact th:last-child, #form th:last-child { border-radius: 0 5px 0 0 !important;}
#tablo th span, #tablocompact th span {cursor:pointer; font-size:16px; padding:0 0 0 2px; line-height:10px;}
#tablo th span:hover, #tablocompact th span:hover {color:#93e5e1;}
#tablo th filtre, #tablocompact th filtre {cursor:pointer; padding:0 0 0 2px;}
#tablo th filtre:hover, #tablocompact th filtre:hover {color:#93e5e1;}


.resultats {float:left; line-height:24px;  margin-top:10px; min-height:20px;}
.pages {float:left; line-height:24px; margin-right:10px; }

#totalcmd {float:left; margin-right:15px;}
#totalcmd .gauche {background-color:#93e5e1;  color:#000; text-align:left; padding:7px 5px; margin:0; width:90px;float:left; font-size:9px;text-transform: uppercase; border-radius:5px 0 0 5px;}
#totalcmd .droite {background-color:#fff;  color:#000; text-align:right; padding:5px 5px; margin:0; width:60px;float:left;border-radius: 0 5px 5px 0;}
#totalcmd .port {background-color:#fff;  color:#000; text-align:right; padding:2px; margin:0; width:60px;float:left;border-radius: 0 5px 5px 0;}
#totalcmd .fraisport { padding:6px 0px;  float:left;}

#navclient { width:100%;}
#navclient ul { margin: 0 30px 0 -50px}
#navclient li { display:inline-block;  cursor:pointer; font-size:12px;  list-style: none; margin-left:10px;   }
#navclient a { color:#000; text-decoration:none;    display:flex;  padding:0px;text-transform: uppercase; align-items: center; border-bottom:4px solid transparent;}
#navclient a:hover {  border-bottom:1px solid #00b3a1; }
#navclient a.current-nav { color:#00b3a1;}

.listacocher, .listecat {display:none; position:absolute; top: 29px; right: 0px; background:#fff; border-radius:5px; padding:10px; z-index:100; border:1px solid #666;box-shadow:0 1px 2px rgb(0 0 0 / 20%);}
#listacocher {width:100%; height:auto; column-count: 5; list-style:none; margin:0;  padding:0;}
#listecat {width:100%; height:auto; column-count: 2; list-style:none; margin:0;  padding:0;}
#listacocher li { display:block;  list-style: none; margin-left:0px; align-items:center; font-size:10px; width:220px; text-align:left; }
#listecat li { display:block;  list-style: none; margin-left:0px; align-items:center; font-size:10px; width:400px; text-align:left; }
#listacocher input {cursor:pointer;}
.croix { cursor:pointer; width:16px; margin:10px; float:right;}


#menu-mon-compte{position:absolute; top:70px; right:10px; width:180px; display:none;  background:#fff; border-radius:7px; box-shadow:0 0 5px rgba(128,128,128,0.2); z-index:200;}
#menu-mon-compte ul {  margin:0;  padding:0; list-style:none;}
#menu-mon-compte li { padding:0; margin:0; line-height:40px;}
#menu-mon-compte li:hover{color:#000;  }
#menu-mon-compte li a{ white-space:nowrap;  color:#aaa;  text-decoration:none; line-height:40px; margin:0; }
#menu-mon-compte li a:hover{color:#000; }
#menu-mon-compte .borderbottom {border-bottom:1px solid #f2f2f2;}
#menu-mon-compte img {height:16px; max-width:16px; float:left; border:none; margin:12px 8px 0px 8px; }

#menu-catalogue{position:absolute; top:70px; left:1%; width:98%; display:none;  background:#fff; border-radius:7px; box-shadow:0 0 5px rgba(128,128,128,0.2); z-index:100;}
#menu-catalogue div {padding:10px;}
#menu-catalogue .colonne { float:left; margin-right:20px;}
#menu-catalogue ul {  margin:0;  padding:0; list-style:none;}
#menu-catalogue li { padding:0; margin:0; line-height:30px; color:#00b3a1; font-weight:600; font-size:11px;}
#menu-catalogue li .famille { line-height:15px;}
#menu-catalogue a{ white-space:nowrap;  color:#aaa;  text-decoration:none; font-weight:normal; }
#menu-catalogue a:hover{color:#000; }



/* Articles */
.items-articles {width:100%; }
#item-article {width:100%; height:auto; list-style:none; margin:0;  padding:0;}
#item-article li {float:left; list-style: none; margin:0 20px 20px 0; align-items:center; width:240px; height:250px; text-align:left; box-shadow:0 0 5px rgba(128,128,128,0.1); background:#fff; border-radius:10px; padding:15px; position:relative;}
#item-article li:hover {box-shadow:0 0 6px rgba(128,128,128,0.4); }
#item-article div {margin-bottom:5px;}
#item-article input {padding:7px 10px;}
#ico-congele {position:absolute; width:20px; height:20px; top:10px; right:10px;}
#ico-congele img{width:20px;}

/* Panier */
#panier-container {float:left; display:block; width:70%; margin-right:2%; }
#panier {  display: table; width:97%; margin-bottom:20px; position:relative; box-shadow:0 0 5px rgba(128,128,128,0.1); background:#fff; border-radius:10px; padding:15px; }
#panier:hover {box-shadow:0 0 6px rgba(128,128,128,0.4);}
#panier div {  display: table-cell; vertical-align: middle;  }
#panier span {margin-bottom:5px;}
#panier_col1 {width:40%}
#panier_col2, #panier_col3 {width:30%}


#panier-total{ float:right; font-size:14px; width:25%; box-shadow:0 0 5px rgba(128,128,128,0.1); background:#fff; border-radius:10px; padding:15px; }
#panier-total:hover {box-shadow:0 0 6px rgba(128,128,128,0.4);}
#panier-total h2 {margin:0; padding:3px 10px 13px 0;  font-size:24px !important; color:#000;}
#panier-total table {margin:0 !important; padding:0 !important; border:0; width:100%; }
#panier-total td {margin:0 !important; padding:0 !important; line-height:30px; }
#panier-total .totaltxt { font-size:20px; color:#000; }
#panier-total .totalvalue { font-size:20px; color:#00b3a1; }
#panier-total .date { color:#00b3a1; font-weight:600; }

.article-designation {font-size:16px; font-weight:600; color:#000;}
.article-prix {font-size:24px; font-weight:600; color:#000;}
.promo-texte { color:#ff1d71;}
.promo-prix {font-size:24px; font-weight:600; color:#ff1d71;}
.article-detail {font-size:10px;}
.add-panier {position:absolute; bottom:10px; }
.add-remove { padding:7px 13px; background:#f2f2f2; border-radius:5px; cursor:pointer; color:#000;}
.add-remove:hover { background:#e5e5e5;}
.qty {width:30px; text-align:center; margin:0 5px;}
.btn-panier {
	background-color:#00b3a1;
	border-radius:5px; padding:7px 14px 4px 14px !important;
	cursor:pointer;
	margin-left:8px !important;
	}
.btn-panier:hover{background:#0a8e88;} 
.btn-panier img { height:16px; max-width:16px;  border:none; margin-bottom:2px; }

/*#pastille-promo { width:20px; height:20px; position:absolute; top:10px; right:10px; background-image:URL(img/ico-promo.png); background-repeat: no-repeat; background-size:20px 20px; background-position:50% 50%; }*/

#popupcart, #popupcart_err { position: fixed; /* postulat de départ */
  /*top: 50%;  à 50%/50% du parent référent */
  top:50%;
  left:50%;
  /*display:none;*/
  visibility:hidden;
  z-index:1000;
  transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */ width:300px; height:100px; background:#ffffff; border-radius:10px; box-shadow:0 0 20px #ccc; padding:20px; text-align:center;}
#popupcart div, #popupcart_err div { margin-bottom:10px;}

#element {border-radius:5px; border:1px solid #ddd; padding:5px; margin:10px; float:left; min-width:200px; background:#fff; position:relative;}
.consult { color:#000000;  font-size:14px; }
.ico { max-width:12px; padding:6px; }
.align-items { align-items:center; display:flex;}
/*.offert {border-radius:5px; background-color:#a1d70e; color:#fff; font-weight:bold; padding:2px 8px; margin-left:10px;}*/

#pagination {cursor:pointer; font-size:10px; float:left; color:#666; line-height:20px; text-align:center; border:1px solid #bbb; min-width:12px; padding:0 5px; margin:0px 5px 5px 0; box-shadow:0 1px 2px rgb(0 0 0 / 20%); background:-webkit-linear-gradient(top,#fff 0%, #efefef 100%)}
#paginationactive { cursor:default; font-size:10px; float:left; color:#fff; line-height:20px; text-align:center; border:1px solid #444; min-width:12px; padding:0 5px; margin:0px 5px 5px 0; box-shadow:0 1px 0 rgb(255 255 255), 0 0 2px rgb (0 0 0 / 30%) inset; background:#00b3a1;}


::-webkit-scrollbar {  width: 10px;  height:10px;}
::-webkit-scrollbar-track {  box-shadow: inset 0 0 5px #ccc;   border-radius: 5px; background:#f5f5f5;}
::-webkit-scrollbar-thumb {  background: #b3b3b3;   border-radius: 5px;}
::-webkit-scrollbar-thumb:hover {  background: #999; }

@media screen and (max-device-width: 800px) {
/*@media only screen and (hover: none) and (pointer: coarse){*/
	header {background: #3a3f44; width:100%; height:110px; color:#fff; position:relative;}
	#login { width:100%; height:100%;  border-radius:0; box-shadow:none; padding:0; top:0; left:0; transform:none;}
	
	/* entete */
	#logo { position:absolute; top:0; left:0;}
	#catalogue { position:absolute; top:10px; left:50px;}
	#barre{position:absolute; top:62px; left:0px; width:90%; transform: translate(5%, 0%);}
	#h_client { display:none;}
	
	#menu-catalogue{top:60px; left:0; width:100%; border-radius:0px; box-shadow:none; }
	#menu-mon-compte{top:60px; right:0; width:100%; border-radius:0px; box-shadow:none; }
	
	.menu li { float:none;  }
	.menu li a{ text-align:left; }
	
	#item-article li {width:90%; height:250px; }
	
	#popupcart, #popupcart_err { top:20%; }
	
	#panier-container {float:none; width:92%; margin-right:0; }
	#panier {  display: block; width:100%; }
	#panier div {  display: block; }
	#panier_col1, #panier_col2, #panier_col3 {width:100%}
	#panier-total{ float:none; width:92%; margin-right:0; }
	.croix {margin:0; position:absolute; top:10px; right:10px;}

}