/* Page coordonnées (checkout.liquid) : boutons en rouge du site/texte blanc
   (2026-10-05, demande de Laura), au lieu du .btn-primary générique (fond
   noir du site) — #checkout-cancel-btn utilise en plus .btn-outline
   (composent-generic.css), qui remet le texte à var(--c-fg) après
   .btn-primary tout en gardant un fond plein (voir commentaire plus bas sur
   .il-checkout-s20 .btn-outline, même piège) : la couleur de texte doit
   donc être redonnée explicitement ici aussi. */
#checkout-cancel-btn,
#checkout-submit-btn {
  background-color: #E35205;
  border-color: #E35205;
  color: #fff;
}
#checkout-cancel-btn:hover,
#checkout-cancel-btn:focus,
#checkout-submit-btn:hover,
#checkout-submit-btn:focus {
  background-color: #1e1e1e;
  border-color: #1e1e1e;
  color: #fff;
}

/* Bouton "Demander un devis" du panier : rouge du site / texte blanc
   (2026-10-05, demande de Laura), au lieu du .btn-primary générique (fond
   noir du site). */
#cart-checkout-btn {
  background-color: #E35205;
  border-color: #E35205;
  color: #fff;
}
#cart-checkout-btn:hover,
#cart-checkout-btn:focus {
  background-color: #1e1e1e;
  border-color: #1e1e1e;
  color: #fff;
}
/* Bouton "Demander un devis" du panier quand une règle de quantité minimum
   n'est pas respectée (voir cart-summary.js) — aria-disabled seul ne change
   rien à l'affichage ni à l'interaction sur un <a>. */
#cart-checkout-btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
  font-family: "Quicksand", sans-serif;
}
html {
  height: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  min-height: 100%;
  font-family: "Quicksand", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #323232;
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  font-weight: 500;
}
/* Le bandeau cookies (_shared/assets/cookie-banner.css) est en position: fixed, bottom: 0,
   sans mécanisme (partagé) réservant de la place en bas de page : sur une page courte (ex.
   mentions légales), il recouvre le bas du contenu tant qu'aucun choix n'a été fait. Réserve
   un espace en bas uniquement pendant que le bandeau est affiché (banner.hidden piloté par
   cookie-banner.js). Constat et correctif du 2026-08-20, site-d'ouest-objets uniquement. */
body:has([data-testid="cookie-banner"]:not([hidden])) {
  padding-bottom: 160px;
}
@media (max-width: 640px) {
  body:has([data-testid="cookie-banner"]:not([hidden])) {
    padding-bottom: 280px;
  }
}
input {
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-weight: 500;
  font-size: 16px;
  height: 35px;
}

/* Tables Bootstrap 5 (reproduction : seule bootstrap-grid.min.css est
   chargée sur ce site, elle ne fournit pas les styles de composants) */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
  vertical-align: top;
  border-color: #dee2e6;
  border-collapse: collapse;
}
.table > :not(caption) > * > * {
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid #dee2e6;
}
.table > thead {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
}
.table > thead th {
  font-weight: 600;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(0, 0, 0, 0.03);
}
.table-bordered > :not(caption) > * {
  border-width: 1px 0;
  border-style: solid;
  border-color: #dee2e6;
}
.table-bordered > :not(caption) > * > * {
  border-width: 0 1px;
  border-style: solid;
  border-color: #dee2e6;
}

/* Barre de recherche (header + page recherche) */
.input-search {
  flex: 1 1 auto;
  border: 1px solid var(--c-border);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding: var(--s-2) var(--s-3);
  color: #1e1e1e;
}
.input-search:focus {
  outline: none;
  border-color: #1e1e1e;
}
.btn-search {
  border: 1px solid white;
  background-color: #fff;
  color: #1e1e1e;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
  height: 35px;
}

/* Autocomplétion catégories/sous-catégories de la barre de recherche */
.header-search-wrap {
  position: relative;
}
.search-suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-md);
  z-index: var(--z-header);
  color: #1e1e1e;
}
.search-suggest__item {
  padding: var(--s-2) var(--s-3);
  font-size: 14px;
  cursor: pointer;
}
.search-suggest__item:hover,
.search-suggest__item.is-active {
  background: #f9e9e8;
}
.search-suggest__item mark {
  background: none;
  color: #1e1e1e;
  font-weight: 700;
}

.logo {
  height: 80px;
  width: auto;
}

/* Header */
.header {
  margin-top: 0;
  background-color: #091F2C;
  padding: 15px 0;
  color: #fff;

  .header-contact-label {
    display: block;
    color: #3c3c3c;
    font-size: 14px;
    margin-bottom: 2px;
  }
  .text-phone-header,
  .text-mail-header {
    display: inline-flex;
    align-items: center;
    font-weight: bold;
    &:hover {
      text-decoration: underline;
    }
  }
  .text-phone-header {
    font-size: 24px;
    color: #fff;
    &:hover {
      color: #fff;
    }
  }
  .text-mail-header {
    font-size: 16px;
    color: #fff;
    &:hover {
      color: #fff;
    }
  }
  .header-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
    font-size: 20px;
    color: #fff;
    &:hover {
      color: #E35205;
    }
  }
  small {
    color: #fff;
  }
}

.announcement-bar {
  background-color: #091F2C;
  color: white;
  padding: 5px 12px;
  font-size: 16px;
  .announcement-bar__brand {
    text-transform: uppercase;
  }
  a {
    font-size: 20px;
  }
  .panier-bulle {
    color: #fff;
    background-color: #E35205;
    border: 1px solid #E35205;
    border-radius: 5px;
    padding: 0 5px;
    font-size: 14px;
    margin-left: 5px;
    z-index: 999;
  }
  .bi-bag {
    margin-left: 5px;
  }
}

/* Cœur commun (position/animation/nav/liens) dans composent-generic.css :
   ici uniquement ce qui diffère réellement pour ce site. */
.mobile-drawer {
  z-index: var(--z-drawer);
  padding: 15px 25px;
}
.mobile-drawer__title {
  font-size: 16px;
  color: #1e1e1e;
  font-weight: bold;
}

/* Lien present dans le DOM pour data-testid="cookie-banner-manage" (le
   composant partage cookie-banner.js s'y accroche, teste par
   tests/cookie-banner.spec.ts) mais absent de la maquette du footer : masque
   visuellement sans le retirer du clavier/lecteur d'ecran ni du DOM (jamais
   display:none, qui casserait aussi bien le clic Playwright que l'accessibilite). */
.sr-only-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Footer */
.footer-disclaimer {
  text-align: center;
  color: #E35205;
  font-weight: bold;
  font-size: 14px;
  padding: 16px 12px;
  line-height: 1.5;
}
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  font-size: 20px;
  color: #fff;
}
.footer-social-link:hover {
  color: #E35205;
}
.footer {
  padding-top: 36px;
  font-size: 14px;
  color: #fff;
  background-color: #091F2C;

  a {
    color: #fff;
  }
  a:hover {
    text-decoration: underline;
    color: #E35205;
  }

  .logo {
    height: 60px;
    width: auto;
    max-width: 330px;
    margin-bottom: 20px;
  }

  .link-footer {
    width: 100%;
    display: block;
    padding: 5px 15px;
    &:hover {
      text-decoration: none;
      background-color: rgba(255, 255, 255, 0.1);
    }
  }

  .contact-footer {
    margin-top: 20px;
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .bi {
      font-size: 15px;
      flex-shrink: 0;
    }
  }


  h4 {
    font-size: 14px;
    font-weight: bold;
    color: #E35205;
    padding: 0 15px;
  }

  @media (max-width: 767px) {
    .mobile-center {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 20px;
    }
  }

  .copyright {
    background-color: #E35205;
    color: #fff;
    padding: 15px 12px;
    margin-top: 30px;
    font-size: 14px;

    a {
      color: #fff;
    }
    a:hover {
      color: #1e1e1e;
    }
  }
}

/* Accueil */
.carousel-indicators [data-bs-target] {
  width: 12px;
  height: 12px;
  border-radius: 10px;
  border: 10px;
}

.title-subcat-ve {
  text-align: center;
  margin-top: 2em;
  margin-bottom: 2em;
  position: relative;
}

.title-subcat-ve:after {
  content: "";
  height: 5px;
  position: absolute;
  background-color: #E35205;
  bottom: -30px;
  width: 65px;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}

.catalogueDetail {
  .breadcrumb {
    background-color: #313131;
    text-align: center;
    color: #848484;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;

    .breadcrumb__link.breadcrumb__link--home {
      padding-top: 15px;
      display: block;
      padding-bottom: 15px;
      font-weight: 700;
    }
    .breadcrumb__link--home .bi-house-fill {
      color: #848484;
    }
    .breadcrumb__current {
      color: white;
    }
  }
}

.ico-rea {
  width: auto;
  height: 120px;
  margin: 0 auto;
  display: block;
}

.text-rea {
  text-align: center;
  margin: 0 auto;
  display: block;
  font-weight: 900;
  font-size: 1.3em;
  margin-top: 1em;
  text-transform: uppercase;
}

.font-size-seo-ref {
  font-size: 17px;
  .bold {
    font-weight: 600;
  }
}

.padding-list-seo {
  margin-left: 16px;
  margin-bottom: 30px;
  margin-top: 10px;
  list-style: disc;
}

/* Notre expertise — seule page utilisant encore .qsn-section (Sports Co, Coupes & Trophées,
   PLV, Vêtements de travail, Techniques de marquage, Catalogue Textile retirés du site le
   2026-10-06, routes et templates supprimés). Padding du haut retiré (demande de Laura :
   "supprimer l'espace entre le titre et le menu"). */
.qsn-section {
  padding: 0 0 120px;
}
.qsn-title {
  color: #E35205;
  text-transform: uppercase;
  font-size: 20px;
  margin-bottom: 20px;
}
/* Page Notre expertise (2026-10-06, maquette fournie par Laura) */
.expertise-intro {
  font-weight: bold;
  font-size: 15px;
  color: #1e1e1e;
  margin-bottom: 40px;
}
.expertise-block__title {
  font-size: 26px;
  font-weight: bold;
  color: #1e1e1e;
  margin-bottom: 10px;
}
.expertise-block__kicker {
  color: #E35205;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 8px;
}
.expertise-block__desc {
  font-size: 15px;
  color: #3c3c3c;
  margin-bottom: 40px;
}

.page-title {
  border-bottom: 1px solid #eee;
  margin: 0px 0 20px 0;
  padding-bottom: 10px;
  font-size: 36px;
}

/* Contact */
.showroom-logos {
  margin-top: 20px;
}
.showroom-logo {
  max-height: 90px;
  width: auto;
  margin-bottom: 24px;
}

.contact-page {
  h2 {
    font-size: 18px;
    margin-bottom: 30px;
  }
  .mention-text-contact {
    font-size: 10px;
  }
  p {
    font-size: 14px;
    margin-bottom: 10px;
  }
  small {
    font-size: 12px;
  }
}

.contact-infolist {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.contact-infolist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}
.contact-infolist .bi {
  color: #E35205;
  flex-shrink: 0;
  margin-top: 3px;
}
.contact-infolist a {
  color: #1e1e1e;
}

.contact-form-card {
  border: 1px solid #e4e4e4;
  border-radius: 4px;
  overflow: hidden;
}
.contact-form-card__header {
  background-color: #f3f3f3;
  padding: 12px 20px;
  font-weight: 600;
  border-bottom: 1px solid #e4e4e4;
}
.contact-form-card__body {
  padding: 20px;
}
.contact-form-card__submit {
  width: 100%;
  text-transform: uppercase;
}

.contact-page,
.catalogue {
  .card-header {
    padding: 0.5rem 1rem 0.5rem 0rem;
    margin-bottom: 0;
    border-bottom: 1px solid #e4e4e4;
    background-color: rgba(0, 0, 0, 0);
    font-size: 17px;
    color: #1e1e1e;
    padding-top: 0px;
  }
  label {
    font-weight: bold;
  }
  .form-group {
    flex-direction: column;
    align-items: initial;
    margin-top: 10px;
  }
  .form-control {
    margin-top: 5px;
  }
  form.panel-group {
    flex-direction: column;
    align-items: initial;
  }
}

/* Checkout */
/* Couleur de marque uniquement : structure dans composent-generic.css */
.checkout-page {
  margin-bottom: 50px;
  .card-header {
    color: #1e1e1e;
  }
  .form-group label {
    font-weight: 700;
  }
}

/* "Modifier le panier" : .btn-outline (composent-generic.css) remet le texte
   à var(--c-fg) après .btn-primary, alors que le bouton garde un fond plein
   ici — texte blanc pour rester lisible. */
.il-checkout-s20 .btn-outline {
  color: #fff;
}

/* En-têtes de colonne du tableau récapitulatif (checkout-recap.liquid,
   override — absents du snippet partagé), 2026-10-05, demande de
   Laura. */
.checkout-recap thead th {
  font-weight: 700;
  color: #1e1e1e;
  border-bottom: 1px solid var(--c-border);
}

/* Product card */
.product-card {
  display: flex;
  flex-direction: column;

  h3 {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    line-height: 19px;
    min-height: 40px;
    margin-bottom: 0px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;

    a {
      color: #091F2C;
    }
  }
  .prix {
    color: #E35205;
    justify-content: center;
    span {
      margin-left: 5px;
    }
  }
  .border-product {
    position: relative;
    border: 1px solid #eee;
    padding: 10px;
  }
  button {
    margin-top: 15px;
  }
}
/* Pages catégorie / résultats de recherche (2026-10-06, demande de Laura :
   "aligner les nom des produits et les prix à gauche") — ne touche que la
   grille `.collection-grid` (collection.liquid, search.liquid), pas les
   autres usages de `.product-card` (ex. produits vedettes de page.landing). */
.collection-grid .product-card {
  h3 {
    text-align: left;
  }
  .prix {
    justify-content: flex-start;
  }
}

.product-card__img-wrap {
  width: 100%;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Fiche produit (product.liquid) : bouton d'ajout ("Demander un devis") en
   rouge/texte blanc au lieu du .btn-primary générique (fond noir du site) —
   demande de Laura 2026-10-05. #pp-add-btn ciblé par id pour ne pas changer
   .btn-primary ailleurs sur la page (ex. bouton impression juste en
   dessous). Le prix de référence (.pp-price) est en rouge via
   assets/css/product.css, chargé après ce fichier sur la fiche produit — une
   règle ici serait écrasée par la sienne (même sélecteur, spécificité égale,
   mais chargé plus tard). */
#pp-add-btn {
  background-color: #E35205;
  border-color: #E35205;
  color: #fff;
}
#pp-add-btn:hover,
#pp-add-btn:focus {
  background-color: #1e1e1e;
  border-color: #1e1e1e;
  color: #fff;
}

@keyframes swing {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(6deg);
  }
  50% {
    transform: rotate(-4deg);
  }
  75% {
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.badge-div {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  pointer-events: none;
}
.option-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.option-swatch {
  min-width: 40px;
  height: 40px;
  padding-inline: var(--s-3);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color var(--t),
    background var(--t);
  background: none;
}
.option-swatch:hover {
  border-color: var(--c-fg);
}
.option-swatch.is-active {
  border-color: var(--c-fg);
  background: var(--c-fg);
  color: var(--c-bg);
}
.qty__input {
  text-align: center;
  border-inline: 1.5px solid var(--c-border);
  font-size: var(--text-sm);
  -moz-appearance: textfield;
}
.qty__input:focus {
  outline: none;
}
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
/* Collection — bannière de catégorie (image unique, texte par catégorie via dict.category_banners) */

.category-header {
  background-color: #ededed;
  margin-bottom: 30px;
}
.category-header .breadcrumb {
  color: #333;
  margin-bottom: 4px;
}
.category-header .breadcrumb__current {
  color: #1e1e1e;
}

.collection-title {
  color: #E35205;
  font-size: 30px;
  font-weight: bold;
  margin-bottom: var(--s-3);
}

/* Catégories */
.collection-sidebar {
  h2 {
    font-size: 30px;
    color: #1e1e1e;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
  }

  input,
  select {
    font-size: 14px;
  }

  .collection-sidebar__header {
    display: block;
    width: 100%;
    border: none;
    background: none;
    padding: 0;
    text-align: left;
    cursor: default;
    pointer-events: none;
  }

  .collection-sidebar__chevron {
    display: none;
  }

  .size-swatch-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .size-swatch-label {
    cursor: pointer;

    input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }
  }

  .size-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 40px;
    border: 1.5px solid var(--c-border);
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
  }

  .size-chip:hover {
    border-color: var(--c-fg);
  }

  .size-swatch-label input:checked + .size-chip {
    background: #1e1e1e;
    border-color: #1e1e1e;
    color: #fff;
  }

  .color-swatch-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
  }

  .color-swatch-label input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .color-swatch {
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 1px solid #dadada;
    cursor: pointer;
    transition: transform 0.2s;
  }

  .color-swatch:hover {
    transform: scale(1.15);
  }

  .color-swatch-label input:checked + .color-swatch {
    box-shadow:
      0 0 0 1px rgb(0 0 0 / 71%),
      0 0 0 2px #fff,
      0 0 0 2px #dedede;
  }
}

/* Accordéon filtres — mobile uniquement, desktop inchangé */
@media (max-width: 768px) {
  .collection-sidebar {
    .collection-sidebar__header {
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      pointer-events: auto;
      padding: 0.375rem 0.75rem;
      background-color: #1e1e1e;
      color: white;
      border-radius: 4px;

      h2 {
        margin: 0;
        color: white;
        font-size: 14px;
        border: 0;
        padding: 0;
      }
    }

    .collection-sidebar__chevron {
      display: block;
      flex-shrink: 0;
      transition: transform 0.2s ease;
    }

    .collection-sidebar__header[aria-expanded="true"]
      .collection-sidebar__chevron {
      transform: rotate(180deg);
    }

    /* Bootstrap fournit le JS (bootstrap.bundle.min.js) mais seul bootstrap-grid.min.css
       est chargé sur le site : les règles de base du composant collapse (masquage,
       transition de hauteur) sont reproduites ici, scopées au mobile uniquement. */
    .collection-sidebar__body.collapse:not(.show) {
      display: none;
    }

    .collection-sidebar__body.collapsing {
      height: 0;
      overflow: hidden;
      transition: height 0.35s ease;
    }
  }
}

.collection-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  font-size: 14px;
}
.collection-toolbar__count {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 5px;
  font-size: var(--text-sm);
  color: var(--c-muted);

  strong {
    font-weight: bold;
    color: black;
  }
}
.filter-form {
  flex-direction: column;
  align-items: flex-start;

  .btn {
    width: 100%;
  }
}

.filter-group {
  padding-block: var(--s-5);
  width: 100%;
  p {
    font-size: 17px;
    width: 100%;
    margin-bottom: 10px;
  }
}
.filter-group:last-child {
  border-bottom: none;
}
.filter-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: var(--s-1) 0;
}
.filter-option__inner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.filter-option__check {
  width: 18px;
  height: 18px;
  border: 1.5px solid #ced4da;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  transition:
    background var(--t),
    border-color var(--t);
}
.filter-option input:checked + .filter-option__check,
.filter-option.is-active .filter-option__check {
  background: #1e1e1e;
  border-color: #1e1e1e;
}
.filter-option__label {
  font-size: var(--text-sm);
}
/* Cart */
.section-title {
  font-size: 28px;
  margin-bottom: 15px;
  font-weight: 500;
  padding-bottom: 10px;
}
/* Couleur de marque uniquement : structure dans composent-generic.css */
.nav-checkout .active {
  color: black;
}

/* Mega menu */
/* stylelint-disable-next-line declaration-no-important -- nécessaire : bootstrap-icons.min.css
   force font-weight:400!important sur [class^="bi-"]::before, seul !important peut gagner. */
.bi-chevron-down {
  display: flex;
  margin-left: 5px;
  &::before {
    /* stylelint-disable-next-line declaration-no-important */
    font-weight: bold !important;
  }
}

.mega-nav-wrap {
  padding-left: 0;
  padding-right: 0;
}
.mega-nav {
  position: relative;
  z-index: calc(var(--z-header) - 1);
  margin-bottom: 20px;
  margin-top: 30px;

  .mega-nav__top-item {
    text-align: center;
    padding: 10px 15px;
    > a,
    > button {
      font-size: 15px;
      color: #fff;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.mega-nav__top {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mega-nav__bar {
  background-color: #091F2C;
  position: relative;
}

.mega-nav__top-item.is-open > a,
.mega-nav__top-item.is-open > button,
.mega-nav__top-item:hover > a,
.mega-nav__top-item:hover > button {
  color: #E35205;
}

.mega-nav__top-item.is-open .mega-panel,
.mega-nav__top-item:hover .mega-panel {
  display: flex;
}

/* Panel */
.mega-panel {
  display: none;
  position: absolute;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-md);
  z-index: var(--z-header);
  width: 100%;
  left: 0;
  right: 0;
  top: 42px;
}
.mega-trigger {
  position: relative;
}
.mega-panel__left {
  width: 100%;
  flex-shrink: 0;
  overflow-y: auto;
  max-height: 600px;
}
.mega-panel__cat {
  display: flex;
  align-items: center;
  padding: 5px 15px;
  font-size: 14px;
  color: #262626;
}

.mega-panel__cat:hover {
  background: #1e1e1e;
  color: #fff;
}

/* "Objets de Comm'" : simple liste de catégories à gauche (2026-10-06,
   demande de Laura : "supprimer l'affichage des sous-catégories" — le
   volet de droite façon CPRISM retiré, chaque entrée est un lien direct
   vers sa catégorie). */
#mega-panel-produits {
  width: auto;
  right: auto;
}
#mega-panel-produits .mega-panel__left {
  width: 260px;
  flex-shrink: 0;
  background-color: #f5f5f5;
  padding: 30px;
  overflow-y: visible;
  max-height: none;
}
#mega-panel-produits .mega-panel__cat {
  font-size: 14px;
  color: #262626;
}
#mega-panel-produits .mega-panel__left .mega-panel__cat:hover {
  background: none;
  color: #E35205;
}
@media (max-width: 991.98px) {
  .mega-nav {
    display: none;
  }
}

/* Slider (hero carousel) de l'accueil (2026-10-05, demande de Laura :
   "mettre l'image du slider aligné au center du container") : `.img-fluid`
   (composent-generic.css) ne pose que `max-width:100%; height:auto`, pas
   `display:block` — un <img> reste `inline` par défaut, sur lequel
   `margin:auto` n'a aucun effet de centrage horizontal. Premier correctif
   (margin seul, sans display:block) resté sans effet pour cette raison —
   Laura a redemandé le centrage le même jour, `display:block` ajouté ici
   pour que `margin:0 auto` centre réellement l'image quand sa largeur
   naturelle est inférieure à celle du container. */
#hero-carousel .carousel-item img {
  display: block;
  margin: 0 auto;
}

/* Grille des catégories de l'accueil (pavés pleine photo, pas de fond de
   couleur derrière — le libellé est en incrustation sur l'image). */
.cat-grid {
  padding: 10px 0 40px;
}
.cat-grid__tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
}
.cat-grid__tile--large {
  height: 220px;
}
.cat-grid__tile--tall {
  height: 455px;
}
.cat-grid__stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 455px;
}
.cat-grid__tile--half {
  flex: 1 1 0;
  height: auto;
}
.cat-grid__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: all 0.35s ease-in-out;
}
.cat-grid__tile:hover .cat-grid__img {
  transform: scale(1.2);
}
.cat-grid__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 16px;
  background-color: rgba(4, 3, 2, 0.5019607843);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  transition: top 0.2s ease;
}
.cat-grid__tile:hover .cat-grid__overlay {
  top: 0;
  justify-content: center;
}
.cat-grid__label {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}
.cat-grid__sublabel {
  color: #fff;
  font-size: 12px;
}

.pro {
  color: #1e1e1e;
  font-weight: bold;
  padding: 30px;
}

.plan-site {
  h2 {
    font-weight: bold;
  }
  h3 {
    font-size: 18px;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .footer {
    img {
      width: 100%;
    }
  }
}

@media (max-width: 500px) {
  .border-categories {
    display: none;
  }
  .footer {
    img {
      width: 60%;
    }
  }
  .header {
    padding: 0 12px;
    .mobile-menu-toggle {
      margin-left: 15px;
    }
    .bi-list {
      font-size: 40px;
      color: #fff;
    }
  }
}

/* Plan du site */
.plan-du-site__list {
  padding: 0;
  list-style: none;
  line-height: 1.8;
}
.plan-du-site__list a {
  color: inherit;
}
.plan-du-site__list a:hover {
  color: #1e1e1e;
}
.plan-du-site__sublist {
  padding-left: 1.25rem;
  margin: 0.25rem 0 0.75rem;
  line-height: 1.6;
  font-size: 0.9em;
}
.plan-du-site__sublist a {
  color: #6b6b6b;
}
/* Listes catégories/sous-catégories très longues : réparties en colonnes façon
   journal plutôt qu'une seule colonne interminable. */
.plan-du-site__list--columns {
  columns: 3;
  column-gap: 2.5rem;
}
.plan-du-site__list--columns > li {
  break-inside: avoid-column;
  margin-bottom: 0.5rem;
}
@media (max-width: 991px) {
  .plan-du-site__list--columns {
    columns: 2;
  }
}
@media (max-width: 575px) {
  .plan-du-site__list--columns {
    columns: 1;
  }
}

.references,
.modele,
.catalogue {
  .bandeau {
    background-image: url(//static3.promotool.net/Org/M3085x238180.jpg);
    background-size: cover;
    background-position: center;
    padding: 50px 0;
  }
  .breadcrumb {
    justify-content: center;
  }
  h1 {
    margin-top: 10px;
    font-size: 48px;
    font-weight: 600;
    color: #000;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 20px;
  }
  h2 {
    border-bottom: 1px solid #eee;
    margin: 40px 0 20px 0;
    padding-bottom: 10px;
    font-size: 36px;
  }
  p {
    font-size: 18px;
  }
}

/* Bandeau USP accueil */
.usp-headline {
  color: #1e1e1e;
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
}

.btn-catalogue {
  background-color: #E35205;
  border-color: #E35205;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  width: 250px;
  padding: 10px;
}
.btn-catalogue:hover,
.btn-catalogue:focus {
  background-color: #E35205;
  color: #fff;
}

/* "Effacer les filtres" (sidebar des pages catégorie) : fond rouge du site,
   texte blanc (2026-10-05, demande de Laura), au lieu du style ghost/muted
   générique partagé avec d'autres boutons .btn-ghost (icônes du header) —
   ciblé par id pour ne pas les affecter. */
#filter-clear-btn {
  background-color: #E35205;
  border-color: #E35205;
  color: #fff;
}
#filter-clear-btn:hover,
#filter-clear-btn:focus {
  background-color: #1e1e1e;
  border-color: #1e1e1e;
  color: #fff;
}

.qsn-section p {
  font-size: 15px;
}

/* Page Évènements (2026-10-06, nouvelle page, maquette fournie par Laura) */
.evenements-page {
  padding-block: 40px;
}
.event-card {
  margin-bottom: 50px;
}
.event-card__img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 450px;
  margin: 0 auto 15px;
  border-radius: 4px;
}
.event-card__title {
  font-size: 22px;
  font-weight: bold;
  color: #1e1e1e;
  margin-bottom: 4px;
}
.event-card__category {
  color: #E35205;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 13px;
  margin-bottom: 8px;
}
.event-card__desc {
  font-size: 14px;
  color: #3c3c3c;
}