:root {
  --container       : 1580px;
  --font-size       : 1.05rem;
  --font-family     : Roboto,Arial, Helvetica, sans-serif;
  --font-weight     : 400;
  --line-height     : 1.5rem;
  --bg              : white;    
  --bg-dark         : #222;    
  --bg-dark2        : #444;
  --bg-dark3        : #555;
  --bg-clear        : #f5f5f5;     
  --bg-input        : #f5f5f5;  
  --bg-button       : #222; 
  --bg-button2      : #333;
  --bg-button3      : #FFCC00;
  --c               : black;    
  --c-dark          : black;    
  --c-clear         : #f2f2f2;
  --c-clear2        : #f2f2f2;
  --c-input         : black;  
  --c-button        : white; 
  --p               : 0.875rem;
  --p2              : 1.75rem;   
}

/* RESET */
*,*::after,*::before { margin: 0; padding: 0; outline: none; box-sizing: border-box;}
html { width: 100%; }
body { font-family:var(--font-family); font-size: var(--font-size); font-weight: var(--font-weight);line-height: var(--line-height); background: var(--bg);}
.clear { clear:both; }
.back-to-top {

  position: fixed; 
  right: 10px; 
  bottom: 10px; 
  z-index: 1000;
  background-color: var(--bg-button3); 
  color: var(--c-button); 
  width: 40px; 
  height: 40px;
  border-radius: 10%; 
  font-size: 20px; 
  text-align: center; 
  line-height: 40px;
  /*display: block;*/
  display: none; /* Cache le bouton par défaut */
  opacity: 0.7;
}
/* Permet de remplir l'espace vide entre le footer et le reste du contenu au lieu de coller le footer au reste du contenu */
.wrapper { display: flex; min-height: 100vh; flex-direction: column;}
.wrapper-fill { display:flex;flex-grow:1;}

.container { max-width:var(--container); margin: 0 auto; width:100%; }
.container-outside { 
  width: 100%;background-color:var(--bg-dark); 
  /* carbon */
  background-color: rgb(32, 32, 32);
  background-size: 10px 10px, 10px 10px, 10px 5px;
  background-position: 0px 0px, 5px 5px, 0px 0px;
}

.titlebar { margin-top: var(--p); color:var(--bg-dark);text-transform: uppercase; text-align: center; padding:var(--p); 
  font-weight:bolder;display:block; width:100%font-size: var(--font-size); border-bottom: 3px solid var(--bg-dark);}


/* resize for different screen sizes */
@media screen and ( max-width: 1820px) { html {font-size: 70%;} .container { max-width:1106px;}}
@media screen and ( max-width: 1106px) { html {font-size: 100%;}}

.Filter.breadcrumb ul li { display: inline;}
.Filter.breadcrumb ul li + li:before { content: " > ";}

/* MODULE TOPBAR */
.Topbar { display:flex; flex-wrap:wrap; padding:var(--p);}
.Topbar .logo { display:flex; flex-wrap:wrap; flex-grow:1; }
.Topbar .logo img { max-height: 4.375rem; width: auto; height: auto;}
.Topbar .links { display:flex; flex-wrap:wrap; justify-content:center;}
.Topbar .links img { display:flex; height:2.188rem;/*35*/  filter:invert(70%); margin-right: var(--p);}
.Topbar .links a, .Topbar .links .lang{ display:flex; align-items:center; padding:var(--p); color:var(--c-clear); text-decoration:none;}
.Topbar .links .logged { filter:invert(100%);}
.Topbar .quantity { color: var(--bg-dark);background: var(--bg-button3);margin-top:-1.875rem;margin-left: -1.25rem; /*-30-20*/margin-right: var(--p); border-radius: 50%;  height: 1.563rem; width: 1.563rem; /*height: 25px; width: 25px;*/ font-size: 0.8rem; text-align: center; z-index: 2;}

.Topbar .links select { padding:3px; }
@media screen and ( max-width: 600px) { 
  .Topbar .text { display: none;}
  .Topbar .links img { margin: 0;}
  .Topbar .logo { flex-direction: column; align-items: center; }
  .Topbar .logo img { max-width: 300px;}
  .Topbar .links { align-content: center;flex-grow:1;}
}
.Searchfeature { position:relative; z-index: 5;cursor: pointer;}
.Searchfeature .icon { width:1rem; height:1rem; margin: auto 5px auto 0;}
.Searchfeature .icon-link { margin: 0; padding: 0; }
.Searchfeature button { display:flex; float:left; font-size:inherit; padding: var(--p); background:var(--bg-button3); width:15%;  font-weight:bolder; white-space:nowrap; overflow:hidden;cursor: pointer; border:1px solid var(--bg-dark2); color: black;}
.Searchfeature li { list-style:none;}
.Searchfeature span, .Searchfeature a{ display: block; color: var(--c-clear); text-decoration: none; padding: var(--p);}
.Searchfeature span:hover { font-weight:bolder; }
.Searchfeature ul {  display: none;background: var(--bg-dark);}
.Searchfeature .dropdown { list-style:none; position:absolute;  display: block;top:3rem; background:var(--bg-dark); width:100%; border:1px solid var(--bg-dark2);}

.Searchfeature .dropdown {
    opacity: 0;
    visibility: hidden;
    /*transition: opacity 0.5s, visibility 0s 0.5s;*/
}

.Searchfeature .dropdown li {
  height: 0;
}

.Searchfeature .dropdown.show {
    opacity: 1;
    visibility: visible;
    /*transition: opacity 0.5s, visibility 0s 0s;*/
}

.Searchfeature .dropdown.show li {
  height: 100%;
}

.Searchfeature input { display:flex; font-size:inherit; padding: var(--p); background:var(--bg-input); color:var(--c-input); width:40%;  border:1px solid var(--bg-dark2);}
.Searchfeature button span{ text-align: left; width: 15.625rem; white-space: nowrap;overflow: hidden;text-overflow: ellipsis; padding:0; color:black;}
.Searchfeature h1 { display: flex; align-items: center; width:100%;justify-content: center; padding: var(--p);font-size: var(--font-size); text-transform: uppercase;  color: var(--c-clear); text-align: center;}

@media screen and (max-width: 800px) { .Searchfeature .dropdown{ width: 100%; left:0;} .Searchfeature button { width: 50%;} .Searchfeature input { width: 100%; text-align: center;}}

/* MODULE SEARCH MOTO */
.Search_Moto { position:relative; z-index: 5;}
.Search_Moto .icon { display:flex; width:1.25rem; height:1.25rem; filter:invert(100%); margin-right: 1rem;}
.Search_Moto input { display:flex; border:none; font-size:1rem; padding: var(--p); background:var(--bg-input); color:var(--c-input); width:60%;}
.Search_Moto button { display:flex; float:left; border:none; font-size:inherit; padding: var(--p); background:var(--bg-button); color:var(--c-button); width:20%; font-weight:bolder; white-space:nowrap; overflow:hidden;cursor: pointer;}
.Search_Moto button.red { background:var(--bg-button3);}
.Search_Moto button span { text-align: left; width: 15.625rem; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.Search_Moto .hint { background:var(--bg-input);}
.Search_Moto .hint a, .Search_Moto .hint span {padding:var(--p) 0 0 var(--p); display:block; color:var(--c-input); text-decoration: none;}
.Search_Moto .Menu {cursor: pointer;}
.Search_Moto .Menu .SubMenu1 span { padding-left:var(--p); background:var(--bg-dark2);}
.Search_Moto .Menu .SubMenu2 span { padding-left:var(--p2); background:var(--bg-dark3);}
.Search_Moto .dropdownmoto { list-style:none; position:absolute; display:none; top:3rem; background:var(--bg-dark); min-width:40%; border:1px solid var(--bg-dark2);}
.Search_Moto .dropdown { list-style:none; position:absolute; display:block; top:3rem; background:var(--bg-dark); min-width:40%; border:1px solid var(--bg-dark2);}
.Search_Moto .dropdown { opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0s 0.5s;}
.Search_Moto .dropdown.show { opacity: 1; visibility: visible; transition: opacity 0.5s, visibility 0s 0s;}
.Search_Moto .Menu li { list-style:none;}
.Search_Moto .Menu span, .Search_Moto .Menu a{ display: block; color: var(--c-clear); text-decoration: none; padding: var(--p);}
.Search_Moto .Menu span:hover { font-weight:bolder; background:var(--bg-clear); color:var(--c-dark);}
.Search_Moto ul { background: var(--bg-dark);}
.Search_Moto .Menu ul{ display: none; }
.Search_Moto .Menu select,.Search_Moto .Menu input[type="submit"] { display: block; padding:var(--p); width:95%; margin:0 auto; margin-top:var(--p); margin-bottom:var(--p); font-size: 1rem;}
.Search_Moto .Menu input[type="submit"] { float:none; background:var(--bg-button3); color:var(--c-button); font-weight: bolder;cursor: pointer;}
.Search_Moto .Menu input[name="reset"]  { background:var(--bg-button2);}
.Search_Moto h1 { display: flex; align-items: center; width:100%;justify-content: center; padding: var(--p);font-size: var(--font-size); text-transform: uppercase; color: var(--c-clear); text-align: center;}
@media screen and (max-width: 600px) { .Search_Moto .dropdown, .Search_Moto .dropdownmoto { width: 100%; left:0;} .Search_Moto button { width: 50%;} .Search_Moto input { width: 100%;text-align: center;}}

/* MODULE SEARCH */
.Searchcategory { position:relative; z-index: 5;cursor: pointer;}
.Searchcategory .icon { width:1rem; height:1rem; margin: auto 5px auto 0;}
.Searchcategory input { display:flex; font-size:inherit; padding: var(--p); background:var(--bg-input); color:var(--c-input); width:80%;  border:1px solid var(--bg-dark2);}
.Searchcategory button { display:flex; float:left; font-size:inherit; padding: var(--p); background:var(--bg-button3); width:20%;  font-weight:bolder; white-space:nowrap; overflow:hidden;cursor: pointer; border:1px solid var(--bg-dark2); color: black;}
.Searchcategory button span { text-align: left; width: 15.625rem;/*250*/ white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

/* menu */
.Searchcategory .Menu {cursor: pointer;}
.Searchcategory .Menu .SubMenu1 span { padding-left:var(--p); background:var(--bg-dark2);}
.Searchcategory .Menu .SubMenu2 span { padding-left:var(--p2); background:var(--bg-dark3);}
.Searchcategory .dropdownmoto { list-style:none; position:absolute; display:none; top:3rem;/*48*/ background:var(--bg-dark); min-width:40%; border:1px solid var(--bg-dark2);}
.Searchcategory .dropdown { list-style:none; position:absolute; display:block; top:3rem;/*48*/ background:var(--bg-dark); min-width:40%; border:1px solid var(--bg-dark2);}
.Searchcategory .dropdown {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0s 0.5s;
}

.Searchcategory .dropdown.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s, visibility 0s 0s;
}
.Searchcategory .Menu li { list-style:none;}
.Searchcategory .Menu span, .Searchcategory .Menu a{ display: block; color: var(--c-clear); text-decoration: none; padding: var(--p);}
.Searchcategory .Menu span:hover { font-weight:bolder; }
.Searchcategory .Menu select,.Searchcategory .Menu input[type="submit"] { display: block; padding:var(--p); width:95%; margin:0 auto; margin-top:var(--p); margin-bottom:var(--p); font-size: 1rem;}
.Searchcategory .Menu input[type="submit"] { float:none; background:var(--bg-button3); color:var(--c-button); font-weight: bolder;cursor: pointer;}
.Searchcategory .Menu input[name="reset"]  { background:var(--bg-button2);}
.Searchcategory .Menu span:hover { background:var(--bg-clear); color:var(--c-dark);}
.Searchcategory ul { background: var(--bg-dark);}
.Searchcategory .Menu ul{ display: none; }
.Searchcategory h1 { display: flex; align-items: center; width:100%;justify-content: center; padding: var(--p);font-size: var(--font-size); text-transform: uppercase;  color: var(--c-clear); text-align: center;}
@media screen and (max-width: 600px) { .Searchcategory .dropdown, .Searchcategory .dropdownmoto { width: 100%; left:0;} .Searchcategory button { width: 100%;} .Searchcategory input { width: 100%;text-align: center;}}

/* MODULE FOOTER */
footer { display: flex; flex-direction:column;padding:var(--p); flex-grow:3; }
footer div { display: flex; align-items: center; justify-content: center;}
footer .links a { color:var(--c-clear);text-decoration:none; padding:var(--p);}
footer .links a:hover { text-decoration: underline; }
footer .logos { display: flex; flex-wrap: wrap; justify-content: center;}
footer .logos img{ max-height: 2em; margin:var(--p);}

footer .star img {
    padding: 0; margin: 0; width: 16px; height: 16px;
    filter: invert(80%) sepia(38%) saturate(1603%) hue-rotate(358deg) brightness(99%) contrast(106%);
}
footer .star .grey {
  filter: invert(100%) sepia(14%) saturate(168%) hue-rotate(220deg) brightness(114%) contrast(90%);
}
footer .star a {  padding-left:var(--p);color:var(--c-clear); }
footer p{  color: var(--bg-clear); padding: var(--p); text-align: center; }


@media screen and (max-width: 600px) { footer .links { overflow-x: auto; flex-wrap: nowrap;} }

/* MODULES MOTORBRAND*/
.Motorbrand { display:flex; flex-wrap:wrap; justify-content:center; background:var(--bg-clear); padding:var(--p); }
.Motorbrand .item { display:flex; justify-content:left; width:17.5rem;/*280*/ background:white; margin:var(--p);text-decoration:none; color:var(--c-dark); font-weight:bolder; padding: var(--p); align-items: center;}
.Motorbrand img{ display:flex;height:auto; width: 30px; margin-right:var(--p); justify-items: center; aspect-ratio: 1/1;}
.Motorbrand .allbrands { background:var(--bg-button3); color: var(--c-button); justify-content:center;}
.Motorbrand h2 { font-size: 1.3rem;text-align:left; font-weight:bolder; padding:var(--p); color:var(--bg-dark); display:block; width:100%;}
.Motorbrand.left { justify-content:left;}
.Motorbrand .item.model{ height: 6.25rem; padding: var(--p);}
@media screen and (max-width: 600px) { .Motorbrand .item {width:100%;}}

.bestCategories { display:flex; flex-wrap:wrap; justify-content:center; padding:var(--p); background-color:#333;}
.bestCategories .item { display:flex; flex-direction:column; justify-content:center; width:17.5rem; height:6.25rem; background:white; margin:var(--p);}
.bestCategories a { display:flex; text-decoration:none; color:var(--c-dark); font-weight:bolder; justify-content:left; padding:var(--p); align-items:center;}
.bestCategories img{ display:flex; width:5rem; /*80*/height:auto; padding-right:var(--p);}
.bestCategories .allbrands { background:var(--bg-button3);}
.bestCategories .allbrands a { color:var(--c-button); justify-content:center;}
@media screen and (max-width: 600px) { .bestCategories .item {width:100%;}}

.Product { display:flex; flex-wrap:wrap; justify-content:left;border-left: 1px solid var(--bg-clear);border-right: 1px solid var(--bg-clear);}
.Product .item table th { text-align:left;  padding: var(--p); background-color: var(--bg-clear); font-weight: bolder;}
.Product .item table td { text-align:left;  padding: var(--p); background-color: var(--bg-clear);}
.Product .item { display:flex; text-align:center;flex-direction:column; font-size:1.1rem; align-items:center; background:white; margin:var(--p2) var(--p2) 0 var(--p2); width:100%;padding: var(--p);}
.Product .item img { max-width:50%; align-items: center; max-height: 500px;}
.Product .item .noimage{ background:var(--bg-dark); }
.Product .item .color { width:30px; height: 30px; align-items: center; justify-content: center; display: flex; margin: var(--p);}
.Product .item .text { font-size: 1.2rem; font-weight: bolder;}
.Product .item .pic-mini { display:flex; align-items:center;flex-wrap: wrap; justify-content: center;}
.Product .item .pic-mini img { max-width:20%; /*100*/ margin: var(--p);}
.Product .item .price { font-weight:bolder; font-size:1.5rem; padding:var(--p);}
.Product .item .price.promo { color:red;}
.Product .item .price.old { text-decoration:line-through;font-size:1.1rem;}
.Product .item .stock { font-size: 1.5rem;  padding:var(--p); color:green;}
.Product .item .nostock { color: red;}
.Product form {width: 100%;}
.Product .button {  cursor:pointer;
  text-align: center; text-decoration: none;font-weight:bolder; 
  background:var(--bg-button3); color:var(--c-button3); font-size:1.3rem; padding:var(--p2); width:100%; border:none;}
.Product .item select { display: flex; padding:var(--p); width:30%; font-size: 1rem; text-align: center;}
.Product .item select.second { margin-top: var(--p);}

.Product .item .star { width:100%; }
.Product .item .star img {
    width: 32px; height: 32px;
    filter: invert(80%) sepia(38%) saturate(1603%) hue-rotate(358deg) brightness(99%) contrast(106%);
}
.Product .item .star .grey {
  filter: invert(100%) sepia(14%) saturate(168%) hue-rotate(220deg) brightness(114%) contrast(90%);
}

.Product .item .star img:hover {
  filter: invert(80%) sepia(38%) saturate(1603%) hue-rotate(358deg) brightness(99%) contrast(106%);
}

.Product .item input[type=text] { font-weight:bolder; background:white; color:var(--c); font-size:inherit; padding:var(--p); width:20%; border:none; text-align: center;}
.Product .item input[type=text]::placeholder { text-align: center;}
.Product .item button { font-weight:bolder; background:var(--bg-button); color:var(--c-button); font-size:inherit; padding:var(--p); width:20%; border:none; margin-bottom:1px; }
.Product .item button:hover { cursor:pointer; background:var(--bg-button2);}
.Product .item button.minus {border-bottom: 1px solid white; font-weight: bolder;font-size: 20px;}
.Product .item button.plus {border-bottom: 1px solid white; font-weight: bolder; font-size: 20px;}

@media screen and (max-width: 1264px) { .Product .item{ width: 100%;} .Product .item img { width:70%;} .Product .item select { width:100%; }}

/* MODULE FILTER */
.Filter { display:flex; flex-wrap:wrap; justify-content:left; padding:var(--p);}
.Filter.front {  border: 1px solid var(--bg-clear);}
.Filter a{ color: var(--bg-dark);}


.Filter p, .Filter h2, .Filter h3 { text-align:left;  padding:var(--p); color:var(--bg-dark); display:block; width:100%;}
.Filter .item.detail { display:flex; flex-direction:column; align-items:center; background:white; margin:var(--p);width:48%; border: 1px solid var(--bg-clear);}
.Filter .item { display:flex; flex-direction:column; align-items:center; background:white; margin:var(--p);width:17.5rem; border: 1px solid var(--bg-clear);}
.Filter .item.detail img { max-height:25rem; max-width:100%; margin:var(--p);}
.Filter .item img { max-height:9.375rem;/*150*/ max-width:15.625rem; margin:var(--p); }
.Filter .item .noimage{ background:var(--bg-dark);}
.Filter .item .pic-mini { display:flex; align-items:center; flex-wrap: wrap; justify-content: center;}
.Filter .item .pic-mini img { max-height:2.5rem; max-width:2.5rem; /*40*/}
.Filter .item .pic-mini-detail img { max-height:5rem; max-width:5rem; /*40*/}
.Filter .item .price { font-weight:bolder; font-size:1.1rem;}
.Filter .item .specific { font-weight:bolder; font-size:1.1rem; color: green; text-align:center; }
.Filter .item .universel { font-weight:bolder; font-size:1.1rem; text-align:center; }

.Filter .item .price.promo { color:var(--bg-button3);}
.Filter .item .promo100 { display:flex;background:var(--bg-clear);color:var(--c-dark); width: 100%; margin-top: 1px;padding: 5px 20px 5px 20px;justify-content: space-between;}
.Filter .item .promo100 span { display:flex;}
.Filter .item .price.old { text-decoration:line-through;font-size:1.1rem; color:var(--c-dark);}
.Filter .item .price.quantity { font-size:1.1rem; color:var(--c-dark);  }
.Filter .item .stock { padding:var(--p); color:green;}
.Filter .item .nostock { color: var(--bg-button3);}
.Filter .item .space { flex-grow:1; }
.Filter .item .des { padding:var(--p); max-width:15.625rem; text-align: center;}
.Filter .item .review { padding:var(--p); max-width:20.625rem; text-align: center;}

.Filter .item .des a{ color:var(--bg-dark); text-decoration: none;}
.Filter .item .des h3 { font-size:inherit; font-weight:lighter; text-align: center; margin: 0; padding: 0;}

.Filter .item input[type=text] { font-weight:bolder; background:white; color:var(--c); font-size:inherit; padding:var(--p); width:100%; border:none;}
.Filter .item input[type=text]::placeholder { text-align: center;}
.Filter .item button { font-weight:bolder; background:var(--bg-button); color:var(--c-button); font-size:inherit; padding:var(--p); width:100%; border:none; margin-bottom:1px; }
.Filter .item button:hover { cursor:pointer; background:var(--bg-button2);}
.Filter .item button.minus {border-bottom: 1px solid white; font-weight: bolder;font-size: 20px;}
.Filter .item button.plus {border-bottom: 1px solid white; font-weight: bolder; font-size: 20px;}
/* radio transporter and payment*/
.Filter .item input[type=radio] { position: absolute;opacity: 0;width: 0;height: 0;}
.Filter .item input[type=radio] + img { cursor: pointer;}
.Filter .item input[type=radio]:checked + img { padding: var(--p);outline: 5px solid var(--bg-button3);}
.Filter .item label{ padding:var(--p); text-align: center;} 
.Filter .paypal{ width: 50%; margin:auto;} 
.Filter .categories { display:flex; flex-wrap:wrap; justify-content:left;width: 100%; }
.Filter .categories .item { display:flex; flex-direction:column; justify-content:center; width:17.5rem; height: 8rem;border: 5px solid var(--bg-clear);}
.Filter .categories .item a { display:flex; text-decoration:none; color:var(--c-dark); font-weight:bolder; justify-content:left; padding:var(--p); align-items:center;}
.Filter .categories .item img{ display:flex; width:7rem; /*80*/height:auto; }
@media screen and (max-width: 1264px) {.Filter .categories .item {width: 100%;} .Filter .item.detail {width: 100%;}}
.Filter .item.detail select { width: 100%; padding: var(--p); text-align: center; font-weight: bolder;}
.Filter .item.detail button {width: 100%; padding: var(--p);}


.Filter .item form {width: 100%;}
.Filter .item .star { padding-bottom: var(--p); }
.Filter .item .star img {
    padding: 0; margin: 0; width: 16px; height: 16px;
    filter: invert(80%) sepia(38%) saturate(1603%) hue-rotate(358deg) brightness(99%) contrast(106%);
}
.Filter .item .star .grey {
  filter: invert(100%) sepia(14%) saturate(168%) hue-rotate(220deg) brightness(114%) contrast(90%);
}
.Filter .item .star img:hover {
  filter: invert(80%) sepia(38%) saturate(1603%) hue-rotate(358deg) brightness(99%) contrast(106%);
}
.Filter .item .star img:hover ~ img {
  filter: invert(100%) sepia(14%) saturate(168%) hue-rotate(220deg) brightness(114%) contrast(90%);
  }

@media screen and (max-width: 700px) { .Filter .item{ width: 100%;}  }

.Filter .pagination {display: flex; flex-wrap: wrap; align-content: center; align-items: center; padding: var(--p); width:100%;}
.Filter .pagination li { list-style: none;}
.Filter .pagination a { display:flex; flex-wrap:wrap; align-items:center; align-content:center; color:var(--c-button); background:var(--bg-button);text-decoration: none; padding:var(--p);}
.Filter .pagination a:hover, .Filter .pagination .active{ background:var(--bg-button3); font-weight: bolder;}
.Filter.left{ display:flex; padding:var(--p); flex-direction:column; float:left; width:20%; border:1px solid var(--bg-clear);margin-top: var(--p2);}
.Filter.left .icon {display:flex;width:1.25rem; height:1.25rem; margin-right:var(--p);  }
.Filter.left li { list-style:none;}
.Filter.left a { text-decoration:none; color:var(--c-dark);}
.Filter.left a:hover { text-decoration:underline;}
.Filter.left .underline { text-decoration: underline; }

.Filter.left p {display:flex; padding:var(--p) 0 var(--p) 0;font-weight:bolder; width:100%;}
.Filter.left button { display:none;padding:var(--p);background: var(--bg-button3);color: var(--c-button);width: 100%;font-size: inherit;font-weight: bolder;border:0;}
.Filter.left .quicksearch select{ width: 100%; margin-bottom: var(--p); padding: var(--p); border: 0;}
.Filter.breadcrumb {padding:var(--p); border:1px solid var(--bg-clear); display:block; width:100%;}
.Filter.breadcrumb li{ display:inline;}
.Filter.breadcrumb a{ color:var(--c-dark);}
@media screen and (max-width: 1264px) {
  .Filter.breadcrumb { text-align:center; } 
  .Filter.left { width: 100%; padding: var(--p); background-color: var(--bg-clear);} 
  .Filter.left button { display: block;}
  .Filter.left ul { margin-bottom: var(--p); }
  .Filter.left div#Filter { display:none; }
}

/* MODULES TEXT */
.Text { margin-top: var(--p); width: 100%;}
.Text img, .Text video { padding: var(--p); }
.Text video { width: 640px; height: 480px; }
.Text form select { margin: 0 0 var(--p) var(--p); padding: 5px;}
.Text h1, .Text h2,.Text h3 { padding: var(--p) 0 0 var(--p); font-size: 1.3rem; width: 100%;}
.Text p, .Text ul { padding: var(--p); width: 100%;}
.Text ul, .Text ol { padding-left: var(--p2);}
.Text.center { text-align: center;}
.Text a { color:var(--c); font-weight: bolder;}
@media screen and (max-width: 1264px) {
  .Text img {display:flex;width: 50%; height: auto; margin : 0 auto;}
  .Text video {display:flex;width: 100%; height: auto; margin : 0 auto;}


}

/* MODULES SUPPORT */
.Support {  border: 1px solid var(--bg-clear);}
.Support h2, .Support h3, .Support p { padding: var(--p);}
.Support input, .Support select, .Support textarea { 
  width: calc(100% - var(--p2)); /* 100% de largeur moins 10px de marge gauche et 10px de marge droite */
  margin: 0 var(--p); /* 10px de marge gauche et 10px de marge droite */
  margin-top: var(--p);color: var(--c-dark); padding: var(--p); border: none; background: var(--bg-input);}
.Support button {
  display:block;
  cursor: pointer;
  color: var(--c-button);
  padding: var(--p);
  margin: var(--p);
  border: none;
  font-size: inherit;
  background: var(--bg-button);
  border:0;
}
.Support .custom-file-upload input[type="file"] { display: none; }
.Support .custom-file-upload {
  display:block;
  cursor: pointer;
  color: var(--c-button);
  padding: var(--p);
  margin: var(--p);
  border: none;
  font-size: inherit;
  background: var(--bg-button);
  border:0;
}

.Account button:hover { cursor:pointer; background:var(--bg-button2);}

/* STATICPAGES */
.Staticpage p  { padding: var(--p);}
.Staticpage table  { padding: var(--p); background:white; width: 100%;}
.Staticpage ol { padding: var(--p2);}
.Staticpage h2,
.Staticpage h3 { padding: var(--p) 0 0 var(--p);}
.Staticpage a{ color: var(--bg-dark);}
.Staticpage table td {padding-right: var(--p);}
.Staticpage .links a{ color: var(--bg-dark); line-height: 2rem; font-weight: bolder;}
.Staticpage img{ padding: var(--p); max-height:20rem; max-width:20rem; }
.Staticpage { background: var(--bg-clear); padding: var(--p);}
@media screen and (max-width: 600px) { 
  .Staticpage img { 
    max-height:600px;
    max-width:600px; 
    width: 100%;
    
  } 
}


/* MODULE SLIDER */
.Slider { color: var(--bg-clear); position: relative;}
.Slider img { width: 100%; margin-bottom: -4px;}
.Slider a { text-decoration: none; color: var(--bg-clear);}
.Slider figcaption {background: rgba(255,255,255,0.2); position: absolute; bottom: 0px; width: 100%;}
.Slider figcaption .txt {text-align: center;padding: var(--p);text-transform: uppercase;font-weight: bolder;}
@media screen and (max-width: 600px) { .Slider figcaption { display: none;} }

/* MODULE ACCOUNT */
.Account {
  display: flex;
  align-items: center;
  margin: var(--p) 0 var(--p) 0;
  padding: var(--p);
  background: var(--bg-clear);
}
.Account p { padding-bottom: var(--p);}

.Account .item{
  display: flex;
  flex-direction: column;
  min-width: 100%;
  padding: var(--p);
  background: white;
}
.Account h1, .Account h2 {
  color: var(--c-dark);
  font-size: 1.3rem;
  margin: var(--p) 0;
}
.Account label {
  color: var(--c-dark);
  font-weight: bolder;
}
.Account input[type=email], .Account input[type=password], .Account input[type=text],  .Account textarea, .Account select {
  color: var(--c-dark);
  padding: var(--p);
  margin: var(--p) 0;
  border: none;
  background: var(--bg-input);
}
.Account button {
  color: var(--c-button);
  padding: var(--p);
  margin: var(--p) 0;
  border: none;
  font-size: inherit;
  background: var(--bg-button);
  border:0;
}

.Account button:hover { cursor:pointer; background:var(--bg-button2);}


.Account a { color: var(--c-dark); }
@media screen and (max-width: 600px) {
  .Account .item{ min-width: 100%; }
}


.Account .order{
  display: flex;
  flex-direction: row;
  padding-bottom: var(--p);
}

.Account .order.item{
  display: flex;
  flex-direction: column;
  min-width: 100%;
  background: white;
}

.Account .order{
  display: flex;
  flex-direction: row;
}
.Account .order span {
  display: flex;
  width: 15%;
}

.Account .order .wide{
  display: flex;
  width: 45%;
}
.Account .order.column {
  font-weight: bolder;
  margin: var(--p) 0 var(--p) 0;
}

@media screen and (max-width: 600px) { 
  .Account .order { flex-direction: column;} 
  .Account .order span{width: 100%;} 
}



/* MODULE NOTFOUND*/
.Notfound { display:flex; flex-direction: column; padding-top: 3.125rem;  padding-bottom: 3.125rem; /*50*/}
.Notfound img { display:flex;   width: 50%; height: auto; margin : 0 auto;}
.Notfound h1 {  display:flex; justify-content: center; padding: 3.125rem var(--p) 3.125rem var(--p); font-size: 1.3rem}


/* MODULE CART */
.Cart { display: block; }
.Cart h1 { 
  display: block;
  font-size:1.3rem; 
  padding: var(--p);
  font-weight: bolder;
  background: var(--bg-clear);
  width: 100%;
}
.Cart button { 
  display: block;
  padding:var(--p);
  background: var(--bg-button3);
  color: var(--c-button);
  width: 40%;
  font-size: inherit;
  font-weight: bolder;
}

/* MODULES CARD */
.Card { display: flex; overflow-x: auto; padding: var(--p); background: var(--bg-dark);}
.Card .item{
  display:flex;
  flex-direction: column;
  align-items: center;
  padding: var(--p);
  min-width: 17.5rem;
  height: auto;
  background: var(--bg-clear);
  margin: var(--p);
}
.Card img { display: flex;flex-direction: column;max-width:14.625rem;max-height: 12.5rem;}
.Card span { display: flex;flex-direction: column;align-items:center; padding: var(--p) var(--p) 0 var(--p);}
.Card a{ text-decoration: none; color: var(--c-dark); font-weight: bolder;}



.products:first-child {
  border-top:  var(--p2);
    margin-top: var(--p2);

}

.products {
  display:          flex;
  align-items:      center; 
  background:       white;
  padding:          var(--p2);
  margin:           var(--p);
  min-height:       200px;
}

/*.products .image {
  min-width: 150px;
  min-height: 150px;
  align-items: center;
}*/

.products .image img{
  max-width:150px;
  width: auto;
  height: auto;
  margin: auto;
  padding: 5px;
}

/*.products .noimage{ background:var(--bg-dark);}*/

.products .des {
  display:flex;
  padding:var(--p); 
  flex-grow: 1;
}
.products .ref {
  font-weight: bolder;
  padding:var(--p);
}

.products .ref a {
  color: var(--c-dark);
}
.products .price { 
  font-size: 1.25rem; 
  font-weight: bolder;
  padding:var(--p); 
}
.products .price .old { 
  text-decoration:line-through;
  font-size:1.3rem; 
  color:var(--c-dark);
}
.products .price .promo { 
  color:var(--bg-button3);
}
.products .stock { 
  font-size: 1.25rem; 
  font-weight: bolder;
  color: green;
  padding:var(--p); 
}
.products .stock.nostock { 
  color: var(--bg-button3);
  padding:var(--p); 
}
.products input { 
  font-weight:bolder; 
  font-size: 1rem;
  background:var(--bg-clear); 
  color:var(--c-dark); 
  text-align: center;
  border:1px solid var(--bg-button);
  width: 50px;
  height: 50px;
}
.products button { 
  font-weight:bolder; 
  background:var(--bg-button); 
  color:var(--c-button); 
  padding:var(--p); 
  border:1px solid var(--bg-button);
  min-width: 50px;
  height: 50px;
}
.products button:hover { 
  background:var(--bg-button2); 

}
.products button.minus,
.products button.plus { 
  font-size:1.5rem; 
  padding: 0;
}

@media screen and (max-width: 900px) {
  .products { 
    flex-direction:column;
    text-align: center;
    justify-content: center;
  } 
  .products form, .products button, .products input { 
    width: 60%;
  }
}