/* Catalogue et vente en ligne : styles fonctionnels partagés par toutes les
   pages. Les contenus éditables peuvent les surcharger dans leur page.css. */

/* Raccourcis de vente placés dans la navigation publique. */
.commerce-nav-actions {
  display: inline-flex;
  gap: .4rem;
  align-items: center;
}

.commerce-nav-action {
  position: relative;
  display: inline-flex;
  gap: .38rem;
  align-items: center;
  justify-content: center;
  min-height: 2.45rem;
  padding: .5rem .72rem;
  border: 1px solid color-mix(in srgb, var(--sdx-border, #a9c7cb) 78%, transparent);
  border-radius: .7rem;
  color: var(--sdx-text, #0b3440);
  background: color-mix(in srgb, var(--sdx-surface-solid, #fff) 92%, transparent);
  font-size: .82rem;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}

.commerce-nav-action:hover,
.commerce-nav-action:focus-visible {
  border-color: var(--sdx-erp-brand, #339999);
  color: var(--sdx-erp-deep, #0b5265);
  background: var(--sdx-surface-solid, #fff);
}

.commerce-nav-action i { font-size: 1rem; }

.commerce-nav-action .we-cart-count {
  display: inline-grid;
  min-width: 1.18rem;
  min-height: 1.18rem;
  padding: .1rem .26rem;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--sdx-erp-deep, #0b5265);
  font-size: .66rem;
  font-weight: 850;
}

.commerce-account-page {
  min-height: clamp(32rem, 70vh, 50rem);
  padding: clamp(2rem, 6vw, 5rem) 0;
  background: color-mix(in srgb, var(--sdx-surface-muted, #e7f0f1) 45%, #fff);
}

@media (max-width: 767.98px) {
  .commerce-nav-actions { gap: .28rem; }
  .commerce-nav-action { width: 2.45rem; padding-inline: .45rem; }
  .commerce-nav-action__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .commerce-nav-action .we-cart-count { position: absolute; top: -.32rem; right: -.32rem; }
}

.we-section-catalogue-liste,
.we-section-produit {
  width: 100%;
  padding: clamp(1.25rem, 3vw, 2.5rem) 0 clamp(3.5rem, 7vw, 6rem);
  overflow: clip;
  color: var(--sdx-text, #0b3440);
}

.we-section-catalogue-liste .we-main-card,
.we-section-produit .we-main-card {
  width: min(calc(100% - 2rem), var(--sdx-site-content-max, 90rem));
  margin-inline: auto;
}

/* Filtres Catalogue. */
.we-filter-card {
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--sdx-border, #a9c7cb);
  border-radius: 1.1rem;
  background: color-mix(in srgb, var(--sdx-surface-solid, #fff) 92%, var(--sdx-erp-soft, #d2eaeb));
  box-shadow: 0 .9rem 2.2rem rgb(29 89 107 / 9%);
}

.we-filter-header {
  margin-bottom: 1.15rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--sdx-border, #a9c7cb) 62%, transparent);
}

.we-filter-header-title {
  color: var(--sdx-erp-brand, #339999);
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.we-filter-resultcount {
  color: var(--sdx-text-soft, #3f606a);
  font-size: .88rem;
}

.we-filter-resultcount strong { color: var(--sdx-text, #0b3440); }

.we-filter-chipbar {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.we-filter-chipbar:not(:empty) { margin-top: .8rem; }

.we-filter-chip {
  display: inline-flex;
  gap: .25rem;
  align-items: center;
  padding: .35rem .65rem;
  border: 1px solid var(--sdx-border, #a9c7cb);
  border-radius: 999px;
  color: var(--sdx-text-soft, #3f606a);
  background: var(--sdx-surface-muted, #e7f0f1);
  font-size: .78rem;
}

.we-filter-form label,
.we-variant-select label {
  display: block;
  margin-bottom: .38rem;
  color: var(--sdx-text, #0b3440);
  font-size: .8rem;
  font-weight: 750;
}

.we-filter-form .form-control,
.we-filter-form .form-select,
.we-variant-select .form-select {
  min-height: 2.7rem;
  border-color: var(--sdx-border, #a9c7cb);
  border-radius: .72rem;
  color: var(--sdx-text, #0b3440);
  background-color: #fff;
}

.we-filter-form .form-control:focus,
.we-filter-form .form-select:focus,
.we-variant-select .form-select:focus {
  border-color: var(--sdx-erp-brand, #339999);
  box-shadow: 0 0 0 .2rem rgb(51 153 153 / 14%);
}

.we-range-wrapper {
  display: grid;
  gap: .45rem;
  padding: .4rem .15rem 0;
}

.we-range-values {
  display: flex;
  justify-content: space-between;
  gap: .35rem;
  color: var(--sdx-text-soft, #3f606a);
  font-size: .78rem;
}

.we-range-inputs {
  display: grid;
  gap: .25rem;
}

.we-range { accent-color: var(--sdx-erp-brand, #339999); }

.we-section-catalogue-liste #we-attr-filters.contents { display: contents; }

.we-attr-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.we-attr-pill {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  margin: 0;
  padding: .3rem .62rem;
  border: 1px solid var(--sdx-border, #a9c7cb);
  border-radius: 999px;
  color: var(--sdx-text-soft, #3f606a);
  background: #fff;
  cursor: pointer;
  font-size: .78rem;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}

.we-attr-pill:hover,
.we-attr-pill.is-active {
  border-color: var(--sdx-erp-brand, #339999);
  color: #fff;
  background: var(--sdx-erp-deep, #0b5265);
}

.we-filter-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: .2rem;
}

.we-filters-close,
.we-filters-fab {
  border: 0;
  color: #fff;
  background: var(--sdx-erp-deep, #0b5265);
}

.we-filters-close {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
}

.we-filters-fab {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  min-height: 2.8rem;
  padding: .65rem 1rem;
  border-radius: 999px;
  box-shadow: 0 .8rem 1.8rem rgb(3 17 22 / 22%);
  font-weight: 750;
}

.we-filters-backdrop { display: none; }

/* Cartes Article. */
.we-product-card {
  display: flex;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--sdx-border, #a9c7cb);
  border-radius: 1.05rem;
  background: var(--sdx-surface-solid, #fff);
  box-shadow: 0 .85rem 2rem rgb(29 89 107 / 8%);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.we-product-card:hover {
  border-color: var(--sdx-erp-brand, #339999);
  box-shadow: 0 1.1rem 2.5rem rgb(29 89 107 / 14%);
  transform: translateY(-.18rem);
}

.we-product-thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--sdx-surface-muted, #e7f0f1);
}

.we-product-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.we-product-body {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  padding: clamp(1rem, 2vw, 1.35rem);
}

.we-product-category {
  margin-bottom: .45rem;
  color: var(--sdx-erp-brand, #339999);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.we-product-name {
  margin: 0 0 .8rem;
  color: var(--sdx-text, #0b3440);
  font-size: clamp(1.12rem, 2vw, 1.35rem);
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.we-product-price {
  display: grid;
  gap: .25rem;
  margin-bottom: .75rem;
}

.we-price-line {
  display: flex;
  gap: .45rem;
  align-items: baseline;
}

.we-price-line.is-main {
  color: var(--sdx-erp-deep, #0b5265);
  font-size: 1.02rem;
  font-weight: 800;
}

.we-price-line.is-sub {
  color: var(--sdx-text-soft, #3f606a);
  font-size: .85rem;
}

.we-price-badge {
  padding: .12rem .38rem;
  border-radius: .35rem;
  color: var(--sdx-text-soft, #3f606a);
  background: var(--sdx-surface-muted, #e7f0f1);
  font-size: .66rem;
  font-weight: 850;
}

.we-price-hint.hide_it { display: none !important; }

.we-product-excerpt {
  margin: 0 0 1rem;
  color: var(--sdx-text-soft, #3f606a);
  line-height: 1.6;
}

.we-product-footer {
  display: grid;
  gap: .75rem;
  margin-top: auto;
  padding-top: .9rem;
  border-top: 1px solid color-mix(in srgb, var(--sdx-border, #a9c7cb) 58%, transparent);
}

.we-product-ref {
  color: var(--sdx-text-soft, #3f606a);
  font-size: .75rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.we-product-actions,
.we-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
}

.we-btn-cart {
  border-color: var(--sdx-erp-deep, #0b5265);
  color: #fff;
  background: var(--sdx-erp-deep, #0b5265);
}

.we-btn-cart:hover,
.we-btn-cart:focus-visible {
  border-color: var(--sdx-erp-brand, #339999);
  color: #fff;
  background: var(--sdx-erp-brand, #339999);
}

.we-pagination {
  display: flex;
  gap: .4rem;
  justify-content: center;
  margin-top: 1rem;
}

.we-page-btn {
  display: inline-grid;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid var(--sdx-border, #a9c7cb);
  border-radius: .62rem;
  place-items: center;
  color: var(--sdx-erp-deep, #0b5265);
  background: #fff;
  text-decoration: none;
}

.we-page-btn.is-active {
  border-color: var(--sdx-erp-deep, #0b5265);
  color: #fff;
  background: var(--sdx-erp-deep, #0b5265);
}

.we-page-btn.is-disabled { opacity: .4; pointer-events: none; }

/* Fiche Article. */
.we-section-produit .we-main-card-product {
  padding: clamp(1rem, 3vw, 2.25rem);
  border: 1px solid var(--sdx-border, #a9c7cb);
  border-radius: 1.25rem;
  background: var(--sdx-surface-solid, #fff);
  box-shadow: var(--sdx-card-shadow, 0 24px 60px rgb(29 89 107 / 13%));
}

.we-product-gallery-item {
  overflow: hidden;
  border-radius: 1rem;
  background: var(--sdx-surface-muted, #e7f0f1);
}

.we-product-gallery-item img {
  display: block;
  width: 100%;
  height: auto;
}

.we-product-title-banner { margin-bottom: .7rem; }

.we-product-title {
  margin: 0;
  color: var(--sdx-text, #0b3440);
  font-size: clamp(1.65rem, 4vw, 2.55rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}

.we-product-title-line {
  width: 4rem;
  height: .22rem;
  margin-top: .75rem;
  border-radius: 999px;
  background: var(--sdx-erp-brand, #339999);
}

.we-product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .9rem;
}

.we-badge {
  padding: .3rem .58rem;
  border: 1px solid var(--sdx-border, #a9c7cb);
  border-radius: 999px;
  color: var(--sdx-erp-deep, #0b5265);
  background: var(--sdx-surface-muted, #e7f0f1);
  font-size: .72rem;
  font-weight: 750;
}

.we-intro {
  max-width: 62rem;
  color: var(--sdx-text-soft, #3f606a);
  line-height: 1.65;
}

.we-section-title {
  margin: 1.35rem 0 .65rem;
  color: var(--sdx-text, #0b3440);
  font-size: 1rem;
  font-weight: 850;
}

.we-spec-table,
.we-total-table {
  width: 100%;
  border-collapse: collapse;
}

.we-spec-table th,
.we-spec-table td,
.we-total-table th,
.we-total-table td {
  padding: .7rem .75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--sdx-border, #a9c7cb) 58%, transparent);
  vertical-align: top;
}

.we-spec-table th,
.we-total-table th {
  width: min(13rem, 38%);
  color: var(--sdx-text, #0b3440);
  font-weight: 750;
}

.we-spec-table td,
.we-total-table td {
  min-width: 0;
  color: var(--sdx-text-soft, #3f606a);
  overflow-wrap: anywhere;
}

.we-variants-block,
.we-composition-block,
.we-total-box {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--sdx-border, #a9c7cb);
  border-radius: .9rem;
  background: color-mix(in srgb, #fff 92%, var(--sdx-erp-soft, #d2eaeb));
}

.we-variants-block .we-section-title,
.we-composition-block .we-section-title { margin-top: 0; }

.we-variant-selected {
  padding: .75rem;
  border-radius: .7rem;
  color: var(--sdx-text-soft, #3f606a);
  background: var(--sdx-surface-muted, #e7f0f1);
}

.we-variant-selected-title {
  margin-bottom: .35rem;
  color: var(--sdx-text, #0b3440);
  font-weight: 750;
}

.we-variant-selected-table { width: 100%; }
.we-variant-selected-table th,
.we-variant-selected-table td { padding: .2rem .3rem; }

.we-table-responsive {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.we-compo-table {
  width: 100%;
  min-width: 45rem;
  border-collapse: collapse;
}

.we-compo-table th,
.we-compo-table td {
  padding: .65rem;
  border-bottom: 1px solid color-mix(in srgb, var(--sdx-border, #a9c7cb) 58%, transparent);
  color: var(--sdx-text-soft, #3f606a);
  vertical-align: middle;
}

.we-compo-table th {
  color: var(--sdx-text, #0b3440);
  font-size: .78rem;
  white-space: nowrap;
}

.we-col-pick,
.we-col-photo,
.we-col-qty { width: 3.5rem; text-align: center; }
.we-col-price { width: 7rem; text-align: right; white-space: nowrap; }

.we-compo-thumb {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .5rem;
  object-fit: cover;
}

.we-compo-pick { display: inline-flex; cursor: pointer; }
.we-compo-toggle { width: 1.15rem; height: 1.15rem; accent-color: var(--sdx-erp-brand, #339999); }
.we-muted { color: var(--sdx-text-soft, #3f606a); }

.we-total-box { margin-top: .9rem; }
.we-total-table td { text-align: right; }
.we-total-row th,
.we-total-row td { color: var(--sdx-erp-deep, #0b5265); font-size: 1.02rem; }

.we-actions {
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--sdx-border, #a9c7cb);
}

.we-qty-wrap {
  display: inline-flex;
  align-items: center;
}

.we-qty-input { width: 4rem; border-radius: .55rem; }

@media (max-width: 767.98px) {
  .we-section-catalogue-liste,
  .we-section-produit {
    padding-top: .75rem;
    overflow: hidden;
  }

  .we-section-catalogue-liste .we-main-card,
  .we-section-produit .we-main-card {
    width: min(calc(100% - 1.25rem), var(--sdx-site-content-max, 90rem));
  }

  .we-filters-toggle-btn { min-height: 3.4rem; }

  .we-filters-toggle-floating .we-filters-fab {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    z-index: 1045;
  }

  .we-filter-card {
    position: fixed;
    z-index: 1060;
    top: var(--we-nav-h, 0);
    right: 0;
    bottom: 0;
    width: min(92vw, 27rem);
    overflow-y: auto;
    border-radius: 1rem 0 0 0;
    transform: translateX(105%);
    transition: transform .2s ease;
  }

  body.we-filters-open .we-filter-card { transform: translateX(0); }
  body.we-lock-scroll { overflow: hidden; }

  .we-filters-backdrop {
    position: fixed;
    z-index: 1050;
    inset: 0;
    display: block;
    visibility: hidden;
    opacity: 0;
    background: rgb(3 17 22 / 58%);
    transition: opacity .2s ease, visibility 0s linear .2s;
  }

  body.we-filters-open .we-filters-backdrop {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }

  .we-filter-header > .d-flex { gap: .7rem; }
  .we-filter-resultcount { margin-left: auto; }
  .we-filter-actions { justify-content: stretch; }
  .we-filter-actions .btn { width: 100%; }

  .we-section-produit .we-main-card-product {
    padding: 1rem;
    overflow: hidden;
    border-radius: 1rem;
  }

  .we-main-card-product > .row {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    --bs-gutter-x: 0;
  }

  .we-main-card-product > .row > [class*="col-"] {
    min-width: 0;
    padding-inline: 0;
  }

  .we-product-title { font-size: clamp(1.55rem, 8vw, 2rem); }
  .we-product-meta { gap: .3rem; }

  .we-spec-table th,
  .we-spec-table td {
    padding-inline: .35rem;
    font-size: .9rem;
  }

  .we-spec-table th { width: 36%; }

  .we-variants-block,
  .we-composition-block,
  .we-total-box { padding: .8rem; }

  .we-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .we-actions-left,
  .we-actions-right,
  .we-actions-right .we-btn-cart { width: 100%; }

  .we-qty-wrap { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; }
  .we-qty-input { width: 100%; }
}

@media (max-width: 640px) {
  #cc-main .cm {
    box-sizing: border-box;
    width: calc(100vw - 1rem) !important;
    max-width: calc(100vw - 1rem) !important;
    right: .5rem !important;
    left: .5rem !important;
  }

  #cc-main .cm__body,
  #cc-main .cm__texts,
  #cc-main .cm__desc,
  #cc-main .cm__btns { min-width: 0; max-width: 100%; }

  #cc-main .cm__desc { overflow-wrap: anywhere; }
}
