#main, #main > * {
    width: 100%;
}
#breadcrumb, 
#a-b,
#title,
#description,
#informations,
#nav-sub-lists {
    padding: var(--body-padding);
}
html.searching #nav-sub-lists {
    display: none;
}

#title {
  text-align: center;
}
html.searching #title {
    display: none;
}

#description {
  text-align: justify;
}
html.searching #description {
    display: none;
}

#title-sub-lists {
  text-align: center;
}

#content {
    display: flex;
    flex-direction: column;
}

#content > * {
    display: block;
    width: 100%;
}

#informations {
    order: 10;
    background-color: #eee;
    border-radius: 0.2rem;
    margin: var(--body-padding);
    width: auto;
    text-align: justify;
}

#informations h2, #informations h3 {
  text-align: center;
}

@media (min-width: 768px) {
  main {
    padding: 0 1rem;
  }
}
@media (min-width: 480px) {
#title {
  text-align: left;
  }
#title-sub-lists {
  text-align: left;
  }
  #informations h2, #informations h3 {
  text-align: left;
  }
}
:root {
    --breadcrumb-height: 3rem;
}
#breadcrumb {
    height: var(--breadcrumb-height);
    overflow-y: hidden;
    overflow-x: auto;
    list-style-type: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 0rem;
    margin-top: 0;
    padding: 0.5rem;
}
html.searching #breadcrumb {
    display: none;
}
#breadcrumb li {
    display: inline-block;
}
#breadcrumb li a {
    text-decoration: none;
    color: #707070;
    font-size: 0.8rem;
}
#breadcrumb li::before {
    content: '>';
    margin: 0 0.25rem;
    color: #707070;
}
#breadcrumb li:first-child::before {
    display: none;
}#top-banner {
    display: none;
    text-align: center;
    opacity: 0;
    transition: ease 2s opacity;
    /* height: 200px; */
    padding-left: var(--body-padding-left-right);
    padding-right: var(--body-padding-left-right);
}
html.searching #top-banner {
    display: none;
}
html.ready #top-banner {
    opacity: 1;
}

#top-banner img {
    width: 100%;
}

@media (min-width: 600px) {
    #top-banner {
        display: block;
    }
}#top-banner {
    display: none;
    text-align: center;
    opacity: 0;
    transition: ease 2s opacity;
    /* height: 200px; */
    padding-left: var(--body-padding-left-right);
    padding-right: var(--body-padding-left-right);
}
html.searching #top-banner {
    display: none;
}
html.ready #top-banner {
    opacity: 1;
}

#top-banner img {
    width: 100%;
}

@media (min-width: 600px) {
    #top-banner {
        display: block;
    }
}#sub-lists {
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, max(80px, 10vw));
    justify-content: space-between;
    grid-gap: 1rem;
    margin: 0;
    padding: 0;
}
#sub-lists li {
    display: inline-block;
}
#sub-lists .link {
    text-decoration: none;
    display: inline-block;
    width: 100%;
    text-align: center;
}
#sub-lists img {
    /* width: calc(80px + 2px); */
    border: 1px solid #aaa;
    border-radius: 5px;
}
#sub-lists .link:hover img {
    border-color: var(--border-hover-color);
}
#sub-lists .title {
    display: block;
    color: var(--color);
    font-style: italic;
    font-size: 0.85rem;
    width: 100%;
}
#sub-lists .link:hover .title {
    color: var(--primary-bg-color);
}:root {
    --display: grid;
    --total-n-filters-height: 4rem;
}

#articles {
    position: relative;
}

#articles > p.total-n-filters {
    position: relative;
    text-align: right;
    z-index: 2;
    margin: var(--body-padding);
    padding: 0.8rem 1rem;
    /* margin-top: 2rem; */
    margin-bottom: 1rem;
    background-color: #222222;
    border-radius: 0.2rem;
    color: white;
    height: var(--total-n-filters-height);
}
#articles > p.total-n-filters .total-articles {
    float: left;
    line-height: 2rem;
}
#articles > p.total-n-filters .menu-filters {
    text-align: center;
    display: inline-flex;
}

#pages {
    display: flex;
    flex-direction: column-reverse;
    /* margin-top: 3rem; */
}

#pages .page {
    scroll-margin-top: calc(var(--header-height) - var(--logo-height) + var(--total-n-filters-height) + 1.5rem);
    flex-wrap: wrap;
    grid-template-columns: repeat(auto-fill, var(--card-width));
    justify-content: center;
    grid-gap: var(--card-grid-gap-mobile);
    position: relative;
    /* margin-top: var(--header-height); */
    /* padding-top: calc(3rem + var(--header-height)); */
}
@media (min-width: 480px) {
    #pages .page {
        grid-gap: var(--card-grid-gap-desktop);
    }
}
@media (min-width: 768px) {
    #pages .page {
        scroll-margin-top: calc(var(--header-height) + var(--total-n-filters-height) + 4rem);
    }
}


#pages .page:not(:target) { display: var(--display); }
#pages .page:target { display: grid; }

:root { --display: none; }
#pages[data-page="1"] #page-1.page { display: grid; }
/* #pages[data-page="1"] #page-1.page + .page { display: none !important; } */

#pages[data-nb="0"] .card.ac {
    display: none;
}
#pages .page .card:last-child.ac {
    display: none;
}

#articles.no-results #pagination-nav {
    display: none !important;
}
#articles.no-results #no-results {
    display: block !important;
    margin: 2rem auto 10rem auto;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
}

@media (min-width: 480px) {
    #pages .page {
        grid-gap: 8px;
    }
    #articles > p.total-n-filters .menu-filters {
        width: var(--card-a);
    }

}:root {
    --card-article: 250px;
    --card-width: min(var(--card-article), max(var(--vw50), 160px));
    --card-img: 240px;
    --card-grid-gap-mobile: 0px 0px;
    --card-grid-gap-desktop: 8px 8px;
    --card-borders: 2px;
    --card-max_variants: 8px;
    --card-variant: 30px;
    --card-a: 242px;
    --card-article: 250px;
    --card-space: 0px; /* 4px */
}
:root {
    --fr-new: "nouveau";
    --en-new: "new";
    --es-new: "nuevo";
    --it-new: "nuovo";
    --de-new: "neu";

    --fr-wished: "coup de ♥";
    --en-wished: "crush ♥";
    --es-wished: "flechazo ♥";
    --it-wished: "colpo di ♥";
    --de-wished: "Schwarm ♥";

    --fr-visited: "déjà vu";
    --en-visited: "seen";
    --es-visited: "visto";
    --it-visited: "visto";
    --de-visited: "gesehen";

    --fr-first-price: "à partir de";
    --en-first-price: "from";
    --es-first-price: "desde";
    --it-first-price: "da";
    --de-first-price: "Ab";

    --fr-until: "jusqu'à";
    --en-until: "until";
    --es-until: "hasta";
    --it-until: "fino a";
    --de-until: "bis";

    --fr-text-no-price: "en savoir plus";
    --en-text-no-price: "read more";
    --es-text-no-price: "saber más";
    --it-text-no-price: "saperne di più";
    --de-text-no-price: "Lern mehr";
}



/* Opacity animation */
@keyframes opacify {
  0% { opacity: 1;  }
  100% { opacity: 0; }
}

/* <article> : Invisible part, include gap between cards, and permit to sticker label to be inside a controlled element */
article.card {
    position: relative;
    display: inline-block;
    width: var(--card-width);
}

/* Hide articles not matching the refine search */
article.card.unmatch,
article.card.unmatch-title {
    display: none;
}


/* <button> Wishlist icon */
article.card > .i.heart {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    z-index: 2;
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--primary-bg-color);

    padding: 1.5rem; /* 48x48px */
    mask-size: 50%;
    mask-repeat: no-repeat;
    mask-position: top right;
}

/* <a> : The visual card, with borders */
article.card a {
    display: inline-block;
    /* width: calc(var(--card-width) - var(--card-gap)); */
    width: var(--card-width);
    text-decoration: none;
    color: var(--color);
    margin: var(--card-space);
    border: 1px solid transparent;
    background-color: white;
}
@media (min-width: 480px) {
    article.card a {
        box-shadow: 0 5px 5px rgba(0,0,0,.1);
    }
}
article.card a:hover {
    border-color: var(--border-hover-color);
}

/* limited time offer */
article.card.lto s:before {
    content: "⏱";
    color: #E00;
    display: inline-block;
    font-weight: bold;
    font-size: 0.8rem;
    padding-right: 0.5rem;
    transform: scale(1.3);
}

/* <q> : Possible reduction, partially shifted outside the <a> but still inside the <article> */
article.card:not(.q) q,
article.card q::before, 
article.card q::after {
    display: none;
}
article.card.q q {
    display: inline-block;
    position: absolute;
    background-color: var(--primary-bg-color);
    color: var(--primary-color);
    padding: 0.1rem 0.5rem;
    /* margin: calc(var(--card-gap) / -2) 0 0 calc(var(--card-gap) / -2); */
    margin: 0;
    font-weight: bold;
    font-size: 0.8rem;
    z-index: 2;
}

/* <q> Include the « until » label if case of multiple reductions */
article.card.m.q q::before {
    display: inline-block;
    height: 1rem;
    width: auto;
    padding-right: 0.3rem;
}
html.fr article.card.m.q q::before { content: var(--fr-until); }
html.en article.card.m.q q::before { content: var(--en-until); }
html.es article.card.m.q q::before { content: var(--es-until); }
html.it article.card.m.q q::before { content: var(--it-until); }
html.de article.card.m.q q::before { content: var(--de-until); }



/* <i> Container of images, same dimension than an image */
article.card a i {
    position: relative;
    display: block;
    margin-top: 5px;
}
article.card a i,
article.card a i img {
    width: calc(var(--card-width) - var(--card-borders));
    height: calc(var(--card-width) - var(--card-borders));
}

/* <img> Always show only one image, there is variants images and each could have a 2nd image to show on mouse over */
article.card a i img { 
    display: none;
    background-color: white;
    opacity: 1;
}

/* Variant <img> The visual variants are injected at search time only and show by setting <article data-v="X"> */
article.card a i img.hover { position: absolute; top: 0; z-index: 0; }
article.card[data-v="0"] a i img.v0,
article.card[data-v="1"] a i img.v1,
article.card[data-v="2"] a i img.v2,
article.card[data-v="3"] a i img.v3,
article.card[data-v="4"] a i img.v4,
article.card[data-v="5"] a i img.v5,
article.card[data-v="6"] a i img.v6,
article.card[data-v="7"] a i img.v7,
article.card[data-v="8"] a i img.v8 { display: block; }
article.card a i img:not(.hover) {
    position: absolute;
    top: 0;
    z-index: 1;
}

/* Variant <img> when the mouse over one of the preview variants */
article.card[data-v][data-vm] a i img { display: none; }
article.card[data-v][data-vm="0"] a i img.v0,
article.card[data-v][data-vm="1"] a i img.v1,
article.card[data-v][data-vm="2"] a i img.v2,
article.card[data-v][data-vm="3"] a i img.v3,
article.card[data-v][data-vm="4"] a i img.v4,
article.card[data-v][data-vm="5"] a i img.v5,
article.card[data-v][data-vm="6"] a i img.v6,
article.card[data-v][data-vm="7"] a i img.v7,
article.card[data-v][data-vm="8"] a i img.v8 { display: block; }


/* Mouse over permit to show a 2nd photo of the selected variant */ 
article.card:hover a i img:not(.hover) {
    animation-duration: 1.5s;
    animation-iteration-count: 2;
    animation-direction: alternate;
    animation-name: opacify;
}
article.card:hover a i img:not(.hover):not(.v0) {
    animation-delay: 1s;
}

/* <u> Variants list, always fixed the the same height, whatever the viewport size, could show until 8 variants photos */
article.card u {
    display: inline-block;
    height: var(--card-variant);
    width: 100%;
    margin: 3px 0;
    overflow: hidden;
}
article.card u img {
    width: var(--card-variant);
    height: var(--card-variant);
}

/* <u> Variants list, hide the current main variant photo */
article.card[data-v="0"] u img.v0,
article.card[data-v="1"] u img.v1,
article.card[data-v="2"] u img.v2,
article.card[data-v="3"] u img.v3,
article.card[data-v="4"] u img.v4,
article.card[data-v="5"] u img.v5,
article.card[data-v="6"] u img.v6,
article.card[data-v="7"] u img.v7,
article.card[data-v="8"] u img.v8 { display: none; }

/* <em> Title of the article, fixed to 3 lines of text */ 
article.card em {
    display: block;
    overflow: hidden;
    height: 4.15rem;
    font-size: 0.85rem;
    font-weight: normal;
    text-align: center;
    padding: 1rem 0 0 0;
    padding: 0;
    margin: 0 5px 0 5px;
    white-space: normal;
}

/* <em> Label « new » / « seen » / « visited » before the title if the article is new */
article.card.n em::before,
article.card.wish em::before,
article.card.visited em::before {
    display: inline-block;
    height: 1rem;
    width: auto;
    color: var(--primary-bg-color);
    font-weight: bold;
    padding: 0 0.25rem;
    font-style: normal;
    font-size: 0.75rem;
    white-space: nowrap;
    text-transform: uppercase;
}

html.fr article.card.n em::before { content: var(--fr-new); }
html.en article.card.n em::before { content: var(--en-new); }
html.es article.card.n em::before { content: var(--es-new); }
html.it article.card.n em::before { content: var(--it-new); }
html.de article.card.n em::before { content: var(--de-new); }

html.fr article.card.wished em::before { content: var(--fr-wished); }
html.en article.card.wished em::before { content: var(--en-wished); }
html.es article.card.wished em::before { content: var(--es-wished); }
html.it article.card.wished em::before { content: var(--it-wished); }
html.de article.card.wished em::before { content: var(--de-wished); }

html.fr article.card.visited em::before { content: var(--fr-visited); }
html.en article.card.visited em::before { content: var(--en-visited); }
html.es article.card.visited em::before { content: var(--es-visited); }
html.it article.card.visited em::before { content: var(--it-visited); }
html.de article.card.visited em::before { content: var(--de-visited); }


/* <b> Price of the article, include the possible striked price */
article.card b {
    display: inline-block;
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 0;
    bottom: 0.25rem;
    font-size: 0.9rem;
    white-space: nowrap;
    font-weight: bold;
    white-space: nowrap;
}

/* <b> Price label « from » in case of multiple variant prices */ 
article.card b::before {
    display: block;
    font-size: 0.8rem;
    height: 1rem;
    width: 100%;
    text-align: center;
    white-space: nowrap;
}
html.fr article.card b::before { content: var(--fr-first-price); }
html.en article.card b::before { content: var(--en-first-price); }
html.es article.card b::before { content: var(--es-first-price); }
html.it article.card b::before { content: var(--it-first-price); }
html.de article.card b::before { content: var(--de-first-price); }

article.card:not(.m) b::before {
    visibility: hidden;
}

/* <b> Premium text for no price */ 
article.card.np b::before {
    display: block;
    font-size: 0.8rem;
    height: 1rem;
    width: 100%;
    text-align: center;
    white-space: nowrap;
}
html.fr article.card.np b::before { content: var(--fr-text-no-price); }
html.en article.card.np b::before { content: var(--en-text-no-price); }
html.es article.card.np b::before { content: var(--es-text-no-price); }
html.it article.card.np b::before { content: var(--it-text-no-price); }
html.de article.card.np b::before { content: var(--de-text-no-price); }


/* <p> Space under the price for sticker text */
article.card p {
    display: block;
    height: 1rem;
    margin: 0;
    width: 100%;
    font-size: 0.8rem;
    text-align: center;
    font-style: italic;
    font-weight: bold;
}
article.card.st p {
    color: var(--primary-color);
    background-color: #000000;
}


/* <s> The striked price */
article.card s {
    font-size: 0.9rem;
    color: #737373;
    margin-left: 0.5rem;
}

/* <mark> The refined search */
article.card mark {
    background-color: var(--primary-bg-color);
    color: var(--primary-color);
}
article.card.ac a {
    box-shadow: none;
}#filters-vertical-bar {
  --filters-vertical-size: calc(100vh / 2);
  display: none;
  position: fixed;
  left: 0;
  top: calc(33vh);
  height: var(--filters-vertical-size);
  /* transform-origin: left bottom; */
  writing-mode: vertical-rl;
  /* transform-origin: left calc(var(--filters-vertical-size) * -1.5); */
  transform: translateX(-3rem);
  background-color: var(--primary-bg-color);
  color: var(--primary-color);
  text-align: center;
  padding: 0.25rem;
  z-index: 10;
  text-transform: uppercase;
  font-weight: bold;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  transition: ease 1s transform;
}


#filters {
  --filters-scrollbar-slider-color: var(--primary-bg-color);
  --filters-scrollbar-bg-color: white;
  --filters-sliding: calc(-2 * var(--card-article));
  --filters-scroll-gap: 30px;

  width: min(100vw, calc(1.55 * var(--card-article)));
  position: fixed;
  height: 100vh;
  min-height: 100%;
  overflow-y: scroll;
  z-index: 16;
  top: 0;
  left: var(--filters-sliding);
  transform: translate(0);
  transition: transform ease 1s;
  background-color: rgba(255, 255, 255, 0.95);
  overflow-x: hidden;
  padding-bottom: 3rem;
  overscroll-behavior: contain;
  border-right: 1px solid var(--primary-bg-color);
}

#filters {
  /* scrollbar-width: thin;  */
  scrollbar-color: var(--filters-scrollbar-slider-color) var(--filters-scrollbar-bg-color);
}
#filters::-webkit-scrollbar {
  /* width: 0.25rem; */
}
#filters::-webkit-scrollbar-track {
  background-color: var(--filters-scrollbar-bg-color);
}
#filters::-webkit-scrollbar-thumb {
  background-color: var(--filters-scrollbar-slider-color);
}


html.filters-opened #filters {
  transform: translate(calc( -1 * var(--filters-sliding) ));
}

@media (min-width: 768px) {
  #filters-vertical-bar {
    display: block;
  }
  #filters-vertical-bar.visible {
    transform: translateY(0);
  }
}

#filters div.head {
  position: sticky;
  top: 0;
  z-index: 12;
  width: 100%;
  background-color: var(--primary-bg-color);
  color: var(--primary-color);
  padding: 0.5rem 0.5rem;
  margin: 0;
}
#filters div.head p {
  margin: 0;
}
#filters p.head label {
  display: inline-block;
  height: 2rem;
  line-height: 2rem;
  font-weight: bold;
}
#filters p.head .i.close {
  position: absolute;
  right: 0.5rem;
  background-color: var(--primary-color);
  height: 2rem;
  width: 2rem;
}

#filters p.sub.head {
  padding-top: 0.5rem;
}
#filters p.sub.head label,
#filters p.sub.head button {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--primary-color);
  background-color: transparent;
}

#filters p.sub.head button {
  appearance: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  margin-left: -0.2rem;
}
#filters p.sub.head label {
  position: absolute;
  right: 0.7rem;
  line-height: 1.5rem;
}

#filters fieldset {
  padding: 0.5rem 0.7rem 0.7rem 0.7rem;
  margin: 0.5rem 0.5rem;
  border-radius: 5px;
  border: 0px; 
}

#filters fieldset legend {
  margin: 0 auto;
  font-size: 0.9rem;
  font-weight: bold;
  font-style: italic;
  border-radius: 0.2rem;
  text-align: center;
  padding: 0.25rem;
  background: #222;
  width: 100%;
  color: white;
}
#filters .filter {
  list-style-type: none;
  padding: 0;
  margin: 1rem 0 0 0;
  animation: fade 0.5s ease-in-out;
}
#filters .filter[data-visible-for=""] {
  display: none;
}
#filters .option {
  white-space: nowrap;
}
#filters .option label {
  display: inline-block;
  min-height: 2rem;
  width: 100%;
  vertical-align: middle;
  padding-left: 0.25rem;
}

@media (min-width: 768px) {
  #filters .option label {
  min-height: 1.5rem;
    }

}


#filters .option label:hover {
  color: var(--primary-bg-color);
}
.i.close {
  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBhcmlhLWhpZGRlbj0idHJ1ZSIgcm9sZT0iaW1nIiBjbGFzcz0iaWNvbmlmeSBpY29uaWZ5LS1tZGkiIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOSAzSDVhMiAyIDAgMCAwLTIgMlYxOWEyIDIgMCAwIDAgMiAySDE5YTIgMiAwIDAgMCAyLTJWNWEyIDIgMCAwIDAtMi0ybS0zLjQgMTRMMTIgMTMuNEw4LjQgMTdMNyAxNS42bDMuNi0zLjZMNyA4LjRMOC40IDdsMy42IDMuNkwxNS42IDdMMTcgOC40TDEzLjQgMTJsMy42IDMuNmwtMS40IDEuNHoiIGZpbGw9ImN1cnJlbnRDb2xvciI+PC9wYXRoPjwvc3ZnPg==);
}



.filter-datalist input[list] {
  width: 100%;
  text-align: center
}
.filter-datalist .used {
  list-style-type: none;
  padding: 0;
}

#filters .refine .option label {
  text-decoration: initial;
}
.filter.datalist {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.filter.datalist .used {
  margin: 0;
  padding: 0;
  margin-bottom: 1rem;
}
.filter.datalist .used li {
  width: 100%;
  list-style-type: none;
}
.filter.datalist .used li.disabled label {
  opacity: 0.5;
}
.filter.datalist input[list] {
  width: 100%;
  border-radius: 0.2rem;
  border: none;
  border: 1px solid #888;
  margin-bottom: 1rem;
  text-align: left;
  background: var(--bg-arrow-down);
  line-height: 1.3rem;
}
.filter.datalist input[list]::placeholder {
  text-align: center;
}

.filter.datalist .option label {
  font-size: 1rem;
}#filter-price input[type="number"]:not(:placeholder-shown) {
    background-color: var(--primary-bg-color);
    color: var(--primary-color);
}
#filter-price b {
    font-size: 0.9rem;
    padding: 0 0.5rem;
    color: #555;
}
#filter-price input[type="number"] {
    min-width: 8rem;
    text-align: center;
}
#filter-price input[type="range"] {
    width: calc(100% - 5rem);
}
i.currency input {
    appearance: none;
    border: none;
    border-bottom: 1px solid #CCC;
    width: 5rem;
}
i.currency input:focus {
    border: none;
    border-bottom: 1px solid black;
}

i.currency.EUR input {
    text-align: right;
}
i.currency.EUR::after {
    content: "€";
}

i.currency.USD input {
    text-align: left;
}
i.currency.USD::before {
    content: "$";
}

i.currency.EUR::after,
i.currency.USD::before {
    display: inline-block;
    width: 1rem;
    height: 1rem;
}

i.output-max-slider {
    display: none;
}
#filter-price-max-slider:hover + i.output-max-slider {
    display: inline-block;
}
.filter.grid {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.filter.grid  {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.5rem;
    font-size: 0.7rem;
}

.filter.grid .option {
    position: relative;
}
.filter.grid[data-maxlength] .option { width: 9em; line-height: 3.5em; }
.filter.grid[data-maxlength="1"] .option { width: 1em; line-height: 1em; }
.filter.grid[data-maxlength="2"] .option { width: 2em; line-height: 2em; }
.filter.grid[data-maxlength="3"] .option { width: 3em; line-height: 3em; }
.filter.grid[data-maxlength="4"] .option { width: 4em; line-height: 3.5em; }
.filter.grid[data-maxlength="5"] .option { width: 5em; line-height: 3.5em; }
.filter.grid[data-maxlength="6"] .option { width: 6em; line-height: 3.5em; }
.filter.grid[data-maxlength="7"] .option { width: 7em; line-height: 3.5em; }
.filter.grid[data-maxlength="8"] .option { width: 8em; line-height: 3.5em; }
.filter.grid[data-maxlength="9"] .option { width: 9em; line-height: 3.5em; }

.filter.grid .option input {
    position: absolute;
    appearance: none;
    margin: 0;
    width: 100%;
    height: 100%;
}

.filter.grid .option label {
    display: inline-block;
    width: 100%;
    font-family: monospace;
    font-size: 0.9rem;
    text-align: center;
    border: 1px solid #bbb;
    border-radius: 10%;
}
.filter.grid .option.disabled label {
    opacity: 0.3;
    text-decoration: line-through;
}

.filter.grid .option:hover label {
    border-color: var(--border-hover-color);
}

.filter.grid .option input:checked + label {
  background-color: var(--primary-bg-color);
  color: var(--primary-color);
  font-weight: bold;
}
.filter.checkboxes {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.filter.checkboxes .option label {
  font-size: 1rem;
}
.filter .option.disabled label {
  opacity: 0.5;
  text-decoration: line-through;
}

#filters  input.checkbox {
  height: 1.5rem;
  width: 1.5rem;
}

@media (min-width: 768px) {

  #filters  input.checkbox {
  height: 1rem;
  width: 1rem;
     }
}
.filter.checkboxes input:checked + label {
  font-weight: bold;
}

.filter.colors {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.filter.colors  {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.5rem;
    font-size: 2rem;
}

.filter.colors .option {
    position: relative;
    width: 1em;
    line-height: 1em;
}

.filter.colors .option .checkbox {
    position: absolute;
    appearance: none;
    margin: 0;
    width: 100%;
    height: 100%;
}

.filter.colors  .option .label {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    font-family: monospace;
    font-size: 0.9rem;
    text-align: center;
    box-shadow: 0 0 1px 0px #000;
    border-radius: 50%;
}
.filter.colors .option.disabled label {
    opacity: 0.2;
}

.filter.colors .option:hover .label {
    border-color: var(--border-hover-color);
}

.filter.colors .option .checkbox:checked + .label {
    border-radius: 0%;
}

.filter.colors  .option .label .color {
    display: none;
    position: absolute;
    margin-top: 2rem;
    font-weight: bold;
    color: var(--primary-color);
    background-color: var(--primary-bg-color);
    white-space: nowrap;
    padding: 0 0.5rem;
    border-radius: 1rem;
    z-index: 5;
}
.filter.colors  .option:hover .label .color {
    display: inline-block;
} :root {
    --display: grid;
    --total-n-filters-height: 4rem;
}

#articles {
    position: relative;
}

#articles > p.total-n-filters {
    position: relative;
    text-align: right;
    z-index: 2;
    margin: var(--body-padding);
    padding: 0.8rem 1rem;
    /* margin-top: 2rem; */
    margin-bottom: 1rem;
    background-color: #222222;
    border-radius: 0.2rem;
    color: white;
    height: var(--total-n-filters-height);
}
#articles > p.total-n-filters .total-articles {
    float: left;
    line-height: 2rem;
}
#articles > p.total-n-filters .menu-filters {
    text-align: center;
    display: inline-flex;
}

#pages {
    display: flex;
    flex-direction: column-reverse;
    /* margin-top: 3rem; */
}

#pages .page {
    scroll-margin-top: calc(var(--header-height) - var(--logo-height) + var(--total-n-filters-height) + 1.5rem);
    flex-wrap: wrap;
    grid-template-columns: repeat(auto-fill, var(--card-width));
    justify-content: center;
    grid-gap: var(--card-grid-gap-mobile);
    position: relative;
    /* margin-top: var(--header-height); */
    /* padding-top: calc(3rem + var(--header-height)); */
}
@media (min-width: 480px) {
    #pages .page {
        grid-gap: var(--card-grid-gap-desktop);
    }
}
@media (min-width: 768px) {
    #pages .page {
        scroll-margin-top: calc(var(--header-height) + var(--total-n-filters-height) + 4rem);
    }
}


#pages .page:not(:target) { display: var(--display); }
#pages .page:target { display: grid; }

:root { --display: none; }
#pages[data-page="1"] #page-1.page { display: grid; }
/* #pages[data-page="1"] #page-1.page + .page { display: none !important; } */

#pages[data-nb="0"] .card.ac {
    display: none;
}
#pages .page .card:last-child.ac {
    display: none;
}

#articles.no-results #pagination-nav {
    display: none !important;
}
#articles.no-results #no-results {
    display: block !important;
    margin: 2rem auto 10rem auto;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
}

@media (min-width: 480px) {
    #pages .page {
        grid-gap: 8px;
    }
    #articles > p.total-n-filters .menu-filters {
        width: var(--card-a);
    }

}#pagination-nav {
    list-style-type: none;
    /* display: flex;
    align-items: baseline; */
    margin: var(--body-padding);
    margin-top: 1rem;
    margin-bottom: 2rem;
    background-color: #222222;
    border-radius: 5px;
    text-align: center;
}
#pagination-nav .pagination {
    display: flex;
    white-space: nowrap;
    justify-content: center;
}
#pagination-nav .pagination .nos {
    display: inline-block;
    overflow-x: auto;
    scrollbar-width: thin;
    text-overflow: ellipsis;
}

#pagination-nav .link {
    display: table-cell;
    text-decoration: none;
    color: white;
    transition:.5s;
    font-size: 0.9rem;
    text-transform: lowercase;
    align-self: center;
}
#pagination-nav .nos .link {
    padding: 0 1.12rem; /* /!\ 48x48 minimum */
    line-height: 3.2rem;
    text-align: center;
    vertical-align: middle;
}
#pagination-nav .link:hover {
    color: var(--primary-bg-color);
}
#pagination-nav .link.selected {
    font-weight: bold;
    font-size: 1.1rem;
    background: var(--primary-bg-color);
    color:white;
}

#pagination-nav .page-previous,
#pagination-nav .page-next {
    display: inline-block;
    /* font-size: 1.2rem; */
    font-weight: bold;
    padding: 1rem;
}

#pagination-sorting .pagination,
#pagination-sorting .ordering {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

#pagination-sorting select {
    margin: 0.5rem 0rem 0.5rem 0rem;
    text-align: center;
    width: 100%;
}

#refine-title {
    border: none;
    border: 1px solid #ccc;
    padding: 0.25rem;
    margin: 1rem 0;
    background-color: inherit;
    width: 100%;
    text-align: center;
    border-radius: 0.2rem;
}

#pagination-sorting .refine ul {
    padding: 0;
    margin: 0;
}