@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

/* 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: "Roboto", sans-serif;
}
html {
  height: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  min-height: 100%;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #323232;
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}
/* 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;
}

.header-search-label {
  text-align: center;
  font-size: 16px;
  margin-bottom: 5px;
  font-weight: bold;
}

/* 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);
}
.input-search:focus {
  outline: none;
  border-color: #4accd4;
}
.btn-search {
  border: 1px solid #4accd4;
  background-color: #4accd4;
  color: #fff;
  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);
}
.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: #4accd4;
  font-weight: 700;
}

.logo {
  width: 90%;
}

/* Header */
.header {
  margin-top: 20px;

  .text-phone-header,
  .text-mail-header {
    display: inline-flex;
    align-items: center;
    color: #3c3c3c;
    font-weight: bold;
    &:hover {
      text-decoration: underline;
      color: #4accd4;
    }
  }
  .text-phone-header {
    font-size: 24px;
  }
  .text-mail-header {
    font-size: 16px;
    color: #4accd4;
  }
  .header-social {
    display: flex;
    justify-content: center;
    gap: 8px;
  }
  .header-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 32px;
  }
  .header-social__link:has(.bi-facebook) {
    color: #1877f2;
  }
  .header-social__link:has(.bi-youtube) {
    color: #ff0000;
  }
  small {
    color: black;
  }
}

.announcement-bar {
  background-color: #4accd4;
  color: white;
  padding: 5px 12px;
  font-size: 16px;
  a {
    font-size: 20px;
  }
  .panier-bulle {
    color: #fff;
    border: 1px solid white;
    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: #4accd4;
  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 {
  padding-top: 50px;
  font-size: 14px;
  color: #000;
  background-color: #f4772e;

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

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

  .link-footer {
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.3);
    width: 100%;
    display: block;
    padding: 10px 15px;
    &:hover {
      text-decoration: none;
      background-color: rgba(255, 255, 255, 0.15);
    }
  }

  .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;
    }
  }

  .footer-social {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    justify-content: flex-start;
  }
  .footer-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 32px;
  }
  .footer-social__link:has(.bi-facebook) {
    color: #1877f2;
  }
  .footer-social__link:has(.bi-youtube) {
    color: #ff0000;
  }

  h4 {
    font-size: 14px;
    font-weight: bold;
    color: #323232;
  }

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

  .copyright {
    background-color: #f4772e;
    color: #000;
    padding: 15px 12px;
    margin-top: 30px;
    font-size: 13px;

    a {
      color: #000;
    }
  }

  .copyright__federation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    text-align: right;
    font-size: 10px;
  }
  .copyright__federation-logo {
    height: 20px;
    width: auto;
    flex-shrink: 0;
  }
  @media (max-width: 767px) {
    .copyright__federation {
      justify-content: center;
      text-align: center;
      margin-top: 10px;
    }
  }
}

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

.disclaimer-home {
  padding: 30px 0;
  text-align: center;
}
.disclaimer-home__text {
  color: #f4772e;
  font-weight: 700;
  font-size: 14px;
  margin: 0;
}

.background-referencement {
  padding: 50px 0;
  background-color: #4accd4;
  color: #1a1a1a;
  text-align: center;
  font-weight: 700;
}

.ih-item {
  position: relative;

  a {
    display: block;
    color: #333;
  }
  a:hover {
    text-decoration: none;
  }
}

.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: #ff803b;
  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;
}

/* Qui sommes-nous */
.nom-equipe {
  color: #4accd4;
  font-weight: bold;
}
.qui-sommes-nous-page h1,
.qui-sommes-nous-page h2,
.qui-sommes-nous-page h3 {
  color: #000;
}
/* .text-uppercase (Bootstrap) n'existe pas ici : seul bootstrap-grid.min.css
   est charge, pas les utilitaires. Les titres de cette page l'utilisaient
   sans effet - transform applique directement au lieu de la classe. */
.qui-sommes-nous-page h2,
.qui-sommes-nous-page h3 {
  text-transform: uppercase;
}
.qui-sommes-nous-page h2 {
  font-size: 30px;
}

.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-emails a {
    color: #4accd4;
  }
}

.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: #4accd4;
    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: #4accd4;
  }
}

/* "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;
}

/* 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;
  }
  .prix {
    color: #cf035c;
    span {
      margin-left: 5px;
    }
  }
  .border-product {
    position: relative;
    border: 1px solid #eee;
    padding: 10px;
  }
  button {
    margin-top: 15px;
  }
}

.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;
}

@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;
}
.product-card__title {
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-fg);
}
.product-card__price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-top: var(--s-1);
}
.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 .breadcrumb {
  color: #333;
  background-color: #f5f5f5;
  border-radius: 4px;
  padding: 8px 15px;
  margin-bottom: 20px;
}
.category-header .breadcrumb__current {
  color: #4accd4;
}
.category-header__title {
  margin-bottom: var(--s-3);
  color: #4accd4;
}
.category-header__desc {
  max-width: 600px;
  font-size: var(--text-base);
  line-height: 1.6;
  color: rgba(50, 50, 50, 0.9);
}

@media (max-width: 640px) {
  .category-header {
    padding-block: var(--s-6);
  }
}

/* Catégories */
.collection-sidebar {
  h2 {
    font-size: 30px;
    color: #4accd4;
    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: #4accd4;
    border-color: #4accd4;
    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: #4accd4;
      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: #4accd4;
  border-color: #4accd4;
}
.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 {
  position: relative;
  z-index: calc(var(--z-header) - 1);
  margin-bottom: 50px;
  margin-top: 30px;

  .mega-nav__top-item {
    display: table-cell;
    width: 1%;
    text-align: center;
    padding: 10px 15px;
    > a,
    > button {
      font-size: 15px;
      color: #3c3c3c;
      font-weight: bold;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.mega-nav__bar {
  background-color: #4accd4;
}

.mega-nav__top-item.is-open,
.mega-nav__top-item:hover {
  background-color: #3bb0b8;
  color: #fff;
}

.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: #fff;
}

.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: #4accd4;
  color: #fff;
}
@media (max-width: 991.98px) {
  .mega-nav {
    display: none;
  }
}

.categorie-home {
  padding: 40px 0;
  background-color: #ededed;
  h2 {
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 30px;
    color: #4accd4;
  }
  .row > div {
    margin-bottom: 24px;
  }
  .cat-tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 50%;
    aspect-ratio: 1;
    max-width: 80%;
    margin: 0 auto;
  }
  .cat-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .cat-tile__label {
    display: block;
    text-align: center;
    font-size: 24px;
    font-weight: 400;
    color: #e6007e;
    margin-bottom: 12px;
  }
}

.pro {
  color: #4accd4;
  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: #4accd4;
    }
    .header-search-label {
      font-size: 13px;
    }
  }
}

/* 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: #4accd4;
}
.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: #4accd4;
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
}

/* Page Techniques de marquage */
.marquage-intro {
  margin-bottom: 30px;
}
.marquage-card {
  border: 1px solid #e4e4e4;
  border-radius: 6px;
  padding: 24px;
  margin-bottom: 24px;
  h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
  }
}
.marquage-card__img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  object-fit: cover;
}
.marquage-card__img--small {
  max-width: 60%;
  display: block;
  margin: 0 auto;
}

/* Bandeau flottant des pages categorie/liste, image aleatoire (voir
   collection.liquid). Position verticale (top) pilotee en JS : alignee
   sous le menu en haut de page, puis collee en haut de l'ecran des
   qu'on scrolle. */
.side-banner {
  position: fixed;
  right: 0;
  width: 130px;
  z-index: 10;
  transition: top 0.15s ease;
}
.side-banner__img {
  width: 100%;
  height: auto;
  display: block;
}