html {overflow: scroll;}
body{margin:0;}
a:link {
    text-decoration: none;
  }
h1.pagetitle{margin-bottom:-8px;letter-spacing:-1px;font-weight:800}
#box{width:98%;margin:auto;border:1px solid #DDDDDD;
display:grid;grid-template-columns: auto 50px;
grid-template-areas :
    "header header"
    "article  nav"
    "footer  footer";}
header{grid-area: header;text-align:center;}
nav{grid-area: nav;border-right:1px solid #DDDDDD;border-radius:8px}
nav ul {margin:0;padding:0;}
nav li {list-style:none;padding:8px;border-bottom:#A2A2A2;}
nav li:hover {color:black;background-color:#F8FAFA;border-bottom:1px solid #D4D4D4;}
nav a {text-decoration:none;color:#000;}
nav a:hover{color:#F26935;}
article{grid-area: article;padding:0px 15px 15px 15px;}
footer{border-top:1px solid #D4D4D4;grid-area: footer;text-align:center;padding-top:6px;}

@media screen and (min-width: 1600px){
#box{width:98%;margin:auto;border:1px solid #DDDDDD;
display:grid;grid-template-columns: auto 70px;
grid-template-areas :
    "header header"
    "article  nav"
    "footer  footer";}	
}

@media screen and (max-width: 850px){
#box{width:98%;margin:auto;border:1px solid #DDDDDD;display:grid;grid-template-columns: auto 44px;grid-template-areas :
        "header"
        "article  nav"
        "footer";}
}


#gridd {display: grid;width: 100%;grid-template-columns: 260px repeat(auto-fill, 260px) 260px;grid-gap:10px;}
.gridelement{border-bottom:1px solid #F0F0F0;}
	@media only screen and ( max-width: 1100px ) /*40em 640px */
{
#gridd {display:grid;width:100%;grid-template-columns:repeat(auto-fill, 170px);grid-gap:4px;}
}

	@media only screen and ( max-width: 850px ) /*40em 640px */
{
#gridd {display:grid;width:100%;grid-template-columns:repeat(auto-fill, 160px);grid-gap:4px;}
}

#gridd.mystyle {display: grid;width: 100%;grid-template-columns: 400px repeat(auto-fill, 400px) 400px;grid-gap:10px;}
	@media only screen and ( max-width: 1100px ) /*40em 640px */
{
#gridd.mystyle {display: grid;width: 100%;grid-template-columns: repeat(auto-fill, 320px);grid-gap:4px;}
}
/* header 
.grid > div {}*/
.grid{display:grid;grid-template-columns: 34px 105px 34px 1fr 34px;grid-column-gap:6px;grid-template-rows: 48px;justify-items: center;align-items: center;}
a.menu{font-size:26px;color:#4890CC;cursor:pointer;}
a:hover.menu{color:#ED5927;}
.titre{font-size:1.4em;letter-spacing:-1px;color:#6ABBFF}
ul.burger-liste{ list-style-type:none;padding: 0;margin: 0;}
li.burger-liste-btn{width: 98%;padding:8px;border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #fff;border-bottom:1px solid #dee2e6;}
li.burger-liste-btn:hover{background-color:#f8f9fa;border:1px solid #dee2e6;border-radius:8px}
a.burger-liste-a{text-decoration:none;font-size:1.3em;color:#000000;}
a:hover.burger-liste-a{color:#EE6C47;}
hr.burger-liste-hr{color:#dee2e6;}
a.burger-btnsousligne{text-decoration:none;font-weight:bold;color:#000;padding-bottom:3px;border-bottom:3px solid #fff;}
a:hover.burger-btnsousligne{border-bottom:3px solid #000;padding-bottom:3px;}
.badgepos {position: absolute;margin-top:15px;margin-left:-16px;}
a.badgecoeur {color:#ACC9E9;}
a:hover.badgecoeur {cursor:pointer;color:#ED5927;}
/* PAGE */
h1.titreh1{letter-spacing:-1px;font-weight:700;}
.punchline{color:#F26935}
.red{color:crimson}
.green{color:rgb(14, 141, 14)}
/* article */
.nom{line-height:13px;margin-top:4px;font-weight:300;}
a.article{text-decoration:none;color:black;}
a:hover.article{color:#ED5927}
.hauteurmini{max-height:220px;border-radius : 8px !important;}
.hauteurmini.phobig{font-size:4em;max-height:400px;border-radius : 8px !important;}
.image{display: block;margin: auto;}
.coinrd{border-radius : 8px !important;}
.zoom{transition: transform 250ms;}
.zoom:hover {transform: translateX(-10px);}
a.buttonbuy{text-decoration:none;font-size: 1.5rem;color:#fff;padding:4px 10px 4px 10px;background-color:#f90;border:none;cursor:ponter;border-radius:30px;transition:1s;}
a:hover.buttonbuy{background-color:#ED5927;}
.bordergris{border-color:#F0F0F0! important;}
.bordergris:nth-child(4n-7) {
    border: 10px solid orange;
  }
.suggestcard:hover{background-color: #FDFDFD;border-radius: 6px;box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);}
.department{font-weight:600;}
/* PAGINATION */
.letter{color:orange}
.pagination {display: inline-block;}
.pagination a {color: rgba(74, 74, 74, 0.717);float: left;padding: 4px 8px;text-decoration: none;transition: background-color .3s;border:1px solid rgb(245, 240, 240);border-radius:8px;}
.pagination a.active {background-color: #5091CF;color: white;}
.pagination a:hover:not(.active) {background-color: #ddd;}
.page{padding:0px 4px 0px 4px;}
.pageactive{color:#fff;background-color: #5091CF;padding:4px;border-radius:8px;min-width: 24px;text-align:center;}
/* ADMIN */
.msg{font-size:1.1em;}
input.inputlogin{width:340px;padding: 15px;outline: none;margin-bottom:0px;}
.errorlogin{margin-bottom:100px! important;}
input.inputpass{width:340px;padding: 15px;outline: none;}
input.inputok{width:340px;font-size: 1.5rem;color:#fff;font-weight:bold;padding:4px 0 4px;background-color:#f90;border:none;cursor:ponter;border-radius:30px;transition:1s;}
input.inputtxt{width:340px;padding: 15px;outline: none;}
input:hover.inputok{background-color:#ED5927;}
/* FOOTER */
.foot{font-size:0.8em;color:#6a6868;}
a.footlink{text-decoration:none;color:#6a6868;}
/* HOME */
a.boutonlink {text-decoration:none;padding:4px 8px 4px 8px;color:#000;font-weight:600;letter-spacing:-0.5px;border-radius: 10px! important;}
a:hover.boutonlink {background:rgba(249,150,60,0.21);border-radius:6%}
/* STORES LIST*/
.storetype{font-size:1.2em;font-weight:700;letter-spacing:-1px;}
.storedesc{color:grey;}
/* BRANDS LIST */
input.minisearch{color: #EB5A29;font-size:1.2em;font-weight:700;border:10px solid #E1E1E1;border-radius : 25px 0 14% 25px;}
input.minisearch::placeholder {color: #EB5A29;font-weight:500;opacity: 50;transition: opacity 150ms ease-out;}
input.minisearch:focus::placeholder{color: #EB5A29;font-size:1.2em;font-weight:100;}
input.minisearch:focus::value{color: #EB5A29;font-size:1em;font-weight:700;}
a.lienlistbrand{color:#000;}
a:hover.lienlistbrand{color:#F16938;}
/* DEPARTMENT LIST */
a.icotitrea{color:#000;}
a:hover.icotitrea{color:#4890CC}
.scrolly {max-height: 1200px;scroll-behavior: auto;overflow: -moz-scrollbars-none; overflow-y: auto;overflow-x: hidden;scrollbar-width: none;}